/*+++++++++++++++++
slide
++++++++++++++++++*/
.section_icon {
    width:70px;
    color: var(--brown);
    margin: 0 auto 10px;
}
.custom-shape {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    z-index: 2;
    line-height: 0;transform: rotate(180deg);
}

.custom-shape svg {
    position: relative;
    display: block;
    width: calc(300% + 1.3px);
    height: 100px;
    transform: rotateY(180deg);
    left: 0;
    bottom: 0;
}

.custom-shape .shape-fill {
    fill: var(--opa-white09);
}
.custom-shape .shape-fill-white {
    fill:var(--white);
}
#slide {
    width: 100%;
    height: auto;
    display: block;
    justify-content: center;
    align-items: center;
    color: var(--black);
    /* background: var(--white); */
    position: relative;
    margin: 0;
}
#slide {
    height: 500px;
    position: relative;
    padding: 70px 0 0;
}
#slide .button_large {
    padding: 20px 80px 20px 30px;
    max-width: max-content;
}

#slide .swiper-wrapper {
    right: 0;
}
#slide .swiper-slide {
position:relative;
}
#slide .swiper-slide:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 100%;
    /* background: linear-gradient(to right, var(--white), transparent); */
    pointer-events: none;
}

#slide .swiper-slide img.img001 {margin: 0;}

#slide .swiper-slide:after {
    content: "";
    /* background:#011b45; */
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    z-index: 10;
    left: 0;
    opacity: 0.1;
}

.slide-text {
    position: absolute;
    bottom: -6rem;
    left: 1.5rem;
    z-index: 4;
    color: var(--brown);
}
.slide-text .h1-title {
    font-size: 1.5rem !important;
}
.slide-text span.text-span {/* margin: 0 0 0 -20px; */}
.slide-text .h2-title {
font-size: 2.5rem !important;
letter-spacing: 3px;
}

.slide-text .h5-title {
border-left:3px solid var(--site-color);
padding: 0 0 3px 13px;
}
/* ==========================

========================== */
@keyframes circleLeft {
0% {
transform: rotate(0deg);
background-color: #fff;
}

50% {
transform: rotate(180deg);
background-color: #fff;
}

50.01% {
transform: rotate(360deg);
background-color: #222;
}

100% {
transform: rotate(360deg);
background-color: #222;
}
}

@keyframes circleRight {
0% {
transform: rotate(0deg);
}

50% {
transform: rotate(0deg);
}

100% {
transform: rotate(180deg);
}
}
.concept_text {text-align: left;margin: 0 0 30px;font-size: var(--font-h5);}
/*+++++++++++++++++
main
++++++++++++++++++*/
#main {
margin: 0 auto 0;
position: relative;
}
#main .custom-shape svg {
    
height: 100px;
    
width: calc(174% + 1.3px);
}
#important {
border-radius: 10px 10px 0 0;
background: var(--white);
padding: 0;
box-sizing: border-box;
overflow: hidden;
}

#important .flex {
    width: var(--flex-100);
    background: var(--lightorange);
    overflow: hidden;
    position: relative;
    margin: 50px auto 0;
    border-radius: 5px;
    display: grid;
    grid-template-columns: 36% 64%;
    height: 70px;
}

#important .swiper-slide {
height: 65px;
}

#important .awesome {width: auto;box-shadow: none;background: var(--site-color);padding: 0 10px;border-radius: 0;display: flex;align-items: center;justify-content: center;color: var(--white);font-weight: var(--wght-500);}
#important .awesome i {
display: block;
background: var(--white);
border: 2px solid var(--white);
border-radius: 100px;
padding: 6px;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
color: var(--site-color);
font-size: var(--font-h5);
}

#important .swiper-wrapper {display: flex;box-shadow: none;border-radius: unset;align-items: center;height: 70px;}

#important .swiper-wrapper .swiper-slide {
    width: var(--flex-100);
    background: none;
    text-align: left;
    align-items: unset;
    margin: 0 0 5px;
    overflow: hidden;
}

#important .swiper-wrapper .swiper-slide a {
    display: block;
    align-items: center;
    gap: 20px;
    padding: 8px 18px 10px;
    justify-content: left;
    text-decoration: none;
    color: var(--black);
}

#important .swiper-wrapper .swiper-slide a:hover span {
color: var(--black);
}

#important .swiper-wrapper .swiper-slide a:hover p {
color: var(--blue);
text-decoration: underline;
}

#important .swiper-wrapper .swiper-slide a span {
font-size: 0.7rem;
padding: 2px 0 0;
}

#important .swiper-wrapper .swiper-slide a p {
font-size: var(--font-h6);
font-weight: var(--wght-500);
}

#important .swiper-pagination {
display: flex;
gap: 5px;
position: absolute;
top: 8px;
bottom: inherit;
margin: auto;
align-items: center;
transform: none;
right: 1rem;
}

#important .swiper-pagination span {
width: 7px;
height: 7px;
border-radius: 100px;
}

/*+++++++++++++++++
hours
++++++++++++++++++*/
#hours {
}

.recept {
font-size: var(--font-h5);
font-weight: var(--wght-500);
}

.recept span {
margin: 0 10px;
letter-spacing: 1px;
}

.tnav-content {
padding: 20px 0 0;
/* box-shadow: 0px 20px 40px rgba(44, 23, 3, 0.2); */
position: relative;
z-index: 0;
/* background: var(--white); */
/* border: 1px solid var(--gray); */
overflow: hidden;
}

.tnav-content a.tel {
color: inherit;
text-decoration: none;
}

/*+++++++++++++++++
top-news 
++++++++++++++++++*/
#top-news {
/* height: 1000px; */
display: block;
}

#top-news .top-news-grid {}

#top-news .tabcontent {
display: none;
}

#top-news .tabcontent.active {
display: block;
}


/*+++++++++++++++++
bunner
++++++++++++++++++*/
#bunner .small-inner li img {
    /*background: var(--lightorange);
    padding: 30px;*/
    border-radius: 10px;
    box-sizing: border-box;
    border: 1px solid var(--gray);
}
#bunner ol > li a {
    overflow: hidden;
    display: block;
    height: var(--flex-100);
    /* background: var(--white); */
    text-decoration: none;
    position: relative;
}
#bunner ol > li a dl {
padding: 30px 30px 60px;
text-align: center;
}
#bunner ol > li a dt {
color: var(--brown);
font-weight: var(--wght-600);
font-size: 1.6rem;
font-family: var(--mn);
letter-spacing: 1px;
margin: 0 0 10px;
}
#bunner ol > li a dd p {
color: var(--darkgray);
}
#bunner ol > li a .icon-arrow {
width: 40px;
height: 40px;
margin: 0.8rem 1rem;
right: 0;
}

/*+++++++++++++++++
subject
++++++++++++++++++*/
#subject {
/* height: 2000px; */
}

#subject .flex {
justify-content: center;
position: relative;
z-index: 1;
/* background: var(--white); */
border-radius: 100px;
max-width: var(--flex-95);
margin: 0 auto 50px;
flex-wrap: wrap;
}

#subject .flex a {
transition: .3s;
display: block;
cursor: pointer;
position: relative;
z-index: 1;
background: var(--white);
padding: 5px 30px 8px;
border-radius: 100px;
}

#subject .flex a.active {
transition: .3s;
background: var(--site-color);
color: var(--white);
}

#subject .flex a:hover {
text-decoration: none;
}

#subject .full-inner {
background: var(--lightblue);
/* height:800px; */
border-radius: 20px 20px 0 0;
padding: 100px 0 0;
overflow: hidden;
max-width: var(--flex-100);
}

.subjectbox {
margin: 0 auto 50px;
}

.subjectbox ol {
justify-content: center;
}

#center ol.centerbox li, ol.subjectbox li {
box-shadow: 0px 20px 40px rgba(44, 23, 3, 0.1);
background: var(--white);
border-radius: 10px;
}

ol.subjectbox li svg {
fill: var(--sub-color);
transition: .9s;
z-index: 1;
position: relative;
width: 70px;
}

ol.subjectbox li.active {
display: block;
}

ol.subjectbox li svg#surgery {
width: 45px;
margin: -5px 0 0 5px;
}

ol.subjectbox li svg#ophthalmology {
margin: 5px 0 0 -10px;
width: 80px;
height: 62px;
}

ol.subjectbox li a {
text-decoration: none;
color: inherit;
padding: clamp(20px,3vw,40px) clamp(10px,3vw,10px) 20px;
display: block;
border-radius: 10px;
position: relative;
overflow: hidden;
}

ol.subjectbox li a figure:after {
transition: .9s;
top: 0;
}

ol.subjectbox li figure {

max-width: 70px;
margin: 0 auto 10px;
height: auto;
height: 70px;
}

ol.subjectbox .tnav_text {
transition: .5s;
position: relative;
z-index: 3;
}

#center {
position: relative;
}

#center .center-title {
position: relative;
z-index: 1;
}


#center figure.background {
height: var(--flex-100);
overflow: hidden;
border-radius: 0 0 20px 20px;
position: absolute;
bottom: 0;
z-index: 0;
}

#center figure.background img {
aspect-ratio: 4/5;
object-fit: cover;
}

#center figure.background:before {
content: "";
background: rgb(68 140 166 / 60%);
position: absolute;
width: var(--flex-100);
height: var(--flex-100);
left: 0;
z-index: 10;
}

#center ol.centerbox {
margin: 0 auto;
}

#center ol.centerbox li a {
text-decoration: none;
color: inherit;
padding: clamp(20px,3vw,40px) clamp(20px,3vw,40px) 20px;
display: block;
border-radius: 10px;
overflow: hidden;
}

#center li a figure:before {
top: 0;
}

#center ol.centerbox li a figure {
fill: var(--sub-color);
transition: .9s;
z-index: 1;
/* position: relative; */
width: 130px;
margin: 0 auto 12px;
height: 90px;
display: flex;
align-items: center;
}

#center ol.centerbox li a figure svg {
width: 60px;
margin: auto;
left: 0;
}
#center ol.centerbox li a figure svg#nurse {
width:60px;
}
#laboratory ol.centerbox li a figure svg{
}

#center ol.centerbox li a figure svg#ophthalmology {
width: 90px;
left: -6px;
}

#center li a figure:before {
width: 100px;
height: 100px;
right: 0;
bottom: 0;
z-index: -1;
}

#center li a:hover figure:before {
}

#center ol.centerbox li a figure:after {
content: "";
transition: .5s;
background: var(--sub-color);
border-radius: 100px;
position: absolute;
top: 15px;
width: 100px;
height: 100px;
left: 0;
transform: scale(0);
right: 0;
margin: auto;
z-index: -1;
}

/*+++++++++++++++++
recruit
++++++++++++++++++*/
#recruit {
position: relative;
margin: 100px 0 0;
}

#recruit .grid {
/* grid-template-columns: 40% 60%; */
justify-content: space-between;
position: relative;
/* height: 100%; */
display: block;
}

#recruit:before {
content: "";
background: var(--lightorange);
/*background: rgb(68 140 166 / 10%);*/
position: absolute;
width: var(--flex-80);
height: var(--flex-100);
top: -4rem;
right: 0;
border-radius: 30px 0 0;
}

#recruit figure {
position: relative;
width: var(--flex-90);
z-index: 1;
border-radius: 0 0 20px 0;
overflow: hidden;
}

#recruit figure img {
aspect-ratio: 4/3;
object-fit: cover;
}

#recruit .recruitbox {
width: auto;
height: auto;
position: relative;
top: 0;
left: 0;
z-index: 0;
padding: 50px 0 50px 2rem;
box-sizing: border-box;
}

/*+++++++++++++++++
access
++++++++++++++++++*/
#access .wp-block-columns{
    flex-direction: row;
    display: block;
}
#access .wp-block-column:first-child {
    order: 2;
    margin: 0 0 30px;
}
#access ol.accessbox > li{display: grid;grid-template-columns: 15% 75%;gap: 30px;margin: 0 0 20px;border-bottom: 1px dashed var(--gray);align-items: center;padding: 0 0 20px;}
#access ol.accessbox > li:last-child {
border:none;
padding:0;
margin:0;
}

#access iframe {
height: 300px;
border: 1px solid var(--gray);
padding: 3px;
box-sizing: border-box;
}



#access .accessbox ol {
justify-content: center;
}

#access .accessbox li a:hover {
transition: .3s;
transform: translateY(-5px);
}


#access ol.accessbox {
justify-content: center;
grid-template-columns: repeat(4,1fr);
}

/*+++++++++++++++++
effort
++++++++++++++++++*/
#effort {
    counter-reset: number 0;
    /* height: 800px; */
    margin: 0 0 5rem;
    position: relative;
    background: var(--white);
    z-index: 1;
    padding: 50px 0 0;
}
#effort .effrot_concept {padding: 5rem 0;margin: auto;max-width: var(--large-inner);}
#effort .wp-block-columns figure img {
aspect-ratio: 3/2.5;
object-fit: cover;
}
#effort .parallax {
position: relative;
height: 80vh;
overflow: hidden;
max-width: var(--full-inner);
/* float: right; */
margin: 0 auto 7rem;
border-radius: 20px;
}
#effort .parallax_text  {
position: absolute;
top: 0;
z-index: 2;
bottom: 0;
margin: auto;
transform: translate(8%,12%);
}
#effort .parallax figure {
position: absolute;
top: -20%;
left: 0;
width: 100%;
height: 120%;
background:url("../../images/slide/0001.webp") no-repeat;
background-size: cover;
background-position: center;
z-index: 1;
}
#effort .parallax figure:before {
content:"";
background: var(--opa-black02);
position: absolute;
top: 0;
width: var(--flex-100);
height: var(--flex-100);
}

#effort .effortbox {
clear: both;
padding: 3rem 0;

/* height: 100vh; */
}
#effort .parallax figure img {
aspect-ratio: 3/3.5;
object-fit: cover;
}

#effort:before {
content: "";
}

#effort .effort-grid {
position: relative;
z-index: 1;
top: 20%;
bottom: 0;
margin: 0 auto 50px;
display: block;
align-items: center;
gap: 50px;
}

#effort .effort-grid .h1-title {
font-size: 4rem !important;
color: var(--white);
}

#effort .effort-list {
position: relative;
z-index: 1;
}
#effort .contents {
display:none;
}
#effort .effort_title {
border-top: 1px solid var(--gray);
margin: 0 auto 0 !important;
position: relative;
padding: 5rem 0;
/* background: #fff; */
}
#effort .effort_title a {
text-decoration: none;
color: unset;
display:grid;
justify-content: space-between;
/* grid-template-columns: 40% 53% !important; */
grid-template-columns: 100% !important;
width: var(--flex-100);
transition: .3s;
}

#effort .effort_title a .item-center {

display: grid;

grid-template-columns: 42% 60%;
}
#effort .effort_title > a:before {
content:"＋";
color: inherit;
position: absolute;
right: 0;
bottom: 0;
top: 0;
margin: auto;
display: flex;
align-items: center;
width: 60px;
height: 40px;
background: var(--white);
text-align: center;
justify-content: center;
border-radius: 100px;
padding: 0 20px;
transition:.3s;
font-size: var(--font-h4);
}
#effort .effort_title > a:hover:before {
color:var(--white);
background:var(--site-color);
transition:.3s;	
}

#effort .effort_title:before {
content:"";
position: absolute;
top: -1px;
height: 1px;
width: 100px;
background: var(--site-color);
}

#effort .effort_midashi {
position: sticky;
top: 5rem;
display: flex;
align-items: center;
}
#effort .effort_midashi:before {
font-family: var(--en);
counter-increment: number 1;
content:
"0" counter(number);
padding: 5px 20px 0 0;
color: #888;
font-size: var(--font-h5);
letter-spacing: 1px;
}

/**/


/*002*/
#effort .contents.c002 ol{
display: grid;
grid-template-columns: repeat(2,1fr);
gap: 40px;
margin: 0rem 0 0;
}
#effort .contents.c002 li{
border: none;
grid-template-columns: unset;
padding: 0;
}
#effort .contents.c002 li a{

display: block;
}
#effort .contents.c002 li:nth-child(2n){
padding: 0;
}
#effort .contents.c002 figure:before {
content:"";
background-image: linear-gradient(to bottom, transparent 0%, var(--opa-black05) 100% );
height: var(--flex-50);
width: var(--flex-100);
position: absolute;
bottom: 0;
}
#effort .contents.c002 figure img{
aspect-ratio: 3/3;
object-fit: cover;
}

#effort .contents.c002 dl{
position: absolute;
bottom: 0;
margin: 2rem auto;
width: var(--flex-100);
left: 0;
}
#effort .contents.c002 dt {
margin:0;
color: var(--white);
font-size: var(--font-h4) !important;
text-align: center;
justify-content: center;
}
.contents.c002 dt:before {
display: none;
}






/*venobox*/
#effort .effort_vnbox {gap: 20px;display: block;}
#effort .effort_vnbox a {
    display:block;
    overflow:hidden;
    position: relative;
    border-radius: 5px;
    margin: 0 0 20px;
    text-decoration: none;
    border: 1px solid var(--gray);
}

#effort .effort_vnbox a figure:before {
    content:"";
    background: linear-gradient(-180deg,transparent, var(--opa-black05));
    height: var(--flex-50);
    position: relative;
    bottom: 0;
    left: 0;
    width: var(--flex-100);
    z-index: 1;
    pointer-events: auto;
}

#effort .effort_vnbox figure img {
    aspect-ratio:3/1.5;
    object-fit:cover;
}

#effort .effort_vnbox a dl {
    position: relative;
    bottom: 0;
    z-index: 1;
    margin: auto;
    padding: 20px 0 10px;
    width: var(--flex-100);
    left: 0;
    right: 0;
    background: var(--white);
}
#effort .effort_vnbox a dt {
    color: var(--black);
    text-align: center;
    font-size: 1rem;
    font-weight: var(
    --wght-500);
    letter-spacing: 0;
    /* padding: 20px 0 0; */
}
#effort .effort_vnbox a .icon-arrow {
    margin: 8px;
    bottom: 0;
    left: inherit;
    right: 0;
    width: 25px;
    height: 25px;
    /* background: var(--opa-black02); */
    /* border: 1px solid var(--gray); */
    transform: rotate(-45deg);
}

#effort .icon-arrow span::before, .icon-arrow span::after {width: 4px;height: 4px;}

#effort .effort-content {
    background: #fff;
    padding: 30px;
    max-width: 500px;
    margin: 0 auto;
    border-radius: 8px;
    color: #333;
}
.efopen .vbox-content {
    margin:0 !important;
    padding: 0 3%;
}
.efopen .vbox-inline {
    max-width: var(--flex-100);
    border-radius: 0;
    padding: 80px 20px 30px !important;
    max-height: 600px;
    /* height: 550px; */
}
.efopen .vbox-inline .contents {
    height: 350px;
    overflow-x:hidden;
    overflow-y:scroll;
    padding: 0;
}

.efopen .vbox-overlay {
background: rgba(243, 224, 188,0.9) !important;
}

.efopen .vbox-close {
    position: absolute;
    right: 2rem !important;
    top: 2rem !important;
}
.efopen .vbox-next  {
    right: 0;
    width: 60px;
    height: 60px;
}
.efopen .vbox-prev {
    left: 0;
    width: 60px;
    height: 60px;
}
.efopen .vbox-next span,
.efopen .vbox-prev span {
    border-top-color: var(--black) !important;
    border-right-color: var(--black) !important;
    width: 40px;
    height: 40px;
}

.efopen .vbox-inline .contents ol {
    margin: -2rem 0 50px;
}
.efopen .vbox-inline .contents li figure {
    position: relative;
    order: 2;
    border-radius: 10px;
    overflow: hidden;
    margin: 0 0 20px;
}

.efopen .vbox-inline .contents li figure img {
    aspect-ratio: 3/1.5;
    object-fit: cover;
}

.efopen .vbox-inline .contents li{
    position: relative;
    display: block;
    grid-template-columns: 69% 26%;
    flex-direction: column;
    justify-content: space-between;
    gap: 5%;
    border-bottom: 1px dashed var(--gray);
    padding: 2rem 0;
    align-items: center;
}

.efopen .vbox-inline .contents li:last-child{
border:none;
padding:3rem 0 0;
}
.efopen .vbox-inline .contents li dl{
text-align: left;
}
.efopen .vbox-inline dt {
    font-size: 1.4rem;
    margin: 0 0 20px;
    font-weight: var(--wght-500);
    letter-spacing: 1px;
    color: var(--brown);
    position: relative;
    display: flex;
    align-items: center;
}


/*02*/
.exam .wp-block-column{
    background: var(--site-color-base);
    padding:50px 40px;
    border-radius: 10px;
    text-align: left;
}

.exam .wp-block-column figure {
    width: 80px;
    margin: 0 auto 10px;
}

.exam .wp-block-column figure svg {
    fill: var(--brown);
}

.veno_custom_prev {
    background: var(--lightgray);
    border: none;
    padding: 20px 50px 22px;
    font-size: var(--font-h6);
    color: var(--brown);
    cursor: pointer;
    max-width: 450px;
    border-radius: 100px;
    box-sizing: border-box;
    display: block;
    margin: 0 auto 20px;
    width: var(--flex-100);
    font-weight: var(--wght-500);
    position: relative;
}
.veno_custom_prev .icon-arrow {
    left: 0.5rem;
    margin: auto;
    width: 40px;
    height: 40px;
    opacity: 1;
    transform: rotate(180deg);
    right: inherit;
    top: 0;
}
.veno_custom_prev .icon-arrow span,
.veno_custom_next .icon-arrow span {
    width: 15px;
    height: 15px;
}
.veno_custom_prev .icon-arrow span:before,
.veno_custom_prev .icon-arrow span:after,
.veno_custom_next .icon-arrow span:before,
.veno_custom_next .icon-arrow span:after{
    width: 21px;
    height: 20px;
    text-indent: -9999px;
}
.veno_custom_next {
    background: var(--lightgray);
    border: none;
    padding: 20px 50px 22px 20px;
    font-size: var(--font-h6);
    color: var(--brown);
    cursor: pointer;
    max-width: 450px;
    box-sizing: border-box;
    border-radius: 100px;
    position: relative;
    width: var(--flex-100);
    font-weight: var(--wght-500);
}
.veno_custom_next .icon-arrow {
    right: 0.5rem;
    margin: auto;
    opacity: 1;
    left: inherit;
    top: 0;
    width: 40px;
    height: 40px;
}

.custom-gallery-nav {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
}

.custom-gallery-nav .veno_thumb_btn {
    border: none;
    padding: 10px 30px;
    font-family: var(--engs);
    font-size: var(--font-h5);
    background: var(--site-color);
    color: var(--white);
}
.custom-gallery-nav .veno_thumb_btn.disabled {
    background: var(--white);
    color: var(--brown);
}

/*+++++++++++++++++
family
++++++++++++++++++*/
#family {
    
}
#family .familybox {
    margin: 50px 0;
}

#family .familybox li{
    padding: 30px 20px;
    box-sizing: border-box;
    box-shadow: 0 0 20px var(--opa-black01);
    border: 1px solid var(--gray);
    /* height: 400px; */
    border-radius: 10px;
}

@media screen and (min-width: 600px) {
/*+++++++++++++++++
slide
++++++++++++++++++*/
#slide {
} 

#slide .swiper-text {
overflow: hidden;
}


/*+++++++++++++++++
main
++++++++++++++++++*/

.tnav {
}

/*+++++++++++++++++
top-news 
++++++++++++++++++*/
#top-news {
/* height: 1000px; */
display: grid;
grid-template-columns: 25% 70%;
justify-content: space-between;
}

/*+++++++++++++++++
subject
++++++++++++++++++*/
#subject .flex a {
padding: 5px 20px 8px;
border-radius: 100px;
}

#subject .flex a:hover {
text-decoration: none;
}

.subjectbox {
margin: 0 auto 100px;
}

.subjectbox ol {
justify-content: center;
}

ol.subjectbox li a:hover svg {
fill: var(--white);
}

ol.subjectbox li.active {
display: block;
}

ol.subjectbox li svg#surgery {
width: 45px;
margin: -5px 0 0 5px;
}

ol.subjectbox li svg#ophthalmology {
margin: 5px 0 0 -10px;
width: 70px;
}

#center ol.centerbox li a figure svg#ophthalmology {
width: 90px;
left: -6px;
}

#center li a figure:before {
width: 130px;
height: 130px;
right: 0;
bottom: 0;
z-index: -1;
}


}

@media screen and (min-width: 1024px) {

/*+++++++++++++++++
slide
++++++++++++++++++*/

.custom-shape {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
z-index: 3;
line-height: 0;
transform: rotate(180deg);
}

.custom-shape svg {
    width: calc(200% + 1.3px);
}

.custom-shape .shape-fill {}
#slide {
width: 100%;
height: auto;
display: block;
justify-content: center;
align-items: center;
color: var(--black);
/* background: var(--white); */
position: relative;
margin: 0;
}
#slide {
    height: 600px;
}

#slide .swiper-wrapper {
    right: 0;
    }
#slide .swiper-slide:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: var(--flex-40);
    height: var(--flex-100);
    pointer-events: none;
    }

.slide-text {
    left: 3rem;
    bottom: -7rem;
}
.slide-text .h1-title {
font-size:2.5rem !important;
}
.slide-text .h2-title {
font-size: 2.5rem !important;
letter-spacing: 3px;
}

.slide-text .h5-title {
border-left:3px solid var(--site-color);
padding: 0 0 3px 13px;
}

/*+++++++++++++++++
main
++++++++++++++++++*/
.tnav ol {
grid-template-columns: repeat(3,1fr);
}

.tnav li a {
padding: 15px 5px 20px;
}

.tnav li a figure:after {
width: 130px;
height: 130px;
}

.tnav li a:hover figure:before {
content: "";
background: var(--white);
z-index: 0;
transition: .5s;
border-radius: 100px;
}

.tnav li a:hover figure:after {
content: "";
transform: scale(4);
transition: .5s;
background: var(--sub-color);
}

.tnav li a:hover .engs {
color: var(--white);
transition: .5s;
}

.tnav li a:hover .darkgray {
color: var(--white);
transition: .5s;
}

.tnav_text:hover * {
transition: .5s;
}

#important .flex {}

#important .swiper-slide {
}

#important svg {
width: 80px;
padding: 8px 26px;
}

#important svg circle {
fill: var(--white);
}

#important .swiper-wrapper {
display: block;
box-shadow: none;
border-radius: unset;
}

#important .swiper-wrapper .swiper-slide a {
padding: 19px 30px 18px;
}

#important .swiper-wrapper .swiper-slide a:hover span {
color: var(--black);
}

#important .swiper-wrapper .swiper-slide a:hover p {
color: var(--blue);
text-decoration: underline;
}

#important .swiper-wrapper .swiper-slide a span {
font-size: var(--font-em);
padding: 2px 0 0;
}

#important .swiper-pagination {
display: flex;
gap: 10px;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
align-items: center;
transform: none;
right: 2rem;
}

#important .swiper-pagination span {
width: 10px;
height: 10px;
border-radius: 100px;
}

/*+++++++++++++++++
hours
++++++++++++++++++*/

.recept span {
margin: 0 10px;
letter-spacing: 1px;
}

.tnav-content a.tel {
color: inherit;
text-decoration: none;
}

/*+++++++++++++++++
recruit
++++++++++++++++++*/
#recruit {
height: 100%;
}

#recruit .grid {
/* grid-template-columns: 40% 60%; */
justify-content: space-between;
position: relative;
/* height: 100%; */
display: grid;
}

#recruit:before {
height: var(--flex-70);
}

#recruit figure {
position: relative;
width: 50%;
z-index: 1;
border-radius: 0 0 20px 0;
overflow: hidden;
}

#recruit figure img {
aspect-ratio: 4/4;
}

#recruit .recruitbox {
width: 60%;
position: absolute;
top: 0;
right: 0;
z-index: 0;
padding: 80px 5rem 50px 10rem;
box-sizing: border-box;
left: inherit;
}

/*+++++++++++++++++
access
++++++++++++++++++*/

#access .wp-block-column:last-child {
    order: 2;
}
#access .wp-block-columns {
    grid-template-columns:45% 55% !important;
    display: grid;
}
#access iframe {height: 720px;}

#access .accessbox ol {
justify-content: center;
}

#access .accessbox li a:hover {
transition: .3s;
transform: translateY(-5px);
}

/*+++++++++++++++++
family
++++++++++++++++++*/
#family {
    
}
#family .familybox {
    margin: 50px 0;
}

#family .familybox li{
    padding: 50px;
    box-sizing: border-box;
    box-shadow: 0 0 20px var(--opa-black01);
    border: 1px solid var(--gray);
    /* height: 400px; */
    border-radius: 10px;
}
}

@media screen and (min-width: 1200px) {
/*+++++++++++++++++
slide
++++++++++++++++++*/
#slide .swiper-slide img.img001 {margin: -3rem auto 0;}    
#slide .swiper-slide img {
    aspect-ratio: 2/1.2;
    object-fit: cover;
}
.slide-text {
    left: 3rem;
    bottom: -10rem;
}

#slide .swiper-text {
position: absolute;
bottom: 6rem;
/* top: 3rem; */
margin: auto;
display: flex;
align-items: center;
left: 6rem;
z-index: 11;
max-width: 800px;
overflow: hidden;
}

#slide .swiper-slide-active .swiper-text dt p {
opacity: 1;
transform: matrix(1,0,0,1,0,0);
transition: all 1s ease-out;
transition-delay: 1.2s
}

#slide .swiper-text dt.text-midashi p {
font-size: var(--font-h1);
}


/*+++++++++++++++++
main
++++++++++++++++++*/

.tnav ol {grid-template-columns: repeat(5,1fr);gap:20px;}

.tnav li figure {
max-width: 130px;
margin: 0 auto 20px;
height: 130px;
}

.tnav li figure svg {}
.tnav li:nth-child(10) figure svg {
width: 60px;
height: 60px;
}

.tnav li a {
padding: 30px 15px 30px;
}

#important .flex {
    width: var(--flex-100);
    background: var(--lightorange);
    overflow: hidden;
    position: relative;
    margin: auto;
    border-radius: 5px;
    display: grid;
    grid-template-columns: 15% 84%;
    height: 70px;
}

#important .swiper-slide {
height: 65px;
}

#important .awesome {
    padding: 0 20px;
}
#important .awesome i {
display: block;
background: var(--white);
border: 2px solid var(--white);
border-radius: 100px;
padding: 6px;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
color: var(--site-color);
font-size: var(--font-h5);
}

#important .swiper-wrapper {height: 70px;}

#important .swiper-wrapper .swiper-slide a {display: flex;align-items: center;gap: 20px;padding: 10px 18px 10px;justify-content: left;text-decoration: none;color: var(--black);}

#important .swiper-wrapper .swiper-slide a:hover span {
color: var(--black);
}

#important .swiper-wrapper .swiper-slide a:hover p {
color: var(--blue);
text-decoration: underline;
}


#important .swiper-pagination {
display: flex;
gap: 5px;
position: absolute;
top: 8px;
bottom: inherit;
margin: auto;
align-items: center;
transform: none;
right: 1rem;
}

#important .swiper-pagination span {
width: 7px;
height: 7px;
border-radius: 100px;
}

/*+++++++++++++++++
effort
++++++++++++++++++*/
#effort {counter-reset: number 0;/* height: 800px; */margin: 0 0 12rem;position: relative;background: var(--white);padding: 150px 0 0;z-index: 1;}
#effort .effrot_concept {padding: 5rem 0 12rem 3rem;}
#effort .wp-block-columns figure img {
aspect-ratio: 3/2.5;
object-fit: cover;
}
#effort .parallax {
position: relative;
height: 80vh;
overflow: hidden;
max-width: var(--full-inner);
/* float: right; */
margin: 0 auto 7rem;
border-radius: 20px;
}
#effort .parallax_text  {
position: absolute;
top: 0;
z-index: 2;
bottom: 0;
margin: auto;
transform: translate(8%,12%);
}
#effort .parallax figure {
position: absolute;
top: -20%;
left: 0;
width: 100%;
height: 120%;
background:url("../../images/slide/0001.webp") no-repeat;
background-size: cover;
background-position: center;
z-index: 1;
}
#effort .parallax figure:before {
content:"";
background: var(--opa-black02);
position: absolute;
top: 0;
width: var(--flex-100);
height: var(--flex-100);
}

#effort .effortbox {
clear: both;
padding: 3rem 0;

/* height: 100vh; */
}
#effort .parallax figure img {
aspect-ratio: 3/3.5;
object-fit: cover;
}

#effort .effort-grid {
position: relative;
z-index: 1;
top: 20%;
bottom: 0;
margin: 0 auto 50px;
display: block;
align-items: center;
gap: 50px;
}

#effort .effort-grid .h1-title {
font-size: 4rem !important;
color: var(--white);
}

#effort .effort-list {
position: relative;
z-index: 1;
}
#effort .contents {
display:none;
}
#effort .effort_title {
border-top: 1px solid var(--gray);
margin: 0 auto 0 !important;
position: relative;
padding: 5rem 0;
/* background: #fff; */
}
#effort .effort_title a {
text-decoration: none;
color: unset;
display:grid;
justify-content: space-between;
/* grid-template-columns: 40% 53% !important; */
grid-template-columns: 100% !important;
width: var(--flex-100);
transition: .3s;
}

#effort .effort_title a .item-center {

display: grid;

grid-template-columns: 42% 60%;
}
#effort .effort_title > a:before {
content:"＋";
color: inherit;
position: absolute;
right: 0;
bottom: 0;
top: 0;
margin: auto;
display: flex;
align-items: center;
width: 60px;
height: 40px;
background: var(--white);
text-align: center;
justify-content: center;
border-radius: 100px;
padding: 0 20px;
transition:.3s;
font-size: var(--font-h4);
}
#effort .effort_title > a:hover:before {
color:var(--white);
background:var(--site-color);
transition:.3s;	
}

#effort .effort_title:before {
content:"";
position: absolute;
top: -1px;
height: 1px;
width: 100px;
background: var(--site-color);
}

#effort .effort_midashi {
position: sticky;
top: 5rem;
display: flex;
align-items: center;
}
#effort .effort_midashi:before {
font-family: var(--en);
counter-increment: number 1;
content:
"0" counter(number);
padding: 5px 20px 0 0;
color: #888;
font-size: var(--font-h5);
letter-spacing: 1px;
}

/**/


/*002*/
#effort .contents.c002 ol{
display: grid;
grid-template-columns: repeat(2,1fr);
gap: 40px;
margin: 0rem 0 0;
}
#effort .contents.c002 li{
border: none;
grid-template-columns: unset;
padding: 0;
}
#effort .contents.c002 li a{

display: block;
}
#effort .contents.c002 li:nth-child(2n){
padding: 0;
}
#effort .contents.c002 figure:before {
content:"";
background-image: linear-gradient(to bottom, transparent 0%, var(--opa-black05) 100% );
height: var(--flex-50);
width: var(--flex-100);
position: absolute;
bottom: 0;
}
#effort .contents.c002 figure img{
aspect-ratio: 3/3;
object-fit: cover;
}

#effort .contents.c002 dl{
position: absolute;
bottom: 0;
margin: 2rem auto;
width: var(--flex-100);
left: 0;
}
#effort .contents.c002 dt {
margin:0;
color: var(--white);
font-size: var(--font-h4) !important;
text-align: center;
justify-content: center;
}
.contents.c002 dt:before {
display: none;
}






/*venobox*/
#effort .effort_vnbox {gap: 20px;display: grid;}

#effort .effort_vnbox a figure:before {
    content:"";
    background: linear-gradient(-180deg,transparent, var(--opa-black05));
    height: var(--flex-50);
    position: absolute;
    bottom: 0;
    left: 0;
    width: var(--flex-100);
    z-index: 1;
    pointer-events: auto;
}

#effort .effort_vnbox figure img {
    aspect-ratio: 3/3.5;
    object-fit:cover;
}

#effort .effort_vnbox a dl {
    position: absolute;
    bottom: 5rem;
    z-index: 1;
    margin: auto;
    width: var(--flex-100);
    left: 0;
    right: 0;
    background: none;
}
#effort .effort_vnbox a dt {
    text-align: center;
    font-weight: var(--wght-500);
    letter-spacing: 1px;
    color: var(--white);
}
#effort .effort_vnbox a .icon-arrow {
    margin: auto;
    bottom: -3.5rem;
    left: 0;
    width: 40px;
    height: 40px;
    right: 0;
    background: var(--opa-black02);
    border: 1px solid var(--white);
    transform: rotate(-45deg);
}

#effort .effort-content {
    background: #fff;
    padding: 30px;
    max-width: 500px;
    margin: 0 auto;
    border-radius: 8px;
    color: #333;
}
.efopen .vbox-content {
    margin:0 !important;
}
.efopen .vbox-inline {
    max-width: var(--small-inner) !important;
    padding: 80px 0 !important;
    max-height: 720px;
    /* overflow-y: scroll; */
}
.efopen .vbox-inline .contents {
    height:400px;
    overflow-x:hidden;
    overflow-y:scroll;
    padding:0 50px;
}

.efopen .vbox-overlay {
background: rgba(243, 224, 188,0.9) !important;
}

.efopen .vbox-close {
    position: absolute;
    right: 0 !important;
    top: 0 !important;
    margin: 1rem 2rem;
}
.efopen .vbox-next  {
    right: 22rem;
}
.efopen .vbox-prev {
    left: 22rem;
}
.efopen .vbox-next span,
.efopen .vbox-prev span {
    border-top-color: var(--black) !important;
    border-right-color: var(--black) !important;
    width: 40px;
    height: 40px;
}

.efopen .vbox-inline .contents ol {
    margin: -2rem 0 50px;
}
.efopen .vbox-inline .contents li figure {
    position: relative;
    order: 2;
    border-radius: 10px;
    overflow: hidden;
}

.efopen .vbox-inline .contents li figure img {
    aspect-ratio:3/2.5;
    object-fit: cover;
}

.efopen .vbox-inline .contents li{
    display: grid;
    grid-template-columns: 60% 35%;
}

.efopen .vbox-inline .contents li:last-child{
border:none;
padding:3rem 0 0;
}
.efopen .vbox-inline .contents li dl{
text-align: left;
}
.efopen .vbox-inline dt {  
    font-size: 1.6rem;
}


/*02*/
.exam .wp-block-column{
    background: var(--site-color-base);
    padding:50px 40px;
    border-radius: 10px;
    text-align: left;
}

.exam .wp-block-column figure {
    width: 80px;
    margin: 0 auto 10px;
}

.exam .wp-block-column figure svg {
    fill: var(--brown);
}

.veno_custom_prev {
    background: var(--lightgray);
    border: none;
    padding: 20px 50px 22px;
    font-size: var(--font-h6);
    color: var(--brown);
    cursor: pointer;
    max-width: 450px;
    border-radius: 100px;
    box-sizing: border-box;
    display: block;
    margin: 0 auto 20px;
    width: var(--flex-100);
    font-weight: var(--wght-500);
    position: relative;
}
.veno_custom_prev .icon-arrow {
}
.veno_custom_prev .icon-arrow span,
.veno_custom_next .icon-arrow span {
    width: 15px;
    height: 15px;
}
.veno_custom_prev .icon-arrow span:before,
.veno_custom_prev .icon-arrow span:after,
.veno_custom_next .icon-arrow span:before,
.veno_custom_next .icon-arrow span:after{
    width: 21px;
    height: 20px;
    text-indent: -9999px;
}
.veno_custom_next {
    background: var(--lightgray);
    border: none;
    padding: 20px 50px 22px;
    font-size: var(--font-h6);
    color: var(--brown);
    cursor: pointer;
    max-width: 450px;
    box-sizing: border-box;
    border-radius: 100px;
    position: relative;
    width: var(--flex-100);
    font-weight: var(--wght-500);
}
.veno_custom_next .icon-arrow {
    right: 0.5rem;
    margin: auto;
    opacity: 1;
    left: inherit;
    top: 0;
    width: 50px;
    height: 50px;
}

.custom-gallery-nav {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
}

.custom-gallery-nav .veno_thumb_btn {
    border: none;
    padding: 15px 30px;
    font-family: var(--engs);
    font-size: var(--font-h5);
    background: var(--site-color);
    color: var(--white);
}
.custom-gallery-nav .veno_thumb_btn.disabled {
    background: var(--white);
    color: var(--brown);
}
    
/*+++++++++++++++++
hours
++++++++++++++++++*/


#subject .flex a:hover {
text-decoration: none;
}

.subjectbox ol {
justify-content: center;
}

ol.subjectbox li a:hover svg {
fill: var(--white);
}

ol.subjectbox li.active {
display: block;
}

ol.subjectbox li svg#surgery {
width: 45px;
margin: -5px 0 0 5px;
}

ol.subjectbox li svg#ophthalmology {
margin: 5px 0 0 -10px;
width: 70px;
}

ol.subjectbox li a:hover svg {
z-index: 2;
position: relative;
transition: .9s;
}

ol.subjectbox a:hover .tnav_text * {
transition: .5s;
color: var(--white);
}

#center {
position: relative;
}

#center figure.background img {
aspect-ratio: 16/6;
object-fit: cover;
}

#center li a figure:before {
top: 0;
}
#center ol.centerbox li a:hover figure svg {
fill: var(--white);
}

#center ol.centerbox li a figure svg#ophthalmology {
width: 90px;
left: -6px;
}

#center li a figure:before {
width: 130px;
height: 130px;
right: 0;
bottom: 0;
z-index: -1;
}

#center ol.centerbox a:hover .tnav_text * {
transition: .5s;
color: var(--white);
}

/*+++++++++++++++++
recruit
++++++++++++++++++*/
#recruit {
position: relative;
margin: 100px 0 0;
}

#recruit .grid {
/* grid-template-columns: 40% 60%; */
justify-content: space-between;
position: relative;
/* height: 100%; */
display: block;
}

#recruit:before {
}

#recruit figure {
position: relative;
width: 50%;
z-index: 1;
border-radius: 0 0 20px 0;
overflow: hidden;
}

#recruit figure img {
aspect-ratio: 4/3;
object-fit: cover;
}

#recruit .recruitbox {
width: 62%;
height: 550px;
position: absolute;
top: 0;
right: 0;
z-index: 0;
padding: 80px 5rem 50px 20rem;
box-sizing: border-box;
}


/*+++++++++++++++++
effort
++++++++++++++++++*/
#effort figure {
}

#effort .effort-grid {
position: relative;
z-index: 1;
top: 20%;
bottom: 0;
margin: 0 auto 50px;
display: flex;
align-items: center;
gap: 50px;
}

#effort .effort-grid .h1-title {
font-size: 6rem !important;
color: var(--white);
}


}

@media screen and (min-width: 1500px) {
/*+++++++++++++++++
slide
++++++++++++++++++*/
.slide-text {
    left: 3rem;
    bottom: -7rem;
}    
#slide .swiper-slide img {
/* aspect-ratio: 2/0.9; */
}
#slide .swiper-slide img.img001 {
    margin:-8rem auto 0;
}
.custom-shape svg {width: calc(220% + 1.3px);height: 200px;transform: none;left: -70rem;}
    
#slide {
    height: 830px;
    position: relative;
    padding: 128px 0 0;
    box-sizing: border-box;
}   
#slide .swiper-wrapper {
    right: 0;
}    
.slide-text .h1-title {
    font-size: 2.5rem !important;
}    


#slide .swiper-text dt,#slide .swiper-text dd {
}

#slide .swiper-slide-active .swiper-text dt p {
opacity: 1;
transform: matrix(1,0,0,1,0,0);
transition: all 1s ease-out;
transition-delay: 1.2s
}



/*+++++++++++++++++
hours
++++++++++++++++++*/

.tnav-content a.tel {
color: inherit;
text-decoration: none;
}

/*+++++++++++++++++
effort
++++++++++++++++++*/
#effort .effort_vnbox {
    gap:50px
}
#effort .effrot_concept {
    padding: 3rem 0 12rem 15rem;
    max-width: var(--full-inner);
}

#effort .effort-grid {
position: relative;
z-index: 1;
top: 20%;
bottom: 0;
margin: 0 auto 50px;
display: flex;
align-items: center;
gap: 50px;
}

#effort .effort-grid .h1-title {
font-size: 6rem !important;
color: var(--white);
}

/*+++++++++++++++++
effort
++++++++++++++++++*/
.efopen .vbox-close {
    position: absolute;
    right: 29rem !important;
    top:7rem !important;
}

.efopen .vbox-inline {
    max-width: var(--small-inner) !important;
    border-radius: 0;
    padding: 80px 0 !important;
    max-height: 720px;
    /* overflow-y: scroll; */
}    

/*+++++++++++++++++
recruit
++++++++++++++++++*/
#recruit {
position: relative;
margin: 100px 0 0;
}

#recruit .grid {
/* grid-template-columns: 40% 60%; */
justify-content: space-between;
position: relative;
/* height: 100%; */
display: block;
}

#recruit:before {
content: "";
}

#recruit figure {
position: relative;
width: 50%;
z-index: 1;
border-radius: 0 0 20px 0;
overflow: hidden;
}

#recruit figure img {
aspect-ratio: 4/3;
object-fit: cover;
}


/*+++++++++++++++++
access
++++++++++++++++++*/

#access .accessbox ol {
justify-content: center;
}

#access .accessbox li a:hover {
transition: .3s;
transform: translateY(-5px);
}

#access .accessbox li figure {
}
}

/*+++++++++++++++++
slide
++++++++++++++++++*/

#slide .swiper-slide:after {}


/* ==========================

========================== */
@keyframes circleLeft {
0% {
transform: rotate(0deg);
background-color: #fff;
}

50% {
transform: rotate(180deg);
background-color: #fff;
}

50.01% {
transform: rotate(360deg);
background-color: #222;
}

100% {
transform: rotate(360deg);
background-color: #222;
}
}

@keyframes circleRight {
0% {
transform: rotate(0deg);
}

50% {
transform: rotate(0deg);
}

100% {
transform: rotate(180deg);
}
}

/*+++++++++++++++++
main
++++++++++++++++++*/
#important svg circle {
fill: var(--white);
}

#important .swiper-wrapper .swiper-slide a:hover span {
color: var(--black);
}


#important .swiper-pagination {
display: flex;
gap: 5px;
position: absolute;
top: 8px;
bottom: inherit;
margin: auto;
align-items: center;
transform: none;
right: 1rem;
}

#important .swiper-pagination span {
width: 7px;
height: 7px;
border-radius: 100px;
}

/*+++++++++++++++++
hours
++++++++++++++++++*/
#hours {
}

.recept {
}

.recept span {
margin: 0 10px;
letter-spacing: 1px;
}

/*+++++++++++++++++
top-news 
++++++++++++++++++*/
#top-news {
/* height: 1000px; */
display: block;
}

#top-news .tabcontent {
display: none;
}

#top-news .tabcontent.active {
display: block;
}

/*+++++++++++++++++
subject
++++++++++++++++++*/
#subject {
/* height: 2000px; */
}

#subject .flex {
justify-content: center;
position: relative;
z-index: 1;
/* background: var(--white); */
border-radius: 100px;
max-width: var(--flex-95);
margin: 0 auto 50px;
flex-wrap: wrap;

}

#subject .flex a {
transition: .3s;
display: block;
cursor: pointer;
position: relative;
z-index: 1;
background: var(--white);
padding: 5px 30px 8px;
border-radius: 100px;
}

#subject .flex a.active {
}

#subject .flex a:hover {
text-decoration: none;
}

.subjectbox {
margin: 0 auto 50px;
}

.subjectbox ol {
justify-content: center;
}

ol.subjectbox li svg {
fill: var(--sub-color);
transition: .9s;
z-index: 1;
position: relative;
width: 70px;
}

ol.subjectbox li.active {
display: block;
}

ol.subjectbox li svg#surgery {
width: 45px;
margin: -5px 0 0 5px;
}

ol.subjectbox li svg#ophthalmology {
margin: 5px 0 0 -10px;
width: 80px;
height: 62px;
}

ol.subjectbox li a {
text-decoration: none;
color: inherit;
padding: clamp(20px,3vw,40px) clamp(10px,3vw,10px) 20px;
display: block;
border-radius: 10px;
position: relative;
overflow: hidden;
}

ol.subjectbox li a figure:after {
transition: .9s;
top: 0;
}

ol.subjectbox li figure {
max-width: 70px;
margin: 0 auto 10px;
height: auto;
height: 70px;
}

ol.subjectbox .tnav_text {
transition: .5s;
position: relative;
z-index: 3;
}

#center figure.background {
height: var(--flex-100);
overflow: hidden;
border-radius: 0 0 20px 20px;
position: absolute;
bottom: 0;
z-index: 0;
}

#center figure.background img {
aspect-ratio: 4/5;
object-fit: cover;
}

#center figure.background:before {
content: "";
background: rgb(68 140 166 / 60%);
position: absolute;
width: var(--flex-100);
height: var(--flex-100);
left: 0;
z-index: 10;
}

#center li a figure:before {
top: 0;
}

#center ol.centerbox li a figure svg#ophthalmology {
width: 90px;
left: -6px;
}

#center li a figure:before {
width: 100px;
height: 100px;
right: 0;
bottom: 0;
z-index: -1;
}

/*+++++++++++++++++
recruit
++++++++++++++++++*/

#recruit .grid {
/* grid-template-columns: 40% 60%; */
justify-content: space-between;
position: relative;
/* height: 100%; */
display: block;
}


#recruit figure {
position: relative;
width: var(--flex-90);
z-index: 1;
border-radius: 0 0 20px 0;
overflow: hidden;
}

#recruit figure img {
aspect-ratio: 4/3;
object-fit: cover;
}

/*+++++++++++++++++
access
++++++++++++++++++*/

#access .accessbox li svg {
width: 40px;
height: 40px;
fill: var(--site-color);
}

#access .accessbox li figure {
height: 70px;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
position: relative;
background: var(--lightorange);
border-radius: 100px;
width: 70px;
}


@media screen and (min-width: 600px) {


/*+++++++++++++++++
subject
++++++++++++++++++*/
#subject .flex a {
padding: 5px 20px 8px;
border-radius: 100px;
}

#subject .flex a:hover {
text-decoration: none;
}

.subjectbox {
margin: 0 auto 100px;
}

.subjectbox ol {
justify-content: center;
}

ol.subjectbox li a:hover svg {
fill: var(--white);
}

ol.subjectbox li.active {
display: block;
}

ol.subjectbox li svg#surgery {
width: 45px;
margin: -5px 0 0 5px;
}

ol.subjectbox li svg#ophthalmology {
margin: 5px 0 0 -10px;
width: 70px;
}

#center ol.centerbox li a figure svg#ophthalmology {
width: 90px;
left: -6px;
}


/*+++++++++++++++++
access
++++++++++++++++++*/

#access .accessbox ol {
justify-content: center;
}
}

@media screen and (min-width: 1024px) {

/*+++++++++++++++++
main
++++++++++++++++++*/

a:hover .tnav_text * {
color:var(--white);
}
#important svg circle {
fill: var(--white);
}


#important .swiper-wrapper .swiper-slide a {height: 70px;}

#important .swiper-wrapper .swiper-slide a:hover span {
color: var(--black);
}

#important .swiper-pagination {
gap: 10px;
right: 2rem;
}

#important .swiper-pagination span {
width: 10px;
height: 10px;
border-radius: 100px;
}

/*+++++++++++++++++
hours
++++++++++++++++++*/

.recept span {
margin: 0 10px;
letter-spacing: 1px;
}


/*+++++++++++++++++
subject
++++++++++++++++++*/
#subject .flex a {
padding: 5px 30px 8px;
}

#subject .flex a:hover {
text-decoration: none;
}

.subjectbox ol {
justify-content: center;
}

ol.subjectbox li svg {
width: 60px;
}

ol.subjectbox li a:hover svg {
fill: var(--white);
}

ol.subjectbox li.active {
display: block;
}

ol.subjectbox li svg#surgery {
width: 45px;
margin: -5px 0 0 5px;
}

ol.subjectbox li svg#ophthalmology {
margin: 5px 0 0 -10px;
width: 70px;
height: auto;
}

ol.subjectbox li a:hover svg {
z-index: 2;
position: relative;
transition: .9s;
}

ol.subjectbox li a figure:after {
content: "";
transition: .9s;
background: var(--sub-color);
border-radius: 100px;
position: absolute;
top: 0;
bottom: 0;
width: 130px;
height: 130px;
left: 0;
right: 0;
margin: auto;
transform: scale(1);
z-index: -1;
}

ol.subjectbox li a:hover figure:after {
content: "";
z-index: 1;
transform: scale(3);
transition: .9s;
background: var(--sub-color);
}

ol.subjectbox li a figure:before {
content: "";
transform: scale(1);
position: absolute;
transition: .3s;
top: 15px;
left: 0;
width: 100px;
height: 100px;
transform: scale(0);
border-radius: 100px;
z-index: 0;
right: 0;
margin: auto;
background: var(--white);
transition-delay: 0.1s;
}

ol.subjectbox li a:hover figure:before {
content: "";
background: var(--white);
transition: .9s;
transform: scale(1);
opacity: 0.3;
border-radius: 100px;
z-index: 2;
}

ol.subjectbox li figure {
max-width: 60px;
margin: 0 auto 20px;
height: 65px;
}

ol.subjectbox a:hover .tnav_text * {
transition: .5s;
color: var(--white);
}

#center ol.centerbox li a:hover figure svg {
fill: var(--white);
}

#center ol.centerbox li a figure svg#ophthalmology {
width: 90px;
left: -6px;
}


#center li a:hover figure:before {
content: "";
background: var(--white);
transition: .9s;
transform: scale(1);
opacity: 0.3;
border-radius: 100px;
position: absolute;
z-index: 2;
}

#center ol.centerbox li a:hover figure:after {
content: "";
/* z-index:1; */
transform: scale(4);
transition: .5s;
}

#center ol.centerbox a:hover .tnav_text * {
transition: .5s;
color: var(--white);
}

/*+++++++++++++++++
recruit
++++++++++++++++++*/
#recruit {
height: 100%;
}

#recruit .grid {
/* grid-template-columns: 40% 60%; */
justify-content: space-between;
position: relative;
/* height: 100%; */
display: grid;
}


#recruit figure {
position: relative;
width: 50%;
z-index: 1;
border-radius: 0 0 20px 0;
overflow: hidden;
}

#recruit figure img {
aspect-ratio: 4/4;
}


/*+++++++++++++++++
access
++++++++++++++++++*/


#access .accessbox ol {
justify-content: center;
}

#access .accessbox li a:hover {
transition: .3s;
transform: translateY(-5px);
}
}

@media screen and (min-width: 1200px) {

/*+++++++++++++++++
top-news 
++++++++++++++++++*/
#top-news {display:grid;}

/*+++++++++++++++++
hours
++++++++++++++++++*/

.recept span {
margin: 0 10px;
letter-spacing: 1px;
}

/*+++++++++++++++++
top-news 
++++++++++++++++++*/

/*+++++++++++++++++
subject
++++++++++++++++++*/
#subject .flex a:hover {
text-decoration: none;
}

.subjectbox ol {
justify-content: center;
}

ol.subjectbox li a:hover svg {
fill: var(--white);
}

ol.subjectbox li.active {
display: block;
}

ol.subjectbox li svg#surgery {
width: 45px;
margin: -5px 0 0 5px;
}

ol.subjectbox li svg#ophthalmology {
margin: 5px 0 0 -10px;
width: 70px;
}

ol.subjectbox li a:hover svg {
z-index: 2;
position: relative;
transition: .9s;
}

ol.subjectbox a:hover .tnav_text * {
transition: .5s;
color: var(--white);
}

#center figure.background img {
aspect-ratio: 16/6;
object-fit: cover;
}

#center ol.centerbox li a:hover figure svg {
fill: var(--white);
}

#center ol.centerbox li a figure svg#ophthalmology {
width: 90px;
left: -6px;
}

#center ol.centerbox a:hover .tnav_text * {
transition: .5s;
color: var(--white);
}

/*+++++++++++++++++
recruit
++++++++++++++++++*/

#recruit .grid {
/* grid-template-columns: 40% 60%; */
justify-content: space-between;
position: relative;
/* height: 100%; */
display: block;
}

#recruit:before {
}

#recruit figure {
position: relative;
width: 50%;
z-index: 1;
border-radius: 0 0 20px 0;
overflow: hidden;
}

#recruit figure img {
aspect-ratio: 4/3;
object-fit: cover;
}


/*+++++++++++++++++
access
++++++++++++++++++*/

#access .accessbox ol {
justify-content: center;
}

#access .accessbox li a:hover {
transition: .3s;
transform: translateY(-5px);
}

#access .accessbox li figure {
}
}

@media screen and (min-width: 1500px) {


/*+++++++++++++++++
effort
++++++++++++++++++*/
#effort .effort_vnbox a dt {
    font-size:1.6rem;
    margin: 0;
}


/*+++++++++++++++++
subject
++++++++++++++++++*/
.subjectbox ol {
justify-content: center;
}

ol.subjectbox li a:hover svg {
fill: var(--white);
}

ol.subjectbox li.active {
display: block;
}

ol.subjectbox li svg#surgery {
width: 45px;
margin: -5px 0 0 5px;
}

ol.subjectbox li svg#ophthalmology {
margin: 5px 0 0 -10px;
width: 70px;
}

ol.subjectbox li a:hover svg {
z-index: 2;
position: relative;
transition: .9s;
}

ol.subjectbox a:hover .tnav_text * {
transition: .5s;
color: var(--white);
}

#center figure.background img {
aspect-ratio: 16/7;
object-fit: cover;
}

#center ol.centerbox li a:hover figure svg {
fill: var(--white);
}

#center ol.centerbox li a figure svg#ophthalmology {
width: 90px;
left: -6px;
}

/*+++++++++++++++++
recruit
++++++++++++++++++*/

#recruit figure {
position: relative;
width: 50%;
z-index: 1;
border-radius: 0 0 20px 0;
overflow: hidden;
}

#recruit figure img {
aspect-ratio: 4/3;
object-fit: cover;
}


/*+++++++++++++++++
access
++++++++++++++++++*/

#access .accessbox ol {
justify-content: center;
}

#access .accessbox li a:hover {
transition: .3s;
transform: translateY(-5px);
}

#access .accessbox li figure {
}
}

@media screen and (min-width: 1700px) {
    #slide .swiper-slide img {
        /* aspect-ratio:2/0.9; */
    }
}