:root {
  /* ===== Colors ===== */
  --color-bg: #fefefe;
  --color-text: #3c554c;
  --color-primary: #3c554c;
  --color-primary-light: #f5f5f5;
  --color-accent: #f97b69;

  /* ===== Typography ===== */
  --font-size-xs: 12px;
  --font-size-s: 14px;
  --font-size-base: 16px;
  --font-size-heading: 2em;

  /* ===== Spacing ===== */
  --padding-inner: 0.75em;
  --padding-section: 3em;
  --margin-bottom-section: 4em;

  /* ===== Breakpoints ===== */
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
}
p {
  padding-bottom: 0;
  color: var(--color-text);
  letter-spacing: 0.02em;
}
h2, h3{
  padding-bottom: 0;
}

/* ===== ヘッダーナビ ===== */
.header-btn {
  background-color: var(--color-accent);
}

:root {
  --font-size-heading: 6em;
  --font-size-heading-sm: 4em;
  --font-size-subtext: 1.75rem;
  --font-size-subtext-sm: 1.2rem;

  --padding-heading: 10%;
  --padding-heading-sm: 5%;
}

/*リンク先の動きぬるっとする*/
html {scroll-behavior: smooth;}

/* ===== ページヘッダーh1 ===== */
/* Lightningページヘッダーh1位置調整 */
.page-header-title {
	margin-top: 8%!important;
}
/* スマホのみ表示 */
@media ( max-width:575.98px ){
.page-header-title {
	margin-top: 18%!important;
}
}

/* ===== FVカバー画像 ===== */
.cover-image {
  clip-path: polygon(
    15% 0%,    /* ← 左上を20%内側から */
    100% 0%,   /* 右上 */
    100% 100%, /* 右下 */
    0% 100%    /* 左下 */
  );
  overflow: hidden;
}

/* ===== FVテキストデザイン ===== */
.hero {
  z-index:1;
}
@media (min-width: 768px){
.hero {
  padding-left: 30%;
}
}
.hero__headline {
    padding-top: var(--padding-inner);
    position: relative;
  display: inline-block;
  font-size: clamp(2.5rem, 5vw, 4em);
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: -0.5em;
  font-family: 'Noto Sans JP', sans-serif;
  white-space: nowrap;
  text-shadow:0 0 0px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff;
}
.hero__headline::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 4px;
    background-color: var(--color-accent);
    transition: width 0.3s ease;
  }

.hero__headline:hover::after {
    width: 100%;
  }
.hero__tagline {
  font-size: clamp(1.1rem, 1.8vw, 1.6rem);
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.25;
  color: #333; /* 必要なら薄めの黒（#333など）もOK */
  font-family: 'Bebas Neue', sans-serif;
  white-space: nowrap;
}

/* ===== リード文章 ===== */
.lead__group{
   background: #fff;
   padding:  var(--padding-heading-sm);
   box-shadow: 0px 0px 10px -5px #777777;
}


/* ===== ヘッダーデザイン ===== */
.header__group {
    padding: var(--padding-section) 0;
}
.header__group h2 {
    font-size: 3em;
}
.header__group p {
    font-size: 1.5em;
}

/* ===== 左右擬似要素デザイン ===== */
.section--concept {
  position: relative; /* 擬似要素を相対位置で配置するために必要 */
  overflow: hidden;   /* はみ出し防止したい場合 */
}

.section--concept::after {
  content: "CONCEPT";
  position: absolute;
  top: 50%;
  left: -2vw;
  transform: translateY(-50%);
  font-size: 8rem; /* 例：大きさはお好みで */
  color: rgba(255, 255, 255, 0.1); /* うっすら表示 */
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-weight: 700;
  pointer-events: none; /* ホバー干渉しないように */
  z-index: 1;
}

.section--menu {
  position: relative; /* 擬似要素を相対位置で配置するために必要 */
  overflow: hidden;   /* はみ出し防止したい場合 */
}

.section--menu::after {
  content: "TRAINING";
  position: absolute;
  top: 50%;
  right: -3vw;
  transform: translateY(-50%);
  font-size: 8rem; /* 例：大きさはお好みで */
  color: rgba(65, 85, 76, 0.1); /* うっすら表示 */
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-weight: 700;
  pointer-events: none; /* ホバー干渉しないように */
  z-index: -1;
}

.menu--item {
  box-shadow: 0px 0px 10px -5px #777777;
  z-index: 10;
}

.section--trainer {
  position: relative; /* 擬似要素を相対位置で配置するために必要 */
  overflow: hidden;   /* はみ出し防止したい場合 */
}

.section--trainer::after {
  content: "TRAINER";
  position: absolute;
  top: 50%;
  left: -2vw;
  transform: translateY(-50%);
  font-size: 8rem; /* 例：大きさはお好みで */
  color: rgba(65, 85, 76, 0.1); /* うっすら表示 */
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-weight: 700;
  pointer-events: none; /* ホバー干渉しないように */
  z-index: -1;
}

.section--news {
  position: relative; /* 擬似要素を相対位置で配置するために必要 */
  overflow: hidden;   /* はみ出し防止したい場合 */
}

.section--news::after {
  content: "NEWS";
  position: absolute;
  top: 50%;
  right: -3vw;
  transform: translateY(-50%);
  font-size: 8rem; /* 例：大きさはお好みで */
  color: rgba(65, 85, 76, 0.1); /* うっすら表示 */
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-weight: 700;
  pointer-events: none; /* ホバー干渉しないように */
  z-index: -1;
}

.section--blog {
  position: relative; /* 擬似要素を相対位置で配置するために必要 */
  overflow: hidden;   /* はみ出し防止したい場合 */
}

.section--blog::after {
  content: "BLOG";
  position: absolute;
  top: 50%;
  left: -2vw;
  transform: translateY(-50%);
  font-size: 8rem; /* 例：大きさはお好みで */
  color: rgba(65, 85, 76, 0.1); /* うっすら表示 */
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-weight: 700;
  pointer-events: none; /* ホバー干渉しないように */
  z-index: 1;
}


.section--access {
  position: relative; /* 擬似要素を相対位置で配置するために必要 */
  overflow: hidden;   /* はみ出し防止したい場合 */
}

.section--access::after {
  content: "ACCESS";
  position: absolute;
  top: 50%;
  left: -2vw;
  transform: translateY(-50%);
  font-size: 8rem; /* 例：大きさはお好みで */
  color: rgba(65, 85, 76, 0.1); /* うっすら表示 */
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-weight: 700;
  pointer-events: none; /* ホバー干渉しないように */
  z-index: 1;
}

/* ========== テーブル（会社情報用） ========== */
.table--company {
  color: var(--color-primary);
  font-size: 1em;
  border-collapse: collapse; /* ← 見栄え向上のため追加（任意） */
  letter-spacing: 0.02em;
}

.table--company th,
.table--company td {
  border: none;
  text-align: left;
  padding: 0.75em 0.5em;
}

.table--company th {
  width: 20%;
}

.table--company tr {
  border-bottom: 1px solid var(--color-primary);
}


/* ========== ボディケアページ ========== */
.section--training {
  position: relative; /* 擬似要素を相対位置で配置するために必要 */
  overflow: hidden;   /* はみ出し防止したい場合 */
}

.section--training__h3 {
  color: var(--color-accent);
  border-bottom: solid 2px var(--color-accent);
}

.section--training::after {
  content: "TRAINING";
  position: absolute;
  top: 50%;
  right: -3vw;
  transform: translateY(-50%);
  font-size: 8rem; /* 例：大きさはお好みで */
  color: rgba(65, 85, 76, 0.1); /* うっすら表示 */
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-weight: 700;
  pointer-events: none; /* ホバー干渉しないように */
  z-index: -1;
}

.price--concept {
  position: relative; /* 擬似要素を相対位置で配置するために必要 */
  overflow: hidden;   /* はみ出し防止したい場合 */
}

.section--price::after {
  content: "PRICE";
  position: absolute;
  top: 50%;
  left: -2vw;
  transform: translateY(-50%);
  font-size: 8rem; /* 例：大きさはお好みで */
  color: rgba(255, 255, 255, 0.1); /* うっすら表示 */
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-weight: 700;
  pointer-events: none; /* ホバー干渉しないように */
  z-index: 1;
}

/* PC */
/* 料金リスト */
@media screen and (min-width: 1000px) {
.pricelist dl {
width:100%;
	margin:0 auto;
}

.pricelist dl {
  display: flex;
  flex-wrap: wrap;
	font-size:18px;
}
.pricelist dl dt {
  width: 70%;
	padding: 1rem 0;
	font-weight:500;
		padding-left:1rem;
}
.pricelist dl dd {
  width: 30%;
	text-align:right;
	padding: 1rem 0;
  color: var(--color-accent);
  font-weight: 700;
	
}


.pricelist dl:after {
    width: 100%;
    content: "";
    height: 2px;
	   margin-top:-5px;
    background-color:var(--color-primary);
    display: block;
}

.menucoment{
	font-size:12px;
	padding-left:1em;
	}}

/* SP*/
/* 料金リスト */
@media screen and (max-width: 999px) {
.pricelist dl {
width:100%;
	margin:0 auto;
}

.pricelist dl {
  flex-wrap: wrap;
	font-size:16px;
}
.pricelist dl dt {
	font-weight:500;
}
.pricelist dl dd {
	padding: 1rem 0;
	text-align:right;
  color: var(--color-accent);
  font-weight: 700;
}


.pricelist dl:after {
    width: 100%;
    content: "";
    height: 2px;
	   margin-top:-5px;
    background-color: var(--color-primary);
    display: block;
}

.menucoment{
	font-size:12px;
	padding-left:1em;
	}}



.section--flow {
  position: relative; /* 擬似要素を相対位置で配置するために必要 */
  overflow: hidden;   /* はみ出し防止したい場合 */
 
}

.section--flow::after {
  content: "FLOW";
  position: absolute;
  top: 50%;
  right: -3vw;
  transform: translateY(-50%);
  font-size: 8rem; /* 例：大きさはお好みで */
  color: rgba(65, 85, 76, 0.1); /* うっすら表示 */
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-weight: 700;
  pointer-events: none; /* ホバー干渉しないように */
  z-index: 1;
}

.section--voice {
  position: relative; /* 擬似要素を相対位置で配置するために必要 */
  overflow: hidden;   /* はみ出し防止したい場合 */
}

.section--voice::after {
  content: "VOICE";
  position: absolute;
  top: 50%;
  left: -2vw;
  transform: translateY(-50%);
  font-size: 8rem; /* 例：大きさはお好みで */
  color: rgba(65, 85, 76, 0.1); /* うっすら表示 */
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-weight: 700;
  pointer-events: none; /* ホバー干渉しないように */
  z-index: -1;
}



/* ===== Contact Form7カスタマイズ ===== */

@media(max-width:768px){
/* テーブルの見出しとフォーム */
table.inquiry th,table.inquiry td {
   display:block;
   padding:1em!important;
   width:100%;
   border-bottom: 2px solid rgba(111, 187, 183, 0.1); 
		padding-right:10px;
		padding-left:10px;
}
table.inquiry td {
	border-bottom: 2px solid #6fbbb7;
	}
/* 送信ボタン */
input.wpcf7-submit{
   margin-bottom:30px;
   width:100%;
}
}


/* Contact Form7全体カスタマイズ */

/* 日付タグの幅を調整 */
@media ( min-width:768px ){
.wpcf7-select.dateform{
   width: 10%;
}
.wpcf7-number.dateform{
   width:15%;
}
}
/* スマホのみ表示 */
@media ( max-width:767.98px ){
	.wpcf7-select.dateform{
   width:15%;
}
.wpcf7-number.dateform{
   width:25%;
}
}


/* 自動入力されるPタグを無効にする */
.inquiry p {
   display: inline;
}

/*テーブル下に余白.枠線・テキストの行間 */
table.inquiry {
   margin-bottom: 30px;
   border: none;
   line-height:1.2;
   
	border-collapse:collapse;
  border-spacing: 5px;
	padding:5px;
}

/* テーブルの行 */
.inquiry tr {
   border:0!important;
}

/* テーブルの見出し側 */
.inquiry th{
   text-align:left;
   font-size:16px;
   border:none;
   padding:1em 0.5em;
   border-bottom: 2px solid var(--color-primary); 
   white-space: nowrap;
	width:25%;
  
}

/* 必須と任意タグ */
.haveto,.any{
   font-size:13px;
   padding:5px;
   background: var(--color-accent);
   color:#fff;
   border-radius:2px;
   margin-right:5px;
	 margin-left:5px;
   font-weight:normal;
	
}

/* 任意タグの背景カラー */
.any{
   background:#2cbdd4;
}

/* テーブルフォーム側 */
.inquiry td{
   font-size:13px;
   border: none;
	padding:20px;
	
}

/* 入力エリア幅最大 */
.wpcf7-form-control {
   width: 100%;
}

/* フォーム入力欄の余白・背景カラー・枠線消す指定 */
.inquiry input,.inquiry select,.inquiry textarea {
   margin: 5px 0;
       border: 1px solid #b1b1b1; 
   padding:0.7em;
}
.inquiry textarea {
   padding-bottom:5em;
}

/* 送信ボタンのデザイン */
.wpcf7-submit{
   display: block;
   margin:10px auto;
   padding:1em 0;
   width:80%;
   background:#6fbbb7;
   color:#fff;
   font-size:18px;
   font-weight:bold;	 
   border-radius:4px;
   border: none;
}

/* 送信ボタンマウスホバー時 */
.wpcf7-submit:hover{
   opacity: 0.9;
   transition: 0.3s;
}

/* フォーム上部に表示されるエラーメッセージを非表示 */
.screen-reader-response {
    display: none;
}

/* フォーム内エラーメッセージを赤色に指定 */
.wpcf7-not-valid-tip {
    color: #e92323;
}

/* ポリシーの設定 */
.privacy-policy-box p {
   display: inline;
}

.privacy-policy-box {
	height: 300px;
	overflow-y: scroll;
	border: 2px solid #ddd;
	padding: 1em;
  background: #fff;
}

   .privacy-policy-box h3 {
        font-size: var(--font-size-base);
        border-bottom: solid 1px var(--color-primary);
        color: var(--color-primary);
        margin-bottom: 0!important;
    }