@charset "utf-8";
/*==================================================
  ヘッダ
--------------------------------------------------*/
#header {
	position: relative;
	height: 60px;
	padding: 0;
	background: var(--color-primary);
	text-align: left;
}
/* タイトル */
#header h1.title {
	height: 100%;
	/* 縦方向中央揃え */
	display: flex;
	align-items: center;
}
#header h1.title span {
	color: #fff;
	display: inline-block;
	background:  var(--color-orange);
	padding: 5px 30px 15px 10px;
	height: 60px;
	font-size: 33px;
	margin-right: 15px;
	clip-path: polygon(0 0, 100% 0%, 90% 100%, 0% 100%);
}
#header h1.title img {
	height: 50px;
	width: auto;
}
/* お問い合わせ */
#header .contact a {
	display: block;
}
#header .contact a img {
	vertical-align: middle;
}
@media print, screen and (min-width: 769px){ /* PCのみ */
	#header .contact {
		margin-right: 20px;
		margin-left: 30px;
		line-height: 1.2;
	}
	#header .contact .btn a {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 38px;
		height: 38px;
		background: var(--color-secondary);
		border-radius: 50%;
	}
	#header .contact .btn a img {
		width: 18px;
	}
	#header .contact .tel {
		position: fixed;
		right: 0;
		top: calc(50vh - 195px);
		z-index: 99;
		border: 3px solid var(--color-secondary);
		border-right: none;
		background: var(--color-orange);
		height: 389px;
		width: 84px;
		padding-top: 50px;
		padding-left: 20px;
		border-radius: 20px 0 0 20px;
	}
	#header .contact .tel a {
		color: #fff;
		writing-mode: vertical-rl;
		text-orientation: upright;
		display: block;
		
	}
	#header .contact .tel a .maru {
		position: absolute;
		top: 10px;
		right: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 30px;
		height: 30px;
		background: var(--color-secondary);
		border-radius: 50%;
	}
	#header .contact .tel a .maru img {
		width: 18px;
	}
	#header .contact .tel a .no {
		font-size: 27px;
	}
	#header .contact .tel a .no .latin {
		text-orientation: sideways;
		position: relative;
		left: 3px;
	}
	#header .contact .tel a .txt {
		color: #fff;
	}
	#header .contact .tel a .txt .latin {
	}
}
@media only screen and (max-width: 768px) {  /* タブレット以下 */
	/* ベースカラー*/
	#switchBtnArea #switchBtn { background: var(--color-primary); }
	#header .contact .tel a { background: var(--color-secondary); }
	#header .contact .btn a { background: var(--color-secondary); }

	/* ヘッダ */
	#header {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 50px;
		padding: 0 46px 0 0;
		background: var(--color-primary);
		z-index: 9997;
	}
	#header h1.title {
		width: calc(100% - 120px);
		height: 100%;
		padding: 10px 0;
	}
	#header h1.title span {
		height: 50px;
		font-size: 25px;
		padding: 5px 20px 15px 5px;
		margin-right: 5px;
	}
	#header h1.title img {
		height: 38px;
	}
	/* お問い合わせ */
	#header .contact .tel {
		margin-right: 1px;
	}
	#header .contact .tel a,
	#header .contact .btn a {
		width: 46px;
		height: 50px;
		padding: 0 10px;
		/* 縦方向中央揃え */
		display: flex;
		align-items: center;
		justify-content: center;
	}
	#header .contact .tel .no, #header .contact .tel .txt {
		display: none;
	}
}
@media only screen and (max-width: 640px){ /* スマホ */
	#header h1.title span {
		height: 26px;
		font-size: 16px;
		margin-right: 0;
		display: inline-block;
		padding: 0px 15px 2px 5px;
		margin-bottom: 2px;
	}
	#header h1.title img {
		height: 25px;
		display: block;
		margin-left: 5px;
	}
}
/*--------------------------------------------------
  メニュー
--------------------------------------------------*/
#menu {
	margin-left: auto;
}
#menu ul {
	display: flex;
	column-gap: 30px;
}
#menu li a {
	display: block;
	color: #fff;
	font-size: 16px;
	text-decoration: none;
}
#menu li.on a,
#menu li a:hover {
	color: var(--color-secondary);
	filter:alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
}
#menu ul li.dsp_tbs {
	display: none;
}
@media only screen and (max-width: 1290px) {
	#menu ul {
		column-gap: 15px;
	}
	#menu li a {
		font-size: 14px;
	}
}
/*--------------------------------------------------
  ページタイトル
--------------------------------------------------*/
#page_title {
	overflow: hidden;
	position: relative;
	text-align: center;
}
#page_title p {
	text-align: center;
}
#sub_ttl img {
	width: 100%;
	object-fit: cover;
}
#sub_ttl span {
	display: inline-block;
	font-weight : bold;
	font-size : 50px;
	color : #fff;
	text-shadow: rgb(24, 99, 40) 6px 0px 0px, rgb(24, 99, 40) 5.91686px 0.995377px 0px, rgb(24, 99, 40) 5.66974px 1.96317px 0px, rgb(24, 99, 40) 5.2655px 2.87655px 0px, rgb(24, 99, 40) 4.71532px 3.71022px 0px, rgb(24, 99, 40) 4.03447px 4.44106px 0px, rgb(24, 99, 40) 3.24181px 5.04883px 0px, rgb(24, 99, 40) 2.35931px 5.51667px 0px, rgb(24, 99, 40) 1.41143px 5.83163px 0px, rgb(24, 99, 40) 0.424423px 5.98497px 0px, rgb(24, 99, 40) -0.574341px 5.97245px 0px, rgb(24, 99, 40) -1.55719px 5.79441px 0px, rgb(24, 99, 40) -2.49688px 5.45578px 0px, rgb(24, 99, 40) -3.36738px 4.96596px 0px, rgb(24, 99, 40) -4.14455px 4.33852px 0px, rgb(24, 99, 40) -4.80686px 3.59083px 0px, rgb(24, 99, 40) -5.33596px 2.74364px 0px, rgb(24, 99, 40) -5.71718px 1.8204px 0px, rgb(24, 99, 40) -5.93995px 0.84672px 0px, rgb(24, 99, 40) -5.99811px -0.150428px 0px, rgb(24, 99, 40) -5.89004px -1.14341px 0px, rgb(24, 99, 40) -5.61874px -2.1047px 0px, rgb(24, 99, 40) -5.19172px -3.00766px 0px, rgb(24, 99, 40) -4.62082px -3.82727px 0px, rgb(24, 99, 40) -3.92186px -4.54081px 0px, rgb(24, 99, 40) -3.11421px -5.12852px 0px, rgb(24, 99, 40) -2.22026px -5.57409px 0px, rgb(24, 99, 40) -1.26477px -5.86518px 0px, rgb(24, 99, 40) -0.274238px -5.99373px 0px, rgb(24, 99, 40) 0.723898px -5.95617px 0px, rgb(24, 99, 40) 1.70197px -5.75355px 0px, rgb(24, 99, 40) 2.63288px -5.39147px 0px, rgb(24, 99, 40) 3.49082px -4.87998px 0px, rgb(24, 99, 40) 4.25202px -4.23324px 0px, rgb(24, 99, 40) 4.89538px -3.46919px 0px, rgb(24, 99, 40) 5.40307px -2.60899px 0px, rgb(24, 99, 40) 5.76102px -1.67649px 0px, rgb(24, 99, 40) 5.95932px -0.697531px 0px;
	background: linear-gradient(90deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.74) 12%, rgba(255, 255, 255, 0.74) 89%, rgba(255, 255, 255, 0) 100%);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	padding: 10px 50px 15px;
}
@media only screen and (max-width: 768px) {
	#sub_ttl img {
		height: 150px;
	}
	#sub_ttl span {
		font-size: 25px;
		white-space: nowrap;
		text-shadow: rgb(24, 99, 40) 3px 0px 0px, rgb(24, 99, 40) 2.83487px 0.981584px 0px, rgb(24, 99, 40) 2.35766px 1.85511px 0px, rgb(24, 99, 40) 1.62091px 2.52441px 0px, rgb(24, 99, 40) 0.705713px 2.91581px 0px, rgb(24, 99, 40) -0.287171px 2.98622px 0px, rgb(24, 99, 40) -1.24844px 2.72789px 0px, rgb(24, 99, 40) -2.07227px 2.16926px 0px, rgb(24, 99, 40) -2.66798px 1.37182px 0px, rgb(24, 99, 40) -2.96998px 0.42336px 0px, rgb(24, 99, 40) -2.94502px -0.571704px 0px, rgb(24, 99, 40) -2.59586px -1.50383px 0px, rgb(24, 99, 40) -1.96093px -2.27041px 0px, rgb(24, 99, 40) -1.11013px -2.78704px 0px, rgb(24, 99, 40) -0.137119px -2.99686px 0px, rgb(24, 99, 40) 0.850987px -2.87677px 0px, rgb(24, 99, 40) 1.74541px -2.43999px 0px, rgb(24, 99, 40) 2.44769px -1.73459px 0px, rgb(24, 99, 40) 2.88051px -0.838247px 0px;
	}
}
@media only screen and (max-width: 640px) {
	#sub_ttl img {
		height: 120px;
	}
	#sub_ttl span {
		font-size: 20px;
	}
}
/*--------------------------------------------------
  コンテナ
--------------------------------------------------*/
#wrap {
	overflow: hidden;
	transition: all 0.3s ease-in-out;
}
#container {
	text-align: left;
	line-height: 1.8;
}
#container p {
	margin-bottom: 1em;
}
#container h3.line {
	font-size: 50px;
	color: var(--color-primary);
	position: relative;
	text-align: center;
	padding-bottom: 20px;
	margin-bottom: 70px;
}
#container h3.line::before, #container h3.line::after {
	content: "";
	width: 300px;
	height: 3px;
	background: var(--color-secondary);
	display: block;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
}
#container h3.line::after {
	width: 50px;
	background: var(--color-primary);
}
#container h3.sub {
	position: relative;
	margin-bottom: 60px;
	font-size: 30px;
	font-weight: 500;
	text-align: center;
	color: var(--color-primary);
}
#container h3.sub::after {
	display: block;
	width: 50px;
	height: 2px;
	margin: 15px auto 0;
	background: var(--color-secondary);
	content: "";
}
#container h3.sub02 {
	position: relative;
	margin-bottom: 60px;
	font-weight : bold;
	font-size : 50px;
	text-align: center;
	color: var(--color-primary);
}
#container h3.sub02 span {
	background: #fff;
	padding: 0 50px 7px;
	border: 3px solid #186328;
	border-radius: 30px;
}
#container h3.sub02::before {
	content: "";
	width: 100%;
	background: #186328;
	height: 3px;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	z-index: -1;
}
#container h4.sub {
	font-weight : bold;
	font-size : 28px;
	color : #186328;
	margin-bottom: 20px;
	padding-bottom: 15px;
	position: relative;
}
#container h4.sub::before {
	content: "";
	background: #f3c23d;
	width: 100%;
	height: 5px;
	position: absolute;
	bottom: 0;
	left: 0;
}
#container h4.sub02 {
	font-weight : bold;
	font-size : 30px;
	color : #fff;
	position: relative;
	background: #186328;
	width: 100%;
	min-height: 75px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 80px;
}
#container h4.sub02::before {
	content: "";
	background: #186328;
	clip-path: polygon(50% 100%, 0 0, 100% 0);
	width: 86px;
	height: 24px;
	position: absolute;
	bottom: -23px;
	left: calc(50% - 43px);
}
@media print, screen and (min-width: 769px){ /* PCのみ */
	#wrap {
		min-width: 1150px;
	}
}
@media only screen and (max-width: 768px) {  /* タブレット以下 */
	#container {
		padding-top: 50px;
	}
	#container h3.line {
		font-size: 25px;
		margin-bottom: 40px;
	}
	#container h3.line::before {
		width: 200px;
	}
	#container h3.line::after {
		width: 30px;
	}
	#container h3.sub {
		margin-bottom: 30px;
		font-size: 25px;
	}
	#container h3.sub02 {
		font-size: 25px;
	}
	#container h3.sub02 span {
		padding: 0 20px 5px;
		border-radius: 15px;
	}
	#container h4.sub {
		font-size: 125%;
	}
	#container h4.sub02 {
		font-size: 125%;
		min-height: 50px;
		margin-bottom: 50px;
	}
	#container h4.sub02::before {
		width: 60px;
		left: calc(50% - 30px);
	}
	#main, #navi {
		clear: both;
		padding-bottom: 30px;
	}
}
@media only screen and (max-width: 640px){ /* スマホ */
	#wrap, #footer {
		min-width: 320px;
	}
	#container h3.line {
		font-size: 20px;
	}
	#container h3.sub {
		margin-bottom: 20px;
		font-size: 20px;
	}
	#container h3.sub02 {
		font-size: 20px;
	}
	#container h3.sub02 span {
		border-radius: 15px;
	}
}
/*--------------------------------------------------
  メイン
--------------------------------------------------*/
.main {
	width: 1150px;
	max-width: 100%;
	margin: auto;
	padding: 0 25px;
}
@media only screen and (max-width: 768px) {  /* タブレット以下 */
	.main {
		padding-left: 20px;
		padding-right: 20px;
	}
}
/*--------------------------------------------------
  フッタ
--------------------------------------------------*/
#footer {
	clear: both;
	width: 100%;
	margin-top: auto;
	background: url("../img/bg-footer.jpg?1020") no-repeat center /cover;
	font-size: 90%;
	color: #fff;
	line-height: 1.6;
}
#footer .main {
	padding: 56px 0;
}
#footer p {
	text-align: center;
}
#footer p.ttl {
	margin-bottom: 30px;
}
/* お問い合わせ */
#footer .contact {
	width: 800px;
	max-width: 100%;
	margin: 30px auto 0;
}
#footer .contact li a {
	height: 100%;
	min-height: 60px;
	padding: 10px;
	background: var(--color-primary);
	box-shadow: 2px 2px 0 rgba(0,0,0,0.2);
	color: #FFF;
	font-size: 20px;
	line-height: 1.4;
	/* 縦方向中央揃え */
	display: flex;
	align-items: center;
	justify-content: center;
}
#footer .contact li a img {
	width: 30px;
	margin-right: 10px;
	vertical-align: middle;
}
#footer .contact  li.tel a {
	font-size: 32px;
}
#footer .contact  li.btn a {
	font-size: 16px;
}
#footer .contact  li.btn img {
	width: 20px;
}
/* リンク */
#footer .link ul {
	padding: 14px 0;
	border-top: 1px solid #FFF;
	border-bottom: 1px solid #FFF;
}
#footer .link ul li {
	display: inline;
	margin-right: 20px;
	padding-left: 20px;
	list-style: none;
}
#footer .link ul li a {
	color: #FFF;
	text-decoration: none;
}
#footer .link ul li a:hover {
	text-decoration: underline;
}
/* コピーライト */
#copyright {
	padding: 15px 0;
	color: #8bb193;
	font-size: 12px;
}
@media print, screen and (min-width: 641px){ /* PC・タブレット */
	#footer .contact li {
		width: 48%;
	}
}
@media only screen and (max-width: 768px) {  /* タブレット以下 */
	#footer .main {
		padding: 30px 0 10px;
	}
	#footer p.ttl {
		margin-bottom: 0;
	}
	#copyright {
		padding: 10px 0;
		font-size: 10px;
	}
}
@media only screen and (max-width: 640px){ /* スマホ */
	#footer p.ttl {
		margin-bottom: 10px;
	}
	#footer p.ttl img {
		width: 250px;
	}
	#copyright {
		padding: 5px 0;
	}
}
/*--------------------------------------------------
  共通
--------------------------------------------------*/
/* inview */
.iv { opacity: 0; }
.btn01 {
	text-align: center;
}
.btn01 a {
	text-align: left;
	position: relative;
	width: 300px;
	line-height: 52px;
	background: var(--color-primary);
	color: #fff;
	padding-left: 30px;
	padding-bottom: 2px;
	display: inline-block;
	border-radius: 30px;
	box-shadow: 2px 2px 0 rgba(0,0,0,0.2);
	font-size: 16px;
	border: 3px solid var(--color-primary);
}
.btn01 a:hover {
	filter:alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
	background: #fff;
	color: var(--color-primary);
}
.btn01 a::after {
	content: url("../img/arrow-w.png");
	background: var(--color-secondary);
	width: 24px;
	height: 24px;
	border-radius: 50%;
	position: absolute;
	top: calc(50% - 12px);
	right: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
}
/* 枠のマージン・パディング */
.mt { margin-top: 100px; }
.mb { margin-bottom: 100px; }
.pt { padding-top: 100px; }
.pb { padding-bottom: 100px; }
@media only screen and (max-width: 768px) {  /* タブレット以下 */
	.btn01 a {
		line-height: 42px;
		width: 280px;
	}
	.mb { margin-bottom: 50px; }
	.pt { padding-top: 50px; }
	.pb { padding-bottom: 50px; }
}
@media only screen and (max-width: 640px){ /* スマホ */
	.btn01 a {
		width: 260px;
	}
	.mb { margin-bottom: 40px; }
	.pt { padding-top: 40px; }
	.pb { padding-bottom: 40px; }
}
/*------------------------------------------------*/
/* パンくずリスト */
#page_navi {
	margin-bottom: 50px;
	padding-top: 30px;
	color: var(--color-thin);
	font-size: 12px;
	line-height: 1;
	/* フレックス */
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
}
#page_navi li+li:before {
	content: ">";
	margin-right: 0.5em;
}
#page_navi a {
	color: var(--color-thin);
	text-decoration: none;
}
@media only screen and (max-width: 768px) {  /* タブレット以下 */
	#page_navi {
		margin-bottom: 30px;
		padding-top: 15px;
		font-size: 11px;
	}
}
/*------------------------------------------------*/
/* テーブル */
.tbl {
	width: 100%;
	background: #fff;
}
.tbl th,
.tbl td {
	padding: 14px;
	border: 1px solid var(--color-tbl-border);
}
.tbl th {
	white-space: nowrap;
	background: var(--color-tbl-th);
}
@media only screen and (max-width: 640px){ /* スマホ */
	.tbl {
		border-bottom: 1px solid var(--color-tbl-border);
	}
	.tbl th,
	.tbl td {
		display: block;
		width: auto;
		padding: 10px;
		border-bottom: none;
	}
}
/*------------------------------------------------*/
/* 注意書き */
p.attention {
	margin-left: 1em;
	text-indent: -1em;
}
/*------------------------------------------------*/
/* 横100％ */
.w100 {
	width: 100vw;
	margin-left: calc(((100vw - 100%) / 2) * -1);
	margin-right: calc(((100vw - 100%) / 2) * -1);
}
/*------------------------------------------------*/
/* 横100％背景 */
.bg_wide {
	position: relative;
}
.bg_wide::before,
.bg_wide.bg_after::after {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 100vw;
	height: 100%;
	margin-left: calc(((100vw - 100%) / 2) * -1);
	margin-right: calc(((100vw - 100%) / 2) * -1);
	content: "";
	z-index: -1;
}
@media only screen and (max-width: 1150px) {
	.w100,
	.bg_wide::before,
	.bg_wide.bg_after::after {
		width: calc(100% + 50px);
		margin-left: -25px;
		margin-right: 0;
	}
}
@media only screen and (max-width: 640px){ /* スマホ */
	.w100,
	.bg_wide::before,
	.bg_wide.bg_after::after {
		width: calc(100% + 40px);
		margin-left: -20px;
		margin-right: 0;
	}
}
/*------------------------------------------------*/
/* フレックスボックス */
.box_flex_sp {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.box_flex_sp.rev { flex-direction: row-reverse; }
.box_flex_sp.vcen { align-items: center; }
.box_flex_sp.vtop { align-items: flex-start; }
.box_flex_sp.htop { justify-content: flex-start; }
.box_flex_sp.hcen { justify-content: center; }
@media print, screen and (min-width: 641px){ /* PC用 */
	.box_flex {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.box_flex.rev { flex-direction: row-reverse; }
	.box_flex.vcen { align-items: center; }
	.box_flex.vtop { align-items: flex-start; }
	.box_flex.htop { justify-content: flex-start; }
	.box_flex.hcen { justify-content: center; }
}
/*------------------------------------------------*/
/* 箱のパディング */
.box_pad {
	padding: 20px;
}
@media print, screen and (min-width: 641px){ /* PC用 */
	.box_pad { padding: 30px; }
}