/*

template project
@jun akagi

*/


/*-------------------------------------------------------

base

baseではサイト内の基本的な設定を行う
現バージョンでは以下を追加している
・cssリセット
・フォントリセットとマスターの設定
・PC専用/モバイル専用クラス
・Googleマップレスポンシブ化
・flex（safariとiPhoneではキャンセル）、その他flex関連の補助クラス

-------------------------------------------------------*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
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,
tfoot,
button {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	font-weight: normal;
	font-family: "メイリオ", "MS Pゴシック", Arial, sans-serif;
	font-size: 13px;
	line-height: 1.5;
	font-weight: normal;
	font-style: normal;
	color: #333;
}
a {
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	font-weight: normal;
	font-family: "メイリオ", "MS Pゴシック", Arial, sans-serif;
	line-height: 1.5;
	font-weight: normal;
	font-style: normal;
	color: #333;
}

body {
	line-height: 1;
}

ol,
ul {
	list-style: none;
}

blockquote,
q {
	quotes: none;
}

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

:focus {
	outline: 0;
}

ins {
	text-decoration: none;
}

del {
	text-decoration: line-through;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
/*	font-size: 100%;*/
}

select,
input,
textarea {
	font: 100% "MS Pゴシック", Arial, sans-serif;
}

table {
	font-size: inherit;
/*	font: 100%;*/
}

sup {
	vertical-align: super;
	font-size: 50%;
	line-height: 1;
}


/*PC専用/モバイル専用クラス*/


/*ブロック要素にしか対応していないので注意*/

.onlypc {
	display: block;
}

.onlymobile {
	display: none;
}

@media only screen and (max-width: 959px) {
	.onlypc {
		display: none;
	}
	.onlymobile {
		display: block;
	}
}

.dib {
	display: inline-block;
	font-size: inherit;
	color: inherit;
	font-weight: inherit;
}

.displaynone {
	display: none;
}


/*Googleマップレスポンシブ化*/


/*div要素、section要素等のブロック要素に.ggmapを付与し、内部にGoogleマップから吐き出された埋め込み用要素を貼り付ける
このときiframe要素に入っているwidth属性やhight属性は無視される*/

.ggmap,
.youtube {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
	margin-bottom: 30px;
}

.ggmap iframe,
.ggmapr object,
.ggmap embed,
.youtube iframe,
.youtuber object,
.youtube embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/*flex*/


/*flexを使用したいボックスにflexクラスを付与すると直下の子要素が横並びになる
flex非対応ブラウザおよびsafariではキャンセルされるようにする*/

.flex {
	display: -webkit-box;
	display: -moz-box;
	display: box;
	display: -moz-flex;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: -webkit-flexbox;
	display: flex;
}


@media only screen and (max-width: 639px) {
.breakflex639 {
	display: block;
}
.breakflex639>* {
	width: 100% !important;
}
}


/*mobflex*/


/*レスポンシブデザイン発生時にflexを使用したい場合にmobflexクラスを付与すると直下の子要素が横並びになる
flex非対応ブラウザおよびsafariではキャンセルされるようにする*/

@media only screen and (max-width: 840px) {
	.mobflex {
		display: -webkit-box;
		display: -moz-box;
		display: box;
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: -webkit-flexbox;
		display: flex;
	}
}


/*.ua-safari .flex,*/

.no-flexbox .flex,

/*.ua-safari .mobflex,*/

.no-flexbox .mobflex {
	display: block;
	overflow: hidden;
}

.jcsb {
	justify-content: -webkit-space-between;
	justify-content: -moz-space-between;
	justify-content: space-between;
}

.jcar {
	justify-content: -webkit-space-around;
	justify-content: -moz-space-around;
	justify-content: space-around;
}

.aic {
	align-items: center;
}

.acsb {
	align-content: -webkit-space-between;
	align-content: -moz-space-between;
	align-content: space-between;
}

.fdcu {
	-webkit-flex-direction: column;
	flex-direction: column;
}

.fdrr {
	-webkit-flex-direction: row-reverse;
	flex-direction: row-reverse;
}

.flwp {
	flex-wrap: wrap;
}

.shadow {
	-webkit-box-shadow: 0 0 10px #a8c0ca;
	box-shadow: 0 0 10px #a8c0ca;
}


/*-------------------------------------------------------

design

基本的なレイアウト、各種パーツの振る舞い、スタンダートな文章デザインをここで設定する
css作成作業の大部分がこのゾーンでの作業になる

-------------------------------------------------------*/

body {
	background: #ffffff url(../../master.jpg) 50% 0 no-repeat;
	background: #ffffff;
}

/*#wrap*/
.fixwidth {
	width: 960px;
	min-width: 320px;
	margin: auto;
}

@media only screen and (max-width: 959px) {
/*	#wrap*/
	.fixwidth
	{
		width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}
}

#header {
	border-top: #15b73d 5px solid;
	overflow: hidden;
}
	#header article {
		float: left;
		margin-bottom: 12px;
	}
		#header h1 {}
			#header h1:before {
				padding: 19px 0 10px 15px;
				content: attr(title);
				display: block;
			}
		#header h1 img {
			width: 100%;
			max-width: 400px
		}
	#header aside {
		float: right;
		margin-bottom: 12px;
	}
		#header .tel {
				padding: 23px 20px 0 1px;

		}
		#header .contact a {
			display: block;
			text-align: center;
			margin: 16px 10px 0 0;
			border: #15b73d 2px solid;
			border-radius: 7px;
			font-size: 16px;
			text-decoration: none;
			line-height: 1.7;
		}
			#header .contact a i {
				color: #15b73d;
				font-size: 20px;
				margin-right: 8px;
			}


@media only screen and (max-width: 959px) {
	#header article {
		float: none;
	}
	#header aside {
		display: none;
	}
}

@media only screen and (max-width: 479px) {
	#header article {
		margin: 10px 0;
	}
			#header h1:before {
				content: none;
			}
}
@media only screen and (max-width: 824px) {
}
@media only screen and (max-width: 479px) {
}

#gNav #gNavopener {
	display:none;
}


#gNav {
	border-top: #15b73d 1px solid;
	clear: both;
	border-bottom: #15b73d 1px solid;
}
	#gNav ul {
		display: table;
		margin: auto;
	}
		#gNav li {
			display: table-cell;
		}
			#gNav li a {
				width: 130px;
				display: block;
				height: 55px;
				line-height: 55px;
				font-size: 130%;
				text-decoration: none;
				text-align: center;
				margin: 0 10px;
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				box-sizing: border-box;
				border-bottom: transparent 5px solid;
				transition: all 0.2s;
			}
			#gNav li a.current,
			#gNav li a:hover {
				border-bottom: #15b73d 5px solid;
			}
@media only screen and (max-width: 767px) {
#gNav {
	border-top: #15b73d 1px solid;
	clear: both;
	border-bottom: none;
}
	#gNav ul {
		display: block;
		display: none;
	}
		#gNav li {
			display: block;
		}
			#gNav a#gNavopener {
				width: 100%;
				display: block;
				height: 50px;
				line-height: 50px;
				font-size: 120%;
				position: relative;
				text-decoration: none;
				color: #fff;
				text-align: center;
				font-weight: bold;
				background: #15b73d;
			}
			#gNav li a {
				width: 100%;
				display: block;
				height: 45px;
				line-height: 45px;
				font-size: 120%;
				margin: 0;
				border-bottom: none;
				border-bottom: #15b73d 1px solid;
				position: relative;
			}
			#gNav li a.current,
			#gNav li a:hover {
				border-bottom-width: 1px;
				color: #15b73d;
			}
			#gNav li a:before,
			#gNav li a:after {
				position: absolute;
				content: "";
				width: 0;
				height: 0;
				top: 50%;
				margin-top: -22.5px;
				border: transparent 22.5px solid;
				transition: all 0.6s;
				opacity: 0;
			}
			#gNav li a:before {
				left: 50%;
				border-left: #15b73d 0px solid;
				border-right: none;
				margin-left: -50%;
			}
			#gNav li a:after {
				right: 50%;
				border-right: #15b73d 0px solid;
				border-left: none;
				margin-right: -50%;
			}
			#gNav li a:hover:before,
			#gNav li a:hover:after,
			#gNav li a.current:before,
			#gNav li a.current:after {
				opacity: 1;
			}
			#gNav li a:hover:before,
			#gNav li a.current:before {
				border-left: #15b73d 15px solid;
				margin-left: -80px;
			}
			#gNav li a:hover:after,
			#gNav li a.current:after {
				border-right: #15b73d 15px solid;
				margin-right: -80px;
			}
}

#mainVisual {
	background: #15b73d;
	border-bottom: #15b73d 1px solid;
}
	#mainVisual img {vertical-align: bottom;}

	#top #mainVisual article {
		width: 710px;
	}
	#top #mainVisual aside {
		width: 250px;
	}
		#mainVisual li {
			height: 100px;
			position: relative;
		}
			#mainVisual a {
				display: block;
				position: absolute;
				width: 100%;
				bottom: 0;
				height: 38px;
				line-height: 44px;
				text-decoration: none;
				font-weight: bold;
				font-size: 140%;
				color: #15b73d;
				padding: 0 16px;
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				box-sizing: border-box;
				background: rgba(0,0,0,0.75);
			}

@media only screen and (max-width: 959px) {
#mainVisual {
	border-bottom: none;
}
#mainVisual .flex {
	display: block;
}
	#mainVisual img {vertical-align: bottom;}

	#top #mainVisual article,
	#top #mainVisual aside {
		width: 100%;
	}
	#top #mainVisual article {
		border-bottom: #15b73d 1px solid;
	}
	#top #mainVisual article img {
		width: 100%;
	}
	#top #mainVisual aside {
		display: table;
			width: 100%;
	}
	#top #mainVisual aside ul {
		display: table;
			width: 100%;
	}
		#mainVisual li {
			display: table-cell;
			border-right: #333 1px solid;
			width: 33.3%;
		}
		#mainVisual li:last-child {
			border-right: none;
		}
}
@media only screen and (max-width: 599px) {
	#top #mainVisual aside ul {
		background: #333;
		display: block;
			width: 100%;
	}
		#mainVisual li {
			display: block;
			border-right: none;
			width: 100%;
			border-bottom: #333 1px solid;
				height: 70px;
		}
		#mainVisual li:last-child {
			border-bottom: none;
		}
			#mainVisual a {
				height: 70px;
				line-height: 70px;
				font-size: 120%;
				color: #fff;
				background: #15b73d;
				padding: 0 16px;
			}
}

#summary {
	padding: 35px 10px 31px;
}
	#summary .message {
		font-size: 115%;
		line-height: 1.8;
		margin-bottom: 24px;
	}
@media only screen and (max-width: 599px) {
	#summary .message {
		font-size: 100%;
		text-align: left;
	}
}
.contactbox {
	margin: auto;
	width: 620px;
	border: #15b73d 2px solid;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	display: table;
}
	.contactbox h2 {
		color: #fff;
			background: #15b73d;
		width: 298px;
		display: table-cell;
		vertical-align: middle;
		font-weight: bold;
		font-size: 115%;
	}
	.contactbox div {
		width: 320px;
		text-align: center;
	}
		.contactbox .tel {
			font-weight: bold;
			font-size: 190%;
			padding: 5px 0 3px;
		}
		.contactbox .tel i {
			font-size: 180%;
			margin-right: 10px;
		}
		.contactbox .btn {
			padding: 0 15px;
			margin-bottom: 8px;
		}
			.contactbox .btn a {
				display: block;
				border-radius: 5px;
				text-decoration: none;
				font-weight: bold;
				font-size: 140%;
				line-height: 41px;
				color: #fff;
				background: #15b73d;
			}
			.contactbox .btn i {
				font-size: 140%;
				margin-right: 10px;
				color: #fff;
			}
@media only screen and (max-width: 639px) {
.contactbox {
	width: 100%;
}
	.contactbox h2 {
		padding: 0 10px;
	}
}
@media only screen and (max-width: 599px) {
.contactbox {
	width: 100%;
}
	.contactbox h2 {
		padding: 10px;
		width: 100%;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		display: block;
	}
	.contactbox div {
		width: 100%;
	}
		.contactbox .tel {
			font-size: 150%;
		}
		.contactbox .tel i {
			font-size: 160%;
			margin-right: 5px;
		}
		.contactbox .btn {
			padding: 0 10px;
		}
			.contactbox .btn a {
				font-size: 120%;
			}
			.contactbox .btn i {
				font-size: 130%;
				margin-right: 5px;
			}
}

#topNav {
	background: #dedede;
	padding: 19px 0;
}
	#topNav .topNavItem {
		background: #fff;
		width: 300px;
		margin: 0 10px;
		position: relative;
	}
		.topNavItem h2 {
			background: #15b73d;
			color: #fff;
			text-align: center;
			font-weight: bold;
			font-size: 135%;
			line-height: 52px;
			height: 48px;
		}
		.topNavItem p {
			padding: 15px;
			line-height: 2;
			padding-bottom: 37px;
		}
		.topNavItem p.more {
			display: block;
			position: absolute;
			bottom: 0;
			right: 0;
			padding: 3px 15px;
		}
			.topNavItem p.more a {
				text-decoration: none;
				font-weight: bold;
				font-size: 108%;
				color: #15b73d;
			}
				.topNavItem p.more a:before {
					content: "";
					position: absolute;
					width: 0;
					height: 0;
					top: 50%;
					left: 2px;
					margin-top: -5px;
					border: transparent 5px solid;
					border-right: none;
					border-left: #15b73d 7px solid;
				}
@media only screen and (max-width: 599px) {
#topNav {
	padding: 10px 10px 1px;
}
#topNav ul {
	display: block;
}
	#topNav .topNavItem {
		background: #fff;
		width: 100%;
		margin: 0 0 10px;
		position: relative;
	}
		.topNavItem p {
			padding: 10px;
			line-height: 1.5;
			padding-bottom: 37px;
		}
}

.newsinfo {
	padding: 20px 10px 15px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#news {
	width: 620px;
}
	#news dl {
	}
		#news dt {
			padding: 13px 12px;
			float: left;
		}
		#news dd {
			padding: 13px 12px 13px 130px;
			border-bottom: #666 1px dotted;
		}
#info {
	width: 300px;
	border: #6e6e6e 1px solid;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
	#info h2 {
		font-size: 140%;
		font-weight: bold;
		padding: 10px;
		text-align: center;
	}
	#info p {
		font-size: 115%;
		padding: 5px 40px;
		line-height: 1.8;
		margin-bottom: 5px;
	}
		#info p.map {
			font-size:inherit;
			padding: 3px 0 0;
			line-height: 1;
			margin-bottom: 0;
		}
			#info p.map a {
				background: #6e6e6e;
				font-weight: bold;
				display: block;
				text-align: center;
				text-decoration: none;
				color: #fff;
				font-size: 140%;
				line-height: 38px;
				height: 36px;
			}

@media only screen and (max-width: 639px) {
.newsinfo {
	display: block;
}
#news {
	width: 100%;
}
	#news dl {
		margin-bottom: 10px;
	}
		#news dt {
		}
		#news dd {
			padding: 13px 12px 13px 100px;
		}
#info {
	width: 100%;
}
	#info h2 {
		font-size: 120%;
		padding: 10px 10px 0;
		text-align: left;
	}
	#info p {
		font-size: 110%;
		padding: 5px 10px;
		line-height: 1.5;
	}
}
#footer {
	padding: 25px 0 80px;
	background: #15b73d;
}
#fNav ul {
	display: table;
	margin: auto;
}
#fNav li {
	display: table-cell;
}
#fNav a {
	display: block;
	text-decoration: none;
	color: #fff;
	font-size: 115%;
	padding: 0 1em;
	border-right: #fff 1px solid;
}
#fNav li:last-child a {
	border-right: none;
}

@media only screen and (max-width: 479px) {
	#footer {
		padding: 25px 0;
		background: #15b73d;
	}
	#fNav ul {
		display: block;
		margin: auto;
	}
	#fNav li {
		display: block;
	}
	#fNav a {
		border-right: none;
		text-align: right;
	}
}

h2.headline {
	border-left: #15b73d 5px solid;
	padding: 5px 20px;
	font-weight: bold;
	font-size: 120%;
	color: #15b73d;
	height: 1.5;
	margin-bottom: 18px;
}
h2.pagetitle {
	border-bottom: #15b73d 1px solid;	
}
	h2.pagetitle span {
		display: block;
		padding: 50px 5px 10px;
		font-size: 300%;
		font-weight: bold;
	}
@media only screen and (max-width: 599px) {
	h2.pagetitle span {
		padding: 20px 5px 20px;
		font-size: 180%;
	}
}

#contents {
	padding: 30px 10px 50px;
}

.unit+.unit,
.unit+.contactbox {
	margin-top: 50px;
}

h3.headline {
	border-top: #15b73d 5px solid;
	border-bottom: #15b73d 1px solid;
	padding: 5px 10px;
	font-weight: bold;
	font-size: 150%;
	color: #15b73d;
	height: 1.5;
	margin-bottom: 18px;
}
h4.headline {
	border-left: #15b73d 5px solid;
	padding: 5px 10px;
	font-weight: bold;
	font-size: 115%;
	color: #15b73d;
	height: 1.5;
	margin-bottom: 18px;
}
.unit ul,
.unit table,
.unit p {
	margin-bottom: 18px;
	line-height: 1.8;
}

table {
	border-top: #ddd 3px solid;
	width: 100%;
}
table th,
table td {
	border-bottom: #ddd 1px solid;
	padding: 5px;
}
table th {
	text-align: left;
	width: 20%;
}
table td {
	position: relative;
}
table td:before {
	position: absolute;
	content: "";
	width: 1px;
	height: 80%;
	height: calc(100% - 10px);
	top: 5px;
	left: 0px;
	background: #ddd;
}

.unit ul.normal {
	padding-left: 2em;
}
.unit ul.normal li {
	list-style: disc;
	line-height: 1.8;
}


.flex article {
	width: 58%;
	width: calc(60% - 10px);
}
.flex aside {
	width: 40%;
	text-align: center;
}
.flex aside img {
	max-width: 480px;
	width: 100%;
}
figure {
	margin: 0;
}
figure img {
	max-width: 100%
}
.flex>figure {
	width: 40%;
}

.recruit {
	border:#eeeeee solid 1px;
	border-left:none;
}

.recruit th {
	border-left:#eeeeee solid 1px;
	width:90px;
}


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

.recruit th {
	width:auto;
}


}

/*カラムスタイルを実現させる
基本的にはflexと併用
この辺りjsに置き換えちゃったのでだいぶ簡略化
*/

.column {}

.columnitem {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}


/*flex非対応ブラウザとsafariではcolumnでのflexがキャンセルされるため、その子要素を横並びにするための処理を行う*/

.ua-safari .columnitem,
.no-flexbox .columnitem {
	float: left;
}


/*column2xは左右2カラムの場合にcolumnと同じ要素に設定する
flex非対応ブラウザとsafariでの偶数目の要素を右に寄せる処理を行っているため、
htmlの記述順も左→右の順で記述する必要がある*/

.ua-safari .column2x .columnitem:nth-child(2n),
.no-flexbox .column2x .columnitem:nth-child(2n) {
	float: right;
}


/*js仕様にした場合のレスポンシブ対応案がまだ思いつかないので保留*/

@media only screen and (max-width: 959px) {
	.mobileitemsize1 {
		width: calc(100% / 12 * 1 - 10px);
	}
	.mobileitemsize2 {
		width: calc(100% / 12 * 2 - 10px);
	}
	.mobileitemsize3 {
		width: calc(100% / 12 * 3 - 10px);
	}
	.mobileitemsize4 {
		width: calc(100% / 12 * 4 - 10px);
	}
	.mobileitemsize5 {
		width: calc(100% / 12 * 5 - 10px);
	}
	.mobileitemsize6 {
		width: calc(100% / 12 * 6 - 10px);
	}
	.mobileitemsize7 {
		width: calc(100% / 12 * 7 - 10px);
	}
	.mobileitemsize8 {
		width: calc(100% / 12 * 8 - 10px);
	}
	.mobileitemsize9 {
		width: calc(100% / 12 * 9 - 10px);
	}
	.mobileitemsize10 {
		width: calc(100% / 12 * 10 - 10px);
	}
	.mobileitemsize11 {
		width: calc(100% / 12 * 11 - 10px);
	}
	.mobileitemsize12 {
		width: calc(100% / 12 * 12 - 10px);
	}
}


/*レスポンシブデザイン上で最終的に1カラムになる場合に使用*/

@media only screen and (max-width: 529px) {
	.mobileitemsize1,
	.mobileitemsize2,
	.mobileitemsize3,
	.mobileitemsize4,
	.mobileitemsize5,
	.mobileitemsize6,
	.mobileitemsize7,
	.mobileitemsize8,
	.mobileitemsize9,
	.mobileitemsize10,
	.mobileitemsize11,
	.mobileitemsize12 {
		width: 100%;
	}
}


/*-------------------------------------------------------

unit

designセクションでは吸収しきれない個別スタイルをここで設定する

-------------------------------------------------------*/

.bordercolumn {
}

.bordercolumn2x {
	overflow: hidden;
}

.bordercolumn2x .bordercolumnitem {
	width: 48%;
	width: calc(50% - 5px);
}

.bordercolumn2x .bordercolumnitem img {
	width: 100%;
}

@media only screen and (max-width: 639px) {
	.bordercolumn2x {
		display: block;
	}
	.bordercolumn2x .bordercolumnitem {
		float: none;
		width: 100%;
		margin-bottom: 9px;
	}
}

.more {
	display: none;
}


.accordion dt {
	cursor: pointer;
}
.accordion dd {
	display: none;
}

.normalaccordionstyle {
	padding: 0 10px;
}
.normalaccordionstyle dt {
	position: relative;
	padding-left: 1.2em;
}
.normalaccordionstyle dt h5 {
	font-size: 120%;
	margin-bottom: 18px;
}
.normalaccordionstyle dt:hover h5 {
	text-decoration: underline;
}
.normalaccordionstyle dt:before {
	position: absolute;
	content: "";
	width: 0;
	height: 0;
	top: 50%;
	top: calc(1em * 1.8 / 2);
	left: 0;
	margin-top: -0.5em;
	border: transparent 0.5em solid;
	border-right: none;
	border-left: #333 0.8em solid;
	transition: all 0.2s;
}
.normalaccordionstyle dt.active:before,
.normalaccordionstyle dt:hover:before {
	transform: rotate(90deg)
}
.normalaccordionstyle dd {
	padding-bottom: 18px;
}

#contactform tbody th {
	width: 20%;
}

#contactform input[type=text] {
	width: 40%;
	min-width: 200px;
	display: inline-block;
}
#contactform input,
#contactform textarea {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

#contactform input.short {
	width: 20%;
	min-width: 100px;
}


#contactform input.long,
#contactform textarea {
	width: 100%;
}

span.required,
th.required:after {
	font-size: 75%;
	background: #f00;
	padding: 0.125em 0.3em 0;
	vertical-align: middle;
	border-radius: 3px;
	color: #fff;
	display: inline-block;
}
th.required:after {
	content: "必須";
	margin-left: 1em;
}

#contactform label {
	display: inline-block;
}

#contactform textarea {
	height: 10em;
}

#contactform .caption {
	display: block;
	font-size: 75%;
}
#contactform .caption a {
	font-size:inherit;
}

@media only screen and (max-width: 479px) {
	#contactform,
	#contactform table,
	#contactform tbody,
	#contactform tr,
	#contactform th,
	#contactform td {
		border: none;
		display: block;
		border: none !important;
	}
	#contactform th,
	#contactform td {
		width: 100% !important;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		padding: 0;
	}
	#contactform td {
		margin-bottom: 18px;
	}
	#contactform tbody td:before {
		content: none;
	}
	#contactform br {
		display: none;
	}
	#contactform .annotation {
		display: block;
		font-size: 94%;
		line-height: 1.5;
	}
	#contactform .indent {
		margin-left: 2em;
	}
	#contactform .dindent {
		margin-left: 4em;
	}
	#contact input[type=text] {
		width: 60%;
		height: 2em;
	}
	#contact input.long {
		width: 100%;
	}
	#contact input.short {
		width: 40%;
	}
	#contactform label {
		display: block;
	}
}


/*-------------------------------------------------------

state

:hover、:active、:focusなどの擬似要素や
.currentなどのページの状態によって部分的に変化を起こす際にここで設定

-------------------------------------------------------*/

.current {
	cursor: default;
}

#gNav li a.current:hover,
#gNav li a.current {}


/*-------------------------------------------------------

cosmetic

その他、局所的に使用するスタイル
あるいは、汎用性の高いスタイル設定を記述

-------------------------------------------------------*/


.linklist {}
	.linklist a {
		padding-left: 10px;
		position: relative;
}
	.linklist a:after {
		top: 50%;
		left: 0;
		content: "";
		margin-top: -4px;
		position: absolute;
		border: transparent 4px solid;
		border-right: none;
		border-left: #279d51 4px solid;
		transition: all 0.2s;
}
	.linklist a:hover:after {
		left: 3px;
}
.px8 {
	font-size:62%;
}/**/
.px9 {
	font-size:68%;
}
.px10 {
	font-size:74%;
}/**/
.px11 {
	font-size:83.3%;
}
.px12 {
	font-size:93%;
}
.px13 {
	font-size:100%;
}/**/
.px14 {
	font-size:105%;
}
.px15 {
	font-size:115%;
}/**/
.px16 {
	font-size:123%;
}
.px17 {
	font-size:136%;
}/**/
.px18 {
	font-size:145%;
}
.px19 {
	font-size:154%;
}
.px20 {
	font-size:160%;
}
.px21 {
	font-size:162%;
}
.px22 {
	font-size:170%;
}
.px23 {
	font-size:177%;
}
.px24 {
	font-size:185%;
}


.red {color: red;}
strong {font-weight: bold;}

a.btn {}

.clear {
	clear: both;
}

.txtAlignC {
	text-align: center;
}

.txtAlignR {
	text-align: right;
}

.vAlignMiddle {
	vertical-align: middle;
	margin: 0 5px;
}

.floatContentsR {
	float: right;
	margin: 0 0 10px 10px;
}

.floatContentsL {
	float: left;
	margin: 0 10px 10px 0;
}

.floatContentsR,
.floatContentsL {
	max-width: 49%;
	max-width: calc(50% - 10px);
}

.floatContentsR img,
.floatContentsL img {
	width: 100%;
}

@media only screen and (max-width: 959px) {
	.floatContentsR {
		margin: 0 0 10px 5px;
	}
	.floatContentsL {
		margin: 0 5px 10px 0;
	}
	.floatContentsR,
	.floatContentsL {
		w200px max-width: 49%;
		max-width: calc(50% - 5px);
	}
}

@media only screen and (max-width: 479px) {
	.floatContentsR,
	.floatContentsL {
		margin: 0 0 0 0;
	}
	.floatContentsR,
	.floatContentsL {
		max-width: 100%;
	}
	.floatContentsR img,
	.floatContentsL img {
		vertical-align: bottom;
	}
}

em {
	color: #c00;
}