@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@500;700;900&display=swap');

@font-face {
	font-family:'CGothic';
	src:url('images/fonts/CGothic.ttf') format('truetype');
}
@font-face {
	font-family:'CSerif';
	src:url('images/fonts/CSerif.ttf') format('truetype');
}


/* ==========================================================================================================================================
	variables
=========================================================================================================================================== */
* {
	--base-font:'Noto Serif JP',serif;
	--title-color:#fc6;
	--strong-color:#f06;
}


@media screen and (min-width:800px) { 
	.xElements > :nth-child(2) ,
	.dispSP {
		display:none !important;
	}
}
@media screen and (max-width:799px) { 
	.xElements > :nth-child(1) ,
	.dispPC {
		display:none !important;
	}
}
.noDisp {
	display:none !important;
}

@keyframes animateBlink {
	  0% { opacity:1; }
	100% { opacity:0.1; }
}


/* ==============================================
	CSS reset
=============================================== */
* ,*:before ,*:after {
	box-sizing:border-box;
	text-size-adjust:100%;
	-webkit-text-size-adjust:100%;
}
html ,body ,div ,p ,span ,iframe ,a ,img ,
h1 ,h2 ,h3 ,h4 ,h5 ,h6 ,
dl ,dt ,dd ,ol ,ul ,li ,
form ,label ,
table ,thead ,tbody ,tfoot ,tr ,th ,td ,
blockquote ,q ,pre ,
strong ,em ,i ,small ,
header ,footer ,nav ,article ,section ,aside {
	margin:0;
	padding:0;
	border:0 none;
	color:inherit;
	font-size:inherit;
	font-weight:inherit;
	font-style:inherit;
	text-decoration:inherit;
}
button ,input ,textarea ,select {
	font-size:100%;
	padding:0.1em 0.3em;
	margin:0;
	letter-spacing:1px;
	color:#eee;
	background:#333;
	border:1px solid #666;
	font-family:var(--base-font);
}
input[type="submit"] ,button {
	padding:0.3em 2em;
}

html ,body {
	min-height:100%;
	height:100%;
}
a {
 	transition:all 0.3s ease;
    -webkit-transition:all 0.3s ease;
}
a:hover {
}

img {
	max-width:100%;
	vertical-align:top;
	backface-visibility:hidden;
	-webkit-backface-visibility:hidden;
}

ol ,ul ,li {
	list-style:none;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
blockquote ,q {
	quotes:none;
}
blockquote:before ,blockquote:after
,q:before ,q:after {
	content:'';
	content:none;
}
.iframeOuter {
	overflow:auto;
	-webkit-overflow-scrolling:touch;
}
.iframeOuter > * {
	display:block;
	width:100%;
	height:100%;
	height:-webkit-fill-available;
}



/* ==============================================
	cleafix
=============================================== */
.clearfix:after {
	display:block;
	clear:both;
	height:0px;
	line-height:0px;
	visibility:hidden;
	content:".";
}
.clearfix {
	display: block; /* for IE8 */
	zoom: 1; 
}

/* ============================================================================================
	common
============================================================================================= */


/* ==============================================
	contents
=============================================== */
@media screen and (min-width:800px) { 
	* {
		--frame-max-width:1600px;
		--frame-min-width:1200px;
	}
}
@media screen and (max-width:799px) { 
	* {
		--frame-max-width:480px;
		--frame-min-width:480px;
	}
}


section {
	padding:3em 0;
	scroll-margin-top:4em;
}

.innerFrame {
	position:relative;
	width:100%;
	max-width:var(--frame-max-width);
	min-width:var(--frame-min-width);
	margin:0 auto;
	padding:0 1em;
}

@media screen and (max-width:799px) {
	section {
		padding:2em 0;
		scroll-margin-top:2.5em;
	}
}



/* ==============================================
	titlebar
=============================================== */
.titleBar {
	width:100%;
	max-width:var(--frame-max-width);
	min-width:var(--frame-min-width);
	margin:0 auto;
	padding:0 1em 3em;
}
.titleBarInner {
	color:var(--title-color);
	letter-spacing:0.05em;
	text-indent:0.05em;
}
.titleBar span.en {
	position:relative;
	display:block;
	padding:0 0.5em;
	font-size:350%;
	line-height:1.6;
}
.titleBar span.en:after {
	content:"";
	position:absolute;
	bottom:0;
	left:0;
	display:block;
	width:100%;
	height:5px;
	background:linear-gradient(90deg,#c93f,#c930);
}
.titleBar span.jp {
	display:block;
	padding:0 1.5em;
	font-size:150%;
}

main > section:nth-of-type(2n) .titleBarInner {
	text-align:right;
}
main > section:nth-of-type(2n) .titleBar span.en:after {
	background:linear-gradient(-90deg,#c93f,#c930);
}


@media screen and (max-width:799px) {
	.titleBar {
		padding:0 0.5em 1em;
	}
	.titleBar:not(.sub) span:nth-child(1) {
		font-size:200%;
	}
	.titleBar:not(.sub) span:nth-child(2) {
		font-size:120%;
	}
}

.titleBar.sub {
	align-items:baseline;
	flex-direction:row;
}
.titleBar.sub span:nth-child(1) {
	font-size:300%;
}
.titleBar.sub span + span {
	padding-left:0.5em;
}

@media screen and (max-width:799px) {
	.titleBar.sub {
		align-items:center;
		flex-direction:column;
	}
	.titleBar.sub span:nth-child(1) {
		font-size:250%;
	}
	.titleBar.sub span:nth-child(2) {
		padding-top:0.3em;
		font-size:150%;
	}
	.titleBar.sub span + span {
		padding-left:0;
	}

}



/* ==============================================
	flex
=============================================== */
.flex {
	display:flex;
	justify-content:center;
	align-items:center;
}
.flex > * {
	padding:0 1em;
}

@media screen and (max-width:799px) { 
	.flex > * {
		padding:0 0.5em;
	}
}


/* ==============================================
	common attribute
=============================================== */
.left {
	text-align:left;
}
.center {
	text-align:center;
}
.right {
	text-align:right;
}


.sendIP {
	margin-top:1em;
	color:#999;
	font-size:xx-small;
	text-align:right;
}

.noData {
	padding:5em 0 10em;
	width:100%;
	text-align:center;
}

.strong {
	color:var(--strong-color);
	font-size:120%;
}

.bold {
	font-weight:bold;
}

.border {
	border:1px solid #666;
}




/* ==========================================================================================================================================
	base layout
=========================================================================================================================================== */
html {
	scroll-behavior:smooth;
}
body {
	position:relative;
	color:#eee;
	background:url(images/common/bg.jpg) #000;
	font-size:18px;
	line-height:2;
	font-family:var(--base-font);
}
#bgLayer {
	width:100%;
	margin:0 auto;
}




@media screen and (max-width:799px) { 
	body {
		line-height:1.6;
	}
	#bgLayer {
		width:480px;
	}
}



/* ==============================================
	pagetop button
=============================================== */
#scrollTop {
	position:fixed;
	right:0.5em;
	bottom:0.5em;
	width:4em;
	aspect-ratio:1/1;
	cursor:pointer;
	display:none;
}
#scrollTopInner {
	width:100%;
	height:100%;
	line-height:1.2;
	background:rgba(51,51,51,0.3);
	border:1px solid #ccc;
	border-radius:0.3em;
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction:column;
}
#scrollTopInner:hover {
	filter:brightness(1.2);
}


@media screen and (max-width:799px) { 
	#scrollTop {
		width:3em;
	}
	#scrollTopInner span {
		font-size:80%;
	}
}



/* ============================================================================================
	header
============================================================================================= */
h1 {
	font-size:80%;
	line-height:1.2;
	padding-left:0.5em;
}

@media screen and (max-width:799px) { 
	h1 {
		font-size:70%;
	}
}

/* ==============================================
	header
=============================================== */
header {
	position:relative;
	z-index:10;
	background:rgba(0,0,0,0.5);
	border-bottom:1px solid #666;
}
#headerInfo {
	padding:0.5em 1em;
	display:flex;
	justify-content:space-between;
	align-items:flex-end;
}
#headerInfo img {
	max-height:4.5em;
}

#headerInfo .info {
	line-height:1.3;
	text-align:right;
}
#headerInfo .info .tel {
	font-size:200%;
}



@media screen and (max-width:799px) { 
	#headerInfo {
		position:fixed;
		top:0;
		background:rgba(0,0,0,0.5);
		border-bottom:1px solid #666;
		z-index:10003;

		padding:0.3em 0.5em;
		justify-content:space-between;
		align-items:center;
	}
	#headerInfo .logo img {
		height:2.5em;
	}
	#headerInfo .info {
		margin-left:auto;
		padding-right:1em;
		line-height:1.2;
	}
	#headerInfo .info .name {
		font-size:70%;
	}
	#headerInfo .info .tel {
		font-size:150%;
	}



	.SPMenuIcon {
		position:relative;
		width:2.8em;
		height:2.8em;
		border:1px solid #eee;
		border-radius:0.3em;
	}

	.SPMenuIcon span ,
	.SPMenuIcon:before ,
	.SPMenuIcon:after {
		position:absolute;
		top:50%;
		margin-top:-2px;
		left:0.3em;
		right:0.3em;
		display:block;
		height:3px;
		border-radius:1.5px;
		background:#eee;
	 	transition:all 0.3s ease;
	    -webkit-transition:all 0.3s ease;
	}
	.SPMenuIcon:before {
		content:"";
		top:25%;
	}
	.SPMenuIcon:after {
		content:"";
		top:75%;
	}

	.menuOn .SPMenuIcon span {
		opacity:0;
	}
	.menuOn .SPMenuIcon:before {
		top:50%;
		-webkit-transform:rotate(45deg);
		transform:rotate(45deg);
	}
	.menuOn .SPMenuIcon:after {
		top:50%;
		-webkit-transform:rotate(135deg);
		transform:rotate(135deg);
	}

}

/* ==============================================
	header nav
=============================================== */
@media screen and (min-width:800px) { 
	#headerNav {
		position:sticky;
		top:0;
		z-index:10001;
		padding:0.3em 0 0.5em;
		background:rgba(0,0,0,0.7);
		border-bottom:2px solid #666;
	}

	#headerNav .navMenu {
		position:relative;
		max-width:1600px;
		margin:0 auto;
		padding-left:1px;
		display:flex;
		justify-content:center;
		align-items:center;
	}
	#headerNav .navMenu .navCell {
		position:relative;
		flex-grow:1;
		padding-right:1px;
		display:flex;
		justify-content:center;
		align-items:center;
	}
	#headerNav .navMenu:before ,
	#headerNav .navMenu .navCell:after {
		content:"";
		position:absolute;
		top:1em;
		bottom:1em;
		display:block;
		width:1px;
		background:#666;
	}
	#headerNav .navMenu:before {
		left:0;
	}
	#headerNav .navMenu .navCell:after {
		right:0;
	}

	#headerNav .navMenu .aLink {
		width:100%;
		padding:0.5em 0.5em;
		line-height:1.4;
		color:#eee;
		display:flex;
		justify-content:center;
		align-items:center;
		flex-direction:column;
	}
	#headerNav .navMenu .aLink > span:nth-child(1) {
		font-size:120%;
	}
	#headerNav .navMenu .aLink > span:nth-child(2) {
		font-size:85%;
	}

	#headerNav .navMenu .aLink:after {
		content:"";
		position:absolute;
		bottom:0.1em;
		left:1em;
		right:1em;
		display:block;
		height:2px;
		background:linear-gradient(90deg,#fc63,#fc6f,#fc63);
		-webkit-transform:scaleX(0%);
		transform:scaleX(0%);
	 	transition:all 0.3s ease;
	    -webkit-transition:all 0.3s ease;
	}
	#headerNav .navMenu .navCell.active a.aLink:after ,
	#headerNav .navMenu a.aLink:hover:after {
		-webkit-transform:scaleX(100%);
		transform:scaleX(100%);
	}
}


@media screen and (max-width:799px) { 
	#headerNav {
		position:fixed;
		right:-110%;
		top:0;
		display:block;
		width:100%;
		height:100%;
		padding:4em 1em 1em;
		background:rgba(0,0,0,0.5);
		z-index:9;
	 	transition:all 0.3s ease;
	    -webkit-transition:all 0.3s ease;
	}

	#headerNav .contents-navi {
		width:100%;
		height:100%;
		padding:1em;
		text-align:center;
		overflow:auto;
	}

	#headerNav .navCell {
		padding-bottom:0.8em;
	}

	#headerNav .aLink {
		display:block;
		width:100%;
		padding:0.3em 0.3em 0.2em;
		line-height:1.2;
		background:rgba(0,0,0,0.5);
		border:1px solid #999;
		border-radius:0.3em;
	}
	#headerNav .aLink > span {
		display:block;
	}
	#headerNav .aLink > span:nth-child(1) {
		font-size:120%;
	}
	#headerNav .aLink > span:nth-child(2) {
		font-size:90%;
	}

	#headerNav .snsList img {
		width:3em;
	}



	.menuOn {
		overflow:hidden;
	}
	.menuOn #headerNav {
		right:0;
	}
	.menuOn #fv ,
	.menuOn main ,
	.menuOn footer ,
	.menuOn #scrollTop ,
	.menuOn #SPBottom {
		filter:blur(4px);
	}
}









/* ============================================================================================
	main
============================================================================================= */
main > :last-child {
	padding-bottom:6em;
}


.nopage {
	padding:2em;
	min-height:40vh;

}
.nopage a {
	color:#06f;
}
.nopage a:hover {
	color:#f06;
}




/* ============================================================================================
	footer
============================================================================================= */



/* ==============================================
	footer
=============================================== */
#footerInfo {
	padding:2em 0 1em;
	text-align:center;
	background:#222;
	border-top:2px solid #666;
}

#footerInfo .logo {
	width:240px;
	margin:0 auto;
	padding-bottom:0.5em;
}



#footerInfo #copyright {
	padding-top:2em;
	font-size:90%;
}


@media screen and (max-width:799px) {
	#footerInfo .text {
		padding:0.3em 0;
		line-height:1.4;
	}

	#footerInfo #copyright {
		font-size:80%;
	}
}






/* ============================================================================================
	contents block
============================================================================================= */

/* ============================================================================================
	fv
============================================================================================= */
#fv {
	position:relative;
	z-index:1;
	margin:-200px auto 0;
	width:100%;
	min-width:var(--frame-min-width);
	display:flex;
	justify-content:center;
	overflow:hidden;
}
#fv > img {
	width:1920px;
	height:100vh;
	min-height:800px;
	max-width:none;
	object-fit:cover;
	object-position:top center;
}

#fv .logo{
	position:absolute;
	top:300px;
	bottom:0;
	left:0;
	right:0;
	display:flex;
	justify-content:flex-start;
	align-items:center;
	flex-direction:column;
}
#fv .logo .gp{
	width:150px;
	filter:drop-shadow(0px 0px 0.3em #000);
}
#fv .logo .shop{
	padding-top:1.5em;
	width:500px;
	filter:drop-shadow(0px 0px 0.3em #000);
}

@media screen and (max-width:799px) {
	#fv {
		margin-top:0;
	}
	#fv > img {
		width:100%;
		height:640px;
		min-height:auto;
	}
	#fv .logo {
		top:200px;
	}
	#fv .logo .gp{
		width:90px;
	}
	#fv .logo .shop{
		padding-top:0.2em;
		width:270px;
	}
}



/* ============================================================================================
	slider
============================================================================================= */
#homeSliderBloc ,
#homeSliderBloc:before ,
#homeSliderBloc:after {
	--slider-width:800px;
	--slider-border-padding:2em;
	--slider-border-height:3.5em;
}
@media screen and (max-width:799px) {
	#homeSliderBloc ,
	#homeSliderBloc:before ,
	#homeSliderBloc:after {
		--slider-width:360px;
		--slider-border-padding:1.5em;
		--slider-border-height:2.5em;
	}
}


#homeSliderBloc {
	position:relative;
	min-width:var(--frame-min-width);
	margin:0 auto;
	padding:4em 0 2em;
}
#homeSliderBloc:before ,
#homeSliderBloc:after {
	content:"";
	position:absolute;
	top:var(--slider-border-padding);
	left:0;
	right:0;
	display:block;
	height:var(--slider-border-height);
	background:url(images/common/border.png) 50% 50% repeat-x;
	background-size:auto 100%;
	z-index:10;
}
#homeSliderBloc:after {
	top:calc(var(--slider-width) / 4 * 3 + var(--slider-border-padding));
}

#homeSlider {
	margin-left:calc(50% - var(--slider-width) / 2);
}
#homeSlider li {
	width:var(--slider-width) !important;
}
#homeSlider li img {
	width:var(--slider-width);
	aspect-ratio:800 / 600;
	object-fit:cover;
}

#homeSliderBloc .bx-wrapper .bx-pager {
	padding:2em 0 0;
}

@media screen and (max-width:799px) {
	#homeSliderBloc {
		padding:3em 0 2em;
	}
}


/* ============================================================================================
	concept
============================================================================================= */
#concept {
	padding:4em 0 6em;
	background:url(images/common/concept.jpg) 0 0 no-repeat;
	background-size:cover;
}

#concept .titleBarBG {
	background:rgba(0,0,0,0.6);
}
#concept .titleBarBG .titleBar {
	padding:0 1em 0.5em;
}

#concept .innerFrame {
	padding-top:3em;
}
.conceptFrame {
	width:80%;
	margin-left:auto;
	padding:2em;
	background:rgba(0,0,0,0.6);
}
.conceptFrame .main {
	font-size:160%;
}
.conceptFrame .sub {
	padding-top:1em;
	font-size:110%;
}


@media screen and (max-width:799px) {
	#concept {
		padding:2em 0 2em;
		background-position:60% 0;
	}
	#concept .innerFrame {
		padding-top:1em;
	}

	.conceptFrame {
		width:100%;
		padding:1em;
	}
	.conceptFrame .main {
		font-size:120%;
	}
	.conceptFrame .sub {
		font-size:100%;
	}
}




/* ============================================================================================
	system
============================================================================================= */
.systemFrame {
	display:flex;
	justify-content:space-between;
	align-items:center;
}
.systemFrame > * {
	width:50%;
	padding:0 2em;
}

.systemFrame table {
	width:100%;
	font-size:120%;
}
.systemFrame caption {
	line-height:1.3;
	padding-bottom:1em;
	color:var(--title-color);
	text-align:left;
}
.systemFrame caption > * {
	display:block;
}
.systemFrame caption > .main {
	font-size:200%;
}
.systemFrame caption > .sub {
	font-size:130%;
}

.systemFrame th ,
.systemFrame td {
	width:calc(100% / 3);
	padding:0.3em 0;
	line-height:1.5;
	text-align:center;
 	white-space:nowrap;
}
.systemFrame td.notes {
	padding:0.3em 0;
}


.systemFrame + .systemFrame {
	padding-top:6em;
}


#system .innerFrame > .systemFrame:nth-child(2n) {
	flex-direction:row-reverse;
}


@media screen and (max-width:799px) {
	.systemFrame table {
		font-size:110%;
	}
	.systemFrame caption > .main {
		font-size:130%;
	}
	.systemFrame caption > .sub {
		font-size:100%;
	}
	.systemFrame {
		flex-direction:column !important;
	}
	.systemFrame > * {
		width:100%;
		padding:0 0.5em;
	}
	.systemFrame > .image {
		padding-top:1em;
	}
	.systemFrame th ,
	.systemFrame td {
		width:auto;
		padding:0.3em 0;
	}

	.systemFrame + .systemFrame {
		padding-top:2em;
	}

}



/* ============================================================================================
	contact us
============================================================================================= */
.contactButton {
	display:flex;
	justify-content:center;
}
.contactButton > * {
	width:40%;
	min-width:580px;
	padding:0 2em;
}

.contactButton a {
	padding:1em;
	color:#eee;
	background:#039;
	display:flex;
	justify-content:flex-start;
	align-items:stretch;
}
.contactButton a:hover {
	box-shadow:0 0 0 2px #ccc;
}

.contactButton a > img {
	width:4em;
	aspect-ratio:1/1;
	border-radius:0.3em;
}
.contactButton a > .text {
	line-height:1;
	padding-left:1.5em;
	display:flex;
	justify-content:space-around;
	flex-direction:column;
}
.contactButton a .tel {
	font-size:200%;
	font-weight:bold;
	letter-spacing:0.05em;
}
.contactButton a .sub {
	font-size:110%;
}


.contactButton > *:nth-child(2n) a {
	background:#960;
}


@media screen and (max-width:799px) {
	.contactButton {
		flex-direction:column;
		align-items:center;
	}
	.contactButton > * {
		width:95%;
		min-width:auto;
	}
	.contactButton > * + * {
		padding-top:1em;
	}

	.contactButton a {
		padding:0.5em 1em;
	}
	.contactButton a > img {
		width:3em;
	}
	.contactButton a > .text {
		padding-left:1em;
	}
	.contactButton a .tel {
		font-size:130%;
	}
	.contactButton a .sub {
		font-size:100%;
	}
}


/* ============================================================================================
	sns
============================================================================================= */
.snsTitle {
	width:var(--frame-min-width);
	max-width:100%;
	margin:0 auto;
	letter-spacing:0.1em;
	padding-bottom:2em;
	color:#aaa;
	display:flex;
	align-items:baseline;
}
.snsTitle > .en {
	font-size:240%;
	padding-right:0.5em;
}
.snsTitle > .jp {
	font-size:150%;
	padding-right:0.5em;
}
.snsTitle:after {
	content:"";
	flex-grow:1;
	height:2px;
	background:linear-gradient(90deg,#aaac,#aaaf,#aaa0);
}

#sns > .innerFrame + .innerFrame {
	padding-top:2em;
}

#sns .flex.banner {
	padding:0 2em;
}
#sns .flex a {
	padding:0;
}
#sns .flex a:hover {
	box-shadow:0 0 0 2px #ccc;
}


@media screen and (max-width:799px) {
	.snsTitle {
		padding-bottom:1em;
	}
	.snsTitle > .en {
		font-size:160%;
	}
	.snsTitle > .jp {
		font-size:110%;
	}
}



/* ============================================================================================
	information
============================================================================================= */
.informationFrame {
	display:flex;
	justify-content:center;
}
.informationFrame > * {
	width:50%;
	padding:0 1em;
}
.informationFrame > .image {
	text-align:right;
}
.informationFrame > .text {
	font-size:110%;
}
.informationFrame > .text > div + div {
	padding-top:0.5em;
}


@media screen and (max-width:799px) {
	.informationFrame {
		align-items:center;
		flex-direction:column;
	}
	.informationFrame > .image {
		width:80%;
		
	}
	.informationFrame > .text {
		width:100%;
		padding-top:1em;
		line-height:1.5;
		text-align:center;
	}

}



/* ============================================================================================
	access
============================================================================================= */
#access iframe {
	width:100% !important;
}


/* ============================================================================================
	recruit
============================================================================================= */
.recruitFrame + .recruitFrame {
	padding-top:3em;
}
.recruitTable {
	width:80%;
	margin:0 auto;
	padding:0.5em 2em;
	border:1px solid #999;
}

.recruitTable table {
	width:100%;
	line-height:1.8;
	border-collapse:separate;
	border-spacing:0.5em;
}

.recruitTable caption {
	padding:0 1em;
	border-bottom:1px solid #999;
	text-align:left;
}
.recruitTable caption .en {
	font-size:250%;
}
.recruitTable caption .jp {
	padding-left:1em;
	font-size:130%;
}

.recruitTable th {
	width:20%;
	padding:0.5em 1em;
	background:#400;
	text-align:right;
}
.recruitTable td {
	width:80%;
	padding:0.5em 1em;
}

#recruit .innerFrame > .recruitFrame:nth-child(2n) .recruitTable th {
	background:#004;
}



.recruitButton {
	display:flex;
	justify-content:center;
}
.recruitButton > * {
	padding:3em 2em 0;
}

.recruitButton a {
	display:block;
}
.recruitButton a:hover {
	box-shadow:0 0 0 2px #ccc;
}


@media screen and (max-width:799px) {
	.recruitTable {
		width:100%;
		padding:0.3em 0.5em;
	}

	.recruitTable table {
		border-spacing:0.2em;
	}

	.recruitTable caption {
		padding:0 0.5em;
	}
	.recruitTable caption .en {
		font-size:150%;
	}
	.recruitTable caption .jp {
		font-size:110%;
	}

	.recruitTable table th {
		width:0;
		padding:0.5em;
		line-height:1.3;
	}
	.recruitTable table td {
		width:auto;
		padding:0.5em;
	}

	.recruitButton > * {
		padding:2em 0.5em 0;
	}

}



/* ============================================================================================
	group link
============================================================================================= */
.groupList {
	display:flex;
	justify-content:space-evenly;
}

.groupList > * {
	width:calc(100% / 7 - 0.5em);
	max-width:200px;
	aspect-ratio:200 / 120;
}
.groupList > * a {
	display:block;
	width:100%;
	height:100%;
}
.groupList > * img {
	width:100%;
	height:100%;
	object-fit:contain;
	background:#000;
	outline:1px solid #999;
}
.groupList > * a:hover {
	box-shadow: 0 0 0 2px #ccc;
}

@media screen and (max-width:799px) {
	.groupList {
		flex-wrap:wrap;
	}
	.groupList > :first-child {
		display:none;
	}
	.groupList > * {
		width:calc(100% / 3);
		padding:0.5em;
	}
}


/* ============================================================================================
	form
============================================================================================= */
.formMessage {
	font-size:150%;
	text-align:center;
	padding-bottom:2em;
}
.formNotes {
	padding-top:1em;
	text-align:center;
}


.formResponse {
	font-size:120%;
	text-align:center;
}
.formResponse .strong {
	padding-bottom:1em;
}


@media screen and (max-width:799px) {
	.formResponse {
	}
	.formResponse p {
		padding-bottom:1em;
		text-align:left;
	}
}


/* ==============================================
	form table
============================================== */
.formTable {
	width:100%;
	font-size:110%;
	border-spacing:1em;
	border-collapse:separate;
}
.formTable th {
	width:40%;
	text-align:right;
}
.status2 .formTable th {
	width:48%;
}
.formTable td > div {
	display:flex;
	flex-wrap:wrap;
}
.formTable td > div .error {
	width:100%;
}


@media screen and (max-width:799px) {
	.formTable ,.formTable caption ,
	.formTable thead ,.formTable tbody ,.formTable tfoot ,
	.formTable tr ,.formTable th ,.formTable td {
		display:block;
		width:100%;
		text-align:center;
	}

	.formTable {
		width:80%;
		margin:0 auto;
		font-size:100%;
	}
	.formTable th {
		padding:;
	}
	.formTable td {
		padding:0 1em 1em;
	}
}


/* ==============================================
	form parts
============================================== */
.formTable .optional ,
.formTable .required {
	display:flex;
	justify-content:flex-end;
	align-items:center;
}
.formTable .optional:after ,
.formTable .required:after {
	content:attr(data-text);
	margin-left:1em;
	padding:0 0.3em;
	font-size:70%;
	line-height:1.5;
	color:transparent;
}
.formTable .required:after {
	color:#fff;
	background:#f06;
}

@media screen and (max-width:799px) {
	.formTable .optional ,
	.formTable .required {
		justify-content:flex-start;
	}
}



.field-group.flex {
	justify-content:flex-start;
}
.field-group.flex > :first-child {
	padding-left:0.2em;
}
.field-group.flex .radio.flex {
	align-items:center;
}

input[type='radio'] ,input[type='checkbox']{
	width:1em;
	height:1em;
	-webkit-appearance:auto; 
	appearance:auto;
}
input[type="checkbox"] ,
input[type="radio"] {
	position:relative;
	z-index:2;
	accent-color:#960;
	cursor:pointer;
}
input[type="checkbox"] + label ,
input[type="radio"] + label {
	position:relative;
	width:100%;
	margin-left:-1.5em;
	padding:0.1em 1.2em 0.1em 1.7em;
	border-radius:5px;
	transition:all 0.1s ease;
	-webkit-transition:all 0.1s ease;
	white-space:nowrap;
	cursor:pointer;
}
input[type="checkbox"]:checked + label ,
input[type="radio"]:checked + label {
	background:#960;
}

textarea {
	width:20em;
	height:6em;
}

.formButton {
	padding:2em 0;
	text-align:center;
}
.formButton input {
	font-size:120%;
	color:#eee;
	background:#333;
	border:1px solid #666;
	cursor:pointer;
	transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
}
.formButton input:hover {
	color:#000;
	background:#c96;
	border-color:#960;
}


@media screen and (max-width:799px) {
	.formButton input {
		font-size:110%;
	}
}