.strongest { font-size: 170%; }
.stronger { font-size: 150%; }
.strong { font-size: 120%; }
.slightly { font-size: 110%; }
.normal { font-size: 100%; }
.softer { font-size: 95%; }
.soft { font-size: 90%; }
div.soft { font-size: 90%; }
.weak { font-size: 80%; }
.weaker { font-size: 75%; }
.letter-tightest { letter-spacing: -0.15em; }
.letter-tighter  { letter-spacing: -0.05em; }
.letter-tight    { letter-spacing: -0.025em; }
.letter-loose     { letter-spacing: 0.3em; }
.letter-looser    { letter-spacing: 0.5em; }
.letter-loosest   { letter-spacing: 1em; }
.nobreak { display:inline-block; }
.linebreak { line-break: strict; }
.indent { text-indent: 1em; }
.bg-lightblue {background-color: #81B2DF;}
.split {
    display: flex;
    gap: 1rem;
    margin: 0 1em;
}
.line-height-normal { line-height: 1.5; }
.line-height-tight  { line-height: 1.2; }
.line-height-loose  { line-height: 1.8; }
.split > div {
    flex: 1;
}
.align-center {
    align-items: center;
}

.white-box {
    background-color: #fff;
    border-radius: 15px;
    margin: 1em 0;
    padding: .8em;
}
.white-block {
    background-color: #fff;
    padding: .8em 1em;
}
.orange-block {
    background-color: #F8CBAD;
    padding: .8em 0;
    margin: 1em .2em;
}
.text-box {
    padding: 1em;
}
.triangle {
    width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-top: 15px solid #0070C0;

    margin: 0 auto;
}
.dot-line {
    border-bottom: 3px dotted #000;
    width: 95%;
    margin: 20px auto;
    height: 0;
}

html {
    font-size: 16px;
}
body {
    margin: 0;
    font-family:
    "Helvetica Neue",
    "Helvetica",
    "Arial",
    "Hiragino Sans",
    "Hiragino Kaku Gothic ProN",
    "Meiryo",
    sans-serif;
}
body.bg-blue {
    background-color: #EAF2FA;
}
body.bg-white {
    background-color: #fff;
}
body.bg-grey {
    background-color: #D9D9D9;
}

h1, h2, h3, h4 {
    margin: 0;
    line-height: 2;
}
h2 {
    font-size: 1.3em;
}
h3 {
    font-size: 1.2em;
}
h4 {
    font-size: 1.1em;
}
p {
    font-size: 1em;
}
.base {
    max-width: 900px;
    margin: 0 auto;
}
.site-header {
    width: 100%;
}
.page-header {
    text-align: right;
    max-width: 750px;
    display: block;
    margin: 0 auto;
}
.page-header .title {
    background: linear-gradient(to right, #62A0D8, #CBD3F1);
    display: flex;
    justify-content: space-between;
    color: #fff;
    font-size: 120%;
    text-indent: .8em;
    font-weight: 600;
    align-items: center;
}
.page-header .subtext {
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    padding: .5em 1em;
    font-size: 70%;
}
.recruit-medical-contents .overview {
    background-color: #F8F8E8;
    padding: 5% 3%;
    margin: 0 auto;
    margin-bottom: 5%;
    max-width: calc(750px - 6%);
}
.recruit-medical-contents .overview .title {
    border-bottom: 1px solid #c3c3c3;
    padding-bottom: 2%;
    margin: 3% 1em;
}
.page-content {
    margin: 20px 3%;
    margin-bottom: 5vh;
}
.page-title {
    text-align: center;
    font-size: 1rem;
    margin-bottom: 1em;
}
.page-title.left {
    text-align: left;
}
.page-content h2 {
    line-height: 1.5;
}
.page-intro {
    max-width: 50em;
    font-size: 75%;
    margin: .5em 1em;
}

/*********** login logout common ***********/
button.auth-button {
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	font-weight: bold;
	border: 3px solid #3B87CD;
	color: #3B87CD;
    background-color: #fff;
	cursor: pointer;
	position: relative;
    overflow: hidden;
    z-index: 1;
    margin: .5em;
    padding: .5em;
}
button.auth-button::after {
    font-family: "Material Symbols Rounded";
    vertical-align: middle;
    font-size: 120%;
    margin-left: .5em;
}
button#loginBtn.auth-button::after {
    content: "\ea77";
}
button#logoutBtn.auth-button::after {
    content: "\e9ba";
}
button.auth-button::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #3B87CD;
	transform: translateX(-100%);
	transition: all .3s;
	z-index: -1;
}
button.auth-button:hover::before {
	transform: translateX(0);
}
button.auth-button:hover {
	color: #fff;
}
/*********** /login logout common ***********/


/*********** login ***********/
.circles {
    position: fixed;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}
.circle-orange {
    background-color: #FFC000;
    position: absolute;
    top: 30vw;
    right: -60vw;
    width: 120vw;
    border-radius: 50%;
    z-index: 1;
    aspect-ratio: 5 / 4;
}
.circle-green {
    background-color: #009999;
    position: absolute;
    top: 30vw;
    left: -60vw;
    width: 150vw;
    border-radius: 50%;
    z-index: 1;
    aspect-ratio: 5 / 4;
}
@media (max-width: 450px) {
    .circle-orange {
        width: 300vw;
        top: 80vw;
        right: -160vw;
        aspect-ratio: 1 / 3;
    }

    .circle-green {
        width: 300vw;
        top: 80vw;
        left: -160vw;
        aspect-ratio: 1 / 3;
    }
}

.login-font {
    font-family:
    "Kiwi Maru",
    "Hiragino Maru Gothic ProN",
    "Meiryo UI",
    "Meiryo",
    "Yu Gothic UI",
    "Yu Gothic",
    sans-serif;
}

.login-form {
    background-color: #fff;
    border-radius: 30px;
    border: 1px solid #d4d4d4;
    width: 40%;
    min-width: 260px;
    margin: 0 auto;
    color: #009999;
    font-weight: bold;
    box-shadow: var(--shadow-small);

    padding: 2em 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    top: 30vh;
    z-index: 1;
}
.login-form .title,
.login-form .button {
    flex: 2;
}
.login-form .mail,
.login-form .password {
    flex: 3;
    margin: .5em 0;
    text-align: left;
}
.login-form .title {
    margin-bottom: 2em;
}
.login-form .button {
	font-weight: bold;
	border: 2px solid #009999;
    border-radius: 10px;
	color: #009999;
    background-color: #fff;
	cursor: pointer;
	position: relative;
    overflow: hidden;
    z-index: 1;
    margin: .5em;
    margin-top: 1em;
    padding: .5em;
    width: 8em;
}
.login-form .button::after {
    font-family: "Material Symbols Rounded";
    content: "\ea77";
    vertical-align: middle;
    font-size: 120%;
    margin-left: .5em;
}
.login-form input {
    border-radius: 5px;
    border: 1px solid #009999;
    padding: .5em;
}
.login-form .button::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #009999;
	transform: translateX(-105%);
	transition: all .3s;
	z-index: -1;
}
.login-form .button:hover::before {
	transform: translateX(0);
}
.login-form .button:hover {
	color: #fff;
}
/*********** /login ***********/




/*********** recruit ***********/
.recruit-highlight {
    color: #0062AC;
    font-weight: bold;
}
.recruit-list {
    display: flex;
    flex-direction: column;
    margin-left: 1em;
    text-indent: -1em;
}
.recruit-list .list::before {
    content: "�E";
}
.recruit-list-bold {
    display: flex;
    flex-direction: column;
    margin-left: 1em;
    text-indent: -1em;
}
.recruit-list-bold .list::before {
    content: "��";
}
.recruit-top {
    width: 100%;
    display: block;
}

.recruit-top-img {
    width: 100%;
}
.max-width--w750 {
    max-width: 750px;
    display: block;
    margin: 0 auto;
}
.recruit-top-img--w60 {
    width: 60%;
    margin: 0 20%;
}

.recruit-contents .link-btn {
    display: inline-block;
    position: relative;
    color: #fff;
    background-color: #0077ccFF;
    border-radius: 30px;
    width: 70%;
    margin: 1% 0;
    padding: .5% 0;
    font-size: 95%;
    box-shadow: var(--shadow-small);
    text-align: center;
    padding-left: .5em;
    text-decoration: none;
    line-height: 1.5;
}
.recruit-contents .link-btn::after {
    content: "\eaaa";
    font-family: "Material Symbols Rounded";
    font-size: 180%;
    margin-left: 2%;
    font-weight: 300;
    display: inline-block;
    vertical-align: middle;
}
.recruit-contents .form-btn {
    margin: 5% auto;
}

.recruit-contents {
    display: flex;
    flex-direction: column;
    font-size: clamp(14.4px, 2vw, 16px);
}
.recruit-contents.gap {
    gap: 3px;
}
.recruit-contents .content {
    display: flex;
}
.content-columns .content {
    flex-direction: column;
}
.recruit-contents.content-columns .label {
    width: 100%;
    justify-content: left;
    padding: .2em 0;
    text-indent: .5em;
}
.recruit-contents .label {
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40%;
}
.recruit-contents .label.column {
    flex-direction: column;
}
.recruit-contents .text {
    background-color: #fff;
    width: 94%;
    /* max-width: 50em; */
    padding: 1.2em 3%;
    letter-spacing: -0.05em;
}
.recruit-contents .text a {
    text-decoration: none;
}
.recruit-contents ul {
    padding-left: 0em;
    margin: 0;

    list-style: none;
}
.recruit-contents li {
    line-height: 1.5;
    margin: 0;
    text-indent: -1em;
    padding-left: 1em;
}
.recruit-contents li.no-marker::before {
    content: "";
    padding-left: 1em;
    text-indent: 0;
}
.recruit-contents li.star::before {
    content: "��";
}
ul li::before {
    content: "�E";
    width: 1em;
    text-align: left;
}

.recruit-details {
    margin-bottom: 6%;
}
.recruit-details summary {
    list-style: none;
    display: flex;
    align-items: stretch;
    color: #fff;
    margin-bottom: 3px;
    line-height: 2.5;
}
.recruit-details summary .label {
    width: 40%;
    font-size: clamp(16px, 2vw, 17px);
    display: flex;
    justify-content: center;
    align-items: center;
}
.recruit-details summary .marker {
    background-color: #fff;
    color: #000;
    width: 98%;
    max-width: 50em;
    text-align: right;
    display: flex;
    align-items: center;
    padding-left: 2%;
}
.recruit-details summary .marker .parts-area {
    flex: 8.5;
    text-align: left;
}
.recruit-details summary .marker .parts-mark {
    flex: 1.5;
    text-align: center;
    background-color: #e8e8e8;
    max-width: 30px;
}

.display-medical
, .display-neoteras
, .display-sunlife {
    margin-top: 0;
    margin-bottom: 0;
}
.recruit-medical-contents .label
, .recruit-medical-contents  .link-btn
, .recruit-medical-contents .recruit-details .label {
    background-color: #2E75B6;
}
.recruit-medical-contents .recruit-details .recruit-contents .label {
    background-color: #6FA8DB;
}

.recruit-outpatient-contents .label {
    background-color: #44546A;
}
.recruit-general-contents .label {
    background-color: #FF6699;
}
.recruit-longterm-contents .label {
    background-color: #F9CB07;
}

.recruit-neoteras-contents .label {
    background-color: #0070C0
}
.recruit-neoteras-contents .link-btn
, .recruit-neoteras-contents .recruit-details .label {
    background-color: #FF6699;
}
.recruit-neoteras-contents .recruit-details .recruit-contents .label {
    background-color: #FF8BB2;
}

.recruit-sunlife-contents .label
, .recruit-sunlife-contents .link-btn
, .recruit-sunlife-contents .recruit-details .label {
    background-color: #00B050;
}
.recruit-sunlife-contents .recruit-details .recruit-contents .label {
    background-color: #00D25F;
}

.recruit-sunlife-contents .memo {
    font-size: 80%;
    margin-bottom: 5%;
}


.recruit-other-contents .banners {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.recruit-other-contents .banner {
    width: 100%;
    max-width: 400px;
}

.recruit-other-contents .label {
    display: flex;
    justify-content: center;
    border-radius: 30px;
    background-color: #002060;
    color: #fff;
    padding: 0 3em;
    z-index: 1;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 10em;
}
.recruit-other-contents .text {
    border-radius: 10px;
    background-color: #fff;
    border: 2px solid #002060;
    padding: 5% 2%;
    position: relative;
    margin: 0 auto;
}

.table-img {
    width: 100%;
}

.sunlife-floor-content {
    display: flex;
    width: 100%;
}
.sunlife-floor-content * {
    width: 50%;
}

/* private */
.private .recruit-contents {
    gap: 8px;
}
.private .recruit-contents .content {
    flex-direction: column;
}
.private .recruit-contents .label {
    writing-mode: unset;
    letter-spacing: 0em;
    padding: .3em .5em;
}
.private.recruit-medical-contents .label {
    background-color: #FF9900;
}
.private.recruit-neoteras-contents .label {
    background-color: #FF6699;
}
.private.recruit-sunlife-contents .label {
    background-color: #00B050;
}
/* /private */

/*********** /recruit ***********/