@charset "UTF-8";
/* ==================================================
 style.scss
 各scssファイルを定義
================================================== */
/* ==================================================
 baseフォルダ
================================================== */
/* ==================================================
 _base.scss
 全ページ共通のタグスタイル 定義
================================================== */
/* ==================================================
 _variables.scss
 変数 定義
================================================== */
/* ==================================================
 カラー変数定義
================================================== */
/* ==== サイト基本カラー定義 ==== */
/* ==== プランカラー定義 ==== */
/* ==== 白黒カラー定義 ==== */
/* ==== ボタンカラー定義 ==== */
/* ==== ボーダーカラー定義 ==== */
/* ==================================================
 background-imageディレクトリ 変数定義
================================================== */
/* ==================================================
 _font.scss
 フォント・文字サイズ 定義
================================================== */
/* ==================================================
 _function.scss
 関数 定義
================================================== */
/* ==================================================
 _base.scss
 全ページ共通のタグスタイル 定義
================================================== */
/* ==================================================
 _mq.scss
 メディアクエリ 定義
================================================== */
/* ==================================================
 メディアクエリ 基本サイズ
================================================== */
/* ==================================================
 メディアクエリ mixin定義
 ※以下は定義方法
.class {
 width: 50%;
 @include tab {
		width: 100%
 }
}
================================================== */
/* ==================================================
 デバイス非表示・表示
================================================== */
.is-pc {
  display: none;
}

.is-tab {
  display: none;
}

.is-sp {
  display: none;
}

/* ==================================================
 _base.scss
 全ページ共通のタグスタイル 定義
================================================== */
/* ==================================================
 フォントのvw単位計算
 ※定義方法
 p {
	font-size: responsiveFontSizeClamp(最小フォントサイズ,最大フォントサイズ,最小ウィンドウサイズ,最大ウィンドウサイズ);
 }
================================================== */
/* ==================================================
 _base.scss
 全ページ共通のタグスタイル 定義
================================================== */
/* ==================================================
 英字フォント
================================================== */
.font-roboto {
  font-family: "Roboto", sans-serif;
}

/* ==================================================
 見出しフォントサイズ(spサイズ ~ pcサイズ)
 h1: 24 ~ 28px;
 h2: 20 ~ 24px;
 h3: 18 ~ 20px;
 h4: 16 ~ 18px;
================================================== */
/* ==================================================
 フォントサイズ(spサイズ ~ pcサイズ)
 x-small: 10 ~ 12px
 small: 12 ~ 14px
 medium: 14px ~ 16px
 large: 16px ~ 18px
 x-large: 18 ~ 20px 
================================================== */
/* ==================================================
 見出しフォントサイズ (SPサイズ ~ PCサイズ)
 h1: 32 ~ 72px;
 h2: 28 ~ 60px;
 h3: 24 ~ 48px;
 h4: 20 ~ 36px;
================================================== */
.font-h1 {
  font-size: clamp(2.25rem, 1.5rem + 3.75vw, 4.5rem);
}

.font-h2 {
  font-size: clamp(2rem, 1.417rem + 2.92vw, 3.75rem);
}

.font-h3 {
  font-size: clamp(1.75rem, 1.333rem + 2.08vw, 3rem);
}

.font-h4 {
  font-size: clamp(1.5rem, 1.25rem + 1.25vw, 2.25rem);
}

/* ==================================================
 レギュラーサイズ（通常の本文用）
================================================== */
.font-regular {
  font-size: clamp(0.875rem, 0.833rem + 0.21vw, 1rem);
}

.font-small {
  font-size: clamp(0.75rem, 0.708rem + 0.21vw, 0.875rem);
}

.font-medium {
  font-size: clamp(1rem, 0.917rem + 0.42vw, 1.25rem);
}

.font-large {
  font-size: clamp(1.25rem, 1.083rem + 0.83vw, 1.75rem);
}

/* ==================================================
 特大フォントサイズ（英字タイトル・特大見出し用）
================================================== */
.font-title {
  font-size: clamp(4rem, 3.333rem + 3.33vw, 6rem);
}

.font-hero {
  font-size: clamp(6rem, 5.292rem + 3.54vw, 8.125rem);
}

.font-display {
  font-size: clamp(8.125rem, 7.292rem + 4.17vw, 10.625rem);
}

/* ==================================================
 フォントウェイト
================================================== */
.font-w300 {
  font-weight: 300;
}

.font-w400 {
  font-weight: 400;
}

.font-w500 {
  font-weight: 500;
}

.font-w600 {
  font-weight: 600;
}

.font-w700 {
  font-weight: 700;
}

.font-w800 {
  font-weight: 800;
}

.font-w900 {
  font-weight: 900;
}

/* ==================================================
 フォントスタイル
================================================== */
.font-italic {
  font-style: italic;
}

.line-h1 {
  line-height: 1;
}

.line-h11 {
  line-height: 1.1;
}

.line-h12 {
  line-height: 1.2;
}

.line-h15 {
  line-height: 1.5;
}

.letter-0 {
  letter-spacing: 0em;
}

.letter-s005 {
  letter-spacing: 0.05em;
}

.letter-s01 {
  letter-spacing: 0.1em;
}

.letter-s02 {
  letter-spacing: 0.2em;
}

.letter-s05 {
  letter-spacing: 0.5em;
}

/* ==================================================
 フォントカラー
================================================== */
.font-white {
  color: white;
}

.font-black {
  color: #474645;
}

.font-gray {
  color: #7d7d7d;
}

.font-main {
  color: #6a5850;
}

.font-accent {
  color: #ff8383;
}

.font-sub {
  color: #d6bc81;
}

/* ==================================================
 テキストシャドウ
================================================== */
/* ベーシックな黒シャドウ（汎用） */
.text-shadow-base {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* くっきり目のシャドウ（強調したいとき） */
.text-shadow-strong {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
}

/* 柔らかく広がるシャドウ（上品） */
.text-shadow-soft {
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* フチどり風（白文字に最適、強力） */
.text-shadow-outline {
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

/* 明るいシャドウ（暗背景用に白い影） */
.text-shadow-light {
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.6);
}

/* ==================================================
 _function.scss
 関数 定義
================================================== */
/* ==================================================
 _base.scss
 全ページ共通のタグスタイル 定義
================================================== */
/* ==================================================
 _font.scss
 フォント・文字サイズ 定義
================================================== */
/* ==================================================
 _function.scss
 関数 定義
================================================== */
/* ==================================================
 _mixin.scss
 mixinスタイル 定義
================================================== */
/* ==================================================
 _base.scss
 全ページ共通のタグスタイル 定義
================================================== */
/* ==================================================
 _font.scss
 フォント・文字サイズ 定義
================================================== */
/* ==================================================
 _animation.scss
 アニメーションスタイル 定義
================================================== */
/* ==================================================
 animation基本設定
================================================== */
/* ==================================================
 ※以下は他scssファイルでの定義方法
 @mixinで定義した引数のプロパティを書き換えるだけで個別にアニメーションを指定することができる
 @include bounce(
    $name: sk-bouncedelay;
		$duration: 3s;
		$timing-function: ease-in-out,
  );
================================================== */
/* ==================================================
 画面最大幅（PC画面をレスポンシブ対応させないための横幅）
================================================== */
/* ==================================================
 コンテンツ最大幅
================================================== */
/* ==================================================
 内部コンテンツ幅
================================================== */
/* ==================================================
 タグ共通設定
================================================== */
html {
  overflow-y: scroll;
  font-size: 16px;
}

body {
  width: 100%;
  box-sizing: border-box;
  background-color: #f7f7f7;
  font-family: "Noto Sans", "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  font-weight: 500;
  line-height: 1.7;
  text-align: justify;
  margin: 0;
  padding: 0;
  color: #474645;
  background-color: #f7f7f7;
  font-size: clamp(0.875rem, 0.833rem + 0.21vw, 1rem);
}

* {
  margin: 0;
  padding: 0;
}

img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
  overflow: hidden;
  border: 0;
  border-radius: 0.5rem;
}

li {
  list-style: none;
}

p {
  letter-spacing: 0.05em;
}

a {
  text-decoration: none;
}

/* ==================================================
 画面幅
================================================== */
.w-90 {
  width: 90%;
  max-width: 1190px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .w-90 {
    width: 95%;
  }
}

.w-80 {
  width: 80%;
  max-width: 1190px;
  margin: 0 auto;
}

.w-article {
  width: 90%;
  max-width: 880px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .w-article {
    width: 95%;
  }
}

/* ==================================================
 整列
================================================== */
.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

.align-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.vertical-middle {
  vertical-align: middle;
}

/* ==================================================
 余白
================================================== */
.mb-xs {
  margin-bottom: clamp(0.25rem, 2.5vw, 0.5rem);
}

.mb-sm {
  margin-bottom: clamp(1.25rem, 3.5vw, 1.875rem);
}

.mb-rg {
  margin-bottom: clamp(1.875rem, 5vw, 2.5rem);
}

.mb-md {
  margin-bottom: clamp(2.5rem, 6vw, 3.125rem);
}

.mb-lg {
  margin-bottom: clamp(3.125rem, 7vw, 3.75rem);
}

.mb-xl {
  margin-bottom: clamp(3.75rem, 8vw, 4.375rem);
}

.mb-xxl {
  margin-bottom: clamp(4.375rem, 9vw, 5rem);
}

/* ==================================================
 ページレイアウト
================================================== */
@media screen and (min-width: 1025px) {
  .container {
    min-width: 1400px;
  }
}

@media screen and (max-width: 767px) {
  .pc-none {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .sp-none {
    display: none;
  }
}

.sp-on {
  display: none;
}
@media screen and (max-width: 767px) {
  .sp-on {
    display: block;
  }
}

/* ==================================================
 装飾
================================================== */
.highlight-yellow {
  background: linear-gradient(transparent 60%, #fff36b 60%);
}

.text-marker {
  background: linear-gradient(transparent 75%, rgba(255, 236, 128, 0.8) 75%);
}

.btn-hover {
  transition: opacity 0.4s;
}
.btn-hover:hover {
  opacity: 0.6;
}

/* ==================================================
 下線
================================================== */
.border-bt-white {
  border-bottom: 1px solid white;
}

.border-bt-main {
  border-bottom: 1px solid #6a5850;
}

.border-bt-black {
  border-bottom: 1px solid #474645;
}

.border-main {
  border-color: #6a5850 !important;
}

.border-p1 {
  border-color: #90be6d !important;
}

.border-p2 {
  border-color: #e9c46a !important;
}

.border-p3 {
  border-color: #f4a261 !important;
}

.border-p4 {
  border-color: #e76f51 !important;
}

.border-p5 {
  border-color: #264653 !important;
}

.border-p6 {
  border-color: #032e6d !important;
}

/* ==================================================
 塗りつぶし
================================================== */
.bgcolor-main {
  background-color: #6a5850;
}

.bgcolor-base {
  background-color: #f7f7f7;
}

.bgcolor-sub {
  background-color: #d6bc81;
}

.bgcolor-base {
  background-color: #f7f7f7;
}

.bgcolor-accent {
  background-color: #ff8383;
}

.bgcolor-accentlight {
  background-color: #ffe3e3;
}

.bgcolor-back {
  background-color: #efefef;
}

.bgcolor-blue {
  background-color: #a8f6ff;
}

.bgcolor-yellow {
  background-color: #ffeb00;
}

.bgcolor-p3 {
  background-color: #f4a261;
}

.bgcolor-p4 {
  background-color: #e76f51;
}

.bgcolor-p5 {
  background-color: #264653;
}

.bgcolor-p6 {
  background-color: #032e6d;
}

/* ==================================================
 ブロックレイアウト
================================================== */
.pd-6 {
  padding-top: 6rem;
  padding-bottom: 6rem;
}
@media screen and (max-width: 767px) {
  .pd-6 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}

.pd-3 {
  padding: 3rem 5rem;
}
@media screen and (max-width: 767px) {
  .pd-3 {
    padding: 2rem 1rem;
  }
}

/* ==================================================
 _reset.scss
 リセットcss
================================================== */
/*! destyle.css v4.0.0 | MIT License | https://github.com/nicolas-cusan/destyle.min.css */
*, ::before, ::after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
}

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
}

main {
  display: block;
}

p, table, blockquote, address, pre, iframe, form, figure, dl {
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

dt {
  font-weight: 700;
}

dd {
  margin-left: 0;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
  border-top-width: 1px;
  margin: 0;
  clear: both;
  color: inherit;
}

pre {
  font-family: monospace, monospace;
  font-size: inherit;
}

address {
  font-style: inherit;
}

a {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}

abbr[title] {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

b, strong {
  font-weight: bolder;
}

code, kbd, samp {
  font-family: monospace, monospace;
  font-size: inherit;
}

small {
  font-size: 80%;
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

svg, img, embed, object, iframe {
  vertical-align: bottom;
}

button, input, optgroup, select, textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  border-radius: 0;
  text-align: inherit;
  text-transform: inherit;
}

button, [type=button], [type=reset], [type=submit] {
  cursor: pointer;
}

button:disabled, [type=button]:disabled, [type=reset]:disabled, [type=submit]:disabled {
  cursor: default;
}

:-moz-focusring {
  outline: auto;
}

select:disabled {
  opacity: inherit;
}

option {
  padding: 0;
}

fieldset {
  margin: 0;
  padding: 0;
  min-width: 0;
}

legend {
  padding: 0;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  outline-offset: -2px;
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

[type=number] {
  -moz-appearance: textfield;
}

label[for] {
  cursor: pointer;
}

details {
  display: block;
}

summary {
  display: list-item;
}

[contenteditable]:focus {
  outline: auto;
}

table {
  border-color: inherit;
  border-collapse: collapse;
}

caption {
  text-align: left;
}

td, th {
  vertical-align: top;
  padding: 0;
}

th {
  text-align: left;
  font-weight: 700;
}

/* ==================================================
 mixinフォルダ
================================================== */
/* ==================================================
 configフォルダ
================================================== */
/*
@use "config/setting";
*/
/* ==================================================
 moduleフォルダ
================================================== */
/* ==================================================
 _header.scss
 ヘッダーのスタイル定義
================================================== */
/* ==================================================
 ヘッダー
================================================== */
.header {
  width: 100%;
  height: 76px;
  padding: 0 1.5rem;
  background-color: rgba(255, 255, 255, 0.8);
  color: #474645;
  position: fixed;
  z-index: 99;
}
.header.menu-open {
  background-color: transparent;
}
.header.menu-open .header__logo {
  visibility: hidden;
}
.header__container {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header__logo {
  height: 100%;
  width: auto;
}
.header__logo a {
  height: 100%;
  display: flex;
  align-items: center;
}
.header__logo a img {
  height: 55%;
  width: auto;
}
.header__nav {
  height: 100%;
}
@media screen and (max-width: 1024px) {
  .header__nav {
    display: none;
  }
}
.header__nav ul.menu {
  height: 100%;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
  -moz-column-gap: 3rem;
       column-gap: 3rem;
}
.header__nav li {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  transition: 0.2s;
}
.header__nav li:hover {
  color: #d6bc81;
}
.header__nav li:hover .sub-menu {
  height: auto;
  transform: translateY(0);
  opacity: 1;
}
.header__nav .sub-menu {
  position: absolute;
  top: 76px;
  left: 0;
  overflow: hidden;
  width: 15rem;
  height: 0;
  transition: 0.8s;
  transform: translateY(-8%);
  opacity: 0;
}
.header__nav .sub-menu li {
  color: white;
  display: block;
  margin-left: 0;
  padding: 0.5rem;
  background-color: #474645;
  transition: 0.8s;
}
.header__nav .sub-menu li:hover {
  background-color: #d6bc81;
}
.header__nav .sub-menu li a {
  padding: 1em;
}
.header__button {
  border: solid 1px #474645;
  font-weight: 700;
  padding: 12px 36px;
  border-radius: 46px;
  display: flex;
  align-items: center;
  font-size: 16px;
  transition: 0.2s;
}
.header__button::before {
  content: "";
  width: 1.2rem;
  height: 1.2rem;
  margin-right: 0.5em;
  background-size: contain;
  background-image: url("../../images/icon-reserve-black.svg");
  background-repeat: no-repeat;
  background-position: center center;
}
@media screen and (max-width: 1024px) {
  .header__button {
    display: none;
  }
}
.header__button span {
  margin-right: 3px;
}
.header__button:hover {
  background-color: #6a5850;
  border: solid 1px white;
  color: white;
}
.header__button:hover::before {
  background-image: url("../../images/icon-reserve-white.svg");
}
.header__button-business::before {
  content: none;
}
.header__button-business:hover::before {
  content: none;
}
.header__menu {
  display: none;
  align-items: center;
  justify-content: flex-end;
  width: 60px;
  height: 60px;
}
@media screen and (max-width: 1024px) {
  .header__menu {
    display: flex;
  }
}
.header__menu-btn {
  z-index: 999;
}
.header__menu-btn > span {
  display: block;
  background-color: #6a5850;
  width: 30px;
  height: 2px;
  margin-bottom: 9px;
  transition: transform 0.7s;
}
.header__menu-btn > span:last-child {
  margin-bottom: 0;
}

/* ==================================================
 _footer.scss
 フッターのスタイル定義
================================================== */
/* ==================================================
 グローバルフッター
================================================== */
.footer {
  padding-bottom: 1rem;
  background: #474645;
}
.footer__container {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.footer__wrap {
  width: 100%;
  height: 45px;
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 767px) {
  .footer__wrap {
    flex-direction: column;
    align-items: flex-start;
    row-gap: 0.6rem;
    height: 100%;
  }
}
.footer__wrap-logo {
  height: 100%;
}
@media screen and (max-width: 767px) {
  .footer__wrap-logo {
    height: 45px;
  }
}
.footer__wrap-logo img {
  height: 100%;
}
.footer__wrap-sns {
  display: flex;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
  align-items: flex-end;
}
.footer__wrap-sns li {
  transition: 0.4s;
}
.footer__wrap-sns li:hover {
  opacity: 0.8;
}
.footer__menu ul {
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 1024px) {
  .footer__menu ul {
    flex-direction: column;
    row-gap: 1.5rem;
  }
}
.footer__menu ul a {
  font-weight: 700;
  font-size: 1.2rem;
  transition: 0.4s;
}
.footer__menu ul a:hover {
  color: #d6bc81;
}
.footer__menu ul .sub-menu {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 1024px) {
  .footer__menu ul .sub-menu {
    row-gap: 0;
    padding-left: 1rem;
  }
}
.footer__menu ul .sub-menu li {
  margin-bottom: 0.6rem;
}
.footer__menu ul .sub-menu a {
  font-weight: 400;
  font-size: 1rem;
}

/* ==================================================
 _mobileMenu.scss
 モバイルメニューのスタイル定義
================================================== */
.mobileMenu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #6a5850;
  visibility: hidden;
  z-index: 98;
  overflow-y: scroll;
}
@media screen and (max-width: 767px) {
  .mobileMenu {
    width: 100%;
  }
}
.mobileMenu__container {
  padding: 5rem;
}
@media screen and (max-width: 767px) {
  .mobileMenu__container {
    padding: 2rem;
  }
}
.mobileMenu__logo {
  width: 60%;
  max-width: 300px;
  margin: 0 auto 2rem 0;
}
.mobileMenu__nav {
  height: 100%;
  color: white;
}
.mobileMenu__nav ul.menu {
  font-weight: 700;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  row-gap: 1.5rem;
}
.mobileMenu__nav ul.menu > li {
  width: 100%;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid white;
}
.mobileMenu__nav ul.menu > li > a {
  position: relative;
  letter-spacing: 0.48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mobileMenu__nav ul.menu > li > a::after {
  content: "";
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: white url("../../images/icon-right_main.svg") no-repeat 50%/10px auto;
  transform: translateY(-5px);
}
.mobileMenu__nav .sub-menu {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  padding-left: 1rem;
}
.mobileMenu__nav .sub-menu li {
  margin-bottom: 0.6rem;
}
.mobileMenu__nav .sub-menu a {
  font-weight: 400;
  font-size: 1rem;
}
.mobileMenu__button {
  padding-top: 3rem;
  width: 100%;
  margin: 0 auto;
}

.menu-open.mobileMenu {
  visibility: visible;
}
.menu-open.header__menu-btn > span {
  background-color: white;
}
.menu-open.header__menu-btn > span:nth-child(1) {
  transition-delay: 70ms;
  transform: translateY(11px) rotate(135deg);
}
.menu-open.header__menu-btn > span:nth-child(2) {
  transition-delay: 0s;
  transform: translateX(-18px) scaleX(0);
}
.menu-open.header__menu-btn > span:nth-child(3) {
  transition-delay: 140ms;
  transform: translateY(-11px) rotate(-135deg);
}
.menu-open.mask {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.5;
  z-index: 2;
  cursor: pointer;
}

/* ==================================================
 _global-nav.scss
 グローバルナビゲーションのスタイル定義
================================================== */
.global-nav__list {
  display: flex;
  gap: 24px;
}

/* ==================================================
 _hero.scss
 ヒーローエリアのスタイル定義
================================================== */
.hero {
  width: 100%;
  height: 100vh;
  background-image: url("../../images//main-image.jpg");
  background-size: cover;
  position: relative;
}
@media screen and (max-width: 1024px) {
  .hero {
    height: 80vh;
  }
}
.hero__container {
  padding-top: 76px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
}
.hero__wrap {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
}
.hero__wrap img {
  width: 50%;
  max-width: 600px;
}
@media screen and (max-width: 767px) {
  .hero__wrap img {
    width: 80%;
  }
}
.hero__button {
  width: 100%;
}
@media screen and (max-width: 767px) {
  .hero__button {
    width: 85%;
    margin: 0 auto;
  }
}

/* ==================================================
 _about.scss
 アバウトエリアのスタイル定義
================================================== */
.about {
  position: relative;
  padding-top: 3rem;
  padding-bottom: 4rem;
}
.about__container {
  display: flex;
  flex-direction: column;
  row-gap: 3rem;
}
@media screen and (max-width: 767px) {
  .about__container {
    row-gap: 2rem;
  }
}
.about__wrap {
  display: flex;
  justify-content: center;
  -moz-column-gap: 4rem;
       column-gap: 4rem;
  align-items: center;
}
@media screen and (max-width: 1024px) {
  .about__wrap {
    flex-direction: column;
    row-gap: 2rem;
  }
}
.about__wrap-txt {
  width: 55%;
  display: flex;
  flex-direction: column;
  row-gap: 0.6rem;
}
@media screen and (max-width: 1024px) {
  .about__wrap-txt {
    width: 100%;
  }
}
.about__wrap-block {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
}
.about__wrap-img {
  width: 45%;
}
@media screen and (max-width: 1024px) {
  .about__wrap-img {
    width: 100%;
  }
}
.about__button {
  width: 100%;
}
@media screen and (max-width: 767px) {
  .about__button {
    width: 85%;
    margin: 0 auto;
  }
}

/* ==================================================
 _product.scss
 アイエイト利用エリアのスタイル定義
================================================== */
.product {
  padding-top: 8rem;
  padding-bottom: 8rem;
}
.product__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  row-gap: 4rem;
  -moz-column-gap: 4rem;
       column-gap: 4rem;
}
.product__item {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
}
.product__item-img img {
  width: 100%;
}
.product__item-text {
  display: flex;
  flex-direction: column;
  row-gap: 0.6rem;
}
.product__menu {
  width: 100%;
  padding-bottom: 6rem;
}
.product__menu-container {
  width: 100%;
  display: flex;
  position: relative;
  border-left: 1px solid rgb(58, 33, 5);
}
@media screen and (max-width: 1024px) {
  .product__menu-container {
    flex-direction: column;
    border-left: none;
  }
}
.product__menu-nav {
  height: 100%;
  width: 350px;
  padding-top: 120px;
  margin-top: -120px;
  position: sticky;
  top: 0;
  left: 0;
  padding-left: 3rem;
}
@media screen and (max-width: 1024px) {
  .product__menu-nav {
    position: relative;
    width: 100%;
    padding-top: 1rem;
    margin-top: 0;
    margin-bottom: 2rem;
    padding-left: 0;
    padding-right: 0;
  }
}
@media screen and (max-width: 767px) {
  .product__menu-nav {
    width: 100%;
    padding-top: 1rem;
    margin-top: 0;
    margin-bottom: 2rem;
  }
}
.product__menu-nav ul {
  display: flex;
  flex-direction: column;
  row-gap: 1.5rem;
}
@media screen and (max-width: 1024px) {
  .product__menu-nav ul {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    -moz-column-gap: 1rem;
         column-gap: 1rem;
  }
}
@media screen and (max-width: 1024px) {
  .product__menu-nav ul {
    row-gap: 0.5rem;
    -moz-column-gap: 0.5rem;
         column-gap: 0.5rem;
  }
}
.product__menu-nav ul li {
  transition: all 0.4s;
  white-space: nowrap;
}
.product__menu-nav ul li:hover {
  opacity: 0.4;
}
@media screen and (max-width: 1024px) {
  .product__menu-nav ul li {
    padding: 0.5rem 1rem;
    border: 1px solid rgb(58, 33, 5);
    border-radius: 999px;
    min-width: calc(25% - 1rem);
    height: 50px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
@media screen and (max-width: 767px) {
  .product__menu-nav ul li {
    min-width: calc(50% - 0.5rem);
  }
}
.product__menu-group {
  width: 100%;
  padding-left: 4rem;
  border-left: 1px solid rgb(58, 33, 5);
  border-right: 1px solid rgb(58, 33, 5);
  padding-right: 4rem;
}
@media screen and (max-width: 1024px) {
  .product__menu-group {
    padding-right: 0;
    padding-left: 0;
    border-left: none;
    border-right: none;
  }
}
.product__menu-details summary {
  cursor: pointer;
  padding: 1rem 3rem 1rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  background-color: #d6bfb5;
  justify-content: center;
}
.product__menu-details summary::marker {
  display: none;
  content: "";
}
.product__menu-details summary::after {
  content: "＋";
  font-size: 1.2rem;
  position: absolute;
  right: 1.5rem;
  transition: transform 0.3s ease;
}
.product__menu-details[open] summary::after {
  content: "－";
  transform: rotate(0deg);
}
.product__menu-list {
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
}
@media screen and (max-width: 1024px) {
  .product__menu-list {
    row-gap: 1rem;
  }
}
.product__menu-wrap {
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
  margin-bottom: 6rem;
}
.product__menu-wrap:last-child {
  margin-bottom: 2rem;
}
.product__menu-wrap img {
  width: 100%;
}
.product__menu-item {
  display: flex;
  align-items: flex-start;
  flex: none;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 48px;
  justify-content: flex-start;
  padding-top: 0rem;
  padding-bottom: 2rem;
  border-bottom: 0.8px solid rgb(56, 42, 32);
  width: 100%;
}
@media screen and (max-width: 767px) {
  .product__menu-item {
    flex-direction: column;
    row-gap: 0.5rem;
    align-items: flex-start;
    padding-bottom: 1rem;
  }
}
.product__menu-title {
  display: flex;
  align-items: center;
  flex: 1;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 12px;
  justify-content: flex-start;
  padding: 0px;
  width: auto;
  max-width: 100%;
}
.product__menu-title p {
  width: 3rem;
}
.product__menu-price {
  display: flex;
  align-items: baseline;
  flex: none;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0px;
  justify-content: flex-end;
  padding: 0px;
  width: 150px;
  max-width: 100%;
}
@media screen and (max-width: 767px) {
  .product__menu-price {
    width: 100%;
  }
}
.product__menu-wprice {
  display: flex;
  flex: none;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.3rem;
  justify-content: flex-end;
  padding: 0px;
  width: 150px;
  max-width: 100%;
}
@media screen and (max-width: 767px) {
  .product__menu-wprice {
    width: 100%;
  }
}
.product__menu-wprice-wrap {
  display: flex;
  align-items: baseline;
  flex: none;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
}
.product__menu-label {
  padding: 0 0.5rem;
  border-radius: 0.25rem;
}
.product__self-list {
  display: flex;
  flex-direction: column;
  row-gap: 4rem;
}
.product__self-wrap {
  display: flex;
  -moz-column-gap: 2rem;
       column-gap: 2rem;
}
@media screen and (max-width: 767px) {
  .product__self-wrap {
    flex-direction: column;
    row-gap: 1rem;
  }
}
.product__self-img {
  width: 40%;
}
@media screen and (max-width: 767px) {
  .product__self-img {
    width: 100%;
  }
}
.product__self-img img {
  width: 100%;
}
.product__self-txt {
  width: 60%;
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
}
@media screen and (max-width: 767px) {
  .product__self-txt {
    width: 100%;
  }
}
.product__button {
  width: 100%;
}
@media screen and (max-width: 767px) {
  .product__button {
    width: 85%;
    margin: 0 auto;
  }
}

.normallabel {
  background-color: #6a5850;
  color: white;
  font-weight: 600;
}

.speciallabel {
  background-color: #d6bc81;
  color: #6a5850;
  font-weight: 600;
}

.manlabel {
  background-color: #a8f6ff;
  color: #6a5850;
  font-weight: 600;
}

.ladylabel {
  background-color: #ff8383;
  color: white;
  font-weight: 600;
}

/* リセット */
.tabs__radio {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
}

/* 見出し（タブ） */
.tabs__labels {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 2rem;
  border-bottom: 1px solid #6a5850;
}

.tabs__label {
  border-top: 1px solid #6a5850;
  border-left: 1px solid #6a5850;
  border-right: 1px solid #6a5850;
  border-radius: 0.6rem 0.6rem 0 0;
  min-width: 150px;
  text-align: center;
  background: #f7f7f7;
  padding: 0.6rem 1.2rem;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
@media screen and (max-width: 767px) {
  .tabs__label {
    min-width: auto;
  }
}

#tab-full:checked ~ .tabs__labels label[for=tab-full],
#tab-self:checked ~ .tabs__labels label[for=tab-self] {
  background: #d6bc81;
  border-color: #bbb;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  font-weight: 600;
}

/* パネルの表示/非表示（基本） */
.tabs__panel {
  display: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

#tab-full:checked ~ .tabs__panels #panel-full {
  display: block;
  opacity: 1;
}

#tab-self:checked ~ .tabs__panels #panel-self {
  display: block;
  opacity: 1;
}

/* ==================================================
 _insta.scss
 シミュレーションゴルフのスタイル定義
================================================== */
.insta__list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 20px auto;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .insta__list {
    gap: 10px;
  }
}
.insta__list li {
  position: relative;
  width: calc((100% - 40px) / 3);
}
.insta__list li:before {
  content: "";
  display: block;
  padding-top: 100%;
}
.insta__list a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.insta__list img {
  border-radius: 0.1rem;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.insta__button {
  background-color: #422b06;
  padding: 1em 3em;
  border-radius: 3rem;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  cursor: pointer;
  transition: 0.3s;
}
.insta__button a {
  color: white;
  text-decoration: none;
}
.insta__button:hover {
  opacity: 0.8;
}

/* ==================================================
 _faq.scss
 FAQのスタイル定義
================================================== */
.faq {
  padding-top: 8rem;
  padding-bottom: 8rem;
  background-color: #6a5850;
}
@media screen and (max-width: 767px) {
  .faq {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}

/* ==================================================
 _access.scss
 その他のスタイル定義
================================================== */
.access {
  padding-top: 8rem;
  position: relative;
}
@media screen and (max-width: 767px) {
  .access {
    padding-top: 4rem;
  }
}
.access__map {
  width: 100%;
  height: 400px;
}
@media screen and (max-width: 767px) {
  .access__map {
    height: 200px;
  }
}

/* ==================================================
 _contact.scss
 アバウトエリアのスタイル定義
================================================== */
.contact {
  padding-top: 8rem;
  padding-bottom: 10rem;
  background-color: #f4f0eb;
}
@media screen and (max-width: 767px) {
  .contact {
    padding-top: 4rem;
    padding-bottom: 5rem;
  }
}
.contact__wrap {
  display: flex;
  justify-content: center;
  -moz-column-gap: 2rem;
       column-gap: 2rem;
  align-items: center;
}
@media screen and (max-width: 1024px) {
  .contact__wrap {
    flex-direction: column;
    row-gap: 1rem;
  }
}
.contact__btn {
  position: relative;
  margin: 0 auto;
  height: 88px;
  max-width: 465px;
  width: 100%;
  border-radius: 100px;
  display: flex;
  align-items: center;
  transition: color 0.4s, background-color 0.4s, border 0.4s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: 0.25rem;
}
@media screen and (max-width: 767px) {
  .contact__btn {
    font-size: 1rem;
    width: 100%;
    height: auto;
    min-height: 44px;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
.contact__btn::after {
  position: absolute;
  top: 50%;
  right: 3rem;
  transform: rotate(45deg) translateY(-50%);
  width: 0.6rem;
  height: 0.6rem;
  border-top: 3px solid white;
  border-right: 3px solid white;
  content: "";
}
.contact__btn:hover {
  background-color: #6a5850;
  color: white;
}
.contact__btn span {
  position: relative;
  display: flex;
  align-items: center;
}
.contact__btn-line {
  background-color: #06c755;
}
.contact__btn-tel {
  background-color: #ff8383;
}

/* ==================================================
 _contact.scss
 アバウトエリアのスタイル定義
================================================== */
.back {
  padding-top: 8rem;
  padding-bottom: 8rem;
}
@media screen and (max-width: 767px) {
  .back {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
.back__button {
  width: 100%;
}
@media screen and (max-width: 767px) {
  .back__button {
    width: 85%;
    margin: 0 auto;
  }
}
.back__btn {
  position: relative;
  margin: 0 auto;
  height: 88px;
  max-width: 465px;
  width: 100%;
  border-radius: 100px;
  border: solid 1px #6a5850;
  display: flex;
  align-items: center;
  transition: color 0.4s, background-color 0.4s, border 0.4s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: 0.25rem;
}
@media screen and (max-width: 767px) {
  .back__btn {
    height: auto;
    min-height: 44px;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}
.back__btn::before {
  position: absolute;
  top: 50%;
  left: 3rem;
  transform: translateY(-50%);
  content: url("../../images//arrow_black.svg");
}
@media screen and (max-width: 767px) {
  .back__btn::before {
    left: 1.5rem;
  }
}
.back__btn:hover {
  background-color: #6a5850;
  color: white;
}
.back__btn:hover::before {
  content: url("../../images//arrow_white.svg");
}
.back__btn span {
  position: relative;
  display: flex;
  align-items: center;
}

/* ==================================================
 _subHero.scss
スタジオページひろーのスタイル定義
================================================== */
.subHero {
  position: relative;
  background-image: url("../../images//about_head.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  padding-top: 76px;
  color: #fff;
}
.subHero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 1;
}
.subHero.about__img {
  background-image: url("../../images//about_head.jpg");
}
.subHero.removal__img {
  background-image: url("../../images//service-3-m.jpg");
}
.subHero.faceal__img {
  background-image: url("../../images//service-2.jpg");
}
.subHero.bodycare__img {
  background-image: url("../../images//service-1.jpg");
}
.subHero.romapink__img {
  background-image: url("../../images//romapink_01.jpg");
}
.subHero.mens__img {
  background-image: url("../../images//mens_head.jpg");
}
.subHero__wrap {
  position: relative;
  z-index: 2;
  padding: 6rem 0;
}
@media screen and (max-width: 767px) {
  .subHero__wrap {
    padding: 3rem 0;
  }
}

/* ==================================================
 _archive.scss
 アバウトエリアのスタイル定義
================================================== */
.archive {
  padding-top: 2rem;
  padding-bottom: 4rem;
}

/* ==================================================
 _aboutPage.scss
 フローのスタイル定義
================================================== */
.aboutPage__main {
  padding-top: 12rem;
  padding-bottom: 12rem;
  background-image: url("../../images//about-main.jpg");
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
@media screen and (max-width: 767px) {
  .aboutPage__main {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}
.aboutPage__main-wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  row-gap: 4rem;
  color: #393c3e;
}
@media screen and (max-width: 767px) {
  .aboutPage__main-wrap {
    row-gap: 2rem;
  }
}
.aboutPage__main-copy img {
  width: 60%;
  max-width: 800px;
}
.aboutPage__main-txt {
  display: flex;
  flex-direction: column;
  row-gap: 1.5rem;
  line-height: 2;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .aboutPage__main-txt {
    row-gap: 1rem;
    line-height: 1.7;
    text-align: left;
  }
}
.aboutPage__main-logo img {
  width: 30%;
  max-width: 500px;
  row-gap: 4rem;
}
@media screen and (max-width: 767px) {
  .aboutPage__main-logo img {
    width: 80%;
  }
}
.aboutPage__company {
  padding-top: 8rem;
  padding-bottom: 8rem;
}
@media screen and (max-width: 767px) {
  .aboutPage__company {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
.aboutPage__company-table {
  width: 100%;
  max-width: 800px;
  border-top: 1px solid #6a5850;
  border-bottom: 1px solid #6a5850;
  margin: 0 auto 2rem auto;
}
.aboutPage__company-table th {
  font-weight: bold;
  padding: 1rem 2rem;
  border-bottom: 1px solid #6a5850;
  vertical-align: middle;
}
@media screen and (max-width: 767px) {
  .aboutPage__company-table th {
    padding: 0.5rem 1rem;
  }
}
.aboutPage__company-table td {
  padding: 1rem 2rem;
  border-bottom: 1px solid #6a5850;
  border-left: 1px solid #6a5850;
  vertical-align: middle;
}
@media screen and (max-width: 767px) {
  .aboutPage__company-table td {
    padding: 0.5rem 1rem;
  }
}
.aboutPage__company-grid {
  display: flex;
  justify-content: center;
  -moz-column-gap: 2rem;
       column-gap: 2rem;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .aboutPage__company-grid {
    flex-direction: column;
    row-gap: 0.5rem;
  }
}
.aboutPage__company-grid img {
  width: 100%;
  max-width: 380px;
}
.aboutPage__president {
  background-color: #efefef;
  padding-top: 8rem;
  padding-bottom: 8rem;
}
@media screen and (max-width: 767px) {
  .aboutPage__president {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
.aboutPage__president-grid {
  display: flex;
  justify-content: center;
  -moz-column-gap: 2rem;
       column-gap: 2rem;
}
@media screen and (max-width: 1024px) {
  .aboutPage__president-grid {
    flex-direction: column;
    row-gap: 1rem;
  }
}
.aboutPage__president-photo {
  width: 40%;
}
@media screen and (max-width: 1024px) {
  .aboutPage__president-photo {
    width: 100%;
  }
}
.aboutPage__president-photo img {
  width: 100%;
  max-width: 422px;
}
.aboutPage__president-table {
  width: 60%;
}
@media screen and (max-width: 1024px) {
  .aboutPage__president-table {
    width: 100%;
  }
}
.aboutPage__president-table table {
  vertical-align: middle;
}
.aboutPage__president-table table th {
  width: 25%;
  padding: 1rem 0;
  font-weight: normal;
  vertical-align: middle;
}
@media screen and (max-width: 767px) {
  .aboutPage__president-table table th {
    padding: 1rem 0;
  }
}
.aboutPage__president-table table th.tr-top {
  vertical-align: top;
}
.aboutPage__president-table table td {
  width: 75%;
  padding: 1rem 2rem;
  vertical-align: middle;
}
@media screen and (max-width: 767px) {
  .aboutPage__president-table table td {
    padding: 1rem 1rem;
  }
}

/* ==================================================
 _about.scss
 アバウトエリアのスタイル定義
================================================== */
.machineHead {
  padding-top: 6rem;
  padding-bottom: 6rem;
  background-color: #efefef;
  background-image: url("../../images//service-back.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}
@media screen and (max-width: 767px) {
  .machineHead {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
.machineHead__container {
  display: flex;
  justify-content: center;
  -moz-column-gap: 2rem;
       column-gap: 2rem;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .machineHead__container {
    flex-direction: column-reverse;
    row-gap: 1.5rem;
  }
}
.machineHead__img {
  width: 50%;
  text-align: right;
}
@media screen and (max-width: 767px) {
  .machineHead__img {
    width: 100%;
    text-align: center;
  }
}
.machineHead__img img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 400px;
}
@media screen and (max-width: 767px) {
  .machineHead__img img {
    max-height: 300px;
  }
}
.machineHead__text {
  width: 50%;
  display: flex;
  flex-direction: column;
  row-gap: 1.5rem;
}
@media screen and (max-width: 767px) {
  .machineHead__text {
    width: 100%;
    row-gap: 1rem;
    text-align: center;
  }
}

/* 
@use "module/sidenav";
*/
/* ==================================================
 pageフォルダ
================================================== */
/* ==================================================
 _pageCommon.scss
 レッスンエリアのスタイル定義
================================================== */
.pageCommon {
  /* SP：縦並び → 下向き三角（↓） */
}
.pageCommon__headding {
  position: relative;
}
.pageCommon__headding::after {
  content: "";
  display: block;
  width: 5rem;
  height: 2px;
  background-color: #ff8383;
  margin: 0.2em auto 0;
  border-radius: 2px;
}
.pageCommon__list {
  display: flex;
  flex-direction: column;
  row-gap: 4rem;
}
.pageCommon__flow {
  display: flex;
  justify-content: space-between;
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}
@media screen and (max-width: 767px) {
  .pageCommon__flow {
    flex-direction: column;
    row-gap: 1.5rem;
  }
}
.pageCommon__flow-item {
  width: 33%;
  position: relative;
  margin: 1em auto;
  padding: 3em 1.5em;
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
}
@media screen and (max-width: 767px) {
  .pageCommon__flow-item {
    width: 100%;
  }
}
.pageCommon__flow-item::after {
  content: "";
  position: absolute;
  top: 35%;
  right: 0;
  transform: translateX(1.5rem);
  width: 0;
  height: 0;
  border-top: 1rem solid transparent;
  border-bottom: 1rem solid transparent;
  border-left: 1rem solid #6a5850;
  pointer-events: none;
  z-index: 1;
}
.pageCommon__flow-item:last-child::after {
  border: none;
}
.pageCommon__items {
  display: flex;
  justify-content: flex-start;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
  row-gap: 0.5rem;
  flex-wrap: wrap;
}
.pageCommon__items li {
  padding: 0 0.5rem;
  border-radius: 0.2rem;
  border: 1px solid #6a5850;
}
@media screen and (max-width: 767px) {
  .pageCommon__flow > li.pageCommon__flow-item:not(:last-child)::after {
    top: auto;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: none; /* いったんリセット */
    width: 0;
    height: 0;
    border-left: 1.5rem solid transparent;
    border-right: 1.5rem solid transparent;
    border-top: 1.5rem solid #6a5850;
  }
}
.pageCommon__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 12px;
  /* セル共通 */
  /* 見出し */
  /* 四隅の角丸（PCテーブル時） */
  /* ===== ヘッダー各プラン色（PC/タブ共通） ===== */
  /* ===== ボディ ===== */
  /* 1列目（theadの空白ヘッダ）は控えめ */
  /* =========================================
     SP：thead=3列Grid、tbodyは
         1段目 th（全幅）、2段目 td×3（横並び）
     ========================================= */
}
.pageCommon__table thead th,
.pageCommon__table tbody th,
.pageCommon__table tbody td {
  padding: 1.5rem 1rem;
  border-bottom: 1px solid #7d7d7d;
  vertical-align: middle;
  background: #fff;
}
@media screen and (max-width: 767px) {
  .pageCommon__table thead th,
  .pageCommon__table tbody th,
  .pageCommon__table tbody td {
    padding: 1rem 0.5rem;
  }
}
.pageCommon__table thead th {
  text-align: center;
  background: #fafafa;
  position: relative;
}
.pageCommon__table thead tr th:first-child {
  border-top-left-radius: 12px;
}
@media screen and (max-width: 767px) {
  .pageCommon__table thead tr th:nth-child(2) {
    border-top-left-radius: 12px;
  }
}
.pageCommon__table thead tr th:last-child {
  border-top-right-radius: 12px;
}
.pageCommon__table tbody tr:last-child th:first-child {
  border-bottom-left-radius: 12px;
}
@media screen and (max-width: 767px) {
  .pageCommon__table tbody tr:last-child th:first-child {
    border-bottom-left-radius: 0;
  }
}
.pageCommon__table tbody tr:last-child td:nth-child(2) {
  border-bottom: 4px solid #ff8383;
}
@media screen and (max-width: 767px) {
  .pageCommon__table tbody tr:last-child td:nth-child(2) {
    border-bottom-left-radius: 12px;
    border-bottom: 1px solid #7d7d7d;
  }
}
.pageCommon__table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 12px;
}
.pageCommon__table tbody td img {
  width: 3rem;
  height: 3rem;
  margin-bottom: 0.3rem;
}
.pageCommon__table tbody td:nth-child(2) {
  border-left: 4px solid #ff8383;
  border-right: 4px solid #ff8383;
  color: #ff8383;
  font-weight: 600;
}
@media screen and (max-width: 767px) {
  .pageCommon__table tbody td:nth-child(2) {
    border-left: 1px solid #7d7d7d;
    border-right: none;
  }
}
.pageCommon__table tbody td:last-child {
  border-right: 1px solid #7d7d7d;
}
.pageCommon__table tbody td li {
  text-align: left;
  position: relative;
  padding-left: calc(0.6em + 0.6em);
}
.pageCommon__table tbody td li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: #6a5850;
}
.pageCommon__table thead tr th:nth-child(1) {
  width: 16%;
}
.pageCommon__table thead tr th:nth-child(2) {
  width: 28%;
  background-color: #ff8383;
  --raise: 1.5rem;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  .pageCommon__table thead tr th:nth-child(2) {
    width: 100%;
  }
}
.pageCommon__table thead tr th:nth-child(2)::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--raise) * -1);
  height: calc(100% + var(--raise));
  background: #ff8080;
  border-radius: 12px 12px 0 0;
  z-index: -1; /* 背景として後ろに */
}
.pageCommon__table thead tr th:nth-child(2) span {
  position: relative;
  top: -0.75rem;
}
.pageCommon__table thead tr th:nth-child(3) {
  width: 28%;
  background-color: #7d7d7d;
  color: white;
}
@media screen and (max-width: 767px) {
  .pageCommon__table thead tr th:nth-child(3) {
    width: 100%;
  }
}
.pageCommon__table tbody th {
  background: #f0f0f0;
  text-align: center;
  border-left: 1px solid #7d7d7d;
}
@media screen and (max-width: 767px) {
  .pageCommon__table tbody th {
    border-right: 1px solid #7d7d7d;
  }
}
.pageCommon__table tbody td {
  text-align: center;
}
.pageCommon__table tbody td span {
  margin: 0 4px;
}
@media screen and (max-width: 767px) {
  .pageCommon__table tbody td:nth-child(2) {
    width: 100%;
  }
}
.pageCommon__table thead th:first-child {
  background: #fafafa;
  color: #666;
}
@media screen and (max-width: 767px) {
  .pageCommon__table {
    /* thead：空白(1列目)を非表示、3列Gridで整列 */
    /* tbody：各行をGrid化 */
    /* 行ラベル(th)は1段目で全幅 */
    /* 値(td)は2段目で3列 */
  }
  .pageCommon__table thead tr {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .pageCommon__table thead th:first-child {
    display: none;
  }
  .pageCommon__table thead th {
    border-right: 1px solid #7d7d7d;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .pageCommon__table thead th:last-child {
    border-right: none;
  }
  .pageCommon__table tbody tr {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .pageCommon__table tbody tr:last-child {
    border-bottom: none;
  }
  .pageCommon__table tbody th {
    grid-column: 1/-1;
    text-align: center;
    background: #f0f0f0;
    border-bottom: 1px solid #7d7d7d;
    padding: 0.5rem;
  }
  .pageCommon__table tbody td {
    border-left: 1px solid #7d7d7d;
  }
}
.pageCommon__bullet {
  display: inline-block;
}
.pageCommon__bullet li {
  list-style-type: disc;
  list-style-position: inside;
}
.pageCommon__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  -moz-column-gap: 2rem;
       column-gap: 2rem;
}
@media screen and (max-width: 1024px) {
  .pageCommon__grid {
    -moz-column-gap: 1rem;
         column-gap: 1rem;
  }
}
@media screen and (max-width: 767px) {
  .pageCommon__grid {
    grid-template-columns: 1fr;
    row-gap: 2rem;
  }
}
.pageCommon__bunner {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}

/* ==================================================
 singleフォルダ
================================================== */
/* ==================================================
 _single.scss
 投稿のスタイル定義
================================================== */
.single {
  padding-bottom: 8em;
}
.single__breadcrumb {
  background-color: #f7f7f7;
  padding-top: 70px;
}
.single__hero {
  width: 100%;
}
.single__hero-inner {
  padding-top: 4rem;
  padding-bottom: 2rem;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  row-gap: 0.25rem;
}
.single__meta {
  display: flex;
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
  justify-content: flex-start;
  align-items: center;
}
.single__meta-tag {
  display: flex;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
  justify-content: flex-start;
  align-items: center;
}
.single__article {
  padding-bottom: 2rem;
}
.single__article-thumbnail img {
  width: 100% !important;
  max-height: 700px;
}
.single p,
.single ul,
.single ol,
.single table,
.single dl,
.single blockquote,
.single pre,
.single code,
.single img,
.single picture img,
.single figure,
.single iframe,
.single object,
.single hr,
.single video,
.single audio {
  margin-bottom: 1.2rem;
}
.single p code,
.single p img,
.single p iframe,
.single p object {
  margin-bottom: 0;
}
.single figure {
  max-width: 100%;
}
.single figure img,
.single figure iframe,
.single figure video,
.single figure audio {
  margin-bottom: 0;
}
.single table {
  width: 100%;
}
.single table thead {
  border: none;
}
.single table th,
.single table td {
  box-sizing: border-box;
  padding: 0.625em;
  text-align: left;
  vertical-align: middle;
  border: 1px solid #474645;
}
.single img,
.single iframe,
.single object,
.single video,
.single audio {
  line-height: 1;
}
.single img {
  max-width: 100%;
  width: auto;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}
.single blockquote {
  line-height: 1.5;
  position: relative;
  padding: 3.125em 1.875em 0.625em;
}
.single blockquote::before {
  font-family: "Material Symbols Outlined";
  font-size: 1.875em;
  font-weight: 900;
  position: absolute;
  top: 0.3125em;
  left: 0.9375em;
  content: "\e244";
}
.single blockquote p,
.single blockquote cite {
  margin-bottom: 1.1rem;
}
.single blockquote p cite {
  margin-bottom: 0;
}
.single blockquote cite {
  font-size: 0.6125em;
  display: block;
  text-align: right;
}
.single h2,
.single h3,
.single h4,
.single h5 {
  margin-top: 1rem;
  margin-bottom: 1.2rem;
  letter-spacing: 1px;
}
.single h2 {
  font-size: 1.25em;
  line-height: 1.5;
  font-weight: 700;
}
.single h3 {
  font-size: 1.1em;
  line-height: 1.3;
  font-weight: 700;
}
.single h1.has-background,
.single h2.has-background,
.single h3.has-background,
.single h4.has-background,
.single h5.has-background,
.single h6.has-background {
  padding: 0.6em 1em;
}
.single b,
.single strong {
  font-weight: bold;
}
.single a {
  text-decoration: underline;
}
.single ul:not([class]) {
  padding-left: 1.25em;
  list-style: disc;
}
.single ol:not([class]) {
  padding-left: 1.875em;
  list-style: decimal;
}
.single .wp-block-media-text__media img {
  width: 100%;
}

/* ==================================================
 _singleColumn.scss
 投稿のスタイル定義
================================================== */
.singleColumn__article h2 {
  background-color: #6a5850;
  color: white;
  padding: 1.2em 1em;
  margin-top: 5rem;
}
.singleColumn__article h3 {
  padding: 0.8em 1.2em;
  border-left: 6px solid #6a5850;
  background-color: rgba(106, 88, 80, 0.1);
  margin-top: 2rem;
}
.singleColumn__article h4 {
  margin-top: 1rem;
  padding: 0.2em 0 0.2em 1em;
  position: relative;
  font-weight: 700;
}
.singleColumn__article h4::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 0.2em;
  height: calc(100% - 0.6em);
  background-color: #6a5850;
  border-radius: 2em;
}

/* ==================================================
 contactForm7フォルダ
================================================== */
/* ==================================================
 _contactForm7.scss
 アバウトエリアのスタイル定義
================================================== */
.wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.wpcf7-form p {
  margin-bottom: 0;
  line-height: 1;
}
.wpcf7-form input[type=text],
.wpcf7-form input[type=email],
.wpcf7-form input[type=tel],
.wpcf7-form textarea {
  background-color: white;
  width: 100%;
  padding: 1rem;
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  box-sizing: border-box;
  transition: border-color 0.3s ease;
}
.wpcf7-form input[type=text]:focus,
.wpcf7-form input[type=email]:focus,
.wpcf7-form input[type=tel]:focus,
.wpcf7-form textarea:focus {
  border-color: #0073aa;
  outline: none;
}
.wpcf7-form textarea {
  min-height: 150px;
  resize: vertical;
}
.wpcf7-form .wpcf7-checkbox label,
.wpcf7-form .wpcf7-radio label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.4rem;
}
.wpcf7-form .wpcf7-validates-as-required::after {
  content: " *";
  color: red;
}
.wpcf7-form input[type=submit] {
  width: 100%;
  text-align: center;
  margin: 0 auto;
  padding: 1rem 2rem;
  font-size: 1.6rem;
  background-color: #0073aa;
  color: #fff;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.wpcf7-form input[type=submit]:hover {
  background-color: #005f8d;
}
.wpcf7-form .wpcf7-not-valid-tip {
  color: #d00;
  font-size: 1.4rem;
  margin-top: 0.3rem;
}
.wpcf7-form .wpcf7-response-output {
  margin-top: 2rem;
  padding: 1rem;
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  font-size: 1.4rem;
}
.wpcf7-form .wpcf7-response-output.wpcf7-mail-sent-ok {
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
}
.wpcf7-form .wpcf7-response-output.wpcf7-validation-errors, .wpcf7-form .wpcf7-response-output.wpcf7-mail-sent-ng {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}
.wpcf7-form select {
  width: 100%;
  padding: 1rem;
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  background-color: #fff;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg fill='gray' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1rem;
  cursor: pointer;
}
.wpcf7-form select:focus {
  border-color: #0073aa;
  outline: none;
}
.wpcf7-form select::-ms-expand {
  display: none;
}
.wpcf7-form label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.1rem;
  color: #333;
}
.wpcf7-form label br {
  display: none;
}
.wpcf7-form .wpcf7-form-control-wrap {
  display: block;
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
}
.wpcf7-form input[type=date] {
  width: 100%;
  padding: 1rem;
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  background-color: #fff;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
}
.wpcf7-form input[type=date]:focus {
  border-color: #0073aa;
  outline: none;
}
.wpcf7-form select {
  width: 100%;
  padding: 1rem;
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  background-color: #fff;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg fill='gray' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1rem;
  cursor: pointer;
}
.wpcf7-form select:focus {
  border-color: #0073aa;
  outline: none;
}
.wpcf7-form .date-time-group {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  flex-wrap: wrap;
}
.wpcf7-form .date-time-group > div {
  flex: 1 1 45%;
}
@media (max-width: 600px) {
  .wpcf7-form .date-time-group {
    flex-direction: column;
  }
}

/* ==================================================
 componentフォルダ
================================================== */
/* ==================================================
 _c-button.scss
 ボタンのスタイル定義
================================================== */
.button {
  position: relative;
  margin: 0 auto;
  font-size: 1.2rem;
  font-weight: 700;
  height: 88px;
  padding-left: 3rem;
  padding-right: 3rem;
  max-width: 465px;
  width: 100%;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #6a5850;
  background-color: white;
  border: 2px solid #6a5850;
  transition: color 0.4s, background-color 0.4s, border 0.4s;
}
@media screen and (max-width: 767px) {
  .button {
    font-size: 1rem;
    width: 100%;
    height: auto;
    min-height: 44px;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
.button::after {
  transform: rotate(45deg);
  width: 0.6rem;
  height: 0.6rem;
  border-top: 3px solid #6a5850;
  border-right: 3px solid #6a5850;
  content: "";
}
.button:hover {
  background-color: #6a5850;
  color: white;
}
.button:hover::after {
  border-color: #fff;
}
.button__border {
  border: 2px solid #6a5850;
}
.button__line {
  background-color: #06c755 !important;
}
.button__accent {
  background-color: #ff8383 !important;
}
.button__label {
  position: absolute;
  width: 50%;
  top: -1rem;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 1rem;
  padding: 0.2rem 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  background-color: #ff8383;
  color: #474645;
}
@media screen and (max-width: 767px) {
  .button__label {
    padding: 0.1rem 0.6rem;
    min-width: 200px;
  }
}

.buttonBlack {
  color: #474645;
}
.buttonBlack::after {
  background-color: #474645;
}
.buttonBlack:hover {
  background-color: #474645;
}

.buttonSub {
  background-color: #d6bc81;
  border: none;
}
.buttonSub:hover {
  background-color: #474645;
}

.buttonLine {
  color: #06c755;
  border: 2px solid #06c755;
}
.buttonLine::after {
  border-color: #06c755;
}
.buttonLine:hover {
  background-color: #06c755;
}

.icon-before-line::before {
  content: "";
  display: inline-block;
  width: 1.3em;
  height: 1.3em;
  background-image: url(../../images/line_icon.png);
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 0.2em;
  vertical-align: middle;
  transition: all 0.4s;
}

.icon-before-tel::before {
  content: "";
  display: inline-block;
  width: 1.3em;
  height: 1.3em;
  background-image: url(../../images/icon_tel_white.svg);
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 0.2em;
  vertical-align: middle;
  transition: all 0.4s;
}

/* ==================================================
 _c-profCard.scss
 カードのスタイル定義
================================================== */
.profCard {
  width: 100%;
  position: relative;
}
.profCard:after {
  content: "";
  position: absolute;
  top: 20%;
  left: 0;
  width: 100%;
  height: 80%;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
  pointer-events: none;
  z-index: -1;
}
.profCard__img {
  width: 100%;
}
.profCard__wrap {
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  row-gap: 1.5rem;
  background-color: white;
}
@media screen and (max-width: 767px) {
  .profCard__wrap {
    padding: 1rem 0.5rem;
  }
}
.profCard__wrap-name {
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #6a5850;
}
.profCard__wrap-name-group {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.profCard__sns {
  display: flex !important;
  justify-content: flex-end;
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
}
.profCard__tag {
  background-color: #ff8383;
  padding: 0.1rem 1.2rem;
  border-radius: 1rem;
  margin-right: 0.5rem;
}
@media screen and (max-width: 767px) {
  .profCard__tag {
    padding: 0.1rem 0.6rem;
  }
}
.profCard__button {
  width: 100%;
}

/* ==================================================
 _c-studioCard.scss
 カードのスタイル定義
================================================== */
.studioCard {
  width: 100%;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
  border-radius: 1rem;
}
.studioCard__img {
  width: 100%;
}
.studioCard__img img {
  border-radius: 1rem 1rem 0 0;
}
.studioCard__wrap {
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  row-gap: 1.5rem;
  background-color: white;
  border-radius: 1rem;
}
.studioCard__wrap-name {
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #6a5850;
}
.studioCard__tag {
  background-color: #ff8383;
  padding: 0.1rem 1.2rem;
  border-radius: 1rem;
  margin-right: 0.5rem;
}
.studioCard__button {
  width: 100%;
}

/* ==================================================
 _c-faqDrower.scss
 カードのスタイル定義
================================================== */
.faqDrower {
  border-radius: 0.5rem;
  margin-bottom: 1.5rem;
  overflow: hidden;
  background-color: #474645;
}
.faqDrower summary {
  cursor: pointer;
  padding: 2rem 3rem 2rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
}
.faqDrower summary::marker {
  display: none;
  content: "";
}
.faqDrower summary::after {
  content: "＋";
  font-size: 1.2rem;
  position: absolute;
  right: 1.5rem;
  transition: transform 0.3s ease;
}
.faqDrower[open] summary::after {
  content: "－";
  transform: rotate(0deg);
}
.faqDrower summary span {
  flex-shrink: 0;
}
.faqDrower div {
  padding: 2rem 1.5rem 2.5rem;
  background-color: #f7f7f7;
}
.faqDrower div span {
  display: inline-block;
  margin-bottom: 0.5rem;
}

/* ==================================================
 _c-sns.scss
 SNSアイコンのスタイル定義
================================================== */
.sns__icon {
  height: 100%;
  width: auto;
  background-size: contain;
  background-repeat: no-repeat;
  aspect-ratio: 1/1;
  display: block;
}
.sns__icon-x {
  background-image: url("../../images/icon-x.svg");
}
.sns__icon-fb {
  background-image: url("../../images/icon-fb.svg");
}
.sns__icon-ig {
  background-image: url("../../images/icon-ig.svg");
}
.sns__icon-ig-black {
  background-image: url("../../images/icon-ig-black.svg");
}
.sns__icon-line {
  background-image: url("../../images/icon-line.svg");
}
.sns__icon-line-black {
  background-image: url("../../images/icon-line-black.svg");
}
.sns__icon-small {
  width: 1rem;
  height: 1rem;
}
.sns__icon-regular {
  width: 1.5rem;
  height: 1.5rem;
}
@media screen and (max-width: 767px) {
  .sns__icon-regular {
    width: 1rem;
    height: 1rem;
  }
}
.sns__icon-medium {
  width: 2rem;
  height: 2rem;
}
@media screen and (max-width: 767px) {
  .sns__icon-medium {
    width: 1.5rem;
    height: 1.5rem;
  }
}

/* ==================================================
 _c-fixButton.scss
 ボタンのスタイル定義
================================================== */
.fixButton {
  margin-right: 1rem;
  width: 360px;
  position: sticky;
  z-index: 10;
  top: 85%;
  left: 100%;
}
@media screen and (max-width: 767px) {
  .fixButton {
    width: 90%;
    margin: 0 auto;
    left: 0;
  }
}

/* ==================================================
 _c-studioCard.scss
 カードのスタイル定義
================================================== */
.numCard {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 48px 0 0 0;
}
@media screen and (max-width: 1024px) {
  .numCard {
    flex-direction: column;
    row-gap: 1rem;
  }
}
@media screen and (max-width: 1024px) {
  .numCard {
    padding: 32px 0 0 0;
  }
}
.numCard__txt {
  width: 55%;
  display: flex;
  flex-direction: column;
  row-gap: 1.2rem;
}
@media screen and (max-width: 1024px) {
  .numCard__txt {
    width: 100%;
    row-gap: 1rem;
  }
}
.numCard__txt-wrap {
  display: flex;
  -moz-column-gap: 1.2rem;
       column-gap: 1.2rem;
  align-items: center;
}
.numCard__txt-num {
  font-size: calc(clamp(1.25rem, 1.083rem + 0.83vw, 1.75rem) * 2.4);
  line-height: 1;
  letter-spacing: -0.01em;
  color: #6a5850;
}
.numCard__img {
  width: 40%;
}
@media screen and (max-width: 1024px) {
  .numCard__img {
    width: 100%;
  }
}
.numCard__img img {
  border-radius: 1rem;
}
.numCard__wrap {
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  row-gap: 1.5rem;
  background-color: white;
  border-radius: 1rem;
}
.numCard__wrap-name {
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #6a5850;
}
.numCard__tag {
  background-color: #ff8383;
  padding: 0.1rem 1.2rem;
  border-radius: 1rem;
  margin-right: 0.5rem;
}
.numCard__button {
  width: 100%;
}

/* ==================================================
 _c-linkButton.scss
 ボタンのスタイル定義
================================================== */
.linkButton {
  transition: all 0.3s;
}
.linkButton:hover {
  opacity: 0.6;
}
.linkButton p {
  display: inline-block;
  padding-bottom: 0.2rem;
}

/* ==================================================
 _c-acsessBlock.scss
 カードのスタイル定義
================================================== */
.acsessBlock__wrap {
  display: flex;
  justify-content: space-between;
  -moz-column-gap: 2rem;
       column-gap: 2rem;
}
@media screen and (max-width: 1024px) {
  .acsessBlock__wrap {
    flex-direction: column-reverse;
    row-gap: 2rem;
  }
}
.acsessBlock__table {
  width: 45%;
}
@media screen and (max-width: 1024px) {
  .acsessBlock__table {
    width: 100%;
  }
}
.acsessBlock__table tr {
  padding: 1rem 0;
  display: flex;
  border-bottom: 0.5px solid #474645;
  width: 100%;
}
.acsessBlock__table tr:first-child {
  padding: 0 0 1rem 0;
}
.acsessBlock__table tr:last-child {
  border-bottom: none;
  padding: 1rem 0 0 0;
}
.acsessBlock__table th {
  width: 35%;
}
.acsessBlock__table td {
  width: 65%;
}
.acsessBlock__img {
  width: 55%;
}
@media screen and (max-width: 1024px) {
  .acsessBlock__img {
    width: 100%;
  }
}
.acsessBlock__sns {
  display: flex;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
  align-items: flex-end;
  justify-content: flex-end;
}
.acsessBlock__sns li {
  transition: 0.4s;
}
.acsessBlock__sns li:hover {
  opacity: 0.8;
}
.acsessBlock__button {
  width: 100%;
}
@media screen and (max-width: 767px) {
  .acsessBlock__button {
    width: 85%;
    margin: 0 auto;
  }
}

/* ==================================================
 _breadcrumb.scss
 パンくずリストのスタイル定義
================================================== */
.breadcrumb {
  background-color: #f7f7f7;
  padding: 1rem 0;
}
.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  gap: 0.5em;
  padding: 0;
}
.breadcrumb__item {
  position: relative;
}
.breadcrumb__item::after {
  content: ">";
  margin: 0 0.5em;
  color: #aaa;
}
.breadcrumb__item:last-child::after {
  content: "";
  margin: 0;
}
.breadcrumb__item a {
  color: #6a5850;
  text-decoration: none;
}
.breadcrumb__item a:hover {
  text-decoration: underline;
}

/* ==================================================
 _c-studioCard.scss
 カードのスタイル定義
================================================== */
.commonCard {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: space-between;
  -moz-column-gap: 3rem;
       column-gap: 3rem;
}
@media screen and (max-width: 1024px) {
  .commonCard {
    -moz-column-gap: 2rem;
         column-gap: 2rem;
  }
}
@media screen and (max-width: 767px) {
  .commonCard {
    flex-direction: column-reverse;
    row-gap: 1rem;
  }
}
.commonCard__txt {
  width: 55%;
  display: flex;
  flex-direction: column;
  row-gap: 1.5rem;
}
@media screen and (max-width: 1024px) {
  .commonCard__txt {
    width: 100%;
    row-gap: 1rem;
  }
}
.commonCard__img {
  width: 45%;
}
@media screen and (max-width: 1024px) {
  .commonCard__img {
    width: 100%;
  }
}
.commonCard__img img {
  border-radius: 1rem;
}

/* ==================================================
 _c-contactStudio.scss
 カードのスタイル定義
================================================== */
.contactStudio {
  padding-top: 8rem;
  padding-bottom: 8rem;
  background-color: #474645;
}
@media screen and (max-width: 767px) {
  .contactStudio {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
.contactStudio__wrap {
  display: flex;
  justify-content: center;
  -moz-column-gap: 2rem;
       column-gap: 2rem;
}
@media screen and (max-width: 767px) {
  .contactStudio__wrap {
    flex-direction: column;
    row-gap: 1rem;
  }
}

/* ==================================================
 _c-addLine.scss
 カードのスタイル定義
================================================== */
.addLine {
  max-width: 800px;
  margin: 0 auto;
  transition: all 0.3s;
}
.addLine:hover {
  opacity: 0.8;
}
.addLine__wrap {
  background-color: white;
  border: 3px solid #06c755;
  padding: 1rem 1.5rem;
  position: relative;
  display: flex;
  justify-content: flex-start;
  -moz-column-gap: 2rem;
       column-gap: 2rem;
}
@media screen and (max-width: 1024px) {
  .addLine__wrap {
    -moz-column-gap: 1rem;
         column-gap: 1rem;
  }
}
@media screen and (max-width: 767px) {
  .addLine__wrap {
    padding: 0.5rem 1rem;
  }
}
.addLine__wrap-img {
  width: 66px;
  height: 87px;
  -o-object-fit: contain;
     object-fit: contain;
}
.addLine__link {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 5px 60px;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .addLine__link {
    padding: 5px 40px;
  }
}
.addLine__link span {
  position: relative;
}
.addLine__link:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  border-bottom: 50px solid #06c755;
  border-left: 40px solid transparent;
  z-index: 0;
}
.addLine__link::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 12px;
  border-top: 6px solid transparent;
  border-left: 12px solid #fff;
  border-bottom: 6px solid transparent;
}

/* ==================================================
 _c-slideInterior.scss
 カードのスタイル定義
================================================== */
.slideInterior {
  width: 100%;
}
.slideInterior .swiper-slide img {
  border-radius: 1rem;
  max-height: 400px;
  width: 100%;
  height: 100%;
}
.slideInterior__button {
  padding-top: 2rem;
  padding-bottom: 2rem;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  -moz-column-gap: 4rem;
       column-gap: 4rem;
}
@media screen and (max-width: 767px) {
  .slideInterior__button {
    -moz-column-gap: 1rem;
         column-gap: 1rem;
  }
}
.slideInterior__button .swiper-pagination {
  position: relative;
  display: inline-block;
  width: auto;
  height: 3px;
  bottom: auto;
  top: auto;
  left: auto;
  line-height: 1;
}
.slideInterior__button .swiper-pagination-bullet {
  width: 1.6rem;
  height: 3px;
  cursor: pointer;
  vertical-align: top;
  background-color: white;
  border-radius: 0;
}
.slideInterior__button .swiper-pagination-bullet-active {
  width: 4rem;
  background-color: white;
}
.slideInterior__button .swiper-button-next::after,
.slideInterior__button .swiper-button-prev::after {
  display: none;
}
.slideInterior__button .swiper-button-prev,
.slideInterior__button .swiper-button-next {
  content: "";
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  width: 62px;
  height: 62px;
  min-width: 62px;
  min-height: 62px;
  background-size: 15px auto;
  border-radius: 50%;
  border: 1.5px solid white;
  background-repeat: no-repeat;
  background-position: center center;
  transition: background-color 0.4s, background-position 0.4s;
}
.slideInterior__button .swiper-button-prev:hover,
.slideInterior__button .swiper-button-next:hover {
  background-color: white;
}
@media screen and (max-width: 767px) {
  .slideInterior__button .swiper-button-prev,
  .slideInterior__button .swiper-button-next {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
  }
}
.slideInterior__button .swiper-button-next {
  background-image: url("../../images/icon-right.svg");
  margin: 0 auto 0 0;
}
.slideInterior__button .swiper-button-next:hover {
  background-image: url("../../images/icon-right_main.svg");
}
.slideInterior__button .swiper-button-prev {
  background-image: url("../../images/icon-left.svg");
  margin: 0 0 0 auto;
}
.slideInterior__button .swiper-button-prev:hover {
  background-image: url("../../images/icon-left_main.svg");
}

/* ==================================================
 _c-nextpostButton.scss
 カードのスタイル定義
================================================== */
.nextpostButton {
  width: 80%;
  display: flex;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
  justify-content: center;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 2rem auto;
}
@media screen and (max-width: 1024px) {
  .nextpostButton {
    width: 80%;
  }
}
@media screen and (max-width: 767px) {
  .nextpostButton {
    width: 90%;
  }
}
.nextpostButton li {
  width: 100%;
  text-align: center;
}
.nextpostButton a {
  text-align: center;
  display: inline-block;
  width: 100%;
  height: 100%;
  padding: 1rem 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: #474645;
  background-color: white;
  border: 1px solid #474645;
  border-radius: 5px;
  text-decoration: none;
  transition: background-color 0.3s ease-in-out;
  position: relative;
}
.nextpostButton a:hover {
  background-color: #474645;
  color: white;
}
.nextpostButton__next::after {
  content: "";
  width: 6px;
  height: 6px;
  border: 0;
  border-top: solid 2px;
  border-right: solid 2px;
  border-color: #474645;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  left: 90%;
  bottom: 0;
  margin: auto;
}
.nextpostButton__next:hover::after {
  border-color: white;
}
.nextpostButton__prev::after {
  content: "";
  width: 6px;
  height: 6px;
  border: 0;
  border-bottom: solid 2px;
  border-left: solid 2px;
  border-color: #474645;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  right: 90%;
  bottom: 0;
  margin: auto;
}
.nextpostButton__prev:hover::after {
  border-color: white;
}

/* ==================================================
 _c-studioCard.scss
 カードのスタイル定義
================================================== */
.pagination {
  text-align: center;
  margin: 2em 0;
}
.pagination ul {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5em;
  padding: 0;
  list-style: none;
}
.pagination li a,
.pagination li span {
  display: inline-block;
  padding: 0.5em 0.9em;
  border: 1px solid #ccc;
  color: #333;
  text-decoration: none;
  font-weight: 500;
  border-radius: 4px;
  transition: all 0.2s ease-in-out;
}
.pagination li a:hover,
.pagination li span:hover {
  background-color: #333;
  color: #fff;
  border-color: #333;
}
.pagination li .current {
  background-color: #000;
  color: #fff;
  pointer-events: none;
}

/* ==================================================
 _c-tabTable.scss
 カードのスタイル定義
================================================== */
.tabTable {
  display: flex;
  flex-wrap: wrap;
  margin: 20px auto;
}
.tabTable::after {
  content: "";
  width: 100%;
  height: 3px;
  background: #d6bc81;
  display: block;
  order: -1;
}
.tabTable__switch {
  display: none;
}
.tabTable__switch:checked + .tabTable__label {
  background: #d6bc81;
}
.tabTable__switch:checked + .tabTable__label + .tabTable__content {
  height: auto;
  overflow: auto;
  padding: 1rem;
  opacity: 1;
  transition: 0.5s opacity;
}
.tabTable__label {
  color: #2c2c2c;
  font-weight: bold;
  white-space: nowrap;
  text-align: center;
  padding: 10px 0.5em;
  order: -1;
  position: relative;
  z-index: 1;
  cursor: pointer;
  flex: 1;
}
.tabTable__label:not(:last-of-type) {
  margin-right: 5px;
}
.tabTable__content {
  width: 100%;
  height: 0;
  overflow: hidden;
  opacity: 0;
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
}
.tabTable__grid {
  display: flex;
  justify-content: center;
  -moz-column-gap: 2rem;
       column-gap: 2rem;
  border-radius: 2rem;
  background: #fff;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  padding: 2rem 3rem;
}
@media screen and (max-width: 767px) {
  .tabTable__grid {
    flex-direction: column;
    row-gap: 1rem;
    padding: 2rem 1.5rem;
  }
}
.tabTable__img {
  width: 45%;
}
@media screen and (max-width: 767px) {
  .tabTable__img {
    width: 100%;
  }
}
.tabTable__img img {
  width: 100%;
}
.tabTable__text {
  width: 55%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  row-gap: 1rem;
}
@media screen and (max-width: 767px) {
  .tabTable__text {
    width: 100%;
  }
}

/* ==================================================
 _c-followButton.scss
 ボタンのスタイル定義
================================================== */
.followButton {
  margin-right: 1rem;
  width: 360px;
  position: fixed;
  z-index: 10;
  bottom: 24px;
  right: 0;
}
@media screen and (max-width: 767px) {
  .followButton {
    width: 90%;
    margin: 0 auto;
    left: 0;
  }
}
.followButton__label {
  width: 60%;
}

/* ==================================================
 _about.scss
 アバウトエリアのスタイル定義
================================================== */
.commonBlocK {
  padding-top: 6rem;
  padding-bottom: 6rem;
}
@media screen and (max-width: 767px) {
  .commonBlocK {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
.commonBlocK.backcolor {
  background-color: #efefef;
}
.commonBlocK.title-head {
  background-image: url("../../images//service-back.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}
.commonBlocK__wrap {
  display: flex;
  justify-content: center;
  -moz-column-gap: 2rem;
       column-gap: 2rem;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .commonBlocK__wrap {
    flex-direction: column;
    row-gap: 1rem;
  }
}
.commonBlocK__wrap.reverse {
  flex-direction: row-reverse;
}
@media screen and (max-width: 767px) {
  .commonBlocK__wrap.reverse {
    flex-direction: column-reverse;
  }
}
.commonBlocK__img {
  width: 50%;
}
@media screen and (max-width: 767px) {
  .commonBlocK__img {
    width: 100%;
  }
}
.commonBlocK__text {
  width: 50%;
}
@media screen and (max-width: 767px) {
  .commonBlocK__text {
    width: 100%;
  }
}

/* ==================================================
 _about.scss
 アバウトエリアのスタイル定義
================================================== */
.menuBlocK__wrap {
  display: flex;
  justify-content: center;
  -moz-column-gap: 2rem;
       column-gap: 2rem;
  align-items: flex-start;
}
@media screen and (max-width: 767px) {
  .menuBlocK__wrap {
    flex-direction: column;
    row-gap: 1rem;
  }
}
.menuBlocK__img {
  width: 50%;
}
@media screen and (max-width: 767px) {
  .menuBlocK__img {
    width: 100%;
  }
}
.menuBlocK__text {
  width: 50%;
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
}
@media screen and (max-width: 767px) {
  .menuBlocK__text {
    width: 100%;
  }
}
.menuBlocK__table {
  border: 1px solid #ccc;
  display: table;
  width: 100%;
  border-collapse: collapse;
}
.menuBlocK__table-row {
  display: table-row;
}
.menuBlocK__table-label {
  background: #6a5850;
  color: #fff;
  width: 40%;
  text-align: center;
  display: table-cell;
  padding: 0.5rem 0.75rem;
  border-top: 1px solid #ccc;
  vertical-align: middle;
}
.menuBlocK__table-value {
  text-align: right;
  display: table-cell;
  padding: 0.5rem 0.75rem;
  border-top: 1px solid #ccc;
  vertical-align: middle;
}

/* ==================================================
 _c-studioCard.scss
 カードのスタイル定義
================================================== */
.serviceCard {
  width: 100%;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
  border-radius: 1rem;
  background-color: white;
}
.serviceCard__img {
  width: 100%;
}
.serviceCard__img img {
  border-radius: 1rem 1rem 0 0;
}
.serviceCard__wrap {
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  row-gap: 1.5rem;
  background-color: white;
  border-radius: 1rem;
}
.serviceCard__wrap-name {
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #6a5850;
}
.serviceCard__link {
  color: #ff8383;
}
.serviceCard__link a {
  border-bottom: 1px solid #ff8383;
}

/*
@use "component/table";
@use "component/link";
@use "component/description";
@use "component/card";
@use "component/blog-card";
*//*# sourceMappingURL=style.css.map */