@charset "utf-8";

/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");

/*Google Fontsの読み込み
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');

/*slick.cssの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css");

/*テンプレート専用cssファイルの読み込み
---------------------------------------------------------------------------*/
@import url("slide.css");
@import url("inview.css");
/* 箇条書きの「●」だけ色を変える */
.list-normal .text ul li::marker{
  color: var(#5FAE7A); /* #5FAE7A などでもOK */
}

/*CSSカスタムプロパティ（サイト全体を一括管理する為の設定）
---------------------------------------------------------------------------*/
:root {

	/* Brand + UI palette (overall: soothing green, warm pink accent) */
	--primary-color: #68B868;			/* Logo green (brand accent / buttons / links) */
	--primary-inverse-color: #fff;		/* On primary */

	--primary-color-rgb: 104,184,104;	/* rgb of --primary-color */

	--green-main: #5FAE7A;				/* Main green for sections/bands */
	--green-dark: #2F5E46;				/* Deep green for footer/headings */
	--green-soft: #EAF6EF;				/* Soft mint background */

	--pink-accent: #E98EA1;				/* Warm pink highlight */
	--pink-soft: #F8E6EA;				/* Soft pink background */

	--bg-ivory: #FBFAF6;				/* Overall background */
	--text-color: #4A4A4A;				/* Body text */
	--line-color: #DDE6DD;				/* Borders/lines */

	--global-space: 3vw;				/* site spacing */
/*animation1のキーフレーム設定（開閉ブロックのアニメーションに使用）
---------------------------------------------------------------------------*/
@keyframes animation1 {
	0% {left: -200px;}
	100% {left: 0px;}
}
/* ===== 特徴1：右側にうっすら飾り画像を追加 ===== */
.feature-hero__inner{
  position: relative;
  overflow: hidden; /* はみ出し防止 */
}
/* 「Hare Care School で叶える3つのこと」見出しを確実にセンター */
.feature-flow h2.center{
  width: 100%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* サブコピーもセンター */
.feature-flow p.center{
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 900px; /* 長文の横伸び防止（不要なら削除OK） */
}

/* 右側の飾り（うっすら） */
.feature-hero__inner::after{
  content: "";
  position: absolute;
  right: 36px;
  top: 50%;
  transform: translateY(-50%);
  width: min(340px, 28vw);
  height: min(340px, 28vw);
  background: url("images/feature_illust.png") no-repeat center / contain;
  opacity: 0.14;        /* 濃さ（0.10〜0.18くらいで調整） */
  pointer-events: none; /* クリック邪魔しない */
}

/* 文字が飾りに被らないように、右側に余白を足す */
.feature-hero__content{
  padding-right: min(360px, 30vw);
}

/* スマホでは飾りを消す（見切れ防止） */
@media (max-width: 900px){
  .feature-hero__inner::after{ display:none; }
  .feature-hero__content{ padding-right: 0; }
}

/*opa1のキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
@keyframes opa1 {
	0% {opacity: 0;}
	100% {opacity: 1;}
}


/*spinのキーフレーム設定（トップページの大きな円形の文字が回るアニメーション）
---------------------------------------------------------------------------*/
@keyframes spin {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}


/*全体の設定
---------------------------------------------------------------------------*/
body * {box-sizing: border-box;}
.firsttitle {
	color: #5FAE7A;
	font-weight: 500;
	font-size: 1.3rem;
}


html,body {
	font-size: 13px;	/*基準となるフォントサイズ。*/
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

		html, body {
			font-size: 16px;	/*基準となるフォントサイズ。*/
		}

	}/*追加指定ここまで*/


body {
	margin: 0;padding:0;
	font-family: "M PLUS 1", "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	-webkit-text-size-adjust: none;
	background: var(--bg-ivory) url('../images/bg.png') repeat center top / 150px;	/*背景色、背景壁紙の読み込み。壁紙の幅を150pxに指定してリピート。*/
	color: var(--text-color);		/*文字色*/
	line-height: 2;		/*行間*/
	animation: opa1 0.2s 0.5s both;	/*0.5秒待機後、0.2秒かけてフェードイン表示*/
}

/*リセット*/
figure {margin: 0;}
dd {margin: 0;}
nav,ul,li,ol {margin: 0;padding: 0;}
nav ul {list-style: none;}
input {font-size: 1rem;}

/*ul,ol*/
ul,ol {margin-left: 1.5rem;margin-bottom: 1rem;}

/*table全般の設定*/
table {border-collapse:collapse;}

/*画像全般の設定*/
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}

/*videoタグ
video {max-width: 100%;}*/

/*iframeタグ*/
iframe {width: 100%;}

/*sectionが続く場合*/
section + section {
	margin-top: 8vw;	/*sectionの上に空けるスペース*/
}


/*リンク（全般）設定
---------------------------------------------------------------------------*/
a {
	color: var(--text-color);		/*リンクテキストの色*/
	transition: 0.3s;	/*マウスオン時の移り変わるまでの時間設定。0.3秒。*/
}
a:hover {
	color: var(--primary-color);	/*文字色。css冒頭で指定しているprimary-colorを読み込みます*/
	filter: brightness(1.2);		/*マウスオン時に少し明るくする*/
}


/*bg1背景
---------------------------------------------------------------------------*/
.bg1 {
	background: url('../images/bg1.png') no-repeat center top / 100%;	/*画像の読み込み、リピートせず、左右中央に配置、上部に配置で幅100%で配置*/
}


/*bg2背景
---------------------------------------------------------------------------*/
.bg2 {
	background:	url('../images/bg1.png') no-repeat left top / 100%;	/*画像の読み込み、リピートせず、左に配置、上部に配置で幅100%で配置*/
}


/*container
---------------------------------------------------------------------------*/
#container {
	overflow-x: hidden;
}


/*contents
---------------------------------------------------------------------------*/
#contents {
	padding: 6vw var(--global-space);	/*上下、左右へのボックス内の余白。左右はcss冒頭で指定しているglobal-spaceを読み込みます*/
}


/*ヘッダー
---------------------------------------------------------------------------*/
/*h1テキスト。このテンプレートでは、画面最上部の帯の左側に小文字で入れているテキストです。*/
header h1 {
	font-weight: normal;
	margin: 0;padding: 0;
	font-size: 0.8rem;		/*文字サイズを80%*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広く*/
}

	/*画面幅700px以下の追加指定*/
	@media screen and (max-width:700px) {

	header h1 {
		display: none;	/*表示しない*/
	}

	}/*追加指定ここまで*/


/*ヘッダー内のheader-inner（ロゴ画像とメニューブロックを囲むボックス）
---------------------------------------------------------------------------*/
/*ボックスの設定*/
.header-inner {
	position: relative;
	display: flex;			/*直接の子要素を横並びにする。この場合、ロゴとメニューブロックが対象。*/
	align-items: center;	/*天地中央に配置*/
	background: var(--bg-ivory);		/*背景色*/
}

/*トップページでのボックス*/
.home .header-inner {
	display: block;	/*flexを解除する*/
}


/*ヘッダー内のロゴ
---------------------------------------------------------------------------*/
/*ロゴ画像*/
#logo img {display: block;}
#logo {
	margin: 0;padding: 0;
	width: 200px;	/*ロゴ画像の幅*/
}

/*トップページのロゴ画像*/
.home #logo {
	width: 300px;	/*ロゴ画像の幅*/
	position: absolute;z-index: 1;
	left: 50%;
	top: 0px;
	transform: translateX(-50%);
}

	/*画面幅900px以下の追加指定*/
	@media screen and (max-width:900px) {
	
	/*ロゴサイズの上書き*/
	.home #logo {
		min-width: 120px;	/*最小幅を設定しておきます。これ以上は小さくなりません。*/
		width: 20vw;		/*幅。画面幅100%＝100vwです。*/
	}
	
	}/*追加指定ここまで*/


/*header-top（headerの最上部の帯ブロック）
---------------------------------------------------------------------------*/
/*ブロック全体*/
#header-top {
	padding: 5px var(--global-space);		/*上下、左右へのボックス内の余白。左右はcss冒頭で指定しているglobal-spaceを読み込みます*/
	background: var(--green-main);		/*背景色。css冒頭で指定しているprimary-colorを読み込みます*/
	color: var(--primary-inverse-color);	/*文字色。css冒頭で指定しているprimary-inverse-colorを読み込みます*/
	display: flex;		/*直接の子要素を横並びにする。この場合はh1テキストと、言語ボックスが対象。*/
	justify-content: space-between;	/*それぞれ両サイドに配置*/
	font-size: 0.8rem;	/*文字サイズを80%に*/
}

	/*画面幅700px以下の追加指定*/
	@media screen and (max-width:700px) {

	/*ブロック全体*/
	#header-top {
		justify-content: flex-end;	/*h1テキストが非表示になり、言語ボックスが左によるので、右側にとどまるように指定を変更*/
	}

	}/*追加指定ここまで*/

/*リンクテキスト*/
#header-top a {
	color: inherit;
}

/*言語ボックス全体の設定*/
#header-top .lang {
	list-style: none;margin: 0;padding: 0;
	margin-top: -5px;	/*上にずらす。#header-topの上下paddingの数字と合わせる。*/
	display: flex;		/*各言語を横に並べる*/
	gap: 1rem;			/*各言語同士に空けるスペース。１文字分。*/
}

/*言語ボックス１個あたり*/
#header-top .lang a {
	display: block;text-decoration: none;
	border-radius: 0px 0px 3px 3px;		/*角を丸くする指定。左上、右上、右下、左下の順番。*/
	padding: 0 1rem;					/*ボックス内の余白。上下、左右。*/
	background: rgba(255,255,255,0.2);	/*背景色。255,255,255は白の事で0.2は色が20%出た状態。*/
}


/*メニューブロック初期設定
---------------------------------------------------------------------------*/
/*メニューをデフォルトで非表示*/
#menubar {display: none;}
#menubar ul {list-style: none;margin: 0;padding: 0;}

/*上で非表示にしたメニューを表示させる為の設定*/
.large-screen #menubar {display: block;}
.small-screen #menubar.display-block {display: block;}

/*3本バーをデフォルトで非表示*/
#menubar_hdr.display-none {display: none;}

/*ドロップダウンをデフォルトで非表示*/
.ddmenu_parent ul {display: none;}

/*ddmenuを指定しているメニューに矢印アイコンをつける設定*/
a.ddmenu::before {
	font-family: "Font Awesome 5 Free";
	content: "\f078";		/*使いたいアイコン名（Font Awesome）をここで指定*/
	font-weight: bold;		/*この手の設定がないとアイコンが出ない場合があります*/
	font-size: 0.7rem;		/*文字サイズを70%に*/
	padding-right: 0.5rem;	/*右側に空ける余白。0.5文字分。*/
}


/*大きな端末、小さな端末共通のメニューブロック設定
---------------------------------------------------------------------------*/
/*メニュー１個あたりの設定*/
#menubar a {
	display: block;text-decoration: none;
}

/*小文字の英語部分*/
#menubar span {
	display: block;
	font-size: 0.7em;		/*文字サイズを親要素の70%に*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広くとる*/
	opacity: 0.6;			/*透明度。色が60%出た状態。*/
}


/*大きな端末用のメニューブロック設定
---------------------------------------------------------------------------*/
/*メニューブロックを囲むボックス*/
.large-screen #menubar {
	flex: 1;
}

/*大きな端末では１番目メニュー（ホーム）を非表示にする*/
.large-screen #menubar > nav > ul > li:nth-of-type(1) {
	display: none;
}

/*メニューブロック全体の設定*/
.large-screen #menubar > nav > ul {
	display: flex;	/*メニューを横並びにする*/
	justify-content: space-between;
	align-items: center;
}

/*メニュー１個あたりの設定*/
.large-screen #menubar li {
	flex: 1;			/*個々のメニューを均等にし、幅いっぱいまで使う設定*/
	position: relative;	/*ドロップダウンの幅となる基準を作っておく*/
	text-align: center;	/*テキストをセンタリング*/
}

/*現在表示中メニュー（current）*/
.large-screen #menubar li.current > a {
	border-bottom: 2px solid var(--primary-color);	/*下線の幅、線種、varは色のことでcss冒頭で指定しているprimary-colorを読み込みます。。*/
}

/*トップページの3個目のメニューへの指定　※html側で順番をカウントして下さい。*/
.home.large-screen #menubar > nav > ul > li:nth-of-type(3) {
	margin-right: 150px;	/*右側に空けるスペース。ロゴに重ならないようにする為。*/
}

/*トップページの4個目のメニューへの指定　※html側で順番をカウントして下さい。*/
.home.large-screen #menubar > nav > ul > li:nth-of-type(4) {
	margin-left: 150px;		/*左側に空けるスペース。ロゴに重ならないようにする為。*/
}

/*リンク（a要素）の設定*/
.large-screen #menubar li a {
	padding: 0.8rem 0;	/*上下、左右の余白*/
}


/*大きな端末、小さな端末、共通のドロップダウンメニュー設定
---------------------------------------------------------------------------*/
/*ドロップダウンブロック*/
.large-screen #menubar ul ul,
.small-screen #menubar ul ul {
	animation: opa1 0.5s 0.1s both;	/*0.1秒待機後、0.5秒かけてフェードイン表示*/
}


/*大きな端末用のドロップダウンメニュー
---------------------------------------------------------------------------*/
/*ドロップダウンメニューブロック全体*/
.large-screen #menubar ul ul {
	position: absolute;z-index: 2;
	width: 100%;
	top: 100%;
	left: 0px;
}

/*ドロップダウンメニュー1個あたりの上下、左右への余白。*/
.large-screen #menubar ul ul a {
	padding: 0.6rem 1rem !important;	/*上下、左右へのメニュー内の余白*/
	background: #fff;	/*背景色*/
	margin: 3px 3px 0;	/*メニューの外側に空けるスペース。上、左右、下への順番。*/
	border-radius: 5px;	/*角を丸くする指定*/
	border: 1px solid var(--line-color);	/*枠線の幅、線種、色*/
}

/*マウスオン時*/
.large-screen #menubar ul ul a:hover {
	background: var(--primary-color);		/*背景色。css冒頭で指定しているprimary-colorを読み込みます*/
	color: var(--primary-inverse-color);	/*文字色。css冒頭で指定しているprimary-inverse-colorを読み込みます*/
}


/*小さな端末用の開閉ブロック
---------------------------------------------------------------------------
/*メニューブロック設定*/
.small-screen #menubar.display-block {
	position: fixed;overflow: auto;z-index: 100;
	left: 0px;top: 0px;
	width: 100%;
	height: 100%;
	padding-top: 100px;	/*上に空ける余白。ハンバーガーアイコンと重ならない為の指定ですのでお好みで変更OK。*/
	background: var(--primary-color) url('../images/bg_small_screen.png') no-repeat left bottom / 100vw;	/*背景色、背景画像の読み込み。画像は画面幅に合わせる*/
	animation: animation1 0.2s both;		/*animation1を実行する。0.2sは0.2秒の事。*/
	color: var(--primary-inverse-color);	/*文字色。css冒頭で指定しているprimary-inverse-colorを読み込みます*/
}

/*メニュー１個あたりの設定*/
.small-screen #menubar li {
	border: 1px solid #fff;	/*枠線の幅、線種、色*/
	margin: 1rem;			/*メニューの外側に空けるスペース*/
	border-radius: 5px;		/*角を丸くする指定*/
}
.small-screen #menubar a {
	color: inherit;
	padding: 1rem 3rem;		/*メニュー内の余白。上下、左右へ。*/
}
.small-screen #menubar li li a {
	background: var(--primary-inverse-color);	/*背景色。css冒頭で指定しているprimary-inverse-colorを読み込みます*/
	color: var(--primary-color);	/*文字色。css冒頭で指定しているprimary-colorを読み込みます*/
}


/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
/*３本バーを囲むブロック*/
#menubar_hdr {
	animation: opa1 0.3s 0.5s both;
	position: fixed;z-index: 101;
	cursor: pointer;
	top: 50px;		/*上からの配置場所*/
	right: 2vw;		/*右からの配置場所*/
	width: 50px;	/*幅*/
	height: 50px;	/*高さ*/
	padding: 15px;	/*ブロック内の余白*/
	display: flex;
	justify-content: center;
	align-items: center;
	transition: transform 0.5s;
	background: rgba(0,0,0,0.6);	/*背景色*/
}

/*ここは変更不要*/
#menubar_hdr div {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

/*バーの設定*/
#menubar_hdr div span {
	display: block;
	width: 100%;
	height: 2px;			/*線の太さ*/
	background-color: #fff;	/*線の色*/
	border-radius: 2px;		/*コーナーを少しだけ丸く*/
	transition: all 0.5s ease-in-out;
	position: absolute;
}

/*以下変更不要*/
#menubar_hdr div span:nth-child(1) {top: 0;}
#menubar_hdr div span:nth-child(2) {top: 50%;transform: translateY(-50%);}
#menubar_hdr div span:nth-child(3) {bottom: 0;}
#menubar_hdr.ham div span:nth-child(1) {top: 50%;transform: translateY(-50%) rotate(45deg);}
#menubar_hdr.ham div span:nth-child(2) {opacity: 0;}
#menubar_hdr.ham div span:nth-child(3) {top: 50%;transform: translateY(-50%) rotate(-45deg);}


/*mainブロック
---------------------------------------------------------------------------*/
/*mainブロック*/
main {
	position: relative;
}

/*h2見出し*/
main h2 {
	position: relative;
	text-align: center;		/*テキストをセンタリング*/
	margin: 0 0 2rem;		/*h2の外側にとるスペース。上、左右、下への順番。*/
	font-size: 2rem;		/*文字サイズ*/
	font-weight: 500;		/*文字の太さ。100から900まで指定可能。*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広くする*/
}

/*装飾用の小文字*/
main h2 .small {
	display: block;
	font-size: 0.5em;	/*文字サイズを親要素の50%に*/
	opacity: 0.7;		/*透明度。色が70%出た状態。*/
	font-weight: 200;	/*文字の太さ。100から900まで指定可能。*/
}

/*h3見出し*/
main h3 {
	font-size: 1.4rem;		/*文字サイズ*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広くする*/
	font-weight: normal;	/*デフォルトの太字を標準に*/
}


/*フッター共通
---------------------------------------------------------------------------*/
#footer-contents, #footermenu {
	padding: 2rem var(--global-space);	/*上下、左右へのボックス内の余白。左右はcss冒頭で指定しているglobal-spaceを読み込みます*/
}


/*フッターのコンテンツ（住所やマップが入っているブロック）
---------------------------------------------------------------------------*/
/*ブロック全体*/
#footer-contents {
	background: rgba(var(--primary-color-rgb), 0.8) url('../images/bg_footer.png') no-repeat left bottom / 70%;	/*背景色はcss冒頭のvar(primary-color-rgb)を読み込み、0.8で透明度も指定。残りは背景画像の読み込み、リピートせず、左下に配置。幅は70%。*/
	color: var(--primary-inverse-color);	/*文字色*/
}
#footer-contents a {
	color: inherit;
}

/*左側のブロック*/
#footer-contents .left {
	margin-bottom: 50px;	/*下に空けるスペース*/
}

/*ブロック内で使うbtnの設定*/
#footer-contents .btn a {
	border: 2px solid var(--primary-inverse-color);	/*枠線の幅、線種、色。色についてはcss冒頭の（primary-inverse-color）を読み込みます。*/
	border-radius: 999px; /* softer pill button */
	box-shadow: 0 6px 18px rgba(var(--primary-color-rgb), 0.18);
	letter-spacing: 0.04em;
}


	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {
	
	#footer-contents {
		display: flex;	/*直接の子要素を横並びにします*/
		gap: var(--global-space);	/*左右のボックスの間のマージン的な設定。css冒頭で指定しているglobal-spaceを読み込みます。*/
	}
	
	/*左側のブロック*/
	#footer-contents .left {
		margin-bottom: 0;	/*下のマージン（外側への余白）をリセット*/
		width: 50%;			/*幅。leftとrightで合計100になれば、お好みで変更してもらって構いません。*/
	}
	
	/*右側のブロック*/
	#footer-contents .right {
		width: 50%;			/*幅。leftとrightで合計100になれば、お好みで変更してもらって構いません。*/
	}

	}/*追加指定ここまで*/


/*footer-contents内のマップ。レスポンシブにする為のものなので、基本は編集不要です。
---------------------------------------------------------------------------*/
.iframe-box {
	width: 100%;
	height: 0;
	padding-top: 56.25%;	/*マップの高さを増やしたい場合は、ここの数値を上げてみて下さい。*/
	position: relative;
	overflow: hidden;
}
.iframe-box iframe {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}


/*フッターメニュー設定
---------------------------------------------------------------------------*/
/*ボックス全体の設定*/
#footermenu {
	background: var(--green-main);		/*背景色。css冒頭で指定しているprimary-colorを読み込みます*/
	color: var(--primary-inverse-color);	/*文字色。css冒頭で指定しているprimary-inverse-colorを読み込みます*/
	font-size: 0.8rem;		/*文字サイズ。*/
	display: flex;			/*直接の子要素を横並びにします*/
	justify-content: space-between;	/*並びかたの種類の指定*/
	align-items: flex-start;		/*垂直揃えの指定。上に配置されるように。*/
}

/*ボックス内のリンクテキスト設定*/
#footermenu a {
	text-decoration: none;
	color: inherit;
}

/*ulタグ（メニューの１列あたり）*/
#footermenu ul {
	margin: 0;list-style: none;
	padding: 0 0.3em;
	flex: 1;
}

/*メニューの見出し(title)*/
#footermenu .title {
	font-weight: bold;		/*太字にする*/
	padding-bottom: 5px;	/*下に空けるスペース*/
}


/*フッター設定
---------------------------------------------------------------------------*/
small {font-size: 100%;}
footer {
	font-size: 0.7rem;		/*文字サイズ*/
	background: var(--green-dark);	/*背景色*/
	color: #fff;			/*文字色*/
	text-align: center;		/*内容をセンタリング*/
	padding: 1rem;			/*ボックス内の余白*/
}

/*リンクテキスト*/
footer a {color: inherit;text-decoration: none;}

/*著作部分*/
footer .pr {display: block;}


/*フッター内にあるソーシャルメディアのアイコン
---------------------------------------------------------------------------*/
ul.icons {
	list-style: none;
	margin: 0;padding: 0;
	display: flex;
	align-self: center;
	gap: 1rem;	/*アイコン同士のマージン的な要素。１文字分。*/
}
.icons i {
	font-size: 40px;	/*アイコンサイズ*/
}


/*FAQ
---------------------------------------------------------------------------*/
/*質問*/
.faq dt {
	border-radius: 3px;		/*枠を角丸にする指定*/
	margin-bottom: 1rem;	/*下に空けるスペース*/
	background: #fff;		/*背景色*/
	border: 1px solid var(--line-color);	/*枠線の幅、線種、色*/
	text-indent: -2rem;				/*テキストのインデント。質問が複数行になった際に、テキストの冒頭を揃える為に設定しています。*/
	padding: 0.5rem 1em 0.5rem 3em;		/*ボックス内の余白。ここを変更する場合、上のtext-indentも調整します。*/
}

/*アイコン（Font Awesome）*/
.faq dt::before {
	font-family: "Font Awesome 6 Free";	/*Font Awesomeを使う指定*/
    content: "\f059";		/*アイコンのコード*/
	padding-right: 1rem;	/*アイコンとテキストとの間のスペース*/
	color: var(--primary-color);	/*アイコンの色。css冒頭で指定しているprimary-colorを読み込みます*/
}

/*回答*/
.faq dd {
	padding: 0 1rem 1rem 3rem;	/*ボックス内の余白。上、右、下、左への順番。*/
}

/*opencloseを適用した要素のカーソル*/
.openclose {
	cursor: pointer;	/*カーソルの形状。リンクと同じスタイルにしてクリックできると認識してもらう。*/
}


/*list-normal（activities.htmlで使っているシンプルな２カラムボックス）
---------------------------------------------------------------------------*/
.list-normal * {margin: 0;padding: 0;}
.text h5 {
	color: #5FAE7A;
	font-weight: 500;
	font-size: 1.3em;
}

.text ul li {
	list-style-type: disc;

}


/*ボックス１個あたり*/
.list-normal .list {
	display: flex;	/*直接の子要素を横並びにする*/
	gap: 2vw;		/*左右の間のマージン的なスペース*/
	margin-bottom: 3vw;	/*ボックスの下に空けるスペース*/
}

/*左右の並びを入れ替える場合*/
.list-normal .list.reverse {
	flex-direction: row-reverse;
}
/* このブロックの見出しだけピンクに */
.message h3,
.message .catch{
  color: var(--pink-accent);
}
/* キャッチだけピンク（上品に） */
.catch{
  display: inline-block;
  font-weight: 700;
  color: var(--pink-accent, #E98EA1);
  letter-spacing: 0.02em;
}

/* 強調は“色ベタ”ではなく淡い下線で（読みやすい） */
.em-pink{
  font-weight: 700;
  color: inherit;
  background: linear-gradient(transparent 70%, rgba(233, 142, 161, 0.28) 70%);
  padding: 0 0.15em;
}
/*テキストブロック*/
.list-normal .text {
	flex: 45%  0 0;
}

/*画像ブロック*/
.list-normal .image {
	width: 40%;	/*幅。お好みで。*/
}

/*h4見出し*/
.list-normal h4 {
	font-weight: 500;		/*文字の太さ。100から900まで指定可能。*/
	font-size: 1.6rem;		/*文字サイズを130%に。*/
	color: #5FAE7A;	/*文字色。css冒頭で指定しているprimary-colorを読み込みます*/
	margin-bottom: 0.5em;	/*見出しの下に0.5文字分のスペースを空ける*/
	text-align: left;
}
.list-normal h4 a {
	color: inherit;
}
.boldtitle {
}



/*list-half（トップページの「人気のアクティビティスポット」で使っている左右にわかれた装飾ボックス）
---------------------------------------------------------------------------*/
/*ボックス全体*/
.list-half {
    display: flex;			/*直接の子要素を横並びにする*/
    flex-direction: column;	/*一旦縦並びにしておく*/
}

/*list-halfが続く場合に間にマージンを空ける*/
.list-half + .list-half {
	margin-top: 5vw;	/*画面幅100%＝100vwです。*/
}

/*h3見出し*/
.list-half h3 {
	margin: 0;padding: 0;
	text-align: center;	/*テキストをセンタリング*/
}

/*h4テキスト*/
.list-half h4 {
	font-weight: normal;
	margin: 0;
	font-size: 1.5rem;				/*文字サイズを1.5倍に*/
	color: var(--primary-color);	/*文字色。css冒頭で指定しているprimary-colorを読み込みます*/
	position: relative;		/*下の飾り画像の基点*/
	padding-right: 100px;	/*右に空けるスペース。テキスト右側の小さな画像と重ならないようにする為です。*/
}

/*h4テキスト右側の飾り画像*/
.list-half h4 .kazari {
	position: absolute;
	right: 0px;
	top: -3rem;
	width: 100px;	/*画像の幅*/
}

/*左右のラインの装飾*/
.list-half h3::before,
.list-half h3::after {
    content: "|";	/*このテキストを出力します*/
    display: inline-block;
}

/*左のラインの装飾への追加設定*/
.list-half h3::before {
	transform: rotate(-30deg);	/*回転角度*/
	margin-right: 0.5rem;		/*右に空けるスペース*/
}

/*右のラインの装飾への追加設定*/
.list-half h3::after {
	transform: rotate(30deg);	/*回転角度*/
	margin-left: 0.5rem;		/*左に空けるスペース*/
}

/*h3テキスト内のアイコン*/
.list-half h3 i {
    margin-left: 0.5rem;	/*左に0.5文字分のマージンを空ける*/
    font-size: 2rem;		/*文字サイズ２倍*/
    color: var(--primary-color);	/*文字色。css冒頭で指定しているprimary-colorを読み込みます*/
    opacity: 0.6;		/*透明度。60%だけ色を出す。*/
}

/*テキストブロック*/
.list-half .text {
    background: #fff;		/*背景色*/
    padding: 1rem 2rem;		/*上下、左右へのブロック内の余白*/
	margin-bottom: 30px;		/*下に空けるスペース*/
    border-radius: 1vw;		/*角を丸くする指定。px指定でもOKです。*/
	border-radius: 18px;
}



	/*画面幅599px以下の追加指定（並び順を変更します。数字が小さな順に並びます。）*/
	@media screen and (max-width:599px) {
	
	/*h3見出し*/
	.list-half h3 {order: 1;}

	/*画像ブロック*/
	.list-half .image {order: 2;}

	/*テキストブロック*/
	.list-half .text {order: 3;}
	
	}/*追加指定ここまで*/
	
	
	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {

	/*ボックス全体*/
	.list-half {
		flex-direction: row;	/*縦並びから横並びにする*/
		justify-content: space-between;
		
		/*以下は変更不要*/
		margin-right: calc(-1 * var(--global-space));
		margin-left: calc(-1 * var(--global-space));
	}

	/*ボックス全体（※reverse用）変更不要*/
	.list-half.reverse {
		flex-direction: row-reverse;	/*逆向きに並べる*/
		margin-left: calc(-1 * var(--global-space));
	}

	/*h3テキスト*/
	.list-half h3 {
		writing-mode: vertical-rl;	/*縦書きの指定。*/
		text-orientation: upright;	/*文字の向き*/
		font-size: 0.85rem;			/*文字サイズを85%*/
		margin-top: 10vw;			/*上に空けるスペース。画面幅100%＝100vwです。*/
	}
	
	/*上のラインの装飾への追加設定*/
	.list-half h3::before {
		transform: rotate(-60deg);	/*回転角度*/
		margin-bottom: 0.5rem;		/*下に空けるスペース*/
	}
	
	/*上のラインの装飾への追加設定（※reverse用）*/
	.list-half.reverse h3::before {
		transform: rotate(60deg);	/*回転角度*/
	}

	/*下のラインの装飾への追加設定*/
	.list-half h3::after {
		transform: rotate(60deg);	/*回転角度*/
		margin-top: 0.5rem;			/*上に空けるスペース*/
	}
	
	/*下のラインの装飾への追加設定（※reverse用）*/
	.list-half.reverse h3::after {
		transform: rotate(-60deg);	/*回転角度*/
	}

	/*h3テキスト内のアイコン*/
	.list-half h3 i {
		margin: 0;
		margin-top: 0.5rem;	/*上に0.5文字分のマージンを空ける*/
	}

	/*テキストブロック*/
	.list-half .text {
		margin-bottom: 0;
		flex: 1;
		align-self: flex-start;	/*上寄せになります*/
		margin-top: 8vw;		/*上寄せですが、この分だけ下に下げます。写真とテキストがななめに配置されるイメージで設定しました。*/
		position: relative;
		z-index: 1;
		margin-right: -10vw;	/*この分だけ画像にテキストブロックが重なります。画面幅100%＝100vwです。*/
		box-shadow: 2vw 2vw rgba(var(--primary-color-rgb), 0.1);	/*ボックスの影。右へ、下へ。色はcss冒頭のvar(primary-color-rgb)を読み込み、0.1で透明度も指定。*/
	}
	
	/*テキストブロック（※reverse用）*/
	.list-half.reverse .text {
		margin-right: 0;
		margin-left: -10vw;
		box-shadow: -2vw 2vw rgba(var(--primary-color-rgb), 0.1);
	}

	/*画像ブロック*/
	.list-half .image {
		padding: 0;		/*余白をリセット*/
		width: 50vw;	/*幅。画面の50%*/
		border-radius: 3vw 0px 0px 3vw;	/*角を丸くする指定。左上、右上、右下、左下への順番。*/
		overflow: hidden;
	}
	
	/*画像ブロック（※reverse用）*/
	.list-half.reverse .image {
		border-radius: 0px 3vw 3vw 0px;
	}

	}/*追加指定ここまで*/


/*list-grid1（トップページの「今の季節に人気の観光地」で使っている３カラムボックス）
---------------------------------------------------------------------------*/
.list-grid1 .list * {margin: 0;padding: 0;}

/*ボックス１個あたり*/
.list-grid1 .list {
    display: grid;
	margin-bottom: 1rem;	/*下に空けるスペース*/
	border-radius: 16px;
	overflow: hidden;
}
/* ▼ SPでは3つのカードを「1列（縦並び）」にする */
@media (max-width: 768px){
  .flow-grid{
    grid-template-columns: 1fr;   /* 1列に */
    gap: 14px;                    /* 余白を少し詰める */
    margin-top: 20px;             /* 上も詰める */
  }

  .flow-item{
    padding: 18px 16px;           /* カード内余白も少し小さく */
  }

  .flow-item .icon img{
    width: 56px;                  /* 画像が大きすぎる場合は小さめに */
    margin-bottom: 10px;
  }

  .flow-item .btn{
    margin-top: 10px;
    padding: 10px 16px;
  }
}


/*ボックス内のp要素*/
.list-grid1 .list p {
	font-size: 0.85rem;	/*文字サイズを85%に*/
	line-height: 1.5;	/*行間を狭くする*/
}

/*ボックス１個あたり*/
.list-grid1 .list {
	padding: 1rem;			/*ボックス内の余白。１文字分。*/
	background: #fff;		/*背景色*/
    grid-template-rows: auto 1fr auto;	/*１つ目（この場合はfigure要素のサイズ）と「詳しくみる」ボタンの高さは自動に、２つ目（この場合はtextブロック））を残った幅で使う*/
	box-shadow: 5px 5px 20px rgba(0,0,0,0.1);	/*ボックスの影。右へ、下へ、ぼかし幅、0,0,0は黒の事で0.1は色が10%出た状態。*/
}

/*ボックス内のfigure画像*/
.list-grid1 .list figure {
	margin: -1rem;			/*画像を枠いっぱいに表示させる為に上の「.list-grid1 .list」のpadding分をネガティブマーインで指定*/
	margin-bottom: 0.5rem;	/*画像の下に空けるスペース*/
}

	/*画面幅800px以上の追加指定*/
	@media screen and (min-width:800px) {

	/*listブロック全体を囲むブロック*/
	.list-grid1 {
		display: grid;
		grid-template-columns: repeat(3, 1fr);	/*3列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
		gap: 1rem;	/*ブロックの間に空けるマージン的な指定*/
	}

	/*ボックス１個あたり*/
	.list-grid1 .list {
		margin-bottom: 0;	/*下に空けるスペースをなくす*/
	}

	}/*追加指定ここまで*/


/*list-free（destinations.htmlで使用しているレイアウトフリー用）
---------------------------------------------------------------------------*/
.list-free * {margin: 0;padding: 0;}

/*list-freeボックス*/
.list-free {
	display: flex;			/*直接の子要素を横並びに*/
    flex-direction: column;	/*一旦縦並びにしておく*/
	align-items: flex-start;/*子要素を上に揃える*/
	margin-bottom: 10vw;	/*ボックスの下（外側）に空けるスペース*/
	gap: 5vw;				/*子要素同士に空けるマージン的な要素。画面幅100%＝100vwです。*/
}

/*bg3内のlist-freeの下マージンをなくす。そのままだと広く取りすぎるので。*/
.bg3 .list-free {
	margin-bottom: 0;
}

/*テキストブロック*/
.list-free .text {
    align-self: flex-start;
	flex: 1;
}

/*h3見出し*/
.list-free h3 {
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広くする*/
	font-size: 1.5rem;		/*文字サイズを150%に*/
	font-weight: 500;		/*文字の太さ。100から900まで指定可能。*/
	color: var(--primary-color);	/*文字色。css冒頭で指定しているprimary-colorを読み込みます*/
	position: relative;	/*カギカッコを絶対配置する為に必要な指定*/
	padding: 0 1rem;	/*上下、左右へのh3内の余白*/
	margin: 0 auto;		/*左右の中央に配置*/
}

/*bg3内で使う場合のh3見出し*/
.bg3 .list-free h3 {
	color: #fff;
}

/*h3見出しのカギカッコ装飾（共通設定）*/
.list-free h3::before,
.list-free h3::after {
	content: "";
	position: absolute;
	width: 20px;	/*カギカッコの幅。お好みで。*/
	height: 50px;	/*カギカッコの高さ。お好みで。*/
	border: 1px solid var(--primary-color);	/*枠線の幅、線種、varは色の事でcss冒頭で指定しているprimary-colorを読み込みます*/

}

/*bg3内で使う場合のカギカッコ*/
.bg3 .list-free h3::before,
.bg3 .list-free h3::after {
	border: 1px solid #fff;
}

/*h3見出しの最初のカギカッコの設定*/
.list-free h3::before {
	top: -15px;		/*テキストからの距離。お好みで。*/
	left: -15px;	/*テキストからの距離。お好みで。*/
	border-right: none !important;		/*右の線は消す*/
	border-bottom: none !important;	/*下の線は消す*/
}

/*h3見出しの最後のカギカッコの設定*/
.list-free h3::after {
	bottom: -15px;	/*テキストからの距離。お好みで。*/
	right: -15px;	/*テキストからの距離。お好みで。*/
	border-left: none !important;	/*左の線は消す*/
	border-top: none !important;	/*上の線は消す*/
}

/*h4見出し*/
.list-free h4 {
	font-weight: 500;		/*文字の太さ。100から900まで指定可能。*/
	font-size: 1.3rem;
	color: var(--primary-color);	/*文字色。css冒頭で指定しているprimary-colorを読み込みます*/
	margin-bottom: 0.5em;
}

/*画像ブロック*/
.list-free .image {
	box-shadow: 0px 0px 30px rgba(var(--primary-color-rgb), 0.3);	/*ボックスの影。右へ、下へ、ぼかす量。rgba以降は色で、css冒頭のvar(primary-color-rgba)を読み込み、0.3で透明度を指定。*/
}

/*画像ブロック内のdivタグ。テキストを囲むブロックです。*/
.list-free .image > div {
	background: #fff;	/*背景色*/
	color: var(--text-color);		/*文字色*/
	font-size: 0.7rem;	/*文字サイズを70%*/
	padding: 1rem 2rem;	/*上下、左右への余白*/
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {
	
	/*list-freeボックス*/
	.list-free {
			flex-direction: row;	/*縦並びから横並びにする*/
	}
	
	/*h3見出し*/
	.list-free h3 {
		writing-mode: vertical-rl;	/*縦書きの指定。*/
		text-orientation: upright;	/*文字の向き*/
		padding: 1rem 0.5rem;	/*上下、左右へのh3内の余白*/
	}

	/*その他（汎用向け）お好みでもっと追加して使ってもOK*/
	.list-free .w1 {width: 30%;}
	.list-free .w2 {width: 50%;}
	.list-free .order1 {order: 1;}
	.list-free .order2 {order: 2;}
	.list-free .order3 {order: 3;}
	.list-free .mt1 {margin-top: 10vw;}
	.list-free .mt2 {margin-top: 20vw;}

	}/*追加指定ここまで*/


/*ボタン（btn）
---------------------------------------------------------------------------*/
.btn a {
	display: block;
	text-decoration: none;
	font-size: 1rem;
	text-align: center;		/*テキストをセンタリング*/
	background: #E98EA1;	/*背景色。css冒頭で指定しているprimary-colorを読み込みます*/
	color: #FFFFFF;	/*文字色。css冒頭で指定しているprimary-inverse-colorを読み込みます*/
	padding: 0.5rem !important;		/*ボタン内の余白*/
	margin-top: 1rem !important;	/*ボタンの外（上）に空けるスペース*/
}


/*bg3（トップページの「お知らせ」などで使っている背景）
---------------------------------------------------------------------------*/
/*背景画像の指定。上側だけ作っておけばOKです。*/
.bg3,
.bg3::before {
	background:	url('../images/bg3.svg') repeat-x center top / auto 50px;	/*bg3で何ヶ所かある50pxの数値は変更してもいいが、全て合わせておく*/
}

/*背景ブロック全体*/
.bg3 {
	position: relative;
	padding-top: 20px;		/*bg3で何ヶ所かある50pxの数値は変更してもいいが、全て合わせておく*/
	padding-bottom: 20px;	/*bg3で何ヶ所かある50pxの数値は変更してもいいが、全て合わせておく*/
	color: #fff;			/*文字色*/


	
	/*以下は変更不要*/
	margin-left: calc(-1 * var(--global-space));
	margin-right: calc(-1 * var(--global-space));
}

/*下の背景画像への追加指定*/
.bg3::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 50px;	/*bg3で何ヶ所かある50pxの数値は変更してもいいが、全て合わせておく*/
	left: 0px;
	bottom: 0px;
	transform: scaleY(-1);	/*上下反転*/
}

/*backgroundには、上で読み込む背景画像のカラーを抜き出して指定して下さい。*/
.bg3 > div {
	padding: 1px;
	background: var(--green-main);	/*背景色。背景画像と同じ色を指定して下さい。*/
	padding-left: var(--global-space);		/*変更不要。css冒頭で指定しているglobal-spaceを読み込みます。*/
	padding-right: var(--global-space);		/*変更不要。css冒頭で指定しているglobal-spaceを読み込みます。*/
	padding-top: 5vw;		/*ボックス内の上への余白。お好みで。*/
	padding-bottom: 5vw;	/*ボックス内の下への余白。お好みで。*/
}

.bg3 a {
	color: inherit;
}
.hero {
  background:
    url("images/wind_ribbon.svg") no-repeat center bottom / cover,
    var(--bg-ivory);
}

/*bg3内のh2で使うテキスト左右へのバブルの装飾
---------------------------------------------------------------------------*/
.kazari3-wrap {
	position: relative;
	display: inline-block;
}

/*左右の装飾の共通の設定*/
.kazari3-wrap::before,
.kazari3-wrap::after {
	content: "";
	position: absolute;
	top: 0px;
	width: 200px;	/*画像の幅*/
	height: 100px;	/*画像の高さ*/
	background-image: url('../images/kazari3.svg');	/*背景画像の指定*/
	background-repeat: no-repeat;	/*リピートしない*/
	background-size: cover;			/*サイズに合わせて画像を調整*/
}

/*左の装飾への追加指定*/
.kazari3-wrap::before {
	left: -250px;	/*左にずらす*/
}

/*右の装飾への追加指定*/
.kazari3-wrap::after {
	right: -250px;	/*右にずらす*/
	transform: scaleX(-1);	/*左右を反転させる*/
}


/*お知らせブロック
---------------------------------------------------------------------------*/
/*お知らせブロック*/
.new {
	background: rgba(0,0,0,0.05);	/*背景色。0,0,0は黒のことで0.05は色が5%出た状態。*/
	overflow: hidden;
	margin-bottom: 4rem;	/*ブロックの下に空けるスペース。4文字分。*/
}

/*奇数行目を背景色を少し濃くする。全体同じ色がよければここの数行は削除。*/
.new dt:nth-of-type(odd),
.new dd:nth-of-type(odd) {
	background: rgba(0,0,0,0.05);	/*背景色。0,0,0は黒のことで0.05は色が5%出た状態ですが、.newの色と重なるのでより濃くなります。*/
}

/*日付(dt)設定*/
.new dt {
	padding: 1rem;	/*dt内の余白*/
}

/*記事(dd)設定*/
.new dd {
	padding: 0 1rem 1rem;	/*上、左右、下へのdd内の余白*/
}

/*ブロック内のspan。日付の横のアイコン的な部分の共通設定*/
.new dt span {
	display: inline-block;
	margin-right: -1rem;
	text-align: center;
	line-height: 1.8;		/*行間（アイコンの高さ）*/
	border-radius: 3px;		/*角を丸くする指定*/
	padding: 0 0.5rem;		/*上下、左右へのブロック内の余白*/
	width: 8rem;			/*幅。8文字分。*/
	transform: scale(0.8);	/*80%のサイズに縮小*/
	background: #fff;		/*背景色*/
	color:#777;				/*文字色*/
	border: 1px solid var(--line-color);	/*枠線の幅、線種、色*/
}

/*icon-bg1*/
.new .icon-bg1 {
	background: var(--primary-color);		/*背景色。css冒頭で指定しているprimary-colorを読み込みます*/
	color: var(--primary-inverse-color);	/*文字色。css冒頭で指定しているprimary-inverse-colorを読み込みます*/
	border-color: transparent;				/*枠線を出したくないので透明にする*/
}

/*icon-bg2*/
.new .icon-bg2 {
	background: var(--pink-accent);	/*背景色*/
	color: #fff;		/*文字色*/
	border-color: transparent;	/*枠線を出したくないので透明にする*/
}

	/*画面幅700px以上の追加指定*/
	@media screen and (min-width:700px) {

	/*ブロック全体*/
	.new {
		display: grid;	/*gridを使う指定*/
		grid-template-columns: auto 1fr;	/*横並びの指定。日付とアイコン部分の幅は自動で、内容が入るブロックは残り幅一杯とる。*/
	}

	/*記事(dd)設定*/
	.new dd {
		padding: 1rem;	/*dd内の余白*/
	}

	}/*追加指定ここまで*/


/*2・3カラム（main-contents、sub-contents設定）
---------------------------------------------------------------------------*/
/*main-contentsブロック*/
.main-contents {
	margin-bottom: 2vw;	/*ボックスの下に空けるスペース*/
}

/*サブコンテンツ内のh3要素(見出し)*/
.sub-contents h3 {
	margin: 0;
	font-size: 1rem;
	margin-bottom: 0.5rem;
}
.sub-contents h3::first-letter {
	border-left: 3px solid var(--primary-color);	/*左側のアクセント用ラインの幅、線種、色*/
	padding-left: 10px;
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

	/*カラムで使う為の指定*/
	main.column {
		display: flex;					/*横並びにする*/
		justify-content: space-between;	/*並びかたの種類の指定*/
		gap: 3vw;						/*main-contentsとsub-contentsの間のマージン的な隙間*/
	}
	
	/*main-contentsブロック*/
	.main-contents {
		margin-bottom: 0;
		order: 2;		/*並び順。数字の小さい順番に表示されます。*/
		flex: 1;
	}
	
	/*sub-contentsブロック共通*/
	.sub-contents {
		width: 210px;	/*幅。お好みで変更して下さい。*/
	}
	
	/*1つ目のsub-contents*/
	.sub-contents:nth-child(2) {
		order: 1;	/*並び順。数字の小さい順番に表示されます。*/
	}
	
	/*2つ目のsub-contents（※３カラムで使いたい場合用）*/
	.sub-contents:nth-child(3) {
		order: 3;	/*並び順。数字の小さい順番に表示されます。３番目という意味なので一番右側に表示されます。*/
	}
	
	}/*追加指定ここまで*/


/*サブメニュー設定
---------------------------------------------------------------------------*/
.submenu * {margin: 0;padding: 0;}

/*サブメニューブロック全体*/
.submenu {
	padding: 0;
	margin: 0 0 1rem;	/*上、左右、下へのマージン*/
	border-top: 1px solid var(--line-color);	/*上の枠線の幅、線種、色*/
}

/*メニュー１個あたり*/
.submenu a {
	display: block;text-decoration: none;
	padding: 0.2rem 1rem;	/*上下、左右へのメニュー内の余白*/
	background: #fff;	/*背景色*/
	color: var(--text-color);		/*文字色*/
}

/*メニュー１個あたり（子メニュー以外）*/
.submenu > li {
	border: 1px solid var(--line-color);	/*枠線の幅、線種、色*/
	border-top: none;		/*上の線だけなくす*/
}

/*子メニュー*/
.submenu li li a {
	padding-left: 2rem;	/*左に余白を空ける*/
}


/*box1
---------------------------------------------------------------------------*/
.box1 {
	padding: 1rem;			/*ボックス内の余白*/
	margin-bottom: 1rem;	/*ボックスの下に空けるスペース*/
	background: rgba(0,0,0,0.05);	/*背景色*/
	border: solid 1px var(--line-color);	/*線の線種、幅、色*/
	box-shadow: 0px 0px 1px 1px #fff inset;	/*ボックスの影。右へ、下へ、ぼかし幅、距離。#fffは白のことでinsetは内側へ向けての影の指定。*/
}

/*box1内のsubmenuの下マージンをなくす*/
.box1 .submenu {
	margin-bottom: 0;
}


/*詳細ページのサムネイル切り替えブロック
---------------------------------------------------------------------------*/
/*大きな画像が表示されるブロック*/
.thumbnail-view-parts {
	max-width: 1000px;		/*最大幅*/
	margin: 0 auto 1rem;	/*ブロック要素を中央に配置。下に1文字分のマージンをとる。*/
	text-align: center;		/*画像が小さい場合でもセンタリングされるように*/
}

/*サムネイル全体を囲むブロック*/
.thumbnail-parts {
	display: flex;
	overflow-x: auto;
	white-space: nowrap;
	-webkit-overflow-scrolling: touch;
	width: fit-content;
	max-width: 100%;
	margin: 0 auto 2rem;
	padding-bottom: 1rem;
	margin-bottom: 2rem;
}

/*サムネイル画像*/
.thumbnail-parts img {
	width: 100px;		/*サムネイルの幅*/
	margin: 2px;		/*サムネイル間のスペース*/
	cursor: pointer;	/*リンクタグではないが、クリックできる事をわかりやすくする為にリンクと同じポインターにしておきます。*/
	transition: 0.3s;	/*マウスオンまでにかける時間。3秒。*/
	flex-shrink: 0;
}
.thumbnail-parts img:hover {
	opacity: 0.8;	/*マウスオン時に80%だけ色を出す。つまり薄くなります。*/
}


/*animation-text（トップページの大きな円形の文字が回るアニメーション）
---------------------------------------------------------------------------*/
/*サイズや場所の指定*/
.animation-text {
	position: absolute;z-index: -1;
	width: 100vw;	/*画像の幅*/
	right: -50vw;	/*画面の右半分に収まるように*/
	top: 25vw;		/*上からの距離*/
}

/*アニメーションに関する指定*/
.spin {
	animation: spin 150s linear infinite;	/*150s（150秒）が１回転する速度です。お好みで変更して下さい。*/
}


/*テーブル（ta1）
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta1 caption {
	font-weight: bold;		/*太字に*/
	padding: 0.5rem 1rem;	/*ボックス内の余白*/
	background: var(--primary-color);		/*背景色*/
	color: var(--primary-inverse-color);	/*文字色*/
	margin-bottom: 1rem;	/*下に空けるスペース*/
	border-radius: 5px;		/*角を丸くする指定*/
}

/*ta1テーブルブロック設定*/
.ta1 {
	table-layout: fixed;
	border-top: 1px solid var(--line-color);	/*テーブルの一番上の線。幅、線種、色*/
	width: 100%;				/*幅*/
	margin-bottom: 1rem;			/*テーブルの下に空けるスペース*/
}

/*tr（１行分）タグ設定*/
.ta1 tr {
	border-bottom: 1px solid var(--line-color);	/*テーブルの下線。幅、線種、色*/
}

/*th（左側）、td（右側）の共通設定*/
.ta1 th, .ta1 td {
	padding: 1rem;		/*ボックス内の余白*/
	word-break: break-all;	/*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
}

/*th（左側）のみの設定*/
.ta1 th {
	width: 30%;			/*幅*/
	text-align: left;	/*左よせにする*/
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

		/*th（左側）のみの設定*/
		.ta1 th {
			width: 20%;		/*幅*/
		}

	}/*追加指定ここまで*/


/*テーブル（ta2）activities_item.htmlの予約状況に使用。
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta2 caption {
	text-align: center;
	background: var(--primary-color);
	color: var(--primary-inverse-color);
	font-weight: bold;		/*太字に*/
	padding: 10px;			/*ボックス内の余白*/
}

/*ta2設定*/
.ta2 {
	table-layout: fixed;
	width: 100%;
	margin-bottom: 2rem;	/*テーブルの下に空けるスペース*/
	text-align: center;		/*センタリング*/
	background: #fff;		/*背景色*/
	color: var(--text-color);			/*文字色*/
}
.ta2, .ta2 td, .ta2 th {
	word-break: break-all;
	border: 1px solid var(--line-color);	/*テーブルの枠線の幅、線種、色*/
}

/*曜日と午前午後*/
.ta2 th {
	background: var(--green-soft);
}


/*テーブルを小さな端末で横スクロールさせる為の準備
---------------------------------------------------------------------------*/
/*テーブルを囲むブロック*/
.ta-box {
	overflow-x: auto;
	margin-bottom: 1rem;
}

/*ブロック内にあるta2のみ最小幅を設定*/
.ta-box .ta2 {
	min-width: 600px;
}


/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
.pagetop-show {display: block;}

/*ボタンの設定*/
.pagetop a {
	display: block;text-decoration: none;text-align: center;z-index: 99;
	position: fixed;	/*スクロールに追従しない(固定で表示)為の設定*/
	right: 20px;		/*右からの配置場所指定*/
	bottom: 20px;		/*下からの配置場所指定*/
	color: #fff;		/*文字色*/
	font-size: 1.5rem;	/*文字サイズ*/
	background: rgba(0,0,0,0.2);	/*背景色。0,0,0は黒の事で0.2は色が20%出た状態。*/
	width: 60px;		/*幅*/
	line-height: 60px;	/*高さ*/
	border-radius: 50%;	/*円形にする*/
}


/*marker（マーカー風スタイル）
---------------------------------------------------------------------------*/
.marker {
	display: inline-block;
	background: linear-gradient(transparent 80%, var(--pink-soft) 80%);
}


/*その他
---------------------------------------------------------------------------*/
.clearfix::after {content: "";display: block;clear: both;}
.color-check, .color-check a {color: var(--pink-accent) !important;}
.l {text-align: left !important;}
.c {text-align: center !important;}
.r {text-align: right !important;}
.ws {width: 95%;display: block;}
.wl {width: 95%;display: block;}
.mb0 {margin-bottom: 0px !important;}
.mb30 {margin-bottom: 30px !important;}
.mb5vw {margin-bottom: 5vw !important;}
.look {display: inline-block;padding: 0px 10px;background: #fff;color: var(--text-color);border: 1px solid var(--line-color); border-radius: 3px;margin: 5px 0; word-break: break-all;}
.small {font-size: 0.75em;}
.large {font-size: 2em; letter-spacing: 0.1em;}
.pc {display: none;}
.dn {display: none !important;}
.block {display: block !important;}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

	.ws {width: 48%;display: inline;}
	.sh {display: none;}
	.pc {display: block;}

	}/*追加指定ここまで*/
/* 講師紹介：写真とテキストの間隔を詰める（PCで離れすぎる対策） */
.list-normal .list{
  gap: clamp(12px, 1.2vw, 20px); /* 2vwだと広すぎるので可変に */
  align-items: flex-start;
}

/* 画像が余白を含んで見える場合は、imgを幅いっぱいに */
.list-normal .image img{
  display: block;
  width: 100%;
  height: auto;
}
/* 講師紹介：写真とテキストの間隔を確実に詰める */
.list-normal .list{
  gap: 16px !important;
  align-items: flex-start;
}
/* 講師紹介：写真とテキストの隙間を詰める（強制上書き） */
.list-normal > .list{
  gap: 14px !important;
  align-items: flex-start;
}
/* 講師紹介：写真とテキストの隙間を詰める（確実に効かせる） */
.list-normal .list{
  gap: 14px !important;
  align-items: flex-start;
}
.list-normal .image img{
  display:block;
  width:100%;
  height:auto;
}
/* reverseのときも詰まって見えるように */
.list-normal .list.reverse{
  justify-content: flex-start;
}
/* --- FIX: reverseレイアウト時、テキストが間延びして写真から離れて見えるのを防ぐ --- */
.list-normal .list.reverse{
  justify-content: flex-start; /* 念のため */
}
/* reverse時はテキスト幅を固定して、余白を左側に逃がす */
.list-normal .list.reverse .text{
	flex: 0 0 45%;
}
/* 画像はそのまま40%（必要なら微調整） */
.list-normal .list.reverse .image{
  width: 40%;
}
/* 画面が狭い時は縦積みにして読みやすく */
@media screen and (max-width: 700px){
  .list-normal .list{
    flex-direction: column;
  }
  .list-normal .list.reverse{
    flex-direction: column;
  }
  .list-normal .image,
  .list-normal .list.reverse .image{
    width: 100%;
  }
  .list-normal .list.reverse .text{
    flex: 1;
    width: 100%;
  }
}
/* 既存の●を消して、自前の丸を作る */
.list-normal .text ul{
  list-style: none;
  padding-left: 1.2em;
  margin: 0;
}

.list-normal .text ul li{
  position: relative;
  margin: 0.35em 0;
}

.list-normal .text ul li::before{
  content: "";
  position: absolute;
  left: -1.2em;
  top: 0.55em;
  width: 0.45em;
  height: 0.45em;
  border-radius: 999px;
  background: var(#5FAE7A); /* #5FAE7A */
}
/* 会社概要・アクセス：FAQと同系統の枠デザイン */
.panel{
  background:#fff;
  border:1px solid var(--line-color);
  border-radius:3px;
  padding: 1rem 1.2rem;
  margin: 0 0 1.2rem 0;
}

/* 会社概要の表（dl）を2カラム化 */
.info-table{
  display:grid;
  grid-template-columns: 9.5em 1fr;
  gap: 0;
  margin:0;
}
.info-table dt,
.info-table dd{
  padding: .65rem .8rem;
  border-top: 1px solid rgba(0,0,0,.06);
}
.info-table dt{
  font-weight: 700;
  color: var(--primary-color);
  background: rgba(95,174,122,.06); /* うっすらグリーン */
}
.info-table dd{ margin:0; }

.info-table dt:first-of-type,
.info-table dd:first-of-type{
  border-top:none;
}

/* 小さめ版 */
.info-table.compact dt,
.info-table.compact dd{ padding: .55rem .75rem; }

/* アクセス：テキスト＋地図を横並び */
.access-wrap{
  display:flex;
  gap: 14px;
  align-items: flex-start;
}
.access-text{ flex: 1 1 420px; }
.access-lead{
  margin: 0 0 .8rem 0;
  font-weight: 600;
}
.access-map{
  flex: 0 0 52%;
}

/* 画面が狭いときは縦積み */
@media (max-width: 900px){
  .access-wrap{ flex-direction: column; }
  .access-map{ flex: 1; width:100%; }
  .info-table{ grid-template-columns: 8.5em 1fr; }
}
@media (max-width: 560px){
  .info-table{ grid-template-columns: 1fr; }
  .info-table dt{ border-top: 1px solid rgba(0,0,0,.06); }
}
/* アクセス：表の横にMAP */
.access-grid{
  display: flex;
  gap: 14px;
  align-items: stretch;
}

/* 左：表の横幅を適度に */
.access-grid .info-table{
  flex: 1 1 520px;
}

/* 右：MAP */
.access-grid .access-map{
  flex: 0 0 45%;
  min-height: 260px;
}

/* iframe-boxの中のiframeをフィット */
.access-grid .iframe-box{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,.06);
}
.access-grid .iframe-box iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* 画面が狭いときは縦積み */
@media (max-width: 900px){
  .access-grid{
    flex-direction: column;
  }
  .access-grid .access-map{
    flex: 1;
    min-height: 280px;
  }
}
/* --- 講師プロフィール：レイアウトを整える --- */
.teacher-hero{
  padding: 24px 0;
}

.teacher-hero__inner{
  display: grid;
  grid-template-columns: minmax(320px, 520px) 1fr;
  gap: 18px;
  align-items: start;
}

/* 写真 */
.teacher-hero__photo{
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}
.teacher-hero__photo img{
  display:block;
  width:100%;
  height:auto;
}

/* 右側：読みやすい幅に制限 */
.teacher-hero__body{
  max-width: 780px;
}

/* タイポ */
.teacher-hero__name{
  margin: 0 0 6px 0;
  font-size: 28px;
  line-height: 1.2;
  color: var(--primary-color);
}
.teacher-hero__title{
  margin: 0 0 10px 0;
  color: var(--primary-color);
  font-weight: 600;
}

.teacher-hero__catch{
  margin: 6px 0 12px 0;
  font-weight: 700;
  color: var(--pink-accent, #E98EA1);
  letter-spacing: .02em;
}

/* 本文の行間と余白 */
.teacher-hero__lead{
  margin: 0 0 16px 0;
  line-height: 1.9;
  color: #333;
}

/* 強調：色ベタにしない */
.teacher-hero__lead .em{
  font-weight: 700;
  background: linear-gradient(transparent 70%, rgba(233,142,161,.28) 70%);
  padding: 0 .12em;
}

/* 見出し */
.teacher-hero__h{
  margin: 18px 0 10px 0;
  font-size: 18px;
  color: var(--primary-color);
}

/* リスト（丸に色） */
.teacher-hero__list{
  margin: 0;
  padding-left: 1.2em;
}
.teacher-hero__list li{
  margin: .45em 0;
  line-height: 1.7;
}
.teacher-hero__list li::marker{
  color: var(--primary-color);
}

/* レスポンシブ：スマホで縦積み */
@media (max-width: 900px){
  .teacher-hero__inner{
    grid-template-columns: 1fr;
  }
  .teacher-hero__body{
    max-width: none;
  }
}
/* リストを2列にする */
.two-col{
  column-count: 2;
  column-gap: 24px;
}
.two-col li{
  break-inside: avoid;
  margin: .45em 0;
}

@media (max-width: 700px){
  .two-col{ column-count: 1; }
}/* 代表挨拶：テキスト左／写真右（小さめ） */
.greeting-wrap{
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

/* 左：本文 */
.greeting-text{
  flex: 1 1 auto;
  min-width: 0; /* 折返し崩れ防止 */
}

/* 右：写真（小さめ固定） */
.greeting-photo{
  flex: 0 0 320px;  /* 写真の幅：ここで調整 */
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}
.greeting-photo img{
  display:block;
  width:100%;
  height:auto;
}

/* 画面が狭い時は縦並び（写真を上 or 下は好み） */
@media (max-width: 900px){
  .greeting-wrap{
    flex-direction: column;
  }
  .greeting-photo{
    flex: none;
    width: min(420px, 100%);
  }
}/* 代表挨拶：写真と本文の“空きすぎ”を解消（追記で上書き） */
.greeting-wrap{
	max-width: 1500px;     /* 全体幅を制限して、写真が右端に飛ばない */
	margin: 0 auto;        /* 中央寄せ */
	gap: 14px;             /* 写真と本文の間隔を少し詰める */
}

/* 代表挨拶の本文だけ、横幅制限を解除して“空白”を作らない */
.greeting .teacher-hero__body{
  max-width: none;
}

/* 写真をもう少し小さく（好みで 260〜340pxで調整） */
.greeting-photo{
  flex-basis: 300px;
}
/* アクセス欄のMAPだけ：大きすぎを抑える（共通iframe-boxの比率指定を無効化） */
.access-grid .access-map.iframe-box{
  padding-top: 0;     /* ←これが重要（56.25%を打ち消す） */
  height: 300px;      /* 好みで 240〜360px くらいで調整OK */
}

/* 画面が狭いときは少し高さを下げる */
@media (max-width: 900px){
  .access-grid .access-map.iframe-box{
    height: 260px;
  }
}
/* 代表挨拶：名前がセンターになるのを左揃えに戻す */
.greeting .teacher-hero__name,
.greeting h2,
.greeting .name{
  text-align: left !important;
  margin-left: 0;
}
/* ▼ページ上部（メニュー〜タイトル）の空きを詰める：bg2ページだけ */
#contents.bg2{
  padding-top: clamp(14px, 2vw, 28px); /* ←ここで詰まり具合を調整 */
}

/* まだ詰めたい場合（タイトル自体の上下） */
#contents.bg2 main > section:first-child{
  padding-top: 0;
}
#contents.bg2 main > section:first-child > h2{
  margin-top: 0;
}
/* ===== Job Placement Partners page ===== */
.pagehead{
  padding: 10px 0 18px;
}
.pagehead__en{
  text-align:center;
  letter-spacing:.12em;
  color: rgba(0,0,0,.45);
  margin: 6px 0 10px;
}
.pagehead__lead{
	max-width: 960px;
	margin-top: 0;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 10px;
	line-height: 1.9;
}

.panel{
  background:#fff;
  border:1px solid var(--line-color);
  border-radius: 3px;
  padding: 1rem 1.2rem;
  margin: 0 0 1.2rem 0;
}
.panel--soft{
  background: rgba(255,255,255,.78);
}

.sectionhead{
  margin: 0 0 .8rem 0;
}
.sectionhead__title{
  margin: 0;
  color: var(--primary-color);
  font-size: 20px;
}
.sectionhead__sub{
  margin: 4px 0 0;
  color: rgba(0,0,0,.45);
  letter-spacing: .12em;
}

/* features */
.feature3{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.feature3__item{
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 10px;
  padding: .9rem 1rem;
  background: #fff;
}
.feature3__item h4{
  margin: 0 0 .35rem 0;
  color: var(--primary-color);
}
.feature3__item p{ margin: 0; line-height: 1.8; }

/* partner cards */
.partner-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.partner-card{
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 10px;
  padding: .95rem 1rem;
  background: #fff;
}
.partner-card__head{
  display:flex;
  gap: 8px;
  align-items:center;
  flex-wrap: wrap;
  margin-bottom: .55rem;
}
.partner-card__name{
  margin: 0;
  font-size: 16px;
  color: #222;
}
.badge{
  display:inline-block;
  font-size: 12px;
  padding: .2rem .55rem;
  border-radius: 999px;
  background: rgba(95,174,122,.12);
  color: var(--primary-color);
  border: 1px solid rgba(95,174,122,.22);
}
.badge--pink{
  background: rgba(233,142,161,.14);
  border-color: rgba(233,142,161,.30);
  color: #A85466;
}
.partner-card__desc{
  margin: 0 0 .7rem 0;
  line-height: 1.8;
}
.partner-card__meta{
  margin:0;
  display:grid;
  grid-template-columns: 5.2em 1fr;
  gap: .35rem .6rem;
  font-size: 14px;
}
.partner-card__meta dt{ color: rgba(0,0,0,.60); font-weight: 700; }
.partner-card__meta dd{ margin:0; }

/* steps */
.steps{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.steps__item{
  display:flex;
  gap: 10px;
  padding: .85rem .9rem;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 10px;
  background: #fff;
}
.steps__num{
  flex: 0 0 34px;
  height: 34px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: rgba(95,174,122,.14);
  color: var(--primary-color);
  font-weight: 800;
}
.steps__body h4{
  margin: 0 0 .2rem 0;
  color: #222;
}
.steps__body p{
  margin: 0;
  line-height: 1.7;
}

/* FAQ */
.faq{
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 10px;
  padding: .75rem .9rem;
  background: #fff;
  margin: 0 0 .6rem 0;
}
.faq summary{
  cursor: pointer;
  font-weight: 700;
  color: #222;
}
.faq__body{
  margin-top: .55rem;
  line-height: 1.85;
  color: #333;
}

.note{
  margin: .9rem 0 0;
  color: rgba(0,0,0,.60);
  font-size: 13px;
}

/* CTA */
.cta{
  margin: 1.2rem 0 0;
  padding: 18px 0 6px;
}
.cta__inner{
  background: rgba(95,174,122,.10);
  border: 1px solid rgba(95,174,122,.22);
  border-radius: 12px;
  padding: 1.1rem 1.2rem;
  max-width: 1100px;
  margin: 0 auto;
}
.cta__title{
  margin: 0 0 .35rem 0;
  color: var(--primary-color);
}
.cta__text{
  margin: 0 0 .85rem 0;
  line-height: 1.8;
}
.cta__buttons{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}
.btn{
  display:inline-block;
  padding: .7rem 1rem;
  border-radius: 999px;
  text-decoration:none;
  font-weight: 700;
}
.btn--primary{
  background: var(--primary-color);
  color:#fff;
}
.btn--ghost{
  border: 1px solid rgba(95,174,122,.35);
  color: var(--primary-color);
  background: rgba(255,255,255,.6);
}

/* responsive */
@media (max-width: 980px){
  .feature3{ grid-template-columns: 1fr; }
  .partner-grid{ grid-template-columns: 1fr; }
  .steps{ grid-template-columns: 1fr; }
}
/* ページタイトル（h2）を大きく */
.pagehead .firsttitle{
  font-size: clamp(24px, 4vw, 42px);
  line-height: 1.15;
  letter-spacing: .06em;
  margin: 0 0 6px 0;
}

/* 英語サブタイトルも少し大きく */
.pagehead__en{
  font-size: 14px;
}

/* セクション見出し（提携先一覧 / ご紹介の流れ / FAQ）も一段アップ */
.sectionhead__title{
  font-size: 18px;
}
/* ご紹介の流れ：ステップカード背景を薄いオレンジに */
.steps__item{
  background: rgba(255, 168, 92, 0.14); /* 薄オレンジ */
  border-color: rgba(255, 168, 92, 0.28);
}

/* 番号丸もオレンジ寄せ（任意） */
.steps__num{
  background: rgba(255, 168, 92, 0.22);
  color: #7a4a00;
}
/* ===== corporate (企業出張) ===== */
.corp-tags{
  margin-top: 10px;
  display:flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.corp-panel{ margin-bottom: 1.2rem; }

.corp-list{
  margin: 0;
  padding-left: 1.2em;
}
.corp-list li{
  margin: .45em 0;
  line-height: 1.7;
}
.corp-list li::marker{ color: var(--primary-color); }

/* メニューカード */
.corp-menu{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.corp-card{
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 10px;
  padding: .95rem 1rem;
  background: #fff;
}
.corp-card__title{
  margin: 0 0 .35rem 0;
  color: var(--primary-color);
}
.corp-card__desc{
  margin: 0 0 .75rem 0;
  line-height: 1.8;
}
.corp-card__meta{
  margin:0;
  display:grid;
  grid-template-columns: 5.2em 1fr;
  gap: .35rem .6rem;
  font-size: 14px;
}
.corp-card__meta dt{ color: rgba(0,0,0,.60); font-weight: 700; }
.corp-card__meta dd{ margin:0; }

/* 料金 */
.corp-price{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.corp-price__box{
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 10px;
  padding: .9rem 1rem;
  background: #fff;
}
.corp-price__box h4{
  margin: 0 0 .35rem 0;
  color: #222;
}
.corp-price__box p{ margin: 0; line-height: 1.8; }

/* 既存のstepsがある前提で、企業出張は薄オレンジに（前に希望してた色） */
.corp-steps .steps__item{
  background: rgba(255, 168, 92, 0.14);
  border-color: rgba(255, 168, 92, 0.28);
}
.corp-steps .steps__num{
  background: rgba(255, 168, 92, 0.22);
  color: #7a4a00;
}

/* responsive */
@media (max-width: 980px){
  .corp-menu{ grid-template-columns: 1fr; }
  .corp-price{ grid-template-columns: 1fr; }
}
/* ▼特徴（list-half）の縦の空白を詰める：上書き */
.list-half + .list-half{
  margin-top: 2rem; /* 5vw → 詰める */
}

@media screen and (min-width:600px){
  .list-half h3{
    margin-top: 1.5rem; /* 10vw → 詰める */
  }
  .list-half .text{
    margin-top: 1.5rem; /* 8vw → 詰める */
  }
}
/* 講師紹介（teacherlist）見出しを中央＋グリーンに */
.thumbnail-slide{
  margin-top: 12px; /* 見出しとの間隔が広ければ微調整 */
}

.thumbnail-slide + * { /* 念のため */
}

h2{
  /* 他のh2に影響したくない場合は下の限定版を使ってください */
}

/* 限定版：トップの講師紹介見出しだけを狙う（推奨） */
#contents h2{
  text-align: center;
}

#contents h2 span.small{
  display: block;          /* teacherlist を下段へ */
  margin-top: 6px;
  color: var(--main-color, #58a86d); /* グリーン */
  font-weight: 700;
  letter-spacing: .06em;
}
#contents h2{
  color: var(--main-color, #58a86d);
}
/* ===== TOP 特徴：イラスト＋箇条書き ===== */
.feature-hero{
	margin-top: 10px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 10px;
}
.feature-hero__inner{
	max-width: 1700px;
	margin: 0 auto;
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 10px 24px rgba(0,0,0,.08);
	padding: 28px;
	display: grid;
	grid-template-columns: 360px 1fr;
	gap: 26px;
	align-items: center;
}
.feature-hero__illust{
  background: rgba(234,246,238,.55);
  border-radius: 16px;
  padding: 14px;
}

.feature-hero__illust svg{
  width: 100%;
  height: auto;
  display: block;
}
.feature-hero__kicker{
	display: inline-block;
	font-weight: 700;
	color: var(--main, #5aaE77);
	background: rgba(191,228,200,.35);
	padding: 6px 12px;
	border-radius: 999px;
	margin: 0 0 8px;
	text-align: center;
}
.feature-hero__title{
  margin: 0 0 10px;
  color: #2f2f2f;
  font-size: 26px;
  line-height: 1.35;
}
.feature-hero__lead{
  margin: 0 0 14px;
  line-height: 1.85;
  color: #444;
}
.feature-hero__list{
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}
.feature-hero__list li{
  position: relative;
  padding-left: 22px;
  margin: 10px 0;
  line-height: 1.7;
}
.feature-hero__list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .65em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--main, #5aaE77);
  box-shadow: 0 0 0 3px rgba(191,228,200,.45);
}
.feature-hero__actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* レスポンシブ */
@media (max-width: 900px){
  .feature-hero__inner{
    grid-template-columns: 1fr;
    padding: 20px;
  }
  .feature-hero__title{ font-size: 22px; }
}
html, body {
  margin: 0;
  padding: 0;
}/* ===== 特徴1：右側にうっすら飾り画像を追加 ===== */
.feature-hero__inner{
  position: relative;
  overflow: hidden; /* はみ出し防止 */
}

/* 右側の飾り（うっすら） */
.feature-hero__inner::after{
  content: "";
  position: absolute;
  right: 36px;
  top: 50%;
  transform: translateY(-50%);
  width: min(340px, 28vw);
  height: min(340px, 28vw);
  background: url("images/feature_illust.png") no-repeat center / contain;
  opacity: 0.14;        /* 濃さ（0.10〜0.18くらいで調整） */
  pointer-events: none; /* クリック邪魔しない */
}

/* 文字が飾りに被らないように、右側に余白を足す */
.feature-hero__content{
  padding-right: min(360px, 30vw);
}

/* スマホでは飾りを消す（見切れ防止） */
@media (max-width: 900px){
  .feature-hero__inner::after{ display:none; }
  .feature-hero__content{ padding-right: 0; }
}
.feature-flow{
  padding: 80px 0;
  background: #f7fbf8;
}

.feature-flow .inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

.feature-flow .center{
	text-align: center;

}

.flow-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 40px;
}
/* ▼ SPでは3つのカードを「1列（縦並び）」にする */
@media (max-width: 768px){
  .flow-grid{
    grid-template-columns: 1fr;   /* 1列に */
    gap: 14px;                    /* 余白を少し詰める */
    margin-top: 20px;             /* 上も詰める */
  }

  .flow-item{
    padding: 18px 16px;           /* カード内余白も少し小さく */
  }

  .flow-item .icon img{
    width: 56px;                  /* 画像が大きすぎる場合は小さめに */
    margin-bottom: 10px;
  }

  .flow-item .btn{
    margin-top: 10px;
    padding: 10px 16px;
  }
}

.flow-item{
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  text-align: center;
}

.flow-item .icon img{
	width: 80%;
	margin-bottom: 15px;
}

.flow-item h3{
  color: #2f7f5f;
}

.flow-item .btn{
  display: inline-block;
  margin-top: 15px;
  padding: 8px 16px;
  background: #2f7f5f;
  color: #fff;
  border-radius: 20px;
}
/* お知らせ（bg3）だけ見出しを白にする */
#contents .bg3 h2,
#contents .bg3 h2 .small{
  color: #fff;
}
/* =========================
   LINE 登録ページ
========================= */
.line-head .pagehead__lead{
  max-width: 860px;
  margin: 10px auto 0;
  line-height: 1.9;
}

.line-hero{
  border-radius: 18px;
  overflow: hidden;
}

.line-hero__grid{
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 24px;
  align-items: center;
}

@media (max-width: 900px){
  .line-hero__grid{ grid-template-columns: 1fr; }
}

.line-badge{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(0,0,0,.04);
}

.line-badge__icon{
  display: inline-block;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 6px 10px;
  border-radius: 10px;
  background: #1DB954; /* LINEっぽい緑（お好みで） */
  color: #fff;
  font-size: 12px;
}

.line-badge__text{
  font-weight: 700;
  font-size: 13px;
}

.line-hero__title{
  margin: 14px 0 8px;
  font-size: 26px;
  line-height: 1.35;
}

.line-hero__desc{
  margin: 0 0 14px;
  line-height: 1.9;
}

.line-hero__cta{
  margin: 14px 0 10px;
}

.line-btn{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 14px 18px;
  border-radius: 12px;
  font-weight: 700;
  text-decoration: none;
}

.line-btn--primary{
  background: #1DB954;
  color: #fff;
  box-shadow: 0 10px 20px rgba(0,0,0,.08);
}

.line-hero__note{
  margin: 8px 0 0;
  font-size: 12px;
  opacity: .75;
}

.line-points{
  margin: 14px 0 0;
  padding-left: 1.2em;
  line-height: 1.9;
}

.line-qrCard{
  background: #fff;
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 14px 30px rgba(0,0,0,.08);
}

.line-qrCard__ttl{
  font-weight: 800;
  margin: 0 0 12px;
}

.line-qrCard__box{
  background: rgba(0,0,0,.03);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.line-qrCard__box img{
  width: min(240px, 70vw);
  height: auto;
  display: block;
}

.line-qrCard__sub{
  margin: 10px 0 8px;
  font-size: 13px;
  opacity: .85;
}

.line-qrCard__mini{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(29,185,84,.10);
  font-size: 13px;
}

/* 矢印つきステップ */
.stepFlow{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 900px){
  .stepFlow{ grid-template-columns: 1fr; }
}

.stepFlow__item{
  position: relative;
  background: #fff;
  border-radius: 16px;
  padding: 18px 18px 18px 18px;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: start;
}

/* 右方向矢印（PC時のみ） */
.stepFlow__item:not(:last-child)::after{
  content: "→";
  position: absolute;
  right: -18px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 900;
  opacity: .35;
  font-size: 22px;
}

@media (max-width: 900px){
  .stepFlow__item:not(:last-child)::after{
    content: "↓";
    right: 14px;
    top: auto;
    bottom: -18px;
    transform: none;
  }
}

.stepFlow__num{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 900;
  background: rgba(29,185,84,.12);
}

.stepFlow__title{
  margin: 2px 0 6px;
  font-size: 16px;
}

.stepFlow__text{
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  opacity: .9;
}
/* 余白を減らして中央寄せ（グリッドの最大幅を制限） */
.line-hero__grid{
  max-width: 1100px;   /* ここを 1000〜1200 で好み調整 */
  margin: 0 auto;      /* 中央寄せ */
}

/* ついでに左右の“余白感”が強い場合 */
.line-hero{
  padding: 28px 24px;  /* 元のpanelにpaddingが無い/弱い時の保険 */
}

/* 右側がさらに空いて見えるなら、列比率と間隔も少し詰める */
.line-hero__grid{
  grid-template-columns: 1fr 1fr; /* または 1.1fr .9fr */
  gap: 18px;
}
/* 企業出張：こんな課題に（2列をcolumn→gridにして余白を整える） */
/* お悩み一覧にだけ背景写真をふわっと敷く */
.corp-panel--issues{
  position: relative;
}

.corp-panel .corp-list.two-col{
  column-count: initial;      /* columnを無効化 */
  column-gap: initial;

  max-width: 1100px;          /* 好みで 960〜1200 */
  margin: 0 auto;             /* 中央寄せ */
  padding-left: 0;            /* 箇条書きの左インデントを消す */
  list-style: none;           /* マーカーを消す（下で自作） */

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 24px;
}

/* スマホは1列 */
@media (max-width: 700px){
  .corp-panel .corp-list.two-col{
    grid-template-columns: 1fr;
  }
}

/* 1行ずつ“カード風”にして見やすく */
.corp-panel .corp-list.two-col li{
  margin: 0;                  /* 既存marginを上書き */
  padding: 14px 16px 14px 44px;
  border-radius: 16px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(39,130,96,.08);
  box-shadow: 0 10px 24px rgba(0,0,0,.04);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  line-height: 1.75;
  backdrop-filter: blur(1px);
}

.corp-panel .corp-list.two-col li::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.76)),
    url('../images/photo2.jpg') center center / cover no-repeat;
  opacity: .34;
  z-index: -1;
  transform: scale(1.08);
}

/* チェック風マーカー（緑） */
.corp-panel .corp-list.two-col li::before{
  content: "✓";
  position: absolute;
  left: 14px;
  top: 10px;
  font-weight: 900;
  color: var(--primary-color);
}
.em-red{
  font-weight: 800;
  font-size: 1.15em;
  color: inherit;
  background: linear-gradient(transparent 70%, rgba(233, 142, 161, 0.28) 70%); /* ←同じピンク下線 */
  padding: 0 0.15em;
}
/* 見出しを“緑の見出し風”に装飾 */
.flow-title{
  position: relative;
  display: inline-block;
  padding: 0 22px;
  margin-bottom: 10px;
}

/* 左右のライン */
.flow-title::before,
.flow-title::after{
  content: "";
  position: absolute;
  top: 55%;
  width: 18px;
  height: 2px;
  background: var(--primary-color);
  opacity: .9;
}

.flow-title::before{ left: 0; }
.flow-title::after{ right: 0; }

/* 下に細いアクセント線（マーカー風） */
.flow-title{
  background: linear-gradient(transparent 70%, rgba(39,130,96,.14) 70%);
  border-radius: 6px;
}
/* ===== TOP：目的（募集メイン帯） ===== */
.top-purpose{
  padding: 26px 0 10px;
  background: #f7fbf8;
}

.top-purpose__inner{
  background: #fff;
  border-radius: 16px;
  padding: 28px 26px;
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
  border: 1px solid rgba(47,127,95,.12);
  position: relative;
  overflow: hidden;
}

/* うっすら装飾（派手すぎない） */
.top-purpose__inner::before{
  content:"";
  position:absolute;
  inset:-40px -80px auto auto;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle at 30% 30%,
    rgba(47,127,95,.18), rgba(47,127,95,0) 60%);
  pointer-events:none;
}

.top-purpose__badge{
  display:inline-block;
  margin: 0 0 10px;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .06em;
  color: #2f7f5f;
  background: rgba(47,127,95,.12);
}

.top-purpose__title{
  margin: 0 0 10px;
  font-size: 26px;
  line-height: 1.35;
  color: #2a2a2a;
}

.top-purpose__accent{
  color: #2f7f5f;
  font-weight:
}
	  /* ===== フローチャート（3ステップ） ===== */
.tp-title{
  text-align: center;
  margin: 0 0 18px;
  font-size: 26px;
  color: var(--primary-color);
  font-weight: 800;
}

.tp-flow{
  max-width: 1100px;
  margin: 0 auto 18px;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}

.tp-node{
	background: #fff;
	border: 1px solid rgba(47,127,95,.15);
	border-radius: 35px;
	padding: 16px 16px;
	box-shadow: 0 10px 22px rgba(0,0,0,.05);
	display: grid;
	grid-template-columns: 46px 1fr;
	gap: 12px;
	min-height: 92px;
}

.tp-node__num{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: rgba(47,127,95,.12);
  color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 18px;
}

.tp-node__ttl{
  font-weight: 800;
  color: var(--primary-color);
  margin: 2px 0 6px;
  line-height: 1.2;
}

.tp-node__txt{
  margin: 0;
  color: #444;
  font-size: 14px;
  line-height: 1.7;
}

/* デフォルト（PC）：横矢印 */
.tp-arrow {
  width: 40px;
  height: 2px;
  background: #f3c6cf;
  margin: 0 16px;
}

/* スマホ：縦矢印 */
@media (max-width: 768px) {
  .tp-arrow {
    width: 2px;
    height: 24px;
    margin: 12px auto;
  }

  .tp-arrow::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    margin: 0 auto;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid #f3c6cf;
    transform: translateY(16px);
  }
}


/* ボタン群 */
.tp-actions{
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.tp-btn{
  display:inline-block;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 800;
  text-decoration:none;
  border: 1px solid rgba(47,127,95,.25);
  color: var(--primary-color);
  background:#fff;
}

.tp-btn--main{
  background: var(--primary-color);
  color:#fff;
  border-color: var(--primary-color);
}

.tp-btn--ghost{
  background: rgba(47,127,95,.08);
}

/* スマホ：縦並び＋下矢印 */
@media (max-width: 820px){
  .tp-flow{
    grid-template-columns: 1fr;
  }
  .tp-arrow{
    width: 2px;
    height: 18px;
    margin: 0 auto;
  }
  .tp-arrow::after{
    right: 50%;
    top: auto;
    bottom: -6px;
    transform: translateX(50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 10px solid rgba(47,127,95,.45);
    border-bottom: 0;
  }
}/* STEPの中を「番号｜テキスト｜イラスト」にする */
.tp-node{
  display: grid;
  grid-template-columns: 46px 1fr 120px; /* 最後がイラスト枠 */
  gap: 12px;
  align-items: center;
}

/* 右側のイラスト */
.tp-node__illust{
  width: 120px;
  height: 72px;
  object-fit: contain;     /* イラストが切れない */
  justify-self: end;       /* 右寄せ */
  opacity: .95;
}

/* スマホは縦積み（イラストを下に） */
@media (max-width: 820px){
  .tp-node{
    grid-template-columns: 46px 1fr;
    grid-template-areas:
      "num body"
      "ill ill";
  }
  .tp-node__num{ grid-area: num; }
  .tp-node__body{ grid-area: body; }
  .tp-node__illust{
    grid-area: ill;
    width: 160px;
    height: 90px;
    justify-self: center;
    margin-top: 8px;
  }
}
/* ===== ピンクアクセント（おまかせセット） ===== */
:root{
  --accent-pink: #E98EA1;          /* 文字・線に使う */
  --accent-pink-soft: #F8D6DE;     /* うっすら背景 */
  --accent-pink-shadow: rgba(233,142,161,.25);
}

/* 1) 大見出しを“薄ピンク下線”で見出し風に */
.flow-title{
  display: inline-block;
  padding: 0 .25em;
  background: linear-gradient(transparent 72%, var(--accent-pink-soft) 72%);
  border-radius: 8px;
}

/* 2) 生徒募集中バッジをピンクで目立たせる（緑と相性よく） */
.top-purpose__badge{
  background: var(--accent-pink-soft);
  color: #B85E70;                 /* くすみピンク */
  border: 1px solid rgba(233,142,161,.35);
}

/* 3) STEP番号をピンクに（本文・枠は緑系のまま） */
.tp-node__num{
  background: var(--accent-pink-soft);
  color: #B85E70;
}

/* 4) STEPカードの“上だけ”ピンクライン（さりげなく上品） */
.tp-node{

}

/* 5) ボタンは緑のまま、ホバー時だけピンクの柔らかい影 */
.tp-btn:hover,
.flow-item .btn:hover{
  box-shadow: 0 10px 22px var(--accent-pink-shadow);
}

/* 6) 矢印をほんの少しピンク寄りに（薄く） */
.tp-arrow{
  background: rgba(233,142,161,.28);
}
.tp-arrow::after{
  border-left-color: rgba(233,142,161,.38);
}

/* 7) セクション背景に“点”を少しだけ足したい時（任意）
   使うなら .top-purpose__inner に付けるのがおすすめ */
.top-purpose__inner{
  position: relative;
}
.top-purpose__inner::after{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  background:
    radial-gradient(circle, rgba(233,142,161,.18) 1.2px, transparent 1.3px) 0 0/22px 22px;
  opacity:.18;   /* うっすら */
}
/* ===== STEPを全体的に大きくする ===== */

/* 3ステップ全体の最大幅を広げる */
.tp-flow{
  max-width: 1280px;
}

/* カード自体を大きく */
.tp-node{
	padding-top: 5px;
	padding-right: 5px;
	padding-left: 5px;
	padding-bottom: 5px;
	min-height: 150px;
	border-radius: 20px;
}

/* 番号を大きく */
.tp-node__num{
  width: 56px;
  height: 56px;
  font-size: 20px;
  border-radius: 16px;
}

/* タイトル・本文を少し大きく */
.tp-node__ttl{
	font-size: 25px;
}
.tp-node__txt{
  font-size: 15px;
}

/* 右のイラストを大きく */
.tp-node__illust{
  width: 160px;
  height: 92px;
}

/* 矢印も少し長く */
.tp-arrow{
	width: 10px;
}
/* ===== 見出しを“緑の見出し風”に ===== */
.flow-title-green{
	display: inline-block;
	padding: 10px 22px;
	border-radius: 999px;   /* うっすら緑 */
	color: #2f7f5f;                     /* 緑文字 */
	font-weight: 800;
	letter-spacing: .02em;
	position: relative;
}

/* 下に細いラインを追加（見出し感UP） */
.flow-title-green::after{
  content: "";
  display: block;
  width: 84px;
  height: 3px;
  margin: 10px auto 0;
  border-radius: 999px;
  background: rgba(47,127,95,0.45);
}

/* サブコピーとの間隔を少し整える（任意） */
.feature-flow .lead{
  margin-top: 14px;
}
.feature-flow h2,
.feature-flow .center p{
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}/* 「Hare Care School で叶える3つのこと」を真ん中に寄せる */
.feature-flow h2.flow-title-green{
  display: table;        /* inline-blockよりセンタリングしやすい */
  margin: 0 auto;        /* 要素自体を中央へ */
  text-align: center;
}
/* 静岡サロン紹介：文章＋画像 2カラム */
.salon-intro {
  padding: 28px 0;
}

.salon-intro__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 18px;

  display: flex;
  align-items: center;
  gap: 26px;
}

.salon-intro__text {
  flex: 1 1 520px;
  line-height: 1.9;
  color: #2b2b2b;
}

.salon-intro__text p + p {
  margin-top: 10px;
}

/* 画像 */
.salon-intro__media {
  flex: 0 0 460px;     /* 右側の幅（好みで調整） */
  margin: 0;
}

.salon-intro__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}

/* スマホ：縦並びに */
@media (max-width: 860px) {
  .salon-intro__inner {
    flex-direction: column;
    align-items: stretch;
  }

  .salon-intro__media {
    flex-basis: auto;
    width: 100%;
  }
}
/* --- 講師サムネイルスライダー（teacherlist） --- */
.teacher-thumb-section{
  max-width: 1100px;
  margin: 26px auto 10px;
  padding: 0 20px;
}

.teacher-thumb-lead{
  text-align: center;
  font-size: 14px;
  color: #555;
  margin: 0 0 14px;
}

.teacher-thumb-slider .img a{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.teacher-thumb-slider .img img{
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 999px;
  border: 4px solid rgba(255,255,255,0.95);
  box-shadow: 0 8px 18px rgba(0,0,0,0.08);
}

.teacher-thumb-slider .img span{
  font-size: 13px;
  color: #2f2f2f;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.teacher-thumb-slider .slick-slide{
  padding: 0 10px;
}
/* =================================================
   講師サムネ一覧：スライダー無しで横並びにする
================================================= */
.teacher-thumb-section{
  margin-top: 22px;
}

.teacher-thumb-lead{
  text-align: center;
  margin: 0 0 12px;
  font-size: .9rem;
  opacity: .85;
}

/* もともと slider 用の構造(.slide-thumbnail1 .img .rtl)を横並び化 */
.teacher-thumb-slider .img{
  display: flex;
  flex-wrap: wrap;              /* 画面が狭い時は折り返す（折り返したくないならwrap→nowrap） */
  justify-content: center;
  gap: 14px;
}

/* 子要素（各講師カード） */
.teacher-thumb-slider .img > div{
  width: 140px;                 /* 1人分の幅（好みで 120〜160px） */
}

.teacher-thumb-slider a{
  display: grid;
  gap: 8px;
  text-decoration: none;
  text-align: center;
  background: rgba(255,255,255,0.85);
  border: 1px solid var(--line-color);
  border-radius: 14px;
  padding: 10px 10px 12px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.06);
}

/* 画像を小さめに＆きれいにトリミング */
.teacher-thumb-slider img{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 999px;         /* 丸くする（四角が良ければ 12px などに） */
  border: 1px solid rgba(0,0,0,0.06);
}

/* 名前 */
.teacher-thumb-slider span{
  display: block;
  font-weight: 700;
  font-size: .95rem;
  color: var(--green-main);
  line-height: 1.2;
}

/* rtl が何か効いていて崩れる場合の保険 */
.teacher-thumb-slider .rtl{
  direction: ltr;
}
/* ==========================
   静岡サロン紹介｜SP余白調整
========================== */
@media (max-width: 768px) {

  .salon-intro__inner {
    display: block;          /* 縦並びに固定 */
  }

  .salon-intro__text {
    margin-bottom: 16px;     /* ← ここが重要（詰める） */
  }

  .salon-intro__media {
    margin-top: 0;           /* 念のためリセット */
  }

  .salon-intro__media img {
    width: 100%;
    border-radius: 12px;
  }
}
/* 講師相談ボタン */
.teacher-consult {
  margin-top: 24px;
  text-align: left;
}

.btn-consult-teacher {
  display: inline-block;
  padding: 12px 26px;
  border-radius: 999px;
  background: #e9f5ee;
  color: #3b7f5a;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: 1px solid #b7d9c6;
  transition: all 0.3s ease;
}

.btn-consult-teacher:hover {
  background: #3b7f5a;
  color: #fff;
}
/* 講師相談ボタン */
.btn-consult-teacher {
  display: inline-block;
  margin-top: 12px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 999px; /* まるいボタン */
  background: #FFF2E6;   /* やわらかいオレンジ */
  color: #E07B2D;        /* 少し濃いオレンジ */
  border: 1px solid #F2B28A;
  transition: all .2s ease;
}

/* ホバー時 */
.btn-consult-teacher:hover {
  background: #E07B2D;
  color: #ffffff;
}

/* スマホで押しやすく */
@media (max-width: 768px) {
  .btn-consult-teacher {
    display: block;
    text-align: center;
  }
}
/* ==============================
  固定LINE風サイドメニュー
============================== */

.fixed-line-menu {
  position: fixed;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
}

.fixed-line-menu__inner {
  border: 2px solid #06C755; /* LINEグリーン */
  border-radius: 12px;
  background: rgba(255,255,255,0.9);
  padding: 12px 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.fixed-line-menu__txt {
  font-size: 12px;
  line-height: 1.4;
  color: #333;
  text-align: center;
  margin: 0;
}

/* SP対応：スマホでは下部に横型で表示 */
@media (max-width: 768px) {
  .fixed-line-menu {
    right: 0;
    left: 0;
    top: auto;
    bottom: 0;
    transform: none;
  }

  .fixed-line-menu__inner {
    border-radius: 12px 12px 0 0;
    border-left: none;
    border-right: none;
  }

  .fixed-line-menu__txt {
    font-size: 11px;
    line-height: 1.3;
  }
}
/* ==============================
  固定LINE風サイドメニュー（確実版）
============================== */

.fixed-line-menu {
  position: fixed;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 99999; /* 最前面に出す */
}

.fixed-line-menu__inner {
  display: block;
  text-decoration: none;
  border: 2px solid #06C755; /* LINEグリーン */
  border-radius: 12px;
  background: rgba(255,255,255,0.95);
  padding: 12px 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.fixed-line-menu__txt {
  font-size: 12px;
  line-height: 1.4;
  color: #333;
  text-align: center;
  margin: 0;
}

/* ========== SP（スマホ）対応 ========== */
@media (max-width: 768px) {
  .fixed-line-menu {
    right: 0;
    left: 0;
    top: auto;
    bottom: 0;
    transform: none;
  }

  .fixed-line-menu__inner {
    border-radius: 12px 12px 0 0;
    border-left: none;
    border-right: none;
    text-align: center;
  }

  .fixed-line-menu__txt {
    font-size: 11px;
  }
}
/* 固定LINEメニュー：LINEっぽく（緑背景＋白文字） */
.fixed-line-menu__inner{
  display: flex;
  align-items: center;
  gap: 10px;

  background: #06C755;        /* LINEグリーン */
  border: 2px solid #06C755;
  color: #fff;
  border-radius: 12px;
  padding: 12px 12px;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
}

/* 文字 */
.fixed-line-menu__txt{
  margin: 0;
  color: #fff;
  font-size: 12px;
  line-height: 1.35;
  text-align: left;
}

/* 強調 */
.fixed-line-menu__txt strong{
  color: #fff;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.65);
  text-underline-offset: .18em;
}

/* アイコン */
.fixed-line-menu__icon{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(255,255,255,.20); /* 緑の上で見えるように */
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.fixed-line-menu__icon i{
  font-size: 18px;
  color: #fff;
}

/* hover */
.fixed-line-menu__inner:hover{
  filter: brightness(0.98);
}

/* SP: 下帯の時も馴染む */
@media (max-width: 768px){
  .fixed-line-menu{
	right: auto;
	left: auto;
	bottom: 0;
	top: auto;
	transform: none;
	padding-top: 0;
	padding-right: auto;
	padding-left: auto;
	padding-bottom: 10px;
  }
  .fixed-line-menu__inner{
    border-radius: 14px;
    justify-content: center;
  }
  .fixed-line-menu__txt{
    text-align: center;
  }
}
/* =========================
   オレンジ囲みボタン：文字大きい版（LINE誘導など）
========================= */
.line-cta{
  margin: 18px 0 0;
}

.btn-consult-teacher.btn-consult-teacher--big{
	display: block;                 /* 帯っぽく横幅いっぱい */
	text-align: center;
	padding: 18px 22px;             /* 大きめ */
	font-size: 18px;                /* 大きめ */
	line-height: 1.6;
	border-width: 2px;              /* 囲みを少し強く */
	width: 800px;
}

.btn-consult-teacher.btn-consult-teacher--big .line-cta__link{
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* SPは少しだけ詰める */
@media (max-width: 768px){
  .btn-consult-teacher.btn-consult-teacher--big{
    padding: 14px 14px;
    font-size: 16px;
  }
}
/* 横長すぎる対策：幅を制限して中央寄せ */
.btn-consult-teacher.btn-consult-teacher--big{
	display: inline-block;   /* block → inline-block に */
	max-width: 920px;        /* ここで横幅を制限（好みで700〜900くらい） */
	width: 100%;
	text-align: center;
	margin-top: 0;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 20px;          /* 中央寄せ */
}

/* 親も中央寄せしておくと確実 */
.line-cta{
  text-align: center;
}
/* PCでは改行しない */
.sp-br {
  display: none;
}

/* SPでは改行を有効にする */
@media (max-width: 768px) {
  .sp-br {
    display: inline;
  }
}/* 通常は改行なし */
.sp-br {
  display: inline;
}

/* スマホだけ改行 */
@media screen and (max-width: 768px) {
  .sp-br {
    display: block;
  }
}
/* 代表挨拶：SPでは写真をもう少し小さくして中央寄せ */
@media (max-width: 600px){
  .greeting-photo{
    width: min(300px, 100%);  /* ← 260〜320pxくらいで好みに調整OK */
    margin: 0 auto;           /* 中央寄せ */
  }
}
/* =========================
   STEP（3つのカード）インパクト版
   ========================= */
.tp-flow.tp-flow--impact{
  max-width: 1180px;
  margin: 0 auto 26px;
  gap: 22px;
  align-items: stretch;
}

/* カードを “大きく・上質に” */
.tp-flow.tp-flow--impact .tp-node{
  border-radius: 28px;
  padding: 22px 22px;
  border: 1px solid rgba(47,127,95,.18);
  box-shadow: 0 16px 34px rgba(0,0,0,.08);
  min-height: 132px;
  position: relative;
  overflow: hidden;

  /* 中身（番号｜文章｜イラスト）をゆったり */
  grid-template-columns: 56px 1fr 150px;
  gap: 14px;
}

/* ほんのりハイライト（上品な立体感） */
.tp-flow.tp-flow--impact .tp-node::before{
  content:"";
  position:absolute;
  inset:-1px;
  background: radial-gradient(900px 180px at 20% 0%,
    rgba(47,127,95,.10), transparent 60%);
  pointer-events:none;
}

/* 番号を “バッジ化” して主役に */
.tp-flow.tp-flow--impact .tp-node__num{
  width: 56px;
  height: 56px;
  border-radius: 18px;
  font-size: 20px;
  box-shadow: inset 0 0 0 2px rgba(47,127,95,.16);
  background: linear-gradient(180deg,
    rgba(47,127,95,.18), rgba(47,127,95,.08));
}

/* タイトルを大きく */
.tp-flow.tp-flow--impact .tp-node__ttl{
  font-size: 18px;
  letter-spacing: .02em;
  margin: 0 0 8px;
}

/* 説明文も少し大きく読みやすく */
.tp-flow.tp-flow--impact .tp-node__txt{
  font-size: 15px;
  line-height: 1.75;
  color: #333;
}

/* 右のイラストを “見せる” */
.tp-flow.tp-flow--impact .tp-node__illust{
  width: 150px;
  height: 90px;
  object-fit: contain;
  justify-self: end;
  opacity: .98;
}

/* 矢印も存在感（線を少し長く・上品な点線風） */
.tp-flow.tp-flow--impact .tp-arrow{
  width: 64px;
  height: 2px;
  background: repeating-linear-gradient(
    to right,
    rgba(47,127,95,.38) 0 10px,
    rgba(47,127,95,0) 10px 16px
  );
  border-radius: 2px;
}

.tp-flow.tp-flow--impact .tp-arrow::after{
  border-left: 12px solid rgba(47,127,95,.45);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}

/* =========================
   SP調整（縦並びでも“詰まりすぎない”）
   ========================= */
@media (max-width: 820px){
  .tp-flow.tp-flow--impact{
    gap: 14px;
  }

  .tp-flow.tp-flow--impact .tp-node{
    padding: 18px 16px;
    min-height: auto;
    grid-template-columns: 52px 1fr;
    grid-template-areas:
      "num body"
      "ill ill";
  }

  .tp-flow.tp-flow--impact .tp-node__num{
    width: 52px;
    height: 52px;
    border-radius: 16px;
  }

  .tp-flow.tp-flow--impact .tp-node__ttl{ font-size: 17px; }

  .tp-flow.tp-flow--impact .tp-node__illust{
    width: 170px;
    height: 96px;
    justify-self: center;
    margin-top: 10px;
  }

  /* SPの縦矢印も少し見やすく */
  .tp-flow.tp-flow--impact .tp-arrow{
    width: 2px;
    height: 22px;
    background: rgba(47,127,95,.28);
    margin: 0 auto;
  }

  .tp-flow.tp-flow--impact .tp-arrow::after{
    right: 50%;
    bottom: -7px;
    transform: translateX(50%);
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 12px solid rgba(47,127,95,.42);
    border-bottom: 0;
  }
}
/* 「卒業後もサポート」だけ折り返さない */
.tp-node--support .tp-node__ttl{
  white-space: nowrap;
}

/* さらに小さいSPでは少しだけ小さくしてはみ出し防止 */
@media (max-width: 420px){
  .tp-node--support .tp-node__ttl{
    font-size: 16px;
    letter-spacing: 0;
  }
}
/* STEP見出しを折り返さない（1〜3共通） */
.tp-node__ttl{
  white-space: nowrap;
  word-break: keep-all;
}

/* 画面が狭いときは文字を少し縮めて1行維持（任意・おすすめ） */
@media (max-width: 600px){
  .tp-node__ttl{
    font-size: clamp(16px, 4.6vw, 20px);
    letter-spacing: .02em;
  }
}
/* ===== STEP番号：レイアウトを壊さず「上付き」だけにする ===== */
.tp-node{
  position: static !important;   /* 絶対配置を使わない */
  padding-top: 0 !important;
}

.tp-node__num{
  position: static !important;
  inset: auto !important;
  transform: none !important;

  /* 文字の上付き感：ベースラインを上へ */
  vertical-align: top;

  /* 余白（上に寄せたい） */
  margin: 0 10px 0 0 !important; /* 右だけ少し空ける */
  align-self: flex-start;        /* flexなら上寄せ */
}

/* 内側リングも消す（前回の装飾が残るのを防止） */
.tp-node__num::after{ display:none !important; }
/* 丸数字っぽい「バッジ」 */
.tp-node__num{
	width: 34px;
	height: 34px;
	border-radius: 999px;
	display: grid;
	place-items: center;
	background: rgba(255,255,255,.95);
	border: 2px solid rgba(240,160,180,.45); /* 薄ピンク */
	box-shadow: 0 6px 14px rgba(0,0,0,.06);
	font-weight: 700;
	line-height: 1;
	margin-top: 10px;   /* 上付き感 */
	margin-right: 10px;
	align-self: flex-start;
}
/* ===== Sticky Footer（内容が少なくてもフッターを画面下へ）===== */
html, body {
  height: 100%;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* メイン領域（今のHTMLだと #container が本文全体）を伸ばす */
#container {
  flex: 1 0 auto;
}

/* フッター一式は縮まない */
#footer-contents,
#footermenu,
footer {
  flex: 0 0 auto;
}
/* footer下に余白（背景）が出ないように：sticky footer */
html, body {
  height: 100%;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#container {
  flex: 1 0 auto; /* コンテンツを伸ばして、フッターを下に押し下げる */
}

/* フッター側は縮まない */
#footer-contents,
#footermenu,
#copyright {
  flex: 0 0 auto;
}