@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: #3f4041;
}

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

.font-main {
  color: #26abe3;
}

.font-accent {
  color: #fdd22b;
}

.font-sub {
  color: #8fc31f;
}

.font-fc-primary {
  color: #4095c6;
}

/* ==================================================
 テキストシャドウ
================================================== */
/* ベーシックな黒シャドウ（汎用） */
.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 JP", sans-serif;
  font-weight: 500;
  line-height: 1.7;
  text-align: justify;
  margin: 0;
  padding: 0;
  color: #3f4041;
  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;
}

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%);
}

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

.border-bt-main {
  border-bottom: 1px solid #26abe3;
}

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

.border-main {
  border-color: #26abe3 !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;
}

.border-left-main {
  border-left: solid 5px #26abe3;
  padding-left: 0.4em;
  line-height: 1;
}

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

.bgcolor-white {
  background-color: white;
}

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

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

.bgcolor-p1 {
  background-color: #90be6d;
}

.bgcolor-p2 {
  background-color: #e9c46a;
}

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

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

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

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

.titleBlock::before {
  content: "";
  border-left: solid 5px #26abe3;
  padding-left: 0.4em;
  line-height: 1;
}

.titleUnder {
  display: inline-block;
  position: relative;
}
.titleUnder::before {
  content: "";
  display: inline-block;
  margin: 0 auto;
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background-color: #26abe3;
}

/* 先頭に●を付ける（左寄せ用） */
.titleCircle {
  position: relative;
  padding-left: calc(0.6em + 0.6em);
}
.titleCircle::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: #26abe3;
}
.titleCircle-center {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding-left: 0;
}
.titleCircle-center::before {
  content: "";
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: #26abe3;
}

.bunner {
  width: 50%;
  margin: 0 auto;
  transition: all 0.3s;
}
@media screen and (max-width: 767px) {
  .bunner {
    width: 100%;
  }
}
.bunner img {
  border-radius: 0.5rem;
}
.bunner:hover {
  opacity: 0.8;
}

/* ==================================================
 _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: white;
  color: #3f4041;
  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: #26abe3;
}
.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: #3f4041;
  transition: 0.8s;
}
.header__nav .sub-menu li:hover {
  background-color: #26abe3;
}
.header__nav .sub-menu li a {
  padding: 1em;
}
.header__button {
  border: solid 1px #3f4041;
  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.5rem;
  height: 1.5rem;
  background-size: contain;
  background-image: url("../../images/icon_person.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: #26abe3;
  border: solid 1px white;
  color: white;
}
.header__button:hover::before {
  background-image: url("../../images/icon_person_white.svg");
}
.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: #26abe3;
  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: #3f4041;
}
.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: #26abe3;
}
.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: #26abe3;
  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: 100%;
  max-width: 300px;
  margin: 0 auto;
}
.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;
}
.mobileMenu__mypage {
  padding-top: 3rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  color: white;
  width: 100%;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid white;
  position: relative;
  letter-spacing: 0.48px;
}
.mobileMenu__mypage::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__mypage div {
  position: relative;
}
.mobileMenu__mypage div::before {
  content: "";
  width: 2rem;
  height: 2rem;
  padding-right: 0.5rem;
  background-size: contain;
  background-image: url("../../images/icon_person_white.svg");
  background-repeat: no-repeat;
  background-position: center center;
}
.mobileMenu__mypage div {
  display: flex;
  align-items: center;
}

.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;
}
@media screen and (max-width: 1024px) {
  .hero {
    height: auto;
  }
}
.hero__container {
  padding-top: 80px;
  height: 100%;
  width: 100%;
  position: relative;
}
.hero__container h2 {
  text-align: right;
  color: white;
  margin-right: 1rem;
}
@media screen and (max-width: 767px) {
  .hero__container h2 {
    margin-right: 0.25rem;
  }
}
.hero__subcopy {
  position: absolute;
  top: 100px;
  right: 0;
  z-index: 3;
}
@media screen and (max-width: 767px) {
  .hero__subcopy {
    top: 90px;
  }
}
.hero__copy-pc {
  position: absolute;
  top: 120px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  width: 100%;
  z-index: 2;
}
@media screen and (max-width: 767px) {
  .hero__copy-pc {
    display: none;
  }
}
.hero__copy-pc h3 {
  letter-spacing: 2px;
}
.hero__copy-pc img {
  width: 35%;
}
@media screen and (max-width: 1024px) {
  .hero__copy-pc img {
    width: 50%;
  }
}
@media screen and (max-width: 767px) {
  .hero__copy-pc img {
    width: 80%;
  }
}
.hero__copy-sp {
  display: none;
}
@media screen and (max-width: 767px) {
  .hero__copy-sp {
    display: block;
    position: absolute;
    top: 130px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: 90%;
    z-index: 2;
  }
}
.hero__reserve {
  width: 100%;
}
.hero__main {
  width: 100%;
  height: 100%;
}
.hero__main-pc {
  width: 100%;
  height: 100%;
  position: relative;
  display: block;
  background-image: url("../../images//hero_wide.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
@media screen and (max-width: 1024px) {
  .hero__main-pc {
    display: none;
  }
}
.hero__main-sp {
  display: none;
  height: 100%;
}
@media screen and (max-width: 1024px) {
  .hero__main-sp {
    width: 100%;
    height: 450px;
    display: block;
    position: relative;
    background-image: url("../../images//hero.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
  }
}
.hero__main-wrap {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  row-gap: 1.5rem;
  align-items: center;
}
.hero__main-wrap h3 {
  text-shadow: 2px 5px 10px rgba(0, 0, 0, 0.9);
}
.hero__main-wrap p {
  text-shadow: 2px 5px 10px rgba(0, 0, 0, 0.9);
}
@media screen and (max-width: 767px) {
  .hero__main-wrap {
    padding: 0 0.1rem;
    row-gap: 1rem;
    transform: translate(-50%, -70%);
  }
}
.hero__main-block {
  background-color: white;
  padding: 0.5rem 2rem;
  border-radius: 0.2rem;
}
@media screen and (max-width: 767px) {
  .hero__main-block {
    padding: 0.5rem 0.5rem;
  }
}
.hero__main-bottom {
  display: flex;
  align-items: flex-end;
  height: 100%;
  width: 100%;
}

/* ==================================================
 _about.scss
 アバウトエリアのスタイル定義
================================================== */
.about {
  position: relative;
  padding-top: 5rem;
  padding-bottom: 5rem;
}
@media screen and (max-width: 767px) {
  .about {
    padding-top: 2rem;
    padding-bottom: 3rem;
  }
}
.about__container {
  display: flex;
  -moz-column-gap: 3rem;
       column-gap: 3rem;
  justify-content: flex-end;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .about__container {
    flex-direction: column;
    row-gap: 2rem;
  }
}
.about__copy {
  width: 50%;
  display: flex;
  flex-direction: column;
  row-gap: 1.5rem;
}
@media screen and (max-width: 767px) {
  .about__copy {
    width: 100%;
  }
}
.about__copy h2 {
  line-height: 1.5;
  letter-spacing: 2px;
}
.about__copy img {
  width: 50%;
}
.about__img {
  width: 50%;
}
@media screen and (max-width: 767px) {
  .about__img {
    width: 100%;
  }
}
.about__img p {
  line-height: 2.5;
}
@media screen and (max-width: 767px) {
  .about__img p {
    line-height: 2;
  }
}
.about__back {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 150px;
}
.about__back-text {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  opacity: 0.08;
}
.about__loop {
  display: flex;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  height: auto;
}
.about__loop li:nth-child(2n) {
  padding-top: 2rem;
}
.about__message {
  position: absolute;
  top: -2rem;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  opacity: 0.1;
}
@media screen and (max-width: 767px) {
  .about__message {
    top: -3rem;
  }
}

/* ==================================================
 _news-list.scss
 ニュースエリアのスタイル定義
================================================== */
.newslist {
  padding-top: 8rem;
  padding-bottom: 8rem;
  background-color: #8fc31f;
}
@media screen and (max-width: 767px) {
  .newslist {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
.newslist__headding {
  display: flex;
  flex-direction: column;
  row-gap: 0.2rem;
  letter-spacing: 0.1rem;
}
.newslist__item {
  border-bottom: 0.5px solid #f7f7f7;
  position: relative;
}
.newslist__item:first-child {
  border-top: 0.5px solid #f7f7f7;
}
.newslist__item::after {
  content: "";
  width: 6px;
  height: 6px;
  border: 0;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  right: 2rem;
  bottom: 0;
  margin: auto;
}
@media screen and (max-width: 767px) {
  .newslist__item::after {
    right: 6px;
  }
}
.newslist__item-wrap {
  padding: 1rem 2rem;
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  -moz-column-gap: 2rem;
       column-gap: 2rem;
  transition: 0.8s;
}
@media screen and (max-width: 1024px) {
  .newslist__item-wrap {
    flex-direction: column;
    row-gap: 0.5rem;
  }
}
@media screen and (max-width: 767px) {
  .newslist__item-wrap {
    padding: 1rem 0;
  }
}
.newslist__item-wrap:hover {
  background-color: #26abe3;
}
.newslist__item-group {
  display: flex;
  justify-content: flex-start;
  -moz-column-gap: 2rem;
       column-gap: 2rem;
  align-items: baseline;
}
@media screen and (max-width: 767px) {
  .newslist__item-group {
    -moz-column-gap: 1rem;
         column-gap: 1rem;
  }
}
.newslist__item-group span {
  background-color: #3f4041;
  padding: 0.2rem 0.6rem;
  border-radius: 0.5rem;
}
.newslist__button {
  width: 40%;
  margin: 0 auto;
}
@media screen and (max-width: 1024px) {
  .newslist__button {
    width: 100%;
  }
}

/* ==================================================
 _point.scss
 シミュレーションゴルフのスタイル定義
================================================== */
.point {
  padding-top: 10rem;
  padding-bottom: 8rem;
  position: relative;
  z-index: 1;
  overflow-y: hidden;
  overflow-x: hidden;
}
@media screen and (max-width: 767px) {
  .point {
    padding-top: 7.5rem;
    padding-bottom: 4rem;
  }
}
.point:before {
  content: "";
  position: absolute;
  top: 0;
  left: -50%;
  right: -50%;
  aspect-ratio: 1/1;
  background-color: #8fc31f;
  border-radius: 50%;
  z-index: -2;
}
.point:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 25.64103vw;
  bottom: 0;
  background-color: #8fc31f;
  z-index: -1;
}
.point__lead {
  display: flex;
  justify-content: center;
  -moz-column-gap: 2rem;
       column-gap: 2rem;
}
@media screen and (max-width: 767px) {
  .point__lead {
    flex-direction: column;
    row-gap: 1rem;
    align-items: center;
  }
}
.point__lead-circle {
  aspect-ratio: 1/1; /* 正円を維持 */
  width: clamp(200px, 50vw, 280px); /* 可変幅：最小160px～最大280px */
  border-radius: 50%;
  background: #f8f8f8;
  color: #3f4041;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1.2rem;
  align-content: center;
}
@media screen and (max-width: 767px) {
  .point__lead-circle {
    width: clamp(160px, 100vw, 280px); /* 可変幅：最小160px～最大280px */
  }
}
.point__lead-circle:first-child {
  border: solid 5px #26abe3;
}
.point__lead-circle:last-child {
  border: solid 5px #fdd22b;
}
.point__lead-circle h3 {
  margin: 0 0 0.3rem;
}
.point__lead-circle p {
  margin: 0;
}
.point__main {
  display: flex;
  flex-direction: column;
  row-gap: 3rem;
  align-items: center;
}
.point__main-title {
  background-color: white;
  padding: 0 2rem;
  display: inline-block;
  border-radius: 0.1rem;
}
.point__block {
  display: flex;
  justify-content: space-between;
  -moz-column-gap: 4rem;
       column-gap: 4rem;
  background-color: white;
  border-radius: 1rem;
  padding: 2.5rem 4rem;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .point__block {
    flex-direction: column-reverse;
    row-gap: 1.5rem;
    padding: 2.5rem 1rem;
  }
}
.point__block-label {
  background-color: #26abe3;
  border-radius: 999px;
  padding: 0.5rem 4rem;
  display: inline-block;
}
.point__block-img {
  width: 50%;
}
@media screen and (max-width: 767px) {
  .point__block-img {
    width: 100%;
  }
}
.point__block-img img {
  border-radius: 1rem;
}
.point__block-wrap {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  row-gap: 1rem;
  align-items: flex-start;
}
@media screen and (max-width: 767px) {
  .point__block-wrap {
    width: 100%;
    row-gap: 1.5rem;
  }
}
.point__button {
  width: 100%;
  margin: 0 auto;
}
@media screen and (max-width: 1024px) {
  .point__button {
    width: 100%;
  }
}

/* ==================================================
 _price.scss
 料金エリアのスタイル定義（SP時：thead=3列Grid／tbodyは th=1行 + td=3列）
================================================== */
.price {
  padding-top: 8rem;
  padding-bottom: 8rem;
}
@media screen and (max-width: 767px) {
  .price {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
.price__wrap {
  display: flex;
  flex-direction: column;
  row-gap: 3rem;
  align-items: center;
  justify-content: space-between;
}
.price__button {
  width: 100%;
}
.price__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 2px solid #7d7d7d;
  border-radius: 12px;
  /* セル共通 */
  /* 見出し */
  /* おすすめバッジ */
  /* 四隅の角丸（PCテーブル時） */
  /* ===== ヘッダー各プラン色（PC/タブ共通） ===== */
  /* ===== ボディ ===== */
  /* おすすめ列（3列目＝DOM上の3番目セル）を薄色で強調 */
  /* 1列目（theadの空白ヘッダ）は控えめ */
  /* =========================================
     SP：thead=3列Grid、tbodyは
         1段目 th（全幅）、2段目 td×3（横並び）
     ========================================= */
}
.price__table thead th,
.price__table tbody th,
.price__table tbody td {
  padding: 2rem 1rem;
  border-bottom: 1px solid #7d7d7d;
  vertical-align: middle;
  background: #fff;
}
@media screen and (max-width: 767px) {
  .price__table thead th,
  .price__table tbody th,
  .price__table tbody td {
    padding: 1rem 0.5rem;
  }
}
.price__table thead th {
  text-align: center;
  background: #fafafa;
  position: relative;
  white-space: nowrap;
}
.price__table-recommend {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -35%);
  background-color: #d11b58;
  border: 2px solid white;
  border-radius: 999px;
  padding: 0.2rem 1rem;
  font-size: 0.9em;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  z-index: 3;
}
.price__table thead tr th:first-child {
  border-top-left-radius: 12px;
}
.price__table thead tr th:last-child {
  border-top-right-radius: 12px;
}
.price__table tbody tr:last-child th:first-child {
  border-bottom-left-radius: 12px;
}
.price__table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 12px;
}
.price__table thead tr th:nth-child(1) {
  width: 16%;
}
.price__table thead tr th:nth-child(2) {
  width: 28%;
  background-color: #fdd22b;
}
@media screen and (max-width: 767px) {
  .price__table thead tr th:nth-child(2) {
    width: 100%;
  }
}
.price__table thead tr th:nth-child(3) {
  width: 28%;
  background-color: #8fc31f;
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 767px) {
  .price__table thead tr th:nth-child(3) {
    width: 100%;
  }
}
.price__table thead tr th:nth-child(4) {
  width: 28%;
  background-color: #26abe3;
}
@media screen and (max-width: 767px) {
  .price__table thead tr th:nth-child(4) {
    width: 100%;
  }
}
.price__table tbody th {
  background: #f0f0f0;
  text-align: center;
  white-space: nowrap;
}
.price__table tbody td {
  text-align: center;
}
.price__table tbody td span {
  margin: 0 4px;
}
.price__table tbody tr td:nth-child(3) {
  background: #f5ffe3;
  position: relative;
  z-index: 1;
}
.price__table thead th:first-child {
  background: #fafafa;
  color: #666;
}
@media screen and (max-width: 767px) {
  .price__table {
    /* thead：空白(1列目)を非表示、3列Gridで整列 */
    /* tbody：各行をGrid化 */
    /* 行ラベル(th)は1段目で全幅 */
    /* 値(td)は2段目で3列 */
  }
  .price__table thead tr {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .price__table thead th:first-child {
    display: none;
  }
  .price__table thead th {
    /* 見た目の区切り線（任意） */
    border-right: 1px solid #7d7d7d;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .price__table thead th:last-child {
    border-right: none;
  }
  .price__table tbody tr {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid #7d7d7d;
  }
  .price__table tbody tr:last-child {
    border-bottom: none;
  }
  .price__table tbody th {
    grid-column: 1/-1;
    text-align: center;
    background: #f0f0f0;
    border-bottom: 1px solid #7d7d7d;
    padding: 0.5rem;
  }
  .price__table tbody td {
    border-left: 1px solid #7d7d7d;
  }
  .price__table tbody td:first-of-type {
    border-left: none;
  }
}

/* ==================================================
 _flow.scss
 フローのスタイル定義
================================================== */
.flow {
  padding-top: 8rem;
  padding-bottom: 8rem;
  background-color: #ebebeb;
  border-radius: 5rem 5rem 0 0;
  /* SP：縦並び → 下向き三角（↓） */
}
@media screen and (max-width: 767px) {
  .flow {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
.flow__list {
  display: flex;
  justify-content: space-between;
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}
@media screen and (max-width: 767px) {
  .flow__list {
    flex-direction: column;
    row-gap: 1.5rem;
  }
}
.flow__wrap {
  width: 25%;
  position: relative;
  margin: 1em auto;
  padding: 3em 1.5em;
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
}
@media screen and (max-width: 767px) {
  .flow__wrap {
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .flow__wrap img {
    width: 60%;
    margin: 0 auto;
  }
}
.flow__button {
  width: 80%;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .flow__button {
    width: 100%;
  }
}
.flow__list > li.flow__wrap:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translate(2rem, -100%);
  width: 0;
  height: 0;
  border-top: 1.5rem solid transparent;
  border-bottom: 1.5rem solid transparent;
  border-left: 1.5rem solid #26abe3;
  pointer-events: none;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  .flow__list > li.flow__wrap: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 #26abe3;
  }
}

/* ==================================================
 _studio.scss
 スタジオエリアのスタイル定義
================================================== */
.studio {
  padding-top: 8rem;
  padding-bottom: 8rem;
}
@media screen and (max-width: 767px) {
  .studio {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
.studio__headding {
  display: flex;
  align-items: baseline;
  line-height: 1;
  -moz-column-gap: 1.2rem;
       column-gap: 1.2rem;
  letter-spacing: 0.1rem;
}
.studio__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
  padding: 0;
  margin: 0;
  list-style: none;
}
@media screen and (max-width: 767px) {
  .studio__list {
    grid-template-columns: 1fr;
  }
}
.studio__list li {
  border-radius: 1rem;
  transition: transform 0.3s;
}
.studio__list li:hover {
  transform: translateY(-4px);
}

/* ==================================================
 _faq.scss
 FAQのスタイル定義
================================================== */
.faq {
  padding-top: 8rem;
  padding-bottom: 8rem;
}
@media screen and (max-width: 767px) {
  .faq {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
.faq__container {
  display: flex;
  flex-direction: column;
  row-gap: 3rem;
}
.faq__wrap {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
}

/* ==================================================
 _news-list.scss
 ニュースエリアのスタイル定義
================================================== */
.newsblock {
  padding-top: 4rem;
  padding-bottom: 8rem;
}
@media screen and (max-width: 767px) {
  .newsblock {
    padding-top: 2rem;
    padding-bottom: 4rem;
  }
}
.newsblock__headding {
  text-align: center;
}
.newsblock__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
  row-gap: 2rem;
}
@media screen and (max-width: 767px) {
  .newsblock__list {
    grid-template-columns: repeat(2, 1fr);
  }
}
.newsblock__item-wrap {
  display: flex;
  flex-direction: column;
  row-gap: 0.5rem;
  transition: all 0.3s;
}
.newsblock__item-wrap:hover {
  transform: translateY(-4px);
  opacity: 0.8;
}
.newsblock__item span {
  background-color: #3f4041;
  padding: 0.2rem 0.6rem;
  border-radius: 0.5rem;
}
.newsblock__button {
  width: 40%;
  margin: 0 auto;
}
@media screen and (max-width: 1024px) {
  .newsblock__button {
    width: 100%;
  }
}

/* ==================================================
 _news-list.scss
 ニュースエリアのスタイル定義
================================================== */
.columnblock {
  padding-top: 8rem;
  padding-bottom: 8rem;
}
@media screen and (max-width: 767px) {
  .columnblock {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
.columnblock__headding {
  text-align: center;
}
.columnblock__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
  row-gap: 2rem;
}
@media screen and (max-width: 767px) {
  .columnblock__list {
    grid-template-columns: repeat(2, 1fr);
  }
}
.columnblock__item-wrap {
  display: flex;
  flex-direction: column;
  row-gap: 0.5rem;
  transition: all 0.3s;
}
.columnblock__item-wrap:hover {
  transform: translateY(-4px);
  opacity: 0.8;
}
.columnblock__item span {
  background-color: #3f4041;
  padding: 0.2rem 0.6rem;
  border-radius: 0.5rem;
}
.columnblock__button {
  width: 40%;
  margin: 0 auto;
}
@media screen and (max-width: 1024px) {
  .columnblock__button {
    width: 100%;
  }
}

/* ==================================================
 _subHero.scss
スタジオページひろーのスタイル定義
================================================== */
.subHero {
  width: 100%;
  padding-top: 76px;
  background-color: #26abe3;
}
.subHero__wrap {
  padding: 4rem 0;
}
@media screen and (max-width: 767px) {
  .subHero__wrap {
    padding: 2rem 0;
  }
}

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

/* ==================================================
 _studioFlow.scss
スタジオページひろーのスタイル定義
================================================== */
.studioReserve {
  padding-top: 6rem;
  padding-bottom: 6rem;
  background-color: #8fc31f;
  position: relative;
}
@media screen and (max-width: 767px) {
  .studioReserve {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}
.studioReserve__container {
  display: flex;
  flex-direction: column;
  row-gap: 1.5rem;
}
.studioReserve__button {
  display: flex;
  flex-direction: column;
  row-gap: 0.5rem;
}

/* ==================================================
 _studioFlow.scss
スタジオページひろーのスタイル定義
================================================== */
.studioAcsess {
  padding-top: 8rem;
  position: relative;
}
@media screen and (max-width: 767px) {
  .studioAcsess {
    padding-top: 4rem;
  }
}
.studioAcsess__headding {
  display: flex;
  flex-direction: column;
  row-gap: 0.2rem;
}
.studioAcsess__map {
  width: 100%;
  height: 400px;
}
@media screen and (max-width: 767px) {
  .studioAcsess__map {
    height: 200px;
  }
}

/* ==================================================
 _studioTopix.scss
スタジオページひろーのスタイル定義
================================================== */
.studioTopix {
  padding-top: 8rem;
  padding-bottom: 4rem;
  position: relative;
}
@media screen and (max-width: 767px) {
  .studioTopix {
    padding-top: 4rem;
    padding-bottom: 2rem;
  }
}
.studioTopix__item {
  border-bottom: 0.5px solid #3f4041;
  position: relative;
}
.studioTopix__item:first-child {
  border-top: 0.5px solid #3f4041;
}
.studioTopix__item::after {
  content: "";
  width: 6px;
  height: 6px;
  border: 0;
  border-top: solid 2px #3f4041;
  border-right: solid 2px #3f4041;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  right: 2rem;
  bottom: 0;
  margin: auto;
}
@media screen and (max-width: 767px) {
  .studioTopix__item::after {
    right: 6px;
  }
}
.studioTopix__item-wrap {
  padding: 1rem 2rem;
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  -moz-column-gap: 2rem;
       column-gap: 2rem;
  transition: 0.8s;
}
@media screen and (max-width: 1024px) {
  .studioTopix__item-wrap {
    flex-direction: column;
    row-gap: 0.5rem;
  }
}
@media screen and (max-width: 767px) {
  .studioTopix__item-wrap {
    padding: 1rem 0;
  }
}
.studioTopix__item-wrap:hover {
  background-color: #26abe3;
}

/* ==================================================
 _flow.scss
 フローのスタイル定義
================================================== */
.corpMember {
  padding-top: 8rem;
  padding-bottom: 8rem;
  background-color: #ebebeb;
  border-radius: 5rem 5rem 0 0;
}
@media screen and (max-width: 767px) {
  .corpMember {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
.corpMember__list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem;
  padding: 0;
  list-style: none;
}
@media screen and (max-width: 767px) {
  .corpMember__list {
    grid-template-columns: 1fr;
  }
}

/* 
@use "module/sidenav";
*/
/* ==================================================
 pageフォルダ
================================================== */
/* ==================================================
 _flowPage.scss
 レッスンエリアのスタイル定義
================================================== */
.flowPage__flow {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
@media screen and (max-width: 767px) {
  .flowPage__flow {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}
.flowPage__wrap {
  display: flex;
  flex-direction: column;
  row-gap: 0;
}
.flowPage__box {
  width: 100%;
}
.flowPage__box__title {
  width: 100%;
  background-color: #8fc31f;
  display: flex;
  justify-content: flex-start;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
  align-items: center;
  padding: 1rem 3rem;
}
@media screen and (max-width: 767px) {
  .flowPage__box__title {
    padding: 1rem 1rem;
  }
}
.flowPage__box__contents {
  background-color: #f5ffe3;
  padding: 2rem 3rem;
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
}
@media screen and (max-width: 767px) {
  .flowPage__box__contents {
    padding: 1.5rem 1rem;
  }
}
.flowPage__box .triangle {
  content: "";
  display: block;
  width: 0;
  border: solid 2em transparent;
  border-top-color: #f5ffe3;
  margin: 0 auto;
}
.flowPage__button {
  display: flex;
  flex-direction: column;
  row-gap: 0.5rem;
}
.flowPage__info {
  padding: 1rem 2rem;
  background-color: white;
}
@media screen and (max-width: 767px) {
  .flowPage__info {
    padding: 1rem 1rem;
  }
}
.flowPage__lead {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
@media screen and (max-width: 767px) {
  .flowPage__lead {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}
.flowPage__list {
  padding-top: 4rem;
  padding-bottom: 8rem;
}
@media screen and (max-width: 767px) {
  .flowPage__list {
    padding-top: 2rem;
    padding-bottom: 4rem;
  }
}
.flowPage__list ul {
  display: flex;
  flex-direction: column;
  row-gap: 3rem;
}
.flowPage__list li {
  position: relative;
}
.flowPage__list li:not(:last-child)::after {
  content: "";
  position: absolute;
  bottom: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-top: 30px solid #7d7d7d;
}
@media screen and (max-width: 767px) {
  .flowPage__list li:not(:last-child)::after {
    bottom: -25px;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 15px solid #7d7d7d;
  }
}
.flowPage__faq {
  padding-top: 8rem;
  padding-bottom: 8rem;
  background-color: #26abe3;
}
@media screen and (max-width: 767px) {
  .flowPage__faq {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}

/* ==================================================
 _simgPage.scss
 レッスンエリアのスタイル定義
================================================== */
.simgPage__lead {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
@media screen and (max-width: 767px) {
  .simgPage__lead {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}
.simgPage__driving {
  padding-top: 4rem;
  padding-bottom: 8rem;
}
@media screen and (max-width: 767px) {
  .simgPage__driving {
    padding-top: 2rem;
    padding-bottom: 4rem;
  }
}
.simgPage__driving ul {
  display: flex;
  flex-direction: column;
  row-gap: 3rem;
}
.simgPage__round {
  padding-top: 4rem;
  padding-bottom: 8rem;
}
@media screen and (max-width: 767px) {
  .simgPage__round {
    padding-top: 2rem;
    padding-bottom: 4rem;
  }
}
.simgPage__round ul {
  display: flex;
  flex-direction: column;
  row-gap: 3rem;
}
.simgPage__round-movie {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  aspect-ratio: 16/9;
}
.simgPage__round-movie iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.simgPage__faq {
  padding-top: 8rem;
  padding-bottom: 8rem;
  background-color: #26abe3;
}
@media screen and (max-width: 767px) {
  .simgPage__faq {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}

/* ==================================================
 _page.scss
 レッスンエリアのスタイル定義
================================================== */
.page__wrap {
  display: flex;
  flex-direction: column;
  row-gap: 4rem;
}
.page__box {
  display: flex;
  justify-content: space-between;
  -moz-column-gap: 3rem;
       column-gap: 3rem;
}
@media screen and (max-width: 767px) {
  .page__box {
    flex-direction: column-reverse;
    row-gap: 1.5rem;
  }
}
.page__box-img {
  width: 45%;
}
@media screen and (max-width: 767px) {
  .page__box-img {
    width: 100%;
  }
}
.page__box-img img {
  border-radius: 1rem;
}
.page__box-txt {
  width: 55%;
  display: flex;
  flex-direction: column;
  row-gap: 0.5rem;
}
@media screen and (max-width: 767px) {
  .page__box-txt {
    width: 100%;
  }
}
.page__main {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
@media screen and (max-width: 767px) {
  .page__main {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}

/* ==================================================
 _flowPage.scss
 レッスンエリアのスタイル定義
================================================== */
.supportPage {
  padding-top: 4rem;
  padding-bottom: 8rem;
}
@media screen and (max-width: 767px) {
  .supportPage {
    padding-top: 2rem;
    padding-bottom: 4rem;
  }
}
.supportPage__lead {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
@media screen and (max-width: 767px) {
  .supportPage__lead {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}
.supportPage__list ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  padding: 0;
  margin: 0;
  list-style: none;
}
.supportPage__list li {
  border-radius: 1rem;
  transition: transform 0.3s;
}
.supportPage__list li img {
  border-radius: 1rem 1rem 0 0;
}
.supportPage__list li:hover {
  transform: translateY(-4px);
}

/* ==================================================
 _priceSimulator.scss
 レッスンエリアのスタイル定義
================================================== */
.priceSimulator {
  padding-top: 4rem;
  padding-bottom: 8rem;
}
@media screen and (max-width: 767px) {
  .priceSimulator {
    padding-top: 2rem;
    padding-bottom: 4rem;
  }
}
.priceSimulator__lead {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
@media screen and (max-width: 767px) {
  .priceSimulator__lead {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}
.priceSimulator__select label {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  cursor: pointer;
}
.priceSimulator__select label > input[type=radio] {
  -webkit-appearance: auto;
     -moz-appearance: auto;
          appearance: auto;
  position: static;
  display: inline-block;
  opacity: 1;
  width: 1.2rem;
  height: 1.2rem;
  margin-right: 0.2rem;
  accent-color: #26abe3;
}
.priceSimulator__select__container {
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
}
.priceSimulator__form {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.priceSimulator__form__group {
  background-color: white;
  padding: 2rem 2rem;
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  row-gap: 3rem;
  position: relative;
  margin-bottom: 2rem;
}
@media screen and (max-width: 767px) {
  .priceSimulator__form__group {
    padding: 2rem 0;
  }
}
.priceSimulator__form__group:last-of-type {
  margin-bottom: 0;
}
.priceSimulator__form__group:not(:last-of-type) {
  /* 下向き三角 */
}
.priceSimulator__form__group:not(:last-of-type)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1rem;
  transform: translate(-50%, 100%);
  width: 0;
  height: 0;
  border-left: 1.5rem solid transparent;
  border-right: 1.5rem solid transparent;
  border-top: 1.65rem solid #26abe3;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.06));
  pointer-events: none;
}
.priceSimulator__step {
  position: absolute;
  top: -1rem;
  left: 50%;
  transform: translateX(-50%);
  background-color: #26abe3;
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  padding: 0.5rem 2rem;
  line-height: 1;
  border-radius: 9999px;
  text-align: center;
}
.priceSimulator__list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
  row-gap: 0.5rem;
}
@media screen and (max-width: 1024px) {
  .priceSimulator__list {
    grid-template-columns: 1fr 1fr;
    -moz-column-gap: 0.5rem;
         column-gap: 0.5rem;
  }
}
.priceSimulator__wrap {
  display: flex;
  flex-direction: column;
  row-gap: 0.5rem;
  position: relative;
  padding-bottom: 2rem;
  /* 同一グループ内の最後以外に表示 */
}
.priceSimulator__wrap:not(:last-of-type) {
  border-bottom: 1px solid #8fc31f;
}
.priceSimulator__wrap:not(:last-of-type)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1rem;
  transform: translate(-50%, 0);
  width: 0;
  height: 0;
  border-left: 0.8rem solid transparent;
  border-right: 0.8rem solid transparent;
  border-top: 1rem solid #8fc31f;
  pointer-events: none;
}
.priceSimulator__label {
  cursor: pointer;
  border: 1px solid #bfbfbf;
  border-radius: 0.5rem;
  background-color: white;
  padding: 0.8rem 1rem;
}
.priceSimulator__label:has(> input[type=radio]:checked) {
  border: 3px solid #26abe3;
}

/* カード */
.ps-card {
  background: white;
  border-radius: 1rem;
}
.ps-card__head {
  background-color: #26abe3;
  padding: 1rem 0;
  border-radius: 1rem 1rem 0 0;
}
.ps-card__body {
  padding: 2rem 2rem;
  display: flex;
  flex-direction: column;
  row-gap: 3rem;
}
@media screen and (max-width: 767px) {
  .ps-card__body {
    padding: 2rem 0;
  }
}
.ps-card__recommend {
  padding: 1.8rem 2rem;
  background-color: #fdd22b;
  position: relative;
}
@media screen and (max-width: 767px) {
  .ps-card__recommend {
    padding: 1.8rem 0;
  }
}
.ps-card__recommend-label {
  position: absolute;
  top: -1.2rem;
  left: 50%;
  transform: translateX(-50%);
  background-color: white;
  border: 5px solid #fdd22b;
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  padding: 0.5rem 2rem;
  line-height: 1;
  border-radius: 9999px;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .ps-card__recommend-label {
    width: 90%;
  }
}

/* セクション */
.ps-section {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
}

.ps-section__title {
  border-left: 5px solid #26abe3;
  padding: 0.1em 1em;
}

.ps-section--primary {
  margin-top: 8px;
}

/* おすすめ */
.ps-recommend {
  font-size: 1.05rem;
}

.ps-notes {
  margin: 6px 0 0 1rem;
  color: #6b7280;
}

.ps-advice {
  color: #6b7280;
  margin: 4px 0 0;
}

/* テーブル */
.ps-table {
  width: 100%;
  border-collapse: collapse;
  background-color: #f4f0eb;
}
.ps-table thead th {
  background-color: #26abe3;
  color: white;
  text-align: center;
  border-right: 2px solid white;
}
@media screen and (max-width: 767px) {
  .ps-table thead th {
    display: none;
  }
}

.ps-table th,
.ps-table td {
  padding: 0.6rem 1.2rem;
  border-bottom: 3px solid white;
  border-right: 3px solid white;
  vertical-align: middle;
}

@media screen and (max-width: 767px) {
  .ps-table td {
    padding: 1rem 2rem;
    display: block;
    text-align: right;
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .ps-table td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    margin-right: 10px;
  }
}
@media screen and (max-width: 767px) {
  .ps-table td:first-child {
    color: white;
    background: #26abe3;
    font-weight: bold;
    text-align: center;
  }
}

.ps-table--breakdown th {
  width: 40%;
}

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

.ps-td-muted {
  color: #6b7280;
}

.ps-total td,
.ps-total th {
  background-color: #575757;
  vertical-align: middle;
}

/* 棒グラフ */
.ps-hbar {
  width: 70%;
  display: grid;
  gap: 10px;
  margin: 8px 0 6px;
}
@media screen and (max-width: 767px) {
  .ps-hbar {
    width: 100%;
  }
}
.ps-hbar__breakdown {
  background-color: #e4e4e4;
  padding: 0.5rem 1rem;
}

.ps-hbar__row {
  display: grid;
  grid-template-columns: minmax(6em, 10%) 1fr;
  gap: 10px;
  align-items: center;
}

.ps-hbar__label {
  color: #374151;
  font-size: 0.95rem;
  white-space: nowrap;
}

.ps-hbar__barWrap {
  background: #f3f4f6;
  height: 3rem;
  overflow: hidden;
}

.ps-hbar__bar {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.ps-hbar__row--outdoor .ps-hbar__bar {
  background: linear-gradient(90deg, #9ca3af, #6b7280);
}

.ps-hbar__row--i8 .ps-hbar__bar {
  background: linear-gradient(90deg, #aed163, #1fa2a1);
}

.ps-hbar__value {
  color: #fff;
  font-weight: 700;
  padding: 0 10px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
}

/* 判定文 */
.ps-verdict {
  margin: 6px 0 0;
}

.ps-verdict--win {
  color: #26abe3;
  font-weight: 700;
}

.ps-verdict--lose {
  color: #a70;
  font-weight: 700;
}

.ps-note {
  color: #6b7280;
  font-size: 0.92rem;
}

/* サジェスト */
.ps-suggest {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 8em 1fr;
  gap: 8px;
}

.ps-suggest__label {
  color: #6b7280;
}

@media (max-width: 520px) {
  .ps-hbar__row {
    grid-template-columns: 1fr;
  }
  .ps-hbar__label {
    margin-bottom: 4px;
  }
  .ps-suggest {
    grid-template-columns: 1fr;
  }
}
.priceSimulator__result.is-hidden {
  display: none;
}

.ps-card--empty {
  border: 1px dashed #e5e7eb;
  color: #6b7280;
  background: #fff;
}

.ps-empty {
  margin: 0.5rem 0 0;
}

/* ==================================================
 _page.scss
 レッスンエリアのスタイル定義
================================================== */
.machine__lead {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
@media screen and (max-width: 767px) {
  .machine__lead {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}
.machine__lead-wrap {
  display: flex;
  justify-content: center;
  -moz-column-gap: 2rem;
       column-gap: 2rem;
}
@media screen and (max-width: 767px) {
  .machine__lead-wrap {
    flex-direction: column;
    row-gap: 1.5rem;
  }
}
.machine__lead-box {
  width: 50%;
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
  padding: 3rem 2rem;
  background-color: white;
  border-radius: 1rem;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
}
@media screen and (max-width: 767px) {
  .machine__lead-box {
    width: 100%;
    padding: 2rem 1rem;
  }
}
.machine__lead-box h3 img {
  height: 45px;
  width: auto;
}
.machine__lead-img img {
  border-radius: 1rem;
}
.machine__wrap {
  display: flex;
  flex-direction: column;
  row-gap: 4rem;
}
.machine__box {
  display: flex;
  justify-content: space-between;
  -moz-column-gap: 3rem;
       column-gap: 3rem;
}
@media screen and (max-width: 767px) {
  .machine__box {
    flex-direction: column-reverse;
    row-gap: 1.5rem;
  }
}
.machine__box-img {
  width: 45%;
}
@media screen and (max-width: 767px) {
  .machine__box-img {
    width: 100%;
  }
}
.machine__box-img img {
  border-radius: 1rem;
}
.machine__box-txt {
  width: 55%;
  display: flex;
  flex-direction: column;
  row-gap: 0.5rem;
}
@media screen and (max-width: 767px) {
  .machine__box-txt {
    width: 100%;
  }
}
.machine__table th,
.machine__table td {
  padding: 0.5rem;
  border-bottom: 2px solid white;
  vertical-align: middle;
}
.machine__table th {
  width: 35%;
  background-color: #26abe3;
  color: white;
}
.machine__table td {
  width: 65%;
  background-color: #daf2fd;
}
.machine__main {
  padding-top: 4rem;
  padding-bottom: 4rem;
  background-color: white;
}
@media screen and (max-width: 767px) {
  .machine__main {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}
.machine__faq {
  padding-top: 4rem;
  padding-bottom: 8rem;
}
@media screen and (max-width: 767px) {
  .machine__faq {
    padding-top: 2rem;
    padding-bottom: 4rem;
  }
}

/* ==================================================
 _page.scss
 レッスンエリアのスタイル定義
================================================== */
.facility__wrap {
  display: flex;
  flex-direction: column;
  row-gap: 4rem;
}
.facility__box {
  display: flex;
  justify-content: space-between;
  -moz-column-gap: 3rem;
       column-gap: 3rem;
}
@media screen and (max-width: 767px) {
  .facility__box {
    flex-direction: column-reverse;
    row-gap: 1.5rem;
  }
}
.facility__box-img {
  width: 45%;
}
@media screen and (max-width: 767px) {
  .facility__box-img {
    width: 100%;
  }
}
.facility__box-img img {
  border-radius: 1rem;
}
.facility__box-txt {
  width: 55%;
  display: flex;
  flex-direction: column;
  row-gap: 0.5rem;
}
@media screen and (max-width: 767px) {
  .facility__box-txt {
    width: 100%;
  }
}
.facility__main {
  padding-top: 4rem;
  padding-bottom: 4rem;
  background-color: white;
}
@media screen and (max-width: 767px) {
  .facility__main {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}
.facility__faq {
  padding-top: 4rem;
  padding-bottom: 8rem;
}
@media screen and (max-width: 767px) {
  .facility__faq {
    padding-top: 2rem;
    padding-bottom: 4rem;
  }
}

/* ==================================================
 _page.scss
 レッスンエリアのスタイル定義
================================================== */
.lesson__lead {
  padding-top: 4rem;
  padding-bottom: 2rem;
}
@media screen and (max-width: 767px) {
  .lesson__lead {
    padding-top: 2rem;
    padding-bottom: 1rem;
  }
}
.lesson__wrap {
  display: flex;
  flex-direction: column;
  row-gap: 4rem;
}
.lesson__point {
  display: flex;
  justify-content: space-between;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}
@media screen and (max-width: 1024px) {
  .lesson__point {
    flex-direction: column;
    row-gap: 2rem;
  }
}
.lesson__point-item {
  width: 33%;
  background-color: white;
  padding: 2rem 1rem;
  border-radius: 1rem;
  border: 2px solid #ebebeb;
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
}
.lesson__point-item img {
  border-radius: 1rem;
}
@media screen and (max-width: 1024px) {
  .lesson__point-item {
    width: 100%;
  }
}
.lesson__box {
  display: flex;
  justify-content: space-between;
  -moz-column-gap: 3rem;
       column-gap: 3rem;
}
@media screen and (max-width: 767px) {
  .lesson__box {
    flex-direction: column-reverse;
    row-gap: 1.5rem;
  }
}
.lesson__box-img {
  width: 45%;
}
@media screen and (max-width: 767px) {
  .lesson__box-img {
    width: 100%;
  }
}
.lesson__box-img img {
  border-radius: 1rem;
}
.lesson__box-txt {
  width: 55%;
  display: flex;
  flex-direction: column;
  row-gap: 0.5rem;
}
@media screen and (max-width: 767px) {
  .lesson__box-txt {
    width: 100%;
  }
}
.lesson__table-w80 {
  width: 80%;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .lesson__table-w80 {
    width: 100%;
  }
}
.lesson__table th,
.lesson__table td {
  padding: 0.5rem 1rem;
  border-bottom: 2px solid white;
  vertical-align: middle;
}
.lesson__table th {
  width: 45%;
  background-color: #8fc31f;
  color: white;
}
.lesson__table td {
  width: 55%;
  background-color: #f5ffe3;
}
.lesson__main {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
@media screen and (max-width: 767px) {
  .lesson__main {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}
.lesson__time {
  background-color: white;
  padding-top: 4rem;
  padding-bottom: 4rem;
}
@media screen and (max-width: 767px) {
  .lesson__time {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}
.lesson__price {
  padding-top: 4rem;
  padding-bottom: 4rem;
  display: flex;
  flex-direction: column;
  row-gap: 3rem;
}
@media screen and (max-width: 1024px) {
  .lesson__price {
    flex-direction: column;
    row-gap: 2rem;
  }
}
@media screen and (max-width: 767px) {
  .lesson__price {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}
.lesson__price-wrap {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  -moz-column-gap: 2rem;
       column-gap: 2rem;
  row-gap: 2rem;
}
.lesson__price-table {
  width: calc(50% - 1rem);
  display: flex;
  flex-direction: column;
  row-gap: 0.5rem;
}
@media screen and (max-width: 1024px) {
  .lesson__price-table {
    width: 100%;
  }
}
.lesson__price-table table {
  width: 100%;
}
.lesson__prof {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
@media screen and (max-width: 767px) {
  .lesson__prof {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}
.lesson__prof-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
  padding: 0;
  margin: 0;
  list-style: none;
}
@media screen and (max-width: 767px) {
  .lesson__prof-wrap {
    grid-template-columns: 1fr;
  }
}
.lesson__prof-wrap li {
  background-color: white;
  border-radius: 1rem;
  transition: transform 0.3s;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
}
.lesson__prof-wrap li img {
  border-radius: 1rem 1rem 0 0;
}
.lesson__prof-text {
  display: flex;
  flex-direction: column;
  row-gap: 0.5rem;
  padding: 1rem 1rem 2rem 1rem;
}
.lesson__faq {
  padding-top: 4rem;
  padding-bottom: 8rem;
}
@media screen and (max-width: 767px) {
  .lesson__faq {
    padding-top: 2rem;
    padding-bottom: 4rem;
  }
}

/* ==================================================
 _page.scss
 レッスンエリアのスタイル定義
================================================== */
.pricePage__lead {
  padding-top: 4rem;
  padding-bottom: 2rem;
}
@media screen and (max-width: 767px) {
  .pricePage__lead {
    padding-top: 2rem;
  }
}
.pricePage__main {
  padding-bottom: 4rem;
  display: flex;
  flex-direction: column;
  row-gap: 3rem;
}
@media screen and (max-width: 767px) {
  .pricePage__main {
    padding-bottom: 2rem;
  }
}
.pricePage__main-wrap {
  display: flex;
  flex-direction: column;
  row-gap: 0.6rem;
}
.pricePage__faq {
  padding-top: 4rem;
  padding-bottom: 8rem;
}
@media screen and (max-width: 767px) {
  .pricePage__faq {
    padding-top: 2rem;
    padding-bottom: 4rem;
  }
}

/* ==================================================
 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 #3f4041;
}
.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: #26abe3;
  color: white;
  padding: 1.2em 1em;
  margin-top: 5rem;
}
.singleColumn__article h3 {
  padding: 0.8em 1.2em;
  border-left: 6px solid #26abe3;
  background-color: rgba(38, 171, 227, 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: #26abe3;
  border-radius: 2em;
}

/* ==================================================
 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: #26abe3;
  background-color: white;
  transition: color 0.4s, background-color 0.4s, border 0.4s;
}
@media screen and (max-width: 767px) {
  .button {
    height: 70px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
.button::after {
  transform: rotate(45deg);
  width: 0.6rem;
  height: 0.6rem;
  border-top: 3px solid #26abe3;
  border-right: 3px solid #26abe3;
  content: "";
}
.button:hover {
  background-color: #26abe3;
  color: white;
}
.button:hover::after {
  border-color: #fff;
}
.button__border {
  border: 2px solid #26abe3;
}
.button__min {
  height: 60px;
  padding-left: 1.5rem;
  padding-right: 1rem;
}
.button__min::after {
  content: "";
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
}
.button__small {
  height: 70px;
  padding-left: 2rem;
  padding-right: 1.2rem;
}
.button__small::after {
  content: "";
  width: 50px;
  height: 50px;
  min-width: 50px;
  min-height: 50px;
}
.button__line {
  background-color: #06c755 !important;
}
.button__accent {
  background-color: #fdd22b !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: #06c755;
  color: white;
}
@media screen and (max-width: 767px) {
  .button__label {
    padding: 0.1rem 0.6rem;
    min-width: 200px;
  }
}

.buttonBlack {
  color: #3f4041;
}
.buttonBlack::after {
  border-top: 3px solid #3f4041;
  border-right: 3px solid #3f4041;
}
.buttonBlack:hover {
  background-color: #3f4041;
}
.buttonBlack__border {
  border: 2px solid #3f4041;
}

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

.icon-before-line::before {
  content: "";
  display: inline-block;
  width: 1.5em;
  height: 1.5rem;
  background-image: url(../../images/line_icon.png);
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 0.5em;
  vertical-align: middle;
}
@media screen and (max-width: 767px) {
  .icon-before-line::before {
    margin-right: 0.2em;
  }
}

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

/* ==================================================
 _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 #26abe3;
}
.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: #fdd22b;
  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 #26abe3;
}
.studioCard__tag {
  background-color: #fdd22b;
  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: #26abe3;
}
.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: #daf2fd;
}
.faqDrower div span {
  display: inline-block;
  margin-bottom: 0.5rem;
}

/* ==================================================
 _c-recruit.scss
 採用のスタイル定義
================================================== */
.recruit {
  width: 100%;
  padding-top: 8rem;
  padding-bottom: 8rem;
  background-image: linear-gradient(90deg, rgb(246, 50, 42), rgb(238, 195, 45));
}
@media screen and (max-width: 767px) {
  .recruit {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
.recruit__container {
  display: flex;
  flex-direction: column;
  row-gap: 2.5rem;
}
.recruit__button {
  width: 80%;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .recruit__button {
    width: 100%;
  }
}

/* ==================================================
 _c-recruit.scss
 採用のスタイル定義
================================================== */
.franchise {
  width: 100%;
  padding-top: 8rem;
  padding-bottom: 8rem;
  background-image: linear-gradient(90deg, rgb(64, 149, 198), rgb(102, 194, 188));
}
@media screen and (max-width: 767px) {
  .franchise {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
.franchise__container {
  display: flex;
  flex-direction: column;
  row-gap: 2.5rem;
}
.franchise__button {
  width: 80%;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .franchise__button {
    width: 100%;
  }
}

/* ==================================================
 _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: #26abe3;
}
.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 #26abe3;
}
.numCard__tag {
  background-color: #fdd22b;
  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-lessonCard.scss
 カードのスタイル定義
================================================== */
.lessonCard {
  width: 100%;
  background-color: white;
  padding: 2rem 4rem;
  border-radius: 1rem;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
}
@media screen and (max-width: 767px) {
  .lessonCard {
    padding: 3rem 0.5rem;
  }
}
.lessonCard__container {
  display: flex;
  justify-content: space-between;
  -moz-column-gap: 3rem;
       column-gap: 3rem;
}
@media screen and (max-width: 1024px) {
  .lessonCard__container {
    flex-direction: column-reverse;
    row-gap: 1rem;
  }
}
.lessonCard__txt {
  width: 50%;
  display: flex;
  flex-direction: column;
  row-gap: 1.5rem;
}
@media screen and (max-width: 1024px) {
  .lessonCard__txt {
    width: 100%;
  }
}
.lessonCard__title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding-bottom: 0.5rem;
}
@media screen and (max-width: 767px) {
  .lessonCard__title {
    flex-direction: column-reverse;
    align-items: flex-start;
    row-gap: 0.4rem;
  }
}
.lessonCard__title::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 200px;
  -o-border-image: linear-gradient(45deg, #1fa2a1, #aed163) 1;
     border-image: linear-gradient(45deg, #1fa2a1, #aed163) 1;
  border-bottom: 10px solid #26abe3;
}
.lessonCard__img {
  width: 50%;
}
@media screen and (max-width: 1024px) {
  .lessonCard__img {
    width: 100%;
  }
}
.lessonCard__img img {
  border-radius: 1rem;
}
.lessonCard__price-inner {
  padding: 1.5rem 0;
  border: 2px solid #8fc31f;
  border-radius: 0 0 1rem 1rem;
}
.lessonCard__price-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}
.lessonCard__price h4 {
  background-color: #8fc31f;
  border-radius: 1rem 1rem 0 0;
  padding: 1rem 0;
}
.lessonCard__tag {
  background-color: #fdd22b;
  padding: 0.1rem 1.2rem;
  border-radius: 1rem;
  margin-right: 0.5rem;
}
.lessonCard__button {
  width: 90%;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .lessonCard__button {
    width: 100%;
  }
}

/* ==================================================
 _c-priceListCard.scss
 カードのスタイル定義
================================================== */
.priceListCard {
  max-width: 368px;
  min-width: 250px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
}
.priceListCard__batch {
  position: relative;
}
.priceListCard__batch::before {
  position: absolute;
  content: "";
  width: 80px;
  height: 80px;
  background-image: url("../../images/icon-recommend.svg");
  background-repeat: no-repeat;
  top: -15px;
  left: -20px;
}
@media screen and (max-width: 767px) {
  .priceListCard__batch::before {
    width: 80px;
    height: 80px;
    left: -10px;
    top: -15px;
  }
}
.priceListCard__batchCorp {
  position: relative;
}
.priceListCard__batchCorp::before {
  position: absolute;
  content: "";
  width: 80px;
  height: 80px;
  background-image: url("../../images/icon-corp.svg");
  background-repeat: no-repeat;
  top: -15px;
  left: -20px;
}
@media screen and (max-width: 767px) {
  .priceListCard__batchCorp::before {
    width: 80px;
    height: 80px;
    left: -10px;
    top: -15px;
  }
}
.priceListCard__head {
  width: 100%;
  padding: 1.5rem 0;
  border-radius: 0.2rem 0.2rem 0 0;
  text-align: center;
}
.priceListCard__inner {
  width: 100%;
  background-color: #f4f0eb;
  padding: 2rem 2rem 3rem 2rem;
  display: flex;
  flex-direction: column;
  row-gap: 1.5rem;
}
.priceListCard__price {
  display: flex;
  flex-direction: column;
  row-gap: 0.25rem;
}
.priceListCard__button a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 80%;
  height: 50px;
  color: #fff;
  border-radius: 3px;
  letter-spacing: 0.05em;
  transition: all 0.3s;
}
.priceListCard__button a:hover {
  opacity: 0.8;
}
.priceListCard__dl {
  border-top: 1px solid #3f4041;
  display: flex;
  flex-wrap: wrap;
}
@media screen and (max-width: 767px) {
  .priceListCard__dl {
    flex-direction: column;
    text-align: center;
  }
}
.priceListCard__dl dt {
  width: 50%;
  padding-top: 1.5rem;
}
@media screen and (max-width: 767px) {
  .priceListCard__dl dt {
    width: 100%;
  }
}
.priceListCard__dl dd {
  width: 50%;
  padding-top: 1.5rem;
}
@media screen and (max-width: 767px) {
  .priceListCard__dl dd {
    width: 100%;
    padding-top: 0.2rem;
  }
}

/* ==================================================
 _c-priceCard.scss
 カードのスタイル定義
================================================== */
.priceCard {
  padding: 3rem 4rem;
  background-color: #f4f0eb;
  border-left: 10px solid;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
}
@media screen and (max-width: 1024px) {
  .priceCard {
    padding: 2rem 3rem;
  }
}
@media screen and (max-width: 767px) {
  .priceCard {
    border-top: 10px solid;
    border-left: none;
    padding: 2rem 1rem;
  }
}
.priceCard__batch {
  position: relative;
}
.priceCard__batch::before {
  position: absolute;
  content: "";
  width: 100px;
  height: 100px;
  background-image: url("../../images/icon-recommend.svg");
  background-repeat: no-repeat;
  top: -15px;
  left: -30px;
}
@media screen and (max-width: 767px) {
  .priceCard__batch::before {
    width: 80px;
    height: 80px;
    left: 0;
    top: 0;
  }
}
.priceCard__wrap {
  display: flex;
  justify-content: space-between;
  -moz-column-gap: 4rem;
       column-gap: 4rem;
}
@media screen and (max-width: 1024px) {
  .priceCard__wrap {
    -moz-column-gap: 2rem;
         column-gap: 2rem;
  }
}
@media screen and (max-width: 767px) {
  .priceCard__wrap {
    flex-direction: column;
    row-gap: 1.5rem;
  }
}
@media screen and (max-width: 767px) {
  .priceCard__wrap h3 {
    text-align: center;
  }
}
.priceCard__head {
  width: 50%;
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
}
@media screen and (max-width: 767px) {
  .priceCard__head {
    width: 100%;
  }
}
.priceCard__head-time {
  padding: 0.25rem 1rem;
  border-radius: 0.2rem;
}
.priceCard__head-description {
  line-height: 1.5;
}
.priceCard__head-recommend {
  border: 2px solid #3f4041;
}
.priceCard__head-recommend h4 {
  background-color: #3f4041;
  padding: 0.25rem 0;
}
.priceCard__head-recommend ul {
  padding: 0.5rem 1rem;
}
.priceCard__head-recommend li {
  list-style-type: disc;
  margin-left: 1rem;
  padding: 0.2rem;
}
.priceCard__head-recommend li::marker {
  color: #3f4041;
}
.priceCard__txt {
  width: 50%;
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
}
@media screen and (max-width: 767px) {
  .priceCard__txt {
    width: 100%;
  }
}
.priceCard__txt-wrap {
  display: flex;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .priceCard__txt-wrap {
    justify-content: center;
  }
}
.priceCard__dl {
  border-top: 1px solid #3f4041;
  display: flex;
  flex-wrap: wrap;
}
.priceCard__dl dt {
  width: 40%;
  padding-top: 1.5rem;
}
.priceCard__dl dd {
  width: 60%;
  padding-top: 1.5rem;
}
.priceCard__tag {
  background-color: #8fc31f;
  padding: 0.1rem 1rem;
  border-radius: 1rem;
  margin-right: 0.5rem;
}
.priceCard__table {
  padding-top: 1.5rem;
}
.priceCard__table summary {
  cursor: pointer;
  padding: 1rem 3rem 1rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  background-color: white;
  justify-content: center;
}
.priceCard__table summary::marker {
  display: none;
  content: "";
}
.priceCard__table summary::after {
  content: "＋";
  font-size: 1.2rem;
  position: absolute;
  right: 1.5rem;
  transition: transform 0.3s ease;
}
.priceCard__table[open] summary::after {
  content: "－";
  transform: rotate(0deg);
}
.priceCard__table-body {
  padding-top: 1rem;
}
.priceCard__img {
  padding-top: 2rem;
  width: 100%;
  margin: 0 auto;
}

/* 横スクロールの親。ここに overflow-x を持たせる */
.priceTableWrap {
  width: 100%;
  position: relative;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  /* OK：横だけ連鎖を止める（縦は親に渡す） */
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
  /* 列幅（必要に応じて調整） */
  --col-min: 10rem; /* 各プラン列の最小幅 */
  --label-min: 9rem; /* 行ラベル列の最小幅 */
  /* スクロール端の薄いグラデ（任意） */
}
@media screen and (max-width: 767px) {
  .priceTableWrap {
    --col-min: 8rem;
    --label-min: 5.5rem;
  }
}
.priceTableWrap::after {
  content: "";
  position: sticky;
  right: 0;
  top: 0;
  width: 24px;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0));
}

/* テーブル本体：幅は中身に合わせて横に広がる */
.priceTable {
  width: -moz-max-content;
  width: max-content;
  border-collapse: separate;
  border-spacing: 0;
  border: 2px solid #7d7d7d;
  background: #fff;
  /* ヘッダー行を縦スクロールで固定 */
  /* 左上の交差セル（top かつ left） */
  /* 行ラベル列（左固定） */
  /* 各プラン列の最小幅を確保（見やすい大きさを維持） */
  /* アイコン例 */
  /* おすすめバッジ（必要ならそのまま） */
  /* 列カラー（例） */
  /* “おすすめ列”のボディ強調（列番号に合わせて調整） */
}
.priceTable thead th,
.priceTable tbody th,
.priceTable tbody td {
  padding: 0.25rem 0.5rem;
  border-bottom: 1px solid #7d7d7d;
  border-right: 1px solid #7d7d7d;
  vertical-align: middle;
  background: #fff;
}
.priceTable thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  text-align: center;
  background: #3f4041;
  color: white;
  white-space: normal; /* <br> を活かす */
  padding: 0.5rem 0.5rem;
}
.priceTable thead th:first-child {
  left: 0;
  z-index: 5; /* 交差セルを最前 */
}
.priceTable tbody th {
  position: sticky;
  left: 0;
  z-index: 4; /* ヘッダーより低く、他セルより高く */
  min-width: var(--label-min);
  background: #3f4041;
  color: white;
  text-align: center;
  white-space: nowrap;
}
.priceTable thead th:not(:first-child),
.priceTable tbody td {
  min-width: var(--col-min);
  text-align: center;
}
.priceTable tbody tr:nth-child(even) td {
  background-color: #f7f7f7;
}
.priceTable tbody td img {
  width: 1.5rem;
  height: 1.5rem;
  vertical-align: middle;
}
.priceTable-recommend {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -35%);
  background-color: #d11b58;
  border: 2px solid white;
  border-radius: 999px;
  padding: 0.2rem 1rem;
  font-size: 0.9em;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  z-index: 6;
}
.priceTable thead tr th:nth-child(2) {
  background-color: #90be6d;
}
.priceTable thead tr th:nth-child(3) {
  background-color: #e9c46a;
}
.priceTable thead tr th:nth-child(4) {
  background-color: #f4a261;
}
.priceTable thead tr th:nth-child(5) {
  background-color: #032e6d;
}
.priceTable thead tr th:nth-child(6) {
  background-color: #e76f51;
}
.priceTable thead tr th:nth-child(7) {
  background-color: #264653;
}

/* ==================================================
 _c-flowItem.scss
 カードのスタイル定義
================================================== */
.flowItem {
  display: flex;
  -moz-column-gap: 2rem;
       column-gap: 2rem;
  margin-top: 100px;
}
@media screen and (max-width: 1024px) {
  .flowItem {
    -moz-column-gap: 1rem;
         column-gap: 1rem;
  }
}
@media screen and (max-width: 767px) {
  .flowItem {
    flex-direction: column;
    align-items: center;
    row-gap: 1rem;
    margin-top: 50px;
  }
}
.flowItem__number-circle {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #26abe3;
}
.flowItem__wrap {
  display: flex;
  flex-direction: column;
  row-gap: 1.5rem;
}
@media screen and (max-width: 767px) {
  .flowItem__wrap {
    align-items: center;
    row-gap: 1rem;
  }
}
.flowItem__button {
  text-align: left;
  width: 100%;
}
.flowItem__button a {
  margin: auto 0 0 0;
}
@media screen and (max-width: 767px) {
  .flowItem__button a {
    margin: 0 auto;
  }
}

/* ==================================================
 _c-slideImage.scss
 カードのスタイル定義
================================================== */
.slideImage img {
  border-radius: 1rem;
}
.slideImage .swiper-wrapper {
  transition-timing-function: linear;
  transition-duration: 5000ms;
}

/* ==================================================
 _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 #3f4041;
  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__img img {
  border-radius: 1rem;
}
.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;
}

/* ==================================================
 _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: #26abe3;
  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;
}

/* ==================================================
 _shotdataTable.scss
 カードのスタイル定義
================================================== */
.shotdataTable {
  width: 100%;
  height: -moz-fit-content;
  height: fit-content;
  max-height: 200px;
  overflow: hidden;
  position: relative;
  overflow-x: scroll !important;
}
.shotdataTable.--is-active {
  height: -moz-fit-content;
  height: fit-content;
  max-height: -moz-fit-content;
  max-height: fit-content;
}
.shotdataTable__table {
  width: 100%;
  margin: 0 auto;
}
.shotdataTable th,
.shotdataTable td {
  padding: 1rem;
  border-bottom: 2px solid white;
}
.shotdataTable th {
  width: 30%;
  background-color: #26abe3;
  color: white;
}
.shotdataTable td {
  width: 70%;
  background-color: #daf2fd;
  color: white;
}

/* ==================================================
 _courseTable
 カードのスタイル定義
================================================== */
.courseTable th,
.courseTable td {
  vertical-align: middle;
}
.courseTable__box {
  width: 100%;
  height: -moz-fit-content;
  height: fit-content;
  max-height: 484px;
  overflow: hidden;
  position: relative;
  overflow-x: scroll !important;
}
.courseTable__box.--is-active {
  height: -moz-fit-content;
  height: fit-content;
  max-height: -moz-fit-content;
  max-height: fit-content;
}
.courseTable__table {
  width: 100%;
  border-collapse: collapse;
  white-space: nowrap;
}
.courseTable__table-country img {
  width: 48px;
}
.courseTable__table-ratebox {
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  -moz-column-gap: 8px;
       column-gap: 8px;
}
.courseTable__table-starsbox {
  display: flex;
  align-items: center;
}
.courseTable thead tr th {
  text-align: center;
  padding: 20px 0 17px 0;
  color: white;
  font-weight: 700;
  border-right: 1px solid white;
}
.courseTable thead tr th:first-of-type {
  border-radius: 12px 0 0 12px;
}
.courseTable thead tr th:last-of-type {
  border-radius: 0 12px 12px 0;
}
.courseTable tbody tr:nth-of-type(2n) {
  background-color: #e7e7e7;
}
.courseTable tbody td {
  padding: 1rem 1.5rem;
  color: #000;
  text-align: center;
  letter-spacing: 1.28px;
}
.courseTable tbody td:nth-of-type(3) {
  text-align: left;
}
.courseTable tbody .star {
  width: 16px;
  height: 16px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../../images/icon-star-green.svg");
}
.courseTable tbody .star.--gray {
  background-image: url("../../images/icon-star-gray.svg");
}

/* ==================================================
 _modeTable.scss
 カードのスタイル定義
================================================== */
.modeTable__wrap {
  width: 100%;
  height: -moz-fit-content;
  height: fit-content;
  max-height: 400px;
  overflow: hidden;
  position: relative;
  overflow-x: scroll !important;
}
.modeTable__wrap.--is-active {
  height: -moz-fit-content;
  height: fit-content;
  max-height: -moz-fit-content;
  max-height: fit-content;
}
.modeTable__imgList {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}
.modeTable__imgList img {
  border-radius: 1rem;
}

/* ==================================================
 _c-priceCard.scss
 カードのスタイル定義
================================================== */
/* ==================================================
 _c-coachCard.scss
 カードのスタイル定義
================================================== */
.coachCard__wrap {
  display: flex;
  justify-content: space-between;
  -moz-column-gap: 3rem;
       column-gap: 3rem;
}
@media screen and (max-width: 1024px) {
  .coachCard__wrap {
    -moz-column-gap: 2rem;
         column-gap: 2rem;
  }
}
@media screen and (max-width: 767px) {
  .coachCard__wrap {
    flex-direction: column-reverse;
    row-gap: 1.5rem;
  }
}
.coachCard__txt {
  width: 55%;
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
}
@media screen and (max-width: 767px) {
  .coachCard__txt {
    width: 100%;
    row-gap: 1rem;
  }
}
.coachCard__txt-group {
  padding-bottom: 1rem;
  border-bottom: 2px solid #26abe3;
}
.coachCard__name {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}
.coachCard__sns {
  display: flex;
  justify-content: flex-start;
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
}
.coachCard__img {
  width: 45%;
}
.coachCard__img img {
  border-radius: 1rem;
}
@media screen and (max-width: 767px) {
  .coachCard__img {
    width: 100%;
  }
}

/* ==================================================
 _scheduleTable.scss
スケジュールエリア定義
================================================== */
.scheduleTable {
  width: 100%;
  border-collapse: collapse;
  overflow: auto;
}
.scheduleTable thead {
  width: 100%;
}
.scheduleTable thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  text-align: center;
  padding: 0.75rem;
  border: 1px solid #ccc;
  text-align: center;
  background-color: #26abe3;
  color: white;
}
.scheduleTable tbody {
  width: 100%;
}
.scheduleTable tbody th {
  padding: 1rem 1rem;
  border-bottom: 1px solid #ddd;
  border-left: 1px solid #ddd;
  position: sticky;
  left: 0;
  z-index: 1;
  text-align: left;
  padding: 0.75rem;
  vertical-align: middle;
  background-color: #f7f7f7;
  min-width: 5rem;
}
@media screen and (max-width: 767px) {
  .scheduleTable tbody th {
    padding: 0.5rem;
  }
}
.scheduleTable tbody td {
  border-bottom: 1px solid #ddd;
  border-left: 1px solid #ddd;
  padding-bottom: 1rem;
  padding-top: 1rem;
  vertical-align: middle;
  min-width: 2.5rem;
  text-align: center;
  background-color: #f7f7f7;
}
.scheduleTable tbody td:last-of-type {
  border-right: 1px solid #ddd;
}
.scheduleTable__img {
  width: 2rem;
  height: 2rem;
}
@media screen and (max-width: 767px) {
  .scheduleTable__img {
    width: 1.5rem;
    height: 1.5rem;
  }
}
.scheduleTable__scroll {
  width: 100%;
  overflow-x: auto;
}

/* ==================================================
 _c-contactStudio.scss
 カードのスタイル定義
================================================== */
.contactStudio {
  padding-top: 8rem;
  padding-bottom: 8rem;
  background-color: #3f4041;
}
@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-commonCard.scss
 カードのスタイル定義
================================================== */
.commonTable {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.commonTable th,
.commonTable td {
  padding: 0.75rem 1rem;
  border-right: 1px solid #ccc;
  word-break: break-word;
}
@media screen and (max-width: 767px) {
  .commonTable th {
    display: none;
  }
}
.commonTable tr > th:last-child,
.commonTable tr > td:last-child {
  border-right: none;
}
.commonTable tr:first-child {
  background-color: #26abe3;
}
.commonTable tr:nth-child(n+2):nth-child(odd) {
  background-color: #e4e4e4;
}
.commonTable tr:nth-child(n+2):nth-child(even) {
  background-color: #ffffff;
}
@media screen and (max-width: 767px) {
  .commonTable td {
    padding: 1rem 2rem;
    display: block;
    text-align: right;
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .commonTable td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    margin-right: 10px;
  }
}
@media screen and (max-width: 767px) {
  .commonTable td:first-child {
    color: white;
    background: #26abe3;
    font-weight: bold;
    text-align: center;
  }
}

/* ==================================================
 _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: #3f4041;
  background-color: white;
  border: 1px solid #3f4041;
  border-radius: 5px;
  text-decoration: none;
  transition: background-color 0.3s ease-in-out;
  position: relative;
}
.nextpostButton a:hover {
  background-color: #3f4041;
  color: white;
}
.nextpostButton__next::after {
  content: "";
  width: 6px;
  height: 6px;
  border: 0;
  border-top: solid 2px;
  border-right: solid 2px;
  border-color: #3f4041;
  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: #3f4041;
  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-pace.scss
 ローディングのスタイル定義
================================================== */
.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pace::before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: white;
  position: fixed;
  z-index: 999;
  opacity: 1;
}

.pace-inactive {
  position: relative;
  z-index: 999;
  display: block !important;
  animation: opacity_animation 0.5s ease 0s forwards;
}

@keyframes opacity_animation {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.pace .pace-progress {
  display: none;
}

.pace .pace-progress-inner {
  display: none;
  /* display: block;
  position: absolute;
     top: 50%;
  left: 50%;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px #061b28, 0 0 5px #061b28;
  opacity: 1.0;
  -webkit-transform: rotate(3deg) translate(0px, -4px);
  -moz-transform: rotate(3deg) translate(0px, -4px);
  -ms-transform: rotate(3deg) translate(0px, -4px);
  -o-transform: rotate(3deg) translate(0px, -4px);
  transform: rotate(3deg) translate(0px, -4px); */
}

.pace .pace-activity {
  display: block;
  position: fixed;
  z-index: 2000;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  border: solid 2px transparent;
  border-top-color: #061b28;
  border-left-color: #061b28;
  border-radius: 10px;
  animation: pace-spinner 400ms linear infinite;
}
@keyframes pace-spinner {
  0% {
    transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/* ==================================================
 _c-acsessBlock.scss
 カードのスタイル定義
================================================== */
.authorCard {
  margin-bottom: 2rem;
}
.authorCard p {
  margin-bottom: 0;
}
.authorCard__container {
  background-color: white;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
}
.authorCard__title {
  background-color: #8fc31f;
  padding: 1rem 2rem;
}
.authorCard__title h3 {
  padding: 0;
  margin-top: 0;
  border-left: none;
  margin-bottom: 0;
  background-color: #8fc31f;
}
.authorCard__wrap {
  display: flex;
  gap: 1.5rem;
  padding: 1rem 2rem;
}
@media screen and (max-width: 767px) {
  .authorCard__wrap {
    flex-direction: column;
    align-items: center;
  }
}
.authorCard__wrap-img {
  width: 150px;
  height: 150px;
}
.authorCard__wrap-img img {
  min-width: 150px;
  min-height: 150px;
  border-radius: 100%;
  margin-bottom: 0;
  border: 3px solid #8fc31f;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 50% 50%;
     object-position: 50% 50%;
}
.authorCard__wrap-txt {
  width: auto;
}

/* ==================================================
 _c-relatedPostcard.scss
 関連記事カード定義
================================================== */
.relatedPostcard {
  margin-bottom: 2rem;
}
.relatedPostcard p {
  margin-bottom: 0;
}
.relatedPostcard__container {
  background-color: white;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
}
.relatedPostcard__title {
  background-color: #3f4041;
  padding: 1rem 2rem;
}
.relatedPostcard__title h3 {
  padding: 0;
  margin-top: 0;
  border-left: none;
  margin-bottom: 0;
  background-color: #3f4041;
}
.relatedPostcard__wrap {
  display: flex;
  gap: 1.5rem;
  padding: 1rem 2rem;
  transition: all 0.3s;
  text-decoration: none !important;
}
@media screen and (max-width: 767px) {
  .relatedPostcard__wrap {
    flex-direction: column;
    align-items: center;
  }
}
.relatedPostcard__wrap-img {
  width: 30%;
}
@media screen and (max-width: 767px) {
  .relatedPostcard__wrap-img {
    width: 100%;
    text-align: center;
  }
}
.relatedPostcard__wrap-img img {
  margin-bottom: 0;
}
.relatedPostcard__wrap-txt {
  width: 70%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media screen and (max-width: 767px) {
  .relatedPostcard__wrap-txt {
    width: 100%;
  }
}
.relatedPostcard__wrap:hover {
  opacity: 0.6;
}

/* ==================================================
 _c-fcButton.scss
 ボタンのスタイル定義
================================================== */
.fcButton {
  border-radius: 9999px;
  color: white;
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: auto;
  width: 300px;
  height: 60px;
  padding: 10px 25px;
  text-decoration: none;
  line-height: 1.8;
  transition: all 0.5s;
  font-weight: 700;
}
.fcButton:after {
  content: "";
  position: absolute;
  top: 50%;
  bottom: 0;
  right: 2rem;
  font-size: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: right 0.3s;
  width: 6px;
  height: 6px;
  border-top: solid 2px currentColor;
  border-right: solid 2px currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.fcButton:hover:after {
  right: 1.4rem;
}

.fcButton-a {
  background-image: linear-gradient(90deg, rgb(246, 50, 42), rgb(238, 195, 45));
}
.fcButton-a:hover {
  background-color: white;
  background-image: none;
  color: #ee8d2d;
  border: 2px solid #ee8d2d;
}

.fcButton-b {
  background-image: linear-gradient(90deg, rgb(1, 105, 194), rgb(126, 212, 239));
}
.fcButton-b:hover {
  background-color: white;
  background-image: none;
  color: #0169c2;
  border: 2px solid #0169c2;
}

/* ==================================================
 _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%;
}

/* ==================================================
 _c-button.scss
 ボタンのスタイル定義
================================================== */
.banners a {
  transition: all 0.4s;
}
.banners a:hover {
  opacity: 0.8;
}

/* ==================================================
 _c-button.scss
 ボタンのスタイル定義
================================================== */
.bannerFollow {
  position: fixed;
  left: 1rem;
  bottom: 24px;
  z-index: 50;
  width: 300px;
  height: 300px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease;
}
@media screen and (max-width: 1024px) {
  .bannerFollow {
    display: none !important;
  }
}
.bannerFollow__img {
  width: 100%;
  height: 100%;
  border-radius: 1rem;
}
.bannerFollow__close {
  position: absolute;
  right: -10px;
  top: -10px;
  height: 45px;
  width: 45px;
  cursor: pointer;
  pointer-events: auto;
  bottom: auto;
  flex: none;
  left: auto;
  margin: 0 0 0 0;
  max-width: 100%;
  background-image: url("../../images/cross-circle.svg");
  background-repeat: no-repeat;
  background-size: 100%;
  transition: opacity 0.4s;
}
.bannerFollow__close:hover {
  opacity: 0.6;
}
.bannerFollow.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.bannerFollow.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

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