@charset 'UTF-8';
/* #####################################################
 * common.css
 * - Core
 * - Layout
 * - Modules
 * - Pages
 * ################################################## */
/* variables color */
/*
#colors

@Service #2658CE
@Job #37B500
@Career #FE590F
@tone1 #F4F4F9
@tone2 #EBEBF3
@tone3 #CACAD9
@tone4 #84849A
@tone5 #4A4A4A
*/
/* variables-color */
@import url(//fonts.googleapis.com/css?family=Roboto:400,700,900);

:root {
	/* color color palette */
	/* Gray */
	--Gray-100: #f6f3f0;
	--Gray-200: #e4e0de;
	--Gray-300: #cbc8c6;
	--Gray-400: #b2afac;
	--Gray-500: #969391;
	--Gray-600: #716e6b;
	--Gray-700: #605d5b;
	--Gray-800: #4e4b49;
	--Gray-900: #2d2b29;
	--Gray-1000: #171413;
	/* Pink */
	--Pink-100: #fef1f5;
	--Pink-200: #fbd8e2;
	--Pink-300: #f7b5c8;
	--Pink-400: #f189aa;
	--Pink-500: #e9588e;
	--Pink-600: #cb006b;
	--Pink-700: #ac0058;
	--Pink-800: #8b0647;
	--Pink-900: #57002a;
	--Pink-1000: #280010;
	/* Red */
	--Red-100: #fff1f1;
	--Red-200: #ffd8d7;
	--Red-300: #fdb4b4;
	--Red-400: #fb888b;
	--Red-500: #f5505f;
	--Red-600: #d40038;
	--Red-700: #ac1731;
	--Red-800: #920625;
	--Red-900: #5c0415;
	--Red-1000: #2f0107;
	/* Orange */
	--Orange-100: #fef2ed;
	--Orange-200: #ffdacd;
	--Orange-300: #ffb59c;
	--Orange-400: #f88d68;
	--Orange-500: #f25915;
	--Orange-600: #c04101;
	--Orange-700: #934225;
	--Orange-800: #79371f;
	--Orange-900: #4f1f0d;
	--Orange-1000: #260c04;
	/* Lime */
	--Lime-100: #f2f9e2;
	--Lime-200: #dfebbf;
	--Lime-300: #c1d293;
	--Lime-400: #a2bb4b;
	--Lime-500: #869f16;
	--Lime-600: #687c0b;
	--Lime-700: #566606;
	--Lime-800: #465408;
	--Lime-900: #2c3505;
	--Lime-1000: #121700;
	/* Green */
	--Green-100: #ecfaec;
	--Green-200: #cdf0cc;
	--Green-300: #a8daa8;
	--Green-400: #66c56c;
	--Green-500: #28af3d;
	--Green-600: #2b8735;
	--Green-700: #276d2e;
	--Green-800: #1b5a22;
	--Green-900: #0f3a14;
	--Green-1000: #021b04;
	/* Aqua */
	--Aqua-100: #e3fafe;
	--Aqua-200: #b7f0fa;
	--Aqua-300: #7edae9;
	--Aqua-400: #12c0d6;
	--Aqua-500: #1aa4b6;
	--Aqua-600: #2b7e8a;
	--Aqua-700: #176774;
	--Aqua-800: #0f5760;
	--Aqua-900: #05373f;
	--Aqua-1000: #00191d;
	/* Blue */
	--Blue-100: #f2f5fc;
	--Blue-200: #dae3f7;
	--Blue-300: #b0c7f9;
	--Blue-400: #8aaaf6;
	--Blue-500: #648cf4;
	--Blue-600: #3a63e0;
	--Blue-700: #2045da;
	--Blue-800: #142ec5;
	--Blue-900: #08118c;
	--Blue-1000: #020448;
	/* Violet */
	--Violet-100: #f4f5fa;
	--Violet-200: #dfe1f6;
	--Violet-300: #bec2f8;
	--Violet-400: #9fa3f4;
	--Violet-500: #8382f3;
	--Violet-600: #6258dd;
	--Violet-700: #5336d8;
	--Violet-800: #451dc3;
	--Violet-900: #290083;
	--Violet-1000: #104;
	/* Purple */
	--Purple-100: #f9f3f9;
	--Purple-200: #eedced;
	--Purple-300: #e2b7e1;
	--Purple-400: #d392d2;
	--Purple-500: #c46bc4;
	--Purple-600: #a247a2;
	--Purple-700: #950c98;
	--Purple-800: #7d0c7f;
	--Purple-900: #4f0050;
	--Purple-1000: #260027;
	/* Yellow */
	--Yellow-100: #fffaec;
	--Yellow-200: #feeec1;
	--Yellow-300: #fee195;
	--Yellow-400: #f7ce5a;
	--Yellow-500: #f4c200;
	--Yellow-600: #d4a800;
	--Yellow-700: #b18c00;
	--Yellow-800: #896c00;
	--Yellow-900: #5f4a00;
	--Yellow-1000: #1f1600;
}

/* =====================================================
 * Base
 * ================================================== */
/*! normalize.css v3.0.0 | MIT License | git.io/normalize */
html {
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	font-family: sans-serif;
}

body {
	margin: 0;
}

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

audio,
canvas,
progress,
video {
	display: inline-block;
	vertical-align: baseline;
}

audio:not([controls]) {
	display: none;
	height: 0;
}

[hidden],
template {
	display: none;
}

a {
	background-color: transparent;
}

a:active,
a:hover {
	outline: 0;
}

abbr[title] {
	border-bottom: 1px dotted;
}

b,
strong {
	font-weight: bold;
}

dfn {
	font-style: italic;
}

h1 {
	margin: 0.67em 0;
	font-size: 2em;
}

mark {
	background: #ff0;
	color: #000;
}

small {
	font-size: 80%;
}

sub,
sup {
	position: relative;
	font-size: 75%;
	line-height: 0;
	vertical-align: baseline;
}

sup {
	top: -0.5em;
}

sub {
	bottom: -0.25em;
}

img {
	border: 0;
}

svg:not(:root) {
	overflow: hidden;
}

figure {
	margin: 1em 40px;
}

hr {
	box-sizing: content-box;
	height: 0;
}

pre {
	overflow: auto;
}

code,
kbd,
pre,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

button,
input,
optgroup,
select,
textarea {
	margin: 0;
	padding: 0;
	border: none;
	color: inherit;
	font: inherit;
}

button {
	overflow: visible;
}

button,
select {
	text-transform: none;
}

button,
html input[type='button'],
input[type='reset'],
input[type='submit'] {
	cursor: pointer;
	-webkit-appearance: button;
}

button[disabled],
html input[disabled] {
	cursor: default;
}

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

input {
	line-height: normal;
}

input[type='checkbox'],
input[type='radio'] {
	box-sizing: border-box;
	padding: 0;
}

input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
	height: auto;
}

input[type='search'] {
	box-sizing: content-box;
	-webkit-appearance: textfield;
}

input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-decoration {
	-webkit-appearance: none;
}

fieldset {
	margin: 0 2px;
	padding: 0.35em 0.625em 0.75em;
	border: 1px solid #c0c0c0;
}

legend {
	padding: 0;
	border: 0;
}

textarea {
	overflow: auto;
}

optgroup {
	font-weight: bold;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

td,
th {
	padding: 0;
}

/* -----------------------------------------------------
 * Font
 * -------------------------------------------------- */
@font-face {
	font-family: 'icomoon';
	font-weight: normal;
	font-style: normal; 

	src: url('../font/icomoon.eot?loiuhhe');
	src: url('../font/icomoon.eot?loiuhhe#iefix') format('embedded-opentype'), url('../font/icomoon.ttf?loiuhhe') format('truetype'), url('../font/icomoon.woff?loiuhhe') format('woff'), url('../font/icomoon.svg?loiuhhe#icomoon') format('svg');
}

[class^='icon-'],
[class*=' icon-'],
.error-message,
.error-message-multi-line:before,
.has-submenu li .blank:after,
.joblist-img,
.l-header-nav ul li a:before,
.sectionInformation dl dt:before {
	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: 'icomoon' !important;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	line-height: 1;
	text-transform: none;
	speak: none;
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-other:before {
	content: '\e928';
	color: #fff;
}

.icon-question2:before {
	content: '\3f';
	color: #fff;
}

.icon-printer:before {
	content: '\e926';
	color: #fff;
}

.icon-smartphone:before {
	content: '\e923';
	color: #fff;
}

.icon-desktop:before {
	content: '\e924';
	color: #fff;
}

.icon-mail:before {
	content: '\e925';
	color: #fff;
}

.icon-human:before {
	content: '\e922';
	color: #fff;
}

.icon-reset:before {
	content: '\e921';
	color: #fff;
}

.icon-card:before {
	content: '\e920';
	color: #fff;
}

.icon-blank:before {
	content: '\e900';
	color: #fff;
}

.icon-arrow_left:before {
	content: '\3c';
	color: #fff;
}

.icon-arrow_right:before {
	content: '\3e';
	color: #fff;
}

.icon-close:before {
	content: '\d7';
	color: #fff;
}

.icon-plus:before {
	content: '\e901';
	color: #fff;
}

.icon-doc:before {
	content: '\e902';
	color: #fff;
}

.icon-graf:before {
	content: '\e903';
	color: #fff;
}

.icon-point:before {
	content: '\e904';
	color: #fff;
}

.icon-search:before {
	content: '\e905';
	color: #fff;
}

.icon-scout:before {
	content: '\e906';
	color: #fff;
}

.icon-revision:before {
	content: '\e907';
	color: #fff;
}

.icon-arrow_down:before {
	content: '\e908';
	color: #fff;
}

.icon-arrow_up:before {
	content: '\e909';
	color: #fff;
}

.icon-checked:before {
	content: '\e90a';
	color: #fff;
}

.icon-photo:before {
	content: '\e90b';
	color: #fff;
}

.icon-quertion:before {
	content: '\e90c';
	color: #fff;
}

.icon-check:before {
	content: '\e90d';
	color: #fff;
}

.icon-copy:before {
	content: '\e90e';
	color: #fff;
}

.icon-book:before {
	content: '\e90f';
	color: #fff;
}

.icon-chat:before {
	content: '\e910';
	color: #fff;
}

.icon-coution:before {
	content: '\e911';
	color: #fff;
}

.icon-event:before {
	content: '\e912';
	color: #fff;
}

.icon-work:before {
	content: '\e913';
	color: #fff;
}

.icon-men:before {
	content: '\e914';
	color: #2658ce;
}

.icon-news:before {
	content: '\e915';
	color: #fff;
}

.icon-paper:before {
	content: '\e916';
	color: #fff;
}

.icon-pin:before {
	content: '\e917';
	color: #fff;
}

.icon-women:before {
	content: '\e918';
	color: #f06;
}

.icon-minus:before {
	content: '\e919';
	color: #fff;
}

.icon-entry:before {
	content: '\e91a';
	color: #fff;
}

.icon-eye:before {
	content: '\e91b';
	color: #fff;
}

.icon-fav:before {
	content: '\e91c';
	color: #fff;
}

.icon-site:before {
	content: '\e91d';
	color: #fff;
}

.icon-sort:before {
	content: '\e91e';
	color: #fff;
}

.icon-yen:before {
	content: '\e91f';
	color: #fff;
}

.icon-school:before {
	content: '\e927';
	color: #fff;
}

.icon-play:before {
	content: '\ea1c';
	color: #fff;
}

.icon-files:before {
	content: '\e92a';
	color: #fff;
}

.icon-file-guppy:before {
	content: '\e929';
	color: #fff;
}

.icon-file-image:before {
	content: '\e92b';
	color: #fff;
}

.icon-trash:before {
	content: '\e92c';
	color: #fff;
}

.icon-upload:before {
	content: '\e961';
	color: #fff;
}

.icon-loop:before {
	content: '\ea2e';
	color: #fff;
}

.icon-fire:before {
	content: '\e92d';
	color: #fff;
}

.icon-trending-up:before {
	content: '\e92e';
	color: #fff;
}

.icon-blue:before {
	color: #2658ce !important;
}

.icon-job:before {
	color: #8bc34a !important;
}

.icon-career:before {
	color: #fe590f !important;
}

.icon-success:before {
	color: #0fd848 !important;
}

.icon-red:before {
	color: #b40000 !important;
}

.icon-bk:before {
	color: #383737 !important;
}

.icon-yel:before {
	color: #f2d600 !important;
}

.icon-pnk:before {
	color: #ee5f5b !important;
}

.icon-link:before {
	color: #2196f3 !important;
}

.icon-tone1:before {
	color: #f4f4f9 !important;
}

.icon-tone2:before {
	color: #ebebf3 !important;
}

.icon-tone3:before {
	color: #cacad9 !important;
}

.icon-tone4:before {
	color: #84849a !important;
}

.icon-tone5:before {
	color: #4a4a4a !important;
}

.icon-green:before {
	color: #178b2a !important;
}

.icon-orange:before {
	color: #f25915 !important;
}

.icon-aqua:before {
	color: #1aa4b6 !important;
}

/* -----------------------------------------------------
 * Init
 * -------------------------------------------------- */
*,
*:before,
*:after {
	box-sizing: border-box;
}

/* normalize overwrite */
html {
	position: relative;
	min-height: 100%;
	font-family: Hiragino Kaku Gothic ProN, '游ゴシック体', YuGothic, '游ゴシック Medium', 'Yu Gothic Medium', Roboto, Meiryo, sans-serif;
	font-size: 62.5%;
}

body {
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0;
	padding: 0;
	background: #f4f4f9;
	color: #383737;
	font-size: 1.6rem;
	line-height: 1.4;
	-webkit-font-smoothing: subpixel-antialiased;
	-moz-osx-font-smoothing: unset;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
	body {
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
}

a {
	color: #2196f3;
	text-decoration: none;
}

a:visited {
	color: #2196f3;
}

a:hover {
	color: #6ab8f7;
}

a:active,
a:focus {
	color: #2196f3;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
dl,
dt,
dd,
ol,
ul,
li,
figure,
figcaption,
small {
	margin: 0;
	font-size: 100%;
	font-weight: normal;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	line-height: 1.2;
}

img {
	vertical-align: bottom;
}

ul {
	list-style-type: none;
	padding: 0;
}

ol {
	padding: 0;
}

th {
	font-weight: normal;
	text-align: left;
}

/* =====================================================
 * Layout
 * ================================================== */
/* variables color */
/*
#colors

@Service #2658CE
@Job #37B500
@Career #FE590F
@tone1 #F4F4F9
@tone2 #EBEBF3
@tone3 #CACAD9
@tone4 #84849A
@tone5 #4A4A4A
*/
/* variables-color */
:root {
	/* color color palette */
	/* Gray */
	--Gray-100: #f6f3f0;
	--Gray-200: #e4e0de;
	--Gray-300: #cbc8c6;
	--Gray-400: #b2afac;
	--Gray-500: #969391;
	--Gray-600: #716e6b;
	--Gray-700: #605d5b;
	--Gray-800: #4e4b49;
	--Gray-900: #2d2b29;
	--Gray-1000: #171413;
	/* Pink */
	--Pink-100: #fef1f5;
	--Pink-200: #fbd8e2;
	--Pink-300: #f7b5c8;
	--Pink-400: #f189aa;
	--Pink-500: #e9588e;
	--Pink-600: #cb006b;
	--Pink-700: #ac0058;
	--Pink-800: #8b0647;
	--Pink-900: #57002a;
	--Pink-1000: #280010;
	/* Red */
	--Red-100: #fff1f1;
	--Red-200: #ffd8d7;
	--Red-300: #fdb4b4;
	--Red-400: #fb888b;
	--Red-500: #f5505f;
	--Red-600: #d40038;
	--Red-700: #ac1731;
	--Red-800: #920625;
	--Red-900: #5c0415;
	--Red-1000: #2f0107;
	/* Orange */
	--Orange-100: #fef2ed;
	--Orange-200: #ffdacd;
	--Orange-300: #ffb59c;
	--Orange-400: #f88d68;
	--Orange-500: #f25915;
	--Orange-600: #c04101;
	--Orange-700: #934225;
	--Orange-800: #79371f;
	--Orange-900: #4f1f0d;
	--Orange-1000: #260c04;
	/* Lime */
	--Lime-100: #f2f9e2;
	--Lime-200: #dfebbf;
	--Lime-300: #c1d293;
	--Lime-400: #a2bb4b;
	--Lime-500: #869f16;
	--Lime-600: #687c0b;
	--Lime-700: #566606;
	--Lime-800: #465408;
	--Lime-900: #2c3505;
	--Lime-1000: #121700;
	/* Green */
	--Green-100: #ecfaec;
	--Green-200: #cdf0cc;
	--Green-300: #a8daa8;
	--Green-400: #66c56c;
	--Green-500: #28af3d;
	--Green-600: #2b8735;
	--Green-700: #276d2e;
	--Green-800: #1b5a22;
	--Green-900: #0f3a14;
	--Green-1000: #021b04;
	/* Aqua */
	--Aqua-100: #e3fafe;
	--Aqua-200: #b7f0fa;
	--Aqua-300: #7edae9;
	--Aqua-400: #12c0d6;
	--Aqua-500: #1aa4b6;
	--Aqua-600: #2b7e8a;
	--Aqua-700: #176774;
	--Aqua-800: #0f5760;
	--Aqua-900: #05373f;
	--Aqua-1000: #00191d;
	/* Blue */
	--Blue-100: #f2f5fc;
	--Blue-200: #dae3f7;
	--Blue-300: #b0c7f9;
	--Blue-400: #8aaaf6;
	--Blue-500: #648cf4;
	--Blue-600: #3a63e0;
	--Blue-700: #2045da;
	--Blue-800: #142ec5;
	--Blue-900: #08118c;
	--Blue-1000: #020448;
	/* Violet */
	--Violet-100: #f4f5fa;
	--Violet-200: #dfe1f6;
	--Violet-300: #bec2f8;
	--Violet-400: #9fa3f4;
	--Violet-500: #8382f3;
	--Violet-600: #6258dd;
	--Violet-700: #5336d8;
	--Violet-800: #451dc3;
	--Violet-900: #290083;
	--Violet-1000: #104;
	/* Purple */
	--Purple-100: #f9f3f9;
	--Purple-200: #eedced;
	--Purple-300: #e2b7e1;
	--Purple-400: #d392d2;
	--Purple-500: #c46bc4;
	--Purple-600: #a247a2;
	--Purple-700: #950c98;
	--Purple-800: #7d0c7f;
	--Purple-900: #4f0050;
	--Purple-1000: #260027;
	/* Yellow */
	--Yellow-100: #fffaec;
	--Yellow-200: #feeec1;
	--Yellow-300: #fee195;
	--Yellow-400: #f7ce5a;
	--Yellow-500: #f4c200;
	--Yellow-600: #d4a800;
	--Yellow-700: #b18c00;
	--Yellow-800: #896c00;
	--Yellow-900: #5f4a00;
	--Yellow-1000: #1f1600;
}

/**
 * Header module
 */
@media print, screen and (max-width: 767px) {
	.l-header {
		position: relative;
		border-bottom: 1px solid #cacad9;
		background-color: #fff;
	}

	.l-header.is-career {
		border-bottom: 2px solid #fe590f;
	}

	.l-header.is-recruits {
		border-bottom: 2px solid #8bc34a;
	}

	.l-header-inner {
		display: flex;
	}

	.l-header-logo {
		padding: 15px 15px 10px 10px;
	}

	.l-header-logo img {
		width: 60px;
	}

	.l-header-logo .is_pc {
		display: none;
	}

	.l-header-nav ul {
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 100%;
	}

	.l-header-nav ul li a {
		display: block;
		position: relative;
		width: 100%;
		height: calc(100% - 10px);
		min-height: 46px;
		margin-top: 10px;
		padding: 15px 10px 0;
		border-radius: 5px 5px 0 0;
		font-size: 1.4rem;
		font-weight: bold;
	}

	.l-header-nav ul li a:before {
		content: '\3e';
		display: block;
		position: absolute;
		bottom: 1px;
		left: calc(50% - 5px);
		color: #fff;
		font-size: 1rem;
		transition: ease-in-out 0.4s;
		-webkit-transform: rotateZ(90deg);
		transform: rotateZ(90deg);
	}

	.l-header-nav ul .is_career {
		color: #fe590f;
	}

	.l-header-nav ul .is_career.is_active,
	.l-header-nav ul .is_career:hover {
		background-color: #fe590f;
		color: #fff;
	}

	.l-header-nav ul .is_job {
		color: #8bc34a;
	}

	.l-header-nav ul .is_job.is_active,
	.l-header-nav ul .is_job:hover {
		background-color: #8bc34a;
		color: #fff;
	}

	.l-header-nav ul .is_kyujinhyo {
		color: #2658ce;
	}

	.l-header-nav ul .is_kyujinhyo:before {
		color: #2658ce;
	}

	.l-header-nav ul .is_kyujinhyo.is_active,
	.l-header-nav ul .is_kyujinhyo:hover {
		background-color: #2658ce;
		color: #fff;
	}

	.l-header-nav ul .is_kyujinhyo.is_active:before,
	.l-header-nav ul .is_kyujinhyo:hover:before {
		color: #fff;
	}

	.l-header-login {
		display: none;
	}

	.l-header-site {
		display: none;
	}

	.sp-menu-btn {
		outline: 0;
		display: block;
		position: absolute;
		z-index: 100;
		top: 14px;
		right: 15px;
		width: 33px;
		height: 34px;
		margin: 0;
		border: none;
		background: none;
		background: #fff;
		-webkit-appearance: none;
	}

	.sp-menu-btn small {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		margin: 0 auto;
		color: #2658ce;
		font-size: 0.9rem;
		font-weight: bold;
	}

	.sp-menu-btn:before,
	.sp-menu-btn:after,
	.sp-menu-btn span {
		content: '';
		display: block;
		position: absolute;
		right: 0;
		left: 0;
		width: 27px;
		height: 3px;
		margin: 0 auto;
		border-radius: 1.5px;
		background-color: #2658ce;
	}

	.sp-menu-btn:before {
		top: 0;
	}

	.sp-menu-btn:after {
		top: 14px;
	}

	.sp-menu-btn span {
		top: 7px;
	}
}

@media print, screen and (min-width: 768px) {
	.l-header {
		position: relative;
		border-bottom: 1px solid #cacad9;
		background-color: #fff;
	}

	.l-header.is-career {
		border-bottom: 1px solid #fe590f;
	}

	.l-header.is-recruits {
		border-bottom: 1px solid #8bc34a;
	}

	.l-header-inner {
		display: flex;
		min-width: 1024px;
		max-width: 1200px;
		margin: 0 auto;
	}

	.l-header-logo {
		width: 250px;
		padding: 20px 0;
		text-align: center;
	}

	.l-header-logo img {
		width: 202px;
	}

	.l-header-logo .is_sp {
		display: none;
	}

	.l-header-nav ul {
		display: flex;
		height: 100%;
		padding-top: 10px;
	}

	.l-header-nav ul li {
		height: 100%;
	}

	.l-header-nav ul li a {
		display: flex;
		position: relative;
		align-items: center;
		height: 59px;
		padding: 0 20px;
		border-radius: 5px 5px 0 0;
		font-weight: bold;
		transition: ease-in-out 0.1s;
	}

	.l-header-nav ul li a:before {
		content: '\3e';
		display: block;
		position: absolute;
		bottom: 8px;
		left: calc(50% - 5px);
		opacity: 0;
		color: #fff;
		font-size: 1rem;
		transition: ease-in-out 0.4s;
		-webkit-transform: rotateZ(90deg);
		transform: rotateZ(90deg);
	}

	.l-header-nav ul li a.is_active:before,
	.l-header-nav ul li a:hover:before {
		bottom: 2px;
		opacity: 1;
		color: #fff;
	}

	.l-header-nav ul li a.is_career {
		color: #fe590f;
	}

	.l-header-nav ul li a.is_career:before {
		color: #fe590f;
	}

	.l-header-nav ul li a.is_career.is_active,
	.l-header-nav ul li a.is_career:hover {
		background-color: #fe590f;
		color: #fff;
	}

	.l-header-nav ul li a.is_career.is_active:before,
	.l-header-nav ul li a.is_career:hover:before {
		color: #fff;
	}

	.l-header-nav ul li a.is_job {
		color: #8bc34a;
	}

	.l-header-nav ul li a.is_job:before {
		color: #8bc34a;
	}

	.l-header-nav ul li a.is_job.is_active,
	.l-header-nav ul li a.is_job:hover {
		background-color: #8bc34a;
		color: #fff;
	}

	.l-header-nav ul li a.is_job.is_active:before,
	.l-header-nav ul li a.is_job:hover:before {
		color: #fff;
	}

	.l-header-nav ul li a.is_handbook,
	.l-header-nav ul li a.is_kyujinhyo {
		color: #2658ce;
	}

	.l-header-nav ul li a.is_handbook:before,
	.l-header-nav ul li a.is_kyujinhyo:before {
		color: #2658ce;
	}

	.l-header-nav ul li a.is_handbook.is_active,
	.l-header-nav ul li a.is_handbook:hover,
	.l-header-nav ul li a.is_kyujinhyo.is_active,
	.l-header-nav ul li a.is_kyujinhyo:hover {
		background-color: #2658ce;
		color: #fff;
	}

	.l-header-nav ul li a.is_handbook.is_active:before,
	.l-header-nav ul li a.is_handbook:hover:before,
	.l-header-nav ul li a.is_kyujinhyo.is_active:before,
	.l-header-nav ul li a.is_kyujinhyo:hover:before {
		color: #fff;
	}

	.l-header-site {
		height: 69px;
		margin-left: auto;
		padding: 0 20px 0 0;
		font-weight: bold;
	}

	.l-header-site ul {
		display: flex;
		height: 100%;
	}

	.l-header-site ul li {
		width: 117px;
	}

	.l-header-site ul li:last-child {
		width: 150px;
		margin-left: 10px;
	}

	.l-header-site ul li a {
		display: block;
		height: 100%;
		padding: 27px 0 20px;
	}

	.l-header-site ul li a img {
		height: 22px;
	}

	.sp-menu-btn {
		display: none;
	}
}

/* variables color */
/*
#colors

@Service #2658CE
@Job #37B500
@Career #FE590F
@tone1 #F4F4F9
@tone2 #EBEBF3
@tone3 #CACAD9
@tone4 #84849A
@tone5 #4A4A4A
*/
/* variables-color */
:root {
	/* color color palette */
	/* Gray */
	--Gray-100: #f6f3f0;
	--Gray-200: #e4e0de;
	--Gray-300: #cbc8c6;
	--Gray-400: #b2afac;
	--Gray-500: #969391;
	--Gray-600: #716e6b;
	--Gray-700: #605d5b;
	--Gray-800: #4e4b49;
	--Gray-900: #2d2b29;
	--Gray-1000: #171413;
	/* Pink */
	--Pink-100: #fef1f5;
	--Pink-200: #fbd8e2;
	--Pink-300: #f7b5c8;
	--Pink-400: #f189aa;
	--Pink-500: #e9588e;
	--Pink-600: #cb006b;
	--Pink-700: #ac0058;
	--Pink-800: #8b0647;
	--Pink-900: #57002a;
	--Pink-1000: #280010;
	/* Red */
	--Red-100: #fff1f1;
	--Red-200: #ffd8d7;
	--Red-300: #fdb4b4;
	--Red-400: #fb888b;
	--Red-500: #f5505f;
	--Red-600: #d40038;
	--Red-700: #ac1731;
	--Red-800: #920625;
	--Red-900: #5c0415;
	--Red-1000: #2f0107;
	/* Orange */
	--Orange-100: #fef2ed;
	--Orange-200: #ffdacd;
	--Orange-300: #ffb59c;
	--Orange-400: #f88d68;
	--Orange-500: #f25915;
	--Orange-600: #c04101;
	--Orange-700: #934225;
	--Orange-800: #79371f;
	--Orange-900: #4f1f0d;
	--Orange-1000: #260c04;
	/* Lime */
	--Lime-100: #f2f9e2;
	--Lime-200: #dfebbf;
	--Lime-300: #c1d293;
	--Lime-400: #a2bb4b;
	--Lime-500: #869f16;
	--Lime-600: #687c0b;
	--Lime-700: #566606;
	--Lime-800: #465408;
	--Lime-900: #2c3505;
	--Lime-1000: #121700;
	/* Green */
	--Green-100: #ecfaec;
	--Green-200: #cdf0cc;
	--Green-300: #a8daa8;
	--Green-400: #66c56c;
	--Green-500: #28af3d;
	--Green-600: #2b8735;
	--Green-700: #276d2e;
	--Green-800: #1b5a22;
	--Green-900: #0f3a14;
	--Green-1000: #021b04;
	/* Aqua */
	--Aqua-100: #e3fafe;
	--Aqua-200: #b7f0fa;
	--Aqua-300: #7edae9;
	--Aqua-400: #12c0d6;
	--Aqua-500: #1aa4b6;
	--Aqua-600: #2b7e8a;
	--Aqua-700: #176774;
	--Aqua-800: #0f5760;
	--Aqua-900: #05373f;
	--Aqua-1000: #00191d;
	/* Blue */
	--Blue-100: #f2f5fc;
	--Blue-200: #dae3f7;
	--Blue-300: #b0c7f9;
	--Blue-400: #8aaaf6;
	--Blue-500: #648cf4;
	--Blue-600: #3a63e0;
	--Blue-700: #2045da;
	--Blue-800: #142ec5;
	--Blue-900: #08118c;
	--Blue-1000: #020448;
	/* Violet */
	--Violet-100: #f4f5fa;
	--Violet-200: #dfe1f6;
	--Violet-300: #bec2f8;
	--Violet-400: #9fa3f4;
	--Violet-500: #8382f3;
	--Violet-600: #6258dd;
	--Violet-700: #5336d8;
	--Violet-800: #451dc3;
	--Violet-900: #290083;
	--Violet-1000: #104;
	/* Purple */
	--Purple-100: #f9f3f9;
	--Purple-200: #eedced;
	--Purple-300: #e2b7e1;
	--Purple-400: #d392d2;
	--Purple-500: #c46bc4;
	--Purple-600: #a247a2;
	--Purple-700: #950c98;
	--Purple-800: #7d0c7f;
	--Purple-900: #4f0050;
	--Purple-1000: #260027;
	/* Yellow */
	--Yellow-100: #fffaec;
	--Yellow-200: #feeec1;
	--Yellow-300: #fee195;
	--Yellow-400: #f7ce5a;
	--Yellow-500: #f4c200;
	--Yellow-600: #d4a800;
	--Yellow-700: #b18c00;
	--Yellow-800: #896c00;
	--Yellow-900: #5f4a00;
	--Yellow-1000: #1f1600;
}

/**
 * Footer module
 */
@media print, screen and (max-width: 767px) {
	.l-footer {
		padding: 20px 15px;
		background-color: #fff;
	}

	.l-footer-logo {
		width: 200px;
		margin: auto;
	}

	.l-fotter-site {
		margin-bottom: 10px;
		text-align: center;
	}

	.l-fotter-site ul {
		display: inline-flex;
	}

	.l-fotter-site ul li:first-child {
		margin-right: 10px;
	}

	.l-fotter-site ul li a {
		color: #2658ce;
	}

	.l-fotter-site ul li a img {
		height: 20px;
	}

	.mod-footer-nav {
		margin-top: 15px;
		text-align: center;
	}

	.mod-footer-nav li {
		display: inline-block;
		margin: 0 10px 2px 0;
		font-size: 1.3rem;
	}

	.mod-footer-nav li a {
		color: #2658ce;
	}

	.is_sp {
		display: block;
	}

	.is_pc {
		display: none;
	}
}

@media print, screen and (min-width: 768px) {
	.l-fotter-site {
		display: none;
	}

	.l-footer {
		min-width: 1024px;
		height: 73px;
		padding: 0;
		background-color: #2658ce;
	}

	.l-footer.simple {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.l-footer.simple .mod-copyright {
		display: inline-block;
		flex: none;
		color: #fafafa;
	}

	.l-footer-inner {
		display: flex;
		justify-content: space-between;
		align-items: stretch;
		width: 100%;
		min-width: 1024px;
		max-width: 1200px;
		margin: 0 auto;
		padding: 0 10px;
		color: #fff;
	}

	.l-footer-no1 {
		display: none;
	}

	.l-footer-logo {
		display: flex;
		align-items: center;
		height: 73px;
	}

	.l-footer-logo img {
		width: 180px;
		margin-bottom: 6px;
	}

	.l-footer-logo span {
		display: block;
		margin-left: 5px;
		font-size: 1.4rem;
		font-weight: bold;
	}

	.mod-footer-nav {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 73px;
		padding: 0 15px 0 25px;
	}

	.mod-footer-nav li {
		display: inline-block;
		margin: 0 30px 0 0;
		font-size: 1.3rem;
	}

	.mod-footer-nav li:last-child {
		margin: 0;
	}

	.mod-footer-nav li a {
		color: #fff;
	}

	.mod-copyright {
		display: flex;
		flex: 1;
		flex-direction: row-reverse;
		align-items: center;
		font-size: 1.2rem;
	}

	.mod-copyright small {
		font-size: 0.8rem;
	}

	.is_pc {
		display: block;
	}

	.is_sp {
		display: none;
	}
}

.l-footer_service_links {
	background-color: #4b4b4b;
	color: #fff;
}

@media print, screen and (min-width: 768px) {
	.l-footer_service_links {
		min-width: 1024px;
	}
}

@media print, screen and (max-width: 767px) {
	.l-footer_service_links {
		width: 100%;
		padding: 20px 0;
	}
}

.l-footer_service_links .text_link {
	color: #fff;
	transition: 0.2s;
}

.l-footer_service_links .text_link:hover {
	opacity: 0.7;
}

@media print, screen and (min-width: 768px) {
	.l-footer_service_links .footer_service_links-inner {
		display: flex;
		flex-wrap: wrap;
		max-width: 1200px;
		/* サービスの幅が違う為変更 元｜padding: 40px 50px 40px; */
		margin: 0 auto;
		/* サービスの幅が違う為変更 元｜width: 1100px; */
		padding: 40px 16px 40px;
	}
}

@media print, screen and (min-width: 768px) {
	.l-footer_service_links .footer_service_links-list {
		display: flex;
		justify-content: space-around;
		width: 100%;
		margin-bottom: 30px;
		padding-bottom: 15px;
		border-bottom: solid 1px #fff;
	}

	.l-footer_service_links .footer_service_links-list .two-columns {
		-webkit-column-count: 2;
		-moz-column-count: 2;
		column-count: 2;
	}
}

@media print, screen and (max-width: 767px) {
	.l-footer_service_links .footer_service_links-list {
		padding: 0 15px;
	}
}

.l-footer_service_links .footer_service_links-block input[type='checkbox'] {
	display: none;
}

@media print, screen and (max-width: 767px) {
	.l-footer_service_links .footer_service_links-block {
		position: relative;
		padding: 20px 0;
		border-bottom: 1px solid #c1c1c1;
	}
}

@media print, screen and (min-width: 768px) {
	.l-footer_service_links .footer_service_links-head {
		cursor: text;
		padding-left: 5px;
		font-size: 1.4rem;
		font-weight: bold;
		line-height: 2.5;
		letter-spacing: 0.1rem;
	}
}

@media print, screen and (max-width: 767px) {
	.l-footer_service_links .footer_service_links-head {
		display: block;
		font-size: 1.4rem;
		font-weight: bold;
		letter-spacing: 0.1rem;
		pointer-events: all;
	}

	.l-footer_service_links .footer_service_links-head::before,
	.l-footer_service_links .footer_service_links-head::after {
		content: '';
		position: absolute;
		width: 15px;
		height: 2px;
		background-color: #fff;
	}

	.l-footer_service_links .footer_service_links-head::before {
		top: 30px;
		right: 10px;
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	.l-footer_service_links .footer_service_links-head::after {
		top: 30px;
		right: 10px;
		-webkit-transform: rotate(90deg);
		transform: rotate(90deg);
	}
}

@media print, screen and (min-width: 768px) {
	.l-footer_service_links .footer_service_links-toggle {
		padding-top: 10px;
		padding-left: 5px;
	}
}

@media print, screen and (max-width: 767px) {
	.l-footer_service_links .footer_service_links-toggle {
		height: 0;
		padding: 0 8px;
		line-height: 2;
		transition: 0.2s;
	}
}

@media print, screen and (min-width: 768px) {
	.l-footer_service_links .footer_service_links-toggle .list_link {
		position: relative;
		margin-bottom: 15px;
		font-size: 1.2rem;
	}
}

@media print, screen and (max-width: 767px) {
	.l-footer_service_links .footer_service_links-toggle .list_link {
		visibility: hidden;
		margin-bottom: 5px;
		opacity: 0;
		font-size: 1.4rem;
	}
}

.l-footer_service_links .footer_service_links-toggle .list_link:before {
	content: '- ';
}

@media print, screen and (max-width: 767px) {
	.l-footer_service_links input[type='checkbox'] {
		display: none;
	}

	.l-footer_service_links input:checked + .footer_service_links-head::after {
		display: none;
	}

	.l-footer_service_links input:checked + .footer_service_links-head + .footer_service_links-toggle {
		height: auto;
		padding: 20px 8px 0;
	}

	.l-footer_service_links input:checked + .footer_service_links-head + .footer_service_links-toggle li {
		visibility: visible;
		opacity: 1;
	}
}

.l-footer_service_links .footer_service_links-box {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
}

@media print, screen and (max-width: 767px) {
	.l-footer_service_links .footer_service_links-box {
		position: relative;
		margin-top: 30px;
		padding: 0 15px;
	}
}

@media print, screen and (min-width: 768px) {
	.l-footer_service_links .footer_service_links-logo {
		width: 300px;
	}

	.l-footer_service_links .footer_service_links-logo img {
		width: 100%;
		height: auto;
	}
}

@media print, screen and (max-width: 767px) {
	.l-footer_service_links .footer_service_links-logo {
		width: 100%;
		margin-bottom: 30px;
	}

	.l-footer_service_links .footer_service_links-logo img {
		width: 100%;
		height: auto;
	}

	.l-footer_service_links .footer_service_links-logo .logo_svg {
		display: block;
		margin: 0 auto;
	}
}

@media print, screen and (min-width: 768px) {
	.l-footer_service_links .footer_service_links-copy {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
		font-size: 1rem;
	}
}

@media print, screen and (max-width: 767px) {
	.l-footer_service_links .footer_service_links-copy {
		margin: auto;
		font-size: 1rem;
		text-align: center;
	}
}

@media print, screen and (min-width: 768px) {
	.l-footer_service_links .footer_service_links-copy small {
		margin-right: 15px;
	}
}

/* variables color */
/*
#colors

@Service #2658CE
@Job #37B500
@Career #FE590F
@tone1 #F4F4F9
@tone2 #EBEBF3
@tone3 #CACAD9
@tone4 #84849A
@tone5 #4A4A4A
*/
/* variables-color */
:root {
	/* color color palette */
	/* Gray */
	--Gray-100: #f6f3f0;
	--Gray-200: #e4e0de;
	--Gray-300: #cbc8c6;
	--Gray-400: #b2afac;
	--Gray-500: #969391;
	--Gray-600: #716e6b;
	--Gray-700: #605d5b;
	--Gray-800: #4e4b49;
	--Gray-900: #2d2b29;
	--Gray-1000: #171413;
	/* Pink */
	--Pink-100: #fef1f5;
	--Pink-200: #fbd8e2;
	--Pink-300: #f7b5c8;
	--Pink-400: #f189aa;
	--Pink-500: #e9588e;
	--Pink-600: #cb006b;
	--Pink-700: #ac0058;
	--Pink-800: #8b0647;
	--Pink-900: #57002a;
	--Pink-1000: #280010;
	/* Red */
	--Red-100: #fff1f1;
	--Red-200: #ffd8d7;
	--Red-300: #fdb4b4;
	--Red-400: #fb888b;
	--Red-500: #f5505f;
	--Red-600: #d40038;
	--Red-700: #ac1731;
	--Red-800: #920625;
	--Red-900: #5c0415;
	--Red-1000: #2f0107;
	/* Orange */
	--Orange-100: #fef2ed;
	--Orange-200: #ffdacd;
	--Orange-300: #ffb59c;
	--Orange-400: #f88d68;
	--Orange-500: #f25915;
	--Orange-600: #c04101;
	--Orange-700: #934225;
	--Orange-800: #79371f;
	--Orange-900: #4f1f0d;
	--Orange-1000: #260c04;
	/* Lime */
	--Lime-100: #f2f9e2;
	--Lime-200: #dfebbf;
	--Lime-300: #c1d293;
	--Lime-400: #a2bb4b;
	--Lime-500: #869f16;
	--Lime-600: #687c0b;
	--Lime-700: #566606;
	--Lime-800: #465408;
	--Lime-900: #2c3505;
	--Lime-1000: #121700;
	/* Green */
	--Green-100: #ecfaec;
	--Green-200: #cdf0cc;
	--Green-300: #a8daa8;
	--Green-400: #66c56c;
	--Green-500: #28af3d;
	--Green-600: #2b8735;
	--Green-700: #276d2e;
	--Green-800: #1b5a22;
	--Green-900: #0f3a14;
	--Green-1000: #021b04;
	/* Aqua */
	--Aqua-100: #e3fafe;
	--Aqua-200: #b7f0fa;
	--Aqua-300: #7edae9;
	--Aqua-400: #12c0d6;
	--Aqua-500: #1aa4b6;
	--Aqua-600: #2b7e8a;
	--Aqua-700: #176774;
	--Aqua-800: #0f5760;
	--Aqua-900: #05373f;
	--Aqua-1000: #00191d;
	/* Blue */
	--Blue-100: #f2f5fc;
	--Blue-200: #dae3f7;
	--Blue-300: #b0c7f9;
	--Blue-400: #8aaaf6;
	--Blue-500: #648cf4;
	--Blue-600: #3a63e0;
	--Blue-700: #2045da;
	--Blue-800: #142ec5;
	--Blue-900: #08118c;
	--Blue-1000: #020448;
	/* Violet */
	--Violet-100: #f4f5fa;
	--Violet-200: #dfe1f6;
	--Violet-300: #bec2f8;
	--Violet-400: #9fa3f4;
	--Violet-500: #8382f3;
	--Violet-600: #6258dd;
	--Violet-700: #5336d8;
	--Violet-800: #451dc3;
	--Violet-900: #290083;
	--Violet-1000: #104;
	/* Purple */
	--Purple-100: #f9f3f9;
	--Purple-200: #eedced;
	--Purple-300: #e2b7e1;
	--Purple-400: #d392d2;
	--Purple-500: #c46bc4;
	--Purple-600: #a247a2;
	--Purple-700: #950c98;
	--Purple-800: #7d0c7f;
	--Purple-900: #4f0050;
	--Purple-1000: #260027;
	/* Yellow */
	--Yellow-100: #fffaec;
	--Yellow-200: #feeec1;
	--Yellow-300: #fee195;
	--Yellow-400: #f7ce5a;
	--Yellow-500: #f4c200;
	--Yellow-600: #d4a800;
	--Yellow-700: #b18c00;
	--Yellow-800: #896c00;
	--Yellow-900: #5f4a00;
	--Yellow-1000: #1f1600;
}

@media print, screen and (max-width: 767px) {
	.l-main {
		margin-bottom: 15px;
	}

	.l-contents {
		font-size: 1.4rem;
	}

	.l-block {
		padding: 15px;
	}

	.l-block.p-none {
		padding: 0 0 15px;
	}

	.l-block.block-pb15 {
		padding-bottom: 15px;
	}

	.l-block.block-p15 {
		padding: 15px;
	}

	.l-block.block-border-radius {
		border-radius: 5px;
	}

	.l-block.block-bk-caution {
		background-color: #fff1f1;
	}

	.l-block.block-login-box {
		padding: 10px 0 0;
	}

	.l-block.block-login-box .mod-box {
		border-radius: 0;
	}

	.l-block.block-p15-p0 {
		padding: 15px 15px 0 15px;
	}

	.l-form1 > div {
		margin-bottom: 10px;
	}
}

@media print, screen and (min-width: 768px) {
	.l-wrapper {
		display: flex;
		flex-direction: column;
		width: 100%;
		min-width: 1024px;
		min-height: 100vh;
		background-color: #ebebf3;
	}

	.l-wrapper > .l-main {
		flex: auto;
	}

	.l-contents {
		display: flex;
		flex: auto;
		align-items: stretch;
		width: 100%;
		min-width: 1024px;
		max-width: 1200px;
		margin: 0 auto;
		font-size: 1.4rem;
	}

	.l-contents.is-wide {
		max-width: 100%;
	}

	.l-contents.is-wide .l-main-inner {
		padding: 0;
	}

	.l-side-nav {
		width: 250px;
		min-width: 250px;
		background-color: #f4f4f9;
		white-space: nowrap;
	}

	.l-main {
		flex: 1;
		min-width: 0;
	}

	.l-block {
		padding-bottom: 15px;
	}

	.l-block.block-pb0 {
		padding-bottom: 0;
	}

	.l-block .l-block-inner {
		max-width: 1200px;
		margin: 0 auto;
	}

	.l-block.block-p15 {
		padding: 15px;
	}

	.l-block.block-border-radius {
		border-radius: 5px;
	}

	.l-block.block-bk-caution {
		background-color: #fff1f1;
	}

	.l-block.block-login-box {
		padding: 10px 15px;
	}

	.l-block.block-p15-p0 {
		padding: 15px 15px 0 15px;
	}

	.l-main-inner {
		padding: 20px;
	}

	.l-form1 {
		display: flex;
	}

	.l-form1 > div {
		flex-grow: 1;
		margin-right: 10px;
	}
}

.l-grid {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	box-sizing: border-box;
	margin-right: -10px;
	margin-left: -10px;
}

.l-grid > * {
	margin-top: 5px;
	margin-bottom: 5px;
}

.l-grid-column1 {
	flex-basis: calc(8.33333% - 20px);
	max-width: calc(8.33333% - 20px);
	margin-right: 10px;
	margin-left: 10px;
}

.l-grid-column2 {
	flex-basis: calc(16.66667% - 20px);
	max-width: calc(16.66667% - 20px);
	margin-right: 10px;
	margin-left: 10px;
}

.l-grid-column3 {
	flex-basis: calc(25% - 20px);
	max-width: calc(25% - 20px);
	margin-right: 10px;
	margin-left: 10px;
}

.l-grid-column4 {
	flex-basis: calc(33.33333% - 20px);
	max-width: calc(33.33333% - 20px);
	margin-right: 10px;
	margin-left: 10px;
}

.l-grid-column5 {
	flex-basis: calc(41.66667% - 20px);
	max-width: calc(41.66667% - 20px);
	margin-right: 10px;
	margin-left: 10px;
}

.l-grid-column6 {
	flex-basis: calc(50% - 20px);
	max-width: calc(50% - 20px);
	margin-right: 10px;
	margin-left: 10px;
}

.l-grid-column7 {
	flex-basis: calc(58.33333% - 20px);
	max-width: calc(58.33333% - 20px);
	margin-right: 10px;
	margin-left: 10px;
}

.l-grid-column8 {
	flex-basis: calc(66.66667% - 20px);
	max-width: calc(66.66667% - 20px);
	margin-right: 10px;
	margin-left: 10px;
}

.l-grid-column9 {
	flex-basis: calc(75% - 20px);
	max-width: calc(75% - 20px);
	margin-right: 10px;
	margin-left: 10px;
}

.l-grid-column10 {
	flex-basis: calc(83.33333% - 20px);
	max-width: calc(83.33333% - 20px);
	margin-right: 10px;
	margin-left: 10px;
}

.l-grid-column11 {
	flex-basis: calc(91.66667% - 20px);
	max-width: calc(91.66667% - 20px);
	margin-right: 10px;
	margin-left: 10px;
}

.l-grid-column12 {
	flex-basis: calc(100% - 20px);
	max-width: calc(100% - 20px);
	margin-right: 10px;
	margin-left: 10px;
}

.l-grid-fix {
	margin-right: 20px;
}

.l-grid-variable {
	flex-grow: 1;
}

.l-grid-variable .note {
	margin-top: 0.5em;
}

.l-grid.form-item {
	flex-wrap: nowrap;
	align-items: center;
	margin: 0 15px;
	padding: 15px 0;
	border-bottom: 1px dotted #cacad9;
}

.l-grid.form-item.form-item-last {
	border: none;
}

@media print, screen and (min-width: 768px) {
	.l-grid.form-item.form-item-last > div {
		margin-bottom: 0;
	}
}

.l-grid.form-item.form-item-start {
	align-items: start;
}

.l-grid.form-item.form-item-center {
	justify-content: center;
}

.l-grid.form-item.form-item-column {
	flex-direction: column;
	align-items: flex-start;
}

.l-grid.wrap-item {
	margin: 0;
}

.l-grid.wrap-item > div {
	width: 200px;
}

.ie .l-grid.wrap-item {
	display: block;
}

.ie .l-grid.wrap-item > div {
	display: inline-block;
}

.l-grid.form-wrap-item {
	flex-wrap: wrap;
}

.l-grid.form-item-pt0 {
	padding-top: 0;
}

.l-grid.form-item-p8 {
	padding: 8px 0;
}

.l-error-cover {
	width: 100%;
	background-color: #fff6dd;
}

.mod-alert p .inner-number {
	display: inline-block;
	margin: 0 5px;
	font-size: 25px;
}

@media print, screen and (max-width: 767px) {
	.grid-cancel {
		display: block;
		margin-right: 0;
		margin-left: 0;
	}

	.grid-cancel > * {
		max-width: 100%;
		margin: 0 0 10px 0;
	}

	.l-grid.form-item {
		flex-wrap: wrap;
	}

	.l-grid.form-item.form-item-column {
		flex-direction: column;
		align-items: flex-start;
	}

	.l-grid-fix {
		width: 100%;
		margin-right: 0;
	}

	.l-grid-variable {
		width: 100%;
	}

	.l-grid-variable .note {
		margin-top: 0.5em;
	}

	.l-grid.wrap-item {
		justify-content: space-between;
	}

	.l-grid.wrap-item > div {
		width: 49%;
	}

	.l-grid.wrap-item.single-item > div {
		width: 100%;
	}

	.sp-modal-inner {
		padding: 15px;
	}

	.sp-modal-inner .mod-button {
		margin-top: 10px;
	}

	.l-error-cover {
		width: 100%;
		background-color: #fff6dd;
	}

	.mod-alert p .inner-number {
		display: inline-block;
		margin: 0 5px;
		font-size: 22px;
	}
}

.l-flex {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.l-flex-nowrap {
	flex-wrap: nowrap;
}

.l-flex-between {
	justify-content: space-between;
}

.l-flex-center {
	justify-content: center;
}

.l-flex-start {
	justify-content: flex-start;
}

.l-flex-end {
	justify-content: flex-end;
}

.l-flex-al-center {
	align-items: center;
}

.l-flex-al-baseline {
	align-items: baseline;
}

.l-flex-al-start {
	align-items: flex-start;
}

.l-flex-al-end {
	align-items: flex-end;
}

@media print, screen and (min-width: 768px) {
	.l-flex-pc-al-center {
		align-items: center;
	}
}

.l-flex-row {
	flex-direction: row;
}

.l-flex-row-reverse {
	flex-direction: row-reverse;
}

.l-flex-column {
	flex-direction: column;
}

.l-flex-column-reverse {
	flex-direction: column-reverse;
}

.l-flex-nowrap {
	flex-wrap: nowrap;
}

.l-flex-full {
	width: 100%;
}

@media print, screen and (max-width: 767px) {
	.l-flex-sp-column {
		flex-direction: column;
	}
}

.l-flex-c-auto {
	flex: 1 1 auto;
}

.l-flex-c-fixed {
	flex: 0 0 auto;
}

.l-flex-c-variable {
	flex: 1 1 auto;
	min-width: 0;
}

.l-flex-gap0 {
	gap: 0;
	--flex-gap: 0;
}

.l-flex-gap4 {
	gap: 4px;
	--flex-gap: 4px;
}

.l-flex-gap8 {
	gap: 8px;
	--flex-gap: 8px;
}

.l-flex-gap12 {
	gap: 12px;
	--flex-gap: 12px;
}

.l-flex-gap16 {
	gap: 16px;
	--flex-gap: 16px;
}

.l-flex-gap20 {
	gap: 20px;
	--flex-gap: 20px;
}

.l-flex-gap24 {
	gap: 24px;
	--flex-gap: 24px;
}

.l-flex-gap28 {
	gap: 28px;
	--flex-gap: 28px;
}

.l-flex-gap32 {
	gap: 32px;
	--flex-gap: 32px;
}

.l-flex-gap40 {
	gap: 40px;
	--flex-gap: 40px;
}

.l-flex-gap48 {
	gap: 48px;
	--flex-gap: 48px;
}

.l-flex-row-gap0 {
	row-gap: 0;
}

.l-flex-row-gap4 {
	row-gap: 4px;
}

.l-flex-row-gap8 {
	row-gap: 8px;
}

.l-flex-row-gap12 {
	row-gap: 12px;
}

.l-flex-row-gap16 {
	row-gap: 16px;
}

.l-flex-row-gap20 {
	row-gap: 20px;
}

.l-flex-row-gap24 {
	row-gap: 24px;
}

.l-flex-row-gap28 {
	row-gap: 28px;
}

.l-flex-row-gap32 {
	row-gap: 32px;
}

.l-flex-row-gap40 {
	row-gap: 40px;
}

.l-flex-row-gap48 {
	row-gap: 48px;
}

.l-flex-column-gap0 {
	-webkit-column-gap: 0;
	-moz-column-gap: 0;
	column-gap: 0;
	--flex-gap: 0;
}

.l-flex-column-gap4 {
	-webkit-column-gap: 4px;
	-moz-column-gap: 4px;
	column-gap: 4px;
	--flex-gap: 4px;
}

.l-flex-column-gap8 {
	-webkit-column-gap: 8px;
	-moz-column-gap: 8px;
	column-gap: 8px;
	--flex-gap: 8px;
}

.l-flex-column-gap12 {
	-webkit-column-gap: 12px;
	-moz-column-gap: 12px;
	column-gap: 12px;
	--flex-gap: 12px;
}

.l-flex-column-gap16 {
	-webkit-column-gap: 16px;
	-moz-column-gap: 16px;
	column-gap: 16px;
	--flex-gap: 16px;
}

.l-flex-column-gap20 {
	-webkit-column-gap: 20px;
	-moz-column-gap: 20px;
	column-gap: 20px;
	--flex-gap: 20px;
}

.l-flex-column-gap24 {
	-webkit-column-gap: 24px;
	-moz-column-gap: 24px;
	column-gap: 24px;
	--flex-gap: 24px;
}

.l-flex-column-gap28 {
	-webkit-column-gap: 28px;
	-moz-column-gap: 28px;
	column-gap: 28px;
	--flex-gap: 28px;
}

.l-flex-column-gap32 {
	-webkit-column-gap: 32px;
	-moz-column-gap: 32px;
	column-gap: 32px;
	--flex-gap: 32px;
}

.l-flex-column-gap40 {
	-webkit-column-gap: 40px;
	-moz-column-gap: 40px;
	column-gap: 40px;
	--flex-gap: 40px;
}

.l-flex-column-gap48 {
	-webkit-column-gap: 48px;
	-moz-column-gap: 48px;
	column-gap: 48px;
	--flex-gap: 48px;
}

@media print, screen and (min-width: 768px) {
	.l-flex-cols-pc-1 > * {
		flex: 0 0 calc((100% - (var(--flex-gap, 0px) * (1 - 1))) / 1);
		box-sizing: border-box;
	}
}

@media print, screen and (min-width: 768px) {
	.l-flex-cols-pc-2 > * {
		flex: 0 0 calc((100% - (var(--flex-gap, 0px) * (2 - 1))) / 2);
		box-sizing: border-box;
	}
}

@media print, screen and (min-width: 768px) {
	.l-flex-cols-pc-3 > * {
		flex: 0 0 calc((100% - (var(--flex-gap, 0px) * (3 - 1))) / 3);
		box-sizing: border-box;
	}
}

@media print, screen and (min-width: 768px) {
	.l-flex-cols-pc-4 > * {
		flex: 0 0 calc((100% - (var(--flex-gap, 0px) * (4 - 1))) / 4);
		box-sizing: border-box;
	}
}

@media print, screen and (min-width: 768px) {
	.l-flex-cols-pc-5 > * {
		flex: 0 0 calc((100% - (var(--flex-gap, 0px) * (5 - 1))) / 5);
		box-sizing: border-box;
	}
}

@media print, screen and (min-width: 768px) {
	.l-flex-cols-pc-6 > * {
		flex: 0 0 calc((100% - (var(--flex-gap, 0px) * (6 - 1))) / 6);
		box-sizing: border-box;
	}
}

@media print, screen and (min-width: 768px) {
	.l-flex-cols-pc-7 > * {
		flex: 0 0 calc((100% - (var(--flex-gap, 0px) * (7 - 1))) / 7);
		box-sizing: border-box;
	}
}

@media print, screen and (min-width: 768px) {
	.l-flex-cols-pc-8 > * {
		flex: 0 0 calc((100% - (var(--flex-gap, 0px) * (8 - 1))) / 8);
		box-sizing: border-box;
	}
}

@media print, screen and (min-width: 768px) {
	.l-flex-cols-pc-9 > * {
		flex: 0 0 calc((100% - (var(--flex-gap, 0px) * (9 - 1))) / 9);
		box-sizing: border-box;
	}
}

@media print, screen and (max-width: 767px) {
	.l-flex-cols-sp-1 > * {
		flex: 0 0 calc((100% - (var(--flex-gap, 0px) * (1 - 1))) / 1);
		box-sizing: border-box;
	}
}

@media print, screen and (max-width: 767px) {
	.l-flex-cols-sp-2 > * {
		flex: 0 0 calc((100% - (var(--flex-gap, 0px) * (2 - 1))) / 2);
		box-sizing: border-box;
	}
}

@media print, screen and (max-width: 767px) {
	.l-flex-cols-sp-3 > * {
		flex: 0 0 calc((100% - (var(--flex-gap, 0px) * (3 - 1))) / 3);
		box-sizing: border-box;
	}
}

.min-w80 {
	min-width: 80px;
}

@media print, screen and (max-width: 767px) {
	#overlay {
		display: none;
		position: fixed;
		z-index: 600;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.8);
	}

	.l-side-nav {
		position: fixed;
		z-index: 700;
		top: 0;
		bottom: 0;
		left: 100%;
		overflow-y: auto;
		width: 100%;
		height: 100%;
		padding-left: 40px;
		transition: all 0.3s ease-in-out;
		-webkit-transform: none;
		transform: none;
		-webkit-overflow-scrolling: touch;
	}

	.l-side-nav.is-career .l-side-nav-inner {
		background: #fff7f3;
	}

	.l-side-nav.is-career .l-side-nav-inner .menu {
		background: #fe590f;
	}

	.l-side-nav.is-career .has-submenu > a:before {
		background: #fe590f;
	}

	.l-side-nav.is-career .has-submenu > a:after {
		background: #fe590f;
	}

	.l-side-nav.is-career .has-submenu.is-open > a {
		color: #fe590f;
	}

	.l-side-nav.is-career .has-submenu.is-open > a i:before {
		color: #fe590f;
	}

	.l-side-nav.is-career .has-submenu.is-open > a:before {
		background: #fe590f;
	}

	.l-side-nav.is-career .has-submenu.is-open > a:after {
		opacity: 0;
	}

	.l-side-nav.is-career .has-submenu li a span.label {
		display: inline-block;
		margin: 0 10px;
		padding: 1px 5px;
		border: 1px solid #fe590f;
		border-radius: 3px;
		background-color: #fe590f;
		color: #fafafa;
		font-size: 1.2rem;
	}

	.l-side-nav.is-career .has-submenu li a i:before {
		color: #4a4a4a;
	}

	.l-side-nav.is-career .has-submenu li a:hover,
	.l-side-nav.is-career .has-submenu li a:hover.blank:after {
		color: #fe590f;
	}

	.l-side-nav.is-career .has-submenu li a.onpage {
		border-left: 3px solid #fe590f;
		color: #fe590f;
	}

	.l-side-nav.is-career .mod-button.is-active {
		background: #fff;
		color: #fe590f;
	}

	.l-side-nav.is-recruits .l-side-nav-inner {
		background: #f5ffea;
	}

	.l-side-nav.is-recruits .l-side-nav-inner .menu {
		background: #8bc34a;
	}

	.l-side-nav.is-recruits .has-submenu > a:before {
		background: #8bc34a;
	}

	.l-side-nav.is-recruits .has-submenu > a:after {
		background: #8bc34a;
	}

	.l-side-nav.is-recruits .has-submenu.is-open > a {
		color: #8bc34a;
	}

	.l-side-nav.is-recruits .has-submenu.is-open > a i:before {
		color: #8bc34a;
	}

	.l-side-nav.is-recruits .has-submenu.is-open > a:before {
		background: #8bc34a;
	}

	.l-side-nav.is-recruits .has-submenu.is-open > a:after {
		opacity: 0;
	}

	.l-side-nav.is-recruits .has-submenu li a:hover,
	.l-side-nav.is-recruits .has-submenu li a:hover.blank:after {
		color: #8bc34a;
	}

	.l-side-nav.is-recruits .has-submenu li a.onpage {
		border-left: 3px solid #8bc34a;
		color: #8bc34a;
	}

	.l-side-nav.is-recruits .has-submenu li a span.label-recruit {
		display: inline-block;
		margin: 0 10px;
		padding: 1px 5px;
		border: 1px solid #8bc34a;
		border-radius: 3px;
		background-color: #8bc34a;
		color: #fafafa;
		font-size: 1.2rem;
	}

	.l-side-nav.is-recruits .mod-button.is-active {
		background: #fff;
		color: #8bc34a;
	}

	.l-side-nav .icon-close {
		position: absolute;
		z-index: 600;
		top: 10px;
		left: 10px;
		font-size: 2rem;
	}

	.l-side-nav.is-open {
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
	}

	.l-side-nav.is-open .icon-close {
		position: absolute;
		z-index: 600;
		top: 10px;
		left: 10px;
		font-size: 2rem;
	}

	.l-side-nav.is-open .icon-close:after {
		content: '';
		display: block;
		width: 20px;
		height: 80vh;
		border: 1px solid transparent;
	}

	.l-side-nav-inner {
		min-height: 100%;
		background: #ebebf3;
	}

	.l-side-nav .menu {
		padding: 10px;
		background: #2658ce;
		color: #fff;
		font-size: 1.6rem;
		font-weight: bold;
	}

	.l-nav-account {
		display: block;
		position: relative;
		padding: 10px 15px;
	}

	.l-nav-account .logo {
		display: none;
	}

	.l-nav-account strong {
		display: block;
		overflow: hidden;
		color: #4a4a4a;
		white-space: nowrap !important;
		text-overflow: ellipsis !important;
	}

	.l-nav-account small {
		display: block;
		overflow: hidden;
		color: #84849a;
		white-space: nowrap !important;
		text-overflow: ellipsis !important;
	}

	.l-nav-account.is_partner {
		padding-left: 60px;
	}

	.l-nav-account.is_partner .logo {
		display: block;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 10px;
		width: 40px;
		height: 40px;
		margin: auto;
		border-radius: 5px;
		background: no-repeat 50% 50%;
		background-color: #fafafa;
		background-image: url('../../assets/img/partner/icon-partnar.svg');
		background-size: contain;
	}

	.l-nav-account .mod-button {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 30px;
		margin-top: 3px;
		padding: 0;
		box-shadow: none;
		color: #f4f4f9;
		font-size: 1.4rem;
	}

	.l-nav-account .nav-status-box {
		padding-top: 8px;
		border-top: 1px dashed #cacad9;
	}

	.l-nav-account .nav-status-box .mod-button {
		margin: 5px 0;
	}

	.l-nav-account .nav-status-box .mod-button.button-icon i.icon-question2 {
		font-size: 0.9rem;
	}

	.l-nav-account .nav-status-box .mod-button.button-icon i.icon-question2:before {
		width: 1.6rem;
		height: 1.6rem;
		padding-top: 3px;
		border: 1px solid #fafafa;
		border-radius: 50%;
	}

	.l-nav-account .nav-status-box .mod-button.color-job {
		color: #8bc34a;
	}

	.l-nav-account .nav-status-box .mod-button.color-job i:before {
		color: #8bc34a;
	}

	.l-nav-account .nav-status-box .mod-button.label-bonus:hover {
		background-color: #969;
	}

	.l-nav-account .nav-status-box .mod-button.label-carrier:hover {
		background-color: #fe590f;
	}

	.l-nav-account .nav-status-box .mod-button.label-service:hover {
		background-color: #2658ce;
	}

	.l-nav-account .nav-status-box .mod-button.label-job:hover {
		background-color: #8bc34a;
	}

	.l-nav-account .nav-status-box .mod-button.button-shadow {
		box-shadow: 0 3px 2px rgba(0, 0, 0, 0.1);
	}

	.l-nav-penalty-box {
		padding: 0 15px 15px;
	}

	.l-nav-accept-box {
		padding: 15px;
		background: #fe590f;
	}

	.l-nav-accept-box .mod-button {
		position: relative;
		padding: 13px 13px 13px 0;
		color: #b40000;
		font-size: 1.6rem;
		font-weight: bold;
	}

	.l-nav-accept-box .mod-button i {
		display: inline-block;
		position: relative;
		margin-right: 5px;
		font-size: 1.6rem;
	}

	.l-nav-accept-box .mod-button .mod-badge {
		position: absolute;
		top: -8px;
		right: -8px;
	}

	.l-nav-btn > a {
		display: block;
		position: relative;
		z-index: 1;
		align-items: center;
		padding-left: 40px;
		border-bottom: 1px solid #cacad9;
		background-color: #fff;
		color: #000;
		font-size: 1.6rem;
		line-height: 50px;
	}

	.l-nav-btn > a i {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 15px;
		width: 20px;
		height: 20px;
		margin: auto;
	}

	.l-nav-btn > a i:before {
		color: #000;
		font-size: 2.0rem;
	}

	.has-submenu > a {
		position: relative;
	}

	.has-submenu > a:before {
		content: '';
		display: block;
		position: absolute;
		z-index: 10;
		top: 50%;
		right: 15px;
		width: 10px;
		height: 2px;
		background: #000;
	}

	.has-submenu > a:after {
		content: '';
		display: block;
		position: absolute;
		z-index: 20;
		top: 42%;
		right: 19px;
		width: 2px;
		height: 10px;
		background: #000;
	}

	.has-submenu ul {
		visibility: hidden;
		max-height: 0;
		opacity: 0;
		transition: all 0.4s ease-out;
	}

	.has-submenu.is-open ul {
		visibility: visible;
		max-height: 500px;
		opacity: 1;
		transition: all 0.7s ease;
	}

	.has-submenu.is-open > a {
		color: #2658ce;
	}

	.has-submenu.is-open > a i:before {
		color: #2658ce;
	}

	.has-submenu.is-open > a:before {
		background: #2658ce;
	}

	.has-submenu.is-open > a:after {
		opacity: 0;
	}

	.has-submenu li a {
		display: block;
		padding: 10px 10px 10px 15px;
		border-bottom: 1px solid #cacad9;
		border-left: 3px solid #cacad9;
		background: #f4f4f9;
		color: #000;
		font-size: 1.4rem;
	}

	.has-submenu li a:hover {
		color: #2658ce;
	}

	.has-submenu li a.blank:after {
		content: '\e900';
		color: #2658ce;
	}

	.has-submenu li a.onpage {
		border-left: 3px solid #2658ce;
		color: #2658ce;
		font-weight: bold;
	}

	.is-blank {
		position: relative;
	}

	.is-blank:before {
		display: block;
		position: absolute;
		z-index: 10;
		top: 0;
		right: 15px;
		bottom: 0;
		width: 1em;
		height: 1em;
		margin: auto;
		color: #000;
	}

	.is-blank a {
		font-family: Hiragino Kaku Gothic ProN, '游ゴシック体', YuGothic, '游ゴシック Medium', 'Yu Gothic Medium', Roboto, Meiryo, sans-serif;
	}

	.is-label {
		position: relative;
	}

	.is-label span.label-new {
		display: flex;
		display: block;
		position: absolute;
		top: calc(50% - 11px);
		right: 12px;
		justify-content: center;
		align-items: center;
		height: 22px;
		padding: 1px 5px;
		border: 1px solid #fe590f;
		border-radius: 3px;
		background-color: #fe590f;
		color: #fafafa;
		font-size: 1.2rem;
		line-height: 1.6;
	}

	.side-bnr {
		display: none;
	}
}

@media print, screen and (min-width: 768px) {
	.l-side-nav-inner {
		min-height: 100%;
		background: #ebebf3;
	}

	.l-side-nav.is-career .l-side-nav-inner {
		background: #fff7f3;
	}

	.l-side-nav.is-career .has-submenu > a:before {
		background: #fe590f;
	}

	.l-side-nav.is-career .has-submenu > a:after {
		background: #fe590f;
	}

	.l-side-nav.is-career .has-submenu.is-open > a,
	.l-side-nav.is-career .has-submenu a:hover {
		color: #fe590f;
	}

	.l-side-nav.is-career .has-submenu.is-open > a i:before,
	.l-side-nav.is-career .has-submenu a:hover i:before {
		color: #fe590f;
	}

	.l-side-nav.is-career .has-submenu.is-open > a:before,
	.l-side-nav.is-career .has-submenu a:hover:before {
		background: #fe590f;
	}

	.l-side-nav.is-career .has-submenu.is-open a:after {
		opacity: 0;
	}

	.l-side-nav.is-career .has-submenu a.onpage {
		border-left: 3px solid #fe590f;
		color: #fe590f;
		font-weight: bold;
	}

	.l-side-nav.is-career .has-submenu a i:before {
		color: #4a4a4a;
	}

	.l-side-nav.is-career .mod-button.is-active {
		background: #fff;
		color: #fe590f;
	}

	.l-side-nav.is-recruits .l-side-nav-inner {
		background: #f5ffea;
	}

	.l-side-nav.is-recruits .has-submenu > a:before {
		background: #8bc34a;
	}

	.l-side-nav.is-recruits .has-submenu > a:after {
		background: #8bc34a;
	}

	.l-side-nav.is-recruits .has-submenu.is-open > a,
	.l-side-nav.is-recruits .has-submenu a:hover {
		color: #8bc34a;
	}

	.l-side-nav.is-recruits .has-submenu.is-open > a i:before,
	.l-side-nav.is-recruits .has-submenu a:hover i:before {
		color: #8bc34a;
	}

	.l-side-nav.is-recruits .has-submenu.is-open > a:before,
	.l-side-nav.is-recruits .has-submenu a:hover:before {
		background: #8bc34a;
	}

	.l-side-nav.is-recruits .has-submenu.is-open > a:after {
		opacity: 0;
	}

	.l-side-nav.is-recruits .has-submenu a:hover {
		background: #f5ffea;
	}

	.l-side-nav.is-recruits .has-submenu a.onpage {
		border-left: 3px solid #8bc34a;
		color: #8bc34a;
		font-weight: bold;
	}

	.l-side-nav.is-recruits .mod-button.is-active {
		background: #fff;
		color: #8bc34a;
	}

	.l-side-nav.is-recruits .l-nav-btn > a:hover {
		background: #f5ffea;
		color: #8bc34a;
	}

	.l-nav-account {
		display: block;
		position: relative;
		padding: 10px 15px;
	}

	.l-nav-account .logo {
		display: none;
	}

	.l-nav-account strong {
		display: block;
		overflow: hidden;
		color: #4a4a4a;
		line-height: 1.6;
		white-space: nowrap !important;
		text-overflow: ellipsis !important;
	}

	.l-nav-account small {
		display: block;
		overflow: hidden;
		color: #84849a;
		line-height: 1.6;
		white-space: nowrap !important;
		text-overflow: ellipsis !important;
	}

	.l-nav-account.is_partner {
		padding-left: 60px;
	}

	.l-nav-account.is_partner .logo {
		display: block;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 10px;
		width: 40px;
		height: 40px;
		margin: auto;
		border-radius: 5px;
		background: no-repeat 50% 50%;
		background-color: #fafafa;
		background-image: url('../../assets/img/partner/icon-partnar.svg');
		background-size: contain;
	}

	.l-nav-account .mod-button {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 26px;
		margin-top: 3px;
		padding: 0;
		box-shadow: none;
		font-size: 1.2rem;
	}

	.l-nav-account .nav-status-box {
		margin-top: 8px;
		padding-top: 8px;
		border-top: 1px dashed #cacad9;
	}

	.l-nav-account .nav-status-box .mod-button {
		margin: 7px 0;
	}

	.l-nav-account .nav-status-box .mod-button:hover {
		opacity: 0.7;
	}

	.l-nav-account .nav-status-box .mod-button.button-icon i.icon-question2 {
		font-size: 0.9rem;
	}

	.l-nav-account .nav-status-box .mod-button.button-icon i.icon-question2:before {
		width: 1.6rem;
		height: 1.6rem;
		padding-top: 3px;
		border: 1px solid #fafafa;
		border-radius: 50%;
	}

	.l-nav-account .nav-status-box .mod-button.color-job {
		color: #8bc34a;
	}

	.l-nav-account .nav-status-box .mod-button.color-job i:before {
		color: #8bc34a;
	}

	.l-nav-account .nav-status-box .mod-button.label-bonus:hover {
		background-color: #969;
	}

	.l-nav-account .nav-status-box .mod-button.label-bonus-new:hover {
		background-color: #c36;
	}

	.l-nav-account .nav-status-box .mod-button.label-carrier:hover {
		background-color: #fe590f;
	}

	.l-nav-account .nav-status-box .mod-button.label-service:hover {
		background-color: #2658ce;
	}

	.l-nav-account .nav-status-box .mod-button.label-job:hover {
		background-color: #8bc34a;
	}

	.l-nav-account .nav-status-box .mod-button.button-shadow {
		box-shadow: 0 3px 2px rgba(0, 0, 0, 0.1);
	}

	.l-nav-penalty-box {
		padding: 0 15px 15px;
	}

	.l-nav-penalty-box .error-message {
		margin-left: 15px;
	}

	.l-nav-accept-box {
		padding: 15px;
		background: #fe590f;
	}

	.l-nav-accept-box .mod-button {
		position: relative;
		padding: 13px 13px 13px 0;
		color: #b40000;
		font-size: 1.6rem;
		font-weight: bold;
	}

	.l-nav-accept-box .mod-button i {
		display: inline-block;
		position: relative;
		margin-right: 5px;
		font-size: 1.8rem;
	}

	.l-nav-accept-box .mod-button .mod-badge {
		position: absolute;
		top: -10px;
		right: -10px;
	}

	.l-nav-btn > a {
		display: block;
		position: relative;
		align-items: center;
		padding-left: 40px;
		border-bottom: 1px solid #cacad9;
		background-color: #fff;
		color: #000;
		font-size: 1.6rem;
		line-height: 50px;
	}

	.l-nav-btn > a i {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 15px;
		width: 20px;
		height: 20px;
		margin: auto;
	}

	.l-nav-btn > a i:before {
		color: #000;
		font-size: 2.0rem;
	}

	.l-nav-btn > a:hover {
		background-color: #fff7f3;
		color: #fe590f;
	}

	.has-submenu > a:before {
		content: '';
		display: block;
		position: absolute;
		top: 50%;
		right: 15px;
		width: 10px;
		height: 2px;
		background: #000;
	}

	.has-submenu > a:after {
		content: '';
		display: block;
		position: absolute;
		top: 42%;
		right: 19px;
		width: 2px;
		height: 10px;
		background: #000;
	}

	.has-submenu ul {
		visibility: hidden;
		max-height: 0;
		opacity: 0;
		transition: all 0.4s ease-out;
	}

	.has-submenu.is-open ul {
		visibility: visible;
		max-height: 500px;
		opacity: 1;
		transition: all 0.7s ease;
	}

	.has-submenu.is-open > a {
		color: #2658ce;
	}

	.has-submenu.is-open > a i:before {
		color: #2658ce;
	}

	.has-submenu.is-open > a:before {
		background: #2658ce;
	}

	.has-submenu.is-open > a:after {
		opacity: 0;
	}

	.has-submenu li a {
		display: flex;
		padding: 10px 10px 10px 15px;
		border-bottom: 1px solid #cacad9;
		border-left: 3px solid #cacad9;
		color: #000;
		font-size: 1.4rem;
	}

	.has-submenu li a span.label {
		display: inline-block;
		margin-left: auto;
		padding: 1px 5px;
		border: 1px solid #fe590f;
		border-radius: 3px;
		background-color: #fe590f;
		color: #fafafa;
		font-size: 1.2rem;
	}

	.has-submenu li a span.label-recruit {
		display: inline-block;
		margin: 0 10px;
		margin-left: auto;
		padding: 1px 5px;
		border: 1px solid #8bc34a;
		border-radius: 3px;
		background-color: #8bc34a;
		color: #fafafa;
		font-size: 1.2rem;
	}

	.has-submenu li a:hover,
	.has-submenu li a:hover.blank:after {
		color: #2658ce;
	}

	.has-submenu li a.blank:after {
		display: inline-block;
		margin-left: 5px;
		color: #4a4a4a;
	}

	.has-submenu li a.onpage {
		border-left: 3px solid #2658ce;
		color: #2658ce;
		font-weight: bold;
	}

	.has-submenu li a:hover span.label {
		background-color: #fafafa;
		color: #fe590f;
	}

	.has-submenu li a:hover span.label-recruit {
		background-color: #fafafa;
		color: #8bc34a;
	}

	.is-blank {
		position: relative;
	}

	.is-blank:before {
		display: block;
		position: absolute;
		z-index: 10;
		top: 0;
		right: 15px;
		bottom: 0;
		width: 1em;
		height: 1em;
		margin: auto;
		color: #000;
	}

	.is-blank i:before {
		color: #84849a;
		font-size: 1.6rem;
	}

	.is-blank a {
		font-family: Hiragino Kaku Gothic ProN, '游ゴシック体', YuGothic, '游ゴシック Medium', 'Yu Gothic Medium', Roboto, Meiryo, sans-serif;
	}

	.is-blank:hover i:before {
		color: #fe590f;
	}

	.is-blank:hover:before {
		color: #fe590f;
	}

	.is-recruits .is-blank:hover i:before {
		color: #8bc34a;
	}

	.is-recruits .is-blank:hover:before {
		color: #8bc34a;
	}

	.is-label {
		position: relative;
	}

	.is-label span.label-new {
		display: flex;
		display: block;
		position: absolute;
		top: calc(50% - 11px);
		right: 12px;
		justify-content: center;
		align-items: center;
		height: 22px;
		padding: 1px 5px;
		border: 1px solid #fe590f;
		border-radius: 3px;
		background-color: #fe590f;
		color: #fafafa;
		font-size: 1.2rem;
		line-height: 1.6;
	}

	.is-label:hover i:before {
		color: #fe590f;
	}

	.is-label:hover:before {
		color: #fe590f;
	}

	.side-bnr {
		padding: 15px 15px 0 15px;
	}

	.side-bnr img {
		width: 100%;
	}

	.side-bnr .widget-bnr {
		margin: 20px 0 0 0;
	}

	.side-bnr a:hover {
		opacity: 0.7;
	}
}

.l-nav-celebration-program {
	display: flex;
	flex-direction: column;
	padding: 0 15px 15px;
	gap: 10px;
}

.l-nav-celebration-program-info {
	color: #fff;
}

.l-nav-celebration-program-title {
	font-size: 1.4rem;
	text-align: center;
}

.l-nav-celebration-program-caption {
	font-size: 1.2rem;
	line-height: 1.5;
	white-space: normal;
}

.l-nav-celebration-program-penalty .l-nav-celebration-program-caption {
	color: #fff;
}

.l-nav-celebration-program-caption a {
	color: #383737;
	text-decoration: underline;
}

.l-nav-celebration-program-info .l-nav-celebration-program-caption a {
	color: #fff;
}

.l-nav-celebration-program-penalty .l-nav-celebration-program-caption a {
	color: #fff;
}

.l-nav-celebration-program-status {
	display: flex;
	flex-wrap: nowrap;
	font-size: 1.2rem;
	gap: 5px;
}

.l-nav-celebration-program-status-name {
	color: #383737;
	font-weight: bold;
}

.l-nav-celebration-program-penalty .l-nav-celebration-program-status-name {
	color: #fff;
}

.l-nav-celebration-program-status-label {
	color: #383737;
}

.l-nav-celebration-program-status-label a {
	color: #fe590f;
	text-decoration: underline;
}

.l-nav-celebration-program-penalty .l-nav-celebration-program-status-label a {
	color: #fff;
}

.l-nav-celebration-program-teaser {
	padding: 10px 15px;
	border-radius: 5px;
	background-color: #fff;
	color: #fe590f;
	font-size: 1.4rem;
	font-weight: normal;
	text-align: center;
}

.l-nav-celebration-program-cta-message {
	margin-bottom: 5px;
	font-size: 1.6rem;
}

.l-nav-celebration-program-cta-message.penalty {
	color: #b40000;
}

.l-nav-celebration-program-cta .mod-button {
	position: relative;
	font-size: 1.4rem;
	font-weight: normal;
}

.l-nav-celebration-program-cta .mod-button.button-white {
	padding: 10px 15px;
	color: #fe590f;
}

.l-nav-celebration-program-cta .mod-button.button-white:hover {
	color: #c03c01;
}

.l-nav-celebration-program-cta .mod-button.button-white:visited {
	color: #fe590f;
}

.l-nav-celebration-program-cta .mod-button.button-career {
	color: #fff;
}

.l-nav-celebration-program-cta .mod-button.button-career:hover {
	color: #d9d9d9;
}

.l-nav-celebration-program-cta .mod-button.button-career:visited {
	color: #fff;
}

.l-nav-celebration-program-cta .mod-button .mod-badge {
	position: absolute;
	top: -10px;
	right: -10px;
}

.l-nav-celebration-program-hide {
	position: relative;
}

.l-nav-celebration-program-hide::before {
	content: '';
	display: block;
	position: absolute;
	top: 7px;
	right: 15px;
	width: 10px;
	height: 2px;
	background: #000;
}

.l-nav-celebration-program-hide::after {
	content: '';
	display: block;
	position: absolute;
	top: 3px;
	right: 19px;
	width: 2px;
	height: 10px;
	background: #000;
}

.l-nav-celebration-program-hide .l-nav-celebration-program-caption {
	display: none;
}

.l-nav-celebration-program-hide.is-open::after {
	display: none;
}

.l-nav-celebration-program-hide.is-open .l-nav-celebration-program-caption {
	display: block;
}

.l-nav-celebration-program-push {
	background: #fe590f;
}

.l-nav-celebration-program-penalty {
	padding-top: 15px;
	background: #b40000;
}

/* variables color */
/*
#colors

@Service #2658CE
@Job #37B500
@Career #FE590F
@tone1 #F4F4F9
@tone2 #EBEBF3
@tone3 #CACAD9
@tone4 #84849A
@tone5 #4A4A4A
*/
/* variables-color */
:root {
	/* color color palette */
	/* Gray */
	--Gray-100: #f6f3f0;
	--Gray-200: #e4e0de;
	--Gray-300: #cbc8c6;
	--Gray-400: #b2afac;
	--Gray-500: #969391;
	--Gray-600: #716e6b;
	--Gray-700: #605d5b;
	--Gray-800: #4e4b49;
	--Gray-900: #2d2b29;
	--Gray-1000: #171413;
	/* Pink */
	--Pink-100: #fef1f5;
	--Pink-200: #fbd8e2;
	--Pink-300: #f7b5c8;
	--Pink-400: #f189aa;
	--Pink-500: #e9588e;
	--Pink-600: #cb006b;
	--Pink-700: #ac0058;
	--Pink-800: #8b0647;
	--Pink-900: #57002a;
	--Pink-1000: #280010;
	/* Red */
	--Red-100: #fff1f1;
	--Red-200: #ffd8d7;
	--Red-300: #fdb4b4;
	--Red-400: #fb888b;
	--Red-500: #f5505f;
	--Red-600: #d40038;
	--Red-700: #ac1731;
	--Red-800: #920625;
	--Red-900: #5c0415;
	--Red-1000: #2f0107;
	/* Orange */
	--Orange-100: #fef2ed;
	--Orange-200: #ffdacd;
	--Orange-300: #ffb59c;
	--Orange-400: #f88d68;
	--Orange-500: #f25915;
	--Orange-600: #c04101;
	--Orange-700: #934225;
	--Orange-800: #79371f;
	--Orange-900: #4f1f0d;
	--Orange-1000: #260c04;
	/* Lime */
	--Lime-100: #f2f9e2;
	--Lime-200: #dfebbf;
	--Lime-300: #c1d293;
	--Lime-400: #a2bb4b;
	--Lime-500: #869f16;
	--Lime-600: #687c0b;
	--Lime-700: #566606;
	--Lime-800: #465408;
	--Lime-900: #2c3505;
	--Lime-1000: #121700;
	/* Green */
	--Green-100: #ecfaec;
	--Green-200: #cdf0cc;
	--Green-300: #a8daa8;
	--Green-400: #66c56c;
	--Green-500: #28af3d;
	--Green-600: #2b8735;
	--Green-700: #276d2e;
	--Green-800: #1b5a22;
	--Green-900: #0f3a14;
	--Green-1000: #021b04;
	/* Aqua */
	--Aqua-100: #e3fafe;
	--Aqua-200: #b7f0fa;
	--Aqua-300: #7edae9;
	--Aqua-400: #12c0d6;
	--Aqua-500: #1aa4b6;
	--Aqua-600: #2b7e8a;
	--Aqua-700: #176774;
	--Aqua-800: #0f5760;
	--Aqua-900: #05373f;
	--Aqua-1000: #00191d;
	/* Blue */
	--Blue-100: #f2f5fc;
	--Blue-200: #dae3f7;
	--Blue-300: #b0c7f9;
	--Blue-400: #8aaaf6;
	--Blue-500: #648cf4;
	--Blue-600: #3a63e0;
	--Blue-700: #2045da;
	--Blue-800: #142ec5;
	--Blue-900: #08118c;
	--Blue-1000: #020448;
	/* Violet */
	--Violet-100: #f4f5fa;
	--Violet-200: #dfe1f6;
	--Violet-300: #bec2f8;
	--Violet-400: #9fa3f4;
	--Violet-500: #8382f3;
	--Violet-600: #6258dd;
	--Violet-700: #5336d8;
	--Violet-800: #451dc3;
	--Violet-900: #290083;
	--Violet-1000: #104;
	/* Purple */
	--Purple-100: #f9f3f9;
	--Purple-200: #eedced;
	--Purple-300: #e2b7e1;
	--Purple-400: #d392d2;
	--Purple-500: #c46bc4;
	--Purple-600: #a247a2;
	--Purple-700: #950c98;
	--Purple-800: #7d0c7f;
	--Purple-900: #4f0050;
	--Purple-1000: #260027;
	/* Yellow */
	--Yellow-100: #fffaec;
	--Yellow-200: #feeec1;
	--Yellow-300: #fee195;
	--Yellow-400: #f7ce5a;
	--Yellow-500: #f4c200;
	--Yellow-600: #d4a800;
	--Yellow-700: #b18c00;
	--Yellow-800: #896c00;
	--Yellow-900: #5f4a00;
	--Yellow-1000: #1f1600;
}

/*
#styleguide
タイトル（SP：中央寄せ）
```
<div class="l-title">
<h1 class="mod-c">ページタイトル</h1>
<ul class="l-breadcrumbs">
  <li><a href="" class="mod-link">グッピー採用・トップ<i class="icon-arrow_right"></i></a></li>
  <li><a href="" class="mod-link">中途<i class="icon-arrow_right"></i></a></li>
  <li>求人情報一覧</li>
</ul>
</div>
```
*/
/*
#styleguide
タイトル（SP：検索付き）
```
<div class="l-title">
<h1>ページタイトル</h1>
<ul class="l-breadcrumbs">
  <li><a href="" class="mod-link">グッピー採用・トップ<i class="icon-arrow_right"></i></a></li>
  <li><a href="" class="mod-link">中途<i class="icon-arrow_right"></i></a></li>
  <li>求人情報一覧</li>
</ul>
<a href="#" class="icon-search"></a>
</div>
```
*/
/*
#styleguide
タイトル（SP：前画面・検索付き）
```
<div class="l-title">
<h1 class="mod-c">ページタイトル</h1>
<ul class="l-breadcrumbs">
  <li><a href="" class="mod-link">グッピー採用・トップ<i class="icon-arrow_right"></i></a></li>
  <li><a href="" class="mod-link">中途<i class="icon-arrow_right"></i></a></li>
  <li>求人情報一覧</li>
</ul>
<a href="#" class="icon-search"></a>
<a href="#" class="icon-arrow_left"></a>
</div>
```
*/
/*
#styleguide
タイトル（ポイント）
```
<div class="l-title">
<h1>ポイント情報</h1>
<ul class="l-breadcrumbs">
  <li><a href="" class="mod-link">グッピー採用・トップ<i class="icon-arrow_right"></i></a></li>
  <li><a href="" class="mod-link">中途<i class="icon-arrow_right"></i></a></li>
  <li>求人情報一覧</li>
</ul>
<div class="sub-item"><span>500,000pt</span><a href="#">購入</a></div>
</div>
```
*/
/*
#styleguide
タイトル（ポイント）
```
<div class="l-title">
<h1>ポイント情報</h1>
<ul class="l-breadcrumbs">
  <li><a href="" class="mod-link">グッピー採用・トップ<i class="icon-arrow_right"></i></a></li>
  <li><a href="" class="mod-link">中途<i class="icon-arrow_right"></i></a></li>
  <li>求人情報一覧</li>
</ul>
<div class="sub-item"><span>500,000pt</span><a href="#">購入</a></div>
</div>
```
*/
/*
#styleguide
一覧に戻る
```
<div class="l-title">
<h1 class="mod-c">
求人情報の新規登録
<div class="title-before-page">
<a href="#" class="mod-txt-wh"><i class="mod-icon icon-arrow_left"></i> 一覧へ<span class="is-sp-hide">戻る</span></a>
</div>
</h1>
<ul class="l-breadcrumbs">
  <li><a href="" class="mod-link">グッピー採用・トップ<i class="icon-arrow_right"></i></a></li>
  <li><a href="" class="mod-link">中途<i class="icon-arrow_right"></i></a></li>
  <li>求人情報一覧</li>
</ul>
</div>
```
*/
@media print, screen and (max-width: 767px) {
	.l-title {
		position: relative;
		padding: 12px 15px;
		background-color: #2658ce;
	}

	.l-title h1 {
		color: #fff;
		font-size: 1.6rem;
		font-weight: bold;
	}

	.l-title > .icon-search,
	.l-title > .icon-arrow_left,
	.l-title > .sub-item,
	.l-title .title-before-page {
		display: flex;
		position: absolute;
		top: 0;
		bottom: 0;
		justify-content: center;
		align-items: center;
		height: 100%;
		margin: auto;
	}

	.l-title > .icon-search,
	.l-title > .sub-item {
		right: 0;
		padding-right: 15px;
	}

	.l-title > .icon-arrow_left,
	.l-title .title-before-page {
		left: 0;
		padding-left: 15px;
	}

	.l-title .title-before-page {
		font-size: 1.4rem;
		font-weight: normal;
	}

	.l-title > .sub-item a {
		padding: 3px 5px;
		border-radius: 3px;
		background-color: white;
		color: #2658ce;
		font-size: 1.2rem;
		font-weight: bold;
	}

	.l-title > .sub-item span {
		display: inline-block;
		margin-right: 5px;
		color: #fff;
		font-size: 1.6rem;
		font-weight: bold;
	}

	.l-title > .circle-svg {
		position: absolute;
		bottom: 0;
		left: 15px;
	}

	.l-title > .circle-svg path {
		fill: #fafafa;
	}

	.l-title > .circle-svg g {
		font-weight: bold;
		fill: #fafafa;
	}

	.l-title > .circle-svg.scene01 path:nth-child(n + 2) {
		fill: #cacad9;
	}

	.l-title > .circle-svg.scene02 path:nth-child(n + 3) {
		fill: #cacad9;
	}

	.l-title > .circle-svg.scene03 path:nth-child(n + 4) {
		fill: #cacad9;
	}

	.l-title > .circle-svg.scene04 path:nth-child(n + 5) {
		fill: #cacad9;
	}

	.l-title > .circle-svg.scene05 path:nth-child(n + 6) {
		fill: #cacad9;
	}

	.l-breadcrumbs {
		display: none;
	}
}

@media print, screen and (min-width: 768px) {
	.l-title {
		position: relative;
		padding: 20px;
		border-bottom: 1px solid #cacad9;
	}

	.l-title h1 {
		font-size: 1.8rem;
		font-weight: bold;
		text-align: left !important;
	}

	.l-title > .icon-search,
	.l-title > .icon-arrow_left,
	.l-title > .sub-item,
	.l-title > .circle-svg {
		display: none;
	}

	.l-title .title-before-page {
		display: inline-block;
		padding: 4px;
		border-radius: 5px;
		background-color: #84849a;
		font-size: 1.2rem;
		font-weight: normal;
		vertical-align: text-bottom;
	}

	.l-breadcrumbs {
		position: absolute;
		top: 20px;
		right: 20px;
	}

	.l-breadcrumbs li {
		display: inline-block;
		font-size: 1.2rem;
	}
}

/* =====================================================
 * Module
 * ================================================== */
/* variables color */
/*
#colors

@Service #2658CE
@Job #37B500
@Career #FE590F
@tone1 #F4F4F9
@tone2 #EBEBF3
@tone3 #CACAD9
@tone4 #84849A
@tone5 #4A4A4A
*/
/* variables-color */
:root {
	/* color color palette */
	/* Gray */
	--Gray-100: #f6f3f0;
	--Gray-200: #e4e0de;
	--Gray-300: #cbc8c6;
	--Gray-400: #b2afac;
	--Gray-500: #969391;
	--Gray-600: #716e6b;
	--Gray-700: #605d5b;
	--Gray-800: #4e4b49;
	--Gray-900: #2d2b29;
	--Gray-1000: #171413;
	/* Pink */
	--Pink-100: #fef1f5;
	--Pink-200: #fbd8e2;
	--Pink-300: #f7b5c8;
	--Pink-400: #f189aa;
	--Pink-500: #e9588e;
	--Pink-600: #cb006b;
	--Pink-700: #ac0058;
	--Pink-800: #8b0647;
	--Pink-900: #57002a;
	--Pink-1000: #280010;
	/* Red */
	--Red-100: #fff1f1;
	--Red-200: #ffd8d7;
	--Red-300: #fdb4b4;
	--Red-400: #fb888b;
	--Red-500: #f5505f;
	--Red-600: #d40038;
	--Red-700: #ac1731;
	--Red-800: #920625;
	--Red-900: #5c0415;
	--Red-1000: #2f0107;
	/* Orange */
	--Orange-100: #fef2ed;
	--Orange-200: #ffdacd;
	--Orange-300: #ffb59c;
	--Orange-400: #f88d68;
	--Orange-500: #f25915;
	--Orange-600: #c04101;
	--Orange-700: #934225;
	--Orange-800: #79371f;
	--Orange-900: #4f1f0d;
	--Orange-1000: #260c04;
	/* Lime */
	--Lime-100: #f2f9e2;
	--Lime-200: #dfebbf;
	--Lime-300: #c1d293;
	--Lime-400: #a2bb4b;
	--Lime-500: #869f16;
	--Lime-600: #687c0b;
	--Lime-700: #566606;
	--Lime-800: #465408;
	--Lime-900: #2c3505;
	--Lime-1000: #121700;
	/* Green */
	--Green-100: #ecfaec;
	--Green-200: #cdf0cc;
	--Green-300: #a8daa8;
	--Green-400: #66c56c;
	--Green-500: #28af3d;
	--Green-600: #2b8735;
	--Green-700: #276d2e;
	--Green-800: #1b5a22;
	--Green-900: #0f3a14;
	--Green-1000: #021b04;
	/* Aqua */
	--Aqua-100: #e3fafe;
	--Aqua-200: #b7f0fa;
	--Aqua-300: #7edae9;
	--Aqua-400: #12c0d6;
	--Aqua-500: #1aa4b6;
	--Aqua-600: #2b7e8a;
	--Aqua-700: #176774;
	--Aqua-800: #0f5760;
	--Aqua-900: #05373f;
	--Aqua-1000: #00191d;
	/* Blue */
	--Blue-100: #f2f5fc;
	--Blue-200: #dae3f7;
	--Blue-300: #b0c7f9;
	--Blue-400: #8aaaf6;
	--Blue-500: #648cf4;
	--Blue-600: #3a63e0;
	--Blue-700: #2045da;
	--Blue-800: #142ec5;
	--Blue-900: #08118c;
	--Blue-1000: #020448;
	/* Violet */
	--Violet-100: #f4f5fa;
	--Violet-200: #dfe1f6;
	--Violet-300: #bec2f8;
	--Violet-400: #9fa3f4;
	--Violet-500: #8382f3;
	--Violet-600: #6258dd;
	--Violet-700: #5336d8;
	--Violet-800: #451dc3;
	--Violet-900: #290083;
	--Violet-1000: #104;
	/* Purple */
	--Purple-100: #f9f3f9;
	--Purple-200: #eedced;
	--Purple-300: #e2b7e1;
	--Purple-400: #d392d2;
	--Purple-500: #c46bc4;
	--Purple-600: #a247a2;
	--Purple-700: #950c98;
	--Purple-800: #7d0c7f;
	--Purple-900: #4f0050;
	--Purple-1000: #260027;
	/* Yellow */
	--Yellow-100: #fffaec;
	--Yellow-200: #feeec1;
	--Yellow-300: #fee195;
	--Yellow-400: #f7ce5a;
	--Yellow-500: #f4c200;
	--Yellow-600: #d4a800;
	--Yellow-700: #b18c00;
	--Yellow-800: #896c00;
	--Yellow-900: #5f4a00;
	--Yellow-1000: #1f1600;
}

/*
#styleguide
Headings

```
<h1 class="mod-heading1">Heading1</h1>

<h2 class="mod-heading2">Heading2</h2>

<h3 class="mod-heading3">Heading3</h3>

<h4 class="mod-heading4">Heading4</h4>

<h5 class="mod-heading5">Heading5</h5>

<h6 class="mod-heading6">Heading6</h6>
```
*/
.mod-heading1 {
	margin-bottom: 0.75em;
	font-size: 1.8rem;
	font-weight: bold;
}

.mod-heading2 {
	margin-bottom: 0.75em;
	font-size: 1.7rem;
	font-weight: bold;
}

.mod-heading3 {
	margin-bottom: 1em;
	font-size: 1.6rem;
	font-weight: bold;
}

.mod-heading4 {
	margin-bottom: 0.5em;
	font-size: 1.5rem;
	font-weight: bold;
}

.mod-heading5 {
	margin-bottom: 0.5em;
	font-size: 1.4rem;
}

.mod-heading6 {
	margin-bottom: 0.5em;
	font-size: 1.4rem;
	font-style: italic;
}

/*
#styleguide
Paragraph

```
<p class="mod-p">Lorem ipsum dolor sit amet, <a href="#">test link</a> adipiscing elit. Nullam
dignissim convallis
est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at,
tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu
volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante.
Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.</p>

```
*/
.mod-p {
	margin: 1em 0;
	line-height: 1.6;
}

/*
#styleguide
alignment

```
<div class="mod-p mod-l">左揃えです。左揃えです。左揃えです。左揃えです。左揃えです。</div>
<div class="mod-p mod-c">中央揃えです。中央揃えです。中央揃えです。中央揃えです。</div>
<div class="mod-p mod-r">右揃えです。右揃えです。右揃えです。右揃えです。右揃えです。</div>

```
*/
.mod-l {
	text-align: left !important;
}

.mod-c {
	text-align: center !important;
}

.mod-r {
	text-align: right !important;
}

.mod-r-sp-c {
	text-align: right;
}

@media print, screen and (max-width: 767px) {
	.mod-r-sp-c {
		text-align: center;
	}
}

.mod-l-sp-c {
	text-align: left;
}

@media print, screen and (max-width: 767px) {
	.mod-l-sp-c {
		text-align: center;
	}
}

/*
#styleguide
Unordered List

```
<ul class="mod-ul">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
```
*/
.mod-ul {
	display: table;
	margin: 1em 0;
}

.mod-ul > li {
	position: relative;
	margin: 0 0 5px;
	padding-left: 1.2em;
	line-height: 1.5;
}

.mod-ul > li:before {
	content: '•';
	position: absolute;
	top: 0;
	left: 3px;
	padding-right: 0.4em;
	font-weight: bold;
}

.mod-ul-no-margin {
	margin: 0;
}

/*
#styleguide
Ordered List

```
<ol class="mod-ol">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ol>
```
*/
.mod-ol {
	list-style-type: decimal;
	margin: 0 0 32px 1.5em;
}

.mod-ol > li {
	list-style-type: decimal;
	margin: 0 0 10px;
	line-height: 1.5;
}

.mod-ol > li > .mod-ol {
	margin-top: 10px;
	margin-bottom: 0;
}

/*
#styleguide
Annotation List

```
<ul class="mod-annotlist">
<li><span>※1</span>List Item 1</li>
<li><span>※2</span>List Item 2</li>
<li><span>※3</span>List Item 3</li>
</ul>
```
*/
.mod-annotlist {
	margin: 0;
}

.mod-annotlist > li {
	position: relative;
	padding-left: 2.5em;
	line-height: 1.7;
}

.mod-annotlist > li span {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: auto;
	height: 1em;
}

.mod-annotlist > li > .mod-annotlist {
	margin-top: 10px;
	margin-bottom: 0;
}

/*
#styleguide
Description List

```
<dl class="mod-dl">
<dt>Definition List Title</dt>
<dd>This is a definition list division.</dd>
<dt>Definition List Title</dt>
<dd>This is a definition list division.</dd>
<dt>Definition List Title</dt>
<dd>This is a definition list division.</dd>
</dl>
```
*/
.mod-dl dt {
	margin: 0 0 10px;
	font-weight: bold;
}

.mod-dl dd {
	margin: 0 0 10px 10px;
}

/*
#styleguide
Note

```
<p class="mod-note">一度登録された業種は変更できません</p>
```
*/
.mod-note {
	position: relative;
	padding-left: 16px;
	color: #383737;
}

.mod-note:before {
	content: '※';
	position: absolute;
	top: 0;
	left: 0;
	line-height: 1;
}

p.mod-note:before {
	top: 2px;
}

.mod-note-list li {
	position: relative;
	padding-left: 16px;
	color: #383737;
}

.mod-note-list li:before {
	content: '※';
	position: absolute;
	top: 0;
	left: 0;
}

.mod-count {
	margin: 0 0 5px;
}

.mod-count span {
	font-size: 2.2rem;
	font-weight: bold;
}

/*
#styleguide
汎用的なボックス

```
<p class="mod-u-box">一度登録された業種は変更できません</p>
```
*/
.mod-u-box {
	margin-bottom: 2em;
	padding: 15px;
	border-radius: 5px;
	background-color: #f4f4f9;
}

.mod-u-box.box-inline-flame {
	overflow: scroll;
	height: 300px;
}

.mod-address {
	padding: 1em;
	background: #f4f4f9;
	font-style: normal;
}

.mod-u-coution {
	margin-top: 10px;
}

.mod-u-coution .ttl {
	display: inline-block;
	position: relative;
	margin-bottom: 5px;
	padding-right: 2em;
	color: #b40000;
	font-size: 1.3rem;
	font-weight: bolder;
	line-height: 1;
	text-align: left;
}

.mod-u-coution .ttl > .icon-arrow_down {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	height: 1em;
	margin: auto;
}

.mod-u-coution .ttl > .icon-arrow_down:before {
	color: #b40000;
}

.mod-u-coution .inner,
.mod-u-coution input[type='checkbox'] {
	display: none;
	font-size: 1.2rem;
	text-align: left;
}

.mod-u-coution input[type='checkbox']:checked ~ label i {
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
}

.mod-u-coution input[type='checkbox']:checked ~ .inner {
	display: block;
}

.mod-u-coution .hl > i {
	display: inline-block;
	margin-right: 5px;
}

.mod-u-coution .mod-ul {
	margin: 5px 0;
}

.mod-bold {
	font-weight: bold;
}

/*
#styleguide
フォントサイズ一覧

```
<p class="font-xs">フォントサイズ：12px</p>
<p class="font-s">フォントサイズ：14px</p>
<p class="font-base">フォントサイズ：16px</p>
<p class="font-m">フォントサイズ：18px</p>
<p class="font-l">フォントサイズ：20px</p>

<p class="font-2l">フォントサイズ：24px</p>
<p class="font-3l">フォントサイズ：28px</p>
<p class="font-4l">フォントサイズ：32px</p>
<p class="font-5l">フォントサイズ：40px</p>
<p class="font-6l">フォントサイズ：48px</p>
```
*/
.font-xxs {
	font-size: 1rem;
}

.font-xs {
	font-size: 1.2rem;
}

.font-s {
	font-size: 1.4rem;
}

.font-base {
	font-size: 1.6rem;
}

.font-m {
	font-size: 1.8rem;
}

.font-l {
	font-size: 2rem;
}

.font-2l {
	font-size: 2.4rem;
}

.font-3l {
	font-size: 2.8rem;
}

.font-4l {
	font-size: 3.2rem;
}

.font-5l {
	font-size: 4rem;
}

.font-6l {
	font-size: 4.8rem;
}

.scout-caption-text {
	margin-bottom: 0;
	color: #969391;
	font-size: 1.2rem;
	line-height: 1.52;
}

.scout-caption-text:last-child {
	margin-bottom: 0;
}

.scout-caption-link {
	color: #969391;
	text-decoration: underline;
}

.scout-caption-link:hover {
	opacity: 0.7;
}

/* variables color */
/*
#colors

@Service #2658CE
@Job #37B500
@Career #FE590F
@tone1 #F4F4F9
@tone2 #EBEBF3
@tone3 #CACAD9
@tone4 #84849A
@tone5 #4A4A4A
*/
/* variables-color */
:root {
	/* color color palette */
	/* Gray */
	--Gray-100: #f6f3f0;
	--Gray-200: #e4e0de;
	--Gray-300: #cbc8c6;
	--Gray-400: #b2afac;
	--Gray-500: #969391;
	--Gray-600: #716e6b;
	--Gray-700: #605d5b;
	--Gray-800: #4e4b49;
	--Gray-900: #2d2b29;
	--Gray-1000: #171413;
	/* Pink */
	--Pink-100: #fef1f5;
	--Pink-200: #fbd8e2;
	--Pink-300: #f7b5c8;
	--Pink-400: #f189aa;
	--Pink-500: #e9588e;
	--Pink-600: #cb006b;
	--Pink-700: #ac0058;
	--Pink-800: #8b0647;
	--Pink-900: #57002a;
	--Pink-1000: #280010;
	/* Red */
	--Red-100: #fff1f1;
	--Red-200: #ffd8d7;
	--Red-300: #fdb4b4;
	--Red-400: #fb888b;
	--Red-500: #f5505f;
	--Red-600: #d40038;
	--Red-700: #ac1731;
	--Red-800: #920625;
	--Red-900: #5c0415;
	--Red-1000: #2f0107;
	/* Orange */
	--Orange-100: #fef2ed;
	--Orange-200: #ffdacd;
	--Orange-300: #ffb59c;
	--Orange-400: #f88d68;
	--Orange-500: #f25915;
	--Orange-600: #c04101;
	--Orange-700: #934225;
	--Orange-800: #79371f;
	--Orange-900: #4f1f0d;
	--Orange-1000: #260c04;
	/* Lime */
	--Lime-100: #f2f9e2;
	--Lime-200: #dfebbf;
	--Lime-300: #c1d293;
	--Lime-400: #a2bb4b;
	--Lime-500: #869f16;
	--Lime-600: #687c0b;
	--Lime-700: #566606;
	--Lime-800: #465408;
	--Lime-900: #2c3505;
	--Lime-1000: #121700;
	/* Green */
	--Green-100: #ecfaec;
	--Green-200: #cdf0cc;
	--Green-300: #a8daa8;
	--Green-400: #66c56c;
	--Green-500: #28af3d;
	--Green-600: #2b8735;
	--Green-700: #276d2e;
	--Green-800: #1b5a22;
	--Green-900: #0f3a14;
	--Green-1000: #021b04;
	/* Aqua */
	--Aqua-100: #e3fafe;
	--Aqua-200: #b7f0fa;
	--Aqua-300: #7edae9;
	--Aqua-400: #12c0d6;
	--Aqua-500: #1aa4b6;
	--Aqua-600: #2b7e8a;
	--Aqua-700: #176774;
	--Aqua-800: #0f5760;
	--Aqua-900: #05373f;
	--Aqua-1000: #00191d;
	/* Blue */
	--Blue-100: #f2f5fc;
	--Blue-200: #dae3f7;
	--Blue-300: #b0c7f9;
	--Blue-400: #8aaaf6;
	--Blue-500: #648cf4;
	--Blue-600: #3a63e0;
	--Blue-700: #2045da;
	--Blue-800: #142ec5;
	--Blue-900: #08118c;
	--Blue-1000: #020448;
	/* Violet */
	--Violet-100: #f4f5fa;
	--Violet-200: #dfe1f6;
	--Violet-300: #bec2f8;
	--Violet-400: #9fa3f4;
	--Violet-500: #8382f3;
	--Violet-600: #6258dd;
	--Violet-700: #5336d8;
	--Violet-800: #451dc3;
	--Violet-900: #290083;
	--Violet-1000: #104;
	/* Purple */
	--Purple-100: #f9f3f9;
	--Purple-200: #eedced;
	--Purple-300: #e2b7e1;
	--Purple-400: #d392d2;
	--Purple-500: #c46bc4;
	--Purple-600: #a247a2;
	--Purple-700: #950c98;
	--Purple-800: #7d0c7f;
	--Purple-900: #4f0050;
	--Purple-1000: #260027;
	/* Yellow */
	--Yellow-100: #fffaec;
	--Yellow-200: #feeec1;
	--Yellow-300: #fee195;
	--Yellow-400: #f7ce5a;
	--Yellow-500: #f4c200;
	--Yellow-600: #d4a800;
	--Yellow-700: #b18c00;
	--Yellow-800: #896c00;
	--Yellow-900: #5f4a00;
	--Yellow-1000: #1f1600;
}

/*
#styleguide
２列（プロフィール詳細など）

```
<table class="mod-table table-detail table-sp">
<tr>
<th>職種</th>
<td>薬剤師</td>
</tr>
<tr>
<th>希望勤務地</th>
<td>神奈川県<br>
具体的なエリア：川崎市中原区、東京都大田区、目黒区</td>
</tr>
<tr>
<th>希望業種</th>
<td>第一希望： 薬局（調剤メイン）<br>
第二希望：漢方</td>
</tr>
</table>
```
*/
.mod-table {
	width: 100%;
	margin-bottom: 1em;
	border-top: 1px dotted #cacad9;
}

.mod-table tr th,
.mod-table tr td {
	padding: 12px 15px;
	border-bottom: 1px dotted #cacad9;
	background-color: #f4f4f9;
	line-height: 1.6;
	vertical-align: top;
}

.mod-table tr th {
	font-weight: bold;
}

.mod-table tr > *:nth-child(2n) {
	background-color: #fff;
}

.mod-table-border {
	border: none;
}

.mod-table-border tr th,
.mod-table-border tr td {
	border: 1px solid #cacad9;
	background: #fafafa;
}

.mod-table-center-text tr th,
.mod-table-center-text tr td {
	text-align: center;
}

@media print, screen and (max-width: 767px) {
	.scroll-cover {
		overflow: auto;
		white-space: nowrap;
	}

	.scroll-cover .mod-table {
		width: 100%;
	}
}

.table-detail th {
	min-width: 25%;
	text-align: left;
}

.table-status {
	border-top: 1px solid #cacad9;
}

.table-status tr th,
.table-status tr td {
	border-bottom: 1px solid #cacad9;
	font-size: 1.4rem;
}

.table-status tr th .caution,
.table-status tr td .caution {
	color: #b40000;
}

.table-status tr:last-child th {
	border-bottom: 1px solid #cacad9;
}

.table-status tr th {
	width: 180px;
	border-bottom: 1px solid #fafafa;
	color: #fafafa;
	text-align: center;
	vertical-align: middle;
}

@media print, screen and (max-width: 767px) {
	.table-status tr th {
		width: 120px;
		min-width: auto;
	}
}

.table-status tr th.status00 {
	background-color: #fafafa;
	box-shadow: 0 0 0 1px #fe2a56 inset;
	color: #fe2a56;
}

.table-status tr th.status01 {
	background-color: #4a4a4a;
}

.table-status tr th.status0 {
	background-color: #fe2a56;
}

.table-status tr th.status12 {
	background-color: #2658ce;
}

.table-status tr th.status21,
.table-status tr th.status22,
.table-status tr th.status23 {
	background-color: #3092ff;
}

.table-status tr th.status24 {
	background-color: #0fd848;
}

.table-status tr th.status13 {
	background-color: #fe590f;
}

.table-status tr th.status14 {
	background-color: #cacad9;
}

.table-status tr th.status15 {
	background-color: #cacad9;
}

.table-status tr th.status16 {
	background-color: #005fc9;
}

.table-status tr th.status17,
.table-status tr th.status18 {
	background-color: #cacad9;
}

@media print, screen and (max-width: 767px) {
	.mod-table.table-sp th,
	.mod-table.table-sp td {
		display: block;
		padding: 8px 11px;
		font-size: 1.4rem;
	}
}

/*
#styleguide
３列以上（アクセス解析など）

```
<table class="mod-table table-data">
<thead>
<tr>
<th>日付</th>
<th>応募者</th>
<th>閲覧者</th>
<th>表示数</th>
</tr>
</thead>
<tbody>
<tr>
<td>2018/05/20</td>
<td>4</td>
<td>5</td>
<td>30</td>
</tr>
<tr>
<td>2018/05/21</td>
<td>4</td>
<td>5</td>
<td>30</td>
</tr>
</tbody>
</table>
```
*/
.table-data thead th {
	text-align: center;
}

.table-data tbody tr td {
	text-align: center;
}

.table-data tbody tr *:first-child {
	text-align: left;
}

@media print, screen and (max-width: 767px) {
	.table-data.user-list {
		display: block;
		border: none;
	}

	.table-data.user-list thead {
		display: none;
	}

	.table-data.user-list tbody {
		display: block;
		width: 100%;
	}

	.table-data.user-list tbody tr {
		display: block;
		margin-bottom: 15px;
		padding: 15px;
		border-radius: 10px;
		background-color: #f4f4f9;
	}

	.table-data.user-list tbody tr td {
		display: block;
		padding: 0;
		border: none;
		background-color: rgba(225, 225, 225, 0);
		text-align: center;
	}

	.table-data.user-list tbody tr td:first-child {
		font-weight: bold;
	}

	.table-data.user-list tbody tr td .mod-button {
		width: 100%;
		margin-top: 5px;
	}
}

/*
#styleguide
特殊なやつ

```
<table class="mod-table table-unique">
<thead>
<tr>
<th></th>
<th class="bgGray1 mod-c" colspan="3">消費ポイント</th>
<th colspan="3" class=" mod-c">追加ポイント</th>
<th class="bgGray1 mod-c" rowspan="2">残ポイント<br>（当日末月時点）</th>
</tr>
<tr>
<th></th>
<th class="bgGray1 mod-c">閲覧課金</th>
<th class="bgGray1 mod-c">スカウト</th>
<th class="bgGray1 mod-c">イベント</th>
<th class="mod-c">購入</th>
<th class="mod-c">還元</th>
<th class="mod-c">プレンゼント</th>
</tr>
</thead>
<tbody>
<tr>
<td>4月</td>
<td class="bgGray1 mod-c">0pt</td>
<td class="bgGray1 mod-c">0pt</td>
<td class="bgGray1 mod-c">0pt</td>
<td class="mod-c">0pt</td>
<td class="mod-c">0pt</td>
<td class="mod-c">0pt</td>
<td class="bgGray1 mod-c">0pt</td>
</tr>
</tbody>
</table>
```
*/
.table-unique thead {
	border-bottom: 1px dotted #cacad9;
}

.table-unique tr th,
.table-unique tr td {
	border-bottom: none;
	background-color: #fff;
	font-size: 1.4rem;
	vertical-align: middle;
}

.table-unique tr th.bgGray1,
.table-unique tr td.bgGray1 {
	background-color: #f4f4f9;
}

.table-unique tr th {
	padding-bottom: 0;
}

.table-unique tr:last-child th {
	padding-top: 10px;
	padding-bottom: 15px;
}

.table-unique tr td {
	border-bottom: 1px dotted #cacad9;
}

.table-unique.mod-table-border tr th,
.table-unique.mod-table-border tr td {
	border-bottom: 1px solid #cacad9;
}

/*
#styleguide
特殊なやつ

```
<table class="mod-table table-unique2">
<thead>
<tr>
<th></th>
<th>今月</th>
<th>先月</th>
</tr>
</thead>
<tbody>
<tr>
<td>閲覧課金</td>
<td>100pt</td>
<td>100pt</td>
</tr>
<tr>
<td>スカウト</td>
<td>100pt</td>
<td>100pt</td>
</tr>
<tr>
<td>イベント</td>
<td>100pt</td>
<td>100pt</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>消費ポイント</td>
<td>100pt</td>
<td>100pt</td>
</tr>
</tfoot>
</table>
```
*/
.table-unique2 {
	border: none;
}

.table-unique2 thead {
	border-bottom: 1px dotted #cacad9;
}

.table-unique2 tfoot {
	border-top: 1px dotted #cacad9;
}

.table-unique2 tbody tr td {
	padding-bottom: 0;
}

.table-unique2 tbody tr:last-child td {
	padding-bottom: 12px;
}

.table-unique2 tr th,
.table-unique2 tr td {
	border: none;
}

/*
#styleguide
特殊なやつ

```
<table class="mod-table table-unique3">
<thead>
<tr>
<th>年月</th>
<th>消費ポイント</th>
<th>上限設定</th>
</tr>
</thead>
<tbody>
<tr>
<td class="table-hl">18年08月	</td>
<td class="table-item1 item-pointlimit1">80 pt</td>
<td class="table-item2 item-pointlimit2"><input type="text" class="mod-input size-s" placeholder="1">0,000 pt</td>
</tr>
</tbody>
</table>
```
*/
@media print, screen and (min-width: 768px) {
	.table-unique3 {
		border: none;
	}

	.table-unique3 thead {
		border-bottom: 1px solid #cacad9;
	}

	.table-unique3 tfoot {
		border-top: 1px dotted #cacad9;
	}

	.table-unique3 tr th,
	.table-unique3 tr td {
		vertical-align: middle;
	}

	.table-unique3 .table-plan-hl {
		position: relative;
		width: 30%;
		padding-left: 45px;
		color: #2658ce;
		font-weight: bold;
	}

	.table-unique3 .table-plan-hl i {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 15px;
		height: 1em;
		margin: auto;
		font-size: 2.5rem;
	}

	.table-unique3 .table-item + .table-item {
		width: 35%;
	}
}

@media print, screen and (max-width: 767px) {
	.table-unique3 {
		display: block;
		width: 100%;
	}

	.table-unique3 thead {
		display: none;
	}

	.table-unique3 tbody {
		display: block;
		background-color: #fff;
	}

	.table-unique3 tbody tr,
	.table-unique3 tbody td {
		display: block;
	}

	.table-unique3 tbody .table-hl,
	.table-unique3 tbody .table-plan-hl {
		display: block;
		width: 100%;
		background-color: #4a4a4a;
		color: #fff;
		font-weight: bold;
		text-align: center;
	}

	.table-unique3 tbody .table-hl i,
	.table-unique3 tbody .table-plan-hl i {
		font-size: 2rem;
	}

	.table-unique3 tbody .table-hl i:before,
	.table-unique3 tbody .table-plan-hl i:before {
		margin-right: 10px;
		color: #fff !important;
	}

	.table-unique3 tbody .table-item {
		position: relative;
		padding-left: 8em;
		background-color: #f4f4f9;
		text-align: right;
	}

	.table-unique3 tbody .table-item.item-planused .mod-button {
		width: 100%;
		margin-top: 0.5em;
	}

	.table-unique3 tbody .table-item.item-pointlimit1:before {
		content: '消費ポイント';
	}

	.table-unique3 tbody .table-item.item-pointlimit2:before {
		content: '上限設定';
	}

	.table-unique3 tbody .table-item.item-pointsummay1:before {
		content: '購入ポイント';
	}

	.table-unique3 tbody .table-item.item-pointsummay2:before {
		content: '決済方法';
	}

	.table-unique3 tbody .table-item.item-pointsummay3:before {
		content: 'ステータス';
	}

	.table-unique3 tbody .table-item.item-pointsummay4:before {
		content: '領収書';
	}

	.table-unique3 tbody .table-item.item-pointsummay5:before {
		content: '請求書';
	}

	.table-unique3 tbody .table-item.item-planused:before {
		content: '利用状況';
	}

	.table-unique3 tbody .table-item.item-plan2019free:before {
		content: '無料プラン';
	}

	.table-unique3 tbody .table-item.item-plan2019paid:before {
		content: '特割プラン';
	}

	.table-unique3 tbody .table-item.item-plan2020:before {
		content: '特割プラン';
	}

	.table-unique3 tbody .table-item.item-plan2021:before {
		content: '2021年度';
	}

	.table-unique3 tbody .table-item.item-plan2022:before {
		content: '2022年度';
	}

	.table-unique3 tbody .table-item:before {
		display: inline-block;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 15px;
		height: 1em;
		margin: auto;
		border-radius: 5px;
		line-height: 1;
	}

	.table-unique3 tbody .table-item:last-child {
		margin-bottom: 10px;
	}

	.table-unique3 tbody .table-item2 {
		position: relative;
		background-color: #fff;
		text-align: right;
	}

	.table-unique3 tbody .table-item2:before {
		content: '上限設定';
		display: block;
		width: 100%;
		margin-bottom: 10px;
		text-align: left;
	}
}

/*
送付状フォーム用
*/
.table-sofujo {
	width: 710px;
	margin: 0 auto 20px;
}

.table-sofujo .form-label {
	width: 100%;
}

.table-sofujo th {
	width: 180px;
	padding: 10px;
	border: 0;
	background: #cacad9;
	font-weight: bold;
	vertical-align: middle;
}

.table-sofujo td {
	padding: 25px 50px;
	background: #fff;
}

.table-sofujo td.td1 {
	padding: 80px 50px 0;
}

.table-sofujo td.td2 {
	padding: 25px 50px 20px;
}

.table-sofujo td.td3 {
	padding: 25px 50px 0;
}

.table-sofujo td.td4 {
	padding: 0 50px 0;
}

.table-sofujo td.td5 {
	padding: 0 50px 60px;
}

.table-sofujo input.subject {
	font-size: 1.8rem;
	font-weight: bold;
	text-align: center;
}

.table-sofujo .textarea-35em {
	width: 35em;
}

.table-sofujo .icon-quertion:before {
	color: #666;
}

/*
#styleguide
新卒プラン2022プラン紹介用テーブル

```

```
*/
.plan_annot {
	padding-bottom: 20px;
}

.plan_annot p {
	padding: 20px;
	border: 1px solid #2658ce;
	border-radius: 5px;
	text-align: center;
}

.plan_annot p strong {
	color: #2658ce;
	font-size: 1.6rem;
}

.plan_annot p a {
	display: inline-block;
	margin: 10px 0 0;
	font-size: 1.6rem;
}

.plan_annot .plan_cancel {
	margin-top: 15px;
	color: #2658ce;
	text-align: center;
}

.plan_annot .plan_cancel ul {
	margin-top: 5px;
}

.plan_annot .plan_cancel ul li {
	display: inline-block;
	margin: 0 10px;
	font-size: 1.8rem;
	font-weight: bold;
}

.table2022plan {
	margin-bottom: 20px;
}

@media print, screen and (min-width: 768px) {
	.table2022plan {
		display: -ms-grid;
		display: grid;
		width: 100%;
		font-size: 1.8rem;
		-ms-grid-columns: 210px 1fr 1fr 1fr;
		grid-template-columns: 210px 1fr 1fr 1fr;
		grid-template-areas: 'planhead planitem1 planitem2 planitem3';
	}
}

@media print, screen and (max-width: 767px) {
	.table2022plan {
		display: flex;
		flex-direction: column;
		font-size: 1.6rem;
		text-align: center;
	}
}

@media print, screen and (min-width: 768px) {
	.table2022plan .plan_head {
		-ms-grid-row: 1;
		-ms-grid-column: 1;
		grid-area: planhead;
	}
}

@media print, screen and (max-width: 767px) {
	.table2022plan .plan_head {
		display: none;
	}
}

.table2022plan .plan_item1 {
	background-color: #f4f4f9;
}

@media print, screen and (min-width: 768px) {
	.table2022plan .plan_item1 {
		-ms-grid-row: 1;
		-ms-grid-column: 2;
		grid-area: planitem1;
	}
}

.table2022plan .plan_item2 {
	-ms-grid-row: 1;
	-ms-grid-column: 3;
	grid-area: planitem2;
}

.table2022plan .plan_item2.natsuwari2025 {
	box-sizing: border-box;
	border: 5px solid #fff100;
}

.table2022plan .plan_item2.natsuwari2025 .item1 {
	height: 95px;
}

@media print, screen and (max-width: 767px) {
	.table2022plan .plan_item2.natsuwari2025 .item1 {
		height: auto;
	}
}

.table2022plan .plan_item3 {
	background-color: #f4f4f9;
	-ms-grid-row: 1;
	-ms-grid-column: 4;
	grid-area: planitem3;
}

.table2022plan .plan_item3.hayawari2025 {
	box-sizing: border-box;
	border: 5px solid #0e6eb8;
}

.table2022plan .plan_item3.hayawari2025 .item1 {
	height: 95px;
}

@media print, screen and (max-width: 767px) {
	.table2022plan .plan_item3.hayawari2025 .item1 {
		height: auto;
	}
}

.table2022plan .plan_item3.tokuwari2025 {
	box-sizing: border-box;
	border: 5px solid #db742e;
}

.table2022plan .plan_item3.tokuwari2025 .item1 {
	height: 95px;
}

@media print, screen and (max-width: 767px) {
	.table2022plan .plan_item3.tokuwari2025 .item1 {
		height: auto;
	}
}

@media print, screen and (max-width: 767px) {
	.table2022plan .plan_item1,
	.table2022plan .plan_item2,
	.table2022plan .plan_item3,
	.table2022plan .plan_item4 {
		margin-bottom: 15px;
		border: 1px solid #ebebf3;
		border-radius: 5px;
		background-color: #f4f4f9;
	}

	.table2022plan .plan_item1 {
		order: 3;
	}

	.table2022plan .plan_item2 {
		order: 2;
	}

	.table2022plan .plan_item3 {
		order: 1;
	}
}

@media print, screen and (max-width: 767px) {
	.table2022plan .item2,
	.table2022plan .item3,
	.table2022plan .item4,
	.table2022plan .item5,
	.table2022plan .item6 {
		position: relative;
		margin: 20px 5px 0 15px;
		padding: 0 0 0 135px;
	}

	.table2022plan .item2::before,
	.table2022plan .item3::before,
	.table2022plan .item4::before,
	.table2022plan .item5::before,
	.table2022plan .item6::before {
		display: block;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		height: 1em;
		margin: auto;
		font-size: 1.4rem;
		line-height: 1;
	}
}

.table2022plan .item1 {
	position: relative;
}

@media print, screen and (min-width: 768px) {
	.table2022plan .item1 {
		height: 100px;
		padding: 10px 0;
		border-bottom: 1px solid #84849a;
	}
}

@media print, screen and (max-width: 767px) {
	.table2022plan .item1 {
		padding: 20px 0;
		border-bottom: 1px dotted #84849a;
	}
}

@media print, screen and (min-width: 768px) {
	.table2022plan .item2 {
		height: 70px;
		padding: 30px 10px 10px;
	}
}

@media print, screen and (max-width: 767px) {
	.table2022plan .item2:before {
		content: 'スカウト ※1';
		display: block;
	}
}

@media print, screen and (min-width: 768px) {
	.table2022plan .item3 {
		height: 60px;
		padding: 10px;
	}
}

@media print, screen and (max-width: 767px) {
	.table2022plan .item3:before {
		content: '就職情報誌 ※2';
	}
}

@media print, screen and (min-width: 768px) {
	.table2022plan .item4 {
		height: 60px;
		padding: 10px;
	}
}

@media print, screen and (max-width: 767px) {
	.table2022plan .item4:before {
		content: '求人掲載 ※3';
	}
}

@media print, screen and (min-width: 768px) {
	.table2022plan .item5 {
		height: 60px;
		padding: 10px;
	}
}

@media print, screen and (max-width: 767px) {
	.table2022plan .item5:before {
		content: '求人表示順位 ※4';
	}
}

@media print, screen and (min-width: 768px) {
	.table2022plan .item6 {
		height: 60px;
		padding: 10px;
	}
}

@media print, screen and (max-width: 767px) {
	.table2022plan .item6:before {
		content: '求人作成サポート ※5';
	}
}

@media print, screen and (min-width: 768px) {
	.table2022plan .item7 {
		height: 60px;
		padding: 10px;
	}
}

@media print, screen and (max-width: 767px) {
	.table2022plan .item7 {
		margin: 20px 15px 0 15px;
		text-align: left;
	}

	.table2022plan .item7:before {
		content: '掲載期間・採用費用';
		font-size: 1.4rem;
		line-height: 1;
	}
}

@media print, screen and (min-width: 768px) {
	.table2022plan .item8 {
		min-height: 97px;
		padding: 10px;
		font-size: 1.4rem;
	}
}

@media print, screen and (max-width: 767px) {
	.table2022plan .item8 {
		margin: 20px 15px 0 15px;
		padding-bottom: 15px;
	}
}

@media print, screen and (min-width: 768px) {
	.table2022plan .plan_head .item1,
	.table2022plan .plan_head .item2,
	.table2022plan .plan_head .item3,
	.table2022plan .plan_head .item4,
	.table2022plan .plan_head .item5,
	.table2022plan .plan_head .item6,
	.table2022plan .plan_head .item7,
	.table2022plan .plan_item1 .item1,
	.table2022plan .plan_item1 .item2,
	.table2022plan .plan_item1 .item3,
	.table2022plan .plan_item1 .item4,
	.table2022plan .plan_item1 .item5,
	.table2022plan .plan_item1 .item6,
	.table2022plan .plan_item1 .item7,
	.table2022plan .plan_item2 .item1,
	.table2022plan .plan_item2 .item2,
	.table2022plan .plan_item2 .item3,
	.table2022plan .plan_item2 .item4,
	.table2022plan .plan_item2 .item5,
	.table2022plan .plan_item2 .item6,
	.table2022plan .plan_item2 .item7,
	.table2022plan .plan_item3 .item1,
	.table2022plan .plan_item3 .item2,
	.table2022plan .plan_item3 .item3,
	.table2022plan .plan_item3 .item4,
	.table2022plan .plan_item3 .item5,
	.table2022plan .plan_item3 .item6,
	.table2022plan .plan_item3 .item7,
	.table2022plan .plan_item4 .item1,
	.table2022plan .plan_item4 .item2,
	.table2022plan .plan_item4 .item3,
	.table2022plan .plan_item4 .item4,
	.table2022plan .plan_item4 .item5,
	.table2022plan .plan_item4 .item6,
	.table2022plan .plan_item4 .item7 {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}

.table2022plan .plan_head .item1,
.table2022plan .plan_head .item8 {
	align-items: center;
}

.table2022plan .plan_item1 .item1,
.table2022plan .plan_item1 .item2,
.table2022plan .plan_item1 .item3,
.table2022plan .plan_item1 .item4,
.table2022plan .plan_item1 .item5,
.table2022plan .plan_item1 .item6,
.table2022plan .plan_item1 .item7,
.table2022plan .plan_item1 .item8,
.table2022plan .plan_item2 .item1,
.table2022plan .plan_item2 .item2,
.table2022plan .plan_item2 .item3,
.table2022plan .plan_item2 .item4,
.table2022plan .plan_item2 .item5,
.table2022plan .plan_item2 .item6,
.table2022plan .plan_item2 .item7,
.table2022plan .plan_item2 .item8,
.table2022plan .plan_item3 .item1,
.table2022plan .plan_item3 .item2,
.table2022plan .plan_item3 .item3,
.table2022plan .plan_item3 .item4,
.table2022plan .plan_item3 .item5,
.table2022plan .plan_item3 .item6,
.table2022plan .plan_item3 .item7,
.table2022plan .plan_item3 .item8,
.table2022plan .plan_item4 .item1,
.table2022plan .plan_item4 .item2,
.table2022plan .plan_item4 .item3,
.table2022plan .plan_item4 .item4,
.table2022plan .plan_item4 .item5,
.table2022plan .plan_item4 .item6,
.table2022plan .plan_item4 .item7,
.table2022plan .plan_item4 .item8 {
	align-items: center;
}

@media print, screen and (min-width: 768px) {
	.table2022plan .plan_item1 .item8,
	.table2022plan .plan_item2 .item8,
	.table2022plan .plan_item3 .item8,
	.table2022plan .plan_item4 .item8 {
		display: flex;
		justify-content: center;
		text-align: center;
	}
}

.table2022plan .plantitle {
	margin-bottom: 5px;
	font-size: 1.8rem;
	font-weight: bold;
	line-height: 1;
}

.table2022plan .planoriginalprice {
	display: inline-block;
	color: #ff3154;
	font-size: 1.5rem;
	text-decoration: line-through;
}

.table2022plan .planoriginalprice span {
	color: #cacad9;
}

.table2022plan .planprice {
	font-size: 2.8rem;
	font-weight: bold;
	line-height: 1;
	text-align: center;
}

.table2022plan .planprice span {
	display: inline-block;
	font-size: 2rem;
}

.table2022plan .planprice small {
	display: inline-block;
	font-size: 1.2rem;
	font-weight: normal;
}

.table2022plan .planprice.eary2023 {
	color: #ff3154;
}

.table2022plan .planprice.eary2023 span,
.table2022plan .planprice.eary2023 small {
	color: #4a4a4a;
}

.table2022plan .planprice.hayawari2025 {
	color: #0e6eb8;
}

.table2022plan .planprice.hayawari2025 span,
.table2022plan .planprice.hayawari2025 small {
	color: #4a4a4a;
}

.table2022plan .planprice.tokuwari2025 {
	box-sizing: border-box;
	color: #db742e;
}

.table2022plan .planprice.tokuwari2025 span,
.table2022plan .planprice.tokuwari2025 small {
	color: #4a4a4a;
}

.table2022plan .planprice.natsuwari2025 {
	box-sizing: border-box;
	color: #4872b8;
}

.table2022plan .planprice.natsuwari2025 span,
.table2022plan .planprice.natsuwari2025 small {
	color: #4a4a4a;
}

.table2022plan .plan_badge {
	position: absolute;
	top: -10px;
	right: 50%;
	margin-right: -105px;
}

@media print, screen and (max-width: 767px) {
	.table2022plan .plan_badge {
		top: 40px;
		right: calc(50% - 140px);
		margin-right: 0;
	}
}

.table2022plan .plan_badge img {
	width: 53px;
	height: auto;
}

.table2022plan .plan_itemtitle {
	display: flex;
	align-items: center;
	-webkit-font-feature-settings: 'palt';
	font-feature-settings: 'palt';
}

.table2022plan .plan_itemtitle i:before {
	margin-right: 5px;
	font-size: 2.4rem;
}

.table2022plan .plan_itemtitle small {
	font-size: 1.2rem;
}

.table2022plan .planscout strong {
	font-weight: bold;
	line-height: 1;
	text-align: center;
}

@media print, screen and (min-width: 768px) {
	.table2022plan .planscout strong {
		font-size: 2.8rem;
	}
}

@media print, screen and (max-width: 767px) {
	.table2022plan .planscout strong {
		font-size: 2rem;
	}
}

.table2022plan .icon-check {
	font-size: 2.2rem;
}

.table2022plan .plan_term {
	position: relative;
}

.table2022plan .plan_term .plan_termitem {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 10px;
	padding: 10px;
	background: #fafafa 0 0 no-repeat padding-box;
	box-shadow: 0 1px 2px #444f6a4d;
	opacity: 1;
	color: #2658ce;
	font-size: 1.6rem;
	font-weight: bold;
}

@media print, screen and (min-width: 768px) {
	.table2022plan .plan_term .plan_termitem {
		position: absolute;
		top: 0;
		left: 0;
		width: calc((100% * 3) - 20px);
		height: 100%;
		margin: 0 10px;
	}
}

@media print, screen and (max-width: 767px) {
	.table2022plan .plan_term .plan_termitem {
		text-align: center;
	}
}

@media print, screen and (min-width: 768px) {
	.table2022plan .plan_term .plan_termitem.plan_term-none {
		display: none;
	}
}

.table2022plan .planbtn {
	position: relative;
	font-size: 1.4rem;
}

.table2022plan .planbtn strong {
	font-size: 2.0rem;
}

.table2022plan .planbtn small {
	font-size: 1.4rem;
}

.table2022plan .planbtn.is_notpayd {
	cursor: default;
	opacity: 0.1;
	pointer-events: none;
}

.table2022plan .planbtn.eary2023 {
	background-color: #ff3154;
	color: #fff;
}

.table2022plan .planbtn.eary2023 .badge {
	position: absolute;
	top: -13px;
	right: -13px;
}

.table2022plan .planbtn.eary2023 .badge img {
	width: 50px;
	height: auto;
}

.table2022plan .planbtn.hayawari2025 {
	position: relative;
	background-color: #ffd407;
	color: #000;
}

.table2022plan .planbtn.hayawari2025:before {
	content: '';
	display: block;
	position: absolute;
	top: -25px;
	left: -25px;
	width: 54px;
	height: 54px;
	background: url(../img/shinsotsu2025/hayawari/circle_hayawari2015.png) no-repeat 0 0;
	background-size: contain;
}

.table2022plan .planbtn.hayawari2025:hover {
	background-color: #000;
	color: #ffd407;
}

.table2022plan .planbtn.hayawari2025.is_notpayd:before {
	content: none;
}

.table2022plan .planbtn.tokuwari2025 {
	position: relative;
	background-color: #ffd407;
	color: #000;
}

.table2022plan .planbtn.tokuwari2025:before {
	content: '';
	display: block;
	position: absolute;
	top: -25px;
	left: -25px;
	width: 54px;
	height: 54px;
	background: url(../img/shinsotsu2025/tokuwari/circle_tokuwari2015.png) no-repeat 0 0;
	background-size: contain;
}

.table2022plan .planbtn.tokuwari2025:hover {
	background-color: #000;
	color: #ffd407;
}

.table2022plan .planbtn.tokuwari2025.is_notpayd:before {
	content: none;
}

.table2022plan .planbtn.natsuwari2025 {
	position: relative;
	padding: 15px 10px;
	background-color: #ffd407;
	color: #000;
}

.table2022plan .planbtn.natsuwari2025:before {
	content: '';
	display: block;
	position: absolute;
	top: -25px;
	left: -25px;
	width: 54px;
	height: 54px;
	background: url(../img/shinsotsu2025/natsuwari/circle_natsuwari2015.png) no-repeat 0 0;
	background-size: contain;
}

.table2022plan .planbtn.natsuwari2025:hover {
	background-color: #000;
	color: #ffd407;
}

.table2022plan .planbtn.natsuwari2025.is_notpayd:before {
	content: none;
}

.table2022plan.plan_secret {
	font-size: 1.4rem;
	-ms-grid-columns: 190px 1fr 1fr 1fr 1fr;
	grid-template-columns: 190px 1fr 1fr 1fr 1fr;
	grid-template-areas: 'planhead planitem1 planitem2 planitem3 planitem4';
}

.table2022plan.plan_secret .plan_item4 {
	-ms-grid-row: 1;
	-ms-grid-column: 5;
	grid-area: planitem4;
}

.table2022plan.plan_secret .plantitle {
	display: inline-block;
	font-size: 1.4rem;
}

.table2022plan.plan_secret .planprice {
	display: inline-block;
	font-size: 1.8rem;
}

.table2022plan.plan_secret .planprice span {
	font-size: 1.8rem;
}

.table2022plan.plan_secret .planprice small {
	font-size: 1.2rem;
}

.table2022plan.plan_secret .planscout strong {
	font-size: 1.4rem;
}

@media print, screen and (min-width: 768px) {
	.table2022plan.plan_secret .plan_term .plan_termitem {
		width: calc((100% * 4) - 20px);
		font-size: 1.6rem;
	}
}

.table2022plan .plan_transition {
	text-align: center;
}

@media print, screen and (min-width: 768px) {
	.table2022plan .plan_transition {
		color: #4a4a4a;
		pointer-events: none;
	}
}

@media print, screen and (max-width: 767px) {
	.table2022plan .plan_transition {
		color: #ff3154;
	}
}

.form-recruit_plans2022 tr th {
	padding: 10px;
	background-color: #ebebf3;
}

.form-recruit_plans2022 tr th i {
	padding-right: 5px;
}

.form-recruit_plans2022 tr th:nth-child(odd) {
	background-color: #f4f4f9;
}

.form-recruit_plans2022 tr td {
	padding: 10px;
	background-color: #ebebf3;
}

.form-recruit_plans2022 tr td:nth-child(odd) {
	background-color: #f4f4f9;
}

.form-recruit_plans2022 tr th,
.form-recruit_plans2022 tr td {
	border: 1px solid #fafafa;
}

/*
#styleguide
新卒プラン2022プラン早割比較表

```

```
*/
.table-2022ealry {
	width: 100%;
}

.table-2022ealry thead tr > *:nth-child(2n),
.table-2022ealry tbody tr > *:nth-child(2n) {
	background-color: #f4f4f9;
}

.table-2022ealry thead tr th,
.table-2022ealry tbody tr th {
	vertical-align: middle;
}

.table-2022ealry thead tr th .itemhead,
.table-2022ealry tbody tr th .itemhead {
	font-size: 1.4rem;
}

.table-2022ealry thead tr th .itemhead i,
.table-2022ealry tbody tr th .itemhead i {
	margin-right: 5px;
	font-size: 3rem;
}

.table-2022ealry thead tr th .itemhead small,
.table-2022ealry tbody tr th .itemhead small {
	font-size: 1.2rem;
}

.table-2022ealry thead .year,
.table-2022ealry tbody .year {
	display: block;
	margin: 10px;
	border-radius: 3px;
	background-color: #84849a;
	color: #fafafa;
	font-weight: bold;
	line-height: 24px;
	text-align: center;
}

.table-2022ealry thead .plan,
.table-2022ealry tbody .plan {
	margin: 10px 0 20px;
	text-align: center;
	-webkit-font-feature-settings: 'palt';
	font-feature-settings: 'palt';
}

.table-2022ealry thead .plan b,
.table-2022ealry tbody .plan b {
	display: block;
	font-size: 1.4rem;
}

.table-2022ealry thead .plan strong,
.table-2022ealry tbody .plan strong {
	font-size: 1.8rem;
}

.table-2022ealry thead .plan small,
.table-2022ealry tbody .plan small {
	display: inline-block;
}

.table-2022ealry thead tr:last-child th {
	border-bottom: 1px solid #4a4a4a;
}

.table-2022ealry tbody tr th,
.table-2022ealry tbody tr td {
	height: 60px;
}

.table-2022ealry tbody tr th {
	min-width: 150px;
	vertical-align: middle;
}

.table-2022ealry tbody tr th .itemhead {
	position: relative;
	margin-left: 35px;
	font-size: 1.4rem;
}

.table-2022ealry tbody tr th .itemhead i {
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: -35px;
	height: 1em;
	margin: auto;
	font-size: 3rem;
}

.table-2022ealry tbody tr th .itemhead small {
	font-size: 1.2rem;
}

.table-2022ealry tbody tr td {
	text-align: center;
}

@media print, screen and (max-width: 767px) {
	.table-2022ealry tbody tr td {
		min-width: 170px;
	}
}

.table-2022ealry tbody tr td .item-scout span {
	font-weight: bold;
}

.table-2022ealry tbody tr td .item-scout strong {
	font-size: 2.2rem;
	font-weight: bold;
}

.table-2022ealry tbody tr td .item-circle {
	display: inline-block;
	overflow: hidden;
	width: 20px;
	height: 20px;
	border: 2px solid #2658ce;
	border-radius: 10px;
	text-indent: -40px;
}

.table-2022ealry tbody tr td .item-limit {
	margin: 10px;
	border: 1px solid #f4f4f9;
	color: #2658ce;
	font-size: 1.8rem;
	font-weight: bold;
	line-height: 40px;
	text-align: center;
}

.table-2022ealry tbody tr td .button-2022ealry {
	position: relative;
	padding: 15px 0;
	-webkit-font-feature-settings: 'palt';
	font-feature-settings: 'palt';
}

.table-2022ealry tbody tr td .button-2022ealry b {
	font-size: 1.1rem;
}

.table-2022ealry tbody tr td .button-2022ealry span {
	font-size: 1.4rem;
	text-decoration: line-through;
}

.table-2022ealry tbody tr td .button-2022ealry strong {
	font-size: 1.8rem;
}

.table-2022ealry tbody tr td .button-2022ealry small {
	display: inline-block;
	font-size: 1.2rem;
}

.table-2022ealry tbody tr td .button-2022ealry.button-2022ealry-picup strong,
.table-2022ealry tbody tr td .button-2022ealry.button-2022ealry-picup small {
	color: #ffe266;
}

.table-2022ealry tbody tr td .button-2022ealry div {
	position: absolute;
	top: 0;
	right: 50%;
	bottom: 0;
	height: 60px;
	margin: auto -180px auto 0;
}

.table-2022ealry tbody tr td .button-2022ealry div img {
	width: 60px;
	height: auto;
}

.table-2022ealry tbody tr:first-child th,
.table-2022ealry tbody tr:first-child td {
	padding-top: 25px;
}

.table-2022ealry tbody tr.submit th,
.table-2022ealry tbody tr.submit td {
	border-top: 1px solid #4a4a4a;
}

.table-2022ealry tbody tr.submit-area td {
	height: 100px;
	padding: 10px;
}

.table-2023earlyplus {
	width: 100%;
}

.table-2023earlyplus thead tr > *:nth-child(2n),
.table-2023earlyplus tbody tr > *:nth-child(2n) {
	background-color: #f4f4f9;
}

.table-2023earlyplus thead tr th,
.table-2023earlyplus tbody tr th {
	vertical-align: middle;
}

.table-2023earlyplus thead tr th .itemhead,
.table-2023earlyplus tbody tr th .itemhead {
	font-size: 1.4rem;
}

.table-2023earlyplus thead tr th .itemhead i,
.table-2023earlyplus tbody tr th .itemhead i {
	margin-right: 5px;
	font-size: 3rem;
}

.table-2023earlyplus thead tr th .itemhead small,
.table-2023earlyplus tbody tr th .itemhead small {
	font-size: 1.2rem;
}

.table-2023earlyplus thead .year,
.table-2023earlyplus tbody .year {
	display: block;
	margin: 10px;
	border-radius: 3px;
	background-color: #84849a;
	color: #fafafa;
	font-weight: bold;
	line-height: 24px;
	text-align: center;
}

.table-2023earlyplus thead .plan,
.table-2023earlyplus tbody .plan {
	position: relative;
	margin: 10px 0 20px;
	text-align: center;
	-webkit-font-feature-settings: 'palt';
	font-feature-settings: 'palt';
}

.table-2023earlyplus thead .plan.plus-cel:before,
.table-2023earlyplus tbody .plan.plus-cel:before {
	content: '＋';
	display: block;
	position: absolute;
	top: calc( 50% - 24px);
	right: -23px;
	color: #ff3154;
	font-size: 5rem;
	font-weight: bold;
}

@media print, screen and (max-width: 767px) {
	.table-2023earlyplus thead .plan.plus-cel:before,
	.table-2023earlyplus tbody .plan.plus-cel:before {
		top: calc( 50% - 15px);
		right: -15px;
		font-size: 3rem;
	}
}

.table-2023earlyplus thead .plan .plantitle,
.table-2023earlyplus tbody .plan .plantitle {
	margin-bottom: 5px;
	font-size: 1.8rem;
	font-weight: bold;
	line-height: 1;
}

.table-2023earlyplus thead .plan .planoriginalprice,
.table-2023earlyplus tbody .plan .planoriginalprice {
	display: inline-block;
	color: #ff3154;
	font-size: 1.5rem;
	text-decoration: line-through;
}

.table-2023earlyplus thead .plan .planoriginalprice span,
.table-2023earlyplus tbody .plan .planoriginalprice span {
	color: #cacad9;
}

.table-2023earlyplus thead .plan .planprice,
.table-2023earlyplus tbody .plan .planprice {
	font-size: 2.8rem;
	font-weight: bold;
	line-height: 1;
	text-align: center;
}

.table-2023earlyplus thead .plan .planprice span,
.table-2023earlyplus tbody .plan .planprice span {
	display: inline-block;
	font-size: 2rem;
}

.table-2023earlyplus thead .plan .planprice small,
.table-2023earlyplus tbody .plan .planprice small {
	display: inline-block;
	font-size: 1.2rem;
	font-weight: normal;
}

.table-2023earlyplus thead .plan .planprice.eary2023,
.table-2023earlyplus tbody .plan .planprice.eary2023 {
	color: #ff3154;
}

.table-2023earlyplus thead .plan .planprice.eary2023 span,
.table-2023earlyplus thead .plan .planprice.eary2023 small,
.table-2023earlyplus tbody .plan .planprice.eary2023 span,
.table-2023earlyplus tbody .plan .planprice.eary2023 small {
	color: #4a4a4a;
}

@media print, screen and (max-width: 767px) {
	.table-2023earlyplus thead .plan .planprice.eary2023,
	.table-2023earlyplus tbody .plan .planprice.eary2023 {
		font-size: 2rem;
	}

	.table-2023earlyplus thead .plan .planprice.eary2023 span,
	.table-2023earlyplus tbody .plan .planprice.eary2023 span {
		font-size: 1.6rem;
	}

	.table-2023earlyplus thead .plan .planprice.eary2023 small,
	.table-2023earlyplus tbody .plan .planprice.eary2023 small {
		font-size: 1.2rem;
	}
}

.table-2023earlyplus thead .plan .planprice.hayawari2025,
.table-2023earlyplus tbody .plan .planprice.hayawari2025 {
	color: #0e6eb8;
}

.table-2023earlyplus thead .plan .planprice.hayawari2025 span,
.table-2023earlyplus thead .plan .planprice.hayawari2025 small,
.table-2023earlyplus tbody .plan .planprice.hayawari2025 span,
.table-2023earlyplus tbody .plan .planprice.hayawari2025 small {
	color: #4a4a4a;
}

@media print, screen and (max-width: 767px) {
	.table-2023earlyplus thead .plan .planprice.hayawari2025,
	.table-2023earlyplus tbody .plan .planprice.hayawari2025 {
		font-size: 2rem;
	}

	.table-2023earlyplus thead .plan .planprice.hayawari2025 span,
	.table-2023earlyplus tbody .plan .planprice.hayawari2025 span {
		font-size: 1.6rem;
	}

	.table-2023earlyplus thead .plan .planprice.hayawari2025 small,
	.table-2023earlyplus tbody .plan .planprice.hayawari2025 small {
		font-size: 1.2rem;
	}
}

.table-2023earlyplus thead .plan .planprice.tokuwari2025,
.table-2023earlyplus tbody .plan .planprice.tokuwari2025 {
	color: #db742e;
}

.table-2023earlyplus thead .plan .planprice.tokuwari2025 span,
.table-2023earlyplus thead .plan .planprice.tokuwari2025 small,
.table-2023earlyplus tbody .plan .planprice.tokuwari2025 span,
.table-2023earlyplus tbody .plan .planprice.tokuwari2025 small {
	color: #4a4a4a;
}

@media print, screen and (max-width: 767px) {
	.table-2023earlyplus thead .plan .planprice.tokuwari2025,
	.table-2023earlyplus tbody .plan .planprice.tokuwari2025 {
		font-size: 2rem;
	}

	.table-2023earlyplus thead .plan .planprice.tokuwari2025 span,
	.table-2023earlyplus tbody .plan .planprice.tokuwari2025 span {
		font-size: 1.6rem;
	}

	.table-2023earlyplus thead .plan .planprice.tokuwari2025 small,
	.table-2023earlyplus tbody .plan .planprice.tokuwari2025 small {
		font-size: 1.2rem;
	}
}

.table-2023earlyplus thead .plan .planprice.natsuwari2025,
.table-2023earlyplus tbody .plan .planprice.natsuwari2025 {
	color: #4872b8;
}

.table-2023earlyplus thead .plan .planprice.natsuwari2025 span,
.table-2023earlyplus thead .plan .planprice.natsuwari2025 small,
.table-2023earlyplus tbody .plan .planprice.natsuwari2025 span,
.table-2023earlyplus tbody .plan .planprice.natsuwari2025 small {
	color: #4a4a4a;
}

@media print, screen and (max-width: 767px) {
	.table-2023earlyplus thead .plan .planprice.natsuwari2025,
	.table-2023earlyplus tbody .plan .planprice.natsuwari2025 {
		font-size: 2rem;
	}

	.table-2023earlyplus thead .plan .planprice.natsuwari2025 span,
	.table-2023earlyplus tbody .plan .planprice.natsuwari2025 span {
		font-size: 1.6rem;
	}

	.table-2023earlyplus thead .plan .planprice.natsuwari2025 small,
	.table-2023earlyplus tbody .plan .planprice.natsuwari2025 small {
		font-size: 1.2rem;
	}
}

.table-2023earlyplus thead .plan .plan_badge,
.table-2023earlyplus tbody .plan .plan_badge {
	position: absolute;
	top: 33px;
	right: 50%;
	margin-right: -126px;
}

@media print, screen and (max-width: 767px) {
	.table-2023earlyplus thead .plan .plan_badge,
	.table-2023earlyplus tbody .plan .plan_badge {
		top: -30px;
		margin-right: -105px;
	}
}

.table-2023earlyplus thead .plan .plan_badge img,
.table-2023earlyplus tbody .plan .plan_badge img {
	width: 53px;
	height: auto;
}

.table-2023earlyplus thead tr:last-child th {
	border-bottom: 1px solid #4a4a4a;
}

.table-2023earlyplus tbody tr th,
.table-2023earlyplus tbody tr td {
	height: 60px;
}

.table-2023earlyplus tbody tr th {
	min-width: 150px;
	vertical-align: middle;
}

.table-2023earlyplus tbody tr th .itemhead {
	position: relative;
	margin-left: 35px;
	font-size: 1.4rem;
}

.table-2023earlyplus tbody tr th .itemhead i {
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: -35px;
	height: 1em;
	margin: auto;
	font-size: 3rem;
}

.table-2023earlyplus tbody tr th .itemhead small {
	font-size: 1.2rem;
}

.table-2023earlyplus tbody tr td {
	text-align: center;
}

@media print, screen and (max-width: 767px) {
	.table-2023earlyplus tbody tr td {
		min-width: 170px;
	}
}

.table-2023earlyplus tbody tr td .item-scout span {
	font-weight: bold;
}

.table-2023earlyplus tbody tr td .item-scout strong {
	font-size: 2.2rem;
	font-weight: bold;
}

.table-2023earlyplus tbody tr td .item-circle {
	display: inline-block;
	overflow: hidden;
	width: 20px;
	height: 20px;
	border: 2px solid #2658ce;
	border-radius: 10px;
	text-indent: -40px;
}

.table-2023earlyplus tbody tr td .item-limit {
	margin: 10px;
	border: 1px solid #f4f4f9;
	color: #2658ce;
	font-size: 1.8rem;
	font-weight: bold;
	line-height: 40px;
	text-align: center;
}

.table-2023earlyplus tbody tr td .button-2023earlyplus {
	position: relative;
	padding: 15px 0;
	background-color: #ff3154;
	-webkit-font-feature-settings: 'palt';
	font-feature-settings: 'palt';
}

.table-2023earlyplus tbody tr td .button-2023earlyplus b {
	font-size: 1.3rem;
}

.table-2023earlyplus tbody tr td .button-2023earlyplus span.detail {
	font-size: 1.6rem;
	text-decoration: line-through;
}

.table-2023earlyplus tbody tr td .button-2023earlyplus strong {
	color: #ffe266;
	font-size: 2rem;
}

.table-2023earlyplus tbody tr td .button-2023earlyplus small {
	display: inline-block;
	color: #ffe266;
	font-size: 1.4rem;
}

.table-2023earlyplus tbody tr td .button-2023earlyplus div {
	position: absolute;
	top: 0;
	right: 50%;
	bottom: 0;
	height: 60px;
	margin: auto -200px auto 0;
}

.table-2023earlyplus tbody tr td .button-2023earlyplus div img {
	width: 60px;
	height: auto;
}

.table-2023earlyplus tbody tr td .icon-check {
	font-size: 2.2rem;
}

.table-2023earlyplus tbody tr:first-child th,
.table-2023earlyplus tbody tr:first-child td {
	padding-top: 25px;
}

.table-2023earlyplus tbody tr.submit th,
.table-2023earlyplus tbody tr.submit td {
	border-top: 1px solid #4a4a4a;
}

.table-2023earlyplus tbody tr.submit-area td {
	height: 100px;
	padding: 10px;
}

.table-2025earlyplus {
	width: 100%;
}

.table-2025earlyplus thead tr > *:nth-child(2n),
.table-2025earlyplus tbody tr > *:nth-child(2n) {
	background-color: #f4f4f9;
}

.table-2025earlyplus thead tr th,
.table-2025earlyplus tbody tr th {
	vertical-align: middle;
}

.table-2025earlyplus thead tr th .itemhead,
.table-2025earlyplus tbody tr th .itemhead {
	font-size: 1.4rem;
}

.table-2025earlyplus thead tr th .itemhead i,
.table-2025earlyplus tbody tr th .itemhead i {
	margin-right: 5px;
	font-size: 3rem;
}

.table-2025earlyplus thead tr th .itemhead small,
.table-2025earlyplus tbody tr th .itemhead small {
	font-size: 1.2rem;
}

.table-2025earlyplus thead .year,
.table-2025earlyplus tbody .year {
	display: block;
	margin: 10px;
	border-radius: 3px;
	background-color: #d41d19;
	color: #fafafa;
	font-weight: bold;
	line-height: 24px;
	text-align: center;
}

.table-2025earlyplus thead .plan,
.table-2025earlyplus tbody .plan {
	position: relative;
	margin: 10px 0 20px;
	text-align: center;
	-webkit-font-feature-settings: 'palt';
	font-feature-settings: 'palt';
}

.table-2025earlyplus thead .plan.plus-cel:before,
.table-2025earlyplus tbody .plan.plus-cel:before {
	content: '＋';
	display: block;
	position: absolute;
	top: calc( 50% - 24px);
	right: -23px;
	color: #84849a;
	font-size: 5rem;
	font-weight: bold;
}

@media print, screen and (max-width: 767px) {
	.table-2025earlyplus thead .plan.plus-cel:before,
	.table-2025earlyplus tbody .plan.plus-cel:before {
		top: calc( 50% - 15px);
		right: -15px;
		font-size: 3rem;
	}
}

.table-2025earlyplus thead .plan .plantitle,
.table-2025earlyplus tbody .plan .plantitle {
	margin-bottom: 5px;
	font-size: 1.8rem;
	font-weight: bold;
	line-height: 1;
}

.table-2025earlyplus thead .plan .planoriginalprice,
.table-2025earlyplus tbody .plan .planoriginalprice {
	display: inline-block;
	color: #d41d19;
	font-size: 1.5rem;
	text-decoration: line-through;
}

.table-2025earlyplus thead .plan .planoriginalprice span,
.table-2025earlyplus tbody .plan .planoriginalprice span {
	color: #cacad9;
}

.table-2025earlyplus thead .plan .planprice,
.table-2025earlyplus tbody .plan .planprice {
	font-size: 2.8rem;
	font-weight: bold;
	line-height: 1;
	text-align: center;
}

.table-2025earlyplus thead .plan .planprice span,
.table-2025earlyplus tbody .plan .planprice span {
	display: inline-block;
	font-size: 2rem;
}

.table-2025earlyplus thead .plan .planprice small,
.table-2025earlyplus tbody .plan .planprice small {
	display: inline-block;
	font-size: 1.2rem;
	font-weight: normal;
}

.table-2025earlyplus thead .plan .planprice.eary2025,
.table-2025earlyplus tbody .plan .planprice.eary2025 {
	color: #d41d19;
}

.table-2025earlyplus thead .plan .planprice.eary2025 span,
.table-2025earlyplus thead .plan .planprice.eary2025 small,
.table-2025earlyplus tbody .plan .planprice.eary2025 span,
.table-2025earlyplus tbody .plan .planprice.eary2025 small {
	color: #4a4a4a;
}

@media print, screen and (max-width: 767px) {
	.table-2025earlyplus thead .plan .planprice.eary2025,
	.table-2025earlyplus tbody .plan .planprice.eary2025 {
		font-size: 2rem;
	}

	.table-2025earlyplus thead .plan .planprice.eary2025 span,
	.table-2025earlyplus tbody .plan .planprice.eary2025 span {
		font-size: 1.6rem;
	}

	.table-2025earlyplus thead .plan .planprice.eary2025 small,
	.table-2025earlyplus tbody .plan .planprice.eary2025 small {
		font-size: 1.2rem;
	}
}

.table-2025earlyplus thead .plan .planprice.hayawari2025,
.table-2025earlyplus tbody .plan .planprice.hayawari2025 {
	color: #0e6eb8;
}

.table-2025earlyplus thead .plan .planprice.hayawari2025 span,
.table-2025earlyplus thead .plan .planprice.hayawari2025 small,
.table-2025earlyplus tbody .plan .planprice.hayawari2025 span,
.table-2025earlyplus tbody .plan .planprice.hayawari2025 small {
	color: #4a4a4a;
}

@media print, screen and (max-width: 767px) {
	.table-2025earlyplus thead .plan .planprice.hayawari2025,
	.table-2025earlyplus tbody .plan .planprice.hayawari2025 {
		font-size: 2rem;
	}

	.table-2025earlyplus thead .plan .planprice.hayawari2025 span,
	.table-2025earlyplus tbody .plan .planprice.hayawari2025 span {
		font-size: 1.6rem;
	}

	.table-2025earlyplus thead .plan .planprice.hayawari2025 small,
	.table-2025earlyplus tbody .plan .planprice.hayawari2025 small {
		font-size: 1.2rem;
	}
}

.table-2025earlyplus thead .plan .planprice.tokuwari2025,
.table-2025earlyplus tbody .plan .planprice.tokuwari2025 {
	color: #db742e;
}

.table-2025earlyplus thead .plan .planprice.tokuwari2025 span,
.table-2025earlyplus thead .plan .planprice.tokuwari2025 small,
.table-2025earlyplus tbody .plan .planprice.tokuwari2025 span,
.table-2025earlyplus tbody .plan .planprice.tokuwari2025 small {
	color: #4a4a4a;
}

@media print, screen and (max-width: 767px) {
	.table-2025earlyplus thead .plan .planprice.tokuwari2025,
	.table-2025earlyplus tbody .plan .planprice.tokuwari2025 {
		font-size: 2rem;
	}

	.table-2025earlyplus thead .plan .planprice.tokuwari2025 span,
	.table-2025earlyplus tbody .plan .planprice.tokuwari2025 span {
		font-size: 1.6rem;
	}

	.table-2025earlyplus thead .plan .planprice.tokuwari2025 small,
	.table-2025earlyplus tbody .plan .planprice.tokuwari2025 small {
		font-size: 1.2rem;
	}
}

.table-2025earlyplus thead .plan .planprice.natsuwari2025,
.table-2025earlyplus tbody .plan .planprice.natsuwari2025 {
	color: #4872b8;
}

.table-2025earlyplus thead .plan .planprice.natsuwari2025 span,
.table-2025earlyplus thead .plan .planprice.natsuwari2025 small,
.table-2025earlyplus tbody .plan .planprice.natsuwari2025 span,
.table-2025earlyplus tbody .plan .planprice.natsuwari2025 small {
	color: #4a4a4a;
}

@media print, screen and (max-width: 767px) {
	.table-2025earlyplus thead .plan .planprice.natsuwari2025,
	.table-2025earlyplus tbody .plan .planprice.natsuwari2025 {
		font-size: 2rem;
	}

	.table-2025earlyplus thead .plan .planprice.natsuwari2025 span,
	.table-2025earlyplus tbody .plan .planprice.natsuwari2025 span {
		font-size: 1.6rem;
	}

	.table-2025earlyplus thead .plan .planprice.natsuwari2025 small,
	.table-2025earlyplus tbody .plan .planprice.natsuwari2025 small {
		font-size: 1.2rem;
	}
}

.table-2025earlyplus thead .plan .plan_badge,
.table-2025earlyplus tbody .plan .plan_badge {
	position: absolute;
	top: 33px;
	right: 50%;
	margin-right: -126px;
}

@media print, screen and (max-width: 767px) {
	.table-2025earlyplus thead .plan .plan_badge,
	.table-2025earlyplus tbody .plan .plan_badge {
		top: -30px;
		margin-right: -105px;
	}
}

.table-2025earlyplus thead .plan .plan_badge img,
.table-2025earlyplus tbody .plan .plan_badge img {
	width: 53px;
	height: auto;
}

.table-2025earlyplus thead tr:last-child th {
	border-bottom: 1px solid #4a4a4a;
}

.table-2025earlyplus tbody tr th,
.table-2025earlyplus tbody tr td {
	height: 60px;
}

.table-2025earlyplus tbody tr th {
	min-width: 150px;
	vertical-align: middle;
}

.table-2025earlyplus tbody tr th .itemhead {
	position: relative;
	margin-left: 35px;
	font-size: 1.4rem;
}

.table-2025earlyplus tbody tr th .itemhead i {
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: -35px;
	height: 1em;
	margin: auto;
	font-size: 3rem;
}

.table-2025earlyplus tbody tr th .itemhead small {
	font-size: 1.2rem;
}

.table-2025earlyplus tbody tr td {
	text-align: center;
}

@media print, screen and (max-width: 767px) {
	.table-2025earlyplus tbody tr td {
		min-width: 170px;
	}
}

.table-2025earlyplus tbody tr td .item-scout span {
	font-weight: bold;
}

.table-2025earlyplus tbody tr td .item-scout strong {
	font-size: 2.2rem;
	font-weight: bold;
}

.table-2025earlyplus tbody tr td .item-circle {
	display: inline-block;
	overflow: hidden;
	width: 20px;
	height: 20px;
	border: 2px solid #2658ce;
	border-radius: 10px;
	text-indent: -40px;
}

.table-2025earlyplus tbody tr td .item-limit {
	margin: 10px;
	border: 1px solid #f4f4f9;
	color: #2658ce;
	font-size: 1.8rem;
	font-weight: bold;
	line-height: 40px;
	text-align: center;
}

.table-2025earlyplus tbody tr td .button-2025earlyplus {
	position: relative;
	padding: 15px 0;
	background-color: #ffd407;
	color: #4a4a4a;
	-webkit-font-feature-settings: 'palt';
	font-feature-settings: 'palt';
}

.table-2025earlyplus tbody tr td .button-2025earlyplus b {
	font-size: 1.3rem;
}

.table-2025earlyplus tbody tr td .button-2025earlyplus span.detail {
	font-size: 1.6rem;
	text-decoration: line-through;
}

.table-2025earlyplus tbody tr td .button-2025earlyplus strong {
	color: #d41d19;
	font-size: 2rem;
}

.table-2025earlyplus tbody tr td .button-2025earlyplus small {
	display: inline-block;
	color: #d41d19;
	font-size: 1.4rem;
}

.table-2025earlyplus tbody tr td .button-2025earlyplus div {
	position: absolute;
	top: 0;
	right: 50%;
	bottom: 0;
	height: 60px;
	margin: auto -200px auto 0;
}

.table-2025earlyplus tbody tr td .button-2025earlyplus div img {
	width: 60px;
	height: auto;
}

.table-2025earlyplus tbody tr td .button-2025earlyplus:hover {
	background-color: #000;
	color: #ffd407;
}

.table-2025earlyplus tbody tr td .button-2025earlyplus:hover strong {
	color: #d41d19;
}

.table-2025earlyplus tbody tr td .button-2025earlyplus:hover small {
	color: #d41d19;
}

.table-2025earlyplus tbody tr td .icon-check {
	font-size: 2.2rem;
}

.table-2025earlyplus tbody tr:first-child th,
.table-2025earlyplus tbody tr:first-child td {
	padding-top: 25px;
}

.table-2025earlyplus tbody tr.submit th,
.table-2025earlyplus tbody tr.submit td {
	border-top: 1px solid #4a4a4a;
}

.table-2025earlyplus tbody tr.submit-area td {
	height: 100px;
	padding: 10px;
}

.table-2025tokuwari {
	width: 100%;
}

.table-2025tokuwari thead tr > *:nth-child(2n),
.table-2025tokuwari tbody tr > *:nth-child(2n) {
	background-color: #f4f4f9;
}

.table-2025tokuwari thead tr th,
.table-2025tokuwari tbody tr th {
	vertical-align: middle;
}

.table-2025tokuwari thead tr th .itemhead,
.table-2025tokuwari tbody tr th .itemhead {
	font-size: 1.4rem;
}

.table-2025tokuwari thead tr th .itemhead i,
.table-2025tokuwari tbody tr th .itemhead i {
	margin-right: 5px;
	font-size: 3rem;
}

.table-2025tokuwari thead tr th .itemhead small,
.table-2025tokuwari tbody tr th .itemhead small {
	font-size: 1.2rem;
}

.table-2025tokuwari thead .year,
.table-2025tokuwari tbody .year {
	display: block;
	margin: 10px;
	border-radius: 3px;
	background-color: #d41d19;
	color: #fafafa;
	font-weight: bold;
	line-height: 24px;
	text-align: center;
}

.table-2025tokuwari thead .plan,
.table-2025tokuwari tbody .plan {
	position: relative;
	margin: 10px 0 20px;
	text-align: center;
	-webkit-font-feature-settings: 'palt';
	font-feature-settings: 'palt';
}

.table-2025tokuwari thead .plan.plus-cel:before,
.table-2025tokuwari tbody .plan.plus-cel:before {
	content: '＋';
	display: block;
	position: absolute;
	top: calc( 50% - 24px);
	right: -23px;
	color: #84849a;
	font-size: 5rem;
	font-weight: bold;
}

@media print, screen and (max-width: 767px) {
	.table-2025tokuwari thead .plan.plus-cel:before,
	.table-2025tokuwari tbody .plan.plus-cel:before {
		top: calc( 50% - 15px);
		right: -15px;
		font-size: 3rem;
	}
}

.table-2025tokuwari thead .plan .plantitle,
.table-2025tokuwari tbody .plan .plantitle {
	margin-bottom: 5px;
	font-size: 1.8rem;
	font-weight: bold;
	line-height: 1;
}

.table-2025tokuwari thead .plan .planoriginalprice,
.table-2025tokuwari tbody .plan .planoriginalprice {
	display: inline-block;
	color: #d41d19;
	font-size: 1.5rem;
	text-decoration: line-through;
}

.table-2025tokuwari thead .plan .planoriginalprice span,
.table-2025tokuwari tbody .plan .planoriginalprice span {
	color: #cacad9;
}

.table-2025tokuwari thead .plan .planprice,
.table-2025tokuwari tbody .plan .planprice {
	font-size: 2.8rem;
	font-weight: bold;
	line-height: 1;
	text-align: center;
}

.table-2025tokuwari thead .plan .planprice span,
.table-2025tokuwari tbody .plan .planprice span {
	display: inline-block;
	font-size: 2rem;
}

.table-2025tokuwari thead .plan .planprice small,
.table-2025tokuwari tbody .plan .planprice small {
	display: inline-block;
	font-size: 1.2rem;
	font-weight: normal;
}

.table-2025tokuwari thead .plan .planprice.eary2025,
.table-2025tokuwari tbody .plan .planprice.eary2025 {
	color: #d41d19;
}

.table-2025tokuwari thead .plan .planprice.eary2025 span,
.table-2025tokuwari thead .plan .planprice.eary2025 small,
.table-2025tokuwari tbody .plan .planprice.eary2025 span,
.table-2025tokuwari tbody .plan .planprice.eary2025 small {
	color: #4a4a4a;
}

@media print, screen and (max-width: 767px) {
	.table-2025tokuwari thead .plan .planprice.eary2025,
	.table-2025tokuwari tbody .plan .planprice.eary2025 {
		font-size: 2rem;
	}

	.table-2025tokuwari thead .plan .planprice.eary2025 span,
	.table-2025tokuwari tbody .plan .planprice.eary2025 span {
		font-size: 1.6rem;
	}

	.table-2025tokuwari thead .plan .planprice.eary2025 small,
	.table-2025tokuwari tbody .plan .planprice.eary2025 small {
		font-size: 1.2rem;
	}
}

.table-2025tokuwari thead .plan .planprice.hayawari2025,
.table-2025tokuwari tbody .plan .planprice.hayawari2025 {
	color: #0e6eb8;
}

.table-2025tokuwari thead .plan .planprice.hayawari2025 span,
.table-2025tokuwari thead .plan .planprice.hayawari2025 small,
.table-2025tokuwari tbody .plan .planprice.hayawari2025 span,
.table-2025tokuwari tbody .plan .planprice.hayawari2025 small {
	color: #4a4a4a;
}

@media print, screen and (max-width: 767px) {
	.table-2025tokuwari thead .plan .planprice.hayawari2025,
	.table-2025tokuwari tbody .plan .planprice.hayawari2025 {
		font-size: 2rem;
	}

	.table-2025tokuwari thead .plan .planprice.hayawari2025 span,
	.table-2025tokuwari tbody .plan .planprice.hayawari2025 span {
		font-size: 1.6rem;
	}

	.table-2025tokuwari thead .plan .planprice.hayawari2025 small,
	.table-2025tokuwari tbody .plan .planprice.hayawari2025 small {
		font-size: 1.2rem;
	}
}

.table-2025tokuwari thead .plan .planprice.tokuwari2025,
.table-2025tokuwari tbody .plan .planprice.tokuwari2025 {
	color: #db742e;
}

.table-2025tokuwari thead .plan .planprice.tokuwari2025 span,
.table-2025tokuwari thead .plan .planprice.tokuwari2025 small,
.table-2025tokuwari tbody .plan .planprice.tokuwari2025 span,
.table-2025tokuwari tbody .plan .planprice.tokuwari2025 small {
	color: #4a4a4a;
}

@media print, screen and (max-width: 767px) {
	.table-2025tokuwari thead .plan .planprice.tokuwari2025,
	.table-2025tokuwari tbody .plan .planprice.tokuwari2025 {
		font-size: 2rem;
	}

	.table-2025tokuwari thead .plan .planprice.tokuwari2025 span,
	.table-2025tokuwari tbody .plan .planprice.tokuwari2025 span {
		font-size: 1.6rem;
	}

	.table-2025tokuwari thead .plan .planprice.tokuwari2025 small,
	.table-2025tokuwari tbody .plan .planprice.tokuwari2025 small {
		font-size: 1.2rem;
	}
}

.table-2025tokuwari thead .plan .planprice.natsuwari2025,
.table-2025tokuwari tbody .plan .planprice.natsuwari2025 {
	color: #4872b8;
}

.table-2025tokuwari thead .plan .planprice.natsuwari2025 span,
.table-2025tokuwari thead .plan .planprice.natsuwari2025 small,
.table-2025tokuwari tbody .plan .planprice.natsuwari2025 span,
.table-2025tokuwari tbody .plan .planprice.natsuwari2025 small {
	color: #4a4a4a;
}

@media print, screen and (max-width: 767px) {
	.table-2025tokuwari thead .plan .planprice.natsuwari2025,
	.table-2025tokuwari tbody .plan .planprice.natsuwari2025 {
		font-size: 2rem;
	}

	.table-2025tokuwari thead .plan .planprice.natsuwari2025 span,
	.table-2025tokuwari tbody .plan .planprice.natsuwari2025 span {
		font-size: 1.6rem;
	}

	.table-2025tokuwari thead .plan .planprice.natsuwari2025 small,
	.table-2025tokuwari tbody .plan .planprice.natsuwari2025 small {
		font-size: 1.2rem;
	}
}

.table-2025tokuwari thead .plan .plan_badge,
.table-2025tokuwari tbody .plan .plan_badge {
	position: absolute;
	top: 33px;
	right: 50%;
	margin-right: -126px;
}

@media print, screen and (max-width: 767px) {
	.table-2025tokuwari thead .plan .plan_badge,
	.table-2025tokuwari tbody .plan .plan_badge {
		top: -30px;
		margin-right: -105px;
	}
}

.table-2025tokuwari thead .plan .plan_badge img,
.table-2025tokuwari tbody .plan .plan_badge img {
	width: 53px;
	height: auto;
}

.table-2025tokuwari thead tr:last-child th {
	border-bottom: 1px solid #4a4a4a;
}

.table-2025tokuwari tbody tr th,
.table-2025tokuwari tbody tr td {
	height: 60px;
}

.table-2025tokuwari tbody tr th {
	min-width: 150px;
	vertical-align: middle;
}

.table-2025tokuwari tbody tr th .itemhead {
	position: relative;
	margin-left: 35px;
	font-size: 1.4rem;
}

.table-2025tokuwari tbody tr th .itemhead i {
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: -35px;
	height: 1em;
	margin: auto;
	font-size: 3rem;
}

.table-2025tokuwari tbody tr th .itemhead small {
	font-size: 1.2rem;
}

.table-2025tokuwari tbody tr td {
	text-align: center;
}

@media print, screen and (max-width: 767px) {
	.table-2025tokuwari tbody tr td {
		min-width: 170px;
	}
}

.table-2025tokuwari tbody tr td .item-scout span {
	font-weight: bold;
}

.table-2025tokuwari tbody tr td .item-scout strong {
	font-size: 2.2rem;
	font-weight: bold;
}

.table-2025tokuwari tbody tr td .item-circle {
	display: inline-block;
	overflow: hidden;
	width: 20px;
	height: 20px;
	border: 2px solid #2658ce;
	border-radius: 10px;
	text-indent: -40px;
}

.table-2025tokuwari tbody tr td .item-limit {
	margin: 10px;
	border: 1px solid #f4f4f9;
	color: #2658ce;
	font-size: 1.8rem;
	font-weight: bold;
	line-height: 40px;
	text-align: center;
}

.table-2025tokuwari tbody tr td .button-2025earlyplus {
	position: relative;
	padding: 15px 0;
	background-color: #ffd407;
	color: #4a4a4a;
	-webkit-font-feature-settings: 'palt';
	font-feature-settings: 'palt';
}

.table-2025tokuwari tbody tr td .button-2025earlyplus b {
	font-size: 1.3rem;
}

.table-2025tokuwari tbody tr td .button-2025earlyplus span.detail {
	font-size: 1.6rem;
	text-decoration: line-through;
}

.table-2025tokuwari tbody tr td .button-2025earlyplus strong {
	color: #d41d19;
	font-size: 2rem;
}

.table-2025tokuwari tbody tr td .button-2025earlyplus small {
	display: inline-block;
	color: #d41d19;
	font-size: 1.4rem;
}

.table-2025tokuwari tbody tr td .button-2025earlyplus div {
	position: absolute;
	top: 0;
	right: 50%;
	bottom: 0;
	height: 60px;
	margin: auto -200px auto 0;
}

.table-2025tokuwari tbody tr td .button-2025earlyplus div img {
	width: 60px;
	height: auto;
}

.table-2025tokuwari tbody tr td .button-2025earlyplus:hover {
	background-color: #000;
	color: #ffd407;
}

.table-2025tokuwari tbody tr td .button-2025earlyplus:hover strong {
	color: #d41d19;
}

.table-2025tokuwari tbody tr td .button-2025earlyplus:hover small {
	color: #d41d19;
}

.table-2025tokuwari tbody tr td .icon-check {
	font-size: 2.2rem;
}

.table-2025tokuwari tbody tr:first-child th,
.table-2025tokuwari tbody tr:first-child td {
	padding-top: 25px;
}

.table-2025tokuwari tbody tr.submit th,
.table-2025tokuwari tbody tr.submit td {
	border-top: 1px solid #4a4a4a;
}

.table-2025tokuwari tbody tr.submit-area td {
	height: 100px;
	padding: 10px;
}

.shinsotsu2025-banner > img {
	width: 100%;
	height: auto;
}

.plan2026 .table2022plan .plan_term .plan_termitem {
	color: #178b2a;
}

.plan2026 .table2022plan .type1-button {
	background-color: #22ab38;
}

.plan2026 .table2022plan .type2-button {
	background-color: #178b2a;
}

.plan2026 .table2022plan .type3-button {
	background-color: #1c6f29;
}

.plan2026 .box-2022plan-special-add.plan2026 .copy span,
.plan2026 .box-2022plan-special-add.plan2026 .copy strong {
	color: #178b2a;
}

.plan2026 .box-2022plan-special-add.plan2026 .button-pdf .mod-button {
	background-color: #178b2a;
}

.plan2026 .box-2022plan-special-add.plan2026 .button-pdf .mod-button:hover {
	background-color: #0c4916;
	color: #fff;
}

.plan2027 .table2022plan .plan_term .plan_termitem {
	color: #1aa4b6;
}

.plan2027 .table2022plan .type1-button {
	background-color: #12c0d6;
}

.plan2027 .table2022plan .type2-button {
	background-color: #1aa4b6;
}

.plan2027 .table2022plan .type3-button {
	background-color: #2b7e8a;
}

.plan2027 .box-2022plan-special-add.plan2027 .copy span,
.plan2027 .box-2022plan-special-add.plan2027 .copy strong {
	color: #1aa4b6;
}

.plan2027 .box-2022plan-special-add.plan2027 .button-pdf .mod-button {
	background-color: #1aa4b6;
}

.plan2027 .box-2022plan-special-add.plan2027 .button-pdf .mod-button:hover {
	background-color: #106873;
	color: #fff;
}

/* variables color */
/*
#colors

@Service #2658CE
@Job #37B500
@Career #FE590F
@tone1 #F4F4F9
@tone2 #EBEBF3
@tone3 #CACAD9
@tone4 #84849A
@tone5 #4A4A4A
*/
/* variables-color */
:root {
	/* color color palette */
	/* Gray */
	--Gray-100: #f6f3f0;
	--Gray-200: #e4e0de;
	--Gray-300: #cbc8c6;
	--Gray-400: #b2afac;
	--Gray-500: #969391;
	--Gray-600: #716e6b;
	--Gray-700: #605d5b;
	--Gray-800: #4e4b49;
	--Gray-900: #2d2b29;
	--Gray-1000: #171413;
	/* Pink */
	--Pink-100: #fef1f5;
	--Pink-200: #fbd8e2;
	--Pink-300: #f7b5c8;
	--Pink-400: #f189aa;
	--Pink-500: #e9588e;
	--Pink-600: #cb006b;
	--Pink-700: #ac0058;
	--Pink-800: #8b0647;
	--Pink-900: #57002a;
	--Pink-1000: #280010;
	/* Red */
	--Red-100: #fff1f1;
	--Red-200: #ffd8d7;
	--Red-300: #fdb4b4;
	--Red-400: #fb888b;
	--Red-500: #f5505f;
	--Red-600: #d40038;
	--Red-700: #ac1731;
	--Red-800: #920625;
	--Red-900: #5c0415;
	--Red-1000: #2f0107;
	/* Orange */
	--Orange-100: #fef2ed;
	--Orange-200: #ffdacd;
	--Orange-300: #ffb59c;
	--Orange-400: #f88d68;
	--Orange-500: #f25915;
	--Orange-600: #c04101;
	--Orange-700: #934225;
	--Orange-800: #79371f;
	--Orange-900: #4f1f0d;
	--Orange-1000: #260c04;
	/* Lime */
	--Lime-100: #f2f9e2;
	--Lime-200: #dfebbf;
	--Lime-300: #c1d293;
	--Lime-400: #a2bb4b;
	--Lime-500: #869f16;
	--Lime-600: #687c0b;
	--Lime-700: #566606;
	--Lime-800: #465408;
	--Lime-900: #2c3505;
	--Lime-1000: #121700;
	/* Green */
	--Green-100: #ecfaec;
	--Green-200: #cdf0cc;
	--Green-300: #a8daa8;
	--Green-400: #66c56c;
	--Green-500: #28af3d;
	--Green-600: #2b8735;
	--Green-700: #276d2e;
	--Green-800: #1b5a22;
	--Green-900: #0f3a14;
	--Green-1000: #021b04;
	/* Aqua */
	--Aqua-100: #e3fafe;
	--Aqua-200: #b7f0fa;
	--Aqua-300: #7edae9;
	--Aqua-400: #12c0d6;
	--Aqua-500: #1aa4b6;
	--Aqua-600: #2b7e8a;
	--Aqua-700: #176774;
	--Aqua-800: #0f5760;
	--Aqua-900: #05373f;
	--Aqua-1000: #00191d;
	/* Blue */
	--Blue-100: #f2f5fc;
	--Blue-200: #dae3f7;
	--Blue-300: #b0c7f9;
	--Blue-400: #8aaaf6;
	--Blue-500: #648cf4;
	--Blue-600: #3a63e0;
	--Blue-700: #2045da;
	--Blue-800: #142ec5;
	--Blue-900: #08118c;
	--Blue-1000: #020448;
	/* Violet */
	--Violet-100: #f4f5fa;
	--Violet-200: #dfe1f6;
	--Violet-300: #bec2f8;
	--Violet-400: #9fa3f4;
	--Violet-500: #8382f3;
	--Violet-600: #6258dd;
	--Violet-700: #5336d8;
	--Violet-800: #451dc3;
	--Violet-900: #290083;
	--Violet-1000: #104;
	/* Purple */
	--Purple-100: #f9f3f9;
	--Purple-200: #eedced;
	--Purple-300: #e2b7e1;
	--Purple-400: #d392d2;
	--Purple-500: #c46bc4;
	--Purple-600: #a247a2;
	--Purple-700: #950c98;
	--Purple-800: #7d0c7f;
	--Purple-900: #4f0050;
	--Purple-1000: #260027;
	/* Yellow */
	--Yellow-100: #fffaec;
	--Yellow-200: #feeec1;
	--Yellow-300: #fee195;
	--Yellow-400: #f7ce5a;
	--Yellow-500: #f4c200;
	--Yellow-600: #d4a800;
	--Yellow-700: #b18c00;
	--Yellow-800: #896c00;
	--Yellow-900: #5f4a00;
	--Yellow-1000: #1f1600;
}

/*
#styleguide
ボタン


```
<a href="#" class="mod-button">Standard</a>
<a href="#" class="mod-button button-blue">Blue Button</a>
<a href="#" class="mod-button button-white">White Butto</a>
<a href="#" class="mod-button button-red">Red Butto</a>
<a href="#" class="mod-button button-black">black Butto</a>
<a href="#" class="mod-button button-career">career Butto</a>
<a href="#" class="mod-button button-job">job Butto</a>
<a href="#" class="mod-button button-yellow">job Butto</a>
<a href="#" class="mod-button button-link">job Butto</a>
<a href="#" class="mod-button button-nonactive">job Butto</a>
```

*/
.mod-button,
.card-button input {
	display: inline-block;
	position: relative;
	padding: 15px;
	border-radius: 5px;
	background-color: #84849a;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	color: #fff;
	line-height: 1.4;
	text-align: center;
	-webkit-font-feature-settings: 'palt';
	font-feature-settings: 'palt';
}

.mod-button.disable,
.card-button input.disable {
	box-shadow: none;
	opacity: 0.4;
	color: #ccc;
	pointer-events: none;
}

@media print, screen and (max-width: 767px) {
	.mod-button,
	.card-button input {
		padding: 10px;
	}
}

.mod-button small,
.card-button input small {
	font-weight: normal;
}

.mod-button:hover,
.card-button input:hover {
	background-color: #5e5e73;
	color: #d9d9d9;
}

.mod-button:visited,
.card-button input:visited {
	color: #fff;
}

.button-submit {
	width: 100%;
	padding: 10px;
	font-size: 1.4rem;
}

.button-blue,
.card-button-blue input {
	background-color: #2658ce;
}

.button-blue:hover,
.card-button-blue input:hover {
	background-color: #1a3c8d;
}

.button-white {
	background-color: #fff;
	color: #383737;
}

.button-white:hover {
	background-color: #d9d9d9;
	color: #111;
}

.button-white:visited {
	color: #383737;
}

.button-red {
	background-color: #b40000;
}

.button-red:hover {
	background-color: #680000;
}

.button-black,
.card-button-black input {
	background-color: #4a4a4a;
}

.button-black:hover,
.card-button-black input:hover {
	background-color: #242424;
}

.button-black:link,
.button-black:visited,
.card-button-black input:link,
.card-button-black input:visited {
	color: #ebebf3;
}

.button-black:active,
.card-button-black input:active {
	color: #fafafa !important;
}

.button-job {
	background-color: #8bc34a;
}

.button-job i:after {
	color: #fff;
}

.button-job:hover {
	background-color: #649130;
}

.button-career {
	background-color: #fe590f;
}

.button-career i:after {
	color: #fff;
}

.button-career:hover {
	background-color: #c03c01;
}

.button-healthcare {
	background-color: #e63160;
}

.button-healthcare:hover {
	background-color: #242424;
}

.button-yellow {
	background-color: #ffe01b;
	color: #4a4a4a;
}

.button-yellow:hover {
	background-color: #f1d000;
}

.button-yellow:visited,
.button-yellow:link {
	color: #4a4a4a;
}

.button-link {
	background-color: #2196f3;
}

.button-link i:after {
	color: #fff;
}

.button-link:hover {
	background-color: #0a6ebd;
}

.button-nonactive {
	background-color: #cacad9;
	color: #84849a;
}

.button-nonactive i:after {
	color: #fff;
}

.button-nonactive:hover {
	background-color: #9d9db9;
}

.button-nonhover {
	background-color: #e9e9e9;
	box-shadow: none;
	color: #9e9e9e;
}

.button-nonhover i:after {
	color: #fff;
}

.button-nonhover:hover {
	background-color: #e9e9e9;
	color: #9e9e9e;
}

.button-green {
	background-color: #178b2a;
	color: #fff;
}

.button-green:hover {
	background-color: #0c4916;
	color: #fff;
}

.button-aqua {
	background-color: #1aa4b6;
	color: #fff;
}

.button-aqua:hover {
	background-color: #106873;
	color: #fff;
}

.mod-button-selected {
	display: block;
	padding: 15px;
	border: #84849a 1px solid;
	border-radius: 5px;
	background-color: #fff;
	color: #84849a;
	line-height: 1.4rem;
	text-align: center;
	-webkit-font-feature-settings: 'palt';
	font-feature-settings: 'palt';
}

.mod-button-pointer {
	cursor: pointer;
}

.mod-button-pointer-event-none {
	pointer-events: none;
}

/*
#styleguide
ボーダーボタン


```
<a href="#" class="mod-button button-border">Standard</a>
<a href="#" class="mod-button button-border button-border-blue">Standard</a>
<a href="#" class="mod-button button-border button-border-red">Standard</a>
```

*/
.button-border {
	border: #84849a 1px solid;
	background-color: #fff;
	box-shadow: none;
	color: #84849a;
}

.button-border i:before {
	color: #84849a;
}

.button-border:visited {
	color: #4a4a4a;
}

.button-border:hover,
.button-border:active,
.button-border:focus {
	background-color: #84849a;
	color: #d9d9d9;
}

.button-border.button-border-blue {
	border-color: #2658ce;
	background-color: #fff;
	color: #2658ce;
}

.button-border.button-border-blue i:before {
	color: #2658ce;
}

.button-border.button-border-blue:link {
	background-color: #fff;
	color: #2658ce;
}

.button-border.button-border-blue:hover {
	background-color: #2658ce;
	color: #fff;
}

.button-border.button-border-blue:active {
	background-color: #1a3c8d;
	color: #fff;
}

.button-border.button-border-blue:focus {
	border-color: #1a3c8d;
}

.button-border.button-border-red {
	border-color: #b40000;
	background-color: #fff;
	color: #b40000;
}

.button-border.button-border-red i:before {
	color: #b40000;
}

.button-border.button-border-red:link {
	background-color: #fff;
	color: #b40000;
}

.button-border.button-border-red:hover {
	background-color: #b40000;
	color: #fff;
}

.button-border.button-border-red:active {
	background-color: #680000;
	color: #fff;
}

.button-border.button-border-red:focus {
	border-color: #680000;
}

.button-border.button-border-white {
	border-color: white;
	background-color: transparent;
	color: white;
}

.button-border.button-border-white i:before {
	color: white;
}

.button-border.button-border-white:link {
	background-color: transparent;
	color: white;
}

.button-border.button-border-white:hover {
	background-color: white;
	color: #2196f3;
}

.button-border.button-border-white:active {
	background-color: #680000;
	color: #2196f3;
}

.button-border.button-border-white:focus {
	border-color: #680000;
}

/*
#styleguide
横幅いっぱいのボタン


```
<a href="#" class="mod-button button-icon button-long">Standard<i class="icon-close"></i></a>
```

*/
.button-long {
	width: 100%;
}

/*
#styleguide
ちょっと広いボタン


```
<a href="#" class="mod-button button-icon button-wide">Standard<i class="icon-close"></i></a>
```

*/
@media print, screen and (min-width: 768px) {
	.button-wide {
		width: 50rem;
	}
}

@media print, screen and (max-width: 767px) {
	.button-wide {
		width: 100%;
	}
}

/*
#styleguide
ちょうどいい長さのボタン


```
<a href="#" class="mod-button button-icon button-middle">Standard<i class="icon-close"></i></a>
```

*/
@media print, screen and (min-width: 768px) {
	.button-middle,
	.card-button input {
		width: 30rem;
	}
}

@media print, screen and (max-width: 767px) {
	.button-middle,
	.card-button input {
		width: 100%;
	}
}

/*
#styleguide
ちょっと短いボタン


```
<a href="#" class="mod-button button-icon button-short">Standard<i class="icon-close"></i></a>
```

*/
.button-short {
	width: 24rem;
}

/*
#styleguide
アイコン付きボタン


```
<a href="#" class="mod-button button-icon">Standard<i class="icon-close"></i></a>
<a href="#" class="mod-button button-blue button-icon button-icon-left">Standard<i class="icon-arrow_left"></i></a>
```

*/
.button-icon {
	padding-right: 35px;
	padding-left: 35px;
}

.button-icon i {
	display: flex;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	justify-content: center;
	align-items: center;
	height: 100%;
	margin: auto 15px auto auto;
}

.button-icon.is-both-icon i:first-child {
	right: auto;
	left: 0.5em;
}

.button-icon:hover i:before {
	color: #d9d9d9;
}

.button-icon.button-white i:before {
	color: #383737;
}

.button-icon-left {
	padding-right: 15px;
	padding-left: 45px;
}

.button-icon-left i {
	right: auto;
	left: 0;
	margin-right: 0;
	margin-left: 15px;
}

/*
#styleguide
ミニボタン


```
<a href="#" class="mod-button button-mini">Standard</a>
<a href="#" class="mod-button button-mini button-icon">Standard<i class="icon-arrow_right"></i></a>
<a href="#" class="mod-button button-mini button-icon button-blue button-icon-left">Standard<i class="icon-close"></i></a>
```

*/
.button-mini {
	padding: 10px;
	font-size: 1.2rem;
}

.button-mini.button-icon {
	padding-right: 35px;
}

.button-mini.button-icon i {
	margin-right: 10px;
}

.button-mini.button-icon-left {
	padding-right: 10px;
	padding-left: 35px;
}

.button-mini.button-icon-left i {
	right: auto;
	left: 0;
	margin-right: 0;
	margin-left: 10px;
}

@media print, screen and (max-width: 767px) {
	.button-mini.sp-mini {
		width: 120px;
		margin-left: auto;
	}
}

.button-slim {
	padding: 10px;
	font-size: 1.4rem;
}

.button-slim.button-icon i {
	margin-right: 10px;
}

.button-slim.button-icon-left {
	padding-right: 10px;
	padding-left: 35px;
}

.button-slim.button-icon-left i {
	right: auto;
	left: 0;
	margin-right: 0;
	margin-left: 10px;
}

.button-ss {
	padding: 5px;
	font-size: 1.2rem;
}

.button-ss.button-icon {
	padding-right: 15px;
}

.button-ss.button-icon i {
	margin-right: 5px;
}

.button-ss.button-icon-left {
	padding-right: 5px;
	padding-left: 0;
}

.button-ss.button-icon-left i {
	right: auto;
	left: 0;
	margin-right: 0;
	margin-left: 5px;
}

/*
#styleguide
ラージボタン


```
<a href="#" class="mod-button button-large">Standard</a>
<a href="#" class="mod-button button-large button-icon">Standard<i class="icon-arrow_right"></i></a>
<a href="#" class="mod-button button-large button-icon button-blue button-icon-left">Standard<i class="icon-close"></i></a>
```

*/
.button-large {
	padding: 20px 15px;
	font-size: 1.8rem;
}

.button-large.button-icon {
	padding-right: 35px;
}

.button-large.button-icon i {
	margin-right: 10px;
}

.button-large.button-icon-left {
	padding-right: 10px;
	padding-left: 35px;
}

.button-large.button-icon-left i {
	right: auto;
	left: 0;
	margin-right: 0;
	margin-left: 10px;
}

/*
#styleguide
チェックボックス付きボタン


```
<div class="button-checkbox">
	<input type="checkbox" name="checkbox" value="" id="checkbox1">
	<label class="icon-check" for="checkbox1">ご飯派</label>
</div>
```

*/
.button-checkbox.is-wide label {
	width: 100%;
}

.button-checkbox input {
	display: none;
}

.button-checkbox input:checked + label {
	font-weight: bold;
}

.button-checkbox input:checked + label:after {
	border: none;
	background-color: #2658ce !important;
}

.button-checkbox input:checked + label:before {
	display: inline-block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 10px;
	width: 18px;
	height: 18px;
	margin: auto;
	font-size: 1.6rem;
	line-height: 1.2;
	text-align: center;
}

.button-checkbox label {
	display: block;
	position: relative;
	padding: 10px 35px 10px 35px;
	border: 1px solid #cacad9;
	border-radius: 5px;
	background-color: #ebebf3;
	line-height: 1.4;
}

.button-checkbox label:after {
	content: '';
	display: block;
	position: absolute;
	z-index: 1;
	top: 0;
	bottom: 0;
	left: 10px;
	width: 18px;
	height: 18px;
	margin: auto;
	border-radius: 3px;
	background-color: #fafafa;
}

.button-checkbox label:before {
	display: none;
	z-index: 2;
}

.button-checkbox.single {
	display: inline-block;
	vertical-align: text-top;
}

.button-checkbox.single label {
	height: 1em;
}

.button-checkbox-inline label {
	display: inline-block;
}

/*
#styleguide
Button Group(SP時も横並び)
```
<div class="mod-c">
<div class="mod-group-button">
<a href="#" class="mod-button button-black button-icon button-icon-left">戻る<i class="icon-arrow_left"></i></a>
<button tyle="submit" class="mod-button button-blue button-icon">確認する<i class="icon-arrow_right"></i></button>
</div><!-- /.mod-group-btn -->
</div>

```

*/
@media print, screen and (min-width: 768px) {
	.mod-group-button,
	.mod-group-button2 {
		display: inline-flex;
		align-items: center;
		box-sizing: border-box;
	}

	.mod-group-button .mod-button,
	.mod-group-button .card-button input,
	.mod-group-button2 .mod-button,
	.mod-group-button2 .card-button input {
		min-width: 300px;
		margin-right: 30px;
	}

	.mod-group-button .mod-button:last-child,
	.mod-group-button .card-button input:last-child,
	.mod-group-button2 .mod-button:last-child,
	.mod-group-button2 .card-button input:last-child {
		margin-right: 0;
	}
}

@media print, screen and (max-width: 767px) {
	.mod-group-button {
		display: flex;
		width: 100%;
	}

	.mod-group-button .mod-button {
		width: 100%;
		margin: 0 5px;
	}

	.mod-group-button2 .mod-button-1st {
		order: 1;
	}

	.mod-group-button2 .mod-button-2nd {
		order: 2;
	}
}

/*
#styleguide
Button Group(SP時はカラム落ち)
```
<div class="mod-c">
<div class="mod-group-button2">
<a href="#" class="mod-button button-black button-icon button-icon-left">戻る<i class="icon-arrow_left"></i></a>
<button tyle="submit" class="mod-button button-blue button-icon">確認する<i class="icon-arrow_right"></i></button>
</div><!-- /.mod-group-btn -->
</div>

```

*/
@media print, screen and (max-width: 767px) {
	.mod-group-button2 {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.mod-group-button2 .mod-button {
		width: 100%;
		margin-bottom: 15px;
	}
}

/*
#styleguide
ステータス切り替えボタン
```
<div class="mod-status">
<input type="checkbox" id="switch-demo" checked />
<label for="switch-demo" data-on-label="掲載中" data-off-label="停止中"></label>
</div>

<div class="mod-status">
<input type="checkbox" id="switch-demo2" />
<label for="switch-demo2" data-on-label="掲載中" data-off-label="停止中"></label>
</div>


<div class="mod-status status-draft">
<span>下書き</span>
</div>

```

*/
.mod-status {
	display: inline-block;
}

.mod-status input {
	display: none;
}

.mod-status label,
.mod-status label:after,
.mod-status label:before {
	transition: all 0.2s;
}

.mod-status label {
	cursor: pointer;
	display: inline-block;
	position: relative;
	width: 76px;
	height: 26px;
	border-radius: 13px;
	background-color: #cacad9;
}

.mod-status label:before {
	content: attr(data-off-label);
	display: block;
	position: absolute;
	top: 0;
	right: 10px;
	color: #fff;
	font-size: 1.2rem;
	font-weight: bold;
	line-height: 26px;
}

.mod-status label:after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 3px;
	width: 20px;
	height: 20px;
	margin: auto;
	border-radius: 50%;
	background-color: #fff;
}

.mod-status input:checked + label:before {
	content: attr(data-on-label);
	right: auto;
	left: 10px;
	color: #fff;
}

.mod-status input:checked + label::after {
	left: 53px;
}

.mod-status input:checked + label {
	background-color: #2658ce;
}

.status-draft {
	width: 76px;
	height: 26px;
	border: 2px solid #4a4a4a;
	border-radius: 13px;
	color: #383737;
	text-align: center;
}

.status-draft-link:hover {
	opacity: 0.8;
	color: #383737;
}

.status-draft-link:visited {
	color: #383737;
}

.status-draft span {
	display: inline-block;
	font-size: 1.2rem;
	line-height: 20px;
}

.status-reserve {
	height: 26px;
	padding: 0 13px;
	border: 2px solid #4a4a4a;
	border-radius: 13px;
	text-align: center;
}

.status-reserve span {
	display: inline-block;
	font-size: 1.2rem;
	line-height: 20px;
}

/*
#styleguide
トグルボタン
```

<span class="mod-toggle">
  <input id="toggle" class="toggle-input" type='checkbox'>
  <label for="toggle" class="toggle-label">トグルを切り替える</label>
</span>

```

*/
.mod-toggle .toggle-input {
	display: none;
}

.mod-toggle .toggle-input:checked + .toggle-label {
	color: #2658ce;
}

.mod-toggle .toggle-input:checked + .toggle-label:after {
	background: #2658ce;
}

.mod-toggle .toggle-input:checked + .toggle-label:before {
	right: -1px;
}

.mod-toggle .toggle-label {
	display: inline-block;
	position: relative;
	margin-right: 10px;
	padding-right: 40px;
	color: #84849a;
	line-height: 1.4;
	transition: ease-in-out 0.3s;
}

.mod-toggle .toggle-label:hover {
	cursor: pointer;
}

.mod-toggle .toggle-label:after {
	content: '';
	display: inline-block;
	position: absolute;
	z-index: 1;
	top: calc( 50% - 7px);
	right: 0;
	box-sizing: border-box;
	width: 35px;
	height: 14px;
	border-radius: 12px;
	background: #cacad9;
	transition: 0.3s;
}

.mod-toggle .toggle-label:before {
	content: '';
	position: absolute;
	z-index: 2;
	top: calc( 50% - 9px);
	right: 18px;
	width: 18px;
	height: 18px;
	border-radius: 100%;
	background: #fff;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
	transition: 0.3s;
}

.mod-toggle.is-single {
	display: inline-block;
	vertical-align: text-top;
}

.mod-toggle.is-single .toggle-label {
	height: 1em;
}

/*
#styleguide
テキストリンク
```
<a href="#" class="mod-link">くわしくはこちら<i class="icon-arrow_right"></i></a>
<a href="#" class="mod-link mod-link-big mod-txt18">くわしくはこちら<i class="icon-arrow_right"></i></a>

<a href="#" class="mod-link link-iconleft"><i class="icon-work"></i>くわしくはこちら</a>
```
*/
.mod-link {
	text-decoration: none;
}

.mod-link i {
	padding-left: 5px;
}

.mod-link :before {
	color: #2658ce !important;
}

.mod-link.link-ghost {
	color: #84849a;
}

.mod-link.link-ghost:hover {
	color: #cacad9;
}

.mod-link.link-iconleft i {
	padding-right: 5px;
	padding-left: 0;
}

.mod-link.mod-link-big i {
	font-size: 1.4em;
	line-height: 1;
	vertical-align: sub;
}

/*
#styleguide
リストがアイコンになってるリンク
```
<a href="#" class="mod-listlink icon-arrow_right">折り返しても大丈夫！折り返しても大丈夫！折り返しても大丈夫！折り返しても大丈夫！折り返しても大丈夫！折り返しても大丈夫！</a>


```
*/
.mod-listlink {
	display: block;
	position: relative;
	margin-left: 20px;
	line-height: 1.5;
}

.mod-listlink:before {
	display: block;
	position: absolute;
	top: 0;
	left: -1.2em;
	width: 1em;
	color: #2658ce;
}

.button-verticallycenter {
	display: flex;
	align-items: center;
	height: 100%;
}

@media print, screen and (max-width: 767px) {
	.mod-banner-link {
		display: inline-block;
		padding-top: 10px;
	}

	.mod-banner-link img {
		width: 100%;
		height: auto;
	}
}

.js-hidden {
	display: none !important;
}

/* variables color */
/*
#colors

@Service #2658CE
@Job #37B500
@Career #FE590F
@tone1 #F4F4F9
@tone2 #EBEBF3
@tone3 #CACAD9
@tone4 #84849A
@tone5 #4A4A4A
*/
/* variables-color */
:root {
	/* color color palette */
	/* Gray */
	--Gray-100: #f6f3f0;
	--Gray-200: #e4e0de;
	--Gray-300: #cbc8c6;
	--Gray-400: #b2afac;
	--Gray-500: #969391;
	--Gray-600: #716e6b;
	--Gray-700: #605d5b;
	--Gray-800: #4e4b49;
	--Gray-900: #2d2b29;
	--Gray-1000: #171413;
	/* Pink */
	--Pink-100: #fef1f5;
	--Pink-200: #fbd8e2;
	--Pink-300: #f7b5c8;
	--Pink-400: #f189aa;
	--Pink-500: #e9588e;
	--Pink-600: #cb006b;
	--Pink-700: #ac0058;
	--Pink-800: #8b0647;
	--Pink-900: #57002a;
	--Pink-1000: #280010;
	/* Red */
	--Red-100: #fff1f1;
	--Red-200: #ffd8d7;
	--Red-300: #fdb4b4;
	--Red-400: #fb888b;
	--Red-500: #f5505f;
	--Red-600: #d40038;
	--Red-700: #ac1731;
	--Red-800: #920625;
	--Red-900: #5c0415;
	--Red-1000: #2f0107;
	/* Orange */
	--Orange-100: #fef2ed;
	--Orange-200: #ffdacd;
	--Orange-300: #ffb59c;
	--Orange-400: #f88d68;
	--Orange-500: #f25915;
	--Orange-600: #c04101;
	--Orange-700: #934225;
	--Orange-800: #79371f;
	--Orange-900: #4f1f0d;
	--Orange-1000: #260c04;
	/* Lime */
	--Lime-100: #f2f9e2;
	--Lime-200: #dfebbf;
	--Lime-300: #c1d293;
	--Lime-400: #a2bb4b;
	--Lime-500: #869f16;
	--Lime-600: #687c0b;
	--Lime-700: #566606;
	--Lime-800: #465408;
	--Lime-900: #2c3505;
	--Lime-1000: #121700;
	/* Green */
	--Green-100: #ecfaec;
	--Green-200: #cdf0cc;
	--Green-300: #a8daa8;
	--Green-400: #66c56c;
	--Green-500: #28af3d;
	--Green-600: #2b8735;
	--Green-700: #276d2e;
	--Green-800: #1b5a22;
	--Green-900: #0f3a14;
	--Green-1000: #021b04;
	/* Aqua */
	--Aqua-100: #e3fafe;
	--Aqua-200: #b7f0fa;
	--Aqua-300: #7edae9;
	--Aqua-400: #12c0d6;
	--Aqua-500: #1aa4b6;
	--Aqua-600: #2b7e8a;
	--Aqua-700: #176774;
	--Aqua-800: #0f5760;
	--Aqua-900: #05373f;
	--Aqua-1000: #00191d;
	/* Blue */
	--Blue-100: #f2f5fc;
	--Blue-200: #dae3f7;
	--Blue-300: #b0c7f9;
	--Blue-400: #8aaaf6;
	--Blue-500: #648cf4;
	--Blue-600: #3a63e0;
	--Blue-700: #2045da;
	--Blue-800: #142ec5;
	--Blue-900: #08118c;
	--Blue-1000: #020448;
	/* Violet */
	--Violet-100: #f4f5fa;
	--Violet-200: #dfe1f6;
	--Violet-300: #bec2f8;
	--Violet-400: #9fa3f4;
	--Violet-500: #8382f3;
	--Violet-600: #6258dd;
	--Violet-700: #5336d8;
	--Violet-800: #451dc3;
	--Violet-900: #290083;
	--Violet-1000: #104;
	/* Purple */
	--Purple-100: #f9f3f9;
	--Purple-200: #eedced;
	--Purple-300: #e2b7e1;
	--Purple-400: #d392d2;
	--Purple-500: #c46bc4;
	--Purple-600: #a247a2;
	--Purple-700: #950c98;
	--Purple-800: #7d0c7f;
	--Purple-900: #4f0050;
	--Purple-1000: #260027;
	/* Yellow */
	--Yellow-100: #fffaec;
	--Yellow-200: #feeec1;
	--Yellow-300: #fee195;
	--Yellow-400: #f7ce5a;
	--Yellow-500: #f4c200;
	--Yellow-600: #d4a800;
	--Yellow-700: #b18c00;
	--Yellow-800: #896c00;
	--Yellow-900: #5f4a00;
	--Yellow-1000: #1f1600;
}

/*
#styleguide
汎用
```
<span class="mod-label">ラベル</span>
<span class="mod-label"><i>最終更新日</i>2017.08.09 13:20:08</span>
```
*/
.mod-label {
	display: inline-block;
	padding: 3px 5px;
	border-radius: 5px;
	background-color: #f4f4f9;
	font-size: 1.2rem;
	vertical-align: text-bottom;
}

.mod-label.is-slim {
	padding: 2px 3px;
	font-size: 1.1rem;
	line-height: 1;
}

.mod-label-slim {
	display: inline-block;
	padding: 0 4px;
	border-radius: 2px;
	background-color: #f6f3f0;
	font-size: 1.2rem;
	line-height: 1.6;
	text-align: center;
}

.mod-label i {
	display: inline-block;
	margin-right: 5px;
	font-weight: bold;
	font-style: normal;
}

/*
#styleguide
優先表示プランから追加されたサイズ 2025/09/26
```
<span class="mod-label-slim mod-label-middle">求人停止中</span>

```
*/
.mod-label-middle {
	width: 100%;
	max-width: 80px;
}

/*
#styleguide
SP時、モーダル外に選択項目を表示する場合に
```
<span class="mod-label">ラベル</span>

```
*/
.label-check {
	outline: none;
	margin: 0 5px 5px 0;
	padding: 5px;
	border: 1px solid #cacad9;
	background-color: #ebebf3;
	font-size: 1.3rem;
}

/*
#styleguide
中途
```
<span class="mod-label label-carrier">中途</span>
```
*/
.label-carrier {
	background-color: #fe590f;
	color: #fff;
}

/*
#styleguide
新卒
```
<span class="mod-label label-job">新卒</span>
```
*/
.label-job {
	background-color: #8bc34a;
	color: #fff;
}

/*
#styleguide
黒いラベル
```
<span class="mod-label label-black">掲載停止中</span>
```
*/
.label-black {
	background-color: #4e4b49;
	color: #fff;
}

/*
#styleguide
必須
```
<span class="mod-label label-coution">必須</span>
<span class="mod-label label-coution2">いずれか必須</span>
```
*/
.label-coution {
	background-color: #b40000;
	color: #fff;
}

/*
#styleguide
ヘルスケア
```
<span class="mod-label label-healthcare">ヘルスケア♥</span>
```
*/
.label-healthcare {
	background-color: #e63160;
	color: #fff;
}

/*
#styleguide
サービス
```
<span class="mod-label label-service">10,000円＝10,000ポイント</span>
```
*/
.label-service {
	background-color: #2658ce;
	color: #fff;
}

.label-coution2 {
	background-color: #2658ce;
	color: #fff;
	text-align: center;
}

.label-link {
	background-color: #2196f3;
	color: #fff;
}

/*
#styleguide
人材紹介
```
<span class="mod-label label-agent">人材紹介</span>
```
*/
.label-agent {
	background-color: #c36;
	color: #fff;
}

/*
#styleguide
成功報酬、採用課金
```
<span class="mod-label label-bonus">成功報酬</span>
<span class="mod-label label-completion-bonus">採用課金</span>
```
*/
.label-bonus,
.label-completion-bonus {
	background-color: #969;
	color: #fff;
}

.label-completion-bonus-new {
	background-color: #c36;
	color: #fff;
}

/*
#styleguide
新卒代行、中途代行
```
<span class="mod-label label-rpo-carrier">中途 代行</span>
<span class="mod-label label-rpo-job">新卒 代行</span>
```
*/
.label-rpo-job,
.label-rpo-carrier {
	background-color: #808080;
	color: #fff;
}

/*
#styleguide
成功
```
<span class="mod-label label-success">承認済み</span>
```
*/
.label-success {
	background-color: #0fd848;
	color: #fff;
}

/*
#styleguide
要審査
```
<span class="mod-label label-rpo-carrier">要審査</span>

```
*/
.label-examination {
	background-color: #fff0f0;
	color: #b40000;
}

/*
#styleguide
スポット
```
<span class="mod-label label-spot">スポット</span>

```
*/
.label-spot {
	background-color: #7472e1;
	color: #fff;
}

/*
#styleguide
新規登録者
```
<span class="mod-label label-tiger">1日前に新規登録</span>

```
*/
.label-tiger {
	background-color: #f4c200;
	color: #020448 !important;
}

/*
#styleguide
NEW 
```
<span class="mod-label label-border-red">NEW</span>

```
*/
.label-border-red {
	outline: 1px solid #f5505f;
	padding: 3px 5px 2px;
	background-color: #fff;
	color: #f5505f !important;
}

/*
#styleguide
スペシャルスカウトラベル
```
<span class="mod-label label-ss">スペシャルスカウト</span>

```
*/
.label-ss {
	background-color: #5c0415;
	color: #fff;
}

/*
#styleguide
優先表示プランから追加されたカラー 2025/09/26
label-blackは既出
```
<span class="mod-label-slim label-red">求人停止中</span>
<span class="mod-label-slim label-blue">利用中</span>
<span class="mod-label-slim label-green">予約完了</span>
<span class="mod-label-slim label-gray">終了</span>
<span class="mod-label-slim label-black">キャンセル</span>

```
*/
.label-red {
	background-color: #ac1731;
	color: #fff;
}

.label-blue {
	background-color: #3a63e0;
	color: #fff;
}

.label-green {
	background-color: #2b8735;
	color: #fff;
}

.label-gray {
	background-color: #e4e0de;
	color: #4e4b49;
}

.label-align-center .mod-label {
	display: inline-block;
	position: relative;
	top: 0.4em;
}

/* variables color */
/*
#colors

@Service #2658CE
@Job #37B500
@Career #FE590F
@tone1 #F4F4F9
@tone2 #EBEBF3
@tone3 #CACAD9
@tone4 #84849A
@tone5 #4A4A4A
*/
/* variables-color */
:root {
	/* color color palette */
	/* Gray */
	--Gray-100: #f6f3f0;
	--Gray-200: #e4e0de;
	--Gray-300: #cbc8c6;
	--Gray-400: #b2afac;
	--Gray-500: #969391;
	--Gray-600: #716e6b;
	--Gray-700: #605d5b;
	--Gray-800: #4e4b49;
	--Gray-900: #2d2b29;
	--Gray-1000: #171413;
	/* Pink */
	--Pink-100: #fef1f5;
	--Pink-200: #fbd8e2;
	--Pink-300: #f7b5c8;
	--Pink-400: #f189aa;
	--Pink-500: #e9588e;
	--Pink-600: #cb006b;
	--Pink-700: #ac0058;
	--Pink-800: #8b0647;
	--Pink-900: #57002a;
	--Pink-1000: #280010;
	/* Red */
	--Red-100: #fff1f1;
	--Red-200: #ffd8d7;
	--Red-300: #fdb4b4;
	--Red-400: #fb888b;
	--Red-500: #f5505f;
	--Red-600: #d40038;
	--Red-700: #ac1731;
	--Red-800: #920625;
	--Red-900: #5c0415;
	--Red-1000: #2f0107;
	/* Orange */
	--Orange-100: #fef2ed;
	--Orange-200: #ffdacd;
	--Orange-300: #ffb59c;
	--Orange-400: #f88d68;
	--Orange-500: #f25915;
	--Orange-600: #c04101;
	--Orange-700: #934225;
	--Orange-800: #79371f;
	--Orange-900: #4f1f0d;
	--Orange-1000: #260c04;
	/* Lime */
	--Lime-100: #f2f9e2;
	--Lime-200: #dfebbf;
	--Lime-300: #c1d293;
	--Lime-400: #a2bb4b;
	--Lime-500: #869f16;
	--Lime-600: #687c0b;
	--Lime-700: #566606;
	--Lime-800: #465408;
	--Lime-900: #2c3505;
	--Lime-1000: #121700;
	/* Green */
	--Green-100: #ecfaec;
	--Green-200: #cdf0cc;
	--Green-300: #a8daa8;
	--Green-400: #66c56c;
	--Green-500: #28af3d;
	--Green-600: #2b8735;
	--Green-700: #276d2e;
	--Green-800: #1b5a22;
	--Green-900: #0f3a14;
	--Green-1000: #021b04;
	/* Aqua */
	--Aqua-100: #e3fafe;
	--Aqua-200: #b7f0fa;
	--Aqua-300: #7edae9;
	--Aqua-400: #12c0d6;
	--Aqua-500: #1aa4b6;
	--Aqua-600: #2b7e8a;
	--Aqua-700: #176774;
	--Aqua-800: #0f5760;
	--Aqua-900: #05373f;
	--Aqua-1000: #00191d;
	/* Blue */
	--Blue-100: #f2f5fc;
	--Blue-200: #dae3f7;
	--Blue-300: #b0c7f9;
	--Blue-400: #8aaaf6;
	--Blue-500: #648cf4;
	--Blue-600: #3a63e0;
	--Blue-700: #2045da;
	--Blue-800: #142ec5;
	--Blue-900: #08118c;
	--Blue-1000: #020448;
	/* Violet */
	--Violet-100: #f4f5fa;
	--Violet-200: #dfe1f6;
	--Violet-300: #bec2f8;
	--Violet-400: #9fa3f4;
	--Violet-500: #8382f3;
	--Violet-600: #6258dd;
	--Violet-700: #5336d8;
	--Violet-800: #451dc3;
	--Violet-900: #290083;
	--Violet-1000: #104;
	/* Purple */
	--Purple-100: #f9f3f9;
	--Purple-200: #eedced;
	--Purple-300: #e2b7e1;
	--Purple-400: #d392d2;
	--Purple-500: #c46bc4;
	--Purple-600: #a247a2;
	--Purple-700: #950c98;
	--Purple-800: #7d0c7f;
	--Purple-900: #4f0050;
	--Purple-1000: #260027;
	/* Yellow */
	--Yellow-100: #fffaec;
	--Yellow-200: #feeec1;
	--Yellow-300: #fee195;
	--Yellow-400: #f7ce5a;
	--Yellow-500: #f4c200;
	--Yellow-600: #d4a800;
	--Yellow-700: #b18c00;
	--Yellow-800: #896c00;
	--Yellow-900: #5f4a00;
	--Yellow-1000: #1f1600;
}

/*
#styleguide
リスト


```
<a href="#" class="link">リンクテキスト</a>
<a href="#" class="link link-dark">リンクテキスト</a>
<a href="#" class="link is-underline">リンクテキスト</a>
<a href="#" class="link link-dark is-underline">リンクテキスト</a>


```
*/
/* -----------------------------------------------------
 * Link
 * -------------------------------------------------- */
a.link {
	color: #2196f3;
}

a.link:hover {
	color: #0c7cd5;
}

a.link-dark {
	color: #383737;
}

.link-background-none {
	background: none;
}

/* variables color */
/*
#colors

@Service #2658CE
@Job #37B500
@Career #FE590F
@tone1 #F4F4F9
@tone2 #EBEBF3
@tone3 #CACAD9
@tone4 #84849A
@tone5 #4A4A4A
*/
/* variables-color */
:root {
	/* color color palette */
	/* Gray */
	--Gray-100: #f6f3f0;
	--Gray-200: #e4e0de;
	--Gray-300: #cbc8c6;
	--Gray-400: #b2afac;
	--Gray-500: #969391;
	--Gray-600: #716e6b;
	--Gray-700: #605d5b;
	--Gray-800: #4e4b49;
	--Gray-900: #2d2b29;
	--Gray-1000: #171413;
	/* Pink */
	--Pink-100: #fef1f5;
	--Pink-200: #fbd8e2;
	--Pink-300: #f7b5c8;
	--Pink-400: #f189aa;
	--Pink-500: #e9588e;
	--Pink-600: #cb006b;
	--Pink-700: #ac0058;
	--Pink-800: #8b0647;
	--Pink-900: #57002a;
	--Pink-1000: #280010;
	/* Red */
	--Red-100: #fff1f1;
	--Red-200: #ffd8d7;
	--Red-300: #fdb4b4;
	--Red-400: #fb888b;
	--Red-500: #f5505f;
	--Red-600: #d40038;
	--Red-700: #ac1731;
	--Red-800: #920625;
	--Red-900: #5c0415;
	--Red-1000: #2f0107;
	/* Orange */
	--Orange-100: #fef2ed;
	--Orange-200: #ffdacd;
	--Orange-300: #ffb59c;
	--Orange-400: #f88d68;
	--Orange-500: #f25915;
	--Orange-600: #c04101;
	--Orange-700: #934225;
	--Orange-800: #79371f;
	--Orange-900: #4f1f0d;
	--Orange-1000: #260c04;
	/* Lime */
	--Lime-100: #f2f9e2;
	--Lime-200: #dfebbf;
	--Lime-300: #c1d293;
	--Lime-400: #a2bb4b;
	--Lime-500: #869f16;
	--Lime-600: #687c0b;
	--Lime-700: #566606;
	--Lime-800: #465408;
	--Lime-900: #2c3505;
	--Lime-1000: #121700;
	/* Green */
	--Green-100: #ecfaec;
	--Green-200: #cdf0cc;
	--Green-300: #a8daa8;
	--Green-400: #66c56c;
	--Green-500: #28af3d;
	--Green-600: #2b8735;
	--Green-700: #276d2e;
	--Green-800: #1b5a22;
	--Green-900: #0f3a14;
	--Green-1000: #021b04;
	/* Aqua */
	--Aqua-100: #e3fafe;
	--Aqua-200: #b7f0fa;
	--Aqua-300: #7edae9;
	--Aqua-400: #12c0d6;
	--Aqua-500: #1aa4b6;
	--Aqua-600: #2b7e8a;
	--Aqua-700: #176774;
	--Aqua-800: #0f5760;
	--Aqua-900: #05373f;
	--Aqua-1000: #00191d;
	/* Blue */
	--Blue-100: #f2f5fc;
	--Blue-200: #dae3f7;
	--Blue-300: #b0c7f9;
	--Blue-400: #8aaaf6;
	--Blue-500: #648cf4;
	--Blue-600: #3a63e0;
	--Blue-700: #2045da;
	--Blue-800: #142ec5;
	--Blue-900: #08118c;
	--Blue-1000: #020448;
	/* Violet */
	--Violet-100: #f4f5fa;
	--Violet-200: #dfe1f6;
	--Violet-300: #bec2f8;
	--Violet-400: #9fa3f4;
	--Violet-500: #8382f3;
	--Violet-600: #6258dd;
	--Violet-700: #5336d8;
	--Violet-800: #451dc3;
	--Violet-900: #290083;
	--Violet-1000: #104;
	/* Purple */
	--Purple-100: #f9f3f9;
	--Purple-200: #eedced;
	--Purple-300: #e2b7e1;
	--Purple-400: #d392d2;
	--Purple-500: #c46bc4;
	--Purple-600: #a247a2;
	--Purple-700: #950c98;
	--Purple-800: #7d0c7f;
	--Purple-900: #4f0050;
	--Purple-1000: #260027;
	/* Yellow */
	--Yellow-100: #fffaec;
	--Yellow-200: #feeec1;
	--Yellow-300: #fee195;
	--Yellow-400: #f7ce5a;
	--Yellow-500: #f4c200;
	--Yellow-600: #d4a800;
	--Yellow-700: #b18c00;
	--Yellow-800: #896c00;
	--Yellow-900: #5f4a00;
	--Yellow-1000: #1f1600;
}

/*
#styleguide
Box into list
```
<div class="mod-box mod-joblist">
<div class="box-title joblist-item">
<h2>修正する求人を選択してください</h2>
<a href="#" class="mod-link">更新履歴はこちら<i class="icon-arrow_right"></i></a>
</div>


<ul>
<li class="job-contents joblist-item">

<button class="joblist-data">
<div class="joblist-datainner">

<div class="joblist-img">
<img src="/_styleguide/assets/images/dummyimg2.png" alt="木元医院"/>
</div>
<div class="joblist-text">
<h3>
管理栄養士<br>
<small>正社員（常勤）、パート・非常勤</small>
</h3>
<p>木元医院</p>
</div>
<div>
<span class="mod-label joblist-log"><i>最終更新日</i>2017.08.09 13:20:08</span>
</div>



</div>
</button>


<div class="joblist-status">
<div class="mod-status">
<input type="checkbox" id="switch-demo" checked />
<label for="switch-demo" data-on-label="掲載中" data-off-label="停止中"></label>
</div>

</div>
</li>
</ul>

</div>
```
*/
@media print, screen and (max-width: 767px) {
	.mod-box.mod-joblist {
		border-radius: 0;
		background-color: rgba(0, 0, 0, 0);
		box-shadow: none;
	}

	.widget-joblist .mod-box.mod-joblist {
		overflow: hidden;
		border-radius: 4px;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
	}

	.mod-box.mod-joblist .box-title.joblist-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.mod-box.mod-joblist .box-title.joblist-item .box-title-right-link {
		position: relative;
		right: 0;
		bottom: 0;
		margin: 0;
		padding: 0;
	}

	.joblist-header {
		display: none;
	}

	.joblist-item {
		border-bottom: 1px solid #cacad9;
		background-color: #fff;
	}

	.joblist-item:last-child {
		margin-bottom: 0;
	}

	.joblist-item.scout-limit {
		opacity: 0.6;
	}

	.joblist-item.button-nonactive {
		background-color: #cacad9;
	}

	.job-contents {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15px;
	}

	.job-contents.is-disflex {
		display: block;
	}

	.job-contents.movie .joblist-img a {
		position: relative;
	}

	.job-contents.movie .joblist-img a:before {
		content: '\ea1c';
		display: flex;
		position: absolute;
		z-index: 1;
		top: 0;
		right: 0;
		justify-content: center;
		align-items: center;
		width: 12px;
		height: 12px;
		background-color: rgba(250, 250, 250, 0.9);
		color: #2658ce;
		font-size: 0.6em;
		line-height: 0;
	}

	.joblist-data {
		flex: 1;
		min-width: 0;
		padding: 0;
		border: none;
		background-color: rgba(0, 0, 0, 0);
		text-align: left;
	}

	.joblist-data.js-pagejump {
		cursor: pointer;
	}

	.cassette-joblist-box {
		display: none;
	}

	.joblist-datainner {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		row-gap: 10px;
	}

	.joblist-datainner .joblist-img {
		flex: none;
		width: 58px;
		margin-right: 10px;
		line-height: 1;
	}

	.joblist-datainner .joblist-img .joblist-img-inner a {
		display: block;
		position: relative;
	}

	.joblist-datainner .joblist-img .joblist-img-inner img {
		width: 100%;
		height: auto;
		vertical-align: bottom;
	}

	.joblist-datainner .joblist-img .joblist-img-inner:empty {
		position: relative;
		height: 45px;
		background-color: #cacad9;
	}

	.joblist-datainner .joblist-img .joblist-img-inner:empty:before {
		content: '\e90b';
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 1em;
		height: 1em;
		margin: auto;
		color: #fff;
		font-size: 2rem;
	}

	.joblist-datainner .joblist-publish-status {
		display: flex;
		flex: none;
		justify-content: center;
		align-items: center;
		width: 76px;
		margin-right: 10px;
		padding: 0 2px;
		border-radius: 2px;
		font-size: 1.2rem;
	}

	.joblist-datainner .joblist-publish-status.joblist-publish-status-published {
		background-color: #2658ce;
		color: #fff;
	}

	.joblist-datainner .joblist-publish-status.joblist-publish-status-stopped {
		background-color: #b2afac;
		color: #fff;
	}

	.joblist-datainner .joblist-publish-status.joblist-publish-status-draft {
		border: 1px solid #383737;
		background-color: #fff;
		color: #383737;
	}

	.joblist-datainner .joblist-text {
		display: block;
		width: calc(100% - 73px);
		margin-right: 5px;
		color: #4a4a4a;
		transition: ease-in-out 0.3s;
	}

	.joblist-datainner .joblist-text h3.job-title {
		font-size: 1.4rem;
		font-weight: bold;
	}

	.joblist-datainner .joblist-text .name-number .job-workstyle {
		margin-right: 10px;
		color: #4a4a4a;
		font-size: 1.2rem;
		line-height: 1.6;
	}

	.joblist-datainner .joblist-text .name-number .job-salary {
		display: inline-block;
		margin-right: 10px;
		color: #4a4a4a;
		font-size: 1.2rem;
		line-height: 1.6;
	}

	.joblist-datainner .joblist-text .name-number .job-number {
		display: inline-block;
		color: #84849a;
		font-size: 1.1rem;
	}

	.joblist-datainner .joblist-text .name-number .mod-label.label-spot {
		padding: 1px 5px;
		vertical-align: bottom;
	}

	.joblist-datainner .joblist-text .job-catchcopy {
		display: block;
		overflow: hidden;
		width: 100%;
		margin-top: 4px;
		color: #4a4a4a;
		font-size: 1.2rem;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.joblist-datainner a.joblist-text:hover {
		color: #2658ce;
	}

	.joblist-datainner a.joblist-text:hover .name-number .job-workstyle {
		color: #2658ce;
	}

	.joblist-datainner a.joblist-text:hover .name-number .job-salary {
		color: #2658ce;
	}

	.joblist-datainner a.joblist-text:hover .name-number .job-number {
		color: #2658ce;
	}

	.joblist-datainner .joblist-date {
		display: none;
	}

	.joblist-datainner .joblist-last-date {
		width: 100%;
	}

	.joblist-datainner .joblist-data-scout {
		margin-left: 5px;
	}

	.joblist-datainner .joblist-data-scout .joblist-data-link {
		color: #4a4a4a;
		font-size: 1.2rem;
		transition: ease-in-out 0.3s;
	}

	.joblist-datainner .joblist-data-scout .joblist-data-link i {
		display: inline-block;
		margin-right: 5px;
		font-size: 2.2rem;
	}

	.joblist-datainner .joblist-data-scout .joblist-data-link i:before {
		color: #84849a;
	}

	.joblist-datainner .joblist-data-scout .joblist-data-link .data-text {
		display: none;
	}

	.joblist-datainner .joblist-data-copy {
		margin-right: 10px;
	}

	.joblist-datainner .joblist-data-copy .joblist-data-link {
		display: flex;
		align-items: center;
		color: #4a4a4a;
		font-size: 1.2rem;
		transition: ease-in-out 0.3s;
	}

	.joblist-datainner .joblist-data-copy .joblist-data-link i {
		display: inline-block;
		font-size: 2.2rem;
	}

	.joblist-datainner .joblist-data-copy .joblist-data-link i:before {
		color: #84849a;
	}

	.joblist-datainner .joblist-data-copy .joblist-data-link .data-text {
		display: none;
	}

	.joblist-datainner .joblist-status {
		flex: 1;
		width: calc( 100% - 37px);
		max-width: 100%;
	}

	.joblist-datainner .joblist-status .mod-status {
		display: flex;
		position: relative;
		justify-content: space-between;
		align-items: center;
	}

	.joblist-datainner .joblist-status .mod-status input ~ .popup,
	.joblist-datainner .joblist-status .mod-status .status-draft ~ .popup,
	.joblist-datainner .joblist-status .mod-status .popup {
		display: flex;
		visibility: visible;
		position: relative;
		overflow: visible;
		align-items: center;
		order: 1;
		margin-right: 10px;
		opacity: 1;
		font-size: 1.2rem;
		font-weight: bold;
		-webkit-animation: none;
		animation: none;
	}

	.joblist-datainner .joblist-status .mod-status input ~ .popup .inner-link,
	.joblist-datainner .joblist-status .mod-status .status-draft ~ .popup .inner-link,
	.joblist-datainner .joblist-status .mod-status .popup .inner-link {
		cursor: pointer;
		display: block;
		visibility: visible;
		width: 100%;
		height: 30px;
		padding: 5px 5px 3px 23px;
		border: 1px solid #cacad9;
		border-radius: 15px;
		background: #cacad9;
		color: #fafafa;
		text-align: center;
		pointer-events: none;
	}

	.joblist-datainner .joblist-status .mod-status input ~ .popup .inner-link i,
	.joblist-datainner .joblist-status .mod-status .status-draft ~ .popup .inner-link i,
	.joblist-datainner .joblist-status .mod-status .popup .inner-link i {
		display: inline-block;
		position: absolute;
		top: 5px;
		left: 6px;
		margin-left: 3px;
		transition: ease-in-out 0.3s;
	}

	.joblist-datainner .joblist-status .mod-status input ~ .popup .inner-link i:before,
	.joblist-datainner .joblist-status .mod-status .status-draft ~ .popup .inner-link i:before,
	.joblist-datainner .joblist-status .mod-status .popup .inner-link i:before {
		width: 30px;
		color: #fafafa;
		font-size: 1.8rem;
		transition: ease-in-out 0.3s;
	}

	.joblist-datainner .joblist-status .mod-status input ~ .popup .inner-link i:before,
	.joblist-datainner .joblist-status .mod-status .status-draft ~ .popup .inner-link i:before,
	.joblist-datainner .joblist-status .mod-status .popup .inner-link i:before {
		color: #fafafa;
	}

	.joblist-datainner .joblist-status .mod-status input:checked ~ .popup .inner-link,
	.joblist-datainner .joblist-status .mod-status .joblist-countmsg ~ .popup .inner-link,
	.joblist-datainner .joblist-status .mod-status .popup.is-active .inner-link {
		border: 1px solid #2658ce;
		background: #fafafa;
		color: #2658ce;
		pointer-events: visible;
	}

	.joblist-datainner .joblist-status .mod-status input:checked ~ .popup .inner-link i:before,
	.joblist-datainner .joblist-status .mod-status .joblist-countmsg ~ .popup .inner-link i:before,
	.joblist-datainner .joblist-status .mod-status .popup.is-active .inner-link i:before {
		color: #2658ce;
	}

	.joblist-datainner .joblist-status .mod-status input:checked ~ .popup .inner-link:hover,
	.joblist-datainner .joblist-status .mod-status .joblist-countmsg ~ .popup .inner-link:hover,
	.joblist-datainner .joblist-status .mod-status .popup.is-active .inner-link:hover {
		background: #2658ce;
		color: #fafafa;
	}

	.joblist-datainner .joblist-status .mod-status input:checked ~ .popup .inner-link:hover i:before,
	.joblist-datainner .joblist-status .mod-status .joblist-countmsg ~ .popup .inner-link:hover i:before,
	.joblist-datainner .joblist-status .mod-status .popup.is-active .inner-link:hover i:before {
		color: #fafafa;
	}

	.joblist-datainner .joblist-status .mod-status .joblist-countmsg ~ .popup {
		width: calc( 50% - 5px);
	}

	.joblist-datainner .joblist-status .mod-status input ~ .popup,
	.joblist-datainner .joblist-status .mod-status .status-draft ~ .popup {
		width: calc( 50% - 5px);
	}

	.joblist-datainner .joblist-status .mod-status.is-scout .popup {
		width: 100%;
	}

	.joblist-datainner .joblist-status .mod-status label {
		cursor: pointer;
		display: inline-block;
		position: relative;
		order: 2;
		width: calc( 50% - 5px);
		height: 30px;
		border-radius: 15px;
	}

	.joblist-datainner .joblist-status .mod-status label:before,
	.joblist-datainner .joblist-status .mod-status label:after {
		left: 4px;
		width: 22px;
		height: 22px;
		font-size: 1.3rem;
		text-align: center;
		transition: ease-in-out 0.3s;
	}

	.joblist-datainner .joblist-status .mod-status label:before {
		top: 2px;
		left: calc( 50% - 1.5em);
		width: 3em;
	}

	.joblist-datainner .joblist-status .mod-status input:checked + label:before {
		content: attr(data-on-label);
		color: #fff;
	}

	.joblist-datainner .joblist-status .mod-status input:checked + label:after {
		right: 4px;
		left: calc( 100% - 26px);
	}

	.joblist-datainner .joblist-status .mod-status .status-draft {
		display: block;
		order: 2;
		width: calc( 50% - 5px);
		height: 30px;
		padding: 5px;
		border-radius: 15px;
		font-size: 1.3rem;
		font-weight: bold;
	}

	.joblist-datainner .joblist-status .mod-status .status-draft.status-stop {
		border: 2px solid #cacad9;
		background: #cacad9;
		color: #fafafa;
	}

	.joblist-datainner .joblist-status .mod-status .status-draft.status-caution {
		border: 2px solid #b40000;
		background: #b40000;
		color: #fafafa;
	}

	.joblist-datainner .joblist-status .mod-status .status-draft.status-caution i.icon-coution {
		display: inline-block;
		position: relative;
		top: 1px;
		margin-right: 3px;
	}

	.joblist-datainner .joblist-status .mod-status .status-draft.status-open {
		border: 2px solid #2658ce;
		color: #2658ce;
	}

	.joblist-datainner .joblist-status .mod-status .status-draft.status-expired {
		border: 2px solid #7472e1;
		background-color: #7472e1;
		color: #fff;
		transition: ease-in-out 0.3s;
	}

	.joblist-datainner .joblist-status .mod-status .status-draft.status-expired:hover {
		background-color: #fff;
		color: #7472e1;
	}

	.joblist-datainner .joblist-status .mod-status .status-draft.is-before-public {
		border: none;
	}

	.joblist-datainner .joblist-status .mod-status .joblist-countmsg {
		display: flex;
		justify-content: center;
		align-items: center;
		order: 2;
		width: calc( 50% - 5px);
		height: 30px;
		margin-left: 0;
		border-radius: 3px;
		background: #2658ce;
		color: #fafafa;
	}

	.joblist-datainner .joblist-status .mod-status .joblist-countmsg.not-scout {
		background: #ebebf3;
		color: #4a4a4a;
	}

	.joblist-datainner .joblist-status .mod-status .joblist-countmsg.not-scout ~ .popup {
		width: calc( 50% - 5px);
	}

	.joblist-datainner .joblist-status .mod-status .joblist-countmsg.not-scout ~ .popup .inner-link {
		cursor: none;
		display: block;
		visibility: visible;
		border: 1px solid #ebebf3;
		background: #ebebf3;
		color: #fafafa;
		pointer-events: none;
	}

	.joblist-datainner .joblist-status .mod-status .joblist-countmsg.not-scout ~ .popup .inner-link i:before {
		color: #fafafa;
	}

	.joblist-datainner .joblist-status .mod-status.is-scout input,
	.joblist-datainner .joblist-status .mod-status.is-scout input:checked {
		display: none;
	}

	.joblist-datainner .joblist-status .mod-status.is-scout input ~ .popup,
	.joblist-datainner .joblist-status .mod-status.is-scout input:checked ~ .popup {
		margin-right: 0;
	}

	.joblist-datainner .joblist-status .mod-status.is-scout label {
		display: none;
	}

	.pull-down-cover .pull-down-top .job-detail-title {
		display: flex;
		position: relative;
		align-items: center;
		width: 100%;
		height: 30px;
		padding: 3px 15px;
		background: #4a4a4a;
		color: #fafafa;
		font-size: 1.3rem;
	}

	.pull-down-cover .pull-down-top .job-detail-title:before,
	.pull-down-cover .pull-down-top .job-detail-title:after {
		content: '';
		display: block;
		position: absolute;
		top: calc( 50% - 1px);
		right: 15px;
		width: 10px;
		height: 2px;
		background: #fafafa;
		transition: ease-in-out 0.3s;
	}

	.pull-down-cover .pull-down-top .job-detail-title:after {
		-webkit-transform: rotateZ(90deg);
		transform: rotateZ(90deg);
	}

	.pull-down-cover .pull-down-top .job-detail-title i {
		padding-right: 5px;
	}

	.pull-down-cover .pull-down-top .job-detail-title i:before {
		color: #fafafa !important;
		font-size: 2rem;
	}

	.pull-down-cover .pull-down-bottom {
		transition: ease-in-out 0.3s;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner {
		padding: 15px;
		background: #f4f4f9;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .job-contents.joblist-item {
		margin-bottom: 10px;
		padding: 10px;
		border: 1px solid #cacad9;
		border-radius: 5px;
		background: #fafafa;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .job-contents.joblist-item .bord {
		position: relative;
		overflow: visible;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .job-contents.joblist-item .bord > span.number {
		display: inline-block;
		display: flex;
		position: absolute;
		z-index: 10;
		top: -2px;
		left: -2px;
		justify-content: center;
		align-items: center;
		width: 16px;
		height: 16px;
		border-radius: 5px 0 5px 0;
		background: #0062cc;
		color: #fafafa;
		font-size: 1rem;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .job-contents.joblist-item .bord.job-workstyle {
		overflow: visible;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .job-contents.joblist-item .bord:after {
		content: '';
		display: block;
		position: absolute;
		top: -2px;
		left: -2px;
		width: calc(100% + 4px);
		height: calc(100% + 4px);
		border: 1px solid #2658ce;
		border-radius: 5px;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .job-contents.joblist-item .joblist-text h3 .link {
		padding: 3px 0;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .job-contents.joblist-item .joblist-text h3 .job-workstyle {
		margin: 3px 0;
		padding: 3px 0;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .job-contents.joblist-item .joblist-status .mod-status {
		width: 100%;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .job-contents.joblist-item .joblist-status .mod-status .popup.bord {
		order: 1;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .job-contents.joblist-item .joblist-status .mod-status .popup.bord:after {
		height: calc( 100% - 1px);
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .job-contents.joblist-item .joblist-status .mod-status .inner.bord {
		order: 2;
		width: calc( 50% - 5px);
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .job-contents.joblist-item .joblist-status .mod-status .inner.bord label {
		width: 100%;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .job-contents.joblist-item .joblist-status .mod-status .inner.bord:after {
		height: calc( 100% - 1px);
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .job-contents.joblist-item .joblist-status .mod-status.is-scout-seiko .popup.bord:after {
		height: calc( 100% + 4px);
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .job-contents.joblist-item .joblist-status.is-scout input ~ .popup,
	.pull-down-cover .pull-down-bottom .job-detail-inner .job-contents.joblist-item .joblist-status.is-scout input:checked ~ .popup {
		width: 100%;
		margin-right: 0;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .job-contents.joblist-item .joblist-status.is-scout input ~ .popup > a,
	.pull-down-cover .pull-down-bottom .job-detail-inner .job-contents.joblist-item .joblist-status.is-scout input:checked ~ .popup > a {
		width: 100%;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .job-contents.joblist-item .joblist-status.is-scout label {
		display: none;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .detail-list {
		margin-bottom: 20px;
		margin-left: 10px;
		color: #000;
		font-size: 1.4rem;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .detail-list .detail-li {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 8px;
		line-height: 1.4;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .detail-list .detail-li.sp_hide {
		display: none;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .detail-list .detail-li > span.number {
		display: inline-block;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 16px;
		height: 16px;
		margin-right: 6px;
		border-radius: 5px 0 5px 0;
		background: #0062cc;
		color: #fafafa;
		font-size: 1rem;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .detail-list .detail-li span.red {
		color: #b40000;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .fav-detail-area .fav-detail-title {
		margin-bottom: 10px;
		padding: 3px;
		border-top: 1px solid #2658ce;
		border-bottom: 1px solid #2658ce;
		color: #2658ce;
		font-size: 1.6rem;
		text-align: center;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .fav-detail-area .fav-detail-inner .fav-detail-list .fav-li {
		justify-content: center;
		align-items: center;
		margin-bottom: 5px;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .fav-detail-area .fav-detail-inner .fav-detail-list .fav-li .detail-box {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 85px;
		border-radius: 5px;
		background: #fafafa;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .fav-detail-area .fav-detail-inner .fav-detail-list .fav-li .detail-box.heart svg {
		width: 226px;
		height: 57px;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .fav-detail-area .fav-detail-inner .fav-detail-list .fav-li .detail-box.scout {
		flex-direction: column;
		flex-wrap: wrap;
		font-size: 1.8rem;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .fav-detail-area .fav-detail-inner .fav-detail-list .fav-li .detail-box.scout .scout-top-text {
		margin-bottom: 5px;
		padding: 5px 10px;
		border-radius: 3px;
		background: #ebebf3;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .fav-detail-area .fav-detail-inner .fav-detail-list .fav-li .detail-box.scout .red {
		color: #b40000;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .fav-detail-area .fav-detail-inner .fav-detail-list .fav-li .detail-box.message .message-box {
		padding: 10px;
		background: #ebebf3;
		color: #84849a;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .fav-detail-area .fav-detail-inner .fav-detail-list .fav-li .detail-box.message .message-box .badge {
		display: inline-block;
		margin-right: 3px;
		padding: 3px;
		border-radius: 3px;
		background: #4a4a4a;
		color: #fafafa;
		font-size: 1.1rem;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .fav-detail-area .fav-detail-inner .fav-detail-list .fav-li .detail-box.message .message-box .badge.blue {
		background: #2d7ac9;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .fav-detail-area .fav-detail-inner .fav-detail-list .fav-li .detail-box.message .message-box .badge.pink {
		background: #fc7576;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .fav-detail-area .fav-detail-inner .fav-detail-list .fav-li .detail-box.auto-pic01 svg {
		width: 292px;
		height: 63px;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .fav-detail-area .fav-detail-inner .fav-detail-list .fav-li .detail-box.auto-pic02 svg {
		width: 262px;
		height: 71px;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .fav-detail-area .fav-detail-inner .fav-detail-list .fav-li .detail-box.auto-pic03 svg {
		width: 250px;
		height: 53px;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .fav-detail-area .fav-detail-inner .fav-detail-list .fav-li .detail-text {
		align-items: center;
		padding: 10px 15px;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .fav-detail-area .fav-detail-inner .fav-detail-list .fav-li .detail-text .red {
		color: #b40000;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .fav-detail-button {
		margin-top: 10px;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .fav-detail-button a {
		display: block;
		transition: ease-in-out 0.3s;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .fav-detail-button a.btn-border-service {
		width: 100%;
		margin: 0 auto 15px;
		border: 1px solid #2658ce;
		background: #fafafa;
		color: #2658ce;
		font-size: 1.4rem;
		font-weight: bold;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .fav-detail-button a.btn-border-service:hover {
		background: #2658ce;
		color: #fafafa;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .fav-detail-button a.link-dark {
		display: inline-block;
		color: #4a4a4a;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .fav-detail-button a.link-dark i:before {
		color: #4a4a4a;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .fav-detail-button a.link-dark:hover {
		opacity: 0.7;
	}

	.pull-down-cover.open .pull-down-top .job-detail-title:after {
		-webkit-transform: rotateZ(0deg);
		transform: rotateZ(0deg);
	}

	.pull-down-cover.open .pull-down-bottom {
		display: block;
		height: auto;
	}

	.joblist-option {
		width: 100%;
		margin-top: 15px;
		padding: 10px;
		border: 1px solid #cacad9;
		border-radius: 3px;
	}

	.joblist-option .option-title {
		position: relative;
		color: #2658ce;
		font-size: 1.4rem;
		font-weight: bold;
		text-align: center;
	}

	.joblist-option .option-title:before,
	.joblist-option .option-title:after {
		content: '';
		display: block;
		position: absolute;
		top: calc( 50% - 2px);
		right: 0;
		width: 10px;
		height: 2px;
		background: #2658ce;
		transition: ease-in-out 0.3s;
	}

	.joblist-option .option-title:after {
		-webkit-transform: rotateZ(90deg);
		transform: rotateZ(90deg);
	}

	.joblist-option .option-inner {
		width: 100%;
		margin-top: 10px;
	}

	.joblist-option .option-inner .option-list {
		width: 100%;
		font-size: 1.3rem;
	}

	.joblist-option .option-inner .option-list .option-box {
		display: block;
		margin-bottom: 1px;
		padding: 10px;
		background: #ebebf3;
		color: #84849a;
	}

	.joblist-option .option-inner .option-list .option-box .name {
		width: 100%;
		padding-bottom: 5px;
		font-weight: bold;
		text-align: center;
	}

	.joblist-option .option-inner .option-list .option-box .status {
		padding: 3px 7px;
		border-radius: 3px;
		background: #84849a;
		color: #fafafa;
		font-size: 1.2rem;
		text-align: center;
	}

	.joblist-option .option-inner .option-list .option-box .date {
		display: flex;
		justify-content: center;
		padding-top: 5px;
	}

	.joblist-option .option-inner .option-list .option-box .date .start,
	.joblist-option .option-inner .option-list .option-box .date .end {
		display: inline-block;
		padding: 0 3px;
		font-weight: bold;
	}

	.joblist-option .option-inner .option-list .option-box .date .end {
		text-align: right;
	}

	.joblist-option .option-inner .option-list .option-box.published {
		color: #2658ce;
	}

	.joblist-option .option-inner .option-list .option-box.published .status {
		background: #2658ce;
	}

	.joblist-option.open .option-title:after {
		-webkit-transform: rotateZ(0deg);
		transform: rotateZ(0deg);
	}

	.joblist-option.open .option-list {
		display: block;
		height: auto;
	}

	.mod-joblist.is-complete.sp-bg-white {
		background-color: white;
	}

	.mod-joblist.is-complete .box-title.joblist-item {
		margin-bottom: 0;
		background-color: #8bc34a;
		color: #fafafa;
		font-size: 1.4rem;
		text-align: center;
	}

	.mod-joblist.is-complete .job-contents .joblist-data .joblist-datainner {
		flex-wrap: wrap;
	}

	.mod-joblist.is-complete .job-contents .joblist-data .joblist-datainner .joblist-img a {
		pointer-events: none;
	}

	.mod-joblist.is-complete .job-contents .joblist-data .joblist-datainner .mod-button {
		width: 100%;
		margin-top: 10px;
		font-size: 1.4rem;
		font-weight: bold;
	}
}

@media print, screen and (max-width: 767px) {
	.mod-joblist-modal .joblist-datainner .joblist-text {
		width: 100%;
	}
}

@media print, screen and (min-width: 768px) {
	.joblist-header {
		display: flex;
		align-items: center;
		padding: 10px 15px;
		border-bottom: 1px solid #cacad9;
		background-color: #ebebf3;
		color: #4a4a4a;
		font-size: 1.2rem;
		font-weight: bold;
	}

	.joblist-header-img {
		flex: none;
		width: 58px;
		margin-right: 10px;
	}

	.joblist-header-status {
		flex: none;
		width: 76px;
		margin-right: 10px;
	}

	.joblist-header-text {
		flex: 1;
		padding-right: 10px;
	}

	.joblist-header-date {
		text-align: right;
		white-space: nowrap;
	}

	.job-contents {
		display: flex;
		align-items: center;
		padding: 15px;
		border-bottom: 1px solid #cacad9;
	}

	.job-contents.is-pc-disflex {
		display: block;
	}

	.job-contents.scout-limit {
		background-color: #f4f4f9;
		opacity: 0.5;
	}

	.job-contents.fav-list {
		flex-wrap: wrap;
	}

	.job-contents.is-wrap {
		flex-wrap: wrap;
	}

	.job-contents.movie .joblist-img a:before {
		content: '\ea1c';
		display: flex;
		position: absolute;
		z-index: 1;
		top: 0;
		right: 0;
		justify-content: center;
		align-items: center;
		width: 14px;
		height: 14px;
		background-color: rgba(250, 250, 250, 0.9);
		color: #2658ce;
		font-size: 0.8em;
		line-height: 0;
	}

	.job-contents:last-child {
		border-bottom: none;
	}

	.joblist-data {
		flex: 1;
		border: none;
		background-color: rgba(0, 0, 0, 0);
		text-align: left;
		-ms-flex: 1 1 auto;
	}

	.joblist-data.js-pagejump {
		cursor: pointer;
	}

	.joblist-data .mod-label.is-fav-count {
		display: block;
		min-width: 84px;
		height: 58px;
		text-align: center;
	}

	.joblist-data .mod-label.is-fav-count .count {
		font-size: 2rem;
		font-weight: bold;
		text-align: center;
	}

	button.joblist-data {
		transition: all 300ms 0s ease;
	}

	button.joblist-data:hover {
		opacity: 0.7;
	}

	.cassette-joblist-box {
		display: flex;
		align-items: center;
		padding: 10px 0;
		border-bottom: 1px solid #cacad9;
		background: #ebebf3;
		font-size: 1.3rem;
	}

	.cassette-joblist-box .sub-joblist-img {
		width: 83px;
		text-align: center;
	}

	.cassette-joblist-box .sub-joblist-text {
		flex-grow: 1;
	}

	.cassette-joblist-box .sub-joblist-date {
		width: 71px;
		margin-right: 10px;
		margin-left: 10px;
	}

	.cassette-joblist-box .sub-joblist-data-scout {
		width: 89px;
		margin-right: 10px;
		margin-left: 10px;
	}

	.cassette-joblist-box .sub-joblist-data-copy {
		width: 115px;
		margin-right: 10px;
		margin-left: 20px;
	}

	.cassette-joblist-box .sub-joblist-status {
		margin-right: 15px;
		margin-left: 5px;
	}

	.cassette-joblist-box .sub-joblist-status .sub-mod-status {
		display: flex;
	}

	.cassette-joblist-box .sub-joblist-status .sub-mod-status .sub-popup {
		width: 165px;
		margin-right: 10px;
		text-align: center;
	}

	.cassette-joblist-box .sub-joblist-status .sub-mod-status .sub-popup.is-dashboard {
		display: none;
	}

	.cassette-joblist-box .sub-joblist-status .sub-mod-status .sub-switch-demo {
		width: 75px;
		text-align: center;
	}

	.cassette-joblist-box .sub-joblist-status .sub-mod-status.is-scout .sub-switch-demo {
		display: none;
	}

	.joblist-datainner {
		display: flex;
		align-items: center;
	}

	.joblist-datainner .joblist-img {
		flex: none;
		width: 58px;
		margin-right: 10px;
		line-height: 1;
	}

	.joblist-datainner .joblist-img .joblist-img-inner a {
		display: block;
		position: relative;
	}

	.joblist-datainner .joblist-img .joblist-img-inner img {
		width: 100%;
		height: auto;
		vertical-align: bottom;
	}

	.joblist-datainner .joblist-img .joblist-img-inner:empty {
		position: relative;
		height: 45px;
		background-color: #cacad9;
	}

	.joblist-datainner .joblist-img .joblist-img-inner:empty:before {
		content: '\e90b';
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 1em;
		height: 1em;
		margin: auto;
		color: #fff;
		font-size: 2rem;
	}

	.joblist-datainner .joblist-publish-status {
		display: flex;
		flex: none;
		justify-content: center;
		align-items: center;
		width: 76px;
		margin-right: 10px;
		padding: 0 2px;
		border-radius: 2px;
		font-size: 1.2rem;
	}

	.joblist-datainner .joblist-publish-status.joblist-publish-status-published {
		background-color: #2658ce;
		color: #fff;
	}

	.joblist-datainner .joblist-publish-status.joblist-publish-status-stopped {
		background-color: #b2afac;
		color: #fff;
	}

	.joblist-datainner .joblist-publish-status.joblist-publish-status-draft {
		border: 1px solid #383737;
		color: #383737;
	}

	.joblist-datainner .joblist-text {
		display: block;
		flex: 1;
		padding-right: 10px;
		color: #4a4a4a;
		transition: ease-in-out 0.3s;
	}

	.joblist-datainner .joblist-text h3.job-title {
		font-size: 1.6rem;
		font-weight: bold;
	}

	.joblist-datainner .joblist-text .name-number .job-workstyle {
		margin-right: 10px;
		color: #4a4a4a;
		font-size: 1.3rem;
		line-height: 1.6;
	}

	.joblist-datainner .joblist-text .name-number .job-salary {
		display: inline-block;
		margin-right: 10px;
		color: #4a4a4a;
		font-size: 1.3rem;
		line-height: 1.6;
	}

	.joblist-datainner .joblist-text .name-number .job-number {
		display: inline-block;
		color: #84849a;
		font-size: 1.2rem;
	}

	.joblist-datainner .joblist-text .name-number .mod-label.label-spot {
		padding: 1px 5px;
		vertical-align: bottom;
	}

	.joblist-datainner .joblist-text .name-number .mod-label.label-black {
		font-size: 1rem;
	}

	.joblist-datainner .joblist-text .job-catchcopy {
		display: block;
		overflow: hidden;
		width: calc(100% - 10px);
		max-width: 100%;
		color: #4a4a4a;
		font-size: 1.2rem;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.joblist-datainner a.joblist-text:hover {
		color: #2658ce;
	}

	.joblist-datainner a.joblist-text:hover .name-number .job-workstyle {
		color: #2658ce;
	}

	.joblist-datainner a.joblist-text:hover .name-number .job-salary {
		color: #2658ce;
	}

	.joblist-datainner a.joblist-text:hover .name-number .job-number {
		color: #2658ce;
	}

	.joblist-datainner .joblist-date {
		margin-left: 20px;
	}

	.joblist-datainner .joblist-date .joblist-log {
		color: #4a4a4a;
		font-size: 1.2rem;
	}

	.joblist-datainner .joblist-data-scout {
		margin-left: 20px;
	}

	.joblist-datainner .joblist-data-scout.is-dashboard {
		margin-bottom: 1.2em;
	}

	.joblist-datainner .joblist-data-scout .joblist-data-link {
		color: #4a4a4a;
		font-size: 1.4rem;
		transition: ease-in-out 0.3s;
	}

	.joblist-datainner .joblist-data-scout .joblist-data-link:hover {
		opacity: 0.8;
	}

	.joblist-datainner .joblist-data-scout .joblist-data-link i {
		display: inline-block;
		margin-right: 5px;
	}

	.joblist-datainner .joblist-data-copy {
		margin-left: 20px;
	}

	.joblist-datainner .joblist-data-copy.is-dashboard {
		margin-top: 2.6em;
	}

	.joblist-datainner .joblist-data-copy.is-dashboard .joblist-data-link {
		font-size: 1.4rem;
	}

	.joblist-datainner .joblist-data-copy .joblist-data-link {
		color: #4a4a4a;
		font-size: 1.4rem;
	}

	.joblist-datainner .joblist-data-copy .joblist-data-link:hover {
		color: #2196f3;
	}

	.joblist-datainner .joblist-data-copy .joblist-data-link:hover i.icon-bk::before {
		color: #2196f3 !important;
	}

	.joblist-datainner .joblist-data-copy .joblist-data-link i {
		display: inline-block;
		margin-right: 5px;
	}

	.joblist-datainner .joblist-status {
		margin-left: 20px;
	}

	.joblist-datainner .joblist-status .mod-status {
		display: flex;
		position: relative;
		justify-content: right;
		align-items: center;
	}

	.joblist-datainner .joblist-status .mod-status input ~ .popup,
	.joblist-datainner .joblist-status .mod-status .status-draft ~ .popup,
	.joblist-datainner .joblist-status .mod-status .popup {
		display: flex;
		visibility: visible;
		position: relative;
		overflow: visible;
		align-items: center;
		order: 1;
		width: 175px;
		margin-right: 10px;
		opacity: 1;
		font-weight: bold;
		-webkit-animation: none;
		animation: none;
	}

	.joblist-datainner .joblist-status .mod-status input ~ .popup .inner-link,
	.joblist-datainner .joblist-status .mod-status .status-draft ~ .popup .inner-link,
	.joblist-datainner .joblist-status .mod-status .popup .inner-link {
		cursor: pointer;
		display: block;
		visibility: visible;
		width: 180px;
		height: 26px;
		padding: 3px 5px 3px 23px;
		border: 1px solid #cacad9;
		border-radius: 13px;
		background: #cacad9;
		color: #fafafa;
		text-align: center;
		pointer-events: none;
	}

	.joblist-datainner .joblist-status .mod-status input ~ .popup .inner-link i,
	.joblist-datainner .joblist-status .mod-status .status-draft ~ .popup .inner-link i,
	.joblist-datainner .joblist-status .mod-status .popup .inner-link i {
		display: inline-block;
		position: absolute;
		top: 4px;
		left: 5px;
		margin-left: 3px;
	}

	.joblist-datainner .joblist-status .mod-status input ~ .popup .inner-link i:before,
	.joblist-datainner .joblist-status .mod-status .status-draft ~ .popup .inner-link i:before,
	.joblist-datainner .joblist-status .mod-status .popup .inner-link i:before {
		width: 30px;
		color: #fafafa;
		font-size: 1.8rem;
		transition: ease-in-out 0.3s;
	}

	.joblist-datainner .joblist-status .mod-status input ~ .popup .inner-link i:before,
	.joblist-datainner .joblist-status .mod-status .status-draft ~ .popup .inner-link i:before,
	.joblist-datainner .joblist-status .mod-status .popup .inner-link i:before {
		color: #fafafa;
	}

	.joblist-datainner .joblist-status .mod-status input ~ .popup.is-dashboard,
	.joblist-datainner .joblist-status .mod-status .status-draft ~ .popup.is-dashboard,
	.joblist-datainner .joblist-status .mod-status .popup.is-dashboard {
		position: absolute;
		bottom: 0.8em;
		left: -146px;
		width: 128px;
		padding-left: 11px;
	}

	.joblist-datainner .joblist-status .mod-status input ~ .popup.is-dashboard .inner-link,
	.joblist-datainner .joblist-status .mod-status .status-draft ~ .popup.is-dashboard .inner-link,
	.joblist-datainner .joblist-status .mod-status .popup.is-dashboard .inner-link {
		position: relative;
		width: 100%;
		color: #84849a;
		font-size: 1.4rem;
		font-weight: normal;
		transition: none;
	}

	.joblist-datainner .joblist-status .mod-status input ~ .popup.is-dashboard .inner-link i,
	.joblist-datainner .joblist-status .mod-status .status-draft ~ .popup.is-dashboard .inner-link i,
	.joblist-datainner .joblist-status .mod-status .popup.is-dashboard .inner-link i {
		transition: none;
	}

	.joblist-datainner .joblist-status .mod-status input ~ .popup.is-dashboard .inner-link i:before,
	.joblist-datainner .joblist-status .mod-status .status-draft ~ .popup.is-dashboard .inner-link i:before,
	.joblist-datainner .joblist-status .mod-status .popup.is-dashboard .inner-link i:before {
		color: #84849a;
		transition: none;
	}

	.joblist-datainner .joblist-status .mod-status input ~ .popup.is-dashboard .inner-link .sp_none,
	.joblist-datainner .joblist-status .mod-status .status-draft ~ .popup.is-dashboard .inner-link .sp_none,
	.joblist-datainner .joblist-status .mod-status .popup.is-dashboard .inner-link .sp_none {
		display: none;
	}

	.joblist-datainner .joblist-status .mod-status input:checked ~ .popup,
	.joblist-datainner .joblist-status .mod-status .joblist-countmsg ~ .popup,
	.joblist-datainner .joblist-status .mod-status .popup.is-active {
		display: flex;
		align-items: center;
	}

	.joblist-datainner .joblist-status .mod-status input:checked ~ .popup .inner-link,
	.joblist-datainner .joblist-status .mod-status .joblist-countmsg ~ .popup .inner-link,
	.joblist-datainner .joblist-status .mod-status .popup.is-active .inner-link {
		cursor: pointer;
		display: block;
		visibility: visible;
		position: relative;
		border: 1px solid #2658ce;
		background: #fafafa;
		color: #2658ce;
		pointer-events: auto;
	}

	.joblist-datainner .joblist-status .mod-status input:checked ~ .popup .inner-link i,
	.joblist-datainner .joblist-status .mod-status .joblist-countmsg ~ .popup .inner-link i,
	.joblist-datainner .joblist-status .mod-status .popup.is-active .inner-link i {
		display: inline-block;
		position: absolute;
		top: 4px;
		left: 5px;
		margin-left: 3px;
	}

	.joblist-datainner .joblist-status .mod-status input:checked ~ .popup .inner-link i:before,
	.joblist-datainner .joblist-status .mod-status .joblist-countmsg ~ .popup .inner-link i:before,
	.joblist-datainner .joblist-status .mod-status .popup.is-active .inner-link i:before {
		color: #2658ce;
	}

	.joblist-datainner .joblist-status .mod-status input:checked ~ .popup .inner-link:hover,
	.joblist-datainner .joblist-status .mod-status .joblist-countmsg ~ .popup .inner-link:hover,
	.joblist-datainner .joblist-status .mod-status .popup.is-active .inner-link:hover {
		background: #2658ce;
		color: #fafafa;
	}

	.joblist-datainner .joblist-status .mod-status input:checked ~ .popup .inner-link:hover i:before,
	.joblist-datainner .joblist-status .mod-status .joblist-countmsg ~ .popup .inner-link:hover i:before,
	.joblist-datainner .joblist-status .mod-status .popup.is-active .inner-link:hover i:before {
		color: #fafafa;
	}

	.joblist-datainner .joblist-status .mod-status input:checked ~ .popup.is-dashboard,
	.joblist-datainner .joblist-status .mod-status .joblist-countmsg ~ .popup.is-dashboard,
	.joblist-datainner .joblist-status .mod-status .popup.is-active.is-dashboard {
		position: absolute;
		bottom: 0.8em;
		left: -146px;
		width: 128px;
		padding-left: 11px;
	}

	.joblist-datainner .joblist-status .mod-status input:checked ~ .popup.is-dashboard .inner-link,
	.joblist-datainner .joblist-status .mod-status .joblist-countmsg ~ .popup.is-dashboard .inner-link,
	.joblist-datainner .joblist-status .mod-status .popup.is-active.is-dashboard .inner-link {
		width: 100%;
		color: #2658ce;
		font-size: 1.4rem;
		font-weight: normal;
		transition: none;
	}

	.joblist-datainner .joblist-status .mod-status input:checked ~ .popup.is-dashboard .inner-link i,
	.joblist-datainner .joblist-status .mod-status .joblist-countmsg ~ .popup.is-dashboard .inner-link i,
	.joblist-datainner .joblist-status .mod-status .popup.is-active.is-dashboard .inner-link i {
		transition: none;
	}

	.joblist-datainner .joblist-status .mod-status input:checked ~ .popup.is-dashboard .inner-link i:before,
	.joblist-datainner .joblist-status .mod-status .joblist-countmsg ~ .popup.is-dashboard .inner-link i:before,
	.joblist-datainner .joblist-status .mod-status .popup.is-active.is-dashboard .inner-link i:before {
		color: #2658ce;
		transition: none;
	}

	.joblist-datainner .joblist-status .mod-status input:checked ~ .popup.is-dashboard .inner-link .sp_none,
	.joblist-datainner .joblist-status .mod-status .joblist-countmsg ~ .popup.is-dashboard .inner-link .sp_none,
	.joblist-datainner .joblist-status .mod-status .popup.is-active.is-dashboard .inner-link .sp_none {
		display: none;
	}

	.joblist-datainner .joblist-status .mod-status input:checked ~ .popup.is-dashboard .inner-link:hover,
	.joblist-datainner .joblist-status .mod-status .joblist-countmsg ~ .popup.is-dashboard .inner-link:hover,
	.joblist-datainner .joblist-status .mod-status .popup.is-active.is-dashboard .inner-link:hover {
		background: #2658ce;
		color: #fafafa;
	}

	.joblist-datainner .joblist-status .mod-status input:checked ~ .popup.is-dashboard .inner-link:hover i:before,
	.joblist-datainner .joblist-status .mod-status .joblist-countmsg ~ .popup.is-dashboard .inner-link:hover i:before,
	.joblist-datainner .joblist-status .mod-status .popup.is-active.is-dashboard .inner-link:hover i:before {
		color: #fafafa;
	}

	.joblist-datainner .joblist-status .mod-status label {
		order: 2;
	}

	.joblist-datainner .joblist-status .mod-status .status-draft {
		display: inline-block;
		order: 2;
		font-size: 1.2rem;
		font-weight: bold;
		line-height: 20px;
		text-align: center;
	}

	.joblist-datainner .joblist-status .mod-status .status-draft.status-stop {
		border: 2px solid #cacad9;
		background: #cacad9;
		color: #fafafa;
	}

	.joblist-datainner .joblist-status .mod-status .status-draft.status-caution {
		border: 2px solid #b40000;
		background: #b40000;
		color: #fafafa;
	}

	.joblist-datainner .joblist-status .mod-status .status-draft.status-caution i.icon-coution {
		display: inline-block;
		position: relative;
		top: 1px;
		margin-right: 3px;
	}

	.joblist-datainner .joblist-status .mod-status .status-draft.status-open {
		border: 2px solid #2658ce;
		color: #2658ce;
	}

	.joblist-datainner .joblist-status .mod-status .status-draft.status-expired {
		border: 2px solid #7472e1;
		background-color: #7472e1;
		color: #fff;
		transition: ease-in-out 0.3s;
	}

	.joblist-datainner .joblist-status .mod-status .status-draft.status-expired:hover {
		background-color: #fff;
		color: #7472e1;
	}

	.joblist-datainner .joblist-status .mod-status .status-draft.is-before-public {
		height: auto;
		border: none;
		line-height: 1.1;
	}

	.joblist-datainner .joblist-status .mod-status .joblist-countmsg {
		order: 2;
		margin-left: 0;
		padding: 3px 5px;
		border-radius: 3px;
		background: #2658ce;
		color: #fafafa;
	}

	.joblist-datainner .joblist-status .mod-status .joblist-countmsg.not-scout {
		background: #ebebf3;
		color: #4a4a4a;
	}

	.joblist-datainner .joblist-status .mod-status .joblist-countmsg.not-scout ~ .popup .inner-link {
		cursor: none;
		display: block;
		visibility: visible;
		border: 1px solid #ebebf3;
		background: #ebebf3;
		color: #fafafa;
		pointer-events: none;
	}

	.joblist-datainner .joblist-status .mod-status .joblist-countmsg.not-scout ~ .popup .inner-link i:before {
		color: #fafafa;
	}

	.joblist-datainner .joblist-status .mod-status.is-scout input,
	.joblist-datainner .joblist-status .mod-status.is-scout input:checked {
		display: none;
	}

	.joblist-datainner .joblist-status .mod-status.is-scout input ~ .popup,
	.joblist-datainner .joblist-status .mod-status.is-scout input:checked ~ .popup {
		margin-right: 0;
	}

	.joblist-datainner .joblist-status .mod-status.is-scout label {
		display: none;
	}

	.pull-down-cover .pull-down-top .job-detail-title {
		display: flex;
		position: relative;
		align-items: center;
		width: 100%;
		height: 30px;
		padding: 3px 15px;
		background: #4a4a4a;
		color: #fafafa;
		font-size: 1.3rem;
	}

	.pull-down-cover .pull-down-top .job-detail-title:before,
	.pull-down-cover .pull-down-top .job-detail-title:after {
		content: '';
		display: block;
		position: absolute;
		top: calc( 50% - 1px);
		right: 15px;
		width: 10px;
		height: 2px;
		background: #fafafa;
		transition: ease-in-out 0.3s;
	}

	.pull-down-cover .pull-down-top .job-detail-title:after {
		-webkit-transform: rotateZ(90deg);
		transform: rotateZ(90deg);
	}

	.pull-down-cover .pull-down-top .job-detail-title i {
		padding-right: 5px;
	}

	.pull-down-cover .pull-down-top .job-detail-title i:before {
		color: #fafafa !important;
		font-size: 2rem;
	}

	.pull-down-cover .pull-down-bottom {
		transition: ease-in-out 0.3s;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner {
		padding: 15px;
		background: #f4f4f9;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .job-contents.joblist-item {
		margin-bottom: 15px;
		border: 1px solid #cacad9;
		border-radius: 5px;
		background: #fafafa;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .job-contents.joblist-item .bord {
		position: relative;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .job-contents.joblist-item .bord > span.number {
		display: inline-block;
		display: flex;
		position: absolute;
		z-index: 10;
		top: -5px;
		left: -5px;
		justify-content: center;
		align-items: center;
		width: 16px;
		height: 16px;
		border-radius: 5px 0 5px 0;
		background: #0062cc;
		color: #fafafa;
		font-size: 1rem;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .job-contents.joblist-item .bord.job-workstyle {
		overflow: visible;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .job-contents.joblist-item .bord:after {
		content: '';
		display: block;
		position: absolute;
		top: -5px;
		left: -5px;
		width: calc(100% + 10px);
		height: calc(100% + 10px);
		border: 1px solid #2658ce;
		border-radius: 5px;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .job-contents.joblist-item .joblist-status .mod-status .popup.bord {
		order: 1;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .job-contents.joblist-item .joblist-status .mod-status .popup.bord:after {
		height: calc( 100% - 5px);
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .job-contents.joblist-item .joblist-status .mod-status .inner.bord {
		order: 2;
		margin-left: 5px;
		padding-left: 10px;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .job-contents.joblist-item .joblist-status .mod-status .inner.bord:after {
		top: -10px;
		height: calc( 100% + 4px);
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .job-contents.joblist-item .joblist-status .mod-status .inner.bord .number {
		top: -10px;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .job-contents.joblist-item .joblist-status .mod-status .inner.bord label {
		top: -5px;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .job-contents.joblist-item .joblist-status .mod-status.is-scout-seiko .popup.bord {
		margin-right: 15px;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .job-contents.joblist-item .joblist-status .mod-status.is-scout-seiko .popup.bord:after {
		height: calc( 100% + 10px);
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .job-contents.joblist-item .joblist-count-time .count li {
		margin-right: 15px;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .detail-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		max-width: 700px;
		margin: 0 auto 30px;
		color: #000;
		font-size: 1.4rem;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .detail-list .detail-li {
		display: flex;
		width: 350px;
		margin-bottom: 8px;
		line-height: 1.4;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .detail-list .detail-li.pc_hide {
		display: none;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .detail-list .detail-li > span.number {
		display: inline-block;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 16px;
		height: 16px;
		margin-right: 6px;
		border-radius: 5px 0 5px 0;
		background: #0062cc;
		color: #fafafa;
		font-size: 1rem;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .detail-list .detail-li span.red {
		color: #b40000;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .fav-detail-area .fav-detail-title {
		margin-bottom: 20px;
		padding: 3px;
		border-top: 1px solid #2658ce;
		border-bottom: 1px solid #2658ce;
		color: #2658ce;
		font-size: 1.6rem;
		text-align: center;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .fav-detail-area .fav-detail-inner .fav-detail-list .fav-li {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		margin-bottom: 10px;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .fav-detail-area .fav-detail-inner .fav-detail-list .fav-li .detail-box {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 340px;
		height: 85px;
		border-radius: 5px;
		background: #fafafa;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .fav-detail-area .fav-detail-inner .fav-detail-list .fav-li .detail-box.heart svg {
		width: 226px;
		height: 57px;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .fav-detail-area .fav-detail-inner .fav-detail-list .fav-li .detail-box.scout {
		flex-direction: column;
		flex-wrap: wrap;
		font-size: 1.8rem;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .fav-detail-area .fav-detail-inner .fav-detail-list .fav-li .detail-box.scout .scout-top-text {
		margin-bottom: 5px;
		padding: 5px 10px;
		border-radius: 3px;
		background: #ebebf3;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .fav-detail-area .fav-detail-inner .fav-detail-list .fav-li .detail-box.scout .red {
		color: #b40000;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .fav-detail-area .fav-detail-inner .fav-detail-list .fav-li .detail-box.message .message-box {
		padding: 10px;
		background: #ebebf3;
		color: #84849a;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .fav-detail-area .fav-detail-inner .fav-detail-list .fav-li .detail-box.message .message-box .badge {
		display: inline-block;
		margin-right: 3px;
		padding: 3px;
		border-radius: 3px;
		background: #4a4a4a;
		color: #fafafa;
		font-size: 1.1rem;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .fav-detail-area .fav-detail-inner .fav-detail-list .fav-li .detail-box.message .message-box .badge.blue {
		background: #2d7ac9;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .fav-detail-area .fav-detail-inner .fav-detail-list .fav-li .detail-box.message .message-box .badge.pink {
		background: #fc7576;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .fav-detail-area .fav-detail-inner .fav-detail-list .fav-li .detail-box.point-pic01 svg {
		width: 265px;
		height: 35px;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .fav-detail-area .fav-detail-inner .fav-detail-list .fav-li .detail-text {
		align-items: center;
		width: 340px;
		margin-left: 15px;
		padding: 10px;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .fav-detail-area .fav-detail-inner .fav-detail-list .fav-li .detail-text .red {
		color: #b40000;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .fav-detail-button {
		margin-top: 20px;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .fav-detail-button a {
		display: block;
		transition: ease-in-out 0.3s;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .fav-detail-button a.btn-border-service {
		width: 345px;
		margin: 0 auto 15px;
		border: 1px solid #2658ce;
		background: #fafafa;
		color: #2658ce;
		font-size: 1.6rem;
		font-weight: bold;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .fav-detail-button a.btn-border-service:hover {
		background: #2658ce;
		color: #fafafa;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .fav-detail-button a.link-dark {
		display: inline-block;
		color: #4a4a4a;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .fav-detail-button a.link-dark i:before {
		color: #4a4a4a;
	}

	.pull-down-cover .pull-down-bottom .job-detail-inner .fav-detail-button a.link-dark:hover {
		opacity: 0.7;
	}

	.pull-down-cover.open .pull-down-top .job-detail-title:after {
		-webkit-transform: rotateZ(0deg);
		transform: rotateZ(0deg);
	}

	.pull-down-cover.open .pull-down-bottom {
		display: block;
		height: auto;
	}

	.joblist-option {
		display: flex;
		align-items: center;
		width: 100%;
		margin-top: 15px;
		padding: 10px;
		border: 1px solid #cacad9;
		border-radius: 3px;
	}

	.joblist-option .option-title {
		width: 230px;
		padding-right: 10px;
		color: #2658ce;
		font-size: 1.4rem;
		font-weight: bold;
		text-align: center;
	}

	.joblist-option .option-inner {
		width: calc( 100% - 230px);
	}

	.joblist-option .option-inner .option-list {
		font-size: 1.3rem;
	}

	.joblist-option .option-inner .option-list .option-box {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 1px;
		padding: 10px;
		background: #ebebf3;
		color: #84849a;
	}

	.joblist-option .option-inner .option-list .option-box .name {
		width: 110px;
		font-weight: bold;
		text-align: left;
	}

	.joblist-option .option-inner .option-list .option-box .status {
		margin-right: 10px;
		padding: 3px 7px;
		border-radius: 3px;
		background: #84849a;
		color: #fafafa;
		font-size: 1.2rem;
	}

	.joblist-option .option-inner .option-list .option-box .date .start,
	.joblist-option .option-inner .option-list .option-box .date .end {
		display: inline-block;
		padding: 0 3px;
		font-weight: bold;
	}

	.joblist-option .option-inner .option-list .option-box.published {
		color: #2658ce;
	}

	.joblist-option .option-inner .option-list .option-box.published .status {
		background: #2658ce;
	}

	.mod-joblist.is-complete .box-title.joblist-item {
		background-color: #8bc34a;
		color: #fafafa;
		font-size: 1.6rem;
		text-align: center;
	}

	.mod-joblist.is-complete .job-contents .joblist-data .joblist-datainner .joblist-img a {
		pointer-events: none;
	}

	.mod-joblist.is-complete .job-contents .joblist-data .joblist-datainner .mod-button {
		width: 50%;
		font-size: 1.6rem;
		font-weight: bold;
	}
}

.job-contents.fav-list .scout-list-bottom .mod-c .is-stop {
	display: inline-block;
	position: relative;
}

@media print, screen and (max-width: 767px) {
	.job-contents.fav-list .scout-list-bottom .mod-c .is-stop {
		width: 100%;
	}
}

.joblist-data .joblist-datainner .joblist-status .mod-status .popup.is-stop .inner-link,
.job-contents.fav-list .scout-list-bottom .mod-c .is-stop {
	opacity: 0.8;
}

.joblist-data .joblist-datainner .joblist-status .mod-status .popup.is-stop .inner-link:hover,
.joblist-data .joblist-datainner .joblist-status .mod-status .popup.is-stop .inner-link:active,
.job-contents.fav-list .scout-list-bottom .mod-c .is-stop:hover,
.job-contents.fav-list .scout-list-bottom .mod-c .is-stop:active {
	position: relative;
	z-index: 999;
}

.joblist-data .joblist-datainner .joblist-status .mod-status .popup.is-stop .inner-link:hover::after,
.joblist-data .joblist-datainner .joblist-status .mod-status .popup.is-stop .inner-link:active::after,
.job-contents.fav-list .scout-list-bottom .mod-c .is-stop:hover::after,
.job-contents.fav-list .scout-list-bottom .mod-c .is-stop:active::after {
	content: 'サービス切り替え（8/1予定）\A までスカウト送信できません';
	display: block;
	position: absolute;
	z-index: 999;
	top: -3em;
	left: calc( 50% - 7.5em);
	width: 15em;
	background: #b40000;
	opacity: 1;
	color: white;
	font-size: 1.1rem;
	white-space: pre;
}

@media print, screen and (min-width: 768px) {
	.mod-joblist-modal .joblist-datainner {
		display: grid;
		grid-template-columns: 76px 58px 1fr auto;
		gap: 10px;
	}

	.mod-joblist-modal .joblist-datainner .joblist-publish-status {
		margin-right: 0;
	}

	.mod-joblist-modal .joblist-datainner .joblist-img {
		margin-right: 0;
	}

	.mod-joblist-modal .joblist-datainner .joblist-text {
		width: 100%;
		min-width: 0;
		padding-right: 0;
	}
}

.mod-complete-link-cover {
	display: flex;
	justify-content: center;
	gap: 15px;
}

.mod-status.is-pointer .status-draft {
	cursor: pointer;
}

.mod-status.is-pointer:hover .status-draft {
	-webkit-filter: brightness(0.8);
	filter: brightness(0.8);
}

/* variables color */
/*
#colors

@Service #2658CE
@Job #37B500
@Career #FE590F
@tone1 #F4F4F9
@tone2 #EBEBF3
@tone3 #CACAD9
@tone4 #84849A
@tone5 #4A4A4A
*/
/* variables-color */
:root {
	/* color color palette */
	/* Gray */
	--Gray-100: #f6f3f0;
	--Gray-200: #e4e0de;
	--Gray-300: #cbc8c6;
	--Gray-400: #b2afac;
	--Gray-500: #969391;
	--Gray-600: #716e6b;
	--Gray-700: #605d5b;
	--Gray-800: #4e4b49;
	--Gray-900: #2d2b29;
	--Gray-1000: #171413;
	/* Pink */
	--Pink-100: #fef1f5;
	--Pink-200: #fbd8e2;
	--Pink-300: #f7b5c8;
	--Pink-400: #f189aa;
	--Pink-500: #e9588e;
	--Pink-600: #cb006b;
	--Pink-700: #ac0058;
	--Pink-800: #8b0647;
	--Pink-900: #57002a;
	--Pink-1000: #280010;
	/* Red */
	--Red-100: #fff1f1;
	--Red-200: #ffd8d7;
	--Red-300: #fdb4b4;
	--Red-400: #fb888b;
	--Red-500: #f5505f;
	--Red-600: #d40038;
	--Red-700: #ac1731;
	--Red-800: #920625;
	--Red-900: #5c0415;
	--Red-1000: #2f0107;
	/* Orange */
	--Orange-100: #fef2ed;
	--Orange-200: #ffdacd;
	--Orange-300: #ffb59c;
	--Orange-400: #f88d68;
	--Orange-500: #f25915;
	--Orange-600: #c04101;
	--Orange-700: #934225;
	--Orange-800: #79371f;
	--Orange-900: #4f1f0d;
	--Orange-1000: #260c04;
	/* Lime */
	--Lime-100: #f2f9e2;
	--Lime-200: #dfebbf;
	--Lime-300: #c1d293;
	--Lime-400: #a2bb4b;
	--Lime-500: #869f16;
	--Lime-600: #687c0b;
	--Lime-700: #566606;
	--Lime-800: #465408;
	--Lime-900: #2c3505;
	--Lime-1000: #121700;
	/* Green */
	--Green-100: #ecfaec;
	--Green-200: #cdf0cc;
	--Green-300: #a8daa8;
	--Green-400: #66c56c;
	--Green-500: #28af3d;
	--Green-600: #2b8735;
	--Green-700: #276d2e;
	--Green-800: #1b5a22;
	--Green-900: #0f3a14;
	--Green-1000: #021b04;
	/* Aqua */
	--Aqua-100: #e3fafe;
	--Aqua-200: #b7f0fa;
	--Aqua-300: #7edae9;
	--Aqua-400: #12c0d6;
	--Aqua-500: #1aa4b6;
	--Aqua-600: #2b7e8a;
	--Aqua-700: #176774;
	--Aqua-800: #0f5760;
	--Aqua-900: #05373f;
	--Aqua-1000: #00191d;
	/* Blue */
	--Blue-100: #f2f5fc;
	--Blue-200: #dae3f7;
	--Blue-300: #b0c7f9;
	--Blue-400: #8aaaf6;
	--Blue-500: #648cf4;
	--Blue-600: #3a63e0;
	--Blue-700: #2045da;
	--Blue-800: #142ec5;
	--Blue-900: #08118c;
	--Blue-1000: #020448;
	/* Violet */
	--Violet-100: #f4f5fa;
	--Violet-200: #dfe1f6;
	--Violet-300: #bec2f8;
	--Violet-400: #9fa3f4;
	--Violet-500: #8382f3;
	--Violet-600: #6258dd;
	--Violet-700: #5336d8;
	--Violet-800: #451dc3;
	--Violet-900: #290083;
	--Violet-1000: #104;
	/* Purple */
	--Purple-100: #f9f3f9;
	--Purple-200: #eedced;
	--Purple-300: #e2b7e1;
	--Purple-400: #d392d2;
	--Purple-500: #c46bc4;
	--Purple-600: #a247a2;
	--Purple-700: #950c98;
	--Purple-800: #7d0c7f;
	--Purple-900: #4f0050;
	--Purple-1000: #260027;
	/* Yellow */
	--Yellow-100: #fffaec;
	--Yellow-200: #feeec1;
	--Yellow-300: #fee195;
	--Yellow-400: #f7ce5a;
	--Yellow-500: #f4c200;
	--Yellow-600: #d4a800;
	--Yellow-700: #b18c00;
	--Yellow-800: #896c00;
	--Yellow-900: #5f4a00;
	--Yellow-1000: #1f1600;
}

/*
#styleguide
Box into list
```
<div class="mod-box box-list">
<div class="box-title box-listtitle">
<h2>リストタイトル</h2>
<a href="#" class="mod-link">更新履歴はこちら<i class="icon-arrow_right"></i></a>
<!--/ .box-title --></div>
<ul>

<li class="box-listwrap">
<div class="scout-userdata checkbox box-listitem-stretch">
<input type="checkbox" name="checkbox" value="" id="checkbox1">
<label class="icon-check" for="checkbox1">
<ul>
<li class="scout-userinfo1">
<i class="icon-men icon-blue"></i><strong>男性 26-30歳</strong><br>
<span class="mod-label"><i>GUPPYへの最終アクセス</i>3時間前</span>
</li>
<li class="scout-userinfo2"><span><i class="icon-work"></i>正社員(常勤)、パート・非常勤</span></li>
<li class="scout-userinfo2"><span><i class="icon-pin"></i>神奈川県、東京都、埼玉県</span></li>
</ul>
</label>
</div>
<div class="scout-status">
<div class="mod-select">
<i class="icon-arrow_down"></i>
<select>
<option>ステータス</option>
<option value="1">要アクション</option>
<option value="2">対応済み</option>
<option value="2">連絡待ち</option>
<option value="2">保留</option>
<option value="2">対象外</option>
</select>
</div>
</div>

<div class="scout-userdetail">
<a href="#" class="mod-button button-black button-icon button-mini button-icon-left">詳細<i class="icon-doc"></i></a>
</div>

</li><!--/.box-listitem-->


<li class="box-listwrap scout-sent">
<div class="scout-userdata checkbox box-listitem-stretch">
<input type="checkbox" name="checkbox" value="" id="checkbox1">
<label class="icon-check" for="checkbox1">
<ul>
<li class="scout-userinfo1">
<i class="icon-men icon-blue"></i>

<span>送信済</span>
<strong>男性 26-30歳</strong><br>
<span class="mod-label"><i>GUPPYへの最終アクセス</i>3時間前</span>
</li>
<li class="scout-userinfo2"><span><i class="icon-work"></i>正社員(常勤)、パート・非常勤</span></li>
<li class="scout-userinfo2"><span><i class="icon-pin"></i>神奈川県、東京都、埼玉県</span></li>
</ul>
</label>
</div>
<div class="scout-status">
<div class="mod-select">
<i class="icon-arrow_down"></i>
<select>
<option>ステータス</option>
<option value="1">要アクション</option>
<option value="2">対応済み</option>
<option value="2">連絡待ち</option>
<option value="2">保留</option>
<option value="2">対象外</option>
</select>
</div>
</div>

<div class="scout-userdetail">
<a href="#" class="mod-button button-black button-icon button-mini button-icon-left">詳細<i class="icon-doc"></i></a>
</div>

</li><!--/.box-listitem-->


<li class="box-listwrap">
<div class="scout-userdata checkbox box-listitem-stretch">

<div>
<ul>
<li class="scout-userinfo1">
<i class="icon-men icon-blue"></i><strong>男性 26-30歳</strong><br>
<span class="mod-label"><i>GUPPYへの最終アクセス</i>3時間前</span>
</li>
<li class="scout-userinfo2"><span><i class="icon-work"></i>正社員(常勤)、パート・非常勤</span></li>
<li class="scout-userinfo2"><span><i class="icon-pin"></i>神奈川県、東京都、埼玉県</span></li>
</ul>
</div>
</div>
<div class="scout-status">
<div class="mod-select">
<i class="icon-arrow_down"></i>
<select>
<option>ステータス</option>
<option value="1">要アクション</option>
<option value="2">対応済み</option>
<option value="2">連絡待ち</option>
<option value="2">保留</option>
<option value="2">対象外</option>
</select>
</div>
</div>

<div class="scout-userdetail">
<a href="#" class="mod-button button-black button-icon button-mini button-icon-left">詳細<i class="icon-doc"></i></a>
</div>

</li><!--/.box-listitem-->



</ul>

</div><!--/.mod-box-->



```
*/
@media print, screen and (max-width: 767px) {
	.mod-box.box-list {
		border-radius: 0;
		background-color: rgba(0, 0, 0, 0);
		box-shadow: none;
	}

	.scout-list-inner {
		position: relative;
		overflow: hidden;
		margin-top: 20px;
		border: 1px solid #cacad9;
		border-radius: 5px;
	}

	.scout-list-inner .box-listwrap {
		margin-bottom: 0;
		border-top: 1px solid #cacad9;
		border-bottom: none;
	}

	.scout-list-inner .box-listwrap:nth-child(2) {
		border-top: none;
	}

	.scout-list-inner .box-listwrap:nth-child(2) {
		border-top-left-radius: 4px;
		border-top-right-radius: 4px;
	}

	.scout-list-inner .box-listwrap:last-child {
		border-bottom-right-radius: 4px;
		border-bottom-left-radius: 4px;
	}

	.scout-list-inner .scout-userdata.checkbox label:after {
		content: none;
	}

	.scout-list-inner .scout-userdata.checkbox .scout-usersex {
		padding-left: 5px;
	}

	.scout-list-inner .scout-userdata.checkbox .scout-usersex i {
		left: 0;
	}

	.scout-list-inner .scout-userdata.checkbox .scout-usersex.icon-check:before {
		content: none;
	}

	.scout-list-inner .scout-userdata.checkbox .scout-usersex.icon-check:after {
		content: none;
	}

	.box-listwrap {
		display: flex;
		align-items: center;
		min-width: 0;
		max-width: 100%;
		margin-bottom: 5px;
		padding: 15px;
		border-bottom: 1px solid #cacad9;
		background-color: #fff;
	}

	.box-listwrap > div {
		margin-right: 10px;
	}

	.box-listwrap > div:last-child {
		margin: 0;
	}

	.box-listwrap .box-listitem {
		flex-grow: 1;
	}

	.box-listwrap .box-listitem-stretch {
		flex: 1;
	}

	.box-listwrap.list-scout {
		flex-wrap: wrap;
	}

	.box-listwrap.list-scout .scout-btn {
		margin: auto;
	}

	.box-listwrap.list-scout .scout-memo {
		margin-top: 10px;
	}

	.box-listwrap.list-search-save {
		justify-content: space-between;
		align-items: center;
		background: #fff;
	}

	.box-listwrap.list-search-save .circle-cover {
		display: none;
	}

	.box-listwrap.list-search-save .scout-save-box {
		display: block;
		width: 100%;
		color: #4a4a4a;
	}

	.box-listwrap.list-search-save .scout-save-box .save-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		margin-bottom: 5px;
	}

	.box-listwrap.list-search-save .scout-save-box .save-title .mod-txt-coution {
		min-width: 130px;
		text-align: right;
	}

	.box-listwrap.list-search-save .scout-save-box .save-list {
		position: relative;
		overflow: hidden;
		width: 100%;
		height: 5.04rem;
		padding-right: 2em;
		background-color: #fff;
		font-size: 1.2rem;
		line-height: 1.4;
		text-align: justify;
		text-align: start;
	}

	.box-listwrap.list-search-save .scout-save-box .save-list:before,
	.box-listwrap.list-search-save .scout-save-box .save-list:after {
		position: absolute;
		background: #fff;
	}

	.box-listwrap.list-search-save .scout-save-box .save-list:before {
		content: '...';
		display: block;
		top: 3.36rem;
		right: 0;
		width: 1.26rem;
		text-align: center;
	}

	.box-listwrap.list-search-save .scout-save-box .save-list:after {
		content: '';
		width: 100%;
		height: 100%;
	}

	.box-listwrap.list-search-save .scout-save-box .save-list .mod-label {
		overflow: hidden;
		max-width: 21em;
		height: 2.46rem;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.box-listwrap.list-search-save .scout-save-box .save-list:before {
		content: '他';
	}

	.box-listwrap.list-search-save .save-icon-cover .icon-link {
		display: inline-block;
		margin-left: 10px;
		transition: ease-in-out 0.3s;
	}

	.box-listwrap.list-search-save .save-icon-cover .icon-link i:before {
		font-size: 2.2rem;
		transition: ease-in-out 0.3s;
	}

	.box-listwrap.list-search-save .save-icon-cover .icon-link.file-icons {
		display: none;
	}

	.button-scout {
		display: none;
	}

	.save-plus {
		position: absolute;
		bottom: 21px;
		left: 18px;
	}

	.scout-sent {
		background-color: #c5e3e6;
	}

	.scout-sent .scout-usersex:after {
		background-color: #fff;
	}

	.active-cover {
		display: flex;
		position: absolute;
		z-index: 2;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		padding: 15px;
		background: rgba(74, 74, 74, 0.5);
	}

	.active-cover .active-text {
		color: #fafafa;
		font-size: 1.6rem;
		font-weight: bold;
		text-align: center;
	}

	.active-cover .active-text .tab {
		display: inline-block;
		margin: 0 5px;
		padding: 2px 15px;
		border-radius: 18px;
		background-color: #2658ce;
		color: #fafafa;
	}

	.list-cassette-detail {
		display: none;
	}

	.scout-reaction {
		background-color: #ffdfd5;
	}

	.scout-reaction .scout-userdata .scout-usersex:after {
		background-color: #fff;
	}

	.scout-reaction .scout-userdata input[disabled] + .scout-usersex:after {
		content: '';
		display: block;
		position: absolute;
		z-index: 1;
		top: 0;
		bottom: 0;
		left: 0;
		width: 18px;
		height: 18px;
		margin: auto;
		border-radius: 3px;
		opacity: 0.7;
	}

	.scout-reaction .scout-userdata input[disabled] + .scout-usersex:before {
		content: '\e919';
		display: inline-block;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		width: 18px;
		height: 18px;
		margin: auto;
		color: #4a4a4a;
		font-size: 1rem;
		line-height: 1.8;
		text-align: center;
	}

	.scout-userdata {
		flex: 1;
		min-width: 0;
	}

	.scout-userdata.checkbox input:checked + label:before {
		left: 0;
	}

	.scout-userdata.checkbox input:checked + label:after {
		background-color: #0fd848;
	}

	.scout-userdata.checkbox input:checked + label * {
		color: #4a4a4a;
		font-weight: normal;
	}

	.scout-userdata.checkbox input:checked + label .mod-label.label-coution {
		color: #fff;
	}

	.scout-userdata.checkbox input:checked + label .mod-label.label-spot {
		color: #fff;
	}

	.scout-userdata.checkbox input:checked + label strong {
		font-weight: bold;
	}

	.scout-userdata.checkbox input:checked + label .scout-userinfo-fav .scout-userinfo-top .left-status {
		color: #383737;
	}

	.scout-userdata.checkbox input:checked + label .scout-userinfo-fav .scout-userinfo-top .left-status .jobs {
		color: #383737;
		font-weight: bold;
	}

	.scout-userdata.checkbox input:checked + label .scout-userinfo-fav .scout-userinfo-top .left-status .jobs .icon-fire {
		margin-right: 4px;
	}

	.scout-userdata.checkbox input:checked + label .scout-userinfo-fav .scout-userinfo-top .left-status .sex-old {
		color: #383737;
		font-weight: normal;
	}

	.scout-userdata.checkbox input:checked + label .scout-userinfo-fav .scout-userinfo-top .left-status .sex-old .sex {
		color: #383737;
		font-weight: bold;
	}

	.scout-userdata.checkbox input:checked + label .scout-userinfo-fav .scout-userinfo-top .list-status li .text {
		color: #000;
	}

	.scout-userdata.checkbox input:checked + label .scout-userinfo-fav .scout-userinfo-top .list-status li.fav-li.is-on .text {
		color: #ff3b4a;
	}

	.scout-userdata.checkbox input:checked + label .scout-userinfo-fav .scout-userinfo-top .list-status li.scout-li.is-on .text {
		color: #264ca5;
	}

	.scout-userdata.checkbox input:checked + label .scout-userinfo-fav .scout-userinfo-top .list-status li.date-li.is-on .text {
		color: #ff3b4a;
	}

	.scout-userdata.checkbox input:checked + label .scout-userinfo-fav .scout-userinfo-top .list-status li.date-li.is-on02 .text {
		color: #ffb100;
	}

	.scout-userdata.checkbox label {
		display: block;
		margin: 0;
		border: none;
		background-color: rgba(0, 0, 0, 0);
	}

	.scout-userdata.checkbox label:after {
		left: 0;
	}

	.scout-userdata .scout-userdata {
		margin-right: 0;
	}

	.scout-userdata .scout-usersex {
		position: relative;
		padding: 0 0 0 25px;
	}

	.scout-userdata .scout-usersex > i {
		display: flex;
		position: absolute;
		top: 8px;
		left: 25px;
		justify-content: center;
		align-items: center;
		margin: auto;
		font-size: 3rem;
	}

	.scout-userdata.is-simple .scout-usersex {
		padding-left: 25px;
	}

	.scout-userdata.is-simple .scout-usersex > i {
		top: 0;
		left: 0;
		font-size: 2.9rem;
	}

	.scout-userdata.is-simple .scout-userinfo-fav {
		margin-bottom: 0;
	}

	.scout-userdata.is-simple .scout-userinfo-fav .scout-userinfo-top {
		display: block;
	}

	.scout-userdata.is-simple .scout-userinfo-fav .scout-userinfo-top .left-status {
		padding-top: 0;
	}

	.scout-userdata.is-simple .scout-userinfo-fav .scout-userinfo-top .left-status .jobs {
		display: none;
	}

	.scout-userdata.is-simple .scout-userinfo-fav .scout-userinfo-top .left-status .sex-old {
		font-size: 1.6rem;
		font-weight: normal;
	}

	.scout-userdata.is-simple .scout-userinfo-fav .scout-userinfo-top .left-status .sex-old .sex {
		font-weight: bold;
	}

	.scout-userdata.is-simple .scout-userinfo-fav .scout-userinfo-top .left-status .sex-old .number {
		display: block;
		margin-top: 3px;
		font-size: 1rem;
		font-weight: normal;
	}

	.scout-userdata.is-simple .scout-userinfo-fav .scout-userinfo-top .mod-label.date-status {
		display: inline-block;
		margin-top: 8px;
		margin-bottom: 0;
		padding: 3px 5px;
		font-size: 1.2rem;
		font-weight: bold;
	}

	.scout-userdata.is-simple .scout-userinfo-fav .scout-userinfo-top .mod-label.date-status.is-new {
		background: #ffed00;
	}

	.scout-userdata.is-simple .scout-userinfo-fav .scout-userinfo-bottom {
		margin-top: 5px;
	}

	.scout-userdata.is-simple .scout-userinfo-fav .scout-userinfo-bottom .scout-userinfo-list .school-li .icon-school {
		font-size: 1.2rem;
	}

	.scout-userdata .scout-userinfo {
		display: block;
		margin-right: 0;
	}

	.scout-userdata .scout-userinfo .scout-userinfo1 {
		display: block;
		margin-bottom: 4px;
		margin-left: 35px;
	}

	.scout-userdata .scout-userinfo .scout-userinfo1 strong {
		display: inline-block;
		font-size: 1.6rem;
		white-space: nowrap;
	}

	.scout-userdata .scout-userinfo .scout-userinfo1 .scout-userinfo-no {
		display: block;
		font-size: 1.6rem;
		font-weight: bold;
		white-space: nowrap;
	}

	.scout-userdata .scout-userinfo .scout-userinfo1 .scout-userinfo-no::before {
		content: 'No.';
		font-size: 1.2rem;
	}

	.scout-userdata .scout-userinfo .scout-userinfo2 {
		display: block;
		min-width: 0;
		margin-bottom: 5px;
	}

	.scout-userdata .scout-userinfo .scout-userinfo2 em {
		display: block;
		overflow: hidden;
		font-size: 1.2rem;
		font-style: normal;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.scout-userdata .scout-userinfo .scout-userinfo2 em i {
		margin-right: 4px;
	}

	.scout-userdata .scout-userinfo .scout-userinfo2 em i:before {
		color: #84849a;
	}

	.scout-userdata .scout-userinfo-fav {
		display: flex;
		flex-direction: column;
		margin-right: 0;
		margin-bottom: 5px;
	}

	.scout-userdata .scout-userinfo-fav .scout-userinfo-top {
		display: flex;
		flex-direction: column;
	}

	.scout-userdata .scout-userinfo-fav .scout-userinfo-top .left-status {
		padding: 8px 0 0 32px;
		font-weight: bold;
		line-height: 1;
	}

	.scout-userdata .scout-userinfo-fav .scout-userinfo-top .left-status .jobs {
		display: block;
		margin-bottom: 4px;
		font-size: 1.6rem;
	}

	.scout-userdata .scout-userinfo-fav .scout-userinfo-top .left-status .jobs .mod-label {
		display: inline-block;
		margin-right: 5px;
		margin-bottom: 0;
		font-size: 1rem;
	}

	.scout-userdata .scout-userinfo-fav .scout-userinfo-top .left-status .jobs .icon-fire {
		margin-right: 4px;
	}

	.scout-userdata .scout-userinfo-fav .scout-userinfo-top .left-status .sex-old {
		display: block;
		font-size: 1rem;
		font-weight: normal;
	}

	.scout-userdata .scout-userinfo-fav .scout-userinfo-top .left-status .sex-old .sex {
		font-weight: bold;
	}

	.scout-userdata .scout-userinfo-fav .scout-userinfo-top .left-status .sex-old .number {
		color: #84849a;
		font-weight: normal;
	}

	.scout-userdata .scout-userinfo-fav .scout-userinfo-top .list-status {
		display: flex;
		margin-top: 8px;
		color: #000;
		font-size: 1rem;
		gap: 8px;
	}

	.scout-userdata .scout-userinfo-fav .scout-userinfo-top .list-status li {
		text-align: center;
	}

	.scout-userdata .scout-userinfo-fav .scout-userinfo-top .list-status li .icon {
		display: inline-block;
		min-width: 26px;
		height: 26px;
		margin: 0 auto 3px;
		padding-top: 4px;
		border: 1px solid #cacad9;
		border-radius: 13px;
		color: #84849a;
		font-size: 1.2rem;
		text-align: center;
		vertical-align: middle;
	}

	.scout-userdata .scout-userinfo-fav .scout-userinfo-top .list-status li .text {
		display: block;
		width: 100%;
	}

	.scout-userdata .scout-userinfo-fav .scout-userinfo-top .list-status li.fav-li {
		white-space: nowrap;
	}

	.scout-userdata .scout-userinfo-fav .scout-userinfo-top .list-status li.fav-li .icon {
		padding-top: 6px;
	}

	.scout-userdata .scout-userinfo-fav .scout-userinfo-top .list-status li.fav-li .icon svg {
		fill: #cacad9;
	}

	.scout-userdata .scout-userinfo-fav .scout-userinfo-top .list-status li.fav-li.is-on {
		color: #ff3b4a;
	}

	.scout-userdata .scout-userinfo-fav .scout-userinfo-top .list-status li.fav-li.is-on .icon {
		border: 1px solid #ff3b4a;
		background-color: #ff3b4a;
	}

	.scout-userdata .scout-userinfo-fav .scout-userinfo-top .list-status li.fav-li.is-on .icon svg {
		fill: #fafafa;
	}

	.scout-userdata .scout-userinfo-fav .scout-userinfo-top .list-status li.scout-li .icon {
		padding-top: 4px;
		font-size: 1.2rem;
	}

	.scout-userdata .scout-userinfo-fav .scout-userinfo-top .list-status li.scout-li.is-on {
		color: #264ca5;
	}

	.scout-userdata .scout-userinfo-fav .scout-userinfo-top .list-status li.scout-li.is-on .icon {
		border: 1px solid #264ca5;
		background-color: #264ca5;
		color: #fafafa;
	}

	.scout-userdata .scout-userinfo-fav .scout-userinfo-top .list-status li.date-li {
		white-space: nowrap;
	}

	.scout-userdata .scout-userinfo-fav .scout-userinfo-top .list-status li.date-li .icon {
		padding: 4px 5px 0;
		font-size: 1.2rem;
	}

	.scout-userdata .scout-userinfo-fav .scout-userinfo-top .list-status li.date-li.is-on {
		color: #ff3b4a;
	}

	.scout-userdata .scout-userinfo-fav .scout-userinfo-top .list-status li.date-li.is-on .icon {
		border: 1px solid #ff3b4a;
		background-color: #ff3b4a;
		color: #fafafa;
	}

	.scout-userdata .scout-userinfo-fav .scout-userinfo-top .list-status li.date-li.is-on02 {
		color: #ffb100;
	}

	.scout-userdata .scout-userinfo-fav .scout-userinfo-top .list-status li.date-li.is-on02 .icon {
		border: 1px solid #ffb100;
		background-color: #ffb100;
		color: #fafafa;
	}

	.scout-userdata .scout-userinfo-fav .scout-userinfo-bottom {
		margin-top: 8px;
	}

	.scout-userdata .scout-userinfo-fav .scout-userinfo-bottom .scout-userinfo-list {
		display: flex;
		flex-wrap: wrap;
	}

	.scout-userdata .scout-userinfo-fav .scout-userinfo-bottom .scout-userinfo-list li {
		margin: 0 12px 2px 0;
		color: #000;
		font-size: 1.2rem;
		font-weight: 400;
	}

	.scout-userdata .scout-userinfo-fav .scout-userinfo-bottom .scout-userinfo-list li i {
		display: inline-block;
		margin-right: 5px;
		font-size: 1.4rem;
	}

	.scout-userdata .scout-userinfo-fav .scout-userinfo-bottom .scout-userinfo-list li i:before {
		color: #4a4a4a;
	}

	.scout-userdata .scout-userinfo-fav .scout-userinfo-bottom .scout-userinfo-list li.school-li i {
		font-size: 1.2rem;
	}

	.scout-userdata .scout-userinfo-fav .scout-userinfo-bottom .scout-userinfo-list li.number-li {
		display: none;
	}

	.scout-userdata .scout-history {
		display: inline-block;
		margin-bottom: 4px;
		padding: 3px 0;
		color: #4a4a4a;
		font-size: 1.2rem;
		vertical-align: text-bottom;
		text-decoration: underline;
	}

	.scout-userdata .mod-label {
		margin-bottom: 4px;
	}

	.scout-list-bottom .mod-link {
		padding: 15px 0 0;
	}

	.scout-list-bottom .mod-link-not {
		padding: 15px 0 0;
		color: #84849a;
		pointer-events: none;
	}

	.scout-list-bottom .mod-c {
		padding-top: 15px;
	}

	.scout-list-bottom .mod-c .mod-button {
		width: 100%;
		padding: 10px;
	}

	.scout-btn {
		width: 7em;
	}

	.scout-btn.is-narrow {
		width: 70px;
	}

	.scout-btn.is-narrow .scout-status .mod-select {
		position: relative;
		height: 48px;
		font-size: 1rem;
		font-weight: bold;
		text-align: center;
	}

	.scout-btn.is-narrow .scout-status .mod-select select {
		padding: 8px 3px 3px 3px;
		font-size: 1.2rem;
	}

	.scout-btn.is-narrow .scout-status .mod-select i {
		width: 100%;
		margin-right: 0;
	}

	.scout-btn.is-narrow .scout-status .mod-select i:before {
		display: block;
		position: absolute;
		right: calc(50% - 7px);
		bottom: 8px;
		font-size: 1.4rem;
	}

	.scout-btn.is-narrow .scout-userdetail {
		width: 100%;
		margin-top: 8px;
	}

	.scout-btn.is-narrow .scout-userdetail a.button-icon {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 48px;
		padding-left: 30px;
		font-size: 1.1rem;
	}

	.scout-btn.is-narrow .scout-userdetail a.button-icon i {
		font-size: 1.8rem;
	}

	.scout-btn .scout-status .mod-select {
		text-align: left;
	}

	.scout-btn .scout-status .mod-select select {
		padding: 3px 10px 3px 3px;
		-webkit-transform: scale(0.75);
		transform: scale(0.75);
	}

	.scout-btn .scout-status .mod-select i {
		margin-right: 5px;
		font-size: 1rem;
	}

	.scout-btn .scout-userdetail {
		width: 100%;
		margin-top: 8px;
	}

	.scout-btn .scout-userdetail a.button-icon {
		width: 100%;
		padding: 8px;
		font-size: 1.3rem;
	}

	.scout-btn .scout-message {
		margin-top: 8px;
	}

	.scout-btn .scout-message .button-mini {
		width: 100%;
		padding-right: 8px;
	}

	.scout-btn .scout-message .button-mini i {
		display: none;
	}

	.scout-memo {
		display: flex;
		flex-basis: 100%;
		flex-wrap: nowrap;
		width: 100%;
		margin: 10px 0 0 0;
		padding: 10px 0 0;
		border-top: 1px dotted #cacad9;
	}

	.scout-memo .scout-memo-list {
		flex: 1;
		min-width: 0;
		margin: 0 5px;
	}

	.scout-memo .scout-memo-list ul {
		display: block;
		overflow: hidden;
	}

	.scout-memo .scout-memo-list ul li {
		overflow: hidden;
		margin-bottom: 8px;
		padding-bottom: 5px;
		border-bottom: 1px solid #ebebf3;
		font-size: 1.3rem;
		line-height: 1.6;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.scout-memo .scout-memo-list ul li:last-child {
		margin-bottom: 0;
		padding-bottom: 0;
		border-bottom: none;
	}

	.scout-memo .scout-memo-list ul li span {
		display: none;
	}

	.scout-memo .scout-memo-more {
		white-space: nowrap;
	}

	.scout-memo .scout-memo-more button {
		background-color: unset;
		color: #2196f3;
		text-decoration: underline;
	}

	.scout-memo .scout-memo-more button i {
		display: inline-block;
		padding: 0;
	}

	.scout-memo .scout-memo-more button.show i {
		-webkit-transform: rotate(-180deg);
		transform: rotate(-180deg);
	}

	.scout-memo-modal {
		background-color: #fff;
	}

	.scout-memo-modal ul {
		display: block;
	}

	.scout-memo-modal ul li {
		display: block;
		position: relative;
		margin-bottom: 8px;
		padding-right: 6em;
		padding-bottom: 5px;
		border-bottom: 1px solid #ebebf3;
		font-size: 1.4rem;
		line-height: 1.6;
	}

	.scout-memo-modal ul li span {
		position: absolute;
		right: 0;
	}

	.scout-select {
		flex-wrap: nowrap !important;
		align-items: center;
		min-width: auto;
	}

	.scout-selectjobimg img {
		width: 50px;
	}

	.scout-selectjobname {
		flex-grow: 1;
		width: 40%;
		min-width: 0;
		font-size: 1.2rem;
	}

	.scout-selectjobname h3 {
		font-size: 1.4rem;
	}

	.scout-selectjobname span {
		margin-top: 0.1em;
	}

	.scout-selectjobname * {
		display: block;
		overflow: hidden;
		white-space: nowrap !important;
		text-overflow: ellipsis !important;
	}

	.scout-selectjobname .mod-label.label-spot {
		display: inline-block;
	}

	.scout-selectnum {
		padding-bottom: 0.5em;
		font-size: 1.4rem;
		line-height: 1;
		text-align: center;
		white-space: nowrap;
	}

	.scout-selectnum strong {
		font-size: 3rem;
	}

	.scout-selectnum #remaining_user_count {
		font-size: 1rem;
	}

	.scout-selectbtn {
		width: 40%;
		font-size: 1.2rem;
		text-align: right;
	}

	.scout-selectbtn br {
		display: inline-block !important;
	}

	.scout-selectbtn .mod-button {
		padding: 10px !important;
	}

	.scout-selectbtn .mod-button i {
		display: none;
	}

	.center-box {
		box-sizing: border-box;
		width: 100%;
		margin: 0 auto 15px;
		padding: 25px 15px 0;
		border-top: 1px dashed #cacad9;
		border-bottom: 1px dashed #cacad9;
	}

	.center-box.borderless {
		margin-bottom: 0;
		border: none;
	}

	.center-box .center-box-title {
		box-sizing: border-box;
		margin-bottom: 10px;
	}

	.center-box .center-box-title span.lead {
		font-size: 1.8rem;
	}

	.center-box .center-box-contents {
		box-sizing: border-box;
		margin-bottom: 15px;
	}

	.center-box .center-box-contents textarea.mod-textarea {
		height: 400px;
	}

	.center-box .center-box-button {
		box-sizing: border-box;
		padding: 0 0 25px;
		text-align: center;
	}

	.center-box .center-box-button .mod-button {
		width: 100%;
	}

	.scout-set-detail {
		margin: 0 auto;
	}

	.scout-set-detail > *:last-child {
		margin-bottom: 20px;
	}

	.scout-set-detail > .mod-txt14 {
		font-weight: bold;
	}

	.scout-set-detail > p {
		margin-bottom: 5px;
	}

	.scout-set-detail .scout-set-detail-inner {
		display: flex;
		flex-direction: column;
		margin: 15px 0 20px;
		gap: 8px;
	}

	.scout-set-detail .scout-set-detail-inner .detail-img-cover {
		margin: 0 0 10px 0;
	}

	.scout-set-detail .scout-set-detail-inner .detail-img-cover > img {
		width: 100%;
		height: auto;
	}

	.scout-set-detail .scout-set-detail-inner .detail-txt-cover .detail-list {
		color: #000;
		font-size: 1.4rem;
	}

	.scout-set-detail .scout-set-detail-inner .detail-txt-cover .detail-list .detail-li {
		display: flex;
		margin-bottom: 8px;
		line-height: 1.4;
	}

	.scout-set-detail .scout-set-detail-inner .detail-txt-cover .detail-list .detail-li.sp_hide {
		display: none;
	}

	.scout-set-detail .scout-set-detail-inner .detail-txt-cover .detail-list .detail-li > span.number {
		display: inline-block;
		display: flex;
		flex-shrink: 0;
		justify-content: center;
		align-items: center;
		width: 16px;
		height: 16px;
		margin-right: 6px;
		border-radius: 5px 0 5px 0;
		background: #0062cc;
		color: #fafafa;
		font-size: 1rem;
	}

	.modal-set-detail {
		margin: 0 auto;
	}

	.modal-set-detail > *:last-child {
		margin-bottom: 20px;
	}

	.modal-set-detail > p {
		margin-bottom: 5px;
	}

	.modal-set-detail .red {
		color: #b40000;
	}

	.modal-set-detail .blue {
		color: #2658ce;
	}

	.modal-set-detail .detail-area .detail-title {
		margin-bottom: 10px;
		padding: 3px;
		border-top: 1px solid #2658ce;
		border-bottom: 1px solid #2658ce;
		color: #2658ce;
		font-size: 1.6rem;
		text-align: center;
	}

	.modal-set-detail .detail-area .detail-inner .detail-list .detail-li {
		justify-content: center;
		align-items: center;
		margin-bottom: 5px;
	}

	.modal-set-detail .detail-area .detail-inner .detail-list .detail-li .detail-box {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 85px;
		border-radius: 5px;
		background: #fafafa;
	}

	.modal-set-detail .detail-area .detail-inner .detail-list .detail-li .detail-box.heart svg {
		width: 226px;
		height: 57px;
	}

	.modal-set-detail .detail-area .detail-inner .detail-list .detail-li .detail-box.scout {
		flex-direction: column;
		flex-wrap: wrap;
		font-size: 1.8rem;
	}

	.modal-set-detail .detail-area .detail-inner .detail-list .detail-li .detail-box.scout .scout-top-text {
		margin-bottom: 5px;
		padding: 5px 10px;
		border-radius: 3px;
		background: #ebebf3;
	}

	.modal-set-detail .detail-area .detail-inner .detail-list .detail-li .detail-box.scout .red {
		color: #b40000;
	}

	.modal-set-detail .detail-area .detail-inner .detail-list .detail-li .detail-box.message .message-box {
		padding: 10px;
		background: #ebebf3;
		color: #84849a;
	}

	.modal-set-detail .detail-area .detail-inner .detail-list .detail-li .detail-box.message .message-box .badge {
		display: inline-block;
		margin-right: 3px;
		padding: 3px;
		border-radius: 3px;
		background: #4a4a4a;
		color: #fafafa;
		font-size: 1.1rem;
	}

	.modal-set-detail .detail-area .detail-inner .detail-list .detail-li .detail-box.message .message-box .badge.blue {
		background: #2d7ac9;
	}

	.modal-set-detail .detail-area .detail-inner .detail-list .detail-li .detail-box.message .message-box .badge.pink {
		background: #fc7576;
	}

	.modal-set-detail .detail-area .detail-inner .detail-list .detail-li .detail-box.auto-pic01 svg {
		width: 292px;
		height: 63px;
	}

	.modal-set-detail .detail-area .detail-inner .detail-list .detail-li .detail-box.auto-pic02 svg {
		width: 262px;
		height: 71px;
	}

	.modal-set-detail .detail-area .detail-inner .detail-list .detail-li .detail-box.auto-pic03 svg {
		width: 250px;
		height: 53px;
	}

	.modal-set-detail .detail-area .detail-inner .detail-list .detail-li .detail-text {
		align-items: center;
		padding: 10px 15px;
	}

	.modal-set-detail .detail-area .detail-inner .detail-list .detail-li .detail-text .red {
		color: #b40000;
	}

	.modal-set-detail .detail-button {
		margin-top: 20px;
		margin-top: 10px;
	}

	.modal-set-detail .detail-button a {
		display: block;
		transition: ease-in-out 0.3s;
	}

	.modal-set-detail .detail-button a.btn-border-service {
		width: 100%;
		margin: 0 auto 15px;
		border: 1px solid #2658ce;
		background: #fafafa;
		color: #2658ce;
		font-size: 1.4rem;
		font-weight: bold;
	}

	.modal-set-detail .detail-button a.btn-border-service:hover {
		background: #2658ce;
		color: #fafafa;
	}

	.modal-set-detail .detail-button a.link-dark {
		display: inline-block;
		color: #4a4a4a;
	}

	.modal-set-detail .detail-button a.link-dark i:before {
		color: #4a4a4a;
	}

	.modal-set-detail .detail-button a.link-dark:hover {
		opacity: 0.7;
	}

	.modal-gr-back {
		padding: 30px 20px;
		background-color: #ebebf3;
	}

	.modal-gr-back > img {
		width: 100%;
		height: auto;
	}

	.modal-gr-back .point-graf-img {
		width: 100%;
	}

	.modal-gr-back .point-graf-img img {
		width: 100%;
		height: auto;
	}
}

@media print, screen and (min-width: 768px) {
	.scout-list-inner {
		position: relative;
		overflow: hidden;
		margin-top: 20px;
		border: 1px solid #cacad9;
		border-radius: 5px;
	}

	.scout-list-inner .box-listwrap {
		border-top: 1px solid #cacad9;
		border-bottom: none;
	}

	.scout-list-inner .box-listwrap:nth-child(2) {
		border-top: none;
	}

	.scout-list-inner .box-listwrap .scout-userdata.checkbox label:after {
		content: none;
	}

	.scout-list-inner .box-listwrap .scout-userdata.checkbox .scout-usersex {
		padding-left: 45px;
	}

	.scout-list-inner .box-listwrap .scout-userdata.checkbox .scout-usersex i {
		left: 0;
	}

	.scout-list-inner .box-listwrap .scout-userdata.checkbox .scout-usersex.icon-check:before {
		content: none;
	}

	.scout-list-inner .box-listwrap .scout-userdata.checkbox .scout-usersex.icon-check:after {
		content: none;
	}

	.box-listwrap {
		display: flex;
		align-items: center;
		min-width: 0;
		padding: 15px;
		border-bottom: 1px solid #cacad9;
	}

	.box-listwrap > div {
		margin-right: 10px;
	}

	.box-listwrap > div:last-child {
		margin: auto;
	}

	.box-listwrap .box-listitem-stretch {
		flex: 1;
	}

	.box-listwrap.list-scout {
		position: relative;
		flex-wrap: wrap;
	}

	.box-listwrap.list-scout .scout-btn {
		margin: auto;
	}

	.box-listwrap.list-scout button.list-close {
		display: flex;
		position: absolute;
		z-index: 2;
		top: 10px;
		right: 10px;
		justify-content: center;
		align-items: center;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background: #f4f4f9;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
		transition: ease-in-out 0.3s;
	}

	.box-listwrap.list-scout button.list-close i:before {
		color: #cacad9;
		font-size: 1.8rem;
		transition: ease-in-out 0.3s;
	}

	.box-listwrap.list-scout button.list-close:hover {
		background: #cacad9;
	}

	.box-listwrap.list-scout button.list-close:hover i:before {
		color: #fafafa;
	}

	.box-listwrap.list-scout .scout-memo {
		margin-top: 10px;
	}

	.box-listwrap.list-search-save {
		justify-content: left;
		align-items: center;
		background: #fff;
	}

	.box-listwrap.list-search-save .circle-cover {
		width: 36px;
	}

	.box-listwrap.list-search-save .circle-cover .circle-badge {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 28px;
		height: 28px;
		border-radius: 50%;
		background: #b40000;
		color: #fafafa;
		font-size: 1.1rem;
	}

	.box-listwrap.list-search-save .scout-save-box {
		display: block;
		width: calc( 100% - ( 36px + 242px));
		color: #4a4a4a;
	}

	.box-listwrap.list-search-save .scout-save-box:hover {
		opacity: 0.8;
	}

	.box-listwrap.list-search-save .scout-save-box .save-title {
		margin-bottom: 5px;
	}

	.box-listwrap.list-search-save .scout-save-box .save-list {
		padding-right: 20px;
	}

	.box-listwrap.list-search-save .save-icon-cover {
		display: flex;
		align-items: center;
		width: 242px;
	}

	.box-listwrap .button-scout {
		display: flex;
		position: relative;
		justify-content: center;
		align-items: center;
		width: 152px;
		height: 28px;
		padding-left: 15px;
		border: 1px solid #2658ce;
		border-radius: 14px;
		background: #fafafa;
		color: #2658ce;
		font-size: 1.2rem;
		font-weight: bold;
		transition: ease-in-out 0.3s;
	}

	.box-listwrap .button-scout:hover {
		background: #2658ce;
		color: #fafafa;
	}

	.box-listwrap .button-scout:hover .icon-scout:before {
		color: #fafafa;
	}

	.box-listwrap .button-scout .icon-scout {
		position: absolute;
		top: 6px;
		left: 7px;
		font-size: 1.6rem;
		transition: ease-in-out 0.3s;
	}

	.box-listwrap .button-scout .icon-scout:before {
		color: #2658ce;
	}

	.box-listwrap .icon-link {
		display: inline-block;
		margin-left: 22px;
		transition: ease-in-out 0.3s;
	}

	.box-listwrap .icon-link i:before {
		font-size: 1.8rem;
		transition: ease-in-out 0.3s;
	}

	.box-listwrap .icon-link :hover {
		opacity: 0.7;
	}

	.active-cover {
		display: flex;
		position: absolute;
		z-index: 2;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		background: rgba(74, 74, 74, 0.5);
	}

	.active-cover .active-text {
		color: #fafafa;
		font-size: 1.6rem;
	}

	.active-cover .active-text .tab {
		display: inline-block;
		margin: 0 5px;
		padding: 2px 15px;
		border-radius: 18px;
		background-color: #2658ce;
		color: #fafafa;
	}

	.list-cassette-detail {
		display: flex;
		align-items: center;
		padding: 10px 10px;
		border-radius: 6px 6px 0 0;
		background: #ebebf3;
		font-size: 1.2rem;
	}

	.list-cassette-detail .message-new {
		width: 52px;
	}

	.list-cassette-detail .message-title {
		width: calc( 100% - ( 40px + 255px ));
	}

	.list-cassette-detail .message-save-cover {
		display: flex;
		text-align: center;
	}

	.list-cassette-detail .message-save-cover .message-save-button {
		width: 152px;
	}

	.list-cassette-detail .message-save-cover .message-save-file {
		width: 32px;
		margin-left: 16px;
	}

	.list-cassette-detail .message-save-cover .message-save-trash {
		width: 32px;
		margin-left: 10px;
	}

	.scout-sent {
		background-color: #c5e3e6;
	}

	.scout-sent .scout-usersex:after {
		background-color: #fff;
	}

	.scout-reaction {
		background-color: #ffdfd5;
	}

	.scout-reaction .scout-userdata .scout-usersex:after {
		background-color: #fff;
	}

	.scout-reaction .scout-userdata input[disabled] + .scout-usersex:after {
		content: '';
		display: block;
		position: absolute;
		z-index: 1;
		top: 0;
		bottom: 0;
		left: 0;
		width: 18px;
		height: 18px;
		margin: auto;
		border-radius: 3px;
		opacity: 0.8;
	}

	.scout-reaction .scout-userdata input[disabled] + .scout-usersex:before {
		content: '\e919';
		display: inline-block;
		position: absolute;
		z-index: 2;
		top: 0;
		bottom: 0;
		left: 0;
		width: 18px;
		height: 18px;
		margin: auto;
		opacity: 0.5;
		color: #4a4a4a;
		font-size: 1.1rem;
		line-height: 1.8;
		text-align: center;
	}

	.scout-follow {
		background-color: #ffdfd5;
	}

	.scout-userdata {
		flex: 1;
		min-width: 0;
	}

	.scout-userdata.checkbox label {
		display: block;
		margin-right: 0;
	}

	.scout-userdata.checkbox input:checked + label:after {
		background-color: #0fd848;
	}

	.scout-userdata.checkbox input:checked + label * {
		color: #4a4a4a;
		font-weight: normal;
	}

	.scout-userdata.checkbox input:checked + label * .mod-label.label-coution {
		color: #fff;
	}

	.scout-userdata.checkbox input:checked + label * .mod-label.label-spot {
		color: #fff;
	}

	.scout-userdata.checkbox input:checked + label * strong {
		font-weight: bold;
	}

	.scout-userdata.checkbox input:checked + label .scout-userinfo-fav .scout-userinfo-top .left-status {
		color: #383737;
	}

	.scout-userdata.checkbox input:checked + label .scout-userinfo-fav .scout-userinfo-top .left-status .jobs {
		color: #383737;
		font-weight: bold;
	}

	.scout-userdata.checkbox input:checked + label .scout-userinfo-fav .scout-userinfo-top .left-status .jobs .icon-fire {
		margin-right: 4px;
	}

	.scout-userdata.checkbox input:checked + label .scout-userinfo-fav .scout-userinfo-top .left-status .sex-old {
		color: #383737;
		font-weight: bold;
	}

	.scout-userdata.checkbox input:checked + label .scout-userinfo-fav .scout-userinfo-top .left-status .sex-old .sex {
		color: #383737;
		font-weight: bold;
	}

	.scout-userdata.checkbox input:checked + label .scout-userinfo-fav .scout-userinfo-top .list-status li .text {
		color: #000;
	}

	.scout-userdata.checkbox input:checked + label .scout-userinfo-fav .scout-userinfo-top .list-status li.fav-li.is-on .text {
		color: #ff3b4a;
	}

	.scout-userdata.checkbox input:checked + label .scout-userinfo-fav .scout-userinfo-top .list-status li.scout-li.is-on .text {
		color: #264ca5;
	}

	.scout-userdata.checkbox input:checked + label .scout-userinfo-fav .scout-userinfo-top .list-status li.date-li.is-on .text {
		color: #ff3b4a;
	}

	.scout-userdata.checkbox input:checked + label .scout-userinfo-fav .scout-userinfo-top .list-status li.date-li.is-on02 .text {
		color: #ffb100;
	}

	.scout-userdata .scout-usersex {
		position: relative;
		padding-left: 65px;
	}

	.scout-userdata .scout-usersex > i {
		display: flex;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 25px;
		justify-content: center;
		align-items: center;
		margin: auto;
		font-size: 3.3rem;
	}

	.scout-userdata .scout-usersex > i.icon-women:before {
		color: #f06;
	}

	.scout-userdata.is-simple {
		display: flex;
	}

	.scout-userdata.is-simple .scout-usersex {
		padding-left: 40px;
	}

	.scout-userdata.is-simple .scout-usersex > i {
		left: 0;
		font-size: 3.8rem;
	}

	.scout-userdata.is-simple .scout-userinfo-fav {
		margin-bottom: 0;
	}

	.scout-userdata.is-simple .scout-userinfo-fav .scout-userinfo-top {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
	}

	.scout-userdata.is-simple .scout-userinfo-fav .scout-userinfo-top .left-status {
		display: flex;
		align-items: center;
		min-width: auto;
	}

	.scout-userdata.is-simple .scout-userinfo-fav .scout-userinfo-top .left-status .jobs {
		margin-right: 10px;
		margin-bottom: 2px;
	}

	.scout-userdata.is-simple .scout-userinfo-fav .scout-userinfo-top .left-status .sex-old {
		width: 120px;
		margin-right: 10px;
	}

	.scout-userdata.is-simple .scout-userinfo-fav .scout-userinfo-top .left-status .icon-fire {
		margin-right: 4px;
	}

	.scout-userdata.is-simple .scout-userinfo-fav .scout-userinfo-top .mod-label.date-status {
		padding: 4px 8px;
		font-weight: bold;
	}

	.scout-userdata.is-simple .scout-userinfo-fav .scout-userinfo-top .mod-label.date-status.is-new {
		background: #ffed00;
	}

	.scout-userdata.is-simple .scout-userinfo-fav .scout-userinfo-bottom {
		margin-top: 5px;
	}

	.scout-userdata .scout-userinfo {
		display: flex;
		align-items: center;
		margin-right: 0;
		margin-bottom: 5px;
	}

	.scout-userdata .scout-userinfo > * {
		margin-right: 10px;
	}

	.scout-userdata .scout-userinfo .scout-userinfo1 {
		display: inline-block;
		position: relative;
		white-space: nowrap;
	}

	.scout-userdata .scout-userinfo .scout-userinfo1 strong {
		display: inline-block;
		font-size: 1.8rem;
		white-space: nowrap;
	}

	.scout-userdata .scout-userinfo .scout-userinfo1 .scout-userinfo-no {
		font-size: 1.8rem;
		font-weight: bold;
		white-space: nowrap;
	}

	.scout-userdata .scout-userinfo .scout-userinfo1 .scout-userinfo-no::before {
		content: 'No.';
		font-size: 1.2rem;
	}

	.scout-userdata .scout-userinfo2 {
		min-width: 0;
	}

	.scout-userdata .scout-userinfo2 em {
		display: inline-block;
		overflow: hidden;
		width: 100%;
		font-style: normal;
		vertical-align: bottom;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.scout-userdata .scout-userinfo2 em i {
		margin-right: 5px;
		vertical-align: bottom;
	}

	.scout-userdata .scout-userinfo2 em i:before {
		color: #84849a;
		vertical-align: text-bottom;
	}

	.scout-userdata .scout-userinfo-fav {
		display: flex;
		flex-direction: column;
		margin-right: 0;
		margin-bottom: 5px;
	}

	.scout-userdata .scout-userinfo-fav .scout-userinfo-top {
		display: flex;
	}

	.scout-userdata .scout-userinfo-fav .scout-userinfo-top .left-status {
		min-width: 118px;
		font-weight: bold;
		line-height: 1;
	}

	.scout-userdata .scout-userinfo-fav .scout-userinfo-top .left-status .jobs {
		display: block;
		margin-bottom: 8px;
		font-size: 1.9rem;
	}

	.scout-userdata .scout-userinfo-fav .scout-userinfo-top .left-status .jobs .mod-label {
		display: inline-block;
		margin-right: 5px;
		font-size: 1.1rem;
	}

	.scout-userdata .scout-userinfo-fav .scout-userinfo-top .left-status .jobs .icon-fire {
		margin-right: 4px;
	}

	.scout-userdata .scout-userinfo-fav .scout-userinfo-top .left-status .sex-old {
		display: block;
		font-size: 1.4rem;
	}

	.scout-userdata .scout-userinfo-fav .scout-userinfo-top .left-status .sex-old .number {
		display: none;
	}

	.scout-userdata .scout-userinfo-fav .scout-userinfo-top .list-status {
		display: flex;
		margin-left: 15px;
		color: #000;
		font-size: 1rem;
		gap: 10px;
	}

	.scout-userdata .scout-userinfo-fav .scout-userinfo-top .list-status li {
		text-align: center;
	}

	.scout-userdata .scout-userinfo-fav .scout-userinfo-top .list-status li .icon {
		display: inline-block;
		min-width: 26px;
		height: 26px;
		margin: 0 auto 3px;
		padding-top: 4px;
		border: 1px solid #cacad9;
		border-radius: 13px;
		color: #84849a;
		font-size: 1.2rem;
		text-align: center;
		vertical-align: middle;
	}

	.scout-userdata .scout-userinfo-fav .scout-userinfo-top .list-status li .text {
		display: block;
		width: 100%;
	}

	.scout-userdata .scout-userinfo-fav .scout-userinfo-top .list-status li.fav-li .icon {
		padding-top: 6px;
	}

	.scout-userdata .scout-userinfo-fav .scout-userinfo-top .list-status li.fav-li .icon svg {
		fill: #cacad9;
	}

	.scout-userdata .scout-userinfo-fav .scout-userinfo-top .list-status li.fav-li.is-on {
		color: #ff3b4a;
	}

	.scout-userdata .scout-userinfo-fav .scout-userinfo-top .list-status li.fav-li.is-on .icon {
		border: 1px solid #ff3b4a;
		background-color: #ff3b4a;
	}

	.scout-userdata .scout-userinfo-fav .scout-userinfo-top .list-status li.fav-li.is-on .icon svg {
		fill: #fafafa;
	}

	.scout-userdata .scout-userinfo-fav .scout-userinfo-top .list-status li.scout-li .icon {
		padding-top: 4px;
		font-size: 1.2rem;
	}

	.scout-userdata .scout-userinfo-fav .scout-userinfo-top .list-status li.scout-li.is-on {
		color: #264ca5;
	}

	.scout-userdata .scout-userinfo-fav .scout-userinfo-top .list-status li.scout-li.is-on .icon {
		border: 1px solid #264ca5;
		background-color: #264ca5;
		color: #fafafa;
	}

	.scout-userdata .scout-userinfo-fav .scout-userinfo-top .list-status li.date-li .icon {
		padding: 4px 5px 0;
		font-size: 1.2rem;
	}

	.scout-userdata .scout-userinfo-fav .scout-userinfo-top .list-status li.date-li.is-on {
		color: #ff3b4a;
	}

	.scout-userdata .scout-userinfo-fav .scout-userinfo-top .list-status li.date-li.is-on .icon {
		border: 1px solid #ff3b4a;
		background-color: #ff3b4a;
		color: #fafafa;
	}

	.scout-userdata .scout-userinfo-fav .scout-userinfo-top .list-status li.date-li.is-on02 {
		color: #ffb100;
	}

	.scout-userdata .scout-userinfo-fav .scout-userinfo-top .list-status li.date-li.is-on02 .icon {
		border: 1px solid #ffb100;
		background-color: #ffb100;
		color: #fafafa;
	}

	.scout-userdata .scout-userinfo-fav .scout-userinfo-bottom {
		margin-top: 10px;
	}

	.scout-userdata .scout-userinfo-fav .scout-userinfo-bottom .scout-userinfo-list {
		display: flex;
		flex-wrap: wrap;
	}

	.scout-userdata .scout-userinfo-fav .scout-userinfo-bottom .scout-userinfo-list li {
		margin-right: 12px;
		color: #000;
		font-size: 1.4rem;
		font-weight: 400;
	}

	.scout-userdata .scout-userinfo-fav .scout-userinfo-bottom .scout-userinfo-list li i {
		display: inline-block;
		margin-right: 5px;
		font-size: 1.6rem;
	}

	.scout-userdata .scout-userinfo-fav .scout-userinfo-bottom .scout-userinfo-list li i:before {
		color: #4a4a4a;
	}

	.scout-userdata .scout-userinfo-fav .scout-userinfo-bottom .scout-userinfo-list li.number-li {
		padding-top: 2px;
		color: #84849a;
		font-size: 1.2rem;
		vertical-align: bottom;
	}

	.scout-userdata .scout-history {
		display: inline-block;
		padding: 3px 0;
		color: #4a4a4a;
		font-size: 1.2rem;
		vertical-align: text-bottom;
		text-decoration: underline;
	}

	.scout-list-bottom .mod-link {
		padding: 10px 10px 0 10px;
	}

	.scout-list-bottom .mod-link-not {
		padding: 10px 10px 0 10px;
		color: #84849a;
		pointer-events: none;
	}

	.scout-list-bottom .mod-c {
		padding-top: 15px;
	}

	.scout-list-bottom .mod-c .mod-button {
		min-width: 480px;
		padding: 10px;
	}

	.scout-btn {
		display: flex;
		gap: 8px;
	}

	.scout-btn .scout-status {
		white-space: nowrap;
	}

	.scout-btn .scout-status .mod-select select {
		font-size: 1.2rem;
	}

	.scout-btn .scout-userdetail {
		white-space: nowrap;
	}

	.scout-btn .scout-userdetail a.button-icon {
		cursor: pointer;
		font-size: 1.2rem;
	}

	.scout-btn .scout-userdetail a.button-icon i {
		margin-left: 8px;
	}

	.scout-btn .scout-userdetail a.button-icon i:before {
		font-size: 2rem;
	}

	.scout-memo {
		display: flex;
		flex-basis: 100%;
		flex-wrap: nowrap;
		width: 100%;
		margin-top: 10px;
		padding: 10px 0 0;
		border-top: 1px dotted #cacad9;
	}

	.scout-memo .scout-memo-list {
		flex: 1;
		margin: 0 5px;
	}

	.scout-memo .scout-memo-list ul {
		overflow: hidden;
	}

	.scout-memo .scout-memo-list ul li {
		position: relative;
		margin-bottom: 8px;
		padding-right: 6em;
		padding-bottom: 5px;
		border-bottom: 1px solid #ebebf3;
		font-size: 1.3rem;
		line-height: 1.6;
	}

	.scout-memo .scout-memo-list ul li.list-memo-body {
		word-break: break-all;
	}

	.scout-memo .scout-memo-list ul li:last-child {
		margin-bottom: 0;
		padding-bottom: 0;
		border-bottom: none;
	}

	.scout-memo .scout-memo-list ul li span {
		position: absolute;
		top: 0;
		right: 0;
		text-align: right;
	}

	.scout-memo .scout-memo-more {
		white-space: nowrap;
	}

	.scout-memo .scout-memo-more button {
		background-color: unset;
		color: #2196f3;
		text-decoration: underline;
	}

	.scout-memo .scout-memo-more button i {
		display: inline-block;
		padding: 0;
	}

	.scout-memo .scout-memo-more button.show i {
		-webkit-transform: rotate(-180deg);
		transform: rotate(-180deg);
	}

	.scout-select {
		flex-wrap: nowrap !important;
		align-items: center;
	}

	.scout-selectjobimg {
		width: 85px;
	}

	.scout-selectjobimg .joblist-img {
		margin-right: 0;
	}

	.scout-selectjobname {
		width: calc(40% - 85px);
	}

	.scout-selectjobname h3 {
		font-size: 1.8rem;
	}

	.scout-selectjobname * {
		display: block;
		overflow: hidden;
		white-space: nowrap !important;
		text-overflow: ellipsis !important;
	}

	.scout-selectjobname .mod-label.label-spot {
		display: inline-block;
	}

	.scout-selectnum {
		width: 20%;
		font-size: 2rem;
		line-height: 0.9;
		text-align: center;
	}

	.scout-selectnum strong {
		font-size: 5rem;
	}

	.scout-selectnum #remaining_user_count {
		font-size: 1.4rem;
	}

	.scout-selectbtn {
		width: 40%;
		text-align: right;
	}

	.center-box {
		box-sizing: border-box;
		width: 100%;
		margin: 0 auto 25px;
		padding: 25px 50px 0;
		border-top: 1px dashed #cacad9;
		border-bottom: 1px dashed #cacad9;
	}

	.center-box.borderless {
		margin-bottom: 0;
		border: none;
	}

	.center-box .center-box-title {
		box-sizing: border-box;
		margin-bottom: 10px;
	}

	.center-box .center-box-title span.lead {
		font-size: 1.8rem;
	}

	.center-box .center-box-contents {
		box-sizing: border-box;
		margin-bottom: 15px;
	}

	.center-box .center-box-contents textarea.mod-textarea {
		height: 400px;
	}

	.center-box .center-box-button {
		box-sizing: border-box;
		padding: 0 15px 25px;
		text-align: center;
	}

	.center-box .center-box-button .mod-button {
		width: 300px;
	}

	.scout-set-detail {
		max-width: 800px;
		margin: 0 auto;
	}

	.scout-set-detail > *:last-child {
		margin-bottom: 20px;
	}

	.scout-set-detail > p {
		margin-bottom: 5px;
		line-height: 1.6;
	}

	.scout-set-detail > .mod-txt14 {
		font-weight: bold;
	}

	.scout-set-detail .scout-set-detail-inner {
		display: flex;
		margin: 15px 0 20px;
	}

	.scout-set-detail .scout-set-detail-inner .detail-img-cover {
		max-width: 500px;
		margin: 0 15px 10px 0;
	}

	.scout-set-detail .scout-set-detail-inner .detail-img-cover > img {
		width: 100%;
		height: auto;
	}

	.scout-set-detail .scout-set-detail-inner .detail-txt-cover {
		padding-top: 5px;
	}

	.scout-set-detail .scout-set-detail-inner .detail-txt-cover .detail-list {
		color: #000;
		font-size: 1.4rem;
	}

	.scout-set-detail .scout-set-detail-inner .detail-txt-cover .detail-list .detail-li {
		display: flex;
		margin-bottom: 8px;
		line-height: 1.4;
	}

	.scout-set-detail .scout-set-detail-inner .detail-txt-cover .detail-list .detail-li.sp_hide {
		display: none;
	}

	.scout-set-detail .scout-set-detail-inner .detail-txt-cover .detail-list .detail-li > span.number {
		display: inline-block;
		display: flex;
		flex-shrink: 0;
		justify-content: center;
		align-items: center;
		width: 16px;
		height: 16px;
		margin-right: 6px;
		border-radius: 5px 0 5px 0;
		background: #0062cc;
		color: #fafafa;
		font-size: 1rem;
	}

	.modal-set-detail {
		max-width: 800px;
		margin: 0 auto;
	}

	.modal-set-detail > *:last-child {
		margin-bottom: 20px;
	}

	.modal-set-detail > p {
		margin-bottom: 5px;
		line-height: 1.6;
	}

	.modal-set-detail .red {
		color: #b40000;
	}

	.modal-set-detail .blue {
		color: #2658ce;
	}

	.modal-set-detail .detail-area .detail-title {
		margin-bottom: 20px;
		padding: 3px;
		border-top: 1px solid #2658ce;
		border-bottom: 1px solid #2658ce;
		color: #2658ce;
		font-size: 1.6rem;
		text-align: center;
	}

	.modal-set-detail .detail-area .detail-inner .detail-list .detail-li {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		margin-bottom: 10px;
	}

	.modal-set-detail .detail-area .detail-inner .detail-list .detail-li .detail-box {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 340px;
		height: 85px;
		border-radius: 5px;
		background: #fafafa;
	}

	.modal-set-detail .detail-area .detail-inner .detail-list .detail-li .detail-box.heart svg {
		width: 226px;
		height: 57px;
	}

	.modal-set-detail .detail-area .detail-inner .detail-list .detail-li .detail-text {
		align-items: center;
		width: 340px;
		margin-left: 15px;
		padding: 10px;
		text-align: left;
	}

	.modal-set-detail .detail-area .detail-inner .detail-list .detail-li .detail-text .red {
		color: #b40000;
	}

	.modal-set-detail .detail-button {
		margin-top: 20px;
	}

	.modal-set-detail .detail-button a {
		display: block;
		transition: ease-in-out 0.3s;
	}

	.modal-set-detail .detail-button a.btn-border-service {
		width: 345px;
		margin: 0 auto 15px;
		border: 1px solid #2658ce;
		background: #fafafa;
		color: #2658ce;
		font-size: 1.6rem;
		font-weight: bold;
	}

	.modal-set-detail .detail-button a.btn-border-service:hover {
		background: #2658ce;
		color: #fafafa;
	}

	.modal-set-detail .detail-button a.link-dark {
		display: inline-block;
		color: #4a4a4a;
	}

	.modal-set-detail .detail-button a.link-dark i:before {
		color: #4a4a4a;
	}

	.modal-set-detail .detail-button a.link-dark:hover {
		opacity: 0.7;
	}

	.modal-gr-back {
		padding: 30px 20px;
		background-color: #ebebf3;
	}

	.modal-gr-back .point-graf-img {
		width: 100%;
		min-width: 726px;
	}
}

.scout-list-error-notes {
	position: relative;
	margin-top: 15px;
	color: #b40000;
	font-weight: bold;
	line-height: 1.5;
}

@media print, screen and (min-width: 768px) {
	.scout-list-error-notes {
		padding-left: 24px;
		text-align: center;
	}
}

.scout-list-error-notes .icon-coution {
	position: relative;
	top: 2px;
	font-size: 1.8rem;
}

.box-listwrap .scout-list-error-box {
	pointer-events: none;
}

.box-listwrap .scout-list-error-button {
	border: solid 1px #84849a;
	background: #cacad9;
	color: #84849a;
	pointer-events: none;
}

.box-listwrap .scout-list-error-button .icon-scout::before {
	color: #84849a;
}

.box-listwrap .scout-list-error-button:hover {
	border: solid 1px #84849a;
	background: #cacad9;
	color: #84849a;
}

.box-listwrap .scout-list-error-button:hover .icon-scout::before {
	color: #84849a;
}

.scout-list-inner .list-search-save .save-icon-cover .button-scout.is-stop,
.scout-list-inner .list-search-save .scout-save-box.is-stop {
	opacity: 0.8;
}

.scout-list-inner .list-search-save .save-icon-cover .button-scout.is-stop:hover,
.scout-list-inner .list-search-save .save-icon-cover .button-scout.is-stop:active,
.scout-list-inner .list-search-save .scout-save-box.is-stop:hover,
.scout-list-inner .list-search-save .scout-save-box.is-stop:active {
	position: relative;
	z-index: 999;
}

.scout-list-inner .list-search-save .save-icon-cover .button-scout.is-stop:hover::after,
.scout-list-inner .list-search-save .save-icon-cover .button-scout.is-stop:active::after,
.scout-list-inner .list-search-save .scout-save-box.is-stop:hover::after,
.scout-list-inner .list-search-save .scout-save-box.is-stop:active::after {
	content: 'サービス切り替え（8/1予定）\A までスカウト送信できません';
	display: block;
	position: absolute;
	z-index: 999;
	top: -3em;
	left: calc( 50% - 7.5em);
	width: 15em;
	background: #b40000;
	opacity: 1;
	color: white;
	font-size: 1.1rem;
	text-align: center;
	white-space: pre;
}

.scout-complete .box-listwrap:last-child {
	border-bottom: none;
}

.scout-complete-title .mod-label {
	position: relative;
	top: 3px;
}

.l-scout-list {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-self: stretch;
	padding: 12px 15px;
	border-bottom: var(--stroke-weight-1, 1px) solid var(--color-blue-82, #cacad9);
	background: #fff;
	gap: 4px;
}

.l-scout-list:last-child {
	border-bottom: none;
}

.l-scout-list-cover {
	display: flex;
	-webkit-column-gap: 8px;
	-moz-column-gap: 8px;
	column-gap: 8px;
}

.l-scout-inner {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

/* variables color */
/*
#colors

@Service #2658CE
@Job #37B500
@Career #FE590F
@tone1 #F4F4F9
@tone2 #EBEBF3
@tone3 #CACAD9
@tone4 #84849A
@tone5 #4A4A4A
*/
/* variables-color */
:root {
	/* color color palette */
	/* Gray */
	--Gray-100: #f6f3f0;
	--Gray-200: #e4e0de;
	--Gray-300: #cbc8c6;
	--Gray-400: #b2afac;
	--Gray-500: #969391;
	--Gray-600: #716e6b;
	--Gray-700: #605d5b;
	--Gray-800: #4e4b49;
	--Gray-900: #2d2b29;
	--Gray-1000: #171413;
	/* Pink */
	--Pink-100: #fef1f5;
	--Pink-200: #fbd8e2;
	--Pink-300: #f7b5c8;
	--Pink-400: #f189aa;
	--Pink-500: #e9588e;
	--Pink-600: #cb006b;
	--Pink-700: #ac0058;
	--Pink-800: #8b0647;
	--Pink-900: #57002a;
	--Pink-1000: #280010;
	/* Red */
	--Red-100: #fff1f1;
	--Red-200: #ffd8d7;
	--Red-300: #fdb4b4;
	--Red-400: #fb888b;
	--Red-500: #f5505f;
	--Red-600: #d40038;
	--Red-700: #ac1731;
	--Red-800: #920625;
	--Red-900: #5c0415;
	--Red-1000: #2f0107;
	/* Orange */
	--Orange-100: #fef2ed;
	--Orange-200: #ffdacd;
	--Orange-300: #ffb59c;
	--Orange-400: #f88d68;
	--Orange-500: #f25915;
	--Orange-600: #c04101;
	--Orange-700: #934225;
	--Orange-800: #79371f;
	--Orange-900: #4f1f0d;
	--Orange-1000: #260c04;
	/* Lime */
	--Lime-100: #f2f9e2;
	--Lime-200: #dfebbf;
	--Lime-300: #c1d293;
	--Lime-400: #a2bb4b;
	--Lime-500: #869f16;
	--Lime-600: #687c0b;
	--Lime-700: #566606;
	--Lime-800: #465408;
	--Lime-900: #2c3505;
	--Lime-1000: #121700;
	/* Green */
	--Green-100: #ecfaec;
	--Green-200: #cdf0cc;
	--Green-300: #a8daa8;
	--Green-400: #66c56c;
	--Green-500: #28af3d;
	--Green-600: #2b8735;
	--Green-700: #276d2e;
	--Green-800: #1b5a22;
	--Green-900: #0f3a14;
	--Green-1000: #021b04;
	/* Aqua */
	--Aqua-100: #e3fafe;
	--Aqua-200: #b7f0fa;
	--Aqua-300: #7edae9;
	--Aqua-400: #12c0d6;
	--Aqua-500: #1aa4b6;
	--Aqua-600: #2b7e8a;
	--Aqua-700: #176774;
	--Aqua-800: #0f5760;
	--Aqua-900: #05373f;
	--Aqua-1000: #00191d;
	/* Blue */
	--Blue-100: #f2f5fc;
	--Blue-200: #dae3f7;
	--Blue-300: #b0c7f9;
	--Blue-400: #8aaaf6;
	--Blue-500: #648cf4;
	--Blue-600: #3a63e0;
	--Blue-700: #2045da;
	--Blue-800: #142ec5;
	--Blue-900: #08118c;
	--Blue-1000: #020448;
	/* Violet */
	--Violet-100: #f4f5fa;
	--Violet-200: #dfe1f6;
	--Violet-300: #bec2f8;
	--Violet-400: #9fa3f4;
	--Violet-500: #8382f3;
	--Violet-600: #6258dd;
	--Violet-700: #5336d8;
	--Violet-800: #451dc3;
	--Violet-900: #290083;
	--Violet-1000: #104;
	/* Purple */
	--Purple-100: #f9f3f9;
	--Purple-200: #eedced;
	--Purple-300: #e2b7e1;
	--Purple-400: #d392d2;
	--Purple-500: #c46bc4;
	--Purple-600: #a247a2;
	--Purple-700: #950c98;
	--Purple-800: #7d0c7f;
	--Purple-900: #4f0050;
	--Purple-1000: #260027;
	/* Yellow */
	--Yellow-100: #fffaec;
	--Yellow-200: #feeec1;
	--Yellow-300: #fee195;
	--Yellow-400: #f7ce5a;
	--Yellow-500: #f4c200;
	--Yellow-600: #d4a800;
	--Yellow-700: #b18c00;
	--Yellow-800: #896c00;
	--Yellow-900: #5f4a00;
	--Yellow-1000: #1f1600;
}

/*
#styleguide
Box Normal
```
<div class="mod-box">
<div class="box-title">なんかのタイトル</div>
<div class="box-inner">
なんかの要素
</div>
</div>
```
*/
.mod-box {
	overflow: hidden;
	border-radius: 5px;
	background-color: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.mod-box-radius {
	overflow: hidden;
	border-radius: 6px;
}

.mod-box-border {
	border: 1px solid #cacad9;
}

.mod-box-border-dot {
	border: 1px dotted #cacad9;
}

.mod-box-shadow {
	box-shadow: none;
}

.mod-box-shadowless {
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.mod-box-padding-s {
	padding: 12px 16px;
}

.mod-border {
	border: 1px solid #cacad9;
}

.mod-border-top {
	border-top: 1px solid #cacad9;
}

.mod-border-right {
	border-right: 1px solid #cacad9;
}

.mod-border-bottom {
	border-bottom: 1px solid #cacad9;
}

.mod-border-left {
	border-left: 1px solid #cacad9;
}

.mod-border-dot {
	border: 1px dotted #cacad9;
}

.mod-border-dot-top {
	border-top: 1px dotted #cacad9;
}

.mod-border-dot-right {
	border-right: 1px dotted #cacad9;
}

.mod-border-dot-bottom {
	border-bottom: 1px dotted #cacad9;
}

.mod-border-dot-left {
	border-left: 1px dotted #cacad9;
}

.mod-border-dash {
	border: 1px dashed #cacad9;
}

.mod-border-dash-top {
	border-top: 1px dashed #cacad9;
}

.mod-border-dash-right {
	border-right: 1px dashed #cacad9;
}

.mod-border-dash-bottom {
	border-bottom: 1px dashed #cacad9;
}

.mod-border-dash-left {
	border-left: 1px dashed #cacad9;
}

.box-title {
	display: block;
	position: relative;
	padding: 15px;
	border-bottom: 1px solid #cacad9;
	font-weight: bold;
}

@media print, screen and (max-width: 767px) {
	.box-title {
		padding: 10px 15px;
		font-size: 1.4rem;
	}
}

.box-title.box-title-strong {
	font-size: 2.2rem;
}

@media print, screen and (max-width: 767px) {
	.box-title.box-title-strong {
		font-size: 1.4rem;
	}
}

.box-title.box-title-narrow {
	padding: 8px 15px;
	font-weight: normal;
}

.box-title.box-flex {
	display: flex;
}

.box-title.box-flex-center {
	align-items: center;
}

.box-title.box-flex-gap {
	gap: 4px;
}

.box-title.box-flex-wrap {
	flex-wrap: wrap;
}

.box-title .box-title-right-link {
	display: flex;
	position: absolute;
	top: 0;
	right: 15px;
	bottom: 0;
	height: 100%;
	margin: auto;
	text-align: right;
}

@media print, screen and (min-width: 768px) {
	.box-title .box-title-right-link {
		align-items: center;
	}

	.box-title .box-title-right-link a {
		margin-left: 10px;
	}
}

@media print, screen and (max-width: 767px) {
	.box-title .box-title-right-link {
		flex-direction: column;
		justify-content: space-between;
		padding: 7px 0;
	}
}

.box-title.box-title-flex {
	display: flex;
	justify-content: space-between;
	gap: 4px;
}

@media print, screen and (max-width: 767px) {
	.box-title.box-title-flex {
		flex-direction: column;
	}
}

@media print, screen and (max-width: 767px) {
	.box-title.box-title-flex-sp-row {
		flex-direction: row;
		align-items: center;
	}
}

.box-title-blue {
	color: #2658ce;
	font-size: 1.6rem;
}

.box-title > a {
	position: absolute;
	top: 15px;
	right: 15px;
}

@media print, screen and (max-width: 767px) {
	.box-title > a {
		top: 10px;
		right: 10px;
		font-size: 1.2rem;
	}
}

.box-title .sub-button,
.box-title .sub-text {
	position: absolute;
	top: 0;
	right: 15px;
	bottom: 0;
	height: 1em;
	margin: auto;
}

@media print, screen and (max-width: 767px) {
	.box-title .sub-button,
	.box-title .sub-text {
		right: 5px;
		font-size: 1.2rem;
	}

	.box-title .sub-button .button-mini,
	.box-title .sub-text .button-mini {
		padding: 4px;
	}
}

.box-title .sub-right {
	position: absolute;
	top: 0;
	right: 10px;
	bottom: 0;
	height: 1em;
	margin: auto;
}

@media print, screen and (min-width: 768px) {
	.box-title .sub-button {
		height: 2.5em;
	}
}

@media print, screen and (max-width: 767px) {
	.box-title .sub-button {
		height: 2em;
	}
}

.box-title .sub-caption {
	font-size: 1.2rem;
}

@media print, screen and (max-width: 767px) {
	.p-none .mod-box {
		border-radius: 0;
	}
}

.box-inner {
	padding: 15px;
}

.box-inner-line180 {
	line-height: 180%;
}

.box-inner.is-pb0 {
	padding-bottom: 0;
}

.box-inner.is-ps0 {
	padding-right: 0;
	padding-left: 0;
}

.box-inner.is-relative {
	position: relative;
}

@media print, screen and (min-width: 768px) {
	.box-inner.box-inner-notitle {
		padding-top: 25px;
		padding-bottom: 25px;
	}
}

.box-inner-wide880 {
	max-width: 880px;
}

.box-inner-center {
	margin-right: auto;
	margin-left: auto;
}

.box-sub {
	position: relative;
	padding: 10px;
	border-bottom: 1px solid #cacad9;
}

.box-sub .left-info {
	position: absolute;
	top: 10px;
	right: 10px;
}

.box-sub.bg-gray {
	background-color: #f4f4f9;
}

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

.box-sub.center .count {
	color: #2658ce;
	font-size: 2rem;
}

/*
#styleguide
Box Tab
```
<div class="mod-box">
  <ul class="box-tabs">
    <li class="is-active"><a href="#">掲載中</a></li>
    <li><a href="#">停止中</a></li>
    <li><a href="#">下書き</a></li>
  </ul>
  <div class="box-inner">なんかの要素</div>
</div><!-- /.mod-box -->
```
*/
.box-tabs {
	display: flex;
	border-bottom: 1px solid #cacad9;
	font-size: 1.6rem;
}

@media print, screen and (max-width: 767px) {
	.box-tabs {
		background-color: #fafafa;
		font-size: 1.4rem;
	}

	.box-tabs.message-list {
		margin-top: 10px;
		font-size: 1.2rem;
	}

	.box-tabs.message-list a {
		display: flex;
		position: relative;
		justify-content: center;
		align-items: center;
		height: 100%;
	}

	.box-tabs.message-list a .mod-badge {
		position: absolute;
		top: -8px;
		right: 0;
	}
}

.box-tabs li {
	flex: 1;
	text-align: center;
}

.box-tabs li.is-active a {
	background-color: #fafafa;
	color: #2658ce !important;
}

.box-tabs li:first-child a {
	border-left: none;
	border-top-left-radius: 5px;
}

.box-tabs li:last-child a {
	border-top-right-radius: 5px;
}

.box-tabs a {
	display: block;
	padding: 15px 5px;
	border-top: 1px solid #e2e2e2;
	border-left: 1px solid #cacad9;
	background-color: #ebebf3;
	color: #84849a !important;
	font-weight: 600;
	text-align: center;
}

@media print, screen and (max-width: 767px) {
	.box-tabs a {
		padding: 12px 5px;
	}
}

.box-tabs a:hover {
	opacity: 0.8;
}

/*
#styleguide
Box Toggle
```
<div class="mod-box box-toggle">
  <input type="checkbox" id="toggle1">
  <label class="toggle-button box-title button-icon" for="toggle1">なんかのタイトル<i class="icon-arrow_down"></i></label>
  <div class="box-inner">なんかの要素</div>
</div><!-- /.toggle-wrap -->
```


*/
.box-toggle .box-title {
	cursor: pointer;
	border-radius: 5px 5px 0 0;
	font-size: 1.4rem;
}

.box-toggle .box-title.is-no-deco {
	display: inline-block;
	margin: 0;
	padding: 0;
	border: none;
	font-weight: normal;
}

.box-toggle .box-title.is-no-deco i:before {
	display: inline-block;
}

.box-toggle .box-title i:before {
	color: #4a4a4a;
}

.box-toggle .box-inner,
.box-toggle input[type='checkbox'] {
	display: none;
}

.box-toggle input[type='checkbox']:checked ~ label i:before {
	position: absolute;
	-webkit-transform: rotate(0.5turn);
	transform: rotate(0.5turn);
}

.box-toggle input[type='checkbox']:checked ~ .box-inner {
	display: block;
}

@media print, screen and (min-width: 768px) {
	.box-toggle.is-pc input[type='checkbox'] {
		display: none;
	}

	.box-toggle.is-pc .box-inner {
		display: block;
	}

	.box-toggle.is-pc .box-title {
		display: none;
	}
}

/*
#styleguide
Box Modal
```
<div class="mod-box box-mordal">
<div class="mod-title mod-c"><h2>なんかのタイトル</h2><button class="icon-close"></button></div>
<div class="box-inner">
なんかの要素
</div>
</div>
```
*/
.box-mordal button {
	border: none;
	background-color: rgba(0, 0, 0, 0);
}

.box-sub {
	position: relative;
	padding: 10px;
	border-bottom: 1px solid #cacad9;
}

.box-sub .left-info {
	position: absolute;
	top: 10px;
	right: 10px;
}

.box-sub.bg-gray {
	background-color: #f4f4f9;
}

.box-sub.bg-white {
	background-color: #fff;
}

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

.box-sub.center .count {
	color: #2658ce;
	font-size: 2rem;
}

.box-sub.border-none {
	border-bottom: none;
}

/*
#styleguide
Box Tab
```
<div class="mod-box">
  <ul class="box-tabs">
    <li class="is-active"><a href="#">掲載中</a></li>
    <li><a href="#">停止中</a></li>
    <li><a href="#">下書き</a></li>
  </ul>
  <div class="box-inner">なんかの要素</div>
</div><!-- /.mod-box -->
```
*/
.box-tabs {
	display: flex;
	border-bottom: 1px solid #cacad9;
	font-size: 1.6rem;
}

@media print, screen and (max-width: 767px) {
	.box-tabs {
		background-color: #fff;
		font-size: 1.4rem;
	}

	.box-tabs.message-list {
		margin-top: 10px;
		font-size: 1.2rem;
	}

	.box-tabs.message-list a {
		position: relative;
	}

	.box-tabs.message-list a .mod-badge {
		position: absolute;
		top: -8px;
		right: 0;
	}
}

.box-tabs li {
	flex: 1;
	text-align: center;
}

.box-tabs li.is-active a {
	background-color: #fff;
	color: #2658ce !important;
}

.box-tabs li:first-child a {
	border-left: none;
	border-top-left-radius: 5px;
}

.box-tabs li:last-child a {
	border-top-right-radius: 5px;
}

.box-tabs a {
	display: block;
	padding: 15px 5px;
	border-top: 1px solid #e2e2e2;
	border-left: 1px solid #cacad9;
	background-color: #fff;
	color: #84849a !important;
	font-weight: 600;
	text-align: center;
}

@media print, screen and (max-width: 767px) {
	.box-tabs a {
		padding: 12px 5px;
	}
}

.box-tabs a:hover {
	opacity: 0.8;
}

/*
#styleguide
Box Toggle
```
<div class="mod-box box-toggle">
  <input type="checkbox" id="toggle1">
  <label class="toggle-button box-title button-icon" for="toggle1">なんかのタイトル<i class="icon-arrow_down"></i></label>
  <div class="box-inner">なんかの要素</div>
</div><!-- /.toggle-wrap -->



*/
.box-toggle .box-title {
	cursor: pointer;
	border-radius: 5px 5px 0 0;
	font-size: 1.4rem;
}

.box-toggle .box-title i:before {
	color: #4a4a4a;
}

.box-toggle .box-inner,
.box-toggle input[type='checkbox'] {
	display: none;
}

.box-toggle input[type='checkbox']:checked ~ label i:before {
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
}

.box-toggle input[type='checkbox']:checked ~ .box-inner {
	display: block;
}

/*
#styleguide
Box Modal
```
<div class="mod-box box-mordal">
<div class="mod-title mod-c"><h2>なんかのタイトル</h2><button class="icon-close"></button></div>
<div class="box-inner">
なんかの要素
</div>
</div>
```
*/
.box-mordal button {
	border: none;
	background-color: rgba(0, 0, 0, 0);
}

/*
#styleguide
QundA BOX
```
<div class="mod-box">
<div class="box-title">よくあるカテゴリ</div>
<div class="box-inner">
<ul class="l-grid">
<li class="l-grid-column6"><a href="#" class="mod-listlink icon-arrow_right">よくある質問1</a></li>
<li class="l-grid-column6"><a href="#" class="mod-listlink icon-arrow_right">よくある質問2</a></li>
<li class="l-grid-column6"><a href="#" class="mod-listlink icon-arrow_right">よくある質問3</a></li>
<li class="l-grid-column6"><a href="#" class="mod-listlink icon-arrow_right">よくある質問4</a></li>
<li class="l-grid-column6"><a href="#" class="mod-listlink icon-arrow_right">よくある質問5</a></li>
<li class="l-grid-column6"><a href="#" class="mod-listlink icon-arrow_right">よくある質問6</a></li>
</ul>
</div>
</div>


```
*/
/*
#styleguide
PREVIEW
```
<div class="mod-box">
<div class="box-title">インターン情報　掲載プレビュー</div>
<div class="box-preview">
<iframe src="https://www.guppy.jp/"></iframe>
<a href="#" class="mod-button button-long">編集画面へ戻る</a>
</div>
</div>


```
*/
@media print, screen and (min-width: 768px) {
	.box-preview {
		padding: 15px;
	}

	.box-preview iframe {
		width: 100%;
		height: 800px;
		border: none;
	}

	.box-preview iframe.is_sp {
		display: block;
		width: 375px;
		margin: 0 auto;
	}
}

@media print, screen and (max-width: 767px) {
	.box-preview {
		padding: 0;
	}

	.box-preview iframe {
		width: 100%;
		height: 800px;
		border: none;
	}
}

@media print, screen and (max-width: 767px) {
	.mod-box.box-form {
		border-radius: 0;
		box-shadow: none;
	}
}

.mod-box.box-form .box-inner {
	padding: 0;
	word-break: break-all;
}

.mod-box.box-form .box-inner.is-padding {
	padding: 10px;
}

@media print, screen and (max-width: 767px) {
	.box-fixing {
		width: 100%;
		background-color: rgba(0, 0, 0, 0);
	}

	.box-fixing.fixed {
		position: fixed;
		z-index: 100;
		bottom: 0;
		left: 0;
	}

	.box-fixing.fixed .box-submit {
		box-shadow: 0 0 10px rgba(74, 74, 74, 0.3);
	}

	.box-submit .l-grid {
		margin-right: -5px;
		margin-bottom: -10px;
		margin-left: -5px;
	}

	.box-submit .l-grid-column3,
	.box-submit .l-grid-column6 {
		flex-basis: calc(33.33333% - 10px);
		max-width: calc(33.33333% - 10px);
		margin-right: 5px;
		margin-left: 5px;
	}

	.box-submit a {
		white-space: nowrap;
	}

	.box-submit .mod-button {
		padding: 10px 0;
	}

	.box-submit .complate_text {
		position: relative;
	}

	.box-submit .complate_text > span {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		margin-top: -2px;
		background-color: rgba(255, 255, 255, 0.9);
		font-size: 1.6rem;
		line-height: 1.2;
		text-align: center;
	}

	.box-submit .complate_text.completed > span {
		display: none;
	}

	.box-submit .complate_text.completed a {
		opacity: 1;
	}

	.box-submit .complate_text .form-item-complte {
		font-size: 2.2rem;
	}

	.box-submit .complate_text strong {
		color: #2658ce;
	}

	.box-submit .complate_text a {
		opacity: 0;
	}
}

@media print, screen and (min-width: 768px) {
	.box-fixing {
		background-color: rgba(0, 0, 0, 0);
	}

	.box-fixing.fixed {
		position: fixed;
		z-index: 100;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		min-width: 1024px;
		max-width: 1200px;
		margin: auto;
		padding-left: 250px;
	}

	.box-fixing.fixed .box-fixing-inner {
		padding: 0 20px;
	}

	.box-fixing.fixed .box-fixing-inner .box-submit {
		border-radius: 5px 5px 0 0;
		box-shadow: 0 -2px 10px rgba(74, 74, 74, 0.2);
	}

	.box-fixing .mod-box {
		border-radius: 5px;
	}

	.box-submit {
		transition-duration: 0.2s;
	}

	.box-submit .l-grid {
		margin-right: -5px;
		margin-bottom: -10px;
		margin-left: -5px;
	}

	.box-submit .l-grid-column3,
	.box-submit .l-grid-column6 {
		margin-right: 5px;
		margin-left: 5px;
		/*
            flex-basis: calc(33.33333% - 10px);
            max-width: calc(33.33333% - 10px);
             */;
	}

	.box-submit a {
		white-space: nowrap;
	}

	.box-submit .complate_text {
		position: relative;
	}

	.box-submit .complate_text > span {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(255, 255, 255, 0.9);
		font-size: 3.5rem;
		line-height: 1;
		text-align: center;
	}

	.box-submit .complate_text.completed > span {
		display: none;
	}

	.box-submit .complate_text.completed a {
		opacity: 1;
	}

	.box-submit .complate_text .form-item-complte {
		font-size: 5rem;
	}

	.box-submit .complate_text strong {
		color: #2658ce;
	}

	.box-submit .complate_text a {
		opacity: 0;
	}
}

/*
#styleguide
ポイント表示
```
<div class="mod-box">
<div class="box-inner">
<div class="mod-grid valine-c">
<div class="grid-column">
<dl class="total-point">
<dt>残ポイント</dt>
<dd>50,000<small>pt</small></dd>
</dl>
</div>
<div class="grid-column">
<dl class="total-point">
<dt>今月の消費</dt>
<dd>50,000<small>pt</small></dd>
</dl>
</div>
<div class="grid-column grid-variable mod-r">
<a href="#" class="mod-button button-blue button-icon">ポイントを購入する<i class="icon-arrow_right"></i></a>
</div>
</div>
</div>
</div>
```
*/
.total-point {
	display: flex;
	align-items: baseline;
}

.total-point dt {
	justify-content: center;
	align-items: center;
	margin-right: 5px;
	font-size: 2rem;
	font-weight: bold;
}

.total-point dd {
	justify-content: center;
	align-items: center;
	color: #2658ce;
	font-size: 3.5rem;
	font-weight: bold;
}

.total-point dd small {
	color: #000;
	font-size: 2rem;
}

/*
#styleguide
お客様サポートセンター
```
    <div class="mod-box mod-support-center">
        <div class="box-title">お客様サポートセンター</div>
        <div class="box-inner">
            <p class="mod-p">私たち専門チームがお客様の質問に丁寧にお答えします。<br>
                営業時間は、月～金9:00～19:00 となっております。<br>
                土・日・祝日のお問合せに関しましては、翌営業日以降の回答となる場合がございます。<br>
                何卒ご了承頂けますようお願い致します。</p>
            <ul class="contact">
                <li><img src="../assets/img/txt_support_01.png" alt="0120-57-3881" title="0120-57-3881"></li>
                <li><img src="../assets/img/txt_support_02.png" alt="03-5908-3881" title="03-5908-3881"></li>
                <li><img src="../assets/img/txt_support_03.png" alt="service@guppy.co.jp" title="service@guppy.co.jp"></li>
                <li><a href="https://www.guppy.co.jp/contact/general/" target="_blank" class="mod-button button-blue">お問い合わせページ</a></li>
            </ul>
        </div><!-- /.box-inner -->
    </div><!-- /.mod-support-center -->
```
*/
.mod-support-center {
	max-width: 780px;
	margin: 30px auto 0;
	background: #fff url(../img/ph_support_01.jpg) no-repeat 97% 10px;
	background: #fff url(../img/ph_support_01.jpg) no-repeat calc(100% - 15px) 10px;
}

@media print, screen and (max-width: 767px) {
	.mod-support-center {
		margin-right: 10px;
		margin-left: 10px;
		padding-top: 120px;
		background-position: 50% 15px;
		background-size: 100px auto;
	}
}

.mod-support-center .box-title {
	padding-bottom: 0;
	border: 0;
	color: #2658ce;
	font-size: 2rem;
}

@media print, screen and (max-width: 767px) {
	.mod-support-center .box-title {
		text-align: center;
	}
}

.mod-support-center .mod-p {
	margin-top: 0;
}

@media print, screen and (max-width: 767px) {
	.mod-support-center .mod-p {
		font-size: 1.2rem;
	}
}

.mod-support-center .contact {
	display: flex;
	align-items: center;
}

@media print, screen and (max-width: 767px) {
	.mod-support-center .contact {
		flex-wrap: wrap;
	}
}

.mod-support-center .contact li {
	margin-right: 20px;
}

@media print, screen and (max-width: 767px) {
	.mod-support-center .contact li {
		margin-right: 10px;
		margin-bottom: 15px;
	}
}

.box-search-school {
	position: relative;
	margin: 0 0 30px;
}

.box-search-school .checkbox-group {
	display: flex;
}

.box-search-school .checkbox {
	font-size: 1.6rem;
}

.box-search-school .mod-button {
	position: absolute;
	right: 10px;
	bottom: 10px;
	width: 155px;
	padding-top: 7px;
	padding-bottom: 7px;
	font-weight: bold;
}

.box-select-school {
	margin: 0 0 10px;
	font-size: 1.6rem;
}

.box-select-school .mod-label {
	padding: 5px 10px;
	border-radius: 20px;
	background: #2658ce;
	color: #fff;
	font-size: 1.8rem;
}

.box-select-school .box-title {
	position: relative;
	padding: 15px;
}

.box-select-school .box-title .heading {
	display: block;
	font-size: 1.6rem;
}

.box-select-school .box-title .school {
	display: inline-block;
	position: absolute;
	top: 10px;
	right: 300px;
	font-size: 1.6rem;
}

.box-select-school .box-title .student {
	display: inline-block;
	position: absolute;
	top: 10px;
	right: 80px;
	font-size: 1.6rem;
}

.box-select-school .mod-list-level .level1 {
	margin-left: 0;
}

.box-select-school .mod-list-level .level2 {
	margin-left: 10px;
}

.box-select-school .mod-list-level .checkbox {
	margin-top: 5px;
	margin-left: 3em;
}

.box-select-school .mod-list-level .checkbox.level1 {
	margin-left: 0;
	font-size: 1.8rem;
	font-weight: bold;
}

.box-select-school .mod-list-level .checkbox.level1 label {
	font-weight: bold;
}

.box-select-school .mod-list-level .checkbox.level2 {
	margin-top: 10px;
	margin-left: 1.5em;
}

.box-select-school .mod-list-level .checkbox.level2 label {
	font-weight: bold;
}

.box-total-school {
	margin: 30px 0 0;
	padding: 20px;
	text-align: center;
}

.box-total-school .total li {
	display: inline-block;
	padding: 0 5px;
	font-size: 1.6rem;
}

.box-total-school .total li strong {
	color: #2658ce;
	font-size: 2rem;
}

.box-total-school .mod-button {
	width: 320px;
}

@media print, screen and (max-width: 767px) {
	.plan-compare {
		display: flex;
	}

	.plan-compare .compare-free,
	.plan-compare .compare-tokuwari,
	.plan-compare .compare-2020 {
		position: relative;
		padding: 10px 10px 5em;
	}

	.plan-compare .compare-free h3,
	.plan-compare .compare-tokuwari h3,
	.plan-compare .compare-2020 h3 {
		padding-top: 10px;
		color: #8bc34a;
		font-size: 1.4rem;
		font-weight: bold;
		text-align: center;
	}

	.plan-compare .compare-free .price,
	.plan-compare .compare-tokuwari .price,
	.plan-compare .compare-2020 .price {
		text-align: center;
	}

	.plan-compare .compare-free .price strong,
	.plan-compare .compare-tokuwari .price strong,
	.plan-compare .compare-2020 .price strong {
		color: #8bc34a;
		font-size: 2.2rem;
		font-weight: bold;
	}

	.plan-compare .compare-free .service-list,
	.plan-compare .compare-tokuwari .service-list,
	.plan-compare .compare-2020 .service-list {
		font-size: 1.4rem;
		line-height: 1.8;
	}

	.plan-compare .compare-free .service-list li,
	.plan-compare .compare-tokuwari .service-list li,
	.plan-compare .compare-2020 .service-list li {
		text-align: center;
	}

	.plan-compare .compare-free .button-icon,
	.plan-compare .compare-tokuwari .button-icon,
	.plan-compare .compare-2020 .button-icon {
		position: absolute;
		right: 10px;
		bottom: 10px;
		left: 10px;
		padding-right: 25px;
	}

	.plan-compare .compare-free .button-icon i,
	.plan-compare .compare-tokuwari .button-icon i,
	.plan-compare .compare-2020 .button-icon i {
		margin-right: 10px;
	}

	.plan-compare .compare-2020 {
		width: 100%;
	}

	.plan-compare .compare-2020 .service-list li {
		width: 9em;
		margin: 0 auto;
		-moz-text-align-last: justify;
		text-align-last: justify;
	}

	.plan-compare .compare-2020 .service-list li i {
		margin-right: 5px;
		font-size: 1.8rem;
		vertical-align: sub;
	}

	.plan-compare .compare-free {
		width: 50%;
		border-right: 1px solid #cacad9;
	}

	.plan-compare .compare-tokuwari {
		width: 50%;
	}
}

@media print, screen and (min-width: 768px) {
	.plan-compare {
		display: flex;
	}

	.plan-compare .compare-free,
	.plan-compare .compare-tokuwari,
	.plan-compare .compare-2020 {
		position: relative;
		padding: 15px 15px 75px 15px;
	}

	.plan-compare .compare-free h3,
	.plan-compare .compare-tokuwari h3,
	.plan-compare .compare-2020 h3 {
		padding-top: 20px;
		color: #8bc34a;
		font-size: 2rem;
		font-weight: bold;
		text-align: center;
	}

	.plan-compare .compare-free .price,
	.plan-compare .compare-tokuwari .price,
	.plan-compare .compare-2020 .price {
		text-align: center;
	}

	.plan-compare .compare-free .price strong,
	.plan-compare .compare-tokuwari .price strong,
	.plan-compare .compare-2020 .price strong {
		color: #8bc34a;
		font-size: 3rem;
		font-weight: bold;
	}

	.plan-compare .compare-free .service-list,
	.plan-compare .compare-tokuwari .service-list,
	.plan-compare .compare-2020 .service-list {
		font-size: 1.4rem;
		text-align: center;
	}

	.plan-compare .compare-free .service-list li,
	.plan-compare .compare-tokuwari .service-list li,
	.plan-compare .compare-2020 .service-list li {
		display: inline-block;
		text-align: center;
	}

	.plan-compare .compare-free .service-list li:after,
	.plan-compare .compare-tokuwari .service-list li:after,
	.plan-compare .compare-2020 .service-list li:after {
		content: ',';
	}

	.plan-compare .compare-free .service-list li:last-child:after,
	.plan-compare .compare-tokuwari .service-list li:last-child:after,
	.plan-compare .compare-2020 .service-list li:last-child:after {
		content: '';
	}

	.plan-compare .compare-free .mod-button,
	.plan-compare .compare-tokuwari .mod-button,
	.plan-compare .compare-2020 .mod-button {
		position: absolute;
		right: 0;
		bottom: 15px;
		left: 0;
		width: 15em;
		margin: auto;
	}

	.plan-compare .compare-free .button-icon,
	.plan-compare .compare-tokuwari .button-icon,
	.plan-compare .compare-2020 .button-icon {
		padding-right: 25px;
	}

	.plan-compare .compare-free .button-icon i,
	.plan-compare .compare-tokuwari .button-icon i,
	.plan-compare .compare-2020 .button-icon i {
		margin-right: 10px;
	}

	.plan-compare .compare-2020 {
		width: 100%;
	}

	.plan-compare .compare-2020 .service-list li {
		margin-right: 10px;
	}

	.plan-compare .compare-2020 .service-list li i {
		margin-right: 5px;
		font-size: 1.8rem;
		vertical-align: sub;
	}

	.plan-compare .compare-free {
		width: 50%;
		border-right: 1px solid #cacad9;
	}

	.plan-compare .compare-tokuwari {
		width: 50%;
	}
}

.mod-break-all {
	word-break: break-all;
}

.mod-break-word {
	word-wrap: break-word;
	overflow-wrap: break-word;
}

/*
#styleguide
オートチャージステータス
```
<div class="mod-box">
<div class="box-inner">
<div class="mod-autocharge-status">

<div class="autocharge-validity autocharge-error">OFF</div>
<div class="autocharge-data">
<div class="autocharge-term">利用期間：<br><strong>2020年 4月</strong>まで</div>
<div class="autocharge-cost">当月限度額：<br><strong>100,000</strong>pt</div>
<div class="autocharge-pay">当月利用額：<br><strong class="autocharge-error">50,000</strong>pt</div>
<div class="autocharge-msg">
<div class="error-message">設定いただきました限度額を超えましたのでオートチャージを停止しました。</div>
</div>
</div>

<div class="autocharge-button">
<a href="#" class="mod-button button-red button-icon">利用を再開する<i class="icon-arrow_down"></i></a>
<a href="#">中止する</a>
</div>
</div>
</div>
</div>
```
*/
.mod-autocharge-status {
	display: flex;
	align-items: center;
}

@media print, screen and (max-width: 767px) {
	.mod-autocharge-status {
		flex-direction: column;
	}
}

.mod-autocharge-status .autocharge-validity {
	font-size: 3rem;
	font-weight: bold;
}

@media print, screen and (max-width: 767px) {
	.mod-autocharge-status .autocharge-validity {
		width: 100%;
		margin-bottom: 10px;
		padding-bottom: 5px;
		border-bottom: 1px solid #ebebf3;
		text-align: center;
	}
}

.mod-autocharge-status .autocharge-data {
	flex: 1 1 auto;
}

@media print, screen and (max-width: 767px) {
	.mod-autocharge-status .autocharge-data {
		width: 100%;
		margin-bottom: 15px;
	}
}

.mod-autocharge-status .autocharge-data .autocharge-term,
.mod-autocharge-status .autocharge-data .autocharge-cost,
.mod-autocharge-status .autocharge-data .autocharge-pay {
	line-height: 1.6;
}

@media print, screen and (min-width: 768px) {
	.mod-autocharge-status .autocharge-data .autocharge-term,
	.mod-autocharge-status .autocharge-data .autocharge-cost,
	.mod-autocharge-status .autocharge-data .autocharge-pay {
		display: inline-block;
		font-size: 1.2rem;
	}
}

@media print, screen and (max-width: 767px) {
	.mod-autocharge-status .autocharge-data .autocharge-term,
	.mod-autocharge-status .autocharge-data .autocharge-cost,
	.mod-autocharge-status .autocharge-data .autocharge-pay {
		display: block;
		width: 100%;
	}

	.mod-autocharge-status .autocharge-data .autocharge-term br,
	.mod-autocharge-status .autocharge-data .autocharge-cost br,
	.mod-autocharge-status .autocharge-data .autocharge-pay br {
		display: none;
	}
}

.mod-autocharge-status .autocharge-data .autocharge-term strong,
.mod-autocharge-status .autocharge-data .autocharge-cost strong,
.mod-autocharge-status .autocharge-data .autocharge-pay strong {
	font-size: 1.6rem;
	font-weight: bold;
}

@media print, screen and (min-width: 768px) {
	.mod-autocharge-status .autocharge-data .autocharge-term,
	.mod-autocharge-status .autocharge-data .autocharge-cost {
		margin-right: 15px;
		padding-right: 15px;
		border-right: 1px solid #ebebf3;
	}
}

.mod-autocharge-status .autocharge-data .autocharge-msg {
	width: 100%;
	margin-top: 10px;
}

.mod-autocharge-status .autocharge-data .autocharge-msg .error-message {
	margin-bottom: 0;
}

.mod-autocharge-status .autocharge-button a {
	margin-right: 10px;
}

.mod-autocharge-status .autocharge-button a:last-child {
	margin-right: 0;
}

.mod-autocharge-status .autocharge-error {
	color: #b40000;
}

.mod-autocharge-status .autocharge-success {
	color: #2658ce;
}

@media print, screen and (min-width: 768px) {
	.mod-autocharge-status .autocharge-validity,
	.mod-autocharge-status .autocharge-data {
		margin-right: 20px;
	}
}

/*
#styleguide
新卒早割プラン
```
```
*/
@media print, screen and (min-width: 768px) {
	.box-2023campaign {
		max-width: 785.5px;
		margin: 0 auto;
		padding: 20px 10px;
	}
}

@media print, screen and (max-width: 767px) {
	.box-2023campaign {
		max-width: 345px;
		margin: 0 auto;
		text-align: center;
	}
}

.box-2023campaign .caption {
	margin-top: 20px;
	font-size: 1.6rem;
	text-align: center;
}

.box-2023campaign .button-pdf {
	width: 680px;
	margin: 17px auto 0;
}

@media print, screen and (max-width: 767px) {
	.box-2023campaign .button-pdf {
		width: auto;
	}
}

.box-2023campaign .button-pdf .mod-button {
	background-color: #004ce5;
	font-size: 1.8rem;
}

.box-2023campaign .button-pdf .mod-button:active,
.box-2023campaign .button-pdf .mod-button:hover,
.box-2023campaign .button-pdf .mod-button:visited,
.box-2023campaign .button-pdf .mod-button:link {
	color: #fff;
}

@media print, screen and (min-width: 768px) {
	.box-2022plan-ealry {
		max-width: 785.5px;
		margin: 0 auto;
		padding: 20px 10px;
	}
}

@media print, screen and (max-width: 767px) {
	.box-2022plan-ealry {
		max-width: 345px;
		margin: 0 auto;
		text-align: center;
	}
}

@media print, screen and (min-width: 768px) {
	.box-2022plan-ealry .plan-hayawari {
		position: relative;
	}
}

.box-2022plan-ealry .plan-hayawari > img {
	height: auto;
}

@media print, screen and (min-width: 768px) {
	.box-2022plan-ealry .plan-hayawari > img {
		width: 100%;
	}
}

@media print, screen and (max-width: 767px) {
	.box-2022plan-ealry .plan-hayawari > img {
		width: 100%;
		max-width: 341px;
	}
}

.box-2022plan-ealry .plan-hayawarimore {
	position: relative;
	text-align: center;
}

@media print, screen and (max-width: 767px) {
	.box-2022plan-ealry .plan-hayawarimore {
		margin: 20px 0 10px;
	}
}

.box-2022plan-ealry .plan-hayawarimore::before {
	content: '';
	display: block;
	position: absolute;
	z-index: 1;
	top: 15px;
	right: 0;
	left: 0;
	width: 100%;
	height: 1px;
	margin: auto;
	background-color: #ff3154;
}

.box-2022plan-ealry .plan-hayawarimore img {
	position: relative;
	z-index: 3;
	width: auto;
	height: 31px;
}

.box-2022plan-ealry .plan-hayawarimore::after {
	content: '';
	display: block;
	position: absolute;
	z-index: 2;
	top: 0;
	right: 0;
	left: 0;
	width: 150px;
	height: 100%;
	margin: 0 auto;
	background-color: white;
}

.box-2022plan-ealry .plan-hayawariplus > img {
	width: 100%;
	height: auto;
}

@media print, screen and (min-width: 768px) {
	.box-2022plan-ealry .plan-hayawariplus > img {
		max-width: 765.5px;
	}
}

@media print, screen and (max-width: 767px) {
	.box-2022plan-ealry .plan-hayawariplus > img {
		max-width: 345px;
	}
}

@media print, screen and (min-width: 768px) {
	.box-2022plan-ealry .plan-hayawariplus .plan-hayawari-btn {
		text-align: center;
	}
}

@media print, screen and (max-width: 767px) {
	.box-2022plan-ealry .plan-hayawariplus .plan-hayawari-btn {
		margin-top: 15px;
	}
}

.box-2022plan-ealry .button-plan-hayawari {
	position: relative;
	background-color: #4154a3;
	font-weight: bold;
	text-align: center;
}

.box-2022plan-ealry .button-plan-hayawari.plan-hayawari {
	width: 100%;
}

@media print, screen and (min-width: 768px) {
	.box-2022plan-ealry .button-plan-hayawari.plan-hayawari {
		height: 53px;
		padding: 12px 0 0 0;
		font-size: 1.4rem;
	}
}

@media print, screen and (max-width: 767px) {
	.box-2022plan-ealry .button-plan-hayawari.plan-hayawari {
		font-size: 2rem;
	}
}

.box-2022plan-ealry .button-plan-hayawari.plan-hayawari::after {
	content: '';
	position: absolute;
	width: 10px;
	margin: auto;
	border: solid white;
	border-width: 8px 10px;
	border-right-color: transparent;
	border-bottom-color: transparent;
	border-left-color: transparent;
}

@media print, screen and (min-width: 768px) {
	.box-2022plan-ealry .button-plan-hayawari.plan-hayawari::after {
		right: 0;
		bottom: 2px;
		left: 0;
	}
}

@media print, screen and (max-width: 767px) {
	.box-2022plan-ealry .button-plan-hayawari.plan-hayawari::after {
		top: 8px;
		right: 10px;
		bottom: 0;
		height: 10px;
	}
}

@media print, screen and (min-width: 768px) {
	.box-2022plan-ealry .button-plan-hayawari.plan-hayawariplus {
		width: 400px;
		font-size: 1.6rem;
	}
}

@media print, screen and (max-width: 767px) {
	.box-2022plan-ealry .button-plan-hayawari.plan-hayawariplus {
		width: 100%;
		font-size: 2rem;
	}
}

.box-2022plan-compare {
	margin-bottom: 40px;
}

@media print, screen and (max-width: 767px) {
	.box-2022plan-compare {
		overflow-x: scroll;
		width: 100%;
		margin-bottom: 25px;
	}
}

/*
#styleguide
新卒特割プラン
```

```
*/
.box-2022plan-special {
	padding: 50px 0;
	text-align: center;
}

@media print, screen and (max-width: 767px) {
	.box-2022plan-special {
		padding: 20px 0;
	}

	.box-2022plan-special img {
		width: 100%;
		height: auto;
	}
}

.box-2022plan-special .lead-text {
	font-size: 2.4rem;
	font-weight: bold;
}

@media print, screen and (max-width: 767px) {
	.box-2022plan-special .lead-text {
		padding-left: 0;
		font-size: 2.4rem;
		text-align: center;
	}
}

.box-2022plan-special .lead-text .big-t {
	font-size: 110%;
}

.box-2022plan-special .lead-text .badge-cover {
	display: inline-block;
	margin-right: 20px;
	padding: 8px 30px 7px;
	border-radius: calc((20px + 1.6em) / 2);
	background: #2658ce;
	color: #fff;
	font-size: 2.2rem;
	letter-spacing: 0.025em;
}

@media print, screen and (max-width: 767px) {
	.box-2022plan-special .lead-text .badge-cover {
		margin: 0 auto 15px;
		text-align: center;
	}
}

.box-2022plan-special .lead-text .badge-cover2023 {
	background-color: #148e54;
}

.box-2022plan-special .lead-text .badge-cover2024 {
	background-color: #277bc0;
}

.box-2022plan-special .lead-text .under-line {
	display: inline-block;
	position: relative;
}

.box-2022plan-special .lead-text .under-line::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background-color: #2658ce;
}

.box-2022plan-special .lead-text .under-line-g::after {
	background-color: #148e54;
}

.box-2022plan-special .lead-text .under-line-y::after {
	background-color: #ffb200;
}

.box-2022plan-special .caption {
	margin-top: 10px;
	font-size: 1.6rem;
}

.box-2022plan-special .button-pdf {
	width: 680px;
	margin: 17px auto 0;
}

@media print, screen and (max-width: 767px) {
	.box-2022plan-special .button-pdf {
		width: auto;
	}
}

.box-2022plan-special .button-pdf .mod-button {
	background-color: #004ce5;
	font-size: 1.8rem;
}

.box-2022plan-special .button-pdf .mod-button:active,
.box-2022plan-special .button-pdf .mod-button:hover,
.box-2022plan-special .button-pdf .mod-button:visited,
.box-2022plan-special .button-pdf .mod-button:link {
	color: #fff;
}

.box-campaign-separator {
	width: 80%;
	margin: 0 auto;
	border-top: 1px dashed #84849a;
}

.box-2022plan-special-add {
	margin-bottom: 20px;
	margin-left: 210px;
	padding: 0 10px;
	text-align: center;
}

@media print, screen and (max-width: 767px) {
	.box-2022plan-special-add {
		margin-left: 0;
		padding: 0;
	}
}

.box-2022plan-special-add .copy {
	font-size: 1.8rem;
	-webkit-font-feature-settings: 'palt';
	font-feature-settings: 'palt';
}

.box-2022plan-special-add .copy span,
.box-2022plan-special-add .copy strong {
	color: #004ce5;
	font-weight: bold;
}

.box-2022plan-special-add .copy strong {
	font-size: 2.6rem;
}

.box-2022plan-special-add .copy small {
	font-size: 1.5rem;
}

.box-2022plan-special-add .button-pdf {
	margin-top: 5px;
}

.box-2022plan-special-add .button-pdf .mod-button {
	padding-top: 25px;
	padding-bottom: 26px;
	background-color: #004ce5;
	font-size: 2rem;
}

.box-2022plan-special-add .button-pdf .mod-button:active,
.box-2022plan-special-add .button-pdf .mod-button:hover,
.box-2022plan-special-add .button-pdf .mod-button:visited,
.box-2022plan-special-add .button-pdf .mod-button:link {
	color: #fff;
}

.box-2022plan-special-add .caption {
	padding-top: 15px;
}

.box-2024plan-special-inner {
	position: relative;
	padding: 0;
}

.box-2024plan-special-inner .cover-image {
	width: 100%;
	height: auto;
}

.box-2024plan-special-inner .button-cover {
	position: absolute;
	bottom: 1.8em;
	width: 100%;
	padding: 0 15px;
	text-align: center;
}

.box-2024plan-special-inner .button-cover.akifuyuwari {
	bottom: 6.7rem;
}

@media print, screen and (max-width: 767px) {
	.box-2024plan-special-inner .button-cover.akifuyuwari {
		bottom: 4.7rem;
	}
}

.box-2024plan-special-inner .button-cta {
	display: block;
	box-sizing: border-box;
	max-width: 490px;
	height: auto;
	margin: 0 auto;
	padding: 0.4em;
	border: 2px solid #eb4949;
	border-radius: 2em;
	background-color: #eb4949;
	box-shadow: 5px 5px 5px 0 rgba(0, 101, 40, 0.4);
	color: #fff;
	font-size: 2.4rem;
	font-weight: bold;
	text-align: center;
	transition: ease-in-out 0.3s;
}

.box-2024plan-special-inner .button-cta:hover {
	background-color: #fff;
	color: #eb4949;
}

.box-2024plan-special-inner .button-cta-2024natsuwari {
	box-shadow: 5px 5px 5px 0 rgba(0, 5, 101, 0.4);
}

.box-2024plan-special-inner .button-cta-2024akifuyuwari {
	box-sizing: border-box;
	max-width: 360px;
	border: 2px solid #166d20;
	background-color: #166d20;
	box-shadow: 5px 5px 5px 0 rgba(0, 5, 101, 0.4);
	font-size: 2rem;
}

.box-2024plan-special-inner .button-cta-2024akifuyuwari:hover {
	color: #166d20;
}

@media print, screen and (max-width: 767px) {
	.box-2024plan-special-inner .button-cta-2024akifuyuwari {
		font-size: 1.8rem;
		line-height: 1;
	}
}

/*
#styleguide
新卒資料媒体解説動画
```
```
*/
@media print, screen and (min-width: 768px) {
	.mod-box.recruit-movie-cover .box-inner {
		display: flex;
		overflow: hidden;
		justify-content: space-between;
		padding: 15px;
	}

	.mod-box.recruit-movie-cover .box-inner .play-button {
		width: 30px;
		height: 30px;
		fill: #fafafa;
	}

	.mod-box.recruit-movie-cover .box-inner .movie-play-area {
		display: flex;
		overflow: hidden;
		align-items: center;
		width: calc(50%);
		padding: 15px;
		border-radius: 5px;
		background: #66ba00;
		opacity: 1;
		transition: ease-in-out 0.3s;
	}

	.mod-box.recruit-movie-cover .box-inner .movie-play-area:hover {
		opacity: 0.8;
	}

	.mod-box.recruit-movie-cover .box-inner .movie-play-area.is-banner {
		padding: 0;
		background: none;
	}

	.mod-box.recruit-movie-cover .box-inner .movie-play-area.is-banner .is-dashbord {
		display: none;
	}

	.mod-box.recruit-movie-cover .box-inner .movie-play-area.is-banner .is-page {
		display: block;
	}

	.mod-box.recruit-movie-cover .box-inner .movie-play-area.is-banner img {
		width: 100%;
		height: auto;
	}

	.mod-box.recruit-movie-cover .box-inner .movie-play-area .movie-thumbnail-top {
		position: relative;
		width: 80px;
		height: 50px;
		background: url('../img/shin_movie_button_back.png') no-repeat center center;
		background-size: cover;
	}

	.mod-box.recruit-movie-cover .box-inner .movie-play-area .movie-thumbnail-top .play-button {
		display: block;
		position: absolute;
		top: calc(50% - 15px);
		left: calc(50% - 15px);
	}

	.mod-box.recruit-movie-cover .box-inner .movie-play-area .title-box {
		width: calc( 100% - 68px);
		padding-left: 8px;
	}

	.mod-box.recruit-movie-cover .box-inner .movie-play-area .title-box .title-top {
		display: flex;
		align-items: center;
		margin-bottom: 2px;
		color: #fafafa;
		font-size: 2.1rem;
		font-weight: bold;
		-webkit-font-feature-settings: 'palt';
		font-feature-settings: 'palt';
	}

	.mod-box.recruit-movie-cover .box-inner .movie-play-area .title-box .title-top .play-button {
		width: 28px;
		height: 28px;
		margin-left: 5px;
	}

	.mod-box.recruit-movie-cover .box-inner .movie-play-area .title-box .title-sub {
		color: #4a4a4a;
		font-size: 1.4rem;
		font-weight: normal;
	}

	.mod-box.recruit-movie-cover .box-inner .movie-buttons {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		width: calc(50%);
		padding: 0 0 0 15px;
	}

	.mod-box.recruit-movie-cover .box-inner .movie-buttons a.link {
		display: flex;
		position: relative;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		padding: 15px 8px;
		border: 1px solid #4a4a4a;
		border-radius: 5px;
		opacity: 1;
		color: #4a4a4a;
		font-size: 1.8rem;
		transition: ease-in-out 0.3s;
	}

	.mod-box.recruit-movie-cover .box-inner .movie-buttons a.link i {
		display: inline-block;
		position: absolute;
		top: calc( 50% - 8px);
		right: 10px;
		margin-left: 5px;
	}

	.mod-box.recruit-movie-cover .box-inner .movie-buttons a.link i:before {
		color: #4a4a4a;
	}

	.mod-box.recruit-movie-cover .box-inner .movie-buttons a.link:hover {
		opacity: 0.7;
	}

	.mod-box.recruit-movie-cover .box-inner .movie-buttons a.link.is-recruit {
		border: 1px solid #8bc34a;
		color: #8bc34a;
	}

	.mod-box.recruit-movie-cover .box-inner .movie-buttons a.link.is-recruit i:before {
		position: relative;
		top: -2px;
		color: #8bc34a;
	}

	.mod-box.recruit-movie-cover .box-inner .movie-buttons .mod-button {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		font-size: 2rem;
	}

	.mod-box.recruit-movie-cover.apply .box-inner .movie-play-area .movie-thumbnail-top {
		background-image: url('../img/bg_howto_movie.png');
	}

	.mod-box.recruit-movie-cover.apply .box-inner .movie-play-area .movie-thumbnail-top .play-button {
		fill: #4a4a4a;
	}

	.mod-box.recruit-movie-cover.apply .box-inner .movie-play-area .title-box {
		width: calc( 100% - 45px);
	}

	.mod-box.recruit-movie-cover.apply .box-inner .movie-play-area .title-box .title-top .play-button {
		display: none;
	}
	/* ダッシュボードのとき */
	.widget .mod-box.recruit-movie-cover {
		margin: 15px 0 0;
	}

	.widget .mod-box.recruit-movie-cover .box-inner {
		display: block;
		padding: 0;
	}

	.widget .mod-box.recruit-movie-cover .box-inner .movie-play-area {
		width: 100%;
		padding: 15px 10px;
		border-radius: 0;
	}

	.widget .mod-box.recruit-movie-cover .box-inner .movie-play-area .movie-thumbnail-top {
		width: 68px;
	}

	.widget .mod-box.recruit-movie-cover .box-inner .movie-play-area.is-banner {
		padding: 0;
		background: none;
	}

	.widget .mod-box.recruit-movie-cover .box-inner .movie-play-area.is-banner .is-dashbord {
		display: block;
	}

	.widget .mod-box.recruit-movie-cover .box-inner .movie-play-area.is-banner .is-page {
		display: none;
	}

	.widget .mod-box.recruit-movie-cover .box-inner .movie-play-area.is-banner img {
		width: 100%;
		height: auto;
	}

	.widget .mod-box.recruit-movie-cover .box-inner .movie-buttons {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 100%;
		padding: 10px 0;
	}

	.widget .mod-box.recruit-movie-cover .box-inner .movie-buttons a.link {
		display: flex;
		justify-content: flex-start;
		width: auto;
		padding: 0 8px;
		border: none;
		border-radius: 0;
		color: #4a4a4a;
		font-size: 1.4rem;
	}

	.widget .mod-box.recruit-movie-cover .box-inner .movie-buttons a.link i {
		position: relative;
		top: auto;
		right: auto;
	}

	.widget .mod-box.recruit-movie-cover .box-inner .movie-buttons a.link.is-recruit {
		border: none;
		color: #8bc34a;
	}

	.widget .mod-box.recruit-movie-cover .box-inner .movie-buttons a.link:last-child {
		padding-left: 0;
	}

	.widget .mod-box.recruit-movie-cover.apply .box-inner .movie-play-area .movie-thumbnail-top {
		width: 45px;
		background-image: url('../img/bg_howto_movie.png');
	}

	.widget .mod-box.recruit-movie-cover.hansoku {
		overflow: visible;
		background: none;
		box-shadow: none;
	}

	.widget .mod-box.recruit-movie-cover.hansoku .box-inner {
		overflow: visible;
	}

	.widget .mod-box.recruit-movie-cover.hansoku .box-inner .movie-play-area {
		overflow: visible;
	}

	.widget .mod-box.recruit-movie-cover.hansoku .box-inner .movie-play-area img {
		margin-top: -5%;
	}

	.widget .mod-box.recruit-movie-cover.hansoku .box-inner .movie-buttons {
		border-radius: 0 0 5px 5px;
		background: #fff;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	}
	/* モーダル部分 */
	.modal-wrap {
		display: none;
		position: fixed;
		z-index: 300;
		top: 0;
		left: 0;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.7);
	}

	.modal-wrap.shown {
		display: flex;
	}

	.modal-wrap .modal-panel {
		display: flex;
		position: relative;
		align-items: center;
		width: calc(100% - 40px);
		max-width: 1400px;
		padding: 15px;
		border-radius: 5px;
		background: #ebebf3;
	}

	.modal-wrap .modal-panel .modal-frame-cover {
		width: calc(100% - 270px);
	}

	.modal-wrap .modal-panel .modal-frame-cover .modal-frame {
		position: relative;
		width: 100%;
		padding-top: 56.25%;
	}

	.modal-wrap .modal-panel .modal-frame-cover .modal-frame iframe {
		position: absolute;
		top: 0;
		right: 0;
		width: 100% !important;
		height: 100% !important;
	}

	.modal-wrap .modal-panel .mod-button {
		width: 100%;
		margin-bottom: 10px;
		font-size: 1.4rem;
	}

	.modal-wrap .modal-panel .modal-close {
		display: flex;
		position: absolute;
		top: 0;
		right: 0;
		justify-content: center;
		align-items: center;
		width: 60px;
		height: 60px;
		border: none;
		border-radius: 30px;
		background: #84849a;
		color: #fafafa;
		font-size: 3rem;
		-webkit-transform: translate(30px, -30px);
		transform: translate(30px, -30px);
	}

	.modal-wrap .modal-panel .modal-button-area {
		align-self: flex-start;
		width: 255px;
		margin-left: 15px;
	}

	.modal-wrap .modal-panel .modal-button-area .modal-title {
		margin: 10px 0 15px;
		color: #8bc34a;
		font-size: 1.8rem;
		text-align: center;
	}

	.modal-wrap .modal-panel .modal-button-area .button-list {
		margin-bottom: 20px;
	}

	.modal-wrap .modal-panel .modal-button-area .button-list .modal-button-channel {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
		color: #4a4a4a;
		font-size: 1.4rem;
		line-height: 1.6;
		transition: ease-in-out 0.3s;
	}

	.modal-wrap .modal-panel .modal-button-area .button-list .modal-button-channel:hover {
		color: #cacad9;
	}

	.modal-wrap .modal-panel .modal-button-area .button-list .modal-button-channel:hover .play-button {
		fill: #cacad9;
	}

	.modal-wrap .modal-panel .modal-button-area .button-list .modal-button-channel:active {
		color: #8bc34a;
	}

	.modal-wrap .modal-panel .modal-button-area .button-list .modal-button-channel:active .play-button {
		fill: #8bc34a;
	}

	.modal-wrap .modal-panel .modal-button-area .button-list .modal-button-channel .play-button {
		width: 16px;
		height: 16px;
		margin-right: 5px;
		transition: ease-in-out 0.3s;
		fill: #4a4a4a;
	}

	.modal-wrap .modal-panel .modal-button-area .button-list .modal-button-channel .text {
		width: calc( 100% - 21px);
	}

	.modal-wrap .modal-panel.modal-panel--column {
		flex-direction: column;
	}

	.modal-wrap .modal-panel.modal-panel--column .modal-button-area {
		margin: 15px 0 0;
	}

	.modal-wrap .modal-panel.modal-panel--column .modal-button-area {
		width: 100%;
	}
}

@media print, screen and (max-width: 767px) {
	.mod-box.recruit-movie-cover {
		margin: 0 10px;
	}

	.mod-box.recruit-movie-cover .box-inner {
		overflow: hidden;
		padding: 0;
	}

	.mod-box.recruit-movie-cover .box-inner .play-button {
		width: 30px;
		height: 30px;
		fill: #fafafa;
	}

	.mod-box.recruit-movie-cover .box-inner .movie-play-area {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		padding: 15px 10px;
		background: #66ba00;
		opacity: 1;
		transition: ease-in-out 0.3s;
	}

	.mod-box.recruit-movie-cover .box-inner .movie-play-area.is-banner {
		padding: 0;
		background: none;
	}

	.mod-box.recruit-movie-cover .box-inner .movie-play-area.is-banner .is-dashbord {
		display: none;
	}

	.mod-box.recruit-movie-cover .box-inner .movie-play-area.is-banner .is-page {
		display: block;
	}

	.mod-box.recruit-movie-cover .box-inner .movie-play-area.is-banner img {
		width: 100%;
		height: auto;
	}

	.mod-box.recruit-movie-cover .box-inner .movie-play-area:active {
		opacity: 0.8;
	}

	.mod-box.recruit-movie-cover .box-inner .movie-play-area .movie-thumbnail-top {
		position: relative;
		width: 22%;
		min-height: 50px;
		background: url('../img/shin_movie_button_back.png') no-repeat center center;
		background-size: cover;
	}

	.mod-box.recruit-movie-cover .box-inner .movie-play-area .movie-thumbnail-top .play-button {
		display: block;
		position: absolute;
		top: calc(50% - 15px);
		left: calc(50% - 15px);
	}

	.mod-box.recruit-movie-cover .box-inner .movie-play-area .title-box {
		width: 78%;
		padding-left: 8px;
	}

	.mod-box.recruit-movie-cover .box-inner .movie-play-area .title-box .title-top {
		display: flex;
		align-items: center;
		margin-bottom: 2px;
		color: #fafafa;
		font-size: 5.1vw;
		font-weight: bold;
	}

	.mod-box.recruit-movie-cover .box-inner .movie-play-area .title-box .title-top .play-button {
		width: 6.76vw;
		height: auto;
		margin-left: 5px;
	}

	.mod-box.recruit-movie-cover .box-inner .movie-play-area .title-box .title-sub {
		color: #4a4a4a;
		font-size: 3.6vw;
		font-weight: normal;
	}

	.mod-box.recruit-movie-cover .box-inner .movie-buttons {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 10px 0;
	}

	.mod-box.recruit-movie-cover .box-inner .movie-buttons a.link {
		display: flex;
		align-items: center;
		padding: 0 8px;
		color: #4a4a4a;
		font-size: 1.4rem;
	}

	.mod-box.recruit-movie-cover .box-inner .movie-buttons a.link i {
		display: inline-block;
		margin-left: 5px;
	}

	.mod-box.recruit-movie-cover .box-inner .movie-buttons a.link i:before {
		color: #4a4a4a;
	}

	.mod-box.recruit-movie-cover .box-inner .movie-buttons a.link.is-recruit {
		color: #8bc34a;
	}

	.mod-box.recruit-movie-cover .box-inner .movie-buttons a.link.is-recruit i:before {
		color: #8bc34a;
	}

	.mod-box.recruit-movie-cover .box-inner .movie-buttons .mod-button {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		margin: 0 10px;
		font-size: 1.6rem;
	}

	.mod-box.recruit-movie-cover.apply .box-inner .movie-play-area .movie-thumbnail-top {
		background-image: url('../img/bg_howto_movie.png');
	}

	.mod-box.recruit-movie-cover.apply .box-inner .movie-play-area .movie-thumbnail-top .play-button {
		fill: #4a4a4a;
	}

	.mod-box.recruit-movie-cover.apply .box-inner .movie-play-area .title-box .title-top .play-button {
		display: none;
	}
	/* ダッシュボードのとき */
	.widget .mod-box.recruit-movie-cover {
		margin: 15px 0 0;
	}

	.widget .mod-box.recruit-movie-cover .box-inner .movie-play-area.is-banner {
		padding: 0;
		background: none;
	}

	.widget .mod-box.recruit-movie-cover .box-inner .movie-play-area.is-banner .is-dashbord {
		display: block;
	}

	.widget .mod-box.recruit-movie-cover .box-inner .movie-play-area.is-banner .is-page {
		display: none;
	}

	.widget .mod-box.recruit-movie-cover .box-inner .movie-play-area.is-banner img {
		width: 100%;
		height: auto;
	}

	.widget .mod-box.recruit-movie-cover.hansoku {
		overflow: visible;
		background: #fff;
		box-shadow: none;
	}

	.widget .mod-box.recruit-movie-cover.hansoku .box-inner {
		overflow: visible;
	}

	.widget .mod-box.recruit-movie-cover.hansoku .box-inner .movie-play-area {
		overflow: visible;
	}

	.widget .mod-box.recruit-movie-cover.hansoku .box-inner .movie-play-area img {
		margin-top: -5%;
	}

	.widget .mod-box.recruit-movie-cover.hansoku .box-inner .movie-buttons {
		border-radius: 0 0 5px 5px;
		background: #fff;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	}
	/* モーダル部分 */
	.modal-wrap {
		display: none;
		position: fixed;
		z-index: 300;
		top: 0;
		left: 0;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.7);
	}

	.modal-wrap.shown {
		display: flex;
	}

	.modal-wrap .modal-panel {
		position: relative;
		width: calc(100% - 40px);
		padding: 0;
		border-radius: 5px;
		background: #ebebf3;
	}

	.modal-wrap .modal-panel .modal-frame-cover {
		overflow: hidden;
		width: 100%;
		border-radius: 5px 5px 0 0;
	}

	.modal-wrap .modal-panel .modal-frame-cover .modal-frame {
		position: relative;
		width: 100%;
		padding-top: 56.25%;
	}

	.modal-wrap .modal-panel .modal-frame-cover .modal-frame iframe {
		position: absolute;
		top: 0;
		right: 0;
		width: 100% !important;
		height: 100% !important;
	}

	.modal-wrap .modal-panel .mod-button {
		width: 100%;
		margin-bottom: 10px;
		font-size: 1.2rem;
	}

	.modal-wrap .modal-panel .mod-button:last-child {
		margin-bottom: 0;
	}

	.modal-wrap .modal-panel .modal-close {
		display: flex;
		position: absolute;
		top: 0;
		right: 0;
		justify-content: center;
		align-items: center;
		width: 32px;
		height: 32px;
		border: none;
		border-radius: 16px;
		background: #84849a;
		color: #fafafa;
		font-size: 1.8rem;
		-webkit-transform: translate(12px, -12px);
		transform: translate(12px, -12px);
	}

	.modal-wrap .modal-panel .modal-button-area {
		width: 100%;
		padding: 10px;
	}

	.modal-wrap .modal-panel .modal-button-area .modal-title {
		display: none;
	}

	.modal-wrap .modal-panel .modal-button-area .button-list {
		display: flex;
		flex-wrap: wrap;
	}

	.modal-wrap .modal-panel .modal-button-area .button-list .modal-button-channel {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 48%;
		margin-bottom: 10px;
		color: #4a4a4a;
		font-size: 1.2rem;
		line-height: 1.2;
		transition: ease-in-out 0.3s;
	}

	.modal-wrap .modal-panel .modal-button-area .button-list .modal-button-channel:active {
		color: #8bc34a;
	}

	.modal-wrap .modal-panel .modal-button-area .button-list .modal-button-channel:active .play-button {
		fill: #8bc34a;
	}

	.modal-wrap .modal-panel .modal-button-area .button-list .modal-button-channel .play-button {
		width: 14px;
		height: 14px;
		margin-right: 5px;
		transition: ease-in-out 0.3s;
		fill: #4a4a4a;
	}

	.modal-wrap .modal-panel .modal-button-area .button-list .modal-button-channel .text {
		width: calc( 100% - 21px);
	}
}

/*
#styleguide
PUSH 通知
```
<div class="box box-push">
    <div class="push-icon">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36.129 28" class="is_sp"><title>Guppy グッピー</title><path data-name="path" d="M35.3 3.879a38.889 38.889 0 00-9.362.378c.156-.029.244-.042.245-.042-5 .755-7.166 1.764-10.372.929a13.532 13.532 0 01-3.655-1.654A20.371 20.371 0 002.341.029C.019-.156-.535.522.5 2.335c2.529 4.431 9.355 6.672 13.06 5.97 0 0 .191 1.586.657 3.858 1.293 6.307 2.869 10.89 5.547 14.843 1.084 1.57 2.513 1.276 3.046-.855 2.5-10 6.267-16.515 12.83-21.58.726-.563.668-.618-.34-.692z" fill="#e64800"></path></svg>
    </div>
    <p class="push-txt">採用担当者からのメッセージ通知をブラウザで受け取ることで見落としを防げます。</p>
    <div class="push-btn">
        <div class="btnGroup">
            <div class="btnGroup-inner btnGroup-inner-variable">
                <a href="#" class="btn btn-c-primary btn-len-max">通知を受け取る</a>
            </div>
            <div class="btnGroup-inner btnGroup-inner-fixed push-yet">
                <a href="#" class="link">今はやめておく</a>
            </div>
        </div>
    </div>
</div>
```
*/
.box-push {
	display: grid;
	position: absolute;
	z-index: 1000;
	top: 10px;
	right: 10px;
	left: 10px;
	margin: auto;
	padding: 15px;
	gap: 5px 15px;
	grid-template-rows: auto auto;
	grid-template-columns: 55px auto;
}

.box-push .push-icon {
	display: grid;
	align-items: center;
	width: 55px;
	height: 55px;
	border: 1px solid #ebebf3;
	border-radius: 5px;
	grid-row: 1 / 3;
	grid-column: 1 / 2;
	justify-items: center;
}

.box-push .push-icon svg {
	width: auto;
	height: 30px;
}

.box-push .push-txt {
	font-size: 1.6rem;
	line-height: 1.6;
	grid-row: 1 / 2;
	grid-column: 2 / 3;
}

.box-push .push-btn {
	display: flex;
	margin: 0 -5px;
	grid-row: 2 / 3;
	grid-column: 2 / 3;
}

.box-push .push-btn .push-agree {
	flex: 1;
	margin: 0 5px;
}

.box-push .push-btn .push-yet {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 5px;
}

@media print, screen and (min-width: 768px) {
	.box-push {
		right: auto;
		grid-template-columns: 105px 320px;
	}

	.box-push .push-icon {
		width: 105px;
		height: 105px;
	}

	.box-push .push-icon svg {
		height: 61px;
	}
}

@media print, screen and (min-width: 768px) {
	.fixed-dialog {
		position: fixed;
		z-index: 5;
		top: calc( 50% - 50px);
		left: 0;
		width: 100%;
		height: 100px;
	}

	.fixed-dialog .dialog-inner {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		background-color: #4a4a4a;
		color: #fafafa;
		text-align: center;
	}

	.fixed-dialog .dialog-inner.is-success {
		background-color: #8bc34a;
	}

	.fixed-dialog .dialog-inner .inner-text {
		font-size: 2.4rem;
	}

	.fixed-dialog .dialog-inner .inner-text .large {
		font-size: 3rem;
	}
}

@media print, screen and (min-width: 768px) {
	.mod-image-sample {
		display: flex;
		flex-wrap: wrap;
	}

	.mod-image-sample .sample-box {
		position: relative;
		margin-right: 20px;
	}

	.mod-image-sample .is-pc {
		width: 340px;
	}

	.mod-image-sample .is-pc .btn-fav {
		position: absolute;
		z-index: 2;
		top: 50px;
		left: 305px;
		padding: 5px;
		background: none;
	}

	.mod-image-sample .is-pc .btn-fav svg {
		overflow: visible;
		width: 24px;
		height: auto;
	}

	.mod-image-sample .is-pc .btn-fav svg path {
		stroke: #000;
		stroke-width: 3px;
		fill: #fff;
	}

	.mod-image-sample .is-pc .box-joblist-img {
		display: block;
		position: relative;
		overflow: hidden;
		width: 340px;
		border-radius: 5px 0 0 5px;
		background: #ebebf3;
	}

	.mod-image-sample .is-pc .box-joblist-img .box-joblist-img-inner {
		width: 100%;
		height: 100%;
		min-height: 255px;
	}

	.mod-image-sample .is-pc .box-joblist-img img {
		position: absolute;
		top: 50%;
		left: 0;
		width: 100%;
		height: auto;
		-webkit-transform: translate(0, -50%);
		transform: translate(0, -50%);
	}

	.mod-image-sample .is-pc .box-joblist-img span {
		position: absolute;
		z-index: 2;
		bottom: 6px;
		left: 6px;
		color: #fff;
		font-size: 1rem;
		font-weight: 200;
	}

	.mod-image-sample .is-pc .box-joblist-img i {
		position: absolute;
		z-index: 2;
		top: 6px;
		left: 6px;
		padding: 0 3px;
		border-radius: 2px;
		background-color: rgba(255, 255, 255, 0.8);
		box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
		color: #000;
		font-size: 1.4rem;
		font-weight: bold;
		line-height: 24px;
	}

	.mod-image-sample .is-pc .box-joblist-img i::before {
		padding: 0 3px 0 0;
		color: #2658ce;
	}

	.mod-image-sample .is-sp {
		width: 270px;
	}

	.mod-image-sample .is-sp .btn-fav {
		position: absolute;
		z-index: 2;
		top: 170px;
		left: 235px;
		padding: 5px;
		background: none;
	}

	.mod-image-sample .is-sp .btn-fav svg {
		overflow: visible;
		width: 24px;
		height: auto;
	}

	.mod-image-sample .is-sp .btn-fav svg path {
		stroke: #000;
		stroke-width: 3px;
		fill: #fff;
	}

	.mod-image-sample .is-sp .box-joblist-img {
		display: block;
		position: relative;
		overflow: hidden;
		border-radius: 5px 5px 0 0;
		background: #ebebf3;
	}

	.mod-image-sample .is-sp .box-joblist-img .box-joblist-img-inner {
		padding-bottom: 56.25%;
	}

	.mod-image-sample .is-sp .box-joblist-img img {
		position: absolute;
		z-index: 1;
		top: 0;
		bottom: 0;
		width: 100%;
		height: auto;
		margin: auto;
	}

	.mod-image-sample .is-sp .box-joblist-img span {
		position: absolute;
		z-index: 2;
		top: 6px;
		right: 6px;
		color: #fff;
		font-size: 1rem;
		font-weight: 200;
	}

	.mod-image-sample .is-sp .box-joblist-img i {
		position: absolute;
		z-index: 2;
		top: 6px;
		left: 6px;
		padding: 0 3px;
		border-radius: 2px;
		background-color: rgba(255, 255, 255, 0.8);
		box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
		color: #000;
		font-size: 1.4rem;
		font-weight: bold;
		line-height: 24px;
	}

	.mod-image-sample .is-sp .box-joblist-img i::before {
		padding: 0 3px 0 0;
		color: #2658ce;
	}

	.mod-image-sample .is-sp .box-joblist-img.is_none {
		padding-bottom: 56.25%;
		background: url('/assets/img/bg-pattern.png');
		text-align: center;
	}

	.mod-image-sample .is-sp .box-joblist-img.is_none .box-joblist-img-sub {
		display: flex;
		position: absolute;
		z-index: 1;
		top: 0;
		bottom: 0;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		margin: auto;
		padding: 15px;
		font-weight: 400;
	}

	.mod-image-sample .is-sp .box-joblist-img.is_none .box-joblist-img-sub .name {
		overflow: hidden;
		width: 100%;
		margin-bottom: 5px;
		font-size: 1.7rem;
		line-height: 1.4;
		white-space: nowrap !important;
		text-overflow: ellipsis !important;
	}

	.mod-image-sample .is-sp .box-joblist-img.is_none .box-joblist-img-sub .jobtype {
		margin-bottom: 10px;
		font-size: 1.3rem;
		line-height: 1.6;
	}

	.mod-image-sample .is-sp .box-joblist-img.is_none .box-joblist-img-sub .jobtype li {
		display: inline-block;
	}

	.mod-image-sample .is-sp .box-joblist-img.is_none .box-joblist-img-sub .jobtype li::after {
		content: '/';
	}

	.mod-image-sample .is-sp .box-joblist-img.is_none .box-joblist-img-sub .jobtype li:last-child::after {
		content: '';
	}

	.mod-image-sample .is-sp .box-joblist-img.is_none .box-joblist-img-sub .salary {
		font-size: 1.5rem;
		line-height: 1.5;
	}
}

@media print, screen and (max-width: 767px) {
	.mod-image-sample {
		display: flex;
		flex-wrap: wrap;
	}

	.mod-image-sample .sample-box {
		position: relative;
		margin-right: 20px;
	}

	.mod-image-sample .is-pc {
		width: 300px;
	}

	.mod-image-sample .is-pc .btn-fav {
		position: absolute;
		z-index: 2;
		top: 50px;
		left: 265px;
		padding: 5px;
		background: none;
	}

	.mod-image-sample .is-pc .btn-fav svg {
		overflow: visible;
		width: 24px;
		height: auto;
	}

	.mod-image-sample .is-pc .btn-fav svg path {
		stroke: #000;
		stroke-width: 3px;
		fill: #fff;
	}

	.mod-image-sample .is-pc .box-joblist-img {
		display: block;
		position: relative;
		overflow: hidden;
		width: 300px;
		border-radius: 5px 0 0 5px;
		background: #ebebf3;
	}

	.mod-image-sample .is-pc .box-joblist-img .box-joblist-img-inner {
		width: 100%;
		height: 100%;
		min-height: 225px;
	}

	.mod-image-sample .is-pc .box-joblist-img img {
		position: absolute;
		top: 50%;
		left: 0;
		width: 100%;
		height: auto;
		-webkit-transform: translate(0, -50%);
		transform: translate(0, -50%);
	}

	.mod-image-sample .is-pc .box-joblist-img span {
		position: absolute;
		z-index: 2;
		bottom: 6px;
		left: 6px;
		color: #fff;
		font-size: 1rem;
		font-weight: 200;
	}

	.mod-image-sample .is-pc .box-joblist-img i {
		position: absolute;
		z-index: 2;
		top: 6px;
		left: 6px;
		padding: 0 3px;
		border-radius: 2px;
		background-color: rgba(255, 255, 255, 0.8);
		box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
		color: #000;
		font-size: 1.4rem;
		font-weight: bold;
		line-height: 24px;
	}

	.mod-image-sample .is-pc .box-joblist-img i::before {
		padding: 0 3px 0 0;
		color: #2658ce;
	}

	.mod-image-sample .is-sp {
		width: 270px;
	}

	.mod-image-sample .is-sp .btn-fav {
		position: absolute;
		z-index: 2;
		top: 170px;
		left: 235px;
		padding: 5px;
		background: none;
	}

	.mod-image-sample .is-sp .btn-fav svg {
		overflow: visible;
		width: 24px;
		height: auto;
	}

	.mod-image-sample .is-sp .btn-fav svg path {
		stroke: #000;
		stroke-width: 3px;
		fill: #fff;
	}

	.mod-image-sample .is-sp .box-joblist-img {
		display: block;
		position: relative;
		overflow: hidden;
		border-radius: 5px 5px 0 0;
		background: #ebebf3;
	}

	.mod-image-sample .is-sp .box-joblist-img .box-joblist-img-inner {
		padding-bottom: 56.25%;
	}

	.mod-image-sample .is-sp .box-joblist-img img {
		position: absolute;
		z-index: 1;
		top: 0;
		bottom: 0;
		width: 100%;
		height: auto;
		margin: auto;
	}

	.mod-image-sample .is-sp .box-joblist-img span {
		position: absolute;
		z-index: 2;
		top: 6px;
		right: 6px;
		color: #fff;
		font-size: 1rem;
		font-weight: 200;
	}

	.mod-image-sample .is-sp .box-joblist-img i {
		position: absolute;
		z-index: 2;
		top: 6px;
		left: 6px;
		padding: 0 3px;
		border-radius: 2px;
		background-color: rgba(255, 255, 255, 0.8);
		box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
		color: #000;
		font-size: 1.4rem;
		font-weight: bold;
		line-height: 24px;
	}

	.mod-image-sample .is-sp .box-joblist-img i::before {
		padding: 0 3px 0 0;
		color: #2658ce;
	}

	.mod-image-sample .is-sp .box-joblist-img.is_none {
		padding-bottom: 56.25%;
		background: url('/assets/img/bg-pattern.png');
		text-align: center;
	}

	.mod-image-sample .is-sp .box-joblist-img.is_none .box-joblist-img-sub {
		display: flex;
		position: absolute;
		z-index: 1;
		top: 0;
		bottom: 0;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		margin: auto;
		padding: 15px;
		font-weight: 400;
	}

	.mod-image-sample .is-sp .box-joblist-img.is_none .box-joblist-img-sub .name {
		overflow: hidden;
		width: 100%;
		margin-bottom: 5px;
		font-size: 1.7rem;
		line-height: 1.4;
		white-space: nowrap !important;
		text-overflow: ellipsis !important;
	}

	.mod-image-sample .is-sp .box-joblist-img.is_none .box-joblist-img-sub .jobtype {
		margin-bottom: 10px;
		font-size: 1.3rem;
		line-height: 1.6;
	}

	.mod-image-sample .is-sp .box-joblist-img.is_none .box-joblist-img-sub .jobtype li {
		display: inline-block;
	}

	.mod-image-sample .is-sp .box-joblist-img.is_none .box-joblist-img-sub .jobtype li::after {
		content: '/';
	}

	.mod-image-sample .is-sp .box-joblist-img.is_none .box-joblist-img-sub .jobtype li:last-child::after {
		content: '';
	}

	.mod-image-sample .is-sp .box-joblist-img.is_none .box-joblist-img-sub .salary {
		font-size: 1.5rem;
		line-height: 1.5;
	}
}

/*
#styleguide
スカウトパック残数ウィジェット
```
<div class="mod-box">
	<div class="mod-scoutpacks">
		<div class="mod-scoutpacks-data">
			<div class="mod-scoutpacks-item mod-scoutpacks-info">
				<strong class="mod-scoutpacks-name">スカウト11通パック</strong><br>
				<a href="">スカウトパックについて</a> | <a href="#">購入履歴</a>
			</div>
			<div class="mod-scoutpacks-item mod-scoutpacks-rest">
				残り<br><strong class="mod-scoutpacks-rest-count">10</strong>通
			</div>
			<div class="mod-scoutpacks-item mod-scoutpacks-expiry">利用期限：2024/5/31まで</div>
		</div>
		<div class="mod-scoutpacks-cta"><a href="#" class="mod-button button-blue">スカウトする</a></div>
	</div>
</div>

```
以下を貼り付けることでウィジェットを呼び出せます。

```
{% import "_partial/_scoutpacks_widget.njk" as scoutpacks %}
{{ scoutpacks.scoutPacks('scoutlist') }}

```

*/
.mod-scoutpacks {
	display: flex;
	align-items: stretch;
	padding: 15px;
}

@media print, screen and (max-width: 767px) {
	.mod-scoutpacks {
		display: block;
		position: relative;
		padding-bottom: 35px;
	}
}

.mod-scoutpacks-data {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	gap: 15px;
}

@media print, screen and (max-width: 767px) {
	.mod-scoutpacks-data {
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 5px 0;
	}
}

.mod-scoutpacks-cta {
	width: 160px;
	border-left: none;
	text-align: right;
	text-wrap: nowrap;
}

@media print, screen and (max-width: 767px) {
	.mod-scoutpacks-cta {
		position: absolute;
		right: 10px;
		bottom: 10px;
	}
}

.mod-scoutpacks-item {
	padding-left: 15px;
	border-left: 1px solid #ebebf3;
}

.mod-scoutpacks-item:first-child {
	padding-left: 0;
	border-left: none;
}

.mod-scoutpacks-info {
	font-size: 1.2rem;
	line-height: 1.4;
}

@media print, screen and (max-width: 767px) {
	.mod-scoutpacks-info {
		width: calc(100% - 80px);
	}
}

.mod-scoutpacks-name {
	font-size: 2.0rem;
}

.mod-scoutpacks-rest-count {
	color: #2658ce;
	font-size: 2.6rem;
}

.mod-scoutpacks-rest br {
	display: none;
}

@media print, screen and (max-width: 767px) {
	.mod-scoutpacks-rest {
		width: 80px;
		line-height: 1.1;
	}

	.mod-scoutpacks-rest br {
		display: inline-block;
	}
}

.mod-scoutpacks-expiry {
	font-size: 1.4rem;
}

@media print, screen and (max-width: 767px) {
	.mod-scoutpacks-expiry {
		width: 100%;
		padding: 0;
		border: none;
		font-size: 1.2rem;
	}
}

.p-caution-inner {
	width: 100%;
	max-width: 863px;
	padding: 30px;
	border: 2px solid #b40000;
	border-radius: 5px;
}

@media print, screen and (max-width: 767px) {
	.p-caution-inner {
		padding: 18px 15px;
	}
}

.p-caution-link {
	color: #b40000;
	font-size: 2.4rem;
	text-align: center;
	text-decoration: underline;
	transition: ease-in-out 0.3s;
}

@media print, screen and (max-width: 767px) {
	.p-caution-link {
		font-size: 1.8rem;
		text-align: left;
	}
}

.p-caution-link:visited {
	color: #b40000;
}

.p-caution-link:hover {
	opacity: 0.6;
	color: #b40000;
}

.p-caution-link i:before {
	color: #b40000;
}

.information-box {
	overflow: hidden;
	margin-top: 15px;
	border: #b40000 1px solid;
	border-radius: 5px;
	background-color: #fff;
}

.information-box h2 {
	margin-bottom: 10px;
	color: #b40000;
	font-size: 2.0rem;
	font-weight: bold;
}

@media print, screen and (max-width: 767px) {
	.information-box h2 {
		font-size: 1.8rem;
	}
}

.information-box a {
	color: initial;
	text-decoration: underline;
}

.information-box.spot {
	margin-top: 0;
	border: #7472e1 1px solid;
}

.information-box.spot h2 {
	margin-bottom: 5px;
	color: #7472e1;
	font-size: 1.6rem;
}

.information-box.spot a {
	color: #2196f3;
}

/* variables color */
/*
#colors

@Service #2658CE
@Job #37B500
@Career #FE590F
@tone1 #F4F4F9
@tone2 #EBEBF3
@tone3 #CACAD9
@tone4 #84849A
@tone5 #4A4A4A
*/
/* variables-color */
:root {
	/* color color palette */
	/* Gray */
	--Gray-100: #f6f3f0;
	--Gray-200: #e4e0de;
	--Gray-300: #cbc8c6;
	--Gray-400: #b2afac;
	--Gray-500: #969391;
	--Gray-600: #716e6b;
	--Gray-700: #605d5b;
	--Gray-800: #4e4b49;
	--Gray-900: #2d2b29;
	--Gray-1000: #171413;
	/* Pink */
	--Pink-100: #fef1f5;
	--Pink-200: #fbd8e2;
	--Pink-300: #f7b5c8;
	--Pink-400: #f189aa;
	--Pink-500: #e9588e;
	--Pink-600: #cb006b;
	--Pink-700: #ac0058;
	--Pink-800: #8b0647;
	--Pink-900: #57002a;
	--Pink-1000: #280010;
	/* Red */
	--Red-100: #fff1f1;
	--Red-200: #ffd8d7;
	--Red-300: #fdb4b4;
	--Red-400: #fb888b;
	--Red-500: #f5505f;
	--Red-600: #d40038;
	--Red-700: #ac1731;
	--Red-800: #920625;
	--Red-900: #5c0415;
	--Red-1000: #2f0107;
	/* Orange */
	--Orange-100: #fef2ed;
	--Orange-200: #ffdacd;
	--Orange-300: #ffb59c;
	--Orange-400: #f88d68;
	--Orange-500: #f25915;
	--Orange-600: #c04101;
	--Orange-700: #934225;
	--Orange-800: #79371f;
	--Orange-900: #4f1f0d;
	--Orange-1000: #260c04;
	/* Lime */
	--Lime-100: #f2f9e2;
	--Lime-200: #dfebbf;
	--Lime-300: #c1d293;
	--Lime-400: #a2bb4b;
	--Lime-500: #869f16;
	--Lime-600: #687c0b;
	--Lime-700: #566606;
	--Lime-800: #465408;
	--Lime-900: #2c3505;
	--Lime-1000: #121700;
	/* Green */
	--Green-100: #ecfaec;
	--Green-200: #cdf0cc;
	--Green-300: #a8daa8;
	--Green-400: #66c56c;
	--Green-500: #28af3d;
	--Green-600: #2b8735;
	--Green-700: #276d2e;
	--Green-800: #1b5a22;
	--Green-900: #0f3a14;
	--Green-1000: #021b04;
	/* Aqua */
	--Aqua-100: #e3fafe;
	--Aqua-200: #b7f0fa;
	--Aqua-300: #7edae9;
	--Aqua-400: #12c0d6;
	--Aqua-500: #1aa4b6;
	--Aqua-600: #2b7e8a;
	--Aqua-700: #176774;
	--Aqua-800: #0f5760;
	--Aqua-900: #05373f;
	--Aqua-1000: #00191d;
	/* Blue */
	--Blue-100: #f2f5fc;
	--Blue-200: #dae3f7;
	--Blue-300: #b0c7f9;
	--Blue-400: #8aaaf6;
	--Blue-500: #648cf4;
	--Blue-600: #3a63e0;
	--Blue-700: #2045da;
	--Blue-800: #142ec5;
	--Blue-900: #08118c;
	--Blue-1000: #020448;
	/* Violet */
	--Violet-100: #f4f5fa;
	--Violet-200: #dfe1f6;
	--Violet-300: #bec2f8;
	--Violet-400: #9fa3f4;
	--Violet-500: #8382f3;
	--Violet-600: #6258dd;
	--Violet-700: #5336d8;
	--Violet-800: #451dc3;
	--Violet-900: #290083;
	--Violet-1000: #104;
	/* Purple */
	--Purple-100: #f9f3f9;
	--Purple-200: #eedced;
	--Purple-300: #e2b7e1;
	--Purple-400: #d392d2;
	--Purple-500: #c46bc4;
	--Purple-600: #a247a2;
	--Purple-700: #950c98;
	--Purple-800: #7d0c7f;
	--Purple-900: #4f0050;
	--Purple-1000: #260027;
	/* Yellow */
	--Yellow-100: #fffaec;
	--Yellow-200: #feeec1;
	--Yellow-300: #fee195;
	--Yellow-400: #f7ce5a;
	--Yellow-500: #f4c200;
	--Yellow-600: #d4a800;
	--Yellow-700: #b18c00;
	--Yellow-800: #896c00;
	--Yellow-900: #5f4a00;
	--Yellow-1000: #1f1600;
}

/*
#styleguide
input text

```
<div class="grid">
<div class="grid-column200"><input type="text" class="mod-input" placeholder="example"></div>
<div class="grid-column200"><input type="text" class="mod-input form-error" value="aaaaaaa@aaaa"></div>
</div>
```
*/
.mod-input {
	outline: none;
	padding: 10px;
	border: 1px solid #cacad9;
	border-radius: 5px;
	background-color: #ebebf3;
	line-height: 1.4;
}

@media print, screen and (min-width: 768px) {
	.mod-input {
		font-size: 1.4rem;
	}
}

@media print, screen and (max-width: 767px) {
	.mod-input {
		font-size: 1.6rem;
	}
}

.mod-input::-webkit-input-placeholder {
	color: rgba(132, 132, 154, 0.7);
}

.mod-input::-moz-placeholder {
	color: rgba(132, 132, 154, 0.7);
}

.mod-input::-ms-input-placeholder {
	color: rgba(132, 132, 154, 0.7);
}

.mod-input::placeholder {
	color: rgba(132, 132, 154, 0.7);
}

.mod-input:-ms-input-placeholder {
	color: #aeaebc;
}

@media print, screen and (max-width: 767px) {
	.mod-input.sp-margin {
		margin-bottom: 10px;
	}
}

input[type=date]::-webkit-calendar-picker-indicator {
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0;
}

input[type='date']::-webkit-inner-spin-button {
	-webkit-appearance: none;
}

input[type='date']::-webkit-clear-button {
	-webkit-appearance: none;
}

input[type='date'] {
	position: relative;
}

.form-error.mod-textarea,
.form-error.mod-input,
.form-error.mod-select {
	border-color: #e70000;
	background-color: #fdd !important;
	-webkit-animation: animation-error 1s infinite ease;
	animation: animation-error 1s infinite ease;
}

.form-error.mod-select i:before {
	color: #e70000;
}

.form-error.checkbox label:after {
	border: 1px solid #e70000;
	background-color: #fdd;
	-webkit-animation: animation-error 2s infinite ease;
	animation: animation-error 2s infinite ease;
}

@-webkit-keyframes animation-error {
	0% {
		border-color: #e70000;
	}

	50% {
		border-color: #ffb4b4;
	}

	100% {
		border-color: #e70000;
	}
}

@keyframes animation-error {
	0% {
		border-color: #e70000;
	}

	50% {
		border-color: #ffb4b4;
	}

	100% {
		border-color: #e70000;
	}
}

/*
#styleguide
エラーmessage

```
<p class="error-message">予約送信は過去の日時を指定することはできません。</p>
<p class="error-message-multi-line">予約送信は過去の日時を指定することはできません。</p>
```
*/
.error-message {
	position: relative;
	margin-bottom: 10px;
	padding-left: 18px;
	color: #b40000;
	line-height: 1.4;
}

.error-message:before {
	content: '\e911';
	position: absolute;
	top: 1px;
	left: 0;
	margin-right: 3px;
	color: #b40000;
	font-size: 1.4rem;
}

.error-message-mb0 {
	margin-bottom: 0;
}

.error-message-multi-line {
	position: relative;
	padding-left: 25px;
	color: #b40000;
	line-height: 1.4;
}

.error-message-multi-line:before {
	content: '\e911';
	position: absolute;
	top: 0;
	left: 0;
	margin-right: 3px;
	color: #b40000;
	font-size: 2rem;
}

/*
#styleguide
インプット幅五種

```
<input type="text" class="mod-input size-s">
<input type="text" class="mod-input size-ssm">new!
<input type="text" class="mod-input size-sm">
<input type="text" class="mod-input size-m">
<input type="text" class="mod-input size-l">
<input type="text" class="mod-input size-max">
```
*/
.size-s {
	max-width: 4em;
}

.size-ssm {
	max-width: 5em;
}

.size-sm {
	max-width: 6em;
}

.size-smm {
	max-width: 8em;
}

.size-m {
	max-width: 10em;
}

@media print, screen and (max-width: 767px) {
	.size-l {
		width: 100%;
	}
}

@media print, screen and (min-width: 768px) {
	.size-l {
		width: 24em;
		max-width: 100%;
	}
}

.size-max {
	width: 100%;
}

.size-160 {
	width: 160px;
	max-width: 100%;
}

.size-400 {
	width: 400px;
	max-width: 100%;
}

@media print, screen and (max-width: 767px) {
	.size-sp-max {
		width: 100%;
		max-width: 100%;
	}
}

/*
#styleguide
select

```
<div class="mod-select">
<select>
<option>選択してください</option>
<option value="1">カレーライス</option>
<option value="2">ラーメンと半チャーハン</option>
</select>
<i class="icon-arrow_down"></i>
</div>

<div class="mod-select form-error">
<select>
<option>選択してください</option>
<option value="1">カレーライス</option>
<option value="2">ラーメンと半チャーハン</option>
</select>
<i class="icon-arrow_down"></i>
</div>

<div class="mod-select">
<select>
<option>選択してください</option>
<option value="1">カレーライス</option>
<option value="2">ラーメンと半チャーハン</option>
</select>
<i class="icon-arrow_down"></i>
<span id="municipality_loading1">ローディング</span>
</div>
```
*/
.mod-select {
	display: inline-block;
	position: relative;
	border: 1px solid #cacad9;
	border-radius: 5px;
	background-color: #ebebf3;
}

.mod-select select::-ms-expand {
	display: none;
}

.mod-select select {
	display: inline-block;
	position: relative;
	z-index: 1;
	width: 100%;
	padding: 10px 35px 10px 10px;
	background-color: rgba(225, 225, 225, 0);
	line-height: 1.4;
	text-indent: 0.01px;
	text-overflow: clip;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.mod-select select:disabled {
	color: #84849a;
}

.mod-select select:disabled + i {
	opacity: 0.4;
}

@media print, screen and (min-width: 768px) {
	.mod-select select {
		font-size: 1.4rem;
	}
}

@media print, screen and (max-width: 767px) {
	.mod-select select {
		font-size: 1.7rem;
	}
}

.mod-select i {
	display: flex;
	position: absolute;
	z-index: 0;
	top: 0;
	right: 0;
	bottom: 0;
	justify-content: center;
	align-items: center;
	height: 100%;
	margin: auto 10px auto 0;
}

.mod-select i:before {
	color: #84849a;
}

.mod-select span {
	display: block;
	display: flex;
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	border-radius: 5px;
	background-color: rgba(244, 244, 249, 0.8);
}

.mod-select span:empty {
	display: none;
}

.mod-select.select-format {
	background: #4a4a4a;
	color: #fff;
}

.mod-select.select-format select {
	background: none;
	color: #fff;
}

.mod-select.select-format option {
	color: #4a4a4a;
}

.mod-select.select-format i {
	color: #fff;
}

.mod-select.select-format i:before {
	color: #fff;
}

@media print, screen and (min-width: 768px) {
	.mod-select.select-format-max {
		max-width: 200px;
	}
}

/*
#styleguide
RADIO BUTTON

```
<div class="mod-grid wrap-item2">

<div class="radio">
<input type="radio" name="data[Job][transfer]" id="JobTransfer1" value="1">
<label for="JobTransfer1" class="icon-check">はい</label>
</div>

<div class="radio">
<input type="radio" name="data[Job][transfer]" id="JobTransfer2" value="2">
<label for="JobTransfer2" class="icon-check">いいえ</label>
</div>

<div class="radio">
<input type="radio" name="data[Job][transfer]" id="JobTransfer3" value="3">
<label for="JobTransfer3" class="icon-check">どちらでもない</label>
</div>

<div class="radio">
<input type="radio" name="data[Job][transfer]" id="JobTransfer4" value="3">
<label for="JobTransfer4" class="icon-check">★</label>
</div>

<!-- /.mod-radio-group --></div>

<div class="mod-grid wrap-item2">

<div class="radio">
<input type="radio" name="data[Job][transfer]" id="JobTransfer1" value="1">
<label for="JobTransfer1" class="icon-check">はい</label>
</div>

<div class="radio">
<input type="radio" name="data[Job][transfer]" id="JobTransfer2" value="2">
<label for="JobTransfer2" class="icon-check">いいえ</label>
</div>

<div class="radio">
<input type="radio" name="data[Job][transfer]" id="JobTransfer3" value="3">
<label for="JobTransfer3" class="icon-check">どちらでもない</label>
</div>

<div class="radio">
<input type="radio" name="data[Job][transfer]" id="JobTransfer4" value="3">
<label for="JobTransfer4" class="icon-check">★</label>
</div>

<!-- /.mod-radio-group --></div>

```
*/
.radio input {
	display: none;
}

.radio input:checked + label {
	color: #2658ce;
	font-weight: bold;
}

.radio input:checked + label:after {
	border: none !important;
	background-color: #2658ce !important;
}

.radio input:checked + label:before {
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 18px;
	height: 18px;
	margin: auto;
	font-size: 1.6rem;
	line-height: 1.2;
	text-align: center;
}

.radio input:disabled + label {
	color: #84849a;
}

.radio input.form-error + label:after {
	border: 1px solid #e70000;
	background-color: #fdd;
	-webkit-animation: animation-error 2s infinite ease;
	animation: animation-error 2s infinite ease;
}

.radio label {
	position: relative;
	margin-right: 20px;
	padding-left: 25px;
}

.radio label:after {
	content: '';
	display: block;
	position: absolute;
	z-index: 1;
	top: 0;
	bottom: 0;
	left: 0;
	width: 18px;
	height: 18px;
	margin: auto;
	border-radius: 50%;
	background-color: #ebebf3;
}

.radio label:before {
	display: none;
	z-index: 2;
}

@media print, screen and (max-width: 767px) {
	.radio input:checked + label:before {
		left: 10px;
	}

	.radio input:disabled + label {
		color: #84849a;
	}

	.radio label {
		display: flex;
		align-items: center;
		width: 100%;
		padding: 10px 10px 10px 35px;
		border: 1px solid #cacad9;
		border-radius: 5px;
		background-color: #fff;
	}

	.radio label:after {
		left: 10px;
	}
}

.radio-recruit_plans2022 {
	font-size: 1.4rem;
	font-weight: bold;
}

.radio-recruit_plans2022 input:checked + label {
	color: #2658ce;
}

.radio-recruit_plans2022 label {
	font-size: 1.4rem;
	font-weight: bold;
}

.radio-recruit_plans2022 label span {
	display: inline-block;
	width: 14rem;
}

.radio-recruit_plans2022 label strong {
	font-size: 1.8rem;
}

@media print, screen and (max-width: 767px) {
	.radio-recruit_plans2022 label {
		flex-wrap: wrap;
		justify-content: center;
	}

	.radio-recruit_plans2022 label span {
		display: block;
		width: 100%;
		margin-bottom: 5px;
		text-align: center;
	}
}

.radio-recruit_plans2022 strong {
	font-size: 1.8rem;
}

/*
#styleguide
CheckBox

```
<div class="mod-grid wrap-item">
<div class="checkbox">
<input type="checkbox" name="checkbox" value="" id="checkbox1">
<label class="icon-check" for="checkbox1">ご飯派</label>
</div>

<div class="checkbox">
<input type="checkbox" name="checkbox" value="" id="checkbox2">
<label class="icon-check" for="checkbox2">パン派</label>
</div>

<div class="checkbox">
<input type="checkbox" name="checkbox" value="" id="checkbox3">
<label class="icon-check" for="checkbox3">炭水化物反対派</label>
</div>

<div class="checkbox">
<input type="checkbox" name="checkbox" value="" id="checkbox4">
<label class="icon-check" for="checkbox4">空気派</label>
</div>

<div class="checkbox">
<input type="checkbox" name="checkbox" value="" checked="checked" disabled="disabled" id="checkbox5">
<label class="icon-check checkbox-fixed" for="checkbox5">固定</label>
</div>

</div>

```
*/
/*
#styleguide
CheckBox(single)

```
<strong>牛乳：</strong>
<div class="checkbox single">
<input type="checkbox" name="checkbox" value="" id="checkbox5">
<label class="icon-check" for="checkbox5"></label>
</div>

```
*/
.checkbox input {
	display: none;
}

.checkbox input:checked + label {
	color: #2658ce;
	font-weight: bold;
}

.checkbox input:checked + label:after {
	border: none;
	background-color: #2658ce !important;
}

.checkbox input:checked + label:before {
	display: inline-block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 18px;
	height: 18px;
	margin: auto;
	font-size: 1.6rem;
	line-height: 1.2;
	text-align: center;
}

.checkbox input:checked + label.checkbox-fixed {
	cursor: not-allowed;
	color: #84849a;
}

.checkbox input:checked + label.checkbox-fixed:after {
	background-color: #969391 !important;
}

.checkbox input:disabled + label {
	cursor: auto;
	color: #84849a;
}

.checkbox input:disabled + label:after {
	border: none;
	background-color: #cbc8c6 !important;
}

.checkbox label {
	cursor: pointer;
	display: block;
	position: relative;
	margin-right: 20px;
	padding-left: 25px;
	line-height: 1.4;
}

.checkbox label:after {
	content: '';
	display: block;
	position: absolute;
	z-index: 1;
	top: 0;
	bottom: 0;
	left: 0;
	width: 18px;
	height: 18px;
	margin: auto;
	border: 1px solid #cbc8c6;
	border-radius: 3px;
	background-color: #f6f3f0;
}

.checkbox label:before {
	display: none;
	z-index: 2;
}

.checkbox.single {
	display: inline-block;
	vertical-align: text-top;
}

.checkbox.single label {
	height: 1em;
}

@media print, screen and (max-width: 767px) {
	.checkbox input:checked + label:before {
		left: 10px;
	}

	.checkbox label {
		display: flex;
		align-items: center;
		width: 100%;
		padding: 10px 10px 10px 35px;
		border: 1px solid #cacad9;
		border-radius: 5px;
		background-color: #fff;
	}

	.checkbox label:after {
		left: 10px;
	}

	.checkbox.single {
		display: inline-block;
		vertical-align: text-top;
	}

	.checkbox.single input:checked + label:before {
		left: 0;
	}

	.checkbox.single label {
		padding: 0;
		border: none;
	}

	.checkbox.single label:after {
		left: 0;
	}

	.checkbox.simple label {
		border: none;
	}
}

/*
#styleguide
textarea

```
<textarea class="mod-textarea" cols="10">
</textarea>
```
*/
.mod-textarea {
	outline: none;
	width: 100%;
	padding: 5px;
	border: 1px solid #cacad9;
	border-radius: 5px;
	background-color: #ebebf3;
	line-height: 1.4;
}

@media print, screen and (min-width: 768px) {
	.mod-textarea {
		font-size: 1.4rem;
	}
}

@media print, screen and (max-width: 767px) {
	.mod-textarea {
		font-size: 1.7rem;
	}
}

.mod-textarea.row-s {
	height: 2em;
}

.mod-textarea.row-m {
	height: 4em;
}

.mod-textarea.row-l {
	height: 8em;
}

.mod-textarea.row-xl {
	height: 16em;
}

.mod-textarea::-webkit-input-placeholder {
	color: rgba(132, 132, 154, 0.7);
}

.mod-textarea::-moz-placeholder {
	color: rgba(132, 132, 154, 0.7);
}

.mod-textarea::-ms-input-placeholder {
	color: rgba(132, 132, 154, 0.7);
}

.mod-textarea::placeholder {
	color: rgba(132, 132, 154, 0.7);
}

.mod-textarea:-ms-input-placeholder {
	color: #aeaebc;
}

pre.mod-textarea {
	white-space: pre-wrap;
}

/*
#styleguide
textarea各種大きさ

```
<textarea class="mod-textarea row-s">
</textarea>
<hr>
<textarea class="mod-textarea row-m">
</textarea>
<hr>
<textarea class="mod-textarea row-l">
</textarea>
<hr>

<textarea class="mod-textarea row-xl">
</textarea>
```
*/
/*
#styleguide
検索欄

```
    <div class="mod-box box-toggle">
      <input type="checkbox" id="toggle1" checked>
      <label class="toggle-button box-title button-icon" for="toggle1">求人情報を絞り込む<i class="icon-arrow_down"></i></label>
      <div class="box-inner">
        <form>
          <div class="l-form1">
            <div>
              <input type="text" class="mod-input" placeholder="キーワード">
            </div>
            <div>
              <div class="mod-select">
                <i class="icon-arrow_down"></i>
                <select>
                  <option>雇用形態</option>
                  <option value="1">正規</option>
                  <option value="2">非正規</option>
                </select>
              </div>
            </div>
            <div>
              <div class="mod-select">
                <i class="icon-arrow_down"></i>
                <select>
                  <option>都道府県</option>
                  <option value="1">正規</option>
                  <option value="2">非正規</option>
                </select>
              </div>
            </div>
            <div>
              <div class="mod-select">
                <i class="icon-arrow_down"></i>
                <select>
                  <option>職種</option>
                  <option value="1">正規</option>
                  <option value="2">非正規</option>
                </select>
              </div>
            </div>
            <div>
              <button tyle="submit" class="mod-button button-submit button-blue">絞り込む</button>
            </div>
            <!--/ l-form1--></div>
        </form>
      </div>
    </div><!-- /.toggle-wrap -->
```
*/
/*
#styleguide
大きいフォーム

```
    <div class="mod-box box-form">
      <div class="box-title">求人情報</div>
      <div class="box-inner">
        <div class="l-grid form-item">
          <div class="l-grid-fix">
            <div class="form-label">
              <div class="form-labeltxt">キャッチコピー</div>
              <a href="#" class="icon-point"></a>
              <div><span class="mod-label label-coution">必須</span></div>
            </div>
          </div>
          <div class="l-grid-variable">
            <input type="text" class="mod-input" placeholder="example">
          </div>
        </div>
      </div>
    </div>
    <div class="mod-box box-form">
      <div class="box-title">求人情報</div>
      <div class="box-inner">
        <div class="l-grid form-item">
          <div class="l-grid-fix">
            <div class="form-label">
              <div class="form-labeltxt">メッセージ</div>
              <a href="#" class="icon-point"></a>
              <div><span class="mod-label label-coution">必須</span></div>
            </div>
          </div>
          <div class="l-grid-variable">
			<textarea class="mod-textarea row-m">
			</textarea>
			<div>
				<div>例文を表示する</div>
				<div>
					例）
					「一人ひとりに合わせた研修制度」で段階的にスキルアップすることができます。
					経験がなくても若手からベテランまで皆であなたのサポートをしっかりしますので安心してください。
					子育て中の方も多様な働き方ができますので、無理のない働き方で仕事と家庭を両立できます。
					離職率が低いのも自慢です。≪具体的に書くと効果的≫
				</div>
			</div>
          </div>
        </div>
      </div>
    </div>
```
*/
.form-label {
	display: flex;
	align-items: center;
	width: 210px;
}

.form-label.label-24em {
	width: 24em;
}

.form-label.label-11em {
	width: 11em;
}

.form-label.label-9em {
	width: 9em;
}

.form-label > * {
	margin-right: 10px;
}

.form-label > *:last-child {
	margin-right: 0;
}

.form-label a:before {
	color: #2658ce;
	font-size: 1.6rem;
}

.form-label .form-labeltxt {
	flex-grow: 1;
	font-weight: 600;
	-webkit-font-feature-settings: 'palt';
	font-feature-settings: 'palt';
}

.form-label-wrap {
	flex-wrap: wrap;
}

.form-sample {
	margin-top: 4px;
	color: #84849a;
	font-size: 1.2rem;
	line-height: 1.6;
}

.form-sample .form-sample-inner {
	position: relative;
}

.form-sample .form-sample-inner dl {
	position: relative;
}

.form-sample .form-sample-inner dl dt {
	position: absolute;
	top: 0;
	left: 0;
}

.form-sample .form-sample-inner dl dd {
	padding-left: 2em;
}

.form-sample .form-sample-inner dl dd .form-sample-copy {
	display: inline-block;
	float: right;
	border-bottom: 1px dotted #2658ce;
	color: #2658ce;
	text-align: right;
}

.form-sample .form-sample-inner dl dd .form-sample-copy i::before {
	color: #2658ce;
}

.form-sample .form-sample-btn {
	display: none;
}

.form-sample.is-sp-show {
	display: none;
}

@media only screen and (max-width: 1050px) and (min-width: 768px) {
	.form-sample.is-sp-show {
		display: block;
	}
}

@media print, screen and (max-width: 767px) {
	.form-label {
		width: 100%;
	}

	.form-label.label-11em {
		width: 100%;
	}

	.form-label .form-labeltxt {
		flex-grow: 0;
		order: 1;
	}

	.form-label .form-labeltxt br {
		display: none;
	}

	.form-label a {
		order: 3;
		margin-right: 0;
	}

	.form-label :last-child {
		flex-grow: 1;
		order: 2;
		margin-right: 10px;
	}

	.form-label.label-24em {
		width: 100%;
	}

	.form-label.label-24em .form-labeltxt {
		white-space: normal;
	}
}

.card-input input,
.card-select select {
	outline: none;
	padding: 10px;
	border: 1px solid #cacad9;
	border-radius: 5px;
	background-color: #ebebf3;
	line-height: 1.4;
}

@media print, screen and (min-width: 768px) {
	.card-input input,
	.card-select select {
		font-size: 1.4rem;
	}
}

@media print, screen and (max-width: 767px) {
	.card-input input,
	.card-select select {
		font-size: 1.7rem;
	}
}

.card-input input::-webkit-input-placeholder,
.card-select select::-webkit-input-placeholder {
	color: rgba(132, 132, 154, 0.7);
}

.card-input input::-moz-placeholder,
.card-select select::-moz-placeholder {
	color: rgba(132, 132, 154, 0.7);
}

.card-input input::-ms-input-placeholder,
.card-select select::-ms-input-placeholder {
	color: rgba(132, 132, 154, 0.7);
}

.card-input input::placeholder,
.card-select select::placeholder {
	color: rgba(132, 132, 154, 0.7);
}

.card-input input:-ms-input-placeholder,
.card-select select:-ms-input-placeholder {
	color: #aeaebc;
}

.card-select select {
	height: 40px;
}

@media print, screen and (max-width: 767px) {
	.card-select.card-choice select {
		width: 100%;
	}

	.card-select select {
		height: auto;
	}

	.card-select span {
		display: inline-block;
		margin-bottom: 5px;
	}

	.card-input input {
		width: 100%;
	}

	.card-input span {
		display: block;
		margin-bottom: 5px;
	}
}

.mod-form-workplace-loading {
	padding: 20px 0;
	color: #84849a;
	text-align: center;
}

.mod-form-workplace-loading-dot {
	opacity: 0;
}

.mod-form-workplace-loading-dot:nth-child(1) {
	-webkit-animation: fadeInText 1s ease 0.1s infinite;
	animation: fadeInText 1s ease 0.1s infinite;
}

.mod-form-workplace-loading-dot:nth-child(2) {
	-webkit-animation: fadeInText 1s ease 0.2s infinite;
	animation: fadeInText 1s ease 0.2s infinite;
}

.mod-form-workplace-loading-dot:nth-child(3) {
	-webkit-animation: fadeInText 1s ease 0.3s infinite;
	animation: fadeInText 1s ease 0.3s infinite;
}

@-webkit-keyframes fadeInText {
	100% {
		opacity: 1;
	}
}

@keyframes fadeInText {
	100% {
		opacity: 1;
	}
}

.mod-form-workplace-area {
	margin-top: 10px;
	padding: 15px;
	border-radius: 5px;
	background: #f4f4f9;
}

.mod-form-workplace-scroll-x {
	overflow-x: scroll;
	max-height: 300px;
}

.mod-form-workplace-text {
	margin-bottom: 5px;
}

.mod-form-workplace-dl {
	display: grid;
	margin-bottom: 5px;
	word-break: break-word;
	gap: 2px 0;
}

.mod-form-workplace-dl:last-child {
	margin-bottom: 0;
}

.mod-form-workplace-dt {
	color: #84849a;
	font-size: 1.2rem;
}

/*
#styleguide
都道府県選択UI

```


```
*/
.mod-select-area {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

@media print, screen and (max-width: 767px) {
	.mod-select-area {
		width: 100%;
		background-color: #fff;
		gap: 0;
	}
}

.mod-select-area-item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 15px;
}

@media print, screen and (max-width: 767px) {
	.mod-select-area-item {
		padding: 10px 15px;
		border-bottom: 1px solid #ebebf3;
	}
}

.mod-select-prefecture {
	display: flex;
	flex-direction: column;
	margin-left: 15px;
	gap: 15px;
}

@media print, screen and (max-width: 767px) {
	.mod-select-prefecture {
		margin-left: 0;
	}
}

.mod-select-prefecture-item {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.mod-select-municipality {
	display: flex;
	flex-wrap: wrap;
	margin-left: 15px;
	gap: 15px;
}

.mod-select-municipality-item {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

@media print, screen and (max-width: 767px) {
	.mod-select-municipality-item {
		width: calc( ( 100% - 15px ) / 2);
	}
}

.mod-select-municipality-wide {
	width: 100%;
}

.mod-select-municipality-checkbox label {
	min-width: 10em;
	margin-right: 0;
}

@media print, screen and (max-width: 767px) {
	.mod-select-municipality-checkbox label {
		padding: 0 0 0 25px;
		border: none;
		border-radius: 0;
		background-color: transparent;
	}
}

.mod-select-municipality-checkbox label::after,
.mod-select-municipality-checkbox label::before {
	left: 0;
}

.mod-select-municipality-checkbox input:checked + label:before {
	left: 0;
}

.mod-select-ordinance-city {
	margin-left: 0;
	padding: 15px;
	background-color: #fafafa;
	row-gap: 14px;
	-webkit-column-gap: 10px;
	-moz-column-gap: 10px;
	column-gap: 10px;
}

.mod-select-parent {
	cursor: pointer;
	display: flex;
	flex-flow: wrap row;
	align-items: center;
	background-color: transparent;
}

.mod-select-parent i {
	margin-left: 8px;
}

.mod-select-parent i:before {
	color: #84849a;
}

.mod-select-parent-checkbox label {
	margin-right: 0;
}

@media print, screen and (max-width: 767px) {
	.mod-select-parent-checkbox label {
		padding: 0 0 0 25px;
		border: none;
		border-radius: 0;
		background-color: transparent;
	}
}

.mod-select-parent-checkbox label::after,
.mod-select-parent-checkbox label::before {
	left: 0;
}

.mod-select-parent-checkbox input:checked + label:before {
	left: 0;
}

.mod-select-child {
	display: none;
}

.mod-select-child.is-open {
	display: block;
}

/* variables color */
/*
#colors

@Service #2658CE
@Job #37B500
@Career #FE590F
@tone1 #F4F4F9
@tone2 #EBEBF3
@tone3 #CACAD9
@tone4 #84849A
@tone5 #4A4A4A
*/
/* variables-color */
:root {
	/* color color palette */
	/* Gray */
	--Gray-100: #f6f3f0;
	--Gray-200: #e4e0de;
	--Gray-300: #cbc8c6;
	--Gray-400: #b2afac;
	--Gray-500: #969391;
	--Gray-600: #716e6b;
	--Gray-700: #605d5b;
	--Gray-800: #4e4b49;
	--Gray-900: #2d2b29;
	--Gray-1000: #171413;
	/* Pink */
	--Pink-100: #fef1f5;
	--Pink-200: #fbd8e2;
	--Pink-300: #f7b5c8;
	--Pink-400: #f189aa;
	--Pink-500: #e9588e;
	--Pink-600: #cb006b;
	--Pink-700: #ac0058;
	--Pink-800: #8b0647;
	--Pink-900: #57002a;
	--Pink-1000: #280010;
	/* Red */
	--Red-100: #fff1f1;
	--Red-200: #ffd8d7;
	--Red-300: #fdb4b4;
	--Red-400: #fb888b;
	--Red-500: #f5505f;
	--Red-600: #d40038;
	--Red-700: #ac1731;
	--Red-800: #920625;
	--Red-900: #5c0415;
	--Red-1000: #2f0107;
	/* Orange */
	--Orange-100: #fef2ed;
	--Orange-200: #ffdacd;
	--Orange-300: #ffb59c;
	--Orange-400: #f88d68;
	--Orange-500: #f25915;
	--Orange-600: #c04101;
	--Orange-700: #934225;
	--Orange-800: #79371f;
	--Orange-900: #4f1f0d;
	--Orange-1000: #260c04;
	/* Lime */
	--Lime-100: #f2f9e2;
	--Lime-200: #dfebbf;
	--Lime-300: #c1d293;
	--Lime-400: #a2bb4b;
	--Lime-500: #869f16;
	--Lime-600: #687c0b;
	--Lime-700: #566606;
	--Lime-800: #465408;
	--Lime-900: #2c3505;
	--Lime-1000: #121700;
	/* Green */
	--Green-100: #ecfaec;
	--Green-200: #cdf0cc;
	--Green-300: #a8daa8;
	--Green-400: #66c56c;
	--Green-500: #28af3d;
	--Green-600: #2b8735;
	--Green-700: #276d2e;
	--Green-800: #1b5a22;
	--Green-900: #0f3a14;
	--Green-1000: #021b04;
	/* Aqua */
	--Aqua-100: #e3fafe;
	--Aqua-200: #b7f0fa;
	--Aqua-300: #7edae9;
	--Aqua-400: #12c0d6;
	--Aqua-500: #1aa4b6;
	--Aqua-600: #2b7e8a;
	--Aqua-700: #176774;
	--Aqua-800: #0f5760;
	--Aqua-900: #05373f;
	--Aqua-1000: #00191d;
	/* Blue */
	--Blue-100: #f2f5fc;
	--Blue-200: #dae3f7;
	--Blue-300: #b0c7f9;
	--Blue-400: #8aaaf6;
	--Blue-500: #648cf4;
	--Blue-600: #3a63e0;
	--Blue-700: #2045da;
	--Blue-800: #142ec5;
	--Blue-900: #08118c;
	--Blue-1000: #020448;
	/* Violet */
	--Violet-100: #f4f5fa;
	--Violet-200: #dfe1f6;
	--Violet-300: #bec2f8;
	--Violet-400: #9fa3f4;
	--Violet-500: #8382f3;
	--Violet-600: #6258dd;
	--Violet-700: #5336d8;
	--Violet-800: #451dc3;
	--Violet-900: #290083;
	--Violet-1000: #104;
	/* Purple */
	--Purple-100: #f9f3f9;
	--Purple-200: #eedced;
	--Purple-300: #e2b7e1;
	--Purple-400: #d392d2;
	--Purple-500: #c46bc4;
	--Purple-600: #a247a2;
	--Purple-700: #950c98;
	--Purple-800: #7d0c7f;
	--Purple-900: #4f0050;
	--Purple-1000: #260027;
	/* Yellow */
	--Yellow-100: #fffaec;
	--Yellow-200: #feeec1;
	--Yellow-300: #fee195;
	--Yellow-400: #f7ce5a;
	--Yellow-500: #f4c200;
	--Yellow-600: #d4a800;
	--Yellow-700: #b18c00;
	--Yellow-800: #896c00;
	--Yellow-900: #5f4a00;
	--Yellow-1000: #1f1600;
}

/*
#styleguide
モーダル

```
<button class="mod-button" data-iziModal-open=".iziModal-hoge">モーダルを開く</button>
<div class="modal iziModal-hoge" data-izimodal-title="モーダルのタイトル">
<div class="box-inner">モーダルの内容</div>
</div>
```
*/
/*
#styleguide
PCでは表示し、スマホではモーダル処理

```
<button class="mod-button is-pc-hide" data-iziModal-open=".iziModal-fuge">モーダルを開く</button>
<div class="modal modal-sp iziModal-fuge" data-izimodal-title="モーダルのタイトル">
<div class="box-inner">モーダルの内容</div>
</div>
```
*/
/*
#styleguide
スマホは表示し、PCではモーダル処理

```
<button class="mod-button is-sp-hide" data-iziModal-open=".iziModal-fuge">モーダルを開く</button>
<div class="modal modal-pc iziModal-fuge" data-izimodal-title="モーダルのタイトル">
<div class="box-inner">モーダルの内容</div>
</div>
```
*/
.mod-title {
	position: relative;
	padding: 15px;
	background-color: #2658ce;
}

.mod-title h2 {
	padding: 0 20px;
	color: #fff;
	font-size: 1.6rem;
	font-weight: bold;
	word-break: break-all;
}

.mod-title .icon-close {
	display: flex;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	justify-content: center;
	align-items: center;
	height: 100%;
	margin: auto;
	padding-right: 15px;
	border: none;
	background-color: rgba(0, 0, 0, 0);
}

.modal-img-cover {
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
	padding-bottom: 10px;
}

.modal-img-cover img {
	display: block;
	width: 100%;
	max-width: 800px;
	height: auto;
	margin: 0 auto;
}

@media print, screen and (max-width: 767px) {
	.modaal-wrapper {
		transition: all 0.1s ease-out;
		-webkit-transform: translateY(100%);
		transform: translateY(100%);
	}

	.modaal-anime {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}

	.iziModal-wrap .close-button-wrap {
		margin-bottom: 40px;
	}

	.close-less .icon-close {
		display: none;
		visibility: hidden;
	}

	.accept-box .accept-logo {
		display: block;
		width: 42px;
		height: 42px;
		margin: 0 auto 10px;
	}

	.accept-box .accept-text {
		color: #fe2a56;
		font-size: 1.8rem;
		font-weight: bold;
		text-align: center;
	}

	.accept-box .mod-p {
		margin: 10px 0;
	}

	.accept-box .mod-p .bold {
		font-weight: bold;
	}

	.accept-box .mod-ul {
		margin-top: 0;
		margin-bottom: 0;
	}

	.accept-box .l-grid > * {
		margin-bottom: 10px;
	}

	.accept-box .l-grid .mod-p {
		margin-top: 0;
	}

	.accept-box .l-grid .mod-p.accept-sub {
		margin-bottom: 10px;
	}

	.accept-box .mod-txt25 {
		font-size: 1.8rem;
	}

	.accept-box .accept-label {
		display: inline-block;
		margin: 0 3px;
		padding: 3px 10px;
		border-radius: 3px;
		background: #fe590f;
		color: #fafafa;
	}

	.accept-box .color-service {
		color: #2658ce;
	}

	.accept-box .color-seiko {
		color: #e43828;
	}

	.accept-box .color-career {
		color: #fe590f;
	}

	.accept-box .color-coution {
		color: #b40000;
	}

	.accept-box .l-grid.form-item .l-grid-variable {
		margin-bottom: 0;
	}

	.accept-box .mod-p.verify-text {
		font-size: 1.6rem;
		font-weight: bold;
	}

	.accept-box .mod-p .number {
		color: #2658ce;
		font-size: 2.4rem;
	}

	.accept-box .mod-p .status {
		display: inline-block;
		margin: 0 3px;
		padding: 3px 10px;
		border: 5px;
		border-radius: 3px;
		background: #ebebf3;
		color: #fafafa;
		font-size: 1.4rem;
	}

	.accept-box .mod-p .status.status01 {
		background-color: #4a4a4a;
	}

	.accept-box .mod-p .status.status00 {
		border: 1px solid #fe2a56;
		background-color: #fafafa;
		color: #fe2a56;
	}

	.accept-box .mod-p .status.status0 {
		background-color: #fe2a56;
	}

	.accept-box .mod-p .status.status12 {
		background-color: #2658ce;
	}

	.accept-box .mod-p .status.status21,
	.accept-box .mod-p .status.status22,
	.accept-box .mod-p .status.status23 {
		background-color: #3092ff;
	}

	.accept-box .mod-p .status.status24 {
		background-color: #0fd848;
	}

	.accept-box .mod-p .status.status13 {
		background-color: #fe590f;
	}

	.accept-box .mod-p .status.status14 {
		background-color: #cacad9;
	}

	.accept-box .mod-p .status.status15 {
		background-color: #cacad9;
	}

	.accept-box .mod-p .status.status16 {
		background-color: #005fc9;
	}

	.accept-box .mod-p .status.status17,
	.accept-box .mod-p .status.status18 {
		background-color: #cacad9;
	}

	.inner-data-block {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px dashed #84849a;
	}

	.inner-data-block:last-child {
		border-bottom: none;
	}

	.inner-data-block .inner-text-block {
		padding: 15px;
		font-size: 1.4rem;
		font-weight: bold;
	}

	.inner-data-block .inner-count-block {
		padding: 15px;
		font-size: 1.4rem;
		text-align: right;
	}

	.inner-data-block .inner-count-block .count {
		display: inline-block;
		margin-right: 5px;
		color: #b40000;
		font-size: 2rem;
		font-weight: bold;
	}

	.inner-data-block .inner-count-block .denominator {
		display: inline-block;
		margin-left: 5px;
	}
}

@media print, screen and (min-width: 768px) {
	.close-less .icon-close {
		display: none;
		visibility: hidden;
	}

	.accept-box {
		font-size: 1.4rem;
	}

	.accept-box .accept-logo {
		display: block;
		width: 96px;
		height: 96px;
		margin: 0 auto 10px;
	}

	.accept-box .accept-text {
		color: #fe2a56;
		font-size: 2.2rem;
		font-weight: bold;
		text-align: center;
	}

	.accept-box .mod-p {
		margin: 0;
	}

	.accept-box .mod-p.accept-sub {
		margin-bottom: 10px;
	}

	.accept-box .mod-p .bold {
		font-weight: bold;
	}

	.accept-box .mod-ul {
		margin-top: 0;
		margin-bottom: 0;
	}

	.accept-box .l-grid > * {
		margin-bottom: 0;
	}

	.accept-box .l-grid .mod-p {
		margin-top: 0;
	}

	.accept-box .accept-label {
		display: inline-block;
		margin: 0 3px;
		padding: 3px 10px;
		border-radius: 3px;
		background: #fe590f;
		color: #fafafa;
	}

	.accept-box .color-service {
		color: #2658ce;
	}

	.accept-box .color-seiko {
		color: #e43828;
	}

	.accept-box .color-career {
		color: #fe590f;
	}

	.accept-box .color-coution {
		color: #b40000;
	}

	.accept-box .mod-checkbox-group.l-grid.wrap-item {
		margin: 0;
	}

	.accept-box .mod-checkbox-group.l-grid.wrap-item .checkbox {
		width: 150px;
		margin: 0;
	}

	.accept-box .l-grid.form-item .l-grid-variable {
		margin-bottom: 0;
	}

	.accept-box .mod-p.verify-text {
		font-size: 1.6rem;
		font-weight: bold;
	}

	.accept-box .mod-p .number {
		color: #2658ce;
		font-size: 3rem;
	}

	.accept-box .mod-p .status {
		display: inline-block;
		margin: 0 3px;
		padding: 3px 10px;
		border: 5px;
		border-radius: 3px;
		background: #ebebf3;
		color: #fafafa;
		font-size: 1.4rem;
	}

	.accept-box .mod-p .status.status0 {
		background-color: #fe2a56;
	}

	.accept-box .mod-p .status.status12 {
		background-color: #2658ce;
	}

	.accept-box .mod-p .status.status21,
	.accept-box .mod-p .status.status22,
	.accept-box .mod-p .status.status23 {
		background-color: #3092ff;
	}

	.accept-box .mod-p .status.status24 {
		background-color: #0fd848;
	}

	.accept-box .mod-p .status.status13 {
		background-color: #fe590f;
	}

	.accept-box .mod-p .status.status14 {
		background-color: #cacad9;
	}

	.accept-box .mod-p .status.status15 {
		background-color: #cacad9;
	}

	.accept-box .mod-p .status.status16 {
		background-color: #005fc9;
	}

	.accept-box .mod-p .status.status17,
	.accept-box .mod-p .status.status18 {
		background-color: #cacad9;
	}

	.modal-inner-narrow {
		max-width: 630px;
		margin: 0 auto;
	}

	.inner-data-block {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px dashed #84849a;
	}

	.inner-data-block:last-child {
		border-bottom: none;
	}

	.inner-data-block .inner-text-block {
		padding: 15px;
		font-size: 1.6rem;
		font-weight: bold;
	}

	.inner-data-block .inner-count-block {
		padding: 15px 30px 15px 15px;
		font-size: 1.6rem;
		text-align: right;
	}

	.inner-data-block .inner-count-block .count {
		display: inline-block;
		margin-right: 5px;
		color: #b40000;
		font-size: 2.2rem;
		font-weight: bold;
	}

	.inner-data-block .inner-count-block .denominator {
		display: inline-block;
		margin-left: 5px;
	}
}

.wrap-jobselect .link-underline {
	color: #2196f3;
	text-decoration: underline;
}

#job-status {
	padding: 5px;
	background: #fff;
	color: #2658ce;
	font-size: 1.4rem;
	text-align: center;
}

#job-status span {
	display: inline-block;
	margin-left: 2px;
}

#job-status span i {
	margin-left: 5px;
	font-size: 1.2rem;
}

#job-status span:last-child i {
	display: none;
}

.wrap-jobselect-block {
	display: none;
}

@media print, screen and (min-width: 768px) {
	.modal-width-600 {
		max-width: 600px !important;
	}
}

.fixed-bar {
	display: flex;
	visibility: hidden;
	position: fixed;
	z-index: 10;
	top: 50%;
	left: 0;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	width: 100%;
	background: rgba(74, 74, 74, 0.9);
	opacity: 0;
	text-align: center;
	transition: ease-in-out 0.3s;
}

.fixed-bar.is-error {
	background: rgba(180, 0, 0, 0.9);
}

@media print, screen and (max-width: 767px) {
	.fixed-bar {
		top: 58px;
	}
}

.fixed-bar.open {
	visibility: visible;
	opacity: 1;
}

.fixed-bar .scout-save-box {
	width: 100%;
	padding: 15px;
	background: #fff;
	text-align: center;
}

.fixed-bar .fixed-bar-text {
	display: inline-block;
	margin-right: 20px;
	padding: 20px 0;
	color: #fff;
	font-size: 2rem;
}

.fixed-bar .fixed-bar-text .badge {
	display: inline-block;
	margin: 0 3px;
	padding: 3px 5px;
	border-radius: 3px;
	background: #ebebf3;
}

.fixed-bar .fixed-bar-text .badge.is-cyan {
	background-color: #2196f3;
}

.fixed-bar .fixed-bar-text .badge.is-green {
	background-color: #8bc34a;
}

.fixed-bar .fixed-bar-text .badge.is-blue {
	background-color: #2658ce;
}

.fixed-bar .fixed-bar-text .badge.is-gray {
	background-color: #84849a;
}

@media print, screen and (max-width: 767px) {
	.fixed-bar .fixed-bar-text {
		padding: 25px 0;
		font-size: 1.8rem;
	}
}

.fixed-bar .icon-close {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	font-size: 1.8rem;
}

.fixed-bar .icon-close:before {
	color: #4a4a4a;
}

@media print, screen and (max-width: 767px) {
	.fixed-bar .icon-close {
		position: absolute;
		bottom: -15px;
		left: calc( 50% - 15px);
	}
}

.blockPager {
	padding-top: 30px;
}

@media print, screen and (max-width: 767px) {
	.blockPager {
		padding-top: 20px;
	}
}

.pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 24px;
}

@media print, screen and (max-width: 767px) {
	.pagination {
		gap: 8px;
	}
}

.pagination-link {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	width: 45px;
	height: 45px;
	border: 1px solid #cacad9;
	border-radius: 5px;
	background: #fff;
	font-size: 14px;
	font-weight: bold;
	transition: all 0.15s linear;
}

@media print, screen and (max-width: 767px) {
	.pagination-link {
		width: 40px;
		height: 40px;
	}
}

.pagination-link a {
	width: 100%;
	height: 100%;
	color: #2658ce;
	line-height: 40px;
	text-align: center;
}

.pagination-link.isactive {
	background: #2658ce;
	color: #fff;
	pointer-events: none;
}

.pagination-link.pagination-link-more {
	border: none;
	background: none;
	color: #2658ce;
}

.pagination-link-more .pagination-link:not(.isactive):hover {
	background: #2658ce;
}

.pagination-link a:hover {
	background: #2658ce;
	color: #fff;
}

.modal-button-sticky {
	position: -webkit-sticky;
	position: sticky;
	z-index: 10;
	bottom: 0;
}

.modal-button-cover {
	padding: 20px 20px;
	background-color: #fff;
}

.message-entry-status-in-modal {
	cursor: pointer;
	display: inline-block;
	position: relative;
	width: 140px;
	/* IEでcursorがチラついたので */;
}

.message-entry-status-in-modal .message-entry-status-label {
	position: relative;
	z-index: 1;
	width: 100%;
	padding: 10px 20px 10px 10px;
	border: none;
	border-radius: 5px;
	background-color: #ebebf3;
	color: #fff;
	text-align: center;
}

.message-entry-status-in-modal .message-entry-status-label.status01 {
	background-color: #4a4a4a;
}

.message-entry-status-in-modal .message-entry-status-label.status00 {
	border: 1px solid #fe2a56;
	background-color: #fafafa;
	color: #fe2a56;
}

.message-entry-status-in-modal .message-entry-status-label.status0 {
	background-color: #fe2a56;
}

.message-entry-status-in-modal .message-entry-status-label.status12 {
	background-color: #2658ce;
}

.message-entry-status-in-modal .message-entry-status-label.status21,
.message-entry-status-in-modal .message-entry-status-label.status22,
.message-entry-status-in-modal .message-entry-status-label.status23 {
	background-color: #3092ff;
}

.message-entry-status-in-modal .message-entry-status-label.status24 {
	background-color: #0fd848;
}

.message-entry-status-in-modal .message-entry-status-label.status13 {
	background-color: #fe590f;
}

.message-entry-status-in-modal .message-entry-status-label.status14 {
	background-color: #cacad9;
}

.message-entry-status-in-modal .message-entry-status-label.status15 {
	background-color: #cacad9;
}

.message-entry-status-in-modal .message-entry-status-label.status16 {
	background-color: #005fc9;
}

.message-entry-status-in-modal .message-entry-status-label.status17,
.message-entry-status-in-modal .message-entry-status-label.status18 {
	background-color: #cacad9;
}

.message-entry-status-in-modal .message-entry-status-label i {
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	bottom: 0;
	height: 1em;
	margin: auto 10px auto 0;
}

.message-entry-status-in-modal .message-entry-status-label i:before {
	color: #fff;
	font-size: 1.2rem;
}

.message-entry-status-in-modal .message-entry-status-select {
	cursor: pointer;
	display: block;
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 5px 5px 15px;
	border: none;
	opacity: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.block-message-detail {
	background: #fff;
}

@media print, screen and (min-width: 768px) {
	.block-message-detail {
		height: 100%;
		border-radius: 10px;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
	}
}

.block-message-detail .message-tabs {
	border-bottom: 2px solid #ebebf3;
	font-size: 1.6rem;
}

@media print, screen and (max-width: 767px) {
	.block-message-detail .message-tabs {
		padding: 10px;
		border-bottom: none;
		background: #f4f4f9;
		font-size: 1.2rem;
	}
}

.block-message-detail .message-tabs ul {
	display: flex;
}

@media print, screen and (max-width: 767px) {
	.block-message-detail .message-tabs ul {
		border: 1px solid #2658ce;
		border-radius: 5px;
		background: #fff;
	}
}

.block-message-detail .message-tabs-item {
	flex: 1;
	line-height: 1;
}

@media print, screen and (max-width: 767px) {
	.block-message-detail .message-tabs-item {
		border-left: 1px solid #2658ce;
	}

	.block-message-detail .message-tabs-item:first-child {
		border-left: 0;
	}
}

.block-message-detail .message-tabs-item.is-active {
	border-bottom: 3px solid #2658ce;
}

@media print, screen and (max-width: 767px) {
	.block-message-detail .message-tabs-item.is-active {
		border-bottom: none;
		background: #2658ce;
	}
}

.block-message-detail .message-tabs-item.is-active a {
	color: #2658ce !important;
}

@media print, screen and (max-width: 767px) {
	.block-message-detail .message-tabs-item.is-active a {
		color: #fff !important;
	}
}

.block-message-detail .message-tabs-item a {
	display: block;
	padding: 15px 5px;
	color: #4a4a4a !important;
	font-weight: 600;
	text-align: center;
}

@media print, screen and (max-width: 767px) {
	.block-message-detail .message-tabs-item a {
		padding: 8px 5px;
		color: #2658ce !important;
	}
}

.block-message-detail .message-tabs-item a:hover {
	opacity: 0.8;
}

.block-message-detail .message-content-timeline {
	min-height: 500px;
}

.block-message-detail .message-content-timeline .message-thread {
	padding: 20px 70px;
}

@media print, screen and (max-width: 767px) {
	.block-message-detail .message-content-timeline .message-thread {
		padding: 10px;
	}
}

.block-message-detail .message-content-timeline .unit-msg {
	position: relative;
	max-width: 560px;
	margin: 0 0 20px;
	padding: 20px;
	border-radius: 10px;
	background: #f4f4f9;
	line-height: 1.7;
}

@media print, screen and (max-width: 767px) {
	.block-message-detail .message-content-timeline .unit-msg {
		max-width: none;
		padding: 12px 10px;
		font-size: 1.2rem;
	}
}

@media print, screen and (min-width: 768px) {
	.block-message-detail .message-content-timeline .unit-msg.icon-cover {
		max-width: 210px;
		text-align: center;
	}

	.block-message-detail .message-content-timeline .unit-msg.icon-cover .msg-link-inner {
		color: #2658ce;
		text-align: center;
	}

	.block-message-detail .message-content-timeline .unit-msg.icon-cover .msg-link-inner:hover {
		text-decoration: underline;
	}

	.block-message-detail .message-content-timeline .unit-msg.icon-cover .date {
		text-align: center;
	}
}

.block-message-detail .message-content-timeline .unit-msg .icon {
	position: absolute;
	top: 0;
	left: -55px;
}

.block-message-detail .message-content-timeline .unit-msg .icon:before {
	font-size: 50px;
}

@media print, screen and (max-width: 767px) {
	.block-message-detail .message-content-timeline .unit-msg .icon {
		display: none;
	}
}

.block-message-detail .message-content-timeline .unit-msg:before {
	content: '';
	position: absolute;
	z-index: 1;
	top: 10px;
	left: -20px;
	border: 12px solid transparent;
	border-right: 12px solid #f4f4f9;
}

.block-message-detail .message-content-timeline .unit-msg.unit-msg-me {
	margin-left: auto;
	background-color: #9ee0ef;
	color: #4a4a4a;
}

.block-message-detail .message-content-timeline .unit-msg.unit-msg-me:before {
	right: -10px;
	left: auto;
	border-right: 0;
	border-left: 12px solid #9ee0ef;
}

.block-message-detail .message-content-timeline .unit-msg.read {
	margin-top: 30px;
}

.block-message-detail .message-content-timeline .unit-msg .msg-read {
	position: absolute;
	top: -20px;
	right: 10px;
	color: #4a4a4a;
	font-size: 1.2rem;
}

.block-message-detail .message-content-timeline .unit-msg .msg-read i {
	padding-right: 0.2em;
}

.block-message-detail .message-content-timeline .unit-msg .msg-read i:before {
	color: #4a4a4a;
}

.block-message-detail .message-content-timeline .unit-msg .date {
	margin: 10px 0 0;
	text-align: right;
}

.block-message-detail .message-content-timeline .unit-msg .msg {
	word-break: break-all;
}

.block-message-detail .message-content-timeline .message-reply {
	padding: 30px 20px;
	border-radius: 0 0 10px 10px;
	background: #f4f4f9;
}

@media print, screen and (max-width: 767px) {
	.block-message-detail .message-content-timeline .message-reply {
		padding: 10px;
		border-top: 1px solid #84849a;
		border-radius: 0;
	}
}

.block-message-detail .message-content-timeline .message-reply-header {
	display: flex;
	align-items: center;
	margin: 0 0 10px;
}

.block-message-detail .message-content-timeline .message-reply .heading {
	flex: 1;
	font-size: 2rem;
}

@media print, screen and (max-width: 767px) {
	.block-message-detail .message-content-timeline .message-reply .heading {
		display: none;
	}
}

.block-message-detail .message-content-timeline .message-reply .select-format {
	width: 345px;
	background: #4a4a4a;
	color: #fff;
}

@media print, screen and (max-width: 767px) {
	.block-message-detail .message-content-timeline .message-reply .select-format {
		width: 100%;
	}
}

.block-message-detail .message-content-timeline .message-reply .select-format select {
	background: none;
}

.block-message-detail .message-content-timeline .message-reply .select-format i:before {
	color: #fff;
}

.block-message-detail .message-content-timeline .message-reply-body .mod-textarea {
	height: 320px;
	padding: 24px;
	background: #fff;
	line-height: 1.7;
}

@media print, screen and (max-width: 767px) {
	.block-message-detail .message-content-timeline .message-reply-body .mod-textarea {
		height: 150px;
		padding: 12px 10px;
		font-size: 1.2rem;
	}
}

@media print, screen and (max-width: 767px) {
	.block-message-detail .message-content-timeline .message-reply-button {
		margin: 10px 0 0;
	}

	.block-message-detail .message-content-timeline .message-reply-button > .grid-column4 {
		flex-basis: calc(50% - 5px);
		max-width: calc(50% - 5px);
		margin: 0;
	}

	.block-message-detail .message-content-timeline .message-reply-button > .grid-fix {
		margin-right: 10px;
	}

	.block-message-detail .message-content-timeline .message-reply-button .mod-button:disabled {
		cursor: pointer;
		background: red !important;
	}
}

.block-message-detail .message-content-profile {
	padding: 20px;
}

@media print, screen and (max-width: 767px) {
	.block-message-detail .message-content-profile {
		padding: 10px;
	}
}

.block-message-detail .message-content-profile .mod-table.table-detail tr th {
	width: 11em;
}

@media print, screen and (max-width: 767px) {
	.block-message-detail .message-content-profile .table-detail {
		font-size: 1.2rem;
	}

	.block-message-detail .message-content-profile .table-detail th {
		width: 35%;
		white-space: normal;
	}

	.block-message-detail .message-content-profile .table-detail th .font-xs {
		font-size: 1rem;
		font-weight: normal;
	}
}

.block-message-detail .message-content-memo {
	padding: 5px 20px 20px;
}

.block-message-detail .message-content-memo .unit-memo {
	display: flex;
	align-items: center;
	padding: 10px 0;
	border-bottom: 1px dotted #cacad9;
}

@media print, screen and (min-width: 768px) {
	.block-message-detail .message-content-memo .unit-memo:last-child {
		border-bottom: none;
	}
}

.block-message-detail .message-content-memo .unit-memo .memo {
	flex: 1;
	font-size: 1.6rem;
	word-break: break-all;
}

.block-message-detail .message-content-memo .unit-memo .file,
.block-message-detail .message-content-memo .unit-memo .delete {
	display: flex;
	flex: 1;
	align-items: center;
	font-size: 1.6rem;
	word-break: break-all;
}

.block-message-detail .message-content-memo .unit-memo .file .text,
.block-message-detail .message-content-memo .unit-memo .delete .text {
	display: inline-block;
	margin-left: 10px;
}

.block-message-detail .message-content-memo .unit-memo .file {
	color: #2658ce;
}

.block-message-detail .message-content-memo .unit-memo .file:hover .text {
	text-decoration: underline;
}

.block-message-detail .message-content-memo .unit-memo .delete {
	color: #cacad9;
}

.block-message-detail .message-content-memo .unit-memo .delete i:before {
	color: #cacad9;
}

.block-message-detail .message-content-memo .unit-memo .delete + .date {
	color: #cacad9;
}

.block-message-detail .message-content-memo .unit-memo .date {
	padding: 5px 10px;
}

@media print, screen and (max-width: 767px) {
	.block-message-detail .message-content-memo .unit-memo .date {
		font-size: 1rem;
	}
}

.block-message-detail .message-content-memo .unit-memo .button-delete {
	cursor: pointer;
	display: flex;
	align-items: center;
}

@media print, screen and (max-width: 767px) {
	.block-message-detail .message-content-memo .unit-memo .button-delete {
		display: block;
		vertical-align: middle;
	}
}

.block-message-detail .message-content-memo .unit-memo .button-delete:hover {
	opacity: 0.7;
}

.block-message-detail .message-content-memo .unit-memo .icon-close {
	vertical-align: bottom;
}

.block-message-detail .message-content-memo .unit-memo .icon-close:before {
	color: #000;
}

.block-message-detail .message-content-memo .unit-actions {
	display: flex;
	margin: 20px 0 0;
}

.block-message-detail .message-content-memo .unit-actions .mod-input {
	flex: 1;
	height: 37px;
	margin-right: 10px;
}

@media print, screen and (max-width: 767px) {
	.block-message-detail .message-content-memo .unit-actions .mod-input {
		justify-content: space-between;
		font-size: 1.2rem;
	}
}

.block-message-detail .message-content-memo .button-add {
	width: 37px !important;
	height: 37px !important;
	border: 0;
	border-radius: 5px;
	background: #2658ce;
	line-height: 37px;
}

@media print, screen and (max-width: 767px) {
	.block-message-detail .message-content-memo .button-add {
		margin: 0;
		padding: 0;
		text-align: center;
	}
}

.block-message-detail .message-content-memo .button-add:hover {
	opacity: 0.7;
}

.block-message-detail .message-content-memo .button-add .icon-plus {
	position: relative;
	top: 3px;
	font-size: 20px;
}

@media print, screen and (max-width: 767px) {
	.block-message-detail .message-content-memo .button-add .icon-plus {
		top: 4px;
	}
}

@media print, screen and (min-width: 768px) {
	.modal .table-detail th {
		width: 200px;
	}
}

/* variables color */
/*
#colors

@Service #2658CE
@Job #37B500
@Career #FE590F
@tone1 #F4F4F9
@tone2 #EBEBF3
@tone3 #CACAD9
@tone4 #84849A
@tone5 #4A4A4A
*/
/* variables-color */
:root {
	/* color color palette */
	/* Gray */
	--Gray-100: #f6f3f0;
	--Gray-200: #e4e0de;
	--Gray-300: #cbc8c6;
	--Gray-400: #b2afac;
	--Gray-500: #969391;
	--Gray-600: #716e6b;
	--Gray-700: #605d5b;
	--Gray-800: #4e4b49;
	--Gray-900: #2d2b29;
	--Gray-1000: #171413;
	/* Pink */
	--Pink-100: #fef1f5;
	--Pink-200: #fbd8e2;
	--Pink-300: #f7b5c8;
	--Pink-400: #f189aa;
	--Pink-500: #e9588e;
	--Pink-600: #cb006b;
	--Pink-700: #ac0058;
	--Pink-800: #8b0647;
	--Pink-900: #57002a;
	--Pink-1000: #280010;
	/* Red */
	--Red-100: #fff1f1;
	--Red-200: #ffd8d7;
	--Red-300: #fdb4b4;
	--Red-400: #fb888b;
	--Red-500: #f5505f;
	--Red-600: #d40038;
	--Red-700: #ac1731;
	--Red-800: #920625;
	--Red-900: #5c0415;
	--Red-1000: #2f0107;
	/* Orange */
	--Orange-100: #fef2ed;
	--Orange-200: #ffdacd;
	--Orange-300: #ffb59c;
	--Orange-400: #f88d68;
	--Orange-500: #f25915;
	--Orange-600: #c04101;
	--Orange-700: #934225;
	--Orange-800: #79371f;
	--Orange-900: #4f1f0d;
	--Orange-1000: #260c04;
	/* Lime */
	--Lime-100: #f2f9e2;
	--Lime-200: #dfebbf;
	--Lime-300: #c1d293;
	--Lime-400: #a2bb4b;
	--Lime-500: #869f16;
	--Lime-600: #687c0b;
	--Lime-700: #566606;
	--Lime-800: #465408;
	--Lime-900: #2c3505;
	--Lime-1000: #121700;
	/* Green */
	--Green-100: #ecfaec;
	--Green-200: #cdf0cc;
	--Green-300: #a8daa8;
	--Green-400: #66c56c;
	--Green-500: #28af3d;
	--Green-600: #2b8735;
	--Green-700: #276d2e;
	--Green-800: #1b5a22;
	--Green-900: #0f3a14;
	--Green-1000: #021b04;
	/* Aqua */
	--Aqua-100: #e3fafe;
	--Aqua-200: #b7f0fa;
	--Aqua-300: #7edae9;
	--Aqua-400: #12c0d6;
	--Aqua-500: #1aa4b6;
	--Aqua-600: #2b7e8a;
	--Aqua-700: #176774;
	--Aqua-800: #0f5760;
	--Aqua-900: #05373f;
	--Aqua-1000: #00191d;
	/* Blue */
	--Blue-100: #f2f5fc;
	--Blue-200: #dae3f7;
	--Blue-300: #b0c7f9;
	--Blue-400: #8aaaf6;
	--Blue-500: #648cf4;
	--Blue-600: #3a63e0;
	--Blue-700: #2045da;
	--Blue-800: #142ec5;
	--Blue-900: #08118c;
	--Blue-1000: #020448;
	/* Violet */
	--Violet-100: #f4f5fa;
	--Violet-200: #dfe1f6;
	--Violet-300: #bec2f8;
	--Violet-400: #9fa3f4;
	--Violet-500: #8382f3;
	--Violet-600: #6258dd;
	--Violet-700: #5336d8;
	--Violet-800: #451dc3;
	--Violet-900: #290083;
	--Violet-1000: #104;
	/* Purple */
	--Purple-100: #f9f3f9;
	--Purple-200: #eedced;
	--Purple-300: #e2b7e1;
	--Purple-400: #d392d2;
	--Purple-500: #c46bc4;
	--Purple-600: #a247a2;
	--Purple-700: #950c98;
	--Purple-800: #7d0c7f;
	--Purple-900: #4f0050;
	--Purple-1000: #260027;
	/* Yellow */
	--Yellow-100: #fffaec;
	--Yellow-200: #feeec1;
	--Yellow-300: #fee195;
	--Yellow-400: #f7ce5a;
	--Yellow-500: #f4c200;
	--Yellow-600: #d4a800;
	--Yellow-700: #b18c00;
	--Yellow-800: #896c00;
	--Yellow-900: #5f4a00;
	--Yellow-1000: #1f1600;
}

/* -----------------------------------------------------
 * hide
 * -------------------------------------------------- */
@media print, screen and (max-width: 767px) {
	.sp_hide {
		display: none;
	}

	.pc_hide {
		display: block;
	}
}

@media print, screen and (min-width: 768px) {
	.sp_hide {
		display: block;
	}

	.pc_hide {
		display: none;
	}
}

/* -----------------------------------------------------
 * Alignment classes
 * -------------------------------------------------- */
.mod-left {
	text-align: left !important;
}

.mod-center {
	text-align: center !important;
}

.mod-right {
	text-align: right !important;
}

/* -----------------------------------------------------
 * Status
 * -------------------------------------------------- */
@media print, screen and (min-width: 768px) {
	.is-pc-hide {
		display: none !important;
	}
}

@media print, screen and (min-width: 768px) {
	.is-pc-show {
		display: block !important;
	}
}

@media print, screen and (max-width: 767px) {
	.is-sp-show {
		display: block !important;
	}
}

@media print, screen and (max-width: 767px) {
	.is-sp-hide {
		display: none !important;
	}
}

.is-active {
	display: block;
}

/* -----------------------------------------------------
 *  ellipse
 * -------------------------------------------------- */
.is-ellipse {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* -----------------------------------------------------
 *  nonactive
 * -------------------------------------------------- */
.mod-nonactive {
	cursor: none;
	opacity: 0.4;
	pointer-events: none;
}

/* -----------------------------------------------------
 *  文字大きさ
 * -------------------------------------------------- */
.mod-txt40 {
	font-size: 4rem;
}

.mod-txt35 {
	font-size: 3.5rem;
}

.mod-txt30 {
	font-size: 3rem;
}

.mod-txt25 {
	font-size: 2.5rem;
}

.mod-txt20 {
	font-size: 2rem;
}

.mod-txt18 {
	font-size: 1.8rem;
}

.mod-txt16 {
	font-size: 1.6rem;
}

.mod-txt14 {
	font-size: 1.4rem;
}

.mod-txt12 {
	font-size: 1.2rem;
}

/* -----------------------------------------------------
 *  色
 * -------------------------------------------------- */
.mod-txt-service {
	color: #2658ce;
}

.mod-bg-service {
	background-color: #2658ce;
}

.mod-txt-job {
	color: #8bc34a;
}

.mod-bg-job {
	background-color: #8bc34a;
}

.mod-txt-career {
	color: #fe590f;
}

.mod-bg-career {
	background-color: #fe590f;
}

.mod-txt-coution {
	color: #b40000;
}

.mod-bg-coution {
	background-color: #b40000;
}

.mod-txt-success {
	color: #0fd848;
}

.mod-bg-success {
	background-color: #0fd848;
}

.mod-txt-note {
	color: #84849a;
}

.mod-bg-note {
	background-color: #84849a;
}

.mod-bg-note-thin {
	background-color: #ebebf3;
}

.mod-txt-bk {
	color: #4a4a4a;
}

.mod-bg-bk {
	background-color: #4a4a4a;
}

.mod-txt-wh {
	color: #fafafa;
}

.mod-txt-wh:visited,
.mod-txt-wh:hover,
.mod-txt-wh:active,
.mod-txt-wh:focus {
	color: white;
}

.mod-bg-wh {
	background-color: #fafafa;
}

.mod-mk-warning {
	background: linear-gradient(transparent 60%, #ffe01b 60%);
}

.mod-txt-link {
	color: #2196f3;
}

/* -----------------------------------------------------
 *  太さ
 * -------------------------------------------------- */
.mod-txt-bold {
	font-weight: bold;
}

/* -----------------------------------------------------
 *  余白
 * -------------------------------------------------- */
.mod-mr1em {
	margin-right: 1em;
}

.mod-mr05em {
	margin-right: 0.5em;
}

/* -----------------------------------------------------
 *  text-align
 * -------------------------------------------------- */
.mod-txt-left {
	text-align: left;
}

.mod-txt-center {
	text-align: center;
}

.mod-txt-right {
	text-align: right;
}

/* -----------------------------------------------------
 *  text-item-align
 * -------------------------------------------------- */
.mod-txt-item-center {
	position: relative;
	padding-left: 25px;
}

.mod-txt-item-center span {
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	line-height: 1;
}

.mod-txt-item-center span.is-cross {
	top: -0.2em;
}

/* -----------------------------------------------------
 *  border
 * -------------------------------------------------- */
.mod-border-top {
	border-top: 1px solid #ebebf3;
}

.mod-border-right {
	border-right: 1px solid #ebebf3;
}

.mod-border-bottom {
	border-bottom: 1px solid #ebebf3;
}

.mod-border-left {
	border-left: 1px solid #ebebf3;
}

.mod-bd-coution {
	border: 2px solid #b40000;
}

/* -----------------------------------------------------
 *  padding
 * -------------------------------------------------- */
@media print, screen and (max-width: 767px) {
	.is-sp-p15 {
		padding: 15px;
	}
}

.is-p15 {
	padding: 15px;
}

.pb20 {
	padding-bottom: 20px;
}

.p20 {
	padding: 20px;
}

/* -----------------------------------------------------
 *  margin
 * -------------------------------------------------- */
.mt0 {
	margin-top: 0;
}

.mt5 {
	margin-top: 5px;
}

.mt10 {
	margin-top: 10px;
}

.mt15 {
	margin-top: 15px;
}

.mt20 {
	margin-top: 20px;
}

.mt30 {
	margin-top: 30px;
}

.mt40 {
	margin-top: 40px;
}

.mt50 {
	margin-top: 50px;
}

.mb0 {
	margin-bottom: 0;
}

.mb5 {
	margin-bottom: 5px;
}

.mb10 {
	margin-bottom: 10px;
}

.mb15 {
	margin-bottom: 15px;
}

.mb20 {
	margin-bottom: 20px;
}

.mb30 {
	margin-bottom: 30px;
}

.mb40 {
	margin-bottom: 40px;
}

.mb50 {
	margin-bottom: 50px;
}

.mr0 {
	margin-right: 0;
}

.mr5 {
	margin-right: 5px;
}

.mr10 {
	margin-right: 10px;
}

.mr20 {
	margin-right: 20px;
}

.mr30 {
	margin-right: 30px;
}

.ml0 {
	margin-left: 0;
}

.ml5 {
	margin-left: 5px;
}

.ml10 {
	margin-left: 10px;
}

.ml20 {
	margin-left: 20px;
}

.ml30 {
	margin-left: 30px;
}

/* -----------------------------------------------------
 *  text-decoration
 * -------------------------------------------------- */
.is-underline {
	text-decoration: underline;
}

@media print, screen and (min-width: 768px) {
	.mod-botder-bottom-1 {
		border-bottom: 1px solid #cacad9;
	}
}

.mod-border-bottom {
	border-bottom: 1px solid #cacad9;
}

/*ポイント購入*/
@media print, screen and (min-width: 768px) {
	.add-point {
		display: inline-block;
		margin-left: 15px;
		padding: 10px 20px;
		border-radius: 5px;
		background-color: #f4f4f9;
	}

	.add-point strong {
		font-size: 2rem;
	}

	.add-point i {
		margin: 0 5px;
	}
}

.mod-point-coution {
	display: inline-block;
	margin: 0 10px 0 0;
	padding: 3px 5px;
	border-radius: 5px;
	background: #fff0f0;
	font-weight: bold;
}

@media print, screen and (max-width: 767px) {
	.mod-point-coution {
		display: block;
		width: 100%;
		margin: 0 0 10px 0;
	}
}

@media print, screen and (max-width: 767px) {
	.form-addpoint {
		position: relative;
		align-items: baseline;
	}

	.form-addpoint > div:first-child {
		padding-bottom: 60px;
	}

	.add-point {
		position: absolute;
		top: 35px;
		left: 0;
		width: 100%;
		padding: 10px 0;
		border-radius: 5px;
		background-color: #f4f4f9;
		text-align: center;
	}

	.add-point strong {
		font-size: 1.8rem;
	}

	.add-point i {
		margin: 0;
		font-size: 1.2rem;
		vertical-align: baseline;
	}
}

.confirm-point {
	margin-bottom: 20px;
	text-align: center;
}

.confirm-point.mb5 {
	margin-bottom: 5px;
}

.confirm-point > i {
	display: inline-block;
	margin-bottom: 15px;
	padding: 13px;
	border-radius: 50%;
	background-color: #0fd848;
	font-size: 3.5rem;
}

.confirm-point > i.icon-check {
	padding: 0;
	font-size: 5.0rem;
}

.confirm-point > i.bk {
	background-color: #4a4a4a;
}

.confirm-point > i.blue {
	background-color: #2658ce;
}

.confirm-point > i.coution {
	background-color: #b40000;
}

.confirm-point.kyujinhyo {
	margin: 0;
	padding: 20px 0;
}

.confirm-point.kyujinhyo .mod-txt-note {
	margin-top: 10px;
	padding-top: 0;
	border: 0;
}

.confirm-point .mod-txt-note {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px dotted #cacad9;
	text-align: center;
}

@media print, screen and (max-width: 767px) {
	.confirm-point .mod-txt-note {
		text-align: left;
	}
}

.confirm-point-button {
	display: block;
	max-width: 460px;
	margin: 20px auto 20px;
	font-size: 2.4rem;
}

/*スカウト詳細検索のため*/
@media print, screen and (min-width: 768px) {
	.advanced-sarch {
		padding-top: 1px;
		background-color: #fff;
	}

	.advanced-sarch.is-detail {
		border-radius: 5px;
	}

	.advanced-sarch .sarch-submit {
		padding: 20px 15px;
		border-top: 1px solid #cacad9;
	}

	.advanced-sarch .sarch-toggle .sarch-title {
		display: none;
	}

	.advanced-sarch .sarch-toggle input[type='checkbox'] {
		display: none;
	}
}

@media print, screen and (max-width: 767px) {
	.advanced-sarch.is-detail {
		background: #f4f4f9;
	}

	.advanced-sarch .mod-grid.form-item {
		margin: 0;
	}

	.advanced-sarch .mod-grid.form-item .grid-fix {
		margin: 0;
		padding: 10px 15px;
		border-bottom: 1px solid #cacad9;
		background-color: #fff;
	}

	.advanced-sarch .mod-grid.form-item .grid-variable {
		padding: 10px 15px;
	}

	.advanced-sarch .mod-grid.form-item .grid-variable.grid-variable-pd0 {
		padding: 0;
	}

	.advanced-sarch .sarch-submit {
		padding: 10px 15px;
		border-top: 1px solid #cacad9;
	}

	.advanced-sarch .sarch-toggle .sarch-title {
		cursor: pointer;
		display: block;
		position: relative;
		padding: 10px 15px;
		background-color: #84849a;
		color: #fff;
		font-size: 1.4rem;
	}

	.advanced-sarch .sarch-toggle .sarch-inner,
	.advanced-sarch .sarch-toggle input[type='checkbox'] {
		display: none;
	}

	.advanced-sarch .sarch-toggle input[type='checkbox']:checked ~ label i:before {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}

	.advanced-sarch .sarch-toggle input[type='checkbox']:checked ~ .sarch-inner {
		display: block;
	}
}

/**休業予定**/
.sectionInformation {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 15px;
	border-radius: 5px;
	background-color: #fff9b2;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.sectionInformation dl dt {
	position: relative;
	margin-bottom: 10px;
	padding-top: 15px;
	padding-left: 25px;
	color: #4a4a4a;
	font-size: 1.8rem;
	font-weight: bold;
	word-wrap: break-word;
}

.sectionInformation dl dt:before {
	content: '\e911';
	display: block;
	position: absolute;
	top: 18px;
	left: 0;
	font-size: 1.8rem;
	vertical-align: text-bottom;
}

.sectionInformation dl dd {
	padding-bottom: 15px;
	border-bottom: 1px dotted #84849a;
	font-size: 1.4rem;
	word-wrap: break-word;
}

.sectionInformation dl dd:last-child {
	border: none;
}

.sectionInformation.service {
	margin: 0 auto 80px;
}

@media print, screen and (max-width: 767px) {
	.sectionInformation.service {
		margin: 0 auto 20px;
	}
}

/**ローディング用くるくるクラス**/
#js-icon-loading {
	width: 64px;
	height: 64px;
	margin: 0 auto;
	text-align: center;
	-webkit-animation: spin 1s linear infinite;
	animation: spin 1s linear infinite;
}

@-webkit-keyframes spin {
	0% {
		-webkit-transform: rotate(0deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
	}
}

@keyframes spin {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

/* -----------------------------------------------------
 *  ページトップ
 * -------------------------------------------------- */
@media print, screen and (min-width: 768px) {
	.box-fixing-inner {
		position: relative;
	}

	.mod-page-top {
		position: absolute;
		top: -70px;
		right: -20px;
	}

	.mod-page-top > .mod-page-top-inner {
		border-radius: 5px 0 0 5px;
		background-color: #fff;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	}

	.mod-page-top > .mod-page-top-inner .mod-page-top-button {
		width: 50px;
		height: 50px;
	}

	.mod-page-top > .mod-page-top-inner .mod-page-top-button a {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 50px;
		height: 50px;
		padding: 0 13px;
	}

	.mod-page-top > .mod-page-top-inner .mod-page-top-button a i {
		font-size: 1.8rem;
	}

	.mod-page-top > .mod-page-top-inner .mod-page-top-button a span {
		font-size: 1.2rem;
	}

	.box-fixing.fixed .mod-page-top {
		right: 0;
	}
}

@media print, screen and (min-width: 1200px) {
	.mod-page-top {
		top: 15px;
		right: -65px;
	}

	.mod-page-top > .mod-page-top-inner {
		border-radius: 5px;
	}

	.box-fixing.fixed .mod-page-top {
		right: -45px;
	}
}

@media print, screen and (max-width: 767px) {
	.box-fixing-inner {
		position: relative;
	}

	.mod-page-top {
		position: absolute;
		top: -70px;
		left: 0;
	}

	.mod-page-top > .mod-page-top-inner {
		border-radius: 0 5px 5px 0;
		background-color: #fff;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	}

	.mod-page-top > .mod-page-top-inner .mod-page-top-button {
		width: 50px;
		height: 50px;
	}

	.mod-page-top > .mod-page-top-inner .mod-page-top-button a {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 50px;
		height: 50px;
		padding: 0 13px;
	}

	.mod-page-top > .mod-page-top-inner .mod-page-top-button a i {
		font-size: 1.8rem;
	}

	.mod-page-top > .mod-page-top-inner .mod-page-top-button a span {
		font-size: 1.2rem;
	}
}

/**ログインステータス**/
.mod-login-status {
	padding: 5px;
	background-color: #b40000;
	color: #f4f4f9;
}

/*採用課金ペナルティ画面*/
@media print, screen and (min-width: 768px) {
	.mod-penalty-wide {
		max-width: 540px;
		margin: 0 auto;
	}
}

/*
#styleguide
No1

## No1パーツ
インデックスで使用する場合
```

<div class="obj-no1">
<h2 class="obj-no1-text obj-no1-crown">
<strong class="keyword">「転職で使いたい」</strong><br class="is-sp-hide">
<strong class="no1site">No.1求人サイト<span class="no1-sup">※</span></strong>
</h2>
</div>
<small class="obj-no1-note">
※(株)ショッパーズアイによる調査／「転職で使いたい」と思う医療・介護・福祉人サイトでNo.1獲得／2020年8月時点
</small>
```
*/
/*
#styleguide
No1

職種トップで使用する場合<br>
スマホ時には注釈をフッターの注釈にリンクさせるので消す為に`is-sp-hide`を注釈に入れてる。

```

<div class="obj-no1 is_joblist-top">
<h2 class="obj-no1-text">
<strong class="keyword">歯科衛生士</strong>が選んだ<br class="is-sp-hide">
<strong class="no1site">No.1求人サイト<a class="no1-sup" href="#no1note">※</a></strong>
</h2>
</div>
<small class="obj-no1-note is-sp-hide">
※(株)ショッパーズアイによる調査／「転職で使いたい」と思う医療・介護・福祉人サイトでNo.1獲得／2020年8月時点
</small>
```
*/
@media print, screen and (max-width: 767px) {
	.obj-no1 {
		display: flex;
		position: relative;
		justify-content: center;
		align-items: center;
		padding: 0 14px;
		text-align: center;
	}

	.obj-no1::before,
	.obj-no1::after {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		width: 15px;
		height: 100%;
		background: no-repeat center;
		background-size: contain;
	}

	.obj-no1::before {
		left: 0;
		background-image: url(../../assets/img/img_gekkeikan_left.svg);
	}

	.obj-no1::after {
		right: 0;
		background-image: url(../../assets/img/img_gekkeikan_right.svg);
	}

	.obj-no1 .obj-no1-text {
		font-size: 1.2rem;
		line-height: 1.3;
		-webkit-font-feature-settings: 'palt';
		font-feature-settings: 'palt';
	}

	.obj-no1 .obj-no1-text.obj-no1-crown {
		display: inline;
		position: relative;
	}

	.obj-no1 .obj-no1-text.obj-no1-crown::before {
		content: '';
		display: inline-block;
		width: 18px;
		height: 14px;
		background: no-repeat;
		background-image: url(../../assets/img/img_crown.svg);
		background-size: cover;
	}

	.obj-no1 .obj-no1-text .keyword {
		display: inline-block;
		color: #ff590f;
		font-size: 1.5rem;
	}

	.obj-no1 .obj-no1-text .no1site {
		display: inline-block;
		font-size: 1.5rem;
	}

	.obj-no1 .obj-no1-text .no1-sup {
		color: #4a4a4a;
		font-size: 1.0rem;
		vertical-align: super;
	}

	.obj-no1 .obj-no1-text a.no1-sup {
		text-decoration: underline;
	}

	.obj-no1.is_joblist-top .obj-no1-text {
		font-size: 1.4rem;
	}

	.obj-no1 + .obj-no1-note {
		margin-top: 10px;
	}
}

@media print, screen and (min-width: 768px) {
	.obj-no1 {
		display: flex;
		position: relative;
		justify-content: center;
		align-items: center;
		min-height: 50px;
		padding: 0 25px;
		text-align: center;
	}

	.obj-no1::before,
	.obj-no1::after {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		width: 18px;
		height: 100%;
		background: no-repeat center;
		background-size: contain;
	}

	.obj-no1::before {
		left: 0;
		background-image: url(../../assets/img/img_gekkeikan_left.svg);
	}

	.obj-no1::after {
		right: 0;
		background-image: url(../../assets/img/img_gekkeikan_right.svg);
	}

	.obj-no1 .obj-no1-text {
		line-height: 1.3;
		-webkit-font-feature-settings: 'palt';
		font-feature-settings: 'palt';
	}

	.obj-no1 .obj-no1-text.obj-no1-crown::before {
		content: '';
		display: block;
		position: absolute;
		top: -22px;
		right: 0;
		left: 0;
		width: 26px;
		height: 20px;
		margin: auto;
		background: no-repeat;
		background-image: url(../../assets/img/img_crown.svg);
		background-size: cover;
	}

	.obj-no1 .obj-no1-text .keyword {
		color: #ff590f;
		font-size: 1.8rem;
	}

	.obj-no1 .obj-no1-text .no1site {
		font-size: 1.8rem;
	}

	.obj-no1 .obj-no1-text .no1-sup {
		color: #4a4a4a;
		font-size: 1.2rem;
		vertical-align: super;
	}

	.obj-no1 .obj-no1-text a.no1-sup {
		pointer-events: none;
	}

	.obj-no1 + .obj-no1-note {
		margin-top: 5px;
	}

	.obj-no1.is_joblist-top {
		height: 72px;
		margin-top: 0;
		padding: 0 30px;
	}

	.obj-no1.is_joblist-top::before,
	.obj-no1.is_joblist-top::after {
		width: 30px;
		height: 72px;
	}

	.obj-no1.is_joblist-top .obj-no1-text {
		font-size: 1.8rem;
	}

	.obj-no1.is_joblist-top .obj-no1-text .keyword {
		color: #ff590f;
		font-size: 2.2rem;
	}

	.obj-no1.is_joblist-top .obj-no1-text .no1site {
		font-size: 2.5rem;
	}
}

.obj-no1-note {
	display: block;
	color: #4a4a4a;
	font-size: 0.9rem;
	line-height: 1.3;
	white-space: normal;
}

.mod-common-banner img {
	width: 100%;
	height: auto;
}

@media print, screen and (max-width: 767px) {
	.mod-scoutpacks-points {
		position: relative;
	}

	.mod-scoutpacks-points-rest {
		position: absolute;
		top: -35px;
		right: 0;
	}

	.mod-scoutpacks-points-error {
		text-align: center;
	}

	.mod-scoutpacks-points-error .mod-link {
		display: inline-block;
	}

	.mod-scoutpacks-points .add-point {
		position: relative;
		top: auto;
		left: auto;
	}
}

/* -----------------------------------------------------
 *  iframe用スタイル
 * -------------------------------------------------- */
.copy-job-iframe {
	height: 80vh;
}

.iframe-placeholder {
	background-image: url(/assets/img/lorder-spacer.svg);
	background-repeat: no-repeat;
	background-position: center center;
}

@media screen and (max-width: 768px) {
	.copy-job-iframe {
		overflow: hidden;
		height: calc(100vh - 60px);
	}
}

.celebration-program-attention {
	padding: 10px;
	border: 1px solid #f4c200;
	border-radius: 5px;
	background-color: #fff5d9;
	color: #4a4a4a;
}

.celebration-program-attention p {
	margin-bottom: 5px;
	font-size: 1.3rem;
	line-height: 1.6;
	white-space: normal;
}

.celebration-program-attention p:last-child {
	margin-bottom: 0;
}

.celebration-program-attention p .mod-link {
	color: #fe590f;
}

.celebration-program-attention strong {
	font-size: 1.3rem;
}

.u-word-break {
	word-break: break-all;
}

.mod-pointer {
	cursor: pointer;
}

.mod-hover:hover {
	opacity: 0.6;
}

/* -----------------------------------------------------
 * Each space
 * -------------------------------------------------- */
/* -----------------------------------------------------
 * mod-margin > mod-mt
 * -------------------------------------------------- */
.mod-mt-none {
	margin-top: 0;
}

.mod-mb-none {
	margin-bottom: 0;
}

.mod-mr-none {
	margin-right: 0;
}

.mod-ml-none {
	margin-left: 0;
}

.mod-mt-xxxs {
	margin-top: 4px;
}

.mod-mb-xxxs {
	margin-bottom: 4px;
}

.mod-mr-xxxs {
	margin-right: 4px;
}

.mod-ml-xxxs {
	margin-left: 4px;
}

.mod-mt-xxs {
	margin-top: 8px;
}

.mod-mb-xxs {
	margin-bottom: 8px;
}

.mod-mr-xxs {
	margin-right: 8px;
}

.mod-ml-xxs {
	margin-left: 8px;
}

.mod-mt-xs {
	margin-top: 12px;
}

.mod-mb-xs {
	margin-bottom: 12px;
}

.mod-mr-xs {
	margin-right: 12px;
}

.mod-ml-xs {
	margin-left: 12px;
}

.mod-mt-s {
	margin-top: 16px;
}

.mod-mb-s {
	margin-bottom: 16px;
}

.mod-mr-s {
	margin-right: 16px;
}

.mod-ml-s {
	margin-left: 16px;
}

.mod-mt-base {
	margin-top: 20px;
}

.mod-mb-base {
	margin-bottom: 20px;
}

.mod-mr-base {
	margin-right: 20px;
}

.mod-ml-base {
	margin-left: 20px;
}

.mod-mt-l {
	margin-top: 32px;
}

.mod-mb-l {
	margin-bottom: 32px;
}

.mod-mr-l {
	margin-right: 32px;
}

.mod-ml-l {
	margin-left: 32px;
}

.mod-mt-xl {
	margin-top: 56px;
}

.mod-mb-xl {
	margin-bottom: 56px;
}

.mod-mr-xl {
	margin-right: 56px;
}

.mod-ml-xl {
	margin-left: 56px;
}

.mod-mt-mxl {
	margin-top: 72px;
}

.mod-mb-mxl {
	margin-bottom: 72px;
}

.mod-mr-mxl {
	margin-right: 72px;
}

.mod-ml-mxl {
	margin-left: 72px;
}

.mod-mt-xxl {
	margin-top: 88px;
}

.mod-mb-xxl {
	margin-bottom: 88px;
}

.mod-mr-xxl {
	margin-right: 88px;
}

.mod-ml-xxl {
	margin-left: 88px;
}

.mod-mt-large {
	margin-top: 120px;
}

.mod-mb-large {
	margin-bottom: 120px;
}

.mod-mr-large {
	margin-right: 120px;
}

.mod-ml-large {
	margin-left: 120px;
}

@media print, screen and (min-width: 768px) {
	.mod-pc-mt-none {
		margin-top: 0;
	}

	.mod-pc-mb-none {
		margin-bottom: 0;
	}

	.mod-pc-mr-none {
		margin-right: 0;
	}

	.mod-pc-ml-none {
		margin-left: 0;
	}

	.mod-pc-mt-xxxs {
		margin-top: 4px;
	}

	.mod-pc-mb-xxxs {
		margin-bottom: 4px;
	}

	.mod-pc-mr-xxxs {
		margin-right: 4px;
	}

	.mod-pc-ml-xxxs {
		margin-left: 4px;
	}

	.mod-pc-mt-xxs {
		margin-top: 8px;
	}

	.mod-pc-mb-xxs {
		margin-bottom: 8px;
	}

	.mod-pc-mr-xxs {
		margin-right: 8px;
	}

	.mod-pc-ml-xxs {
		margin-left: 8px;
	}

	.mod-pc-mt-xs {
		margin-top: 12px;
	}

	.mod-pc-mb-xs {
		margin-bottom: 12px;
	}

	.mod-pc-mr-xs {
		margin-right: 12px;
	}

	.mod-pc-ml-xs {
		margin-left: 12px;
	}

	.mod-pc-mt-s {
		margin-top: 16px;
	}

	.mod-pc-mb-s {
		margin-bottom: 16px;
	}

	.mod-pc-mr-s {
		margin-right: 16px;
	}

	.mod-pc-ml-s {
		margin-left: 16px;
	}

	.mod-pc-mt-base {
		margin-top: 20px;
	}

	.mod-pc-mb-base {
		margin-bottom: 20px;
	}

	.mod-pc-mr-base {
		margin-right: 20px;
	}

	.mod-pc-ml-base {
		margin-left: 20px;
	}

	.mod-pc-mt-l {
		margin-top: 32px;
	}

	.mod-pc-mb-l {
		margin-bottom: 32px;
	}

	.mod-pc-mr-l {
		margin-right: 32px;
	}

	.mod-pc-ml-l {
		margin-left: 32px;
	}

	.mod-pc-mt-xl {
		margin-top: 56px;
	}

	.mod-pc-mb-xl {
		margin-bottom: 56px;
	}

	.mod-pc-mr-xl {
		margin-right: 56px;
	}

	.mod-pc-ml-xl {
		margin-left: 56px;
	}

	.mod-pc-mt-mxl {
		margin-top: 72px;
	}

	.mod-pc-mb-mxl {
		margin-bottom: 72px;
	}

	.mod-pc-mr-mxl {
		margin-right: 72px;
	}

	.mod-pc-ml-mxl {
		margin-left: 72px;
	}

	.mod-pc-mt-xxl {
		margin-top: 88px;
	}

	.mod-pc-mb-xxl {
		margin-bottom: 88px;
	}

	.mod-pc-mr-xxl {
		margin-right: 88px;
	}

	.mod-pc-ml-xxl {
		margin-left: 88px;
	}

	.mod-pc-mt-large {
		margin-top: 120px;
	}

	.mod-pc-mb-large {
		margin-bottom: 120px;
	}

	.mod-pc-mr-large {
		margin-right: 120px;
	}

	.mod-pc-ml-large {
		margin-left: 120px;
	}
}

@media print, screen and (max-width: 767px) {
	.mod-sp-mt-none {
		margin-top: 0;
	}

	.mod-sp-mb-none {
		margin-bottom: 0;
	}

	.mod-sp-mr-none {
		margin-right: 0;
	}

	.mod-sp-ml-none {
		margin-left: 0;
	}

	.mod-sp-mt-xxxs {
		margin-top: 4px;
	}

	.mod-sp-mb-xxxs {
		margin-bottom: 4px;
	}

	.mod-sp-mr-xxxs {
		margin-right: 4px;
	}

	.mod-sp-ml-xxxs {
		margin-left: 4px;
	}

	.mod-sp-mt-xxs {
		margin-top: 8px;
	}

	.mod-sp-mb-xxs {
		margin-bottom: 8px;
	}

	.mod-sp-mr-xxs {
		margin-right: 8px;
	}

	.mod-sp-ml-xxs {
		margin-left: 8px;
	}

	.mod-sp-mt-xs {
		margin-top: 12px;
	}

	.mod-sp-mb-xs {
		margin-bottom: 12px;
	}

	.mod-sp-mr-xs {
		margin-right: 12px;
	}

	.mod-sp-ml-xs {
		margin-left: 12px;
	}

	.mod-sp-mt-s {
		margin-top: 16px;
	}

	.mod-sp-mb-s {
		margin-bottom: 16px;
	}

	.mod-sp-mr-s {
		margin-right: 16px;
	}

	.mod-sp-ml-s {
		margin-left: 16px;
	}

	.mod-sp-mt-base {
		margin-top: 20px;
	}

	.mod-sp-mb-base {
		margin-bottom: 20px;
	}

	.mod-sp-mr-base {
		margin-right: 20px;
	}

	.mod-sp-ml-base {
		margin-left: 20px;
	}

	.mod-sp-mt-l {
		margin-top: 32px;
	}

	.mod-sp-mb-l {
		margin-bottom: 32px;
	}

	.mod-sp-mr-l {
		margin-right: 32px;
	}

	.mod-sp-ml-l {
		margin-left: 32px;
	}

	.mod-sp-mt-xl {
		margin-top: 56px;
	}

	.mod-sp-mb-xl {
		margin-bottom: 56px;
	}

	.mod-sp-mr-xl {
		margin-right: 56px;
	}

	.mod-sp-ml-xl {
		margin-left: 56px;
	}

	.mod-sp-mt-mxl {
		margin-top: 72px;
	}

	.mod-sp-mb-mxl {
		margin-bottom: 72px;
	}

	.mod-sp-mr-mxl {
		margin-right: 72px;
	}

	.mod-sp-ml-mxl {
		margin-left: 72px;
	}

	.mod-sp-mt-xxl {
		margin-top: 88px;
	}

	.mod-sp-mb-xxl {
		margin-bottom: 88px;
	}

	.mod-sp-mr-xxl {
		margin-right: 88px;
	}

	.mod-sp-ml-xxl {
		margin-left: 88px;
	}

	.mod-sp-mt-large {
		margin-top: 120px;
	}

	.mod-sp-mb-large {
		margin-bottom: 120px;
	}

	.mod-sp-mr-large {
		margin-right: 120px;
	}

	.mod-sp-ml-large {
		margin-left: 120px;
	}
}

/* -----------------------------------------------------
 * mod-padding > mod-p
 * -------------------------------------------------- */
.mod-pt-none {
	padding-top: 0;
}

.mod-pb-none {
	padding-bottom: 0;
}

.mod-pr-none {
	padding-right: 0;
}

.mod-pl-none {
	padding-left: 0;
}

.mod-pt-xxxs {
	padding-top: 4px;
}

.mod-pb-xxxs {
	padding-bottom: 4px;
}

.mod-pr-xxxs {
	padding-right: 4px;
}

.mod-pl-xxxs {
	padding-left: 4px;
}

.mod-pt-xxs {
	padding-top: 8px;
}

.mod-pb-xxs {
	padding-bottom: 8px;
}

.mod-pr-xxs {
	padding-right: 8px;
}

.mod-pl-xxs {
	padding-left: 8px;
}

.mod-pt-xs {
	padding-top: 12px;
}

.mod-pb-xs {
	padding-bottom: 12px;
}

.mod-pr-xs {
	padding-right: 12px;
}

.mod-pl-xs {
	padding-left: 12px;
}

.mod-pt-s {
	padding-top: 16px;
}

.mod-pb-s {
	padding-bottom: 16px;
}

.mod-pr-s {
	padding-right: 16px;
}

.mod-pl-s {
	padding-left: 16px;
}

.mod-pt-base {
	padding-top: 20px;
}

.mod-pb-base {
	padding-bottom: 20px;
}

.mod-pr-base {
	padding-right: 20px;
}

.mod-pl-base {
	padding-left: 20px;
}

.mod-pt-l {
	padding-top: 32px;
}

.mod-pb-l {
	padding-bottom: 32px;
}

.mod-pr-l {
	padding-right: 32px;
}

.mod-pl-l {
	padding-left: 32px;
}

.mod-pt-xl {
	padding-top: 56px;
}

.mod-pb-xl {
	padding-bottom: 56px;
}

.mod-pr-xl {
	padding-right: 56px;
}

.mod-pl-xl {
	padding-left: 56px;
}

.mod-pt-mxl {
	padding-top: 72px;
}

.mod-pb-mxl {
	padding-bottom: 72px;
}

.mod-pr-mxl {
	padding-right: 72px;
}

.mod-pl-mxl {
	padding-left: 72px;
}

.mod-pt-xxl {
	padding-top: 88px;
}

.mod-pb-xxl {
	padding-bottom: 88px;
}

.mod-pr-xxl {
	padding-right: 88px;
}

.mod-pl-xxl {
	padding-left: 88px;
}

.mod-pt-large {
	padding-top: 120px;
}

.mod-pb-large {
	padding-bottom: 120px;
}

.mod-pr-large {
	padding-right: 120px;
}

.mod-pl-large {
	padding-left: 120px;
}

@media print, screen and (min-width: 768px) {
	.mod-pc-pt-none {
		padding-top: 0;
	}

	.mod-pc-pb-none {
		padding-bottom: 0;
	}

	.mod-pc-pr-none {
		padding-right: 0;
	}

	.mod-pc-pl-none {
		padding-left: 0;
	}

	.mod-pc-pt-xxxs {
		padding-top: 4px;
	}

	.mod-pc-pb-xxxs {
		padding-bottom: 4px;
	}

	.mod-pc-pr-xxxs {
		padding-right: 4px;
	}

	.mod-pc-pl-xxxs {
		padding-left: 4px;
	}

	.mod-pc-pt-xxs {
		padding-top: 8px;
	}

	.mod-pc-pb-xxs {
		padding-bottom: 8px;
	}

	.mod-pc-pr-xxs {
		padding-right: 8px;
	}

	.mod-pc-pl-xxs {
		padding-left: 8px;
	}

	.mod-pc-pt-xs {
		padding-top: 12px;
	}

	.mod-pc-pb-xs {
		padding-bottom: 12px;
	}

	.mod-pc-pr-xs {
		padding-right: 12px;
	}

	.mod-pc-pl-xs {
		padding-left: 12px;
	}

	.mod-pc-pt-s {
		padding-top: 16px;
	}

	.mod-pc-pb-s {
		padding-bottom: 16px;
	}

	.mod-pc-pr-s {
		padding-right: 16px;
	}

	.mod-pc-pl-s {
		padding-left: 16px;
	}

	.mod-pc-pt-base {
		padding-top: 20px;
	}

	.mod-pc-pb-base {
		padding-bottom: 20px;
	}

	.mod-pc-pr-base {
		padding-right: 20px;
	}

	.mod-pc-pl-base {
		padding-left: 20px;
	}

	.mod-pc-pt-l {
		padding-top: 32px;
	}

	.mod-pc-pb-l {
		padding-bottom: 32px;
	}

	.mod-pc-pr-l {
		padding-right: 32px;
	}

	.mod-pc-pl-l {
		padding-left: 32px;
	}

	.mod-pc-pt-xl {
		padding-top: 56px;
	}

	.mod-pc-pb-xl {
		padding-bottom: 56px;
	}

	.mod-pc-pr-xl {
		padding-right: 56px;
	}

	.mod-pc-pl-xl {
		padding-left: 56px;
	}

	.mod-pc-pt-mxl {
		padding-top: 72px;
	}

	.mod-pc-pb-mxl {
		padding-bottom: 72px;
	}

	.mod-pc-pr-mxl {
		padding-right: 72px;
	}

	.mod-pc-pl-mxl {
		padding-left: 72px;
	}

	.mod-pc-pt-xxl {
		padding-top: 88px;
	}

	.mod-pc-pb-xxl {
		padding-bottom: 88px;
	}

	.mod-pc-pr-xxl {
		padding-right: 88px;
	}

	.mod-pc-pl-xxl {
		padding-left: 88px;
	}

	.mod-pc-pt-large {
		padding-top: 120px;
	}

	.mod-pc-pb-large {
		padding-bottom: 120px;
	}

	.mod-pc-pr-large {
		padding-right: 120px;
	}

	.mod-pc-pl-large {
		padding-left: 120px;
	}
}

@media print, screen and (max-width: 767px) {
	.mod-sp-pt-none {
		padding-top: 0;
	}

	.mod-sp-pb-none {
		padding-bottom: 0;
	}

	.mod-sp-pr-none {
		padding-right: 0;
	}

	.mod-sp-pl-none {
		padding-left: 0;
	}

	.mod-sp-pt-xxxs {
		padding-top: 4px;
	}

	.mod-sp-pb-xxxs {
		padding-bottom: 4px;
	}

	.mod-sp-pr-xxxs {
		padding-right: 4px;
	}

	.mod-sp-pl-xxxs {
		padding-left: 4px;
	}

	.mod-sp-pt-xxs {
		padding-top: 8px;
	}

	.mod-sp-pb-xxs {
		padding-bottom: 8px;
	}

	.mod-sp-pr-xxs {
		padding-right: 8px;
	}

	.mod-sp-pl-xxs {
		padding-left: 8px;
	}

	.mod-sp-pt-xs {
		padding-top: 12px;
	}

	.mod-sp-pb-xs {
		padding-bottom: 12px;
	}

	.mod-sp-pr-xs {
		padding-right: 12px;
	}

	.mod-sp-pl-xs {
		padding-left: 12px;
	}

	.mod-sp-pt-s {
		padding-top: 16px;
	}

	.mod-sp-pb-s {
		padding-bottom: 16px;
	}

	.mod-sp-pr-s {
		padding-right: 16px;
	}

	.mod-sp-pl-s {
		padding-left: 16px;
	}

	.mod-sp-pt-base {
		padding-top: 20px;
	}

	.mod-sp-pb-base {
		padding-bottom: 20px;
	}

	.mod-sp-pr-base {
		padding-right: 20px;
	}

	.mod-sp-pl-base {
		padding-left: 20px;
	}

	.mod-sp-pt-l {
		padding-top: 32px;
	}

	.mod-sp-pb-l {
		padding-bottom: 32px;
	}

	.mod-sp-pr-l {
		padding-right: 32px;
	}

	.mod-sp-pl-l {
		padding-left: 32px;
	}

	.mod-sp-pt-xl {
		padding-top: 56px;
	}

	.mod-sp-pb-xl {
		padding-bottom: 56px;
	}

	.mod-sp-pr-xl {
		padding-right: 56px;
	}

	.mod-sp-pl-xl {
		padding-left: 56px;
	}

	.mod-sp-pt-mxl {
		padding-top: 72px;
	}

	.mod-sp-pb-mxl {
		padding-bottom: 72px;
	}

	.mod-sp-pr-mxl {
		padding-right: 72px;
	}

	.mod-sp-pl-mxl {
		padding-left: 72px;
	}

	.mod-sp-pt-xxl {
		padding-top: 88px;
	}

	.mod-sp-pb-xxl {
		padding-bottom: 88px;
	}

	.mod-sp-pr-xxl {
		padding-right: 88px;
	}

	.mod-sp-pl-xxl {
		padding-left: 88px;
	}

	.mod-sp-pt-large {
		padding-top: 120px;
	}

	.mod-sp-pb-large {
		padding-bottom: 120px;
	}

	.mod-sp-pr-large {
		padding-right: 120px;
	}

	.mod-sp-pl-large {
		padding-left: 120px;
	}
}

.mod-wide-all {
	width: 100%;
}

/* variables color */
/*
#colors

@Service #2658CE
@Job #37B500
@Career #FE590F
@tone1 #F4F4F9
@tone2 #EBEBF3
@tone3 #CACAD9
@tone4 #84849A
@tone5 #4A4A4A
*/
/* variables-color */
:root {
	/* color color palette */
	/* Gray */
	--Gray-100: #f6f3f0;
	--Gray-200: #e4e0de;
	--Gray-300: #cbc8c6;
	--Gray-400: #b2afac;
	--Gray-500: #969391;
	--Gray-600: #716e6b;
	--Gray-700: #605d5b;
	--Gray-800: #4e4b49;
	--Gray-900: #2d2b29;
	--Gray-1000: #171413;
	/* Pink */
	--Pink-100: #fef1f5;
	--Pink-200: #fbd8e2;
	--Pink-300: #f7b5c8;
	--Pink-400: #f189aa;
	--Pink-500: #e9588e;
	--Pink-600: #cb006b;
	--Pink-700: #ac0058;
	--Pink-800: #8b0647;
	--Pink-900: #57002a;
	--Pink-1000: #280010;
	/* Red */
	--Red-100: #fff1f1;
	--Red-200: #ffd8d7;
	--Red-300: #fdb4b4;
	--Red-400: #fb888b;
	--Red-500: #f5505f;
	--Red-600: #d40038;
	--Red-700: #ac1731;
	--Red-800: #920625;
	--Red-900: #5c0415;
	--Red-1000: #2f0107;
	/* Orange */
	--Orange-100: #fef2ed;
	--Orange-200: #ffdacd;
	--Orange-300: #ffb59c;
	--Orange-400: #f88d68;
	--Orange-500: #f25915;
	--Orange-600: #c04101;
	--Orange-700: #934225;
	--Orange-800: #79371f;
	--Orange-900: #4f1f0d;
	--Orange-1000: #260c04;
	/* Lime */
	--Lime-100: #f2f9e2;
	--Lime-200: #dfebbf;
	--Lime-300: #c1d293;
	--Lime-400: #a2bb4b;
	--Lime-500: #869f16;
	--Lime-600: #687c0b;
	--Lime-700: #566606;
	--Lime-800: #465408;
	--Lime-900: #2c3505;
	--Lime-1000: #121700;
	/* Green */
	--Green-100: #ecfaec;
	--Green-200: #cdf0cc;
	--Green-300: #a8daa8;
	--Green-400: #66c56c;
	--Green-500: #28af3d;
	--Green-600: #2b8735;
	--Green-700: #276d2e;
	--Green-800: #1b5a22;
	--Green-900: #0f3a14;
	--Green-1000: #021b04;
	/* Aqua */
	--Aqua-100: #e3fafe;
	--Aqua-200: #b7f0fa;
	--Aqua-300: #7edae9;
	--Aqua-400: #12c0d6;
	--Aqua-500: #1aa4b6;
	--Aqua-600: #2b7e8a;
	--Aqua-700: #176774;
	--Aqua-800: #0f5760;
	--Aqua-900: #05373f;
	--Aqua-1000: #00191d;
	/* Blue */
	--Blue-100: #f2f5fc;
	--Blue-200: #dae3f7;
	--Blue-300: #b0c7f9;
	--Blue-400: #8aaaf6;
	--Blue-500: #648cf4;
	--Blue-600: #3a63e0;
	--Blue-700: #2045da;
	--Blue-800: #142ec5;
	--Blue-900: #08118c;
	--Blue-1000: #020448;
	/* Violet */
	--Violet-100: #f4f5fa;
	--Violet-200: #dfe1f6;
	--Violet-300: #bec2f8;
	--Violet-400: #9fa3f4;
	--Violet-500: #8382f3;
	--Violet-600: #6258dd;
	--Violet-700: #5336d8;
	--Violet-800: #451dc3;
	--Violet-900: #290083;
	--Violet-1000: #104;
	/* Purple */
	--Purple-100: #f9f3f9;
	--Purple-200: #eedced;
	--Purple-300: #e2b7e1;
	--Purple-400: #d392d2;
	--Purple-500: #c46bc4;
	--Purple-600: #a247a2;
	--Purple-700: #950c98;
	--Purple-800: #7d0c7f;
	--Purple-900: #4f0050;
	--Purple-1000: #260027;
	/* Yellow */
	--Yellow-100: #fffaec;
	--Yellow-200: #feeec1;
	--Yellow-300: #fee195;
	--Yellow-400: #f7ce5a;
	--Yellow-500: #f4c200;
	--Yellow-600: #d4a800;
	--Yellow-700: #b18c00;
	--Yellow-800: #896c00;
	--Yellow-900: #5f4a00;
	--Yellow-1000: #1f1600;
}

/* -----------------------------------------------------
 * Layout in module
 * -------------------------------------------------- */
/*
#styleguide
マージン20px(SP時カラム落ち)

```
<div class="mod-grid grid-cancel">


<div class="grid-column11">
<div class="mod-box"><div class="box-inner">column11</div></div>
</div>

<div class="grid-column1">
<div class="mod-box"><div class="box-inner">column1</div></div>
</div>

<div class="grid-column10">
<div class="mod-box"><div class="box-inner">column10</div></div>
</div>

<div class="grid-column2">
<div class="mod-box"><div class="box-inner">column2</div></div>
</div>

<div class="grid-column9">
<div class="mod-box"><div class="box-inner">column9</div></div>
</div>

<div class="grid-column3">
<div class="mod-box"><div class="box-inner">column3</div></div>
</div>

<div class="grid-column8">
<div class="mod-box"><div class="box-inner">column8</div></div>
</div>

<div class="grid-column4">
<div class="mod-box"><div class="box-inner">column4</div></div>
</div>

<div class="grid-column7">
<div class="mod-box"><div class="box-inner">column7</div></div>
</div>

<div class="grid-column5">
<div class="mod-box"><div class="box-inner">column5</div></div>
</div>

<div class="grid-column6">
<div class="mod-box"><div class="box-inner">column6</div></div>
</div>

<div class="grid-column6">
<div class="mod-box"><div class="box-inner">column6</div></div>
</div>

<!-- /.grid --></div>
```
*/
/*
#styleguide
マージン10px

```
<div class="mod-grid grid-m10">

<div class="grid-column4">
<div class="mod-box"><div class="box-inner">column4</div></div>
</div>

<div class="grid-column4">
<div class="mod-box"><div class="box-inner">column4</div></div>
</div>

<div class="grid-column4">
<div class="mod-box"><div class="box-inner">column4</div></div>
</div>

<!-- /.grid --></div>
```
*/
/*
#styleguide
ただ横並び（内包するコンテンツで幅決まる）

```
<div class="mod-grid grid-m10 grid-cancel">

<div class="grid-column">
<div class="mod-box"><div class="box-inner">column</div></div>
</div>

<div class="grid-column">
<div class="mod-box"><div class="box-inner">column</div></div>
</div>

<div class="grid-column">
<div class="mod-box"><div class="box-inner">column</div></div>
</div>


<!-- /.grid --></div>
```
*/
/*
#styleguide
横幅いっぱいになる設定

```
<div class="mod-grid grid-m10 grid-cancel">

<div class="grid-column">
<div class="mod-box"><div class="box-inner">column</div></div>
</div>

<div class="grid-column grid-variable">
<div class="mod-box"><div class="box-inner">column</div></div>
</div>

<div class="grid-column grid-variable">
<div class="mod-box"><div class="box-inner">column</div></div>
</div>


<!-- /.grid --></div>
```
*/
/*
#styleguide
一覧など

```
<div class="mod-grid grid-m10 grid-sp2column">

<div class="grid-column3">
<a href="#" class="mod-button button-mini button-icon button-long button-white mod-l">医者<i class="icon-arrow_right icon-career"></i></a>
</div>


<div class="grid-column3">
<a href="#" class="mod-button button-mini button-icon button-long button-white mod-l">医師<i class="icon-arrow_right icon-career"></i></a>
</div>


<div class="grid-column3">
<a href="#" class="mod-button button-mini button-icon button-long button-white mod-l">
薬剤師<i class="icon-arrow_right icon-career"></i></a>
</div>


<div class="grid-column3">
<a href="#" class="mod-button button-mini button-icon button-long button-white mod-l">
看護師<i class="icon-arrow_right icon-career"></i></a>
</div>


<div class="grid-column3">
<a href="#" class="mod-button button-mini button-icon button-long button-white mod-l">
保健師<i class="icon-arrow_right icon-career"></i></a>
</div>


<div class="grid-column3">
<a href="#" class="mod-button button-mini button-icon button-long button-white mod-l">
助産師<i class="icon-arrow_right icon-career"></i></a>
</div>


<div class="grid-column3">
<a href="#" class="mod-button button-mini button-icon button-long button-white mod-l">
診療放射線技師<i class="icon-arrow_right icon-career"></i></a>
</div>


<div class="grid-column3">
<a href="#" class="mod-button button-mini button-icon button-long button-white mod-l">
臨床検査技師<i class="icon-arrow_right icon-career"></i></a>
</div>


<div class="grid-column3">
<a href="#" class="mod-button button-mini button-icon button-long button-white mod-l">
臨床工学技士<i class="icon-arrow_right icon-career"></i></a>
</div>


<div class="grid-column3">
<a href="#" class="mod-button button-mini button-icon button-long button-white mod-l">
視能訓練士<i class="icon-arrow_right icon-career"></i></a>
</div>


<div class="grid-column3">
<a href="#" class="mod-button button-mini button-icon button-long button-white mod-l">
管理栄養士<i class="icon-arrow_right icon-career"></i></a>
</div>


<div class="grid-column3">
<a href="#" class="mod-button button-mini button-icon button-long button-white mod-l">
理学療法士<i class="icon-arrow_right icon-career"></i></a>
</div>


<div class="grid-column3">
<a href="#" class="mod-button button-mini button-icon button-long button-white mod-l">
作業療法士<i class="icon-arrow_right icon-career"></i></a>
</div>


<div class="grid-column3">
<a href="#" class="mod-button button-mini button-icon button-long button-white mod-l">
言語聴覚士<i class="icon-arrow_right icon-career"></i></a>
</div>


<div class="grid-column3">
<a href="#" class="mod-button button-mini button-icon button-long button-white mod-l">
CRA<i class="icon-arrow_right icon-career"></i></a>
</div>


<div class="grid-column3">
<a href="#" class="mod-button button-mini button-icon button-long button-white mod-l">
CRC<i class="icon-arrow_right icon-career"></i></a>
</div>


<div class="grid-column3">
<a href="#" class="mod-button button-mini button-icon button-long button-white mod-l">
歯科医師<i class="icon-arrow_right icon-career"></i></a>
</div>


<div class="grid-column3">
<a href="#" class="mod-button button-mini button-icon button-long button-white mod-l">
歯科衛生士<i class="icon-arrow_right icon-career"></i></a>
</div>


<div class="grid-column3">
<a href="#" class="mod-button button-mini button-icon button-long button-white mod-l">
歯科技工士<i class="icon-arrow_right icon-career"></i></a>
</div>


<div class="grid-column3">
<a href="#" class="mod-button button-mini button-icon button-long button-white mod-l">
歯科助手<i class="icon-arrow_right icon-career"></i></a>
</div>


<div class="grid-column3">
<a href="#" class="mod-button button-mini button-icon button-long button-white mod-l">
登録販売者<i class="icon-arrow_right icon-career"></i></a>
</div>


<div class="grid-column3">
<a href="#" class="mod-button button-mini button-icon button-long button-white mod-l">
ケアマネジャー<i class="icon-arrow_right icon-career"></i></a>
</div>


<div class="grid-column3">
<a href="#" class="mod-button button-mini button-icon button-long button-white mod-l">
介護福祉士<i class="icon-arrow_right icon-career"></i></a>
</div>


<div class="grid-column3">
<a href="#" class="mod-button button-mini button-icon button-long button-white mod-l">
社会福祉士<i class="icon-arrow_right icon-career"></i></a>
</div>


<div class="grid-column3">
<a href="#" class="mod-button button-mini button-icon button-long button-white mod-l">
ヘルパー･介護職<i class="icon-arrow_right icon-career"></i></a>
</div>


<div class="grid-column3">
<a href="#" class="mod-button button-mini button-icon button-long button-white mod-l">
精神保健福祉士<i class="icon-arrow_right icon-career"></i></a>
</div>


<div class="grid-column3">
<a href="#" class="mod-button button-mini button-icon button-long button-white mod-l">
社会福祉主事<i class="icon-arrow_right icon-career"></i></a>
</div>


<div class="grid-column3">
<a href="#" class="mod-button button-mini button-icon button-long button-white mod-l">
福祉用具相談員<i class="icon-arrow_right icon-career"></i></a>
</div>


<div class="grid-column3">
<a href="#" class="mod-button button-mini button-icon button-long button-white mod-l">
柔道整復師<i class="icon-arrow_right icon-career"></i></a>
</div>


<div class="grid-column3">
<a href="#" class="mod-button button-mini button-icon button-long button-white mod-l">
鍼灸師<i class="icon-arrow_right icon-career"></i></a>
</div>


<div class="grid-column3">
<a href="#" class="mod-button button-mini button-icon button-long button-white mod-l">
マッサージ師<i class="icon-arrow_right icon-career"></i></a>
</div>


<div class="grid-column3">
<a href="#" class="mod-button button-mini button-icon button-long button-white mod-l">
保育士<i class="icon-arrow_right icon-career"></i></a>
</div>


<div class="grid-column3">
<a href="#" class="mod-button button-mini button-icon button-long button-white mod-l">
臨床心理士<i class="icon-arrow_right icon-career"></i></a>
</div>


<div class="grid-column3">
<a href="#" class="mod-button button-mini button-icon button-long button-white mod-l">
診療情報管理士<i class="icon-arrow_right icon-career"></i></a>
</div>


<div class="grid-column3">
<a href="#" class="mod-button button-mini button-icon button-long button-white mod-l">
看護助手<i class="icon-arrow_right icon-career"></i></a>
</div>


<div class="grid-column3">
<a href="#" class="mod-button button-mini button-icon button-long button-white mod-l">
医療事務<i class="icon-arrow_right icon-career"></i></a>
</div>


<!-- /.grid --></div>
```
*/
/*
#styleguide
フォームで使う片方固定

```
<div class="mod-box">


<div class="mod-grid form-item">
<div class="grid-column grid-fix">
<div class="form-label">
<div class="form-labeltxt">メッセージ</div>
<a href="#" class="icon-quertion" data-izimodal-open=".iziModal-hint-message"></a>
<div><span class="mod-label label-coution">必須</span></div>
</div>

</div>
<div class="grid-column grid-variable"><input type="text" class="mod-input" placeholder="example"></div>
<!-- /.grid --></div>



<!-- /.mod-box --></div>



```
*/
/*
#styleguide
フォームで使う片方固定
(スマホでも横並びにする場合)

```
<div class="mod-box">


<div class="mod-grid form-item2">
<div class="grid-column grid-fix">
<div class="form-label">
<div class="form-labeltxt">支払い金額</div>
</div>
</div>
<div class="grid-column grid-variable">4億円</div>
<!-- /.grid --></div>

<div class="mod-grid form-item2">
<div class="grid-column grid-fix">
<div class="form-label">
<div class="form-labeltxt">指定場所</div>
</div>
</div>
<div class="grid-column grid-variable">新宿中央公園</div>
<!-- /.grid --></div>

<div class="mod-grid form-item2">
<div class="grid-column grid-fix">
<div class="form-label">
<div class="form-labeltxt">警察への連絡</div>
</div>
</div>
<div class="grid-column grid-variable">なし</div>
<!-- /.grid --></div>

<div class="mod-grid form-item2">
<div class="grid-column grid-fix">
<div class="form-label">
<div class="form-labeltxt">電話連絡</div>
</div>
</div>
<div class="grid-column grid-variable">あり</div>
<!-- /.grid --></div>



<!-- /.mod-box --></div>



```
*/
.mod-grid {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	box-sizing: border-box;
	min-width: 0;
	margin-right: -10px;
	margin-bottom: -20px;
	margin-left: -10px;
}

.mod-grid > * {
	margin-bottom: 20px;
}

.mod-grid.grid-inline {
	display: inline-flex;
}

.mod-grid.grid-c {
	justify-content: center;
}

.mod-grid.grid-itemc {
	align-items: center;
}

.mod-grid.grid-nowrap {
	flex-wrap: nowrap;
}

.mod-grid.grid-nowrap .grid-item-nowrap {
	white-space: nowrap;
}

.mod-grid.grid-nowrap .gird-ellipse {
	overflow: hidden;
	white-space: nowrap !important;
	text-overflow: ellipsis !important;
}

.mod-grid.grid-baseline {
	align-items: baseline;
}

.mod-grid.form-item,
.mod-grid.form-item2 {
	flex-wrap: nowrap;
	align-items: center;
	margin: 15px;
	border-bottom: 1px dotted #cacad9;
}

.mod-grid.form-item:last-child,
.mod-grid.form-item2:last-child {
	border: none;
}

@media print, screen and (min-width: 768px) {
	.mod-grid.form-item:last-child > div,
	.mod-grid.form-item2:last-child > div {
		margin-bottom: 0;
	}
}

.mod-grid.form-item.form-item-last,
.mod-grid.form-item2.form-item-last {
	border-bottom: none;
}

.mod-grid.form-item .form-item-noborder,
.mod-grid.form-item2 .form-item-noborder {
	border: none;
}

.mod-grid.form-item > div,
.mod-grid.form-item2 > div {
	margin: 0 0 15px 0;
}

.mod-grid.form-item > .grid-fix,
.mod-grid.form-item2 > .grid-fix {
	margin-right: 20px;
}

.mod-grid.form-item.form-wrap,
.mod-grid.form-item2.form-wrap {
	flex-wrap: wrap;
}

.mod-grid.form-item.form-item-center,
.mod-grid.form-item2.form-item-center {
	justify-content: center;
}

.mod-grid.wrap-item,
.mod-grid.wrap-item2,
.mod-grid.wrap-item3 {
	display: inline-flex;
	margin-right: 0;
	margin-left: 0;
}

.mod-grid.wrap-item > div {
	flex-basis: 200px;
	width: 200px;
}

.ie .mod-grid.wrap-item,
.ie .mod-grid.wrap-item2,
.ie .mod-grid.wrap-item3 {
	display: block;
}

.ie .mod-grid.wrap-item > div,
.ie .mod-grid.wrap-item2 > div,
.ie .mod-grid.wrap-item3 > div {
	display: inline-block;
}

.mod-grid > .grid-column {
	margin-right: 10px;
	margin-left: 10px;
}

.mod-grid > .grid-column1 {
	flex-basis: calc(8.33333% - 20px);
	max-width: calc(8.33333% - 20px);
	margin-right: 10px;
	margin-left: 10px;
}

.mod-grid > .grid-column2 {
	flex-basis: calc(16.66667% - 20px);
	max-width: calc(16.66667% - 20px);
	margin-right: 10px;
	margin-left: 10px;
}

.mod-grid > .grid-column3 {
	flex-basis: calc(25% - 20px);
	max-width: calc(25% - 20px);
	margin-right: 10px;
	margin-left: 10px;
}

.mod-grid > .grid-column4 {
	flex-basis: calc(33.33333% - 20px);
	max-width: calc(33.33333% - 20px);
	margin-right: 10px;
	margin-left: 10px;
}

.mod-grid > .grid-column5 {
	flex-basis: calc(41.66667% - 20px);
	max-width: calc(41.66667% - 20px);
	margin-right: 10px;
	margin-left: 10px;
}

.mod-grid > .grid-column6 {
	flex-basis: calc(50% - 20px);
	max-width: calc(50% - 20px);
	margin-right: 10px;
	margin-left: 10px;
}

.mod-grid > .grid-column7 {
	flex-basis: calc(58.33333% - 20px);
	max-width: calc(58.33333% - 20px);
	margin-right: 10px;
	margin-left: 10px;
}

.mod-grid > .grid-column8 {
	flex-basis: calc(66.66667% - 20px);
	max-width: calc(66.66667% - 20px);
	margin-right: 10px;
	margin-left: 10px;
}

.mod-grid > .grid-column9 {
	flex-basis: calc(75% - 20px);
	max-width: calc(75% - 20px);
	margin-right: 10px;
	margin-left: 10px;
}

.mod-grid > .grid-column10 {
	flex-basis: calc(83.33333% - 20px);
	max-width: calc(83.33333% - 20px);
	margin-right: 10px;
	margin-left: 10px;
}

.mod-grid > .grid-column11 {
	flex-basis: calc(91.66667% - 20px);
	max-width: calc(91.66667% - 20px);
	margin-right: 10px;
	margin-left: 10px;
}

.mod-grid > .grid-column12 {
	flex-basis: calc(100% - 20px);
	max-width: calc(100% - 20px);
	margin-right: 10px;
	margin-left: 10px;
}

.mod-grid > .grid-variable {
	flex-grow: 1;
}

.mod-grid > .grid-reduction {
	flex-shrink: 2;
}

.mod-grid.grid-m10 {
	margin-right: -5px;
	margin-bottom: -10px;
	margin-left: -5px;
}

.mod-grid.grid-m10 > * {
	margin-bottom: 10px;
}

.mod-grid.grid-m10 > .grid-column {
	margin-right: 5px;
	margin-left: 5px;
}

.mod-grid.grid-m10 > .grid-column1 {
	flex-basis: calc(8.33333% - 10px);
	max-width: calc(8.33333% - 10px);
	margin-right: 5px;
	margin-left: 5px;
}

.mod-grid.grid-m10 > .grid-column2 {
	flex-basis: calc(16.66667% - 10px);
	max-width: calc(16.66667% - 10px);
	margin-right: 5px;
	margin-left: 5px;
}

.mod-grid.grid-m10 > .grid-column3 {
	flex-basis: calc(25% - 10px);
	max-width: calc(25% - 10px);
	margin-right: 5px;
	margin-left: 5px;
}

.mod-grid.grid-m10 > .grid-column4 {
	flex-basis: calc(33.33333% - 10px);
	max-width: calc(33.33333% - 10px);
	margin-right: 5px;
	margin-left: 5px;
}

.mod-grid.grid-m10 > .grid-column5 {
	flex-basis: calc(41.66667% - 10px);
	max-width: calc(41.66667% - 10px);
	margin-right: 5px;
	margin-left: 5px;
}

.mod-grid.grid-m10 > .grid-column6 {
	flex-basis: calc(50% - 10px);
	max-width: calc(50% - 10px);
	margin-right: 5px;
	margin-left: 5px;
}

.mod-grid.grid-m10 > .grid-column7 {
	flex-basis: calc(58.33333% - 10px);
	max-width: calc(58.33333% - 10px);
	margin-right: 5px;
	margin-left: 5px;
}

.mod-grid.grid-m10 > .grid-column8 {
	flex-basis: calc(66.66667% - 10px);
	max-width: calc(66.66667% - 10px);
	margin-right: 5px;
	margin-left: 5px;
}

.mod-grid.grid-m10 > .grid-column9 {
	flex-basis: calc(75% - 10px);
	max-width: calc(75% - 10px);
	margin-right: 5px;
	margin-left: 5px;
}

.mod-grid.grid-m10 > .grid-column10 {
	flex-basis: calc(83.33333% - 10px);
	max-width: calc(83.33333% - 10px);
	margin-right: 5px;
	margin-left: 5px;
}

.mod-grid.grid-m10 > .grid-column11 {
	flex-basis: calc(91.66667% - 10px);
	max-width: calc(91.66667% - 10px);
	margin-right: 5px;
	margin-left: 5px;
}

.mod-grid.grid-m10 > .grid-column12 {
	flex-basis: calc(100% - 10px);
	max-width: calc(100% - 10px);
	margin-right: 5px;
	margin-left: 5px;
}

.mod-grid.grid-m0 {
	margin-right: 0;
	margin-left: 0;
}

.mod-grid.grid-m0 > * {
	margin-bottom: 0;
}

.mod-grid.grid-m0 > .grid-column {
	margin-right: 0;
	margin-left: 0;
}

.mod-grid.grid-m0 > .grid-column1 {
	flex-basis: calc(8.33333%);
	max-width: calc(8.33333%);
	margin-right: 0;
	margin-left: 0;
}

.mod-grid.grid-m0 > .grid-column2 {
	flex-basis: calc(16.66667%);
	max-width: calc(16.66667%);
	margin-right: 0;
	margin-left: 0;
}

.mod-grid.grid-m0 > .grid-column3 {
	flex-basis: calc(25%);
	max-width: calc(25%);
	margin-right: 0;
	margin-left: 0;
}

.mod-grid.grid-m0 > .grid-column4 {
	flex-basis: calc(33.33333%);
	max-width: calc(33.33333%);
	margin-right: 0;
	margin-left: 0;
}

.mod-grid.grid-m0 > .grid-column5 {
	flex-basis: calc(41.66667%);
	max-width: calc(41.66667%);
	margin-right: 0;
	margin-left: 0;
}

.mod-grid.grid-m0 > .grid-column6 {
	flex-basis: calc(50%);
	max-width: calc(50%);
	margin-right: 0;
	margin-left: 0;
}

.mod-grid.grid-m0 > .grid-column7 {
	flex-basis: calc(58.33333%);
	max-width: calc(58.33333%);
	margin-right: 0;
	margin-left: 0;
}

.mod-grid.grid-m0 > .grid-column8 {
	flex-basis: calc(66.66667%);
	max-width: calc(66.66667%);
	margin-right: 0;
	margin-left: 0;
}

.mod-grid.grid-m0 > .grid-column9 {
	flex-basis: calc(75%);
	max-width: calc(75%);
	margin-right: 0;
	margin-left: 0;
}

.mod-grid.grid-m0 > .grid-column10 {
	flex-basis: calc(83.33333%);
	max-width: calc(83.33333%);
	margin-right: 0;
	margin-left: 0;
}

.mod-grid.grid-m0 > .grid-column11 {
	flex-basis: calc(91.66667%);
	max-width: calc(91.66667%);
	margin-right: 0;
	margin-left: 0;
}

.mod-grid.grid-m0 > .grid-column12 {
	flex-basis: calc(100%);
	max-width: calc(100%);
	margin-right: 0;
	margin-left: 0;
}

@media print, screen and (max-width: 767px) {
	.mod-grid.grid-cancel,
	.mod-grid.grid-m10.grid-cancel {
		display: block;
		margin-right: 0;
		margin-left: 0;
	}

	.mod-grid.grid-cancel > *,
	.mod-grid.grid-m10.grid-cancel > * {
		max-width: 100%;
		margin: 0 0 10px 0;
	}

	.mod-grid.grid-cancel.sp-item-reverse,
	.mod-grid.grid-m10.grid-cancel.sp-item-reverse {
		display: flex;
		flex-direction: column;
	}

	.mod-grid.grid-cancel.sp-item-reverse > div:first-child,
	.mod-grid.grid-m10.grid-cancel.sp-item-reverse > div:first-child {
		order: 2;
	}

	.mod-grid.grid-cancel.sp-item-reverse > div:nth-child(2),
	.mod-grid.grid-m10.grid-cancel.sp-item-reverse > div:nth-child(2) {
		order: 1;
	}

	.mod-grid.grid-sp2column > *,
	.mod-grid.grid-m10.grid-sp2column > * {
		flex-basis: calc(50% - 10px);
		max-width: calc(50% - 10px);
		margin-right: 5px;
		margin-left: 5px;
	}

	.mod-grid.form-item {
		flex-wrap: wrap;
		margin: 15px;
	}

	.mod-grid .grid-fix {
		width: 100%;
		margin-right: 0 !important;
	}

	.mod-grid.form-item2 .grid-fix {
		width: auto;
		margin-right: 0;
	}

	.mod-grid.form-item2 .grid-fix .form-label {
		margin-bottom: 0;
	}

	.mod-grid.form-item2 .grid-variable {
		text-align: right;
	}

	.mod-grid.form-item2.form-addpoint {
		flex-wrap: wrap;
		align-items: baseline;
	}

	.mod-grid.wrap-item,
	.mod-grid.wrap-item2,
	.mod-grid.wrap-item3 {
		display: flex;
		justify-content: space-between;
		margin-bottom: -10px;
	}

	.mod-grid.wrap-item.single-item > div,
	.mod-grid.wrap-item2.single-item > div,
	.mod-grid.wrap-item3.single-item > div {
		width: 100%;
		margin-bottom: 10px;
	}

	.mod-grid.wrap-item > div,
	.mod-grid.wrap-item2 > div {
		flex-basis: 49%;
		width: 49%;
		margin-bottom: 10px;
	}

	.mod-grid.wrap-item > div label,
	.mod-grid.wrap-item2 > div label {
		height: 100%;
	}

	.mod-grid.wrap-item > div.wrap-item-content,
	.mod-grid.wrap-item2 > div.wrap-item-content {
		flex-basis: 100%;
		width: 100%;
	}

	.mod-grid.wrap-item3 > div {
		width: 32%;
		margin-bottom: 10px;
	}

	.mod-grid.wrap-item3 > div label {
		height: 100%;
	}
}

@media print, screen and (min-width: 768px) {
	.media-area .no-images {
		display: block;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 300px;
		height: 170px;
		margin-bottom: 10px;
		padding: 15px;
		border-radius: 5px;
		background: #f4f4f9;
	}

	.media-area .no-images + .mod-group-btn .mod-button {
		width: 160px;
	}

	.media-area .popup {
		width: 300px;
		height: 170px;
		padding: 0;
	}

	.media-area .mod-group-btn {
		width: 300px;
		margin-top: 10px;
		font-size: 0;
		text-align: center;
	}

	.media-area .mod-group-btn button {
		width: 75px;
	}

	.media-area .mod-group-btn button:last-child {
		margin-left: 10px;
	}
}

@media print, screen and (max-width: 767px) {
	.media-area .no-images {
		display: block;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 120px;
		margin-bottom: 10px;
		padding: 15px;
		border-radius: 5px;
		background: #f4f4f9;
	}

	.media-area .no-images + .mod-group-btn .mod-button {
		width: 100%;
		margin: 0;
	}

	.media-area .popup {
		display: block;
		border-radius: 5px;
		text-align: center;
	}

	.media-area .popup img {
		width: 75%;
		height: auto;
	}

	.media-area .mod-group-btn {
		width: 100%;
		margin-top: 10px;
		font-size: 0;
	}

	.media-area .mod-group-btn button {
		width: 48%;
	}

	.media-area .mod-group-btn button:last-child {
		margin-left: 4%;
	}
}

@media print, screen and (min-width: 768px) {
	.list-item-scout {
		width: 100%;
		margin: 15px;
		border-radius: 5px;
		background-color: #f4f4f9;
	}

	.list-item-scout .title {
		padding: 15px;
		border-bottom: 1px solid #cacad9;
	}

	.list-item-scout ul li .scout-userdata .scout-usersex {
		padding-left: 45px;
	}

	.list-item-scout ul li .scout-userdata .scout-usersex > i {
		left: 0;
	}

	.list-item-scout .close {
		padding: 10px 15px;
		text-align: center;
	}
}

@media print, screen and (max-width: 767px) {
	.list-item-scout {
		width: 100%;
		border-radius: 5px;
		background-color: #f4f4f9;
	}

	.list-item-scout .title {
		padding: 10px 15px;
		border-bottom: 1px solid #cacad9;
	}

	.list-item-scout ul li.box-listwrap {
		background-color: transparent;
	}

	.list-item-scout ul li .scout-userdata .scout-usersex {
		padding-left: 0;
	}

	.list-item-scout ul li .scout-userdata .scout-usersex > i {
		left: 0;
	}

	.list-item-scout .close {
		padding: 10px 15px;
		text-align: center;
	}
}

/* variables color */
/*
#colors

@Service #2658CE
@Job #37B500
@Career #FE590F
@tone1 #F4F4F9
@tone2 #EBEBF3
@tone3 #CACAD9
@tone4 #84849A
@tone5 #4A4A4A
*/
/* variables-color */
:root {
	/* color color palette */
	/* Gray */
	--Gray-100: #f6f3f0;
	--Gray-200: #e4e0de;
	--Gray-300: #cbc8c6;
	--Gray-400: #b2afac;
	--Gray-500: #969391;
	--Gray-600: #716e6b;
	--Gray-700: #605d5b;
	--Gray-800: #4e4b49;
	--Gray-900: #2d2b29;
	--Gray-1000: #171413;
	/* Pink */
	--Pink-100: #fef1f5;
	--Pink-200: #fbd8e2;
	--Pink-300: #f7b5c8;
	--Pink-400: #f189aa;
	--Pink-500: #e9588e;
	--Pink-600: #cb006b;
	--Pink-700: #ac0058;
	--Pink-800: #8b0647;
	--Pink-900: #57002a;
	--Pink-1000: #280010;
	/* Red */
	--Red-100: #fff1f1;
	--Red-200: #ffd8d7;
	--Red-300: #fdb4b4;
	--Red-400: #fb888b;
	--Red-500: #f5505f;
	--Red-600: #d40038;
	--Red-700: #ac1731;
	--Red-800: #920625;
	--Red-900: #5c0415;
	--Red-1000: #2f0107;
	/* Orange */
	--Orange-100: #fef2ed;
	--Orange-200: #ffdacd;
	--Orange-300: #ffb59c;
	--Orange-400: #f88d68;
	--Orange-500: #f25915;
	--Orange-600: #c04101;
	--Orange-700: #934225;
	--Orange-800: #79371f;
	--Orange-900: #4f1f0d;
	--Orange-1000: #260c04;
	/* Lime */
	--Lime-100: #f2f9e2;
	--Lime-200: #dfebbf;
	--Lime-300: #c1d293;
	--Lime-400: #a2bb4b;
	--Lime-500: #869f16;
	--Lime-600: #687c0b;
	--Lime-700: #566606;
	--Lime-800: #465408;
	--Lime-900: #2c3505;
	--Lime-1000: #121700;
	/* Green */
	--Green-100: #ecfaec;
	--Green-200: #cdf0cc;
	--Green-300: #a8daa8;
	--Green-400: #66c56c;
	--Green-500: #28af3d;
	--Green-600: #2b8735;
	--Green-700: #276d2e;
	--Green-800: #1b5a22;
	--Green-900: #0f3a14;
	--Green-1000: #021b04;
	/* Aqua */
	--Aqua-100: #e3fafe;
	--Aqua-200: #b7f0fa;
	--Aqua-300: #7edae9;
	--Aqua-400: #12c0d6;
	--Aqua-500: #1aa4b6;
	--Aqua-600: #2b7e8a;
	--Aqua-700: #176774;
	--Aqua-800: #0f5760;
	--Aqua-900: #05373f;
	--Aqua-1000: #00191d;
	/* Blue */
	--Blue-100: #f2f5fc;
	--Blue-200: #dae3f7;
	--Blue-300: #b0c7f9;
	--Blue-400: #8aaaf6;
	--Blue-500: #648cf4;
	--Blue-600: #3a63e0;
	--Blue-700: #2045da;
	--Blue-800: #142ec5;
	--Blue-900: #08118c;
	--Blue-1000: #020448;
	/* Violet */
	--Violet-100: #f4f5fa;
	--Violet-200: #dfe1f6;
	--Violet-300: #bec2f8;
	--Violet-400: #9fa3f4;
	--Violet-500: #8382f3;
	--Violet-600: #6258dd;
	--Violet-700: #5336d8;
	--Violet-800: #451dc3;
	--Violet-900: #290083;
	--Violet-1000: #104;
	/* Purple */
	--Purple-100: #f9f3f9;
	--Purple-200: #eedced;
	--Purple-300: #e2b7e1;
	--Purple-400: #d392d2;
	--Purple-500: #c46bc4;
	--Purple-600: #a247a2;
	--Purple-700: #950c98;
	--Purple-800: #7d0c7f;
	--Purple-900: #4f0050;
	--Purple-1000: #260027;
	/* Yellow */
	--Yellow-100: #fffaec;
	--Yellow-200: #feeec1;
	--Yellow-300: #fee195;
	--Yellow-400: #f7ce5a;
	--Yellow-500: #f4c200;
	--Yellow-600: #d4a800;
	--Yellow-700: #b18c00;
	--Yellow-800: #896c00;
	--Yellow-900: #5f4a00;
	--Yellow-1000: #1f1600;
}

/*
#styleguide
スクロールすると画面についてくる position: stickyについて

```
<table class="mod-table table-detail table-sp">
<tr>
<th>職種</th>
<td>薬剤師</td>
</tr>
<tr>
<th>希望勤務地</th>
<td>神奈川県<br>
具体的なエリア：川崎市中原区、東京都大田区、目黒区</td>
</tr>
<tr>
<th>希望業種</th>
<td>第一希望： 薬局（調剤メイン）<br>
第二希望：漢方</td>
</tr>
</table>
```
*/
.mod-sticky {
	position: -webkit-sticky;
	position: sticky;
	bottom: 0;
}

.mod-sticky-top {
	top: 0;
	bottom: auto;
}

.mod-sticky-top.is-stuck {
	border-bottom: 1px solid #e4e0de;
}

.mod-sticky-right {
	right: 0;
	bottom: auto;
}

.mod-sticky-left {
	bottom: auto;
	left: 0;
}

.mod-sticky.is-sticky-bottom {
	z-index: 10;
}

.mod-sticky.is-stuck:not(.mod-sticky-top) {
	border-top: 1px solid #e4e0de;
}

body .mod-overflow-clip {
	overflow: clip;
}

/* variables color */
/*
#colors

@Service #2658CE
@Job #37B500
@Career #FE590F
@tone1 #F4F4F9
@tone2 #EBEBF3
@tone3 #CACAD9
@tone4 #84849A
@tone5 #4A4A4A
*/
/* variables-color */
:root {
	/* color color palette */
	/* Gray */
	--Gray-100: #f6f3f0;
	--Gray-200: #e4e0de;
	--Gray-300: #cbc8c6;
	--Gray-400: #b2afac;
	--Gray-500: #969391;
	--Gray-600: #716e6b;
	--Gray-700: #605d5b;
	--Gray-800: #4e4b49;
	--Gray-900: #2d2b29;
	--Gray-1000: #171413;
	/* Pink */
	--Pink-100: #fef1f5;
	--Pink-200: #fbd8e2;
	--Pink-300: #f7b5c8;
	--Pink-400: #f189aa;
	--Pink-500: #e9588e;
	--Pink-600: #cb006b;
	--Pink-700: #ac0058;
	--Pink-800: #8b0647;
	--Pink-900: #57002a;
	--Pink-1000: #280010;
	/* Red */
	--Red-100: #fff1f1;
	--Red-200: #ffd8d7;
	--Red-300: #fdb4b4;
	--Red-400: #fb888b;
	--Red-500: #f5505f;
	--Red-600: #d40038;
	--Red-700: #ac1731;
	--Red-800: #920625;
	--Red-900: #5c0415;
	--Red-1000: #2f0107;
	/* Orange */
	--Orange-100: #fef2ed;
	--Orange-200: #ffdacd;
	--Orange-300: #ffb59c;
	--Orange-400: #f88d68;
	--Orange-500: #f25915;
	--Orange-600: #c04101;
	--Orange-700: #934225;
	--Orange-800: #79371f;
	--Orange-900: #4f1f0d;
	--Orange-1000: #260c04;
	/* Lime */
	--Lime-100: #f2f9e2;
	--Lime-200: #dfebbf;
	--Lime-300: #c1d293;
	--Lime-400: #a2bb4b;
	--Lime-500: #869f16;
	--Lime-600: #687c0b;
	--Lime-700: #566606;
	--Lime-800: #465408;
	--Lime-900: #2c3505;
	--Lime-1000: #121700;
	/* Green */
	--Green-100: #ecfaec;
	--Green-200: #cdf0cc;
	--Green-300: #a8daa8;
	--Green-400: #66c56c;
	--Green-500: #28af3d;
	--Green-600: #2b8735;
	--Green-700: #276d2e;
	--Green-800: #1b5a22;
	--Green-900: #0f3a14;
	--Green-1000: #021b04;
	/* Aqua */
	--Aqua-100: #e3fafe;
	--Aqua-200: #b7f0fa;
	--Aqua-300: #7edae9;
	--Aqua-400: #12c0d6;
	--Aqua-500: #1aa4b6;
	--Aqua-600: #2b7e8a;
	--Aqua-700: #176774;
	--Aqua-800: #0f5760;
	--Aqua-900: #05373f;
	--Aqua-1000: #00191d;
	/* Blue */
	--Blue-100: #f2f5fc;
	--Blue-200: #dae3f7;
	--Blue-300: #b0c7f9;
	--Blue-400: #8aaaf6;
	--Blue-500: #648cf4;
	--Blue-600: #3a63e0;
	--Blue-700: #2045da;
	--Blue-800: #142ec5;
	--Blue-900: #08118c;
	--Blue-1000: #020448;
	/* Violet */
	--Violet-100: #f4f5fa;
	--Violet-200: #dfe1f6;
	--Violet-300: #bec2f8;
	--Violet-400: #9fa3f4;
	--Violet-500: #8382f3;
	--Violet-600: #6258dd;
	--Violet-700: #5336d8;
	--Violet-800: #451dc3;
	--Violet-900: #290083;
	--Violet-1000: #104;
	/* Purple */
	--Purple-100: #f9f3f9;
	--Purple-200: #eedced;
	--Purple-300: #e2b7e1;
	--Purple-400: #d392d2;
	--Purple-500: #c46bc4;
	--Purple-600: #a247a2;
	--Purple-700: #950c98;
	--Purple-800: #7d0c7f;
	--Purple-900: #4f0050;
	--Purple-1000: #260027;
	/* Yellow */
	--Yellow-100: #fffaec;
	--Yellow-200: #feeec1;
	--Yellow-300: #fee195;
	--Yellow-400: #f7ce5a;
	--Yellow-500: #f4c200;
	--Yellow-600: #d4a800;
	--Yellow-700: #b18c00;
	--Yellow-800: #896c00;
	--Yellow-900: #5f4a00;
	--Yellow-1000: #1f1600;
}

/*
#styleguide
successMessage

```
<div class="mod-alert alert-success">
<p><i class="icon-check"></i>いいです。</p>
<!-- /.mod-alert --></div>
```
*/
/*
#styleguide
AlertMessage

```
<div class="mod-alert alert-error">
<p><i class="icon-close"></i>だめです。</p>
<!-- /.mod-alert --></div>
```
*/
/*
#styleguide
RedMessage

```
<div class="mod-alert alert-caution">
<p><i class="icon-close"></i>だめです。</p>
<!-- /.mod-alert --></div>
```
*/
/*
#styleguide
NormaltMessage

```
<div class="mod-alert">
<p><i class="icon-close"></i>だめです。</p>
<!-- /.mod-alert --></div>
```
*/
.mod-alert,
#msg-noscript {
	padding: 16px;
	border-width: 1px 1px 1px 8px;
	border-style: solid;
	border-color: #b2afac;
	border-radius: 6px;
	background-color: #fff;
	color: #383737;
	line-height: 1.4;
	vertical-align: bottom;
}

.mod-alert.alert-success,
#msg-noscript.alert-success {
	border-color: #2b8735;
	background-color: #ecfaec;
}

.mod-alert.alert-success i:before,
#msg-noscript.alert-success i:before {
	color: #605d5b;
}

.mod-alert.alert-success .link,
#msg-noscript.alert-success .link {
	color: #2b8735;
	text-decoration: underline;
}

.mod-alert.alert-success .mod-alert-title,
#msg-noscript.alert-success .mod-alert-title {
	color: #2b8735;
}

.mod-alert.alert-error,
#msg-noscript.alert-error {
	border-color: #ac1731;
	background-color: #fff1f1;
}

.mod-alert.alert-error i:before,
#msg-noscript.alert-error i:before {
	color: #605d5b;
}

.mod-alert.alert-error .link,
#msg-noscript.alert-error .link {
	color: #ac1731;
	text-decoration: underline;
}

.mod-alert.alert-error .mod-alert-title,
#msg-noscript.alert-error .mod-alert-title {
	color: #ac1731;
}

.mod-alert.alert-caution,
#msg-noscript.alert-caution {
	border-color: #ac1731;
	background-color: #fff1f1;
}

.mod-alert.alert-caution i:before,
#msg-noscript.alert-caution i:before {
	color: #605d5b;
}

.mod-alert.alert-caution .link,
#msg-noscript.alert-caution .link {
	color: #ac1731;
	text-decoration: underline;
}

.mod-alert.alert-caution .mod-alert-title,
#msg-noscript.alert-caution .mod-alert-title {
	color: #ac1731;
}

.mod-alert.alert-warning,
#msg-noscript.alert-warning {
	border-color: #f4c200;
	background-color: #fffaec;
}

.mod-alert.alert-warning i:before,
#msg-noscript.alert-warning i:before {
	color: #605d5b;
}

.mod-alert.alert-warning .link,
#msg-noscript.alert-warning .link {
	color: #b18c00;
	text-decoration: underline;
}

.mod-alert.alert-warning .mod-alert-title,
#msg-noscript.alert-warning .mod-alert-title {
	color: #b18c00;
}

.mod-alert.alert-ie,
#msg-noscript.alert-ie {
	z-index: 101;
	padding: 15px;
	border-radius: 0;
	box-shadow: none;
	color: white;
	-webkit-animation: animation-noscript 2s infinite ease;
	animation: animation-noscript 2s infinite ease;
}

.mod-alert.alert-ie i:before,
#msg-noscript.alert-ie i:before {
	color: #fff;
}

.mod-alert.alert-ie a,
#msg-noscript.alert-ie a {
	color: #fff;
	text-decoration: underline;
}

.mod-alert i,
#msg-noscript i {
	margin-right: 5px;
}

.mod-alert i:before,
#msg-noscript i:before {
	color: #383737;
}

.mod-alert-info {
	width: 100%;
	margin-bottom: 16px;
	padding: 12px;
	border-radius: 5px;
	background-color: #eff6ff;
	color: #264ca5;
	font-size: 1.2rem;
	line-height: 1.4;
}

.mod-alert-info-close {
	position: relative;
	margin-bottom: 0;
	padding-right: 32px;
}

.mod-alert-info-close .close-button {
	position: absolute;
	top: 12px;
	right: 12px;
	background: none;
}

.mod-alert-info-close .close-button:hover {
	opacity: 0.7;
}

.mod-alert-info-close .icon-close::before {
	color: #2658ce;
}

#msg-noscript {
	position: fixed;
	z-index: 101;
	padding: 15px;
	color: white;
	-webkit-animation: animation-noscript 2s infinite ease;
	animation: animation-noscript 2s infinite ease;
}

@media print, screen and (min-width: 768px) {
	#msg-noscript {
		top: 40px;
		right: 20px;
		left: 20px;
	}
}

@media print, screen and (max-width: 767px) {
	#msg-noscript {
		top: 10px;
		right: 10px;
		left: 10px;
	}
}

@-webkit-keyframes animation-noscript {
	0% {
		background-color: #e70000;
	}

	50% {
		background-color: #ffb4b4;
	}

	100% {
		background-color: #e70000;
	}
}

@keyframes animation-noscript {
	0% {
		background-color: #e70000;
	}

	50% {
		background-color: #ffb4b4;
	}

	100% {
		background-color: #e70000;
	}
}

@media print, screen and (min-width: 768px) {
	.iziToast-layout3 {
		width: 600px;
		margin: 0;
		padding: 25px 30px 30px !important;
	}
}

@media print, screen and (max-width: 767px) {
	.iziToast-layout3 {
		width: auto;
		margin: 0 15px;
		padding: 20px !important;
	}
}

.iziToast-layout3 > .iziToast-body {
	margin: 0;
	padding: 0;
}

.iziToast-layout3 > .iziToast-body .iziToast-texts {
	display: block;
	float: none;
	margin: 0;
	margin-bottom: 15px;
	padding: 0;
}

.iziToast-layout3 > .iziToast-body .iziToast-texts .iziToast-title {
	display: block;
	float: none;
	margin-bottom: 10px;
	font-size: 18px;
	line-height: 20px;
}

.iziToast-layout3 > .iziToast-body .iziToast-texts .iziToast-message {
	display: block;
	float: none;
	font-size: 14px;
	line-height: 1.6;
	text-align: justify;
}

.iziToast-layout3 > .iziToast-body .iziToast-buttons {
	display: block;
	float: none;
	margin: 0;
	text-align: right;
}

.iziToast-layout3 > .iziToast-body .iziToast-buttons > button {
	font-size: 14px;
}

/* variables color */
/*
#colors

@Service #2658CE
@Job #37B500
@Career #FE590F
@tone1 #F4F4F9
@tone2 #EBEBF3
@tone3 #CACAD9
@tone4 #84849A
@tone5 #4A4A4A
*/
/* variables-color */
:root {
	/* color color palette */
	/* Gray */
	--Gray-100: #f6f3f0;
	--Gray-200: #e4e0de;
	--Gray-300: #cbc8c6;
	--Gray-400: #b2afac;
	--Gray-500: #969391;
	--Gray-600: #716e6b;
	--Gray-700: #605d5b;
	--Gray-800: #4e4b49;
	--Gray-900: #2d2b29;
	--Gray-1000: #171413;
	/* Pink */
	--Pink-100: #fef1f5;
	--Pink-200: #fbd8e2;
	--Pink-300: #f7b5c8;
	--Pink-400: #f189aa;
	--Pink-500: #e9588e;
	--Pink-600: #cb006b;
	--Pink-700: #ac0058;
	--Pink-800: #8b0647;
	--Pink-900: #57002a;
	--Pink-1000: #280010;
	/* Red */
	--Red-100: #fff1f1;
	--Red-200: #ffd8d7;
	--Red-300: #fdb4b4;
	--Red-400: #fb888b;
	--Red-500: #f5505f;
	--Red-600: #d40038;
	--Red-700: #ac1731;
	--Red-800: #920625;
	--Red-900: #5c0415;
	--Red-1000: #2f0107;
	/* Orange */
	--Orange-100: #fef2ed;
	--Orange-200: #ffdacd;
	--Orange-300: #ffb59c;
	--Orange-400: #f88d68;
	--Orange-500: #f25915;
	--Orange-600: #c04101;
	--Orange-700: #934225;
	--Orange-800: #79371f;
	--Orange-900: #4f1f0d;
	--Orange-1000: #260c04;
	/* Lime */
	--Lime-100: #f2f9e2;
	--Lime-200: #dfebbf;
	--Lime-300: #c1d293;
	--Lime-400: #a2bb4b;
	--Lime-500: #869f16;
	--Lime-600: #687c0b;
	--Lime-700: #566606;
	--Lime-800: #465408;
	--Lime-900: #2c3505;
	--Lime-1000: #121700;
	/* Green */
	--Green-100: #ecfaec;
	--Green-200: #cdf0cc;
	--Green-300: #a8daa8;
	--Green-400: #66c56c;
	--Green-500: #28af3d;
	--Green-600: #2b8735;
	--Green-700: #276d2e;
	--Green-800: #1b5a22;
	--Green-900: #0f3a14;
	--Green-1000: #021b04;
	/* Aqua */
	--Aqua-100: #e3fafe;
	--Aqua-200: #b7f0fa;
	--Aqua-300: #7edae9;
	--Aqua-400: #12c0d6;
	--Aqua-500: #1aa4b6;
	--Aqua-600: #2b7e8a;
	--Aqua-700: #176774;
	--Aqua-800: #0f5760;
	--Aqua-900: #05373f;
	--Aqua-1000: #00191d;
	/* Blue */
	--Blue-100: #f2f5fc;
	--Blue-200: #dae3f7;
	--Blue-300: #b0c7f9;
	--Blue-400: #8aaaf6;
	--Blue-500: #648cf4;
	--Blue-600: #3a63e0;
	--Blue-700: #2045da;
	--Blue-800: #142ec5;
	--Blue-900: #08118c;
	--Blue-1000: #020448;
	/* Violet */
	--Violet-100: #f4f5fa;
	--Violet-200: #dfe1f6;
	--Violet-300: #bec2f8;
	--Violet-400: #9fa3f4;
	--Violet-500: #8382f3;
	--Violet-600: #6258dd;
	--Violet-700: #5336d8;
	--Violet-800: #451dc3;
	--Violet-900: #290083;
	--Violet-1000: #104;
	/* Purple */
	--Purple-100: #f9f3f9;
	--Purple-200: #eedced;
	--Purple-300: #e2b7e1;
	--Purple-400: #d392d2;
	--Purple-500: #c46bc4;
	--Purple-600: #a247a2;
	--Purple-700: #950c98;
	--Purple-800: #7d0c7f;
	--Purple-900: #4f0050;
	--Purple-1000: #260027;
	/* Yellow */
	--Yellow-100: #fffaec;
	--Yellow-200: #feeec1;
	--Yellow-300: #fee195;
	--Yellow-400: #f7ce5a;
	--Yellow-500: #f4c200;
	--Yellow-600: #d4a800;
	--Yellow-700: #b18c00;
	--Yellow-800: #896c00;
	--Yellow-900: #5f4a00;
	--Yellow-1000: #1f1600;
}

/*
#styleguide
アイコンの使い方

```
<i class="icon-arrow_left icon-blue"></i>
```
*/
/*
#styleguide
アイコン一覧

```
<div class="mod-grid grid-m10">

<div class="grid-column4">
<div class="mod-box">
<div class="box-inner mod-c">
<div class="mb10"><i class="icon-arrow_left icon-blue mod-txt40"></i></div>
<input type="text" class="mod-input size-max"" value="icon-arrow_left">
</div>
<!-- /.mod-box --></div>
<!-- /.grid-column4 --></div>

<div class="grid-column4">
<div class="mod-box">
<div class="box-inner mod-c">
<div class="mb10"><i class="icon-arrow_right icon-blue mod-txt40"></i></div>
<input type="text" class="mod-input size-max"" value="icon-arrow_right">
</div>
<!-- /.mod-box --></div>
<!-- /.grid-column4 --></div>

<div class="grid-column4">
<div class="mod-box">
<div class="box-inner mod-c">
<div class="mb10"><i class="icon-arrow_up icon-blue mod-txt40"></i></div>
<input type="text" class="mod-input size-max"" value="icon-arrow_up">
</div>
<!-- /.mod-box --></div>
<!-- /.grid-column4 --></div>

<div class="grid-column4">
<div class="mod-box">
<div class="box-inner mod-c">
<div class="mb10"><i class="icon-arrow_down icon-blue mod-txt40"></i></div>
<input type="text" class="mod-input size-max"" value="icon-arrow_down">
</div>
<!-- /.mod-box --></div>
<!-- /.grid-column4 --></div>

<div class="grid-column4">
<div class="mod-box">
<div class="box-inner mod-c">
<div class="mb10"><i class="icon-close icon-blue mod-txt40"></i></div>
<input type="text" class="mod-input size-max"" value="icon-close">
</div>
<!-- /.mod-box --></div>
<!-- /.grid-column4 --></div>

<div class="grid-column4">
<div class="mod-box">
<div class="box-inner mod-c">
<div class="mb10"><i class="icon-revision icon-blue mod-txt40"></i></div>
<input type="text" class="mod-input size-max"" value="icon-revision">
</div>
<!-- /.mod-box --></div>
<!-- /.grid-column4 --></div>

<div class="grid-column4">
<div class="mod-box">
<div class="box-inner mod-c">
<div class="mb10"><i class="icon-scout icon-blue mod-txt40"></i></div>
<input type="text" class="mod-input size-max"" value="icon-scout">
</div>
<!-- /.mod-box --></div>
<!-- /.grid-column4 --></div>

<div class="grid-column4">
<div class="mod-box">
<div class="box-inner mod-c">
<div class="mb10"><i class="icon-chat icon-blue mod-txt40"></i></div>
<input type="text" class="mod-input size-max"" value="icon-chat">
</div>
<!-- /.mod-box --></div>
<!-- /.grid-column4 --></div>

<div class="grid-column4">
<div class="mod-box">
<div class="box-inner mod-c">
<div class="mb10"><i class="icon-search icon-blue mod-txt40"></i></div>
<input type="text" class="mod-input size-max"" value="icon-search">
</div>
<!-- /.mod-box --></div>
<!-- /.grid-column4 --></div>

<div class="grid-column4">
<div class="mod-box">
<div class="box-inner mod-c">
<div class="mb10"><i class="icon-point icon-blue mod-txt40"></i></div>
<input type="text" class="mod-input size-max"" value="icon-point">
</div>
<!-- /.mod-box --></div>
<!-- /.grid-column4 --></div>

<div class="grid-column4">
<div class="mod-box">
<div class="box-inner mod-c">
<div class="mb10"><i class="icon-book icon-blue mod-txt40"></i></div>
<input type="text" class="mod-input size-max"" value="icon-book">
</div>
<!-- /.mod-box --></div>
<!-- /.grid-column4 --></div>

<div class="grid-column4">
<div class="mod-box">
<div class="box-inner mod-c">
<div class="mb10"><i class="icon-graf icon-blue mod-txt40"></i></div>
<input type="text" class="mod-input size-max"" value="icon-graf">
</div>
<!-- /.mod-box --></div>
<!-- /.grid-column4 --></div>

<div class="grid-column4">
<div class="mod-box">
<div class="box-inner mod-c">
<div class="mb10"><i class="icon-doc icon-blue mod-txt40"></i></div>
<input type="text" class="mod-input size-max"" value="icon-doc">
</div>
<!-- /.mod-box --></div>
<!-- /.grid-column4 --></div>

<div class="grid-column4">
<div class="mod-box">
<div class="box-inner mod-c">
<div class="mb10"><i class="icon-plus icon-blue mod-txt40"></i></div>
<input type="text" class="mod-input size-max"" value="icon-plus">
</div>
<!-- /.mod-box --></div>
<!-- /.grid-column4 --></div>

<div class="grid-column4">
<div class="mod-box">
<div class="box-inner mod-c">
<div class="mb10"><i class="icon-copy icon-blue mod-txt40"></i></div>
<input type="text" class="mod-input size-max"" value="icon-copy">
</div>
<!-- /.mod-box --></div>
<!-- /.grid-column4 --></div>

<div class="grid-column4">
<div class="mod-box">
<div class="box-inner mod-c">
<div class="mb10"><i class="icon-check icon-blue mod-txt40"></i></div>
<input type="text" class="mod-input size-max"" value="icon-check">
</div>
<!-- /.mod-box --></div>
<!-- /.grid-column4 --></div>

<div class="grid-column4">
<div class="mod-box">
<div class="box-inner mod-c">
<div class="mb10"><i class="icon-quertion icon-blue mod-txt40"></i></div>
<input type="text" class="mod-input size-max"" value="icon-quertion">
</div>
<!-- /.mod-box --></div>
<!-- /.grid-column4 --></div>

<div class="grid-column4">
<div class="mod-box">
<div class="box-inner mod-c">
<div class="mb10"><i class="icon-photo icon-blue mod-txt40"></i></div>
<input type="text" class="mod-input size-max"" value="icon-photo">
</div>
<!-- /.mod-box --></div>
<!-- /.grid-column4 --></div>

<div class="grid-column4">
<div class="mod-box">
<div class="box-inner mod-c">
<div class="mb10"><i class="icon-checked icon-blue mod-txt40"></i></div>
<input type="text" class="mod-input size-max"" value="icon-checked">
</div>
<!-- /.mod-box --></div>
<!-- /.grid-column4 --></div>

<div class="grid-column4">
<div class="mod-box">
<div class="box-inner mod-c">
<div class="mb10"><i class="icon-women icon-blue mod-txt40"></i></div>
<input type="text" class="mod-input size-max"" value="icon-women">
</div>
<!-- /.mod-box --></div>
<!-- /.grid-column4 --></div>

<div class="grid-column4">
<div class="mod-box">
<div class="box-inner mod-c">
<div class="mb10"><i class="icon-pin icon-blue mod-txt40"></i></div>
<input type="text" class="mod-input size-max"" value="icon-pin">
</div>
<!-- /.mod-box --></div>
<!-- /.grid-column4 --></div>

<div class="grid-column4">
<div class="mod-box">
<div class="box-inner mod-c">
<div class="mb10"><i class="icon-paper icon-blue mod-txt40"></i></div>
<input type="text" class="mod-input size-max"" value="icon-paper">
</div>
<!-- /.mod-box --></div>
<!-- /.grid-column4 --></div>

<div class="grid-column4">
<div class="mod-box">
<div class="box-inner mod-c">
<div class="mb10"><i class="icon-news icon-blue mod-txt40"></i></div>
<input type="text" class="mod-input size-max"" value="icon-news">
</div>
<!-- /.mod-box --></div>
<!-- /.grid-column4 --></div>

<div class="grid-column4">
<div class="mod-box">
<div class="box-inner mod-c">
<div class="mb10"><i class="icon-men icon-blue mod-txt40"></i></div>
<input type="text" class="mod-input size-max"" value="icon-men">
</div>
<!-- /.mod-box --></div>
<!-- /.grid-column4 --></div>

<div class="grid-column4">
<div class="mod-box">
<div class="box-inner mod-c">
<div class="mb10"><i class="icon-work icon-blue mod-txt40"></i></div>
<input type="text" class="mod-input size-max"" value="icon-work">
</div>
<!-- /.mod-box --></div>
<!-- /.grid-column4 --></div>

<div class="grid-column4">
<div class="mod-box">
<div class="box-inner mod-c">
<div class="mb10"><i class="icon-event icon-blue mod-txt40"></i></div>
<input type="text" class="mod-input size-max"" value="icon-event">
</div>
<!-- /.mod-box --></div>
<!-- /.grid-column4 --></div>

<div class="grid-column4">
<div class="mod-box">
<div class="box-inner mod-c">
<div class="mb10"><i class="icon-coution icon-blue mod-txt40"></i></div>
<input type="text" class="mod-input size-max"" value="icon-coution">
</div>
<!-- /.mod-box --></div>
<!-- /.grid-column4 --></div>

<div class="grid-column4">
<div class="mod-box">
<div class="box-inner mod-c">
<div class="mb10"><i class="icon-minus icon-blue mod-txt40"></i></div>
<input type="text" class="mod-input size-max"" value="icon-minus">
</div>
<!-- /.mod-box --></div>
<!-- /.grid-column4 --></div>

<div class="grid-column4">
<div class="mod-box">
<div class="box-inner mod-c">
<div class="mb10"><i class="icon-eye icon-blue mod-txt40"></i></div>
<input type="text" class="mod-input size-max"" value="icon-eye">
</div>
<!-- /.mod-box --></div>
<!-- /.grid-column4 --></div>

<div class="grid-column4">
<div class="mod-box">
<div class="box-inner mod-c">
<div class="mb10"><i class="icon-entry icon-blue mod-txt40"></i></div>
<input type="text" class="mod-input size-max"" value="icon-entry">
</div>
<!-- /.mod-box --></div>
<!-- /.grid-column4 --></div>

<div class="grid-column4">
<div class="mod-box">
<div class="box-inner mod-c">
<div class="mb10"><i class="icon-fav icon-blue mod-txt40"></i></div>
<input type="text" class="mod-input size-max"" value="icon-fav">
</div>
<!-- /.mod-box --></div>
<!-- /.grid-column4 --></div>

<div class="grid-column4">
<div class="mod-box">
<div class="box-inner mod-c">
<div class="mb10"><i class="icon-yen icon-blue mod-txt40"></i></div>
<input type="text" class="mod-input size-max"" value="icon-yen">
</div>
<!-- /.mod-box --></div>
<!-- /.grid-column4 --></div>

<div class="grid-column4">
<div class="mod-box">
<div class="box-inner mod-c">
<div class="mb10"><i class="icon-sort icon-blue mod-txt40"></i></div>
<input type="text" class="mod-input size-max"" value="icon-sort">
</div>
<!-- /.mod-box --></div>
<!-- /.grid-column4 --></div>

<div class="grid-column4">
<div class="mod-box">
<div class="box-inner mod-c">
<div class="mb10"><i class="icon-site icon-blue mod-txt40"></i></div>
<input type="text" class="mod-input size-max"" value="icon-site">
</div>
<!-- /.mod-box --></div>
<!-- /.grid-column4 --></div>


<div class="grid-column4">
<div class="mod-box">
<div class="box-inner mod-c">
<div class="mb10"><i class="icon-blank icon-blue mod-txt40"></i></div>
<input type="text" class="mod-input size-max"" value="icon-blank">
</div>
<!-- /.mod-box --></div>
<!-- /.grid-column4 --></div>
<div class="grid-column4">
<div class="mod-box">
<div class="box-inner mod-c">
<div class="mb10"><i class="icon-card icon-blue mod-txt40"></i></div>
<input type="text" class="mod-input size-max"" value="icon-card">
</div>
<!-- /.mod-box --></div>
<!-- /.grid-column4 --></div>

<div class="grid-column4">
<div class="mod-box">
<div class="box-inner mod-c">
<div class="mb10"><i class="icon-reset icon-blue mod-txt40"></i></div>
<input type="text" class="mod-input size-max"" value="icon-reset">
</div>
<!-- /.mod-box --></div>
<!-- /.grid-column4 --></div>

<div class="grid-column4">
<div class="mod-box">
<div class="box-inner mod-c">
<div class="mb10"><i class="icon-human icon-blue mod-txt40"></i></div>
<input type="text" class="mod-input size-max"" value="icon-human">
</div>
<!-- /.mod-box --></div>
<!-- /.grid-column4 --></div>

<div class="grid-column4">
<div class="mod-box">
<div class="box-inner mod-c">
<div class="mb10"><i class="icon-printer icon-blue mod-txt40"></i></div>
<input type="text" class="mod-input size-max"" value="icon-printer">
</div>
<!-- /.mod-box --></div>
<!-- /.grid-column4 --></div>

<div class="grid-column4">
<div class="mod-box">
<div class="box-inner mod-c">
<div class="mb10"><i class="icon-smartphone icon-blue mod-txt40"></i></div>
<input type="text" class="mod-input size-max"" value="icon-smartphone">
</div>
<!-- /.mod-box --></div>
<!-- /.grid-column4 --></div>

<div class="grid-column4">
<div class="mod-box">
<div class="box-inner mod-c">
<div class="mb10"><i class="icon-desktop icon-blue mod-txt40"></i></div>
<input type="text" class="mod-input size-max"" value="icon-desktop">
</div>
<!-- /.mod-box --></div>
<!-- /.grid-column4 --></div>

<div class="grid-column4">
<div class="mod-box">
<div class="box-inner mod-c">
<div class="mb10"><i class="icon-play icon-blue mod-txt40"></i></div>
<input type="text" class="mod-input size-max"" value="icon-play">
</div>
<!-- /.mod-box --></div>
<!-- /.grid-column4 --></div>

<div class="grid-column4">
<div class="mod-box">
<div class="box-inner mod-c">
<div class="mb10"><i class="icon-files icon-blue mod-txt40"></i></div>
<input type="text" class="mod-input size-max"" value="icon-files">
</div>
<!-- /.mod-box --></div>
<!-- /.grid-column4 --></div>

<div class="grid-column4">
<div class="mod-box">
<div class="box-inner mod-c">
<div class="mb10"><i class="icon-file-guppy icon-blue mod-txt40"></i></div>
<input type="text" class="mod-input size-max"" value="icon-file-guppy">
</div>
<!-- /.mod-box --></div>
<!-- /.grid-column4 --></div>

<div class="grid-column4">
<div class="mod-box">
<div class="box-inner mod-c">
<div class="mb10"><i class="icon-file-image icon-blue mod-txt40"></i></div>
<input type="text" class="mod-input size-max"" value="icon-file-image">
</div>
<!-- /.mod-box --></div>
<!-- /.grid-column4 --></div>

<div class="grid-column4">
<div class="mod-box">
<div class="box-inner mod-c">
<div class="mb10"><i class="icon-trash icon-blue mod-txt40"></i></div>
<input type="text" class="mod-input size-max"" value="icon-trash">
</div>
<!-- /.mod-box --></div>
<!-- /.grid-column4 --></div>

<div class="grid-column4">
<div class="mod-box">
<div class="box-inner mod-c">
<div class="mb10"><i class="icon-upload icon-blue mod-txt40"></i></div>
<input type="text" class="mod-input size-max"" value="icon-upload">
</div>
<!-- /.mod-box --></div>
<!-- /.grid-column4 --></div>

<div class="grid-column4">
<div class="mod-box">
<div class="box-inner mod-c">
<div class="mb10"><i class="icon-loop icon-blue mod-txt40"></i></div>
<input type="text" class="mod-input size-max"" value="icon-loop ">
</div>
<!-- /.mod-box --></div>
<!-- /.grid-column4 --></div>

<div class="grid-column4">
<div class="mod-box">
<div class="box-inner mod-c">
<div class="mb10"><i class="icon-fire icon-blue mod-txt40"></i></div>
<input type="text" class="mod-input size-max"" value="icon-fire ">
</div>
<!-- /.mod-box --></div>
<!-- /.grid-column4 --></div>



<!-- /.grid --></div>
```
*/
/*
#styleguide
アイコンカラー

```
<div class="mod-grid grid-m10">

<div class="grid-column4">
<div class="mod-box">
<div class="box-inner mod-c">
<div class="mb10"><i class="icon-checked icon-blue mod-txt40"></i></div>
<input type="text" class="mod-input size-max"" value="icon-blue">
</div>
<!-- /.mod-box --></div>
<!-- /.grid-column4 --></div>

<div class="grid-column4">
<div class="mod-box">
<div class="box-inner mod-c">
<div class="mb10"><i class="icon-checked icon-job mod-txt40"></i></div>
<input type="text" class="mod-input size-max"" value="icon-blue">
</div>
<!-- /.mod-box --></div>
<!-- /.grid-column4 --></div>

<div class="grid-column4">
<div class="mod-box">
<div class="box-inner mod-c">
<div class="mb10"><i class="icon-checked icon-career mod-txt40"></i></div>
<input type="text" class="mod-input size-max"" value="icon-career">
</div>
<!-- /.mod-box --></div>
<!-- /.grid-column4 --></div>

<div class="grid-column4">
<div class="mod-box">
<div class="box-inner mod-c">
<div class="mb10"><i class="icon-checked icon-success mod-txt40"></i></div>
<input type="text" class="mod-input size-max"" value="icon-success">
</div>
<!-- /.mod-box --></div>
<!-- /.grid-column4 --></div>

<div class="grid-column4">
<div class="mod-box">
<div class="box-inner mod-c">
<div class="mb10"><i class="icon-checked icon-red mod-txt40"></i></div>
<input type="text" class="mod-input size-max"" value="icon-red">
</div>
<!-- /.mod-box --></div>
<!-- /.grid-column4 --></div>

<div class="grid-column4">
<div class="mod-box">
<div class="box-inner mod-c">
<div class="mb10"><i class="icon-checked icon-yel mod-txt40"></i></div>
<input type="text" class="mod-input size-max"" value="icon-yel">
</div>
<!-- /.mod-box --></div>
<!-- /.grid-column4 --></div>

<div class="grid-column4">
<div class="mod-box">
<div class="box-inner mod-c">
<div class="mb10"><i class="icon-checked icon-pnk mod-txt40"></i></div>
<input type="text" class="mod-input size-max"" value="icon-pnk">
</div>
<!-- /.mod-box --></div>
<!-- /.grid-column4 --></div>

<div class="grid-column4">
<div class="mod-box">
<div class="box-inner mod-c">
<div class="mb10"><i class="icon-checked icon-tone1 mod-txt40"></i></div>
<input type="text" class="mod-input size-max"" value="icon-tone1">
</div>
<!-- /.mod-box --></div>
<!-- /.grid-column4 --></div>

<div class="grid-column4">
<div class="mod-box">
<div class="box-inner mod-c">
<div class="mb10"><i class="icon-checked icon-tone2 mod-txt40"></i></div>
<input type="text" class="mod-input size-max"" value="icon-tone2">
</div>
<!-- /.mod-box --></div>
<!-- /.grid-column4 --></div>

<div class="grid-column4">
<div class="mod-box">
<div class="box-inner mod-c">
<div class="mb10"><i class="icon-checked icon-tone3 mod-txt40"></i></div>
<input type="text" class="mod-input size-max"" value="icon-tone3">
</div>
<!-- /.mod-box --></div>
<!-- /.grid-column4 --></div>

<div class="grid-column4">
<div class="mod-box">
<div class="box-inner mod-c">
<div class="mb10"><i class="icon-checked icon-tone4 mod-txt40"></i></div>
<input type="text" class="mod-input size-max"" value="icon-tone4">
</div>
<!-- /.mod-box --></div>
<!-- /.grid-column4 --></div>

<div class="grid-column4">
<div class="mod-box">
<div class="box-inner mod-c">
<div class="mb10"><i class="icon-checked icon-tone5 mod-txt40"></i></div>
<input type="text" class="mod-input size-max"" value="icon-tone5">
</div>
<!-- /.mod-box --></div>
<!-- /.grid-column4 --></div>

<!-- /.grid --></div>
```
*/
/*
#styleguide
アイコン大きさ（親要素の設定に依存します）

```
<div class="mod-grid grid-m10">

<div class="grid-column3">
<a href="#" class="mod-link mod-txt14">くわしくはこちら<i class="icon-arrow_right"></i></a>
<!-- /.grid-column4 --></div>

<div class="grid-column3">
<a href="#" class="mod-link mod-txt18">くわしくはこちら<i class="icon-arrow_right"></i></a>
<!-- /.grid-column4 --></div>

<div class="grid-column3">
<a href="#" class="mod-link mod-txt20">くわしくはこちら<i class="icon-arrow_right"></i></a>
<!-- /.grid-column4 --></div>

<div class="grid-column3">
<a href="#" class="mod-link mod-txt40">くわしくはこちら<i class="icon-arrow_right"></i></a>
<!-- /.grid-column4 --></div>


<!-- /.grid --></div>
```
*/
/* variables color */
/*
#colors

@Service #2658CE
@Job #37B500
@Career #FE590F
@tone1 #F4F4F9
@tone2 #EBEBF3
@tone3 #CACAD9
@tone4 #84849A
@tone5 #4A4A4A
*/
/* variables-color */
:root {
	/* color color palette */
	/* Gray */
	--Gray-100: #f6f3f0;
	--Gray-200: #e4e0de;
	--Gray-300: #cbc8c6;
	--Gray-400: #b2afac;
	--Gray-500: #969391;
	--Gray-600: #716e6b;
	--Gray-700: #605d5b;
	--Gray-800: #4e4b49;
	--Gray-900: #2d2b29;
	--Gray-1000: #171413;
	/* Pink */
	--Pink-100: #fef1f5;
	--Pink-200: #fbd8e2;
	--Pink-300: #f7b5c8;
	--Pink-400: #f189aa;
	--Pink-500: #e9588e;
	--Pink-600: #cb006b;
	--Pink-700: #ac0058;
	--Pink-800: #8b0647;
	--Pink-900: #57002a;
	--Pink-1000: #280010;
	/* Red */
	--Red-100: #fff1f1;
	--Red-200: #ffd8d7;
	--Red-300: #fdb4b4;
	--Red-400: #fb888b;
	--Red-500: #f5505f;
	--Red-600: #d40038;
	--Red-700: #ac1731;
	--Red-800: #920625;
	--Red-900: #5c0415;
	--Red-1000: #2f0107;
	/* Orange */
	--Orange-100: #fef2ed;
	--Orange-200: #ffdacd;
	--Orange-300: #ffb59c;
	--Orange-400: #f88d68;
	--Orange-500: #f25915;
	--Orange-600: #c04101;
	--Orange-700: #934225;
	--Orange-800: #79371f;
	--Orange-900: #4f1f0d;
	--Orange-1000: #260c04;
	/* Lime */
	--Lime-100: #f2f9e2;
	--Lime-200: #dfebbf;
	--Lime-300: #c1d293;
	--Lime-400: #a2bb4b;
	--Lime-500: #869f16;
	--Lime-600: #687c0b;
	--Lime-700: #566606;
	--Lime-800: #465408;
	--Lime-900: #2c3505;
	--Lime-1000: #121700;
	/* Green */
	--Green-100: #ecfaec;
	--Green-200: #cdf0cc;
	--Green-300: #a8daa8;
	--Green-400: #66c56c;
	--Green-500: #28af3d;
	--Green-600: #2b8735;
	--Green-700: #276d2e;
	--Green-800: #1b5a22;
	--Green-900: #0f3a14;
	--Green-1000: #021b04;
	/* Aqua */
	--Aqua-100: #e3fafe;
	--Aqua-200: #b7f0fa;
	--Aqua-300: #7edae9;
	--Aqua-400: #12c0d6;
	--Aqua-500: #1aa4b6;
	--Aqua-600: #2b7e8a;
	--Aqua-700: #176774;
	--Aqua-800: #0f5760;
	--Aqua-900: #05373f;
	--Aqua-1000: #00191d;
	/* Blue */
	--Blue-100: #f2f5fc;
	--Blue-200: #dae3f7;
	--Blue-300: #b0c7f9;
	--Blue-400: #8aaaf6;
	--Blue-500: #648cf4;
	--Blue-600: #3a63e0;
	--Blue-700: #2045da;
	--Blue-800: #142ec5;
	--Blue-900: #08118c;
	--Blue-1000: #020448;
	/* Violet */
	--Violet-100: #f4f5fa;
	--Violet-200: #dfe1f6;
	--Violet-300: #bec2f8;
	--Violet-400: #9fa3f4;
	--Violet-500: #8382f3;
	--Violet-600: #6258dd;
	--Violet-700: #5336d8;
	--Violet-800: #451dc3;
	--Violet-900: #290083;
	--Violet-1000: #104;
	/* Purple */
	--Purple-100: #f9f3f9;
	--Purple-200: #eedced;
	--Purple-300: #e2b7e1;
	--Purple-400: #d392d2;
	--Purple-500: #c46bc4;
	--Purple-600: #a247a2;
	--Purple-700: #950c98;
	--Purple-800: #7d0c7f;
	--Purple-900: #4f0050;
	--Purple-1000: #260027;
	/* Yellow */
	--Yellow-100: #fffaec;
	--Yellow-200: #feeec1;
	--Yellow-300: #fee195;
	--Yellow-400: #f7ce5a;
	--Yellow-500: #f4c200;
	--Yellow-600: #d4a800;
	--Yellow-700: #b18c00;
	--Yellow-800: #896c00;
	--Yellow-900: #5f4a00;
	--Yellow-1000: #1f1600;
}

/*
#styleguide
Box Normal
```
<div class="mod-pager">
<ul>
<li class="prev"><a href="#" class="mod-link"><i class="icon-arrow_left">前の10件</i></a></li>
<li class="is-sp-hide is-active">1</li>
<li class="is-sp-hide"><a href="#">2</a></li>
<li class="is-sp-hide"><a href="#">3</a></li>
<li class="is-sp-hide"><a href="#">4</a></li>
<li class="is-sp-hide"><a href="#">5</a></li>
<li class="is-sp-hide"><a href="#">6</a></li>
<li class="is-sp-hide"><a href="#">7</a></li>
<li class="is-sp-hide"><a href="#">8</a></li>
<li class="is-sp-hide"><a href="#">9</a></li>
<li class="is-pc-hide">1/9</li>
<li class="next"><a href="#" class="mod-link">次の10件<i class="icon-arrow_right"></i></a></li>
</ul>
</div><!--.mod-pager-->

```
*/
.mod-pager {
	position: relative;

	text-align: center;
}
@media print, screen and (min-width: 768px) {
	.mod-pager {
		border-top: 1px solid #cacad9;
	}
}
.mod-pager ul {
	display: block;

	padding: 20px;
}
.mod-pager ul li {
	display: inline-block;

	padding: 7px;

	border-radius: 5px;
}
.mod-pager ul li.prev,
.mod-pager ul li.next {
	display: flex;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 10px;

	justify-content: center;
	align-items: center; 

	margin: 0;
	padding: 0;
}
.mod-pager ul li.next {
	right: 10px;
	left: auto;

	padding-left: 0;
}
.mod-pager ul li.is-active {
	background-color: #2658ce;

	color: #fff;
}

.pager-singl {
	display: block;

	padding: 20px;
}
.pager-singl img {
	height: 1.6rem;
}

.pager-singl-loder {
	display: block; 

	padding: 10px;
}
.pager-singl-loder img {
	height: 42px;
}

.single-boder-none {
	border-top: none;
}

.single-boder {
	border-top: 1px solid #cacad9;
}

/* variables color */
/*
#colors

@Service #2658CE
@Job #37B500
@Career #FE590F
@tone1 #F4F4F9
@tone2 #EBEBF3
@tone3 #CACAD9
@tone4 #84849A
@tone5 #4A4A4A
*/
/* variables-color */
:root {
	/* color color palette */
	/* Gray */
	--Gray-100: #f6f3f0;
	--Gray-200: #e4e0de;
	--Gray-300: #cbc8c6;
	--Gray-400: #b2afac;
	--Gray-500: #969391;
	--Gray-600: #716e6b;
	--Gray-700: #605d5b;
	--Gray-800: #4e4b49;
	--Gray-900: #2d2b29;
	--Gray-1000: #171413;
	/* Pink */
	--Pink-100: #fef1f5;
	--Pink-200: #fbd8e2;
	--Pink-300: #f7b5c8;
	--Pink-400: #f189aa;
	--Pink-500: #e9588e;
	--Pink-600: #cb006b;
	--Pink-700: #ac0058;
	--Pink-800: #8b0647;
	--Pink-900: #57002a;
	--Pink-1000: #280010;
	/* Red */
	--Red-100: #fff1f1;
	--Red-200: #ffd8d7;
	--Red-300: #fdb4b4;
	--Red-400: #fb888b;
	--Red-500: #f5505f;
	--Red-600: #d40038;
	--Red-700: #ac1731;
	--Red-800: #920625;
	--Red-900: #5c0415;
	--Red-1000: #2f0107;
	/* Orange */
	--Orange-100: #fef2ed;
	--Orange-200: #ffdacd;
	--Orange-300: #ffb59c;
	--Orange-400: #f88d68;
	--Orange-500: #f25915;
	--Orange-600: #c04101;
	--Orange-700: #934225;
	--Orange-800: #79371f;
	--Orange-900: #4f1f0d;
	--Orange-1000: #260c04;
	/* Lime */
	--Lime-100: #f2f9e2;
	--Lime-200: #dfebbf;
	--Lime-300: #c1d293;
	--Lime-400: #a2bb4b;
	--Lime-500: #869f16;
	--Lime-600: #687c0b;
	--Lime-700: #566606;
	--Lime-800: #465408;
	--Lime-900: #2c3505;
	--Lime-1000: #121700;
	/* Green */
	--Green-100: #ecfaec;
	--Green-200: #cdf0cc;
	--Green-300: #a8daa8;
	--Green-400: #66c56c;
	--Green-500: #28af3d;
	--Green-600: #2b8735;
	--Green-700: #276d2e;
	--Green-800: #1b5a22;
	--Green-900: #0f3a14;
	--Green-1000: #021b04;
	/* Aqua */
	--Aqua-100: #e3fafe;
	--Aqua-200: #b7f0fa;
	--Aqua-300: #7edae9;
	--Aqua-400: #12c0d6;
	--Aqua-500: #1aa4b6;
	--Aqua-600: #2b7e8a;
	--Aqua-700: #176774;
	--Aqua-800: #0f5760;
	--Aqua-900: #05373f;
	--Aqua-1000: #00191d;
	/* Blue */
	--Blue-100: #f2f5fc;
	--Blue-200: #dae3f7;
	--Blue-300: #b0c7f9;
	--Blue-400: #8aaaf6;
	--Blue-500: #648cf4;
	--Blue-600: #3a63e0;
	--Blue-700: #2045da;
	--Blue-800: #142ec5;
	--Blue-900: #08118c;
	--Blue-1000: #020448;
	/* Violet */
	--Violet-100: #f4f5fa;
	--Violet-200: #dfe1f6;
	--Violet-300: #bec2f8;
	--Violet-400: #9fa3f4;
	--Violet-500: #8382f3;
	--Violet-600: #6258dd;
	--Violet-700: #5336d8;
	--Violet-800: #451dc3;
	--Violet-900: #290083;
	--Violet-1000: #104;
	/* Purple */
	--Purple-100: #f9f3f9;
	--Purple-200: #eedced;
	--Purple-300: #e2b7e1;
	--Purple-400: #d392d2;
	--Purple-500: #c46bc4;
	--Purple-600: #a247a2;
	--Purple-700: #950c98;
	--Purple-800: #7d0c7f;
	--Purple-900: #4f0050;
	--Purple-1000: #260027;
	/* Yellow */
	--Yellow-100: #fffaec;
	--Yellow-200: #feeec1;
	--Yellow-300: #fee195;
	--Yellow-400: #f7ce5a;
	--Yellow-500: #f4c200;
	--Yellow-600: #d4a800;
	--Yellow-700: #b18c00;
	--Yellow-800: #896c00;
	--Yellow-900: #5f4a00;
	--Yellow-1000: #1f1600;
}

/*
#styleguide
Step

```
<ol class="mod-stepbar">
<li class="visited"><span>1</span><br>入力</li>
<li class="staying"><span>2</span><br>確認</li>
<li><span>3</span><br>完了</li>
</ol>
```
*/
.mod-stepbar {
	display: flex;
	position: relative;

	margin: 0 auto 20px;

	text-align: center;
}
@media print, screen and (max-width: 767px) {
	.mod-stepbar {
		margin: 20px auto 0;
	}
	.mod-stepbar.sp-not-stepbar {
		display: none;
	}
	.mod-stepbar.stepbar-sp-vertical {
		flex-direction: column;
	}
	.mod-stepbar.stepbar-sp-vertical li {
		width: 100%; 
		margin-bottom: 30px;

		text-align: left;
	}
	.mod-stepbar.stepbar-sp-vertical li span {
		display: inline-block;

		margin-right: 10px; 

		text-align: center;
	}
	.mod-stepbar.stepbar-sp-vertical li br {
		display: none;
	}
	.mod-stepbar.stepbar-sp-vertical li:after {
		content: '';

		display: block;
		position: absolute;
		top: -35px;
		left: 11px;

		width: 2px;
		height: 35px;

		background: #cacad9;
	}
}
.mod-stepbar li {
	position: relative;
	list-style: none;

	width: 33.333%; 

	font-size: 1.4rem;
}
.mod-stepbar li:after {
	content: '';

	display: block;
	position: absolute;
	top: 10px;
	left: calc(-50% + 12px);

	width: calc(100% - 24px);
	height: 2px;

	background: #cacad9;
}
.mod-stepbar li:first-child:after {
	display: none;
}
.mod-stepbar li span {
	display: inline-block;

	width: 24px;
	height: 24px;
	margin-bottom: 5px;

	border-radius: 50%; 
	background: #cacad9;

	color: #fff;
	line-height: 24px;
}
.mod-stepbar.step-two li {
	width: 50%;
}

.mod-stepbar .stepped {
	color: rgba(38, 88, 206, 0.5);
}
.mod-stepbar .stepped span {
	color: #fafafa;
}

.mod-stepbar .stepped:after {
	background: rgba(38, 88, 206, 0.5);
}

.mod-stepbar .stepped span {
	background: rgba(38, 88, 206, 0.5);
}

.mod-stepbar .visited {
	color: #2658ce;
}
.mod-stepbar .visited span {
	color: #fafafa;
}

.mod-stepbar .visited:after {
	background: rgba(38, 88, 206, 0.5);
}

.mod-stepbar .visited span {
	background: #2658ce;
}

/* variables color */
/*
#colors

@Service #2658CE
@Job #37B500
@Career #FE590F
@tone1 #F4F4F9
@tone2 #EBEBF3
@tone3 #CACAD9
@tone4 #84849A
@tone5 #4A4A4A
*/
/* variables-color */
:root {
	/* color color palette */
	/* Gray */
	--Gray-100: #f6f3f0;
	--Gray-200: #e4e0de;
	--Gray-300: #cbc8c6;
	--Gray-400: #b2afac;
	--Gray-500: #969391;
	--Gray-600: #716e6b;
	--Gray-700: #605d5b;
	--Gray-800: #4e4b49;
	--Gray-900: #2d2b29;
	--Gray-1000: #171413;
	/* Pink */
	--Pink-100: #fef1f5;
	--Pink-200: #fbd8e2;
	--Pink-300: #f7b5c8;
	--Pink-400: #f189aa;
	--Pink-500: #e9588e;
	--Pink-600: #cb006b;
	--Pink-700: #ac0058;
	--Pink-800: #8b0647;
	--Pink-900: #57002a;
	--Pink-1000: #280010;
	/* Red */
	--Red-100: #fff1f1;
	--Red-200: #ffd8d7;
	--Red-300: #fdb4b4;
	--Red-400: #fb888b;
	--Red-500: #f5505f;
	--Red-600: #d40038;
	--Red-700: #ac1731;
	--Red-800: #920625;
	--Red-900: #5c0415;
	--Red-1000: #2f0107;
	/* Orange */
	--Orange-100: #fef2ed;
	--Orange-200: #ffdacd;
	--Orange-300: #ffb59c;
	--Orange-400: #f88d68;
	--Orange-500: #f25915;
	--Orange-600: #c04101;
	--Orange-700: #934225;
	--Orange-800: #79371f;
	--Orange-900: #4f1f0d;
	--Orange-1000: #260c04;
	/* Lime */
	--Lime-100: #f2f9e2;
	--Lime-200: #dfebbf;
	--Lime-300: #c1d293;
	--Lime-400: #a2bb4b;
	--Lime-500: #869f16;
	--Lime-600: #687c0b;
	--Lime-700: #566606;
	--Lime-800: #465408;
	--Lime-900: #2c3505;
	--Lime-1000: #121700;
	/* Green */
	--Green-100: #ecfaec;
	--Green-200: #cdf0cc;
	--Green-300: #a8daa8;
	--Green-400: #66c56c;
	--Green-500: #28af3d;
	--Green-600: #2b8735;
	--Green-700: #276d2e;
	--Green-800: #1b5a22;
	--Green-900: #0f3a14;
	--Green-1000: #021b04;
	/* Aqua */
	--Aqua-100: #e3fafe;
	--Aqua-200: #b7f0fa;
	--Aqua-300: #7edae9;
	--Aqua-400: #12c0d6;
	--Aqua-500: #1aa4b6;
	--Aqua-600: #2b7e8a;
	--Aqua-700: #176774;
	--Aqua-800: #0f5760;
	--Aqua-900: #05373f;
	--Aqua-1000: #00191d;
	/* Blue */
	--Blue-100: #f2f5fc;
	--Blue-200: #dae3f7;
	--Blue-300: #b0c7f9;
	--Blue-400: #8aaaf6;
	--Blue-500: #648cf4;
	--Blue-600: #3a63e0;
	--Blue-700: #2045da;
	--Blue-800: #142ec5;
	--Blue-900: #08118c;
	--Blue-1000: #020448;
	/* Violet */
	--Violet-100: #f4f5fa;
	--Violet-200: #dfe1f6;
	--Violet-300: #bec2f8;
	--Violet-400: #9fa3f4;
	--Violet-500: #8382f3;
	--Violet-600: #6258dd;
	--Violet-700: #5336d8;
	--Violet-800: #451dc3;
	--Violet-900: #290083;
	--Violet-1000: #104;
	/* Purple */
	--Purple-100: #f9f3f9;
	--Purple-200: #eedced;
	--Purple-300: #e2b7e1;
	--Purple-400: #d392d2;
	--Purple-500: #c46bc4;
	--Purple-600: #a247a2;
	--Purple-700: #950c98;
	--Purple-800: #7d0c7f;
	--Purple-900: #4f0050;
	--Purple-1000: #260027;
	/* Yellow */
	--Yellow-100: #fffaec;
	--Yellow-200: #feeec1;
	--Yellow-300: #fee195;
	--Yellow-400: #f7ce5a;
	--Yellow-500: #f4c200;
	--Yellow-600: #d4a800;
	--Yellow-700: #b18c00;
	--Yellow-800: #896c00;
	--Yellow-900: #5f4a00;
	--Yellow-1000: #1f1600;
}

/*
#styleguide
サムネイルを一定の領域で表示したいとき。
```

```
*/
.mod-thumbs-bg {
	display: block;

	padding-top: 56.25%; 

	background: no-repeat #f4f4f9 center;
	background-size: contain;
}

.mod-img img {
	width: 100%;
	height: auto;
}

.mod-img-max-width img {
	max-width: 100%;
	height: auto;
}

@media print, screen and (min-width: 768px) {
	.mod-upload-ttl {
		margin-bottom: 20px;

		font-size: 1.6rem; 
		font-weight: bold;
	}
	.mod-upload {
		position: relative;
		overflow: hidden;

		border-radius: 5px;
		background: #ebebf3;

		color: #383737;
	}
	.mod-upload.yet {
		cursor: pointer; 

		display: flex;

		justify-content: center;
		align-items: center;

		height: 100px;
	}
	.mod-upload.yet p {
		display: inline-block;
		position: relative; 

		padding-left: 6em;
	}
	.mod-upload.yet p i {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;

		height: 1em;
		margin: auto; 

		font-size: 6rem;
	}
	.mod-upload.yet p i:before {
		color: #cacad9;
	}
	.mod-upload.yet:hover {
		background: #cacad9;
	}
	.mod-upload.yet:hover i:before {
		color: #84849a;
	}
	.mod-upload.yet input[type=file] {
		cursor: pointer;

		position: absolute;
		top: 0;
		left: 0;

		width: 100%;
		height: 100%;

		opacity: 0;
	}
	.mod-upload.yet.alert {
		border-color: #c00 !important;
		background-color: rgba(255, 50, 50, 0.2) !important;

		-webkit-animation: animation-error 1s infinite ease;
		animation: animation-error 1s infinite ease;
	}
	.mod-upload.yet.logo {
		display: flex;

		justify-content: center;
		align-items: center;

		height: 100px;
	}
	.mod-upload.yet.logo img {
		height: 80px;
	}
	.mod-upload.select {
		text-align: center;
	}
	.mod-upload.select img {
		height: 100%;
	}
	.mod-upload.select .cancel {
		display: flex;
		position: absolute;
		top: 20px;
		right: 20px;

		justify-content: center;
		align-items: center;

		width: 40px;
		height: 40px;

		border-radius: 50%; 
		background-color: rgba(255, 255, 255, 0.7);

		font-size: 2rem;
	}
	.mod-upload.select .cancel i:before {
		color: #383737;
	}
	.mod-upload.select.logo {
		display: flex;

		justify-content: center;
		align-items: center;

		height: 100px;
	}
	.mod-upload.select.logo img {
		height: auto; 
		max-height: 80px;
	}
	.alert-txt {
		display: block;

		margin-bottom: 5px;

		color: #b40000;
	}
	.mod-upload-btn {
		padding-top: 15px;

		text-align: center;
	}
	.mod-upload-btn small {
		display: block;

		margin-top: 25px;
	}
	.mod-upload-select-logo {
		display: flex; 

		margin-top: 20px;
	}
	.mod-upload-select-logo .head {
		margin-right: 15px;

		white-space: nowrap;
	}
	.mod-upload-select-logo .head h3 {
		margin-bottom: 5px; 

		font-size: 1.6rem;
		font-weight: bold;
	}
	.mod-upload-select-logo .body {
		flex-grow: 1;
	}
	.mod-media-list {
		display: flex;

		flex-direction: row;
		flex-wrap: wrap;

		box-sizing: border-box;
		margin: 0 -7px;
	}
	.mod-media-list .media-box {
		flex-basis: calc(20% - 14px);

		max-width: calc(20% - 14px); 
		margin: 0 7px 30px;
	}
	.mod-media-list .media-box .media-thumbs {
		display: block;

		padding-top: 56.25%;

		background: #f4f4f9 no-repeat center;
		background-size: contain;
	}
	.mod-media-list .media-box .mod-button {
		margin-top: 10px;
	}
	.mod-media-list .media-box small {
		display: block;

		margin-top: 5px;

		color: #84849a; 
		text-align: right;
	}
	.mod-logolist .logo-img img {
		width: 100px;
	}
	.mod-delete-image .info {
		margin-top: 20px;

		font-size: 2rem; 
		text-align: center;
	}
	.mod-delete-image .coution {
		margin-bottom: 20px;

		font-size: 2rem;
		text-align: center;
	}
	.mod-media-uselist {
		border-top: 1px solid #cacad9;
		border-bottom: 1px solid #cacad9;
	}
}

@media print, screen and (max-width: 767px) {
	.mod-upload-ttl {
		margin-bottom: 15px;

		font-weight: bold;
	}
	.mod-upload {
		position: relative;
		overflow: hidden;

		border-radius: 5px;
		background: #ebebf3;

		color: #383737;
	}
	.mod-upload.yet {
		cursor: pointer; 

		display: flex;

		justify-content: center;
		align-items: center;

		height: 100px;
	}
	.mod-upload.yet p {
		display: inline-block;
		position: relative; 

		padding-left: 6em;
	}
	.mod-upload.yet p i {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;

		height: 1em;
		margin: auto; 

		font-size: 6rem;
	}
	.mod-upload.yet p i:before {
		color: #cacad9;
	}
	.mod-upload.yet:hover {
		background: #cacad9;
	}
	.mod-upload.yet:hover i:before {
		color: #84849a;
	}
	.mod-upload.yet input[type=file] {
		cursor: pointer;

		position: absolute;
		top: 0;
		left: 0;

		width: 100%;
		height: 100%;

		opacity: 0;
	}
	.mod-upload.select {
		text-align: center;
	}
	.mod-upload.select img {
		width: 100%;
	}
	.mod-upload.select .cancel {
		display: flex;
		position: absolute;
		top: 10px;
		right: 10px;

		justify-content: center;
		align-items: center;

		width: 30px;
		height: 30px;

		border-radius: 50%; 
		background-color: rgba(255, 255, 255, 0.7);

		font-size: 1.5rem;
	}
	.mod-upload.select .cancel i:before {
		color: #383737;
	}
	.mod-upload.select.logo {
		display: flex;

		justify-content: center;
		align-items: center;

		height: 100px;
	}
	.mod-upload.select.logo img {
		width: auto; 
		height: auto;
		max-height: 80%;
	}
	.alert-txt {
		display: block;

		margin-bottom: 5px;

		color: #b40000;
	}
	.mod-upload-btn {
		padding-top: 15px;

		text-align: center;
	}
	.mod-upload-btn small {
		display: block;

		margin-top: 25px;
	}
	.mod-upload-select-logo {
		margin-top: 20px;
	}
	.mod-upload-select-logo .head {
		margin-bottom: 10px;

		white-space: nowrap;
	}
	.mod-upload-select-logo .head h3 {
		margin-bottom: 5px; 

		font-size: 1.6rem;
		font-weight: bold;
	}
	.mod-upload-select-logo .body {
		flex-grow: 1;
	}
	.mod-media-list {
		display: flex;

		flex-direction: row;
		flex-wrap: wrap;

		box-sizing: border-box;
		margin: 0 -7px;
	}
	.mod-media-list .media-box {
		flex-basis: calc(50% - 14px);

		max-width: calc(50% - 14px); 
		margin: 0 7px 30px;
	}
	.mod-media-list .media-box .media-thumbs {
		display: block;

		padding-top: 56.25%;

		background: #f4f4f9 no-repeat center;
		background-size: contain;
	}
	.mod-media-list .media-box .mod-button {
		margin-top: 10px;
	}
	.mod-media-list .media-box small {
		display: block;

		margin-top: 5px;

		color: #84849a; 
		text-align: right;
	}
	.mod-delete-image .info {
		margin-top: 20px;

		font-size: 1.6rem; 
		text-align: center;
	}
	.mod-delete-image .coution {
		margin-bottom: 20px;

		font-size: 1.6rem;
		text-align: center;
	}
	.mod-media-uselist {
		border-top: 1px solid #cacad9;
	}
}

/* variables color */
/*
#colors

@Service #2658CE
@Job #37B500
@Career #FE590F
@tone1 #F4F4F9
@tone2 #EBEBF3
@tone3 #CACAD9
@tone4 #84849A
@tone5 #4A4A4A
*/
/* variables-color */
:root {
	/* color color palette */
	/* Gray */
	--Gray-100: #f6f3f0;
	--Gray-200: #e4e0de;
	--Gray-300: #cbc8c6;
	--Gray-400: #b2afac;
	--Gray-500: #969391;
	--Gray-600: #716e6b;
	--Gray-700: #605d5b;
	--Gray-800: #4e4b49;
	--Gray-900: #2d2b29;
	--Gray-1000: #171413;
	/* Pink */
	--Pink-100: #fef1f5;
	--Pink-200: #fbd8e2;
	--Pink-300: #f7b5c8;
	--Pink-400: #f189aa;
	--Pink-500: #e9588e;
	--Pink-600: #cb006b;
	--Pink-700: #ac0058;
	--Pink-800: #8b0647;
	--Pink-900: #57002a;
	--Pink-1000: #280010;
	/* Red */
	--Red-100: #fff1f1;
	--Red-200: #ffd8d7;
	--Red-300: #fdb4b4;
	--Red-400: #fb888b;
	--Red-500: #f5505f;
	--Red-600: #d40038;
	--Red-700: #ac1731;
	--Red-800: #920625;
	--Red-900: #5c0415;
	--Red-1000: #2f0107;
	/* Orange */
	--Orange-100: #fef2ed;
	--Orange-200: #ffdacd;
	--Orange-300: #ffb59c;
	--Orange-400: #f88d68;
	--Orange-500: #f25915;
	--Orange-600: #c04101;
	--Orange-700: #934225;
	--Orange-800: #79371f;
	--Orange-900: #4f1f0d;
	--Orange-1000: #260c04;
	/* Lime */
	--Lime-100: #f2f9e2;
	--Lime-200: #dfebbf;
	--Lime-300: #c1d293;
	--Lime-400: #a2bb4b;
	--Lime-500: #869f16;
	--Lime-600: #687c0b;
	--Lime-700: #566606;
	--Lime-800: #465408;
	--Lime-900: #2c3505;
	--Lime-1000: #121700;
	/* Green */
	--Green-100: #ecfaec;
	--Green-200: #cdf0cc;
	--Green-300: #a8daa8;
	--Green-400: #66c56c;
	--Green-500: #28af3d;
	--Green-600: #2b8735;
	--Green-700: #276d2e;
	--Green-800: #1b5a22;
	--Green-900: #0f3a14;
	--Green-1000: #021b04;
	/* Aqua */
	--Aqua-100: #e3fafe;
	--Aqua-200: #b7f0fa;
	--Aqua-300: #7edae9;
	--Aqua-400: #12c0d6;
	--Aqua-500: #1aa4b6;
	--Aqua-600: #2b7e8a;
	--Aqua-700: #176774;
	--Aqua-800: #0f5760;
	--Aqua-900: #05373f;
	--Aqua-1000: #00191d;
	/* Blue */
	--Blue-100: #f2f5fc;
	--Blue-200: #dae3f7;
	--Blue-300: #b0c7f9;
	--Blue-400: #8aaaf6;
	--Blue-500: #648cf4;
	--Blue-600: #3a63e0;
	--Blue-700: #2045da;
	--Blue-800: #142ec5;
	--Blue-900: #08118c;
	--Blue-1000: #020448;
	/* Violet */
	--Violet-100: #f4f5fa;
	--Violet-200: #dfe1f6;
	--Violet-300: #bec2f8;
	--Violet-400: #9fa3f4;
	--Violet-500: #8382f3;
	--Violet-600: #6258dd;
	--Violet-700: #5336d8;
	--Violet-800: #451dc3;
	--Violet-900: #290083;
	--Violet-1000: #104;
	/* Purple */
	--Purple-100: #f9f3f9;
	--Purple-200: #eedced;
	--Purple-300: #e2b7e1;
	--Purple-400: #d392d2;
	--Purple-500: #c46bc4;
	--Purple-600: #a247a2;
	--Purple-700: #950c98;
	--Purple-800: #7d0c7f;
	--Purple-900: #4f0050;
	--Purple-1000: #260027;
	/* Yellow */
	--Yellow-100: #fffaec;
	--Yellow-200: #feeec1;
	--Yellow-300: #fee195;
	--Yellow-400: #f7ce5a;
	--Yellow-500: #f4c200;
	--Yellow-600: #d4a800;
	--Yellow-700: #b18c00;
	--Yellow-800: #896c00;
	--Yellow-900: #5f4a00;
	--Yellow-1000: #1f1600;
}

/*
#styleguide
Box Normal
```
<span class="mod-badge">5</span>
```
*/
.mod-badge {
	display: inline-block;

	min-width: 1.6em;
	height: 1.6em;
	margin-left: 5px; 
	padding: 0.3em 0.4em;

	border-radius: 0.8em;
	background: #b40000;

	color: #fff;
	font-weight: normal;
	line-height: 1;
	vertical-align: top;
}
.mod-badge.badge-14 {
	font-size: 1.4rem;
}
@media print, screen and (max-width: 767px) {
	.mod-badge.badge-14 {
		font-size: 1.2rem;
		font-weight: bold;
	}
}
.mod-badge.badge-12 {
	font-size: 1.2rem;
}
.mod-badge.center-align {
	position: relative;
	top: 0.2em;
	left: -0.2em;
}

@-webkit-keyframes animation-popup {
	0% {
		top: 0; 

		opacity: 0;
	}
	8% {
		top: -32px; 

		opacity: 1;
	}
	100% {
		visibility: visible; 

		opacity: 1;
	}
}

@keyframes animation-popup {
	0% {
		top: 0; 

		opacity: 0;
	}
	8% {
		top: -32px; 

		opacity: 1;
	}
	100% {
		visibility: visible; 

		opacity: 1;
	}
}

@-webkit-keyframes animation-popup-sp {
	0% {
		top: 0; 

		opacity: 0;
	}
	8% {
		top: -45px; 

		opacity: 1;
	}
	100% {
		visibility: visible; 

		opacity: 1;
	}
}

@keyframes animation-popup-sp {
	0% {
		top: 0; 

		opacity: 0;
	}
	8% {
		top: -45px; 

		opacity: 1;
	}
	100% {
		visibility: visible; 

		opacity: 1;
	}
}

@-webkit-keyframes animation-popup-fadeout {
	0% {
		top: 0; 

		opacity: 0;
	}
	8% {
		top: -32px; 

		opacity: 1;
	}
	95% {
		opacity: 1;
	}
	100% {
		visibility: hidden; 

		opacity: 0;
	}
}

@keyframes animation-popup-fadeout {
	0% {
		top: 0; 

		opacity: 0;
	}
	8% {
		top: -32px; 

		opacity: 1;
	}
	95% {
		opacity: 1;
	}
	100% {
		visibility: hidden; 

		opacity: 0;
	}
}

@-webkit-keyframes animation-popup-fadeleft {
	0% {
		top: -32px;
		left: 30px; 

		opacity: 0;
	}
	8% {
		left: 0; 

		opacity: 1;
	}
	95% {
		opacity: 1;
	}
	100% {
		visibility: hidden; 

		opacity: 0;
	}
}

@keyframes animation-popup-fadeleft {
	0% {
		top: -32px;
		left: 30px; 

		opacity: 0;
	}
	8% {
		left: 0; 

		opacity: 1;
	}
	95% {
		opacity: 1;
	}
	100% {
		visibility: hidden; 

		opacity: 0;
	}
}

/* variables color */
/*
#colors

@Service #2658CE
@Job #37B500
@Career #FE590F
@tone1 #F4F4F9
@tone2 #EBEBF3
@tone3 #CACAD9
@tone4 #84849A
@tone5 #4A4A4A
*/
/* variables-color */
:root {
	/* color color palette */
	/* Gray */
	--Gray-100: #f6f3f0;
	--Gray-200: #e4e0de;
	--Gray-300: #cbc8c6;
	--Gray-400: #b2afac;
	--Gray-500: #969391;
	--Gray-600: #716e6b;
	--Gray-700: #605d5b;
	--Gray-800: #4e4b49;
	--Gray-900: #2d2b29;
	--Gray-1000: #171413;
	/* Pink */
	--Pink-100: #fef1f5;
	--Pink-200: #fbd8e2;
	--Pink-300: #f7b5c8;
	--Pink-400: #f189aa;
	--Pink-500: #e9588e;
	--Pink-600: #cb006b;
	--Pink-700: #ac0058;
	--Pink-800: #8b0647;
	--Pink-900: #57002a;
	--Pink-1000: #280010;
	/* Red */
	--Red-100: #fff1f1;
	--Red-200: #ffd8d7;
	--Red-300: #fdb4b4;
	--Red-400: #fb888b;
	--Red-500: #f5505f;
	--Red-600: #d40038;
	--Red-700: #ac1731;
	--Red-800: #920625;
	--Red-900: #5c0415;
	--Red-1000: #2f0107;
	/* Orange */
	--Orange-100: #fef2ed;
	--Orange-200: #ffdacd;
	--Orange-300: #ffb59c;
	--Orange-400: #f88d68;
	--Orange-500: #f25915;
	--Orange-600: #c04101;
	--Orange-700: #934225;
	--Orange-800: #79371f;
	--Orange-900: #4f1f0d;
	--Orange-1000: #260c04;
	/* Lime */
	--Lime-100: #f2f9e2;
	--Lime-200: #dfebbf;
	--Lime-300: #c1d293;
	--Lime-400: #a2bb4b;
	--Lime-500: #869f16;
	--Lime-600: #687c0b;
	--Lime-700: #566606;
	--Lime-800: #465408;
	--Lime-900: #2c3505;
	--Lime-1000: #121700;
	/* Green */
	--Green-100: #ecfaec;
	--Green-200: #cdf0cc;
	--Green-300: #a8daa8;
	--Green-400: #66c56c;
	--Green-500: #28af3d;
	--Green-600: #2b8735;
	--Green-700: #276d2e;
	--Green-800: #1b5a22;
	--Green-900: #0f3a14;
	--Green-1000: #021b04;
	/* Aqua */
	--Aqua-100: #e3fafe;
	--Aqua-200: #b7f0fa;
	--Aqua-300: #7edae9;
	--Aqua-400: #12c0d6;
	--Aqua-500: #1aa4b6;
	--Aqua-600: #2b7e8a;
	--Aqua-700: #176774;
	--Aqua-800: #0f5760;
	--Aqua-900: #05373f;
	--Aqua-1000: #00191d;
	/* Blue */
	--Blue-100: #f2f5fc;
	--Blue-200: #dae3f7;
	--Blue-300: #b0c7f9;
	--Blue-400: #8aaaf6;
	--Blue-500: #648cf4;
	--Blue-600: #3a63e0;
	--Blue-700: #2045da;
	--Blue-800: #142ec5;
	--Blue-900: #08118c;
	--Blue-1000: #020448;
	/* Violet */
	--Violet-100: #f4f5fa;
	--Violet-200: #dfe1f6;
	--Violet-300: #bec2f8;
	--Violet-400: #9fa3f4;
	--Violet-500: #8382f3;
	--Violet-600: #6258dd;
	--Violet-700: #5336d8;
	--Violet-800: #451dc3;
	--Violet-900: #290083;
	--Violet-1000: #104;
	/* Purple */
	--Purple-100: #f9f3f9;
	--Purple-200: #eedced;
	--Purple-300: #e2b7e1;
	--Purple-400: #d392d2;
	--Purple-500: #c46bc4;
	--Purple-600: #a247a2;
	--Purple-700: #950c98;
	--Purple-800: #7d0c7f;
	--Purple-900: #4f0050;
	--Purple-1000: #260027;
	/* Yellow */
	--Yellow-100: #fffaec;
	--Yellow-200: #feeec1;
	--Yellow-300: #fee195;
	--Yellow-400: #f7ce5a;
	--Yellow-500: #f4c200;
	--Yellow-600: #d4a800;
	--Yellow-700: #b18c00;
	--Yellow-800: #896c00;
	--Yellow-900: #5f4a00;
	--Yellow-1000: #1f1600;
}

@media print, screen and (max-width: 767px) {
	.slick-slider .slick-list .slick-track .slick-slide a {
		margin-bottom: 0;
	}
	.slick-slider .slick-list .slick-track .slick-slide img {
		display: block;

		width: 100%;
		max-width: inherit;
		height: auto;
		margin: 0 auto;
	}
	.slick-slider .slick-dots {
		bottom: -30px;
	}
	.slick-slider .slick-dots li {
		margin: 0 5%;
	}
	.slick-slider .slick-dots li button {
		text-indent: -9999px;
	}
	.slick-slider .slick-dots li button:before {
		content: '';

		top: calc( 50% - 8px);
		left: calc( 50% - 8px);

		width: 16px;
		height: 16px;

		border-radius: 8px;
		background: #cacad9;
		opacity: 1;
	}
	.slick-slider .slick-dots li.slick-active button:before {
		background: #84849a;
	}
	.slick-slider.slick-dotted {
		margin-bottom: 40px;
	}
}

@media print, screen and (min-width: 768px) {
	.slick-slider .slick-list .slick-track .slick-slide a {
		margin-bottom: 0;
	}
	.slick-slider .slick-list .slick-track .slick-slide img {
		display: block;

		width: 100%;
		height: auto;
		margin: 0 auto;
	}
	.slick-slider .slick-dots li button {
		text-indent: -9999px;
	}
	.slick-slider .slick-dots li button:before {
		content: '';

		top: calc( 50% - 6px);
		left: calc( 50% - 6px);

		width: 12px;
		height: 12px;

		border-radius: 6px;
		background: #cacad9;
		opacity: 1;
	}
	.slick-slider .slick-dots li.slick-active button:before {
		background: #84849a;
	}
	.slick-slider.slick-dotted {
		margin-bottom: 40px;
	}
	.l-main-inner .slick-slider.slick-dotted {
		margin-bottom: 40px;
	}
}

/*
#styleguide
スペシャルスカウトのためのスタイル
中途求人と管理画面に同じものがある
www_sp_app/frontend_src/sass/_module/_specialscout.scss
service_sp_app/frontend_src/sass/_module/_specialscout.scss
```
<aside class="l-s-scout mod-mt-xxs mod-mb-xs">
    <p class="l-s-scout-title mod-bold">スペシャルスカウト<a href="" class="link mod-ml-xxs icon-question-circle" data-iziModal-open=".iziModal-ss-about"></a></p>
    <!-- /.l-s-scout-title -->
    <div class="l-s-scout-inner">
        <p class="font-s mod-bold l-s-scout-lead">あなただけに特別な条件でのご案内です。</p>
        <ul class="l-s-scout-list">
            <li class="l-s-scout-box l-ss">
                <p class="font-xs mod-bold l-ss-left">年収</p>
                <div class="l-ss-right">
                    <div class="l-ss-inner">
                        <div class="l-ss-block">
                            <span class="font-xs"><span class="font-base mod-bold">510</span>万円</span>
                            <span class="l-ss-label">10万円UP</span>
                            <span class="font-xs mod-bold">〜</span>
                        </div>
                        <div class="l-ss-block">
                            <span class="font-xs"><span class="font-base mod-bold">750</span>万円</span>
                            <span class="l-ss-label">50万円UP</span>
                        </div>
                    </div>
                    <p class="font-xs horizon-line">500万円～700万円</p>
                </div>
            </li>
            <!-- /.l-s-scout-box -->
            <li class="l-s-scout-box l-ss">
                <p class="font-xs mod-bold l-ss-left">月給</p>
                <div class="l-ss-right">
                    <div class="l-ss-inner">
                        <div class="l-ss-block">
                            <span class="font-xs"><span class="font-base mod-bold">34</span>万円</span>
                            <span class="l-ss-label">1万円UP</span>
                            <span class="font-xs mod-bold">〜</span>
                        </div>
                        <div class="l-ss-block">
                            <span class="font-xs"><span class="font-base mod-bold">55</span>万円</span>
                            <span class="l-ss-label">5万円UP</span>
                        </div>
                    </div>
                    <p class="font-xs horizon-line">33万円～50万円</p>
                </div>
            </li>
            <!-- /.l-s-scout-box -->
            <li class="l-s-scout-box l-ss">
                <p class="font-xs mod-bold l-ss-left">独自応援金</p>
                <div class="l-ss-right">
                    <div class="l-ss-inner">
                        <span class="font-xs"><span class="font-base mod-bold">2,000,000</span>円</span>
                        <span class="l-ss-label">1,000,000円UP</span>
                    </div>
                    <p class="font-xs horizon-line">1,000,000円</p>
                    <p class="font-xs mt4">※独自応援金は企業・医院から支給されるものです。支給条件など詳細はメッセージまたは担当者にご確認ください。</p>
                </div>
            </li>
            <!-- /.l-s-scout-box -->
            <p class="font-s">詳細な条件はメッセージよりご確認ください</p>
        </ul>
    </div>
</aside>


```
*/
.l-s-scout {
	max-width: 600px; 

	border: 2px solid #896c00;
	border-top: none;
	border-radius: 4px;
	background: #f6f3f0;
}
.l-s-scout-title {
	display: flex;

	justify-content: center;
	align-items: center;

	padding: 8px 16px; 

	background: linear-gradient(270deg, #896c00 0%, #b7ad87 50%, #896c00 100%);

	color: #fff;
	font-weight: bold;
}
.l-s-scout-title a.link {
	color: #fff;
}
.l-s-scout-title i {
	display: inline-block;

	font-size: 1.6rem;
	line-height: 1;
}
.l-s-scout-title i:before {
	position: relative;
	bottom: 0.1em; 

	width: 1em;
	height: 1em;
}
.l-s-scout-lead {
	margin-bottom: 8px;
}
.l-s-scout-inner {
	padding: 12px 16px;
}
.l-s-scout-list {
	display: flex;

	flex-direction: column;

	row-gap: 16px;
}
.l-s-scout-message {
	max-width: 560px;
	margin-bottom: 12px; 
	margin-left: auto;
}
.l-s-scout:has(.msg-read) {
	position: relative; 

	margin-top: 30px;
}
.l-s-scout:has(.msg-read) .msg-read {
	position: absolute;
	top: -20px;
	right: 10px;

	color: #4a4a4a;
	font-size: 1.2rem;
}
.l-s-scout:has(.msg-read) .msg-read i:before {
	color: #4a4a4a;
}
.l-s-scout .mod-bold {
	font-weight: bold;
}

.l-ss {
	display: flex;

	padding-bottom: 16px;

	border-bottom: 1px solid #e4e0de; 

	gap: 12px;
}
.l-ss-label {
	overflow: hidden;

	padding: 2px 8px; 

	border-radius: 4px;
	background: #fff;

	color: #c04101;
	font-size: 1.2rem;
}
.l-ss-left {
	flex: 0 0 auto;

	line-height: 180%;
}
.l-ss-right {
	display: flex;

	flex-direction: column;
}
.l-ss-inner {
	display: flex;

	flex-wrap: wrap;
	align-items: center;

	margin-bottom: 4px; 

	gap: 4px;
}

.mt4 {
	margin-top: 4px;
}

.horizon-line {
	text-decoration: line-through;
}

/* variables color */
/*
#colors

@Service #2658CE
@Job #37B500
@Career #FE590F
@tone1 #F4F4F9
@tone2 #EBEBF3
@tone3 #CACAD9
@tone4 #84849A
@tone5 #4A4A4A
*/
/* variables-color */
:root {
	/* color color palette */
	/* Gray */
	--Gray-100: #f6f3f0;
	--Gray-200: #e4e0de;
	--Gray-300: #cbc8c6;
	--Gray-400: #b2afac;
	--Gray-500: #969391;
	--Gray-600: #716e6b;
	--Gray-700: #605d5b;
	--Gray-800: #4e4b49;
	--Gray-900: #2d2b29;
	--Gray-1000: #171413;
	/* Pink */
	--Pink-100: #fef1f5;
	--Pink-200: #fbd8e2;
	--Pink-300: #f7b5c8;
	--Pink-400: #f189aa;
	--Pink-500: #e9588e;
	--Pink-600: #cb006b;
	--Pink-700: #ac0058;
	--Pink-800: #8b0647;
	--Pink-900: #57002a;
	--Pink-1000: #280010;
	/* Red */
	--Red-100: #fff1f1;
	--Red-200: #ffd8d7;
	--Red-300: #fdb4b4;
	--Red-400: #fb888b;
	--Red-500: #f5505f;
	--Red-600: #d40038;
	--Red-700: #ac1731;
	--Red-800: #920625;
	--Red-900: #5c0415;
	--Red-1000: #2f0107;
	/* Orange */
	--Orange-100: #fef2ed;
	--Orange-200: #ffdacd;
	--Orange-300: #ffb59c;
	--Orange-400: #f88d68;
	--Orange-500: #f25915;
	--Orange-600: #c04101;
	--Orange-700: #934225;
	--Orange-800: #79371f;
	--Orange-900: #4f1f0d;
	--Orange-1000: #260c04;
	/* Lime */
	--Lime-100: #f2f9e2;
	--Lime-200: #dfebbf;
	--Lime-300: #c1d293;
	--Lime-400: #a2bb4b;
	--Lime-500: #869f16;
	--Lime-600: #687c0b;
	--Lime-700: #566606;
	--Lime-800: #465408;
	--Lime-900: #2c3505;
	--Lime-1000: #121700;
	/* Green */
	--Green-100: #ecfaec;
	--Green-200: #cdf0cc;
	--Green-300: #a8daa8;
	--Green-400: #66c56c;
	--Green-500: #28af3d;
	--Green-600: #2b8735;
	--Green-700: #276d2e;
	--Green-800: #1b5a22;
	--Green-900: #0f3a14;
	--Green-1000: #021b04;
	/* Aqua */
	--Aqua-100: #e3fafe;
	--Aqua-200: #b7f0fa;
	--Aqua-300: #7edae9;
	--Aqua-400: #12c0d6;
	--Aqua-500: #1aa4b6;
	--Aqua-600: #2b7e8a;
	--Aqua-700: #176774;
	--Aqua-800: #0f5760;
	--Aqua-900: #05373f;
	--Aqua-1000: #00191d;
	/* Blue */
	--Blue-100: #f2f5fc;
	--Blue-200: #dae3f7;
	--Blue-300: #b0c7f9;
	--Blue-400: #8aaaf6;
	--Blue-500: #648cf4;
	--Blue-600: #3a63e0;
	--Blue-700: #2045da;
	--Blue-800: #142ec5;
	--Blue-900: #08118c;
	--Blue-1000: #020448;
	/* Violet */
	--Violet-100: #f4f5fa;
	--Violet-200: #dfe1f6;
	--Violet-300: #bec2f8;
	--Violet-400: #9fa3f4;
	--Violet-500: #8382f3;
	--Violet-600: #6258dd;
	--Violet-700: #5336d8;
	--Violet-800: #451dc3;
	--Violet-900: #290083;
	--Violet-1000: #104;
	/* Purple */
	--Purple-100: #f9f3f9;
	--Purple-200: #eedced;
	--Purple-300: #e2b7e1;
	--Purple-400: #d392d2;
	--Purple-500: #c46bc4;
	--Purple-600: #a247a2;
	--Purple-700: #950c98;
	--Purple-800: #7d0c7f;
	--Purple-900: #4f0050;
	--Purple-1000: #260027;
	/* Yellow */
	--Yellow-100: #fffaec;
	--Yellow-200: #feeec1;
	--Yellow-300: #fee195;
	--Yellow-400: #f7ce5a;
	--Yellow-500: #f4c200;
	--Yellow-600: #d4a800;
	--Yellow-700: #b18c00;
	--Yellow-800: #896c00;
	--Yellow-900: #5f4a00;
	--Yellow-1000: #1f1600;
}

/*
#styleguide
主に優先表示プランで使用するスタイル

```
<table class="mod-table table-detail table-sp">
<tr>
<th>職種</th>
<td>薬剤師</td>
</tr>
<tr>
<th>希望勤務地</th>
<td>神奈川県<br>
具体的なエリア：川崎市中原区、東京都大田区、目黒区</td>
</tr>
<tr>
<th>希望業種</th>
<td>第一希望： 薬局（調剤メイン）<br>
第二希望：漢方</td>
</tr>
</table>
```
*/
.mod-tp-list {
	background: #fff;
}
.mod-tp-list .mod-tp-li {
	display: flex;

	align-items: center;

	padding: 16px;

	border-top: 1px dotted #b2afac; 

	-webkit-column-gap: 16px;
	-moz-column-gap: 16px;
	column-gap: 16px;
}
.mod-tp-list .mod-tp-li:first-child {
	border-top: none;
}
.mod-joblist-tp-reserve .mod-tp-list .mod-tp-li {
	padding: 12px 16px;

	-webkit-column-gap: 16px;
	-moz-column-gap: 16px;
	column-gap: 16px;
}
.mod-tp-list .mod-tp-li-selected {
	background: #dae3f7;
}
.mod-tp-list .mod-tp-li-selected .mod-tp-close {
	cursor: pointer;

	visibility: visible;

	opacity: 1;

	pointer-events: all;
}
.mod-tp-list .mod-tp-li-error {
	background: #ffd8d7;
}
.mod-tp-list .mod-tp-li-error .mod-tp-close {
	cursor: pointer;

	visibility: visible;

	opacity: 1;

	pointer-events: all;
}
.mod-tp-list .mod-tp-li-full {
	background: #e4e0de;
}
@media print, screen and (max-width: 767px) {
	.mod-tp-list .mod-tp-li {
		flex-wrap: wrap;

		row-gap: 4px;
	}
}
.mod-tp-list .mod-tp-li a.mod-tp-detail:hover {
	opacity: 0.7;
}
.mod-tp-list .mod-tp-area {
	flex: 0 0 auto; 

	width: 110px;
}
@media print, screen and (max-width: 767px) {
	.mod-tp-list .mod-tp-area {
		order: 1;
	}
}
.mod-tp-list .mod-tp-data {
	flex: 0 0 auto; 

	width: 116px;
}
@media print, screen and (max-width: 767px) {
	.mod-tp-list .mod-tp-data {
		order: 2;

		width: auto;
	}
}
.mod-tp-list .mod-tp-detail {
	flex: 1 1 auto;

	color: #383737;
}
.mod-tp-list .mod-tp-detail-error {
	margin: 0;
}
@media print, screen and (max-width: 767px) {
	.mod-tp-list .mod-tp-detail {
		order: 3; 

		width: 100%;
	}
}
.mod-tp-list .mod-tp-point {
	flex: 0 0 auto; 

	width: 64px;
}
@media print, screen and (max-width: 767px) {
	.mod-tp-list .mod-tp-point {
		order: 4;
	}
}
.mod-tp-list .mod-tp-status {
	display: flex;

	flex: 0 0 auto; 
	flex-direction: column;

	width: 80px;

	gap: 4px;
}
@media print, screen and (max-width: 767px) {
	.mod-tp-list .mod-tp-status {
		order: 4;
	}
}
.mod-tp-list .mod-tp-edit {
	flex: 0 0 auto; 

	margin-left: auto;
}
.mod-tp-list .mod-tp-button {
	flex: 0 0 auto; 

	width: 80px;
	margin-left: auto;
	padding: 4px 0;

	font-size: 1.2rem;
	line-height: 1.6;
}
@media print, screen and (max-width: 767px) {
	.mod-tp-list .mod-tp-button {
		order: 5;

		width: 45%;
	}
}
.mod-tp-list .mod-tp-close {
	cursor: none;

	visibility: none;

	background: none;
	opacity: 0; 

	pointer-events: none;
}
@media print, screen and (max-width: 767px) {
	.mod-tp-list .mod-tp-close {
		order: 6;
	}
}
.mod-tp-list .mod-tp-close:before {
	color: #383737;
}
@media print, screen and (min-width: 768px) {
	.mod-tp-list .mod-tp-close:hover:before {
		opacity: 0.7;
	}
}
.mod-tp-list .mod-tp-edit {
	width: 70px;
	padding: 8px 12px;

	font-size: 1.2rem;
}
@media print, screen and (max-width: 767px) {
	.mod-tp-list .mod-tp-edit {
		order: 6;

		width: 50%; 
		max-width: calc( 100% - 176px);
	}
}
.mod-tp-list .mod-tp-error-edit {
	flex: 0 0 auto; 

	width: 126px;
	padding: 8px 12px;

	font-size: 1.2rem;
}
@media print, screen and (max-width: 767px) {
	.mod-tp-list .mod-tp-error-edit {
		order: 6;

		width: 100%; 
		max-width: calc( 100% - 100px);
	}
}

.mod-tp-label {
	display: flex;

	justify-content: space-between;
	align-items: center;

	padding: 4px 12px;

	border: 1px solid #cacad9;
	border-radius: 2px;
	background: #ebebf3; 

	font-size: 1.4rem;
	line-height: 1.6;

	gap: 4px;
}
.mod-tp-label .icon:before {
	cursor: pointer; 

	color: #383737;
}
.mod-tp-label .icon:hover {
	opacity: 0.7;
}
.mod-tp-label .price-cell {
	display: inline-block;

	margin-right: 4px; 
	margin-left: auto;
	padding: 0 8px;

	border-radius: 4px;
	background: #fff;

	font-size: 1rem;
}

.mod-tp-sticky.is-mod-sticky-bottom {
	border-radius: 4px 0 0 4px;
}

.mod-tp-sticky-inner {
	display: flex;

	justify-content: center;
	align-items: center;

	padding-bottom: 16px; 

	border-bottom: 1px dotted #b2afac;

	gap: 16px;
}
@media print, screen and (max-width: 767px) {
	.mod-tp-sticky-inner {
		justify-content: space-between;

		padding-bottom: 8px;
	}
}

@media print, screen and (max-width: 767px) {
	.mod-tp-sticky .sp-hide {
		display: none;
	}
}

@media print, screen and (min-width: 768px) {
	.mod-tp-sticky .pc-hide {
		display: none;
	}
}

@media print, screen and (min-width: 768px) {
	.mod-tp-sticky-number {
		color: #ac1731; 
		font-size: 2rem;
	}
}

@media print, screen and (max-width: 767px) {
	.mod-tp-sticky-number {
		font-size: 2.4rem;
	}
}

@media print, screen and (max-width: 767px) {
	.mod-tp-sticky .box-inner {
		padding: 8px 10px;
	}
}

.mod-tp-sticky .mod-button.button-nonactive {
	cursor: none;

	pointer-events: none;
}

@media print, screen and (max-width: 767px) {
	.mod-tp-sticky .mod-button {
		width: auto; 
		padding: 4px 12px;

		font-size: 1.2rem;
	}
}

.mod-tp-details-summary {
	cursor: pointer; 

	display: flex;
	list-style: none;

	padding-top: 8px;

	gap: 4px;
}
.mod-tp-details-summary:hover {
	opacity: 0.7;
}

.mod-tp-details i.icon-arrow_right {
	position: relative;
	bottom: -2px;
}
.mod-tp-details i.icon-arrow_right:before {
	display: inline-block;

	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
	-webkit-transform-origin: 50%;
	transform-origin: 50%;
}

@media print, screen and (max-width: 767px) {
	.mod-tp-details {
		display: none;
	}
}

.mod-tp-details[open] i.icon-arrow_right:before {
	display: inline-block;

	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg);
}

.mod-tp-detail-check label.icon-check {
	display: inline; 

	border: none;
}

.mod-table-tp {
	border-collapse: separate;
	border-spacing: 0;

	width: 100%;

	background: #fff;
}
@media print, screen and (max-width: 767px) {
	.mod-table-tp {
		table-layout: auto;

		min-width: 830px;
	}
}
.mod-table-tp-cover {
	width: 100%; 
	margin: 0;
}
@media print, screen and (max-width: 767px) {
	.mod-table-tp-cover {
		position: relative;
		overflow-x: scroll; 

		width: 100%;
	}
}
.mod-table-tp th,
.mod-table-tp td {
	border-right: 1px dotted #b2afac;
	border-bottom: 1px dotted #b2afac;
}
.mod-table-tp tr th:last-child,
.mod-table-tp tr td:last-child {
	border-right: none;
}
.mod-table-tp th {
	padding: 12px;

	background-color: #f6f3f0;
}
.mod-table-tp th.fixed {
	max-width: 160px;
}
@media print, screen and (max-width: 767px) {
	.mod-table-tp th.fixed {
		position: -webkit-sticky;
		position: sticky;
		z-index: 3;
		left: 0;

		max-width: 138px;
	}
}
.mod-table-tp td:has(input[type='checkbox']:checked) {
	background: #dae3f7;
}
.mod-table-tp td:has(.full) {
	background: #e4e0de;
}
@media print, screen and (min-width: 768px) {
	.mod-table-tp td:has(.checkbox:hover) {
		background: #dae3f7;
	}
}
.mod-table-tp .period {
	font-size: 1.4rem;
	font-weight: bold;
}
.mod-table-tp .area-name {
	display: block; 

	width: 100%;

	font-size: 1.4rem;
	font-weight: bold;
}
.mod-table-tp .area-point {
	display: inline-block;

	padding: 0 8px; 

	background-color: #fff;

	font-size: 1rem;
}
.mod-table-tp .checkbox {
	background: transparent;
}
.mod-table-tp .checkbox label {
	cursor: pointer; 

	display: block;
	position: relative;
	z-index: 0;

	height: 100%;
	margin-right: 0;
	padding: 16px 16px 16px 41px;

	font-size: 1.2rem;
}
.mod-table-tp .checkbox label:after {
	left: 16px; 

	border: 1px solid #969391;
	background: #f6f3f0;
}
@media print, screen and (max-width: 767px) {
	.mod-table-tp .checkbox label {
		height: 100%;

		border: none;
		background: transparent;
	}
}
.mod-table-tp .checkbox input:checked + label:before {
	left: 16px;

	touch-action: none;
}
.mod-table-tp .checkbox input {
	touch-action: none;
}
@media print, screen and (max-width: 767px) {
	.mod-table-tp .checkbox:focus {
		background-color: none;
	}
}
.mod-table-tp .full {
	display: flex;

	justify-content: center; 

	width: 100%;
	height: 100%;
	padding: 16px;

	color: #969391;
	font-size: 1.2rem;
}

.cassette-joblist-box.cassette-top-plan {
	display: flex;

	padding: 8px 16px;

	font-size: 1.2rem;

	-webkit-column-gap: 16px;
	-moz-column-gap: 16px;
	column-gap: 16px;
}
@media print, screen and (max-width: 767px) {
	.cassette-joblist-box.cassette-top-plan {
		display: none;
	}
}
.cassette-joblist-box.cassette-top-plan .sub-tp-head-area {
	flex: 0 0 auto; 

	width: 110px;
}
.cassette-joblist-box.cassette-top-plan .sub-tp-head-data {
	flex: 0 0 auto; 

	width: 116px;
}
.cassette-joblist-box.cassette-top-plan .sub-tp-head-detail {
	flex: 1 1 auto;
}
.cassette-joblist-box.cassette-top-plan .sub-tp-head-detail-error {
	margin: 0;
}
.cassette-joblist-box.cassette-top-plan .sub-tp-head-status {
	flex: 0 0 auto; 

	width: 80px;
}
.cassette-joblist-box.cassette-top-plan .sub-tp-head-point {
	flex: 0 0 auto; 

	width: 64px;
}
.cassette-joblist-box.cassette-top-plan .sub-tp-head-edit {
	flex: 0 0 auto; 

	width: 70px;
}

.mod-tp-detail-check label {
	display: inline-block;
}

.mod-tp-joblist {
	position: relative;

	width: 100%;
	margin-top: 15px;
	padding: 0;

	border: 1px solid #cacad9;
	border-radius: 6px;

	transition: background-color 0.2s ease;
}
.mod-tp-joblist summary:hover {
	background-color: #e4e0de;
}
@media print, screen and (max-width: 767px) {
	.mod-tp-joblist summary:hover {
		background-color: transparent;
	}
}
.mod-tp-joblist.has-error {
	border-color: #ac1731; 
	background-color: #fff1f1;
}
.mod-tp-joblist.has-error .mod-tp-joblist-title {
	color: #ac1731;
}
.mod-tp-joblist.has-error .mod-tp-joblist-header::before,
.mod-tp-joblist.has-error .mod-tp-joblist-header::after {
	background-color: #ac1731;
}
@media print, screen and (min-width: 768px) {
	.mod-tp-joblist.has-error summary:hover {
		background-color: #fdb4b4;
	}
}
.mod-tp-joblist-header {
	cursor: pointer;

	display: flex;
	position: relative;
	list-style: none;

	justify-content: center;
	align-items: center;

	padding: 12px;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.mod-tp-joblist-header::-webkit-details-marker {
	display: none;
}
@media print, screen and (max-width: 767px) {
	.mod-tp-joblist-header ~ * {
		pointer-events: auto;
	}
}
.mod-tp-joblist-header::before {
	content: '';

	position: absolute;
	right: 16px;

	width: 2px;
	height: 12px;

	background-color: #4a4a4a;

	transition: opacity 0.2s ease;
}
.mod-tp-joblist-header::after {
	content: '';

	position: absolute;
	right: 11px;

	width: 12px;
	height: 2px;

	background-color: #4a4a4a;

	transition: -webkit-transform 0.2s ease;
	transition: transform 0.2s ease;
	transition: transform 0.2s ease, -webkit-transform 0.2s ease;
}
.mod-tp-joblist[open] .mod-tp-joblist-header::before {
	opacity: 0;
}
.mod-tp-joblist-title {
	font-size: 1.4rem;
	font-weight: bold;
	text-align: center;
}
.mod-tp-joblist-list {
	display: flex;

	flex-direction: column;

	width: 100%;
	padding: 0 12px 12px 12px;

	gap: 4px;
}
.mod-tp-joblist-box {
	display: block;

	width: 100%;
}
.mod-tp-joblist-link {
	display: flex;

	padding: 10px;

	background: #f6f3f0;

	color: #4a4a4a !important; 

	-webkit-column-gap: 16px;
	-moz-column-gap: 16px;
	column-gap: 16px;
	row-gap: 4px;
}
@media print, screen and (max-width: 767px) {
	.mod-tp-joblist-link {
		flex-wrap: wrap;
		justify-content: left; 

		padding: 8px;
	}
}
.mod-tp-joblist-link:hover {
	background: #cbc8c6;
}
.mod-tp-joblist-link.error {
	background: #ffd8d7;
}
.mod-tp-joblist-link.error:hover {
	background: #fdb4b4;
}
.mod-tp-joblist-link .detail {
	display: flex;

	flex: 0 0 auto; 
	align-items: center;

	margin-left: auto;
}
@media print, screen and (max-width: 767px) {
	.mod-tp-joblist-link .detail {
		display: none;
	}
}
.mod-tp-joblist-link .error-message {
	margin-bottom: 0;
}
.mod-tp-joblist-link .error-message:before {
	top: 0;
}
.mod-tp-joblist-inner {
	display: flex;

	flex: 1 1 auto; 
	flex-wrap: wrap;
	align-items: center;

	-webkit-column-gap: 16px;
	-moz-column-gap: 16px;
	column-gap: 16px;
	row-gap: 4px;
}
@media print, screen and (max-width: 767px) {
	.mod-tp-joblist-inner {
		justify-content: left; 

		-webkit-column-gap: 6px;
		-moz-column-gap: 6px;
		column-gap: 6px;
	}
}

.job-contents.joblist-item {
	container-type: inline-size;
	/* 横幅を基準に */
}

@container (max-width: 600px) {
	.mod-tp-joblist {
		flex-direction: column;
		align-items: start;
	}
}

/* =====================================================
 * Block
 * ================================================== */
@media print, screen and (min-width: 768px) {
	.block-news-list .search {
		display: flex; 

		width: 266px;
		margin-left: auto;
	}
	.block-news-list .search-inner {
		display: inline-block;

		padding: 4px;

		border: 1px solid #cacad9; 
		border-radius: 4px;
		background: #fff;
	}
	.block-news-list .search .icon-search {
		position: relative;
		top: 2px;

		color: #2658ce;
	}
	.block-news-list .search-keyword {
		width: 160px; 

		border: 0;

		font-size: 1.2rem;
	}
	.block-news-list .search .button-search {
		width: 70px;
		height: 28px;
		padding: 0;

		border: 0;
		box-shadow: none;

		vertical-align: middle;
	}
	.block-news-list .news-list {
		margin: 10px 0 0;

		border-radius: 10px;
		background: #fff;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
	}
	.block-news-list .news a {
		display: flex;

		padding: 12px 15px 8px;

		border-bottom: 2px solid #ebebf3;
		background: #f4f4f9; 

		color: #000;
	}
	.block-news-list .news a:hover {
		opacity: 0.8;
	}
	.block-news-list .news:first-child a {
		border-radius: 10px 10px 0 0;
	}
	.block-news-list .news.news-unread a {
		background: #fff;
	}
	.block-news-list .news.news-unread .news-header-subject {
		font-weight: bold;
	}
	.block-news-list .news-header {
		flex: 1;
	}
	.block-news-list .news-header-subject {
		margin: 0 0 3px;

		font-size: 2rem;
	}
	.block-news-list .news-header-from {
		font-size: 1.4rem;
	}
	.block-news-list .news-date {
		font-size: 1.2rem;
	}
	.block-news-list .pager {
		display: flex;

		padding: 20px;
	}
	.block-news-list .pager-num {
		flex: 1;

		text-align: center;
	}
}

@media print, screen and (max-width: 767px) {
	.block-news-list {
		padding: 10px 0 0;
	}
	.block-news-list .search {
		display: flex; 

		width: 266px;
		margin: 0 auto;
	}
	.block-news-list .search-inner {
		display: inline-block;

		padding: 4px;

		border: 1px solid #cacad9; 
		border-radius: 4px;
		background: #fff;
	}
	.block-news-list .search .icon-search {
		position: relative;
		top: 2px;

		color: #2658ce;
	}
	.block-news-list .search-keyword {
		width: 160px; 

		border: 0;

		font-size: 1.2rem;
	}
	.block-news-list .search .button-search {
		width: 70px;
		height: 28px;
		padding: 0;

		border: 0;
		box-shadow: none;

		vertical-align: middle;
	}
	.block-news-list .news-list {
		margin: 10px 10px 0;

		border-radius: 10px;
		background: #fff;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
	}
	.block-news-list .news a {
		display: block;

		padding: 12px 15px 8px;

		border-bottom: 2px solid #ebebf3;
		background: #f4f4f9; 

		color: #000;
	}
	.block-news-list .news a:hover {
		opacity: 0.8;
	}
	.block-news-list .news:first-child a {
		border-radius: 10px 10px 0 0;
	}
	.block-news-list .news.news-unread a {
		background: #fff;
	}
	.block-news-list .news.news-unread .news-header-subject {
		font-weight: bold;
	}
	.block-news-list .news-header-subject {
		margin: 0 0 5px;

		font-size: 1.6rem;
	}
	.block-news-list .news-header-from {
		font-size: 1.2rem;
	}
	.block-news-list .news-date {
		font-size: 1.2rem;
		text-align: right;
	}
	.block-news-list .pager {
		display: flex;

		padding: 20px;
	}
	.block-news-list .pager-num {
		flex: 1;

		text-align: center;
	}
}

@media print, screen and (min-width: 768px) {
	.block-news-detail {
		border-radius: 10px;
		background: #fff;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
	}
	.block-news-detail .news-header {
		display: flex;

		padding: 15px;

		border-bottom: 1px solid #ebebf3;
	}
	.block-news-detail .news-header-title {
		flex: 1;

		font-size: 1.6rem;
	}
	.block-news-detail .news-header-date {
		font-size: 1.2rem;
	}
	.block-news-detail .news-body {
		padding: 20px;
	}
	.block-news-detail .news-body p {
		font-size: 1.2rem;
		line-height: 1.75;
	}
	.block-news-detail .news-contact {
		padding: 20px;

		background: #f4f4f9;
	}
	.block-news-detail .news-contact p {
		line-height: 1.75;
	}
	.block-news-detail .news-contact a {
		font-weight: bold;
	}
	.block-news-detail .news-footer {
		padding: 18px 10px;

		font-size: 1.6rem;
		font-weight: bold; 
		text-align: center;
	}
}

@media print, screen and (max-width: 767px) {
	.block-news-detail {
		margin: 10px;

		border-radius: 10px;
		background: #fff;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
	}
	.block-news-detail .news-header {
		display: block;

		padding: 15px;

		border-bottom: 1px solid #ebebf3;
	}
	.block-news-detail .news-header-title {
		font-size: 1.6rem;
	}
	.block-news-detail .news-header-date {
		margin: 5px 0 0;

		font-size: 1.2rem;
		text-align: right;
	}
	.block-news-detail .news-body {
		padding: 20px;
	}
	.block-news-detail .news-body p {
		font-size: 1.2rem;
		line-height: 1.75;
	}
	.block-news-detail .news-contact {
		padding: 20px;

		background: #f4f4f9;
	}
	.block-news-detail .news-contact p {
		font-size: 1.2rem;
		line-height: 1.75;
	}
	.block-news-detail .news-contact a {
		font-weight: bold;
	}
	.block-news-detail .news-footer {
		padding: 18px 10px;

		font-size: 1.4rem;
		font-weight: bold; 
		text-align: center;
	}
}

@media print, screen and (min-width: 768px) {
	.block-faq .heading {
		margin: 2em 0 1em;

		font-size: 1.6rem;
		font-weight: bold;
	}
	.block-faq .box-faq {
		margin: 10px 0 0;
	}
	.block-faq .box-faq .box-title {
		position: relative;

		padding-left: 40px;

		color: #2658ce;
	}
	.block-faq .box-faq .box-title:before {
		content: 'Q.';

		position: absolute;
		top: 12px;
		left: 18px;

		color: #2658ce; 
		font-size: 1.6rem;
	}
	.block-faq .box-faq .box-inner ol {
		margin-left: 20px;
	}
	.block-faq .box-faq .box-footer {
		margin: 20px -15px -15px;
		padding: 15px;

		background: #f4f4f9;
	}
	.block-faq .box-faq .box-footer .sub-heading {
		margin-bottom: 10px;
	}
	.block-faq .box-faq .box-footer li {
		margin-top: 5px;
	}
}

@media print, screen and (max-width: 767px) {
	.block-faq {
		padding: 10px;
	}
	.block-faq .heading {
		margin: 1em 0;

		font-size: 1.6rem;
		font-weight: bold;
	}
	.block-faq .box-faq {
		margin: 10px 0 0;
	}
	.block-faq .box-faq .box-title {
		position: relative;

		padding-right: 40px;
		padding-left: 40px;

		color: #2658ce;
	}
	.block-faq .box-faq .box-title:before {
		content: 'Q.';

		position: absolute;
		top: 8px;
		left: 18px;

		color: #2658ce; 
		font-size: 1.6rem;
	}
	.block-faq .box-faq .box-inner ol {
		margin-left: 20px;
	}
	.block-faq .box-faq .box-footer {
		margin: 20px -15px -15px;
		padding: 15px;

		background: #f4f4f9;
	}
	.block-faq .box-faq .box-footer .sub-heading {
		margin-bottom: 10px;
	}
	.block-faq .box-faq .box-footer li {
		margin-top: 5px;
	}
}

@media print, screen and (min-width: 768px) {
	.block-edit-log-list .log-header {
		display: flex;

		margin-bottom: 7px;
	}
	.block-edit-log-list .log-header .heading {
		margin-right: 10px;

		font-size: 1.6rem;
		font-weight: 600;
	}
	.block-edit-log-list .log-body {
		display: flex;

		font-size: 1.6rem;
	}
	.block-edit-log-list .log-body .diff {
		flex: 1;
	}
	.block-edit-log-list .log-body .icon-revision {
		margin-right: 5px;
	}
	.block-edit-log-list .log-body .icon-revision:before {
		color: #000;
	}
	.block-edit-log-list .log-body .name {
		margin-left: 15px;
	}
	.block-edit-log-list .button-mini {
		padding-top: 15px;
		padding-bottom: 15px;
	}
	.block-edit-log-list .icon-doc {
		margin-left: 9px !important;
	}
	.block-edit-log-list .icon-doc:before {
		font-size: 1.8rem;
	}
}

@media print, screen and (max-width: 767px) {
	.block-edit-log-list .log-header {
		margin-bottom: 3px;
	}
	.block-edit-log-list .log-header .heading {
		margin-bottom: 3px;

		font-size: 1.6rem;
		font-weight: 600;
	}
	.block-edit-log-list .log-body {
		font-size: 1.2rem;
	}
	.block-edit-log-list .log-body .diff {
		margin-bottom: 3px;
	}
	.block-edit-log-list .log-body .icon-revision {
		margin-right: 3px;
	}
	.block-edit-log-list .log-body .icon-revision:before {
		color: #000;
	}
	.block-edit-log-list .log-body .name i {
		margin-right: 3px;
	}
	.block-edit-log-list .box-listitem-detail {
		display: flex;
	}
	.block-edit-log-list .button-mini {
		display: flex;

		justify-content: center; 
		align-items: center;

		height: 100%;
		padding: 20px 10px 10px;

		text-align: center;
		white-space: nowrap;
	}
	.block-edit-log-list .icon-doc {
		display: block;
		position: relative;
		top: -10px;
		left: 5px;

		margin: 0 !important;
	}
	.block-edit-log-list .icon-doc:before {
		font-size: 2.8rem;
	}
}

@media print, screen and (min-width: 768px) {
	.block-edit-log-detail .heading {
		margin-bottom: 20px;

		font-size: 1.6rem; 
		font-weight: bold;
		text-align: center;
	}
	.block-edit-log-detail .unit-item {
		margin: 0 0 20px;
		padding: 0 0 5px;

		border-radius: 5px;
		background: #fff;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); 

		text-align: center;
	}
	.block-edit-log-detail .unit-item .heading2 {
		margin: 0;
		padding: 10px;

		border-bottom: 1px solid #cacad9;

		font-size: 1.6rem;
		font-weight: bold;
		text-align: left;
	}
	.block-edit-log-detail .unit-item i:before {
		color: #000;
	}
	.block-edit-log-detail .unit-item .before {
		margin: 10px;
		padding: 10px;

		border-radius: 5px;
		background: #f4f4f9;

		text-align: left;
	}
	.block-edit-log-detail .unit-item .after {
		margin: 10px;
		padding: 10px;

		border-radius: 5px;
		background: #f4f4f9;

		text-align: left;
	}
}

@media print, screen and (max-width: 767px) {
	.block-edit-log-detail {
		padding: 10px;
	}
	.block-edit-log-detail .heading {
		margin-bottom: 10px;

		font-size: 1.6rem; 
		font-weight: bold;
		text-align: center;
	}
	.block-edit-log-detail .unit-item {
		margin: 0 0 20px;

		text-align: center;
	}
	.block-edit-log-detail .unit-item .heading2 {
		margin: 0 -10px 0;
		padding: 10px;

		border-bottom: 1px solid #cacad9;
		background: #fff;

		font-size: 1.6rem;
		font-weight: bold;
		text-align: left;
	}
	.block-edit-log-detail .unit-item i:before {
		color: #000;
	}
	.block-edit-log-detail .unit-item .before {
		margin: 10px;
		padding: 10px;

		border-radius: 5px;
		background: #fff;

		font-size: 1.2rem; 
		text-align: left;
	}
	.block-edit-log-detail .unit-item .after {
		margin: 10px;
		padding: 10px;

		border-radius: 5px;
		background: #fff;

		font-size: 1.2rem; 
		text-align: left;
	}
}

@media print, screen and (max-width: 767px) {
	.block-data-kyujin {
		margin: 20px 10px 0;
	}
}

.block-data-kyujin .heading {
	margin-bottom: 5px; 

	font-weight: bold;
}

.block-data-kyujin p {
	font-size: 1.1rem;
}

.block-data-kyujin .mod-box {
	margin: 20px 0 0;
}

.block-data-kyujin .data-kyujin-img {
	max-width: 700px;
	margin: 0 auto;
}
.block-data-kyujin .data-kyujin-img img {
	width: 100%;
}
.block-data-kyujin .data-kyujin-img figcaption {
	margin-top: 0.5em; 

	text-align: left;
}
.block-data-kyujin .data-kyujin-img figcaption li {
	display: inline-block;
	position: relative;

	margin: 0.5em 1.5em 0 0; 
	padding-left: 1.5em;

	line-height: 1;
}
@media print, screen and (max-width: 767px) {
	.block-data-kyujin .data-kyujin-img figcaption li {
		font-size: 1.0rem;
	}
}
.block-data-kyujin .data-kyujin-img figcaption li i {
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;

	width: 1em;
	height: 1em;
	margin: auto;

	background-color: #ebebf3;
}
.block-data-kyujin .data-kyujin-img figcaption li i.blue {
	background-color: #2658ce;
}
.block-data-kyujin .data-kyujin-img figcaption li i.pink {
	background-color: #f44a63;
}
.block-data-kyujin .data-kyujin-img figcaption li i.yellow {
	background-color: #ffe603;
}
.block-data-kyujin .data-kyujin-img figcaption li i.purple {
	background-color: #6f50a0;
}
.block-data-kyujin .data-kyujin-img figcaption li i.purple {
	background-color: #6f50a0;
}
.block-data-kyujin .data-kyujin-img figcaption li i.aqua {
	background-color: #6bdaed;
}
.block-data-kyujin .data-kyujin-img figcaption li i.orange {
	background-color: #ffb53e;
}
.block-data-kyujin .data-kyujin-img figcaption li i.guppy {
	background-color: #fe590f;
}
.block-data-kyujin .data-kyujin-img figcaption li i.naivy {
	background-color: #2e64a0;
}
.block-data-kyujin .data-kyujin-img figcaption li i.green {
	background-color: #2e64a0;
}
.block-data-kyujin .data-kyujin-img figcaption li i.green {
	background-color: #1cad00;
}
.block-data-kyujin .data-kyujin-img figcaption li i.greenyellow {
	background-color: #88de3d;
}

.cont-saiyo-rank .block-visual {
	height: 300px;
	padding: 30px;

	background: #fff url(../img/saiyo_rank/rank_main_01.jpg) no-repeat 100% 50%;
}
.cont-saiyo-rank .block-visual.is-manual {
	height: auto;

	background: #fff url(../img/saiyo_rank/on_manual_01.jpg) no-repeat 100% 50%;
}
.cont-saiyo-rank .block-visual.is-manual .lead {
	padding-bottom: 0;
}
@media print, screen and (max-width: 767px) {
	.cont-saiyo-rank .block-visual {
		background-position: 100% 100%; 
		background-size: 200px auto;
	}
	.cont-saiyo-rank .block-visual.is-manual {
		position: relative; 

		height: auto;

		background: rgba(255, 255, 255, 0.6) url(../img/saiyo_rank/on_manual_01.jpg) no-repeat left center;
		background-size: cover;
	}
	.cont-saiyo-rank .block-visual.is-manual > * {
		position: relative; 
		z-index: 2;
	}
	.cont-saiyo-rank .block-visual.is-manual .lead {
		padding-bottom: 0;
	}
	.cont-saiyo-rank .block-visual.is-manual:before {
		content: '';

		position: absolute;
		z-index: 1;
		top: 0;
		left: 0;

		width: 100%;
		height: 100%;

		background: rgba(255, 255, 255, 0.7);
	}
}
.cont-saiyo-rank .block-visual .heading {
	margin: 0 0 0.5em;

	color: #2658ce;
	font-size: 3.8rem;
	font-weight: bold;
}
@media print, screen and (max-width: 767px) {
	.cont-saiyo-rank .block-visual .heading {
		font-size: 2.4rem;
	}
}
.cont-saiyo-rank .block-visual .lead {
	padding: 0 0 30px;
}
.cont-saiyo-rank .block-visual .mod-button {
	width: 50%;

	font-size: 2rem;
}

.cont-saiyo-rank .block-lead {
	margin: 30px 0 0;
}
@media print, screen and (max-width: 767px) {
	.cont-saiyo-rank .block-lead .box-jobs {
		font-size: 1.2rem;
	}
}
@media print, screen and (max-width: 767px) {
	.cont-saiyo-rank .block-lead {
		margin: 20px 10px 0;
	}
}

.cont-saiyo-rank .block-rank {
	margin: 40px 0 0;
}
@media print, screen and (max-width: 767px) {
	.cont-saiyo-rank .block-rank {
		margin: 40px 10px 0;
	}
}
.cont-saiyo-rank .block-rank .heading {
	margin: 0 0 5px;

	color: #2658ce; 
	font-size: 2.8rem;
	font-weight: bold;
	text-align: center;
}
@media print, screen and (max-width: 767px) {
	.cont-saiyo-rank .block-rank .heading {
		font-size: 2.4rem;
	}
}
.cont-saiyo-rank .block-rank .lead {
	margin: 0 0 20px;
	padding: 0 0 10px;

	border-bottom: 3px solid #2658ce; 

	color: #b40000;
	font-size: 1.6rem;
	text-align: center;
}
@media print, screen and (max-width: 767px) {
	.cont-saiyo-rank .block-rank .lead {
		font-size: 1.4rem;
	}
}
.cont-saiyo-rank .block-rank .table-rank {
	width: 100%;
	padding: 5px;

	border-radius: 5px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); 

	font-size: 2rem;
}
@media print, screen and (max-width: 767px) {
	.cont-saiyo-rank .block-rank .table-rank {
		font-size: 1.4rem;
	}
}
.cont-saiyo-rank .block-rank .table-rank table {
	width: 100%;

	border-radius: 5px;
}
.cont-saiyo-rank .block-rank .table-rank td {
	padding: 5px 10px;

	border-bottom: 2px solid #f4f4f9; 
	background: #fff;

	text-align: center;
}
.cont-saiyo-rank .block-rank .table-rank .rank {
	width: 25%;
}
@media print, screen and (max-width: 767px) {
	.cont-saiyo-rank .block-rank .table-rank .rank {
		width: 10%;
	}
}
@media print, screen and (max-width: 767px) {
	.cont-saiyo-rank .block-rank .table-rank .arrow {
		width: 20%; 
		padding: 0;
	}
}
@media print, screen and (max-width: 767px) {
	.cont-saiyo-rank .block-rank .table-rank .al-l {
		width: 45%;
	}
}
.cont-saiyo-rank .block-rank .table-rank a {
	text-decoration: underline;
}
.cont-saiyo-rank .block-rank .table-rank .color {
	color: #c00;
	font-size: 3rem; 
	font-weight: bold;
}
@media print, screen and (max-width: 767px) {
	.cont-saiyo-rank .block-rank .table-rank .color {
		font-size: 1.8rem;
	}
}
.cont-saiyo-rank .block-rank .table-rank .fa {
	font-size: 3rem;
}
@media print, screen and (max-width: 767px) {
	.cont-saiyo-rank .block-rank .table-rank .fa {
		font-size: 1.8rem;
	}
}
.cont-saiyo-rank .block-rank .table-rank .fa-arrow-right {
	color: #0a0;
}
.cont-saiyo-rank .block-rank .table-rank .fa-arrow-up {
	color: #c00;
}
.cont-saiyo-rank .block-rank .table-rank .fa-arrow-down {
	color: #2583ad;
}
.cont-saiyo-rank .block-rank .table-rank .rank-login td {
	padding: 10px;

	background: #fff000;
}

.cont-saiyo-rank .block-text {
	margin-top: 30px;
}
@media print, screen and (max-width: 767px) {
	.cont-saiyo-rank .block-text {
		margin: 30px 10px 0;
	}
}
.cont-saiyo-rank .block-text .mod-box {
	margin: 30px 0;
}
@media print, screen and (max-width: 767px) {
	.cont-saiyo-rank .block-text .mod-box .box-inner {
		font-size: 1.2rem;
	}
}
.cont-saiyo-rank .block-text .button-wrapper {
	text-align: center;
}
.cont-saiyo-rank .block-text .mod-button {
	width: 100%;

	font-size: 2rem;
}
@media print, screen and (max-width: 767px) {
	.cont-saiyo-rank .block-text .mod-button {
		width: 100%;
	}
}

@media print, screen and (min-width: 768px) {
	.block-about-point .unit-item {
		display: flex;

		justify-content: space-between;
	}
	.block-about-point .unit-item .item {
		width: calc(25% - 20px);
	}
	.block-about-point .unit-item dt {
		display: flex;
		position: relative;

		justify-content: center;
		align-items: center;

		height: 76px;

		background: #4a4a4a;

		color: #fff;
		font-size: 1.6rem;
		text-align: center;
	}
	.block-about-point .unit-item dt:after {
		content: '';

		display: block;
		position: absolute;
		bottom: -25px;

		border-top: solid 15px #4a4a4a;
		border-right: solid 15px transparent;
		border-bottom: solid 15px transparent;
		border-left: solid 15px transparent;
	}
	.block-about-point .unit-item dd {
		display: flex;

		justify-content: center;
		align-items: center;

		height: 70px;

		background: #f5f4f9;

		color: #b40000;
	}
	.block-about-point .unit-item dd strong {
		font-size: 2.6rem;
	}
	.block-about-point .unit-item dd span {
		font-size: 2rem;
	}
	.block-about-point .unit-item dd em {
		font-size: 1.4rem; 
		font-style: normal;
	}
	.block-about-point .unit-item .item1 dt,
	.block-about-point .unit-item .item4 dt {
		font-size: 2rem;
	}
	.block-about-point .unit-item p {
		margin-top: 15px;
	}
}

@media print, screen and (max-width: 767px) {
	.block-about-point .unit-item .item dl {
		display: flex;

		width: 100%;
	}
	.block-about-point .unit-item dt {
		display: flex;
		position: relative;

		justify-content: center;
		align-items: center;

		width: 150px;

		background: #4a4a4a;

		color: #fff;
		font-size: 1.6rem;
		text-align: center;
	}
	.block-about-point .unit-item dt:after {
		content: '';

		display: block;
		position: absolute;
		top: 20px;
		right: -24px;

		border-top: solid 15px transparent;
		border-right: solid 15px transparent;
		border-bottom: solid 15px transparent;
		border-left: solid 15px #4a4a4a;
	}
	.block-about-point .unit-item dd {
		display: flex;

		flex: 1;
		justify-content: center;
		align-items: center;

		height: 70px;

		background: #f5f4f9;

		color: #b40000;
	}
	.block-about-point .unit-item dd strong {
		font-size: 2.6rem;
	}
	.block-about-point .unit-item dd span {
		font-size: 2rem;
	}
	.block-about-point .unit-item dd em {
		font-size: 1.4rem; 
		font-style: normal;
	}
	.block-about-point .unit-item .item1 dt,
	.block-about-point .unit-item .item4 dt {
		font-size: 2rem;
	}
	.block-about-point .unit-item p {
		margin: 10px 0 20px;
	}
}

.block-about-point .unit-campaign {
	margin: 30px 0 0;
	padding: 20px;

	background: #f4f4f9;
}
.block-about-point .unit-campaign .heading {
	margin-bottom: 15px;

	font-size: 1.8rem;
	font-weight: bold;
}

.cont-kyujinhyo {
	margin: 0 auto;
}
.cont-kyujinhyo .mod-box {
	box-shadow: none;
}
.cont-kyujinhyo .block-visual {
	display: flex;

	margin: 0 0 20px;
}
.cont-kyujinhyo .block-visual .image {
	flex: 1; 
	order: 2;

	padding-right: 10px;

	text-align: center;
}
.cont-kyujinhyo .block-visual .image p {
	margin: 10px 0 0;
}
.cont-kyujinhyo .block-visual .text {
	flex: 1;
	order: 1;

	padding: 10px 20px 0 0;

	text-align: center;
}
.cont-kyujinhyo .block-visual .text h2 {
	color: #2658ce; 
	font-size: 2rem;
	font-weight: bold;
}
.cont-kyujinhyo .block-visual .text .note {
	margin: 10px 0 15px;

	font-size: 1.2rem;
}
.cont-kyujinhyo .block-visual .text .lead {
	font-size: 2rem;
	font-weight: bold;
	line-height: 1.7;
}
.cont-kyujinhyo .block-visual .text .price {
	width: 330px;
	margin: 15px auto 0;
	padding: 10px;

	border-radius: 5px;
	background: #fff;

	color: #fe590f;
	font-size: 2.6rem;
}
.cont-kyujinhyo .block-visual .text .price span {
	color: #000; 
	font-size: 1.8rem;
}
.cont-kyujinhyo .box-feature {
	position: relative;
	overflow: visible; 

	margin: 50px 0 20px;
	padding: 30px 30px 30px 320px;
}
.cont-kyujinhyo .box-feature .image {
	position: absolute;
	top: -30px;
	left: 85px;
}
.cont-kyujinhyo .box-feature .text .heading {
	color: #2658ce;
	font-size: 2rem;
}
.cont-kyujinhyo .box-feature .text li {
	margin: 7px 0 0;
}
.cont-kyujinhyo .block-job-list {
	margin: 0 0 20px;
}
.cont-kyujinhyo .block-job-list .button-mini {
	font-size: 1.4rem;
}
.cont-kyujinhyo .box-flow {
	padding: 30px 15px;
}
.cont-kyujinhyo .box-flow .heading {
	color: #2658ce;
	font-size: 2.5rem;
	text-align: center;
}
.cont-kyujinhyo .box-flow .step {
	display: flex;
	position: relative;

	margin: 15px auto 0;

	text-align: center;
}
.cont-kyujinhyo .box-flow .step li {
	position: relative;
	list-style: none;

	width: 12.5%; 

	font-size: 1.4rem;
}
.cont-kyujinhyo .box-flow .step li:after {
	content: '';

	display: block;
	position: absolute;
	top: 10px;
	left: calc(-50% + 12px);

	width: calc(100% - 24px);
	height: 2px;

	background: #2658ce;
}
.cont-kyujinhyo .box-flow .step li:first-child:after {
	display: none;
}
.cont-kyujinhyo .box-flow .step li span {
	display: inline-block;

	width: 24px;
	height: 24px;
	margin-bottom: 5px;

	border-radius: 50%; 
	background: #2658ce;

	color: #fff;
	line-height: 24px;
}
.cont-kyujinhyo .block-job-boxes {
	display: flex;

	flex-wrap: wrap;

	margin: 20px 0 20px -10px;
}
.cont-kyujinhyo .block-job-boxes .mod-box {
	width: calc(50% - 10px);
	margin-bottom: 10px; 
	margin-left: 10px;
}
.cont-kyujinhyo .block-job-boxes .mod-box p {
	margin: 0 0 5px;

	font-size: 1.6rem;
	text-align: center;
}
.cont-kyujinhyo .block-job-boxes .mod-box p strong {
	color: #fe590f; 
	font-size: 2rem;
}
.cont-kyujinhyo .block-job-boxes .mod-box p span {
	font-size: 1.4rem;
}
.cont-kyujinhyo .block-job-boxes table {
	width: 90%;
	margin: 0 auto;
}
.cont-kyujinhyo .block-job-boxes th {
	width: 45%;

	font-size: 1.8rem;
	line-height: 1.1; 
	text-align: center;
}
.cont-kyujinhyo .block-job-boxes th span {
	font-size: 1.2rem;
}
.cont-kyujinhyo .block-job-boxes td {
	padding: 5px 0;
}
.cont-kyujinhyo .block-job-boxes td .mod-button {
	width: 100%;
	padding: 7px 0;
}

.cont-book {
	margin: 0 auto;
}
.cont-book .block-visual {
	display: flex;

	align-items: center; 

	margin: 0 0 20px;
}
.cont-book .block-visual .image {
	flex: 1; 
	order: 2;

	padding-right: 10px;

	text-align: center;
}
.cont-book .block-visual .image p {
	margin: 10px 0 0;
}
.cont-book .block-visual .text {
	flex: 1;
	order: 1;

	padding: 10px 20px 0 0;

	text-align: center;
}
.cont-book .block-visual .text h2 {
	margin: 0 0 15px;

	color: #2658ce; 
	font-size: 2.4rem;
	font-weight: bold;
}
.cont-book .block-visual .text .note {
	margin: 10px 0 15px;

	font-size: 1.2rem;
}
.cont-book .block-visual .text .lead1 {
	font-size: 1.8rem;
	line-height: 1.7;
}
.cont-book .block-visual .text .price {
	width: 330px;
	margin: 15px auto 0;
	padding: 10px;

	border-radius: 5px;
	background: #fff;

	color: #fe590f;
	font-size: 2.6rem;
}
.cont-book .block-visual .text .price span {
	color: #000; 
	font-size: 1.8rem;
}
.cont-book .box-feature {
	margin: 0 0 20px;
}
.cont-book .box-feature .heading {
	margin: 0 0 10px;

	color: #2658ce;
	font-weight: bold;
}
.cont-book .block-job-list {
	margin: 0 0 20px;
}
.cont-book .block-job-list .button-mini {
	font-size: 1.4rem;
}
.cont-book .block-books .box-book {
	display: flex;

	align-items: center; 

	margin: 0 0 20px;
	padding: 20px;
}
.cont-book .block-books .box-book .image {
	flex: 1;

	text-align: center;
}
.cont-book .block-books .box-book .text {
	flex: 1;
}
.cont-book .block-books .box-book .text h2 {
	color: #2658ce;
	font-size: 2.4rem;
}
.cont-book .block-books .box-book .text h3 {
	margin-top: 5px;

	color: #2658ce;
	font-size: 1.4rem;
}
.cont-book .block-books .box-book .text .status {
	margin: 10px 0;

	font-size: 1.4rem;
}
.cont-book .block-books .box-book .text .status span {
	padding: 3px 5px;

	border-radius: 3px;
}
.cont-book .block-books .box-book .text .status .open {
	background: #fe590f; 

	color: #fff;
}
.cont-book .block-books .box-book .text .status .close {
	background: #222; 

	color: #fff;
}
.cont-book .block-books .box-book .text dl {
	overflow: hidden;

	font-size: 1.3rem;
}
.cont-book .block-books .box-book .text dt {
	float: left;

	width: 5em;
	margin: 0 0 5px;

	font-weight: bold; 
	line-height: 1.3;
}
.cont-book .block-books .box-book .text dd {
	margin: 0 0 5px 5em;

	line-height: 1.3;
}
.cont-book .block-books .box-book .mod-button {
	width: 200px;
	margin-top: 10px;
	padding: 7px 0;
}

@media print, screen and (max-width: 767px) {
	.cont-only-pc {
		min-height: calc(100vh - 210px); 
		margin: 15px;
	}
}

@media print, screen and (max-width: 767px) {
	.cont-error {
		min-height: calc(100vh - 210px); 
		margin: 15px;
	}
}