@charset "utf-8";

/* =========================================================================================
page-header
=========================================================================================*/
.page-header{
    background: url(../images/page_header.jpg) no-repeat;
    background-position: center bottom 5%;
    background-size: 100% auto;
}
.page-header .inner{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-block: 30px;
    aspect-ratio: 1920 / 530;
    max-height: 415px;
}
.page-header .inner h1{
    text-align: center;
    color: var(--base-bg-color);
    margin: 0;
    font-size: clamp(0.75rem, 0.2rem + 1.88vi, 1.375rem);
    filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.4));
}
.page-header .inner .sub-title{
    display: block;
    font-size: clamp(2.438rem, 0.733rem + 5.827vi, 4.375rem);
}
@media only screen and (max-width:820px){
    .page-header .inner{
        aspect-ratio: 390 / 165;
        max-height: 260px;
    }
}
@media only screen and (max-width:468px){
    .page-header{
        background: url(../images/page_header_sp.jpg) no-repeat center bottom;
        background-size: cover;
    }
    .page-header .inner{
        max-height: 165px;
    }
}


/* =========================================================================================
midashi
=========================================================================================*/
.mid-l{
    font-size: var(--26px);
}
.mid-m{
    font-size: var(--20px);
}
.mid-s{
    font-size: var(--26px);
}
section .inner h2 {
    font-size: clamp(1.688rem, 0.973rem + 2.444vi, 2.5rem);
    color: var(--main-color);
    font-weight: normal;
}

.h2_2{
    font-size: clamp(1.388rem, 0.573rem + 2.444vi, 2.0rem)!important;
    color: #000000 !important;
    font-weight: 600 !important;
    border-bottom: #000000 2px solid;
    padding-bottom: 0.3em;
}
@media only screen and (max-width:820px){

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

}




/* =========================================================================================
Breadcrumbs
=========================================================================================*/
.breadcrumbs{
    color: var(--base-font-color);
    font-size: smaller;
    padding-block: 50px;
}
.breadcrumbs ul{
    display: flex;
    flex-wrap: wrap;
    gap: 2.0em;
    margin: 0;
}
.breadcrumbs li{
    position: relative;
}
.breadcrumbs li::after{
	content: "";
	position: absolute;
	top: 50%;
	right: -1.6em;
	width: 11px;
	height: 11px;
	transform: translateY(-37.5%);
	background: url(../images/common/arrow_right_pankuzu.svg) no-repeat;
	background-size: 85%;
}
.breadcrumbs li:last-child:after{
	display: none;
}
.breadcrumbs a {
    color: var(--base-font-color);
}

@media only screen and (max-width:820px){
    .breadcrumbs{
        padding-block: 30px;
    }
}
@media only screen and (max-width:468px){
    .breadcrumbs{
        padding-block: 25px;
    }
    .breadcrumbs ul {
        justify-content: center;
    }
}


/* =========================================================================================
会社情報
=========================================================================================*/
body.company .message p:nth-child(3),body.company .message p:nth-child(4) {
    margin-top: 30px;
}
body.company .message p.president {
    text-align: center;
    margin-top: 10px;
    line-height: 120%;
}
body.company .message p.president span {
    font-size: clamp(0.8rem, 0.913rem + 0.94vi, 0.9rem);
    font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
body.company .message p.president b {
    font-size: clamp(1.438rem, 1.053rem + 1.316vi, 1.5rem);
     font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
    
}

.president_text{
     font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

body.company .profile dl {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}
body.company .profile dl dt,
body.company .profile dl dd {
    display: block;
    box-sizing: border-box;
    margin: 0;
}
body.company .profile dl dt {
    width: 15%;
    -moz-text-align-last: justify;
    text-align-last: justify;
    text-justify:inter-ideograph;
}
body.company .profile dl dd {
    margin-left: 40px;
    width: 70%;
}
body.company .group-company .btn {
    justify-content: left;
    margin-top: 0.5em;
}
body.company .office-location ul {
    display: flex;
    justify-content: space-between;
}
body.company .office-location ul li h3 {
    margin: 10px 0;
    font-size: clamp(1rem, 0.67rem + 1.128vi, 1.375rem);
}
body.company .office-location ul li p {
    font-size: clamp(0.938rem, 0.883rem + 0.188vi, 1rem);
}
@media only screen and (max-width:820px){
    body.company .message h2+p {
        line-height: 2.3;
    }
    body.company .profile dl dt {
        width: 30%;
        white-space: nowrap;
    }
    body.company .profile dl dd {
        margin-left: 40px;
        width: 50%;
    }
    body.company .office-location ul {
        flex-wrap: wrap;
        gap: 50px;
    }
    body.company .office-location li {
        width: 100%;
    }
    body.company .office-location iframe {
        width: 100%;
    }
}


/* =========================================================================================
メディエスにできること
=========================================================================================*/
body.about h2 + p {
    margin-bottom: 3.0em;
}
body.about h3 + p {
    margin-bottom: 3.0em;
}
body.about h6 + p {
    margin-bottom: 3.0em;
}

body.about section h3 {
    color: var(--base-bg-color);
    font-size: clamp(1.125rem, 0.74rem + 1.316vi, 1.563rem);
    padding: 10px 20px;
    border-radius: 20px;
}
body.about h3.kaishuu+picture,
body.about h3.tenken+picture,
body.about h3.shuuri+picture {
bottom: 85px;
}
body.about h3.kaishuu {
    background-color: #3083AF;
}
body.about h3.tenken {
    background-color: #039346;
}
body.about h3.shuuri {
    background-color: #F15A25;
}
body.about h3.kanri {
    background-color: #FBD220;
}
body.about h3.system {
    background-color: #909090;
}
body.about h3.rental {
    background-color: #E59274;
}
body.about .system-service ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px 2%;
}
body.about .system-service ul li {
    padding: 20px;
    width: 32%;
    border: 2px solid #ADADAD;
    border-radius: 20px;
    display: flex;
    align-items: start;
    justify-content: space-between;
}
body.about .system-service .image {
    width: 30%;
}
body.about .system-service .image img{
    margin: auto;
}
body.about .system-service .text {
    width: 65%;
}
body.about .system-service .text h4 {
    margin: 0 0 10px;
    font-size: clamp(1.125rem, 1.015rem + 0.376vi, 1.25rem);
}
body.about .system-service .text p {
    font-size: clamp(0.813rem, 0.758rem + 0.188vi, 0.875rem);
    line-height: 1.5;
}
body.about .system-service .text02 {
    width: 100%;
}
body.about .system-service .text02 h4 {
    margin: 0 0 10px;
    font-size: clamp(1.125rem, 1.015rem + 0.376vi, 1.25rem);
}
body.about .system-service .text02 p {
    font-size: clamp(0.813rem, 0.758rem + 0.188vi, 0.875rem);
    line-height: 1.5;
}

body.about .system-service .text02 h4 span {
font-size: 70%;
color: #A7383B;
}

@media only screen and (max-width:820px){
        body.about .hospital-device-outsourcing img{
        width: 100%;
        max-width: var(--minimum-contents-width);
        margin: auto;
    }
    body.about .system-service ul {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 20px;
    }
    body.about .system-service ul li{
        width: 100%;
    }
}
@media only screen and (max-width:468px){
    body.about .system-service .image {
        width: 20%;
    }
    body.about .system-service .text {
        width: 75%;
    }
}


/* =========================================================================================
採用情報
=========================================================================================*/
body.recruit .voice ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 100px 0;
}
body.recruit .voice ul li {
    width: 48%;
}
body.recruit .voice a .photo img {
    border-radius: 20px;
}
body.recruit .voice a h3 {
    margin-top: 20px;
    color: var(--main-color);
    font-size: clamp(1.125rem, 1.015rem + 0.376vi, 1.25rem);
    background: url(../images/recruit_voice_arrow_right.svg) no-repeat center right;
}
body.recruit .voice a p {
    color: var(--base-font-color);
}
body.recruit .staff figcaption {
    margin-top: 40px;
    text-align: center;
    font-weight: bold;
    font-size: clamp(1.25rem, calc(0.975rem + 0.94vw), 1.563rem); /* min: 20px, max: 25px */;
}
body.recruit .staff h2 {
    font-size: clamp(1.688rem, calc(0.973rem + 2.444vw), 2.5rem); /* min: 27px, max: 40px */;
    font-weight: bold;
    text-align: center;
}
body.recruit .staff h3 {
    margin-top: 130px;
    padding-bottom: 5px;
    font-size: clamp(1.563rem, calc(1.288rem + 0.94vw), 1.875rem); /* min: 25px, max: 30px */;
    font-weight: normal;
    border-bottom: 2px solid var(--main-color);
    color: var(--main-color);
}
body.recruit .voice a:hover{
    opacity: 0.8;
}
body.recruit .staff .btn {
    margin-top: 60px;
    margin-inline: auto;
}
.tab-container {
    max-width: 100%;
    margin: 20px auto;
}
.tab-buttons {
    display: flex;
    gap: 30px;
    justify-content: space-between;
}
.tab-btn {
    padding: 10px;
    border: none;
    cursor: pointer;
    transition: background 0.3s;
    width: 50%;
    border-radius: 20px 20px 0 0;
    color: white;
    font-weight: bold;
    font-size: clamp(1.25rem, 0.975rem + 0.94vi, 1.563rem);
}
.tab-btn.career {
    background: #A5DFB8;
}
.tab-btn.part {
    background: #F5D3C7;
}
.tab-btn.career.active {
    background-color: var(--accent-color);
}
.tab-btn.part.active {
    background-color: #E59274;
}
.tab-btn.career:hover {
    background: var(--accent-color);
}
.tab-btn.part:hover {
    background: #E59274;
}
.tab-content {
    position: relative;
}
.tab-pane {
    display: none;
    padding: 20px 20px 50px;
    background: #fff;
    width: 100%;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
.tab-pane.career {
    border: 3px solid var(--accent-color);
}
.tab-pane.part {
    border: 3px solid #E59274;
}
.tab-pane.active {
    display: block;
    opacity: 1;
}
.tab-content table {
    margin-top: 0;
    width: 95%;
    margin-inline: auto;
}
.tab-content .btn {
    margin-inline: auto;
}
.tab-pane.part .btn a {
    background-color: #E59274;
}

@media only screen and (max-width:820px){
    body.recruit .voice ul {
        gap: 50px 0;
    }
    body.recruit .voice ul li {
        width: 100%;
    }
    body.recruit .staff h2 {
        text-align: left;
    }
    body.recruit .staff figcaption {
        margin-top: 20px;
    }
    body.recruit .staff h3 {
        margin-top: 60px;
    }
}
@media only screen and (max-width:468px){

}


/* =========================================================================================
お問い合わせ
=========================================================================================*/
body.contact main section .inner{
    max-width: var(--small-contents-width);
}
body.contact .btn {
    margin-top: 60px;
    margin-inline: auto;
}
body.contact section a {
    text-decoration: underline;
}
body.contact section a:hover {
    text-decoration: none;
}
@media only screen and (max-width:820px){

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

}

/* =========================================================================================
プライバシーポリシー
=========================================================================================*/
body.privacy section h2{
    margin-top: 50px;
    padding-bottom: 10px;
    font-size: clamp(1.125rem, calc(0.795rem + 1.128vw), 1.5rem); /* min: 18px, max: 24px */;
    border-bottom: 2px solid var(--main-color);
}
body.privacy section p+ul{
    margin-top: 20px;
}
body.privacy section ul li {
    margin-left: 30px;
    list-style: disc;
}
.policy-date {
    text-align: right;
    margin-top: 30px;
}
body.privacy section a {
    text-decoration: underline;
}
body.privacy section a:hover {
    text-decoration: none;
}
@media only screen and (max-width:820px){

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

}

/* =========================================================================================
NEWS
=========================================================================================*/
body.news .entry-header{
    margin-bottom: 50px;
}
body.news .entry-header h2{
    margin-bottom: 0.25em;
}
body.news .entry-header .data{
    color: #8B8B8B;
    font-size: clamp(0.75rem, 0.43rem + 1.093vi, 1.25rem);
    font-weight: 600;
}
body.news section p + p {
    margin-top: 1.0em;
}
body.news section a {
    text-decoration: underline;
}
body.news section a:hover {
    text-decoration: none;
}
@media only screen and (max-width:820px){

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

}




.tab-content ul{
margin-bottom: 10px;
margin-top: 5px;
}

.tab-content ul li{
position: relative;
line-height: 100%;
margin-bottom: 10px;
}

.tab-content ul li span{
background: #1EAF4E;
color: #fff;
padding: 0.1em 0.5em 0.2em 0.5em;
font-size: 90%;
border-radius: 10px;
margin-left: 0.5em;
}

.pcimg{
width: 200px;
position: absolute;
top: -60px;
right: 20px;
}

@media only screen and (max-width:820px){
.pcimg{
width: 200px;
position: static;
top: auto;
right: auto;
display: block;
margin: 0 auto;
margin-top: -40px;
margin-bottom: 30px;
}
}



.message_2c{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
flex-direction: row-reverse;
}

.message_2c div:nth-of-type(2){
width: 78%;
}

.message_2c div:nth-of-type(1){
width: 18%;
}

@media only screen and (max-width:820px){
.message_2c{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
flex-direction: row-reverse;
}

.message_2c div:nth-of-type(2){
width: 100%;
}

.message_2c div:nth-of-type(1){
width: 100%;
margin-bottom: 20px;
}

.message_2c div:nth-of-type(1) img{
padding: 0 20%;
}
}