@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');

/*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");


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

	/*テンプレートのメインまたはアクセントとなる色*/
	--primary-color: #CF0301;
	
	/*上のprimary-colorの対となる色*/
	--primary-inverse-color: #fff;
	/*アクセント色*/
	--accent-colorr: #ccb9bb;
	/*サイト内の左右へとる余白を一括管理。画面幅100%＝100vw*/
	--global-space: 3vw;
	
}


/*animation1のキーフレーム設定（開閉ブロックのアニメーションに使用）
---------------------------------------------------------------------------*/
@keyframes animation1 {
	0% {left: -200px;}
	100% {left: 0px;}
}


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


/*全体の設定
---------------------------------------------------------------------------*/
body * {box-sizing: border-box;}
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: #fff;	/*背景色*/
	color: #292929;		/*文字色*/
	line-height: 2;		/*行間*/
}

/*リセット*/
figure {margin: 0;}
dd {margin: 0;}
nav,ul,li,ol {margin: 0;padding: 0;}
nav ul {list-style: none;}
section li {margin-left: 1rem;}
input {font-size: 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: var(--global-space);	/*sectionの上に空けるスペース。css冒頭で指定しているglobal-spaceを読み込み*/
}

.parent-right {
  /* 親要素に指定 */
text-align: right;
}

/*btn-animation1 アニメーションボタン（枠線をぐるっとなぞるアニメーション）
---------------------------------------------------------------------------*/
@keyframes w {0% {width: 0px;} 100% {width: 100%;}}
@keyframes h {0% {height: 0px;} 100% {height: 100%;}}

/*ボタンの一番の外側のボックス*/
.btn-animation1-parts {
	position: relative;		/*枠線をアニメーションさせる為に必要な指定*/
	display: inline-block;
	box-shadow: 0px 0px 0px 1px #ccc inset;	/*デフォルトで見えている枠線の設定*/
}

/*上のbtn-animation1の内側にあるボックス*/
.btn-animation1-inner-parts {
	display: block;text-decoration: none;
	padding: 0.5em 3em;		/*ボタン内の余白。上下、左右へ。emは文字の単位。1emが1文字分という事です。*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広くとる*/
	text-indent: 0.1em;		/*letter-spacingを設定するとその分全体のテキスト位置がずれるので、戻す設定。同じ数字にしておけばOKです。*/
}

/*ボタン内でiタグを使う場合の設定*/
.btn-animation1-inner-parts i {
	display: inline-block;
	transition: 0.3s;		/*アニメーションにかける時間。0.3秒。*/
	padding-left: 1em;		/*テキストと、iタグの間の余白*/
}
.btn-animation1-inner-parts:hover i {
	transform: translateX(5px);	/*マウスオン時にiタグを5pxだけ右に移動する*/
}

/*枠線共通*/
.btn-animation1-parts::before,
.btn-animation1-parts::after,
.btn-animation1-inner-parts::before,
.btn-animation1-inner-parts::after {
	content: "";
	position: absolute;
	background-color: #ec4b62;		/*background(背景)スタイルですが、hover時の枠線の色になります。*/
	animation-duration: 0.2s;	/*アニメーションにかける時間。１辺あたり0.2秒。*/
	animation-fill-mode: forwards;	/*アニメーション完了時に最後のフレームを維持。この１行を外してみると別の動作になって面白い動きになります。*/
	animation-timing-function: linear;	/*アニメーションの速度のタイプ。同じ速度にする。*/
}

/*ラインアニメーション１（左上→右上）*/
.btn-animation1-parts:hover::before {
	left: 0px;				/*開始地点の指示*/
	top: 0px;				/*開始地点の指示*/
	height: 1px;			/*線の幅の代わりになります*/
	animation-name: w;		/*上の「@keyframes」で使うアニメーション名の指定。*/
}

/*ラインアニメーション２（右上→右下）*/
.btn-animation1-parts:hover::after {
	right: 0px;				/*開始地点の指示*/
	top: 0px;				/*開始地点の指示*/
	width: 1px;				/*線の幅の代わりになります*/
	animation-name: h;		/*上の「@keyframes」で使うアニメーション名の指定。*/
	animation-delay: 0.2s;	/*アニメーションを0.2秒遅れてスタートさせる。*/
}

/*ラインアニメーション３（右下→左下）*/
.btn-animation1-inner-parts:hover::before {
	right: 0px;				/*開始地点の指示*/
	bottom: 0px;			/*開始地点の指示*/
	height: 1px;			/*線の幅の代わりになります*/
	animation-name: w;		/*上の「@keyframes」で使うアニメーション名の指定。*/
	animation-delay: 0.4s;	/*アニメーションを0.4秒遅れてスタートさせる。*/
}

/*ラインアニメーション４（左下→左上）*/
.btn-animation1-inner-parts:hover::after {
	left: 0px;				/*開始地点の指示*/
	bottom: 0px;			/*開始地点の指示*/
	width: 1px;				/*線の幅の代わりになります*/
	animation-name: h;		/*上の「@keyframes」で使うアニメーション名の指定。*/
	animation-delay: 0.6s;	/*アニメーションを0.6秒遅れてスタートさせる。*/
}


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

/*パンくず設定
---------------------------------------------------------------------------*/
p#root {
	font-size: 12px;
	line-height: 16px;
	margin-bottom: 15px;
	margin-top: 0px;
}

/* ヘッダーを横並びの親にする */
header {
    display: flex !important; /* 他の指定に負けないように念のため */
    justify-content: space-between; /* これで左右に分かれます */
    align-items: center;
    flex-wrap: wrap; /* 画面が狭い時に落ちるように */
}

/* ロゴのサイズ調整（念のため） */
#logo {
    margin: 0;
}

/* ボタンを右側にまとめる */
.header-btns {
    display: flex;
    gap: 8px; /* ボタン同士の横の隙間 */
    justify-content: flex-end; /* 右側に寄せる */
    margin-left: auto; /* ロゴとの間を自動で埋めて右に押し出す */
}

/* スマホ等で狭くなった時のケア */
@media screen and (max-width: 900px) {
    header {
        justify-content: center; /* 中央寄せに切り替え */
    }
    .header-btns {
        justify-content: center;
        margin: 10px 0;
        width: 100%; /* 横幅いっぱい使って中央へ */
    }
}
/*大きな端末、小さな端末共通のトップページ以外のヘッダー設定
---------------------------------------------------------------------------*/
/*メニュー１個あたりの設定*/
body:not(.home) header a {
	display: block;text-decoration: none;
}


/* ★追加：ヘッダー内のh3の上下余白を調整 */
body:not(.home) header h3 {
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
    /* もし余白が消えない場合は、以下も追加してみてください */
    /* padding: 0; */
}
/*ロゴ画像*/
#logo {margin: 0;padding: 0;}
#logo img {
	display: block;
	width: 200px;	/*ロゴ画像の幅*/
}

/*★トップページの右上TEL画像*/
#logo2 {margin: 0;padding: 0;}
#logo2 img {
	display: block;
	width: 150px;	/*ロゴ画像の幅*/
}


/*トップページのヘッダー*/
.home header {
	position: relative;
	width: 100%;
	height: 0;
	padding-top: 30%;
	overflow: hidden;
}

/*トップページのロゴ*/
.home #logo img {
	width: 300px;	/*ロゴ画像の幅*/
	position: absolute;z-index: 1;
	left: var(--global-space);	/*上からの配置場所。css冒頭で指定しているglobal-spaceを読み込み*/
	top:  var(--global-space);	/*左からの配置場所。css冒頭で指定しているglobal-spaceを読み込み*/
}


/*試し★トップページの右上TEL*/
.home #logo2 img {
	width: 300px;	/*ロゴ画像の幅*/
	position: absolute;z-index: 1;
	right: var(--global-space);	/*上からの配置場所。css冒頭で指定しているglobal-spaceを読み込み*/
	bottom:  var(--global-space);	/*左からの配置場所。css冒頭で指定しているglobal-spaceを読み込み*/
}

/*動画*/
header video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
	object-fit: cover;
}


/*メニューブロック初期設定
---------------------------------------------------------------------------*/
#menubar {opacity: 0;line-height: 1.5;}
#menubar ul {list-style: none;margin: 0;padding: 0;}

.large-screen #menubar {opacity: 1;}

.small-screen #menubar.display-none {display: none;}
.small-screen #menubar.display-block {display: block;opacity: 1;}

/*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;	/*この手の設定がないとアイコンが出ない場合があり*/
/*	margin-right: 1em;	/*アイコンとテキストとの間に空けるスペース*/
/*	position: absolute;
	left: 1rem;	/*左から文字分のところに配置する。*/
/*}*/

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

	/*ddmenuを指定しているメニューに矢印アイコンをつける設定*/
	a.ddmenu::before {
		left: 1rem;	/*左から1文字分のところに配置する。*/
	}

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


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

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


/*大きな端末用のメニューブロック設定
---------------------------------------------------------------------------*/
/*メニューブロックを囲むボックス*/
.large-screen #menubar {
    position: sticky;
    top: 0;
    z-index: 2;
    transition: opacity 0.3s;
}

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

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

/*リンク（a要素）の設定*/
.large-screen #menubar li a {
	flex: 1;
	display: flex;align-items: center;justify-content: center;
	flex-direction: column;
	background: var(--primary-color);	/*背景色。css冒頭で指定しているprimary-colorを読み込み*/
	color: var(--primary-inverse-color);	/*文字色。css冒頭で指定しているprimary-inverse-colorを読み込み*/
	padding: 0.7rem 1rem;
}

/*マウスオン時に明るくする*/
.large-screen #menubar li a:hover {
	filter: brightness(1.2);
}


/*大きな端末用のメニューブロックが画面上部に到達した場合（fixed）
---------------------------------------------------------------------------*/
/*メニューブロックを囲むボックス*/
.large-screen #menubar.fixed a {
    opacity: 0.8;	/*透明度。色を70%だけ出す。*/
}

/*マウスオン時*/
.large-screen #menubar.fixed a:hover {
	opacity: 1;		/*透明度。色を100%出す。*/
}

/*メニューの上下の余白を狭くする*/
.large-screen #menubar.fixed2 li a {
	padding: 0.4rem 1rem;
}


/*大きな端末、小さな端末、共通のドロップダウンメニュー設定
---------------------------------------------------------------------------*/
/*ドロップダウンブロック*/
.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;
	width: 100%;
	top: 100%;
	left: 0px;
}

/*ドロップダウンメニュー1個あたりの高さ。調整可。*/
.large-screen #menubar ul ul a {
	padding: 0.6rem 1rem !important;
}


/*小さな端末用の開閉ブロック
---------------------------------------------------------------------------*/
.small-screen #menubar {height: 0px;}

/*メニューブロック設定*/
.small-screen #menubar.display-block {
	position: fixed;overflow: auto;z-index: 100;
	left: 0px;top: 0px;
	width: 100%;
	height: 100%;
	padding-top: 120px;	/*上に空ける余白。ハンバーガーアイコンと重ならない為の指定なので変更OK。*/
	background: var(--accent-colorr);	/*背景色。css冒頭で指定している--accent-colorrを読み込み*/
	animation: animation1 0.2s both;	/*animation1を実行する。0.2sは0.2秒の事。*/
}

/*メニュー１個あたりの設定*/
.small-screen #menubar li {
	border: 1px solid #fff;	/*枠線の幅、線種、色*/
	margin: 1rem;			/*メニューの外側に空けるスペース*/
	border-radius: 5px;		/*角を丸くする指定*/
}
.small-screen #menubar > nav > ul > li > a {
	padding: 1rem 3rem;		/*メニュー内の余白。上下、左右へ。*/
	display: flex;flex-direction: column;
}
.small-screen #menubar li a {
	padding: 1rem 3rem;	/*子メニュー（ドロップダウン）内の余白。上下、左右へ。*/
}

/*文字色*/
.small-screen #menubar, .small-screen #menubar a {
	color: #040404;
}

/*900px以下でのみ表示させるブロック*/
#menubar .sh {
	padding: 1rem 2rem 2rem;	/*上、左右、下へのブロック内の余白*/
}


/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
/*３本バーを囲むブロック*/
#menubar_hdr {
	animation: opa1 0s 0.2s both;
	position: fixed;z-index: 101;
	cursor: pointer;
	right: 3vw;				/*右からの配置場所指定*/
	top: 2vw;				/*上からの配置場所指定*/
	padding: 16px 14px;		/*上下、左右への余白*/
	width: 46px;			/*幅（３本バーが出ている場合の幅になる）*/
	height: 46px;			/*高さ*/
	display: flex;					/*flexボックスを使う指定*/
	flex-direction: column;			/*子要素（３本バー）部分。flexはデフォルトで横並びになるので、それを縦並びに変更。*/
	justify-content: space-between;	/*並びかたの種類の指定*/
	background: rgba(0,0,0,0.5);	/*背景色。0,0,0は黒のことで0.5は色が50%出た状態。*/
}

/*バー１本あたりの設定*/
#menubar_hdr span {
	display: block;
	transition: 0.3s;	/*アニメーションにかける時間。0.3秒。*/
	border-top: 1.5px solid #fff;	/*線の幅、線種、色*/
}

/*×印が出ている状態の3本バーの背景色*/
#menubar_hdr.ham {
	background: #ff0000;
}

/*×印が出ている状態の設定。※１本目および２本目のバーの共通設定。*/
#menubar_hdr.ham span:nth-of-type(1),
#menubar_hdr.ham span:nth-of-type(3) {
	transform-origin: center center;	/*変形の起点。センターに。*/
	width: 20px;						/*バーの幅*/
}

/*×印が出ている状態の設定。※１本目のバー。*/
#menubar_hdr.ham span:nth-of-type(1){
	transform: rotate(45deg) translate(3.8px, 5px);	/*回転45°と、X軸Y軸への移動距離の指定*/
}

/*×印が出ている状態の設定。※３本目のバー。*/
#menubar_hdr.ham span:nth-of-type(3){
	transform: rotate(-45deg) translate(3.8px, -5px);	/*回転-45°と、X軸Y軸への移動距離の指定*/
}

/*×印が出ている状態の設定。※２本目のバー。*/
#menubar_hdr.ham span:nth-of-type(2){
	display: none;	/*２本目は使わないので非表示にする*/
}



/*mainブロック(TOPページ)
---------------------------------------------------------------------------*/
/*mainブロック（横スライドslick対策）*/
main * {min-width: 0;}

/*mainブロック*/
main {
	margin: var(--global-space);	/*mainの外側に空けるスペース。css冒頭で指定しているglobal-spaceを読み込み*/
}

/* クラス名「main2」TOPページ以外スタイル */
.main2 {
    /*  main2 専用のスタイルを書く */
margin-top: 0vw;
    margin-right: 3vw;
    margin-bottom: 3vw;
    margin-left: 3vw;
	}

/* h4_c見出し本体 */
h4 {
    color: #CF0301 !important;
    font-weight: bold !important;
}

/*★ h2_c見出し本体 */
main .h2_c {
  position: relative;
  background: #e7d3db;
  /* 左側のパディングをアイコンの幅に合わせて調整 */
  padding: 5px 5px 5px 30px; 
  font-size: 20px;
  color: #474747;
  border-radius: 0 10px 10px 0;

  /* ★修正：margin-left は 0 に戻す（親の余白に任せる） */
  margin-left: 0;
  
  /* ★修正：横幅は 100% に戻す */
  width: 100%;
  
  display: block;
  box-sizing: border-box;
  
  /* 下の要素との間隔 */
  margin-bottom: 20px;
}

/* h2_cアイコン（before）の設定 */
main .h2_c:before {
  font-family: "Font Awesome 6 Free";
  content: "\f1b9";
  display: inline-block;
  position: absolute;
  color: white;
  background: #CF0301;
  font-weight: 900;
  width: 40px;
  height: 40px;
  
  /* ★修正：見出しの左端から「半分外側」に出るように固定 */
  left: -20px; 
  
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  
  border: solid 3px white; 
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  z-index: 1; /* 見出しより上に表示 */
}

/*★ h2_e見出し本体 */
main .h2_e {
  position: relative;
  background: #e7d3db;
  padding: 5px 5px 5px 30px; 
  font-size: 20px;
  color: #474747;
  border-radius: 0 10px 10px 0;
  margin-left: 0;
  width: 100%;
  display: block;
  box-sizing: border-box;
  margin-bottom: 20px;
}
/* h2_eアイコン（before）の設定 */
main .h2_e:before {
  font-family: "Font Awesome 6 Free";
  content: "\f55e";
  display: inline-block;
  position: absolute;
  color: white;
  background: #CF0301;
  font-weight: 900;
  width: 40px;
  height: 40px;
  left: -20px; 
    top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
   border: solid 3px white; 
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  z-index: 1; /* 見出しより上に表示 */
}


/*★ h2_f大型見出し本体 */
main .h2_f {
  position: relative;
  background: #e7d3db;
  padding: 5px 5px 5px 30px; 
  font-size: 20px;
  color: #474747;
  border-radius: 0 10px 10px 0;
  margin-left: 0;
  width: 100%;
  display: block;
  box-sizing: border-box;
  margin-bottom: 20px;
}
/* h2_fアイコン（before）の設定 */
main .h2_f:before {
  font-family: "Font Awesome 6 Free";
  content: "\f4df";
  display: inline-block;
  position: absolute;
  color: white;
  background: #CF0301;
  font-weight: 900;
  width: 40px;
  height: 40px;
  left: -20px; 
    top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
   border: solid 3px white; 
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  z-index: 1; /* 見出しより上に表示 */
}

/*★ h2_h大特見出し本体 */
main .h2_h {
  position: relative;
  background: #e7d3db;
  padding: 5px 5px 5px 30px; 
  font-size: 20px;
  color: #474747;
  border-radius: 0 10px 10px 0;
  margin-left: 0;
  width: 100%;
  display: block;
  box-sizing: border-box;
  margin-bottom: 20px;
}
/* h2_hアイコン（before）の設定 */
main .h2_h:before {
  font-family: "Font Awesome 6 Free";
  content: "\e041";
  display: inline-block;
  position: absolute;
  color: white;
  background: #CF0301;
  font-weight: 900;
  width: 40px;
  height: 40px;
  left: -20px; 
    top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
   border: solid 3px white; 
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  z-index: 1; /* 見出しより上に表示 */
}

/*★ h2_k二輪見出し本体 */
main .h2_k {
  position: relative;
  background: #e7d3db;
  padding: 5px 5px 5px 30px; 
  font-size: 20px;
  color: #474747;
  border-radius: 0 10px 10px 0;
  margin-left: 0;
  width: 100%;
  display: block;
  box-sizing: border-box;
  margin-bottom: 20px;
}
/* h2_k（before）の設定 */
main .h2_k:before {
  font-family: "Font Awesome 6 Free";
  content: "\f21c";
  display: inline-block;
  position: absolute;
  color: white;
  background: #CF0301;
  font-weight: 900;
  width: 40px;
  height: 40px;
  left: -20px; 
    top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
   border: solid 3px white; 
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  z-index: 1; /* 見出しより上に表示 */
}

  /* ★h3_b見出し本体 */
main .h3_b {
  position: relative;
  padding: 5px 26px 5px 42px;
  background: #e7d3db;
  font-size: 20px;
  color: #474747;
  margin-left: -33px;
  line-height: 1.3;
  border-bottom: solid 2px #CF0301;
  z-index:-2;
  text-align: left;
}

main .h3_b:before {
  position: absolute;
  content: '';
  left: -2px;
  top: -2px;
  width: 0;
  height: 0;
  border: none;
  border-left: solid 40px white;
  border-bottom: solid 79px transparent;
  z-index: -1;
}

main .h3_b:after {
  position: absolute;
  content: '';
  right: -3px;
  top: -7px;
  width: 0;
  height: 0;
  border: none;
  border-left: solid 40px transparent;
  border-bottom: solid 79px white;
  z-index: -1;
}
/*h2見出し*/
main h2 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 0 2rem;		/*h2の外側にとるスペース。上、左右、下への順番。*/
	font-size: 1.5rem;		/*文字サイズ*/
	position: relative;		/*ulineを配置する為に必要な指定*/
	font-weight: normal;	/*デフォルトの太字を標準に*/
	border-bottom: 2px solid #ddd;	/*薄い色の線の幅、線種、色*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広くする*/
}

/*h2のアクセントラインの設定*/
main h2 .uline {
	display: inline-block;position: relative;
	padding: 0.5rem 0;	/*h2内の余白。上下、左右への順番。*/
	bottom: -2px;		/*濃い線を薄い線に重ねる為の指定。枠線の幅と合わせる。*/
	border-bottom: 2px solid var(--primary-color);	/*濃い色の線の幅、線種、varは色の事でcss冒頭で指定しているprimary-colorを読み込み*/
}

/*右側の装飾文字の設定*/
main h2 .small {
	font-size: 0.6em;	/*文字サイズを親要素の60%に*/
	opacity: 0.7;		/*透明度。色が70%出た状態。*/
}

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

/*h3見出し（menu.htmlの「その他のメニュー」での背景色付きの見出しに使用）*/
main h3.type2 {
	background: var(--primary-color);	/*背景色。css冒頭で指定しているprimary-colorを読み込み*/
	color: var(--primary-inverse-color);	/*文字色。css冒頭で指定しているprimary-inverse-colorを読み込み*/
	font-size: 1rem;	/*文字サイズ*/
	text-align: center;	/*テキストをセンタリング*/
	border-radius: 5px;	/*角を少し丸くする指定*/
}

/* -------------------------------------- */
/* 1. ★PC/タブレット表示 (横2列、個別に寄せ) */
/* -------------------------------------- */
.banner-wrapper {
    /* Flexboxを有効にして横並びにする */
    display: flex;
    /* 折り返しを許可（スマホで縦に並べるために必要） */
    flex-wrap: wrap; 
    /* 2列なので、アイテム間の隙間を均等に取る設定（space-betweenを維持） */
    justify-content: space-between;
    /* コンテナの左右に余白が必要な場合は padding を追加 */
    /* padding: 0 15px; */ 
}

.banner-item {
    /* 【変更点】均等に2分割する設定 (隙間を考慮して約50%よりも小さくする) */
    flex-basis: 48%; /* 48% x 2列 = 96%。残りの4%を隙間に使う */
    /* 縦の隙間を作るためのマージン */
    margin-bottom: 20px;
    
    /* 【重要】内部のインライン要素（画像）の寄せ方を調整するため text-align を初期化 */
    /* text-align: center; などの指定があればここでリセットまたは調整 */
}

/* 画像が親要素の幅に合うように設定 */
.banner-item img {
    /* 画像の幅は親要素に合わせる */
    width: 100%;
    height: auto;
    /* text-alignを適用させるため、display: block; を解除または調整 */
    display: block; /* ← ブロックのままの場合は text-align が効かない */
    
    /* 画像をインラインブロックにして text-align: right/left を効かせる */
    /* もし画像サイズが親要素より小さい場合に備えて以下の設定を検討 */
    /* display: inline-block; */
}


/* -------------------------------------- */
/* ★個別寄せの設定 */
/* -------------------------------------- */

/* 左バナー（1列目）: 右寄せ */
.left-aligned-banner {
    /* 内部の画像（インライン要素）を右寄せにする */
    text-align: right; 
}

/* 右バナー（2列目）: 左寄せ */
.right-aligned-banner {
    /* 内部の画像（インライン要素）を左寄せにする */
    text-align: left; 
}

/* -------------------------------------- */
/* 2. ★スマートフォン縦1列表示 */
/* -------------------------------------- */
@media screen and (max-width: 768px) {
    .banner-item {
        /* 画面幅が768px以下になったら、横幅いっぱいに広げる */
        flex-basis: 100%;
        /* 縦に並んだときの間隔を調整 */
        margin-bottom: 15px;
        
        /* 【重要】スマホでは、寄せの指定を中央寄せに戻すか解除 */
        text-align: center; 
    }
}

/*★main2ブロック(TOPページ以外)
---------------------------------------------------------------------------*/
/*main2ブロック（横スライドslick対策）*/
.ot_main * {min-width: 0;
}

/*main2ブロック*/
.ot_main {
　margin-top: 0vw;
    margin-right: 3vw;
    margin-bottom: 3vw;
    margin-left: 3vw;
	}


/*メニューページ
---------------------------------------------------------------------------*/
/*ブロック内にある、全ての写真ブロックを囲むボックス*/
.list-menu {
	display: grid;
	grid-template-columns: repeat(2, 1fr);	/*２列にする。３列がいいなら、(3, 1fr)とすればOKです。*/
	gap: 2rem;	/*写真ブロック同士に空けるマージン的な要素。*/
	margin-bottom: var(--global-space);	/*ボックスの下に空けるスペース。css冒頭で指定しているglobal-spaceを読み込み*/
}

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

	.list-menu {
		grid-template-columns: repeat(4, 1fr);	/*4列にする*/
	}

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


/*list（メニュー写真や説明が入ったボックス一個あたり）
---------------------------------------------------------------------------*/
/*list内の全ての要素のマージンを一旦リセット*/
.list * {
	margin: 0;
}

/* ボックス１個あたり */
.list {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1rem;            /* ボックス内の余白 */
    background: #fff;         /* 背景色 */
    color: #555;              /* 文字色 */
    
    /* ▼ 修正・追加部分 ▼ */
    border: 1px solid #ddd;   /* 1pxの太さ、実線、薄いグレー色で線を引く */
    box-shadow: 5px 5px 5px rgba(0,0,0,0.1); /* 影の設定 */
    box-sizing: border-box;   /* 線を含めたサイズ計算にする（崩れ防止） */
}
/*リンクテキストがある場合に親要素のカラーを引き継ぐ*/
.list a {
	color: inherit;
}

/*価格*/
.list h4 .price {
	background: #e1e1e1;	/*背景色*/
	font-weight: normal;	/*h要素のデフォルトの太字を標準にする*/
	border-radius: 100px;	/*角を丸くする指定。大きければ適当でOK。*/
	padding: 0.3rem 1rem;	/*価格内の余白。上下、左右へ。*/
	margin-left: 1rem;		/*左側に1文字分のスペースを空ける。メニュータイトルとの隙間の調整です。*/
	font-size: 0.8rem;		/*文字サイズを80%に*/
}

/*ブロック内のp要素*/
.list p {
	margin: 0;padding: 0;
	font-size: 0.85rem;	/*文字サイズを85%に*/
	line-height: 1.8;	/*行間を少し狭く*/
}

/*アイコン*/
.list .newicon {
	position: absolute;
	left: -5px;	/*左からの配置場所。マイナスがついているので本来の向きとは逆に移動する。*/
	top: -10px;	/*上からの配置場所。マイナスがついているので本来の向きとは逆に移動する。*/
	background: var(--primary-color);	/*背景色。css冒頭で指定しているprimary-colorを読み込み*/
	color: var(--primary-inverse-color);	/*背景色。css冒頭で指定しているprimary-inverse-colorを読み込み*/
	font-size: 0.7rem;	/*文字サイズ。70%。*/
	width: 5em;			/*アイコンの幅。4文字分。*/
	line-height: 5em;	/*行間ですが、高さとして使用。上のwidthと揃えれば正円になる。*/
	border-radius: 50%;	/*円形にする指定。*/
	text-align: center;	/*テキストをセンタリング*/
}

/*ボックス内のfigure画像*/
.list figure img {
	margin-bottom: 0.5rem;	/*画像の下に空けるスペース*/
}

/* 「text-center」がついた要素の中の「画像」を中央に固定する */
.text-center img {
    display: inline-block !important; /* ブロック化を解除してインラインに戻す */
    margin: 0 auto !important;        /* 左右中央へ */
    vertical-align: bottom;           /* 下の隙間対策 */
}

/* 親要素（figure）自体も確実に中央揃えにする */
.text-center {
    text-align: center !important;
    display: block !important;
    width: 100% !important;
}

/*テキストだけのメニュー（menu.htmlで使用）
---------------------------------------------------------------------------*/
/*ボックス全体*/
dl.text-menu {
	margin: 0;
	display: grid;		/*gridボックスを使う指定*/
	grid-template-columns: auto 1fr;	/*２列のうち、左は内容に応じて自動、残りを右側に割り当て*/
}

/*メニュータイトルと価格の共通設定*/
dl.text-menu dt, dl.text-menu dd {
	border-bottom: 1px solid #ccc;	/*下線の幅、線種、色*/
	padding: 1rem;					/*要素内の余白*/
}

/*1つ目のdt（メニュータイトル）と、1つ目のdd（価格）*/
dl.text-menu dt:nth-of-type(1), dl.text-menu dd:nth-of-type(1) {
	border-top: 1px solid #ccc;	/*上の線の幅、線種、色*/
}

/*価格*/
dl.text-menu dd {
	text-align: right;	/*テキストを右寄せする*/
}

	/*画面幅600px以上の設定*/
	@media screen and (min-width:600px){
	
	/*ボックス全体*/
	dl.text-menu {
		grid-template-columns: repeat(2, auto 1fr);	/*上の「auto 1fr」を２回続ける。つまり「auto 1fr auto 1fr」と同じ意味。*/
	}
	
	/*2つ目のdt（メニュータイトル）と、2つ目のdd（価格）への追加*/
	dl.text-menu dt:nth-of-type(2), dl.text-menu dd:nth-of-type(2) {
		border-top: 1px solid #ccc;	/*上の線の幅、線種、色*/
	}

	/*奇数番目のdd（価格）*/
	dl.text-menu dd:nth-of-type(odd) {
		margin-right: 5vw;	/*右側にスペースを作る。左右にメニューが並んだ場合の間のマージンです。*/
	}

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


/*お知らせブロック
---------------------------------------------------------------------------*/
/*お知らせブロック*/
.new {
	background: rgba(0,0,0,0.02);	/*背景色。0,0,0は黒のことで0.02は色が2%出た状態。*/
	border-radius: 10px;			/*角を丸くする指定*/
	overflow: hidden;
	margin-bottom: 4rem;	/*ブロックの下に空けるスペース。4文字分。*/
}

/*奇数行目を背景色を少し濃くする。全体同じ色がよければここの数行は削除。*/
.new dt:nth-of-type(odd),
.new dd:nth-of-type(odd) {
	background: rgba(0,0,0,0.04);
}

/*日付(dt)設定*/
.new dt {
	padding: 1rem 1rem 0;	/*dt内の余白。上、左右、下への順番。*/
}

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

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

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

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

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

	/*日付(dt)設定*/
	.new dt {
		padding: 1rem 0 1rem 2rem;	/*dt内の余白。上、右、下、左への順番。*/
	}

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

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


/*2・3カラム（main-contents、sub-contents設定）
---------------------------------------------------------------------------*/
/*main-contentsブロック*/
.main-contents {
	margin-bottom: var(--global-space);	/*ボックスの下に空けるスペース。subとの間の余白で、css冒頭で指定しているglobal-spaceを読み込み*/
}

	/*画面幅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: 1;		/*並び順。数字の小さい順番に表示。*/
		flex: 1;
	}
	
	/*sub-contentsブロック共通*/
	.sub-contents {
		width: 210px;	/*幅。変更可*/
	}
	
	/*1つ目のsub-contents*/
	.sub-contents:nth-child(2) {
		order: 2;	/*並び順。数字の小さい順番に表示。*/
	}
	
	/*2つ目のsub-contents（※３カラムで使いたい場合用）*/
	.sub-contents:nth-child(3) {
		order: 3;	/*並び順。数字の小さい順番に表示。３番目という意味なので一番右側に表示。*/
	}
	
	}/*追加指定ここまで*/


/*サブコンテンツ内のh3要素(見出し)*/
.sub-contents h3 {
	display: block;
	margin: 0;
	text-align: center;	/*テキストをセンタリング*/
	border-radius: 5px 5px 0px 0px;	/*角を丸くする指定。左上、右上、右下、左下の順番。*/
	border: 1px solid #ccc;			/*下線の幅、線種、色*/
	background: linear-gradient(transparent, rgba(0,0,0,0.03));/*背景グラデーション。transparentは透明の事。0,0,0は黒の事で0.03は色が3%出た状態。*/
	padding: 0.5rem 0;	/*上下、左右への見出し内の余白*/
}


/*サブメニュー設定
---------------------------------------------------------------------------*/
/*サブメニューブロック全体*/
.submenu {
	padding: 0;
	margin: 0 0 1rem;	/*上、左右、下へのマージン*/
}

/*メニュー１個あたり*/
.submenu a {
	display: block;text-decoration: none;
	text-align: center;
	padding: 0.2rem 0.1rem;	/*上下、左右へのメニュー内の余白*/
}

/*h3見出しの下にサブメニューが続く場合にメニューの上の線をなくす*/
.sub-contents h3 + nav .submenu {
	border-top: none;
}
/* -------------------------------------- */
/* ★サブメニュー内の画像にホバー効果を適用 */
/* -------------------------------------- */

/* 1. トランジションの設定 (動きを滑らかにするため) */
.submenu a img {
    /* 変化にかける時間（例: 0.3秒）と、変化させるプロパティ（filter）を指定 */
    transition: filter 0.3s ease; 
    
    /* 画像がインライン要素の場合、下にわずかな隙間ができるのを防ぐ（任意） */
    vertical-align: middle; 
}

/* 2. ホバー時の設定 (カーソルを乗せたとき) */
.submenu a img:hover {
    /* filter: brightness(値) を使って明るくする */
    /* 1.0 が標準の明るさです。1.2 は20%明るくする*/
    filter: brightness(1.1); 
    
    /* 明るくする+影をつけて浮き出し感を出す場合 */
 /* box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); */
}

/*クーポンボタン（トップページ左下の横書きボタン）
---------------------------------------------------------------------------*/
#message-parts a {
	text-decoration: none;
    display: block;
    
    
	background: #ff7e00;/*背景色*/
	color: #fff;		/*文字色*/
	position: fixed;	/*スクロールしてもボタンが移動しないようにする指定*/
	z-index: 2;
    
	right: initial;     /* 元のrightをリセット */
	left: 0px;			/* ボタンの左からの配置場所指定 */
    
	top: initial;       /* 元のtopをリセット */
    
	bottom: 10px;		/* ボタンの下からの配置場所指定 (10px空ける) */
    
	padding: 10px 15px;	/*ボタン内の余白。上下 10px、左右 15px。*/
    
	border-radius: 0px 10px 10px 0px; /* 右上、右下を丸くする設定 (そのまま維持も可) */
    /* もし左上と左下を丸くするなら: border-radius: 10px 0px 0px 10px; */
    
	letter-spacing: 0.1rem;	/*文字間隔を少しだけ広く*/
    
    /* 横書きにすると幅がコンテンツに依存するため、幅を明示的に設定しても良い */
    /* width: auto; */ 
    /* min-width: 80px; */ 
}
/*ふきだしアイコン*/
#message-parts i {
	transform: scale(1.3);	/*1.3倍に*/
	margin-bottom: 10px;	/*下に空ける余白*/
}

/*マウスオン時に少し明るくする*/
#message-parts a:hover {
	filter: brightness(1.2);
}

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

/*ta1テーブルブロック設定*/
.ta1 {
	table-layout: fixed;
	border-top: 1px solid #999;	/*テーブルの一番上の線。幅、線種、色*/
	width: 100%;				/*幅*/
	margin-bottom: var(--global-space);	/*テーブルの下に空けるスペース。css冒頭で指定しているglobal-spaceを読み込み*/
}

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

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

/*th（左側）のみの設定*/
.ta1 th {
	width: 20%;			/*幅*/
	text-align: left;	/*左よせにする*/
	background: #e7d3db;	/*背景色*/
}

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

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

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


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

/*ボタンの設定*/
.pagetop a {
	display: block;text-decoration: none;text-align: center;z-index: 99;
	position: fixed;	/*スクロールに追従しない(固定で表示)為の設定*/
	right: 20px;		/*右からの配置場所指定*/
	bottom: 200px;		/*下からの配置場所指定*/
	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%;	/*円形にする*/
}


/*その他
---------------------------------------------------------------------------*/
.clearfix::after {content: "";display: block;clear: both;}
.color-check, .color-check a {color: #ff0000 !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;}
.look {display: inline-block;padding: 0px 10px;background: #eee;color: #333;border: 1px solid #ccc; 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;}

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

/*サムネイルの横スライドショー
---------------------------------------------------------------------------*/
/*スライドショー全体を囲むブロック*/
.slide-thumbnail2-parts {
	overflow-x: hidden;
	padding-bottom: 50px;	/*下に空けるスペース。インジケーター分の確保。*/
	position: relative;
}

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

/*１個あたりのボックスの設定と、4列配置する為の指示*/
.slide-thumbnail2-parts .img-parts > div {
	flex: 0 0 23%;			/*４枚表示する為には25%指定だが、左右のマージン分（計2%）を差し引く。*/
	max-width: 23%;			/*上記と同じ内容だが念の為追加*/
	margin: 0 1%;			/*上下、左右へのマージン*/
	padding: 0.3rem;			/*ボックス内の余白*/
	background: #fff;		/*背景色*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	/* --- 追加 --- */
    border-radius: 10px;    /* 角を丸くする。数字を大きくするほど丸みが強 */
    overflow: hidden;       /* 中の画像が角からはみ出さないようにするま */
    /* ----------------- */
}

	/*画面幅800px以下の追加指定*/
	@media screen and (max-width:800px) {
	
	/*2列配置に変更する*/
	.slide-thumbnail2-parts .img-parts > div {
		flex: 0 0 48%;
		max-width: 48%;
	}

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


/*画像たちを囲むブロック*/
.slide-thumbnail2-parts .img-parts {
	display: flex;
}

/*画像*/
.slide-thumbnail2-parts .img-parts img {
	width: 100%;
}

/*段落タグ(p)*/
.slide-thumbnail2-parts p {
	font-size: 0.85rem;	/*文字サイズを85%に*/
	line-height: 1.5;	/*行間をデフォルトより狭く*/
}
/* 画像の下の見出し(h5)を中央揃えにする */
.slide-thumbnail2-parts .img-parts h5 {
    text-align: center;    /* 文字を中央へ */
    margin: 0.5rem 0;      /* 上下に少し隙間を作る */
    font-weight: bold;     /* もし太字にしたい場合は追加 */
}

/*★現在表示中（インジケーター）のボタン
---------------------------------------------------------------------------*/
/*全体*/
.slide-thumbnail2-parts .slide-indicators-parts {
	text-align: center;
	position: absolute;
	width: 100%;
	bottom: 0px;	/*下からのボタンの配置場所*/
	left: 0px;
}

/*１個あたり*/
.slide-thumbnail2-parts .indicator {
	display: inline-block;
	width: 10px;
	height: 10px;
	background: #ccc;	/*未アクティブ時のボタン色*/
	border-radius: 50%;
	margin: 0 5px;
	cursor: pointer;
}

.slide-thumbnail2-parts .indicator.active {
	background: #000;	/*アクティブ時のボタン色*/
}

/* -------------------------------------- */
/* ★Gスライド下3分割 Flexbox の設定 */
/* -------------------------------------- */
.three-columns {
    /* 必須：Flexboxを有効にして、子要素を横並びにする */
    display: flex;
    background-color: #ffffff; /* または white; */
    /* 必須：子要素（.column-item）中央揃えにする */
justify-content: center;
    
    /* 必須：折り返しを許可（レスポンシブ対応のため） */
    flex-wrap: wrap; 
}

/* -------------------------------------- */
/* ★各分割要素（列）のスタイル */
/* -------------------------------------- */
.column-item {
    /* 必須：列を均等な幅にする */
  flex-basis: 30%; /* 30% x 3列 = 90%。残りの10%を隙間に使う */
  margin: 0 0px 0px 0px; 
    /* 上下左右の順: 
       上 0, 右 15px, 下 20px , 左 15px */
	   
/* 【★変更点 1: 背景色を白に設定】 */
    background-color: #ffffff; /* または white; */
    
    /* 【★変更点 2: 内側に余白（パディング）を設定】 */
    padding: 0px; 
 }
 
/* 左寄せのクラス */
.column-item.text-left {
    text-align: left;
}

/* 中央寄せのクラス（既にcenterですが、明示的に指定） */
.column-item.text-center {
    text-align: center;
}

/* 右寄せのクラス */
.column-item.text-right {
    text-align: right;     
    /* スマホなどで縦に並べるための設定（後述のメディアクエリとセット） */
    margin-bottom: 0px;
}
/* -------------------------------------- */
/* ★ column-item 内の h3 要素の設定 */
/* -------------------------------------- */
.column-item h3 {
    /* 外側の余白 (マージン) を上下左右 1px に設定 */
    margin: 1px;
    
    /* 内側の余白 (パディング) を上下左右 1px に設定 */
    padding: 1px; 
    
    /* フォントサイズなどもここで調整できます */
}

/* -------------------------------------- */
/* ★ column-item 内の p 要素の設定 */
/* -------------------------------------- */
.column-item p {
    /* 外側の余白 (マージン) を上下左右 1px に設定 */
    margin: 1px;
    
    /* 内側の余白 (パディング) を上下左右 1px に設定 */
    padding: 1px;
    
    /* 行間などもここで調整できます */
    /* line-height: 1.2; */ 
}
/* -------------------------------------- */
/* ★レスポンシブ対応 (画面幅が狭い場合) */
/* -------------------------------------- */
@media screen and (max-width:800px) {
    .column-item {
        /* スマホ・タブレットでは横幅いっぱいに広げて、縦に並べる */
        flex-basis: 100%;
        margin-right: 0;
        margin-left: 0;
    }
}

/* ★「intro」というエリアの中にあるPタグだけを全部中央にする 
---------------------------------------------------------------------------*/
.intro p {
text-align: center;
}


/*list-grid7
---------------------------------------------------------------------------*/
.list-grid7-parts .list-parts * {margin: 0;padding: 0;}

/*ブロック全体を囲むブロック*/
.list-grid7-parts {
	padding-top: 20px;	/*画像が少し上にずれるので適当に余白を確保*/
}

/*ボックス１個あたり*/
.list-grid7-parts .list-parts {
    display: grid;
	position: relative;
	border-radius: 5px;		/*角を少しだけ丸く*/
	background:#e7e7e7;	/*背景色*/
	color: #555;			/*文字色*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	padding: 2rem;			/*ボックス内の余白。２文字分。*/
	margin-bottom: 2rem;	/*ボックスの下に空けるスペース。2文字分。*/
}

/*ボックス内のh4見出し*/
.list-grid7-parts .list-parts h4 {
	text-align: center;		/*テキストをセンタリング*/
	margin-bottom: 0.5rem;	/*下に0.5文字分の余白を空ける*/
}

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

/*ボックス内のfigure画像*/
.list-grid7-parts .list-parts figure {
	margin: 0 auto;
	width: 100px;			/*画像サイズ*/
	margin-top: -40px;		/*本来の場所より上にずらす*/
	margin-bottom: 1rem;	/*画像の下に空けるスペース*/
	border-radius: 50%;		/*円形にする*/
	overflow: hidden;
	background: #ec4b62;	/*背景色。画像に透過部分がある場合に見えます。*/
}

/*ボックス内のfigure画像（※アスペクト比を1:1にした場合）*/
.list-grid7-parts.square .list-parts figure {
	aspect-ratio: 1 / 1;	/*幅に対して高さを同じにする*/
}
.list-grid7-parts.square .list-parts figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;			/*コンテナいっぱいにカバー、余分な部分はカット*/
	object-position: center;	/*中央部分を表示*/
}

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

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

	/*ボックス内のfigure画像*/
	.list-grid7-parts .list-parts figure {
		width: 150px;		/*画像サイズ*/
		margin-top: -50px;	/*本来の場所より上にずらす*/
	}
/*マウスオン時に少し明るくする*/
#list-grid7-parts .list-parts figure a:hover {
	filter: brightness(1.2);
}

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


/*list-grid-simple（制作実績ブロック）
---------------------------------------------------------------------------*/
.list-grid-simple .list * {margin: 0;padding: 0;}

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

/*ボックス１個あたり*/
.list-grid-simple .list {
    display: grid;
	position: relative;
}

/*h4見出し*/
.list-grid-simple .list h4 {
	margin-top: 0.5rem;		/*上に0.5文字分のスペースを空ける*/
	font-weight: normal;	/*太さを標準に*/
}

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

	/*listブロック全体を囲むブロック*/
	.list-grid-simple {
		grid-template-columns: repeat(3, 1fr);	/*3列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
	}

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


/*list-grid1（３カラムボックス）
---------------------------------------------------------------------------*/
.list-grid1 .list * {margin: 0;padding: 0;}

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

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

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


/*ボックス１個あたり*/
.list-grid1 .list {
    display: grid;
	margin-bottom: 3rem;	/*ボックスの下に空けるスペース*/
	position: relative;
	border-radius: 5px;	/*角を少しだけ丸く*/
	background: #fff;	/*背景色*/
	color: #333;		/*文字色*/
	box-shadow: 2px 5px 5px rgba(0,0,0,0.1);	/*ボックスの影。右へ、下へ、ぼかし幅。0,0,0は黒のことで0.1は色が10%出た状態。*/
	padding: 2rem;	/*ボックス内の余白。２文字分。*/
}

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

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

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


/*bg-black内のボックスへの追加設定*/
.list-grid1 .list.bg-black {
	background: #111;	/*背景色*/
	color: #fff;		/*文字色*/
}

/*ナンバー（01〜03の飾り番号）*/
.list-grid1 .list .num {
	position: absolute;
	left: -20px;		/*左からの配置場所。マイナスがつくので本来とは逆向きに移動。*/
	top: -30px;			/*上からの配置場所。マイナスがつくので本来とは逆向きに移動。*/
	font-size: 60px;	/*文字サイズ*/
	line-height: 1;
	font-family: "MonteCarlo", cursive;	/*フォント指定*/
	opacity: 0.2;	/*透明度。色を20%出す。*/
}

/*引用符（"）の装飾*/
.list-grid1 .list h4.kazari::before {
	content: "";	/*わかりづらいですが、中央にあるのが引用符でこの文字を出力しています。*/
	position: absolute;
	left: -1rem;	/*左からの配置場所。マイナスがつくので本来とは逆向きに移動。*/
	top: -40px;		/*上からの配置場所。マイナスがつくので本来とは逆向きに移動。*/
	opacity: 0.2;	/*透明度。色を20%出す。*/
	font-size: 60px;	/*文字サイズ*/
	line-height: 1;
}

/*ボックス内のh4見出し*/
.list-grid1 .list h4 {
	font-size: 1.4rem;	/*文字サイズを140%に*/
	line-height: 1.6;	/*行間*/
	margin-bottom: 1rem;	/*下に１文字分のスペースを空ける*/
	position: relative;
}

/*ボックス内のp要素*/
.list-grid1 .list p {
	font-size: 0.9rem;	/*文字サイズを90%に*/
	line-height: 1.6;	/*行間*/
	font-weight: normal;
}

/*bg-black内のp要素への追加設定*/
.list-grid1 .list.bg-black p {
	color: #999;	/*文字色*/
}

/*ボックス内のfigure画像*/
.list-grid1 .list figure.icon {
	margin: 0 auto;
	width: 100px;		/*画像サイズ*/
	margin-top: -40px;	/*本来の場所より上にずらす*/
}

/*bg1内のfigureへの追加設定*/
.bg1 .list-grid1 .list figure.icon {
	filter: grayscale(100%) brightness(90%);	/*画像をグレースケールにし、明るさも少し暗くする。そのままの画像色を出したければこの１行を削除。*/
	margin-bottom: 1rem;	/*下に１文字分のスペースを空ける*/
}

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

	/*ボックス内のfigure画像*/
	.list-grid1 .list figure.icon {
		width: 150px;		/*画像サイズ*/
		margin-top: -50px;	/*本来の場所より上にずらす*/
	}

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

/*フッターメニュー
---------------------------------------------------------------------------*/
/*メニューブロック全体*/
#footermenu {
	margin: 0 !important;
	padding: 20px;		/*ブロック内の余白*/
	text-align: center;	/*テキストを中央に*/
	font-size: 0.8rem;	/*文字サイズ。bodyのfont-sizeの80%です。*/
}

/*メニュー１個あたり*/
#footermenu li {
	display: inline-block;	/*簡易的に横並びにする*/
	padding: 0 10px;		/*上下、左右への余白*/
}


/*フッター設定
---------------------------------------------------------------------------*/
footer small {font-size: 100%;}
footer {
	font-size: 0.8rem;		/*文字サイズ。bodyのfont-sizeの70%です。*/
	text-align: center;		/*内容をセンタリング*/
	padding: 20px;			/*ボックス内の余白*/
}

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

/*crt部分*/
footer .crt {display: block;}


/*フッター内にあるソーシャルメディアのアイコン
---------------------------------------------------------------------------*/
/*アイコンブロック全体*/
ul.icons {
	list-style: none;
	margin: 0;padding: 0;
	margin-bottom: 20px;	/*ブロックの下に空けるスペース*/
	display: flex;	/*横並びにする*/
	align-self: center;
	justify-content: center;
	gap: 1rem;	/*アイコン同士のマージン的なスペース。２文字分。*/
}

/*アイコン一個あたり*/
.icons i {
	font-size: 30px;	/*Font Awesomeのアイコンサイズ*/
}

/*フッター
---------------------------------------------------------------------------*/
#footer2-parts * {margin: 0;padding: 0;}
#footer2-parts ul {list-style: none;}

/*ブロック全体*/
#footer2-parts {
	background: #eee;	/*背景色*/
	color: #555;		/*文字色*/
	padding: 10px
}

/*ロゴやSNSアイコンが入ったブロック*/
#footer2-parts div.footer2-1-parts {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 1rem;	/*このブロック内のボックス同士の間に空ける余白。１文字分。*/
}

/*メニューブロック*/
#footer2-parts div.footer2-2-parts {
    flex: 1;
}

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

	#footer2-parts {
		display: flex;
		gap: 2rem;		/*ロゴのブロックとメニューのブロックとの間の余白。2文字分。*/
	}

	/*ロゴやSNSアイコンが入ったブロック*/
	#footer2-parts div.footer2-1-parts {
		text-align: left;
		width: 40%;	/*幅。40%。*/
	}

	/*メニューブロック*/
	#footer2-parts div.footer2-2-parts {
		/*margin-bottom: 0;	下の余白をなくす*/
	}

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



/*Copyright部分*/
#footer2-parts small {
	display: block;
	text-align: right;
	margin-top: 2rem;
}
/*crt
---------------------------------------------------------------------------*/
.crt a {
	text-decoration: none;
	display: block;
	background: #555;
	color: #ccc;
	text-align: center;
	padding: 0.5rem 1rem;
	font-size: 0.8rem;
}
.crt a::before {
	font-family: "Font Awesome 6 Free";
	content: "\f1ad";
	font-weight: bold;
	margin-right: 0.5em;
}


/*SNSアイコン
---------------------------------------------------------------------------*/
.sns1-parts {
	list-style: none;
	margin: 0;padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;		/*アイコン同士のマージン的な要素。１文字分。*/
}

.sns1-parts i {
	font-size: 30px;	/*アイコンサイズ*/
}


/*Google Map用
---------------------------------------------------------------------------*/
.iframe-box1-parts {
	width: 100%;
	height: 0;
	padding-top: 56.25% !important;	/*マップの高さを増やしたい場合は、ここの数値を上げてみて下さい。*/
	position: relative;
	overflow: hidden;
}
.iframe-box1-parts iframe {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}


/*テーブル
---------------------------------------------------------------------------*/
.week2-parts {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	border-radius: 10px;	/*角を丸くする指定*/
	border: 1px solid #ccc;	/*テーブル外側の線の幅、線種、色*/
	table-layout: fixed;	/*幅を均等に*/
	background: #fff;		/*テーブル全体の背景色*/
	color: #555;			/*テーブル全体の文字色*/
}

/*受付時間の幅*/
.week2-parts th:first-child,
.week2-parts td:first-child {
	width: 25%;
}

/*各曜日の幅*/
.week2-parts th:not(:first-child),
.week2-parts td:not(:first-child) {
	width: calc(75% / 7);	/*受付時間で25%とっているので残りの75%を7で割る*/
}

/*th(曜日)とtd(時間)*/
.week2-parts th,
.week2-parts td {
	padding: 1rem 0;	/*ボックス内の余白。上下に１文字分、左右は0。*/
	text-align: center;	/*テキストをセンタリング*/
	border-bottom: 1px solid #ccc;	/*下の線の幅、線種、色*/
	border-right: 1px solid #ccc;	/*右の線の幅、線種、色*/
}

/*th(曜日)とtd(時間)のそれぞれ最後の右側の線を消す*/
.week2-parts th:last-child,
.week2-parts td:last-child {
	border-right: none;
}

/*最後の行の下線を消す*/
.week2-parts tr:last-child td {
	border-bottom: none;
}

/*th(曜日)の追加指定*/
.week2-parts th {
	background: #fafafa;	/*背景色*/
}
.week2-parts td {
	border-bottom: 1px solid #ccc;	/*下の線の幅、線種、色*/
}

/*「問い合わせ」ボタンブロック
---------------------------------------------------------------------------*/
/*ボタンを囲むボックス*/
.btn-box {
  list-style: none;margin: 0;padding: 0;
  display: flex;
  flex-direction: column;  /*小さな端末では縦並び*/
  gap: 0.5rem;  /*ボタン同士に空けるマージン的なスペース*/
}

/*ボタン１個あたり*/
.btn-box a {
  display: inline-block;text-decoration: none;
  background: var(--accent-color);    /*背景色。冒頭のaccent-colorを読み込みます。*/
  color: var(--accent-inverse-color);  /*文字色。冒頭のaccent-inverse-colorを読み込みます。*/
  padding: 0.5rem 1rem;  /*上下に0.5文字分、左右に1文字分の余白*/
  border-radius: 5px;    /*角を少しだけ丸くする*/
}

	/*画面500px以上の追加指定*/
	@media screen and (min-width:500px) {
  
  /*ボタンを囲むボックス*/
  .btn-box {
    flex-direction: row;  /*横並びに変更*/
  }

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


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

  /*アイコンを表示させる*/
  .btn-box a::before {
    font-family: "Font Awesome 6 Free";
    font-weight: bold;
    margin-right: 0.8em;	/*アイコンとメニューテキストとの間に空けるスペース。0.8文字分。*/
    display: inline-block;
    transform: scale(1.4);  /*アイコンのサイズ。1.4倍。*/
    opacity: 0.5;  /*アイコンの透明度。色が50%出た状態。*/
  }
  
  /*1つ目ボタンで使うアイコン*/
  .btn-box li:nth-of-type(1) a::before {
    content: "\f0e0";
  }
  
  /*２つ目ボタンで使うアイコン*/
  .btn-box li:nth-of-type(2) a::before {
    content: "\f1e5";
  }

	}/*追加指定ここまで*/
	
/*各ページの大きな背景入りの見出し（共通）
---------------------------------------------------------------------------*/
.page-header {
  margin: 0;
    display: block;    /* ブロック要素にすることで前後に改行が入る */
  justify-content: center;
  align-items: center;
  min-height: 15vw;   /*ボックスの最低の高さ。100vwが画面幅100%と同じなので、画面幅によってここの高さも変動。*/
  padding: 2rem;  /*ボックス内の余白*/
  color: #fff;    /*文字色*/
  font-size: 2rem; /*文字サイズを2倍に*/
  text-shadow: 0 0 10px rgba(0,0,0,0.8); /*テキストの影*/
  text-align: center; /*複数行になった時のためにセンタリング*/
  
}

/*右側の装飾文字の設定*/
.page-header .small {
    width: 100%;       /* 幅をいっぱいにする */
    margin-top: 0.1rem; /* 「ご利用料金」との間の微調整（お好みで） */
	font-size: 0.4em;	/*文字サイズを親要素の60%に*/
	opacity: 0.7;		/*透明度。色が70%出た状態。*/

	}
/*「新着情報」の見出し*/
.page-header.news {
  background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("/images/title_news.jpg") center center / cover;
}
/*「お問い合わせ」の見出し*/
.page-header.contact {
  background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("/images/title_contact.jpg") center center / cover;
}
/*「休校のご案内」の見出し*/
.page-header.calendar {
  background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("/images/title_calendar.jpg") center center / cover;
}
/*「オンライン学科教習」の見出し*/
.page-header.online {
  background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("/images/title_online.jpg") center center / cover;
}

/*「時間割」の見出し*/
.page-header.schedule {
  background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("/images/title_schedule.jpg") center center / cover;
}
/*「 無料送迎バス」の見出し*/
.page-header.pickup {
  background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("/images/title_pickup.jpg") center center / cover;
}
/*「学校紹介」の見出し*/
.page-header.information {
  background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("/images/title_information.jpg") center center / cover;
}
/*「アクセス」の見出し*/
.page-header.access {
  background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("/images/title_access.jpg") center center / cover;
}
/*「資料請求」の見出し*/
.page-header.shiryou {
  background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("/images/title_shiryou.jpg") center center / cover;
}
/*「卒業生の皆様へ」の見出し*/
.page-header.graduates {
  background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("/images/title_graduate.jpg") center center / cover;
}
/*「 卒業生の声」の見出し*/
.page-header.voice {
  background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("/images/title_voice.jpg") center center / cover;
}
/*「杜の美江別自動車学校の特色」の見出し*/
.page-header.style {
  background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("/images/title_style.jpg") center center / cover;
}
/*「 プライバシーポリシー」の見出し*/
.page-header.privacy {
  background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("/images/title_privacy.jpg") center center / cover;
}
/*「サイトマップ」の見出し*/
.page-header.sitemap {
  background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("/images/title_sitemap.jpg") center center / cover;
}
/*「普通車（一種・二種）」の見出し*/
.page-header.guide01 {
  background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("/images/title_guide01.jpg") center center / cover;
}
/*「 中型車（一種・二種）」の見出し*/
.page-header.guide02 {
  background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("/images/title_guide02.jpg") center center / cover;
}
/*「「 大型車（一種・二種）」の見出し*/
.page-header.guide03 {
  background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("/images/title_guide03.jpg") center center / cover;
}
/*「大型特殊車」の見出し*/
.page-header.guide04 {
  background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("/images/title_guide04.jpg") center center / cover;
}
/*「  けん引車」の見出し*/
.page-header.guide05 {
  background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("/images/title_guide05.jpg") center center / cover;
}
/*「  自動二輪車（大型・普通）」の見出し*/
.page-header.guide06 {
  background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("/images/title_guide06.jpg") center center / cover;
}

/* リンク集全体のコンテナ（link）
ーーーーーーーーーーーーーーーーーーーー */
.link-container {
    padding-left: 8%; /* 左側の余白 */
    padding-right: 5%;
    padding-bottom: 60px;
}

/* 各リンクのアイテム */
.link-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 35px;
    padding-bottom: 25px;
    border-bottom: 1px solid #f0f0f0; /* 薄い区切り線 */
}

/* 画像がないタイプ（公的機関）の調整 */
.link-item.no-img {
    padding-left: 20px;
    border-left: 4px solid #CF0301; /* 左側にピンクのアクセント線 */
    border-bottom: 1px dotted #ddd;
}

/* 画像部分 */
.link-img {
    flex: 0 0 160px; /* 画像エリアの幅を固定 */
    margin-right: 25px;
    text-align: center;
}

.link-img img {
    max-width: 100%;
    height: auto;
    border: 1px solid #eee;
    padding: 5px;
    background: #fff;
}

/* テキスト部分 */
.link-txt {
    flex: 1;
}

.link-txt h4 {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 1.15rem;
    color: #333;
}

.link-txt h4 a {
    color: #CF0301; /* リンク色 */
    text-decoration: none;
}

.link-txt h4 a:hover {
    text-decoration: underline;
}

.link-txt p {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 8px;
    color: #666;
}

/* URLテキスト */
.link-txt .url {
    display: block;
    font-size: 0.85rem;
    color: #999;
    word-break: break-all; /* 長いURLの折り返し対策 */
}

/* 区切り線 */
.link-divider {
    border: none;
    border-top: 2px solid #CF0301;
    margin: 50px 0;
    width: 100px;
}

/* スマホ対応：画面が狭いときは縦に並べる */
@media screen and (max-width: 600px) {
    .link-item {
        flex-direction: column;
        padding-left: 0;
    }
    .link-img {
        margin-bottom: 15px;
        margin-right: 0;
        text-align: left;
    }
}

/* ★サイトマップ全体を包むコンテナ（Sitemap）
ーーーーーーーーーーーーーーーーーーーー */
.sitemap-container {
    padding-left: 10%; /* 左側に大きめの余白 */
    padding-top: 20px;
    padding-bottom: 50px;
}

/* ホームへのリンク */
.sitemap-home {
    font-weight: bold;
    margin-bottom: 2rem;
}
.sitemap-home a {
    color: #333;
    text-decoration: none;
    font-size: 1.1rem;
}

/* セクション（グループ）の区切り */
.sitemap-section {
    margin-bottom: 40px;
}

.sitemap-section h3 {
    font-size: 1.1rem;
    color: #CF0301; /* 学校のテーマカラー：CIカラー */
    border-left: 4px solid #CF0301;
    padding-left: 15px;
    margin-bottom: 15px;
}

/* リストの基本設定 */
.sitemap-list, .sitemap-sub {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sitemap-list > li {
    position: relative;
    padding: 8px 0 8px 25px;
    border-bottom: 1px dotted #ddd; /* 薄い区切り線 */
}

/* 階層を表す「L字」の線（疑似要素） */
.sitemap-list > li::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 15px;
    width: 10px;
    height: 10px;
    border-left: 2px solid #ccc;
    border-bottom: 2px solid #ccc;
}

/* 子要素（普通車など）のインデント */
.sitemap-sub {
    margin-top: 10px;
    margin-left: 20px;
}

.sitemap-sub li {
    padding: 5px 0 5px 20px;
    position: relative;
}

.sitemap-sub li::before {
    content: "・";
    position: absolute;
    left: 0;
    color: #CF0301;
}

/* リンクのホバー効果 */
.sitemap-container a:hover {
    color: #CF0301;
    text-decoration: underline;
}

/* 現在のページ */
.current {
    font-weight: bold;
    color: #999;
}

/* ★intro内見出し中央＆専用設定（graduates/on-line）
ーーーーーーーーーーーーーーーーーーーー */
.intro h4 {
    text-align: center;      /* 文字を中央へ */
    line-height: 1.6;        /* 複数行になった時に読みやすく */
    margin-top: 2rem;        /* 上の要素との間隔 */
    margin-bottom: 1.5rem;   /* 下の文章との間隔 */
    color: #474747;          /* 他の見出しと色を合わせる */
}
.intro h4.left {
    text-align: left;      /* 文字を左へ */
    line-height: 1.6;        /* 複数行になった時に読みやすく */
    margin-top: 2rem;        /* 上の要素との間隔 */
    margin-bottom: 1.5rem;   /* 下の文章との間隔 */
    color: #474747;          /* 他の見出しと色を合わせる */
}


/* 2つ目のh4（卒割の方）など、特定のh4をさらに強調したい場合 */
.intro h4.highlight {
    color: #CF0301;          /* アクセントカラーに */
    font-weight: bold;
}

/* h5のセンター指定：ピンク・太字・中央寄せ */
.intro h5.center {
    text-align: center;      /* 中央寄せ */
    color: #CF0301;          /* ピンク色（見出しの線と合わせた色） */
    font-weight: bold;       /* 太文字 */
    font-size: 1.0rem;       /* サイズ */
    line-height: 1.7;        /* 行間を広げて読みやすく */
    margin: 2rem 0;          /* 上下の余白 */
}

/*★1列固定・下段背景ありのレイアウト（style）
ーーーーーーーーーーーーーーーーーーーー */
.list-single-bg {
    display: block; /* グリッドではなくシンプルなブロックとして扱う */
    width: 100%;
}

/* ボックス１個あたり */
.list-single-bg .list-parts {
    display: flex;
    flex-direction: column; /* 上に画像、下にテキスト */
    margin-bottom: 3rem;
    border-radius: 30px;
    overflow: hidden;
    background: #fff; /* 全体のベース */
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); /* 軽い影 */
}

/* 画像部分 */
.list-single-bg .list-parts figure {
    margin: 0;
    padding: 0;
    line-height: 0; /* 画像下の謎の隙間を消す */
}

.list-single-bg .list-parts figure img {
    width: 100%;
    height: auto;
    display: block;
}

/* 下段：テキストブロック（ここをご希望のスタイルに） */
.list-single-bg .text-parts {
    background: #efe5e9;    /* 指定の背景色 */
    padding: 25px;          /* 内側の余白 */
    text-align: left;       /* 左揃え */
}

/* テキストブロック内の文字設定 */
.list-single-bg .text-parts h4 {
    margin-bottom: 10px;
    color: #474747;
    font-size: 1.2rem;
}

.list-single-bg .text-parts p {
    text-align: left;       /* 左揃えを徹底 */
    font-size: 0.95rem;
    line-height: 1.7;
    color: #555;
    margin: 0;
}

/* --- 卒業生の声：共通エリア ---
---------------------------------------------------------------------------*/
.voice-card {
    display: flex; /* 横並びにする */
    flex-wrap: wrap; /* スマホでは縦に並ぶように */
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 20px; /* 画像を使わずCSSで角丸に */
    border: 2px solid transparent; /* あとで色をつける */
}

/* 女性用の色 */
.voice-card.woman {
    background-color: #fff9fb; /* 薄いピンク背景 */
    border-color: #ffb6c1;     /* ピンクの枠線 */
}

/* 男性用の色 */
.voice-card.man {
    background-color: #f9fcff; /* 薄いブルー背景 */
    border-color: #add8e6;     /* ブルーの枠線 */
}

/* 左側（属性情報） */
.voice-info {
    flex: 0 0 100px; /* 幅100px固定 */
    text-align: center;
    margin-right: 20px;
}

.voice-info h5 {
    font-size: 14px;
    margin-bottom: 10px;
    padding: 4px;
    border-radius: 4px;
}

/* 枠内のh5の色指定 */
.woman .voice-info h5 { background-color: #ff6699; color: #fff; }
.man .voice-info h5 { background-color: #0000ff; color: #fff; }

.voice-info img {
    width: 60px; /* 顔写真は少し小さめに */
    height: auto;
    border-radius: 20%; /* 丸く切り抜く */
}

.voice-info p {
    font-size: 12px;
    margin-top: 5px;
}

/* 右側（コメント部分） */
.voice-comment {
    flex: 1; /* 残りの幅を全部使う */
    min-width: 250px; /* これより狭くなると自動で改行（スマホ対応） */
    display: flex;
    align-items: center; /* 縦方向の真ん中に寄せる */
}

.voice-comment p {
    line-height: 1.6;
    margin: 0;
}

/*2カラムブロック（※900px未満では１カラム）
---------------------------------------------------------------------------*/
/*２カラムを囲むブロック*/
.list-half-parts .list-parts {
	display: flex;			/*flexボックスを使う指定*/
	flex-direction: column;	/*子要素を縦並びにする*/
	margin-bottom: 2rem;	/*ボックスの下に2文字分のスペースを空ける*/
}

/*ブロック内のh4見出し*/
.list-half-parts .list-parts h4 {
	font-size: 1.4rem;	/*文字サイズを1.4倍*/
}

/*画像ブロック共通*/
.list-half-parts .image-l-parts img, .list-half-parts .image-r-parts img {
/*border-radius: 50px;	/*角を丸くする指定。*/
/*box-shadow: 10px 10px rgba(0,0,0,0.1);	/*ボックスの影。右へ、下へ、0,0,0は黒の事で0.1は色が10%出た状態。*/
}

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

		/*２カラムを囲むブロック*/
		.list-half-parts .list-parts {
			flex-direction: row;			/*子要素を横並びにする*/
			justify-content: space-between;	/*並びかたの種類の指定*/
			align-items: center;			/*垂直揃えの指定。天地中央に配置されるように。*/
		}
		
		/*画像ブロック共通*/
		.list-half-parts .image-l-parts, .list-half-parts .image-r-parts {
			width: 50%;			/*画像の幅*/
		}
		
		/*画像を右に配置する場合*/
		.list-half-parts .image-r-parts {
			margin-left: 2rem;	/*画像の左側に空けるスペース*/
		}
		
		/*画像を左に配置する場合*/
		.list-half-parts .image-l-parts {
			order: -1;
			margin-right: 2rem;	/*画像の右側に空けるスペース*/
		}

		/*テキストブロック*/
		.list-half-parts .text-parts {
			flex: 1;
		}

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

/* 新着情報：強制的に縦並びにする設定
---------------------------------------------------------------------------*/
.list-parts div {
    display: block !important;
    clear: both !important; /* 回り込み解除 */
    border-bottom: 1px solid #ddd; /* 1セットごとに線を引く */
    padding-bottom: 15px;
    margin-bottom: 5px;
}

.list-parts dt {
    display: block !important; /* 強制改行 */
    float: none !important;    /* 横並び解除 */
    width: auto !important;    /* 横幅指定解除 */
    color: #CF0301 !important; /* 指定のピンク */
    font-weight: bold !important;
    padding-top: 15px;
}

.list-parts dd {
    display: block !important; /* 強制改行 */
    float: none !important;    /* 横並び解除 */
    width: auto !important;    /* 横幅指定解除 */
    margin-left: 0 !important; /* 左の隙間をリセット */
    padding-top: 5px;
}

/* 最後の項目の下線だけ消す */
.list-parts div:last-of-type {
    border-bottom: none;
}

/*ボタン5：
---------------------------------------------------------------------------*/
/* ボタンを真ん中に寄せるための外枠 */
.btn-container {
  text-align: center;  /* 中にあるボタンを中央に寄せる */
  margin-top: 15px;    /* 上に少しスキマを作る */
}

/* ボタン5：修正版 */
a.btn5, 
.btn5 {
  position: relative;
  display: inline-block; /* 左右中央に動けるようにする */
  font-weight: bold;
  padding: 0.5em 2em;    /* 左右の余白を少し広げるとボタンらしく */
  text-decoration: none;
  color: #FFFFFF !important; /* 強制的に白 */
  background: #CF0301;
  transition: .4s;
  border-radius: 4px;    /* ついでに少し角を丸くすると綺麗です */
}

.btn5:hover {
  background: #00bcd4;
  color: #FFFFFF !important;
}
/*ボタン６：（pickup）
---------------------------------------------------------------------------*/
.btn6 {
  position: relative;
  display: inline-block;
  font-weight: bold;
  padding: 0.25em 0.5em;
  text-decoration: none;
  color: #CF0301;
  background: #e7d3db;
  transition: .4s;
}

.btn6:hover {
  background: #CF0301;
  color: white;
}

.btn-area {
    text-align: center; /* 中央揃え */
    margin-top: 40px;   /* ★ここで上のタブとの間隔を調整（お好みで30px〜50px） */
    margin-bottom: 20px; /* 下側の余白 */
}

/*ボタン７：（上部右）
---------------------------------------------------------------------------*/
/* ボタン７：極薄・白背景・細枠デザイン */
.btn7 {
  position: relative;
  display: inline-block;
  font-weight: bold;
  font-size: 14px;
  
  /* 上下0で極限まで狭く、左右に少しゆとり */
  padding: 0 10px;
  /* 行の高さでボタン自体の厚みをコントロール */
  line-height: 1.5; 
  
  text-decoration: none;
  
  /* 通常時の配色：白背景に細いピンクの枠 */
  color: #CF0301;
  background-color: #ffffff;
  border: 1px solid #CF0301; /* 一番細い1pxの枠線 */
  
  border-radius: 6px;
  transition: all 0.4s;
  box-sizing: border-box; /* 枠線の分、外側に膨らまないように固定 */
}

/* ホバー時の配色：背景ピンク・文字白 */
.btn7:hover {
  background-color: #CF0301;
  color: #ffffff;
  border-color: #fe438d;
}

/*list-grid1
---------------------------------------------------------------------------*/
/*list-grid1-parts
---------------------------------------------------------------------------*/
.list-grid1-parts .list-parts * {margin: 0;padding: 0;}

/*ブロック全体を囲むブロック：基本は1列*/
.list-grid1-parts {
	display: grid;
}

/*ボックス１個あたり*/
.list-grid1-parts .list-parts {
    display: grid;
	position: relative;
}

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

	/*画面幅800px以上の追加指定：ここで2列にする*/
	@media screen and (min-width:800px) {

	/*ブロック全体を囲むブロック*/
	.list-grid1-parts {
		grid-template-columns: repeat(2, 1fr);	/* 2列に設定 */
		gap: 1rem;	/*ブロックの間に空けるマージン的な指定*/
	}

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


/*ボックス１個あたり*/
.list-grid1-parts .list-parts {
	padding: 1rem;			/*ボックス内の余白*/
	background: #fff;		/*背景色*/
	color: #555;			/*文字色*/
    grid-template-rows: auto 1fr;	/*１つ目（この場合はfigure要素のサイズ）は自動に、２つ目（この場合はtextブロック））を残った幅で使う*/
	box-shadow: 5px 5px 20px rgba(0,0,0,0.1);	/*ボックスの影*/
}

/*ボックス内のfigure画像*/
.list-grid1-parts .list-parts figure img {
	margin-bottom: 0.5rem;	/*画像の下に空けるスペース*/
}
/*map内画像*/
div#map {
	border: 3px solid #E2025A;
	width: 680px;
}

/*list-grid5（学校案内。2列表示）
---------------------------------------------------------------------------*/
/* --- 共通設定：どの画面サイズでも共通 --- */

/* 余白のリセット */
.list-grid5-parts .list-parts * { margin: 0; padding: 0; }

/* ブロック全体：土台の設定 */
.list-grid5-parts {
    display: grid;
    grid-template-columns: 1fr; /* 最初（スマホ）は1列 */
    gap: 2rem;                 /* ブロック同士の隙間 */
}

/* ボックス１個あたり */
.list-grid5-parts .list-parts {
    display: grid;
    grid-template-rows: auto 1fr;
    text-align: center;
    margin-bottom: 2rem;
}

/* ボックス内のp要素 */
.list-grid5-parts .list-parts p {
    font-size: 0.85rem;
    line-height: 1.5;
}

/* ボックス内のfigure画像 */
.list-grid5-parts .list-parts figure {
    margin-bottom: 1rem;
}

.list-grid5-parts .list-parts figure img {
    max-width: 100%; /* 画像がはみ出さないように追加 */
    height: auto;
    box-shadow: 10px 10px 0px rgba(0,0,0,0.05);
    border-radius: 10px;
    overflow: hidden;
}

/* --- レスポンシブ設定：画面幅で変化させる --- */

/* 500px以上の指定（1列のまま、隙間だけ広げる） */
@media screen and (min-width: 500px) {
    .list-grid5-parts {
        gap: 3rem; /* 隙間を少し広くする */
    }
}

/* 800px以上の指定（ここで2列にする） */
@media screen and (min-width: 800px) {
    .list-grid5-parts {
        grid-template-columns: repeat(2, 1fr); /* 2列に変更 */
    }
}


/* ★--- TOPページ右上ボタン追加分 
--------------------------------------------- */
/* --- TOPページ右上ボタン：配置のみを強制する修正版 --- */

/* 1. 配置 */
.home .header-btns {
    position: absolute !important;
    top: 20px !important;
    right: 3vw !important;
    display: flex !important;
    gap: 8px !important;
    z-index: 9999 !important;
}

/* 2. btn7 */
.home .btn7 {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 9999 !important;
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    white-space: nowrap;
}

/* 3. スマホ用の配置調整 */
@media screen and (max-width: 900px) {
    .home .header-btns {
        top: 80px !important;
        right: 0 !important;
        left: 0 !important;
        justify-content: center !important;
        width: 100% !important;
    }
}