/*
Theme Name: Kamiyama Osteopathic Clinic
Theme URI: https://celobank.org/
Author: Your Name
Author URI: https://celobank.org/
Description: Clinic theme.
Version: 1.0
*/

/* /////////////////////////////////////////////////////////////////////////
[1 GLOBAL] 
//////////////////////////////////////////////////////////////////////////*/
html {
  margin-top: 0 !important;
}
body {
	margin: 0;
	padding: 0;
	font-family: 'Noto Sans JP', serif;
	font-size: 16px;
	line-height: 1.8;
	color: #555;
}
@media (min-width: 901px){
	.disp_sp { display: none; }
}
@media (max-width: 900px){
	.disp_pc { display: none; }
}
a {
  color: #666;
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,0.15);
  transition: all .25s ease;
}

a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
/* 外部リンク */
a[target="_blank"]::after {
  content: "↗";
  font-size: 0.5em;
  margin-left: 0.25em;
  opacity: .7;
  transition: opacity .2s ease;
	vertical-align: super;   /* ← 上付きっぽく */
  line-height:1;
}

a[target="_blank"]:hover::after {
  opacity: 1;
}

.btn_cta {
	display: flex;
}

.imp {
	font-size: 2em;
}
.cta {
  max-width:900px;
  margin:60px auto;
  padding:40px 24px;
  text-align:center;
  background:#f5f5f5;
}

.cta-title{
  font-size:1.6rem;
  margin-bottom:.5em;
}

.cta-text{
  margin-bottom:24px;
  color:#555;
}

.cta-buttons{
  display:grid;
  gap:16px;
  max-width:520px;
  margin:0 auto;
}

/* 5個目だけ中央寄せ */
.cta-buttons .btn:nth-child(5){
  grid-column:1 / -1;
  justify-self:center;
}
.cta-buttons .btn {
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px 20px;
  border-radius:999px;
  font-size:1rem;
  text-decoration:none;
  transition:.3s ease;
}

/* メイン */
.btn-main{
  background:#000;
  color:#fff;
}

/* サブ */
.btn-sub{
  background:#fff;
  border:1px solid #000;
  color:#000;
}

/* 控えめ */
.btn-ghost{
  background:transparent;
  color:#555;
  border-bottom:1px solid #aaa;
  border-radius:0;
}	
@media (max-width: 900px){
	.imp {
		font-size: 1.2em;
	}
  .cta-buttons{
    grid-template-columns:1fr;
  }

  .cta-buttons .btn:nth-child(5){
    justify-self:stretch;
  }
}

.l-main hr {
  border: none;
  border-top: 1px solid #d4d4d4;
  margin: 3.5rem 0;
}
/* ////////////////////////////////////////////////////////////////GLOBAL/*/

/* /////////////////////////////////////////////////////////////////////////
[2 HEADER] 
//////////////////////////////////////////////////////////////////////////*/
.notice-bar {
  background: #fff3e0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0.9rem;
  padding: 0.4rem 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
}

.notice-text {
  display: inline-block;
  padding-left: 100%;
  animation: notice-scroll 20s linear infinite;
}

.notice-text.is-static {
  padding-left: 0;
  animation: none;
}
/* 重要表示 */
.notice-bar.is-important {
  background: #da7c0c;
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.notice-bar.is-important .notice-text {
  color: #fff;
}
@keyframes notice-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

header.site-header {
  position: fixed;
  top: 38px;
  left: 0;
  width: 100%;
  z-index: 9999;
	background:#FFF;
}
.site-header {
	width: 100%;
	position: relative;
}
.header-inner {
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}
.site-branding {
	width: 70%;
	max-width: 500px;
}
.site-logo { width:100%;}
.site-branding a {
	position: relative;
	width: 100%;
}
.site-branding a img {
	position: relative;
	width: 100%;
	height: auto;
	max-width: 500px;
	z-index: 99;
	background: #FFF;
}
.site-branding a .site-name {
	text-decoration: none;
	color: #333;
	position: absolute;
	left: 0;
	bottom: 0;
}
.header-cta p {
	font-size: .8em;
	margin-bottom: 0 !important;
	margin-top: 1em;
}
.header-cta .btn_area {
	text-align: right;
}
.header-cta .btn {
	border-radius: 0 !important;
	padding: .45em 1em;
	border: none;
}
.header-cta a:hover {
	opacity: .8;
	color: #FFF;
}

/* アクセシビリティ */
.sr-only{
	position:absolute; width:1px; height:1px; padding:0; margin:-1px;
	overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ナビ基本 */
.global-nav { position: relative; }
.global-nav__list {
	width: 100%;
	list-style:none; 
	margin:0; 
	padding:0; 
	display:flex; 
	align-items:center;
	max-width: 900px;
	margin: 0 auto;
	justify-content: center;
	border-left: 1px solid #FFF
}
.global-nav__link {
	text-decoration:none;
	display:inline-block;
	padding:12px 0 12px;
	width: 100%;
	text-align: center;
	color: #333;
	border-right: 1px solid #FFF
}
.global-nav__link:hover {
	border-bottom: #da7c0c solid 2px;
	padding: 12px 0 10px;
	color: #da7c0c;
}
.navbar-custom,
.submenu .submenu__item {
	background: linear-gradient(
		to bottom,
		#f2f2f2 0%,
		#d9d9d9 100%
	);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.7),
		0 2px 6px rgba(0,0,0,.15);
}
.submenu .submenu__item:hover { opacity: .8; }
.global-nav__item {
	width: 100%;
	text-align: center;
	position: relative;
}
.global-nav__item .site-branding {
	width: 250px;
}
.global-nav__item .site-branding a img {
	width: 100%;
	height: auto;
}

/* PC: プルダウン（hover/focus-within） */
.has-submenu { position: relative; }
.submenu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	list-style: none;
	margin: 0;
	padding: 0;
	background:#fff;
	border:1px solid rgba(0,0,0,.1);
	box-shadow: 0 10px 30px rgba(0,0,0,.08);
	z-index: 50;
	text-align: left;
}
.submenu__link { display:block; padding:10px 12px; text-decoration:none;color: #333; }
.submenu__link:hover { color: #da7c0c; }

@media (min-width: 901px){
	.nav-toggle { display:none; }
	/* PCは常に表示 */
	.nav-panel { display:block !important; position:static; transform:none; }
	/* .has-submenu:hover > .submenu,
	.has-submenu:focus-within > .submenu { display:block; } */
  .has-submenu.is-sub-open > .submenu{ display:block; }
	.submenu-toggle {
		position:absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		border: 0;
		background: transparent;
		cursor: pointer;
		z-index: 10;
	}
	.has-submenu.is-sub-open > .submenu { display:block; }
	.nav-close { display:none; }
}

/* SP: 右からスライドのバーガーメニュー + 中はアコーディオン */
@media (max-width: 900px){
	.global-nav { position: absolute; top: 0; right: 0; z-index: 99999; }

	/* バーガーボタン */
	.nav-toggle{
		display: inline-flex;
		flex-direction: column;
		gap: 6px;
		padding: 20px;
		border: none;
		background:#ffc952;
		cursor:pointer;
	}
	.nav-toggle__line{ width:24px; height:2px; background:#fff; display:block; }

	/* 右から出るパネル */
  /* 画面全体＝オーバーレイ */
	.nav-panel {
		display: block;
		position: fixed;
		top: 0;
		right: 0;
		height: 100dvh;
		padding: 16px 12px;
		background: #fff;
    background: rgba(0,0,0,.55); /* 暗くする */
		border-left: 1px solid rgba(0,0,0,.08);
		box-shadow: -10px 0 30px rgba(0,0,0,.10);
		z-index: 9999;

		transform: translateX(100%);
		transition: transform .25s ease;
		overflow-y: auto;
	}
  .nav-panel__inner {
    position: absolute;
    top: 0;
    right: 0;
		width: min(86vw, 250px);
    height: 100dvh;
    background: #fff;
    padding: 56px 12px 16px;

    transform: translateX(100%);
    transition: transform .25s ease;
    box-shadow: -10px 0 30px rgba(0,0,0,.15);
  }
	/* JSが付けるクラス */
	.nav-panel.is-open {
		transform: translateX(0);
	}

	/* リスト縦並び */
	.global-nav__list{
		flex-direction: column;
		align-items: stretch;
		gap:0;
		margin-top: 8px;
	}
	.global-nav__link{
		width: 100%;
		padding: 14px 12px;
	}
	.global-nav__item a .site-name {
		text-decoration: none;
		color: #333;
		position: absolute;
		left: 0;
		top: 0;
	}
	.global-nav__item a img {
		position: relative;
		z-index: 99;
	}
	.global-nav__item a {
		position: relative;
		left: 0;
		top: 0;
	}
	.global-nav__item a .site-name {
		text-decoration: none;
		color: #FFF;
		position: absolute;
		left: 0;
		top: 0;
	}
	
	.global-nav__link {
		text-align: left;
		padding: 12px 0 12px 40px;
		position: relative;
	}
	.global-nav__link:hover {
		border-bottom: none;
		padding: 12px 0 12px 40px;
		color: #333333;
	}
@media (max-width: 900px){

	/* 全グロナビリンクに矢印 */
	.global-nav__link {
		position: relative;
		padding-left: 40px; /* 矢印分 */
	}

	/* ▶︎（デフォルト） */
	.global-nav__link::before {
		content: "▶︎";
		position: absolute;
		left: 16px;
		top: 50%;
		transform: translateY(-50%);
		font-size: .9em;
		color: #da7c0c;
	}

	/* 子階層あり＆開いている時だけ ▼ */
	.global-nav__item.has-submenu.is-sub-open > .global-nav__link::before {
		content: "▼";
	}
}
	/* アコーディオン（下層） */
	.has-submenu { position:relative; }
	.submenu-toggle {
		position: absolute;
		right: 6px;
		top: 6px;
		width: 44px;
		height: 44px;
		border: 0;
		background:transparent;
		cursor: pointer;
	}
	.submenu .submenu__item {
		background: none;
		box-shadow: none;
		border-bottom: #da7c0c solid 1px;
	}
	.submenu {
		position: static;
		border: 0;
		box-shadow: none;
		padding: 0;
		background: transparent;
		display: none;
	}
	.submenu__link{ padding:12px 24px; }

	.has-submenu.is-sub-open > .submenu{
		display: block;
	}
  /* 画面全体＝オーバーレイ */
  .nav-panel {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55); /* 暗くする */
    z-index: 9999;

    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
  }

  .nav-panel.is-open{
    opacity: 1;
    pointer-events: auto;
  }
  /* 実際のメニュー（右から出る） */
	.nav-panel__inner {
		position: absolute;
		top: 0;
		right: 0;
		width: min(86vw, 300px);
		height: 100%;
		background: #fff;

		transform: translateX(100%);
		transition: transform .25s ease;
	}

  .nav-panel.is-open .nav-panel__inner{
    transform: translateX(0);
  }

  /* 閉じるボタン（左にちょい出す） */
  .nav-close {
    position: absolute;
    top: 0;
    left: -40px;
    width: 40px;
    height: 40px;
    border: 0;
    background: #ffc952;
		color: #fff;
    cursor: pointer;
  }
}

/* ///////////////////////////////////////////////////////////////HEADER/ */

/* /////////////////////////////////////////////////////////////////////////
[3 FOOTER] 
//////////////////////////////////////////////////////////////////////////*/
.site-footer {
	width: 100%;
	background: #ffc952;
	padding: 1em 0;
}
.site-footer__nav {
	width: 100%;
	margin: 0;
}
.site-footer__nav ul {
	display: flex;
	list-style: none;
	justify-content: center;
	column-gap: 1em
}
.site-footer__nav ul li a {
	color: #333;
	text-decoration: none;
}
.site-footer__nav ul li a:hover {
	color: #fff;
	text-decoration: none;
}
.site-footer .copy {
	text-align: center;
	font-size: .8em;
	color: #333;
	margin-top: 1em;
}
@media (max-width: 900px){
	.site-footer__inner {display: none;}
}
/* ///////////////////////////////////////////////////////////////FOOTER/ */

/* /////////////////////////////////////////////////////////////////////////
[4 TOP] 
//////////////////////////////////////////////////////////////////////////*/
main.lp {
  margin-top: 200px;
}

.front-title {
  font-size: 2rem;
  font-weight: 500;
  margin-bottom: 1rem;
}
.swiper-slide {
	position: relative;
	overflow: hidden;
}
/* これをやめる */
/* .swiper-slide img { width:100%; height:auto; } */

/* 背景だけ */
.swiper-slide .slide-bg{
  width: 100%;
  height: auto;
  display:block;
}

/* レイヤーは幅100%を食らわないように固定 */
.swiper-slide img.layer{
  width: auto;
  height: 60%;
}

.swiper-slide .copy {
	position: absolute;
	text-align: left;
	top: 50%;
	left: 50%;
	color: #fff;
	z-index: 10;
	font-family: "YuMincho", "Hiragino Mincho ProN", serif ;
}
/* レイヤー共通 */
.layer{
  position: absolute;
  height: 100%;
  width: auto;
  z-index: 5;
  opacity: 0;

  will-change: transform, opacity;
  backface-visibility: hidden;
  transition: transform .8s ease, opacity .6s ease;
}
/* 右 → 左 */
.layer-w {
	left: 20%;
	bottom: 10%;
	transform: translate3d(40px,0,0) scale(1);
}

/* 左 → 右 */
.layer-m {
	right: 0;
	bottom: 20%;
	transform: translate3d(-40px,0,0) scale(1);
}

/* アクティブになったら入ってくる */
.swiper-slide-active .layer-w,
.swiper-slide-active .layer-m {
	width: auto;
	height: 60%;
	transform: translateX(0);
	opacity: 1;
}
.fv_01 .copy {
	position: absolute;
	top: 40%;
	left: 10%;
	background: rgb(255,255,255,.7);
	padding: .5em .8em .5em .5em;
}
.fv_01 .copy p {
	text-align: center;
	font-size: 3em;
	color: #aa4e35;
	font-weight: bold;
}
.fv_02 .copy {
	position: absolute;
	top: 15%;
	left: 36%;
	background: rgb(255,255,255,.7);
	padding: .5em .8em .5em .5em;
}
.fv_02 .copy p {
	text-align: center;
	font-size: 3em;
	color: #aa4e35;
	font-weight: bold;
}
.fv_03 .copy {
	position: absolute;
	top: 20%;
	left: 10%;
	background: rgb(255,255,255,.7);
	padding: .5em .8em .5em .5em;
}
.fv_03 .copy h2 {
	font-size: 3em;
	color: #aa4e35;
	font-weight: bold;
}
.fv_03 .copy p {
	text-align: center;
	font-size: 2em;
	color: #aa4e35;
	font-weight: bold;
}
.fv_04 .copy {
	position: absolute;
	top: 40%;
	left: 30%;
	background: rgb(255,255,255,.7);
	padding: .5em .8em 0 .5em;
}
.fv_04 .copy p {
	text-align: center;
	font-size: 2em;
	color: #aa4e35;
	font-weight: bold;
}
.dsp_contents {
	text-align: center;
	width: 98%;
	margin: 5em auto 0;
	max-width: 900px;
}
article {
	margin-top: 2em;
}
.parallax {
  opacity: 0;
  transform: translateY(30px);
  transition:
    transform .8s ease,
    opacity .6s ease;
}
.parallax.is-show {
  opacity: 1;
  transform: translateY(0);
}
.problem h2 {
	text-align: center;
	font-size: 3em;
	line-height: 1.6em;
}
.problem p {
	text-align: center;
}

.problem h2 .imp {
	margin: 0 .3em;
}
figure.guest {
	margin: 0 auto;
	width: 98%;
}
figure img {
	width: 100%;
	height:auto
}
.stripe {
  background: repeating-linear-gradient(
    45deg,
    #ffc952,
    #ffc952 10px,
    #ffffff 10px,
    #ffffff 20px
  );
	width: 98%;
	max-width: 900px;
	margin: 2em auto 0;
	padding: .5em;
	position: relative;
}
i.num {
	position: absolute;
	left: 0;
	top:-.4em;
	font-size: 8em;
	font-weight:bold;
	color: #aa4e35;
}
.stripe-inner {
	background: #fff;
	padding: 1em;
	text-align: center;
}
.stripe-inner h3 {
	font-size: 3em;
	padding-left: 3em;
	text-align: left;
}
.stripe-inner p {
	font-size: 1.6em;
	text-align: center;
}
.stripe-inner figure {
	width: 80%;
	max-width: 400px;
	margin: 0 auto;
}
.stripe-inner .artist {
	display: flex;
	justify-content: center;
	gap: 1em;
	margin-top: 1em;
	width: 100%;
	flex-wrap: wrap;
}
.stripe-inner .artist figure {
	width: 30%;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* PC：横4 */
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 正方形 */
.photo-grid li {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.pentagon-orange {
  width: 100%;
  background: #ffc952;
	border-radius: .3em;

  /* 上：水平 / 下：左右が斜めで中央がVの谷 */
  clip-path: polygon(
    0% 0%,     /* 左上 */
    100% 0%,   /* 右上 */
    100% 70%,  /* 右下手前 */
    50% 100%,  /* 下の谷（中央） */
    0% 70%     /* 左下手前 */
  );
	margin-top: 3em;
}
.pentagon-gold {
  width: 100%;
  background: linear-gradient(
    to bottom,
    #fff1b8 0%,   /* ハイライト */
    #e6c15a 20%,
    #c9a23f 50%,  /* メインゴールド */
    #a8832a 70%,
    #f5e08a 100%
  );
	border-radius: .3em;

  /* 上：水平 / 下：左右が斜めで中央がVの谷 */
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% 70%,
    50% 100%,
    0% 70%
  );
	margin-top: 3em;
}
.pentagon h2 {
	font-size: 3em;
	color: #aa4e35;
	padding: .5em 0 1em;
}
/* 画像を枠いっぱいに */
.photo-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.experience .box {
	display: flex;
	border: 1px solid #ffc952;
	width: calc(100% - 2em);
	padding: 1em;
	margin: 2em auto;
}
.experience .box .box_inner {
	width: 50%;
}
.experience .box .box_inner .pict {
	width: 100%;
	max-width: 400px;
	margin: 0 auto;
}
.experience .box .box_inner .pict img {
	width: 100%;
	height: auto;
}
.experience .box .box_inner dd {
  text-align: left;
}

.door-frame {
  position: relative;
  width: 100%;
  max-width: 669px;
  aspect-ratio: 669 / 715;
  margin: 0 auto;

  perspective: 1400px;
  overflow: hidden;
}

/* ===== 中身（背景） ===== */
.door-content {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.door-content .window {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.door-content .guest {
  position: absolute;
  inset: 0;
  z-index: 1;
	width: 98%;
	height: auto;
}

/* ===== ドア共通 ===== */
.door {
  position: absolute;
  top: 4.3%;                 /* 微調整：上下中央寄せ */
  width: 43.2%;
  height: 83.5%;

  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: transform 1.1s cubic-bezier(.2,.8,.2,1);
  z-index: 10;
}

/* 左右ドア位置 */
.door--left {
  left: 6.7%;
  transform-origin: left center;
}

.door--right {
  right: 7.5%;
  transform-origin: right center;
}

/* 開閉アニメーション */
.door-frame.is-open .door--left {
  transform: rotateY(-70deg);
}

.door-frame.is-open .door--right {
  transform: rotateY(70deg);
}

/* 画像共通 */
.door img,
.door-content img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.voice .voice_box {
	display: flex;
	justify-content: space-between;
	margin-top: 1.5em;
}
.voice .voice_box figure {
	width: 25%;
}
.voice .voice_box figure img {
	width: 100%;
}
.voice .voice_box .bubble-left {
	width: 70%;
  position: relative;
  display: inline-block;
  padding: 12px 16px;
  background: #e6c15a; /* 好きな色 */
  border-radius: 12px;
  color: #333;
	text-align: left;
	font-size: 1.2em;
	min-height: unset;
}

/* しっぽ */
.bubble-left::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 16px;
  border-width: 8px 10px 8px 0;
  border-style: solid;
  border-color: transparent #e6c15a transparent transparent;
}
.bubble-left {
  animation: bubbleInLeft .4s ease-out forwards;
}
figure figcaption {
	letter-spacing: -.05em;
}

@keyframes bubbleInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.coreage h3 {
	font-size: 2em;
}
.coreage .section-inner {
	max-width: 900px;
	margin: 4em auto 0;
	padding: 0 1rem;
}
.tilt-text {
  display: inline-block;     /* 回転に必須 */
  transform: rotate(-3deg);  /* マイナスで右上がり */
}
.line-olive {
	padding: 0 .5em 0 .3em;
}
.line-olive::after {
  background: rgba(50, 50, 50, .8);
	bottom: -.3em;
	height: .1em;
}

/* 全体ラッパー */
.square-wrap {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 40px auto;

  aspect-ratio: 1 / 1;   /* 常に正方形 */
}

/* 4分割グリッド */
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  width: 100%;
  height: 100%;
  gap: clamp(8px, 2vw, 16px);
}

.cell {
  background: #fff;
  font-size: clamp(14px, 2vw, 18px);
	padding: .5em .5em .5em .5em;
	background: #F5F5F5;
}
.cell:nth-child(3),
.cell:nth-child(4) {
	padding: 15em .5em .5em .5em;
}
.cell:nth-child(2),
.cell:nth-child(3) {
	background: #c0c0c0;
}

/* 中央円レイヤー */
.center-circle {
  position: absolute;
  top: 43%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 50%;            /* ← レスポで自然に縮む */
  aspect-ratio: 1 / 1;

  border: 3px solid #000;
  border-radius: 50%;
  background: #000;

  font-size: clamp(14px, 2vw, 20px);
  font-weight: bold;
	color: #FFF;

  z-index: 2;
}
.center-circle figure {
	width: 65%;
	margin: .5em auto 0;
}
.center-circle figure img {
	width: 100%;
}
.cell h4,
.center-circle h4 {
	font-size: 1.4em;
	margin-top: .5em;
	font-weight: bold;
}
.cell h5,
.center-circle h5 {
	font-size: 1em;
	margin-top: .5em;
	font-weight: bold;
}
.cell p {
	text-align: left;
}
.center-circle p {
	font-size: 1em;
	text-align: center;
	margin-bottom: .5em;
	line-height: 1.4em;
}
.experience h2,
.coreage h2 {
	font-size: 3em;
	border: bottom 2px solid #b8860b;
	letter-spacing: .2em;
}
.course-fit {
  max-width: 900px;
  margin: 4rem auto;
  padding: 0 1rem;
}

.fit-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 3vw, 32px);
	text-align: left;
}

.fit-card{
  border-radius: 16px;
  padding: 24px;
}

.fit-card.is-good{ background:#6A6A6A;color: #FFF; }
.fit-card.is-bad{ background:#F5F5F5; }

.is-warning {
  grid-column: 1 / -1;
  background: #fff7d6;
  border-left: 6px solid #e6c15a;
	margin-top: 2em;
}

.fit-warning h4{
  margin: 0 0 8px;
  font-size: 1rem;
}

.fit-warning p{
  margin: 0;
  font-size: .95rem;
  line-height: 1.7;
}
.course-section{
  max-width: 900px;
  margin: 60px auto;
  padding: 0 16px;
}

.course-title{
  text-align: center;
  margin-bottom: 40px;
}

/* 1カラム（主役） */
.course-main{
  background: #000;
  color: #fff;
  padding: 32px;
  margin-bottom: 40px;
	text-align: left;
}

.course-main h4{
  font-size: 1.3em;
  margin-bottom: .5em;
}

.course-main .lead{
  font-weight: bold;
  margin-bottom: 1em;
}

/* 2カラム */
.course-sub{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.course-box{
  background: #f5f5f5;
  padding: 24px;
	text-align: left;
}

.course-box h4{
  margin-bottom: .5em;
}

/* リスト */
.course-section ul{
  margin: 1em 0;
  padding-left: 1.2em;
}

.course-section li{
  margin-bottom: .4em;
}

/* 注釈 */
.note{
  font-size: .9em;
  opacity: .8;
}
/* === チャット対話レイアウト === */

.chat {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.msg {
  display: flex;
  align-items: flex-end;
  max-width: 100%;
}

/* 左：Aさん */
.msg.left {
  justify-content: flex-start;
}

/* 右：先生 */
.msg.right {
  justify-content: flex-start;
  flex-direction: row-reverse;
}

.icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 10px;
}

/* 吹き出し */
.bubble {
  max-width: 80%;
  padding: 12px 14px;
  border-radius: 16px;
  line-height: 1.7;
  position: relative;
  font-size: 1.2em;
	text-align: left;
}

/* Aさん吹き出し */
.msg.left .bubble {
  background: #f5f7ff;
  border-top-left-radius: 6px;
}

/* 先生吹き出し */
.msg.right .bubble {
  background: #f2fbf6;
  border-top-right-radius: 6px;
}

/* 吹き出しの三角 */
.msg.left .bubble::before {
  content: "";
  position: absolute;
  left: -8px;
  bottom: 14px;
  width: 14px;
  height: 14px;
  background: #f5f7ff;
  transform: rotate(45deg);
}

.msg.right .bubble::before {
  content: "";
  position: absolute;
  right: -8px;
  bottom: 14px;
  width: 14px;
  height: 14px;
  background: #f2fbf6;
  transform: rotate(-45deg);
}

.dialog-conclusion-bg{
  background: #f5f5f5;
  padding: 48px 24px;
  margin: 60px 0;
}

.dialog-conclusion-bg p{
  max-width: 720px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.9;
}
/* ===== FAQ アコーディオン ===== */

.faq {
  border-top: 1px solid #e5e5e5;
}

/* 1問ずつ区切る */
.faq-item {
  border-bottom: 1px solid #e5e5e5;
  padding: 0;
	font-size: 1.2em;
}

/* デフォルトの▶︎を消す */
.faq-item summary {
  list-style: none;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}

/* Q（箇条書き風） */
.faq-item summary {
  position: relative;
  padding: 14px 40px 14px 22px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1.6;
}

/* 箇条書きQマーク */
.faq-item summary::before {
  content: "Q";
  position: absolute;
  left: 8px;
  top: 14px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: #6A6A6A;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.faq-item summary.pat01::before {
  color: #333;
  background: #C0C0C0;
}
.faq-item summary.pat02::before {
  color: #333;
  background: #E0E0E0;
}
.faq-item summary.pat03::before {
	color: #333;
  background: #F5F5F5;
}

/* 開閉アイコン（＋ / −） */
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 16px;
  top: 12px;
  font-size: 18px;
  color: #999;
  transition: transform 0.2s ease;
}

/* 開いたとき */
.faq-item[open] summary::after {
  content: "−";
}

/* ホバーで「クリックできる感」 */
.faq-item summary:hover {
  background: #fafafa;
}
.faq-item summary p {margin: 0 .5em 0 1.5em;}

/* A（回答） */
.faq-answer {
  padding: 10px 22px 18px;
  font-size: 14px;
  line-height: 1.7;
  color: #444;
}

.course-triangle.up{
  max-width: 900px;
  margin: 60px auto;
}

/* 行 */
.course-row.apex{
  display: flex;
  justify-content: center;
}

.course-row.base{
  display: flex;
  gap: 32px;
  margin-top: 40px;
}

/* 共通 */
.course{
  position: relative; /* ←これ重要 */
  background: #f5f5f5;
  padding: 28px;
  line-height: 1.8;
  overflow: hidden; /* はみ出し防止 */
}
/* 共通リボン */
.course::before{
  content: "";
  position: absolute;
  top: 14px;
  left: -50px;
  width: 160px;
  padding: 6px 0;
  text-align: center;
  font-size: 13px;
  font-weight: bold;
  color: #fff;
  transform: rotate(-45deg);
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}

/* おすすめ */
.course.is-recommend::before{
  content: "おすすめ！";
  background: linear-gradient(135deg, #d4af37, #b8941f);
}

/* まずはここ */
.course.is-start::before{
  content: "まずはここ";
  background: linear-gradient(135deg, #888, #555);
}
.course h5{
	margin-left: 2em;
	font-size: 1.6em;
}
/* 主役 */
.course.advance{
  width: 60%;
  background: #000;
  color: #fff;
}
.course.advance h4{
  font-size: 1.2em;
  margin-bottom: .5em;
	margin-left: 2em;
}

/* 下段 */
.course.basic,
.course.trial{
  width: 50%;
}
.course.basic{
  background: linear-gradient(135deg, #2f2f2f, #3a3a3a);
  color: #f1f1f1;
}
.course.trial{
  background: #f3f7fb;
  color: #333;
  border: 1px solid #ddd;
}
/* リスト */
.course ul{
  margin: 1em 0;
  padding-left: 1.2em;
}
.course ul li{
  margin-bottom: .4em;
}

/* 注釈 */
.course .note{
  font-size: .9em;
  opacity: .8;
}
.check-list{
  list-style: none;
  padding-left: 0;
}

.check-list li{
  position: relative;
  padding-left: 1.8em;
  margin-bottom: .5em;
}

.check-list li::before{
  content: "✓";          /* レ点 */
  position: absolute;
  left: 0;
  top: 0;
  color: #da7c0c;        /* アクセント色（オレンジ系） */
  font-weight: bold;
}
.price span {
	font-size: 1.8em;
}
.pay-toggle{
  background: none;
  border: none;
  color: #005fcc;
  font-weight: 600;
  cursor: pointer;
}

.pay-detail{
  display: none;
  margin-top: .5em;
  padding: .8em;
  background: #f7f9fc;
  font-size: .9em;
}

.pay-detail.is-open{
  display: block;
}
.section-inner.read_box h4{
  position: relative;
  padding-left: 14px;
  margin-bottom: .8em;
  font-weight: 600;
	line-height: 1.6em;
}

.section-inner.read_box h4::before{
  content: "";
  position: absolute;
  left: 0;
  top: .15em;
  width: 4px;
  height: 1.4em;
  background: currentColor;
}
.flow-vertical{
  list-style:none;
  padding:0;
  margin:40px 0;
  border-left:3px solid #cfa85a;
}

.flow-vertical li{
  position:relative;
  padding:0 0 24px 30px;
  font-size:1.6rem;
}

.flow-vertical li:last-child{
  padding-bottom:0;
}

.flow-vertical .num{
  position:absolute;
  left:-18px;
  top:.3em;
  width:32px;
  height:32px;
  background:#000;
  color:#fff;
  border-radius:50%;
  font-size:.85em;
  display:flex;
  align-items:center;
  justify-content:center;
}
/* レスポ */
@media (max-width: 900px){
  main.lp {
    margin-top: 96px;
  }
	.fv_01 .copy {
		top: auto;
		left: auto;
		bottom: 10%;
		padding: 0 0 0 0;
	}
	.fv_01 .copy p {
		font-size: 2em;
		margin: 0;
	}
	.fv_01 .copy p br {
		display: none;
	}
	.fv_02 .copy {
		top: auto;
		left: 0;
		bottom: 10%;
		padding: 0 0 0 0;
	}
	.fv_02 .copy p {
		text-align: center;
		font-size: 2em;
		margin: 0;
		width: 100%;
	}
	.fv_02 .copy p br {
		display: none;
	}
	.fv_03 .copy h2 {
		font-size: 2em;
	}
	.fv_03 .copy {
		top: auto;
		left: 0;
		bottom: 10%;
		padding: 0 0 0 0;
	}
	.fv_03 .copy p {
		font-size: 2em;
		margin: 0;
	}
	.fv_04 .copy {
		top: auto;
		left: 0;
		bottom: 15%;
		padding: 0 0 0 0;
		width: 100%;
	}
	.fv_04 .copy p {
		font-size: 2em;
		margin: 0;
	}
	.problem h2 {
		text-align: center;
		font-size: 1.5em;
	}
	.problem h2 .imp {
		font-size: 1.5em;
		font-weight:bold;
		color:#FF0000;
	}
  .photo-grid {
    grid-template-columns: repeat(3, 1fr); /* 横3 */
  }
	.experience .box {
		display: block;
	}
	.experience .box .box_inner {
		width: 100%;
	}
	.stripe-inner h3 {
		font-size: 1.8em;
		padding-left: 2.5em;
		text-align: left;
	}
	.stripe-inner .artist figure {
		width: 45%;
	}
	.stripe-inner p {
		font-size: 1em;
	}
	.pentagon h2 {
		font-size: 1.6em;
		padding: 1em 0 2em;
	}
  .voice .voice_box {
    display: block; /* flex解除 */
  }
  .voice .voice_box figure {
		width: 60%;
		margin: 0 auto;
  }
	.voice .voice_box .bubble-left {
		width: 98%;
	}

	/* しっぽ */
	.bubble-left {
		margin-top: .5em;
	}
	.bubble-left::before {
		content: "";
		position: absolute;
		top: -10px;               /* 上に出す */
		left: 50%;
		transform: translateX(-50%);

		border-width: 0 10px 10px 10px;
		border-style: solid;
		border-color: transparent transparent #e6c15a transparent;
	}
	.voice .voice_box figure figcaption {
		font-size: 1.2em
	}
	.coreage h3 {
	font-size: 1.6em;
}

  /* 正方形縛りを解除 */
  .square-wrap {
    aspect-ratio: auto;
  }

  /* グリッドを縦1列に */
  .grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 16px;
  }

  /* padding調整（段差いらない） */
  .cell {
    padding: 1em;
  }

  .cell:nth-child(3),
  .cell:nth-child(4) {
    padding: 1em;
  }

  /* 中央円は通常フローに戻す */
  .center-circle {
    position: relative;
    top: auto;
    left: auto;
    transform: none;

    width: 100%;
    max-width: 320px;
    margin: 24px auto;

    z-index: 0;
  }
	.cell {
		background: #F5F5F5;
	}
	.cell:nth-child(2) {
		background: #E0E0E0;
	}
	.cell:nth-child(3) {
		background: #C0C0C0;
	}
	.cell:nth-child(4) {
		background: #6A6A6A;
		color: #FFF;
	}
  .fit-grid{ grid-template-columns: 1fr; }
  .course-sub{
    grid-template-columns: 1fr;
  }
  .bubble {
    max-width: 85%;
    font-size: 14px;
  }
  .faq-item summary {
    font-size: 14px;
  }
  .faq-answer {
    font-size: 13.5px;
  }
  .course-row.base{
    flex-direction: column;
  }
  .course.advance,
  .course.basic,
  .course.trial{
    width: 100%;
  }
}

/* //////////////////////////////////////////////////////////////////TOP/ */

/* /////////////////////////////////////////////////////////////////////////
[5 DFAULT]
//////////////////////////////////////////////////////////HI-SPEC-COADING/*/
.l-main {
  max-width: 820px;
  margin: 200px auto 0;
  padding: 4rem 1.5rem;
}

.entry-title {
  margin-bottom: 1rem;
}

.post-content article {
  margin-bottom: 4rem;
}

.block-body {
  margin-top: 1.5rem;
}
:root {
  --accent: #ffd86a; /* 少し明るめ */
  --accent-soft: #fff1c7;
  --text-main: #333;
  --text-sub: #666;
}
/* =========================
h1（記事タイトル）
========================= */
.l-main h1{
  font-size: 2.3rem;
  font-weight: 700;               /* 少しだけ軽く */
  line-height: 1.3;
  letter-spacing: .05em;
  margin: 2.5rem 0 2rem;
  padding: .2em 0 .55em;
  color: var(--text-main);
  position: relative;
}

/* 下のアクセント帯（やわらか版） */
.l-main h1::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:4px;
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--accent) 70%, #fff 30%) 0 45%,
    transparent 45% 100%
  );
  border-radius: 3px;
  opacity:.7;
}

/* 2本目の細ライン（黒→サブカラー寄せ） */
.l-main h1::before{
  content:"";
  position:absolute;
  left:0;
  bottom:-9px;
  width:110px;
  height:2px;
  background: var(--text-sub);
  opacity:.5;
}

/* =========================
h2（大きな区切り）
========================= */
.l-main h2 {
  font-size: 1.8rem;
  font-weight: 600;
  margin: 3rem 0 1.5rem;
  padding: 0.4rem 0.6rem;
  line-height: 1.4;
  position: relative;
}

.l-main h2::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  margin-top: 0.5rem;
  background: linear-gradient(
    90deg,
    var(--accent) 0%,
    rgba(255, 216, 115, 0.2) 100%
  );
}


/* =========================
h3（ブロックタイトル）
========================= */
.l-main h3 {
  font-size: 1.4rem;
  font-weight: 600;
  margin: 2.5rem 0 1rem;
  padding-left: 0.9rem;
  line-height: 1.4;
  position: relative;
}

.l-main h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4rem;
  width: 5px;
  height: 1.1rem;
  background: var(--accent);
  border-radius: 2px;
}


/* =========================
h4（小見出し）
========================= */
.l-main h4 {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 1.8rem 0 0.8rem;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.l-main h4::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
}


/* =========================
h5（補足）
========================= */
.l-main h5 {
  font-size: 1rem;
  font-weight: 500;
  margin: 1.5rem 0 0.5rem;
  color: var(--text-sub);
  line-height: 1.4;
}
/* 単体画像 */
.article-image {
  margin: 2rem 0;
}

.article-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}

.article-image figcaption {
  font-size: 0.9rem;
  color: #666;
  margin-top: 0.5rem;
}


/* ギャラリー */
.article-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 2rem 0;
}

.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}


/* タブレット */
@media (max-width: 1024px) {
  .article-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* スマホ */
@media (max-width: 600px) {
  .article-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =========================
目次作成
========================= */
.toc-inner {
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.toc-inner.is-collapsed {
  max-height: 160px;
}

.toc-toggle {
  display: block;
  margin: 1.2rem auto 0;
  background: none;
  border: none;
  padding: 0;
  font-size: 0.85rem;
  color: #777;
  cursor: pointer;
  letter-spacing: 0.05em;
}

.toc-toggle:hover {
  color: #ffc952;
}
.toc-box {
  background:
    linear-gradient(#fafafa, #fafafa),
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,0.02),
      rgba(0,0,0,0.02) 1px,
      transparent 1px,
      transparent 12px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(0,0,0,0.02),
      rgba(0,0,0,0.02) 1px,
      transparent 1px,
      transparent 12px
    );
  border: 1px solid #e5e5e5;
  padding: 1.8rem 2rem;
  margin: 2.5rem 0 3rem;
  border-radius: 6px;
	box-shadow: 0 3px 8px rgba(0,0,0,0.04);
}
.toc-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 1rem;
  letter-spacing: 0.05em;
}
.toc-box {
  background:
    linear-gradient(#fafafa, #fafafa),
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,0.02),
      rgba(0,0,0,0.02) 1px,
      transparent 1px,
      transparent 12px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(0,0,0,0.02),
      rgba(0,0,0,0.02) 1px,
      transparent 1px,
      transparent 12px
    );
  border: 1px solid #e5e5e5;
  padding: 1.8rem 2rem;
  margin: 2.5rem 0 3rem;
  border-radius: 6px;
}
.toc-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.toc-box li {
  position: relative;
  padding-left: 1.2rem;
  margin-bottom: 0.6rem;
}
.toc-box li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #9aa6b2; /* 青みをほんの少し含むグレイッシュ */
  font-size: 0.85rem;
}
.toc-box li:last-child {
  margin-bottom: 0;
}

.toc-box a {
  text-decoration: none;
  color: #444;
  font-size: 0.95rem;
  transition: color 0.2s ease;
}

.toc-box a:hover {
  color: #ffc952;
}

/* ///////////////////////////////////////////////////////////////DFAULT/ */

/* /////////////////////////////////////////////////////////////////////////
[10 HI-SPEC-COADING]
//////////////////////////////////////////////////////////HI-SPEC-COADING/*/

:root {
  --accent: #da7c0c;     /* ベースカラー */
  --mark-main: #FFE4B5;  /* やわらかオレンジ */
  --mark-sub:  #e6f4ee;  /* やわらかグリーン */
}


/* ===============================
strong（意味的に重要）
================================ */
strong {
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 1.05em; /* わずかに大きく */
}


/* ===============================
b（視線誘導）
================================ */
b {
  font-weight: 600;
}


/* ===============================
マーカー共通
================================ */
.mark-main,
.mark-sub {
  padding: 0 0.15em;
  background-image: linear-gradient(
    transparent 60%,
    var(--mark-color) 60%
  );
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size 0.8s cubic-bezier(.25,.8,.25,1);
}

/* 色 */
.mark-main { --mark-color: #FFE4B5; }
.mark-sub  { --mark-color: #e6f4ee; }

/* 発火用 */
.mark-main.is-active,
.mark-sub.is-active {
  background-size: 100% 100%;
}

/* SPACE */
.ls-01 {letter-spacing: -.1em;}
/* MARGIN */
.mt0 {margin-top: 0 !important;}
.mt10 {margin-top: 1em !important;}
.mt20 {margin-top: 2em !important;}
.mt30 {margin-top: 3em !important;}
.ml0 {margin-left: 0 !important;}

/* WIDTH */
.w10{ width:10px; } .w20{ width:20px; } .w30{ width:30px; } .w60{ width:60px; } .w70{ width:70px; } .w100{ width:100px; } .w140{ width:140px; } .w200{ width:200px; } .w300{ width:300px; } .w320{ width:320px; }

/* HEIGHT */
.h10{ height:10px; }

/* DECORATION */
.tdn { text-decoration: none;}
.fwb { font-weight: bold;}

/* COLOR */
.color1 {	color:#006027;}
.color2 {	color:#e24949;}
.color3 {	color:#aa4e35;}
.color4 {	color:#ff0000;}
.color5 {	color:#ffcdcd;}

/* TEXT-STYLE */
.tac { text-align: center !important;}
.tal { text-align: left !important;}

/* BG_COLOR */
.bg_color1 { background-color: #f6f8f8;}

/* BUTTON */
.btn_area {
	text-align:center;
}
.btn {
	border-radius: .5em;
	padding: .5em 2em;
	line-height: 1.6;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
/* green */
.btn-success {
	color: #e8f0de;
	border: 1px solid #538312;
	background: linear-gradient(to bottom, #7db72f, #4e7d0e);
}

.btn-success:hover {
	background: linear-gradient(to bottom, #8fd63a, #5a8f12);
}

/* gray */
.btn-secondary {
	color: #e9e9e9;
	border: 1px solid #555;
	background: linear-gradient(to bottom, #888, #575757);
}

.btn-secondary:hover {
	background: linear-gradient(to bottom, #999, #666);
}

/* orange */
.btn-warning {
	color: #fef4e9;
	border: 1px solid #da7c0c;
	background: linear-gradient(to bottom, #faa51a, #f47a20);
}

.btn-warning:hover {
	background: linear-gradient(to bottom, #ffb733, #ff8a3d);
}

/* blue */
.btn-primary {
	color: #f2f8ff;
	border: 1px solid #4a90c2;
	background: linear-gradient(to bottom, #7fbce8, #4a90c2);
}

.btn-primary:hover {
	background: linear-gradient(to bottom, #92c9ee, #5aa0d4);
}
/* ////////////////////////////////////////////////////////////////////// */