@charset "utf-8";
/*
Theme Name: sample-recruit
Description:
Version: 1.0
*/

/* Base Style
================================================== */
body {
	position: relative;
	background-color: var(--white);
	color: var(--textBody);
	font-size: var(--font16);
	font-family: 'Noto Sans',  'Noto Sans JP', YuGothic, 'Yu Gothic Medium', 'Yu Gothic', sans-serif;
	font-weight: 400;
	line-height: 1.5;
	overflow-x: hidden;
	-webkit-text-size-adjust: 100%;
}

a:link {
	color: var(--linkColor);
}
	
a:visited {
	color: var(--visitColor);
}

a:hover,
a:focus {
	color: var(--hoverColor);
}

a {
	transition: all .3s ease-out;
}

@media (hover: hover) {
	a:focus img {
		background-color: transparent;
	}
}

:focus-visible {
	outline: 2px solid var(--mainColor);
}

sup {
	font-size: var(--font12);
	vertical-align: text-top;
	line-height: 1;
}

sub {
	font-size: var(--font12);
	vertical-align: text-bottom;
	line-height: 1;
}

img,
svg {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
	image-rendering: -webkit-optimize-contrast;
}

a svg {
	margin-left: .125em;
	vertical-align: middle;
}

#map-canvas img {
	max-width: none;
}

pre, code, kbd, samp, tt {
	font-family: 'Courier New', Courier, Monaco, monospace;
}

abbr[title], dfn[title] {
	border-bottom-color: #999;
	cursor: help;
}

input, select, textarea {
	color: var(--black);
	font-family: inherit;
	font-size: 100%;
}

input[type="submit"],
input[type="button"] {
	-webkit-appearance: none;
	-moz-appearance: none;
}

:focus:not(:focus-visible) {
  outline: none;
}

::-webkit-input-placeholder {
	padding-top: 2px;
}

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

.hide,
.srOnly {
	position: absolute;
	overflow: hidden;
	width: 0;
	height: 0;
}

.icon-external-link {
	display: inline-block;
	margin: 0 .25em;
	vertical-align: middle;
}

.page-home {
	text-transform: uppercase;
}

.contentBody a,
.archives a {
	text-decoration: underline;
}

#commonHeader p,
#commonFooter p {
	margin-bottom: 0;
	line-height: 1.5;
}

#commonHeader ul,
#commonFooter ul,
#breadcrumb ol,
#home ul,
#home ol,
ul.newsList {
	list-style: none;
	padding-left: 0;
	margin-bottom: 0;
}

@media screen and (min-width: 801px) {
	.sp {
		display: none;
	}
}

@media screen and (max-width: 800px) {
	.pc {
		display: none;
	}
}

/* Layout
================================================== */
.inner {
	max-width: 980px;
	margin: 0 auto;
}

@media screen and (max-width: 1040px) {
	.inner {
		margin: 0 30px;
	}
}

@media screen and (max-width: 800px) {
	.inner {
		margin: 0 3.75%;
	}
}

/* Block Skip
================================================== */
.skip a {
	display: block;
	height: 0;
	overflow: hidden;
}

.skip a:focus {
	height: auto;
}

/* Header
================================================== */
#commonHeader {
	position: fixed;
	width: 100%;
	background-color: var(--white);
	z-index: 100;
}

#commonHeader .inner {
	max-width: none;
	margin: 0 30px;
	padding: 30px 0;
	display: flex;
	column-gap: 48px;
	align-items: center;
	justify-content: space-between;
}

#commonHeader .logo {
	height: 72px;
	line-height: 1;
}

#commonHeader h1.logo::after {
	content: none;
}

#commonHeader .logo img {
	height: 100%;
	width: auto;
}

.entry a {
	display: flex;
	column-gap: 10px;
	align-items: center;
	padding: 12px 20px;
	border: 1px solid var(--btnColor);
	border-radius: 16px;
	background-color: var(--btnColor);
	color: var(--white);
	font-size: var(--font20);
	font-weight: 700;
	text-decoration: none;
	text-transform: uppercase;
}

.entry a::after {
	content: '→';
	font-size: var(--font16);
}

@media (hover: hover) {
	.entry a:hover {
		background-color: var(--gray60);
	}
}

@media screen and (max-width: 980px) {
	#commonHeader .inner {
		padding: 20px 0;
		column-gap: 12px
	}
	
	#commonHeader .logo {
		height: 56px;
	}
	
	.entry {
		position: fixed;
		bottom: 12px;
		right: 30px;
		z-index: 99;
		transition: bottom .3s ease-out;
	}
	
	body#entry .entry {
		display: none;
	}
}

@media screen and (max-width: 800px) {
	#commonHeader .inner {
		margin: 0 3.75%;
	}
	
	.entry {
		right: 3.75%;
	}
}

@media screen and (max-width: 480px) {
	#commonHeader .inner {
		padding: 12px 0;
	}
}

/* Menu button
-------------------------------------------------- */
#menuBtn,
.focusTrap {
	display: none;
}

@media screen and (max-width: 980px) {
	#menuBtn {
		display: block;
		width: 56px;
		height: 56px;
		background-color: var(--subColor);
		position: relative;
	}
	
	#menuBtn button {
		width: 100%;
		height: 100%;
		vertical-align: top;
		position: relative;
	}
	
	#menuBtn::after,
	#menuBtn button::before,
	#menuBtn button::after {
		content: '';
		position: absolute;
		width: 30px;
		left: 50%;
		transform: translateX(-50%);
		border-bottom: 2px solid #666;
		cursor: pointer;
		transition: top .3s .3s, transform .3s;
	}
	
	#menuBtn::after {
		top: calc(50% - 1px);
	}
	
	#menuBtn button::before {
		top: 30%;
	}
	
	#menuBtn button::after {
		top: calc(70% - 2px);
	}
	
	body.menuOpen #menuBtn::after {
		width: 0;
	}
	
	body.menuOpen #menuBtn button::before,
	body.menuOpen #menuBtn button::after {
		top: calc(50% - 1px);
		transition: top .3s, transform .3s .3s;
	}
	
	body.menuOpen #menuBtn button::before {
		transform: translateX(-50%) rotate(45deg);
	}
	
	body.menuOpen #menuBtn button::after {
		transform: translateX(-50%) rotate(-45deg);
	}
}

/* Global Nav
-------------------------------------------------- */
#globalNav a {
	color: var(--gray80);
	text-decoration: none;
}

#globalNav a:hover {
	color: var(--gray60);
}

@media screen and (min-width: 981px) {
	#globalNav {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		column-gap: 64px;
		margin: -20px 0;
	}
	
	#globalNav ul {
		display: flex;
		flex-wrap: wrap;
		gap: 3px 24px;
		max-width: 800px;
	}
}

@media screen and (max-width: 980px) {
	#globalNav {
		position: absolute;
		top: 96px;
		left: 0;
		width: 100%;
		height: 0;
		overflow-y: auto;
		overflow-x: hidden;
		z-index: 50;
		padding: 0 20px;
		text-align: center;
		visibility: hidden;
		background-color: var(--white);
		transition: height .3s;
	}
	
	body.menuOpen #globalNav {
		height: calc(100dvh - 96px);
		padding-top: 20px;
		visibility: visible;
		opacity: 1;
	}
	
	#globalNav ul {
		opacity: 0;
	}
	
	body.menuOpen #globalNav ul {
		opacity: 1;
	}
	
	#globalNav li a {
		display: block;
		padding: 12px;
	}
	
	body.menuOpen {
		overflow: hidden;
	}
	
	body.menuOpen .focusTrap {
		display: block;
	}
}

@media screen and (max-width: 480px) {
	#globalNav {
		top: 80px;
	}
	
	body.menuOpen #globalNav {
		height: calc(100dvh - 80px);
	}
}

/* Content
================================================== */
#content {
	margin-top: 132px;
}

body:not(#home) #content {
	padding-top: 64px;
	margin-bottom: 120px;
}

body:not(#home):not(#post) #content h1 {
	margin-bottom: 64px;
}

body#post #content h1 {
	text-align: left;
}

body#post #content h1::after {
	content: none;
}

body#post .postMeta {
	margin-bottom: 64px;
}

#home section {
	margin-right: calc(-50vw - -50%);
	margin-left: calc(-50vw - -50%);
	padding-right: calc(50vw - 50%);
	padding-left: calc(50vw - 50%);
}

@media screen and (max-width: 980px) {
	#content {
		margin-top: 96px;
	}
}

@media screen and (max-width: 800px) {
	body:not(#home) #content {
		padding-top: 8vw;
		margin-bottom: 15vw;
	}
	
	body:not(#home):not(#post) #content h1,
	body#post .postMeta {
		margin-bottom: 8vw;
	}
}

@media screen and (max-width: 480px) {
	#content {
		margin-top: 80px;
	}
}

/* Toggle
-------------------------------------------------- */
.toggleBody {
	display: none;
}

/* Message
-------------------------------------------------- */
#message {
	padding: 0;
	margin-bottom: 0;
	column-gap: 5%;
}

#message h2 {
	margin-bottom: 36px;
	font-size: var(--font30);
	text-align: left;
}

#message > div:last-child {
	margin-right: calc(50vw - 490px);
	padding-top: 36px;
	padding-bottom: 36px;
}

@media screen and (max-width: 1040px) {
	#message > div:last-child {
		margin-right: 30px;
	}
}

@media screen and (max-width: 781px) {
	#message {
		flex-direction: column-reverse;
		gap: 0;
	}
	
	#message > div {
		width: auto;
	}

	#message > div:last-child {
		margin: 0 3.75%;
	}
}

/* Interview
-------------------------------------------------- */
.interviewee {
	margin-top: 36px;
	padding: 36px;
	background-color: var(--white);
}

.interviewHeader {
	display: flex;
	gap: 24px 10%;
	align-items: center;
	cursor: pointer;
	position: relative;
}

.interviewHeader figure {
	width: 44%;
	aspect-ratio: 23 / 16;
	border-radius: 8px;
	overflow: hidden;
}

.interviewHeader figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.interviewHeader .num {
	display: flex;
	width: 2em;
	height: 2em;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	background-color: var(--mainColor);
	color: var(--white);
	font-size: var(--font30);
	font-weight: 700;
}

.interviewHeader h3 {
	margin-top: 12px;
	font-size: var(--font24);
}

.interviewHeader h3 em {
	display: block;
	font-weight: 700;
	font-style: normal;
}

.interviewHeader button {
	padding: 8px;
	width: 13em;
	border: 1px solid var(--accent1);
	border-radius: 16px;
	background-color: var(--accent1);
	font-size: var(--font18);
	font-weight: 700;
	text-align: center;
	transition: background .3s ease-out;
}

@media (hover: hover) {
	.interviewHeader:hover button {
		background-color: var(--accent2);
	}
}

.interviewBody dt {
	margin-top: 36px;
	padding: 12px 24px 12px calc(24px + 2em);
	border: 1px solid var(--mainColor);
	border-radius: 12px;
	background-color: var(--mainColor);
	font-weight: 400;
	position: relative;
}

.interviewBody dd {
	padding: 12px 24px 12px calc(24px + 2em);
	position: relative;
}

.interviewBody dt span,
.interviewBody dd span {
	position: absolute;
	top: 12px;
	left: 24px;
}

@media screen and (max-width: 781px) {
	.interviewee {
		padding: 24px;
	}
	
	.interviewHeader {
		flex-direction: column;
	}
	
	.interviewHeader figure {
		width: 100%;
	}
	
	.interviewHeader .num {
		position: absolute;
		top: 0;
		left: 0;
	}
	
	.interviewHeader .more {
		text-align: center;
	}
}

/* Data
-------------------------------------------------- */
.dataBody {
	display: flex;
	gap: 36px;
	flex-wrap: wrap;
}

.dataBody dl {
	width: calc((100% - 108px) / 4);
	text-align: center;
}

.dataBody dt {
	margin-bottom: 12px;
	padding: 18px 12px 12px;
	border: 1px solid var(--accent2);
	background-color: var(--accent2);
	font-size: var(--font20);
	font-weight: 400;
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: center;
}

.dataBody dt::before {
	content: '';
	width: 120px;
	max-width: 100%;
	aspect-ratio: 1 / 1;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: contain;
}

.dataBody .data_year dt::before {
	background-image: url(images/ico_calendar.svg);
}

.dataBody .data_age dt::before {
	background-image: url(images/ico_group.svg);
}

.dataBody .data_overtime dt::before {
	background-image: url(images/ico_clock.svg);
}

.dataBody .data_leave dt::before {
	background-image: url(images/ico_vacation.svg);
}

.dataBody .data_sex dt::before {
	background-image: url(images/ico_couple.svg);
}

.dataBody .data_career dt::before {
	background-image: url(images/ico_piegraph.svg);
}

.dataBody .data_byage dt::before {
	background-image: url(images/ico_bargraph.svg);
}

.dataBody .data_childcare dt::before {
	background-image: url(images/ico_baby.svg);
}

.dataBody dd {
	font-size: var(--font22);
	line-height: 1.25;
}

.dataBody dd em {
	font-size: var(--font32);
	font-style: normal;
}

@media screen and (max-width: 781px) {
	.dataBody {
		gap: 24px 4%;
	}
	
	.dataBody dl {
		width: calc(96% / 2);
	}
	
	.dataBody dt {
		font-size: var(--font18);
	}
}

/* Faq
-------------------------------------------------- */
.faqBody dt {
	margin-top: 36px;
	padding: 12px 24px 12px calc(24px + 2em);
	border: 1px solid var(--gray15);
	border-radius: 12px;
	background-color: var(--gray15);
	font-weight: 400;
	position: relative;
}

.faqBody dd {
	padding: 12px 24px 12px calc(24px + 2em);
	position: relative;
}

.faqBody dt span,
.faqBody dd span {
	position: absolute;
	top: 12px;
	left: 24px;
}

/* Recruitment
-------------------------------------------------- */
.recruitment {
	border: 1px solid var(--white);
	background-color: var(--white);
}

.recruitment + .recruitment {
	margin-top: 48px;
}

.recruitmentHeader {
	padding: 12px 48px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
}

.recruitmentHeader h3 {
	margin-bottom: 0;
}

.recruitmentHeader .more button {
	width: 80px;
	height: 80px;
	margin-right: -20px;
	cursor: pointer;
	position: relative;
}

.recruitmentHeader .more button::before,
.recruitmentHeader .more button::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%);
	width: 50%;
	border-top: 1px solid var(--black);
	transition: all .3s ease-out;
}

.recruitmentHeader .more button::after {
	transform: translateX(-50%) rotate(90deg);
}

.open .recruitmentHeader .more button::after {
	transform: translateX(-50%) rotate(180deg);
}

.recruitmentHeader .more button span {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.recruitmentBody {
	padding: 0 48px 48px;
}

.recruitmentBody dl {
	border: 1px solid var(--gray20);
	border-top: 0;
	background-color: var(--tableBack);
	display: flex;
	flex-wrap: wrap;
}

.recruitmentBody dt,
.recruitmentBody dd {
	padding: 12px 20px;
	border-top: 1px solid var(--gray20);
}

.recruitmentBody dt {
	width: 25%;
	font-weight: 400;
}

.recruitmentBody dd {
	width: 75%;
	border-left: 1px solid var(--gray20);
}

.recruitmentBody dd + dt {
	margin-top: 0;
}

.recruitment .entryBtn {
	margin-top: 48px;
	margin-bottom: 0;
	text-align: center;
}

.recruitment .entryBtn a {
	display: inline-block;
	width: 300px;
	max-width: 100%;
	padding: 12px 20px;
	border: 1px solid var(--accent1);
	border-radius: 16px;
	background-color: var(--accent1);
	color: var(--black);
	font-size: var(--font20);
	font-weight: 700;
	text-decoration: none;
}

@media screen and (max-width: 781px) {
	.recruitmentHeader {
		padding: 12px 24px;
	}
	
	.recruitmentBody {
		padding: 0 24px 24px;
	}
	
	.recruitment .entryBtn {
		margin-top: 24px;
	}
}

/* News
-------------------------------------------------- */
.newsBody {
	padding: 24px 48px;
	border: 1px solid var(--white);
	border-radius: 16px;
	background-color: var(--white);
}

.newsList li:not(:first-child) {
	border-top: 1px dotted var(--gray40);
}

.newsList li a,
.newsList li .noLink {
	display: flex;
	align-items: flex-start;
	padding: 16px 0;
	text-decoration: none;
}
	
.newsList li .postDate {
	display: inline-block;
	width: 10em;
	max-width: 25%;
	color: var(--textBody);
}

.newsList li .title {
	flex: 1;
}

.newsList li a .title {
	text-decoration: underline;
}

@media screen and (max-width: 781px) {
	.newsBody {
		padding: 24px;
	}
	
	.newsList li a,
	.newsList li .noLink {
		flex-direction: column;
	}
	
	.newsList li .postDate {
		max-width: none;
	}
}

/* Access
-------------------------------------------------- */
#access {
	padding-bottom: 0;
}

#access iframe {
	margin-top: 48px;
	margin-right: calc(-50vw - -50%);
	margin-left: calc(-50vw - -50%);
	width: 100vw;
}

@media screen and (max-width: 781px) {
	#access iframe {
		margin-top: 24px;
	}
}

/* Footer
================================================== */
#commonFooter {
	border-top: 1px solid var(--gray20);
}

#commonFooter > .inner {
	padding: 96px 0;
	display: flex;
	gap: 24px;
	justify-content: space-between;
}

#commonFooter .logo {
	height: 72px;
}

#commonFooter .logo img {
	height: 100%;
	width: auto;
}

#footerNav ul {
	column-count: 2;
	column-gap: 48px;
}

#footerNav a {
	color: var(--gray80);
	text-decoration: none;
}

#footerNav a:hover {
	color: var(--gray60);
}

.footerBottom {
	background-color: var(--gray15);
}

.footerBottom .inner {
	padding: 24px 0;
	display: flex;
	gap: 16px;
	justify-content: space-between;
	align-items: center;
}

.footerBottom .sns {
	display: flex;
	gap: 16px;
	align-items: center;
	line-height: 1;
}

.footerBottom .sns li {
	width: 32px;
	height: 32px;
}

@media screen and (max-width: 1100px) {
	.footerBottom .inner {
		padding-right: calc(60px + 6em);
	}
}

@media screen and (max-width: 800px) {
	#commonFooter > .inner {
		padding: 12vw 0;
	}
}

@media screen and (max-width: 781px) {
	#commonFooter > .inner {
		flex-direction: column;
		align-items: center;
	}
	
	.footerBottom .inner {
		flex-direction: column;
		align-items: flex-start;
	}
}
	
@media screen and (max-width: 480px) {
	#footerNav ul {
		column-gap: 24px;
	}
}

/* Scroll top
================================================== */
#scrollTop {
	position: fixed;
	right: 30px;
	bottom: 16px;
	z-index: 99;
	margin-bottom: 0;
	display: none;
}

#scrollTop a {
	display: flex;
	width: 48px;
	height: 48px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid var(--gray40);
	background-color: var(--white);
	color: var(--gray60);
	font-size: var(--font18);
	text-decoration: none;
	line-height: 1;
	opacity: .8;
	transition: opacity .3s ease;
}

#scrollTop a:hover {
	opacity: 1;
}

@media screen and (max-width: 1100px) {
	#scrollTop {
		bottom: calc(46px + 1.875em);
	}
}

@media screen and (max-width: 800px) {
	#scrollTop {
		right: 3.75%;
	}
}

/* Form
================================================== */
.wpcf7-form {
	margin-top: 64px;
}

.wpcf7-form dl {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}

.wpcf7-form p,
.wpcf7-form ol,
.wpcf7-form ul,
.wpcf7-form dl {
	margin-bottom: 0;
}

.wpcf7-form dt {
  width: 22%;
  margin-top: 0;
  padding: 23px 0;
  font-weight: 400;
}

.wpcf7-form dd {
  width: 78%;
  padding: 12px 0 6px 24px;
}

.wpcf7-form > dl {
	border-top: 1px solid var(--gray40);
}

.wpcf7-form > dl > dt,
.wpcf7-form > dl > dd {
  border-bottom: 1px dotted var(--gray40);
}

.wpcf7-form > dl > dt:last-of-type,
.wpcf7-form > dl > dd:last-of-type {
  border-bottom-style: solid;
}

.wpcf7-form dd dt {
	width: 5em;
}

.wpcf7-form dd dd {
	width: calc(100% - 5em);
}

.wpcf7-form dd > label {
	display: inline-block;
}

@media screen and (max-width: 800px) {
	.wpcf7 {
		margin-top: 7.5vw;
	}
	
	.wpcf7-form {
		flex-direction: column;
	}
	
	.wpcf7-form dt {
		width: 100%;
		padding: 8px 16px 8px 0;
		border-bottom: 0;
	}
	
	.wpcf7-form dd {
		width: 100%;
		padding: 0 0 16px;
	}
	
	.wpcf7-form > dl > dt {
		border-bottom: 0;
	}
}

.wpcf7-form .required {
	display: inline-block;
	margin-left: 1em;
	color: var(--red);
	font-size: var(--font14);
}

.wpcf7-radio,
.wpcf7-checkbox {
	display: inline-block;
	margin-bottom: 6px;
	padding: 11px 0;
}

.wpcf7-radio.vertical > span,
.wpcf7-checkbox.vertical > span {
	display: block;
}

.wpcf7-radio.vertical > span:not(:last-child),
.wpcf7-checkbox.vertical > span:not(:last-child) {
	margin-bottom: 12px;
}

.wpcf7-list-item {
	margin-right: 32px;
	margin-left: 0;
}

.wpcf7-list-item:last-child {
	margin-right: 0;
}

.wpcf7 form .wpcf7-response-output {
	margin: 2em 0;
}

.wpcf7 form.invalid .wpcf7-response-output {
	border: 2px solid var(--red);
}

.wpcf7 form .wpcf7-mail-sent-ok {
}

.wpcf7-form-control-wrap .wpcf7-not-valid-tip {
	display: none;
}

.wpcf7-form .submit {
	margin: 32px auto;
	width: fit-content;
	display: flex;
	gap: 24px;
	justify-content: center;
	position: relative;
}

.wpcf7-spinner {
	margin: 0;
	position: absolute;
	top: 0;
	left: calc(100% + 10px);
}

.wpcf7-form.sent dl,
.wpcf7-form.sent .submit {
	display: none;
}

form .privacy {
	margin: 48px 0;
}

form .privacy h2 {
	margin-bottom: .5em;
	font-size: var(--font18);
	text-align: left;
}

form .privacyBody {
	height: 240px;
	overflow: auto;
	margin: 16px 0;
	padding: 16px;
	border: 1px solid var(--gray40);
}

form .privacyBody h3 {
	margin: 0;
	font-size: var(--font16);
	font-weight: 700;
}

form .privacyBody p:not(:last-child),
form .privacyBody ul:not(:last-child) {
	margin-bottom: 1.125em;
}

.wpcf7-acceptance {
	display: block;
	text-align: center;
}


/* Form Control
================================================== */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
select,
textarea {
	max-width: 100%;
	margin-bottom: 6px;
	padding: 10px 16px;
	border: 1px solid var(--gray40);
	background-color: var(--gray05);
	font-size: var(--font16);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
	background-color: var(--white);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea {
	width: 100%;
}

textarea {
	height: 12em;
}

input[type="radio"],
input[type="checkbox"] {
	position: absolute;
	white-space: nowrap;
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	overflow: hidden;
	height: 1px;
	width: 1px;
	margin: -1px;
}

input[type="radio"] + span,
input[type="checkbox"] + span {
	display: inline-block;
	padding-left: 30px;
	font-size: var(--font16);
	position: relative;
	cursor: pointer;
}

input[type="radio"] + span::before,
input[type="checkbox"] + span::before {
	content: '';
	position: absolute;
	left: 0px;
	height: 20px;
	width: 20px;
	border: 1px solid var(--gray40);
	background-color: var(--white);
}

input[type="radio"] + span::before {
	top: calc(.875em - 10px);
	border-radius: 50%;
}

input[type="checkbox"] + span::before {
	top: calc(.875em - 10px);
	border-radius: 4px;
}

input[type="radio"]:focus-visible + span::before,
input[type="checkbox"]:focus-visible + span::before {
	border: 2px solid var(--mainColor);
}

input[type="radio"]:checked + span::after,
input[type="checkbox"]:checked + span::after {
	content: '';
	position: absolute;
}

input[type="radio"]:checked + span::after {
	top: calc(.875em - 5px);
	left: 5px;
	height: 10px;
	width: 10px;
	border: 5px solid var(--gray80);
	border-radius: 50%;
}

input[type="checkbox"]:checked + span::after {
	top: calc(.875em - 5px);
	left: 4.5px;
	height: 7px;
	width: 11px;
	border: 3px solid  var(--gray80);
	border-top: 0;
	border-right: 0;
	transform: rotate(-45deg);
}

span:has(select) {
	display: inline-block;
	max-width: 100%;
	margin-bottom: 6px;
	position: relative;
	background-color: var(--gray05);
}

span:has(select):focus-within {
	background-color: var(--white);
}

span:has(select)::after {
	content: '';
	position: absolute;
	top: calc(50% - 3px);
	right: 12px;
	width: 12px;
	height: 12px;
	border: 6px solid transparent;
	border-top-color: #333;
	z-index: 1;
}

@media (-ms-high-contrast:active) {
	span:has(select)::after {
		content: '\25BC';
		transform: scaleY(.625);
		top: calc(50% - .625em);
		border: 0;
	}
}

span:has(select) select {
	margin-bottom: 0;
	padding-right: 38px;
	background-color: transparent;
	position: relative;
	z-index: 2;
}

span:has(select) select:focus {
	background-color: transparent;
}

input:disabled,
select:disabled,
textarea:disabled {
	background-color: #ededed;
	color: #6a6a6a;
}

input[type="radio"]:disabled + sapn::before,
input[type="checkbox"]:disabled + span::before {
	background-color: #ededed;
}

input[type="radio"]:disabled + span,
input[type="checkbox"]:disabled + span {
	cursor: default;
}

::placeholder {
	color: #767676;
}

:disabled::placeholder,
.error::placeholder {
	color: #6a6a6a;
}

input.error,
select.error,
textarea.error,
input.wpcf7-not-valid,
select.wpcf7-not-valid,
textarea.wpcf7-not-valid  {
	border-color: var(--red);
	background-color: #fbe7e8;
}

@media (-ms-high-contrast:active) {
	input.error,
	select.error,
	textarea.error,
	input.wpcf7-not-valid,
	select.wpcf7-not-valid,
	textarea.wpcf7-not-valid {
		border-width: 2px;
	}
}

.error input[type="radio"] + span::before,
.error input[type="checkbox"] + span::before,
.wpcf7-not-valid input[type="radio"] + span::before,
.wpcf7-not-valid input[type="checkbox"] + span::before {
	border-color: #c00;
}

input[type="submit"] {
	width: 200px;
	max-width: 100%;
	padding: 10px 30px;
	border: 1px solid var(--gray15);
	background-color: var(--gray15);
	color: var(--black);
	font-size: var(--font18);
	text-align: center;
}

input[type="submit"]:disabled {
	color: #6a6a6a;
}

#your_name,
#your_kana,
#your_phone {
	width: 24em;
}

#your_age {
	width: 6em;
	max-width: calc(100% - 1.5em);
}

#your_zip {
	width: 12em;
}

/* Adminbar
================================================== */
#wpadminbar {
	height: 6px !important;
	overflow: hidden;
  opacity: 0.1;
  transition: all 0.3s ease-in-out;
}

#wpadminbar:hover {
	height: auto !important;
  filter: alpha(opacity=100);
  opacity: 1;
}

/* Clearfix
================================================== */
.clearfix:after {
	content: "";
	display: block;
	clear: both;
}