@charset "UTF-8";

/*Reset*/
body {
    margin:0;
    padding:0;
    position:relative;

    background-color:#FAFAFA; /*important property*/
    color: #131515;
    font-size: 16px;
    font-family: "Noto Sans JP", sans-serif;
    font-style: normal;
    letter-spacing: 1.6px;

}
body * {
    position:relative;
}
img {
    max-width: 100%;
}
ul {
    list-style:none;
    padding:0;
    margin:0;
}
ol {
    padding:0;
    margin:0; 
}
p {
    margin:0;
    line-height: 21px;
    font-size:16px;
    letter-spacing: 1.6px;
}
h1, h2, h3, h4, h5, h6 {
    margin:0;    
}
h1 {
    font-size:30px;
    font-weight: bold;
}
h2 {
    font-size:17px;
}
a {
    color:inherit;
    text-decoration: none;
}
figure {
    margin: 0;
}

/*General Classes*/
.display-block {
    display:block;
}
.display-inline {
    display:inline;
}
.display-inline-block {
    display:inline-block;
}
.position-absolute {
    position:absolute;
}
.centered-inline {
    text-align:center;
}
.centered-block {
    margin:auto auto;
}
.unlimited-max-width {
    max-width:none;
}
.width-100 {
    width:100%;
}
.side-padding-20px {
    padding-left: 20px;
    padding-right: 20px;
}
.max-width-restrictor {
    max-width:1000px;
    margin:auto auto;
}
.text-align-left {
    text-align:left;
}
.visible-sp {
    display:none;
}
.visible-pc
{
    display: block;
}

/*General Classes(ing)*/
.button {
    user-select: none;
    cursor: pointer;
}
.hover-to-transparent
{
    transition: opacity 0.3s;
}
.hover-to-transparent:hover
{
    opacity: 0.5;
}
.hover-to-darkblue
{
    transition: color 0.3s !important;
}
.hover-to-darkblue:hover
{
    color: #468492 !important;
}
.hover-to-darkblue-bg
{
    transition: background-color 0.3s !important;
}
.hover-to-darkblue-bg:hover
{
    background-color: #468492 !important;
}
.button-contact {
    display: block;
    width: 280px;
    height: 72px;
    padding-top: 22px;
    border-radius: 36px;
    color: #fff;
    background-color: #76B4C2;
    font-weight: bold;
    text-align: center;
}
.button-contact-back {
    background-color: #BFC4C7;
}
.typing_effect span:nth-of-type(2),
.typing_effect span:nth-of-type(3),
.typing_effect span:nth-of-type(4),
.typing_effect span:nth-of-type(5),
.typing_effect span:nth-of-type(6),
.typing_effect span:nth-of-type(7),
.typing_effect span:nth-of-type(8),
.typing_effect span:nth-of-type(9),
.typing_effect span:nth-of-type(10) {
    top: 20px;
    opacity: 0;
    transition: opacity 1s, top 0.3s;
    transition-delay: 0s;
}
.typing_effect.open span:nth-of-type(2) {
    transition-delay: 0.1s;
}
.typing_effect.open span:nth-of-type(3) {
    transition-delay: 0.2s;
}
.typing_effect.open span:nth-of-type(4) {
    transition-delay: 0.3s;
}
.typing_effect.open span:nth-of-type(5) {
    transition-delay: 0.4s;
}
.typing_effect.open span:nth-of-type(6) {
    transition-delay: 0.5s;
}
.typing_effect.open span:nth-of-type(7) {
    transition-delay: 0.6s;
}
.typing_effect.open span:nth-of-type(8) {
    transition-delay: 0.7s;
}
.typing_effect.open span:nth-of-type(9) {
    transition-delay: 0.8s;
}
.typing_effect.open span:nth-of-type(10) {
    transition-delay: 0.9s;
}
.typing_effect.open span:nth-of-type(2),
.typing_effect.open span:nth-of-type(3),
.typing_effect.open span:nth-of-type(4),
.typing_effect.open span:nth-of-type(5),
.typing_effect.open span:nth-of-type(6),
.typing_effect.open span:nth-of-type(7),
.typing_effect.open span:nth-of-type(8),
.typing_effect.open span:nth-of-type(9),
.typing_effect.open span:nth-of-type(10)  {
    top: 0px;
    opacity: 1;
}
.container-heading {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 80px;
    text-align: center;
    z-index: 2;
}
.container-heading img {
    display: block;
    width: 48px;
    margin: 0 auto;
    animation-name: rotate-linear-gradient;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.container-heading h1 {
    font-size: 48px;
    letter-spacing: 4.8px;
    color: #468492;
}
.container-heading p {
    font-family: "Karla", sans-serif;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 2.4px;
}
.inview-fade-from-below {
    top: 30px;
    opacity: 0;
    transition: top 0.6s, opacity 0.6s;
}
.inview-fade-from-below.open {
    top: 0;
    opacity: 1;
}
.a-button_arrow {
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 16px;
    width: 158px;
    height: 48px;
}
.a-button_arrow::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 48px;
    height: 48px;
    border-radius: 24px;
    background-color: #D4EDEB;
    transition: 0.3s width;
}
.a-button_arrow:hover::before {
    width: 178px;
    height: 48px;
}
.a-button_arrow p {
    color: #468492;
    font-weight: bold;
}
.a-button_arrow-blue {
    width: 174px;
}
.a-button_arrow-blue::before {
    background-color: #76B4C2;
}
.a-button_arrow-blue:hover::before {
    width: 194px;
}
.a-button_arrow-blue p {
    color: #fff;
}

/*header*/
header {
    display: flex;
    position: fixed;
    justify-content: space-between;
    align-items: center;
    width: 100vw;
    height: 88px;
    padding: 0 24px;
    background-color: #fff;
    z-index: 10;
}
.container-menu-bg {
    position: absolute;
    top: 0;
    left:0;
}
#logo-header {
    display: block;
    width: 88px;
    height: 54px;
}
#ul-header-menu {
    display: flex;
    justify-content: right;
    align-items: center;
    gap: 40px;
    width: 795px;
}
#ul-header-menu li {
    font-weight: bold;
}
.li-header-menu-sub
{
    position: absolute;
    top: 0px;
    left: 406px;
}
#ul-header-menu-sub {
    display: flex;
    gap: 24px;
    width: 200px;
}
#ul-header-menu #ul-header-menu-sub li a {
    color: #76B4C2;
    font-size: 14px;
    font-weight: normal;
}
.li-header-padding {
    padding-top: 30px;
}
.button-inquiry {
    display: block;
    width: 200px;
    height: 56px;
    padding-top: 14px;
    border-radius: 40px;
    color: #fff;
    background-color: #468492;
    text-align: center;
}

/*main*/
/*mainvisual*/
#section-index-mv {
    height: 994px;
    background-color: #FAFAFA;
    overflow: hidden;
}
.li-ring-blue {
    background-image: linear-gradient(0deg, #76B4C2, #D4EDEB);
}
.li-ring-yellow {
    background-image: linear-gradient(0deg, #F5F2B8, #FAF8DB);
}
.li-ring-red {
    background-image: linear-gradient(0deg, #F9DAD0, #FDF1ED);
}
.li-ring-green {
    background-image: linear-gradient(0deg, #CBE1D8, #E4F1EB);
}
#ul-mv-rings li,
#ul-about-rings li,
#ul-schedule-rings li,
#ul-flow-rings li,
#ul-voice-rings li,
#ul-news-rings li,
#ul-access-rings li,
#ul-office-rings li,
.ul-rings li {
    position: absolute;
    border-radius: 50%;
    animation-name: rotate-linear-gradient;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    z-index: -1;
}
#ul-mv-rings li::before,
#ul-about-rings li::before,
#ul-schedule-rings li::before,
#ul-flow-rings li:before,
#ul-voice-rings li:before,
#ul-news-rings li:before,
#ul-access-rings li:before,
#ul-office-rings li:before, 
.ul-rings li:before {
    content: "";
    display: block;
    position: absolute;
    border-radius: 50%;
    background-color: #FAFAFA;
}
#ul-about-rings,
#ul-schedule-rings,
#ul-flow-rings,
#ul-voice-rings,
#ul-news-rings,
#ul-access-rings,
#ul-office-rings,
.ul-rings {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
#ul-mv-rings {
    z-index: 1;
}
#ul-mv-rings li:nth-of-type(1) {
    top: -240px;
    left: 60px;
    width: 720px;
    height: 720px;
}
#ul-mv-rings li:nth-of-type(1)::before {
    top: 90px;
    left: 90px;
    width: 540px;
    height: 540px;
}
#ul-mv-rings li:nth-of-type(2) {
    top: 60px;
    right: -160px;
    width: 440px;
    height: 440px;
}
#ul-mv-rings li:nth-of-type(2)::before {
    top: 120px;
    right: 120px;
    width: 200px;
    height: 200px;
}
#ul-mv-rings li:nth-of-type(3) {
    top: 694px;
    left: -360px;
    width: 720px;
    height: 720px;
}
#ul-mv-rings li:nth-of-type(3)::before {
    top: 90px;
    left: 90px;
    width: 540px;
    height: 540px;
}
#ul-mv-rings li:nth-of-type(4) {
    top: 780px;
    right: 300px;
    width: 440px;
    height: 440px;
}
#ul-mv-rings li:nth-of-type(4)::before {
    top: 120px;
    right: 120px;
    width: 200px;
    height: 200px;
}
@keyframes rotate-linear-gradient
{
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.ul-rings-filter {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.ul-rings-filter li {
    position: absolute;
    background: linear-gradient(0deg, #FAFAFA00, #FAFAFA);
}
#ul-mv-rings-filter li {
    z-index: 2;
}
#ul-mv-rings-filter li:nth-of-type(1) {
    top: 88px;
    left: 0;
    width: 800px;
    height: 100px;
}
#ul-mv-rings-filter li:nth-of-type(2)
{
    top: 270px;
    right: 0;
    width: 300px;
    height: 340px;
    background: linear-gradient(180deg, #FAFAFA00 0%, #FAFAFA 30%);
}
#ul-mv-rings-filter li:nth-of-type(3) {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(180deg, #FAFAFA00, #FAFAFA);
}
#img-mv-title {
    top: 400px;
    left: 340px;
    display: block;
    position: absolute;
    z-index: 5;
}
/*dot ring*/
.ul-dotring {
    position: absolute;
    top: 250px;
    right: 500px;
}
.ul-dotring li {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #468492;
    z-index: 4;
}
.ul-dotring li.li-ring-below {
    z-index: 2;
}
#ul-dotring-1 {
    top: 380px;
    right: 500px;
}
#ul-dotring-2 {
    top: 650px;
    right: 530px;
}
#img-mv-slick {
    display: block;
    position: absolute;
    object-fit: cover;
    top: 240px;
    right: 240px;
    width: 608px;
    height: 608px;
    border-radius: 50%;
    overflow: hidden;
    z-index: 3;
}
#img-mv-slick li {
    width: 100%;
    height: 100%;
}
#img-mv-slick li img {
    display: block;
    object-fit: cover;
    width: 100%;
    height: 100%;
}
#container-scroll {
    width: 63px;
    height: 75px;
    position: absolute;
    bottom: 32px;
    left: calc(50vw - 31.5px);
}
#container-scroll::after {
    content: "";
    display: block;
    position: absolute;
    top: 16px;
    left: calc(50% - 2px);
    width: 4px;
    height: 10px;
    border-radius: 2px;
    background-color: #468492;
    animation-name: mouse-scroll;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-delay: 1s;
}
@keyframes mouse-scroll {
    0% {
        top: 14px;
        height: 10px;
        opacity: 0;
    }
    10% {
        top: 14px;
        height: 10px;
        opacity: 1;
    }
    90% {
        top: 26px;
        height: 10px;
        opacity: 1;
    }
    100% {
        top: 26px;
        height: 10px;
        opacity: 0;
    }
}


/*about*/
#section-index-about {
    height: auto;
}
#section-index-about h1,
#section-index-about p {
    text-align: center;
    z-index: 2;
}
#section-index-about h1 {
    margin: 200px 0 100px 0;
    font-size: 40px;
    line-height: 96px;
    letter-spacing: 4px;
    color: #468492;
}
#section-index-about p {
    font-size: 16px;
    line-height: 48px;
}
#ul-images-about {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#ul-images-about li {
    position: absolute;
    z-index: 1;
}
#ul-images-about li:nth-of-type(1) {
    top: 65px;
    right: 96px;
}
#ul-images-about li:nth-of-type(2) {
    top: 692px;
    right: 96px;
}
#ul-images-about li:nth-of-type(3) {
    top: 360px;
    left: 96px;
}
#ul-about-rings li:nth-of-type(1) {
    top: 0px;
    left: -260px;
    width: 520px;
    height: 520px;
}
#ul-about-rings li:nth-of-type(1)::before {
    top: 100px;
    left: 100px;
    width: 320px;
    height: 320px;
}
#ul-about-rings li:nth-of-type(2) {
    top: 0px;
    right: -360px;
    width: 720px;
    height: 720px;
}
#ul-about-rings li:nth-of-type(2)::before {
    top: 120px;
    left: 120px;
    width: 480px;
    height: 480px;
}
#ul-about-rings-filter li:nth-of-type(1) {
    top: 0;
    left: 0;
    width: 100px;
    height: 550px;
    background: linear-gradient(270deg, #FAFAFA00, #FAFAFA);
}
#ul-about-rings-filter li:nth-of-type(2) {
    top: 0;
    right: 0;
    width: 100px;
    height: 750px;
    background: linear-gradient(90deg, #FAFAFA00, #FAFAFA);
}
#img-lifeprogress {
    display: block;
    position: absolute;
    top: 200px;
    left: calc(50% - 397px); 
}

/*work*/
#section-index-work {
    height: auto;
    padding: 200px 0;
}
#ul-works {
    display: flex;
    justify-content: center;
    gap: 640px;
}
#ul-works > li {
    display: flex;
    justify-content: left;
    gap: 24px;
    width: 300px;
}
#ul-works > li.inview-fade-from-below:nth-of-type(2) {
    transition-delay: 0.3s;
}
#ul-works > li:first-of-type {
    flex-direction: row-reverse;
    justify-content: right;
}
#ul-works > li:first-of-type .ul-work-details > li {
    text-align: right;
}
.ul-work-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.ul-work-details > li {
    display: block;
    padding: 24px 0;
    border-bottom: 2px solid #468492;
    font-size: 20px;
    font-weight: bold;
    text-align: left;
}
#ul-work-icons-bg-filter {
    position: absolute;
    top: 400px;
    left: calc(50% - 400px);
    width: 800px;
    height: 350px;
}
#ul-work-icons-bg-filter li {
    position: absolute;
    top: 0;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    overflow: hidden;
}
#ul-work-icons-bg-filter li:first-of-type {
    left: 100px;
    animation: work-icon-bg-left-y infinite 4s, work-icon-bg-left-x infinite 8s, work-icon-bg-size-x infinite 6s, work-icon-bg-size-y 3s;
}
#ul-work-icons-bg-filter li:last-of-type {
    right: 100px;
    animation: work-icon-bg-left-y infinite 4s 1s, work-icon-bg-right-x infinite 8s 1s, work-icon-bg-size-x infinite 6s 1s, work-icon-bg-size-y 3s 1s;
}
.ul-work-icons-bg-filter-inside {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% + 100px);
    background-image: linear-gradient(180deg, #F5F2B8, #FAF8DB);
    animation: work-icon-bg-left-inside-y infinite 4s;
}
@keyframes work-icon-bg-left-x {
    0% {
        left: 90px;
    }
    50% {
        left: 120px;
    }
    100% {
        left: 90px;
    }
}
@keyframes work-icon-bg-right-x {
    0% {
        right: 90px;
    }
    50% {
        right: 120px;
    }
    100% {
        right: 90px;
    }
}
@keyframes work-icon-bg-left-y {
    0% {
        top: 0;
    }
    50% {
        top: 10px;
    }
    100% {
        top: 0;
    }
}
@keyframes work-icon-bg-left-inside-y {
    0% {
        top: 0;
    }
    50% {
        top: -10px;
    }
    100% {
        top: 0;
    }
}
@keyframes work-icon-bg-size-x {
    0% {
        transform: scaleX(100%);
    }
    50% {
        transform: scaleX(110%);
    }
    100% {
        transform: scaleX(100%);
    }
}
@keyframes work-icon-bg-size-y {
    0% {
        transform: scaleY(100%);
    }
    50% {
        transform: scaleY(90%);
    }
    100% {
        transform: scaleY(100%);
    }
}
#img-work1,
#img-work2 {
    display: flex;
    position: absolute;
    z-index: 1;
}
#img-work1 {
    top: 440px;
    left: calc(50% - 250px);
}
#img-work2 {
    top: 500px;
    right: calc(50% - 250px);
}

/*slideshow*/
#section-index-slideshow {
    overflow: hidden;
}
#ul-slideshow {
    width: 100vw;
    height: 15vw;
    overflow-x: hidden;
}
#ul-slideshow li {
    position: absolute;
    top: 0;
    left: calc((20vw - 40px) * -1);
    width: calc(20vw - 40px);
    height: calc(15vw - 40px);
    animation: slideshow 20s linear infinite, slideshow-wave 12s linear infinite;
}
#ul-slideshow li:nth-of-type(2) {
    animation-delay: 3.33s;
}
#ul-slideshow li:nth-of-type(3) {
    animation-delay: 6.66s;
}
#ul-slideshow li:nth-of-type(4) {
    animation-delay: 9.99s;
}
#ul-slideshow li:nth-of-type(5) {
    animation-delay: 13.32s;
}
#ul-slideshow li:nth-of-type(6) {
    animation-delay: 16.65s;
}
@keyframes slideshow {

    0% {
        left: calc((20vw - 40px) * -1);
    }
    100% {
        left: calc(100vw + (20vw - 40px));
    }
}
@keyframes slideshow-wave {

    0% {
        top: 0;
    }
    25% {
        top: 40px;
    }
    50% {
        top: 0;
    }
    75% {
        top: 40px;
    }
    100% {
        top: 0;
    }
}
#ul-slideshow li img {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
}

/*schedule*/
.container-lit-blue {
    border-radius: 40px;
    box-shadow: 0 0 32px #DEF7F5;
}
#section-index-schedule {
    height: 1307px;
    padding: 166px 0;
}
#container-index-schedule {
    width: 1240px;
    height: auto;
    padding: 80px 0;
    margin: 92px auto 0 auto;
    background-color: #fff;
}
#ul-schedule-timeline {
    display: flex;
    justify-content: center;
    gap: 88px;
    width: 682px;
    height: 400px;
    margin: 0 auto;
}
.container-timeline-half {
    display: flex;
    gap: 24px;
}
.p-timeline-zone {
    width: 50px;
    height: 400px;
    padding-right: 14px;
    background-image: linear-gradient(180deg, #fff, #D4EDEB);
    text-align: center;
    writing-mode: vertical-rl;
}
.container-timeline-half:first-of-type .p-timeline-zone::before,
.container-timeline-half:first-of-type .p-timeline-zone::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50%;
    height: 30px;
    background-color: #fff;
}
.container-timeline-half:first-of-type .p-timeline-zone::before {
    clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
}
.container-timeline-half:first-of-type .p-timeline-zone::after {
    left: 50%;
    clip-path: polygon(100% 0%, 100% 100%, 0% 100%);
}
.container-timeline-half > ul {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 297px;
}
.container-timeline-half > ul::before {
    content: "";
    position: absolute;
    top: 20px;
    left: 38px;
    width: 4px;
    height: calc(100% - 30px);
    background-color: #DEF7F5;
}
.container-timeline-half > ul > li {
    display: flex;
}
.container-timeline-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding-left: 8px;
}
.container-timeline-details p:first-of-type {
    color: #76B4C2;
}
.container-timeline-details p:last-of-type {
    font-size: 20px;
    font-weight: bold;
}
.p-schedule-notice {
    margin-top: 72px;
    font-size: 14px;
    text-align: center;
}
#img-calender {
    position: absolute;
    bottom: -50px;
    right: -50px;
}
#ul-schedule-rings li:nth-of-type(1) {
    top: 500px;
    left: calc(50% - 870px);
    width: 520px;
    height: 520px;
}
#ul-schedule-rings li:nth-of-type(1)::before {
    top: 100px;
    left: 100px;
    width: 320px;
    height: 320px;
}
#ul-schedule-rings li:nth-of-type(2) {
    top: 500px;
    left: calc(50% + 350px);
    width: 520px;
    height: 520px;
}
#ul-schedule-rings li:nth-of-type(2)::before {
    top: 100px;
    left: 100px;
    width: 320px;
    height: 320px;
}
#container-index-schedule .container-timeline-half:first-of-type,
#container-index-schedule .container-timeline-half:last-of-type,
#container-index-schedule .p-schedule-notice {
    top: 30px;
    opacity: 0;
    transition: top 0.6s, opacity 0.6s;
}
#container-index-schedule .container-timeline-half:first-of-type {
    transition-delay: 0.3s;
}
#container-index-schedule .container-timeline-half:last-of-type {
    transition-delay: 0.6s;
}
#container-index-schedule .p-schedule-notice {
    transition-delay: 0.9s;
}
#container-index-schedule.open .container-timeline-half:first-of-type,
#container-index-schedule.open .container-timeline-half:last-of-type,
#container-index-schedule.open .p-schedule-notice {
    top: 0;
    opacity: 1;
}


/*flow*/
#section-index-flow {
    height: 1430px;
    padding: 166px 0;
    overflow-x: hidden;
}
#ul-index-flow {
    display: flex;
    gap: 24px;
    justify-content: center;
    margin-top: 180px;
    margin-bottom: 72px;
}
#ul-index-flow > li:nth-of-type(1) {
    z-index: 5;
    transition-delay: 0.3s;
}
#ul-index-flow > li:nth-of-type(2) {
    z-index: 4;
    transition-delay: 0.6s;
}
#ul-index-flow > li:nth-of-type(3) {
    z-index: 3;
    transition-delay: 0.9s;
}
#ul-index-flow > li:nth-of-type(4) {
    z-index: 2;
    transition-delay: 1.2s;
}
#ul-index-flow > li > p {
    position: absolute;
    top: -96px;
    left: -24px;
    /*width: 340px;*/
    width: 320px;
    height: 120px;
    padding: 36px 0 0 48px;
    color: #fff;
    background-image: linear-gradient(90deg, #D4EDEB, #76B4C2);
    font-size: 24px;
    font-weight: bold;
    font-family: "Karla", sans-serif;
}
#ul-index-flow > li > p::before {
    content: "";
    position: absolute;
    top: 0px;
    right: -20px;
    width: 20px;
    height: 120px;
    background-color: #76B4C2;
    clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
}
#ul-index-flow > li > p span {
    font-size: 40px;
}
.container-flow-description {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 292px;
    height: 342px;
    padding: 24px;
    border-radius: 16px;
    background-color: #fff;
}
.container-flow-description h2 {
    color: #468492;
    font-size: 26px;
}
.container-flow-description p {
    line-height: 32px;
}
#container-flow-lower {
    width: 1288px;
    margin: 0 auto;
    z-index: 1;
}
#container-flow-lower h2 {
    margin-bottom: 40px;
    color: #468492;
    font-size: 32px;
}
#ul-flow-targets {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
}
#ul-flow-targets li {
    width: 160px;
    height: 72px;
    padding-top: 16px;
    border-radius: 36px;
    color: #fff;
    background-color: #76B4C2;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
}
#ul-flow-targets-details {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
#ul-flow-targets-details li {
    margin-left: 20px;
}
#ul-flow-targets-details li::before {
    content: "";
    position: absolute;
    top: 5px;
    left: -20px;    
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #468492;
}
#img-wheelchairandbook {
    position: absolute;
    bottom: 200px;
    right: 50px;
}
#ul-flow-rings li:nth-of-type(1) {
    top: 0px;
    left: -100px;
    width: 520px;
    height: 520px;
}
#ul-flow-rings li:nth-of-type(1)::before {
    top: 100px;
    left: 100px;
    width: 320px;
    height: 320px;
}
#ul-flow-rings li:nth-of-type(2) {
    top: 1000px;
    right: -20px;
    width: 720px;
    height: 720px;
}
#ul-flow-rings li:nth-of-type(2)::before {
    top: 120px;
    left: 120px;
    width: 480px;
    height: 480px;
}
#ul-flow-rings-filter li:nth-of-type(1) {
    top: 0;
    left: 0;
    width: 480px;
    height: 550px;
    background: linear-gradient(180deg, #FAFAFA00, #FAFAFA 50%);
}
#ul-flow-rings-filter li:nth-of-type(2) {
    bottom: 0;
    right: 0;
    width: 700px;
    height: 150px;
    background: linear-gradient(180deg, #FAFAFA00, #FAFAFA);
}


/*Voice*/
#section-index-voice {
    height: 1390px;
    padding: 200px 0 300px 0 ;
}
#ul-voices {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 1240px;
    height: 744px;
    margin: 0 auto;
    z-index: 1;
}
#ul-voices li:nth-of-type(2n) {
    margin-top: 100px;
}
.p-voice-comments {
    width: 584px;
    height: 192px;
    padding: 24px;
    margin-bottom: 16px;
    border-radius: 24px 24px 24px 0;
    background-color: #DEF7F5;
    line-height: 24px;
}
.container-voice-profile {
    display: flex;
    align-items: center;
    gap: 16px;
}
.container-voice-profile p {
    font-weight: bold;
}
#img-clipboard {
    position: absolute;
    top: 104px;
    left: 80px;
}
#ul-voice-rings li:nth-of-type(1) {
    top: 220px;
    left: -380px;
    width: 760px;
    height: 760px;
}
#ul-voice-rings li:nth-of-type(1)::before {
    /*380 - 260 = 120*/
    top: 120px;
    left: 120px;
    width: 520px;
    height: 520px;
}


/*News*/
#container-index-content {
    width: 1240px;
    margin: 0 auto;
    padding: 200px 0;
    z-index: 1;
}
.ul-news {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}
.ul-news li a {
    display: flex;
    gap: 24px;
    width: 1240px;
    height: 232px;
    padding-bottom: 32px;
    border-bottom: 2px dotted #76B4C2;
}
.ul-news li a div {
    transition: 0.3s opacity;
}
.ul-news li a:hover div {
    opacity: 0.5;
}
.ul-news li:last-of-type a {
    border-bottom: none;
}
.container-news-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 292px;
    height: 200px;
    border-radius: 8px;
    background-color: #fff;
}
.img-news-logo_dummy {
    display: block;
    width: 144px;
}
.p-news-title {
    font-weight: bold;
}
.container-news-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    width: 924px;
    height: 179px;
}
.container-news-right h2 {
    color: #468492;
    font-size: 20px;
    font-weight: bold;
}
#a-button_arrow-news {
    margin: 80px 0 0 auto;
}
#img-talking {
    position: absolute;
    top: 80px;
    right: 80px;
}
#ul-news-rings li:nth-of-type(1) {
    top: 80px;
    left: auto;
    right: -300px;
    width: 700px;
    height: 700px;
}
#ul-news-rings li:nth-of-type(1)::before {
    /*350 - 250 = 100*/
    top: 100px;
    left: 100px;
    width: 500px;
    height: 500px;
}
#ul-news-rings-filter li:nth-of-type(1) {
    top: 100px;
    left: auto;
    right: 0;
    width: 480px;
    height: 750px;
    background: linear-gradient(180deg, #FAFAFA00, #FAFAFA 50%);
}


/*Access*/
#section-index-access {
    height: 1817px;
    padding: 200px 0;
}
#section-index-access > iframe {
    width: 100%;
    height: 474px;
    margin-bottom: 48px;
    z-index: 2;
}
#container-access-address {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 48px;
}
#container-access-address address {
    text-align: center;
    font-size: 20px;
    font-style: normal;
    letter-spacing: 2px;
}
#container-access-tel {
    margin-bottom: 160px;
}
#container-access-tel p {
    color: #468492;
    text-align: center;
}
#container-access-tel-numbers {
    display: flex;
    justify-content: center;
    height: 50px;
    margin-bottom: 24px;
}
#container-access-tel-numbers p {
    padding-top: 14px;
    color: #468492;
    font-size: 36px;
    font-weight: bold;
    letter-spacing: 3.6px;
    font-family: "Karla", sans-serif;
}
#container-access-tel-numbers p:first-of-type {
    padding-right: 24px;
    border-right: 1px solid #76B4C2;
}
#container-access-tel-numbers p:last-of-type {
    padding-left: 24px;
}
#img-train-circle {
    display: block;
    position: absolute;
    top: -64px;
    left: calc(50% - 52px);
}
#container-access-train {
    width: 1240px;
    height: 272px;
    margin: 0 auto;
    padding-top: 48px;
    border-radius: 16px;
    background-color: #DEF7F5;
}
#container-access-train h2 {
    margin-bottom: 48px;
    color: #468492;
    font-size: 24px;
    text-align: center;
}
#ul-access-train {
    display: flex;
    justify-content: center;
    gap: 24px;
}
#ul-access-train li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    width: 448px;
    height: 112px;
    background-color: #fff;
    border-radius: 8px;
}
#ul-access-train li p {
    text-align: center;
}
#ul-access-train li p:last-of-type {
    color: #468492;
    font-size: 24px;
    font-weight: bold;
}
#ul-access-train br {
    display: none;
}
#img-house {
    position: absolute;
    top: 138px;
    left: 149px;
}
#ul-access-rings li:nth-of-type(1) {
    top: 10px;
    left: -335px;
    width: 670px;
    height: 670px;
}
#ul-access-rings li:nth-of-type(1)::before {
    top: 120px;
    left: 120px;
    width: 430px;
    height: 430px;
}
#ul-access-rings li:nth-of-type(2) {
    top: 650px;
    left: auto;
    right: -340px;
    width: 680px;
    height: 680px;
}
#ul-access-rings li:nth-of-type(2)::before {
    top: 120px;
    left: 120px;
    width: 440px;
    height: 440px;
}


/*office*/
#section-index-office {
    padding: 166px 0;
    height: 858px;
}
#ul-office-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
    margin-top: 28px;
    z-index: 1;
}
#ul-office-links li {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 292px;
    height: 200px;
    border-radius: 8px;
    background-color: #fff;
}
#ul-office-links li a img {
    display: block;
}
#img-skillup {
    width: 158px;
}
#img-10iro {
    width: 188px;
}
#ul-office-rings li:nth-of-type(1) {
    top: auto;
    bottom: -335px;
    left: auto;
    right: -335px;
    width: 720px;
    height: 720px;
}
#ul-office-rings li:nth-of-type(1)::before {
    top: 120px;
    left: 120px;
    width: 480px;
    height: 480px;
}
#ul-office-rings-filter li:nth-of-type(1) {
    top: auto;
    bottom: 0;
    left: auto;
    right: 0;
    width: 480px;
    height: 150px;
    background: linear-gradient(180deg, #FAFAFA00, #FAFAFA 50%);
}
#img-city {
    position: absolute;
    top: 0;
    left: 0;
    width: 632px;
    height: 316px;
    border-radius: 0 0 80px 0;
    overflow: hidden;
}
#img-city img {
    display: block;
    top: 100%;
    width: 100%;
    height: 0;
    object-fit: cover;
}
#img-city.open img {
    top: 0%;
    height: 100%;
    transition: 1.5s height, 1.5s top;
}
#img-office {
    position: absolute;
    border-radius: 20px;
    top: 200px;
    left: 104px;
    width: 320px;
    height: 320px;
    overflow: hidden;
}
#img-office::after {
    background-color: #468492;
    animation-delay: 0.5s;
}
#img-office img {
    display: block;
    top: 100%;
    width: 100%;
    height: 0;
    object-fit: cover;
}
#img-office.open img {
    top: 0%;
    height: 100%;
    transition: 1.5s height 0.5s, 1.5s top 0.5s;
}
#img-building {
    position: absolute;
    bottom: 50px;
    right: 50px;
}
.inview-scroll::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 0%;
    background-color: #76B4C2;
}
.inview-scroll.open::after {
    animation-name: unzip-scroll;
    animation-duration: 1.5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
@keyframes unzip-scroll {
    0% {
        top: 100%;
        height: 0%;
    }
    50% {
        top: 0%;
        height: 100%;
    }
    100% {
        top: 0%;
        height: 0%;
    }
}


/*footer*/
footer {
    width: 100%;
    height: 1110px;
    background-image: url("img/footer_bg.png");
    background-size: cover;
    background-position: center;
}
#img-footer-message-sp {
    display: none;
}
#container-footer-menu {
    position: absolute;
    bottom: 0;
    left: calc(50% - 620px);
    width: 1240px;
    height: 260px;
    border-radius: 80px 80px 0 0;
    background-color: #fff;
}
#container-footer-message {
    position: absolute;
    top: 160px;
    left: calc(50% - 462px);
    width: 924px;
    height: 510px;
}
#container-footer-message > p {
    position: absolute;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
}
#p-footer-message-sub-1 {
    top: 260px;
    left: 160px;
}
#p-footer-message-sub-2 {
    top: 330px;
    left: 160px;
}
#a-button_arrow-contact {
    position: absolute;
    top: 400px;
    left: 160px;
}
#container-footer-menu-upper {
    display: flex;
    justify-content: space-between;
    position: absolute;
    top: 48px;
    left: 56px; 
    width: 1128px;
    height: 148px;
}
#container-footer-menu-left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
#a-logo-footer {
    display: block;
}
#ul-footer-links-upper {
    display: flex;
    justify-content: space-between;
    width: 550px;
    height: auto;
    font-weight: bold;
}
#ul-footer-links-lower {
    display: flex;
    justify-content: space-between;
    width: 372px;
    height: auto;
    color: #76B4C2;
    font-size: 14px;
}
#container-footer-menu-right {
    display: flex;
    align-items: center;
}
#container-footer-menu-lower {
    display: flex;
    justify-content: center;
    position: absolute;
    width: calc(100% - 112px);
    top: 220px;
    left: 56px; 
}
#container-footer-menu-lower p {
    font-family: "Karla", sans-serif;
    color: #468492;
    font-size: 14px;
}


/********************/
/*                  */
/*     Subpage      */
/*                  */
/********************/
/*subpage title*/
.section-subpage-title {
    box-sizing: content-box;
    padding-top: 88px;
    height: 338px;
}
.section-subpage-title .container-heading {
    top: 120px;
}
.section-subpage-title .container-heading h1 {
    font-size: 64px;
    letter-spacing: 6.4px;
}
.section-subpage-title .container-heading p {
    font-size: 32px;
    letter-spacing: 3.2px;
}
.ul-subpage-title-rings li:nth-of-type(1) {
    top: -310px;
    left: -120px;
    width: 620px;
    height: 620px;
}
.ul-subpage-title-rings li:nth-of-type(1)::before {
    top: 120px;
    left: 120px;
    width: 380px;
    height: 380px;
}
.ul-subpage-title-rings li:nth-of-type(2) {
    top: -110px;
    left: auto;
    right: -135px;
    width: 495px;
    height: 495px;
}
.ul-subpage-title-rings li:nth-of-type(2)::before {
    top: 120px;
    left: 120px;
    width: 255px;
    height: 255px;
}
.ul-subpage-title-rings li:nth-of-type(3) {
    top: auto;
    bottom: -247.5px;
    left: calc(50% - 247.5px);
    width: 495px;
    height: 495px;
}
.ul-subpage-title-rings li:nth-of-type(3)::before {
    top: 120px;
    left: 120px;
    width: 255px;
    height: 255px;
}
.ul-subpage-title-rings-filter li:nth-of-type(1) {
    top: 88px;
    left: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(0deg, #FAFAFA00, #FAFAFA);
}
.ul-subpage-title-rings-filter li:nth-of-type(2) {
    bottom: 0;
    left: calc(50% - 247.5px);
    width: 255px;
    height: 100px;
    background: linear-gradient(180deg, #FAFAFA00, #FAFAFA);
}


/*subpage navigation*/
.section-subpage-navigation {
    height: 66px;
}
.section-subpage-navigation p {
    width: 1000px;
    margin: 0 auto;
    padding-top: 23px;
    font-size: 14px;
    line-height: 1.4px;
}
.section-subpage-navigation p a {
    color: #76B4C2;
}


/********************/
/*                  */
/*       news       */
/*                  */
/********************/
/*list*/
#section-news-list {
    height: auto;
    padding-top: 66px;
    padding-bottom: 120px;
}
#section-news-list .container-news-left {
    border: 1px solid #BFC4C7;
    border-radius: 8px;
}
.ul-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 80px;
}
.ul-pagination li p {
    width: 64px;
    height: 64px;
    padding-top: 21px;
    border-radius: 50%;
    color: #468492;
    font-family: "Karla", sans-serif;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
}
.ul-pagination li p::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0%;
    height: 0%;
    border-radius: 50%;
    background-color: #DEF7F5;
    transition: all 0.6s;
    z-index: -1;
}
.ul-pagination li:hover p::before {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.ul-pagination .li-arrow-left a,
.ul-pagination .li-arrow-right a {
    transition: 0.3s opacity;
}
.ul-pagination .li-arrow-left a:hover,
.ul-pagination .li-arrow-right a:hover {
    opacity: 0.5;
}
.ul-pagination .li-arrow-left {
    padding-right: 48px;
}
.ul-pagination .li-arrow-right {
    padding-left: 48px;
}
.ul-pagination .li-selected p {
    background-color: #DEF7F5;
}
.li-arrow-unavailable {
    opacity: 0.25;
}

/********************/
/*                  */
/*    News Page     */
/*                  */
/********************/
.section-news-page-title,
.section-news-page-article,
.container-news-page-button {
    width: 924px;
    margin: 0 auto;
}
.section-news-page-title h1 {
    margin: 24px 0 0 0;
    padding-bottom: 24px;
    border-bottom: 1px dotted #76B4C2;
    color: #76B4C2;
    font-size: 48px;
    letter-spacing: 4.8px;
}
.container-news-page-thumbnail {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 560px;
    height: 384px;
    margin: 80px auto;
    border: 1px solid #BFC4C7;
    border-radius: 8px;
    background-color: #fff;
    overflow: hidden;
}
.container-news-page-thumbnail .img-news-logo_dummy {
    width: 280px;
}
.container-news-page-thumbnail .p-news-title {
    font-size: 32px;
    letter-spacing: 3.2px;
}
.section-news-page-article > section {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding-bottom: 80px;
}
.section-news-page-article > section > p {
    line-height: 32px;
}
.section-news-page-article h2,
#section-privacy-main h2,
.section-news-page-article h3,
.section-news-page-article h4,
.section-news-page-article h5,
.section-news-page-article h6 {
    padding-bottom: 6px;
    color: #76B4C2;
}
.section-news-page-article h2,
.section-news-page-article h3,
.section-news-page-article h4,
.section-news-page-article h5,
.section-news-page-article h6 {
    margin-top: 80px;
}
.section-news-page-article h2,
.section-news-page-article h3,
.section-news-page-article h4,
.section-news-page-article h5,
.section-news-page-article h6, 
.section-news-page-article p,
.section-news-page-article ul,
.section-news-page-article ol {
    margin-bottom: 32px;
}
.section-news-page-article p {
    line-height: 32px;
}
.section-news-page-article h2,
#section-privacy-main h2 {
    font-size: 40px;
    letter-spacing: 4px;
    border-bottom: 4px solid #76B4C2;
}
.section-news-page-article h3 {
    font-size: 33px;
    letter-spacing: 3.3px;
    border-bottom: 4px solid #BFC4C7;
}
.section-news-page-article h3::before {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 200px;
    height: 4px;
    background-color: #76B4C2;
}
.section-news-page-article h4 {
    padding-left: 24px;
    font-size: 28px;
    letter-spacing: 2.8px;
}
.section-news-page-article h4::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background-color: #76B4C2;
}
.section-news-page-article h5 {
    padding-left: 16px;
    border-left: 8px double #76B4C2;
    font-size: 23px;
    letter-spacing: 2.3px;
}
.section-news-page-article h6 {
    padding: 16px 0;
    border-top: 2px solid #BFC4C7;
    border-bottom: 2px solid #BFC4C7;
    font-size: 19px;
    letter-spacing: 1.9px;
}
.section-news-page-article strong {
    color: #E96235;
    font-weight: bold;
}
.section-news-page-article a {
    color: #468492;
    text-decoration: underline;
}
.section-news-page-article em {
    background-color: #ffff;
    font-style: normal;
    text-decoration: underline;
    text-decoration-thickness: 4px;
    text-decoration-color: #76B4C2;
}
.section-news-page-article ul,
.section-news-page-article ol {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.section-news-page-article ul li,
.section-news-page-article ol li {
    margin-left: 24px;
}
.section-news-page-article ul li::before {
    content: "";
    position: absolute;
    top: 5px;
    left: -26px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #76B4C2;
}
.section-news-page-article ol {
    padding: 0;
    list-style: none;
    counter-reset: article-ol-counter;
}
.section-news-page-article ol li {
    counter-increment: article-ol-counter;
}
.section-news-page-article ol li::before {
    content: counter(article-ol-counter) ".";
    position: absolute;
    left: -24px;
    color: #76B4C2;
    font-weight: bold;
}
.container-news-page-button {
    padding: 64px 0;
    margin: 0 auto;
    border-top: 2px dotted #76B4C2;
}
.container-news-page-button .a-button_arrow {
    margin: 0 auto;
}
.img-news-page-thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.a-single-button_back {

}


/********************/
/*                  */
/*     Recruit      */
/*                  */
/********************/
.main-recruit {
    padding-bottom: 80px;
}
.section-recruit-counter,
.section-recruit-list {
    width: 1240px;
    margin: 0 auto;
}
.section-recruit-counter {
    padding: 80px 0 48px 0;
}
.p-recruit-counter {
    font-size: 24px;
    text-align: right;
}
.p-recruit-counter span {
    font-family: "Karla", sans-serif;
    font-size: 96px;
}
.ul-recuit-list {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    width: 100%;
    height: auto;
}
.ul-recuit-list li {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 608px;
    height: 440px;
    padding: 80px 24px;
    border-radius: 24px;
    box-shadow: 0 0 32px #DEF7F5;
    overflow: hidden;
    font-weight: bold;
}
.ul-recuit-list li h2 {
    margin-bottom: 20px;
    color: #468492;
    font-size: 32px;
}
.p-recruit-available {
    position: absolute;
    top: 0;
    left: 0;
    width: 150px;
    height: 60px;
    padding: 18px 0;
    border-radius: 0 0 24px 0;
    color: #fff;
    background-color: #F5B8A3;
    font-size: 20px;
    text-align: center;
    letter-spacing: 2px;
}
.p-recruit-number {
    color: #BFC4C7;
}
.a-recruit-pdf {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background-color: #76B4C2;
}
.a-recruit-pdf img {
    width: 27px;
}
.a-recruit-pdf p {
    color: #fff;
    font-size: 20px;
    letter-spacing: 2px;
}
.li-recruit-na .p-recruit-available {
    background-color: #BFC4C7;
}
.li-recruit-na .a-recruit-pdf {
    background-color: #BFC4C7;
}


/********************/
/*                  */
/*      Score       */
/*                  */
/********************/
#section-score-list {
    height: 904px;
    padding: 70px 0 100px 0;
}
#ul-score-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}
#ul-score-list li a {
    display: flex;
    justify-content: left;
    align-items: center;
    gap: 20px;
    width: 924px;
    height: 152px;
    padding-left: 18px;
    background-color: #76B4C2;
    border-radius: 76px;
}
#ul-score-list p {
    width: 620px;
    color: #fff;
    font-size: 32px;
    letter-spacing: 3.2px;
    font-weight: bold;
}


/********************/
/*                  */
/*     privacy      */
/*                  */
/********************/
#section-privacy-main {
    width: 924px;
    height: 1520px;
    margin: 0 auto;
    padding-top: 70px;
}
#section-privacy-main > section {
    margin-bottom: 80px
}
#section-privacy-main h2 {
    margin-bottom: 32px;
}
#section-privacy-main p {
    line-height: 32px;
}
#section-privacy-address {
    display: flex;
    align-items: center;
    gap: 32px;
    width: 924px;
    height: 144px;
    border-top: 2px dotted #76B4C2; 
    border-bottom: 2px dotted #76B4C2; 
}
#section-privacy-address h2 {
    height: 96px;
    padding: 30px 32px 0 0;
    margin: 0;
    border-right: 2px solid #76B4C2;
    border-bottom: none;
    font-size: 24px;
}


/********************/
/*                  */
/*  contact (form)  */
/*                  */
/********************/
.main-contact {
    padding-bottom: 120px;
}
#section-contact-form,
.section-contact-call,
#section-contact-form-confirm,
#section-contact-form-thanks {
    width: 924px;
    margin: 0 auto;
}


/*progress bar*/
.ul-contact-progress {
    display: flex;
    justify-content: center;
    flex-direction: row-reverse;
    width: 924px;
    height: 96px;
    margin-bottom: 70px;
}
.ul-contact-progress li {
    width: 33.3%;
    padding-top: 28px;
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    background-image: linear-gradient(90deg, #D4EDEB ,#76B4C2);
}
.ul-contact-progress li.li-progress-gray {
    background-image: linear-gradient(90deg, #FAFAFA ,#BFC4C7);
}
.ul-contact-progress li:nth-of-type(2)::before,
.ul-contact-progress li:nth-of-type(3)::before
{
    content: "";
    position: absolute;
    top: 0;
    right: -49px;
    width: 50px;
    height: 100%;
    background-color: #76B4C2;
    clip-path: polygon(0% 0%, 10% 0%, 100% 50%, 10% 100%, 0% 100%);
}
.ul-contact-progress li:nth-of-type(2).li-progress-gray::before,
.ul-contact-progress li:nth-of-type(3).li-progress-gray::before {
    background-color: #BFC4C7;
}


/*form*/
.table-contact-form {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.table-contact-form tbody tr {
    display: flex;
    gap: 32px;
    padding: 32px 16px;
    border-top: 1px solid #BFC4C7;
}
.table-contact-form tbody tr:last-of-type {
    border-bottom: 1px solid #BFC4C7;
}
.table-contact-form tbody tr th {
    display: flex;
    justify-content: space-between;
    align-items: start;
    width: 280px;
    padding-top: 12px;
    text-align: left;
}
.table-contact-form tbody tr th p:first-of-type{
    margin-top: 5px;
}
.table-contact-form tbody tr th > label{
    margin-top: 2px;
}
.p-is_required {
    width: 50px;
    height: 31px;
    padding-top: 4px;
    border-radius: 4px;
    color: #fff;
    background-color: #76B4C2;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}
.table-contact-form input,
.table-contact-form textarea {
    width: 318px;
    height: 51px;
    padding: 0 16px;
    border: 1px solid #BFC4C7;
    border-radius: 8px;
    font-size: 16px;
    letter-spacing: 1.6px;
}
.table-contact-form input.wpcf7-not-valid,
.table-contact-form textarea.wpcf7-not-valid {
    border: 1px solid #E96235;
    color: #E96235;
    background-color: #F9DAD0;
}
.table-contact-form textarea {
    width: 530px;
    height: 200px;
    max-height: 500px;
    padding: 16px 16px;
}
.table-contact-form .p-optional {
    background-color: #BFC4C7;
}
#container-form-agree {
    margin-top: 60px;
    margin-bottom: 60px;
}
.container-form-submit {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}
.container-form-submit > p {
    display: flex;
    justify-content: center;
    gap: 24px;
    width: auto;
    height: auto;
}
.container-form-submit .wpcf7-spinner {
    display: none;
}
.container-form-submit > p > br {
    display: none;
}
.container-form-submit > p > input {
    display: block;
    width: 280px;
    height: 72px;
    border: none;
    border-radius: 36px;
    color: #fff;
    background-color: #76B4C2;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 1.6px;
}
.container-form-submit > p > input.button-gray {
    background-color: #BFC4C7;
}
.wpcf7-not-valid-tip {
    margin-top: 8px;
}
#checkbox-eula {
    user-select: none;
}
#checkbox-eula label {
    display: flex;
    align-items: start;
    gap: 16px;
}
#checkbox-eula label input {
    width: 24px;
    height: 24px;
    appearance: none;
}
#checkbox-eula label input::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    background-image: url("img/unchecked.svg");
}
#checkbox-eula label input:checked::before {
    background-image: url("img/checked.svg");
}
#checkbox-eula.wpcf7-not-valid label input::before {
    background-image: url("img/checkbox-error.svg");
}
#checkbox-eula .wpcf7-list-item {
    margin: 0;
}
#container-form-agree > p {
    display: flex;
    justify-content: center;
}
/*call*/
.container-contact-call {
    width: 924px;
    height: 226px;
    padding: 56px 0 40px 0;
    margin-top: 200px;
    margin-bottom: 120px;
    border-radius: 16px;
    background-color: #DEF7F5;
}
.container-contact-call img,
.container-contact-call figure {
    display: block;
    position: absolute;
    top: -32px;
    left: calc(50% - 52px);
    width: 104px;
}
.container-contact-call p {
    text-align: center;
}
.container-contact-call p:nth-of-type(1) {
    margin-bottom: 30px;
    color: #468492;
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 2.4px;
}
.container-contact-call p:nth-of-type(2) {
    margin-bottom: 30px;
    color: #468492;
    font-family: "Karla", sans-serif;
    font-size: 44px;
    font-weight: bold;
    letter-spacing: 4.4px;
}
.container-contact-call p:nth-of-type(3) {
    font-weight: bold;
}


/********************/
/*                  */
/*contact (confirm) */
/*                  */
/********************/


/*form*/
#section-contact-form-confirm .table-contact-form tbody #tr-contact-form-confirm {
    gap: 0;
    padding: 80px 0;
}
#section-contact-form-confirm .table-contact-form tbody tr th {
    width: 180px;
    padding-top: 0;
}
#section-contact-form-confirm .table-contact-form tbody #tr-contact-form-confirm th {
    width: 0;
}
#section-contact-form-confirm .table-contact-form tbody tr td {
    width: calc(100% - 180px);
}
#section-contact-form-confirm .table-contact-form tbody #tr-contact-form-confirm td {
    display: flex;
    justify-content: center;
    gap: 24px;
    width: 100%;
}
#section-contact-form-confirm .table-contact-form tbody tr td p {
    line-height: 32px;
}
#section-contact-form-confirm .table-contact-form tbody tr:last-of-type {
    border-bottom: none;
}

/********************/
/*                  */
/*contact (complete)*/
/*                  */
/********************/

#section-contact-form-thanks {
    padding-bottom: 120px;
}
.container-contact-thanks-upper h2 {
    margin-bottom: 56px;
    font-size: 40px;
    letter-spacing: 4px;
}
.container-contact-thanks-upper p {
    margin-bottom: 80px;
    line-height: 32px;
}
.container-contact-thanks-lower {
    display: flex;
    justify-content: center;
}

/*Tablet*/
@media screen and (max-width:1400px) {

    /*main*/
    /*mainvisual*/
    #section-index-mv {
        height: 800px;
    }
    #ul-mv-rings li:nth-of-type(1)
    {
        top: -240px;
        left: 60px;
        width: 544px;
        height: 544px;
    }
    #ul-mv-rings li:nth-of-type(1)::before
    {
        top: 100px;
        left: 100px;
        width: 344px;
        height: 344px;
    }
    #ul-mv-rings li:nth-of-type(2)
    {
        top: 60px;
        right: -160px;
        width: 336px;
        height: 336px;
    }
    #ul-mv-rings li:nth-of-type(2)::before
    {
        top: 100px;
        right: 100px;
        width: 136px;
        height: 136px;
    }
    #ul-mv-rings li:nth-of-type(3)
    {
        top: 494px;
        left: -272px;
        width: 544px;
        height: 544px;
    }
    #ul-mv-rings li:nth-of-type(3)::before
    {
        top: 100px;
        left: 100px;
        width: 344px;
        height: 344px;
    }
    #ul-mv-rings li:nth-of-type(4)
    {
        top: 620px;
        right: 150px;
        width: 336px;
        height: 336px;
    }
    #ul-mv-rings li:nth-of-type(4)::before
    {
        top: 100px;
        right: 100px;
        width: 136px;
        height: 136px;
    }
    #ul-mv-rings-filter li:nth-of-type(1)
    {
        width: 600px;
    }
    #img-mv-title
    {
        top: 366px;
        left: 303px;
        width: 328px;
    }
    #ul-dotring-1
    {
        top: 350px;
        right: 400px;
    }
    #ul-dotring-2
    {
        top: 550px;
        right: 400px;
    }
    #img-mv-slick
    {
        top: 216px;
        right: 200px;
        width: 448px;
        height: 448px;
    }

    /*about*/
    #section-index-about {
        height: 936px;
    }
    #section-index-about h1 {
        margin: 200px 0 100px 0;
        font-size: 32px;
        line-height: 96px;
        letter-spacing: 4px;
    }
    #ul-images-about li:nth-of-type(1)
    {
        width: 200px;
        top: 65px;
        right: 96px;
    }
    #ul-images-about li:nth-of-type(2)
    {
        width: 240px;
        top: 600px;
        right: 96px;
    }
    #ul-images-about li:nth-of-type(3)
    {
        width: 200px;
        top: 360px;
        left: 96px;
    }
    #ul-about-rings li:nth-of-type(1)
    {
        top: 0px;
        left: -210px;
        width: 420px;
        height: 420px;
    }
    #ul-about-rings li:nth-of-type(1)::before
    {
        top: 100px;
        left: 100px;
        width: 220px;
        height: 220px;
    }
    #ul-about-rings li:nth-of-type(2)
    {
        top: 0px;
        right: -310px;
        width: 620px;
        height: 620px;
    }
    #ul-about-rings li:nth-of-type(2)::before
    {
        top: 100px;
        left: 100px;
        width: 420px;
        height: 420px;
    }

    /*work*/
    #section-index-work {
        padding: 160px 16px;
        overflow-x: hidden;
    }
    .container-heading {
        margin-bottom: 64px;
    }
    #ul-works {
        height: 550px;
        gap: 64px;
        align-items: end;

    }
    #ul-works > li {
        flex-direction: column;
        width: 292px;
    }
    #ul-works > li:first-of-type {
        flex-direction: column;
    }


    /*slideshow*/
    #ul-slideshow {
        width: 100vw;
        height: 20vw;
    }
    #ul-slideshow li {
        position: absolute;
        top: 0;
        left: calc((22.8vw - 40px) * -1);
        width: calc(22.8vw - 40px);
        height: calc(17vw - 40px);
        animation: slideshow 20s linear infinite, slideshow-wave 12s linear infinite;
    }
    @keyframes slideshow {
        0% {
            left: calc((22.8vw - 40px) * -1);
        }
        100% {
            left: calc(100vw + (22.8vw - 40px));
        }
    }


    /*schedule*/
    #container-index-schedule {
        width: 1000px;
    }
    #ul-schedule-rings li:nth-of-type(1) {
        top: 500px;
        left: calc(50% - 670px);
        width: 420px;
        height: 420px;
    }
    #ul-schedule-rings li:nth-of-type(1)::before {
        top: 100px;
        left: 100px;
        width: 220px;
        height: 220px;
    }
    #ul-schedule-rings li:nth-of-type(2) {
        top: 500px;
        left: calc(50% + 250px);
        width: 420px;
        height: 420px;
    }
    #ul-schedule-rings li:nth-of-type(2)::before {
        top: 100px;
        left: 100px;
        width: 220px;
        height: 220px;
    }


    /*flow*/
    #ul-index-flow {
        gap: 20px;
    }
    #ul-index-flow > li > p {
        top: -76px;
        left: -14px;
        width: 250px;
        height: 94px;
    }
    #ul-index-flow > li > p::before {
        top: 0px;
        right: -14px;
        width: 14px;
        height: 94px;
    }
    .container-flow-description {
        gap: 16px;
        width: 228px;
        height: 326px;
        padding: 24px;
        border-radius: 16px;
    }
    .container-flow-description h2 {
        font-size: 20px;
    }
    #container-flow-lower {
        width: 1000px;
    }
    #ul-flow-rings li:nth-of-type(1) {
        top: 0px;
        left: -200px;
        width: 500px;
        height: 500px;
    }
    #ul-flow-rings li:nth-of-type(1)::before {
        /*250 - 150 = 100*/
        top: 100px;
        left: 100px;
        width: 300px;
        height: 300px;
    }
    #ul-flow-rings li:nth-of-type(2) {
        top: 1000px;
        right: -120px;
        width: 540px;
        height: 540px;
    }
    #ul-flow-rings li:nth-of-type(2)::before {
        /*270 - 170 = 100*/
        top: 100px;
        left: 100px;
        width: 340px;
        height: 340px;
    }
    #ul-flow-rings-filter li:nth-of-type(1) {
        top: 0;
        left: 0;
        width: 480px;
        height: 550px;
        background: linear-gradient(180deg, #FAFAFA00, #FAFAFA 50%);
    }
    #ul-flow-rings-filter li:nth-of-type(2) {
        bottom: 0;
        right: 0;
        width: 600px;
        height: 350px;
        background: linear-gradient(180deg, #FAFAFA00, #FAFAFA);
    }
    #ul-voice-rings li:nth-of-type(1) {
        top: 160px;
        left: -380px;
        width: 760px;
        height: 760px;
    }
    #ul-voice-rings li:nth-of-type(1)::before {
        /*380 - 260 = 120*/
        top: 120px;
        left: 120px;
        width: 520px;
        height: 520px;
    }


    /*Voice*/
    #section-index-voice {
        height: 1374px;
        padding: 160px 0 260px 0 ;
    }
    #ul-voices {
        width: 1008px;
        height: 744px;
    }
    .p-voice-comments {
        width: 476px;
        height: 240px;
        padding: 12px 24px 12px 24px;
    }
    #img-clipboard {
        position: absolute;
        top: 104px;
        left: 80px;
        width: 200px;
    }
    #ul-voice-rings li:nth-of-type(1) {
        top: 170px;
        left: -300px;
        width: 600px;
        height: 600px;
    }
    #ul-voice-rings li:nth-of-type(1)::before {
        /*300 - 200 = 120*/
        top: 100px;
        left: 100px;
        width: 400px;
        height: 400px;
    }


    /*News*/
    #container-index-content {
        width: 1000px;
    }
    .ul-news li a{
        width: 1000px;
        height: 212px;
    }
    .container-news-left {
        width: 264px;
        height: 180px;
    }
    #img-talking {
        top: 16px;
        right: 16px;
        width: 240px;
    }
    #ul-news-rings li:nth-of-type(1) {
        top: 0px;
        left: auto;
        right: -250px;
        width: 600px;
        height: 600px;
    }
    #ul-news-rings li:nth-of-type(1)::before {
        top: 100px;
        left: 100px;
        width: 400px;
        height: 400px;
    }
    #ul-news-rings-filter li:nth-of-type(1) {
        top: 100px;
        left: auto;
        right: 0;
        width: 380px;
        height: 500px;
        background: linear-gradient(180deg, #FAFAFA00, #FAFAFA 50%);
    }


    /*Access*/
    #section-index-access {
        height: 1648px;
        padding: 160px 0;
    }
    #section-index-access > iframe {
        height: 400px;
    }
    #container-access-train {
        width: 1000px;
        height: 272px;
    }
    #ul-access-rings li:nth-of-type(2) {
        top: 650px;
        left: auto;
        right: -340px;
        width: 580px;
        height: 580px;
    }
    #ul-access-rings li:nth-of-type(2)::before {
        top: 100px;
        left: 100px;
        width: 380px;
        height: 380px;
    }


    /*office*/
    #section-index-office {
        padding: 160px 0;
        height: 714px;
    }
    #ul-office-links li {
        width: 240px;
        height: 164px;
    }
    #img-skillup {
        width: 143px;
    }
    #img-10iro {
        width: 160px;
    }
    #img-city {
        position: absolute;
        border-radius: 0 0 80px 0;
        top: 0;
        left: 0;
        width: 480px;
        height: 240px;
    }
    #img-office {
        top: 160px;
        left: 80px;
        width: 200px;
        height: 200px;
    }
    #ul-office-rings li:nth-of-type(1) {
        top: auto;
        bottom: -170px;
        left: auto;
        right: -170px;
        width: 540px;
        height: 540px;
    }
    #ul-office-rings li:nth-of-type(1)::before {
        top: 100px;
        left: 100px;
        width: 340px;
        height: 340px;
    }
    #img-building {
        width: 160px;
    }
    
    /*footer*/
    #container-footer-menu {
        left: calc(50% - 500px);
        width: 990px;
    }
    #container-footer-menu-upper {
        width: 896px;
        height: 148px;
    }


    /********************/
    /*                  */
    /*     Recruit      */
    /*                  */
    /********************/
    .section-recruit-counter,
    .section-recruit-list {
        width: 1040px;
    }
    .ul-recuit-list li {
        width: 508px;
        gap: 8px;
    }
}


/*For Flow, Voice, News*/
@media screen and (max-width:1100px) {
    #section-index-flow {
        height: auto;
    }
    #ul-index-flow {
        display: flex;
        gap: 26px;
        justify-content: center;
        flex-direction: column;
        margin-top: 80px;
        margin-bottom: 150px;
    }
    #ul-index-flow > li {
        top: 0 !important;
        opacity: 1 !important;
    }
    #ul-index-flow > li:nth-of-type(1),
    #ul-index-flow > li:nth-of-type(2),
    #ul-index-flow > li:nth-of-type(3),
    #ul-index-flow > li:nth-of-type(4) {
        transition-delay: 0s;
    }
    #ul-index-flow > li > p {
        top: -20px;
        left: 0px;
        /*width: 340px;*/
        width: 80px;
        height: 310px;
        padding: 50px 50px 0 0;
        background-image: linear-gradient(180deg, #D4EDEB, #76B4C2);
        font-size: 20px;
        writing-mode: vertical-rl;
    }
    #ul-index-flow > li > p::before {
        top: auto;
        bottom: -40px;
        left: 0px;
        right: auto;
        width: 80px;
        height: 41px;
        clip-path: polygon(0% 0%, 100% 0%, 100% 1%, 50% 100%, 0% 1%);
    }
    #ul-index-flow > li > p span {
        font-size: 32px;
        vertical-align: middle;
    }
    .container-flow-description {
        left: 48px;
        width: calc(100% - 64px);
        height: 288px;
    }
    #container-flow-lower {
        width: 100%;
        padding: 0 16px;
    }
    #container-flow-lower h2 {
        font-size: 24px;
    }
    #ul-flow-targets {
        width: 100%;
        margin-bottom: 32px;
        flex-wrap: wrap;
    }
    #ul-flow-targets li {
        width: 100px;
        height: 40px;
        padding-top: 8px;
        border-radius: 20px;
        font-size: 16px;
    }
    #img-wheelchairandbook {
        width: 75px;
        bottom: 50px;
        right: 50px;
    }
    #ul-flow-rings li:nth-of-type(1) {
        top: 0px;
        left: -60px;
        width: 160px;
        height: 160px;
    }
    #ul-flow-rings li:nth-of-type(1)::before {
        top: 40px;
        left: 40px;
        width: 80px;
        height: 80px;
    }
    #ul-flow-rings li:nth-of-type(2) {
        top: auto;
        bottom: 50px;
        right: -60px;
        width: 200px;
        height: 200px;
    }
    #ul-flow-rings li:nth-of-type(2)::before {
        /*100 - 60 = 40*/
        top: 40px;
        left: 40px;
        width: 120px;
        height: 120px;
    }
    #ul-flow-rings-filter li:nth-of-type(1) {
        top: 0;
        left: 0;
        width: 180px;
        height: 180px;
        background: linear-gradient(180deg, #FAFAFA00, #FAFAFA 50%);
    }
    #ul-flow-rings-filter li:nth-of-type(2) {
        bottom: 50px;
        right: 0;
        width: 200px;
        height: 200px;
        background: linear-gradient(180deg, #FAFAFA00 20%, #FAFAFA 60%);
    }

    
    /*Voice*/
    #section-index-voice {
        height: auto;
        padding: 100px 0 100px 0 ;
    }
    #ul-voices {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: start;
        gap: 48px;
        width: 100%;
        height: auto;
        padding: 0 16px;
    }
    #ul-voices li:nth-of-type(2n) {
        margin-top: 0;
    }
    .p-voice-comments {
        width: 100%;
        height: auto;
    }
    #img-clipboard {
        position: absolute;
        width:100px;
        top: 8px;
        left: 8px;
    }
    #ul-voice-rings li:nth-of-type(1) {
        top: 50px;
        left: -100px;
        width: 200px;
        height: 200px;
    }
    #ul-voice-rings li:nth-of-type(1)::before {
        /*100 - 60 = 40*/
        top: 40px;
        left: 40px;
        width: 120px;
        height: 120px;
    }
    #ul-voice-rings-filter li:nth-of-type(1) {
        top: 0;
        left: 0;
        width: 50px;
        height: 550px;
        background: linear-gradient(270deg, #FAFAFA00, #FAFAFA 50%);
    }


    /*News*/
    #container-index-content {
        width: 100%;
    }
    .ul-news {
        padding: 0 16px;
    }
    .ul-news li {
        width: 100%;
    }
    .ul-news li a {
        flex-direction: column;
        width: 100%;
        height: auto;
    }
    .container-news-left {
        width: 100%;
        height: 216px;
    }
    .container-news-right {
        width: 100%;
        height: auto;
    }
    #a-button_arrow-news {
        margin: 40px auto 0 auto;
    }
    #img-talking {
        top: 80px;
        right: 80px;
        width: 114px;
    }
    #ul-news-rings li:nth-of-type(1) {
        top: 80px;
        left: auto;
        right: -50px;
        width: 200px;
        height: 200px;
    }
    #ul-news-rings li:nth-of-type(1)::before {
        top: 40px;
        left: 40px;
        width: 120px;
        height: 120px;
    }
    #ul-news-rings-filter li:nth-of-type(1) {
        top: 150px;
        left: auto;
        right: 0;
        width: 480px;
        height: 150px;
        background: linear-gradient(180deg, #FAFAFA00, #FAFAFA 50%);
    }


    /*Access*/
    #section-index-access {
        height: 1446px;
        padding: 100px 0;
    }
    #section-index-access > iframe {
        height: 240px;
        margin-bottom: 24px;
    }
    #container-access-address {
        margin-bottom: 40px;
    }
    #container-access-address address {
        padding: 0 16px;
        text-align: left;
        font-size: 16px;
        letter-spacing: 1.6px;
    }
    #container-access-tel-numbers {
        padding: 0 16px;
        flex-direction: column;
    }
    #container-access-tel-numbers p {
        padding-top: 0;
        font-size: 28px;
        letter-spacing: 3.2px;
        text-align: center;
    }
    #container-access-tel-numbers p:first-of-type {
        padding-right: 0;
        padding-bottom: 10px;
        border-right: none;
        border-bottom: 1px solid #76B4C2;
    }
    #container-access-tel-numbers p:last-of-type {
        padding-left: 0;
        padding-top: 10px;
    }
    #img-train-circle {
        display: block;
        position: absolute;
        top: -64px;
        left: calc(50% - 40px);
        width: 80px;
    }
    #container-access-train {
        /*96 - 24 = 72*/
        width: calc(100% - 32px);
        height: auto;
        margin: 0 auto;
        padding: 36px 16px 16px 16px;
        border-radius: 16px;
    }
    #img-house {
        position: absolute;
        top: 24px;
        left: 24px;
        width: 87px;
    }
    #ul-access-train {
        display: flex;
        justify-content: center;
        gap: 24px;
        flex-direction: column;
    }
    #ul-access-train br {
        display: initial;
    }
    #ul-access-train li {
        gap: 16px;
        width: 100%;
        height: 115px;
        padding: 16px;
    }
    #ul-access-train li p:last-of-type {
        font-size: 20px;
    }
    #ul-access-rings li:nth-of-type(1) {
        top: 10px;
        left: -80px;
        width: 160px;
        height: 160px;
    }
    #ul-access-rings li:nth-of-type(1)::before {
        top: 40px;
        left: 40px;
        width: 80px;
        height: 80px;
    }
    #ul-access-rings li:nth-of-type(2) {
        top: 480px;
        left: auto;
        right: -80px;
        width: 160px;
        height: 160px;
    }
    #ul-access-rings li:nth-of-type(2)::before {
        top: 40px;
        left: 40px;
        width: 80px;
        height: 80px;
    }
    #ul-access-rings-filter li:nth-of-type(1) {
        top: 0;
        left: 0;
        width: 50px;
        height: 200px;
        background: linear-gradient(270deg, #FAFAFA00, #FAFAFA);
    }
    #ul-access-rings-filter li:nth-of-type(2) {
        top: 450px;
        left: auto;
        right: 0;
        width: 50px;
        height: 200px;
        background: linear-gradient(90deg, #FAFAFA00, #FAFAFA);    
    }


    /*office*/
    #section-index-office {
        padding: 100px 0 200px 0;
        height: 540px;
    }
    #ul-office-links {
        gap: 17px;
    }
    #ul-office-links li {
        width: 150px;
        height: 103px;
    }
    #img-city {
        width: 160px;
        height: 80px;
        border-radius: 0 0 24px 0;
    }
    #img-office {
        top: 56px;
        left: 16px;
        width: 72px;
        height: 72px;
        border-radius: 8px;
    }
    #ul-office-rings li:nth-of-type(1) {
        top: auto;
        bottom: -50px;
        left: auto;
        right: -50px;
        width: 200px;
        height: 200px;
    }
    #ul-office-rings li:nth-of-type(1)::before {
        top: 40px;
        left: 40px;
        width: 120px;
        height: 120px;
    }
    #img-building {
        width: 80px;
        bottom: 20px;
        right: 20px;
    }
    #img-skillup {
        width: 88px;
    }
    #img-10iro {
        width: 104px;
    }
    #ul-office-rings-filter li:nth-of-type(1) {
        top: auto;
        bottom: 0;
        left: auto;
        right: 0;
        width: 150px;
        height: 50px;
        background: linear-gradient(180deg, #FAFAFA00, #FAFAFA 50%);
    }


    /********************/
    /*                  */
    /*       News       */
    /*                  */
    /********************/
    .section-subpage-title {
        padding-top: 64px;
        padding-bottom: 64px;
        height: 200px;
        box-sizing: border-box;
    }
    .section-subpage-title .container-heading {
        top: 30px;
        gap: 8px;
    }
    .section-subpage-title .container-heading h1 {
        font-size: 30px;
        letter-spacing: 3.0px;
    }
    .section-subpage-title .container-heading p {
        font-size: 16px;
        letter-spacing: 1.6px;
    }
    .ul-subpage-title-rings li:nth-of-type(1) {
        top: -50px;
        left: -125px;
        width: 250px;
        height: 250px;
    }
    .ul-subpage-title-rings li:nth-of-type(1)::before {
        top: 50px;
        left: 50px;
        width: 150px;
        height: 150px;
    }
    .ul-subpage-title-rings li:nth-of-type(2) {
        top: 0px;
        left: auto;
        right: -70px;
        width: 170px;
        height: 170px;
    }
    .ul-subpage-title-rings li:nth-of-type(2)::before {
        top: 50px;
        left: 50px;
        width: 70px;
        height: 70px;
    }
    .ul-subpage-title-rings li:nth-of-type(3) {
        top: auto;
        bottom: -85px;
        left: calc(50% - 85px);
        width: 170px;
        height: 170px;
    }
    .ul-subpage-title-rings li:nth-of-type(3)::before {
        top: 50px;
        left: 50px;
        width: 70px;
        height: 70px;
    }
    .ul-subpage-title-rings-filter li:nth-of-type(1) {
        top: 64px;
        left: 0;
        width: 100%;
        height: 50px;
    }
    .ul-subpage-title-rings-filter li:nth-of-type(2) {
        bottom: 0;
        left: calc(50% - 85px);
        width: 170px;
        height: 50px;
    }


    /*subpage navigation*/
    .section-subpage-navigation {
        height: 44px;
    }
    .section-subpage-navigation p {
        width: 100%;
        margin: 0 auto;
        padding-top: 16px;
        padding-left: 16px;
        font-size: 10px;
        line-height: 1px;
    }
    

    /********************/
    /*                  */
    /*       news       */
    /*                  */
    /********************/
    /*list*/
    #section-news-list {
        padding-top: 0px;
        padding-bottom: 80px;
    }
    .ul-pagination {    
        margin-top: 64px;
    }
    .ul-pagination li p {
        width: 48px;
        height: 48px;
        padding-top: 12px;
        border-radius: 50%;
        font-size: 20px;
    }
    .ul-pagination .li-arrow-left img,
    .ul-pagination .li-arrow-right img {
        display: block;
        width: 48px;
    }
    .ul-pagination .li-arrow-left {
        padding-right: 12px;
    }
    .ul-pagination .li-arrow-right {
        padding-left: 12px;
    }


    /********************/
    /*                  */
    /*    News Page     */
    /*                  */
    /********************/
    .section-news-page-title,
    .section-news-page-article,
    .container-news-page-button {
        width: 100%;
        padding: 0 16px;
        margin: 0 auto;
    }
    .section-news-page-title h1 {
        padding-bottom: 24px;
        font-size: 36px;
        letter-spacing: 3.6px;
    }
    .container-news-page-thumbnail {
        width: 100%;
        height: 220px;
        margin: 48px auto;
    }
    .container-news-page-thumbnail .img-news-logo_dummy {
        width: 144px;
    }
    .container-news-page-thumbnail .p-news-title {
        font-size: 16px;
        letter-spacing: 1.6px;
    }
    .section-news-page-article > section {
        padding-bottom: 48px;
    }
    .section-news-page-article h2,
    .section-news-page-article h3,
    .section-news-page-article h4,
    .section-news-page-article h5,
    .section-news-page-article h6 {
        margin-top: 48px;
    }
    .section-news-page-article h2,
    .section-news-page-article h3,
    .section-news-page-article h4,
    .section-news-page-article h5,
    .section-news-page-article h6, 
    .section-news-page-article p,
    .section-news-page-article ul,
    .section-news-page-article ol {
        margin-bottom: 32px;
    }
    .section-news-page-article h2,
    #section-privacy-main h2 {
        font-size: 30px;
        letter-spacing: 3px;
    }
    .section-news-page-article h3 {
        font-size: 25px;
        letter-spacing: 2.5px;
    }
    .section-news-page-article h4 {
        padding-left: 18px;
        font-size: 21px;
        letter-spacing: 2.1px;
    }
    .section-news-page-article h5 {
        border-left: 6px double #76B4C2;
        font-size: 17px;
        letter-spacing: 1.7px;
    }
    .section-news-page-article h6 {
        font-size: 14px;
        letter-spacing: 1.4px;
    }    
    #section-news-page-back {
        padding: 0 16px;
    }
    .container-news-page-button {
        padding: 64px 0;
    }


    /********************/
    /*                  */
    /*     Recruit      */
    /*                  */
    /********************/
    .section-recruit-counter,
    .section-recruit-list {
        width: 100%;
        padding: 0 16px;
    }
    .p-recruit-counter {
        font-size: 16px;
        margin-bottom: 16px;
    }
    .p-recruit-counter span {
        font-size: 48px;
    }
    .ul-recuit-list {
        flex-direction: column;
        gap: 24px;
        width: 100%;
        height: auto;
    }
    .ul-recuit-list li {
        width: 100%;
        height: 318px;
        padding: 48px 16px 24px 16px;
    }
    .p-recruit-available {
        width: 100px;
        height: 33px;
        padding: 7px 0;
        font-size: 12px;
        letter-spacing: 1.2px;
    }
    .p-recruit-number {
        font-size: 12px;
        letter-spacing: 1.2px;
    }
    .ul-recuit-list li h2 {
        font-size: 20px;
        letter-spacing: 2px;
    }
    .p-recruit-time {
        font-size: 12px;
        letter-spacing: 1.2px;
    }
    .a-recruit-pdf {
        height: 56px;
    }
    .a-recruit-pdf img {
        width: 20px;
    }
    .a-recruit-pdf p {
        font-size: 15px;
        letter-spacing: 1.5px;
    }


    /********************/
    /*                  */
    /*      Score       */
    /*                  */
    /********************/
    #section-score-list {
        height: 468px;
        padding: 64px 16px 0 16px;
    }
    #ul-score-list {
        width: 100%;
        gap: 16px;
    }
    #ul-score-list li {
        width: 100%;
    }
    #ul-score-list li a {
        gap: 10px;
        width: 100%;
        height: 64px;
        border-radius: 32px;
        padding-left: 10px;
    }
    #ul-score-list li img {
        width: 48px;
    }
    #ul-score-list p {
        width: 300px;
        font-size: 15px;
        letter-spacing: 1.5px;
    }
    .img-score-window {
        display: none;
    }


    /********************/
    /*                  */
    /*     privacy      */
    /*                  */
    /********************/
    #section-privacy-main {
        width: 100%;
        height: auto;
        padding: 64px 16px 32px 16px;
    }
    #section-privacy-main > section {
        margin-bottom: 48px
    }
    #section-privacy-address {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 32px;
        width: 100%;
        height: auto;
        padding-bottom: 32px;
    }
    #section-privacy-address h2 {
        width: 100%;
        padding: 24px 0 0 0;
        border-right: none;
        border-bottom: 2px solid #76B4C2;
        text-align: center;
    }


    /********************/
    /*                  */
    /*  contact (form)  */
    /*                  */
    /********************/
    #section-contact-form,
    .section-contact-call,
    #section-contact-form-confirm,
    #section-contact-form-thanks {
        width: 100%;
        padding: 0 16px;
        margin: 0 auto;
    }
    .table-contact-form tbody tr th p:first-of-type{
        margin-top: 0px;
    }
    
    /*progress bar*/
    .ul-contact-progress {
        width: 100%;
        height: 48px;
        margin-top: 100px;
    }
    .ul-contact-progress li {
        padding-top: 12px;
        font-size: 16px;
    }
    .ul-contact-progress li:nth-of-type(2)::before,
    .ul-contact-progress li:nth-of-type(3)::before
    {
        right: -9px;
        width: 10px;
    }


    /*form*/
    .table-contact-form tbody tr {
        flex-direction: column;
        gap: 16px;
        padding: 32px 0;
    }
    .table-contact-form tbody tr th {
        width: 100%;
        padding-top: 0;
    }
    .table-contact-form tbody tr th > label {
        margin-top: 0;
    }
    .p-is_required {
        width: 42px;
        height: 22px;
        padding-top: 0;
        font-size: 12px;
        letter-spacing: 1.2px;
    }
    .table-contact-form input,
    .table-contact-form textarea {
        width: 100%;
    }
    .container-contact-call {
        width: 100%;
    }
    .wpcf7-not-valid-tip {
        font-size: 14px;
    }
    #container-form-agree .wpcf7-not-valid-tip {
        left: 30px;
    }
    .container-form-submit > p {
        flex-direction: column;
        width: 100%;
    }
    .container-form-submit > p > input {
        width: 100%;
    }
    #checkbox-eula label > .wpcf7-list-item-label {
        width: 100%;
    }

    /*call*/
    .container-contact-call img,
    .container-contact-call figure {
        display: block;
        position: absolute;
        top: -20px;
        left: calc(50% - 36px);
        width: 78px;
    }
    .container-contact-call p:nth-of-type(1) {
        font-size: 20px;
        letter-spacing: 2px;
    }
    .container-contact-call p:nth-of-type(2) {
        font-size: 30px;
        letter-spacing: 3px;
    }
    .container-contact-call p:nth-of-type(3) {
        font-size: 13px;
        letter-spacing: 1.3px;
    }
    .container-contact-call {
        margin-top: 80px;
    }

    /********************/
    /*                  */
    /*contact (confirm) */
    /*                  */
    /********************/


    /*form*/
    #section-contact-form-confirm .table-contact-form tbody #tr-contact-form-confirm {
        padding: 64px 0;
    }
    #section-contact-form-confirm .table-contact-form tbody tr td {
        width: 100%;
    }
    #section-contact-form-confirm .table-contact-form tbody #tr-contact-form-confirm td {
        flex-direction: column-reverse;
    }
    #section-contact-form-confirm .table-contact-form tbody #tr-contact-form-confirm td .button-contact{
        width: 100%;
    }


    /********************/
    /*                  */
    /*contact (complete)*/
    /*                  */
    /********************/
    
    #section-contact-form-thanks {
        padding-bottom: 64px;
    }
    .container-contact-thanks-upper h2 {
        margin-bottom: 40px;
        font-size: 24px;
        letter-spacing: 2.4px;
    }
    .container-contact-thanks-upper p {
        margin-bottom: 64px;
    }
    .container-contact-thanks-lower a{
        width: 100%;
    }
}


/*for footer*/
@media screen and (max-width:1000px) {
    /*footer*/
    #container-footer-menu {
        left: 0;
        width: 100%;
        height: 540px;
        border-radius: 64px 64px 0 0;
    }
    #a-logo-footer img {
        display: block;
        width: 104px;
    }
    #container-footer-message {
        position: absolute;
        top: 56px;
        /*185*/
        left: calc(50% - 155px);
        width: 310px;
        height: 510px;
    }
    #container-footer-menu-upper {
        flex-direction: column;
        top: 48px;
        left: 56px; 
        width: calc(100% - 112px);
        height: 393px;
    }
    #ul-footer-links-upper {
        gap: 24px;
        flex-wrap: wrap;
        justify-content: start;
        width: 270px;
    }
    #container-footer-menu-left {
        height: 305px;
    }
    #container-footer-message > p {
        position: absolute;
        left:50px;
        width: 220px;
        font-size: 32px;
        line-height: 48px;
    }
    #ul-footer-links-lower {
        flex-direction: column;
        width: 270px;
        height: 100px;
    }
    #a-button_arrow-contact {
        left: 50px;
    }
    #container-footer-menu-lower {
        display: flex;
        justify-content: center;
        position: absolute;
        width: calc(100% - 80px);
        top: 500px;
        left: 40px; 
    }
    #container-footer-menu-right {
        width: 100%;
    }
    footer .button-inquiry {
        width: 100%;
        height: 56px;
    }

    /*mv*/
    #section-index-mv {
        height: 600px;
    }
    #ul-mv-rings li:nth-of-type(1)
    {
        /*120 - 64 */
        top: -56px;
        left: -100px;
        width: 240px;
        height: 240px;
    }
    #ul-mv-rings li:nth-of-type(1)::before
    {
        /* 120 - 80 = 70*/
        top: 40px;
        left: 40px;
        /* 200 - 40 = 160 */
        width: 160px;
        height: 160px;
    }
    #ul-mv-rings li:nth-of-type(2)
    {
        top: 90px;
        right: -60px;
        width: 160px;
        height: 160px;
    }
    #ul-mv-rings li:nth-of-type(2)::before
    {
        /*80 - 40 = 40*/
        top: 40px;
        right: 40px;
        width: 80px;
        height: 80px;
    }
    #ul-mv-rings li:nth-of-type(3)
    {
        top: 480px;
        left: -70px;
        width: 240px;
        height: 240px;
    }
    #ul-mv-rings li:nth-of-type(3)::before
    {
        /* 120 - 80 = 70*/
        top: 40px;
        left: 40px;
        /* 200 - 40 = 160 */
        width: 160px;
        height: 160px;
    }
    #ul-mv-rings li:nth-of-type(4) {
        top: 380px;
        right: 20px;
        width: 240px;
        height: 240px;
    }
    #ul-mv-rings li:nth-of-type(4)::before {
        /*60 - 20 = 40*/
        top: 40px;
        right: 40px;
        width: 160px;
        height: 160px;
    }
    #ul-mv-rings-filter li:nth-of-type(1)
    {
        top: 60px;
        left: 0;
        width: 140px;
        height: 100px;
    }
    #ul-mv-rings-filter li:nth-of-type(2)
    {
        top: 150px;
        right: 0;
        width: 120px;
        height: 100px;
    }
    #ul-mv-rings-filter li:nth-of-type(3)
    {
        bottom: 0;
        left: 0;
        width: 170px;
        height: 100px;
    }
    #ul-mv-rings-filter li:nth-of-type(4)
    {
        bottom: 0px;
        right: 0;
        width: 260px;
        height: 200px;
        background: linear-gradient(180deg, #FAFAFA00 0%, #FAFAFA 50%);
    }
    #img-mv-title
    {
        top: 374px;
        left: 160px;
        width: 202px;
    }
    .ul-dotring li {
        width: 7px;
        height: 7px;
    }
    #ul-dotring-1
    {
        top: 150px;
        right: 350px;
    }
    #ul-dotring-2
    {
        top: 290px;
        right: 360px;
    }
    #img-mv-slick
    {
        top: 120px;
        right: 250px;
        width: 230px;
        height: 230px;
    }
    #container-scroll {
        display: none;
    }

}


/*for schedule*/
@media screen and (max-width: 1200px) {
    
    /*schedule*/
    .container-lit-blue {
        border-radius: 24px;
    }
    #section-index-schedule {
        height: auto;
        padding: 166px 16px;
    }
    #container-index-schedule {
        width: 100%;
        padding: 32px 16px;
    }
    #ul-schedule-timeline {
        /*flex-direction: column;*/
        gap: 32px;
        width: 100%;
        height: auto;
    }
    .container-timeline-details p:last-of-type {
        font-size: 16px;
    }
    .p-schedule-notice {
        margin-top: 32px;
    }
    #img-calender {
        width: 80px;
        bottom: -50px;
        right: 10px;
    }
    #ul-schedule-rings li:nth-of-type(1) {
        display: none;
    }
    #ul-schedule-rings li:nth-of-type(2) {
        display: none;
    }
}


/*for header*/
@media screen and (max-width:950px) {
    #img-footer-message {
        display: none;
    }
    #img-footer-message-sp {
        display: block;
    }
    #ul-header-menu
    {
        gap: 12px;
        width: auto;
    }
    .li-header-menu-sub
    {
        left: 260px;
    }
    
}

@media screen and (max-width: 900px) {
    #ul-schedule-timeline {
        flex-direction: column;
    }
}


/*Mobile*/
@media screen and (max-width:767px) {

    .visible-pc {
        display: none;
    }
    .visible-sp {
        display:initial;
    }
    .container-heading img {
        width: 32px;
    }
    .container-heading h1 {
        font-size: 32px;
    }
    .container-heading p {
        font-size: 16px;
    }

    /*header*/
    header {
        width: 100%;
        height: 64px;
    }
    header:before
    {
        content: "";
        display: block;
        position:fixed;
        top:32px;
        right:32px;
        width:0px;
        height:0px;
        border-radius: 50%;
        background-color: #76B4C2;
        z-index: 10;
        transition: top 0.6s, right 0.6s, width 0.6s, height 0.6s;
    }
    header.open::before
    {
        top:calc(50vh - 500px);
        right:calc(50vw - 500px);
        width:1000px;
        height:1000px;
    }
    header .container-menu-bg {
        opacity: 0;
        transition: 0.6s opacity;
    }
    header.open .container-menu-bg {
        width: 100vw;
        height: 100vh;
        background-color: #76B4C2;
        opacity: 1;
        z-index: 1;
    }
    #logo-header {
        width: 64px;
        height: 39px;
    }
    #ul-header-menu
    {
        flex-direction: column;
        align-items: start;
        gap: 32px;
        position: fixed;
        top: 112px;
        width: calc(100% - 32px);
        padding-left: 8px;
        z-index: 11;
    }
    .li-button-inquiry
    {
        width: 100%;
    }
    #ul-header-menu li a
    {
        color: #fff;
        font-size: 24px;
        font-weight: bold;
    }
    #ul-header-menu li .button-inquiry
    {
        width: 100%;
        background-color: #468492;

        font-size: 16px;
    }
    .button-hamburger
    {
        display: block;
        position: fixed;
        top: 8px;
        right: 8px;
        width: 48px;
        height: 48px;
        border-radius: 50%;
    }
    #button-hamburger-close
    {
        display: none;
        opacity: 0;
        z-index: 11;
    }
    header.open #button-hamburger-close
    {
        display: block;
        animation-name: fadein-from-display-none;
        animation-duration: 0.6s;
        animation-fill-mode: forwards;
    }
    @keyframes fadein-from-display-none
    {
        0%
        {
            display: none;
            opacity: 0;
        }
        1%
        {
            display: block;
            opacity: 0;
        }
        100%
        {
            opacity: 1;
        }
    }
    #logo-header-sp-menu
    {
        display: block;
        position: fixed;
        top: 8px;
        width: 64px;
        height: 39px;
        z-index: 11;
    }
    .li-header-menu-sub
    {
        position: relative;
        top: 0px;
        left: 0px;
    }
    #ul-header-menu-sub
    {
        padding: 8px 0;
    }
    #ul-header-menu #ul-header-menu-sub li a
    {
        color: #fff;
    }
    .li-header-padding {
        padding-top: 0px;
    }
    .slide-from-left
    {
        left: -1000px;
        transition: left 0.6s;
    }
    header.open .slide-from-left
    {
        left: 8px;
    }

    /*main*/
    /*mv*/
    #img-mv-title
    {
        top: 374px;
        left: 16px;
        width: 202px;
    }
    #ul-dotring-1
    {
        top: 150px;
        right: 150px;
    }
    #ul-dotring-2
    {
        top: 290px;
        right: 160px;
    }
    #img-mv-slick
    {
        top: 120px;
        right: 50px;
        width: 230px;
        height: 230px;
    }


    /*about*/
    #section-index-about {
        height: 967px;
        padding: 0 44px;
        overflow: hidden;
    }
    #section-index-about h1,
    #section-index-about p {
        text-align: left;
    }
    #section-index-about h1 {
        margin: 40px 0 30px 0;
        font-size: 24px;
        line-height: 48px;
        letter-spacing: 2.4px;
    }
    #section-index-about p {
        line-height: 32px;
    }
    #ul-images-about li:nth-of-type(1)
    {
        width: 100px;
        top: 711px;
        right: -30px;
    }
    #ul-images-about li:nth-of-type(2)
    {
        width: 128px;
        top: 840px;
        right: 96px;
    }
    #ul-images-about li:nth-of-type(3)
    {
        width: 100px;
        top: 740px;
        left: 16px;
    }
    #ul-about-rings li:nth-of-type(1)
    {
        top: 657px;
        left: -80px;
        width: 160px;
        height: 160px;
    }
    #ul-about-rings li:nth-of-type(1)::before
    {
        top: 40px;
        left: 40px;
        width: 80px;
        height: 80px;
    }
    #ul-about-rings li:nth-of-type(2)
    {
        top: 730px;
        right: -120px;
        width: 240px;
        height: 240px;
    }
    #ul-about-rings li:nth-of-type(2)::before
    {
        /*120 - 80 = 40*/
        top: 40px;
        left: 40px;
        width: 160px;
        height: 160px;
    }
    #ul-about-rings-filter li:nth-of-type(1) {
        top: 650px;
        left: 0;
        width: 50px;
        height: 200px;
        background: linear-gradient(270deg, #FAFAFA00, #FAFAFA);
    }
    #ul-about-rings-filter li:nth-of-type(2) {
        top: 700px;
        right: 0;
        width: 50px;
        height: 270px;
        background: linear-gradient(90deg, #FAFAFA00, #FAFAFA);
    }
    #img-lifeprogress {
        display: block;
        position: absolute;
        top: 250px;
        left: -250px;
        width: 570px;
        max-width: none;
        transform: rotate(90deg);
    }

    /*work*/
    #section-index-work {
        height: auto;
        padding: 100px 16px;
    }
    #ul-works {
        flex-direction: column;
        height: auto;
    }
    #ul-works > li {
        gap: 8px;
        width: 100%;
        height: 420px;
        justify-content: end;
    }
    #ul-works > li:first-of-type {
        justify-content: end;
    }
    #ul-works > li:first-of-type .ul-work-details > li {
        text-align: left;
    }
    #ul-works > li > img {
        width: 62%;
        margin: 0 auto;
    }
    .ul-work-details > li {
        font-size: 16px;
    }
    #ul-works > li.inview-fade-from-below:nth-of-type(2) {
        transition-delay: 0;
    }
    #ul-work-icons-bg-filter {
        top: 0px;
        left: 0;
        width: 100%;
    }
    #ul-work-icons-bg-filter li {
        width: 200px;
        height: 200px;
    }
    #ul-work-icons-bg-filter li:first-of-type {
        top: 300px;
        left: calc(50% - 100px);
        animation: none;
    }
    #ul-work-icons-bg-filter li:last-of-type {
        top: 790px;
        right: calc(50% - 100px);
        animation: none;
    }
    #img-work1,
    #img-work2 {
        width: 130px;
    }
    #img-work1 {
        top: 320px;
        left: calc(50% - 65px);
    }
    #img-work2 {
        top: 840px;
        right: calc(50% - 65px);
    }

    /*slideshow*/
    #ul-slideshow {
        width: 100vw;
        height: 80vw;
    }
    #ul-slideshow li {
        top: 0;
        left: calc(200px * -1);
        width: 200px;
        height: 150px;
        animation: slideshow 18s linear infinite, slideshow-wave 36s linear infinite;
    }
    #ul-slideshow li:nth-of-type(2) {
        animation-delay: 3s;
    }
    #ul-slideshow li:nth-of-type(3) {
        animation-delay: 6s;
    }
    #ul-slideshow li:nth-of-type(4) {
        animation-delay: 9s;
    }
    #ul-slideshow li:nth-of-type(5) {
        animation-delay: 12s;
    }
    #ul-slideshow li:nth-of-type(6) {
        animation-delay: 15s;
    }
    @keyframes slideshow {
        0% {
            left: calc(200px * -1);
        }
        100% {
            left: calc(1200px);
        }
    }
    @keyframes slideshow-wave {
        0% {
            top: 0;
        }
    }


}

@media screen and (max-width: 550px) {
    #ul-mv-rings li:nth-of-type(4) {
        top: 380px;
        right: 20px;
        width: 120px;
        height: 120px;
    }
    #ul-mv-rings li:nth-of-type(4)::before {
        /*60 - 20 = 40*/
        top: 40px;
        right: 40px;
        width: 40px;
        height: 40px;
    }
    #ul-mv-rings-filter li:nth-of-type(4)
    {
        bottom: 100px;
        right: 0;
        width: 170px;
        height: 50px;
        background: linear-gradient(180deg, #FAFAFA00 0%, #FAFAFA 50%);
    }
}