@charset "utf-8";
/*-------------------------
  斗南堂グループについて /about/
-------------------------*/
/*mv*/
.page-mv.about .content-title{
    color: var(--main-color);
    text-shadow: 0px 0px 15px rgba(255, 255, 255, 0.5),0px 0px 15px rgba(255, 255, 255, 1);
    -webkit-text-stroke: 4px #ffffff;
    paint-order: stroke;
}
.page-mv.about .content-subtitle{
    color: var(--main-color);
    -webkit-text-stroke: 2px #ffffff;
    paint-order: stroke;
}
.page-mv.about .sub-title{
    position: absolute;
    right: 2em;
    bottom: 1em;
    line-height: 1.2;
    font-size: var(--content-title);
    color: var(--main-color);
    text-shadow: 0px 0px 15px rgba(255, 255, 255, 0.5),0px 0px 15px rgba(255, 255, 255, 1);
    -webkit-text-stroke: 4px #ffffff;
    paint-order: stroke;
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 767px) {
    .page-mv.about .sub-title{
        display: none;
    }
}
/*END mv*/
/*keyvisual-01*/
#about{
    position: relative;
    overflow: hidden;
}
#about .keyvisual-01{
    top: -18.75cqw;
    right: -20cqw;
    width: 49.58cqw;
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 767px) {
    #about .keyvisual-01{
        display: none;
    }
}
/*END keyvisual-01*/

/*philosophy*/
#about #philosophy{
    padding-bottom: calc(var(--margin) * 5);
}
#about .philosophy-li li{
    width: 49%;
    display: grid;
}
#about .philosophy-li li:first-child{
    place-items: center;
    text-align: center;
    min-height: 230px;
}
#about .philosophy-li li:first-child img{
    width:69.66%;
}
#about .philosophy-li-titel{
    margin-bottom: 1em;
    font-weight: 500;
    font-size: var(--fs-8l);
}
@media screen and (max-width: 768px) {
    
}
@media screen and (max-width: 767px) {
    #about .philosophy-li{
        flex-wrap: wrap;
        gap: calc(var(--margin) * 2);
    }
    #about .philosophy-li li{
        width: 100%;
    }
    #about .philosophy-li li:first-child{
        min-height: auto;
        padding: calc(var(--margin) * 2);
    }
    #about .philosophy-li-titel{
        font-size: var(--fs-ll);
    }
}
/*END philosophy*/

/*thought*/
#about #thought{
    padding-bottom: calc(var(--margin) * 10);
}
#about #thought .thought-li li:first-child{
    max-width: 484px;
    width: 40.33%;
}
#about #thought .thought-li li:first-child img{
    margin-top: 5%;
}
#about #thought .thought-li li:nth-child(2){
    max-width: 650px;
    width: 54.16%;
    position: relative;
    padding-top: calc(var(--margin) * 15)
}
#about #thought .thought-li .thought-li-lead{
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    white-space: nowrap;
}
#about #thought .thought-li-color{
    margin-left: calc(var(--margin) * 2);
    margin-bottom:  calc(var(--margin) * 5);
    white-space: nowrap;
}
#about #thought .thought-li-color:last-of-type{
    margin-bottom: 0;
}
#about #thought .thought-li .thought-li-color-title{
    position: relative;
    font-size: var(--fs-l);
}
#about #thought .thought-li .thought-li-color-title .thought-li-color-title-w,
#about #thought .thought-li .thought-li-color-title .underline{
    display: inline-block;
}
#about #thought .thought-li .thought-li-color-title img{
    position: absolute;
    top: 0.7em;
    left:-0.5em;
    width: 365px;
    height: auto;
    transform: translateX(-100%);
}
#about #thought .thought-li .blue .thought-li-color-title{
    color: var(--main-color);
}
#about #thought .thought-li .blue .thought-li-color-title .underline{
    border-bottom: solid 1px var(--main-color);
    line-height: 1.6;
}
#about #thought .thought-li .green .thought-li-color-title{
    color: #4E9812;
}
#about #thought .thought-li .green .thought-li-color-title .underline{
    border-bottom: solid 1px #4E9812;
}
#about #thought .thought-li .red .thought-li-color-title{
    color: #FF4141;
}
#about #thought .thought-li .red .thought-li-color-title .underline{
    border-bottom: solid 1px #FF4141;
}
#about #thought .thought-li .red .thought-li-color-title img{
    top: 1.3em;
    transform: translateY(-100%) translateX(-100%);
}
@media screen and (max-width: 1310px) {
    #about #thought .thought-li li:nth-child(2){
        width: 54.16%;
    }
    #about #thought .thought-li .thought-li-lead{
        width: auto;
    }
    #about #thought .thought-li-color{
        margin-bottom: calc(var(--margin) * 3.8);
    }
    #about #thought .thought-li .thought-li-color-title img{
        width: 27.8625cqw;
    }
}
@media screen and (max-width: 768px) {
    
}
@media screen and (max-width: 767px) {
    #about #thought{
        padding-bottom: calc(var(--margin) * 5);
    }
    #about #thought .thought-li{
        flex-wrap: wrap;
    }
    #about #thought .thought-li li:first-child,
    #about #thought .thought-li li:nth-child(2){
        max-width: 100%;
        width: 100%;
        padding-top: 0;
    }
    #about #thought .thought-li .thought-li-color-title img{
        display: none;
    }
    #about #thought .thought-li .thought-li-lead {
        position: relative;
        top: 0;
        right: 0;
        width: 100%;
        white-space:normal;
        margin-bottom:  calc(var(--margin) * 2);
    }
    #about #thought .thought-li .keyvisual{
        width: 78.7179cqw;
        margin: 0 auto calc(var(--margin) * 2);
    }
    #about #thought .thought-li-color{
        white-space:normal;
    }
    #about #thought .thought-li .thought-li-color-title{
        font-size: var(--fs-7l);
    }
    #about #thought .thought-li .blue .thought-li-color-title .underline{
        margin-bottom: 0.5em;
    }
    #about #thought .thought-li .thought-li-color-title .thought-li-color-title-w{
        width: 3em;
    }
    #about #thought .thought-li .thought-li-color-title .subtitle{
        margin-left: 1em;
        font-size: var(--fs-ll);
        color: var(--txt-color);
    }
    #about #thought .thought-li-color{
        margin-left: 0;
        margin-bottom: calc(var(--margin) * 4);
    }
}
/*END thought*/

/*origin*/
#about #origin{
    padding-bottom: calc(var(--margin) * 10);
}
@media screen and (max-width: 768px) {
    
}
@media screen and (max-width: 767px) {
    #about #origin{
        padding-bottom: calc(var(--margin) * 5);
    }
}
/*END origin*/

/*thinking*/
#about #thinking{
    padding-bottom: calc(var(--margin) * 10);
}
#about #thinking .thinking-lead{
    margin-bottom: calc(var(--margin) * 4);
    color: var(--main-color);
    font-weight: 500;
}
#about #thinking .thinking-lead p{
    font-size: var(--fs-4l);
}
#about #thinking .thinking-li{
    flex-wrap: wrap;
    align-items: flex-start;
    align-items: stretch;
    gap: calc(var(--margin) * 3) 0;
    margin-bottom: calc(var(--margin) * 5);
}
#about #thinking .thinking-li > li{
    width: 32.1666%;
    padding: calc(var(--margin) * 4) 1em calc(var(--margin) * 3);
    position: relative;
    text-align: center;
}
#about #thinking .thinking-li > li .num{
    position: absolute;
    top: 0;
    left: 0;
    width: calc(var(--margin) * 5);
    height: calc(var(--margin) * 5);
    display: grid;
    place-content: center;
    background: var(--main-color);
    border-radius: 0 0 var(--margin) 0;
    line-height: 1;
    color: var(--base-color);
    font-size: var(--fs-4l);
}
#about #thinking .thinking-li > li .img{
    width: 26.4427%;
    margin: 0 auto calc(var(--margin) * 2);
}
#about #thinking .thinking-li .thinking-li-title{
    height: 3em;
    line-height: 1.4;
    color: var(--main-color);
    font-size: var(--fs-4l);
    font-weight: 500;
}
#about #thinking .thinking-li .thinking-li-button{
    padding: 0 1.5em;
    border-radius: 100vmax;
    background: var(--main-color);
    color: var(--base-color);
    font-size: var(--fs-s);
    font-weight: 500;
    transition:var(--transition);
}
#about #thinking .thinking-li .thinking-li-button:hover{
    opacity: 0.8;
}
.modal-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 3000;
    opacity: 0;
    transition: .5s;
}
.modal-overlay:not([hidden]) {
    opacity: 1;
}
#about #thinking .detail-modal {
    padding: 3em calc(var(--margin) * 4);
    background: none;
    z-index: 4000;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .5s ease, transform .5s ease;
}
#about #thinking .detail-modal.active {
    opacity: 1;
    transform: translateY(0);
}
#about #thinking .thinking-modal-inner {
    max-width: 900px;
    padding: calc(var(--margin) * 10) calc(var(--margin) * 6);
    margin: auto;
    position: relative;
    border-radius:calc(var(--margin) * 4);
    background: var(--base-color);
    overflow: hidden;
}
#about #thinking .thinking-modal-li li{
    width: 50%;
    box-sizing: border-box;
}
#about #thinking .thinking-modal-li li.img{
    text-align: center;
}
#about #thinking .thinking-modal-li li.img img{
    max-width: 250px;
}
#about #thinking .thinking-modal-li li.txt{
    padding-left: 1em;;
}
#about #thinking .thinking-modal-txt{
    line-height: 1.5;
    font-size: var(--fs-m);
    font-weight: 500;
}
#about #thinking .detail-modal .num{
    position: absolute;
    top: 0;
    left: 0;
    width: calc(var(--margin) * 9);
    height: calc(var(--margin) * 9);
    display: grid;
    place-content: center;
    background: var(--sub-color);
    border-radius: 0 0 calc(var(--margin) * 4) 0;
    line-height: 1;
    color: var(--main-color);
    font-size: 44px;
}
#about #thinking .thinking-modal-title{
    margin-bottom: 1em;
    color: var(--main-color);
    font-weight: 700;
    font-size: var(--fs-4l);
}
#about #thinking .detail-modal .prev,
#about #thinking .detail-modal .next{
    position: absolute;
    top: 0;
    bottom: 0;
    width: calc(var(--margin) * 8);
    height: calc(var(--margin) * 8);
    margin: auto;
    border: solid 2px var(--line-color);
    border-radius: 100vmax;
    transition: var(--transition);
    opacity: 1;
}
#about #thinking .detail-modal .prev:hover,
#about #thinking .detail-modal .next:hover{
    opacity: .8;
}
#about #thinking .detail-modal .prev img,
#about #thinking .detail-modal .next img{
    width: 100%;
}
#about #thinking .detail-modal .prev{
    left: 0;
    transform: rotate(180deg);
}
#about #thinking .detail-modal .next{
    right: 0;
}
#about #thinking .detail-modal .close{
    position: absolute;
    top: 0;
    right: calc(var(--margin) * 4);
    font-weight: 700;
    font-size: var(--fs-4l);
    color: var(--base-color);
    transition: var(--transition);
    opacity: 1;
}
#about #thinking .detail-modal .close:hover{
    opacity: .8;
}
body.modal-mask{
    height: 100%;
    overflow: hidden;
}
#about #thinking .moredetail-link a{
    gap: 1em;
    color: var(--main-color);
    font-weight: 500;
}
@media screen and (max-width: 768px) {
    
}
@media screen and (max-width: 767px) {
    #about #thinking{
        padding-bottom: calc(var(--margin) * 5);
    }
    #about #thinking .thinking-lead p{
        font-size: var(--fs-3l);
    }
    #about #thinking .thinking-li{
        gap: calc(var(--margin) * 1) 0;
            margin-bottom: calc(var(--margin) * 2);
    }
    #about #thinking .thinking-li > li{
        width: 48.61%;
        padding: calc(var(--margin) * 2) 0.5em 0;
    }
    #about #thinking .thinking-li > li .num{
        width: calc(var(--margin) * 4);
        height: calc(var(--margin) * 4);
    }
    #about #thinking .thinking-li > li .img{
        width: 40%;
    }
    #about #thinking .thinking-li > li .img{
        margin: 0 auto var(--margin);
    }
    #about #thinking .thinking-li .thinking-li-button{
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 0.3em 1.5em;
        border-radius: unset;
    }
    #about #thinking .thinking-li .thinking-li-title{
        margin-bottom: 2.5em;
        font-size: var(--fs-l);
    }
    #about #thinking .detail-modal{
        padding: 3em calc(var(--margin) * 2);
    }
    #about #thinking .thinking-modal-inner {
        padding: calc(var(--margin) * 3) calc(var(--margin) * 2);
    }
    #about #thinking .detail-modal .num{
        width: calc(var(--margin) * 6);
        height: calc(var(--margin) * 6);
        font-size: var(--fs-8l);
    }
    #about .thinking-modal-li{
        flex-wrap: wrap;
        gap: calc(var(--margin) * 2);;
    }
    #about #thinking .thinking-modal-li li{
        width: 100%;
    }
    #about #thinking .thinking-modal-li li.img img{
        width: 30%;
    }
    #about #thinking .detail-modal .prev, #about #thinking .detail-modal .next{
        width: calc(var(--margin) * 4);
        height: calc(var(--margin) * 4);
    }
}
/*END thinking*/

/*hospital*/
#about #hospital{
    padding-bottom: calc(var(--margin) * 10);
}
#about #hospital .hospital-li{
    flex-wrap: wrap;
    align-items: stretch;
    gap: calc(var(--margin) * 3) 0;
    position: relative;
    z-index: 2;
}
#about #hospital .hospital-li > ul{
    width: 49.1666%;
}
#about #hospital .hospital-li-detail{
    align-items: stretch;
    background: var(--base-color);
}
#about #hospital .hospital-li-detail > li:first-child{
    width: 38.983%;
}
#about #hospital .hospital-li-detail > li:nth-child(2){
    width: 61.017%;
    padding: calc(var(--margin) * 3) calc(var(--margin) * 2) calc(var(--margin) * 2) ;
    align-items:flex-start;
}
#about #hospital .hospital-li-detail-title{
    margin-bottom: 1em;
    line-height: 1;
    color: var(--main-color);
    font-weight: 500;
}
#about #hospital .hospital-li-detail .depts{
    margin-bottom: 1em;
    line-height: 1.3;
}
#about #hospital .hospital-li-detail .depts li {
    display: inline-block;
    padding-right: 1em;
    position: relative;
    font-size: var(--fs-xs);
}
#about #hospital .hospital-li-detail .depts li::after {
    content: "/";
    position: absolute;
    right: 0.2em;
    top: 0;
}
#about #hospital .hospital-li-detail .depts li:last-child::after {
    display: none;
}
#about #hospital .hospital-li-detail .depts a{
    text-decoration: underline;
}
#about #hospital .hospital-li-detail .access{
    line-height: 1.4;
    font-size: var(--fs-m);
}
#about #hospital .hospital-li-detail .detail-link{
    margin-top: auto;
    line-height: 1;
}
#about #hospital .hospital-li-detail .detail-link a{
    color: var(--main-color);
}
@media screen and (max-width: 768px) {
    
}
@media screen and (max-width: 767px) {
    #about #hospital{
        padding-bottom: calc(var(--margin) * 5);
    }
    #about #hospital .hospital-li-detail{
        display: block;
        position: relative;
    }
    
    #about #hospital .hospital-li-detail > li:first-child{
        width: 100%;
    }
    #about #hospital .hospital-li-detail > li:nth-child(2){
        width: 100%;
        padding: var(--margin);
    }
    #about #hospital .hospital-li-detail-title{
        font-size: var(--fs-ll);
    }
    #about #hospital .hospital-li-detail .access{
        margin-bottom: 2em;
        font-size: var(--fs-s);
    }
    #about #hospital .hospital-li-detail .detail-link{
        position: absolute;
        bottom: var(--margin);
        left: var(--margin);
    }
}
/*END hospital*/

/*history*/
#about #history{
    padding-bottom: calc(var(--margin) * 10);
    position: relative;
}
#about #history .keyvisual-02{
    top: -45.6944cqw;
    left: -34.9537cqw;
    width: 69.9074cqw;
}
#about #history .history-li{
    margin-left: 4px;
    border-left: solid 1px var(--line-color);
}
#about #history .history-li > li{
    padding: calc(var(--margin) * 2.5) 0 0 calc(var(--margin) * 2.5);
}
#about #history .history-li .date{
    position: relative;
    color: var(--main-color);
    font-weight: 700;
}
#about #history .history-li .date::before{
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--margin) * -2.5);
    margin: auto;
    transform: translateX(-50%);
    content: "";
    display: block;
    width: 9px;
    height: 9px;
    background: var(--main-color);
    border-radius: 100vmax;
}
#about #history .history-li .history-li-txt{
    padding-bottom: calc(var(--margin) * 2.5);
    border-bottom: solid 1px var(--line-color);
}
@media screen and (max-width: 768px) {
    
}
@media screen and (max-width: 767px) {
    #about #history{
        padding-bottom: calc(var(--margin) * 5);
    }
    #about #history .keyvisual-02{
        display: none;
    }
    #about #history .history-li .date {
        margin-bottom: 0.5em;
    }
    #about #history .history-li > li:not(:first-child){
        padding:1em 0 0 calc(var(--margin) * 2.5);
    }
    #about #history .history-li .history-li-txt{
        padding-bottom: 1em;
    }
}
/*END history*/

/*greeting*/
#about #greeting{
    padding-bottom: calc(var(--margin) * 10);
    position: relative;
}
#about #greeting .keyvisual-03{
    top: -6.9444cqw;
    right: -4.1666cqw;
    width: 49.9074cqw;
}
#about #greeting .greeting-li{
    gap:calc(var(--margin) * 3);
    align-items: stretch;
}
#about #greeting .greeting-li > li{
    width: 50%;
}
#about #greeting .greeting-li > li:first-child{
    border: none;
}
#about #greeting .greeting-li > li:first-child img{
    object-fit: cover;
    width: 100%;
    height: 100%;
}
#about #greeting .greeting-li > li:nth-child(2){
    padding: calc(var(--margin) * 2) 0 0 calc(var(--margin) * 2);
}
#about #greeting .greeting-li .greeting-li-title{
    margin-bottom: 1em;
    line-height: 1;
}
#about #greeting .greeting-li .executive-roles{
    margin-bottom: 2em;
    line-height: 1.4;
    font-size: var(--fs-xs);
}
#about #greeting .greeting-li .greeting-li-txt{
    margin-bottom: calc(var(--margin) * 4);
    font-size: var(--fs-m);
    font-weight: 500;
}
#about #greeting .greeting-li .link{
    gap:calc(var(--margin) * 2);
}
#about #greeting .greeting-li .link a{
    color: var(--main-color);
    font-weight: 500;
}
@media screen and (max-width: 768px) {
    
}
@media screen and (max-width: 767px) {
    #about #greeting{
        padding-bottom: calc(var(--margin) * 5);
    }
    #about #greeting .keyvisual-03{
        width: 83.3333cqw;
        bottom:auto;
        top: 0;
        right: -20cqw;
    }
    #about #greeting .greeting-li{
        flex-wrap: wrap;
        gap: calc(var(--margin) * 2);
    }
    #about #greeting .greeting-li > li{
        width: 100%;
    }
    #about #greeting .greeting-li > li:first-child{
        order: 1;
    }
    #about #greeting .greeting-li > li:nth-child(2){
        padding: 0;
        order: 2;
    }
    #about #greeting .greeting-li .about-li-title{
        font-size: var(--fs-6l);
    }
    #about #greeting .greeting-li .link{
        justify-content: flex-start;
    }
}
/*END greeting*/

/*management*/
#about #management{
}
#about #management .management-table{
    width: 100%;
    border: 1px solid #eee;
	border-collapse: collapse;
}
#about #management .management-table th,
#about #management .management-table td{
    width: 50%;
    padding: 1em 1.5em;
    border: 1px solid #eee;
    font-size: var(--fs-m);
    vertical-align: middle;
}
#about #management .management-table th{
    background: var(--sub-color);
    color: var(--main-color);
    font-weight: 700;
}
@media screen and (max-width: 768px) {
    
}
@media screen and (max-width: 767px) {
    #about #management .management-table,
    #about #management .management-table tbody,
    #about #management .management-table tr,
    #about #management .management-table th,
    #about #management .management-table td{
        display: block;
        width: 100%;
    }
}
/*END management*/

/*-------------------------
  斗南堂グループCEOご挨拶 /about/greet/
-------------------------*/
/*keyvisual-01*/
#greet{
    position: relative;
    overflow-x: clip;
}
#greet .keyvisual-01{
    top: -24.75cqw;
    right: -20cqw;
    width: 49.58cqw;
}
@media screen and (max-width: 768px) {
    
}
@media screen and (max-width: 767px) {
    #greet .keyvisual-01{
        display: block;
        width: 86.15cqw;
        right: -50cqw;
        top: -50cqw;
    }
}
/*END keyvisual-01*/

/*greeting*/
#greet #greeting{
    padding-bottom: calc(var(--margin) * 14);
    position: relative;
}
#greet #greeting .greeting-li{
    gap: calc(var(--margin) * 2);
    align-items: stretch;
}
#greet #greeting .greeting-li > li{
    width: calc(50% - var(--margin));
    margin-bottom: calc(var(--margin) * 4);
    align-items: flex-start;
}
#greet #greeting .slick-dotted.slick-slider{
    margin-bottom: 0;
}
#greet #greeting .slick-dots li button:before{
    width: var(--margin);
    height: var(--margin);
    border-radius: 1em;
    border:solid 1px var(--main-color);
    content:"";
    opacity: 1;
}
#greet #greeting .slick-dots li.slick-active button:before{
    background: var(--main-color);
    opacity: 1;
}
#greet #greeting .greeting-li > li .txt-box{
    line-height: 1.5;
}
#greet #greeting .greeting-li > li .txt{
    margin-bottom: 1em;
}
#greet #greeting .greeting-li .greeting-list-box {
    width: 100%;
    margin-top: auto;
    padding: calc(var(--margin) * 3);
    background: var(--sub-color);
}
#greet #greeting .greeting-li .greeting-list-box > ul > li{
    width: 50%;
}
#greet #greeting .greeting-li .greeting-list-box .name h2,
#greet #greeting .greeting-li .greeting-list-box .name h3{
    line-height: 1.5;
    color: var(--main-color);
    font-weight: 500;
}
#greet #greeting .greeting-li .career li{
    position: relative;
    padding-left: 1.5em;
}
#greet #greeting .greeting-li .career li::before{
    position: absolute;
    top: 0.5em;
    left: 0;
    content: "";
    width: 1em;
    height: 1em;
    border-radius: 100vmax;
    background: var(--main-color);
}
#greet #greeting .keyvisual-02{
    bottom: calc(var(--margin) * -14);
    left: -6.25cqw;
    width: 47.18cqw;
}
@media screen and (max-width: 768px) {
    
}
@media screen and (max-width: 767px) {
    #greet #greeting{
        padding-bottom: calc(var(--margin) * 10);
    }
    #greet #greeting .greeting-li{
        flex-wrap: wrap;
    }
    #greet #greeting .greeting-li > li{
        width: 100%;
        margin-bottom: calc(var(--margin) * 3);
    }
    #greet #greeting .greeting-li .greeting-list-box > ul{
        flex-wrap: wrap;
        gap: calc(var(--margin) * 2);
    }
    #greet #greeting .greeting-li .greeting-list-box > ul > li{
        width: 100%;
    }
    #greet #greeting .greeting-li .career li::before{
        top: 0.2em;
    }
    #greet #greeting .keyvisual-02{
        width: 78.97cqw;
        left: -40cqw;
        bottom:120cqw
    }
}
/*END greeting*/

.content-m-inner{
    max-width: 900px;
    width: var(--content-w);
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
.greet-section-title{
    margin-bottom: calc(var(--margin) * 4);
    line-height: 1;
    text-align: center;
    color: var(--main-color);
}
.greet-section-title .en{
    margin-bottom: calc(var(--margin) * 2);
    font-weight: 500;
    font-size: var(--fs-m);
}
@media screen and (max-width: 768px) {
    
}
@media screen and (max-width: 767px) {
    .greet-section-title .en{
        margin-bottom: var(--margin);
    }
}
/*career*/
#greet #career{
    padding-bottom: calc(var(--margin) * 10);
}
#greet #career .career-li{
    flex-wrap: wrap;
    align-items: stretch;
    font-size: var(--fs-4l);
    font-weight: 700;
}
#greet #career .career-li dt{
    width: 25%;
    padding: 1em 0 0.5em;
    border-bottom: solid 1px #707070;
}
#greet #career .career-li dd{
    width: 75%;
    padding: 1em 0 0.5em;
    border-bottom: solid 1px #707070;
}
#greet #career .career-li dt:first-child,
#greet #career .career-li dd:nth-of-type(1){
    padding: 0 0 0.5em;
}
@media screen and (max-width: 768px) {
    
}
@media screen and (max-width: 767px) {
    #greet #career{
        padding-bottom: calc(var(--margin) * 10);
    }
    #greet #career .career-li{
        font-size: var(--fs-s);
    }
    #greet #career .career-li dt{
        width: 43%;
        padding: 0.75em 0 0.75em;
        display: grid;
        align-items: center;
    }
    #greet #career .career-li dd{
        width: 57%;
        padding: 0.75em 0 0.75em;
    }
}
/*END career*/

/*books*/
#greet #books{
    padding-bottom: calc(var(--margin) * 10);
}
#greet #books .books-li{
    align-items: flex-start;
}
#greet #books .books-li > li:first-child{
    width: 25.55%;
}
#greet #books .books-li > li:nth-child(2){
    width: 64.45%;
}
#greet #books .books-li .books-li-title{
    margin: 0.5em 0 calc(var(--margin) * 2.5);
    font-size: var(--fs-6l);
    font-weight: 700;
}
#greet #books .books-li p{
    margin-bottom: calc(var(--margin) * 2.5);
    font-weight: 500;
}
#greet #books .books-li .link a{
    gap: 1em;
    color: var(--main-color);
    font-weight: 500;
}
@media screen and (max-width: 768px) {
    
}
@media screen and (max-width: 767px) {
    #greet #books{
            padding-bottom: calc(var(--margin) * 10);
    }
    #greet #books .books-li{
        flex-wrap: wrap;
    }
    #greet #books .books-li li:first-child{
        width: 58.97cqw;
        margin: 0 auto;
    }
    #greet #books .books-li > li:nth-child(2){
        width: 100%;
    }
    #greet #books .books-li .books-li-title{
        margin: 1em 0 calc(var(--margin) * 2.5);
        text-align: center;
    }
    #greet #books .books-li p{
        line-height: 2;
    }
    #greet #books .books-li .link a{
        justify-content: center;
    }
}
/*END books*/

/*media*/
#greet #media{
    position: relative;
}
#greet #media .keyvisual-03{
    bottom: -24cqw;
    right: -2.083cqw;
    width: 52.75cqw;
}
@media screen and (max-width: 768px) {
    
}
@media screen and (max-width: 767px) {
    #greet #media .keyvisual-03{
        bottom: -49cqw;
        right: -38.2cqw;
        width: 75.8cqw;
    }
}
/*END media*/

/*-------------------------
  アクセス /about/access/
-------------------------*/
/*keyvisual-01*/
#access,
#hachioji,
#shinmachi,
#shinjuku{
    position: relative;
    overflow-x: clip;
}
#access .keyvisual-01{
    top: -24.75cqw;
    right: -20cqw;
    width: 49.58cqw;
}
#access .keyvisual-02{
    top: -54.86cqw;
    left: -35.13cqw;
    width: 69.78cqw;
}
#access .keyvisual-03{
    top: -28.68cqw;
    right: -3.33cqw;
    width: 49.84cqw;
}
@media screen and (max-width: 768px) {
    
}
@media screen and (max-width: 767px) {
    #access .keyvisual-01,
    #access .keyvisual-02{
        display: none;
    }
    #access .keyvisual-03{
        top: -49cqw;
        right: -38.2cqw;
        width: 75.8cqw;
    }
}
/*END keyvisual-01*/

#access .map .map-title{
    text-align: center;
    color: var(--main-color);
}
#access .map .map-img{
    margin-bottom: calc(var(--margin) * 10);
}
@media screen and (max-width: 768px) {
    
}
@media screen and (max-width: 767px) {
    #access{
        
    }

    #access .map .map-title{
        margin-bottom: calc(var(--margin) * 2);
    }
    #access .map .map-img{
        margin-bottom: calc(var(--margin) * 5);
    }

    #access .silverhills-li{
        flex-wrap:wrap;
    }
    #access .silverhills-li > li{
        width: 100%;
    }
    #access .silverhills-li li:nth-child(2){
        padding: calc(var(--margin) * 3);
    }
    #access .silverhills-li .silverhills-li-title::after{
        width: 7em;
    }
}

/*-------------------------
  八王子クリニック｜新宿 /medical/shinjuku/
-------------------------*/
/*各院共通　keyvisual*/
.aboutshare{
    position: relative;
    overflow-x: clip;
}
.aboutshare .keyvisual-01{
    top: -18.75cqw;
    right: -20cqw;
    width: 49.58cqw;
}
.aboutshare .keyvisual-02{
    left: -33cqw;
    width: 69.78cqw;
}
.aboutshare .keyvisual-03{
    right: -3.4cqw;
    width: 49.84cqw;
}
.aboutshare .keyvisual-05{
    left: -7.5cqw;
    width: 53.26cqw;
}
/*一番下に配置される*/
.aboutshare .keyvisual-04{
    width: 69.78cqw;
    right:-3.4cqw;
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 767px) {
    .aboutshare .keyvisual-01,
    .aboutshare .keyvisual-02,
    .aboutshare .keyvisual-03,
    .medaboutshareical .keyvisual-05{
        display: none;
    }
    .aboutshare .keyvisual-04{
        right: -10cqw;
        width: 75.8qw;
    }
}
/*END 各院共通　keyvisual*/

/*各院共通　medical　診療案内*/
.aboutshare #medical{
    margin-bottom: calc(var(--margin) * 10);
}
.aboutshare #medical .medical-li ul{
    background: var(--base-color);
}
.aboutshare #medical .medical-li:not(:last-of-type){
    margin-bottom: calc(var(--margin) * 2);
}
.aboutshare #medical .medical-li li:first-child{
    width: 38.25%;
}
.aboutshare #medical .medical-li li:nth-child(2){
    width: 56.75%;
}
.aboutshare #medical .medical-li .text-box{
    padding: calc(var(--margin) * 3) calc(var(--margin) * 3) calc(var(--margin) * 3) 0;
}
.aboutshare #medical .medical-li .medical-li-txt{
    gap: 1em;
    font-weight: 500;
}
.aboutshare #medical .medical-li .medical-li-cat .cate{
    display: inline-block;
    min-width: 6em;
    padding: 0.2em 1em;
    margin: 0.5em;
    background: var(--sub-color);
    border-radius: 100vmax;
    text-align: center;
    color: var(--main-color);
    font-size: var(--fs-xxs);
}
.aboutshare #medical .medical-li .lead{
    font-size: var(--fs-ll);
}
.aboutshare #medical .medical-li .txt{
    margin-right: calc(var(--margin) * 8);
    line-height: 1.3;
}
.aboutshare #medical .medical-li .link{
    margin-top: 1em;
}
@media screen and (max-width: 768px) {
    
}
@media screen and (max-width: 767px) {
    .aboutshare #medical{
        margin-bottom: calc(var(--margin) * 5);
    }
    .aboutshare #medical .medical-li ul{
        flex-wrap: wrap;
        gap:calc(var(--margin) * 2);
    }
    .aboutshare #medical .medical-li li:first-child,
    .aboutshare #medical .medical-li li:nth-child(2){
        width: 100%;
    }
    .aboutshare #medical .medical-li .text-box{
        padding: calc(var(--margin) * 2) ;
    }
    .aboutshare #medical .medical-li .txt{
        margin-right: 0;
    }
}
.aboutshare #medical .medical-li-icon-wide{
    margin-top: calc(var(--margin) * 2) ;
    padding-bottom: var(--margin);
    flex-wrap: wrap;
    align-items: stretch;
    gap: calc(var(--margin) * 2);
}
.aboutshare #medical .medical-li-icon-wide > li{
    width: calc(50% - var(--margin));
    position: relative;
}
.aboutshare #medical .medical-li-icon-wide > li a{
    background: var(--base-color);
}
.aboutshare #medical .medical-li-icon-wide .medical-li-cat .cate{
    display: inline-block;
    min-width: 66px;
    padding: 0.2em 1em;
    margin: 0.5em;
    background: var(--sub-color);
    border-radius: 5px;
    text-align: center;
    color: var(--main-color);
    font-size: var(--fs-xxs);
    font-weight: 500;
}
.aboutshare #medical .medical-li-icon-wide > li .img{
    width:26.5%;
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    text-align: center;
}
.aboutshare #medical .medical-li-icon-wide > li .img img{
    width: 53%;
}
.aboutshare #medical .medical-li-icon-wide > li .txt-box{
    width: 67.66%;
    align-items: flex-start; 
}
.aboutshare #medical .medical-li-icon-wide > li .medical-li-cat{
    align-items: flex-start; 
    margin-right: calc(var(--margin) * 3);
}
.aboutshare #medical .medical-li-icon-wide > li .txt-box .link{
    position: absolute;
    right: calc(var(--margin) * 3);
    bottom: calc(var(--margin) * 3);
    gap: 1em;
    color: var(--main-color);
    font-weight: 500;
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 767px) {
    .aboutshare #medical .medical-li-icon-wide > li{
        width: 100%;
    }
    .aboutshare #medical .medical-li-icon-wide > li .txt-box{
        width: 70%;
    }
    .aboutshare #medical .medical-li-icon-wide > li .medical-li-cat{
        margin-right: calc(var(--margin) * 1);
    }
    .aboutshare #medical .medical-li-icon-wide > li .txt-box .link{
        right: calc(var(--margin) * 2);
        bottom: calc(var(--margin) * 2);
    }
}
.aboutshare .medical-li-icon{
    margin-top: calc(var(--margin) * 2) ;
    gap:calc(var(--margin) * 2 ) ;
    margin-bottom: calc(var(--margin) * 2 );
}
.aboutshare .medical-li-icon > li{
    width: calc(25% - var(--margin)) ;
}
.aboutshare .medical-li-icon > li > a{
    display: block;
    background: var(--base-color);
}
.aboutshare .medical-li-icon .txt-box .medical-li-cat{
    gap:var(--margin);
}
.aboutshare .medical-li-icon .txt-box .medical-li-cat .cate{
    display: inline-block;
    padding: 0 0.5em;
    background: var(--sub-color);
    border-radius: 100vmax;
    color: var(--main-color);
}
.aboutshare .medical-li-icon > li > a{
    padding: calc(var(--margin) * 3) 0 0;
}
.aboutshare .medical-li-icon .txt-box{
    padding: calc(var(--margin) * 2) var(--margin);
}
.aboutshare .medical-li-icon .txt-box .medical-li-title{
    font-weight: 500;
}
.aboutshare .medical-li-icon .img{
    width: 31.57%;
    margin: 0 auto;
}
@media screen and (max-width: 768px) {
    
}
@media screen and (max-width: 767px) {
    .aboutshare .medical-li-icon{
        flex-wrap: wrap;
    }
    .aboutshare .medical-li-icon > li{
        width: calc((100% - var(--margin) * 2 ) / 2);
    }
}
/*END 各院共通　medical　診療案内*/

/*各院共通　news　お知らせ*/
.aboutshare #news{
    position: relative;
    overflow-x: clip;
    margin-bottom: calc(var(--margin) * 10);
}
.aboutshare #news .keyvisual-04{
    bottom: -6.25cqw;
    width: 49.51cqw;
}
.aboutshare #news .news-list-link{
    margin-top: calc(var(--margin) * 5)
}
.aboutshare #news .news-list-link a{
    gap: 1em;
    color: var(--main-color);
    font-weight: 500;
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 767px) {
    .aboutshare #news{
        margin-bottom: calc(var(--margin) * 5);
    }
    .aboutshare #news .news-list-link{
        margin-top: calc(var(--margin) * 2);
    }
    .aboutshare #news .keyvisual-04{
        display: none;
    }
}
/*END 各院共通　news　お知らせ*/

/*各院共通　access　クリニックマップ*/
.aboutshare #access{
    margin-bottom: calc(var(--margin) * 10);
}
.aboutshare #access .access-list-link{
    margin-top: calc(var(--margin) * 5)
}
.aboutshare #access .access-list-link a{
    gap: 1em;
    color: var(--main-color);
    font-weight: 500;
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 767px) {
    .aboutshare #access{
        margin-bottom: calc(var(--margin) * 5);
    }
    .aboutshare #access .access-list-link{
        margin-top: calc(var(--margin) * 2);
    }
}
/*END 各院共通　access　クリニックマップ*/

/*各院共通　schedule　担当医表*/
.aboutshare #schedule{
    position: relative;
    overflow-x: clip;
    margin-bottom: calc(var(--margin) * 10);
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 767px) {
    .aboutshare #schedule{
        margin-bottom: calc(var(--margin) * 5);
    }
}
/*END 各院共通　schedule　担当医表*/

/*各院共通　greeting　院長ご挨拶*/
.aboutshare #greeting{
    position: relative;
    overflow-x: clip;
}
.aboutshare #greeting .keyvisual-02{
    bottom: -10cqw;
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 767px) {
    .aboutshare #greeting .keyvisual-02{
        display: block;
    }
}
/*END 各院共通　greeting　院長ご挨拶*/