/*
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
城ケ崎荘
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
*/

@charset "utf-8";


/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/
@import url("css/all.min.css");

/*Google Fontsの読み込み
---------------------------------------------------------------------------*/
@import url('css2.css');

/*slick.cssの読み込み
---------------------------------------------------------------------------*/
@import url("css/slick.css");

/*テンプレート専用cssファイルの読み込み
---------------------------------------------------------------------------*/
@import url("slide.css");
@import url("inview.css");


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

	--primary-color: #004b36;			/*テンプレートのメインまたはアクセントとなる色*/
	--primary-inverse-color: #fff;		/*primary-colorの対として使う色*/

	--global-space: 5vw;	/*サイト内の余白の一括管理用。画面幅100%＝100vwです。*/
}


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


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


/*全体の設定
---------------------------------------------------------------------------*/
body * {box-sizing: border-box;}

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: #333;		/*文字色*/
	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;
}


/*navサブメニューのフォントサイズ----------*/
nav .nav-sfont{
	font-size: 0.9em;
}

@media screen and (max-width:900px) {
	nav .nav-sfont{
	font-size: 1.0em;
}
}
/*navサブメニューのフォントサイズ---以上-----*/

input {
	font-size: 1rem;
}
section li {
	margin-left: 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: 4vw;	/*sectionの上に空けるスペース*/
}


/*文字サイズの設定
---------------------------------------------------------------------------*/
/*「大」ボタンを押した時の文字サイズ*/
html.f-large {
	font-size: 24px;
}

/*「小」ボタンを押した時の文字サイズ*/
html.f-small {
	font-size: 17px;
}


/*ズームアイコン
----------------------------*/
.iconzoom img {
  max-width: 32px;
  max-height: 32px;
  border-radius: 0 !important;
  height: auto;
}

/* 767px以下では非表示 */
@media screen and (max-width: 767px) {
  .iconzoom img {
    display: none;
  }
}


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


.photo-zoom {
  display: inline-block;
  overflow: hidden;                     /* 角丸より外は非表示に */
  border-radius: 10px 0 10px 0;          /* 角丸を親に設定 */
}

.photo-zoom img {
  display: block;
  transition: transform 0.5s ease;
}

.photo-zoom:hover {
  color: inherit;                        /* 共通 a:hover の文字色を無効化 */
  filter: none;                           /* 共通 a:hover の明るさ変更を無効化 */
}

.photo-zoom:hover img {
  transform: scale(1.05);                 /* 画像だけズーム */
}

/*画像角R表示
---------------------------------------------------------------------------*/
.r-photo {
  border-radius: 10px 0 10px 0;          /* 角丸を親に設定 */;
}

/*pankuzu
---------------------------------------------------------------------------*/
.pankuzu {
	background-color: #F6F6F6;
	margin-bottom: 0px;
	font-size: 14px;
	line-height: 14px;
	color: #555;
	width: 100%;
	padding-top: 10px;
	padding-bottom: 10px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #E5E5E5;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #FFF;
}

.pankuzu ul {
	width: 90%;
	max-width: 1800px;
	margin-right: auto;
	margin-left: auto;
}

.pankuzu li {
	display: inline-block;
}

.pankuzu li a {
	text-decoration: none;
	color: #999;
}

.pankuzu li a::after {
	content: ">";
	padding-left: 5px;
	padding-right: 5px;
}

.pankuzu li a:hover {
	color: #111;
}

.pankuzu li i {
	padding-right: 5px;
}


.nowrap-price {
	white-space: nowrap;
	font-size: 16px;
	color: #004b36;
	text-align: right;
}

/*画像配置650
---------------------------------------------------------------------------*/
.img_left-650 {           /* 位置や余白は外側に */
  float: left;
  padding-right: 30px;
  padding-bottom: 20px;
  width: 60%;
  max-width: 650px;
}

.img_left-650 .thumb {    /* 角丸とクリップは画像直上に */
  border-radius: 10px 0 10px 0;
  overflow: hidden;
}

.img_left-650 .thumb img {
  display: block;
  width: 100%;
  height: auto;
}

.img_right-650 {           /* 位置や余白は外側に */
  float: right;
  padding-left: 30px;
  padding-bottom: 20px;
  width: 60%;
  max-width: 650px;
}

.img_right-650 .thumb {    /* 角丸とクリップは画像直上に */
  border-radius: 10px 0 10px 0;
  overflow: hidden;
}

.img_right-650 .thumb img {
  display: block;
  width: 100%;
  height: auto;
}


@media screen and (max-width:600px){
.img_left-650,
.img_right-650 {
	float: none;
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding-left: 0px;
	padding-right: 0px;
	padding-bottom: 30px;
	width: 100%;
	max-width: none;
}
}

/*画像配置600
---------------------------------------------------------------------------*/
.img_left-600 {           /* 位置や余白は外側に */
  float: left;
  padding-right: 30px;
  padding-bottom: 20px;
  width: 60%;
  max-width: 600px;
}

.img_left-600 .thumb {    /* 角丸とクリップは画像直上に */
  border-radius: 10px 0 10px 0;
  overflow: hidden;
}

.img_left-600 .thumb img {
  display: block;
  width: 100%;
  height: auto;
}

.img_right-600 {           /* 位置や余白は外側に */
  float: right;
  padding-left: 30px;
  padding-bottom: 20px;
  width: 60%;
  max-width: 600px;
}

.img_right-600 .thumb {    /* 角丸とクリップは画像直上に */
  border-radius: 10px 0 10px 0;
  overflow: hidden;
}

.img_right-600 .thumb img {
  display: block;
  width: 100%;
  height: auto;
}


@media screen and (max-width:600px){
.img_left-600,
.img_right-600 {
	float: none;
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding-left: 0px;
	padding-right: 0px;
	padding-bottom: 30px;
	width: 100%;
	max-width: none;
}
}

/*画像配置500
---------------------------------------------------------------------------*/
.img_left-500 {           /* 位置や余白は外側に */
  float: left;
  padding-right: 30px;
  padding-bottom: 20px;
  width: 60%;
  max-width: 500px;
}

.img_left-500 .thumb {    /* 角丸とクリップは画像直上に */
  border-radius: 10px 0 10px 0;
  overflow: hidden;
}

.img_left-500 .thumb img {
  display: block;
  width: 100%;
  height: auto;
}

.img_right-500 {           /* 位置や余白は外側に */
  float: right;
  padding-left: 30px;
  padding-bottom: 20px;
  width: 60%;
  max-width: 500px;
}

.img_right-500 .thumb {    /* 角丸とクリップは画像直上に */
  border-radius: 10px 0 10px 0;
  overflow: hidden;
}

.img_right-500 .thumb img {
  display: block;
  width: 100%;
  height: auto;
}


@media screen and (max-width:600px){
.img_left-500,
.img_right-500 {
	float: none;
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding-left: 0px;
	padding-right: 0px;
	padding-bottom: 30px;
	width: 100%;
	max-width: none;
}
}

/*画像配置420
---------------------------------------------------------------------------*/
.img_left-420 {           /* 位置や余白は外側に */
  float: left;
  padding-right: 30px;
  padding-bottom: 20px;
  width: 50%;
  max-width: 420px;
}

.img_left-420 .thumb {    /* 角丸とクリップは画像直上に */
  border-radius: 10px 0 10px 0;
  overflow: hidden;
}

.img_left-420 .thumb img {
  display: block;
  width: 100%;
  height: auto;
}

.img_right-420 {           /* 位置や余白は外側に */
  float: right;
  padding-left: 30px;
  padding-bottom: 20px;
  width: 50%;
  max-width: 420px;
}

.img_right-420 .thumb {    /* 角丸とクリップは画像直上に */
  border-radius: 10px 0 10px 0;
  overflow: hidden;
}

.img_right-420 .thumb img {
  display: block;
  width: 100%;
  height: auto;
}


@media screen and (max-width:600px){
.img_left-420,
.img_right-420 {
	float: none;
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding-left: 0px;
	padding-right: 0px;
	padding-bottom: 30px;
	width: 100%;
	max-width: none;
}
}


/*画像配置320
---------------------------------------------------------------------------*/
.img_left-320 {           /* 位置や余白は外側に */
  float: left;
  padding-right: 20px;
  padding-bottom: 20px;
  width: 30%;
  max-width: 320px;
}

.img_left-320 .thumb {    /* 角丸とクリップは画像直上に */
  border-radius: 10px 0 10px 0;
  overflow: hidden;
}

.img_left-320 .thumb img {
  display: block;
  width: 100%;
  height: auto;
}

.img_right-320 {           /* 位置や余白は外側に */
  float: right;
  padding-left: 20px;
  padding-bottom: 20px;
  width: 30%;
  max-width: 320px;
}

.img_right-320 .thumb {    /* 角丸とクリップは画像直上に */
  border-radius: 10px 0 10px 0;
  overflow: hidden;
}

.img_right-320 .thumb img {
  display: block;
  width: 100%;
  height: auto;
}


@media screen and (max-width:600px){
.img_left-320,
.img_right-320 {
	float: none;
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding-left: 0px;
	padding-right: 0px;
	padding-bottom: 5px;
	padding-top: 20px;
	width: 100%;
	max-width: none;
}
}

/*container（フッター以外を囲むブロック）
---------------------------------------------------------------------------*/
.container {
	padding: 0 var(--global-space);	/*上下、左右へのcontainer内の余白。左右の余白はcss冒頭で指定しているglobal-spaceを読み込み*/
}

@media (max-width: 700px) {
  .container {
	/*margin-top: -100px;*/
}
}

/*container（フッター以外を囲むブロック）
---------------------------------------------------------------------------*/
#container {
	padding: 0 var(--global-space);	/*上下、左右へのcontainer内の余白。左右の余白はcss冒頭で指定しているglobal-spaceを読み込み*/
}


/*contents（mainを囲むブロック）
---------------------------------------------------------------------------*/
#contents {
	padding: 3vw 0 5vw;	/*上、左右、下へのcontents内の余白。画面幅100%＝100vwです。*/
}

/*トップページのコンテンツ*/
.home #contents {
	padding-top: calc(1vw + 40px);	/*スライドショー上のボタンが画像下に移動するので重ならないよう適当にpxを指定*/
}

/*ヘッダー（ロゴや電話番号が入っている最上段のブロック）
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
    display: flex;	/*ヘッダー内にあるボックスを横並びにする*/
    justify-content: space-between;
    align-items: center;
	position: relative;	/*文字サイズブロックを絶対配置する為に必要な指定*/
}

/*ロゴ画像*/
#logo {margin: 0;padding: 0;}
#logo img {
	display: block;
	width: 300px;	/*ロゴ画像の幅*/
}

/*ヘッダーの中央バナー*/
header .banner {
	max-width: 500px;	/*最大幅。これ以上広くならない。*/
	flex: 1;
	margin: 0 3vw;		/*上下、左右へのバナーの外側へとるスペース*/
}

/*電話番号ブロック*/
address {
	font-style: normal;
	line-height: 1.0;	/*行間を狭くする*/
	text-align: center;	/*文字をセンタリング*/
	padding: 25px 0;	/*上下、左右へのブロック内の余白*/
	margin-top: 30px;	/*上に空けるスペース。文字サイズボックスに重ならないように。*/
}

/*電話番号*/
address .tel {
	font-size: 1.3rem;	/*文字サイズ*/
	color: var(--primary-color);	/*文字色。css冒頭で指定しているprimary-colorを読み込み*/
	margin-right: 1rem;
}

.s-font{
	font-size: 0.7em;
}

.s-font-spa {
  font-size: 0.9em;
  letter-spacing: -0.05em; /* 例：文字間を少し詰める */
}

.bluetopspace-50{
	margin-top: -50px;
}

@media screen and (max-width:600px) {
	.bluetopspace-50{
	margin-top: -25px;
}
}

.bluetopspace-40yc{
	margin-top: -40px;
}

@media screen and (max-width:1024px) {
	.bluetopspace-40yc{
	margin-top: 10px;
}
}

.bluetopspace-40{
	margin-top: -40px;
}

@media screen and (max-width:1024px) {
	.bluetopspace-40{
	margin-top: 10px;
}
}

.bluetopspace-20{
	margin-top: -20px;
}

.bluetopspace-10{
	margin-top: -10px;
}

.bluetopspace-5{
	margin-top: -5px;
}

.bluetopspace-2{
	margin-top: -2px;
}

.bluetopspace-1{
	margin-top: -1px;
}

.floor-topspace-30{
	margin-top: -30px;
}

/*画面幅1024px以下の追加指定*/
	@media screen and (max-width:1024px) {
		.floor-topspace-30{
	margin-top: 0px;
}
		}


address.margin-top {margin-top: 0;}

	/*画面幅900px以下の追加指定*/
	@media screen and (max-width:900px) {
	
	/*ヘッダーブロック*/
	header {
		flex-direction: column;	/*ヘッダー内にあるボックスを縦並びにする*/
	}
	
	/*ロゴ画像*/
	#logo img {
		margin-top: 20px;	/*ロゴの上に空けるスペース*/
	}
	
	/*電話番号ブロック*/
	address {
		margin-top: 0;	/*マージンのリセット*/
	}
	
	}/*追加指定ここまで*/


	/*画面幅400px以下の追加指定*/
	@media screen and (max-width:400px) {
	
	/*ロゴ画像*/
	#logo img {
		width: 200px;	/*ロゴ画像の幅*/
	}
	
	}/*追加指定ここまで*/


/*文字サイズ変更ボタン
---------------------------------------------------------------------------*/
/*ボタンブロック全体*/
#f-size {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 10px 0 10px 0;
    display: flex;
    align-items: center;
    padding: 8px;
    position: absolute;
    right: 0;
    top: 5px;
}


/* ボックス全体を反転 */
/*---
#f-size:hover {
    background: #004b36;
    border-color: #004b36;
    color: #fff;
}
--*/

/* 中のリンク文字も白に */
/*---
#f-size:hover a {
    color: #fff;
}
--*/

/*「文字サイズ」のテキスト*/
#f-size p {
	margin: 0;
	margin-right: 5px;	/*右側に空けるスペース。ボタンとの間にとるスペース。*/
	font-size: 14px;	/*文字サイズ*/
}

/*「小」「大」を囲むブロック*/
#f-size ul {
	list-style: none;margin: 0;padding: 0;
	display: flex;			/*flexボックスを使う指定*/
	align-items: center;	/*垂直揃えの指定。天地中央に配置されるように。*/
}

/*「小」ボタン設定*/
#f-size ul li#f-small {
	margin-right: 5px;	/*右側に空けるスペース。「大」との間の隙間*/
}
#f-size ul li#f-small::before {
	display: block;
	content: "小";		/*「小」の文字を出力*/
	font-size: 17px;	/*文字サイズ*/
	width: 40px;		/*幅*/
	line-height: 40px;	/*高さ*/
	text-align: center;	/*内容をセンタリング*/
	background: #eee;	/*背景色*/
}

/*「大」ボタン設定*/
#f-size ul li#f-large::before {
	display: block;
	content: "大";		/*「大」の文字を出力*/
	font-size: 30px;	/*文字サイズ*/
	width: 50px;		/*幅*/
	line-height: 50px;	/*高さ*/
	text-align: center;	/*内容をセンタリング*/
	background: #eee;	/*背景色*/
}

/*選択中の設定*/
#f-size li#f-large.current::before,
#f-size li#f-small.current::before {
	background: #ff0000;	/*背景色*/
	color: #fff;			/*文字色*/
}

/*マウスオン時にリンクテキストと同じような手のマークが出るように*/
#f-size li {
	cursor: pointer;
}

	/*画面幅900px以下の追加指定*/
	@media screen and (max-width:900px) {
	
	/*ボタンブロック全体*/
	#f-size {
		right: 60px;	/*右からの配置場所の上書き。３本バー（ハンバーガー）アイコンが重ならないように。*/
	}
	
	}/*追加指定ここまで*/

	/*画面幅900px以下の追加指定*/
	@media screen and (max-width:900px) {
	
	/*ボタンブロック全体*/
	#f-size {
		display: none;	/*スペースが狭くなるので非表示に*/
	}
	
	}/*追加指定ここまで*/


/*メニューブロック初期設定
---------------------------------------------------------------------------*/
#menubar {
	opacity: 0;
	line-height: 1.5;
	font-size: 15px;
}

#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を指定しているメニューにCSS三角矢印をつける設定*/
a.ddmenu::before {
  content: "";
  display: inline-block;
  margin-right: 0.4rem;      /* テキストとの間隔 */
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid currentColor;  /* ▼の色＝文字色 */
  vertical-align: middle;
}


/*大きな端末、小さな端末共通のメニューブロック設定
---------------------------------------------------------------------------*/
/*メニュー１個あたりの設定*/
#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 {
    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: 1;			/*個々のメニューを均等にし、幅いっぱいまで使う設定*/
	position: relative;	/*ドロップダウンの幅となる基準を作っておく*/
	text-align: center;	/*テキストをセンタリング*/
}

/*リンク（a要素）の設定*/
.large-screen #menubar li a {
	flex: 1;
	background: var(--primary-color);		/*背景色。css冒頭で指定しているprimary-colorを読み込み*/
	color: var(--primary-inverse-color);	/*文字色。css冒頭で指定しているprimary-inverse-colorを読み込み*/
	padding: 0.8rem 0;	/*上下、左右の余白*/
}

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

/*文字サイズ「大」の場合のメニューブロックを囲むボックス*/
html.f-large .large-screen #menubar {
	position: relative;	/*メニューが２段になる為、stickyを外してスクロールさせるようにする。固定させたままがいいならこの１行を削除*/
}

/*文字サイズ「大」の場合のメニューブロック全体の設定*/
html.f-large .large-screen #menubar > nav > ul {
	flex-wrap: wrap;	/*メニューを２段にする為、改行を許可する*/
}

/*文字サイズ「大」の場合のメニュー１個あたりの設定*/
html.f-large .large-screen #menubar > nav > ul > li {
	flex: auto;
	width: 33.33%;	/*メニュー幅。３列なので33.33%*/
}


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

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

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


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


/*小さな端末用の開閉ブロック
---------------------------------------------------------------------------
.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: 90px;	/*上に空ける余白。ハンバーガーアイコンと重ならない為の指定ですのでお好みで変更OK。*/
	background: var(--primary-color);	/*背景色。css冒頭で指定しているprimary-colorを読み込み*/
	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: 2vw;		/*上からの配置場所*/
	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ブロック
---------------------------------------------------------------------------*/
/*h2見出し*/
main h2 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: -1rem 0 1.3rem;		/*h2の外側にとるスペース。上、左右、下への順番。*/
	font-size: 1.5rem;		/*文字サイズ*/
	position: relative;		/*ulineを配置する為に必要な指定*/
	font-weight: normal;	/*デフォルトの太字を標準に*/
	border-bottom: 3px solid #ddd;	/*薄い色の線の幅、線種、色*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広くする*/
}

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

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

/*h2のテキストをセンタリングする場合*/
main h2.c {
	display: block;
	border: none;		/*下線を非表示に*/
	text-align: center;	/*テキストをセンタリング*/
	font-size: 2rem;	/*文字サイズを２倍に*/
}

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

.ename-s {
	font-size: 0.8rem;
	color: #aaa;
	letter-spacing: -0.01em;
	line-height: 0.2rem;
}
	

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


/*フッターのコンテンツ（住所やマップが入っているブロック）
---------------------------------------------------------------------------*/
/*ブロック全体*/
#footer-contents {
	background: #004b36;	/*背景色*/
	color: #fff;			/*文字色*/
}
#footer-contents a {
	color: inherit;
}

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


	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {
	
	#footer-contents {
		display: flex;	/*flexボックスを使う指定*/
		gap: 2rem;		/*左右のボックスの間のマージン的な設定*/
	}
	
	/*左側のブロック*/
	#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: #004b36;	/*背景色*/
	color: #fff;			/*文字色*/
	font-size: 0.8rem;		/*文字サイズ。*/
	display: flex;			/*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;		/*太字にする*/
	color: #ccc;			/*文字色*/
	padding-bottom: 5px;	/*下に空けるスペース*/
}


/*フッターメニュー内ボタン
---------------------------------------------------------------------------*/
#footermenu ul.f_bn {
	display: flex;             /* 横並びレイアウト */
	justify-content: center;   /* 横方向の中央揃え */
	padding: 0;
	margin: 0;
	list-style: none;          /* 点や数字を消す */
}
#footermenu .f_bn li {
	display: inline-block;     /* 横並び */
}

#footermenu .f_bn li a {
	display: inline-block;
	font-size: 16px;
	letter-spacing: 1px;
	padding: 10px;
	text-decoration: none;
	color: #fff;
	border: 0.5px solid #fff;
	opacity: 0.8;
	filter: alpha(opacity=50);
	-ms-filter: "alpha( opacity=50 )";
	margin-left: 10px;
	border-radius: 10px 0px 10px 0px;
}
#footermenu .f_bn li a:hover {
	opacity: 1.0;
	filter: alpha(opacity=100);
	-ms-filter: "alpha( opacity=100 )";
}
#footermenu .f_bn li a i {
	padding-right: 5px;
}




#footermenu ul.f_bn {
	float: none;
}

#footermenu .f_bn li a {
	font-size: 16px;
	padding: 8px;
}


/*画面幅600px以下の追加指定*/
@media screen and (max-width:480px) {
		
#footermenu ul.f_bn {
	display: block;             /* 縦並びレイアウト */
}
	
#footermenu .f_bn li {
	display: block;     /* 縦並び */
	margin-bottom: 8px;  /* 下に8pxの余白 */
}

}

/*フッター設定
---------------------------------------------------------------------------*/
small {font-size: 100%;}
footer {
	font-size: 0.7rem;		/*文字サイズ*/
	background: #6a6462;	/*背景色*/
	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;	/*アイコンサイズ*/
}


/*行間調整用
---------------------------------------------------------------------------*/
.line-p{
	line-height: 0.8rem;
}

/*行間調整用以上*/

/*FAQ
---------------------------------------------------------------------------*/
/*質問*/
/* Q/A バッジ用のベース設定 */
/* Q/A バッジの調整 */
/* Q/Aカウンターをリセット */
.faq {
  counter-reset: q; /* ここで通し番号を初期化 */
}

/* 質問 */
/* Q/Aカウンターをリセット */
.faq {
  counter-reset: q;
}

/* 質問 */
.faq dt {
  position: relative;
  margin-bottom: 0.8rem;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 10px 0 10px 0;
  padding: 0.7rem 1rem 0.7rem 4.0em; /* ←左余白をAと同等に */
  text-indent: 0;
  line-height: 1.5;
  counter-increment: q;
}

/* Qバッジ */
.faq dt::before {
  content: "Q" counter(q);
  position: absolute;
  left: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.9em;    /* 幅は現状維持 */
  height: 1.9em;
  padding: 0 0.3em;
  margin-right: 0.4em; /* ←Aと合わせて0.4emに */
  background: #004b36;
  color: #fff;
  font-weight: 700;
  border-radius: 5px 0 5px 0;
}

/* 回答 */
.faq dd {
  position: relative;
  padding: 0.2rem 0.2rem 1rem 3.8em;
  line-height: 1.6;
  margin: 0 0 0.6rem 0;
}

/* Aバッジ */
.faq dd::before {
  content: "A";
  position: absolute;
  left: 0.8rem;
  top: 0.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.9em;
  height: 1.7em;
  padding: 0 0.3em;
  margin-right: 0.4em; /* ←ここに合わせる */
  background: #ccc;
  color: #fff;
  font-weight: 700;
  border-radius: 5px 0 5px 0;
}

/* スマホ対応 */
@media (max-width: 600px) {
  .faq dt { padding-left: 3.6em; } /* ←Aに合わせて微調整 */
  .faq dt::before {
    min-width: 1.8em;
    height: 1.8em;
    left: 0.6rem;
    margin-right: 0.5em;
  }
  .faq dd { padding-left: 3.4em; }
  .faq dd::before {
    min-width: 1.8em;
    height: 1.6em;
    left: 0.6rem;
    margin-right: 0.5em;
  }
}


/*list-half（左右にわかれたボックス）
---------------------------------------------------------------------------*/
/* 共通：スマホを含む基本設定 */
.list-half .image {
    width: 100%;                     /* まずスマホでは100％幅 */
    max-width: none;                  /* 最大幅制限を外す */
    padding: 0;                       /* 余白リセット */
    margin: 0;
    border-radius: 10px 0 10px 0;      /* 角丸を共通指定 */
    overflow: hidden;                  /* 角丸内に画像を切り抜く */
}
.list-half .image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: inherit;            /* 念のため画像にも同じ角丸 */
}

/* 画面幅600px以上：PC向けレイアウト */
@media screen and (min-width:600px) {
    .list-half {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;       /* テキストも画像も上揃え */
        gap: 5vw;
        position: relative;
    }

    .list-half .text {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        padding-left: 0.5em;
    }

    .list-half .image {
        width: 40vw;                   /* PCでは40%幅 */
        max-width: 600px;
    }
}

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

.text h4{
	line-height: 1.4em;
}


/*画像の影のスタイル*/
.list-half .shadow1 {
	box-shadow: -4vw 4vw 0 rgba(0,0,0,0.05);
}

/*reverseの場合の影*/
.list-half.reverse .shadow1 {
	box-shadow: 4vw 4vw 0 rgba(0,0,0,0.05);
}


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

/*ボックス１個あたり*/
.list-grid1 .list {
    display: grid;
	margin-bottom: 1rem;	/*下に空けるスペース*/
}

/*ボックス内の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 1 auto;	/*１つ目（この場合はfigure要素のサイズ）と「詳しくみる」ボタンの高さは自動に、２つ目（この場合はtextブロック））を残った幅で使う*/
	box-shadow: 5px 5px 10px 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-grid2
---------------------------------------------------------------------------*/
.list-grid2 .list * {margin: 0;padding: 0;}

/*ボックス１個あたり*/
.list-grid2 .list {
    display: grid;
	margin-bottom: 1rem;	/*下に空けるスペース*/
}

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

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

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

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

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

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

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

/* ① 行の定義を修正：真ん中の段(= .text)は 1fr で余白を受け持つ */
.list-grid1 .list,
.list-grid2 .list {
  display: grid;
  grid-template-rows: auto 1fr auto; /* ← auto 1 auto を auto 1fr auto に */
  align-items: start;                 /* 各セルは上揃え */
}

/* ② .text を必ず上詰めにする（中央寄せの打ち消し） */
.list-grid1 .list .text,
.list-grid2 .list .text {
  align-self: start;     /* グリッドセルとして上詰め */
  display: block;        /* どこかで flex 指定があっても打ち消す安全策 */
}

/* もし .text を flex のまま使いたい場合はこっちでもOK
.list-grid1 .list .text,
.list-grid2 .list .text {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;  // ← 上詰め
  align-items: flex-start;
}
*/

/* 補足：メディアクエリ内のクラス指定ミスを修正（list-grid2側） */
@media screen and (min-width:800px) {
  .list-grid2 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
  }
  .list-grid2 .list {   /* ← .list-grid1 .list になっていたので修正 */
    margin-bottom: 0;
  }
}



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


/*bg1背景色がついたブロック
---------------------------------------------------------------------------*/
.bg1 {
	position: relative;
	background: #fcf8ea;	/*背景色*/
	padding-top: 5vw;		/*ボックス内の上に空ける余白*/
	padding-bottom: 5vw;	/*ボックス内の下に空ける余白*/
	/*margin-top: 10vw;		ボックス外の上に空ける余白*/
	/*margin-bottom: 10vw;	ボックス外の下に空ける余白*/
	
	/*以下は変更不要*/
	margin-left: calc(-1 * var(--global-space));
	margin-right: calc(-1 * var(--global-space));
	padding-left: var(--global-space);
	padding-right: var(--global-space);
}
.bg1 a {
	color: inherit;
}


/*お知らせブロック
---------------------------------------------------------------------------*/
/*お知らせブロック*/
.new {
	background: rgba(0,0,0,0.02);	/*背景色。0,0,0は黒のことで0.02は色が2%出た状態。*/
	overflow: hidden;
	margin-bottom: 1rem;	/*ブロックの下に空けるスペース。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内の余白*/
	line-height: 1.8;   /* ← bodyの2より少しタイト */
}

/*ブロック内のspan。日付の横のアイコン的な部分の共通設定*/
.new dt span {
	display: inline-block;
	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 #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;			/*枠線を出したくないので透明にする*/
	-webkit-border-radius: 8px 0px 8px 0px;
	-moz-border-radius: 8px 0px 8px 0px;
}

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

	/*画面幅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: 0vw;	/*ボックスの下に空けるスペース*/
}

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

	/*カラムで使う為の指定*/
	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;	/*幅。お好みで変更。*/
		margin-top: 10px;
	}
	
	/*1つ目のsub-contents*/
	.sub-contents:nth-child(2) {
		order: 3;	/*並び順。数字の小さい順番に表示。*/
	}
	
	/*2つ目のsub-contents（※３カラムで使いたい場合用）*/
	.sub-contents:nth-child(3) {
		order: 3;	/*並び順。数字の小さい順番に表示されます。３番目という意味なので一番右側に表示。*/
	}
	
	}/*追加指定ここまで*/


/*サブコンテンツ内の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;
}

.leftpdf{
	margin-top: 10px;
}

.subline{
border-top: none;	/*サブメニューラインSP用*/
}

/*画面幅900px以以下の追加指定*/
	@media screen and (max-width:900px) {
		
.subline{
margin-top: 30px;
border-top: 1px solid #ccc;	/*サブメニューラインSP用*/
}
}

/*-----※印を付ける----------------------------*/
.note-list {
  list-style: none;     /* デフォルトのマーカーを消す */
  padding-left: 0.9em;  /* インデントを残す */
}

.note-list li {
  position: relative;
}

.note-list li::before {
  content: "※";
  position: absolute;
  left: -0.6em;   /* インデントに合わせて調整 */
  color: #000;     /* 任意で色変更 */
	margin-top: 0.5em;
}


/* h2全体のベースライン */
main h2 {
  position: relative;
  display: flex;
  align-items: center;
  margin: -1rem 0 1.3rem;
  font-size: 1.5rem;
  font-weight: normal;
  letter-spacing: 0.1em;
  border-bottom: 3px solid #ddd; /* 薄い色のライン */
  padding-left: 50px; /* アイコン分の余白 */
}

/* アイコン チャップル */
main h2.icon-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  background: url("../images/icon_04.png") no-repeat center/contain;
}

/* テキスト部分＋アイコンだけ色付きライン */
main h2 .uline {
  position: relative;
  display: inline-block;
  padding: 0.5rem 0 0.3rem 0;
	line-height: 2.0rem;
}

/* 上書きライン（指定色） */
main h2 .uline::after {
  content: "";
  position: absolute;
  left: -50px;             /* アイコン分だけ左に延長 */
  bottom: -3px;            /* border の位置に合わせる */
  width: calc(100% + 34px);/* アイコン＋テキスト幅ぶん */
  border-bottom: 3px solid var(--primary-color);
}

/* アイコン ユゲ */
main h2.icon-title2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 55%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: url("../images/icon_05.png") no-repeat center/contain;
}

/* アイコン ユゲ足 */
main h2.icon-title3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  background: url("../images/icon_07.png") no-repeat center/contain;
}

/* アイコン 星 */
main h2.icon-title4::before {
  content: "";
  position: absolute;
  left: 0;
  top: 58%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  background: url("../images/icon_02.png") no-repeat center/contain;
}

/* アイコン 海星 */
main h2.icon-title1::before {
  content: "";
  position: absolute;
  left: 0;
  top: 58%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  background: url("../images/icon_01.png") no-repeat center/contain;
}

/* アイコン チャップル手 */
main h2.icon-title5::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  background: url("../images/icon_06.png") no-repeat center/contain;
}

/* アイコン チャップル正面 */
main h2.icon-title6::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  background: url("../images/icon_03.png") no-repeat center/contain;
}

/* アイコン やまもも */
main h2.icon-title7::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  background: url("../images/icon_08.png") no-repeat center/contain;
}

/* h4 用アイコン付き見出し */
h4.icon-sub {
  position: relative;
  padding-left: 28px;
}

h4.icon-sub::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: url("icon-h4.png") no-repeat center/contain;
}

/*サブメニュー設定
---------------------------------------------------------------------------*/
/*サブメニューブロック全体*/
.submenu {
	padding: 3px;
	margin: 0 0 0.5rem;
	border: 1px solid #ccc;
	border-radius: 10px 0 10px 0;
	background: #fff; /* ←背景を明示しておく */
	transition: background 0.3s, border-color 0.3s, color 0.3s;
}

/* ホバー時にボックス全体を反転 */
.submenu:hover {
	background: #004b36;
	border-color: #004b36;
	color: #fff;
}

/* メニュー内リンクの基本設定 */
.submenu a {
	display: block;
	text-decoration: none;
	padding: 1rem 1rem;
	background: transparent; /* ←submenu全体の背景に統一 */
	line-height: 1.5rem;
	color: inherit;          /* ←親の文字色を継承 */
	transition: color 0.3s;
}

/* ホバー時にリンク文字も白へ */
.submenu:hover a {
	color: #fff;
}

.submenu .sfont{
	font-size: 0.84em;
}

/* 子メニュー */
.submenu li li a {
	padding-left: 2rem;
}

@media screen and (max-width:900px) {
	.sub900-hide {
		display: none;
		}
	.br-hide {
		display: none;
		}
	}
	
@media screen and (max-width:600px) {
.submenu {
	text-align: center;
}
}
		

.submenu2 {
	padding: 0;
	margin: 0 0 1rem;	/*上、左右、下へのマージン*/
	border-top: 0px solid #ccc;	/*上の枠線の幅、線種、色*/
	font-size: 0.8em;
	line-height: 1.3rem;
}

/*メニュー１個あたり*/
.submenu2 a {
	display: block;text-decoration: none;
	padding: 0.5rem 0.5rem;	/*上下、左右へのメニュー内の余白*/
	background: #fff;	/*背景色*/
	line-height: 1.3rem;
}

/*メニュー１個あたり（子メニュー以外）*/
.submenu2 > li {
	border: 0px solid #ccc;	/*枠線の幅、線種、色*/
	border-top: none;		/*上の線だけなくす*/
}

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

/*box1
---------------------------------------------------------------------------*/
.box1 {
	padding: 1rem;			/*ボックス内の余白*/
	margin-bottom: 1rem;	/*ボックスの下に空けるスペース*/
	background: rgba(0,0,0,0.05);	/*背景色*/
	border: solid 1px #ccc;	/*線の線種、幅、色*/
	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;				/*flexを使う指定*/
	justify-content: center;	/*並びかたの種類の指定。これはセンタリングする指定。*/
	margin-bottom: 2rem;		/*下に空けるスペース。２文字分。*/
}

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

.lr5{
	padding-left: 0.5em;  /* 左に半文字分の余白 */
	padding-right: 0.5em; /* 右に半文字分の余白 */
	line-height: 1.8;   /* ← bodyの2より少しタイト */
}

/*テーブル（ta1）
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta1 caption {
	font-size: 1.4em;
	padding: 0.4rem 1rem;	/*ボックス内の余白*/
	background: #eee;		/*背景色*/
	color: #004b36;			/*文字色*/
	margin-bottom: 1rem;	/*下に空けるスペース*/
	border-radius: 10px 0px 10px 0px;
	line-height: 1.4;   /* ← bodyの2より少しタイト */
}

/*ta1テーブルブロック設定*/
.ta1 {
	table-layout: fixed;
	border-top: 1px solid #ccc;	/*テーブルの一番上の線。幅、線種、色*/
	width: 100%;				/*幅*/
	margin-bottom: 1rem;			/*テーブルの下に空けるスペース*/
	line-height: 1.4;   /* ← bodyの2より少しタイト */
}

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

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

/*th（左側）のみの設定*/
.ta1 th {
	width: 30%;			/*幅*/
	text-align: left;	/*左よせにする*/
	background: #eee;	/*背景色*/
	font-weight: normal;/* 文字を太字にしない */
}

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

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

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


/*テーブル（ta1-map）
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta1-map caption {
	font-size: 1.4em;
	padding: 0.4rem 1rem;	/*ボックス内の余白*/
	background: #eee;		/*背景色*/
	color: #004b36;			/*文字色*/
	margin-bottom: 1rem;	/*下に空けるスペース*/
	border-radius: 10px 0px 10px 0px;
	line-height: 1.4;   /* ← bodyの2より少しタイト */
	width: 100%;
}

/*ta1-mapテーブルブロック設定*/
.ta1-map {
	table-layout: fixed;
	border-top: 0px solid #ccc;	/*テーブルの一番上の線。幅、線種、色*/
	width: 100%;				/*幅*/
	margin-bottom: 1rem;			/*テーブルの下に空けるスペース*/
	line-height: 1.4;   /* ← bodyの2より少しタイト */
}

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

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

/*th（左側）のみの設定*/
.ta1-map th {
	width: 50%;			/*幅*/
	text-align: left;	/*左よせにする*/
	background: #eee;	/*背景色*/
	font-weight: normal;/* 文字を太字にしない */
}

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

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

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

/* 画面幅900px未満では完全縦積み */
@media screen and (max-width: 899px) {
  .ta1-map,
  .ta1-map tr,
  .ta1-map th,
  .ta1-map td {
    display: block;         /* テーブル要素をすべてブロック化 */
    width: 100%;            /* 横幅いっぱいに */
    box-sizing: border-box; /* 枠の計算を安定させる */
  }

  .ta1-map tr {
    margin-bottom: 1.5rem;  /* 行と行の間に余白を入れる */
    border-bottom: none;    /* trの線は不要 */
  }

  .ta1-map th {
    background: #eee;
    font-weight: bold;      /* ラベルとして強調 */
    padding: 0.6rem 1rem;
    border-bottom: 0px solid #ccc; /* 見出しと本文の間に線を引くと区切りが明確 */
  }

  .ta1-map td {
    padding: 0.6rem 1rem;
    border-bottom: none;    /* tdの線は不要（好みで調整） */
  }
}


/*テーブル（ta1-guide）
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta1-guide caption {
	font-size: 1.4em;
	padding: 0.4rem 1rem;	/*ボックス内の余白*/
	background: #eee;		/*背景色*/
	color: #004b36;			/*文字色*/
	margin-bottom: 1rem;	/*下に空けるスペース*/
	border-radius: 10px 0px 10px 0px;
	line-height: 1.4;   /* ← bodyの2より少しタイト */
}

/*ta1テーブルブロック設定*/
.ta1-guide {
	table-layout: fixed;
	border-top: 1px solid #ccc;	/*テーブルの一番上の線。幅、線種、色*/
	width: 100%;				/*幅*/
	margin-bottom: 1rem;			/*テーブルの下に空けるスペース*/
	line-height: 1.4;   /* ← bodyの2より少しタイト */
}

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

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

/*th（左側）のみの設定*/
.ta1-guide th {
	width: 30%;			/*幅*/
	text-align: left;	/*左よせにする*/
	background: #eee;	/*背景色*/
	font-weight: normal;/* 文字を太字にしない */
}

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

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

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


/* 600px以下で縦並びにする */
@media screen and (max-width:600px) {
  .ta1-guide,
  .ta1-guide tr,
  .ta1-guide th,
  .ta1-guide td {
    display: block;          /* すべてブロック要素化 */
    width: 100%;             /* 幅いっぱい */
  }

  /* 各セルの下に境界線 */
  .ta1-guide th,
  .ta1-guide td {
    border-bottom: 1px solid #ccc;
    padding: 0.8rem 1rem;
  }

  /* thは背景や文字をそのまま見出し扱い */
  .ta1-guide th {
    text-align: left;
    background: #eee;
    font-weight: normal;
  }

  /* 1行ごとの余白を少し付ける（任意） */
  .ta1-guide tr {
    margin-bottom: 1rem;
    border: none;  /* tr自体の線は不要に */
  }
}


/*テーブル（ta1-0）
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta1-0 caption {
	font-size: 1.4em;
	padding: 0.4rem 1rem;	/*ボックス内の余白*/
	background: #eee;		/*背景色*/
	color: #004b36;			/*文字色*/
	margin-bottom: 1rem;	/*下に空けるスペース*/
	border-radius: 10px 0px 10px 0px;
	line-height: 1.4;   /* ← bodyの2より少しタイト */
}

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

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

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

/*th（左側）のみの設定*/
.ta1-0 th {
	width: 30%;			/*幅*/
	text-align: left;	/*左よせにする*/
	background: #eee;	/*背景色*/
	font-weight: normal;/* 文字を太字にしない */
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {
		.ta1-0 {
			margin-left: 1.0em;
			width: 96%;
		}

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

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


/*テーブル（ta1-1）
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta1-1 caption {
	font-size: 1.4em;
	padding: 0.4rem 1rem;	/*ボックス内の余白*/
	background: #eee;		/*背景色*/
	color: #004b36;			/*文字色*/
	margin-bottom: 1rem;	/*下に空けるスペース*/
	border-radius: 10px 0px 10px 0px;
	line-height: 1.4;   /* ← bodyの2より少しタイト */
}

/*ta1-1テーブルブロック設定*/
.ta1-1 {
	table-layout: fixed;
	border-top: 0px solid #ccc;	/*テーブルの一番上の線。幅、線種、色*/
	width: 100%;				/*幅*/
	margin-bottom: 1rem;			/*テーブルの下に空けるスペース*/
	line-height: 1.6;   /* ← bodyの2より少しタイト */
}

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

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

/*th（左側）のみの設定*/
.ta1-1 th {
	width: 30%;			/*幅*/
	text-align: left;	/*左よせにする*/
	background: #eee;	/*背景色*/
	font-weight: normal;/* 文字を太字にしない */
}

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

		/*th（左側）のみの設定*/
		.ta1-1 th {
			width: 20%;		/*幅*/
		}
		.ta1-1 th, .ta1-1 td {
			padding: 0.3em 1.0em;		/*ボックス内の余白*/
		}
	}/*追加指定ここまで*/


/*テーブル（ta2）サブブロックの受付テーブルに使用。
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※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: #333;			/*文字色*/
}
.ta2, .ta2 td, .ta2 th {
	word-break: break-all;
	border: 1px solid #ccc;	/*テーブルの枠線の幅、線種、色*/
}

/*曜日と午前午後*/
.ta2 th {
	background: #fffbe3;
}


/*テーブル（ta1-dl）
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta1-dl caption {
	font-size: 1.4em;
	padding: 0.4rem 1rem;	/*ボックス内の余白*/
	background: #eee;		/*背景色*/
	color: #004b36;			/*文字色*/
	margin-bottom: 1rem;	/*下に空けるスペース*/
	border-radius: 10px 0px 10px 0px;
	line-height: 1.4;   /* ← bodyの2より少しタイト */
}

/*ta1テーブルブロック設定*/
.ta1-dl {
	table-layout: fixed;
	border-top: 1px solid #ccc;	/*テーブルの一番上の線。幅、線種、色*/
	width: 100%;				/*幅*/
	margin-bottom: 1rem;			/*テーブルの下に空けるスペース*/
	line-height: 1.4;   /* ← bodyの2より少しタイト */
}

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

/*th（左側）、td（右側）の共通設定*/
.ta1-dl th,
.ta1-dl td {
  padding: 1rem;               /* ボックス内の余白 */
  word-break: break-all;       /* 英文などを自動改行 */
  text-align: left;            /* 横方向：左寄せ */
  vertical-align: top;         /* 縦方向：上寄せ */
}

/*th（左側）のみの設定*/
.ta1-dl th {
	width: 30%;			/*幅*/
	text-align: left;	/*左よせにする*/
	background: #eee;	/*背景色*/
	font-weight: normal;/* 文字を太字にしない */
}

/*th（左側）のみの設定*/
.ta1-dl img {
	border-radius: 10px 0px 10px 0px;
}

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

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

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


/* 600px以下で縦並びにする */
@media screen and (max-width:600px) {
  .ta1-dl,
  .ta1-dl tr,
  .ta1-dl th,
  .ta1-dl td {
    display: block;          /* すべてブロック要素化 */
    width: 100%;             /* 幅いっぱい */
  }

  /* 各セルの下に境界線 */
  .ta1-dl th,
  .ta1-dl td {
    border-bottom: 1px solid #ccc;
    padding: 0.8rem 1rem;
  }

  /* thは背景や文字をそのまま見出し扱い */
  .ta1-dl th {
    text-align: left;
    background: #eee;
    font-weight: normal;
  }

  /* 1行ごとの余白を少し付ける（任意） */
  .ta1-dl tr {
    margin-bottom: 1rem;
    border: none;  /* tr自体の線は不要に */
  }
}

/*テーブル（ta1-yamamomo）
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta1-yamamomo caption {
	font-size: 1.4em;
	padding: 0.4rem 1rem;	/*ボックス内の余白*/
	background: #eee;		/*背景色*/
	color: #004b36;			/*文字色*/
	margin-bottom: 1rem;	/*下に空けるスペース*/
	border-radius: 10px 0px 10px 0px;
	line-height: 1.4;   /* ← bodyの2より少しタイト */
}

/*ta1テーブルブロック設定*/
.ta1-yamamomo {
	table-layout: fixed;
	border-top: 1px solid #ccc;	/*テーブルの一番上の線。幅、線種、色*/
	width: 100%;				/*幅*/
	margin-bottom: 1rem;			/*テーブルの下に空けるスペース*/
	line-height: 1.4;   /* ← bodyの2より少しタイト */
}

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

/*th（左側）、td（右側）の共通設定*/
.ta1-yamamomo th, .ta1-yamamomo td {
	padding: 1rem;		/*ボックス内の余白*/
	word-break: break-all;	/*英語などのテキストを改行で自動的に折り返す設定。*/
}

/*th（左側）のみの設定*/
.ta1-yamamomo th {
	width: 30%;			/*幅*/
	text-align: left;	/*左よせにする*/
	background: #eee;	/*背景色*/
	font-weight: normal;/* 文字を太字にしない */
}

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

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

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


/* 600px以下で縦並びにする */
@media screen and (max-width:600px) {
  .ta1-yamamomo,
  .ta1-yamamomo tr,
  .ta1-yamamomo th,
  .ta1-yamamomo td {
    display: block;          /* すべてブロック要素化 */
    width: 100%;             /* 幅いっぱい */
  }

  /* 各セルの下に境界線 */
  .ta1-yamamomo th,
  .ta1-yamamomo td {
    border-bottom: 1px solid #ccc;
    padding: 0.8rem 1rem;
  }

  /* thは背景や文字をそのまま見出し扱い */
  .ta1-yamamomo th {
    text-align: left;
    background: #eee;
    font-weight: normal;
  }

  /* 1行ごとの余白を少し付ける（任意） */
  .ta1-yamamomo tr {
    margin-bottom: 1rem;
    border: none;  /* tr自体の線は不要に */
  }
}

.top-line2 {
border-top: 1px dashed #ccc; /* 1ptの破線 */
  width: 95%;
  margin-bottom: 10px;
	margin-top: 10px;
}

@media screen and (max-width:800px) {
	.top-line2 {
  width: 100%;
}
}

.top-line3 {
border-top: 1px dashed #ccc; /* 1ptの破線 */
  width: 100%;
  margin-bottom: 10px;
	margin-top: 10px;
}

@media screen and (max-width:800px) {
	.top-line3 {
  width: 100%;
}
}



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

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

.ta-box + p,
.ta1 + p,
.ta1-1 + p,
.ta1-0 + p,
.ta1-guide + p,
.ta2 + p {
	margin-top: -2rem;
}

/*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%;	/*円形にする*/
}


/*その他
---------------------------------------------------------------------------*/
.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;}

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


/*PCSP表示----------------------------------------------------------*/
/* 基本表示（PC用初期値）-------------------------------------------*/
.pc-show {
  display: inline-block;   /* PCでは表示 */
}
.pc-show-block {
  display: block;
}
.pc-hide {
  display: none;           /* PCでは非表示 */
}

/* 460px以下の時の表示切替-------------------------------------------*/
@media screen and (max-width: 460px) {
  /* 460px以下ではPC表示クラスを隠す */
  .pc-show,
  .pc-show-block {
    display: none;
  }
  /* 460px以下で表示させたい場合に使うクラス */
  .sp-show {
    display: inline-block;
  }
  .sp-show-block {
    display: block;
  }
  .sp-hide {
    display: none;
  }
}

/* 460px以上の時の表示切替-------------------------------------------*/
@media screen and (min-width: 461px) {
  /* 460px以上ではSP表示クラスを隠す */
  .sp-show,
  .sp-show-block {
    display: none;
  }
}


/*SP表示　-------------------------------------------*/
/*画面幅900px以下の追加指定*/

/*---
	@media screen and (max-width:900px) {

.sp-show {
display: inline-block;
}
.sp-show-block {
display: block;
}
.sp-hide {
display: none;
}
}

---*/
/*SP表示　-------------------------------------------*/



/*SP表示 600px以下用　-------------------------------------------*/
/* デフォルト（PC表示：横並びに見せる） */
.sp-show600 {
  display: inline; /* 横に並ぶ */
  margin-left: 0.5em; /* 日本語との間隔を少し空けたい場合 */
}

/* 600px以下のスマホ表示 */
@media screen and (max-width:600px) {
  .sp-show600 {
    display: block;      /* 改行させる */
    margin-top: 0.2em;   /* 行間をギュッと詰める（0.2〜0.3emで微調整） */
    line-height: 1.1;    /* 必要ならさらに詰められる */
    margin-left: 0;      /* 横の余白は消す */
  }
}

/*SP表示　-------------------------------------------*/
/*PCSP表示----------------------------------------------------------*/

.photo-deco1 img{
	border-radius: 15px 0px 15px 0px;
}

/*ダウンロードボタン-------------------------------------------*/
.download-btn {
	background-color: #74BEA7; /* グリーン */
	color: white;
	padding: 12px 24px;
	border: none;
	font-size: 16px;
	font-weight: bold;
	cursor: pointer;
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
	transition: background-color 0.3s ease, transform 0.2s ease;
	margin: 5px;
	border-radius: 5px 0px 5px 0px;
}

.download-btn:hover {
  background-color: #004b36; /* ホバー時の少し濃いグリーン */
  transform: translateY(-2px); /* 少し浮く演出 */
}

.download-btn:active {
  background-color: #004b36; /* クリック時の濃いグリーン */
  transform: translateY(0);
}
/*ダウンロードボタンend-------------------------------------------*/
/*ダウンロードボタン-tb-------------------------------------------*/
.download-btn-tb {
	background-color: #5FC3DF; /* グリーン */
	color: white;
	padding: 12px 24px;
	border: none;
	font-size: 16px;
	font-weight: bold;
	cursor: pointer;
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
	transition: background-color 0.3s ease, transform 0.2s ease;
	margin: 5px;
	border-radius: 5px 0px 5px 0px;
}

.download-btn-tb:hover {
  background-color: #3971B3; /* ホバー時の少し濃いグリーン */
  transform: translateY(-2px); /* 少し浮く演出 */
}

.download-btn-tb:active {
  background-color: #3971B3; /* クリック時の濃いグリーン */
  transform: translateY(0);
}
/*ダウンロードボタン-tb end-------------------------------------------*/
/*-------------------------------------------------------------------------------*/
.notice-container {
    width: 100%;
    margin: 0; /* 中央寄せ */
  }

.notice-container2 {
    width: 100%;
    margin-left: -1em;
  }

.notice-container3 {
    width: 100%;
    margin-left: 2em;
  }

.notice-container-st {
    width: 80%;
    margin: 0 auto; /* 中央寄せ */
	margin-bottom: 1em;
  }

.notice-container-dl {
    width: 90%;
    margin-left: auto;
	color: #004b36;
	margin-top: 20px;
  }

.notice-container-dl li {
	font-size: 14px;
	line-height: 12px;
  }

/*※マークリスト表示-------------------------------------------*/
  .notice-list {
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .notice-list li {
    position: relative;
    padding-left: 1.5em;   /* ※と文字の間の余白 */
    text-indent: -1.5em;   /* 先頭の※分を戻す（※が先頭に） */
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 0.5em;
  }

  .notice-list li::before {
    content: "※";
    /*color: red;*/
    margin-right: 0.5em;
  }

/*※マークリスト表示end-------------------------------------------*/
/*・マークリスト表示-------------------------------------------*/
  .notice-list2 {
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .notice-list2 li {
    position: relative;
    padding-left: 1.5em;   /* ※と文字の間の余白 */
    text-indent: -1.5em;   /* 先頭の※分を戻す（※が先頭に） */
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 0.5em;
  }

  .notice-list2 li::before {
    content: "・";
    /*color: red;*/
    margin-right: 0.5em;
  }

/*・マークリスト表示end-------------------------------------------*/
/*数字リスト表示-------------------------------------------*/
  .numbered-container {
    width: 100%;
    margin: 0 auto; /* 中央寄せ */
  }

  .numbered-list {
    list-style: decimal;  /* 通常の数字リスト */
    padding-left: 2em;    /* 数字のスペース */
    margin: 0;
  }

  .numbered-list li {
    text-indent: 0em;    /* 1行目の数字を外に出す */
    padding-left: 0em;    /* 本文の開始位置を調整 */
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 0.5em;
  }

ol li {
	list-style: decimal;
}

/*数字リスト表示end-------------------------------------------*/
/*◆マークリスト表示（タイトル）-------------------------------------------*/
  .notice-list-t {
    padding: 0;
    margin: 0;
    list-style: none;
	  margin-top: 2em;
  }

  .notice-list-t li::before {
    content: "◆";
    /*color: red;/* カラーリング */
    margin-right: 0.5em;
  }

  .notice-list-t li {
    font-size: 1.2rem;
    line-height: 1.6;
    margin-bottom: 0.5em;
  }

/*◆マークリスト表示（タイトル）end-------------------------------------------*/
/*-------------------------------------------------------------------------------*/


@media screen and (max-width:460px){
/*-------------------------------------------------------------------------------*/

.notice-container {
      width: 100%;
      padding: 0; /* スマホでは左右に余白 */
    }
	
.notice-container2 {
      width: 100%;
      margin-left: -0.5em;
    }
	
.notice-container3 {
      width: 90%;
      margin-left: 1em;
    }
	
.notice-container-st {
      width: 100%;
      margin-left: 1em;
    }
	
.notice-container-dl {
      width: 90%;
      margin-left: 1em;
    }
/*※マークリスト表示-------------------------------------------*/
    .notice-list li {
      font-size: 0.95rem;
      line-height: 1.4;
    }
/*※マークリスト表示end-------------------------------------------*/
/*・マークリスト表示-------------------------------------------*/
    .notice-list2 li {
      font-size: 0.95rem;
      line-height: 1.4;
    }
/*・マークリスト表示end-------------------------------------------*/
/*◆マークリストタイトル表示-------------------------------------------*/
    .notice-list-t li {
      font-size: 1.1rem;
      line-height: 1.4;
    }
/*◆マークリストタイトル表示end-------------------------------------------*/
/*数字リスト表示-------------------------------------------*/
.numbered-container {
      width: 100%;
      margin-left: -0.5em;
    }

    .numbered-list li {
      font-size: 0.95rem;
      line-height: 1.4;
 
   }
   }
/*※数字リスト表示end-------------------------------------------*/
/*-------------------------------------------------------------------------------*/

/*guideテーブル-------------------------------------------*/
.content table.table_g {
	width: 80%;
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: 10px;
	margin-left: auto;
}
.content table.table_g th,
.content table.table_g td {
	border-width: 1px;
	border-style: dotted;
	border-color: #CCC;
	padding: 20px;
}

.content table.table_g td {
	border-width: 1px;
	border-style: dotted;
	border-color: #CCC;
	padding: 20px;
}

.content table.table_g th {
	font-size: 18px;
	white-space: nowrap;
	font-weight: normal;
	letter-spacing: 1px;
	background-color: #F6F6F6;
	width: 33%;
}
.content table.table_g td {
	font-size: 16px;
	line-height: 30px;
	background-color: #FFF;
}

.content table.table_g td {
	font-size: 16px;
	line-height: 30px;
	background-color: #FFF;
}

.content table.table_g td .price {
	font-size: 16px;
	white-space: nowrap;
	color: #008C69;
	font-weight: bold;
	text-align: right;
}
/*guideテーブルend-------------------------------------------*/
/*guide-sテーブル-------------------------------------------*/
.content table.table_gs {
	width: 80%;
	margin-top: 5px;
	margin-right: auto;
	margin-bottom: 5px;
	margin-left: auto;
}
.content table.table_gs th,
.content table.table_gs td {
	border-top-width: 0px;
	border-left-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #CCC;
	padding: 20px;
}
.content table.table_gs th {
	font-size: 18px;
	white-space: nowrap;
	font-weight: normal;
	letter-spacing: 1px;
	width: 33%;
}
.content table.table_gs td {
	font-size: 16px;
	line-height: 30px;
	background-color: #FFF;
}
.content table.table_gs td .price {
	font-size: 16px;
	white-space: nowrap;
	color: #008C69;
	font-weight: bold;
	border-bottom-color: #000;
	text-align: right;
}
/*guide-sテーブルend-------------------------------------------*/

@media screen and (max-width:960px){
	
/*guideテーブル　-------------------------------------------*/
.content table.table_g th,
.content table.table_g td {
	width: 100% !important;
	display: block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.content table.table_g th {
	background-color: #F6F6F6;
}
	
.content table.table_g td .price {
	border-bottom-color: #000;
}
/*guideテーブルend　-------------------------------------------*/
/*guide-sテーブル-------------------------------------------*/
 .content table.table_gs {
	width: 90%;
}
/*guide-sテーブルend-------------------------------------------*/
}


/* ------------------------左端に※を配置 -----------------------------*/
.note01 {
  display: inline-block;       /* 上下基準を安定 */
  position: relative;          /* 擬似要素の基準にする */
  padding-left: 1.2em;         /* 本文を右にずらして重なり防止 */
  line-height: 1.6;            /* お好みで */
}

.note01::before {
  content: "※";
  position: absolute;
  left: 0;                     /* 左端に配置 */
  top: 0;                      /* 1行目上端に配置 */
  transform: translateY(0.0em);/* ベースライン微調整。0.1em前後で調整可 */
  font-weight: bold;
  /* 必要なら色やサイズ
  color: #c00;
  font-size: 1em;
  */
}
/* ------------------------左端に※を配置end --------------------------*/

/* ------------------------左端に①②③を配置 -----------------------------*/
.note01 {
  display: inline-block;
  position: relative;
  padding-left: 1.8em;  /* 丸数字は※より幅広なので少し広め */
  line-height: 1.6;
}
.note01::before {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(0);
  font-weight: bold;
}
.no1::before { content: "①"; }
.no2::before { content: "②"; }
.no3::before { content: "③"; }
.no4::before { content: "④"; }
.no5::before { content: "⑤"; }
/* ------------------------左端に①②③を配置end -----------------------------*/

.font-b500{
	font-weight: 500;
	font-size:1.2em;
}

.font-red {
	color: #FF3333;
}

.font-subsize {
	font-size:0.7em;
}

.line1 {
  border: none;               /* 既定の立体枠を消す */
  border-top: 1px solid #ccc; /* 上に1pxの実線 */
  margin: 1em 0;              /* 上下の余白 */
}


/*メニューブロック初期設定
---------------------------------------------------------------------------*/
#menubar {
	opacity: 0;
	line-height: 1.5;
	font-size: 15px;
}

#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を指定しているメニューにCSS三角矢印をつける設定*/
a.ddmenu::before {
  content: "";
  display: inline-block;
  margin-right: 0.4rem;      /* テキストとの間隔 */
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid currentColor;  /* ▼の色＝文字色 */
  vertical-align: middle;
}

/*大きな端末、小さな端末共通のメニューブロック設定
---------------------------------------------------------------------------*/
/*メニュー１個あたりの設定*/
#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 {
    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: 1;			/*個々のメニューを均等にし、幅いっぱいまで使う設定*/
	position: relative;	/*ドロップダウンの幅となる基準を作っておく*/
	text-align: center;	/*テキストをセンタリング*/
}

/*リンク（a要素）の設定*/
.large-screen #menubar li a {
	flex: 1;
	background: var(--primary-color);		/*背景色。css冒頭で指定しているprimary-colorを読み込み*/
	color: var(--primary-inverse-color);	/*文字色。css冒頭で指定しているprimary-inverse-colorを読み込み*/
	padding: 0.8rem 0;	/*上下、左右の余白*/
}

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

/*文字サイズ「大」の場合のメニューブロックを囲むボックス*/
html.f-large .large-screen #menubar {
	position: relative;	/*メニューが２段になる為、stickyを外してスクロールさせるようにする。固定させたままがいいならこの１行を削除する。*/
}

/*文字サイズ「大」の場合のメニューブロック全体の設定*/
html.f-large .large-screen #menubar > nav > ul {
	flex-wrap: wrap;	/*メニューを２段にする為、改行を許可する*/
}

/*文字サイズ「大」の場合のメニュー１個あたりの設定*/
html.f-large .large-screen #menubar > nav > ul > li {
	flex: auto;
	width: 33.33%;	/*メニュー幅。３列なので33.33%*/
}


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

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

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


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


/*小さな端末用の開閉ブロック
---------------------------------------------------------------------------*/
/*メニューブロック設定*/
.small-screen #menubar.display-block {
	position: fixed;overflow: auto;z-index: 100;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	padding-top: 90px;	/*上に空ける余白。ハンバーガーアイコンと重ならない為の指定。*/
	background: var(--primary-color);	/*背景色。css冒頭で指定しているprimary-colorを読み込み*/
	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: 2vw;		/*上からの配置場所*/
	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);}

/* PC：スクロール前はHOMEを非表示（.fixed/.fixed2 が付くまで隠す） */
.large-screen #menubar:not(.fixed):not(.fixed2) > nav > ul > li.home-item {
  display: none;
}

/* PC：スクロールしてメニューが固定されたらHOMEを表示 */
.large-screen #menubar.fixed  > nav > ul > li.home-item,
.large-screen #menubar.fixed2 > nav > ul > li.home-item {
  display: block;              /* 他の項目と同じ見た目で並ぶ */
  animation: opa1 .25s both;   /* フェードイン（任意） */
}

/* スマホ（ハンバーガー）：HOMEは常に表示（保険） */
.small-screen #menubar li.home-item {
  display: block;
}

/* PC：スクロール前は見えない＆クリック不可（幅は確保して均等） */
.large-screen #menubar:not(.fixed):not(.fixed2) > nav > ul > li.home-item {
  visibility: hidden;
  pointer-events: none;
}

/* スクロール後は通常表示 */
.large-screen #menubar.fixed  > nav > ul > li.home-item,
.large-screen #menubar.fixed2 > nav > ul > li.home-item {
  visibility: visible;
  pointer-events: auto;
}


/* 901px〜1024pxの間だけ、メニューバーの文字を少し小さくする */
@media screen and (min-width:901px) and (max-width:1024px){
  /* ベースの文字サイズを少しだけ下げる */
  .large-screen #menubar { font-size: 12px; }

  /* 行送りを詰めて改行しにくくする（必要なら調整） */
  .large-screen #menubar li a { padding: 0.6rem 0; }

  /* 英字のサブテキストも少しだけ縮める（任意） */
  .large-screen #menubar span { font-size: 0.65em; }
}

/* 901px〜1024pxで、スクロール固定時はさらに詰めたい場合（任意） */
@media screen and (min-width:901px) and (max-width:1024px){
  .large-screen #menubar.fixed2 li a { padding-top: 0.35rem; padding-bottom: 0.35rem; }
}


/* 1) menubar を常に最前面に */
#menubar{
  position: sticky;   /* 固定ヘッダなら fixed に */
  top: 0;
  z-index: 5000;
  background: #fff;   /* 下が透けないように */
}

/* 画像の上に重ねるための基準を作る（あなたの現状を尊重） */
.list figure.photo-wrap img {
  display: block;
  width: 100%;
  height: auto;
}

/* ----New!マーク：画像枠を「基準」にする（親に z-index/transform/filter/opacity を付けない）--------- */
.photo-zoom {
  position: relative;
  display: block;
  /* z-index: auto; transform/filter/opacity なし */
}

/* 画像は枠いっぱい。拡大などの演出は img のみに */
.photo-zoom img {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: center;
  transition: transform .35s ease;
}
.photo-zoom:hover img {
  transform: scale(1.03);
}
/* もし全体に a:hover { filter: ... } があるなら、ここで無効化 */
.photo-zoom:hover { filter: none; }

/* 3) バッジは画像の左上に（z-index は menubar より低く） */
.ball {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 65px;
  height: 40px;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  background-color: #ff85b9;
  border-radius: 30% 5% 30% 5%;
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;    /* #menubar(5000) より十分低い */
}
.ball:before{
  content: "";
  position: absolute;
  bottom: -12px;
  left: 16px;
  border-right: 12px solid transparent;
  border-top: 20px solid #ff85b9;
  border-left: 12px solid transparent;
}

/* モバイル微調整 */
@media (max-width: 960px) {
  .ball {
    width: 80px;
    height: 45px;
    line-height: 17px;
    font-size: 18px;
    border-radius: 20% 5% 20% 5%;
    top: 6px;
    left: 6px;
  }
  .ball:before { bottom: -10px; left: 12px; }
}

/* --- stacking order (下 → 上)
   content(0) < .ball(10) < PC menubar(5000) < SP overlay(6000) < hamburger/X(7000) --- */

/* PC（large-screen）のメニューバーを前面に */
.large-screen #menubar { 
  position: sticky;
  top: 0;
  z-index: 5000;
  background: #fff;
}

/* SP：全画面メニュー（オーバーレイ）はそれより上 */
.small-screen #menubar.display-block {
  z-index: 6000;   /* 既存の 100 を上書き */
}

/* ハンバーガー/×ボタンは最上面に（常にこれより上） */
#menubar_hdr {
  z-index: 7000;   /* 既存の 101 を上書き */
}

/* ------レイヤー設計（下 → 上）----------------------- */
:root{
  --z-content: 0;
  --z-badge: 10;
  --z-menubar: 5000;
  --z-menubar-overlay: 6000;
  --z-hamburger: 7000;
}

/* PCメニューバー */
.large-screen #menubar{
  position: sticky;
  top: 0;
  z-index: var(--z-menubar);
  background: #fff;
}

/* SP：全画面メニュー */
.small-screen #menubar.display-block{
  z-index: var(--z-menubar-overlay);
}

/* ハンバーガー/× ボタン最前面 */
#menubar_hdr{
  z-index: var(--z-hamburger);
}

/* New! バッジ（画像内だけ前面でOK） */
.ball{
  z-index: var(--z-badge);
}



/* ===トップページ間隔調整==================================== */
/* =========================
   aside(#mainimg)直後の .container の間隔
   ========================= */

/* aside 自体の下マージンはゼロ */
#mainimg { margin-bottom: 0; }

/* 直後の .container を引き上げ（横余白は維持） */
#mainimg + .container { 
  margin-top: -1rem !important;             /* 基本 */
  padding-left: var(--global-space);
  padding-right: var(--global-space);
}

/* PC幅はご希望どおり強めに */
@media (min-width: 1024px) {
  #mainimg + .container { margin-top: -1.5rem !important; }
}

/* スマホは詰めすぎ回避（必要なければ削ってOK） */
@media (max-width: 599px) {
  #mainimg + .container { margin-top: -0.75rem !important; }
}

/* .container 直下の最初の子が上マージンを持っている場合の保険 */
#mainimg + .container > *:first-child { margin-top: 0 !important; }


/* ==============================================
   main-contents 内：各セクションの縦間隔 微調整
   ※ padding-top を使って margin 折りたたみを回避
   ============================================== */

/* 1) 2つ目「ここに注目」：PC/スマホとも ほんの少しだけ詰める */
.main-contents > section.blur:nth-of-type(2) {
  margin-top: 0 !important;
  padding-top: 0.6rem; /* スマホ基準：やや詰める */
}
.main-contents > section.blur:nth-of-type(2) > *:first-child { margin-top: 0; }

@media (min-width: 600px) {
  .main-contents > section.blur:nth-of-type(2) { padding-top: 0.8rem; }  /* タブ */
}
@media (min-width: 1024px) {
  .main-contents > section.blur:nth-of-type(2) { padding-top: 1.0rem; }  /* PC */
}

/* 2) 3つ目「城ケ崎荘へようこそ」：
      PC＝詰める / スマホ＝少し空ける（逆方向の調整） */
.main-contents > section.blur:nth-of-type(3) {
  margin-top: 0 !important;
  padding-top: 1.2rem;  /* スマホ：少し広げる */
}
.main-contents > section.blur:nth-of-type(3) > *:first-child { margin-top: 0; }

@media (min-width: 600px) {
  .main-contents > section.blur:nth-of-type(3) { padding-top: 1.0rem; }  /* タブ：中間 */
}
@media (min-width: 1024px) {
  .main-contents > section.blur:nth-of-type(3) { padding-top: 0.7rem; }  /* PC：詰める */
}

/* 3) 4つ目「所在地」：PCは現状維持 / スマホだけ ほんの少し詰める */
.main-contents > section.blur:nth-of-type(4) {
  margin-top: 0 !important;
  padding-top: 0.9rem;  /* スマホ：気持ちだけ詰める */
}
.main-contents > section.blur:nth-of-type(4) > *:first-child { margin-top: 0; }

/* 「ここに注目」に bluetopspace-10 が付いているので、外側marginは無効化 */
.main-contents > section.blur.bluetopspace-10 { margin-top: 0 !important; }

/* 例：idで安定指定（将来の順番変更用） */
.main-contents > section#pickup { /* 2つ目 相当 */ }
.main-contents > section#welcome { /* 3つ目 相当 */ }
.main-contents > section#address { /* 4つ目 相当 */ }

/* ===トップページ間隔調整end==================================== */

/* 前セクションの浮動要素（float）の回り込みを止める */
main h2 { clear: both; }


/* ===== 抽選申込　base ===== */
/* ===== 【１】【２】マーカー：段落の左上に揃える版 ===== */
.apply-step {
  position: relative;
  padding-left: 3.4em;   /* ← マーカーとの横間隔（詰め気味） */
  margin: 1.25rem 0 0.75rem;
  line-height: 1.7;
}

.apply-step::before {
  content: attr(data-marker);
  position: absolute;
  inset-inline-start: 0;  /* 左寄せ */
  top: 0;                 /* ← 段落の左上に揃える（ここがポイント） */
  width: 3.2em;           /* ← マーカー幅（必要に応じて微調整） */
  text-align: left;
  line-height: 1.7;
}

/* 本文テキスト */
.apply-step__text {
  margin: 0 0 0.5rem;
}

/* ※ 注意書き（共通） */
.apply-notes {
  list-style: none;
  padding: 0;
  margin: 0.25rem 0 0.5rem;
}
.apply-notes > li {
  position: relative;
  padding-left: 1.4em;
  text-indent: -1.4em;
  line-height: 1.7;
  margin: 0.15rem 0;
}
.apply-notes > li::before {
  content: "※ ";
  font-feature-settings: "palt";
}

/* ===== responsive ===== */
@media (max-width: 768px) {
  .apply-step {
    padding-left: 3.0em;   /* スマホ時もう少し詰める */
  }
  .apply-step::before {
    width: 2.8em;
  }
}

/* ===== 浴用上の注意事項 ===== */
/* ここを差し替え or 追記（推奨は差し替え） */
ol.guidelines-list {
  list-style: none !important;     /* ← 既定の「1.」を確実に消す */
  counter-reset: item;
  margin: 0;
  padding: 0 0 0 2.6em;
}

/* 念のため marker も空にする（端末差異対策） */
ol.guidelines-list > li::marker {
  content: "" !important;
}

ol.guidelines-list > li {
  position: relative;
  margin: 0.35rem 0;
  line-height: 1.8;
}

ol.guidelines-list > li::before {
  counter-increment: item;
  content: "(" counter(item) ") ";
  position: absolute;
  left: -2.6em;
  top: 0;
  width: 2.5em;
  text-align: right;
  white-space: nowrap;
}

/* スマホ微調整 */
@media (max-width: 768px) {
  ol.guidelines-list { padding-left: 2.4em; }
  ol.guidelines-list > li::before {
    left: -2.4em;
    width: 2.4em;
    font-size: 0.95em;
  }
}

/* トップページだけ menubar の HOME を非表示にする */
body.home #menubar .home-item {
  display: none !important;
}

/* === ハンバーガー時(#f-sizeをロゴ下に出す) ===================== */
@media screen and (max-width:900px) {
  /* 親のならび：既に column 指定あり。中央寄せだけ保証しておく */
  header {
    align-items: center;
  }

  /* 並び順を明示（ロゴ→f-size→電話） */
  #logo { order: 1; }
  #f-size { order: 2; }
  address { order: 3; }

  /* #f-size を通常フローに戻して表示・センタリング */
  #f-size {
    position: static !important;      /* absolute → 通常フロー */
    right: auto !important;
    top: auto !important;
    display: block !important;        /* 既存の display:none を上書き */
    background: transparent;          /* 枠を消す場合 */
    border: 0;
    padding: 6px 8px;
    margin: 6px 0 0;
    width: 100%;                      /* 横幅いっぱいにして */
    text-align: center;               /* テキスト中央 */
  }

  /* 文字サイズなど微調整（お好みで） */
  #f-size p {
    margin: 0;
    font-size: 0.95rem;               /* 少しだけ小さめに */
    line-height: 1.4;
  }
}

/* ====== ハンバーガー表示時：#f-size をロゴ直下に強制配置 ====== */
@media (max-width: 900px){
  header{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
  }
  header #f-size{
    display:block !important;
    position:static !important;       /* absolute を解除 */
    margin:6px 0 0 !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    width:auto !important;
    text-align:center !important;
    order:2 !important;               /* ロゴ(#logo)の次 */
  }
  header #f-size p{
    color:#004b36 !important;         /* ご指定の文字色に変更 */
    font-size:100% !important;
    line-height:1.4 !important;
    margin:0 !important;
  }
}

/* 390px以下：文字サイズを90%に */
@media (max-width: 390px){
  header #f-size p{
    font-size:90% !important;
  }
}

/* ===== ハンバーガー表示時：#f-size の文字サイズを強制 ===== */
@media (max-width: 900px){
  header #f-size p,
  #menubar_hdr ~ .container header #f-size p {   /* 念のため詳細度を上げる */
    font-size: 14px !important;  /* 基準（今と同等） */
    line-height: 1.4 !important;
  }
}

/* 390px以下は「約90%」に */
@media (max-width: 390px){
  header #f-size p,
  #menubar_hdr ~ .container header #f-size p {
    /* 14px の 90% ≒ 12.6px → 実用上 13px でOK */
    font-size: 13px !important;
  }
}


/* guide.htmlの注意書き〆の部分の表示 */
.notice-text1 {
  margin: 1.5em auto;
  text-align: center;
  line-height: 1.4;
  max-width: 800px;
  font-size: 1rem;
  color: #004b36;
}

/* 下線をテキスト幅にフィット（PC用） */
.u-wrap {
  display: inline-block;
  text-decoration: underline;
  text-decoration-color: #004b36;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.15em;
}

/* デフォルト（PC）：改行なし */
.br-sp { display: inline; }

/* タブレット（820px以下）：改行を入れる */
@media screen and (max-width: 820px) {
  .br-sp {
    display: block;
  }
}

/* スマホ（480px以下）：改行なし＆下線なし＆左揃え */
@media screen and (max-width: 480px) {
  .notice-text1 {
    text-align: left;
    margin-left: 1em;
    margin-right: 1em;
  }
  .br-sp {
    display: inline; /* 改行を戻す */
  }
  .u-wrap {
    text-decoration: none; /* スマホは下線なし */
  }
}

.font-red{
	color: #CB2424;
}