@charset "utf-8";
/* CSS Document */

section.bg-blue , section.bg-orange , section.bg-pink , section.bg-green {
	padding-top: 80px;
	padding-bottom: 80px;
	position: relative;
}

section.bg-blue {
	background: var(--color-blue-light);
}
section.bg-orange {
	background: var(--color-orange-light);
}
section.bg-pink {
	background: var(--color-pink-light);
}
section.bg-green {
	background: var(--color-green-light);
}

/* ------------------------ スマートフォン ------------------------ */
@media only screen and (max-width:768px){

section.bg-blue , section.bg-orange , section.bg-pink , section.bg-green {
	padding-top: 40px;
	padding-bottom: 40px;
}

}


h2.p01 {
	font-size: 28px;
	font-weight: 700;
	color: var(--color-white);
	text-align: center;
	padding: 20px 30px;
	margin-bottom: 40px;
	border-radius: var(--border-radius);
	position: relative;
	overflow: hidden;
}

/*h2.p01::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
	z-index: 1;
}*/

h2.p01 > * {
	position: relative;
	z-index: 2;
}

h2.p01.blue {
	background: var(--color-blue);
}

h2.p01.orange {
	background: var(--color-orange);
}

h2.p01.pink {
	background: var(--color-pink);
}

h2.p01.green {
	background: var(--color-green);
}

/* ------------------------ スマートフォン ------------------------ */
@media only screen and (max-width:768px){

	h2.p01 {
		font-size: 20px;
		padding: 15px;
		margin-bottom: 25px;
	}

}

h3.p01 {
	font-size: 22px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 25px;
}
h3.p02 {
	font-size: 18px;
	font-weight: bold;
	color: #FFFFFF;
	background-color: var(--color-blue);
	padding: 7px;
	text-align: center;
}
#fukuyama h3.p02 {
	background-color: var(--color-pink);
}

/* ------------------------ スマートフォン ------------------------ */
@media only screen and (max-width:768px){

	h3.p01 {
		font-size: 17px;
		margin-bottom: 25px;
	}
	h3.p02 {
		font-size: 16px;
		padding: 7px;
	}

}

a.button01 {
	--btn-height: 72px; /* 高さ */
	--btn-radius: 9999px;
	--btn-padding-x: 40px; /* 左右余白 */
	--btn-bg: var(--color-blue); /* デフォルト (blue) */
	--btn-shadow-color: var(--color-blue-dark);

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: var(--btn-height);
	padding: 12px var(--btn-padding-x);
	border-radius: var(--btn-radius);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
	text-decoration: none;
	position: relative;
	overflow: hidden;
	background: var(--btn-bg);
	/* 右5px + 下6px の段差影 */
	box-shadow: 5px 6px 0 var(--btn-shadow-color);
	transition: background .35s, transform .18s cubic-bezier(.4,0,.3,1), box-shadow .18s, filter .25s;
	-webkit-tap-highlight-color: transparent;
	padding-right: calc(var(--btn-padding-x) + 28px); /* 矢印スペース */
}

a.button01 .material-icons {
	font-size: 24px;
	line-height: 1;
	margin-right: 10px;
	flex-shrink: 0;
}

/* 二行表示時の中央揃えを安定させる */
a.button01 br { line-height: 0; }

/* カラー バリエーション (単色 + 各dark色の影) */
a.button01.blue { --btn-bg: var(--color-blue); --btn-shadow-color: var(--color-blue-dark); }
a.button01.pink { --btn-bg: var(--color-pink); --btn-shadow-color: var(--color-pink-dark); }
a.button01.green { --btn-bg: var(--color-green); --btn-shadow-color: var(--color-green-dark); }

/* ホバー & フォーカス */
a.button01:focus-visible,
a.button01:hover {
	/* 影へ近づける (右 & 下) */
	transform: translate(3px,4px);
	box-shadow: 2px 2px 0 var(--btn-shadow-color);
}
/* 輝きエフェクト */
/* シャインを控えめ (必要なら削除可) */
/* シャインは不要になったので非表示 */
a.button01::before { display:none; }

/* 右矢印（画像では右端余白に白実線アイコン） */
a.button01::after {
	content: '\203A'; /* single right-pointing angle quotation mark › */
	font-size: 30px;
	position: absolute;
	top: 50%;
	right: 22px;
	transform: translateY(-50%);
	font-weight: 700;
	color: #fff;
	letter-spacing: 0;
}

/* アクティブ */
a.button01:active {
	transform: translate(5px,6px); /* 影位置と一致させ押し切った状態 */
	filter: brightness(.95);
	box-shadow: 0 0 0 var(--btn-shadow-color) inset;
}

/* 無効用（.is-disabled か aria-disabled="true"） */
a.button01.is-disabled,
a.button01[aria-disabled="true"] {
	cursor: not-allowed;
	opacity: .55;
	transform: none;
	box-shadow: none;
	filter: grayscale(.1);
}
a.button01.is-disabled:hover::before,
a.button01[aria-disabled="true"]:hover::before { transform: translateX(-70%) skewX(-20deg); }

/* モバイルサイズ調整 */
@media only screen and (max-width:768px){
	a.button01 {
		--btn-height: 60px;
		--btn-padding-x: 26px;
		font-size: 15px;
		gap: 6px;
		padding: 10px var(--btn-padding-x);
		padding-right: calc(var(--btn-padding-x) + 26px);
	}
		a.button01 .material-icons { font-size: 22px; margin-right: 6px; }
		a.button01::after { right: 18px; font-size: 28px; }
		a.button01:hover { transform: translate(2px,3px); }
		a.button01:active { transform: translate(5px,6px); }
}

/* 強制的に幅いっぱいにしたい場合のヘルパー */
a.button01.wide { display: flex; width: 100%; }


/* ========== BUTTON02 / 03 (押し込み統合) ========== */
a.button02 , a.button03 {
	font-size: 23px;
	font-weight: 600;
	color: var(--color-white);
	text-align: center;
	padding: 20px 30px;
	line-height: 1.4;
	min-height: 105px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	border-radius: var(--border-radius);
	border: none;
	position: relative;
	overflow: hidden;
	text-decoration: none;
	--btn-shadow-color: var(--color-blue-dark); /* default override later */
	transition: background .35s, color .3s, transform .18s cubic-bezier(.4,0,.3,1), box-shadow .18s;
	box-shadow: 5px 6px 0 var(--btn-shadow-color);
}

a.button02 .material-icons,
a.button03 .material-icons {
	font-size: 27px;
	margin: 0 5px;
	vertical-align: middle;
}

/* button02 色バリエ (塗り) */
a.button02.blue { background: var(--color-blue); --btn-shadow-color: var(--color-blue-dark); }
a.button02.orange { background: var(--color-orange); --btn-shadow-color: var(--color-orange-dark); }
a.button02.pink { background: var(--color-pink); --btn-shadow-color: var(--color-pink-dark); }
a.button02.green { background: var(--color-green); --btn-shadow-color: var(--color-green-dark); }
a.button02:hover { transform: translate(3px,4px); box-shadow: 2px 2px 0 var(--btn-shadow-color); }
a.button02:active { transform: translate(5px,6px); box-shadow: 0 0 0 var(--btn-shadow-color) inset; }

/* button03 (アウトライン → 塗り反転 + 押し込み) */
a.button03.blue {
	color: var(--color-blue);
	background-color: var(--color-white);
	border: 3px solid var(--color-blue);
	--btn-shadow-color: var(--color-blue);
}
a.button03.pink {
	color: var(--color-pink);
	background-color: var(--color-white);
	border: 3px solid var(--color-pink);
	--btn-shadow-color: var(--color-pink);
}
a.button03.orange {
	color: var(--color-orange);
	background-color: var(--color-white);
	border: 3px solid var(--color-orange);
	--btn-shadow-color: var(--color-orange);
}
a.button03.green {
	color: var(--color-green);
	background-color: var(--color-white);
	border: 3px solid var(--color-green);
	--btn-shadow-color: var(--color-green);
}
a.button03:hover {
	transform: translate(3px,4px);
	box-shadow: 2px 2px 0 var(--btn-shadow-color);
	/* 背景と文字色はそのまま維持 */
}
a.button03:active {
	transform: translate(5px,6px);
	box-shadow: 0 0 0 var(--btn-shadow-color) inset;
}

/* button04 (アウトライン単色押し込み) */
a.button04 {
	font-size: 20px;
	font-weight: 600;
	text-align: center;
	border: 2px solid var(--color-dark);
	line-height: 1.4;
	display: block;
	padding: 18px 25px;
	border-radius: var(--border-radius);
	background-color: var(--color-white);
	color: var(--color-dark);
	text-decoration: none;
	--btn-shadow-color: var(--color-dark);
	transition: background .35s, color .3s, transform .18s cubic-bezier(.4,0,.3,1), box-shadow .18s;
	box-shadow: 5px 6px 0 var(--btn-shadow-color);
}
a.button04:hover {
	/* 背景白/文字色ダーク維持 */
	transform: translate(3px,4px);
	box-shadow: 2px 2px 0 var(--btn-shadow-color);
}
a.button04:active {
	transform: translate(5px,6px);
	box-shadow: 0 0 0 var(--btn-shadow-color) inset;
}

/* button05 (グリーン押し込み) */
a.button05 {
	font-size: 23px;
	font-weight: 600;
	color: var(--color-white);
	text-align: center;
	padding: 18px 80px;
	line-height: 1.4;
	display: inline-block;
	background: var(--color-green);
	border-radius: var(--border-radius);
	text-decoration: none;
	--btn-shadow-color: var(--color-green-dark);
	transition: background .35s, transform .18s cubic-bezier(.4,0,.3,1), box-shadow .18s;
	box-shadow: 5px 6px 0 var(--btn-shadow-color);
}
a.button05:hover { transform: translate(3px,4px); box-shadow: 2px 2px 0 var(--btn-shadow-color); }
a.button05:active { transform: translate(5px,6px); box-shadow: 0 0 0 var(--btn-shadow-color) inset; }

a.button05 .material-icons {
	font-size: 28px;
	margin: 0 8px;
	vertical-align: middle;
}


/* ------------------------ スマートフォン ------------------------ */
@media only screen and (max-width:768px){
	a.button02 , a.button03 {
		font-size: 17px;
		padding: 15px;
		height: 50px;
		min-height: 50px;
	}
	a.button04 {
		font-size: 16px;
		border: 2px solid #000000;
		line-height: 1.3;
		padding: 15px;
	}
	a.button05 {
		font-size: 18px;
		padding: 15px 20px;
		line-height: 1.3;
	}
	a.button02:hover, a.button03:hover, a.button04:hover, a.button05:hover { transform: translate(2px,3px); box-shadow: 2px 2px 0 var(--btn-shadow-color); }
	a.button02:active, a.button03:active, a.button04:active, a.button05:active { transform: translate(5px,6px); }
}

/* ------------------------------------------
  トップページ
--------------------------------------------- */

/* Modern Animation Effects */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes pulse {
	0%, 100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.05);
	}
}

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

.modern-card {
	animation: fadeInUp 0.6s ease-out;
}

.modern-card:nth-child(even) {
	animation: slideInLeft 0.6s ease-out;
}


.attention {
	position: fixed;
	right: 30px;
	bottom: 70px;
	width: 160px;
	height: 160px;
	border-radius: 50%;
	background-color: var(--color-orange);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 19px;
	font-weight: bold;
	color: #FFFFFF;
	z-index: 100;
	border: 2px solid #FFFFFF;
}

/* ------------------------ スマートフォン ------------------------ */
@media only screen and (max-width:768px){

	.attention {
		right: 30px;
		bottom: 70px;
		width: 125px;
		height: 125px;
		font-size: 16px;
		border: 2px solid #FFFFFF;
	}

}



/*============================
#mainvisual
============================*/
#mainvisual {
	margin-bottom: 60px;
	position: relative;
}
#mainvisual img {
	width: 100%;
}

ul.mainvisual-button {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 1100px;
	margin: auto;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 1%;
}
ul.mainvisual-button li {
	margin-bottom: 30px;
}

/* ------------------------ スマートフォン ------------------------ */
@media only screen and (max-width:768px){

	#mainvisual {
		margin-bottom: 40px;
	}
	ul.mainvisual-button {
		width: 100%;
		margin: auto;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 30px;
	}
	ul.mainvisual-button {
		display: none;
	}
	ul.mainvisual-button li {
		margin-bottom: 30px;
	}	

}

.introduction {
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	line-height: 2;
}
ul.buttonlist {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 0 100px;
}
ul.buttonlist li {
	width: 48%;
	margin-bottom: 25px;
}
ul.buttonlist li:nth-child(2n) {
	margin-left: 4%;
}
ul.buttonlist li a {
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
ul.movielist {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 0 200px;
}
ul.movielist li {
	width: 48%;
}
ul.movielist li p {
	font-size: 18px;
	text-align: center;
	margin-bottom: 5px;
}

.banner {
	text-align: center;
}
.banner a {
	display: inline-block;
	padding: 10px 96px;
	border: 1px solid #000000;
}
.banner a img {
	width: auto;
	height: 90px;
}


/* ------------------------ スマートフォン ------------------------ */
@media only screen and (max-width:768px){

	.introduction {
		font-size: 16px;
		font-weight: bold;
		/*text-align: left;*/
		line-height: 2;
	}
	ul.buttonlist {
		padding: 0;
	}
	ul.buttonlist li {
		width: 48%;
		margin-bottom: 25px;
	}
	ul.movielist {
		padding: 0;
	}
	ul.movielist li {
		width: 100%;
		margin-bottom: 40px;
	}
	ul.movielist li p {
		font-size: 18px;
		margin-bottom: 5px;
	}

	.banner a {
		padding: 10px 10px;
	}
	.banner a img {
		width: 80%;
		height: auto;
	}

}


/* ---- flow chart ---- */
.flowlist{
  /* 調整用の変数 */
  --gap: 40px;               /* ボックス間のすき間 */
  --border: 4px;             /* 枠と線の太さ */
  --box-h: 200px;            /* ボックスの高さ（全て統一） */
  --connector: calc(var(--gap) + var(--border)*2);  /* gapの半分をコネクタ長に使う */
	
  list-style: none;
  margin: 0;
  display: flex;
  align-items: center;
	justify-content: center;
  gap: var(--gap);
}

.flowlist li{
  position: relative;
  height: var(--box-h);
  padding: 0 18px;
  background: linear-gradient(135deg, var(--color-white) 0%, var(--color-gray-light) 100%);
  border: var(--border) solid var(--color-blue);
  /*border-radius: 16px;*/
  transition: var(--transition);
	z-index: 1; /* 背景より前面 */

  writing-mode: vertical-rl;
  text-orientation: mixed;

  display: flex;
  align-items: center;
  justify-content: center;
	
	font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
	text-align: center;
  color: var(--color-dark);
}

/* wrapper 背景付き（画像参照） */
.flowlist-wrapper{
	position: relative;
	background: transparent;
	border-radius: 30px;
	padding: 30px 0 50px; /* 下に注記スペース */
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	max-width: 1100px;
	--edge-out: 85px; /* 端のボックスから帯が始まるまでの距離 */
	--band-left: 85px;
	--band-width: calc(100% - 170px);
	--bg-alpha: .18; /* 淡色濃さ */
}
.flowlist-wrapper::before{
	content: "";
	position: absolute;
	top: 0; left: var(--band-left); width: var(--band-width); height: 100%;
	border-radius: inherit;
	--flow-color: 0,132,255;
	background: rgba(var(--flow-color),var(--bg-alpha));
	pointer-events: none;
}

#fukuyama .flowlist-wrapper::before{
	--flow-color:232,135,176;
	background: rgba(var(--flow-color),var(--bg-alpha));
}
.flowlist-note , .flowlist-note01 , .flowlist-note02{
	position: absolute;
	bottom: 12px;
	font-size: 18px;
	font-weight: 700;
	text-align: center;
}
.flowlist-note{
	left: 50%;
	transform: translateX(-50%);
}
/* 右側へコネクタ線（常に中央に揃う） */
.flowlist li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: calc(-1 * var(--connector));
  width: var(--connector);   /* gapの半分だけ伸ばす＝ズレない */
  height: var(--border);
  background: var(--color-blue);
  border-radius: 2px;
}

#fukuyama .flowlist li{
  border: var(--border) solid var(--color-orange);
}
#fukuyama .flowlist li:not(:last-child)::after {
  background: var(--color-orange);
}

/* wrapper 内の福山オレンジコネクタ（セクションIDに依存しないバージョン） */
#fukuyama .flowlist-wrapper .flowlist li{border-color: var(--color-pink);}
#fukuyama .flowlist-wrapper .flowlist li:not(:last-child)::after{background: var(--color-pink);}

.flowlist-wrapper.blue .flowlist li{border-color: var(--color-blue);}


/* ------------------------ スマートフォン ------------------------ */
@media only screen and (max-width:768px){
	
  /* スマホ用パラメータ（縦線の長さ＝ギャップに合わせる） */
  .flowlist{
    --gap-sp: 20px;            /* アイテム間のすき間（縦） */
    gap: var(--gap-sp);
    flex-direction: column;    /* 縦積み */
    align-items: center;
  }

  .flowlist li{
    /* 横書きに戻す */
		width: 100%;
		padding: 5px 10px;
		font-size: 16px;
    writing-mode: initial;
    text-orientation: initial;
    height: auto;
  }

	  .flowlist-wrapper{
			border-radius: 24px;
		--edge-out: 40px;
		--band-left: 40px;
		--band-width: calc(100% - 80px);
		padding: 0 63px 0 27px; /* 右側縦書き注記スペース */
		margin-bottom: 30px;
		}
	/* 帯を上下から 90px 縮め、端ボックスが外に出る視覚表現 */
	.flowlist-wrapper::before{
		left:0;
		width:100%;
		top:51px;
		bottom:51px;
		height:auto;
		border-radius:24px;
	}

	.flowlist-note{font-size:14px; bottom:10px;}
	.flowlist-wrapper .flowlist{width:100%;}

	/* 注記を縦書きで中央右側に配置 */
	.flowlist-note , .flowlist-note01 , .flowlist-note02{
		position:absolute;
		writing-mode: vertical-rl;
		text-orientation: mixed;
		bottom:auto;
		left:auto;
		right:15px;
		font-size:13px;
		padding:6px 4px;
		border-radius:12px;
	}
	.flowlist-note{
		top:50%;
		transform:translateY(-50%);
	}
	.flowlist-note01{
		top:10%;
	}
	.flowlist-note02{
		bottom:3%;
	}

	
  /* 縦向きのコネクタ（下へ伸ばす） */
  .flowlist li:not(:last-child)::after{
    left: 50%;
    right: auto;
	  top: 100%;
    bottom: calc(-1 * var(--gap-sp));
    transform: translateX(-50%);
    width: var(--border);      /* 線の太さ */
    height: calc(var(--gap-sp) + var(--border)*2);      /* すき間ぶん伸ばす */
  }

}


ul.pricelist {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: 15px;
	gap: 20px;
}
ul.pricelist li {
	width: 25%;
	background: var(--color-blue-light);
	padding: 20px;
	border-radius: 16px;
	text-align: center;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	transition: var(--transition);
}

#fukuyama ul.pricelist li {
	background: var(--color-pink-light);
}

ul.pricelist li h4 {
	font-size: 18px;
	font-weight: 700;
	width: 100%;
	color: var(--color-dark);
	margin-bottom: 10px;
}
ul.pricelist li h4 span {
	font-size: 14px;
	font-weight: 500;
}
ul.pricelist li p.pricelist_price {
	font-size: 22px;
	font-weight: 700;
	color: var(--color-red);
	width: 100%;
}


/* ------------------------ スマートフォン ------------------------ */
@media only screen and (max-width:768px){

	ul.pricelist {
		margin-bottom: 15px;
	}
	ul.pricelist li {
		width: 48%;
		padding: 10px;
		border-radius: 20px;
		margin: 0 1% 10px;
	}
	ul.pricelist li h4 {
		font-size: 18px;
	}
	ul.pricelist li h4 span {
		font-size: 13px;
		display: block;
	}
	ul.pricelist li p.pricelist_price {
		font-size: 20px;
	}

}

.timeschedule {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.timeschedule .timeschedule_box {
	width: 49%;
}
.timeschedule .timeschedule_box ul.timeschedule_list {
	background-color: #FFFFFF;
}
.timeschedule .timeschedule_box ul.timeschedule_list li {
	border: 2px solid var(--color-blue);
	border-top: none;
	padding: 7px;
	text-align: center;
}
#fukuyama .timeschedule .timeschedule_box ul.timeschedule_list li {
	border: 2px solid var(--color-pink);
	border-top: none;
}

/* ------------------------ スマートフォン ------------------------ */
@media only screen and (max-width:768px){


}

/*アコーディオン*/
.toggle {
	display: none;
}
.Label {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
	padding: 7px 30px;
	display: block;
	background-color: #FFFFFF;
	color: var(--color-blue);
	border: 2px solid var(--color-blue);
	cursor: pointer;
}
#fukuyama .Label {
	color: var(--color-pink);
	border: 2px solid var(--color-pink);
}
.Label::after{
	content:"▼";
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  height: 30px;
  top: 0;
	right: 20px;
  bottom: 0;
  margin: auto;
	transition: all 0.3s;
}
.Label,
.content {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
	transition: all 0.3s;
}
.content {
	height: 0;
	margin-bottom:40px;
	/*padding:0 20px;*/
	overflow: hidden;
}
.toggle:checked + .Label + .content {
	height: auto;
	padding:30px 0 0 ;
	transition: all .3s;
}
.toggle:checked + .Label::after {
	content:"▲";
}

/* ------------------------ スマートフォン ------------------------ */
@media only screen and (max-width:768px){

  /*アコーディオン*/
  .Label {
    font-size: 17px;
    padding: 10px 30px;
  }
  .Label::before{
    font-size: 22px;
    height: 22px;
    right: 12px;
    text-indent: 0;
  }
  
  .content {
    margin-bottom:30px;
  }
  .toggle:checked + .Label + .content {
    padding:30px 0 0 ;
  }

}



/* ------------------------ スマートフォンでのみアコーディオン ------------------------ */

/* PCでは .accordion-sp のコンテンツを常に表示 */
/* ------------------------ パソコン ------------------------ */
@media screen and (min-width: 768px) {

	.accordion-sp .Label {
		display: none;
	}
	
}

.accordion-sp .content {
  height: auto;
  overflow: visible;
  padding-top: 30px;
}

/* ------------------------ スマートフォン ------------------------ */
@media only screen and (max-width: 768px) {

  .accordion-sp .Label {
    cursor: pointer;
  }

  .accordion-sp .Label::after {
    display: inline-block;
    content: "▼";
  }

  .accordion-sp .content {
    height: 0;
    overflow: hidden;
    padding-top: 0;
  }

  .accordion-sp .toggle:checked + .Label + .content {
    height: auto;
    padding-top: 30px;
  }

  .accordion-sp .toggle:checked + .Label::after {
    content: "▲";
  }
}



/* ------------------------ スマートフォン ------------------------ */
@media only screen and (max-width:768px){


}

ul.taxistand_list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
ul.taxistand_list > li {
	width: 48%;
	margin-bottom: 50px;
}
ul.taxistand_list > li:nth-child(2n) {
	margin-left: 4%;
}
.taxistand_list_mi {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.taxistand_list_mi div {
	width: 100%;
	text-align: center;
}
.taxistand_list_mi div img {
	/*width: 48%;*/
}
.taxistand_list_mi .map , .taxistand_list_mii .map {
	width: 100%;
	text-align: center;
	margin-bottom: 20px;
}
.taxistand_list_mi .map img , .taxistand_list_mii .map img {
	width: 100%;
}
.taxistand_list_mii > ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.taxistand_list_mii > ul > li {
	width: 48%;
}
ul.taxistand_list .map img {
	border: 1px solid #000000;
}
ul.taxistand_list > li > div > img {
	
}
ul.taxistand_list > li h4 {
	font-size: 18px;
	text-align: center;
	font-weight: bold;
	margin-bottom: 10px;
}
ul.taxistand_list > li h5 {
	text-align: center;
	font-weight: bold;
	margin-top: 10px;
}

/* ------------------------ スマートフォン ------------------------ */
@media only screen and (max-width:768px){

	ul.taxistand_list > li {
		width: 100%;
		margin-bottom: 30px;
	}
	ul.taxistand_list > li:nth-child(2n) {
		margin-left: 0;
	}
	.taxistand_list_mi {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	.taxistand_list_mi div {
		width: 100%;
		text-align: center;
	}
	.taxistand_list_mi div img {
		/*width: 48%;*/
	}
	.taxistand_list_mi .map , .taxistand_list_mii .map {
		width: 100%;
		text-align: center;
		margin-bottom: 20px;
	}
	.taxistand_list_mi .map img , .taxistand_list_mii .map img {
		width: 100%;
	}
	.taxistand_list_mii > ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.taxistand_list_mii > ul > li {
		width: 48%;
	}
	ul.taxistand_list > li h4 {
		font-size: 17px;
		margin-top: 10px;
	}

}

#campaign {
	overflow: hidden;
	padding-top: 20px;
}

.campaign_box {
	background: var(--color-green-light);
	border-radius: 24px;
	padding: 40px;
	border: 2px solid var(--color-green);
	transition: var(--transition);
}

.campaign_box h3 {
	font-size: 22px;
	font-weight: 700;
	background: linear-gradient(135deg, var(--color-white) 0%, var(--color-gray-light) 100%);
	text-align: center;
	padding: 15px;
	margin-bottom: 30px;
	color: var(--color-green);
	border-radius: 12px;
}
.campaign_box_main {
}
p.campaign_box_data {
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 25px;
}
p.campaign_box_data span {
	font-size: 16px;
	font-weight: bold;
	display: block;
}
p.campaign_box_text {
	font-size: 18px;
	text-align: center;
	margin-bottom: 25px;
}
.campaign_box_coupon {
	text-align: center;
	position: relative;
	margin-bottom: 40px;
}
.campaign_box_coupon img {
	max-width: 500px;
	/*max-height: 333px;*/
}
.campaign_box_coupon div {
	width: 125px;
	height: 125px;
	border-radius: 50%;
	background-color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	color: var(--color-red);
	position: absolute;
	top: 0;
	left: calc(50% + 260px);
	bottom: 0;
	margin: auto;
}


/* ------------------------ スマートフォン ------------------------ */
@media only screen and (max-width:768px){

	.campaign_box {
		border-radius: 30px;
		padding: 20px 15px;
	}
	.campaign_box h3 {
		font-size: 17px;
		padding: 15px;
		text-align: left;
		margin-bottom: 25px;
	}
	p.campaign_box_data {
		font-size: 18px;
		margin-bottom: 25px;
	}
	p.campaign_box_data span {
		font-size: 16px;
	}
	p.campaign_box_text {
		font-size: 16px;
		text-align: left;
		margin-bottom: 25px;
	}
	.campaign_box_coupon {
		text-align: center;
		position: relative;
		margin-bottom: 40px;
	}
	.campaign_box_coupon img {
		max-width: none;
		max-height: none;
		width: 100%;
	}
	.campaign_box_coupon div {
		width: 125px;
		height: 125px;
		border-radius: 50%;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		font-size: 18px;
		font-weight: bold;
		color: var(--color-red);
		position: absolute;
		top: 0;
		left: auto;
		right: -50px;
		bottom: 0;
		margin: auto;
	}

}

/* ------------------------ スマートフォン ------------------------ */
@media only screen and (max-width:768px){


}


/* ------------------------------------------
  下層ページ
--------------------------------------------- */

#pageheader h2{
	font-size: 35px;
  width: 1100px;
  margin: 0 auto;
	text-align: center;
	font-weight: bold;
  padding: 40px 0 50px;
  border-bottom: 1px solid #000000;
  margin-bottom: 40px;
}


/* ------------------------ スマートフォン ------------------------ */
@media only screen and (max-width:768px){

	#pageheader{
		margin-bottom: 30px;
	}
	#pageheader h2{
		font-size: 20px;
		width: 100%;
		padding: 75px 0 30px;
		margin-bottom: 0;
	}
		

}



.wp-pagenavi {
	clear: both;
	padding-top:5px;
	text-align:center;
	margin-top:50px;
}

.wp-pagenavi a, .wp-pagenavi span {
	text-decoration: none;
	border: 1px solid #BFBFBF;
	padding: 5px 15px !important;
	margin: 2px 2px 10px;
	display:inline-block;
	font-size: 17px;
}


.wp-pagenavi span.current {
	font-weight: bold;
	color:#FFFFFF;
	background-color:#AD8400;
	border-color:#AD8400 !important;
}

.wp-pagenavi .larger , .wp-pagenavi .smaller{
	background-color:#FFFFFF;
}


table.form{
	width:100%;
	margin-top:50px;
	border-collapse: collapse;
	margin-left:auto;
	margin-right:auto;
	border-top:1px solid #000000;
	margin-bottom:40px;
}

table.form th{
	text-align:left;
	vertical-align:top;
	padding:20px;
	border-bottom:1px solid #000000;
	width:270px;
	background-color: #ECE8DB;
}

table.form td{
	padding:20px;
	border-bottom:1px solid #000000;
}

table.form th span , .required{
	background-color:#AD8400;
	padding:3px 7px;
	color:#FFFFFF;
	font-size:13px;
	display:inline-block;
}

table.form th span.nini{
	background-color:#FFFFFF;
	color:#000000;
}

table.form input[type="text"] , table.form input[type="email"] , table.form textarea{
	background-color: #FFF;
  border: 1px solid #CCC;
  line-height: 140%;
  padding: 8px 5px;
	width:100%;
}

table.form .auto input{
	width:auto;
}

table td label {
    display: inline-block;
    margin-right: 20px;
}

table.form .zip01{
	width: 100px !important;
	margin-bottom: 20px;
}
table.form .zip02{
	width: 150px !important;
}
table.form .pref{
	margin-bottom: 20px;
}

.submit{
	border:none;
	font-family: '游ゴシック体', 'Yu Gothic', 'YuGothic', 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', sans-serif;
	display: block;
	color: #FFFFFF;
	background-color: #AD8400;
	font-size: 18px;
	font-weight: bold;
	width: 320px;
	text-align: center;
	padding: 21px;
	border-radius: 20px;
	margin: 0 20px 15px 20px;
	transition: 0.6s ;
	cursor: pointer;
	-webkit-appearance: none;
}

.submit:hover{
	filter:alpha(opacity=80);
	-moz-opacity: 0.8;
	opacity: 0.8;
}
.submit.gray{
	background-color: #8B8B8B;
}


/* ------------------------ スマートフォン ------------------------ */
@media only screen and (max-width:768px){

	
	table.form th span , .required{
		padding:3px 7px;
		font-size:13px;
		margin-top: 7px;
	}
	table.form input[type="text"] , table.form input[type="email"] , table.form textarea{
		width:100%;
	}
	table.form input[type=radio]{
		margin-bottom:20px;
	}
	table.form .tel input{
		width:50px !important;
	}
	table.form select{
		width: 100%;
	}
	table.form th{
		padding:10px;
		width:100px;
		font-feature-settings: "palt";
	}
	table.form td{
		padding:10px;
	}
	table.form .zip01{
		width: 70px !important;
		margin-bottom: 20px;
	}
	table.form .zip02{
		width: 100px !important;
		margin-bottom: 20px;
	}

	.submit{
		font-size: 15px;
		font-weight: bold;
		width: 70%;
		text-align: center;
		padding: 21px;
		border-radius: 20px;
		margin: 0 15% 15px 15%;
	}

}


.news-single{
	margin-bottom: 100px;
}
.news-single h2 {
	font-size: 20px;
	font-weight: bold;
	margin-top: 30px;
	margin-bottom: 20px;
	padding-bottom: 9px;
	border-bottom: 1px solid #565656;
}
.news-single h3 {
	font-size: 17px;
	font-weight: bold;
	margin-top: 30px;
	margin-bottom: 20px;
	padding-left: 15px;
	border-left: 5px solid #AD8400;
}
.news-single img {
	max-width: 100%;
	height: auto;
	margin-bottom: 20px;
}
.news-single p {
	margin-bottom: 20px;
}

.news-single a{
	text-decoration: underline;
	color: #2985cf;
}

.wp-block-file .wp-block-file__button{
	background-color: #AD8400 !important;
}


.news-single table{
	width: 100%;
	margin: 15px auto 40px;
	border: 1px solid #A0A0A0;
}
.news-single table th,
.news-single table td{
	padding: 5px 15px;
	border-bottom: 1px solid #A0A0A0;
	border-right: 1px solid #A0A0A0;
}
.news-single table th {
	/*-moz-text-align-last: justify;
	text-align-last: justify;
	text-justify: inter-ideograph;*/
	text-align:center;
	font-weight:bold;
	background-color: #E0E3F7;
	border-bottom: 1px solid #ffffff;
	vertical-align: middle;
	color: #ffffff;
}
.news-single table tr:last-child th,
.news-single table tr:last-child td{
	border-bottom: none;
}
.news-single table th {white-space: nowrap;}
@media screen and (max-width:480px) {
.news-single table th,
.news-single table td{
	padding: 4px 5px;}
}

@media screen and (max-width:768px) {
.news-single h2 {
	font-size: 18px;
}
.news-single h3 {
	font-size: 16px;
}
.news-single table img{
  max-width:  100%;
  height: auto;
}

}

.mw_wp_form_confirm .confirm-hidden {
  display:none;
}

/* ------------------------ パソコン ------------------------ */
@media screen and (min-width: 768px) {

	#fix-banner {
		display: none;
	}

}

ul.fix-banner {
	width: 100%;
	position: fixed;
	bottom: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	z-index: 1000;
}
ul.fix-banner li {
	width: calc(100% / 3);
	height: 60px;
	text-align: center;
}
ul.fix-banner li a {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-white);
	font-weight: 700;
	padding: 12px;
	line-height: 1.3;
	text-decoration: none;
	transition: var(--transition);
	position: relative;
	overflow: hidden;
}

ul.fix-banner li a .material-icons {
	font-size: 24px;
	margin-right: 6px;
}

ul.fix-banner li a::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
	transition: left 0.5s;
}

ul.fix-banner li a:hover::before {
	left: 100%;
}

ul.fix-banner li.b-onomichi a {
	background: linear-gradient(135deg, var(--color-blue) 0%, var(--color-blue-dark) 100%);
}
ul.fix-banner li.b-fukuyama a {
	background: linear-gradient(135deg, var(--color-pink) 0%, var(--color-pink-dark) 100%);
}
ul.fix-banner li.b-campaign a {
	background: linear-gradient(135deg, var(--color-green) 0%, var(--color-green-dark) 100%);
}

/* ------------------------ スマートフォン ------------------------ */
@media only screen and (max-width:768px){
	
	ul.fix-banner li a {
		font-size: 13px;
		padding: 7px;
	}
	
	ul.fix-banner li a .material-icons {
		font-size: 20px;
		margin-left: -5px;
		margin-right: 2px;
	}

}

/* 尾道タクシー連絡モーダル */
.of-modal-open {
	/* overflow: hidden; */
}
.of-modal {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 3000;
	opacity: 0;
	visibility: hidden;
	transition: .3s;
}
.of-modal.is-open {
	opacity: 1;
	visibility: visible;
}
.of-modal__overlay {
	position: absolute;
	inset:0;
	background: rgba(0,0,0,.55);
	cursor: pointer;
	animation: fadeIn .3s;
}
.of-modal__content {
	position: relative;
	z-index: 1;
	width: min(640px,90%);
	max-height: 80vh;
	overflow-y: auto;
	background: #fff;
	padding: 40px 35px 45px;
	border-radius: 24px;
	box-shadow: 0 10px 35px rgba(0,0,0,.25);
	animation: scaleIn .35s cubic-bezier(.4,0,.2,1);
}
.of-modal__title {
	font-size: 22px;
	font-weight: 700;
	text-align: center;
	margin: 0 0 25px;
	color: var(--color-blue);
}
#fukuyama .of-modal__title {
	color: var(--color-pink);
}
.of-modal__close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: none;
	background: var(--color-blue);
	color: #fff;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(0,0,0,.2);
	transition: .25s;
}
.of-modal__close:hover {
	transform: scale(1.05);
}
.of-modal__telList {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px 20px;
}
.of-modal__telList li {
	margin: 0;
}
.of-modal__telList a.button02.blue {
	min-height: auto;
	font-size: 16px;
	padding: 18px 15px;
	line-height: 1.4;
}

#contact-onomichi {
	cursor: pointer;
}


/* ------------------------ スマートフォン ------------------------ */
@media only screen and (max-width:768px){

	.of-modal__content {
		padding: 32px 20px 40px;
	}
	.of-modal__title {
		font-size: 19px;
		margin-bottom: 20px;
	}
	.of-modal__telList {
		grid-template-columns: 1fr;
		gap: 14px;
	}
	.of-modal__telList a.button02.blue {
		font-size: 15px;
		padding: 15px 12px;
	}
	.of-modal__close {
		width: 40px;
		height: 40px;
		font-size: 24px;
	}

}
@keyframes scaleIn {
	from {
		opacity:0;
		transform: scale(.92);
	}
	to {
		opacity:1;
		transform: scale(1);
	}
}