@import url("fontawesome-all.min.css");
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+Antique&display=swap');

html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	scroll-behavior: smooth;}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

section {
	padding-bottom: 2em;
	/*margin-top: 2em;*/
}

/* ヘッダ固定化のアンカーずれ調整 */
section, h2, h3, h4 {
  scroll-margin-top: 100px;
}


body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

	blockquote:before, blockquote:after, q:before, q:after {
		content: '';
		content: none;
	}



body {
	-webkit-text-size-adjust: none;
}

mark {
	background-color: transparent;
	color: inherit;
}

input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

input, select, textarea {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
}

input[type="checkbox"] {
	-moz-appearance: auto;
	-webkit-appearance: auto;
	-ms-appearance: auto;
	appearance: auto;
}

#contact select {
	appearance: auto;
}

/* デフォルト */

	html {
		box-sizing: border-box;
	}

	*, *:before, *:after {
		box-sizing: inherit;
	}

	body {
		background: #febc36;
	}

		body.is-preload *, body.is-preload *:before, body.is-preload *:after {
			-moz-animation: none !important;F
			-webkit-animation: none !important;
			-ms-animation: none !important;
			animation: none !important;
			-moz-transition: none !important;
			-webkit-transition: none !important;
			-ms-transition: none !important;
			transition: none !important;
		}

	body, input, select, textarea {
		color: #474747;
		font-family: 'Zen Kaku Gothic Antique', sans-serif;
		font-size: 14pt;
		font-weight: 300;
		line-height: 1.65em;
	}

	a {
		-moz-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, opacity 0.2s ease-in-out;
		-webkit-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, opacity 0.2s ease-in-out;
		-ms-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, opacity 0.2s ease-in-out;
		transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, opacity 0.2s ease-in-out;
		color: #0d57ff;
		text-decoration: none;
		/*border-bottom: dotted 1px;*/
	}
		/* onMouse時 */
		a:hover {
			color: #0d57ff;
			background: rgba(250, 250, 250, 0.75);
			border-bottom-color: transparent;
		}

	strong, b {
		font-weight: 600;
		/*background: linear-gradient(transparent 50%, #92e2ffb0 80%);*/
	}

	em, i {
		font-style: italic;
	}

	p, ul, ol, dl, blockquote {
		margin: 1em 1em 1em 1em;
	}
	
	/* ～766まではmargin調整 */
	@media screen and (max-width: 766px) {
		p {
			margin: 1em 1em 1em 1em;
		}
	}

	h1, h2 {
		color: inherit;
		font-size: 1.3em;
		font-weight: 600;
		line-height: 1.75em;
		margin-bottom: 1em;
	}
	
	h3, h4, h5, h6 {
		color: inherit;
		font-size: 1em;
		font-weight: 600;
		line-height: 1.75em;
		margin-bottom: 1em;
	}
		
		/* 見出しa要素の装飾無し */
		h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
			color: inherit;
			text-decoration: none;
		}

		h1 em, h2 em, h3 em, h4 em, h5 em, h6 em {
			font-style: normal;
			font-weight: 300;
		}

	h2 {
		font-size: 1.35em;
		color:navy;
	}

	h3 {
		font-size: 1.3em;
	}
	
	h3 {
		padding: 0.4em 0.5em;
		color: #494949;
		background: #f4f4f4;
		border-left: solid 5px #87c609;
		border-bottom: solid 3px #d7d7d7;
	}

	sub {
		font-size: 0.8em;
		position: relative;
		top: 0.5em;
	}

	sup {
		font-size: 0.8em;
		position: relative;
		top: -0.5em;
	}

	hr {
		border-top: solid 1px #e0e0e0;
		border: 0;
		margin-bottom: 1.5em;
	}

	blockquote {
		border-left: solid 0.5em #e0e0e0;
		font-style: italic;
		padding: 1em 0 1em 2em;
	}
	
	.page-contents {
		width:85%;
		max-width:1280px;
		margin: 0 auto;
		text-align: center;
		line-height:1.5em;
	}
	.page-contents .flex-box{
		justify-content: center;
	}
	
	.page-contents div {
		margin-bottom:2em;
	}
	/* 画面幅でwidthを調整 */
	@media screen and (min-width: 766px) {
		
		.page-contents {
			line-height:2em;
		}
		.page-contents .flex-box{
			justify-content: left;
		}
	}
	.left {
		text-align: left !important;
	}
	
	.txt-img p{
			text-align: left;
			width: 90%;
	}
	.txt-img img{
			max-width: 90%;
			max-height:600px;
	}
	/* 画面幅でwidthを調整 */
	@media screen and (min-width: 766px) {
		.txt-img p{
			text-align: left;
			width: 60%;
		}
		.txt-img img{
			max-width: 39%;
			width: auto;
		}
	}
	.txt-img h2{
		text-align: left;
		font-size:1.2em;
	}
	
	/* 766～はbr-sp(スマホ改行)の無効化 */
	@media screen and (min-width: 766px) {
		.br-sp {
			display: none;
		}
	}
	
	/* ～766はbr-pc(PC改行)の無効化 */
	@media screen and (max-width: 766px) {
		.br-pc {
			display: none;
		}
	}
	
	/* ～766はbr-hiddenの項目削除 */
	@media screen and (max-width: 766px) {
		.sp-hidden {
			display: none !important;
		}
	}
	
	/* フレックス（親） */
	.flex-box {
	    display: flex;
	    align-items: stretch;
	    justify-content: center;
	    flex-wrap: wrap;
	    padding:  5px;
    	margin: 0 auto;
	}
	
		/* ～980であればwrapする(複数行にする) */
		@media screen and (max-width: 980px) {
			.flex-box {
				flex-wrap: wrap;
			}
		}
	
	/* フレックス（子） */
	.flex-item {
	    padding: 5px;
	    margin:  1px;
	    border-radius: 5px;
	}
	 
		.flex-item:nth-child(1) {
		   /*background-color:  #fff; */
		}
		 
		.flex-item:nth-child(2) {
		    /*background-color:  #fff; */
		}
		 
		.flex-item:nth-child(3) {
		   /*background-color:  #fff; */
		}
		 
		.flex-item:nth-child(4) {
		    /*background-color:  #fff; */
		}
		
	/* コンテナはディスプレイサイズで微調整 */
	.container {
		margin: 0 auto;
		max-width: 100%;
		width: 1400px;
	}

		@media screen and (max-width: 1680px) {
			.container {
				width: 1200px;
			}
		}

		@media screen and (max-width: 1280px) {
			.container {
				width: 960px;
			}
		}

		@media screen and (max-width: 980px) {
			.container {
				width: 95%;
			}
		}

		@media screen and (max-width: 840px) {
			.container {
				width: 95%;
			}
		}

		@media screen and (max-width: 736px) {
			.container {
				width: 90%;
			}
		}

		@media screen and (max-width: 480px) {
			.container {
				width: 100%;
			}
		}
		
	
	#page-wrapper {
		background: linear-gradient(#ffb300 0%, #FFFFFF 50%);
	}
		
	/* セクション */
	
	/* トップ画像欄 */
	#topmessage {
	    position: relative;
	    background-size: cover;
	    margin-bottom: 1em;
	}
	
	#topmessage .message{
		text-align: right;
	    font-size: clamp(24px, 4vw, 36px);
	    text-shadow: 3px 2px 4px #000;
	    color: #c8ffb4;
	    width:100%
	}
	
	#topmessage .messagetext {
		position:absolute;
		z-index:99;
		top:50%;
		right:0;
	}
	
	#topmessage .btnlist {
		position: absolute;
		left: -30px;
		z-index:1;
	}
	
	#topmessage .btn-wrap a{
		min-width: 250px;
		display: block;
	}
	
	#topmessage .btn-wrap {
		display: block;
		transform: rotate(-5deg);
	}
	
	#topmessage img {
		width: 100%;
		height:100%;
		display: block;
	}

	
	@media screen and (max-width: 1000px) {
		#topmessage .flex-box {
			flex-direction: column; /* 縦並びにする */
		}

		#topmessage .btnlist {
			order: 2;
			position: static;
		}

		#topmessage .message {
			position: static;
			order: 1;
		}
		
		#topmessage .messagetext {
			top: 20%;
		}
		
		#topmessage .btnlist {
			position: static;
			margin-top: 1em;
		}
		
		#topmessage .btn-wrap {
			display: flex;
			flex-wrap: wrap;
			transform: rotate(0deg);
			justify-content: space-evenly;
		}
		
		#topmessage .btn-wrap a {
			min-width: 180px;
			margin:0.2em;
			font-size: small;
		}
		
		#topmessage img {
			width: 100%;
			max-height:400px;
		}

	}

	
	/* トップメニュー欄 */
	#topmenu {
		text-align: center;
		padding:0;
		margin: 0 auto;
		margin-bottom: 1em;
	}
	
		/* トップメニューフレックスアイテムは横幅設定 */
		#topmenu img {
			display: block;
    		width: 60px;
    		position: absolute;
    		right: 4px;
    		top: -18px;
		}
		
		@media screen and (max-width: 1000px) {
			#topmenu img {
	    		width: 45px;
			}
		}
	
	/* トピック欄 */
	#topic {
		text-align: center;
		padding:0.3em;
	}
	
		/* トピック欄新着 */
		#topic .newtopic {
			text-align: center;
			background-color: rgba(255,255,255,0);
		}
		
		
	/* 獣医師の仕事欄 */
	#work{
		
	}
	#work i{
		color: #333;
  background: linear-gradient(transparent 60%, #fff59d 60%);
	}
	
	#work .g,
	#work .p,
	#work .y   {
	  position: relative;
	  padding-left: 25px;
	}

	#work .g:before,
	#work .p:before,
	#work .y:before {
	  position: absolute;
	  content: '';
	  bottom: -3px;
	  left: 0;
	  width: 0;
	  height: 0;
	  border: none;
	  border-left: solid 15px transparent;
	}
	
	#work .g:after,
	#work .p:after,
	#work .y:after {
	  position: absolute;
	  content: '';
	  bottom: -3px;
	  left: 10px;
	  width: 100%;
	}
	
	#work .g:before {
	  border-bottom: solid 15px #b4ff9d;
	}
	
	#work .g:after {
	  border-bottom: solid 3px #b4ff9d;
	}
	
	#work .p:before {
	  border-bottom: solid 15px #ffb09d;
	}
	
	#work .p:after {
	  border-bottom: solid 3px #ffb09d;
	}
	
	#work .y:before {
	  border-bottom: solid 15px #ffea9d;
	}
	
	#work .y:after {
	  border-bottom: solid 3px #ffea9d;
	}
}

	/* 会社概要欄 */
	#company {
		/*background: url(../../images/top2.jpg) no-repeat left, bottom;*/
		text-align: center;
		background-size: cover;
		/*background-color: rgba(255,255,255,0.5);*/
    	background-blend-mode: lighten;
    	padding:2em 0;
	}
	/* 病院案内欄 */
	#byoin-annnai {
		text-align: center;
	}
	
		
		/* 病院案内欄フレックスアイテムは横幅設定 */
		#byoin-annnai .flex-item {
			width: 10%;
			min-width: 180px;
		}
		
		/* 病院案内欄フレックスアイテムないリンクはBlock */
		#byoin-annnai .flex-item a {
			display: block;
			position: relative;
			color: #ffffff;
		}
		
		/* 病院案内欄フレックスアイテムは▽表示 */
		#byoin-annnai .flex-item a:after {
			content: "";
			width: 6px;
			height: 6px;
			border: 0px;
			border-right: solid 1px #1a469b;
			border-bottom: solid 1px #1a469b;
			transform: rotate(45deg);
			-webkit-transform: rotate(45deg);
			position: absolute;
			top: 40%;
			right: 1rem;
		}
		
		/* ～980の病院案内欄フレックスアイテムは単一表示になるので%設定 */
		@media screen and (max-width: 980px) {
			#byoin-annnai .flex-item {
			width: 90%;
			}
		}
	
		/* 病院案内欄span要素 */
		#byoin-annnai span {
			margin-top: 0.8em;
			font-size: 0.8em;
			text-align:left;
			display: block;
		}
		
		/* 病院案内欄div要素 */
		#byoin-annnai div {
			margin-bottom: 0;
		}
		
		/* 説明用フレックスアイテムは横幅設定 */
		.wrap-ex-flex .flex-box {
			justify-content: space-around;
			margin-bottom:0 !important;
		}
		
		/* 説明用フレックスアイテムは横幅設定 */
		.wrap-ex-flex .flex-item {
			width: 30%;
			min-width: 250px;
			margin-bottom:0 !important;
		}
		
		/* ～766の説明用フレックスアイテムは単一表示になるので%設定 */
		@media screen and (max-width: 766px) {
			.wrap-ex-flex .flex-item {
				width: 90%;
			}
		}
		
	
	/* 採用情報欄 */
	#recruit {
		background: url(../../images/top3.jpg) no-repeat center;
		text-align: center;
		background-size: cover;
		background-color: rgba(255,255,255,0.5);
    	background-blend-mode: lighten;
		color: #fff;
		padding:2em 0;
	}
		/* 採用情報欄見出し、p要素 */
		#recruit h1, #recruit p {
			text-shadow: 1px 1px 6px black;
		}


	/* ページタイトル欄 */
	#page-title {
		background: url(../../images/bill.jpg) no-repeat left, bottom;
		text-align: center;
		background-size: cover;
		background-color: rgba(255,255,255,0.5);
    	background-blend-mode: lighten;
    	margin-bottom:1em;
    	padding-top:1.5em;
	}
		#page-title-jig {
			background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
						url(../../images/tit.png) no-repeat center center;
			text-align: center;
			background-size: cover;
	    	margin-bottom:1em;
	    	padding-top:1.5em;
		}

	/* バナーリンク欄 */
	#bunner_link {
		padding-bottom: 0;
		text-align:center;
		margin:30px;
	}
	
		#bunner_link img{
			width:100%;
			
		}
	
	/* フッター欄 */
	#footer {
		padding-bottom: 0;
		padding-top:0.5em;
		background: url(../../images/footer.png) no-repeat left, bottom;
		background-size:cover;
		/*background: linear-gradient(#fff 0%, #ffb300 50%);*/
	}
	/* フッター欄メニュー一覧 */
	#footer .menulist {
		background-color: rgba(255,255,255,0);
	}
		/* 会社ロゴ */
		#footer img{
			width: 30%;
			max-width:300px;
		}
		
	/* 採用ページ用フレックス設定 */
	.row-flex {
		display: flex;
		flex-wrap: wrap;
		box-sizing: border-box;
		align-items: stretch;
		justify-content: center;
	}
	
		/* pタグ h3タグ調整 */
		.row-flex p, .row-flex h3{
			margin: 0em 0em 1em 0.5em;
		}

		.row-flex > .col-min {
			width: 50%;
		}

		/* ～840までならrow-flexから示すclassを840の方へ指定 */
		@media screen and (max-width: 840px) {
			.row-flex > .col-840 {
				width: 100%;
			}
		}
		
	/* 会社ページ */
	#company-main {
		text-align: center;
	}
	#gaiyou {
		background: url(../../images/gaiyo.jpg) no-repeat center, center;
		background-size: cover;
		background-color: rgba(255,255,255,0.7);
    	background-blend-mode: lighten;
    	padding-top:2em;
	}
	#vision {
		//background: url(../../images/vision.png) no-repeat left, bottom;
		background-size: cover;
		background-color: rgba(255,255,255,0.9);
    	background-blend-mode: overlay;
	}
	/* 代表挨拶 */
	#message {
		/*text-align: center;*/
	}
	/* 採用関係ページ */
	#recruit-main {
		text-align: center;
	}
	/* ヘッダ */
	header p {
		color: #999;
		font-size: 1.25em;
		position: relative;
		margin-top: -1.25em;
		margin-bottom: 2.25em;
	}

	header.major {
		text-align: center;
		margin: 0 0 2em 0;
	}

		header.major h2 {
			font-size: 2.25em;
		}

		header.major p {
			position: relative;
			border-top: solid 1px #e0e0e0;
			padding: 1em 0 0 0;
			margin: 0;
			top: -1em;
			font-size: 1.5em;
			letter-spacing: -0.025em;
		}
		
	/* フォーム（WP） */

	input[type="text"],
	input[type="tel"],
	input[type="password"],
	input[type="email"],
	select,
	textarea {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		-moz-transition: border-color 0.2s ease-in-out;
		-webkit-transition: border-color 0.2s ease-in-out;
		-ms-transition: border-color 0.2s ease-in-out;
		transition: border-color 0.2s ease-in-out;
		background: #fff;
		border: solid 1px #e0e0e0;
		border-radius: 5px;
		color: inherit;
		/*display: block;*/
		outline: 0;
		text-decoration: none;
	}

		input[type="text"]:focus,
		input[type="tel"]:focus,
		input[type="password"]:focus,
		input[type="email"]:focus,
		input:focus,
		textarea:focus {
			border-color: #fbb137;
		}

	input[type="text"],
	input[type="tel"],
	input[type="password"],
	input[type="email"] {
		line-height: 1em;
	}
	

	label {
		display: block;
		color: inherit;
		font-weight: 600;
		line-height: 1.75em;
		margin-bottom: 0.5em;
	}

	::-webkit-input-placeholder {
		color: #999;
		position: relative;
		top: 3px;
	}

	:-moz-placeholder {
		color: #999;
	}

	::-moz-placeholder {
		color: #999;
	}

	:-ms-input-placeholder {
		color: #999;
	}

	/* 画像配置 */
	.image {
		border: 0;
		display: inline-block;
		position: relative;
		border-radius: 5px;
	}

		.image img {
			display: block;
			/*border-radius: 5px;*/
		}

		.image.left {
			display: block;
			float: left;
			margin: 0 2em 2em 0;
			position: relative;
			top: 0.25em;
		}

			.image.left img {
				display: block;
				width: 100%;
			}
			
		.image.right {
			display: block;
			float: right;
			margin: 0 2em 2em 0;
			position: relative;
			top: 0.25em;
		}

			.image.right img {
				display: block;
				width: 100%;
			}

		.image.fit {
			display: block;
		}

			.image.fit img {
				display: block;
				width: 100%;
			}

		.image.featured {
			display: block;
			margin: 0 0 2em 0;
		}

			.image.featured img {
				display: block;
				width: 100%;
			}

/* Icon */

	.icon {
		text-decoration: none;
		position: relative;
		text-decoration: none;
	}

		.icon:before {
			-moz-osx-font-smoothing: grayscale;
			-webkit-font-smoothing: antialiased;
			display: inline-block;
			font-style: normal;
			font-variant: normal;
			text-rendering: auto;
			line-height: 1;
			text-transform: none !important;
			font-family: 'Font Awesome 5 Free';
			font-weight: 400;
		}

		.icon > .label {
			display: none;
		}

		.icon:before {
			line-height: inherit;
		}

		.icon.solid:before {
			font-weight: 900;
		}

		.icon.brands:before {
			font-family: 'Font Awesome 5 Brands';
		}

		.icon.major {
			text-align: center;
			cursor: default;
			background-color: #fbb137;
			color: #fff;
			border-radius: 100%;
			display: inline-block;
			width: 5em;
			height: 5em;
			line-height: 5em;
			box-shadow: 0 0 0 7px white, 0 0 0 8px #e0e0e0;
			margin: 0 0 2em 0;
		}

			.icon.major:before {
				font-size: 36px;
			}

/* リスト類 */

	ol {
		list-style: decimal;
		padding-left: 1.25em;
	}

		ol li {
			padding-left: 0.25em;
		}

	ul {
		/*list-style: disc;*/
		padding-left: 1em;
	}

		ul li {
			padding-left: 0.5em;
		}
	
	.li-number{
		padding-left:1em;
		text-indent:-1em;
		list-style-type: decimal;
	}
	.li-point{
		padding-left:1em;
		text-indent:-1em;
		list-style:none;
	}
	.li-point:before{
		content:"・"
	}



/* Ulリンク系 */

	ul.links {
		list-style: none;
		padding-left: 0;
		margin: 0.5em;
	}

		ul.links li {
			line-height: 1em;
			padding-left: 0;
			padding-top: 0.5em;
		}

/* Icons */

	ul.icons {
		cursor: default;
		list-style: none;
		padding-left: 0;
	}

		ul.icons li {
			display: inline-block;
			line-height: 1em;
			padding-left: 1.5em;
		}

			ul.icons li:first-child {
				padding-left: 0;
			}

			ul.icons li a, ul.icons li span {
				font-size: 2em;
				border: 0;
			}

/* Menu */

	ul.menu {
		list-style: none;
		padding-left: 0;
	}
/*		ul.menu li {
			border-left: solid 1px #e0e0e0;
			display: inline-block;
			padding: 0 0 0 1em;
			margin: 0 0 0 1em;
		}

			ul.menu li:first-child {
				border-left: 0;
				margin-left: 0;
				padding-left: 0;
			}
*/
/* Actions */

	ul.actions {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		cursor: default;
		list-style: none;
		margin-left: -1em;
		padding-left: 0;
	}

		ul.actions li {
			padding: 0 0 0 1em;
			vertical-align: middle;
		}

		ul.actions.special {
			-moz-justify-content: center;
			-webkit-justify-content: center;
			-ms-justify-content: center;
			justify-content: center;
			width: 100%;
			margin-left: 0;
		}

			ul.actions.special li:first-child {
				padding-left: 0;
			}

		ul.actions.stacked {
			-moz-flex-direction: column;
			-webkit-flex-direction: column;
			-ms-flex-direction: column;
			flex-direction: column;
			margin-left: 0;
		}

			ul.actions.stacked li {
				padding: 1.25em 0 0 0;
			}

				ul.actions.stacked li:first-child {
					padding-top: 0;
				}

		ul.actions.fit {
			width: calc(100% + 1em);
		}

			ul.actions.fit li {
				-moz-flex-grow: 1;
				-webkit-flex-grow: 1;
				-ms-flex-grow: 1;
				flex-grow: 1;
				-moz-flex-shrink: 1;
				-webkit-flex-shrink: 1;
				-ms-flex-shrink: 1;
				flex-shrink: 1;
				width: 100%;
			}

				ul.actions.fit li > * {
					width: 100%;
				}

			ul.actions.fit.stacked {
				width: 100%;
			}

		@media screen and (max-width: 736px) {

			ul.actions:not(.fixed) {
				-moz-flex-direction: column;
				-webkit-flex-direction: column;
				-ms-flex-direction: column;
				flex-direction: column;
				margin-left: 0;
				width: 100% !important;
			}

				ul.actions:not(.fixed) li {
					-moz-flex-grow: 1;
					-webkit-flex-grow: 1;
					-ms-flex-grow: 1;
					flex-grow: 1;
					-moz-flex-shrink: 1;
					-webkit-flex-shrink: 1;
					-ms-flex-shrink: 1;
					flex-shrink: 1;
					padding: 1em 0 0 0;
					text-align: center;
					width: 100%;
				}

					ul.actions:not(.fixed) li > * {
						width: 100%;
					}

					ul.actions:not(.fixed) li:first-child {
						padding-top: 0;
					}

					ul.actions:not(.fixed) li input[type="submit"],
					ul.actions:not(.fixed) li input[type="reset"],
					ul.actions:not(.fixed) li input[type="button"],
					ul.actions:not(.fixed) li button,
					ul.actions:not(.fixed) li .button {
						width: 100%;
					}

						ul.actions:not(.fixed) li input[type="submit"].icon:before,
						ul.actions:not(.fixed) li input[type="reset"].icon:before,
						ul.actions:not(.fixed) li input[type="button"].icon:before,
						ul.actions:not(.fixed) li button.icon:before,
						ul.actions:not(.fixed) li .button.icon:before {
							margin-left: -0.5em;
						}

		}

/* テーブル */

	table {
		width: 90%;
		max-width:1200px;
		border-collapse: collapse;
		border-spacing: 0;
		margin:auto auto 2em auto;
		table-layout: auto;
	}

	tr, th, td {
		border: 0.3px solid #aaaaaa;
		text-align: left;
		background: #fff;
		vertical-align:top;
	}

	th {
		background: #a9dd55;
		min-width:100px;
	}

		@media screen and (max-width: 766px) {

			tr, th, td {
				display: block;
			}
		}

		table.default {
			width: 100%;
		}

			table.default tbody tr {
				border-bottom: solid 1px #e0e0e0;
			}

			table.default td {
				padding: 0.5em 1em 0.5em 1em;
			}

			table.default th {
				font-weight: 600;
				padding: 0.5em 1em 0.5em 1em;
				text-align: left;
			}

			table.default thead {
				background-color: #555555;
				color: #fff;
			}
			
			
/* 病院案内 */

	.byoin {
		border-collapse: collapse;
		table-layout: fixed;
		width: 100%;
		background: #fff;
		border: none;
	}
	
	.byoin a{
		display: inline-block;
		width: 20px;
		height: 20px;
		background: url(../../images/hp.svg) no-repeat center center;
		background-size: contain;
		overflow: hidden;
	}
		
	.byoin a.mail{
		display: inline-block;
		width: 20px;
		height: 20px;
		background: url(../../images/mail.svg) no-repeat center center;
		background-size: contain;
		overflow: hidden;
		margin-left:5px;
	}
	
	.byoin th,
	.byoin td {
		font-size: 14px;
		background: #fff;
		border: 1px solid #ccc;
		padding: 8px;
		vertical-align: middle;
		box-sizing: border-box;
	}
	.byoin th {
		font-weight: 700;
		text-align: left;
	}
	.byoin thead th {
		background: #a9dd55;
	}
	.byoin thead th:first-child,
	.byoin thead th:last-child {
		width: 20%;
	}
	
	.byoin-toggle-btn {
		display:none;
	}
	
	@media screen and (max-width: 768px) {
		.byoin thead {
			display:none;
		}
		
		.byoin tr {
			background-color: unset;
		}
		
		.byoin th, .ex_byoin td {
			display: block;
			width: 100%;
			border: 0;
			border-bottom: 1px solid #ccc;
		}
		
		.byoin tbody th{
			background: #a9dd55;
			height: 2em;
        	line-height: 1em;
		}
		
		.byoin tbody tr td {
			display: flex;
			flex-direction: column;
			gap: 5px;
		}
		
		.byoin tbody tr td::before{
			content: attr(data-label);
			width: fit-content;
			padding: 0.2em 1em;
			border-radius: 100vw;
			font-size: 12px;
			background: #eee;
		}
		
		.byoin-toggle-btn {
			display: inline-block;
			background: #ffa97d;
			border: 1px solid #fff;
			border-radius: 50px;
			width: 20%;
			right: 60px;
			position: absolute;
			color: #fff;
			height: 2em;
			line-height: 1em;
		}
		
		.byoin-detail {
			display: none !important;
			padding: 5px 0;
		}

		.byoin-detail.open {
			display: flex !important;
		}
		
		/* 行をグリッドにする（2列） */
		.byoin tbody tr {
			display: grid;
			grid-template-columns: 1fr 1fr; /* ← 2列 */
		}

		/* セルはグリッドのアイテムにする（ブロック化） */
		.byoin tbody tr th,
		.byoin tbody tr td {
			display: block;
			width: 100%;
			margin: 0;
			box-sizing: border-box;
		}

		/* 病院名(th)と住所は上に縦積み */
		.byoin tbody tr > th,
		.byoin tbody tr > td[data-label="住所"] {
			grid-column: 1 / -1; /* 1列目から最終列まで = 全幅 */
			display: flex;
		}

		/* 詳細4項目（TEL/診療時間/休診日/主な診療動物）は2列に自動配置 */
		.byoin tbody tr .byoin-detail {

		}

	}
	
	/* モバイル版th着色テーブル*/
	.tbl-th-colored thead{
		font-weight: bold;
	}
	
	.tbl-th-colored th, 
	.tbl-th-colored td {
		text-align: center;
	}
	
	.tbl-th-colored tbody th{
		background:#fff;
	}
	
	@media screen and (max-width: 766px) {

		.tbl-th-colored th:not(thead th) {
			background: #fff6bf;
		}

	}
/* ボタン */

	input[type="submit"],
	input[type="reset"],
	input[type="button"],
	button,
	.button {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		-moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
		-webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
		-ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
		transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
		/*background-color: #fbb137;*/
		border-radius: 5px;
		border: 0;
		color: #fff;
		cursor: pointer;
		display: inline-block;
		padding: 0 1.5em;
		line-height: 2.75em;
		min-width: 9em;
		text-align: center;
		text-decoration: none;
		font-weight: 600;
		letter-spacing: -0.025em;
	}

		input[type="submit"]:hover,
		input[type="reset"]:hover,
		input[type="button"]:hover,
		button:hover,
		.button:hover {
			/*background-color: #50c8fc;*/
			color: #fff !important;
		}

		input[type="submit"]:active,
		input[type="reset"]:active,
		input[type="button"]:active,
		button:active,
		.button:active {
			/*background-color: #1eb8fb;*/
			color: #fff;
		}

		input[type="submit"].alt,
		input[type="reset"].alt,
		input[type="button"].alt,
		button.alt,
		.button.alt {
			/*background-color: #555555;*/
			color: #fff;
		}

			input[type="submit"].alt:hover,
			input[type="reset"].alt:hover,
			input[type="button"].alt:hover,
			button.alt:hover,
			.button.alt:hover {
				/*background-color: #626262;*/
			}

			input[type="submit"].alt:active,
			input[type="reset"].alt:active,
			input[type="button"].alt:active,
			button.alt:active,
			.button.alt:active {
				/*background-color: #484848;*/
			}

		input[type="submit"].icon:before,
		input[type="reset"].icon:before,
		input[type="button"].icon:before,
		button.icon:before,
		.button.icon:before {
			margin-right: 0.5em;
		}

		input[type="submit"].fit,
		input[type="reset"].fit,
		input[type="button"].fit,
		button.fit,
		.button.fit {
			width: 100%;
		}

		input[type="submit"].small,
		input[type="reset"].small,
		input[type="button"].small,
		button.small,
		.button.small {
			font-size: 0.8em;
		}
		
		
		
		a.btn-menu,
		a.btn-menu:visited,
		a.btn-menu:active,
		a.btn-menu:hover{
			display: inline-block;
			padding: 1em;
			padding-right:80px;
			position: relative;
			text-decoration: none;
			text-align: center;
			background: #ffea9d;
			color: #454545;
			box-shadow: 6px 4px 3px 0px #d0d0d0a6;
			margin-top: 1em;
			margin-left: 0.5em;
			transition: all 0.2s ease;
		}
		
		.btn-menu:hover {
			transform: translateY(-4px);
			box-shadow: 8px 6px 6px 0px #c0c0c0a6;
		}
		
		
		@media screen and (max-width: 1000px) {
			a.btn-menu,
			a.btn-menu:visited,
			a.btn-menu:active,
			a.btn-menu:hover{
				padding-right:55px;
			}
		}
		
		
		a.btn-more,
		a.btn-more:visited,
		a.btn-more:active,
		a.btn-more:hover{
			display: inline-block;
			padding: 1.5em 0 1.5em 20px;
			text-decoration: none;
			text-align: left;
			background: #fff;
			color: #454545;
			height: 2em;
			line-height: 0em;
			box-shadow: 6px 4px 3px 0px #d0d0d0a6;
			border: solid 1px #fbb137; 
			margin-top: 1em;
			margin-left: 0.5em;
			transition: all 0.2s ease;
			border-radius:20px 50px 50px 20px;
			overflow: hidden;
		}
		
		a.btn-more:hover {
			transform: translateY(-4px);
			box-shadow: 8px 6px 6px 0px #c0c0c0a6;
		}
		
		.btn-more::after {
			content: "";
			position: absolute;
			top: 0;
			right: 0;
			width: 0;
			height: 100%;
			background: orange;
			border-radius:0 50px 50px 0;
		}

		.btn-more:hover::after {
			width: 20px;		//右帯幅
		}

		
		/* スマホではホバーを無効化 */
		@media (max-width: 100px) {
    		a.btn-more:hover {
				transform: none;
				box-shadow: 6px 4px 3px 0px #d0d0d0a6; /* 元の影に戻す */
			}
			a.btn-more:active {
				background-color: #f0f0f0;
			}

		}
		



/* Box */

	.box.highlight {
		text-align: center;
	}

	.box.post {
		position: relative;
		margin: 0 0 2em 0;
	}

		.box.post:after {
			content: '';
			display: block;
			clear: both;
		}

		.box.post .inner {
			margin-left: calc(30% + 2em);
		}

			.box.post .inner > :last-child {
				margin-bottom: 0;
			}

		.box.post .image {
			width: 30%;
			margin: 0;
		}
		
	.business-box {
		height: 30px;
    	line-height: 30px;
    	color: white;
    	font-weight: 500;
    	text-shadow: 2px 2px 2px #343434;
	}
	
	.jisseki-box {
		/*height: 30px;*/
    	/*line-height: 30px;*/
    	color: #000;
    	font-weight: 500;
    	text-shadow: 2px 2px 2px #fff;
    	text-align: center;
    	margin-bottom: 0 !important;
    	border-radius: 20px
	}
	
	
	
	@media screen and (max-width: 1180px) {
		.jisseki-box {
	    	font-size:smaller;
		}
	}
	
	@media screen and (max-width: 830px) {
		.jisseki-box {
	    	font-size:large;
		}
	}
	
	@media screen and (max-width: 440px) {
		.jisseki-box {
	    	font-size:medium;
		}
	}
	
	.jisseki-box-child {
    	/*line-height: 30px;*/
    	/*height: 150px;*/
    	/*border: 0.5px solid #c7cddf;*/
    	padding: 15px;
    	font-size: smaller;
    	margin-bottom: 0 !important;
    	border-radius: 30px;
		box-shadow: 1px 3px 1px 0px #ecede5;
	}
	
	@media screen and (max-width: 830px) {
		.jisseki-box-child {
	    	/*line-height: 30px;*/
			height: auto;
	    	padding: 15px;
	    	font-size: smaller;
		}
	}
	
	
	
	
	.multi-box {
    	color: #000;
    	font-weight: 500;
    	text-shadow: 2px 2px 2px #fff;
    	text-align: center;
    	margin-bottom: 0 !important;
	}
	
	
	@media screen and (max-width: 1180px) {
		.multi-box {
	    	font-size:smaller;
		}
	}
	
	@media screen and (max-width: 830px) {
		.multi-box {
	    	font-size:large;
		}
	}
	
	@media screen and (max-width: 440px) {
		.multi-box {
	    	font-size:medium;
		}
	}
	
	.multi-box-child {
    	/*line-height: 30px;*/
    	/*height: 150px;*/
    	border: 0.5px solid #c7cddf;
    	padding: 15px;
    	font-size: smaller;
    	margin-bottom: 0 !important;
		box-shadow: 1px 3px 1px 0px #ecede5;
		background: #f4f4f4;
	}
	
	@media screen and (max-width: 830px) {
		.multi-box-child {
	    	/*line-height: 30px;*/
			height: auto;
	    	padding: 15px;
	    	font-size: smaller;
		}
	}


/* ヘッダ */

	#header {
		background: #febc36;
		position: sticky;
		top: 0;
		z-index: 999;
		width: 100%;
		padding: 0;
	}

		#header h1 {
			/*padding: 0 0 2.75em 0;*/
			margin: 0;
		}

			#header h1 a {
				font-size: 1.5em;
				letter-spacing: -0.025em;
				border: 0;
			}
	/* ------------------------------
		ナビ共通
	------------------------------ */
	#nav {
	  position: relative;
	}

	#nav , #nav a {
	  color: #000;
	}
	
	@media (min-width: 1225px) {
		#nav .logo {
			max-width:20%;
		}
		
		#nav {
			height: auto;
		}
	}
	
	@media (max-width: 1225px) {
		#nav .logo {
			/*max-width:50%;*/
		}
		
		#nav {
			height: 80px;
		}
	}

	.menu {
	  display: flex;
	  gap: 20px;
	  list-style: none;
	  margin: 0;
	  padding: 0;
	}

	.menu > li {
		position: relative;
		line-height: 2.5em;
	}
	
	.menu  ul li {
		/*border-bottom: 2px #009688 dotted;*/
		padding:0em 1.3em;
	}
	
	.submenu {
		text-align:left;
		background: #ffffffbd;
		border-radius: 20px;
	}
	
	.submenu > li {
		line-height: 2.5em;
		background: url("../../images/cat-li.svg") no-repeat left center;
		background-size: 16px 16px;
	}

	.menu-toggle {
	  display: none;
	  position: absolute;
	  right: 10px;
	  top: 10px;
	  z-index: 9999;
	  cursor: pointer;
	  flex-shrink: 0;
	}

	/* ------------------------------
		PC 用ドロップダウン
	------------------------------ */
	@media (min-width: 1225px) {

		.submenu {
			position: absolute;
			top: 100%;
			left: 0;
			z-index: 9999;
			min-width: 200px;
			white-space: nowrap;
			padding: 0 1em;
			margin: 0;
			list-style: none;
			opacity: 0;
			visibility: hidden;
			transform: translateY(5px);
			transition: opacity 0.5s ease, transform 0.5s ease, visibility 0.5s;
		}

		.menu > li:hover > .submenu {
			opacity: 1;
			visibility: visible;
			transform: translateY(0);
		}
	}

	/* ------------------------------
		スマホ
	------------------------------ */
	@media (max-width: 1225px) {

		.menu-toggle {
			 display: block !important;
		}

		.menu {
		 	flex-direction: column;
			gap: 0;
			width: 100%;
			z-index: 99999;
			background: #ffffffd1;
			border-radius: 0 0 25px 25px;
			border: 1px solid 9e9e9e;
			opacity: 0;
			visibility: hidden;
			transform: translateY(5px);
			transition: opacity 0.5s ease, transform 0.5s ease, visibility 0.5s;
		}
		
		.menu li {
			display: block;
			width: 100%;
			border-radius: 0 0 25px 25px;
		}
		
		.menu ul {
			margin:0 1em 0em 1em;
		}

		.menu.open {
			opacity: 1;
			visibility: visible;
			transform: translateY(0);
		}
		
		.menu-label {
			font-size:large;
		}

		/* スマホのサブメニュー */
		.submenu {
			max-height: 0;
			overflow: hidden;
			opacity: 0;
			transform: translateY(5px);
			transition: 
			max-height 0.5s ease,
			opacity 0.5s ease,
			transform 0.5s ease;
			background-color:#ffeabfc9;
		}
		
		.submenu.open {
			max-height: 500px;
			opacity: 1;
			transform: translateY(0);
		}

		
		/* ▼表示 */
		.menu > li.has-submenu > div {
			position: relative;
		}

		.menu > li.has-submenu > div::after {
			content: "▼";
			font-size: 14px;
			position: absolute;
			right: 20;
			top: 50%;
			transform: translateY(-50%);
	  	}

	  	/* 開いている時は ▲ */
	  	.menu > li.has-submenu.open > div::after {
			content: "▲";
		}
	}
	
	/*メニューごとアイコン */
	
	/* 共通：アイコン画像 */
	.icon-byoin .menu-label::before {
		background-image: url("../../images/search.svg");
	}
	
	.icon-about .menu-label::before {
		background-image: url("../../images/jigyo.svg");
	}
	
	.icon-doctor .menu-label::before {
		background-image: url("../../images/doctor.svg");
	}
	
	.icon-contact .menu-label::before {
		background-image: url("../../images/mail.svg");
	}
	
	.icon-pet .menu-label::before {
		background-image: url("../../images/cat.svg");
	}
	
	.icon-jigyo .menu-label::before {
		background-image: url("../../images/dog.svg");
	}
	
	.icon-chikusan .menu-label::before {
		background-image: url("../../images/cow.svg");
	}
	
	.icon-price .menu-label::before {
		background-image: url("../../images/info.svg");
	}

	/* PC アイコン上 */
	@media (min-width: 1225px) {

		.menu > li {
		  position: relative;
		  padding-left: 0;
		  padding-top: 0px;     /* アイコン分の余白 */
		  text-align: center;
		}

		.menu > li::before {
		  content: "";
		  width: 50px;		/* アイコンのサイズ*/
		  height: 50px;
		  background-size: contain;
		  background-repeat: no-repeat;
		  position: absolute;
		  top: 10px;
		  left: 50%;
		  transform: translateX(-50%);
		}
		
		.menu-label {
		  position: relative;
		  padding-top: 60px;
		  text-align: center;
		  display: block;
		}

		.menu-label::before {
		  content: "";
		  width: 40px;
		  height: 40px;
		  background-size: contain;
		  background-repeat: no-repeat;
		  position: absolute;
		  top: 10px;
		  left: 50%;
		  transform: translateX(-50%);
		}
	}
	
	@media (min-width: 1350px) {
		.menu-label {
			font-size:large !important;
		}
	}
	
	@media (min-width: 1000px) {
		.menu-label {
			font-size:medium;
		}
	}

	/* ▼ スマホ アイコン左 */
	@media (max-width: 1225px) {

		.menu > li {
			position: relative;
			padding-left: 0px;   /* 左に余白 */
		}
		
		.menu-label {
			position: relative;
			padding-left: 36px;
			display: flex;
			align-items: center;
		}

		.menu-label::before {
			content: "";
			width: 20px;
			height: 20px;
			background-size: contain;
			background-repeat: no-repeat;
			position: absolute;
			left: 10px;
			top: 50%;
			transform: translateY(-50%);
		}
	}
	
/* Banner */

	#banner {
		background-image: url("../../images/noimg.png");		
		background-position: center center;
		background-repeat: no-repeat;
		background-size: contain;
		background-position-x: center;
		background-position-y: top;
		height: 28em;
		width : 100%;
		text-align: center;
		position: relative;
	}

		#banner header {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			background: #212121;
			background: rgba(27, 27, 27, 0.75);
			color: #fff;
			padding: 1.5em 0;
		}

			#banner header h2 {
				display: inline-block;
				margin: 0;
				font-size: 1.25em;
				vertical-align: middle;
			}

				#banner header h2 em {
					opacity: 0.75;
				}

				#banner header h2 a {
					border-bottom-color: rgba(255, 255, 255, 0.5);
				}

					#banner header h2 a:hover {
						border-bottom-color: transparent;
					}

			#banner header .button {
				vertical-align: middle;
				margin-left: 1em;
			}
	/* ラッパークラス */
	.wrapper {
		padding: 5em 0 3em 0;
		background: #fff;
	}
		/* 背景ブルー版 */
		.wrapper.style-blue {
			background-color: #fbb137;
			color: #fff;
		}
			/* 背景ブルー版ボタン */
			.wrapper.style-blue .button {
				background: #fff;
				color: #474747;
			}
				/* 背景Orange版onMouseイベント */
				.wrapper.style-blue .button:hover {
					color: #fbb137 !important;
				}

/* CTA */

	#cta {
		text-align: center;
		padding: 1.5em 0;
		margin-bottom:1em;
	}

		#cta header h2 {
			display: inline-block;
			vertical-align: middle;
			margin: 0;
		}

		#cta header .button {
			vertical-align: middle;
			margin-left: 1em;
		}

/* フッター */

	#footer {
		color: #000;
		background-size:cover;
	}

		#footer a {
			color: inherit;
			/*border-bottom: dashed 1px #00bdff;*/
			text-decoration: none;
		}

			#footer a:hover {
				color: #fbb137;
				border-bottom-color: transparent;
			}

		#footer .container {
			margin-bottom: 1em;
		}

		#footer .icons {
			text-align: center;
			margin: 0;
		}

			#footer .icons a {
				color: #999;
			}

				#footer .icons a:hover {
					color: #474747;
				}

		#footer .copyright {
			color: #000;
			text-align: center;
			font-size: 0.9em;
		}

/* Narrower */

	#navPanel, #titleBar {
		display: none;
	}

	@media screen and (max-width: 1000px) {

		/* Basic */

			html, body {
				/*overflow-x: hidden;*/
			}

			body, input, select, textarea {
				font-size: 13pt;
			}

			h1, h2, h3, h4, h5, h6 {
				margin-bottom: 0.5em;
			}

			header p {
				margin-top: -0.75em;
			}

			header.major {
				text-align: center;
				margin: 0 0 2em 0;
			}

				header.major h2 {
					font-size: 1.75em;
				}

				header.major p {
					top: -0.25em;
					font-size: 1.25em;
				}

		/* Box */

			.box.highlight {
				text-align: left;
				position: relative;
				padding-left: 7em;
			}

				.box.highlight i {
					position: absolute;
					margin: 0;
					left: 0;
					top: 0.25em;
				}

			.box.post .inner {
				margin-left: calc(20% + 2em);
			}

			.box.post .image {
				width: 20%;
			}

		/* Banner */

			#banner {
				height: 20em;
			}

				#banner header h2 {
					display: block;
				}

				#banner header .button {
					margin: 1em 0 0 0;
				}

		/* CTA */

			#cta {
				padding: 1.5em 0;
			}

				#cta header h2 {
					display: block;
				}

				#cta header .button {
					margin: 1em 0 0 0;
				}

		/* フッター */

			#footer {
				text-align: center;
			}

				#footer .container {
					margin-bottom: 1em;
				}

				#footer form .actions {
					-moz-justify-content: center;
					-webkit-justify-content: center;
					-ms-justify-content: center;
					justify-content: center;
					width: 100%;
					margin-left: 0;
				}

					#footer form .actions li:first-child {
						padding-left: 0;
					}

			
			#page-wrapper {
				-moz-backface-visibility: hidden;
				-webkit-backface-visibility: hidden;
				-ms-backface-visibility: hidden;
				backface-visibility: hidden;
				-moz-transition: -moz-transform 0.5s ease;
				-webkit-transition: -webkit-transform 0.5s ease;
				-ms-transition: -ms-transform 0.5s ease;
				transition: transform 0.5s ease;
				/*padding-bottom: 1px;*/
				/*padding-top: 44px;*/
			}
			/* ナビゲーションパネル周り設定 */

			#titleBar {
				-moz-backface-visibility: hidden;
				-webkit-backface-visibility: hidden;
				-ms-backface-visibility: hidden;
				backface-visibility: hidden;
				-moz-transition: -moz-transform 0.5s ease;
				-webkit-transition: -webkit-transform 0.5s ease;
				-ms-transition: -ms-transform 0.5s ease;
				transition: transform 0.5s ease;
				display: block;
				height: 44px;
				left: 0;
				position: fixed;
				top: 0;
				width: 100%;
				z-index: 10001;
				/*background-color: #fff;*/
				height: 44px;
				line-height: 44px;
				box-shadow: 0 4px 0 0 #fbb137;
			}

				#titleBar .title {
					display: block;
					position: relative;
					font-weight: 600;
					text-align: center;
					color: #fff;
					z-index: 1;
					margin-top: 5px;
				}

					#titleBar .title em {
						font-style: normal;
						font-weight: 300;
					}

				#titleBar .toggle {
					text-decoration: none;
					border: 0;
					height: 43px;
					right: 0;
					position: absolute;
					top: 0;
					//width: 80px;
					z-index: 2;
				}

					#titleBar .toggle:before {
						-moz-osx-font-smoothing: grayscale;
						-webkit-font-smoothing: antialiased;
						display: inline-block;
						font-style: normal;
						font-variant: normal;
						text-rendering: auto;
						line-height: 1;
						text-transform: none !important;
						font-family: 'Font Awesome 5 Free';
						font-weight: 900;
					}

					#titleBar .toggle:before {
						content: '\f0c9';
						display: block;
						height: 44px;
						line-height: inherit;
						text-align: center;
						width: 44px;
						color: #000;
						opacity: 0.5;
					}

					#titleBar .toggle:active:before {
						opacity: 0.75;
					}
			
			#navPanel {
				background-color: #1f1f1f;
				box-shadow: inset -1px 0 3px 0 rgba(0, 0, 0, 0.5);
				-moz-backface-visibility: hidden;
				-webkit-backface-visibility: hidden;
				-ms-backface-visibility: hidden;
				backface-visibility: hidden;
				-moz-transform: translateX(275px);
				-webkit-transform: translateX(275px);
				-ms-transform: translateX(275px);
				transform: translateX(275px);
				-moz-transition: -moz-transform 0.5s ease;
				-webkit-transition: -webkit-transform 0.5s ease;
				-ms-transition: -ms-transform 0.5s ease;
				transition: transform 0.5s ease;
				display: block;
				height: 100%;
				right: 0;
				overflow-y: auto;
				position: fixed;
				top: 0;
				width: 275px;
				z-index: 10002;
			}

				#navPanel .link {
					border-bottom: 0;
					border-top: solid 1px rgba(255, 255, 255, 0.05);
					color: #888;
					display: block;
					height: 48px;
					line-height: 48px;
					padding: 0 1em 0 1em;
					text-decoration: none;
				}

					#navPanel .link:first-child {
						border-top: 0;
					}

					#navPanel .link.depth-0 {
						color: #fff;
					}

					#navPanel .link .indent-1 {
						display: inline-block;
						width: 1em;
					}

					#navPanel .link .indent-2 {
						display: inline-block;
						width: 2em;
					}

					#navPanel .link .indent-3 {
						display: inline-block;
						width: 3em;
					}

					#navPanel .link .indent-4 {
						display: inline-block;
						width: 4em;
					}

					#navPanel .link .indent-5 {
						display: inline-block;
						width: 5em;
					}

			body.navPanel-visible #page-wrapper {
				-moz-transform: translateX(-275px);
				-webkit-transform: translateX(-275px);
				-ms-transform: translateX(-275px);
				transform: translateX(-275px);
			}

			body.navPanel-visible #titleBar {
				-moz-transform: translateX(-275px);
				-webkit-transform: translateX(-275px);
				-ms-transform: translateX(-275px);
				transform: translateX(-275px);
			}

			body.navPanel-visible #navPanel {
				-moz-transform: translateX(0);
				-webkit-transform: translateX(0);
				-ms-transform: translateX(0);
				transform: translateX(0);
			}

	}

/* モバイル */

	@media screen and (max-width: 736px) {

		/* Basic */

			body, input, select, textarea {
				font-size: 11pt;
				line-height: 1.5em;
			}

			h2 {
				font-size: 1.25em;
				letter-spacing: 0;
				line-height: 1.35em;
			}

			h3 {
				font-size: 1em;
				letter-spacing: 0;
				line-height: 1.35em;
			}

			header p {
				margin-top: -0.5em;
				font-size: 1em;
			}

			header.major {
				padding: 0 20px;
			}

				header.major h2 {
					font-size: 1.25em;
				}

				header.major p {
					top: 0;
					margin-top: 1.25em;
					font-size: 1em;
				}

		/* メニュー */

			/*ul.menu li {
				border: 0;
				padding: 0;
				margin: 0;
				display: block;
				line-height: 2em;
			}*/
			
		/* footerメニュー非表示 */

			#footer li {
				border: 0;
				padding: 0;
				margin: 0;
				height:0;
				overflow:hidden;
			}
			#footer ul {
				border: 0;
				padding: 0;
				margin: 0;
				align-items: center;
			}
			#footer .flex-box {
				border: 0;
				padding: 0;
				margin: 0;
				align-items: center;
				flex-direction: column;
			}
			#footer h4{
				border: 0;
				padding: 0;
				margin: 0;
			}
			#footer {
				padding: 1em 0 0em 0;
			}
			/* 会社ロゴ */
			#footer img{
				width: 40%;
			}

		/* Banner */

			#banner {
				height: 18em;
			}

		/* Wrapper */

			.wrapper {
				padding: 2em 0 1px 0;
			}

	}

/* モバイル用 */

	@media screen and (max-width: 480px) {

		/* Icon */

			.icon.major {
				width: 4em;
				height: 4em;
				line-height: 4em;
				box-shadow: 0 0 0 7px white, 0 0 0 8px #e0e0e0;
			}

				.icon.major:before {
					font-size: 24px;
				}

		/* Button */

			input[type="submit"],
			input[type="reset"],
			input[type="button"],
			button,
			.button {
				/*width: 100%;*/
				display: block;
			}

		/* Box */

			.box.highlight {
				padding-left: calc(4em + 30px);
			}

			.box.post .inner {
				margin-left: calc(30% + 20px);
			}

			.box.post .image {
				width: 30%;
			}

		/* Banner */

			#banner {
				height: 20em;
			}

				#banner header {
					padding: 20px;
				}

		/* Wrapper */

			.wrapper {
				padding: 2em 20px 1px 20px;
			}

		/* CTA */

			#cta {
				padding: 20px;
			}

		/* フッター */

			#footer {
				/*padding: 2em 20px;*/
				text-align: center;
			}

	}
	
	.h_1{
		padding: 0.1em 1em;
		margin-bottom: 0.5em;
		position: relative;
		/*background-color: #9bdcf8;*/
		background: linear-gradient(45deg, #49c8ff 30%, #ceffff 70%, #49c9ff);
		/*box-shadow: 0px 0px 0px 5px #9bdcf8;*/
		border: solid 1px #ffffff;
		color:#000000;
		line-height:2em;
	}

/* PDFアイコン */
.pdf {
	width: 20px;
	height: 20px;
	fill:red;
}


/* ふれあい教室申込input */
.large_input {
	max-width: 400px; /* PCでの最大幅 */
	display: inline-block;
	box-sizing: border-box;
}

.frm {
	 display: flex;
  flex-wrap: wrap;
  align-items: center;

}

.fade-slideshow-wrapper {
	width: 90%;
	height: 450px;
	position: relative;
	margin: auto;
}

@media screen and (max-width: 1000px) {
	.fade-slideshow-wrapper {
		max-height:300px;
	}
}

.fade-slideshow-container .slide {
	list-style: none;
	position: absolute; /* 画像を重ねるため */
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	animation: fade-slideshow 32s linear infinite;
}

.fade-slideshow-container .slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* アニメーションの遅延時間を設定 */

.fade-slideshow-container .slide:nth-child(1) { animation-delay: 0s; }
.fade-slideshow-container .slide:nth-child(2) { animation-delay: 4s; }
.fade-slideshow-container .slide:nth-child(3) { animation-delay: 8s; }
.fade-slideshow-container .slide:nth-child(4) { animation-delay: 12s; }
.fade-slideshow-container .slide:nth-child(5) { animation-delay: 16s; }
.fade-slideshow-container .slide:nth-child(6) { animation-delay: 20s; }
.fade-slideshow-container .slide:nth-child(7) { animation-delay: 24s; }
.fade-slideshow-container .slide:nth-child(8) { animation-delay: 28s; }


/* フェードアニメーションの定義 */
@keyframes fade-slideshow {
	0% { opacity: 0; }
	12.5% { opacity: 1; } /* 2秒かけてフェードイン */
	25% { opacity: 1; }   /* 2秒間表示 */
	37.5% { opacity: 0; } /* 2秒かけてフェードアウト */
	100% { opacity: 0; }
}

.slideimage {
	box-shadow: 20px 20px 0px rgb(218 239 116 / 80%);
}

/* お知らせタブ*/
.tabs {
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(0,0,0,0.1);
	width:100%;
	text-align:left;
}

/* ラジオボタンを非表示 */
.tabs input[type="radio"] {
	display: none;
}

/* タブ（ラベル）のエリア */
.tab-labels {
	display: flex;
	background-color: var(--tab-bg-color);
}
.tab-label {
	flex-grow: 1; /* タブを均等に広げる */
	padding: 15px;
	text-align: center;
	color: var(--tab-text-color);
	cursor: pointer;
	transition: all 0.3s;
}
.tab-label:hover {
	background-color: #ddd;
}

/* タブコンテンツエリア */
.tab-contents {
	padding: 1em;
	/*max-height:400px;*/
}
/* 全てのコンテンツを最初は非表示に */
.tab-content {
	display: none;
}
/* 
  タブ切替
*/
#tab1:checked ~ .tab-contents #content1,
#tab2:checked ~ .tab-contents #content2,
#tab3:checked ~ .tab-contents #content3 {
	display: block;
}
/* 通常時 */
.tab-labels label[for="tab1"] {
    background-color: #ffe2ae;
}

.tab-labels label[for="tab2"] {
    background-color: #e2ffc1;
}

.tab-labels label[for="tab3"] {
    background-color: #ffb09d;
}

.tab-labels label {
    border: 2px solid transparent;
    border-radius: 8px;
    padding: 6px 12px;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

/* アクティブ時 */
#tab1:checked ~ .tab-labels label[for="tab1"],
#tab2:checked ~ .tab-labels label[for="tab2"], 
#tab3:checked ~ .tab-labels label[for="tab3"] {
    0 3px 8px rgb(154 147 147);
    transform: translateY(-2px);
    box-shadow: 0 3px 8px rgb(119 119 119 / 55%);
    font-weight: bold;
}

.tab-contents p {
	border-bottom:1px #AAA dashed;
}

.tab-contents p a{
	display: block;
	padding-left: 1em;
}


.fusen-sei {
    position: relative;
    max-width: 80%;
    margin: 0 auto;
    max-height: fit-content;
    padding: 2em 2.2em;
    background-color: #ffeb8a;
    color: #333333;
    box-shadow:7px 5px 8px rgba(0,0,0,.25),0 1px 0 rgba(0,0,0,.04);
}

@media screen and (max-width: 1000px) {
	.fusen-sei {
		max-width: 100%;
	}
}

/* マスキングテープ風ボックス */
.onepoint-box {
  position: relative;
  background-color: #b4ff9d;
  max-width: 80%;
}

.onepoint-box .box-title {
  background-image: repeating-linear-gradient(
    -45deg,
    #b4ff9d 0,
    #b4ff9d 3px,
    #fafafa 3px,
    #fafafa 6px
  );
  transform: rotate(-2deg);
  box-shadow: 0 1px 2px rgb(0 0 0 / .1);
  padding: .5em 1em;
  line-height: 1;
  position: absolute;
  top: -1em;
  left: 1em;
  display: inline-block;
  font-size: 0.9em;
  width: auto;
  max-width: calc(100% - 2em);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.onepoint-box .box-content {
  padding: 2.5em 2em 2em;
}

.onepoint-box p {
  margin: 0;
}

.column-box {
    position: relative;
    margin: 3em 0;
    padding: 0.5em 1em;
    border: solid 3px #62c1ce;
}
.column-box .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 19px;
    background: #62c1ce;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.column-box p {
    margin: 0; 
    padding: 0;
}