@charset "UTF-8";
/* CSS Document */
/*-------------------------------------------------------
PC用レイアウト(768px以上スクリーン)
---------------------------------------------------------*/
/*-------------------------------------------------------
共通設定(PC)
---------------------------------------------------------*/
/*body全体の初期スタイル調整*/
html {
  /* ルートのフォントサイズを10pxに設定 */
  font-size: 62.5%;
}
body {
  font-size: 1.6em; /*em*/
  font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
  font-weight: normal;
  color: #333333;
}
/*ulの設定*/
ul {
  padding-left: 0;
}
/*セクションエリアの共通設定*/
section {
  clear: both;
}
img {
  max-width: 100%;
  height: auto;
}
/*-------------------------------------------------------
テキストタグ設定
---------------------------------------------------------*/
p, a, th, td {
  font-size: 1.6rem;
}
a {
  text-decoration: none;
}
h2 {
  font-size: 5.6rem;
  font-weight: bold;
  text-align: center;
}
h3 {
  font-size: 3rem;
  font-weight: bold;
  padding: 1.6rem 0;
}
h4 {
  font-size: 2rem;
  font-weight: bold;
  padding: 1.6rem 0;
}
h5 {
  font-size: 1.8rem;
  font-weight: bold;
}
/*-------------------------------------------------------
全体レイアウト/背景エリア(PC)
---------------------------------------------------------*/
/*全体エリア*/
.main {
  background-color: #fcfcfc;
}
/*記事（ボディ）エリア*/
.article {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  background-color: #fcfcfc;
  border-right: 1px solid #eee;
  border-left: 1px solid #eee;
}
/*記事（ボディ）エリアの行間*/
.article p {
  line-height: 1.8;
}
/*カラム全体の幅を変更する*/
.top_image_in, .section_inr {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
}
/*sectionの設定*/
.section {
  padding: 4rem 0;
}
/*-------------------------------------------------------
上部固定ヘッダー設定
---------------------------------------------------------*/
/*上部固定ヘッダー全体*/
.header {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  left: 0;
  z-index: 5000;
  width: 100%;
  height: auto;
  margin: 0 auto;
  background-color: #fcfcfc;
  border-bottom: 1px solid #ccc;
  overflow: auto;
}
/*ヘッダー内部をカラム幅にする*/
.header_inr {
  max-width: 960px;
  margin: 0 auto;
}
/*ヘッダーのロゴ*/
.header_logo {
  width: 28%;
  float: left;
  margin: 2.4rem 0 1.6rem .8rem;
}
.btn_header {
  float: right;
}
.header_tel {
  width: 30%;
  padding: 1.6rem 1.6rem 1.6rem 0;
}
.header_mail {
  width: 24%;
  margin: 0.8rem 3rem 0.8rem 0;
}
/*　ハンバーガーメニューボタン　*/
.hamburger {
  display: block;
  position: fixed;
  z-index: 3;
  right: 20px;
  top: 20px;
  width: 42px;
  height: 42px;
  cursor: pointer;
  text-align: center;
}
.hamburger span {
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 6px;
  background: #f097b9;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
.hamburger span:nth-child(1) {
  top: 10px;
}
.hamburger span:nth-child(2) {
  top: 20px;
}
.hamburger span:nth-child(3) {
  top: 30px;
}
/* スマホメニューを開いてる時のボタン */
.hamburger.active span:nth-child(1) {
  top: 16px;
  left: 6px;
  background: #f097b9;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.hamburger.active span:nth-child(2), .hamburger.active span:nth-child(3) {
  top: 16px;
  background: #f097b9;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}
/* メニュー背景　*/
nav.globalMenuSp {
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  color: #f097b9;
  background-color: #fcfcfc;
  text-align: center;
  width: 100%;
  opacity: 0;
  display: none;
  transition: opacity .6s ease, visibility .6s ease;
}
nav.globalMenuSp ul {
  margin: 0 auto;
  padding: 0;
  width: 100%;
  font-weight: bold;
}
nav.globalMenuSp ul li {
  list-style-type: none;
  padding: 0;
  width: 100%;
  transition: .4s all;
}
nav.globalMenuSp ul li:last-child {
  padding-bottom: 0;
}
nav.globalMenuSp ul li:hover {
  background: #ddd;
}
nav.globalMenuSp ul li a {
  display: block;
  color: #f097b9;
  padding: 1em 0;
  text-decoration: none;
}
/* クリックでjQueryで追加・削除 */
nav.globalMenuSp.active {
  opacity: 100;
  display: block;
}
/*-------------------------------------------------------
ファーストビュー設定
---------------------------------------------------------*/
.top_image {
  width: 100%;
  background-image: url("../image/header_bg.png");
  background-repeat: no-repeat;
  background-size: cover;
}
.top_image_in {
  padding-top: 1.6rem;
}
/*-------------------------------------------------------
CTAエリア設定
---------------------------------------------------------*/
.cta_area {
  padding-top: 4rem;
  display: block;
  text-align: center;
}
.cta_area_wrap {
  width: 85%;
  background-color: #fcfcfc;
  border: 4px solid #f097b9;
  margin: 0 auto;
  padding: 1.6rem 0;
}
.cta_inr {
  padding: 0 1.6rem;
  margin: 0 auto;
}
.cta_ttl {
  border-bottom: 4px dashed #f097b9;
  padding-bottom: 2.4rem;
}
.cta_btn, .cta_tel {
  justify-content: center;
}
.cta_btn {
  padding: 2.4rem 0;
}
a.btn {
  font-size: 1.6rem;
  display: inline-block;
  padding: 2.4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #fff;
  border-radius: 5rem;
}
a.btn_mail {
  background: #f56500;
  margin-right: 1rem;
}
a.btn_line {
  background-color: #32b16c;
}
.header_mail a.btn {
  font-size: 1.4rem;
  padding: 2rem;
}
a.btn:hover {
  opacity: 0.8;
}
i.fa-position-right {
  margin-left: .4rem;
}
.cta_salon {
  padding-top: 3rem;
}
.salon_ttl {
  background-color: #f097b9;
  color: #fff;
  font-size: 1.8rem;
  padding: .8rem 0;
}
.salon_txt {
  padding: 1.6rem 1.6rem 0 1.6rem;
}
.salon_txt p {
  font-size: 1.4rem;
}
.cta_area_last {
  background-color: #eee;
  padding-bottom: 4rem;
}
/*-------------------------------------------------------
共感エリア設定
---------------------------------------------------------*/
.section_sympathy img {
  margin: 0 auto;
}
.worry_img {
  padding-bottom: 2.4rem;
}
/*-------------------------------------------------------
ポイントエリア設定
---------------------------------------------------------*/
.section_point h2 {
  background-color: #f097b9;
  margin-bottom: 8rem;
  padding: 1.6rem 0;
}
.section_point h2 img {
  margin: 0 auto;
}
ul.flex_3column {
  justify-content: center;
  margin-bottom: .8rem;
}
ul.flex_3column li {
  width: 300px;
  background-color: #fcfcfc;
}
.column_space {
  margin: 0 .8rem;
}
.section_point ul li, .section_point p {
  text-align: center;
}
/*-------------------------------------------------------
サポートメニューエリア設定
---------------------------------------------------------*/
.section_menu h2 {
  padding-bottom: 5.6rem;
}
.heading_10 {
  position: relative;
}
.heading_10::before {
  content: attr(data-en);
  display: block;
  color: #655752;
  font-size: 4rem;
  font-family: 'Roboto', sans-serif;
  text-transform: uppercase;
}
.section_menu h3 {
  background-color: #f097b9;
  margin-bottom: 4rem;
  text-align: center;
  color: #fff;
}
.txt_box {
  width: 90%;
  background-color: #eee;
  padding: 1.6rem;
  margin: 0 auto 4rem;
  text-align: center;
}
.slider_title {
  font-size: 1.8rem;
  font-weight: bold;
  text-align: center;
  padding: .8rem;
}
.slider_wrap {
  background-color: #fcfcfc;
  height: 310px;
}
.slider_text_wrap {
  padding: 1rem;
}
.section_menu ul {
  margin: 0 auto;
}
.slider { /*横幅94%で左右に余白を持たせて中央寄せ*/
  width: 94%;
}
.slider img {
  width: 100%; /*スライダー内の画像を横幅100%に*/
  height: auto;
}
/*slickのJSで書かれるタグ内、スライド左右の余白調整*/
.slider .slick-slide {
  margin: 0 10px;
}
/*矢印*/
/*戻る、次へ矢印の位置*/
.slick-prev, .slick-next {
  position: absolute; /*絶対配置にする*/
  top: 38%;
  cursor: pointer; /*マウスカーソルを指マークに*/
  outline: none; /*クリックをしたら出てくる枠線を消す*/
  border-top: 2px solid #1a2649; /*矢印の色*/
  border-right: 2px solid #1a2649; /*矢印の色*/
  height: 15px;
  width: 15px;
}
.slick-prev { /*戻る矢印の位置と形状*/
  left: -1.5%;
  transform: rotate(-135deg);
}
.slick-next { /*次へ矢印の位置と形状*/
  right: -1.5%;
  transform: rotate(45deg);
}
/*ドットナビゲーション*/
.slick-dots {
  text-align: center;
  margin: 20px 0 0 0;
}
.slick-dots li {
  display: inline-block;
  margin: 16px 5px;
}
.slick-dots button {
  color: transparent;
  outline: none;
  width: 8px; /*ドットボタンのサイズ*/
  height: 8px; /*ドットボタンのサイズ*/
  display: block;
  border-radius: 50%;
  background: #1a2649; /*ドットボタンの色*/
  border: none;
  padding: 0;
}
.section_menu h4 {
  padding-bottom: 2.4rem;
}
.heading_01 {
  display: flex;
  justify-content: center;
  align-items: center;
}
.heading_01::before, .heading_01::after {
  content: '';
  width: 40px;
  height: 3px;
  background-color: #333;
}
.heading_01::before {
  margin-right: 30px;
}
.heading_01::after {
  margin-left: 30px;
}
.design_list {
  padding-bottom: 3.2rem;
}
.design_list ul li {
  width: 30%;
}
.design_list ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  margin: 0 auto;
  list-style: none;
}
.design_list ul li {
  flex-wrap: wrap;
  width: 30%;
  background-color: #f097b9;
  padding: 1.6rem;
  margin: 0.8rem;
  color: #fff;
  text-align: center;
}
.menu_img img {
  margin: 0 auto;
}
.menu_img {
  padding-bottom: 3.2rem;
}
.price_box {
  width: 90%;
  margin: 0 auto;
  padding-bottom: 5.6rem;
}
table {
  width: 100%;
  margin: 0 auto;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  word-break: break-all;
  word-wrap: break-word;
  border-top: 2px solid #000;
  border-left: 2px solid #000;
}
tbody {
  display: table-row-group;
  vertical-align: middle;
  border-color: inherit;
}
th {
  width: 30%;
  text-align: center;
  background-color: #eee;
}
td {
  width: 70%;
  background-color: #fcfcfc;
}
th, td {
  padding: 0.5em;
  border-right: 2px solid #333333;
  border-bottom: 2px solid #333333;
  text-align: left;
}
.price_remarks {
  padding-top: .8rem;
}
/*---アコーディオン---*/
details {
  margin: 0 auto 10px;
  width: 100%;
}
summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem;
  margin-top: 3.2rem;
  font-size: 1.8rem;
  color: #fff;
  font-weight: bold;
  background-color: #AA9C8A;
  cursor: pointer;
}
summary::-webkit-details-marker {
  display: none;
}
summary:hover, details[open] summary {
  background-color: #bbb;
}
summary::after {
  content: '+';
  margin-left: 30px;
  color: #fff;
  font-size: 16px;
  transition: transform .5s;
}
details[open] summary::after {
  transform: rotate(45deg);
}
.answer {
  line-height: 1.6;
}
.answer p {
  font-size: 1.8rem;
}
details[open] .answer {
  animation: fadein .5s ease;
}
@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.menu_wrap {
  padding-bottom: 4rem;
}
.section_open {
  padding-top: 0;
}
/*-------------------------------------------------------
流れエリア設定
---------------------------------------------------------*/
.section_flow {
  background-color: #f8e4eb;
}
.section_flow h2, .section_contact h2 {
  padding-bottom: 4rem;
}
ul.flex_4column {
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 2%;
}
ul.flex_4column li {
  width: 49%;
  background-color: #fcfcfc;
  position: relative;
  margin-bottom: 2.4rem;
  padding: 2.4rem;
}
ul.flex_4column h3 {
  padding: 1.6rem 0;
}
.flex_4column_number {
  font-size: 3.6rem;
  color: #fff;
  width: 60px;
  background-color: #f097b9;
  text-align: center;
  margin-bottom: 0.8rem;
  font-family: 'Ms Madi', cursive;
  position: absolute;
  top: -2px;
  left: -2px;
}
/*-------------------------------------------------------
よくある質問設定
---------------------------------------------------------*/
.section_question h2 {
  margin: 3.6rem auto 4rem;
}
/*---Q＆A---*/
.qa_inr dt, .qa_inr dd {
  display: flex;
  align-items: baseline;
  margin: 30px 0;
  font-weight: bold;
}
.qa_inr dt {
  background-color: #eee;
  padding: 1.6rem;
}
.qa_text_wrap {
  margin-left: .8rem;
}
.qa_wrap .qa_inr dt p {
  width: 100%;
  font-size: 2rem;
}
.qa_wrap qa_inr dd p {
  width: 100%;
}
.qa_wrap .qa_inr dt::before {
  content: "Q";
  display: flex;
  justify-content: center;
  align-items: center;
  color: #333;
  font-size: 2.4rem;
}
.qa_wrap .qa_inr dd::before {
  content: "A";
  display: flex;
  justify-content: center;
  align-items: center;
  color: #f097b9;
  font-size: 2.4rem;
}
/*-------------------------------------------------------
お問合せ設定
---------------------------------------------------------*/
#OF_form1 {
  margin: 0 auto;
}
.form_line_area {
  text-align: center;
  padding-top: 2.4rem;
}
.form_line_area h3 {
  padding-bottom: 4rem;
}
/*-------------------------------------------------------
フッター部分
---------------------------------------------------------*/
.footer {
  background-color: #f097b9;
  padding: 2.4rem 0 1.6rem;
  text-align: center;
  font-size: 1.4em;
  color: #fff;
}
.footer a {
  color: #fff;
  padding: 0 1rem;
}
.footer a:hover {
  opacity: 0.8;
}
.footer_link_wrap {
  flex-wrap: wrap;
  justify-content: center;
}
.copyright {
  padding-top: .8rem;
}
/*--------------------------------------------------
下部固定ヘッダー（PCは非表示）
-----------------------------------------------------*/
.fix_menu_smartphone {
  display: none;
}
/*--------------------------------------------------
プライバシーポリシー
-----------------------------------------------------*/
.section_privacy, .section_law {
  width: 100%;
  background-color: #fcfcfc;
}
.section_privacy h2, .section_law h2 {
  width: 100%;
  background-color: #fcfcfc;
  padding: 4rem 0;
}