@charset "UTF-8";
/*
theme Name:Y-style-beauty
Author:mayusa1329
Description:美容関連サイトのテーマ
Version:1.0.0
*/
/* $root-fs:62.5%;
    $default-fs:1.6rem;
    $fs-10:1rem;
    $fs-11:1.1rem;
    $fs-12:1.2rem;
    $fs-13:1.3rem;
    $fs-14:1.4rem;
    $fs-15:1.5rem;
    $fs-16:1.6rem;
    $fs-18:1.8rem;
    $fs-20:2rem;
    $fs-22:2.2rem;
    $fs-24:2.4rem;
    $fs-26:2.6rem;
    $fs-30:3rem; */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
* {
  box-sizing: border-box;
}

html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

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

/* Sections
     ========================================================================== */
/**
   * Remove the margin in all browsers.*/
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li,
ol,
dl,
dt,
dd,
p {
  /* 以後pも入れること*/
  margin: 0;
  padding: 0;
}

/* ↑もともとスペースが入っているので、ゼロにしてフラットな状態に指定する*/
/**
   * Render the `main` element consistently in IE.
   */
main {
  display: block;
}

/**
   * Correct the font size and margin on `h1` elements within `section` and
   * `article` contexts in Chrome, Firefox, and Safari.
   */
h1 {
  font-size: 2em;
}

/* Grouping content
     ========================================================================== */
/**
   * 1. Add the correct box sizing in Firefox.
   * 2. Show the overflow in Edge and IE.
   */
hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
  margin-top: 55px;
}

/**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/* Text-level semantics
     ========================================================================== */
/**
   * Remove the gray background on active links in IE 10.
   */
a {
  background-color: transparent;
}

/**
   * 1. Remove the bottom border in Chrome 57-
   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
   */
abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  text-decoration: underline dotted;
  /* 2 */
}

/**
   * Add the correct font weight in Chrome, Edge, and Safari.
   */
b,
strong {
  font-weight: bolder;
}

/**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/**
   * Add the correct font size in all browsers.
   */
small {
  font-size: 80%;
}

/**
   * Prevent `sub` and `sup` elements from affecting the line height in
   * all browsers.
   */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
     ========================================================================== */
/**
   * Remove the border on images inside links in IE 10.
   */
img {
  border-style: none;
}

/* Forms
     ========================================================================== */
/**
   * 1. Change the font styles in all browsers.
   * 2. Remove the margin in Firefox and Safari.
   */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */
}

/**
   * Show the overflow in IE.
   * 1. Show the overflow in Edge.
   */
button,
input {
  /* 1 */
  overflow: visible;
}

/**
   * Remove the inheritance of text transform in Edge, Firefox, and IE.
   * 1. Remove the inheritance of text transform in Firefox.
   */
button,
select {
  /* 1 */
  text-transform: none;
}

/**
   * Correct the inability to style clickable types in iOS and Safari.
   */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
   * Remove the inner border and padding in Firefox.
   */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
   * Restore the focus styles unset by the previous rule.
   */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
   * 1. Correct the text wrapping in Edge and IE.
   * 2. Correct the color inheritance from `fieldset` elements in IE.
   * 3. Remove the padding so developers are not caught out when they zero out
   *    `fieldset` elements in all browsers.
   */
legend {
  box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */
}

/**
   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
   */
progress {
  vertical-align: baseline;
}

/**
   * Remove the default vertical scrollbar in IE 10+.
   */
textarea {
  overflow: auto;
}

/**
   * 1. Add the correct box sizing in IE 10.
   * 2. Remove the padding in IE 10.
   */
[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
   * Correct the cursor style of increment and decrement buttons in Chrome.
   */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
   * 1. Correct the odd appearance in Chrome and Safari.
   * 2. Correct the outline style in Safari.
   */
[type=search] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/**
   * Remove the inner padding in Chrome and Safari on macOS.
   */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
   * 1. Correct the inability to style clickable types in iOS and Safari.
   * 2. Change font properties to `inherit` in Safari.
   */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/* Interactive
     ========================================================================== */
/*
   * Add the correct display in Edge, IE 10+, and Firefox.
   */
details {
  display: block;
}

/*
   * Add the correct display in all browsers.
   */
summary {
  display: list-item;
}

/* Misc
     ========================================================================== */
/**
   * Add the correct display in IE 10+.
   */
template {
  display: none;
}

/**
   * Add the correct display in IE 10.
   */
[hidden] {
  display: none;
}

/* 全デバイス共通のstyle */
* {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

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

a {
  text-decoration: none;
}

a:link,
a:visited,
a:hover,
a:active {
  color: rgb(83, 68, 49);
}

.newmark {
  width: 50px;
  height: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FFF;
  font-size: 12px;
  background-color: rgb(235, 147, 166);
}

/*リンクテキストに対してマウスオーバーした際、透明度を指定して変化*/
#index a:hover,
#concept a:hover,
#news a:hover,
#salon a:hover,
#price a:hover,
#staff a:hover,
#hairstyle a:hover {
  cursor: pointer;
  /* マウスカーソルを手の形にする */
  opacity: 0.7;
  /* ボタンの透明度を70%にする */
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}

@media screen and (min-width: 320px) {
  /* body#first, */
  /*6行目から8行目は書かなくてもOK*/
  header {
    position: fixed;
    z-index: 10;
    width: 100%;
    background-color: aliceblue;
    height: 135px;
    /* spのheaderの終了 */
    /*メニューを非表示*/
  }
  header h1,
  header p {
    width: 125px;
    padding-left: 8px;
    padding-top: 10px;
  }
  header .header-inner {
    /* sp header ハンバーガーメニューが通常の場合の終了 */
    /* spのdiv.header-inner の終了 */
  }
  header .header-inner .header-navi {
    padding-top: 6vh;
    top: 18px;
    right: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    list-style: none;
    position: absolute;
  }
  header .header-inner .header-navi li {
    font-size: 1rem;
    float: none;
    text-align: right;
  }
  header .header-inner .header-navi .header-navi1 {
    line-height: 15px;
    width: 15rem;
  }
  header .header-inner .header-navi .header-navi2 {
    line-height: 30px;
    font-size: 2rem;
  }
  header .header-inner .header-navi .header-navi3 {
    width: 13vw;
    height: 7vw;
    line-height: 7vw;
    text-align: center;
    background-color: #e0689d;
    position: absolute;
    top: 0;
    right: 21vw;
    font-size: 2rem;
  }
  header .header-inner .header-navi .reserve {
    color: #ffffff;
    font-family: "Times New Roman";
  }
  header .header-inner .humberger-wrap {
    display: block;
    position: absolute;
    top: 0px;
    right: 10px;
    width: 40px;
    height: 50px;
    background: rgba(255, 255, 0, 0);
    cursor: pointer;
  }
  header .header-inner .humberger-wrap .humberger-border-1 {
    top: 20px;
    right: 0;
  }
  header .header-inner .humberger-wrap .humberger-border-2 {
    top: 30px;
    right: 0;
  }
  header .header-inner .humberger-wrap .humberger-border-3 {
    top: 40px;
    right: 0;
  }
  header .header-inner .humberger-wrap [class*=humberger-border] {
    position: absolute;
    width: 40px;
    height: 2px;
    transition: 0.4s all ease;
    transform-origin: center center;
    background: #333;
  }
  header .header-inner .humberger-wrap.opened {
    /*開閉ボタンopen時の横線1本目*/
    /*開閉ボタンopen時の横線2本目*/
    /*開閉ボタンopen時の横線3本目*/
  }
  header .header-inner .humberger-wrap.opened .humberger-border-1 {
    top: 30px;
    transform: rotate(45deg);
  }
  header .header-inner .humberger-wrap.opened .humberger-border-2 {
    top: 30px;
    transform: rotate(-45deg);
  }
  header .header-inner .humberger-wrap.opened .humberger-border-3 {
    top: 30px;
    transform: rotate(-45deg);
    opacity: 0;
  }
  header nav {
    display: none;
  }
  /* spのハンバーガーをオープンにした際の指示*/
  header.opened {
    background: #f1f1f1;
  }
  header.opened .global-navi {
    display: none;
    display: block;
    min-height: 34vh;
    opacity: 1;
    top: 60px;
    width: 100%;
    background: #ddd;
    text-align: center;
    position: absolute;
    top: 135px;
  }
  header.opened .global-navi .global-navi-inner {
    width: 100vw;
    z-index: 101;
    display: flex;
    flex-direction: column;
    background: #c7e1dd;
    padding-bottom: 2vh;
  }
  header.opened .global-navi .global-navi-inner li {
    float: none;
    padding: 0 30px;
    font-size: 2rem;
    line-height: 7.44vh;
    text-align: center;
  }
  header.opened .global-navi a {
    display: block;
    padding: 0 30px;
    color: #71aca9;
  }
}
@media screen and (min-width: 600px) {
  /* body#first, */
  header {
    position: fixed;
    z-index: 10;
    width: 100%;
    background-color: aliceblue;
    height: 165px;
    /* spのheaderの終了 */
    /*メニューを非表示*/
  }
  header h1,
  header p {
    width: 30%;
    max-width: fit-content;
    padding-left: 20px;
    padding-top: 10px;
  }
  header .header-inner {
    /* sp header ハンバーガーメニューが通常の場合の終了 */
    /* spのdiv.header-inner の終了 */
  }
  header .header-inner .header-navi {
    padding-top: 6vh;
    top: 18px;
    right: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    list-style: none;
    position: absolute;
  }
  header .header-inner .header-navi li {
    font-size: 1rem;
    float: none;
    text-align: right;
  }
  header .header-inner .header-navi .header-navi1 {
    line-height: 15px;
    width: 15rem;
    margin-top: 4rem;
  }
  header .header-inner .header-navi .header-navi2 {
    line-height: 30px;
    font-size: 2rem;
  }
  header .header-inner .header-navi .header-navi3 {
    width: 13vw;
    height: 7vw;
    line-height: 7vw;
    text-align: center;
    background-color: #e0689d;
    position: absolute;
    top: 0;
    right: 10vw;
    font-size: 2rem;
  }
  header .header-inner .header-navi .reserve {
    color: #ffffff;
    font-family: "Times New Roman";
  }
  header .header-inner .humberger-wrap {
    display: block;
    position: absolute;
    top: 0px;
    right: 10px;
    width: 40px;
    height: 50px;
    background: rgba(255, 255, 0, 0);
    cursor: pointer;
  }
  header .header-inner .humberger-wrap .humberger-border-1 {
    top: 20px;
    right: 0;
  }
  header .header-inner .humberger-wrap .humberger-border-2 {
    top: 30px;
    right: 0;
  }
  header .header-inner .humberger-wrap .humberger-border-3 {
    top: 40px;
    right: 0;
  }
  header .header-inner .humberger-wrap [class*=humberger-border] {
    position: absolute;
    width: 40px;
    height: 2px;
    transition: 0.4s all ease;
    transform-origin: center center;
    background: #333;
  }
  header .header-inner .humberger-wrap.opened {
    /*開閉ボタンopen時の横線1本目*/
    /*開閉ボタンopen時の横線2本目*/
    /*開閉ボタンopen時の横線3本目*/
  }
  header .header-inner .humberger-wrap.opened .humberger-border-1 {
    top: 30px;
    transform: rotate(45deg);
  }
  header .header-inner .humberger-wrap.opened .humberger-border-2 {
    top: 30px;
    transform: rotate(-45deg);
  }
  header .header-inner .humberger-wrap.opened .humberger-border-3 {
    top: 30px;
    transform: rotate(-45deg);
    opacity: 0;
  }
  header nav {
    display: none;
  }
  /* spのハンバーガーをオープンにした際の指示*/
  header.opened {
    background: #f1f1f1;
  }
  header.opened navi {
    display: none;
    display: block;
    min-height: 34vh;
    opacity: 1;
    top: 60px;
    width: 100%;
    background: #ddd;
    text-align: center;
    position: absolute;
    top: 165px;
  }
  header.opened navi .global-navi-inner {
    width: 100vw;
    height: 75vh;
    z-index: 101;
    display: flex;
    flex-direction: column;
    background: #c7e1dd;
    padding-bottom: 2vh;
  }
  header.opened navi .global-navi-inner li {
    float: none;
    padding: 0 30px;
    font-size: 2rem;
    line-height: 7.44vh;
    text-align: center;
  }
  header.opened navi a {
    display: block;
    padding: 0 30px;
    color: #71aca9;
  }
}
@media screen and (min-width: 1025px) {
  /* body#first, */
  header {
    display: flex;
    justify-content: space-between;
    height: 175px;
  }
  header h1,
  header p {
    width: 15%;
    max-width: fit-content;
    padding-left: 20px;
    padding-top: 10px;
  }
  header h1 a,
  header p a {
    cursor: pointer;
    text-decoration: none;
    color: #000;
  }
  header .header-inner {
    width: 80%;
    /*headerを固定する z-indexの指定も忘れないように　*/
    z-index: 1000;
    background-color: aliceblue;
  }
  header .header-inner .header-navi {
    height: 70px;
    width: 470px;
    list-style: none;
    display: flex;
    flex-direction: row;
    padding: 0;
  }
  header .header-inner .header-navi li {
    font-size: 1rem;
    line-height: 70px;
  }
  header .header-inner .header-navi .header-navi1 {
    width: 195px;
    line-height: 70px;
    font-size: 1.5rem;
    text-align: left;
  }
  header .header-inner .header-navi .header-navi2 {
    width: 135px;
    line-height: 70px;
    font-size: 1.5rem;
    text-align: left;
  }
  header .header-inner .header-navi .header-navi3 {
    width: 90px;
    height: 70px;
    text-align: center;
    background-color: #71aca9;
    position: static;
    line-height: 70px;
  }
  header .header-inner .header-navi .header-navi3:hover {
    cursor: pointer;
    /* マウスカーソルを手の形にする */
    opacity: 0.7;
    /* ボタンの透明度を70%にする */
  }
  header .header-inner .header-navi .reserve {
    background-color: #e0689d;
  }
  header .header-inner .humberger-wrap {
    display: none;
  }
  header .global-navi {
    position: relative;
    display: block;
  }
  header .global-navi .global-navi-inner {
    position: absolute;
    width: 65vw;
    top: 100px;
    display: flex;
    justify-content: space-between;
    font-size: calc(14px + 6 * (100vw - 1025px) / 1215);
  }
  header .global-navi .global-navi-inner li {
    line-height: 50px;
    cursor: pointer;
  }
  header .global-navi .global-navi-inner li a {
    line-height: 60px;
    display: block;
    height: 60px;
    color: #71aca9;
  }
}
/* PC headerの終了 */
@media screen and (min-width: 320px) {
  /* body#concept, */
  footer {
    width: 100%;
    height: auto;
    padding-bottom: 30px;
    background-color: aliceblue;
  }
  footer .sns-navi {
    margin: 0px 40px 50px;
    padding-top: 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0px 29px;
    height: 11rem;
    list-style: none;
  }
  footer .sns-navi .f-item {
    width: 60px;
    height: 60px;
    cursor: pointer;
    opacity: 0.7;
  }
  footer .footer-navi .footer-navi-inner {
    text-align: center;
    width: 80%;
    display: flex;
    flex-flow: column;
    justify-content: center;
    margin: 40px auto;
    font-size: 2rem;
    list-style: none;
  }
  footer .footer-navi .footer-navi-inner li {
    line-height: 50px;
    padding: 0 30px;
  }
  footer .footer-navi .footer-navi-inner li a {
    color: #71aca9;
  }
  footer hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #cccccc;
    margin: 1em 0;
    padding: 0;
  }
  .copyright {
    font-size: 1rem;
    text-align: center;
    margin: 0 auto;
    padding-top: 5px;
    color: #cccccc;
  }
  .gotop {
    display: block;
    width: 40px;
    height: 40px;
    box-sizing: border-box;
    padding-top: 30px;
    opacity: 0.5;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10000;
  }
  .gotop:before {
    content: "";
    display: block;
    border-top: 2px solid #333;
    border-right: 2px solid #333;
    width: 25%;
    height: 25%;
    top: 25%;
    left: 0;
    right: 0;
    margin: auto;
    position: absolute;
    transform: rotate(-45deg);
  }
  .gotop:hover {
    opacity: 1;
  }
  /* sp footerの終了  */
}
@media screen and (min-width: 600px) {
  footer .sns-navi {
    margin: 0 auto 0;
    gap: 0px 50px;
  }
  footer .sns-navi li.f-item {
    width: 75px;
    height: 75px;
  }
  footer .footer-navi {
    margin: 70px auto 40px;
  }
  footer .footer-navi .footer-navi-inner {
    width: 80%;
    display: flex;
    flex-wrap: wrap;
    /*  justify-content: space-between; */
    margin: 60px auto;
    flex-direction: row;
    font-size: calc(15px + 6 * (100vw - 600px) / 424);
  }
  footer .footer-navi .footer-navi-inner li {
    line-height: 50px;
    padding: 0 10px;
    width: 20%;
  }
}
@media screen and (min-width: 1025px) {
  footer {
    width: 100%;
    aspect-ratio: 5/1;
    padding-bottom: 30px;
    background-color: aliceblue;
    display: block;
    padding-top: 10px;
  }
  footer .sns-navi {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto 0;
    justify-content: center;
    align-items: center;
    gap: 0px 74px;
    height: 11rem;
  }
  footer .sns-navi li {
    list-style: none;
  }
  footer .sns-navi .contact {
    width: 150px;
    height: 70px;
    background-color: #71aca9;
    text-align: center;
    font-size: 20px;
    line-height: 70px;
    list-style: none;
    border-radius: 10px;
    /* 角の丸み */
    cursor: pointer;
    /* マウスカーソルを手の形にする */
    opacity: 0.7;
    /* ボタンの透明度を70%にする */
  }
  footer .sns-navi .contact a:link {
    color: #fff;
  }
  footer .sns-navi .contact a:hover {
    color: #fff;
  }
  footer .sns-navi .contact a:visited {
    color: #fff;
  }
  footer .sns-navi .contact a:active {
    color: #fff;
  }
  footer .sns-navi .f-item {
    width: 70px;
    height: 70px;
    cursor: pointer;
    /* マウスカーソルを手の形にする */
    opacity: 0.7;
    /* ボタンの透明度を70%にする */
  }
  footer .footer-navi .footer-navi-inner {
    width: 80%;
    display: flex;
    flex-wrap: nowrap;
    /*  justify-content: space-between; */
    margin: 60px auto;
    flex-direction: row;
    font-size: calc(14px + 6 * (100vw - 1025px) / 1215);
  }
  footer .footer-navi .footer-navi-inner li {
    line-height: 50px;
    padding: 0 30px;
    list-style: none;
  }
  footer .footer-navi .footer-navi-inner li a {
    color: #71aca9;
  }
  footer hr {
    height: 2px;
    background-color: #cccccc;
    border: none;
  }
  footer .copyright {
    font-size: 1rem;
    text-align: center;
    margin: 0 auto;
    padding-top: 5px;
    color: #cccccc;
  }
}
@media screen and (min-width: 320px) {
  .page-home {
    /* sp main-visual終了 */
  }
  .page-home .main-visual .slider {
    height: auto;
  }
  .page-home .main-visual .open-botton {
    width: 120px;
    height: 120px;
    right: 10px;
    top: 155px;
    background-color: #71aca9;
    text-align: center;
    border-radius: 50%;
    line-height: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
  }
  .page-home .main-visual .open-botton p:nth-child(1) a {
    font-size: 22px;
    color: #ffffff;
  }
  .page-home .main-visual .open-botton p:nth-child(1):hover {
    cursor: pointer;
    /* マウスカーソルを手の形にする */
    opacity: 0.7;
    /* ボタンの透明度を70%にする */
  }
  .page-home .main-visual .open-botton p:nth-child(2) {
    font-size: 15px;
    color: #FFF;
    margin-top: 10%;
  }
  .page-home .main-visual::before {
    height: 135px;
    content: "";
    display: block;
  }
  .page-home .wrapper {
    width: 100%;
    position: static;
    /*  top: clamp(388px, calc(134.97674418604652px + 79.06976744186046vw), 490px);
    left: 0;
    right: 0;
    margin: auto; */
  }
  .page-home .wrapper main {
    width: 95%;
    font-size: 1.3rem;
    min-width: 0px;
    text-align: center;
    line-height: 1.8;
    margin: 30px auto 30px;
    background-color: #fff;
  }
  .page-home .wrapper main .main-top p {
    font-size: 1.4rem;
  }
  .page-home .wrapper main .concept-botton {
    width: 95%;
    height: 40px;
    line-height: 40px;
    font-size: 25px;
    margin: 45px auto 0;
    background-color: #c7e1dd;
    text-align: center;
  }
  .page-home .wrapper main .concept-botton a {
    font-family: "Times New Roman";
    color: #ffffff;
  }
  .page-home .wrapper main .news {
    width: 95%;
    margin: 45px auto 0;
  }
  .page-home .wrapper main .news h2 {
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 25px;
    background-color: #c7e1dd;
    text-align: center;
    font-family: "Times New Roman";
    color: #fff;
  }
  .page-home .wrapper main .news ul {
    flex-direction: column;
    margin-top: 12%;
    width: fit-content;
  }
  .page-home .wrapper main .news ul li {
    white-space: nowrap;
  }
  .page-home .wrapper main .news ul li a {
    display: flex;
    gap: 5px;
    align-items: center;
  }
  .page-home .wrapper main .news ul li a h3 {
    order: 2;
    color: #555;
    font-weight: normal;
  }
  .page-home .wrapper main .news ul li a p {
    order: 1;
  }
  .page-home .wrapper main .news ul li a .newmark {
    order: 3;
    width: 35px;
    height: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFF;
    font-size: 12px;
    background-color: rgb(235, 147, 166);
  }
  .page-home .wrapper main .news .news-all {
    display: flex;
    justify-content: right;
    margin-top: 20px;
  }
  .page-home .wrapper main .f-container {
    width: 95%;
    flex-direction: column;
    margin: 55px auto 0px;
    min-width: 297px;
    max-width: 480px;
  }
  .page-home .wrapper main .f-container li {
    width: 100%;
    list-style: none;
    position: relative;
  }
  .page-home .wrapper main .f-container li p {
    font-size: 155%;
    width: 139px;
    height: 87px;
    background-color: #a6bdbc;
    color: #FFFFFF;
    opacity: 0.8;
    text-align: center;
    line-height: 87px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
  }
  .page-home .wrapper main .f-container li.f-item-left {
    margin-left: 0%;
    margin-right: 0%;
    margin-top: 30px;
  }
  .page-home .wrapper main .f-container li.f-item-right {
    margin-right: 0%;
    margin-left: 0%;
    margin-top: 30px;
  }
  .page-home .wrapper main .map {
    margin-top: 40px;
    width: 100%;
    aspect-ratio: 100/75;
    /*mapサイズのヨコ/タテの比率を指定*/
  }
  .page-home .wrapper main .map iframe {
    width: 100%;
    height: 100%;
  }
  .page-home .wrapper main .salon {
    margin-top: 40px;
  }
  .page-home .wrapper main .salon .access {
    font-size: 1.3rem;
  }
  .page-home .wrapper main .salon .access h2 {
    font-size: 2rem;
    color: #555;
  }
  .page-home .wrapper main .salon .access .address {
    margin-top: 1rem;
  }
  .page-home .wrapper main .salon .access h3 {
    font-size: 1.5rem;
    margin-top: 3rem;
    color: #555;
  }
  .page-home .wrapper main .salon hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #cccccc;
    margin: 4em 0;
    padding: 0;
  }
  .page-home .wrapper main .salon .content3 h2 {
    font-size: 2rem;
    margin-top: 3rem;
    color: #555;
  }
  .page-home .wrapper main .salon .content3 ul {
    list-style: none;
  }
  .page-home .wrapper main .salon .box {
    margin-top: 30px;
    padding: 35px 18px;
    font-size: 0.6rem;
    width: auto;
    font-weight: normal;
    border: solid 2px #cccccc;
    border-radius: 10px;
    text-align: center;
    line-height: 1.5;
    clear: both;
  }
  .page-home .wrapper main .salon .box a h2 {
    font-size: 2rem;
    color: #555;
  }
  .page-home .wrapper main .salon .box a p {
    font-size: 1.3rem;
  }
  .page-home .wrapper main .salon .contact {
    width: auto;
    height: 40px;
    margin: 35px auto 0;
    text-align: center;
    background-color: #71aca9;
    opacity: 0.7;
    border-radius: 10px;
    line-height: 40px;
  }
  .page-home .wrapper main .salon .contact li a {
    color: #fff;
    font-size: 20px;
  }
}
/* sp main終了 */
@media screen and (min-width: 450px) {
  .page-home .main-visual .open-botton {
    position: absolute;
    width: calc(120px + 50 * (100vw - 450px) / 149);
    height: calc(120px + 50 * (100vw - 450px) / 149);
    right: calc(10px + 27 * (100vw - 450px) / 149);
    top: calc(155px + 25 * (100vw - 450px) / 149);
    background-color: #71aca9;
    text-align: center;
    border-radius: 50%;
    line-height: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .page-home .main-visual .open-botton p:nth-child(1) a {
    font-size: calc(22px + 10 * (100vw - 450px) / 149);
    color: #ffffff;
  }
  .page-home .main-visual .open-botton p:nth-child(1):hover {
    cursor: pointer;
    /* マウスカーソルを手の形にする */
    opacity: 0.7;
    /* ボタンの透明度を70%にする */
  }
  .page-home .main-visual .open-botton p:nth-child(2) {
    font-size: calc(16px + 4 * (100vw - 450px) / 149);
    color: #FFF;
    margin-top: 10%;
  }
  .page-home .wrapper {
    width: 100%;
    position: static;
    /* top: clamp(490px, calc(172.88590604026848px + 70.46979865771812vw), 595px);
    left: 0;
    right: 0;
    margin: auto; */
  }
  .page-home .wrapper main {
    width: 95%;
    font-size: 1.5rem;
    text-align: center;
    line-height: 1.8;
    margin: 30px auto 30px;
    background-color: #ffffff;
  }
  .page-home .wrapper main .main-top p {
    font-size: 1.6rem;
  }
  .page-home .wrapper main .concept-botton {
    width: 95%;
    height: 40px;
    line-height: 40px;
    font-size: 25px;
    margin: 45px auto 0;
    background-color: #c7e1dd;
    text-align: center;
  }
  .page-home .wrapper main .concept-botton a {
    font-family: "Times New Roman";
    color: #ffffff;
  }
  .page-home .wrapper main .news {
    width: 95%;
    margin: 45px auto 0;
  }
  .page-home .wrapper main .news h2 {
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 25px;
    background-color: #c7e1dd;
    text-align: center;
    font-family: "Times New Roman";
    color: #fff;
  }
  .page-home .wrapper main .news ul {
    flex-direction: column;
    margin-top: 4%;
    margin-left: calc(32px + 65 * (100vw - 450px) / 149);
    width: fit-content;
  }
  .page-home .wrapper main .news ul li {
    white-space: nowrap;
  }
  .page-home .wrapper main .news ul li a {
    display: flex;
    gap: 5px;
    align-items: center;
  }
  .page-home .wrapper main .news ul li a h3 {
    order: 2;
    color: #555;
    font-weight: normal;
  }
  .page-home .wrapper main .news ul li a p {
    order: 1;
  }
  .page-home .wrapper main .news ul li a .newmark {
    order: 3;
    width: 35px;
    height: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFF;
    font-size: 12px;
    background-color: rgb(235, 147, 166);
  }
  .page-home .wrapper main .news a p {
    text-align: right;
  }
  .page-home .wrapper main .f-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 95%;
    height: auto;
    margin: 80px auto 80px;
    max-width: none;
  }
  .page-home .wrapper main .f-container li {
    width: 50%;
    list-style: none;
    position: relative;
  }
  .page-home .wrapper main .f-container li a p {
    font-size: 155%;
    width: calc(105px + 10 * (100vw - 450px) / 149);
    height: 27%;
    background-color: #a6bdbc;
    color: #FFFFFF;
    opacity: 0.8;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
  }
  .page-home .wrapper main .salon .box {
    padding: 35px 18px;
    font-size: 0.6rem;
    width: 65%;
    font-weight: normal;
    border: solid 2px #cccccc;
    border-radius: 10px;
    text-align: center;
    margin: 64px auto 0;
    line-height: 1.5;
    clear: both;
  }
  .page-home .wrapper main .salon .contact {
    width: 65%;
    height: 40px;
    margin: 35px auto 0;
    text-align: center;
    background-color: #71aca9;
    opacity: 0.7;
    border-radius: 10px;
    line-height: 40px;
  }
  .page-home .wrapper main .salon .contact li a {
    color: #fff;
    font-size: 20px;
  }
}
/* sp2 main終了 */
@media screen and (min-width: 600px) {
  .page-home .main-visual .open-botton {
    width: calc(170px + 120 * (100vw - 600px) / 424);
    height: calc(170px + 120 * (100vw - 600px) / 424);
    right: calc(37px + 40 * (100vw - 600px) / 424);
    top: calc(198px + 70 * (100vw - 600px) / 424);
    display: flex;
    flex-direction: column;
  }
  .page-home .main-visual .open-botton p:nth-child(1) a {
    font-size: calc(32px + 23 * (100vw - 600px) / 424);
    color: #ffffff;
  }
  .page-home .main-visual .open-botton p:nth-child(1):hover {
    cursor: pointer;
    /* マウスカーソルを手の形にする */
    opacity: 0.7;
    /* ボタンの透明度を70%にする */
  }
  .page-home .main-visual .open-botton p:nth-child(2) {
    font-size: calc(20px + 10 * (100vw - 600px) / 424);
    color: #FFF;
    margin-top: 10%;
  }
  .page-home .wrapper {
    width: 100%;
    position: static;
    /*  top: 86vW;
    left: 0;
    right: 0;
    margin: auto; */
  }
  .page-home .wrapper main .main-top p {
    font-size: calc(16px + 4 * (100vw - 600px) / 424);
  }
  .page-home .wrapper main .concept-botton {
    width: 60%;
    height: 40px;
    line-height: 40px;
    font-size: 25px;
    margin: 45px auto 0;
    background-color: #c7e1dd;
    text-align: center;
  }
  .page-home .wrapper main .concept-botton a {
    font-family: "Times New Roman";
    color: #ffffff;
  }
  .page-home .wrapper main .news {
    width: 100%;
    margin: 45px auto 0;
  }
  .page-home .wrapper main .news h2 {
    width: 60%;
    height: 40px;
    margin: 0 auto;
    line-height: 40px;
    font-size: 25px;
    background-color: #c7e1dd;
    text-align: center;
    font-family: "Times New Roman";
    color: #fff;
  }
  .page-home .wrapper main .news ul {
    flex-direction: column;
    margin: 4% auto 0;
    width: fit-content;
  }
  .page-home .wrapper main .news ul li {
    white-space: nowrap;
  }
  .page-home .wrapper main .news ul li a {
    display: flex;
    gap: 5px;
    align-items: center;
  }
  .page-home .wrapper main .news ul li a h3 {
    order: 2;
    color: #555;
    font-weight: normal;
  }
  .page-home .wrapper main .news ul li a p {
    order: 1;
  }
  .page-home .wrapper main .news ul li a .newmark {
    order: 3;
    width: 35px;
    height: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFF;
    font-size: 12px;
    background-color: rgb(235, 147, 166);
  }
  .page-home .wrapper main .news a p {
    text-align: right;
  }
  .page-home .wrapper main .f-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 95%;
    height: auto;
    margin: 80px auto 80px;
    max-width: none;
  }
  .page-home .wrapper main .f-container li {
    width: 50%;
    list-style: none;
    position: relative;
  }
  .page-home .wrapper main .f-container li a p {
    font-size: 155%;
    width: calc(115px + 15 * (100vw - 600px) / 424);
    height: 27%;
    background-color: #a6bdbc;
    color: #FFFFFF;
    opacity: 0.8;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
  }
  .page-home .wrapper main .salon .access h2 {
    color: #555;
  }
  .page-home .wrapper main .salon .box {
    padding: 35px 40px;
    font-weight: normal;
    border: solid 2px #cccccc;
    border-radius: 10px;
    /* 角の丸み */
    font-size: 20px;
    text-align: center;
    line-height: 1.5;
    width: 54%;
    clear: both;
    margin: 100px auto 0;
  }
  .page-home .wrapper main .salon .contact {
    width: 54%;
    height: 40px;
    line-height: 40px;
    margin: 80px auto;
    text-align: center;
    background-color: #71aca9;
    opacity: 0.7;
    border-radius: 10px;
  }
  .page-home .wrapper main .salon .contact li a {
    color: #fff;
    font-size: 20px;
  }
}
/* tb main終了 */
@media screen and (min-width: 1025px) {
  .page-home {
    /* PC main-visual終了 */
  }
  .page-home .main-visual {
    height: 84.7vw;
  }
  .page-home .main-visual .slider {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 100vh;
    margin: 0;
  }
  .page-home .main-visual .slider .slick-next {
    right: 0 !important;
  }
  .page-home .main-visual .slider .slick-prev {
    left: 0 !important;
  }
  .page-home .main-visual .slider .slick-arrow {
    z-index: 2 !important;
  }
  .page-home .main-visual .slider .main01 {
    background-image: url("images/medium3.jpg");
  }
  .page-home .main-visual .slider .main02 {
    background-image: url("images/salon0.jpg");
  }
  .page-home .main-visual .slider .main03 {
    background-image: url("images/long0.jpg");
  }
  .page-home .main-visual .open-botton {
    width: 300px;
    height: 300px;
    background-color: #71aca9;
    text-align: center;
    border-radius: 50%;
    line-height: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 7vw;
    top: 25rem;
  }
  .page-home .main-visual .open-botton p:nth-child(1) a {
    font-size: 55px;
    color: #ffffff;
  }
  .page-home .main-visual .open-botton p:nth-child(1):hover {
    cursor: pointer;
    /* マウスカーソルを手の形にする */
    opacity: 0.7;
    /* ボタンの透明度を70%にする */
  }
  .page-home .main-visual .open-botton p:nth-child(2) {
    font-size: 30px;
    color: #FFF;
    margin-top: 10%;
  }
  .page-home .wrapper {
    width: 100%;
    position: absolute;
    top: 78vW;
    left: 0;
    right: 0;
    margin: auto;
    /*  main::after {
        content: "";
        display: block;
        height: calc(3275px + 1426*(100vw - 1025px) / 1215);
        background-color: #555;
    } */
  }
  .page-home .wrapper main {
    width: 70%;
    height: auto;
    font-size: 1.5em;
    text-align: center;
    line-height: 1.8;
    background-color: #FFFFFF;
    /*  position: absolute;
    left: 0;
    right: 0;
    top: -150px;
    // z-index: 100;
    padding-top: 80px; */
  }
  .page-home .wrapper main .main-top {
    padding-top: 65px;
  }
  .page-home .wrapper main .main-top p {
    font-size: 2rem;
  }
  .page-home .wrapper main .concept-botton {
    width: 60%;
    height: 40px;
    line-height: 40px;
    font-size: 25px;
    margin: 70px auto 0;
    background-color: #c7e1dd;
    text-align: center;
  }
  .page-home .wrapper main .concept-bottonhover {
    cursor: pointer;
    /* マウスカーソルを手の形にする */
    opacity: 0.7;
    /* ボタンの透明度を70%にする */
  }
  .page-home .wrapper main .concept-botton a {
    font-family: "Times New Roman";
    color: #ffffff;
  }
  .page-home .wrapper main .news {
    width: 60%;
    margin: 70px auto 0;
  }
  .page-home .wrapper main .newshover {
    cursor: pointer;
    /* マウスカーソルを手の形にする */
    opacity: 0.7;
    /* ボタンの透明度を70%にする */
  }
  .page-home .wrapper main .news h2 {
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 25px;
    background-color: #c7e1dd;
    text-align: center;
    font-family: "Times New Roman";
    color: #fff;
  }
  .page-home .wrapper main .news ul {
    flex-direction: column;
    margin-top: 10%;
    margin-left: calc(43px + 245 * (100vw - 1025px) / 1215);
    width: fit-content;
  }
  .page-home .wrapper main .news ul li {
    white-space: nowrap;
  }
  .page-home .wrapper main .news ul li a {
    display: flex;
    gap: 5px;
    align-items: center;
  }
  .page-home .wrapper main .news ul li a h3 {
    order: 2;
    color: #555;
    font-weight: normal;
  }
  .page-home .wrapper main .news ul li a p {
    order: 1;
  }
  .page-home .wrapper main .news ul li a .newmark {
    order: 3;
    width: 35px;
    height: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFF;
    font-size: 12px;
    background-color: rgb(235, 147, 166);
  }
  .page-home .wrapper main .news a p {
    text-align: right;
  }
  .page-home .wrapper main .f-container {
    display: flex;
    flex-direction: row;
    /* 初期値 左から右へ横並べにする */
    flex-wrap: wrap;
    /* 折り返す */
    height: auto;
    margin: 80px auto 80px;
    position: relative;
  }
  .page-home .wrapper main .f-container li {
    width: 50%;
    list-style: none;
    /* 箇条書き記号非表示 */
    position: relative;
  }
  .page-home .wrapper main .f-container li a p {
    font-size: 155%;
    width: 30%;
    height: 25%;
    background-color: #a6bdbc;
    color: #FFFFFF;
    opacity: 0.8;
    /* グレーの透明度 */
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
  }
  .page-home .wrapper main .map {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 75%;
    /* 比率を4:3に固定 */
    margin-top: 30px;
  }
  .page-home .wrapper main .map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .page-home .wrapper main .salon .access {
    font-size: 20px;
    text-align: center;
    line-height: 1.5;
    margin-top: 80px;
    margin-bottom: 80px;
  }
  .page-home .wrapper main .salon .box {
    padding: 35px 40px;
    font-weight: normal;
    border: solid 2px #cccccc;
    border-radius: 10px;
    /* 角の丸み */
    font-size: 20px;
    text-align: center;
    line-height: 1.5;
    width: 47%;
    clear: both;
    margin: 100px auto 0;
  }
  .page-home .wrapper main .salon .box:hover {
    cursor: pointer;
    /* マウスカーソルを手の形にする */
    opacity: 0.7;
    /* ボタンの透明度を70%にする */
    background-color: #c7e1dd;
  }
  .page-home .wrapper main .salon .contact {
    width: 47%;
    height: 40px;
    line-height: 40px;
    margin: 80px auto;
    text-align: center;
    background-color: #71aca9;
    opacity: 0.7;
    border-radius: 10px;
  }
  .page-home .wrapper main .salon .contact li a {
    color: #fff;
    font-size: 20px;
  }
}
@media screen and (min-width: 320px) {
  .page-concept {
    /* sp main-visual終了 */
  }
  .page-concept .main-visual {
    padding-top: 135px;
    position: relative;
  }
  .page-concept .main-visual .slider {
    height: auto;
  }
  .page-concept .main-visual .category2 {
    font-size: 6.5rem;
    position: absolute;
    height: auto;
    width: 100%;
    top: 55%;
    text-align: center;
    margin: auto;
    color: #ffffff;
    font-family: Georgia, serif;
    text-shadow: 1px 2px 3px #808080;
  }
  .page-concept .wrapper {
    width: 100%;
    position: static;
    /*  position: absolute;
    top: 86vw;
    left: 0;
    right: 0;
    margin: auto; */
  }
  .page-concept .wrapper main {
    width: 95%;
    height: auto;
    font-size: 1.5em;
    text-align: center;
    line-height: 1.8;
    background-color: #FFFFFF;
    margin: 30px auto 30px;
    position: relative;
    /* max-width: 1200px; */
    padding-top: 0;
  }
  .page-concept .wrapper main .image1 {
    display: block;
  }
  .page-concept .wrapper main .rogo {
    margin: 3rem 1.5rem;
    background-size: 38px;
    background-image: url(images/hasami_rogo.png);
    background-repeat: no-repeat;
    background-position: left 2px;
    text-align: left;
    padding-left: 2.5rem;
    padding-top: 7rem;
    color: #71aca9;
  }
  .page-concept .wrapper main .method {
    text-align: left;
    margin: 0 1.5rem;
    font-size: 1.3rem;
  }
  .page-concept .wrapper main .image2 {
    padding-top: 6rem;
  }
  .page-concept .wrapper main .concept {
    margin: 0 1.5rem;
  }
  .page-concept .wrapper main .concept .concept {
    padding-top: 6rem;
    text-align: center;
    line-height: 1.8;
    font-size: 1.8rem;
    font-weight: bold;
    color: #555;
  }
  .page-concept .wrapper main .concept dd {
    font-size: 1.3rem;
    text-align: center;
    padding-top: 1.6rem;
  }
  .page-concept .wrapper main .image3 {
    padding-top: 6rem;
  }
  .page-concept .wrapper main .salon {
    margin-top: 40px;
  }
  .page-concept .wrapper main .salon .access {
    font-size: 1.3rem;
  }
  .page-concept .wrapper main .salon .access h2 {
    font-size: 2rem;
    color: #555;
  }
  .page-concept .wrapper main .salon .access .address {
    margin-top: 1rem;
  }
  .page-concept .wrapper main .salon .access h3 {
    font-size: 1.5rem;
    margin-top: 3rem;
  }
  .page-concept .wrapper main .salon .access p {
    margin-top: 1rem;
  }
  .page-concept .wrapper main .salon hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #cccccc;
    margin: 5em 0 0;
    padding: 0;
  }
  .page-concept .wrapper main .salon .content3 {
    padding-top: 50px;
  }
  .page-concept .wrapper main .salon .content3 h2 {
    font-size: 2rem;
    color: #555;
  }
  .page-concept .wrapper main .salon .content3 ul {
    list-style: none;
  }
  .page-concept .wrapper main .salon .box {
    margin-top: 50px;
    padding: 35px 18px;
    font-size: 0.6rem;
    width: auto;
    font-weight: normal;
    border: solid 2px #cccccc;
    border-radius: 10px;
    text-align: center;
    line-height: 1.5;
    clear: both;
  }
  .page-concept .wrapper main .salon .box h2 {
    font-size: 2rem;
    color: #555;
  }
  .page-concept .wrapper main .salon .box p {
    font-size: 1.3rem;
  }
  .page-concept .wrapper main .salon .contact {
    height: 40px;
    line-height: 40px;
    margin: 50px auto;
    text-align: center;
    background-color: #71aca9;
    opacity: 0.7;
    border-radius: 10px;
  }
  .page-concept .wrapper main .salon .contact li a {
    color: #fff;
    font-size: 20px;
  }
}
@media screen and (min-width: 450px) {
  .page-concept {
    /* sp main-visual終了 */
  }
  .page-concept .main-visual {
    padding-top: 135px;
    position: relative;
  }
  .page-concept .main-visual .slider {
    height: auto;
  }
  .page-concept .main-visual .category2 {
    font-size: 6.5rem;
    position: absolute;
    height: auto;
    width: 100%;
    top: 55%;
    text-align: center;
    margin: auto;
    color: #ffffff;
    font-family: Georgia, serif;
    text-shadow: 1px 2px 3px #808080;
  }
  .page-concept .wrapper {
    width: 100%;
    position: static;
    /*  position: absolute;
    top: 86vw;
    left: 0;
    right: 0;
    margin: auto; */
  }
  .page-concept .wrapper main {
    width: 95%;
    height: auto;
    font-size: 1.5em;
    text-align: center;
    line-height: 1.8;
    background-color: #FFFFFF;
    margin: 30px auto 30px;
    position: relative;
    /* max-width: 1200px; */
    padding-top: 0;
  }
  .page-concept .wrapper main .image1 {
    display: block;
  }
  .page-concept .wrapper main .rogo {
    margin: 3rem 1.5rem;
    background-size: 38px;
    background-image: url(images/hasami_rogo.png);
    background-repeat: no-repeat;
    background-position: left 2px;
    text-align: left;
    padding-left: 2.5rem;
    padding-top: 7rem;
    color: #71aca9;
  }
  .page-concept .wrapper main .method {
    text-align: left;
    margin: 0 1.5rem;
    font-size: 1.3rem;
  }
  .page-concept .wrapper main .image2 {
    padding-top: 6rem;
  }
  .page-concept .wrapper main .concept {
    margin: 0 1.5rem;
  }
  .page-concept .wrapper main .concept .concept {
    padding-top: 6rem;
    text-align: center;
    line-height: 1.8;
    font-size: 1.8rem;
    font-weight: bold;
    color: #555;
  }
  .page-concept .wrapper main .concept dd {
    font-size: 1.3rem;
    text-align: center;
    padding-top: 1.6rem;
  }
  .page-concept .wrapper main .image3 {
    padding-top: 6rem;
  }
  .page-concept .wrapper main .salon {
    margin-top: 40px;
  }
  .page-concept .wrapper main .salon .access {
    font-size: 1.3rem;
  }
  .page-concept .wrapper main .salon .access h2 {
    font-size: 2rem;
    color: #555;
  }
  .page-concept .wrapper main .salon .access .address {
    margin-top: 1rem;
  }
  .page-concept .wrapper main .salon .access h3 {
    font-size: 1.5rem;
    margin-top: 3rem;
  }
  .page-concept .wrapper main .salon .access p {
    margin-top: 1rem;
  }
  .page-concept .wrapper main .salon hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #cccccc;
    margin: 5em 0 0;
    padding: 0;
  }
  .page-concept .wrapper main .salon .content3 {
    padding-top: 50px;
  }
  .page-concept .wrapper main .salon .content3 h2 {
    font-size: 2rem;
    color: #555;
  }
  .page-concept .wrapper main .salon .content3 ul {
    list-style: none;
  }
  .page-concept .wrapper main .salon .box {
    padding: 35px 18px;
    font-size: 0.6rem;
    width: 65%;
    font-weight: normal;
    border: solid 2px #cccccc;
    border-radius: 10px;
    text-align: center;
    margin: 64px auto 0;
    line-height: 1.5;
    clear: both;
  }
  .page-concept .wrapper main .salon .box h2 {
    font-size: 2rem;
    color: #555;
  }
  .page-concept .wrapper main .salon .box p {
    font-size: 1.3rem;
  }
  .page-concept .wrapper main .salon .contact {
    width: 65%;
    height: 40px;
    margin: 35px auto 0;
    text-align: center;
    background-color: #71aca9;
    opacity: 0.7;
    border-radius: 10px;
    line-height: 40px;
  }
  .page-concept .wrapper main .salon .contact li a {
    color: #fff;
    font-size: 20px;
  }
}
@media screen and (min-width: 600px) {
  .page-concept {
    /* tb main-visual終了 */
  }
  .page-concept .main-visual .slider {
    height: auto;
  }
  .page-concept .wrapper {
    width: 100%;
    position: absolute;
    top: 80vW;
    left: 0;
    right: 0;
    margin: auto;
    /* tb main終了 */
  }
  .page-concept .wrapper main {
    width: 70%;
    height: auto;
    font-size: 1.5em;
    text-align: center;
    line-height: 1.8;
    background-color: #ffffff;
  }
  .page-concept .wrapper main .image1 {
    padding-top: 0;
  }
  .page-concept .wrapper main .rogo {
    background-image: url(images/hasami_rogo.png);
    background-repeat: no-repeat;
    background-position: left 15px;
    text-align: left;
    padding-left: 3.5rem;
    background-size: 43px;
    padding-top: 10rem;
    width: 80%;
    margin: 41px auto 20px;
    color: #71aca9;
  }
  .page-concept .wrapper main .method {
    width: 80%;
    margin: 0 auto;
    font-size: 2rem;
    text-align: left;
  }
  .page-concept .wrapper main .image2 {
    padding-top: 6rem;
  }
  .page-concept .wrapper main .image3 {
    padding-top: 6rem;
  }
  .page-concept .wrapper main .salon .box {
    padding: 35px 40px;
    font-weight: normal;
    border: solid 2px #cccccc;
    border-radius: 10px;
    /* 角の丸み */
    font-size: 20px;
    text-align: center;
    line-height: 1.5;
    width: 75%;
    clear: both;
    margin: 100px auto 0;
  }
  .page-concept .wrapper main .salon .contact {
    width: 75%;
    height: 40px;
    line-height: 40px;
    margin: 80px auto;
    text-align: center;
    background-color: #71aca9;
    opacity: 0.7;
    border-radius: 10px;
  }
  .page-concept .wrapper main .salon .contact li a {
    color: #fff;
    font-size: 20px;
  }
}
@media screen and (min-width: 1025px) {
  .page-concept {
    /* PC main-visual終了 */
  }
  .page-concept .main-visual {
    height: 84.7vw;
  }
  .page-concept .main-visual .slider {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 100vh;
    margin: 0;
  }
  .page-concept .main-visual .slider .slick-next {
    right: 0 !important;
  }
  .page-concept .main-visual .slider .slick-prev {
    left: 0 !important;
  }
  .page-concept .main-visual .slider .slick-arrow {
    z-index: 2 !important;
  }
  .page-concept .main-visual .slider li.main01 {
    background-image: url("images/medium3.jpg");
  }
  .page-concept .main-visual .slider .main02 {
    background-image: url("images/salon0.jpg");
  }
  .page-concept .main-visual .slider .main03 {
    background-image: url("images/long0.jpg");
  }
  .page-concept .main-visual .open-botton {
    width: 300px;
    height: 300px;
    background-color: #71aca9;
    color: #ffffff;
    text-align: center;
    font-size: 6rem;
    border-radius: 50%;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 7vw;
    top: 25rem;
  }
  .page-concept .main-visual .open-botton:hover {
    cursor: pointer;
    /* マウスカーソルを手の形にする */
    opacity: 0.7;
    /* ボタンの透明度を70%にする */
  }
  .page-concept .wrapper {
    width: 100%;
    position: absolute;
    top: 80vw;
    left: 0;
    right: 0;
    margin: auto;
    /* PC main 終了 */
  }
  .page-concept .wrapper main {
    width: 70%;
    height: auto;
    font-size: 1.5em;
    text-align: center;
    line-height: 1.8;
    background-color: #FFFFFF;
    /* position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: -90px; */
  }
  .page-concept .wrapper main p {
    font-size: 2.2rem;
    text-align: center;
  }
  .page-concept .wrapper main .image1 {
    margin-top: -13rem;
  }
  .page-concept .wrapper main .rogo {
    background-image: url(images/hasami_rogo.png);
    background-repeat: no-repeat;
    background-position: left 15px;
    text-align: left;
    padding-left: 3.5rem;
    background-size: 43px;
    padding-top: 9rem;
    width: 70%;
    margin: 41px auto 20px;
    color: #71aca9;
  }
  .page-concept .wrapper main .method {
    text-align: left;
    font-size: 2.2rem;
    width: 70%;
    margin: 0 auto;
  }
  .page-concept .wrapper main .image2 {
    margin-top: 55px;
  }
  .page-concept .wrapper main .concept div dd {
    font-size: 2rem;
  }
  .page-concept .wrapper main .image3 {
    margin-top: 55px;
  }
  .page-concept .wrapper main .salon .access {
    font-size: 20px;
    text-align: center;
    line-height: 1.5;
    margin-top: 80px;
    margin-bottom: 80px;
  }
  .page-concept .wrapper main .salon .access p {
    font-size: 2rem;
    margin-top: 1rem;
    color: #555;
  }
  .page-concept .wrapper main .salon hr {
    width: 90%;
    height: 10px;
    margin: 0 auto;
    color: #808080;
  }
  .page-concept .wrapper main .salon .content3 {
    font-size: 20px;
    text-align: center;
    line-height: 1.5;
  }
  .page-concept .wrapper main .salon .content3 ul {
    margin-top: 1rem;
  }
  .page-concept .wrapper main .salon .box {
    padding: 35px 40px;
    font-weight: normal;
    border: solid 2px #cccccc;
    border-radius: 10px;
    /* 角の丸み */
    font-size: 20px;
    text-align: center;
    line-height: 1.5;
    width: 47%;
    clear: both;
    margin: 100px auto 0;
  }
  .page-concept .wrapper main .salon .box:hover {
    cursor: pointer;
    /* マウスカーソルを手の形にする */
    opacity: 0.7;
    /* ボタンの透明度を70%にする */
    background-color: #c7e1dd;
  }
  .page-concept .wrapper main .salon .contact {
    width: 47%;
    height: 40px;
    line-height: 40px;
    margin: 80px auto;
    text-align: center;
    background-color: #71aca9;
    opacity: 0.7;
    border-radius: 10px;
  }
  .page-concept .wrapper main .salon .contact li a {
    color: #fff;
    font-size: 20px;
  }
}
@media screen and (min-width: 320px) {
  .page-first {
    /* sp main-visual終了 */
  }
  .page-first .main-visual {
    padding-top: 135px;
    position: relative;
  }
  .page-first .main-visual .slider {
    height: auto;
  }
  .page-first .main-visual .category2 {
    font-size: 6.5rem;
    position: absolute;
    height: auto;
    width: 100%;
    top: 55%;
    text-align: center;
    margin: auto;
    color: #ffffff;
    font-family: Georgia, serif;
    text-shadow: 1px 2px 3px #808080;
  }
  .page-first .wrapper {
    width: 100%;
    /*  position: absolute;
    top: 122vw;
    left: 0;
    right: 0;
    margin: auto; */
  }
  .page-first .wrapper main {
    width: 95%;
    height: auto;
    font-size: 1.5em;
    text-align: center;
    line-height: 1.8;
    background-color: #FFFFFF;
    margin: 30px auto 30px;
    position: relative;
    /*  max-width: 1200px; */
  }
  .page-first .wrapper main .main-top h2 {
    color: #555;
  }
  .page-first .wrapper main .main-top p {
    padding-top: 20px;
    text-align: left;
    margin: 0 1.5rem 2rem;
  }
  .page-first .wrapper main .botton {
    width: 95%;
    height: 40px;
    line-height: 40px;
    font-size: 25px;
    margin: 45px auto 0;
    background-color: #c7e1dd;
    text-align: center;
  }
  .page-first .wrapper main .botton a {
    font-family: "Times New Roman";
    color: #ffffff;
  }
  .page-first .wrapper main .map {
    margin-top: 40px;
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 75%;
  }
  .page-first .wrapper main .map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .page-first .wrapper main .salon {
    margin-top: 40px;
  }
  .page-first .wrapper main .salon .access {
    font-size: 1.3rem;
  }
  .page-first .wrapper main .salon .access h2 {
    font-size: 2rem;
    color: #555;
  }
  .page-first .wrapper main .salon .access .address {
    margin-top: 1rem;
  }
  .page-first .wrapper main .salon .access h3 {
    font-size: 1.5rem;
    margin-top: 3rem;
    color: #555;
  }
  .page-first .wrapper main .salon hr {
    margin: 4rem 0;
  }
  .page-first .wrapper main .salon .content3 h2 {
    font-size: 2rem;
    margin-top: 3rem;
    color: #555;
  }
  .page-first .wrapper main .salon .content3 ul {
    list-style: none;
  }
  .page-first .wrapper main .salon .box {
    margin-top: 30px;
    padding: 35px 18px;
    font-size: 0.6rem;
    width: auto;
    font-weight: normal;
    border: solid 2px #cccccc;
    border-radius: 10px;
    text-align: center;
    line-height: 1.5;
    clear: both;
  }
  .page-first .wrapper main .salon .box h2 {
    font-size: 2rem;
    color: #555;
  }
  .page-first .wrapper main .salon .box p {
    font-size: 1.3rem;
  }
  .page-first .wrapper main .salon .box:hover {
    cursor: pointer;
    /* マウスカーソルを手の形にする */
    opacity: 0.7;
    /* ボタンの透明度を70%にする */
    background-color: #c7e1dd;
  }
  .page-first .wrapper main .salon .contact {
    height: 40px;
    line-height: 40px;
    margin: 50px auto;
    text-align: center;
    background-color: #71aca9;
    opacity: 0.7;
    border-radius: 10px;
  }
  .page-first .wrapper main .salon .contact li a {
    color: #fff;
    font-size: 20px;
  }
}
/* sp main終了 */
@media screen and (min-width: 450px) {
  .page-first {
    /* sp2 main-visual終了 */
  }
  .page-first .main-visual .open-botton {
    position: absolute;
    width: calc(120px + 50 * (100vw - 450px) / 149);
    height: calc(120px + 50 * (100vw - 450px) / 149);
    right: calc(10px + 27 * (100vw - 450px) / 149);
    top: calc(155px + 25 * (100vw - 450px) / 149);
    background-color: #71aca9;
    text-align: center;
    border-radius: 50%;
    line-height: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .page-first .main-visual .open-botton p:nth-child(1) a {
    font-size: calc(22px + 10 * (100vw - 450px) / 149);
    color: #ffffff;
  }
  .page-first .main-visual .open-botton p:nth-child(1):hover {
    cursor: pointer;
    /* マウスカーソルを手の形にする */
    opacity: 0.7;
    /* ボタンの透明度を70%にする */
  }
  .page-first .main-visual .open-botton p:nth-child(2) {
    font-size: calc(16px + 4 * (100vw - 450px) / 149);
    color: #FFF;
    margin-top: 10%;
  }
  .page-first .wrapper {
    width: 100%;
    /*  position: absolute;
    top: 122vw;
    left: 0;
    right: 0;
    margin: auto; */
  }
  .page-first .wrapper main {
    width: 95%;
    height: auto;
    font-size: 1.5em;
    text-align: center;
    line-height: 1.8;
    background-color: #FFFFFF;
    margin: 0 auto;
    position: relative;
    max-width: 1200px;
    padding-top: 40px;
  }
  .page-first .wrapper main .main-top h2 {
    color: #555;
  }
  .page-first .wrapper main .main-top p {
    padding-top: 20px;
    text-align: left;
    margin: 0 1.5rem 2rem;
  }
  .page-first .wrapper main .botton {
    width: 95%;
    height: 40px;
    line-height: 40px;
    font-size: 25px;
    margin: 45px auto 0;
    background-color: #c7e1dd;
    text-align: center;
  }
  .page-first .wrapper main .botton a {
    font-family: "Times New Roman";
    color: #ffffff;
  }
  .page-first .wrapper main .map {
    margin-top: 40px;
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 75%;
  }
  .page-first .wrapper main .map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .page-first .wrapper main .salon {
    margin-top: 40px;
  }
  .page-first .wrapper main .salon .access {
    font-size: 1.3rem;
  }
  .page-first .wrapper main .salon .access h2 {
    font-size: 2rem;
    color: #555;
  }
  .page-first .wrapper main .salon .access .address {
    margin-top: 1rem;
  }
  .page-first .wrapper main .salon .access h3 {
    font-size: 1.5rem;
    margin-top: 3rem;
    color: #555;
  }
  .page-first .wrapper main .salon hr {
    margin: 4rem 0;
  }
  .page-first .wrapper main .salon .content3 h2 {
    font-size: 2rem;
    margin-top: 3rem;
    color: #555;
  }
  .page-first .wrapper main .salon .content3 ul {
    list-style: none;
  }
  .page-first .wrapper main .salon .box {
    padding: 35px 18px;
    font-size: 0.6rem;
    width: 65%;
    font-weight: normal;
    border: solid 2px #cccccc;
    border-radius: 10px;
    text-align: center;
    line-height: 1.5;
    clear: both;
    margin: 64px auto 0;
  }
  .page-first .wrapper main .salon .box h2 {
    font-size: 2rem;
    color: #555;
  }
  .page-first .wrapper main .salon .box p {
    font-size: 1.3rem;
  }
  .page-first .wrapper main .salon .box:hover {
    cursor: pointer;
    /* マウスカーソルを手の形にする */
    opacity: 0.7;
    /* ボタンの透明度を70%にする */
    background-color: #c7e1dd;
  }
  .page-first .wrapper main .salon .contact {
    width: 65%;
    height: 40px;
    line-height: 40px;
    margin: 50px auto;
    text-align: center;
    background-color: #71aca9;
    opacity: 0.7;
    border-radius: 10px;
  }
  .page-first .wrapper main .salon .contact li a {
    color: #fff;
    font-size: 20px;
  }
}
@media screen and (min-width: 600px) {
  .page-first {
    /* tb main-visual終了 */
    /* tb main終了 */
  }
  .page-first .main-visual .slider {
    height: auto;
  }
  .page-first .wrapper {
    width: 100%;
  }
  .page-first .wrapper main {
    width: 95%;
    height: auto;
    font-size: 1.5em;
    text-align: center;
    line-height: 1.8;
    background-color: #ffffff;
    padding-top: 70px;
  }
  .page-first .wrapper main .main-top {
    width: 80%;
    margin: 0 auto;
    font-size: 2rem;
    text-align: left;
  }
  .page-first .wrapper main .main-top h2 {
    color: #555;
    text-align: center;
  }
  .page-first .wrapper main .botton {
    width: 80%;
    height: 40px;
    line-height: 40px;
    font-size: 25px;
    margin: 75px auto 0;
    background-color: #c7e1dd;
    text-align: center;
  }
  .page-first .wrapper main .map {
    position: relative;
    width: 80%;
    height: 0;
    margin: 80px auto 0;
  }
  .page-first .wrapper main .salon {
    width: 80%;
    text-align: center;
    margin: 125px auto;
  }
  .page-first .wrapper main .salon div.access h3 {
    color: #555;
  }
  .page-first .wrapper main .salon .box {
    padding: 35px 40px;
    font-weight: normal;
    border: solid 2px #cccccc;
    border-radius: 10px;
    /* 角の丸み */
    font-size: 20px;
    text-align: center;
    line-height: 1.5;
    width: 54%;
    clear: both;
    margin: 100px auto 0;
  }
  .page-first .wrapper main .salon .contact {
    width: 54%;
    height: 40px;
    line-height: 40px;
    margin: 80px auto;
    text-align: center;
    background-color: #71aca9;
    opacity: 0.7;
    border-radius: 10px;
  }
  .page-first .wrapper main .salon .contact li a {
    color: #fff;
    font-size: 20px;
  }
}
@media screen and (min-width: 1025px) {
  .page-first {
    /*pc main-visual終了 */
    /* PC .wrapper 終了 */
  }
  .page-first .main-visual {
    height: 84.7vw;
  }
  .page-first .main-visual .slider {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 100vh;
    margin: 0;
  }
  .page-first .main-visual .slider .slick-next {
    right: 0 !important;
  }
  .page-first .main-visual .slider .slick-prev {
    left: 0 !important;
  }
  .page-first .main-visual .slider .slick-arrow {
    z-index: 2 !important;
  }
  .page-first .main-visual .slider .main01 {
    background-image: url("../images/medium3.jpg");
  }
  .page-first .main-visual .slider .main02 {
    background-image: url("../images/salon0.jpg");
  }
  .page-first .main-visual .slider .main03 {
    background-image: url("../images/long0.jpg");
  }
  .page-first .main-visual .open-botton {
    width: 300px;
    height: 300px;
    background-color: #71aca9;
    color: #ffffff;
    text-align: center;
    font-size: 6rem;
    border-radius: 50%;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 7vw;
    top: 25rem;
  }
  .page-first .main-visual .open-botton:hover {
    cursor: pointer;
    /* マウスカーソルを手の形にする */
    opacity: 0.7;
    /* ボタンの透明度を70%にする */
  }
  .page-first .wrapper {
    width: 100%;
    position: absolute;
    top: 80vw;
    left: 0;
    right: 0;
    margin: auto;
  }
  .page-first .wrapper main {
    width: 70%;
    height: auto;
    font-size: 1.5em;
    text-align: center;
    line-height: 1.8;
    background-color: #FFFFFF;
    padding-top: 130px;
    /* position: relative;
    min-width: 1000px;
    max-width: 1200px;
    z-index: 0;
    margin: 0 auto;
    padding-top: 80px; */
  }
  .page-first .wrapper main .main-top h2 {
    color: #555;
  }
  .page-first .wrapper main .main-top p {
    font-size: 2.2rem;
    text-align: center;
  }
  .page-first .wrapper main .botton {
    width: 40%;
    height: 60px;
    margin: 130px auto 0;
    background-color: #c7e1dd;
    text-align: center;
    font-size: 30px;
    line-height: 58px;
  }
  .page-first .wrapper main .map {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 75%;
    margin-top: 130px;
  }
  .page-first .wrapper main .salon div.access {
    font-size: 20px;
    text-align: center;
    line-height: 1.5;
    margin-top: 80px;
    margin-bottom: 80px;
  }
  .page-first .wrapper main .salon div.access p {
    font-size: 2rem;
    margin-top: 1rem;
  }
  .page-first .wrapper main .salon hr {
    width: 90%;
    margin: 0 auto;
    color: #808080;
  }
  .page-first .wrapper main .salon .content3 {
    font-size: 20px;
    text-align: center;
    line-height: 1.5;
  }
  .page-first .wrapper main .salon .content3 ul {
    margin-top: 1rem;
  }
  .page-first .wrapper main .salon .box {
    padding: 35px 40px;
    font-weight: normal;
    border: solid 2px #cccccc;
    border-radius: 10px;
    /* 角の丸み */
    font-size: 20px;
    text-align: center;
    line-height: 1.5;
    width: 57%;
    clear: both;
    margin: 100px auto 0;
  }
  .page-first .wrapper main .salon .box:hover {
    cursor: pointer;
    /* マウスカーソルを手の形にする */
    opacity: 0.7;
    /* ボタンの透明度を70%にする */
    background-color: #c7e1dd;
  }
  .page-first .wrapper main .salon .contact {
    width: 57%;
    height: 40px;
    line-height: 40px;
    margin: 80px auto;
    text-align: center;
    background-color: #71aca9;
    opacity: 0.7;
    border-radius: 10px;
  }
  .page-first .wrapper main .salon .contact li a {
    color: #fff;
    font-size: 20px;
  }
}
@media screen and (min-width: 320px) {
  .page-news .wrapper {
    width: 100%;
    position: absolute;
    top: 15vw;
    left: 0;
    right: 0;
    margin: auto;
    /* sp main終了 */
  }
  .page-news .wrapper main {
    width: 95%;
    height: auto;
    font-size: 1.5em;
    line-height: 1.8;
    background-color: #FFFFFF;
    margin: 30px auto 30px;
    position: relative;
    /*  max-width: 1200px; */
  }
  .page-news .wrapper main .top-news .category1 {
    font-size: 7rem;
    color: #525050;
    font-family: Georgia, serif;
    text-align: center;
    left: 0;
    right: 0;
    text-shadow: 1px 2px 3px #808080;
  }
  .page-news .wrapper main .top-news h3 {
    width: 250px;
    height: 250px;
    font-size: 4rem;
    background-color: #71aca9;
    text-align: center;
    border-radius: 50%;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    /*  right: 0;
    left: 0; */
    margin: 30px auto 15px;
  }
  .page-news .wrapper main .top-news h3 a {
    color: #ffffff;
  }
  .page-news .wrapper main .top-news p {
    text-align: center;
  }
  .page-news .wrapper main .area {
    padding-top: 70px;
    display: flex;
    flex-wrap: wrap;
    gap: 15vw 1.5vw;
    text-align: left;
  }
  .page-news .wrapper main .area li {
    width: 49%;
    display: flex;
    flex-direction: column;
  }
  .page-news .wrapper main .area li h3:nth-child(1) {
    font-size: 1.3rem;
    order: 2;
  }
  .page-news .wrapper main .area li p:nth-child(2) {
    margin-top: 0;
    order: 3;
  }
  .page-news .wrapper main .area li div:nth-child(3) {
    margin-top: 0;
    order: 4;
  }
  .page-news .wrapper main .area li p:nth-child(4) {
    margin-top: 0;
    order: 1;
  }
  .page-news .wrapper main .salon {
    margin-top: 40px;
    text-align: center;
  }
  .page-news .wrapper main .salon .access {
    font-size: 1.3rem;
  }
  .page-news .wrapper main .salon .access h2 {
    font-size: 2rem;
    color: #555;
  }
  .page-news .wrapper main .salon .access .address {
    margin-top: 1rem;
  }
  .page-news .wrapper main .salon .access h3 {
    font-size: 1.5rem;
    margin-top: 3rem;
    color: #555;
  }
  .page-news .wrapper main .salon hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #cccccc;
    margin: 4em 0;
    padding: 0;
  }
  .page-news .wrapper main .salon .content3 h2 {
    font-size: 2rem;
    margin-top: 3rem;
    color: #555;
  }
  .page-news .wrapper main .salon .content3 ul {
    list-style: none;
  }
  .page-news .wrapper main .salon .box {
    margin-top: 30px;
    padding: 35px 18px;
    font-size: 0.6rem;
    width: auto;
    font-weight: normal;
    border: solid 2px #cccccc;
    border-radius: 10px;
    text-align: center;
    line-height: 1.5;
    clear: both;
  }
  .page-news .wrapper main .salon .box h2 {
    font-size: 2rem;
    color: #555;
  }
  .page-news .wrapper main .salon .box p {
    font-size: 1.3rem;
  }
  .page-news .wrapper main .salon .box:hover {
    cursor: pointer;
    /* マウスカーソルを手の形にする */
    opacity: 0.7;
    /* ボタンの透明度を70%にする */
    background-color: #c7e1dd;
  }
  .page-news .wrapper main .salon .contact {
    height: 40px;
    line-height: 40px;
    margin: 50px auto;
    text-align: center;
    background-color: #71aca9;
    opacity: 0.7;
    border-radius: 10px;
  }
  .page-news .wrapper main .salon .contact li a {
    color: #fff;
    font-size: 20px;
  }
}
@media screen and (min-width: 450px) {
  .page-news .wrapper {
    width: 100%;
    position: absolute;
    top: 15vw;
    left: 0;
    right: 0;
    margin: auto;
    /* sp2 main終了 */
  }
  .page-news .wrapper main {
    width: 95%;
    height: auto;
    font-size: 1.5em;
    line-height: 1.8;
    background-color: #FFFFFF;
    margin: 30px auto 30px;
    position: relative;
    /*  max-width: 1200px; */
  }
  .page-news .wrapper main .top-news .category1 {
    font-size: 7rem;
    color: #525050;
    font-family: Georgia, serif;
    text-align: center;
    left: 0;
    right: 0;
    text-shadow: 1px 2px 3px #808080;
  }
  .page-news .wrapper main .top-news h3 {
    width: 250px;
    height: 250px;
    font-size: 4rem;
    background-color: #71aca9;
    text-align: center;
    border-radius: 50%;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    /*  right: 0;
    left: 0; */
    margin: 30px auto 15px;
  }
  .page-news .wrapper main .top-news h3 a {
    color: #ffffff;
  }
  .page-news .wrapper main .top-news p {
    text-align: center;
  }
  .page-news .wrapper main .area {
    padding-top: 90px;
    display: flex;
    flex-wrap: wrap;
    gap: 15vw 1.5vw;
    text-align: left;
  }
  .page-news .wrapper main .area li {
    width: 49%;
    display: flex;
    flex-direction: column;
  }
  .page-news .wrapper main .area li h3:nth-child(1) {
    font-size: 1.3rem;
    order: 2;
  }
  .page-news .wrapper main .area li p:nth-child(2) {
    margin-top: 0;
    order: 3;
  }
  .page-news .wrapper main .area li div:nth-child(3) {
    margin-top: 0;
    order: 4;
  }
  .page-news .wrapper main .area li p:nth-child(4) {
    margin-top: 0;
    order: 1;
  }
  .page-news .wrapper main .salon {
    margin-top: 40px;
    text-align: center;
  }
  .page-news .wrapper main .salon .access {
    font-size: 1.3rem;
  }
  .page-news .wrapper main .salon .access h2 {
    font-size: 2rem;
    color: #555;
  }
  .page-news .wrapper main .salon .access .address {
    margin-top: 1rem;
  }
  .page-news .wrapper main .salon .access h3 {
    font-size: 1.5rem;
    margin-top: 3rem;
    color: #555;
  }
  .page-news .wrapper main .salon hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #cccccc;
    margin: 4em 0;
    padding: 0;
  }
  .page-news .wrapper main .salon .content3 h2 {
    font-size: 2rem;
    margin-top: 3rem;
    color: #555;
  }
  .page-news .wrapper main .salon .content3 ul {
    list-style: none;
  }
  .page-news .wrapper main .salon .box {
    margin: 64px auto 0;
    padding: 35px 18px;
    font-size: 0.6rem;
    width: 65%;
    font-weight: normal;
    border: solid 2px #cccccc;
    border-radius: 10px;
    text-align: center;
    line-height: 1.5;
    clear: both;
  }
  .page-news .wrapper main .salon .box h2 {
    font-size: 2rem;
    color: #555;
  }
  .page-news .wrapper main .salon .box p {
    font-size: 1.3rem;
  }
  .page-news .wrapper main .salon .box:hover {
    cursor: pointer;
    /* マウスカーソルを手の形にする */
    opacity: 0.7;
    /* ボタンの透明度を70%にする */
    background-color: #c7e1dd;
  }
  .page-news .wrapper main .salon .contact {
    width: 65%;
    height: 40px;
    line-height: 40px;
    margin: 35px auto 0;
    text-align: center;
    background-color: #71aca9;
    opacity: 0.7;
    border-radius: 10px;
  }
  .page-news .wrapper main .salon .contact li a {
    color: #fff;
    font-size: 20px;
  }
}
@media screen and (min-width: 600px) {
  .page-news .wrapper {
    width: 100%;
    position: absolute;
    top: 20vw;
    left: 0;
    right: 0;
    margin: auto;
    /* tb main終了 */
  }
  .page-news .wrapper main .area {
    padding-top: 90px;
    display: flex;
    flex-wrap: wrap;
    gap: 9vw 5%;
    text-align: left;
    width: 100%;
  }
  .page-news .wrapper main .area li {
    width: 30%;
    display: flex;
    flex-direction: column;
  }
  .page-news .wrapper main .area li h3:nth-child(1) {
    font-size: 1.3rem;
    order: 2;
  }
  .page-news .wrapper main .area li p:nth-child(2) {
    margin-top: 0;
    order: 3;
  }
  .page-news .wrapper main .area li div:nth-child(3) {
    margin-top: 0;
    order: 4;
  }
  .page-news .wrapper main .area li p:nth-child(4) {
    margin-top: 0;
    order: 1;
  }
  .page-news .wrapper main .salon .box {
    padding: 35px 40px;
    font-weight: normal;
    border: solid 2px #cccccc;
    border-radius: 10px;
    /* 角の丸み */
    font-size: 20px;
    text-align: center;
    line-height: 1.5;
    width: 54%;
    clear: both;
    margin: 100px auto 0;
  }
  .page-news .wrapper main .salon .contact {
    width: 54%;
    height: 40px;
    line-height: 40px;
    margin: 80px auto;
    text-align: center;
    background-color: #71aca9;
    opacity: 0.7;
    border-radius: 10px;
  }
  .page-news .wrapper main .salon .contact li a {
    color: #fff;
    font-size: 20px;
  }
}
@media screen and (min-width: 1025px) {
  .page-news .wrapper {
    width: 100%;
    position: absolute;
    top: 10vw;
    left: 0;
    right: 0;
    margin: auto;
  }
  .page-news .wrapper main {
    width: 70%;
    height: auto;
    font-size: 1.5em;
    text-align: center;
    line-height: 1.8;
    background-color: #FFFFFF;
    position: relative;
    min-width: 1000px;
    max-width: 1200px;
    z-index: 0;
    margin: 0 auto;
    padding-top: 80px;
  }
  .page-news .wrapper main .area {
    padding-top: 110px;
    display: flex;
    gap: 5vw 4%;
    flex-wrap: wrap;
    /* justify-content: space-between; */
  }
  .page-news .wrapper main .area li {
    width: 22%;
    text-align: left;
    display: flex;
    flex-direction: column;
  }
  .page-news .wrapper main .area li h3:nth-child(1) {
    font-size: 1.3rem;
    order: 2;
  }
  .page-news .wrapper main .area li p:nth-child(2) {
    margin-top: 0;
    order: 3;
  }
  .page-news .wrapper main .area li div:nth-child(3) {
    margin-top: 0;
    order: 4;
  }
  .page-news .wrapper main .area li p:nth-child(4) {
    margin-top: 0;
    order: 1;
  }
  .page-news .wrapper main .salon .access {
    font-size: 20px;
    text-align: center;
    line-height: 1.5;
    margin-top: 80px;
    margin-bottom: 80px;
  }
  .page-news .wrapper main .salon .access h3 {
    color: #555;
  }
  .page-news .wrapper main .salon .access p {
    font-size: 2rem;
    margin-top: 1rem;
  }
  .page-news .wrapper main .salon hr {
    width: 90%;
    margin: 0 auto;
    color: #808080;
  }
  .page-news .wrapper main .salon .content3 {
    font-size: 20px;
    text-align: center;
    line-height: 1.5;
  }
  .page-news .wrapper main .salon .content3 ul {
    margin-top: 1rem;
  }
  .page-news .wrapper main .salon .box {
    padding: 35px 40px;
    font-weight: normal;
    border: solid 2px #cccccc;
    border-radius: 10px;
    /* 角の丸み */
    font-size: 20px;
    text-align: center;
    line-height: 1.5;
    width: 47%;
    clear: both;
    margin: 100px auto 0;
  }
  .page-news .wrapper main .salon .box:hover {
    cursor: pointer;
    /* マウスカーソルを手の形にする */
    opacity: 0.7;
    /* ボタンの透明度を70%にする */
    background-color: #c7e1dd;
  }
  .page-news .wrapper main .salon .contact {
    width: 47%;
    height: 40px;
    line-height: 40px;
    margin: 80px auto;
    text-align: center;
    background-color: #71aca9;
    opacity: 0.7;
    border-radius: 10px;
  }
  .page-news .wrapper main .salon .contact li a {
    color: #fff;
    font-size: 20px;
  }
}
@media screen and (min-width: 320px) {
  .page-salon {
    /* sp main-visual終了 */
  }
  .page-salon .main-visual {
    padding-top: 135px;
    position: relative;
  }
  .page-salon .main-visual .slider {
    height: auto;
  }
  .page-salon .main-visual .category2 {
    font-size: 6.5rem;
    position: absolute;
    height: auto;
    width: 100%;
    top: 55%;
    text-align: center;
    margin: auto;
    color: #ffffff;
    font-family: Georgia, serif;
    text-shadow: 1px 2px 3px #808080;
  }
  .page-salon .wrapper {
    width: 100%;
    position: static;
    /*  position: absolute;
    top: 86vw;
    left: 0;
    right: 0;
    margin: auto; */
  }
  .page-salon .wrapper main {
    width: 95%;
    height: auto;
    font-size: 1.5em;
    text-align: center;
    line-height: 1.8;
    background-color: #FFFFFF;
    margin: 0 auto;
    position: relative;
    /*  max-width: 1200px; */
    padding-top: 0;
  }
  .page-salon .wrapper main .tempo {
    margin-top: 10px;
  }
  .page-salon .wrapper main .tempo .title {
    font-size: 2rem;
    text-align: center;
    color: #71aca9;
    margin: 0;
  }
  .page-salon .wrapper main .map {
    margin-top: 40px;
    width: 100%;
    aspect-ratio: 100/75;
    /*mapサイズのヨコ/タテの比率でを指定*/
  }
  .page-salon .wrapper main .map iframe {
    width: 100%;
    height: 100%;
  }
  .page-salon .wrapper main .salon {
    margin-top: 40px;
    width: 100%;
    height: auto;
    max-width: 100%;
  }
  .page-salon .wrapper main .salon .access {
    font-size: 1.3rem;
  }
  .page-salon .wrapper main .salon .access h2 {
    font-size: 2rem;
    color: #555;
  }
  .page-salon .wrapper main .salon .access .address {
    margin-top: 1rem;
  }
  .page-salon .wrapper main .salon .access h3 {
    font-size: 1.5rem;
    margin-top: 3rem;
    color: #555;
  }
  .page-salon .wrapper main .salon hr {
    margin: 4rem 0;
  }
  .page-salon .wrapper main .salon .content3 h2 {
    font-size: 2rem;
    margin-top: 3rem;
    color: #555;
  }
  .page-salon .wrapper main .salon .content3 ul {
    list-style: none;
  }
  .page-salon .wrapper main .shop {
    margin-top: 4rem;
    position: relative;
    padding: 20px 0 0;
    display: flex;
    line-height: 1;
    gap: 3.5%;
  }
  .page-salon .wrapper main .shop li {
    height: 100%;
    width: 31%;
  }
  .page-salon .wrapper main .shop li .s-item p {
    margin-top: 0;
    margin-bottom: 0;
  }
  .page-salon .wrapper main .shop li .cap {
    margin-top: 1rem;
  }
  .page-salon .wrapper main .box .address {
    width: 100%;
    padding: 1.3rem;
    font-weight: normal;
    display: inline-block;
    border: solid 1px #000000;
    line-height: 1.5;
    margin-top: 70px;
    width: 90%;
    text-align: left;
  }
  .page-salon .wrapper main .box .address .box2 h2 {
    color: #555;
  }
  .page-salon .wrapper main .box .address .box2 h3 {
    color: #555;
  }
  .page-salon .wrapper main .box .address .box2 .box2-p1 {
    margin-top: 15px;
  }
  .page-salon .wrapper main .box .address .box2 .box2-p1 p {
    margin-top: 0;
    margin-bottom: 0;
  }
  .page-salon .wrapper main .box .address .box2 .box2-p2 {
    margin-top: 15px;
  }
  .page-salon .wrapper main .box .address .box2 .box2-p2 p {
    margin-top: 0;
    margin-bottom: 0;
  }
  .page-salon .wrapper main .box .contact {
    width: 90%;
    display: inline-block;
  }
  .page-salon .wrapper main .box .contact .contact1 {
    height: 40px;
    line-height: 40px;
    margin: 30px auto 0;
    text-align: center;
    background-color: #71aca9;
    opacity: 0.7;
    border-radius: 10px;
  }
  .page-salon .wrapper main .box .contact .contact1 a {
    color: #fff;
    font-size: 20px;
  }
  .page-salon .wrapper main .box .contact .contact2 {
    height: 40px;
    line-height: 40px;
    margin: 30px auto;
    text-align: center;
    background-color: #71aca9;
    opacity: 0.7;
    border-radius: 10px;
  }
  .page-salon .wrapper main .box .contact .contact2 a {
    color: #fff;
    font-size: 20px;
  }
}
@media screen and (min-width: 450px) {
  .page-salon {
    /* sp main-visual終了 */
  }
  .page-salon .main-visual {
    padding-top: 135px;
    position: relative;
  }
  .page-salon .main-visual .slider {
    height: auto;
  }
  .page-salon .main-visual .category2 {
    font-size: 6.5rem;
    position: absolute;
    height: auto;
    width: 100%;
    top: 55%;
    text-align: center;
    margin: auto;
    color: #ffffff;
    font-family: Georgia, serif;
    text-shadow: 1px 2px 3px #808080;
  }
  .page-salon .wrapper {
    width: 100%;
    position: static;
    /*  position: absolute;
    top: 86vw;
    left: 0;
    right: 0;
    margin: auto; */
  }
  .page-salon .wrapper main {
    width: 95%;
    height: auto;
    font-size: 1.5em;
    text-align: center;
    line-height: 1.8;
    background-color: #FFFFFF;
    margin: 0 auto;
    position: relative;
    /*  max-width: 1200px; */
    padding-top: 0;
  }
  .page-salon .wrapper main .tempo {
    margin-top: 10px;
  }
  .page-salon .wrapper main .tempo .title {
    font-size: 2rem;
    text-align: center;
    color: #71aca9;
    margin: 0;
  }
  .page-salon .wrapper main .map {
    margin-top: 40px;
    width: 100%;
    aspect-ratio: 100/75;
    /*mapサイズのヨコ/タテの比率でを指定*/
  }
  .page-salon .wrapper main .map iframe {
    width: 100%;
    height: 100%;
  }
  .page-salon .wrapper main .salon {
    margin-top: 40px;
    width: 100%;
    height: auto;
    max-width: 100%;
  }
  .page-salon .wrapper main .salon .access {
    font-size: 1.3rem;
  }
  .page-salon .wrapper main .salon .access h2 {
    font-size: 2rem;
    color: #555;
  }
  .page-salon .wrapper main .salon .access .address {
    margin-top: 1rem;
  }
  .page-salon .wrapper main .salon .access h3 {
    font-size: 1.5rem;
    margin-top: 3rem;
    color: #555;
  }
  .page-salon .wrapper main .salon hr {
    margin: 4rem 0;
  }
  .page-salon .wrapper main .salon .content3 h2 {
    font-size: 2rem;
    margin-top: 3rem;
    color: #555;
  }
  .page-salon .wrapper main .salon .content3 ul {
    list-style: none;
  }
  .page-salon .wrapper main .shop {
    margin-top: 4rem;
    position: relative;
    padding: 20px 0 0;
    display: flex;
    line-height: 1;
    gap: 3.5%;
  }
  .page-salon .wrapper main .shop li {
    height: 100%;
    width: 31%;
  }
  .page-salon .wrapper main .shop li .s-item p {
    margin-top: 0;
    margin-bottom: 0;
  }
  .page-salon .wrapper main .shop li .cap {
    margin-top: 1rem;
  }
  .page-salon .wrapper main .box .address {
    width: 100%;
    padding: 1.3rem;
    font-weight: normal;
    display: inline-block;
    border: solid 1px #000000;
    line-height: 1.5;
    margin-top: 70px;
    width: 90%;
    text-align: left;
  }
  .page-salon .wrapper main .box .address .box2 h2 {
    color: #555;
  }
  .page-salon .wrapper main .box .address .box2 h3 {
    color: #555;
  }
  .page-salon .wrapper main .box .address .box2 .box2-p1 {
    margin-top: 15px;
  }
  .page-salon .wrapper main .box .address .box2 .box2-p1 p {
    margin-top: 0;
    margin-bottom: 0;
  }
  .page-salon .wrapper main .box .address .box2 .box2-p2 {
    margin-top: 15px;
  }
  .page-salon .wrapper main .box .address .box2 .box2-p2 p {
    margin-top: 0;
    margin-bottom: 0;
  }
  .page-salon .wrapper main .box .contact {
    width: 90%;
    display: inline-block;
  }
  .page-salon .wrapper main .box .contact .contact1 {
    height: 40px;
    line-height: 40px;
    margin: 30px auto 0;
    text-align: center;
    background-color: #71aca9;
    opacity: 0.7;
    border-radius: 10px;
  }
  .page-salon .wrapper main .box .contact .contact1 a {
    color: #fff;
    font-size: 20px;
  }
  .page-salon .wrapper main .box .contact .contact2 {
    height: 40px;
    line-height: 40px;
    margin: 30px auto;
    text-align: center;
    background-color: #71aca9;
    opacity: 0.7;
    border-radius: 10px;
  }
  .page-salon .wrapper main .box .contact .contact2 a {
    color: #fff;
    font-size: 20px;
  }
}
@media screen and (min-width: 600px) {
  .page-salon {
    /* sp main-visual終了 */
  }
  .page-salon .main-visual {
    padding-top: 135px;
    position: relative;
  }
  .page-salon .main-visual .slider {
    height: auto;
  }
  .page-salon .main-visual .category2 {
    font-size: 6.5rem;
    position: absolute;
    height: auto;
    width: 100%;
    top: 55%;
    text-align: center;
    margin: auto;
    color: #ffffff;
    font-family: Georgia, serif;
    text-shadow: 1px 2px 3px #808080;
  }
  .page-salon .wrapper {
    width: 100%;
    position: absolute;
    top: 80vw;
    left: 0;
    right: 0;
    margin: auto;
  }
  .page-salon .wrapper main {
    width: 70%;
    height: auto;
    font-size: 1.5em;
    text-align: center;
    line-height: 1.8;
    background-color: #FFFFFF;
  }
  .page-salon .wrapper main .tempo {
    margin-top: 25px;
  }
  .page-salon .wrapper main .tempo .title {
    font-size: 2rem;
    text-align: center;
    color: #71aca9;
    margin: 0;
  }
  .page-salon .wrapper main .map {
    margin-top: 40px;
    width: 100%;
    aspect-ratio: 100/75;
    /*mapサイズのヨコ/タテの比率でを指定*/
  }
  .page-salon .wrapper main .map iframe {
    width: 100%;
    height: 100%;
  }
  .page-salon .wrapper main .salon {
    margin-top: 40px;
    width: 100%;
    height: auto;
    max-width: 100%;
  }
  .page-salon .wrapper main .salon .access {
    font-size: 1.3rem;
  }
  .page-salon .wrapper main .salon .access h2 {
    font-size: 2rem;
    color: #555;
  }
  .page-salon .wrapper main .salon .access .address {
    margin-top: 1rem;
  }
  .page-salon .wrapper main .salon .access h3 {
    font-size: 1.5rem;
    margin-top: 3rem;
    color: #555;
  }
  .page-salon .wrapper main .salon hr {
    margin: 4rem 0;
  }
  .page-salon .wrapper main .salon .content3 h2 {
    font-size: 2rem;
    margin-top: 3rem;
    color: #555;
  }
  .page-salon .wrapper main .salon .content3 ul {
    list-style: none;
  }
  .page-salon .wrapper main .shop {
    margin-top: 4rem;
    position: relative;
    padding: 20px 0 0;
    display: flex;
    line-height: 1;
    gap: 3.5%;
  }
  .page-salon .wrapper main .shop li {
    height: 100%;
    width: 31%;
  }
  .page-salon .wrapper main .shop li .s-item p {
    margin-top: 0;
    margin-bottom: 0;
  }
  .page-salon .wrapper main .shop li .s-item .cap {
    margin-top: 1rem;
  }
  .page-salon .wrapper main .box .address {
    width: 100%;
    padding: 1.3rem;
    font-weight: normal;
    display: inline-block;
    border: solid 1px #000000;
    line-height: 1.5;
    margin-top: 70px;
    width: 90%;
    text-align: left;
  }
  .page-salon .wrapper main .box .address .box2 h2 {
    color: #555;
  }
  .page-salon .wrapper main .box .address .box2 h3 {
    color: #555;
  }
  .page-salon .wrapper main .box .address .box2 .box2-p1 {
    margin-top: 15px;
  }
  .page-salon .wrapper main .box .address .box2 .box2-p1 p {
    margin-top: 0;
    margin-bottom: 0;
  }
  .page-salon .wrapper main .box .address .box2 .box2-p2 {
    margin-top: 15px;
  }
  .page-salon .wrapper main .box .address .box2 .box2-p2 p {
    margin-top: 0;
    margin-bottom: 0;
  }
  .page-salon .wrapper main .box .contact {
    width: 90%;
    display: inline-block;
  }
  .page-salon .wrapper main .box .contact .contact1 {
    height: 40px;
    line-height: 40px;
    margin: 30px auto;
    text-align: center;
    background-color: #71aca9;
    opacity: 0.7;
    border-radius: 10px;
  }
  .page-salon .wrapper main .box .contact .contact1 a {
    color: #fff;
  }
  .page-salon .wrapper main .box .contact .contact2 {
    height: 40px;
    line-height: 40px;
    margin: 30px auto;
    text-align: center;
    background-color: #71aca9;
    opacity: 0.7;
    border-radius: 10px;
  }
  .page-salon .wrapper main .box .contact .contact2 a {
    color: #fff;
  }
}
@media screen and (min-width: 1025px) {
  .page-salon {
    /* PC main-visual終了 */
  }
  .page-salon .main-visual {
    height: 84.7vw;
  }
  .page-salon .main-visual .slider {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 100vh;
    margin: 0;
  }
  .page-salon .main-visual .slider .slick-next {
    right: 0 !important;
  }
  .page-salon .main-visual .slider .slick-prev {
    left: 0 !important;
  }
  .page-salon .main-visual .slider .slick-arrow {
    z-index: 2 !important;
  }
  .page-salon .main-visual .slider .main01 {
    background-image: url("../images/medium3.jpg");
  }
  .page-salon .main-visual .slider .main02 {
    background-image: url("../images/salon0.jpg");
  }
  .page-salon .main-visual .slider .main03 {
    background-image: url("../images/long0.jpg");
  }
  .page-salon .main-visual .open-botton {
    width: 300px;
    height: 300px;
    background-color: #71aca9;
    color: #ffffff;
    text-align: center;
    font-size: 6rem;
    border-radius: 50%;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 7vw;
    top: 25rem;
  }
  .page-salon .main-visual .open-botton:hover {
    cursor: pointer;
    /* マウスカーソルを手の形にする */
    opacity: 0.7;
    /* ボタンの透明度を70%にする */
  }
  .page-salon .wrapper {
    width: 100%;
    position: absolute;
    top: 80vw;
    left: 0;
    right: 0;
    margin: auto;
    /* PC main 終了 */
  }
  .page-salon .wrapper main {
    width: 70%;
    height: auto;
    font-size: 1.5em;
    text-align: center;
    line-height: 1.8;
    background-color: #FFFFFF;
    margin-bottom: 10%;
    /*  position: relative;
    min-width: 1000px;
    max-width: 1200px;
    z-index: 0;
    margin: 0 auto;
    padding-top: 0;
    margin-top: 0; */
  }
  .page-salon .wrapper main .tempo {
    margin-top: 25px;
  }
  .page-salon .wrapper main .tempo .title {
    font-size: 2rem;
    text-align: center;
    color: #71aca9;
    margin: 0;
  }
  .page-salon .wrapper main .map {
    margin-top: 40px;
    width: 100%;
    aspect-ratio: 100/75;
    /*mapサイズのヨコ/タテの比率でを指定*/
  }
  .page-salon .wrapper main .map iframe {
    width: 100%;
    height: 100%;
  }
  .page-salon .wrapper main .salon .access {
    font-size: 20px;
    text-align: center;
    line-height: 1.5;
    margin-top: 80px;
    margin-bottom: 80px;
  }
  .page-salon .wrapper main .salon .access h2 {
    color: #555;
  }
  .page-salon .wrapper main .salon .access p {
    font-size: 2rem;
    margin-top: 1rem;
  }
  .page-salon .wrapper main .salon hr {
    width: 90%;
    margin: 0 auto;
    color: #808080;
  }
  .page-salon .wrapper main .salon .content3 {
    font-size: 20px;
    text-align: center;
    line-height: 1.5;
  }
  .page-salon .wrapper main .salon .content3 ul {
    margin-top: 1rem;
  }
  .page-salon .wrapper main .box {
    display: flex;
  }
  .page-salon .wrapper main .box .address {
    display: flex;
    width: 75%;
    spect-ratio: 2/0.96;
  }
  .page-salon .wrapper main .box .address .box2 {
    width: 30%;
  }
  .page-salon .wrapper main .box .address .box2 h2 {
    color: #555;
  }
  .page-salon .wrapper main .box .address .tempo {
    margin-left: 1.3rem;
    width: 70%;
  }
  .page-salon .wrapper main .box .address .tempo a {
    width: 50%;
    height: auto;
  }
  .page-salon .wrapper main .box .contact {
    display: flex;
    justify-content: flex-end;
    flex-flow: column;
    width: 25%;
    align-items: flex-end;
  }
  .page-salon .wrapper main .box .contact .contact1 {
    margin: 30px 0 0;
    border-radius: 10px;
    width: 90%;
  }
  .page-salon .wrapper main .box .contact .contact2 {
    margin: 30px 0 0;
    border-radius: 10px;
    width: 90%;
  }
}
@media screen and (min-width: 320px) {
  .page-price {
    /* sp main-visual終了 */
  }
  .page-price .main-visual {
    padding-top: 135px;
    position: relative;
  }
  .page-price .main-visual .slider {
    height: auto;
  }
  .page-price .main-visual .category2 {
    font-size: 6.5rem;
    position: absolute;
    height: auto;
    width: 100%;
    top: 55%;
    text-align: center;
    margin: auto;
    color: #ffffff;
    font-family: Georgia, serif;
    text-shadow: 1px 2px 3px #808080;
  }
  .page-price .wrapper {
    width: 100%;
    position: static;
    /*  position: absolute;
    top: 86vw;
    left: 0;
    right: 0;
    margin: auto; */
  }
  .page-price .wrapper main {
    width: 95%;
    height: auto;
    font-size: 1.5em;
    text-align: center;
    line-height: 1.8;
    background-color: #FFFFFF;
    margin: 0 auto;
    position: relative;
    padding-top: 40px;
  }
  .page-price .wrapper main .price {
    width: 100%;
    margin-top: 2rem;
    /*「nth-child」を使って、table.priceの2つ目のtrの中の1つ目と２つ目のtdに、「padding-top: 30px;」を適用している*/
  }
  .page-price .wrapper main .price tr th {
    font-size: 15px;
    line-height: 30px;
    background-color: #c7e1dd;
    text-align: center;
    color: #ffffff;
    font-family: "Hiragino Kaku Gothic ProN";
    width: 100%;
  }
  .page-price .wrapper main .price .area {
    margin-top: 2rem;
  }
  .page-price .wrapper main .price .area .price-left {
    padding-left: 3rem;
    padding-top: 1rem;
    width: 70%;
    text-align: left;
  }
  .page-price .wrapper main .price .area .price-right {
    width: 30%;
    text-align: left;
  }
  .page-price .wrapper main .price tr:nth-child(2) td:nth-child(1),
  .page-price .wrapper main .price tr:nth-child(2) td:nth-child(2) {
    padding-top: 30px;
  }
  .page-price .wrapper main .price-text {
    margin-top: 50px;
  }
  .page-price .wrapper main hr {
    margin-top: 50px;
  }
  .page-price .wrapper main .salon {
    margin-top: 40px;
    width: 100%;
    height: auto;
    max-width: 100%;
  }
  .page-price .wrapper main .salon .access {
    font-size: 1.3rem;
  }
  .page-price .wrapper main .salon .access h2 {
    font-size: 2rem;
    color: #555;
  }
  .page-price .wrapper main .salon .access .address {
    margin-top: 1rem;
  }
  .page-price .wrapper main .salon .access h3 {
    font-size: 1.5rem;
    margin-top: 3rem;
    color: #555;
  }
  .page-price .wrapper main .salon hr {
    margin: 4rem 0;
  }
  .page-price .wrapper main .salon .content3 h2 {
    font-size: 2rem;
    margin-top: 3rem;
    color: #555;
  }
  .page-price .wrapper main .salon .content3 ul {
    list-style: none;
  }
  .page-price .wrapper main .salon .box {
    margin-top: 50px;
    padding: 35px 18px;
    font-size: 0.6rem;
    width: auto;
    font-weight: normal;
    border: solid 2px #cccccc;
    border-radius: 10px;
    text-align: center;
    line-height: 1.5;
    clear: both;
  }
  .page-price .wrapper main .salon .box h2 {
    font-size: 2rem;
    color: #555;
  }
  .page-price .wrapper main .salon .box p {
    font-size: 1.3rem;
  }
  .page-price .wrapper main .salon .contact li {
    height: 40px;
    line-height: 40px;
    margin: 50px auto;
    text-align: center;
    background-color: #71aca9;
    opacity: 0.7;
    border-radius: 10px;
  }
  .page-price .wrapper main .salon .contact li a {
    color: #fff;
  }
}
@media screen and (min-width: 450px) {
  .page-price {
    /* sp main-visual終了 */
  }
  .page-price .main-visual {
    padding-top: 135px;
    position: relative;
  }
  .page-price .main-visual .slider {
    height: auto;
  }
  .page-price .main-visual .category2 {
    font-size: 6.5rem;
    position: absolute;
    height: auto;
    width: 100%;
    top: 55%;
    text-align: center;
    margin: auto;
    color: #ffffff;
    font-family: Georgia, serif;
    text-shadow: 1px 2px 3px #808080;
  }
  .page-price .wrapper {
    width: 100%;
    position: static;
    /*  position: absolute;
    top: 86vw;
    left: 0;
    right: 0;
    margin: auto; */
  }
  .page-price .wrapper main {
    width: 95%;
    height: auto;
    font-size: 1.5em;
    text-align: center;
    line-height: 1.8;
    background-color: #FFFFFF;
    margin: 0 auto;
    position: relative;
    padding-top: 40px;
  }
  .page-price .wrapper main .price {
    width: 100%;
    margin-top: 2rem;
    /*「nth-child」を使って、table.priceの2つ目のtrの中の1つ目と２つ目のtdに、「padding-top: 30px;」を適用している*/
  }
  .page-price .wrapper main .price tr th {
    font-size: 15px;
    line-height: 30px;
    background-color: #c7e1dd;
    text-align: center;
    color: #ffffff;
    font-family: "Hiragino Kaku Gothic ProN";
    width: 100%;
  }
  .page-price .wrapper main .price .area {
    margin-top: 2rem;
  }
  .page-price .wrapper main .price .area .price-left {
    padding-left: 3rem;
    padding-top: 1rem;
    width: 70%;
    text-align: left;
  }
  .page-price .wrapper main .price .area .price-right {
    width: 30%;
    text-align: left;
  }
  .page-price .wrapper main .price tr:nth-child(2) td:nth-child(1),
  .page-price .wrapper main .price tr:nth-child(2) td:nth-child(2) {
    padding-top: 30px;
  }
  .page-price .wrapper main .price-text {
    margin-top: 50px;
  }
  .page-price .wrapper main hr {
    margin-top: 50px;
  }
  .page-price .wrapper main .salon {
    margin-top: 40px;
    width: 100%;
    height: auto;
    max-width: 100%;
  }
  .page-price .wrapper main .salon .access {
    font-size: 1.3rem;
  }
  .page-price .wrapper main .salon .access h2 {
    font-size: 2rem;
    color: #555;
  }
  .page-price .wrapper main .salon .access .address {
    margin-top: 1rem;
  }
  .page-price .wrapper main .salon .access h3 {
    font-size: 1.5rem;
    margin-top: 3rem;
    color: #555;
  }
  .page-price .wrapper main .salon hr {
    margin: 4rem 0;
  }
  .page-price .wrapper main .salon .content3 h2 {
    font-size: 2rem;
    margin-top: 3rem;
    color: #555;
  }
  .page-price .wrapper main .salon .content3 ul {
    list-style: none;
  }
  .page-price .wrapper main .salon .box {
    margin-top: 50px;
    padding: 35px 18px;
    font-size: 0.6rem;
    width: auto;
    font-weight: normal;
    border: solid 2px #cccccc;
    border-radius: 10px;
    text-align: center;
    line-height: 1.5;
    clear: both;
  }
  .page-price .wrapper main .salon .box h2 {
    font-size: 2rem;
    color: #555;
  }
  .page-price .wrapper main .salon .box p {
    font-size: 1.3rem;
  }
  .page-price .wrapper main .salon .contact li {
    height: 40px;
    line-height: 40px;
    margin: 50px auto;
    text-align: center;
    background-color: #71aca9;
    opacity: 0.7;
    border-radius: 10px;
  }
  .page-price .wrapper main .salon .contact li a {
    color: #fff;
  }
}
@media screen and (min-width: 600px) {
  .page-price {
    /* tb main-visual終了 */
    /* tb main終了 */
  }
  .page-price .wrapper {
    width: 100%;
    position: absolute;
    top: 90vw;
    left: 0;
    right: 0;
    margin: auto;
  }
  .page-price .wrapper main {
    width: 70%;
    height: auto;
    text-align: center;
    line-height: 1.8;
    background-color: #FFFFFF;
    font-size: clamp(15px, 7.9245283019px + 1.179245283vw, 20px);
  }
  .page-price .wrapper main .price {
    width: 80%;
    margin: 3rem auto 0;
  }
  .page-price .wrapper main .price .area .price-left {
    padding-left: 2rem;
    width: 70%;
    text-align: left;
  }
  .page-price .wrapper main .price .area .price-right {
    width: 20%;
    text-align: left;
  }
  .page-price .wrapper main .salon .access h2 {
    color: #555;
  }
  .page-price .wrapper main .salon .access .address p {
    font-size: clamp(15px, 7.9245283019px + 1.179245283vw, 20px);
  }
  .page-price .wrapper main .salon .access h3 {
    color: #555;
  }
  .page-price .wrapper main .salon .access p {
    font-size: clamp(15px, 7.9245283019px + 1.179245283vw, 20px);
  }
  .page-price .wrapper main .salon .content3 h2 {
    color: #555;
  }
  .page-price .wrapper main .salon .box {
    padding: 35px 40px;
    font-weight: normal;
    border: solid 2px #cccccc;
    border-radius: 10px;
    /* 角の丸み */
    text-align: center;
    line-height: 1.5;
    width: 73%;
    clear: both;
    margin: 100px auto 0;
  }
  .page-price .wrapper main .salon .box a h2 {
    color: #555;
  }
  .page-price .wrapper main .salon .contact li {
    width: 73%;
    height: 40px;
    line-height: 40px;
    margin: 80px auto;
    text-align: center;
    background-color: #71aca9;
    opacity: 0.7;
    border-radius: 10px;
  }
  .page-price .wrapper main .salon .contact li a {
    color: #fff;
  }
}
@media screen and (min-width: 1025px) {
  .page-price {
    /* PC main-visual終了 */
  }
  .page-price .main-visual {
    height: 84.7vw;
  }
  .page-price .main-visual .slider {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 100vh;
    margin: 0;
  }
  .page-price .main-visual .slider .slick-next {
    right: 0 !important;
  }
  .page-price .main-visual .slider .slick-prev {
    left: 0 !important;
  }
  .page-price .main-visual .slider .slick-arrow {
    z-index: 2 !important;
  }
  .page-price .main-visual .slider .main01 {
    background-image: url("../images/medium3.jpg");
  }
  .page-price .main-visual .slider .main02 {
    background-image: url("../images/salon0.jpg");
  }
  .page-price .main-visual .slider .main03 {
    background-image: url("../images/long0.jpg");
  }
  .page-price .main-visual .open-botton {
    width: 300px;
    height: 300px;
    background-color: #71aca9;
    color: #ffffff;
    text-align: center;
    font-size: 6rem;
    border-radius: 50%;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 7vw;
    top: 25rem;
  }
  .page-price .main-visual .open-botton:hover {
    cursor: pointer;
    /* マウスカーソルを手の形にする */
    opacity: 0.7;
    /* ボタンの透明度を70%にする */
  }
  .page-price .wrapper {
    width: 100%;
    position: absolute;
    top: 80vw;
    left: 0;
    right: 0;
    margin: auto;
  }
  .page-price .wrapper main {
    width: 70%;
    height: auto;
    font-size: 2rem;
    text-align: center;
    line-height: 1.8;
    background-color: #FFFFFF;
    /* position: relative;
    min-width: 1000px;
    max-width: 1200px;
    // z-index: 100;
    margin: 0 auto;
    padding-top: 70px;*/
  }
  .page-price .wrapper main .price {
    width: 80%;
    margin: 3rem auto 0;
  }
  .page-price .wrapper main .price tr th {
    font-size: 20px;
    line-height: 40px;
    background-color: #c7e1dd;
    text-align: center;
    color: #ffffff;
    font-family: "Hiragino Kaku Gothic ProN";
  }
  .page-price .wrapper main .price .area .price-left {
    padding-left: 16rem;
    width: 70%;
    text-align: left;
  }
  .page-price .wrapper main .price .area .price-right {
    width: 30%;
    text-align: left;
  }
  .page-price .wrapper main .salon .access {
    font-size: 20px;
    text-align: center;
    line-height: 1.5;
    margin-top: 80px;
    margin-bottom: 80px;
  }
  .page-price .wrapper main .salon .access h2 {
    color: #555;
  }
  .page-price .wrapper main .salon .access h3 {
    color: #555;
  }
  .page-price .wrapper main .salon .access p {
    font-size: 2rem;
    margin-top: 1rem;
  }
  .page-price .wrapper main .salon hr {
    width: 90%;
    margin: 0 auto;
    color: #808080;
  }
  .page-price .wrapper main .salon .content3 {
    font-size: 20px;
    text-align: center;
    line-height: 1.5;
  }
  .page-price .wrapper main .salon .content3 h2 {
    color: #555;
  }
  .page-price .wrapper main .salon .content3 ul {
    margin-top: 1rem;
  }
  .page-price .wrapper main .salon .box {
    padding: 35px 40px;
    font-weight: normal;
    border: solid 2px #cccccc;
    border-radius: 10px;
    /* 角の丸み */
    font-size: 20px;
    text-align: center;
    line-height: 1.5;
    width: 47%;
    clear: both;
    margin: 100px auto 0;
  }
  .page-price .wrapper main .salon .box:hover {
    cursor: pointer;
    /* マウスカーソルを手の形にする */
    opacity: 0.7;
    /* ボタンの透明度を70%にする */
    background-color: #c7e1dd;
  }
  .page-price .wrapper main .salon .box a h2 {
    color: #555;
  }
  .page-price .wrapper main .salon .contact li {
    width: 47%;
    height: 40px;
    line-height: 40px;
    margin: 80px auto;
    text-align: center;
    background-color: #71aca9;
    opacity: 0.7;
    border-radius: 10px;
  }
  .page-price .wrapper main .salon .contact li a {
    color: #fff;
  }
}
/* PC main 終了 */
@media screen and (min-width: 320px) {
  .page-staff {
    /* sp main-visual終了 */
  }
  .page-staff .main-visual {
    padding-top: 135px;
    position: relative;
  }
  .page-staff .main-visual .slider {
    height: auto;
  }
  .page-staff .main-visual .category2 {
    font-size: 6.5rem;
    position: absolute;
    height: auto;
    width: 100%;
    top: 55%;
    text-align: center;
    margin: auto;
    color: #ffffff;
    font-family: Georgia, serif;
    text-shadow: 1px 2px 3px #808080;
  }
  .page-staff .wrapper {
    width: 100%;
    position: static;
    color: #555;
    /* position: absolute;
    top: 86vw;
    left: 0;
    right: 0;
    margin: auto; */
  }
  .page-staff .wrapper main {
    width: 95%;
    height: auto;
    font-size: 1.5em;
    text-align: center;
    line-height: 1.8;
    background-color: #FFFFFF;
    margin: 0 auto;
    position: relative;
    max-width: 1200px;
  }
  .page-staff .wrapper main .area1 {
    width: 50%;
    margin: 0 auto;
    padding-top: 60px;
  }
  .page-staff .wrapper main .area1 ul {
    padding-top: 20px;
  }
  .page-staff .wrapper main .area1 ul li h3 {
    text-align: left;
  }
  .page-staff .wrapper main .area1 ul li p {
    text-align: left;
  }
  .page-staff .wrapper main .area1 .area1-button {
    text-align: left;
    width: 100%;
    font-size: 14px;
    border-radius: 5px;
    font-family: "Times New Roman";
    height: 35px;
    background-color: #71aca9;
    text-align: center;
    line-height: 35px;
    margin-top: 10px;
  }
  .page-staff .wrapper main .area1 .area1-button a:link,
  .page-staff .wrapper main .area1 .area1-button a:hover,
  .page-staff .wrapper main .area1 .area1-button a:visited,
  .page-staff .wrapper main .area1 .area1-button a:active {
    color: #ffffff;
  }
  .page-staff .wrapper main .area2 {
    padding-top: 60px;
  }
  .page-staff .wrapper main .area2 .area2-inner {
    padding-top: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .page-staff .wrapper main .area2 .area2-inner .area-left {
    width: 48%;
  }
  .page-staff .wrapper main .area2 .area2-inner .area-left ul li h3 {
    text-align: left;
  }
  .page-staff .wrapper main .area2 .area2-inner .area-left ul li p {
    text-align: left;
  }
  .page-staff .wrapper main .area2 .area2-inner .area-left .area2-button {
    width: 100%;
    font-size: 14px;
    border-radius: 5px;
    font-family: "Times New Roman";
    height: 35px;
    background-color: #71aca9;
    text-align: center;
    line-height: 35px;
    margin-top: 10px;
  }
  .page-staff .wrapper main .area2 .area2-inner .area-left .area2-button a:link,
  .page-staff .wrapper main .area2 .area2-inner .area-left .area2-button a:hover,
  .page-staff .wrapper main .area2 .area2-inner .area-left .area2-button a:visited,
  .page-staff .wrapper main .area2 .area2-inner .area-left .area2-button a:active {
    color: #ffffff;
  }
  .page-staff .wrapper main .area2 .area2-inner .area-right {
    width: 48%;
  }
  .page-staff .wrapper main .area2 .area2-inner .area-right ul li h3 {
    text-align: left;
  }
  .page-staff .wrapper main .area2 .area2-inner .area-right ul li p {
    text-align: left;
  }
  .page-staff .wrapper main .area2 .area2-inner .area-right .area2-button {
    width: 100%;
    font-size: 14px;
    border-radius: 5px;
    font-family: "Times New Roman";
    height: 35px;
    background-color: #71aca9;
    text-align: center;
    line-height: 35px;
    margin-top: 10px;
  }
  .page-staff .wrapper main .area2 .area2-inner .area-right .area2-button a:link,
  .page-staff .wrapper main .area2 .area2-inner .area-right .area2-button a:hover,
  .page-staff .wrapper main .area2 .area2-inner .area-right .area2-button a:visited,
  .page-staff .wrapper main .area2 .area2-inner .area-right .area2-button a:active {
    color: #ffffff;
  }
  .page-staff .wrapper main .area3 {
    padding-top: 60px;
  }
  .page-staff .wrapper main .area3 .area3-inner {
    padding-top: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .page-staff .wrapper main .area3 .area3-inner .area-left {
    width: 48%;
  }
  .page-staff .wrapper main .area3 .area3-inner .area-left ul li h3 {
    text-align: left;
  }
  .page-staff .wrapper main .area3 .area3-inner .area-left ul li p {
    text-align: left;
  }
  .page-staff .wrapper main .area3 .area3-inner .area-left .area3-button {
    width: 100%;
    font-size: 14px;
    border-radius: 5px;
    font-family: "Times New Roman";
    height: 35px;
    background-color: #71aca9;
    text-align: center;
    line-height: 35px;
    margin-top: 10px;
  }
  .page-staff .wrapper main .area3 .area3-inner .area-left .area3-button a:link,
  .page-staff .wrapper main .area3 .area3-inner .area-left .area3-button a:hover,
  .page-staff .wrapper main .area3 .area3-inner .area-left .area3-button a:visited,
  .page-staff .wrapper main .area3 .area3-inner .area-left .area3-button a:active {
    color: #ffffff;
  }
  .page-staff .wrapper main .area3 .area3-inner .area-right {
    width: 48%;
  }
  .page-staff .wrapper main .area3 .area3-inner .area-right ul li h3 {
    text-align: left;
  }
  .page-staff .wrapper main .area3 .area3-inner .area-right ul li p {
    text-align: left;
  }
  .page-staff .wrapper main .area3 .area3-inner .area-right .area3-button {
    width: 100%;
    font-size: 14px;
    border-radius: 5px;
    font-family: "Times New Roman";
    height: 35px;
    background-color: #71aca9;
    text-align: center;
    line-height: 35px;
    margin-top: 10px;
  }
  .page-staff .wrapper main .area3 .area3-inner .area-right .area3-button a:link,
  .page-staff .wrapper main .area3 .area3-inner .area-right .area3-button a:hover,
  .page-staff .wrapper main .area3 .area3-inner .area-right .area3-button a:visited,
  .page-staff .wrapper main .area3 .area3-inner .area-right .area3-button a:active {
    color: #ffffff;
  }
  .page-staff .wrapper main .area4 {
    padding-top: 60px;
  }
  .page-staff .wrapper main .area4 .area4-inner {
    padding-top: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .page-staff .wrapper main .area4 .area4-inner .area-left {
    width: 48%;
  }
  .page-staff .wrapper main .area4 .area4-inner .area-left ul li h3 {
    text-align: left;
  }
  .page-staff .wrapper main .area4 .area4-inner .area-left ul li p {
    text-align: left;
  }
  .page-staff .wrapper main .area4 .area4-inner .area-left .area4-button {
    width: 100%;
    font-size: 14px;
    border-radius: 5px;
    font-family: "Times New Roman";
    height: 35px;
    background-color: #71aca9;
    text-align: center;
    line-height: 35px;
    margin-top: 10px;
  }
  .page-staff .wrapper main .area4 .area4-inner .area-left .area4-button a:link,
  .page-staff .wrapper main .area4 .area4-inner .area-left .area4-button a:hover,
  .page-staff .wrapper main .area4 .area4-inner .area-left .area4-button a:visited,
  .page-staff .wrapper main .area4 .area4-inner .area-left .area4-button a:active {
    color: #ffffff;
  }
  .page-staff .wrapper main .area4 .area4-inner .area-right {
    width: 48%;
  }
  .page-staff .wrapper main .area4 .area4-inner .area-right ul li h3 {
    text-align: left;
  }
  .page-staff .wrapper main .area4 .area4-inner .area-right ul li p {
    text-align: left;
  }
  .page-staff .wrapper main .area4 .area4-inner .area-right .area4-button {
    width: 100%;
    font-size: 14px;
    border-radius: 5px;
    font-family: "Times New Roman";
    height: 35px;
    background-color: #71aca9;
    text-align: center;
    line-height: 35px;
    margin-top: 10px;
  }
  .page-staff .wrapper main .area4 .area4-inner .area-right .area4-button a:link,
  .page-staff .wrapper main .area4 .area4-inner .area-right .area4-button a:hover,
  .page-staff .wrapper main .area4 .area4-inner .area-right .area4-button a:visited,
  .page-staff .wrapper main .area4 .area4-inner .area-right .area4-button a:active {
    color: #ffffff;
  }
  .page-staff .wrapper main .note {
    margin: 55px 0;
  }
  .page-staff .wrapper main .salon {
    margin-top: 40px;
    width: 100%;
    height: auto;
    max-width: 100%;
  }
  .page-staff .wrapper main .salon .access {
    font-size: 1.3rem;
  }
  .page-staff .wrapper main .salon .access h2 {
    font-size: 2rem;
  }
  .page-staff .wrapper main .salon .access .address {
    margin-top: 1rem;
  }
  .page-staff .wrapper main .salon .access h3 {
    font-size: 1.5rem;
    margin-top: 3rem;
  }
  .page-staff .wrapper main .salon .content3 h2 {
    font-size: 2rem;
    margin-top: 4rem;
  }
  .page-staff .wrapper main .salon .content3 ul {
    list-style: none;
  }
  .page-staff .wrapper main .salon .box {
    margin-top: 30px;
    padding: 35px 18px;
    font-size: 0.6rem;
    width: auto;
    font-weight: normal;
    border: solid 2px #cccccc;
    border-radius: 10px;
    text-align: center;
    line-height: 1.5;
    clear: both;
  }
  .page-staff .wrapper main .salon .box h2 {
    font-size: 2rem;
  }
  .page-staff .wrapper main .salon .box p {
    font-size: 1.3rem;
  }
  .page-staff .wrapper main .salon .box:hover {
    cursor: pointer;
    /* マウスカーソルを手の形にする */
    opacity: 0.7;
    /* ボタンの透明度を70%にする */
    background-color: #c7e1dd;
  }
  .page-staff .wrapper main .salon .contact-button {
    height: 40px;
    line-height: 40px;
    margin: 50px auto;
    text-align: center;
    background-color: #71aca9;
    opacity: 0.7;
    border-radius: 10px;
  }
  .page-staff .wrapper main .salon .contact-button a:link,
  .page-staff .wrapper main .salon .contact-button a:hover,
  .page-staff .wrapper main .salon .contact-button a:visited,
  .page-staff .wrapper main .salon .contact-button a:active {
    color: #ffffff;
  }
}
@media screen and (min-width: 450px) {
  .page-staff {
    /* sp2 main-visual終了 */
  }
  .page-staff .main-visual {
    padding-top: 135px;
    position: relative;
  }
  .page-staff .main-visual .slider {
    height: auto;
  }
  .page-staff .main-visual .category2 {
    font-size: 6.5rem;
    position: absolute;
    height: auto;
    width: 100%;
    top: 55%;
    text-align: center;
    margin: auto;
    color: #ffffff;
    font-family: Georgia, serif;
    text-shadow: 1px 2px 3px #808080;
  }
  .page-staff .wrapper {
    width: 100%;
    position: static;
    color: #555;
    /* position: absolute;
    top: 86vw;
    left: 0;
    right: 0;
    margin: auto; */
  }
  .page-staff .wrapper main {
    width: 95%;
    height: auto;
    font-size: 1.5em;
    text-align: center;
    line-height: 1.8;
    background-color: #FFFFFF;
    margin: 0 auto;
    position: relative;
    max-width: 1200px;
  }
  .page-staff .wrapper main .area1 {
    width: 50%;
    margin: 0 auto;
    padding-top: 60px;
  }
  .page-staff .wrapper main .area1 ul {
    padding-top: 30px;
  }
  .page-staff .wrapper main .area1 ul li h3 {
    text-align: left;
  }
  .page-staff .wrapper main .area1 ul li p {
    text-align: left;
  }
  .page-staff .wrapper main .area1 .area1-button {
    text-align: center;
    width: 100%;
    font-size: 14px;
    border-radius: 5px;
    color: #ffffff;
    font-family: "Times New Roman";
    height: 35px;
    background-color: #71aca9;
    line-height: 35px;
    margin-top: 10px;
  }
  .page-staff .wrapper main .area1 .area1-button a:link,
  .page-staff .wrapper main .area1 .area1-button a:hover,
  .page-staff .wrapper main .area1 .area1-button a:visited,
  .page-staff .wrapper main .area1 .area1-button a:active {
    color: #ffffff;
  }
  .page-staff .wrapper main .area2 {
    padding-top: 80px;
  }
  .page-staff .wrapper main .area2 .area2-inner {
    padding-top: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .page-staff .wrapper main .area2 .area2-inner .area-left {
    width: 48%;
  }
  .page-staff .wrapper main .area2 .area2-inner .area-left ul li h3 {
    text-align: left;
  }
  .page-staff .wrapper main .area2 .area2-inner .area-left .area2-button {
    width: 100%;
    font-size: 14px;
    border-radius: 5px;
    color: #ffffff;
    font-family: "Times New Roman";
    height: 35px;
    background-color: #71aca9;
    text-align: center;
    line-height: 35px;
    margin-top: 10px;
  }
  .page-staff .wrapper main .area2 .area2-inner .area-left .area2-button a:link,
  .page-staff .wrapper main .area2 .area2-inner .area-left .area2-button a:hover,
  .page-staff .wrapper main .area2 .area2-inner .area-left .area2-button a:visited,
  .page-staff .wrapper main .area2 .area2-inner .area-left .area2-button a:active {
    color: #ffffff;
  }
  .page-staff .wrapper main .area2 .area2-inner .area-right {
    width: 48%;
  }
  .page-staff .wrapper main .area2 .area2-inner .area-right ul li h3 {
    text-align: left;
  }
  .page-staff .wrapper main .area2 .area2-inner .area-right .area2-button {
    width: 100%;
    font-size: 14px;
    border-radius: 5px;
    color: #ffffff;
    font-family: "Times New Roman";
    height: 35px;
    background-color: #71aca9;
    text-align: center;
    line-height: 35px;
    margin-top: 10px;
  }
  .page-staff .wrapper main .area3 {
    padding-top: 80px;
  }
  .page-staff .wrapper main .area3 .area3-inner {
    padding-top: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .page-staff .wrapper main .area3 .area3-inner .area-left {
    width: 48%;
  }
  .page-staff .wrapper main .area3 .area3-inner .area-left ul li h3 {
    text-align: left;
  }
  .page-staff .wrapper main .area3 .area3-inner .area-left ul li p {
    text-align: left;
  }
  .page-staff .wrapper main .area3 .area3-inner .area-left .area3-button {
    width: 100%;
    font-size: 14px;
    border-radius: 5px;
    font-family: "Times New Roman";
    height: 35px;
    background-color: #71aca9;
    text-align: center;
    line-height: 35px;
    margin-top: 1-px;
  }
  .page-staff .wrapper main .area3 .area3-inner .area-left .area3-button a:link,
  .page-staff .wrapper main .area3 .area3-inner .area-left .area3-button a:hover,
  .page-staff .wrapper main .area3 .area3-inner .area-left .area3-button a:visited,
  .page-staff .wrapper main .area3 .area3-inner .area-left .area3-button a:active {
    color: #ffffff;
  }
  .page-staff .wrapper main .area3 .area3-inner .area-right {
    width: 48%;
  }
  .page-staff .wrapper main .area3 .area3-inner .area-right ul li h3 {
    text-align: left;
  }
  .page-staff .wrapper main .area3 .area3-inner .area-right ul li p {
    text-align: left;
  }
  .page-staff .wrapper main .area3 .area3-inner .area-right .area3-button {
    width: 100%;
    font-size: 14px;
    border-radius: 5px;
    font-family: "Times New Roman";
    height: 35px;
    background-color: #71aca9;
    text-align: center;
    line-height: 35px;
    margin-top: 1-px;
  }
  .page-staff .wrapper main .area3 .area3-inner .area-right .area3-button a:link,
  .page-staff .wrapper main .area3 .area3-inner .area-right .area3-button a:hover,
  .page-staff .wrapper main .area3 .area3-inner .area-right .area3-button a:visited,
  .page-staff .wrapper main .area3 .area3-inner .area-right .area3-button a:active {
    color: #ffffff;
  }
  .page-staff .wrapper main .area4 {
    padding-top: 80px;
  }
  .page-staff .wrapper main .area4 .area4-inner {
    padding-top: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .page-staff .wrapper main .area4 .area4-inner .area-left {
    width: 48%;
  }
  .page-staff .wrapper main .area4 .area4-inner .area-left ul li h3 {
    text-align: left;
  }
  .page-staff .wrapper main .area4 .area4-inner .area-left ul li p {
    text-align: left;
  }
  .page-staff .wrapper main .area4 .area4-inner .area-left .area4-button {
    width: 100%;
    font-size: 14px;
    border-radius: 5px;
    color: #ffffff;
    font-family: "Times New Roman";
    height: 35px;
    background-color: #71aca9;
    text-align: center;
    line-height: 35px;
    margin-top: 10px;
  }
  .page-staff .wrapper main .area4 .area4-inner .area-left .area4-button a:link,
  .page-staff .wrapper main .area4 .area4-inner .area-left .area4-button a:hover,
  .page-staff .wrapper main .area4 .area4-inner .area-left .area4-button a:visited,
  .page-staff .wrapper main .area4 .area4-inner .area-left .area4-button a:active {
    color: #ffffff;
  }
  .page-staff .wrapper main .area4 .area4-inner .area-right {
    width: 48%;
  }
  .page-staff .wrapper main .area4 .area4-inner .area-right ul li h3 {
    text-align: left;
  }
  .page-staff .wrapper main .area4 .area4-inner .area-right ul li p {
    text-align: left;
  }
  .page-staff .wrapper main .area4 .area4-inner .area-right .area4-button {
    width: 100%;
    font-size: 14px;
    border-radius: 5px;
    color: #ffffff;
    font-family: "Times New Roman";
    height: 35px;
    background-color: #71aca9;
    text-align: center;
    line-height: 35px;
    margin-top: 10px;
  }
  .page-staff .wrapper main .area4 .area4-inner .area-right .area4-button a:link,
  .page-staff .wrapper main .area4 .area4-inner .area-right .area4-button a:hover,
  .page-staff .wrapper main .area4 .area4-inner .area-right .area4-button a:visited,
  .page-staff .wrapper main .area4 .area4-inner .area-right .area4-button a:active {
    color: #ffffff;
  }
  .page-staff .wrapper main::after {
    content: "";
    display: block;
    width: 40%;
  }
  .page-staff .wrapper main .note {
    margin: 55px 0;
  }
  .page-staff .wrapper main .salon {
    margin-top: 40px;
    width: 100%;
    height: auto;
    max-width: 100%;
  }
  .page-staff .wrapper main .salon .access {
    font-size: 1.3rem;
  }
  .page-staff .wrapper main .salon .access h2 {
    font-size: 2rem;
  }
  .page-staff .wrapper main .salon .access .address {
    margin-top: 1rem;
  }
  .page-staff .wrapper main .salon .access h3 {
    font-size: 1.5rem;
    margin-top: 3rem;
  }
  .page-staff .wrapper main .salon .content3 h2 {
    font-size: 2rem;
    margin-top: 4rem;
  }
  .page-staff .wrapper main .salon .content3 ul {
    list-style: none;
  }
  .page-staff .wrapper main .salon .box {
    margin-top: 30px;
    padding: 35px 18px;
    font-size: 0.6rem;
    width: 61%;
    margin: 100px auto 0;
    font-weight: normal;
    border: solid 2px #cccccc;
    border-radius: 10px;
    text-align: center;
    line-height: 1.5;
    clear: both;
  }
  .page-staff .wrapper main .salon .box h2 {
    font-size: 2rem;
  }
  .page-staff .wrapper main .salon .box p {
    font-size: 1.3rem;
  }
  .page-staff .wrapper main .salon .box:hover {
    cursor: pointer;
    /* マウスカーソルを手の形にする */
    opacity: 0.7;
    /* ボタンの透明度を70%にする */
    background-color: #c7e1dd;
  }
  .page-staff .wrapper main .salon .contact-button {
    height: 40px;
    width: 61%;
    line-height: 40px;
    margin: 50px auto;
    text-align: center;
    background-color: #71aca9;
    opacity: 0.7;
    border-radius: 10px;
  }
  .page-staff .wrapper main .salon .contact-button a:link,
  .page-staff .wrapper main .salon .contact-button a:hover,
  .page-staff .wrapper main .salon .contact-button a:visited,
  .page-staff .wrapper main .salon .contact-button a:active {
    color: #ffffff;
  }
}
@media screen and (min-width: 600px) {
  .page-staff {
    /* tb main-visual終了 */
  }
  .page-staff .wrapper {
    width: 100%;
    position: absolute;
    top: 88vw;
    left: 0;
    right: 0;
    margin: auto;
    color: #555;
  }
  .page-staff .wrapper main {
    width: 90%;
    height: auto;
    font-size: 1.5em;
    text-align: center;
    line-height: 1.8;
    background-color: #FFFFFF;
    margin: 0 auto;
    position: relative;
    max-width: 1200px;
  }
  .page-staff .wrapper main .area1 {
    width: 40%;
    margin: 0 auto;
    padding-top: 60px;
  }
  .page-staff .wrapper main .area1 ul {
    padding-top: 30px;
  }
  .page-staff .wrapper main .area1 .area1-button {
    text-align: left;
    width: 100%;
    font-size: 14px;
    border-radius: 5px;
    font-family: "Times New Roman";
    height: 35px;
    background-color: #71aca9;
    text-align: center;
    line-height: 35px;
    margin-top: 10px;
  }
  .page-staff .wrapper main .area1 .area1-button a:link,
  .page-staff .wrapper main .area1 .area1-button a:hover,
  .page-staff .wrapper main .area1 .area1-button a:visited,
  .page-staff .wrapper main .area1 .area1-button a:active {
    color: #ffffff;
  }
  .page-staff .wrapper main .area2 {
    padding-top: 80px;
  }
  .page-staff .wrapper main .area2 h2 {
    position: relative;
    margin: 0 auto;
  }
  .page-staff .wrapper main .area2 .area2-inner {
    padding-top: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .page-staff .wrapper main .area2 .area2-inner .area-left {
    width: 30%;
  }
  .page-staff .wrapper main .area2 .area2-inner .area-left ul li h3 {
    text-align: left;
  }
  .page-staff .wrapper main .area2 .area2-inner .area-left ul li p {
    text-align: left;
  }
  .page-staff .wrapper main .area2 .area2-inner .area-left .area2-button {
    width: 100%;
    font-size: 14px;
    border-radius: 5px;
    color: #ffffff;
    font-family: "Times New Roman";
    height: 35px;
    background-color: #71aca9;
    text-align: center;
    line-height: 35px;
    margin-top: 10px;
  }
  .page-staff .wrapper main .area2 .area2-inner .area-left .area2-button a:link,
  .page-staff .wrapper main .area2 .area2-inner .area-left .area2-button a:hover,
  .page-staff .wrapper main .area2 .area2-inner .area-left .area2-button a:visited,
  .page-staff .wrapper main .area2 .area2-inner .area-left .area2-button a:active {
    color: #ffffff;
  }
  .page-staff .wrapper main .area2 .area2-inner .area-right {
    width: 30%;
  }
  .page-staff .wrapper main .area2 .area2-inner .area-right ul li h3 {
    text-align: left;
  }
  .page-staff .wrapper main .area2 .area2-inner .area-right ul li p {
    text-align: left;
  }
  .page-staff .wrapper main .area2 .area2-inner .area-right .area2-button {
    width: 100%;
    font-size: 14px;
    border-radius: 5px;
    color: #ffffff;
    font-family: "Times New Roman";
    height: 35px;
    background-color: #71aca9;
    text-align: center;
    line-height: 35px;
    margin-top: 10px;
  }
  .page-staff .wrapper main .area3 {
    padding-top: 80px;
  }
  .page-staff .wrapper main .area3 h2 {
    position: relative;
    margin: 0 auto;
  }
  .page-staff .wrapper main .area3 .area3-inner {
    padding-top: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .page-staff .wrapper main .area3 .area3-inner .area-left {
    width: 30%;
  }
  .page-staff .wrapper main .area3 .area3-inner .area-left ul li h3 {
    text-align: left;
  }
  .page-staff .wrapper main .area3 .area3-inner .area-left ul li p {
    text-align: left;
  }
  .page-staff .wrapper main .area3 .area3-inner .area-left .area3-button {
    width: 100%;
    font-size: 14px;
    border-radius: 5px;
    color: #ffffff;
    font-family: "Times New Roman";
    height: 35px;
    background-color: #71aca9;
    text-align: center;
    line-height: 35px;
    margin-top: 10px;
  }
  .page-staff .wrapper main .area3 .area3-inner .area-left .area3-button a:link,
  .page-staff .wrapper main .area3 .area3-inner .area-left .area3-button a:hover,
  .page-staff .wrapper main .area3 .area3-inner .area-left .area3-button a:visited,
  .page-staff .wrapper main .area3 .area3-inner .area-left .area3-button a:active {
    color: #ffffff;
  }
  .page-staff .wrapper main .area3 .area3-inner .area-right {
    width: 30%;
  }
  .page-staff .wrapper main .area3 .area3-inner .area-right ul li h3 {
    text-align: left;
  }
  .page-staff .wrapper main .area3 .area3-inner .area-right ul li p {
    text-align: left;
  }
  .page-staff .wrapper main .area3 .area3-inner .area-right .area3-button {
    width: 100%;
    font-size: 14px;
    border-radius: 5px;
    color: #ffffff;
    font-family: "Times New Roman";
    height: 35px;
    background-color: #71aca9;
    text-align: center;
    line-height: 35px;
    margin-top: 10px;
  }
  .page-staff .wrapper main .area4 {
    padding-top: 80px;
  }
  .page-staff .wrapper main .area4 h2 {
    position: relative;
    margin: 0 auto;
  }
  .page-staff .wrapper main .area4 .area4-inner {
    padding-top: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .page-staff .wrapper main .area4 .area4-inner .area-left {
    width: 30%;
  }
  .page-staff .wrapper main .area4 .area4-inner .area-left ul li h3 {
    text-align: left;
  }
  .page-staff .wrapper main .area4 .area4-inner .area-left ul li p {
    text-align: left;
  }
  .page-staff .wrapper main .area4 .area4-inner .area-left .area4-button {
    width: 100%;
    font-size: 14px;
    border-radius: 5px;
    color: #ffffff;
    font-family: "Times New Roman";
    height: 35px;
    background-color: #71aca9;
    text-align: center;
    line-height: 35px;
    margin-top: 10px;
  }
  .page-staff .wrapper main .area4 .area4-inner .area-left .area4-button a:link,
  .page-staff .wrapper main .area4 .area4-inner .area-left .area4-button a:hover,
  .page-staff .wrapper main .area4 .area4-inner .area-left .area4-button a:visited,
  .page-staff .wrapper main .area4 .area4-inner .area-left .area4-button a:active {
    color: #ffffff;
  }
  .page-staff .wrapper main .area4 .area4-inner .area-right {
    width: 30%;
  }
  .page-staff .wrapper main .area4 .area4-inner .area-right ul li h3 {
    text-align: left;
  }
  .page-staff .wrapper main .area4 .area4-inner .area-right ul li p {
    text-align: left;
  }
  .page-staff .wrapper main .area4 .area4-inner .area-right .area4-button {
    width: 100%;
    font-size: 14px;
    border-radius: 5px;
    color: #ffffff;
    font-family: "Times New Roman";
    height: 35px;
    background-color: #71aca9;
    text-align: center;
    line-height: 35px;
    margin-top: 10px;
  }
  .page-staff .wrapper main .note {
    margin: 90px 0;
  }
  .page-staff .wrapper main .note P {
    font-size: clamp(15px, 7.9245283019px + 1.179245283vw, 20px);
  }
  .page-staff .wrapper main .salon {
    margin-top: 40px;
    width: 100%;
    height: auto;
    max-width: 100%;
  }
  .page-staff .wrapper main .salon .access {
    font-size: clamp(15px, 7.9245283019px + 1.179245283vw, 20px);
  }
  .page-staff .wrapper main .salon .box {
    padding: 35px 40px;
    font-weight: normal;
    border: solid 2px #cccccc;
    border-radius: 10px;
    /* 角の丸み */
    font-size: 20px;
    text-align: center;
    line-height: 1.5;
    width: 57%;
    clear: both;
    margin: 100px auto 0;
  }
  .page-staff .wrapper main .salon .contact-button {
    height: 40px;
    width: 61%;
    line-height: 40px;
    margin: 50px auto;
    text-align: center;
    background-color: #71aca9;
    opacity: 0.7;
    border-radius: 10px;
  }
  .page-staff .wrapper main .salon .contact-button a:link,
  .page-staff .wrapper main .salon .contact-button a:hover,
  .page-staff .wrapper main .salon .contact-button a:visited,
  .page-staff .wrapper main .salon .contact-button a:active {
    color: #ffffff;
  }
}
@media screen and (min-width: 1025px) {
  .page-staff {
    /* PC main-visual終了 */
  }
  .page-staff .main-visual {
    height: 84.7vw;
  }
  .page-staff .main-visual .slider {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 100vh;
    margin: 0;
  }
  .page-staff .main-visual .slider .slick-next {
    right: 0 !important;
  }
  .page-staff .main-visual .slider .slick-prev {
    left: 0 !important;
  }
  .page-staff .main-visual .slider .slick-arrow {
    z-index: 2 !important;
  }
  .page-staff .main-visual .slider .main01 {
    background-image: url("../images/medium3.jpg");
  }
  .page-staff .main-visual .slider .main02 {
    background-image: url("../images/salon0.jpg");
  }
  .page-staff .main-visual .slider .main03 {
    background-image: url("../images/long0.jpg");
  }
  .page-staff .main-visual .open-botton {
    width: 300px;
    height: 300px;
    background-color: #71aca9;
    color: #ffffff;
    text-align: center;
    font-size: 6rem;
    border-radius: 50%;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 7vw;
    top: 25rem;
  }
  .page-staff .main-visual .open-botton:hover {
    cursor: pointer;
    /* マウスカーソルを手の形にする */
    opacity: 0.7;
    /* ボタンの透明度を70%にする */
  }
  .page-staff .wrapper {
    width: 100%;
    position: absolute;
    top: 80vw;
    left: 0;
    right: 0;
    margin: auto;
    color: #555;
  }
  .page-staff .wrapper main {
    width: 70%;
    height: auto;
    font-size: 2rem;
    text-align: center;
    line-height: 1.8;
    background-color: #FFFFFF;
    /*  position: relative;
        min-width: 1000px;
        max-width: 1200px;
        // z-index: 100;
        margin: 0 auto;
        padding-top: 80px; */
  }
  .page-staff .wrapper main .area1 {
    padding-top: 100px;
    position: relative;
    width: 30%;
    margin: 0 auto;
  }
  .page-staff .wrapper main .area1 ul {
    padding-top: 30px;
  }
  .page-staff .wrapper main .area1 ul li h3 {
    text-align: left;
  }
  .page-staff .wrapper main .area1 ul li p {
    text-align: left;
  }
  .page-staff .wrapper main .area1 .area1-button {
    text-align: left;
    width: 100%;
    font-size: 14px;
    border-radius: 5px;
    font-family: "Times New Roman";
    height: 35px;
    background-color: #71aca9;
    text-align: center;
    line-height: 35px;
    margin-top: 10px;
  }
  .page-staff .wrapper main .area1 .area1-button a:link,
  .page-staff .wrapper main .area1 .area1-button a:hover,
  .page-staff .wrapper main .area1 .area1-button a:visited,
  .page-staff .wrapper main .area1 .area1-button a:active {
    color: #ffffff;
  }
  .page-staff .wrapper main .area2 {
    padding-top: 100px;
  }
  .page-staff .wrapper main .area2 h2 {
    position: relative;
    margin: 0 auto;
  }
  .page-staff .wrapper main .area2 .area2-inner {
    padding-top: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 6vw 1.5vw;
    justify-content: left;
  }
  .page-staff .wrapper main .area2 .area2-inner .area-left {
    width: 22%;
  }
  .page-staff .wrapper main .area2 .area2-inner .area-left ul li h3 {
    text-align: left;
  }
  .page-staff .wrapper main .area2 .area2-inner .area-left ul li p {
    text-align: left;
  }
  .page-staff .wrapper main .area2 .area2-inner .area-left .area2-button {
    text-align: left;
    width: 100%;
    font-size: 14px;
    border-radius: 5px;
    font-family: "Times New Roman";
    height: 35px;
    background-color: #71aca9;
    text-align: center;
    line-height: 35px;
    margin-top: 10px;
  }
  .page-staff .wrapper main .area2 .area2-inner .area-left .area2-button a:link,
  .page-staff .wrapper main .area2 .area2-inner .area-left .area2-button a:hover,
  .page-staff .wrapper main .area2 .area2-inner .area-left .area2-button a:visited,
  .page-staff .wrapper main .area2 .area2-inner .area-left .area2-button a:active {
    color: #ffffff;
  }
  .page-staff .wrapper main .area2 .area2-inner .area-right {
    width: 22%;
  }
  .page-staff .wrapper main .area2 .area2-inner .area-right ul li h3 {
    text-align: left;
  }
  .page-staff .wrapper main .area2 .area2-inner .area-right ul li p {
    text-align: left;
  }
  .page-staff .wrapper main .area2 .area2-inner .area-right .area2-button {
    text-align: left;
    width: 100%;
    font-size: 14px;
    border-radius: 5px;
    font-family: "Times New Roman";
    height: 35px;
    background-color: #71aca9;
    text-align: center;
    line-height: 35px;
    margin-top: 10px;
  }
  .page-staff .wrapper main .area2 .area2-inner .area-right .area2-button a:link,
  .page-staff .wrapper main .area2 .area2-inner .area-right .area2-button a:hover,
  .page-staff .wrapper main .area2 .area2-inner .area-right .area2-button a:visited,
  .page-staff .wrapper main .area2 .area2-inner .area-right .area2-button a:active {
    color: #ffffff;
  }
  .page-staff .wrapper main .area3 {
    padding-top: 100px;
  }
  .page-staff .wrapper main .area3 h2 {
    position: relative;
    margin: 0 auto;
  }
  .page-staff .wrapper main .area3 .area3-inner {
    padding-top: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 6vw 1.5vw;
    justify-content: left;
  }
  .page-staff .wrapper main .area3 .area3-inner .area-left {
    width: 22%;
  }
  .page-staff .wrapper main .area3 .area3-inner .area-left ul li h3 {
    text-align: left;
  }
  .page-staff .wrapper main .area3 .area3-inner .area-left ul li p {
    text-align: left;
  }
  .page-staff .wrapper main .area3 .area3-inner .area-left .area3-button {
    text-align: left;
    width: 100%;
    font-size: 14px;
    border-radius: 5px;
    font-family: "Times New Roman";
    height: 35px;
    background-color: #71aca9;
    text-align: center;
    line-height: 35px;
    margin-top: 10px;
  }
  .page-staff .wrapper main .area3 .area3-inner .area-left .area3-button a:link,
  .page-staff .wrapper main .area3 .area3-inner .area-left .area3-button a:hover,
  .page-staff .wrapper main .area3 .area3-inner .area-left .area3-button a:visited,
  .page-staff .wrapper main .area3 .area3-inner .area-left .area3-button a:active {
    color: #ffffff;
  }
  .page-staff .wrapper main .area3 .area3-inner .area-right {
    width: 22%;
  }
  .page-staff .wrapper main .area3 .area3-inner .area-right ul li h3 {
    text-align: left;
  }
  .page-staff .wrapper main .area3 .area3-inner .area-right ul li p {
    text-align: left;
  }
  .page-staff .wrapper main .area3 .area3-inner .area-right .area3-button {
    text-align: left;
    width: 100%;
    font-size: 14px;
    border-radius: 5px;
    font-family: "Times New Roman";
    height: 35px;
    background-color: #71aca9;
    text-align: center;
    line-height: 35px;
    margin-top: 10px;
  }
  .page-staff .wrapper main .area3 .area3-inner .area-right .area3-button a:link,
  .page-staff .wrapper main .area3 .area3-inner .area-right .area3-button a:hover,
  .page-staff .wrapper main .area3 .area3-inner .area-right .area3-button a:visited,
  .page-staff .wrapper main .area3 .area3-inner .area-right .area3-button a:active {
    color: #ffffff;
  }
  .page-staff .wrapper main .area4 {
    padding-top: 100px;
  }
  .page-staff .wrapper main .area4 h2 {
    position: relative;
    margin: 0 auto;
  }
  .page-staff .wrapper main .area4 .area4-inner {
    padding-top: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 6vw 1.5vw;
    justify-content: left;
  }
  .page-staff .wrapper main .area4 .area4-inner .area-left {
    width: 22%;
  }
  .page-staff .wrapper main .area4 .area4-inner .area-left ul li h3 {
    text-align: left;
  }
  .page-staff .wrapper main .area4 .area4-inner .area-left ul li p {
    text-align: left;
  }
  .page-staff .wrapper main .area4 .area4-inner .area-left .area4-button {
    text-align: left;
    width: 100%;
    font-size: 14px;
    border-radius: 5px;
    font-family: "Times New Roman";
    height: 35px;
    background-color: #71aca9;
    text-align: center;
    line-height: 35px;
    margin-top: 10px;
  }
  .page-staff .wrapper main .area4 .area4-inner .area-left .area4-button a:link,
  .page-staff .wrapper main .area4 .area4-inner .area-left .area4-button a:hover,
  .page-staff .wrapper main .area4 .area4-inner .area-left .area4-button a:visited,
  .page-staff .wrapper main .area4 .area4-inner .area-left .area4-button a:active {
    color: #ffffff;
  }
  .page-staff .wrapper main .area4 .area4-inner .area-right {
    width: 22%;
  }
  .page-staff .wrapper main .area4 .area4-inner .area-right ul li h3 {
    text-align: left;
  }
  .page-staff .wrapper main .area4 .area4-inner .area-right ul li p {
    text-align: left;
  }
  .page-staff .wrapper main .area4 .area4-inner .area-right .area4-button {
    text-align: left;
    width: 100%;
    font-size: 14px;
    border-radius: 5px;
    font-family: "Times New Roman";
    height: 35px;
    background-color: #71aca9;
    text-align: center;
    line-height: 35px;
    margin-top: 10px;
  }
  .page-staff .wrapper main .area4 .area4-inner .area-right .area4-button a:link,
  .page-staff .wrapper main .area4 .area4-inner .area-right .area4-button a:hover,
  .page-staff .wrapper main .area4 .area4-inner .area-right .area4-button a:visited,
  .page-staff .wrapper main .area4 .area4-inner .area-right .area4-button a:active {
    color: #ffffff;
  }
  .page-staff .wrapper main .note {
    margin: 120px 0;
  }
  .page-staff .wrapper main .salon {
    text-align: center;
    line-height: 1.5;
    margin-top: 80px;
    margin-bottom: 80px;
  }
  .page-staff .wrapper main .salon .access {
    font-size: 20px;
  }
  .page-staff .wrapper main .salon hr {
    width: 90%;
    margin: 0 auto;
    color: #808080;
  }
  .page-staff .wrapper main .salon .content3 {
    font-size: 20px;
    text-align: center;
    line-height: 1.5;
  }
  .page-staff .wrapper main .salon .content3 ul {
    margin-top: 1rem;
  }
  .page-staff .wrapper main .salon .box {
    padding: 35px 40px;
    font-weight: normal;
    border: solid 2px #cccccc;
    border-radius: 10px;
    /* 角の丸み */
    font-size: 20px;
    text-align: center;
    line-height: 1.5;
    width: 47%;
    clear: both;
    margin: 100px auto 0;
  }
  .page-staff .wrapper main .salon .box:hover {
    cursor: pointer;
    /* マウスカーソルを手の形にする */
    opacity: 0.7;
    /* ボタンの透明度を70%にする */
    background-color: #c7e1dd;
  }
  .page-staff .wrapper main .salon .contact-button {
    height: 40px;
    width: 47%;
    line-height: 40px;
    margin: 50px auto;
    text-align: center;
    background-color: #71aca9;
    opacity: 0.7;
    border-radius: 10px;
  }
  .page-staff .wrapper main .salon .contact-button a:link,
  .page-staff .wrapper main .salon .contact-button a:hover,
  .page-staff .wrapper main .salon .contact-button a:visited,
  .page-staff .wrapper main .salon .contact-button a:active {
    color: #ffffff;
  }
}
/* PC main 終了 */
@media screen and (min-width: 320px) {
  .page-hairstyle {
    /* sp main-visual終了 */
    /* sp main終了 */
  }
  .page-hairstyle .main-visual {
    padding-top: 135px;
    position: relative;
  }
  .page-hairstyle .main-visual .slider {
    height: auto;
  }
  .page-hairstyle .main-visual .category2 {
    font-size: 6.5rem;
    position: absolute;
    height: auto;
    width: 100%;
    top: 55%;
    text-align: center;
    margin: auto;
    color: #ffffff;
    font-family: Georgia, serif;
    text-shadow: 1px 2px 3px #808080;
  }
  .page-hairstyle .wrapper {
    width: 100%;
    position: static;
    /*  position: absolute;
    top: 86vw;
    left: 0;
    right: 0;
    margin: auto; */
  }
  .page-hairstyle .wrapper main {
    width: 95%;
    height: auto;
    font-size: 1.5em;
    text-align: center;
    line-height: 1.8;
    background-color: #FFFFFF;
    margin: 0 auto;
    position: relative;
    max-width: 1200px;
  }
  .page-hairstyle .wrapper main .area {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-around;
  }
  .page-hairstyle .wrapper main .area .style {
    width: 29.4%;
    padding-top: 50px;
  }
  .page-hairstyle .wrapper main .area .style h4 {
    ext-align: center;
    color: #71aca9;
  }
  .page-hairstyle .wrapper main .salon {
    margin-top: 40px;
    width: 100%;
    height: auto;
    max-width: 100%;
    color: #555;
    font-size: 1.3rem;
  }
  .page-hairstyle .wrapper main .salon .access h2 {
    font-size: 2rem;
  }
  .page-hairstyle .wrapper main .salon .access .address {
    margin-top: 1rem;
  }
  .page-hairstyle .wrapper main .salon .access h3 {
    font-size: 1.5rem;
    margin-top: 3rem;
  }
  .page-hairstyle .wrapper main .salon .content3 h2 {
    font-size: 2rem;
    margin-top: 4rem;
  }
  .page-hairstyle .wrapper main .salon .content3 ul {
    list-style: none;
  }
  .page-hairstyle .wrapper main .salon .box {
    margin-top: 30px;
    padding: 35px 18px;
    width: auto;
    font-weight: normal;
    border: solid 2px #cccccc;
    border-radius: 10px;
    text-align: center;
    line-height: 1.5;
    clear: both;
  }
  .page-hairstyle .wrapper main .salon .box a h2 {
    font-size: 2rem;
  }
  .page-hairstyle .wrapper main .salon .box:hover {
    cursor: pointer;
    /* マウスカーソルを手の形にする */
    opacity: 0.7;
    /* ボタンの透明度を70%にする */
    background-color: #c7e1dd;
  }
  .page-hairstyle .wrapper main .salon .contact-button {
    height: 40px;
    line-height: 40px;
    margin: 50px auto;
    text-align: center;
    background-color: #71aca9;
    opacity: 0.7;
    border-radius: 10px;
  }
  .page-hairstyle .wrapper main .salon .contact-button a:link,
  .page-hairstyle .wrapper main .salon .contact-button a:hover,
  .page-hairstyle .wrapper main .salon .contact-button a:visited,
  .page-hairstyle .wrapper main .salon .contact-button a:active {
    color: #ffffff;
  }
}
@media screen and (min-width: 450px) {
  .page-hairstyle {
    /* sp2 main-visual終了 */
    /* sp2 main終了 */
  }
  .page-hairstyle .main-visual {
    padding-top: 135px;
    position: relative;
  }
  .page-hairstyle .main-visual .slider {
    height: auto;
  }
  .page-hairstyle .main-visual .category2 {
    font-size: 6.5rem;
    position: absolute;
    height: auto;
    width: 100%;
    top: 55%;
    text-align: center;
    margin: auto;
    color: #ffffff;
    font-family: Georgia, serif;
    text-shadow: 1px 2px 3px #808080;
  }
  .page-hairstyle .wrapper {
    width: 100%;
    position: static;
    /*  position: absolute;
    top: 86vw;
    left: 0;
    right: 0;
    margin: auto; */
  }
  .page-hairstyle .wrapper main {
    width: 95%;
    height: auto;
    font-size: 1.5em;
    text-align: center;
    line-height: 1.8;
    background-color: #FFFFFF;
    margin: 0 auto;
    position: relative;
    max-width: 1200px;
  }
  .page-hairstyle .wrapper main .area {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-around;
  }
  .page-hairstyle .wrapper main .area .style {
    width: 29.4%;
    padding-top: 50px;
  }
  .page-hairstyle .wrapper main .area .style h4 {
    ext-align: center;
    color: #71aca9;
  }
  .page-hairstyle .wrapper main .salon {
    margin-top: 40px;
    width: 100%;
    height: auto;
    max-width: 100%;
    color: #555;
    font-size: 1.3rem;
  }
  .page-hairstyle .wrapper main .salon .access h2 {
    font-size: 2rem;
  }
  .page-hairstyle .wrapper main .salon .access .address {
    margin-top: 1rem;
  }
  .page-hairstyle .wrapper main .salon .access h3 {
    font-size: 1.5rem;
    margin-top: 3rem;
  }
  .page-hairstyle .wrapper main .salon .content3 h2 {
    font-size: 2rem;
    margin-top: 4rem;
  }
  .page-hairstyle .wrapper main .salon .content3 ul {
    list-style: none;
  }
  .page-hairstyle .wrapper main .salon .box {
    margin-top: 30px;
    padding: 35px 18px;
    width: 61%;
    margin: 100px auto 0;
    font-weight: normal;
    border: solid 2px #cccccc;
    border-radius: 10px;
    text-align: center;
    line-height: 1.5;
    clear: both;
  }
  .page-hairstyle .wrapper main .salon .box a h2 {
    font-size: 2rem;
  }
  .page-hairstyle .wrapper main .salon .box:hover {
    cursor: pointer;
    /* マウスカーソルを手の形にする */
    opacity: 0.7;
    /* ボタンの透明度を70%にする */
    background-color: #c7e1dd;
  }
  .page-hairstyle .wrapper main .salon .contact-button {
    height: 40px;
    width: 61%;
    line-height: 40px;
    margin: 50px auto;
    text-align: center;
    background-color: #71aca9;
    opacity: 0.7;
    border-radius: 10px;
  }
  .page-hairstyle .wrapper main .salon .contact-button a:link,
  .page-hairstyle .wrapper main .salon .contact-button a:hover,
  .page-hairstyle .wrapper main .salon .contact-button a:visited,
  .page-hairstyle .wrapper main .salon .contact-button a:active {
    color: #ffffff;
  }
}
@media screen and (min-width: 600px) {
  .page-hairstyle {
    /* tb main-visual終了 */
    /* tb main-終了 */
  }
  .page-hairstyle .wrapper {
    width: 100%;
    position: absolute;
    top: 80vw;
    left: 0;
    right: 0;
    margin: auto;
  }
  .page-hairstyle .wrapper main {
    width: 70%;
    height: auto;
    font-size: 1.5em;
    text-align: center;
    line-height: 1.8;
    background-color: #FFFFFF;
    /*  margin: 0 auto;
        position: relative;
        max-width: 1200px; */
  }
  .page-hairstyle .wrapper main .area {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-around;
  }
  .page-hairstyle .wrapper main .area .style {
    width: 29.4%;
    padding-top: 50px;
  }
  .page-hairstyle .wrapper main .area .style h4 {
    ext-align: center;
    color: #71aca9;
  }
  .page-hairstyle .wrapper main .salon {
    margin-top: 40px;
    width: 100%;
    height: auto;
    max-width: 100%;
    color: #555;
    font-size: clamp(15px, 7.9245283019px + 1.179245283vw, 20px);
  }
  .page-hairstyle .wrapper main .salon .access h2 {
    font-size: 2rem;
  }
  .page-hairstyle .wrapper main .salon .access .address {
    margin-top: 1rem;
  }
  .page-hairstyle .wrapper main .salon .access h3 {
    font-size: 1.5rem;
    margin-top: 3rem;
  }
  .page-hairstyle .wrapper main .salon .content3 h2 {
    font-size: 2rem;
    margin-top: 4rem;
  }
  .page-hairstyle .wrapper main .salon .box {
    padding: 35px 40px;
    font-weight: normal;
    border: solid 2px #cccccc;
    border-radius: 10px;
    /* 角の丸み */
    text-align: center;
    line-height: 1.5;
    width: 73%;
    clear: both;
    margin: 100px auto 0;
  }
  .page-hairstyle .wrapper main .salon .box a h2 {
    font-size: 2rem;
  }
  .page-hairstyle .wrapper main .salon .contact-button {
    height: 40px;
    width: 68%;
    line-height: 40px;
    margin: 50px auto;
    text-align: center;
    background-color: #71aca9;
    opacity: 0.7;
    border-radius: 10px;
  }
  .page-hairstyle .wrapper main .salon .contact-button a:link,
  .page-hairstyle .wrapper main .salon .contact-button a:hover,
  .page-hairstyle .wrapper main .salon .contact-button a:visited,
  .page-hairstyle .wrapper main .salon .contact-button a:active {
    color: #ffffff;
  }
}
@media screen and (min-width: 1025px) {
  .page-hairstyle {
    /* PC main-visual終了 */
  }
  .page-hairstyle .main-visual {
    height: 84.7vw;
  }
  .page-hairstyle .main-visual .slider {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 100vh;
    margin: 0;
  }
  .page-hairstyle .main-visual .slider .slick-next {
    right: 0 !important;
  }
  .page-hairstyle .main-visual .slider .slick-prev {
    left: 0 !important;
  }
  .page-hairstyle .main-visual .slider .slick-arrow {
    z-index: 2 !important;
  }
  .page-hairstyle .main-visual .slider .main01 {
    background-image: url("../images/medium3.jpg");
  }
  .page-hairstyle .main-visual .slider .main02 {
    background-image: url("../images/salon0.jpg");
  }
  .page-hairstyle .main-visual .slider .main03 {
    background-image: url("../images/long0.jpg");
  }
  .page-hairstyle .main-visual .open-botton {
    width: 300px;
    height: 300px;
    background-color: #71aca9;
    color: #ffffff;
    text-align: center;
    font-size: 6rem;
    border-radius: 50%;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 7vw;
    top: 25rem;
  }
  .page-hairstyle .main-visual .open-botton:hover {
    cursor: pointer;
    /* マウスカーソルを手の形にする */
    opacity: 0.7;
    /* ボタンの透明度を70%にする */
  }
  .page-hairstyle .wrapper {
    width: 100%;
    position: absolute;
    top: 80vw;
    left: 0;
    right: 0;
    margin: auto;
  }
  .page-hairstyle .wrapper main {
    width: 70%;
    height: auto;
    font-size: 2rem;
    text-align: center;
    line-height: 1.8;
    background-color: #FFFFFF;
    /*  position: relative;
        min-width: 1000px;
        max-width: 1200px;
        // z-index: 100;
        margin: 0 auto;
        padding-top: 70px; */
  }
  .page-hairstyle .wrapper main .area {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-around;
  }
  .page-hairstyle .wrapper main .area .style {
    width: 29.4%;
    padding-top: 50px;
  }
  .page-hairstyle .wrapper main .area .style h4 {
    ext-align: center;
    color: #71aca9;
  }
  .page-hairstyle .wrapper main .salon .access {
    font-size: 20px;
    text-align: center;
    line-height: 1.5;
    margin-top: 80px;
    margin-bottom: 80px;
  }
  .page-hairstyle .wrapper main .salon .access h2 {
    font-size: 2rem;
  }
  .page-hairstyle .wrapper main .salon .access p {
    font-size: 2rem;
    margin-top: 1rem;
  }
  .page-hairstyle .wrapper main .salon hr {
    width: 90%;
    margin: 0 auto;
    color: #808080;
  }
  .page-hairstyle .wrapper main .salon .content3 {
    font-size: 20px;
    text-align: center;
    line-height: 1.5;
  }
  .page-hairstyle .wrapper main .salon .content3 h2 {
    font-size: 2rem;
    margin-top: 4rem;
  }
  .page-hairstyle .wrapper main .salon .content3 ul {
    margin-top: 1rem;
  }
  .page-hairstyle .wrapper main .salon .box {
    padding: 35px 40px;
    font-weight: normal;
    border: solid 2px #cccccc;
    border-radius: 10px;
    /* 角の丸み */
    font-size: 20px;
    text-align: center;
    line-height: 1.5;
    width: 49%;
    clear: both;
    margin: 100px auto 0;
  }
  .page-hairstyle .wrapper main .salon .box:hover {
    cursor: pointer;
    /* マウスカーソルを手の形にする */
    opacity: 0.7;
    /* ボタンの透明度を70%にする */
    background-color: #c7e1dd;
  }
  .page-hairstyle .wrapper main .salon .box a h2 {
    font-size: 2rem;
  }
  .page-hairstyle .wrapper main .salon .contact-button {
    height: 40px;
    width: 49%;
    line-height: 40px;
    margin: 50px auto;
    text-align: center;
    background-color: #71aca9;
    opacity: 0.7;
    border-radius: 10px;
  }
  .page-hairstyle .wrapper main .salon .contact-button a:link,
  .page-hairstyle .wrapper main .salon .contact-button a:hover,
  .page-hairstyle .wrapper main .salon .contact-button a:visited,
  .page-hairstyle .wrapper main .salon .contact-button a:active {
    color: #ffffff;
  }
}
/* PC main 終了 */
@media screen and (min-width: 320px) {
  .page-coupon .wrapper {
    width: 100%;
    position: absolute;
    top: 185px;
    left: 0;
    right: 0;
    margin: auto;
  }
  .page-coupon .wrapper main {
    width: 95%;
    height: auto;
    font-size: 1.5em;
    text-align: center;
    line-height: 1.8;
    background-color: #FFFFFF;
    margin: 0 auto;
    max-width: 1200px;
    padding-top: 0;
    padding-bottom: 15vw;
  }
  .page-coupon .wrapper main .content1 .content1-1 {
    position: relative;
  }
  .page-coupon .wrapper main .content1 .content1-1 .box {
    position: absolute;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    /*文字色*/
    width: 87%;
    height: 64px;
    background-color: rgba(255, 255, 255, 0.45);
    border: solid 3px #ffffff;
    /*線*/
    border-radius: 15px;
    /*角の丸み*/
    left: 0;
    right: 0;
    margin: auto;
    bottom: 58px;
  }
  .page-coupon .wrapper main .content1 .content1-1 .box a {
    color: #ef7488;
    font-size: 16px;
  }
  .page-coupon .wrapper main .content1 .content1-2 {
    position: relative;
    margin-top: 56px;
  }
  .page-coupon .wrapper main .content1 .content1-2 .box {
    position: absolute;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    /*文字色*/
    width: 87%;
    height: 64px;
    background-color: rgba(255, 255, 255, 0.45);
    border: solid 3px #ffffff;
    /*線*/
    border-radius: 15px;
    /*角の丸み*/
    left: 0;
    right: 0;
    margin: auto;
    bottom: 48px;
  }
  .page-coupon .wrapper main .content1 .content1-2 .box a {
    color: #ef7488;
    font-size: 16px;
  }
  .page-coupon .wrapper main .content1 .content1-3 {
    position: relative;
    margin-top: 56px;
  }
  .page-coupon .wrapper main .content1 .content1-3 .box {
    position: absolute;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    /*文字色*/
    width: 87%;
    height: 64px;
    background-color: rgba(255, 255, 255, 0.45);
    border: solid 3px #ffffff;
    /*線*/
    border-radius: 15px;
    /*角の丸み*/
    left: 0;
    right: 0;
    margin: auto;
    bottom: 58px;
  }
  .page-coupon .wrapper main .content1 .content1-3 .box a {
    color: #ef7488;
    font-size: 16px;
  }
  .page-coupon .wrapper main .content2 {
    display: none;
  }
}
@media screen and (min-width: 450px) {
  .page-coupon .wrapper {
    width: 100%;
    position: absolute;
    top: 185px;
    left: 0;
    right: 0;
    margin: auto;
  }
  .page-coupon .wrapper main {
    width: 95%;
    height: auto;
    font-size: 1.5em;
    text-align: center;
    line-height: 1.8;
    background-color: #FFFFFF;
    margin: 0 auto;
    max-width: 1200px;
    padding-top: 0;
    padding-bottom: 15vw;
  }
  .page-coupon .wrapper main .content1 .content1-1 {
    position: relative;
  }
  .page-coupon .wrapper main .content1 .content1-1 .box {
    position: absolute;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    /*文字色*/
    width: 87%;
    height: 64px;
    background-color: rgba(255, 255, 255, 0.45);
    border: solid 3px #ffffff;
    /*線*/
    border-radius: 15px;
    /*角の丸み*/
    left: 0;
    right: 0;
    margin: auto;
    bottom: 58px;
  }
  .page-coupon .wrapper main .content1 .content1-1 .box a {
    color: #ef7488;
    font-size: 16px;
  }
  .page-coupon .wrapper main .content1 .content1-2 {
    position: relative;
    margin-top: 56px;
  }
  .page-coupon .wrapper main .content1 .content1-2 .box {
    position: absolute;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    /*文字色*/
    width: 87%;
    height: 64px;
    background-color: rgba(255, 255, 255, 0.45);
    border: solid 3px #ffffff;
    /*線*/
    border-radius: 15px;
    /*角の丸み*/
    left: 0;
    right: 0;
    margin: auto;
    bottom: 48px;
  }
  .page-coupon .wrapper main .content1 .content1-2 .box a {
    color: #ef7488;
    font-size: 16px;
  }
  .page-coupon .wrapper main .content1 .content1-3 {
    position: relative;
    margin-top: 56px;
  }
  .page-coupon .wrapper main .content1 .content1-3 .box {
    position: absolute;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    /*文字色*/
    width: 87%;
    height: 64px;
    background-color: rgba(255, 255, 255, 0.45);
    border: solid 3px #ffffff;
    /*線*/
    border-radius: 15px;
    /*角の丸み*/
    left: 0;
    right: 0;
    margin: auto;
    bottom: 58px;
  }
  .page-coupon .wrapper main .content1 .content1-3 .box a {
    color: #ef7488;
    font-size: 16px;
  }
  .page-coupon .wrapper main .content2 {
    display: none;
  }
}
@media screen and (min-width: 600px) {
  .page-coupon .wrapper {
    width: 100%;
    position: absolute;
    top: 205px;
    left: 0;
    right: 0;
    margin: auto;
  }
  .page-coupon .wrapper main {
    width: 95%;
    height: auto;
    font-size: 1.5em;
    text-align: center;
    line-height: 1.8;
    background-color: #ffffff;
    padding-bottom: 7vw;
  }
  .page-coupon .wrapper main .content1 {
    display: none;
  }
  .page-coupon .wrapper main .content2 {
    display: block;
  }
  .page-coupon .wrapper main .content2 .content2-1 {
    position: relative;
  }
  .page-coupon .wrapper main .content2 .content2-1 .box {
    position: absolute;
    bottom: 0;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    /*文字色*/
    width: calc(123px + 81 * (100vw - 600px) / 424);
    height: calc(47px + 19 * (100vw - 600px) / 424);
    background-color: rgba(255, 255, 255, 0.45);
    border: solid 3px #ffffff;
    /*線*/
    border-radius: 7px;
    /*角の丸み*/
    margin-bottom: calc(12px + 12 * (100vw - 600px) / 424);
    margin-left: calc(12px + 12 * (100vw - 600px) / 424);
  }
  .page-coupon .wrapper main .content2 .content2-1 .box a {
    color: #ef7488;
    font-size: calc(13px + 4 * (100vw - 600px) / 424);
    line-height: initial;
  }
  .page-coupon .wrapper main .content2 .content2-1 .box:hover {
    cursor: pointer;
    /* マウスカーソルを手の形にする */
    opacity: 0.7;
    /* ボタンの透明度を70%にする */
  }
  .page-coupon .wrapper main .content2 .content2-2 {
    position: relative;
    margin-top: 56px;
  }
  .page-coupon .wrapper main .content2 .content2-2 .box {
    position: absolute;
    bottom: 0;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    /*文字色*/
    width: calc(123px + 81 * (100vw - 600px) / 424);
    height: calc(47px + 19 * (100vw - 600px) / 424);
    background-color: rgba(255, 255, 255, 0.45);
    border: solid 3px #ffffff;
    /*線*/
    border-radius: 7px;
    /*角の丸み*/
    margin-bottom: calc(12px + 12 * (100vw - 600px) / 424);
    margin-left: calc(12px + 12 * (100vw - 600px) / 424);
  }
  .page-coupon .wrapper main .content2 .content2-2 .box a {
    color: #ef7488;
    font-size: calc(13px + 4 * (100vw - 600px) / 424);
    line-height: initial;
  }
  .page-coupon .wrapper main .content2 .content2-2 .box:hover {
    cursor: pointer;
    /* マウスカーソルを手の形にする */
    opacity: 0.7;
    /* ボタンの透明度を70%にする */
  }
  .page-coupon .wrapper main .content2 .content2-3 {
    position: relative;
    margin-top: 56px;
  }
  .page-coupon .wrapper main .content2 .content2-3 .box {
    position: absolute;
    bottom: 0;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    /*文字色*/
    width: calc(123px + 81 * (100vw - 600px) / 424);
    height: calc(47px + 19 * (100vw - 600px) / 424);
    background-color: rgba(255, 255, 255, 0.45);
    border: solid 3px #ffffff;
    /*線*/
    border-radius: 7px;
    /*角の丸み*/
    margin-bottom: calc(12px + 12 * (100vw - 600px) / 424);
    margin-left: calc(12px + 12 * (100vw - 600px) / 424);
  }
  .page-coupon .wrapper main .content2 .content2-3 .box a {
    color: #ef7488;
    font-size: calc(13px + 4 * (100vw - 600px) / 424);
    line-height: initial;
  }
  .page-coupon .wrapper main .content2 .content2-3 .box:hover {
    cursor: pointer;
    /* マウスカーソルを手の形にする */
    opacity: 0.7;
    /* ボタンの透明度を70%にする */
  }
  /* tb main終了 */
}
@media screen and (min-width: 1025px) {
  .page-coupon .wrapper {
    width: 100%;
    position: absolute;
    top: 220px;
    left: 0;
    right: 0;
    margin: auto;
  }
  .page-coupon .wrapper main {
    width: 70%;
    height: auto;
    text-align: center;
    line-height: 1.8;
    background-color: #FFFFFF;
    padding-bottom: 5vw;
    /* position: relative;
        min-width: 1000px;
        max-width: 1200px;
        z-index: 0;
        margin: 0 auto; */
  }
  .page-coupon .wrapper main .content1 {
    display: none;
  }
  .page-coupon .wrapper main .content2 {
    display: block;
  }
  .page-coupon .wrapper main .content2 .content2-1 {
    position: relative;
  }
  .page-coupon .wrapper main .content2 .content2-1 .box {
    position: absolute;
    bottom: 0;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    /*文字色*/
    width: calc(153px + 158 * (100vw - 1025px) / 1215);
    height: calc(60px + 35 * (100vw - 1025px) / 1215);
    background-color: rgba(255, 255, 255, 0.45);
    border: solid 5px #ffffff;
    /*線*/
    border-radius: 10px;
    /*角の丸み*/
    margin-bottom: calc(17px + 25 * (100vw - 1025px) / 1215);
    margin-left: calc(17px + 25 * (100vw - 1025px) / 1215);
  }
  .page-coupon .wrapper main .content2 .content2-1 .box a {
    color: #ef7488;
    font-size: calc(14px + 17 * (100vw - 1025px) / 1215);
  }
  .page-coupon .wrapper main .content2 .content2-1 .box:hover {
    cursor: pointer;
    /* マウスカーソルを手の形にする */
    opacity: 0.7;
    /* ボタンの透明度を70%にする */
  }
  .page-coupon .wrapper main .content2 .content2-2 {
    position: relative;
    margin-top: 56px;
  }
  .page-coupon .wrapper main .content2 .content2-2 .box {
    position: absolute;
    bottom: 0;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    /*文字色*/
    width: calc(153px + 158 * (100vw - 1025px) / 1215);
    height: calc(60px + 35 * (100vw - 1025px) / 1215);
    background-color: rgba(255, 255, 255, 0.45);
    border: solid 5px #ffffff;
    /*線*/
    border-radius: 10px;
    /*角の丸み*/
    margin-bottom: calc(17px + 25 * (100vw - 1025px) / 1215);
    margin-left: calc(17px + 25 * (100vw - 1025px) / 1215);
  }
  .page-coupon .wrapper main .content2 .content2-2 .box a {
    color: #ef7488;
    font-size: calc(14px + 17 * (100vw - 1025px) / 1215);
  }
  .page-coupon .wrapper main .content2 .content2-2 .box:hover {
    cursor: pointer;
    /* マウスカーソルを手の形にする */
    opacity: 0.7;
    /* ボタンの透明度を70%にする */
  }
  .page-coupon .wrapper main .content2 .content2-3 {
    position: relative;
    margin-top: 56px;
  }
  .page-coupon .wrapper main .content2 .content2-3 .box {
    position: absolute;
    bottom: 0;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    /*文字色*/
    width: calc(153px + 158 * (100vw - 1025px) / 1215);
    height: calc(60px + 35 * (100vw - 1025px) / 1215);
    background-color: rgba(255, 255, 255, 0.45);
    border: solid 5px #ffffff;
    /*線*/
    border-radius: 10px;
    /*角の丸み*/
    margin-bottom: calc(17px + 25 * (100vw - 1025px) / 1215);
    margin-left: calc(17px + 25 * (100vw - 1025px) / 1215);
  }
  .page-coupon .wrapper main .content2 .content2-3 .box a {
    color: #ef7488;
    font-size: calc(14px + 17 * (100vw - 1025px) / 1215);
  }
  .page-coupon .wrapper main .content2 .content2-3 .box:hover {
    cursor: pointer;
    /* マウスカーソルを手の形にする */
    opacity: 0.7;
    /* ボタンの透明度を70%にする */
  }
}
@media screen and (min-width: 320px) {
  .page-campaign {
    background-color: #bedefc;
  }
  .page-campaign .wrapper {
    width: 100%;
    position: absolute;
    top: 136px;
    left: 0;
    right: 0;
    margin: auto;
    background-image: url(images/campaign-photo-sp.png);
    background-repeat: no-repeat;
    background-size: 100%;
  }
  .page-campaign .wrapper main {
    padding-top: 205px;
    background-position: 0 136px;
    width: 95%;
    height: auto;
    font-size: 1.5em;
    line-height: 1.8;
    margin: 0 auto;
    max-width: 1200px;
    padding-top: 100px;
    position: relative;
  }
  .page-campaign .wrapper main .image-sp {
    display: block;
  }
  .page-campaign .wrapper main .image-sp2 {
    display: none;
  }
  .page-campaign .wrapper main .image-tb {
    display: none;
  }
  .page-campaign .wrapper main .image-pc {
    display: none;
  }
  .page-campaign .wrapper main .content-div {
    width: 85%;
    margin: 0 auto;
  }
  .page-campaign .wrapper main .content-div h2 {
    text-align: center;
    font-size: calc(25px + 5 * (100vw - 320px) / 129);
  }
  .page-campaign .wrapper main .content-div p {
    padding-top: 26%;
    font-size: calc(16px + 6 * (100vw - 320px) / 129);
  }
  .page-campaign .wrapper main .content-div .content-ol {
    list-style: none;
    padding-left: 20px;
    font-size: calc(15px + 3 * (100vw - 320px) / 129);
  }
  .page-campaign .wrapper main .content-div .content-ol .content-li1 {
    padding-top: 10%;
    list-style-type: disclosure-closed;
  }
  .page-campaign .wrapper main .content-div .content-ol .content-li1 .text01 {
    font-size: 30px;
  }
  .page-campaign .wrapper main .content-div .content-ol .content-li2 {
    padding-top: 10%;
    list-style-type: disclosure-closed;
  }
  .page-campaign .wrapper main .content-div .content-ol .content-li2 .text02 {
    font-size: 30px;
  }
  .page-campaign .wrapper main .content-div .content-ol .content-li3 {
    padding-top: 10%;
    list-style-type: disclosure-closed;
  }
  .page-campaign .wrapper main .content-div .content-ol .content-li3 .text03 {
    font-size: 30px;
  }
  .page-campaign .wrapper .item-present {
    width: 82%;
    margin: 98% auto 9%;
  }
  .page-campaign .wrapper .item-present .item-present1 {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
  }
  .page-campaign .wrapper .item-present .item-present1 .item-present1-1 p {
    width: 100%;
  }
  .page-campaign .wrapper .item-present .item-present1 .item-present1-1 p:nth-child(1) {
    margin-bottom: 20%;
  }
  .page-campaign .wrapper .item-present .item-present1 .item-present1-2 {
    display: none;
  }
  .page-campaign .wrapper .item-present .item-present2 {
    width: 82%;
    position: absolute;
    top: calc(600px + 73 * (100vw - 320px) / 129);
  }
  .page-campaign .wrapper .item-present .item-present2 p {
    width: 100%;
  }
  .page-campaign .wrapper .box {
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    /*文字色*/
    width: 82%;
    height: 45px;
    background-color: #FFE8EC;
    border: solid 3px #FFDBE1;
    /*線*/
    border-radius: 15px;
    /*角の丸み*/
    left: 0;
    right: 0;
    margin: 15% auto;
    bottom: 4%;
    bottom: calc(15px + 45 * (100vw - 320px) / 129);
  }
  .page-campaign .wrapper .box a {
    color: #ef7488;
    font-size: 16px;
  }
}
/* sp main終了 */
@media screen and (min-width: 450px) {
  .page-campaign {
    background-color: #bedefc;
  }
  .page-campaign .wrapper {
    width: 100%;
    position: absolute;
    top: 136px;
    left: 0;
    right: 0;
    margin: auto;
    background-image: url(images/campaign-photo-sp2.png);
    background-repeat: no-repeat;
    background-size: 100%;
  }
  .page-campaign .wrapper main {
    padding-top: 120px;
    padding-bottom: 75px;
  }
  .page-campaign .wrapper main .content {
    width: 100%;
    height: auto;
    font-size: 1.5em;
    line-height: 1.8;
    margin: 0 auto;
    max-width: 1200px;
    padding-top: 0;
    position: relative;
  }
  .page-campaign .wrapper main .content .image-sp {
    display: none;
  }
  .page-campaign .wrapper main .content .image-sp2 {
    display: block;
  }
  .page-campaign .wrapper main .content .image-tb {
    display: none;
  }
  .page-campaign .wrapper main .content .image-pc {
    display: none;
  }
  .page-campaign .wrapper main .content .content-div {
    width: 80%;
    margin: 0 auto;
  }
  .page-campaign .wrapper main .content .content-div h2 {
    text-align: center;
  }
  .page-campaign .wrapper main .content .content-div p {
    padding-top: calc(75px + 35 * (100vw - 450px) / 149);
  }
  .page-campaign .wrapper main .content .content-div .content-ol {
    list-style: none;
    padding-left: 20px;
    font-size: 18px;
  }
  .page-campaign .wrapper main .content .content-div .content-ol .content-li1 {
    padding-top: calc(12px + 15 * (100vw - 450px) / 149);
    list-style-type: disclosure-closed;
  }
  .page-campaign .wrapper main .content .content-div .content-ol .content-li1 .text01 {
    font-size: 30px;
  }
  .page-campaign .wrapper main .content .content-div .content-ol .content-li2 {
    padding-top: calc(1px + 18 * (100vw - 450px) / 149);
    list-style-type: disclosure-closed;
  }
  .page-campaign .wrapper main .content .content-div .content-ol .content-li2 .text02 {
    font-size: 30px;
  }
  .page-campaign .wrapper main .content .content-div .content-ol .content-li3 {
    padding-top: calc(23px + 9 * (100vw - 450px) / 149);
    list-style-type: disclosure-closed;
  }
  .page-campaign .wrapper main .content .content-div .content-ol .content-li3 .text03 {
    font-size: 30px;
  }
  .page-campaign .wrapper main .item-present {
    width: 82%;
    margin: 10% auto 16%;
  }
  .page-campaign .wrapper main .item-present .item-present1 {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
  }
  .page-campaign .wrapper main .item-present .item-present1 .item-present1-1 {
    display: none;
  }
  .page-campaign .wrapper main .item-present .item-present1 .item-present1-2 {
    display: block;
  }
  .page-campaign .wrapper main .item-present .item-present1 .item-present1-2 p {
    width: 100%;
  }
  .page-campaign .wrapper main .item-present .item-present1 .item-present1-2 p:nth-child(1) {
    margin-bottom: 8%;
  }
  .page-campaign .wrapper main .item-present .item-present2 {
    width: calc(130px + 50 * (100vw - 450px) / 149);
    position: absolute;
    top: calc(438px + 77 * (100vw - 450px) / 149);
    right: 0px;
  }
  .page-campaign .wrapper main .item-present .item-present2 p {
    width: 100%;
  }
  .page-campaign .wrapper main .box {
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    /*文字色*/
    width: 79%;
    height: 45px;
    background-color: #FFE8EC;
    border: solid 3px #FFDBE1;
    /*線*/
    border-radius: 15px;
    /*角の丸み*/
    left: 0;
    right: 0;
    margin: auto;
    bottom: calc(-77px + 6 * (100vw - 450px) / 149);
  }
  .page-campaign .wrapper main .box a {
    color: #ef7488;
    font-size: 19px;
  }
}
/* sp2 main終了 */
@media screen and (min-width: 600px) {
  .page-campaign {
    background-color: #bedefc;
  }
  .page-campaign .wrapper {
    width: 100%;
    position: absolute;
    top: 160px;
    left: 0;
    right: 0;
    margin: auto;
    background-image: url(images/campaign-photo-tb.png);
    background-repeat: no-repeat;
    background-size: 100%;
  }
  .page-campaign .wrapper main {
    padding-top: clamp(155px, 6.4150943396px + 24.7641509434vw, 260px);
    padding-bottom: 75px;
  }
  .page-campaign .wrapper main .content {
    width: 100%;
    height: auto;
    font-size: 1.5em;
    line-height: 1.8;
    margin: 0 auto;
    max-width: 1200px;
    padding-top: 0px;
    position: relative;
  }
  .page-campaign .wrapper main .content .image-sp {
    display: none;
  }
  .page-campaign .wrapper main .content .image-sp2 {
    display: none;
  }
  .page-campaign .wrapper main .content .image-tb {
    display: block;
  }
  .page-campaign .wrapper main .content .image-pc {
    display: none;
  }
  .page-campaign .wrapper main .content .content-div {
    width: 81%;
    margin: 0 auto;
  }
  .page-campaign .wrapper main .content .content-div h2 {
    text-align: center;
    font-size: 44px;
    padding-top: 38%;
  }
  .page-campaign .wrapper main .content .content-div p {
    padding-top: 27%;
    font-size: calc(24px + 21 * (100vw - 600px) / 424);
  }
  .page-campaign .wrapper main .content .content-div .content-ol {
    list-style: none;
    padding: 10%;
    font-size: calc(18px + 12 * (100vw - 600px) / 424);
  }
  .page-campaign .wrapper main .content .content-div .content-ol .content-li1 {
    padding-top: calc(15px + 15 * (100vw - 600px) / 424);
    list-style-type: disclosure-closed;
  }
  .page-campaign .wrapper main .content .content-div .content-ol .content-li1 .text01 {
    font-size: 50px;
  }
  .page-campaign .wrapper main .content .content-div .content-ol .content-li2 {
    padding-top: calc(15px + 36 * (100vw - 600px) / 424);
    list-style-type: disclosure-closed;
  }
  .page-campaign .wrapper main .content .content-div .content-ol .content-li2 .text02 {
    font-size: 50px;
  }
  .page-campaign .wrapper main .content .content-div .content-ol .content-li3 {
    padding-top: calc(30px + 36 * (100vw - 600px) / 424);
    list-style-type: disclosure-closed;
  }
  .page-campaign .wrapper main .content .content-div .content-ol .content-li3 .text03 {
    font-size: 50px;
  }
  .page-campaign .wrapper main .item-present {
    width: 72%;
    margin: 8% auto 15%;
    position: relative;
  }
  .page-campaign .wrapper main .item-present .item-present1 {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
  }
  .page-campaign .wrapper main .item-present .item-present1 .item-present1-1 {
    display: none;
  }
  .page-campaign .wrapper main .item-present .item-present1 .item-present1-2 {
    display: block;
  }
  .page-campaign .wrapper main .item-present .item-present1 .item-present1-2 p {
    width: 100%;
  }
  .page-campaign .wrapper main .item-present .item-present1 .item-present1-2 p:nth-child(1) {
    margin-bottom: 8%;
  }
  .page-campaign .wrapper main .item-present .item-present2 {
    width: calc(188px + 120 * (100vw - 600px) / 424);
    position: absolute;
    top: calc(-355px + -126 * (100vw - 600px) / 424);
    right: -57px;
  }
  .page-campaign .wrapper main .item-present .item-present2 p {
    width: 100%;
  }
  .page-campaign .wrapper main .box {
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    /*文字色*/
    width: 67%;
    height: calc(55px + 20 * (100vw - 600px) / 424);
    background-color: rgba(255, 255, 255, 0.45);
    border: solid 3px #ffffff;
    /*線*/
    border-radius: 15px;
    /*角の丸み*/
  }
  .page-campaign .wrapper main .box a {
    color: #ef7488;
    font-size: calc(21px + 7 * (100vw - 600px) / 424);
  }
}
/* tb main終了 */
@media screen and (min-width: 1025px) {
  .page-campaign {
    background-color: #bedefc;
  }
  .page-campaign .wrapper {
    width: 100%;
    position: absolute;
    top: 176px;
    left: 0;
    right: 0;
    margin: auto;
    background-image: url(images/campaign-photo-pc.png);
    background-repeat: no-repeat;
    background-size: 100%;
  }
  .page-campaign .wrapper main {
    padding-top: clamp(290px, 159.2386831276px + 12.7572016461vw, 445px);
    padding-bottom: 75px;
  }
  .page-campaign .wrapper main .content {
    width: 100%;
    height: auto;
    font-size: 1.5em;
    line-height: 1.8;
    margin: 0 auto;
    max-width: 2240px;
    padding-top: 2px;
    position: relative;
  }
  .page-campaign .wrapper main .content .image-sp {
    display: none;
  }
  .page-campaign .wrapper main .content .image-sp2 {
    display: none;
  }
  .page-campaign .wrapper main .content .image-tb {
    display: none;
  }
  .page-campaign .wrapper main .content .image-pc {
    display: block;
  }
  .page-campaign .wrapper main .content .content-div {
    width: 80%;
    margin: 0 auto;
  }
  .page-campaign .wrapper main .content .content-div h2 {
    text-align: center;
    font-size: 75px;
    padding-top: calc(115px + 188 * (100vw - 1025px) / 1251);
  }
  .page-campaign .wrapper main .content .content-div p {
    font-size: 45px;
    padding-top: calc(170px + 230 * (100vw - 1025px) / 1251);
  }
  .page-campaign .wrapper main .content .content-div .content-ol {
    list-style: none;
    padding: 0 55px;
    font-size: 30px;
  }
  .page-campaign .wrapper main .content .content-div .content-ol .content-li1 {
    padding-top: calc(20px + 125 * (100vw - 1025px) / 1251);
    list-style-type: disclosure-closed;
  }
  .page-campaign .wrapper main .content .content-div .content-ol .content-li1 .text01 {
    font-size: 70px;
  }
  .page-campaign .wrapper main .content .content-div .content-ol .content-li2 {
    padding-top: calc(9px + 73 * (100vw - 1025px) / 1251);
    list-style-type: disclosure-closed;
  }
  .page-campaign .wrapper main .content .content-div .content-ol .content-li2 .text02 {
    font-size: 70px;
  }
  .page-campaign .wrapper main .content .content-div .content-ol .content-li3 {
    padding-top: calc(2px + 85 * (100vw - 1025px) / 1251);
    list-style-type: disclosure-closed;
  }
  .page-campaign .wrapper main .content .content-div .content-ol .content-li3 .text03 {
    font-size: 70px;
  }
  .page-campaign .wrapper main .item-present {
    display: flex;
    width: 72%;
    margin: 6% 20% 10% 19%;
  }
  .page-campaign .wrapper main .item-present .item-present1 {
    width: 70%;
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: right;
  }
  .page-campaign .wrapper main .item-present .item-present1 .item-present1-1 {
    display: none;
  }
  .page-campaign .wrapper main .item-present .item-present1 .item-present1-2 {
    display: block;
  }
  .page-campaign .wrapper main .item-present .item-present1 .item-present1-2 p {
    width: 100%;
  }
  .page-campaign .wrapper main .item-present .item-present1 .item-present1-2 p:nth-child(1) {
    margin-bottom: 8%;
  }
  .page-campaign .wrapper main .item-present .item-present2 {
    width: 50%;
    padding-top: 12%;
    position: static;
  }
  .page-campaign .wrapper main .item-present .item-present2 p {
    width: 85%;
  }
  .page-campaign .wrapper main .box {
    font-weight: bold;
    justify-content: center;
    align-items: center;
    /*文字色*/
    width: 72%;
    height: calc(50px + 70 * (100vw - 1025px) / 1251);
    background-color: rgba(255, 255, 255, 0.45);
    border: solid 3px #ffffff;
    /*線*/
    border-radius: 15px;
    /*角の丸み*/
  }
  .page-campaign .wrapper main .box a {
    color: #ef7488;
    font-size: calc(28px + 6 * (100vw - 1025px) / 1251);
  }
}
/* pc main終了 */
@media screen and (min-width: 320px) {
  /*     #aoyam_special-open{

          .article2{
              .article-img{
                  img{
                  width: 70%;                   
                  }
              }

              p{
                  width: 70%;
                  display: flex;              
                  margin: 15px auto 30px;
                  font-size: 15px;
                  text-align:left
              }

              .wp-block-gallery{
                  figure:nth-child(1){
                      width: 40%;
                  }
                  figure:nth-child(2){
                      width: 60%;
                  }
              }
          }
      } */
  .wrapper::before {
    height: 135px;
    content: "";
    display: block;
  }
  .wrapper article {
    background-color: #cd9ecc;
    text-align: center;
    padding: 40px 0;
  }
  .wrapper article .article1 .article-info {
    width: 70%;
    display: flex;
    margin: 15px auto 0;
  }
  .wrapper article .article1 .article-info .cat-data .post-categories {
    font-size: 15px;
  }
  .wrapper article .article1 .article-info .article-date .far {
    font-size: 10px;
  }
  .wrapper article .article1 .article-info .article-date time {
    margin-left: 20px;
    font-size: 15px;
  }
  .wrapper article .article1 h1 {
    width: 70%;
    margin: 10px auto 15px;
    text-align: left;
  }
  .wrapper article .article2 {
    /*  .article-img{
         img{
         width: 70%;                   
         }
     } */
  }
  .wrapper article .article2 p {
    width: 70%;
    display: flex;
    margin: 15px auto 30px;
    font-size: 15px;
    text-align: left;
  }
  .wrapper article .article2 .wp-block-gallery figure:nth-child(1) {
    width: 40%;
  }
  .wrapper article .article2 .wp-block-gallery figure:nth-child(2) {
    width: 60%;
  }
  footer {
    width: 100%;
    height: auto;
    padding-bottom: 30px;
    background-color: aliceblue;
  }
  footer .sns-navi {
    margin: 0px 40px 50px;
    padding-top: 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0px 29px;
    height: 11rem;
    list-style: none;
  }
  footer .sns-navi .f-item {
    width: 60px;
    height: 60px;
    cursor: pointer;
    opacity: 0.7;
  }
  footer .footer-navi .footer-navi-inner {
    text-align: center;
    width: 80%;
    display: flex;
    flex-flow: column;
    justify-content: center;
    margin: 40px auto;
    font-size: 2rem;
    list-style: none;
  }
  footer .footer-navi .footer-navi-inner li {
    line-height: 50px;
    padding: 0 30px;
  }
  footer .footer-navi .footer-navi-inner li a {
    color: #71aca9;
  }
  footer hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #cccccc;
    margin: 1em 0;
    padding: 0;
  }
  .copyright {
    font-size: 1rem;
    text-align: center;
    margin: 0 auto;
    padding-top: 5px;
    color: #cccccc;
  }
  .gotop {
    display: block;
    width: 40px;
    height: 40px;
    box-sizing: border-box;
    padding-top: 30px;
    opacity: 0.5;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10000;
  }
  .gotop:before {
    content: "";
    display: block;
    border-top: 2px solid #333;
    border-right: 2px solid #333;
    width: 25%;
    height: 25%;
    top: 25%;
    left: 0;
    right: 0;
    margin: auto;
    position: absolute;
    transform: rotate(-45deg);
  }
  .gotop:hover {
    opacity: 1;
  }
}
@media screen and (min-width: 600px) {
  /*  #aoyam_special-open{
      .wrapper{
          &::before {
              height: 135px;
              content: "";
              display: block;
          }

          article{
              background-color: #cd9ecc;
              text-align: center;
              padding: 110px 0;

              .article1{
                  display: flex;

                  .article-info{
                      width: 50%;
                      display: flex;              
                      padding-left: 8%;

                      .cat-data{

                          .post-categories{
                              font-size: 15px;
                              li{
                                  a{}
                              }      
                          } 
                      }          

                      .article-date{
                          .far{
                              font-size: 10px;
                          }

                          time{
                              margin-left: 20px;
                              font-size: 15px;
                          }
                      }

                      .article-author{
                          .fas{}
                      }
                  }

                  h1{
                      width: 50%;
                      margin: 10px auto 15px;
                      text-align: left;
                  }
              }


              .article2{
                  .article-img{
                      img{
                      width: 70%;                   
                      }
                  }

                  p{
                      width: 70%;
                      display: flex;              
                      margin: 15px auto 30px;
                      font-size: 15px;
                      text-align:left
                  }

                  .wp-block-gallery{
                      figure:nth-child(1){
                          width: 40% !important;
                      }
                      figure:nth-child(2){
                          width: 60% !important;
                      }
                  }
              }

              .article-tag{}
          }
      }
  } */
  .wrapper::before {
    height: 135px;
    content: "";
    display: block;
  }
  .wrapper article {
    background-color: #cd9ecc;
    text-align: center;
    padding: 110px 0;
  }
  .wrapper article .article1 {
    display: flex;
  }
  .wrapper article .article1 .article-info {
    width: 50%;
    display: flex;
    padding-left: 8%;
  }
  .wrapper article .article1 .article-info .cat-data .post-categories {
    font-size: 15px;
  }
  .wrapper article .article1 .article-info .article-date .far {
    font-size: 10px;
  }
  .wrapper article .article1 .article-info .article-date time {
    margin-left: 20px;
    font-size: 15px;
  }
  .wrapper article .article1 h1 {
    width: 50%;
    margin: 10px auto 15px;
    text-align: left;
  }
  .wrapper article .article2 {
    display: flex;
  }
  .wrapper article .article2 .article-img {
    width: 50%;
  }
  .wrapper article .article2 p {
    width: 50%;
    padding-right: 7%;
    font-size: 15px;
    text-align: left;
    margin: 0;
  }
  footer .sns-navi {
    margin: 0 auto 0;
    gap: 0px 50px;
  }
  footer .sns-navi li.f-item {
    width: 75px;
    height: 75px;
  }
  footer .footer-navi {
    margin: 70px auto 40px;
  }
  footer .footer-navi .footer-navi-inner {
    width: 80%;
    display: flex;
    flex-wrap: wrap;
    /*  justify-content: space-between; */
    margin: 60px auto;
    flex-direction: row;
    font-size: calc(15px + 6 * (100vw - 600px) / 424);
  }
  footer .footer-navi .footer-navi-inner li {
    line-height: 50px;
    padding: 0 10px;
    width: 20%;
  }
}
@media screen and (min-width: 1025px) {
  /*     #aoyam_special-open{

          .article2{
              .article-img{
                  img{
                  width: 70%;                   
                  }
              }

              p{
                  width: 70%;
                  display: flex;              
                  margin: 15px auto 30px;
                  font-size: 15px;
                  text-align:left
              }

              .wp-block-gallery{
                  figure:nth-child(1){
                      width: 40%;
                  }
                  figure:nth-child(2){
                      width: 60%;
                  }
              }
          }
      } */
  .wrapper::before {
    height: 135px;
    content: "";
    display: block;
  }
  .wrapper article {
    background-color: #cd9ecc;
    text-align: center;
    padding: 110px 0;
  }
  .wrapper article .article1 {
    display: flex;
  }
  .wrapper article .article1 .article-info {
    width: 50%;
    display: flex;
    padding-left: 8%;
  }
  .wrapper article .article1 .article-info .cat-data .post-categories {
    font-size: 15px;
  }
  .wrapper article .article1 .article-info .article-date .far {
    font-size: 10px;
  }
  .wrapper article .article1 .article-info .article-date time {
    margin-left: 20px;
    font-size: 15px;
  }
  .wrapper article .article1 h1 {
    width: 50%;
    margin: 10px auto 15px;
    text-align: left;
  }
  .wrapper article .article2 {
    display: flex;
  }
  .wrapper article .article2 .article-img {
    width: 50%;
  }
  .wrapper article .article2 p {
    width: 50%;
    padding-right: 7%;
    font-size: 15px;
    text-align: left;
    margin: 0;
  }
  footer {
    width: 100%;
    aspect-ratio: 5/1;
    padding-bottom: 30px;
    background-color: aliceblue;
    display: block;
    padding-top: 10px;
  }
  footer .sns-navi {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto 0;
    justify-content: center;
    align-items: center;
    gap: 0px 74px;
    height: 11rem;
  }
  footer .sns-navi li {
    list-style: none;
  }
  footer .sns-navi .contact {
    width: 150px;
    height: 70px;
    background-color: #71aca9;
    text-align: center;
    font-size: 20px;
    line-height: 70px;
    list-style: none;
    border-radius: 10px;
    /* 角の丸み */
    cursor: pointer;
    /* マウスカーソルを手の形にする */
    opacity: 0.7;
    /* ボタンの透明度を70%にする */
  }
  footer .sns-navi .contact a:link {
    color: #fff;
  }
  footer .sns-navi .contact a:hover {
    color: #fff;
  }
  footer .sns-navi .contact a:visited {
    color: #fff;
  }
  footer .sns-navi .contact a:active {
    color: #fff;
  }
  footer .sns-navi .f-item {
    width: 70px;
    height: 70px;
    cursor: pointer;
    /* マウスカーソルを手の形にする */
    opacity: 0.7;
    /* ボタンの透明度を70%にする */
  }
  footer .footer-navi .footer-navi-inner {
    width: 80%;
    display: flex;
    flex-wrap: nowrap;
    /*  justify-content: space-between; */
    margin: 60px auto;
    flex-direction: row;
    font-size: calc(14px + 6 * (100vw - 1025px) / 1215);
  }
  footer .footer-navi .footer-navi-inner li {
    line-height: 50px;
    padding: 0 30px;
    list-style: none;
  }
  footer .footer-navi .footer-navi-inner li a {
    color: #71aca9;
  }
  footer hr {
    height: 2px;
    background-color: #cccccc;
    border: none;
  }
  footer .copyright {
    font-size: 1rem;
    text-align: center;
    margin: 0 auto;
    padding-top: 5px;
    color: #cccccc;
  }
}
@media screen and (min-width: 320px) {
  .page-recommendation .wrapper {
    width: 100%;
    position: absolute;
    top: 15vw;
    left: 0;
    right: 0;
    margin: auto;
    /* sp main終了 */
  }
  .page-recommendation .wrapper main {
    width: 95%;
    height: auto;
    font-size: 1.5em;
    line-height: 1.8;
    background-color: #ffffff;
    margin: 30px auto 30px;
    position: relative;
    /*  max-width: 1200px; */
  }
  .page-recommendation .wrapper main .top-news .category1 {
    font-size: 7rem;
    color: #525050;
    font-family: Georgia, serif;
    text-align: center;
    left: 0;
    right: 0;
    text-shadow: 1px 2px 3px #808080;
  }
  .page-recommendation .wrapper main .top-news h3 {
    width: 250px;
    height: 250px;
    font-size: 4rem;
    background-color: #71aca9;
    text-align: center;
    border-radius: 50%;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    /*  right: 0;
                left: 0; */
    margin: 30px auto 15px;
  }
  .page-recommendation .wrapper main .top-news h3 a {
    color: #ffffff;
  }
  .page-recommendation .wrapper main .top-news p {
    text-align: center;
  }
  .page-recommendation .wrapper main .area {
    padding-top: 70px;
    display: flex;
    flex-wrap: wrap;
    gap: 15vw 1.5vw;
    text-align: left;
  }
  .page-recommendation .wrapper main .area li {
    width: 49%;
    display: flex;
    flex-direction: column;
  }
  .page-recommendation .wrapper main .area li h3:nth-child(1) {
    font-size: 1.3rem;
    order: 2;
  }
  .page-recommendation .wrapper main .area li p:nth-child(2) {
    margin-top: 0;
    order: 3;
  }
  .page-recommendation .wrapper main .area li div:nth-child(3) {
    margin-top: 0;
    order: 4;
  }
  .page-recommendation .wrapper main .area li p:nth-child(4) {
    margin-top: 0;
    order: 1;
  }
  .page-recommendation .wrapper main .salon {
    margin-top: 40px;
    text-align: center;
  }
  .page-recommendation .wrapper main .salon .access {
    font-size: 1.3rem;
  }
  .page-recommendation .wrapper main .salon .access h2 {
    font-size: 2rem;
    color: #555;
  }
  .page-recommendation .wrapper main .salon .access .address {
    margin-top: 1rem;
  }
  .page-recommendation .wrapper main .salon .access h3 {
    font-size: 1.5rem;
    margin-top: 3rem;
    color: #555;
  }
  .page-recommendation .wrapper main .salon hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #cccccc;
    margin: 4em 0;
    padding: 0;
  }
  .page-recommendation .wrapper main .salon .content3 h2 {
    font-size: 2rem;
    margin-top: 3rem;
    color: #555;
  }
  .page-recommendation .wrapper main .salon .content3 ul {
    list-style: none;
  }
  .page-recommendation .wrapper main .salon .box {
    margin-top: 30px;
    padding: 35px 18px;
    font-size: 0.6rem;
    width: auto;
    font-weight: normal;
    border: solid 2px #cccccc;
    border-radius: 10px;
    text-align: center;
    line-height: 1.5;
    clear: both;
  }
  .page-recommendation .wrapper main .salon .box h2 {
    font-size: 2rem;
    color: #555;
  }
  .page-recommendation .wrapper main .salon .box p {
    font-size: 1.3rem;
  }
  .page-recommendation .wrapper main .salon .box:hover {
    cursor: pointer;
    /* マウスカーソルを手の形にする */
    opacity: 0.7;
    /* ボタンの透明度を70%にする */
    background-color: #c7e1dd;
  }
  .page-recommendation .wrapper main .salon .contact {
    height: 40px;
    line-height: 40px;
    margin: 50px auto;
    text-align: center;
    background-color: #71aca9;
    opacity: 0.7;
    border-radius: 10px;
  }
  .page-recommendation .wrapper main .salon .contact li a {
    color: #fff;
    font-size: 20px;
  }
}
@media screen and (min-width: 450px) {
  .page-news .wrapper {
    width: 100%;
    position: absolute;
    top: 15vw;
    left: 0;
    right: 0;
    margin: auto;
    /* sp2 main終了 */
  }
  .page-news .wrapper main {
    width: 95%;
    height: auto;
    font-size: 1.5em;
    line-height: 1.8;
    background-color: #ffffff;
    margin: 30px auto 30px;
    position: relative;
    /*  max-width: 1200px; */
  }
  .page-news .wrapper main .top-news .category1 {
    font-size: 7rem;
    color: #525050;
    font-family: Georgia, serif;
    text-align: center;
    left: 0;
    right: 0;
    text-shadow: 1px 2px 3px #808080;
  }
  .page-news .wrapper main .top-news h3 {
    width: 250px;
    height: 250px;
    font-size: 4rem;
    background-color: #71aca9;
    text-align: center;
    border-radius: 50%;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    /*  right: 0;
                left: 0; */
    margin: 30px auto 15px;
  }
  .page-news .wrapper main .top-news h3 a {
    color: #ffffff;
  }
  .page-news .wrapper main .top-news p {
    text-align: center;
  }
  .page-news .wrapper main .area {
    padding-top: 90px;
    display: flex;
    flex-wrap: wrap;
    gap: 15vw 1.5vw;
    text-align: left;
  }
  .page-news .wrapper main .area li {
    width: 49%;
    display: flex;
    flex-direction: column;
  }
  .page-news .wrapper main .area li h3:nth-child(1) {
    font-size: 1.3rem;
    order: 2;
  }
  .page-news .wrapper main .area li p:nth-child(2) {
    margin-top: 0;
    order: 3;
  }
  .page-news .wrapper main .area li div:nth-child(3) {
    margin-top: 0;
    order: 4;
  }
  .page-news .wrapper main .area li p:nth-child(4) {
    margin-top: 0;
    order: 1;
  }
  .page-news .wrapper main .salon {
    margin-top: 40px;
    text-align: center;
  }
  .page-news .wrapper main .salon .access {
    font-size: 1.3rem;
  }
  .page-news .wrapper main .salon .access h2 {
    font-size: 2rem;
    color: #555;
  }
  .page-news .wrapper main .salon .access .address {
    margin-top: 1rem;
  }
  .page-news .wrapper main .salon .access h3 {
    font-size: 1.5rem;
    margin-top: 3rem;
    color: #555;
  }
  .page-news .wrapper main .salon hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #cccccc;
    margin: 4em 0;
    padding: 0;
  }
  .page-news .wrapper main .salon .content3 h2 {
    font-size: 2rem;
    margin-top: 3rem;
    color: #555;
  }
  .page-news .wrapper main .salon .content3 ul {
    list-style: none;
  }
  .page-news .wrapper main .salon .box {
    margin: 64px auto 0;
    padding: 35px 18px;
    font-size: 0.6rem;
    width: 65%;
    font-weight: normal;
    border: solid 2px #cccccc;
    border-radius: 10px;
    text-align: center;
    line-height: 1.5;
    clear: both;
  }
  .page-news .wrapper main .salon .box h2 {
    font-size: 2rem;
    color: #555;
  }
  .page-news .wrapper main .salon .box p {
    font-size: 1.3rem;
  }
  .page-news .wrapper main .salon .box:hover {
    cursor: pointer;
    /* マウスカーソルを手の形にする */
    opacity: 0.7;
    /* ボタンの透明度を70%にする */
    background-color: #c7e1dd;
  }
  .page-news .wrapper main .salon .contact {
    width: 65%;
    height: 40px;
    line-height: 40px;
    margin: 35px auto 0;
    text-align: center;
    background-color: #71aca9;
    opacity: 0.7;
    border-radius: 10px;
  }
  .page-news .wrapper main .salon .contact li a {
    color: #fff;
    font-size: 20px;
  }
}
@media screen and (min-width: 600px) {
  .page-recommendation .wrapper {
    width: 100%;
    position: absolute;
    top: 20vw;
    left: 0;
    right: 0;
    margin: auto;
    /* tb main終了 */
  }
  .page-recommendation .wrapper main .area {
    padding-top: 90px;
    display: flex;
    flex-wrap: wrap;
    gap: 9vw 5%;
    text-align: left;
    width: 100%;
  }
  .page-recommendation .wrapper main .area li {
    width: 30%;
    display: flex;
    flex-direction: column;
  }
  .page-recommendation .wrapper main .area li h3:nth-child(1) {
    font-size: 1.3rem;
    order: 2;
  }
  .page-recommendation .wrapper main .area li p:nth-child(2) {
    margin-top: 0;
    order: 3;
  }
  .page-recommendation .wrapper main .area li div:nth-child(3) {
    margin-top: 0;
    order: 4;
  }
  .page-recommendation .wrapper main .area li p:nth-child(4) {
    margin-top: 0;
    order: 1;
  }
  .page-recommendation .wrapper main .salon .box {
    padding: 35px 40px;
    font-weight: normal;
    border: solid 2px #cccccc;
    border-radius: 10px;
    /* 角の丸み */
    font-size: 20px;
    text-align: center;
    line-height: 1.5;
    width: 54%;
    clear: both;
    margin: 100px auto 0;
  }
  .page-recommendation .wrapper main .salon .contact {
    width: 54%;
    height: 40px;
    line-height: 40px;
    margin: 80px auto;
    text-align: center;
    background-color: #71aca9;
    opacity: 0.7;
    border-radius: 10px;
  }
  .page-recommendation .wrapper main .salon .contact li a {
    color: #fff;
    font-size: 20px;
  }
}
@media screen and (min-width: 1025px) {
  .page-recommendation .wrapper {
    width: 100%;
    position: absolute;
    top: 10vw;
    left: 0;
    right: 0;
    margin: auto;
  }
  .page-recommendation .wrapper main {
    width: 70%;
    height: auto;
    font-size: 1.5em;
    text-align: center;
    line-height: 1.8;
    background-color: #ffffff;
    position: relative;
    min-width: 1000px;
    max-width: 1200px;
    z-index: 0;
    margin: 0 auto;
    padding-top: 80px;
  }
  .page-recommendation .wrapper main .area {
    padding-top: 110px;
    display: flex;
    gap: 5vw 4%;
    flex-wrap: wrap;
    /* justify-content: space-between; */
  }
  .page-recommendation .wrapper main .area li {
    width: 22%;
    text-align: left;
    display: flex;
    flex-direction: column;
  }
  .page-recommendation .wrapper main .area li h3:nth-child(1) {
    font-size: 1.3rem;
    order: 2;
  }
  .page-recommendation .wrapper main .area li p:nth-child(2) {
    margin-top: 0;
    order: 3;
  }
  .page-recommendation .wrapper main .area li div:nth-child(3) {
    margin-top: 0;
    order: 4;
  }
  .page-recommendation .wrapper main .area li p:nth-child(4) {
    margin-top: 0;
    order: 1;
  }
  .page-recommendation .wrapper main .salon .access {
    font-size: 20px;
    text-align: center;
    line-height: 1.5;
    margin-top: 80px;
    margin-bottom: 80px;
  }
  .page-recommendation .wrapper main .salon .access h3 {
    color: #555;
  }
  .page-recommendation .wrapper main .salon .access p {
    font-size: 2rem;
    margin-top: 1rem;
  }
  .page-recommendation .wrapper main .salon hr {
    width: 90%;
    margin: 0 auto;
    color: #808080;
  }
  .page-recommendation .wrapper main .salon .content3 {
    font-size: 20px;
    text-align: center;
    line-height: 1.5;
  }
  .page-recommendation .wrapper main .salon .content3 ul {
    margin-top: 1rem;
  }
  .page-recommendation .wrapper main .salon .box {
    padding: 35px 40px;
    font-weight: normal;
    border: solid 2px #cccccc;
    border-radius: 10px;
    /* 角の丸み */
    font-size: 20px;
    text-align: center;
    line-height: 1.5;
    width: 47%;
    clear: both;
    margin: 100px auto 0;
  }
  .page-recommendation .wrapper main .salon .box:hover {
    cursor: pointer;
    /* マウスカーソルを手の形にする */
    opacity: 0.7;
    /* ボタンの透明度を70%にする */
    background-color: #c7e1dd;
  }
  .page-recommendation .wrapper main .salon .contact {
    width: 47%;
    height: 40px;
    line-height: 40px;
    margin: 80px auto;
    text-align: center;
    background-color: #71aca9;
    opacity: 0.7;
    border-radius: 10px;
  }
  .page-recommendation .wrapper main .salon .contact li a {
    color: #fff;
    font-size: 20px;
  }
}
@media screen and (min-width: 320px) {
  main::before, main::after {
    display: block;
    content: "";
    height: 200px;
  }
  main .contents {
    width: 90%;
    margin: 0 auto;
  }
}
@media screen and (min-width: 600px) {
  main::before, main::after {
    display: block;
    content: "";
    height: 200px;
  }
  main .contents {
    width: 80%;
    margin: 0 auto;
  }
}
@media screen and (min-width: 1025px) {
  main::before, main::after {
    display: block;
    content: "";
    height: 200px;
  }
  main .contents {
    width: 70%;
    margin: 0 auto;
  }
}/*# sourceMappingURL=style.css.map */