/* reset.css start */
* {
    border: 0;
    box-sizing: border-box;
    font-family: "Noto Sans JP", serif;
    margin: 0;
    padding: 0;
    text-decoration: none;
}

ul,li {
    list-style: none;
}

a {
    text-decoration: none;
  }

body{
    width: 100%;
}
/* reset.css end */

/* mainVisualArea start */
.header_container {
    height: 120px;
    left: 50%;
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    width: 100%;
    z-index: 2;
}

.header_inner_box {
    align-items: center;
    display: block;
    justify-content: space-between;
}

.header_logo_box {
    margin: min(2vw, 2rem) auto;
    width: min(18vw, 20rem);
}

.header_logo_link {
    align-items: center;
    display: flex;
    justify-content: center;
    transition: 0.5s;

    &:hover {
        opacity: 0.5;
    }
}

.header_logo_image {
    width: min(18vw, 20rem);
}

.header_navigation_area {
    margin-left: auto;
    margin-right: auto;
    max-width: 800px;
    width: 90%;
}

.header_navigation_list {
    align-items: center;
    display: flex;
    gap: 3%;
    justify-content: center;
}

.header_navigation_item {
    align-items: center;
    display: flex;
}

.header_navigation_link_text {
    color: #fff;
    font-size: min(2.5vw,1.75rem);
    font-weight: 300;
    position: relative;

    &::after {
        background: #33c4f5;
        bottom: -7px;
        content: "";
        height: 3px;
        left: 0;
        position: absolute;
        transform: scale(0, 1);
        transform-origin: right top;
        transition: transform .25s;
        width: 100%;
    }

    &:hover::after {
        transform: scale(1, 1);
        transform-origin: left top;
    }
}

.main_container {
    background: #216FF4;
    display: grid;
    grid-template: 
        "main_grid_1 main_grid_1 main_grid_1" 58%
        "main_grid_2 main_grid_3 main_grid_4" 42%
        / 33% 34% 33%;
    position: relative
}

.main_grid_1_area {
    display: block;
    grid-area: main_grid_1;
    margin: auto;
    margin-bottom: 10%;
    margin-top: 15%;
    max-width: 950px;
    position: relative;
    width: 90%;
    z-index: 2;
}

.main_grid_2_area {
    align-items: center;
    background: #42B3F0;
    display: flex;
    grid-area: main_grid_2;
    justify-content: center;
    position: relative;
}

.main_grid_3_area {
    align-items: center;
    background: #0B87CA;
    display: flex;
    grid-area: main_grid_3;
    justify-content: center;
    position: relative;
}

.main_grid_4_area {
    align-items: center;
    background: #065F90;
    display: flex;
    grid-area: main_grid_4;
    justify-content: center;
    position: relative;
}

.main_title_area {
    align-items: center;
    display: flex;
    justify-content: center;
}

.main_title_span_text {
    color: #fff;
    font-size: min(8.5vw, 8rem);
    font-weight: 400;
    line-height: 1.25;
    text-align: right;
}

.main_title_text {
    color: #fff;
    font-size: min(3vw, 2.75rem);
    font-weight: 300;
    padding: 0 min(2vw, 1rem);
    text-align: left;
    width: 56%;
}

.main_subtitle_text {
    color: #fff;
    font-size: min(1.75vw, 1.5rem);
    font-weight: 300;
    line-height: 1.75;
    margin: auto;
    text-align: center;
    width: 83%;
}

.main_link_area {
    margin: min(1.9vw,3rem) auto auto;
    width: 100%;
}

.main_link_contact_text {
    align-items: center;
    background: #F14E06;
    border-radius: 50vw;
    color: #fff;
    display: flex;
    font-size: min(1.5vw, 1.6rem);
    font-weight: 300;
    justify-content: center;
    line-height: 1;
    margin: auto;
    padding: min(1vw, 1rem) min(1vw, 1.5rem);
    transition: 0.5s;
    width: min(24vw, 46%);

    &:hover {
        background: #fff;
        color: #F14E06;
    }
}

.main_image_bg {
    bottom: 43%;
    margin-left: 50%;
    opacity: 0.1;
    position: absolute;
    width: min(45%, 54rem);
    z-index: 1;
}

.main_list_box {
    display: block;
    width: 100%;
}

.main_item_span_text {
    color: #fff;
    content: "";
    font-size: min(6vw, 5rem);
    font-weight: 400;
    left:  7.5%;
    opacity: 0.15;
    position: absolute;
    top: 3%;
}

.main_item_title_text {
    color: #fff;
    font-size: min(3vw, 2.75rem);
    font-weight: 500;
    line-height: 1.75;
    max-width: 450px;
    padding: 25% 0;
    text-align: center;
    width: 91%;
}
/* mainVisualArea end */

/* reformArea start */
.reform_title_area {
    display: block;
    margin: 7% auto 2%;
}

.reform_title_text {
    color: #065F90;
    font-size: min(2vw, 3rem);
    line-height: 1.75;
    margin: auto auto min(2.25vw, 1.2rem);
    text-align: center;
    width: 26%;
}

.reform_paragraph_text {
    font-size: min(1vw,1.5rem);
    line-height: 1.75;
    margin: auto;
    text-align: center;
    width: 34%;
}

.reform_video_content {
    margin: auto auto -0.5%;
    position: relative;
    width: 100%;
}

.reform_video_content_paragraph_area {
    color: #fff;
    content: "";
    display: block;
    font-size: min(4vw, 5.5rem);
    font-weight: bold;
    left: 50%;
    letter-spacing: min(0.3vw, 0.5rem);
    line-height: 1.75;
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translate(-50%, -50%);
    width: fit-content;
    z-index: 2;
}

.reform_video_area {
    filter: brightness(0.7) contrast(1.25);
    width: 100%;
}

.reform_video_source_bg {
    height: 100%;
    max-width: 1920px;
    width: 100%;
}

.reform_accordion_content {
    display: flex;
    margin: auto;
    width: 100%;
}

.reform_accordion_content_inner {
    border-left: unset;
    border-right: unset;
    display: flex;
    overflow: hidden;
    padding: 7% 2vw 6%;
    position: relative;
    transition: ease-in-out 0.5s;
    width: 15%;

    &:nth-child(1) {
        background: linear-gradient(to bottom right,#0BBAFB 0%,#4285EC 100%);
    }

    &:nth-child(2) {
        background: #216FF4;
    }

    &:nth-child(3) {
        background: #065F90;
    }
}

.reform_accordion_content_image_box {
    opacity: 0.1;
    transform: translateX(-30vw);
    transition: ease-in-out 0.5s;
    width: min(36vw,64rem);
    & .item_image {
        transition: ease-in-out 0.5s;
        width: min(36vw,64rem);
    }
}

.reform_accordion_content_textarea {
    display: block;
    min-width: min(25vw, 49.5rem);
    opacity: 0;
    transition: ease-in-out 0.5s;
    width: min(25vw, 49.5rem);
}

.reform_accordion_content_title_text {
    border-bottom: 1px solid #fff;
    color: #fff;
    font-size: min(1.5vw, 1.75rem);
    margin: auto auto min(1vw, 1rem) auto;
    opacity: 0;
    padding: 0 0% 1.5% 0;
    text-align: center;
    transition: ease-in-out 0.5s;
    width: 92%;
}

 .reform_accordion_content_paragraph_text {
    color: #fff;
    font-size: min(1.15vw, 1.5rem);
    font-weight: 300;
    line-height: 1.75;
    opacity: 0;
    padding: 0 1%;
    text-align: left;
    transition: ease-in-out 0.5s;
    width: min(23vw,38rem);
}

.reform_accordion_content_upperside_number_text,
.reform_accordion_content_underside_number_text {
    color: #fff;
    font-size: min(4vw, 4.5rem);
    font-weight: 700;
    position: absolute;
    transition: ease-in-out 0.5s;
}

.reform_accordion_content_underside_number_text {
    bottom: 4%;
    opacity: 0.7;
    right: 17%;
    transition: ease-in-out 0.5s;
}

.reform_accordion_content_upperside_number_text {
    left: 8%;
    opacity: 0;
    top: 2%;
    transition: ease-in-out 0.5s;
}

/* accordion active css start */
.reform_accordion_content_inner.is_active {
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    padding: 7% 3% 6% 6%;
    width: 70%;

    & .reform_accordion_content_image_box {
        opacity: 1;
        transform: unset;
    }
    
    & .reform_accordion_content_textarea {
        display: block;
        opacity: 1;
        padding-left: 3%;
    }

    & .reform_accordion_content_title_text {
        opacity: 1;
    }

    & .reform_accordion_content_paragraph_text {
        opacity: 1;
        width: min(23vw,38rem);
    }

    & .reform_accordion_content_upperside_number_text {
        opacity: 0.7;
    }

    & .reform_accordion_content_underside_number_text {
        opacity: 0;
    }
}
/* accordion active css end */
/* reformArea end */

/* supportArea start */
.support_container {
    margin: min(16vw,15rem) auto min(8vw,7rem);
}

.support_title_text {
    color: #065F90;
    font-size: min(2vw, 3rem);
    line-height: 1.75;
    margin: auto auto min(1vw, 0.5rem);
    text-align: center;
    width: 32%;
}

.support_paragraph_text {
    font-size: min(1.25vw,1.25rem);
    line-height: 1.75;
    margin: auto auto min(4vw, 2.5rem);
    text-align: center;
    width: 50%;

}

.support_content_wrapper {
    background: #06A7FA;
    width: 100%;
}

.support_content{
    margin: auto;
    max-width: 1920px;
    position: relative;
    width: 100%;
}

.support_content_title_text {
    color: #fff;
    font-size: min(1.25vw,1.25rem);
    font-weight: 300;
    line-height: 1.75;
    margin: auto;
    padding: min(4vw, 4rem) 0;
    text-align: center;
    width: 50%;
}

.support_content_grid_box_wrapper {
    display: flex;
    gap: min(3.5vw, 4rem);
    margin: auto;
    padding-bottom: min(4vw, 4rem);
    position: relative;
    width: 57%;
    z-index: 4;

    & .support_grid_item_box:nth-child(2) {
        position: relative;
    }
}

.support_grid_item_box {
    background: #fff;
    padding: 3% 2% 4%;
}

.support_grid_item_image_icon{
    display: none;
}

.support_grid_item_title_text {
    border-bottom: 2px solid #15A6FD;
    color: #065F90;
    font-size: min(1.5vw, 1.75rem);
    font-weight: bold;
    margin-bottom: min(1.25vw, 0.75rem);
    padding-bottom: min(1vw, 0.5rem);
    text-align: center;
}

.support_grid_item_paragraph_text {
    color: #15b4fd;
    font-size: min(1.2vw, 1.4rem);
    font-weight: 500;
    line-height: 1.75;
}

.support_content_image_bg {
    bottom: 0;
    height: 76%;
    opacity: 0.35;
    position: absolute;
    z-index: 3;

    &.left_image{
        height: min(24vw, 25rem);
        left: 0;
        width: min(35.5vw, 37rem);
    }

    &.right_image{
        height: min(24vw, 25rem);
        right: 0;
        width: min(33vw, 34rem);
    }
}

.support_content_link_text {
    align-items: center;
    background: #F14E06;
    border-radius: 50vw;
    color: #fff;
    display: flex;
    font-size: min(1.2vw, 1.5rem);
    font-weight: 500;
    justify-content: center;
    margin: min(4vw, 4rem) auto auto;
    padding: 1% 0;
    transition: 0.5s;
    width: 18%;
    
    &:hover {
        background: #fff;
        color: #F14E06;
    }
}
/* supportArea end */

/* serviceArea start */
.service_title_text {
    color: #065F90;
    font-size: min(2.75vw, 3rem);
    line-height: 1.75;
    margin-bottom: min(1vw, 0.5rem);
    text-align: center;
}

.service_paragraph_text {
    font-size: min(1.25vw,1.25rem);
    line-height: 1.75;
    margin: auto auto min(4vw, 2.5rem);
    text-align: center;
    width: 45.5%;
}

.service_content_wrapper {
    background: #F6F9FA;
    width: 100%;
}

.service_content {
    align-items: center;
    display: flex;
    justify-content: center;
    margin: auto;
    max-width: 1920px;
    padding: 2.5% 0;
    width: 100%;
}

.service_content_title_box {
    align-items: center;
    display: flex;
    justify-content: center;
    padding: 9% 0;
    position: relative;
    width: 27%;
    z-index: 3;

    &:after{
        background: url(/src/assets/images/bg_eyesServiceServiceArea_01_pc.png);
        background-position: 50% 50%;
        background-repeat: no-repeat;
        background-size: 100%;
        content: "";
        height: 100%;
        left: 0;
        position: absolute;
        right: 0;
        width: 100%;
        z-index: 2;
    }
}

.service_content_title_text {
    color: #065F90;
    font-size: min(4vw,2.5rem);
    font-weight: 700;
    position: relative;
    z-index: 4;
}

.service_content_image_figure {
    filter: brightness(1.1);
    margin-left: 6%;
    margin-right: 11%;
    width: 56%;
}
/* serviceArea end */

/* casestudyArea start */
.casestudy_container {
    margin-top: min(4vw, 4.5rem);
}

.casestudy_title_text {
    color: #065F90;
    font-size: min(2.75vw, 3rem);
    line-height: 1.75;
    margin-bottom: min(1vw, 0.5rem);
    text-align: center;
}

.casestudy_paragraph_text {
    font-size: min(1.25vw, 1.5rem);
    line-height: 1.75;
    margin: auto auto min(2vw, 1.5rem);
    text-align: center;
    width: 45%;
}

.casestudy_accordion_content {
    display: flex;
    margin: auto;
    width: 100%;
}

.casestudy_accordion_content_inner {
    overflow: hidden;
    padding: 4.5% 2% 4%;
    position: relative;
    transition: ease-in-out 0.5s;
    width: 13%;

    &:nth-child(1) {
        background: linear-gradient(to bottom right,#0BBAFB 0%,#4285EC 100%);
        order: 3;
    }

    &:nth-child(2) {
        background: #065F90;
        order: 2;
    }

    &:nth-child(3) {
        background: #216FF4;
        order: 1;
    }
}

.casestudy_accordion_content_title_text {
    border-bottom: 1px solid #fff;
    color: #fff;
    display: block;
    font-size: min(1.75vw, 2rem);
    font-weight: 400;
    margin-bottom: min(2vw, 2rem);
    min-width: min(61vw, 98rem);
    opacity: 0;
    padding-bottom: min(0.5vw, 0.75rem);
    padding-left: min(1vw, 1.25rem);
    transition: ease-in-out 0.5s;
    width: min(61vw, 98rem);
}

.casestudy_accordion_content_case_box {
    display: flex;
    width: 100%;

    & .item_image {
        opacity: 0.25;
        transition: ease-in-out 0.5s;
        width: min(29vw, 46rem);
    }
}

.casestudy_accordion_content_paragraph_text {
    color: #fff;
    display: block;
    font-size: min(1.25vw, 1.4rem);
    font-weight: 300;
    line-height: 1.9;
    min-width: min(32vw, 53.5rem);
    opacity: 0;
    padding: min(1vw, 1rem) 0 0 min(2vw, 2rem);
    transition: ease-in-out 0.5s;
    width: min(32vw, 53.5rem);
}

.casestudy_accordion_content_number_text {
    bottom: 4%;
    color: #fff;
    font-size: min(4vw, 4.5rem);
    font-weight: 700;
    opacity: 0.75;
    position: absolute;
    right: 17%;
    transition: ease-in-out 0.5s;
}

/* accordion active css start */
.casestudy_accordion_content_inner.is_active {
    padding: 4.5% 9% 4% 4%;
    width: 74%;
    
    & .casestudy_accordion_content_case_box {
        & .item_image {
            opacity: 1;
        }
    }

    & .casestudy_accordion_content_title_text,
    & .casestudy_accordion_content_paragraph_text {
        opacity: 1;
    }

    & .casestudy_accordion_content_number_text {
        right: 8%;
    }
}
/* accordion active css end */
/* casestudyArea end */

/* companylogoArea start */
.companylogo_container {
    background: #E8F5FB;
    margin: min(6vw,5rem) auto;
    padding: 3% 0;
}

.companylogo_content {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: auto;
    max-width: 1920px;
    width: 100%;
}

.companylogo_image_box {
    align-items: center;
    background: #fff;
    display: flex;
    height: min(6.5vw, 8rem);
    justify-content: center;
    margin: 2%;
    padding: 1%;
    width: min(10vw, 12rem);
}

.companylogo_image_logo {
    width: 80%;
}
/* companylogoArea end */

/* fucnctionArea start */
.function_container {
    background: linear-gradient(to bottom,#E8F5FB 0%,#E8F5FB 66%, #ffffff00 66%);
    margin-top: 4%;
    padding-top: 4rem;
    width: 100%;
}

.function_title_text {
    color: #065F90;
    font-size: min(2.75vw, 3rem);
    line-height: 1.75;
    margin-bottom: min(1vw, 0.5rem);
    text-align: center;
}

.function_paragraph_text {
    font-size: min(1.25vw,1.25rem);
    line-height: 1.75;
    margin: auto auto min(4vw, 2.5rem);
    text-align: center;
    width: 30%;
}

.function_content {
    display: flex;
    margin: auto;
    max-width: 2020px;
    width: 100%;
}

.function_content_image_area {
    width: 30%;
}

.function_content_image_pc {
    display: block;
    margin-left: -30%;
    margin-top: 10%;
    width: 160%;

    &:nth-child(2),
    &:nth-child(3){
        display: none;
    }
}

.function_content_grid_box_wrapper {
    display: grid;
    grid-gap: min(3vw, 4rem);
    grid-template:
        "grid_1 grid_2" 49%
        "grid_3 grid_4" 49%
        / 50% 50%;
    margin: auto;
    width: 40%;
}

.function_grid_1_box {
    background:  linear-gradient(to bottom right,#0BBAFB 0%,#4285EC 100%);
    display: flex;
    flex-direction: column;
    grid-area: grid_1;
    position: relative;
}

.function_grid_2_box {
    background:  linear-gradient(to bottom right,#0BBAFB 0%,#4285EC 100%);
    display: flex;
    flex-direction: column;
    grid-area: grid_2;
    position: relative;
}

.function_grid_3_box {
    background:  linear-gradient(to bottom right,#0BBAFB 0%,#4285EC 100%);
    display: flex;
    flex-direction: column;
    grid-area: grid_3;
    position: relative;
}

.function_grid_4_box {
    background:  linear-gradient(to bottom right,#0BBAFB 0%,#4285EC 100%);
    display: flex;
    flex-direction: column;
    grid-area: grid_4;
    position: relative;
}

.function_grid_item_number_text {
    color: #0191DA;
    font-size: min(2.5vw, 2.2rem);
    font-weight: bold;
    left: -8%;
    position: absolute;
    top: -9%;
}

.function_grid_item_image {
    display: block;
    margin: min(2vw,1.5rem) auto auto;
    width: 80%;
}

.function_grid_item_paragraph_text {
    color: #ffffff;
    display: block;
    font-size: min(1vw,1.25rem);
    font-weight: 300;
    line-height: 1.75;
    margin: auto auto min(1vw,1rem);
    text-align: center;
    width: 80%;
}
/* fucnctionArea end */

/* planArea start */
.plan_container {
    margin: min(11vw,13rem) auto auto;
}

.plan_title_text {
    color: #065F90;
    font-size: min(2.75vw, 3rem);
    line-height: 1.75;
    margin-bottom: min(1vw, 0.5rem);
    text-align: center;
}

.plan_paragraph_text {
    font-size: min(1.25vw, 1.5rem);
    line-height: 1.75;
    margin: auto auto min(4vw, 2.5rem);
    text-align: center;
    width: 30%;
}

.plan_content {
    background:  linear-gradient(90deg,#0BBAFB 0%,#4285EC 100%);
    position: relative;
}

.plan_content_image_bg {
    height: 100%;
    opacity: 0.2;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}

.plan_content_title_text {
    color: #ffffff;
    font-size: min(2.25vw, 2.25rem);
    line-height: 1.75;
    padding-top: min(1.25vw, 1.5rem);
    position: relative;
    text-align: center;
    z-index: 3;
}

.plan_content_inner_box {
    display: flex;
    justify-content: center;
    margin: auto;
    max-width: 1920px;
    position: relative;
    width: 100%;
    z-index: 3;
}

.plan_content_grid_box_wrapper {
    display: grid;
    gap: min(2vw, 1rem);
    grid-template:
        "plan_grid_1 plan_grid_2" 50%
        "plan_grid_3 plan_grid_4" 50%
        / 50% 50%;
    margin: 3% 4% 4% 4%;
    width: 39%;
}

.plan_grid_1_box {
    background: #fff;
    display: flex;
    flex-direction: column;
    grid-area: plan_grid_1;
    position: relative;
}

.plan_grid_2_box {
    background: #fff;
    display: flex;
    flex-direction: column;
    grid-area: plan_grid_2;
    position: relative;
}

.plan_grid_3_box {
    background: #fff;
    display: flex;
    flex-direction: column;
    grid-area: plan_grid_3;
    position: relative;
}

.plan_grid_4_box {
    background: #fff;
    display: flex;
    flex-direction: column;
    grid-area: plan_grid_4;
    position: relative;
}

.plan_grid_item_title_box {
    align-items: center;
    display: flex;
    height: min(6vw, 5rem);
    justify-content: flex-start;
    margin: 3% auto;
    padding: 0 5%;

    & .grid_item_icon{
        display: block;
        margin-right: 5%;
        width: 20%;
    }

    & .grid_item_title_text{
        color: #065F90;
        font-size: min(1.5vw, 1.75rem);
        font-weight: 500;
        line-height: 1.5;
        text-align: left;
    }
}

.plan_grid_item_paragraph_text {
    font-size: min(1.1vw, 1.3rem);
    line-height: 1.75;
    margin: min(1vw, 1rem) auto min(1vw, 1rem);
    text-align: center;
    width: 90%;
}

.plan_grid_item_span_circle {
    align-items: center;
    background: #F56B26;
    border-radius: 50vw;
    color: #fff;
    display: flex;
    font-size: min(1vw, 0.75rem);
    height: min(6vw, 6rem);
    justify-content: center;
    left: -25%;
    line-height: 1.75;
    padding: 3.5%;
    position: absolute;
    text-align: center;
    top: 22%;
    width: min(6vw, 6rem);
}

.plan_content_image_area {
    margin-bottom: min(-10vw, -10rem);
    margin-top: min(17vw, 17rem);
    width: 30%;
}

.plan_content_image_box {
    position: relative;
    width: 100%;
}

.plan_content_image_paragraph_text {
    color: #ffffff;
    font-size: min(1.5vw, 1.5rem);
    font-weight: bold;
    left: 50%;
    line-height: 1.75;
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 75%;
}

.plan_content_image {
    width: 100%;
}

.plan_content_link_text {
    align-items: center;
    background: #F14E06;
    border-radius: 50vw;
    color: #fff;
    display: flex;
    font-size: min(1.5vw, 1.5rem);
    font-weight: 500;
    justify-content: center;
    margin: min(1vw, 1rem) auto auto;
    padding: 4.5% 0;
    transition: 0.5s;
    width: 65%;

    &:hover {
        background: #fff;
        color: #F14E06;
    }
}
/* planArea end */

/* footerArea start */
.footer_contaier {
    background: #216FF4;
    margin-top: min(17vw,20rem);
}

.footer_title_area {
    align-items: center;
    display: flex;
    justify-content: center;
    margin: auto;
    max-width: 1920px;
    padding-top: min(3vw, 4rem);
    position: relative;
    width: 40%;

}

.footer_title_span_text {
    color: #fff;
    font-size: min(5.5vw, 6rem);
    font-weight: 400;
    line-height: 1.25;
    text-align: right;
}

.footer_title_text {
    color: #fff;
    font-size: min(1.7vw, 2rem);
    font-weight: 300;
    padding: 0 min(2vw, 1rem);
    text-align: left;
    width: 56%;
}

.footer_contact_link_text {
    align-items: center;
    background: #F14E06;
    border-radius: 50vw;
    color: #fff;
    display: flex;
    font-size: min(1.2vw, 1.5rem);
    font-weight: 500;
    justify-content: center;
    left: -43%;
    padding: 3% 0;
    position: absolute;
    top: 50%;
    transform: translateY(0%);
    transition: 0.5s;
    width: 45%;

    &:hover{
        background: #fff;
        color: #F14E06;
    }
}

.footer_image_pc {
    opacity: 0.1;
    position: absolute;
    right: -30%;
    top: -35%;
    transform: translateY(20%);
    width: min(20vw, 20rem);
}

.footer_grid_content_box {
    display: grid;
    grid-template:
        "gf1 gf2 gf3 gf4 gf11" 20%
        "gf1 gf5 gf6 gf7 gf11" 17%
        "gf1 gf8 gf9 gf10 gf12" 17%
        "gf13 gf13 gf14 gf14 gf12" 17%
        "gf15 gf15 gf15 gf15 gf15" 20%
         / 20% 20% 20% 5% 25%;
    margin: min(4vw,4rem) auto auto;
    width: 70%;
}

/* footer grid designation start */
.footer_grid_gf1 {
    align-items: center;
    display: flex;
    grid-area: gf1;
    justify-content: center;
}

.footer_grid_gf2 {
    align-items: center;
    border-bottom: white solid 3px;
    color:white;
    display: flex;
    grid-area: gf2;
    margin: 2px;
    width: 90%;
}

.footer_grid_gf3 {
    align-items: center;
    border-bottom: white solid 3px;
    color:white;
    display: flex;
    grid-area: gf3;
    margin: 2px;
}

.footer_grid_gf4 {
    grid-area: gf4;
}

.footer_grid_gf5 {
    grid-area: gf5;
}

.footer_grid_gf6 {
    grid-area: gf6;
}

.footer_grid_gf7 {
    grid-area: gf7;
}

.footer_grid_gf8 {
    grid-area: gf8;
}

.footer_grid_gf9 {
    grid-area: gf9;
}

.footer_grid_gf10 {
    grid-area: gf10;
}


.footer_grid_gf11{
    align-items: center;
    display: flex;
    grid-area: gf11;
}

.footer_grid_gf12{
    display: flex;
    grid-area: gf12;

    & .footer_link_text_button {
        background: #F14E06;
        /* border: 3px solid #fff; */
        color: #f7f9f9;

        &:hover {
            background: #fff;
            color: #F14E06;
        }
    }
}

.footer_grid_gf13 {
    grid-area: gf13;
    justify-content: center;

    .footer_link_text {
        margin-left: 53%;
    }
}

.footer_grid_gf14 {
    grid-area: gf14;
    justify-content: center;
}

.footer_grid_gf15 {
    align-items: end;
    display: flex;
    grid-area: gf15;
    justify-content: center;
    margin-left: 10%;
}
/* footer grid designation end */

.footer_category_title_text {
    font-size: min(1.1vw, 1.25rem);
}

.footer_logo_link {
    align-items: center;
    display: flex;
    height: fit-content;
    justify-content: center;
    transition: 0.5s;

    &:hover {
        opacity: 0.5;
    }
}

.footer_logo_image {
    width: min(8.5vw, 13rem);
}

.footer_link_text {
    align-items: center;
    background: unset;
    border-radius: 50vw;
    color: #fff;
    display: flex;
    font-size: min(1vw, 1.05rem);
    justify-content: left;
    margin: min(1vw, 20px);
    position: relative;
    width: fit-content;

    &::after {
        background: #33c4f5;
        bottom: -5px;
        content: "";
        height: 3px;
        left: 0;
        position: absolute;
        transform: scale(0, 1);
        transform-origin: right top;
        transition: transform .25s;
        width: 100%;
    }

    &:hover::after {
        transform: scale(1, 1);
        transform-origin: left top;
    }
}

.footer_link_text_button {
    align-items: center;
    background: #fff;
    /* border: 3px solid #fff; */
    border-radius: 50vw;
    color: #F14E06;
    display: flex;
    font-size: min(1.25vw, 1.1rem);
    font-weight: 500;
    height: min(4vw, 4rem);
    justify-content: center;
    margin: min(1vw, 20px) 0;
    transition: 0.5s;
    width: min(19vw, 400px);

    &:hover {
        background: #F14E06;
        color: #fff;
    }
}

.footer_copyright_text {
    color: #fff;
    display: block;
    font-size: min(0.75vw,0.75rem);
    grid-area: gf15;
    text-align: center;
}

/* footerArea end */

/* mobile coding start */
@media screen and (max-width: 750px) {
    /* mainVisualArea start */
    .header_container {
        height: fit-content;
    }
    
    .header_logo_box {
        margin: min(3vw, 2rem) auto;
        width: min(30vw, 13rem);
    }

    .header_logo_image {
        width: min(30vw, 13rem);
    }

    .header_navigation_area,
    .header_navigation_list,
    .header_navigation_item,
    .header_navigation_link_text {
        display: none;
    }
    
    .main_container {
        grid-template: 
        "main_grid_1 main_grid_1 main_grid_1" 70%
        "main_grid_2 main_grid_3 main_grid_4" 30%
        / 33% 34% 33%
    }

    .main_grid_1_area {
        margin-bottom: 15%;
    }
    
    .main_title_area {
        display: block;
        text-align: center;
    }
    
    .main_title_span_text {
        text-align: unset;
    }
    
    .main_title_text {
        font-size: min(7vw, 3.25rem);
        line-height: 1.25;
        margin: auto;
        padding: unset;
        text-align: unset;
        width: 90%;
    }
    
    .main_subtitle_text {
        bottom: -33%;
        font-size: min(2.5vw, 1.2rem);
        left: 50%;
        position: absolute;
        transform: translateX(-50%);
        width: 100%;
    }
    
    .main_link_area {
        margin: min(5vw, 2rem) auto min(4vw, 2rem);
    }
    
    .main_link_contact_text {
        border-radius: 2vw;
        font-size: min(3.25vw, 1.5rem);
        padding: min(2vw, 1rem) min(2vw, 1.5rem);
        width: min(50vw, 55%);
    }
    
    .main_image_bg {
        bottom: 35%;
        left: 50%;
        margin-left: unset;
        transform: translateX(-50%);
        width: min(65vw, 31rem);
    }

    .main_item_span_text {
        font-size: min(5vw, 4rem);
        font-weight: 300;
        left:  50%;
        top: 5%;
        transform: translateX(-50%);
    }

    .main_item_title_text {
        font-size: min(2.75vw, 1.3rem);
        font-weight: 500;
        padding: min(10vw, 5rem) 0 min(7vw, 4rem);
    }
    /* mainVisualArea end */

    /* reformArea start */
    .reform_container {
        position: relative;
    }

    .reform_title_area {
        margin: 7% auto auto;
        position: absolute;
        width: 100%;
        z-index: 4;
    }

    .reform_title_text {
        color: #fff;
        font-size: min(4.5vw, 2rem);
        margin-bottom: min(4vw, 2rem);
        width: 59%;
    }

    .reform_paragraph_text {
        color: #fff;
        font-size: min(2.2vw,1rem);
        width: 77%;
    }
    
    .reform_video_content {
        margin: auto auto -1.5%;
    }

    .reform_video_content_paragraph_area {
        align-items: center;
        bottom: 0;
        display: flex;
        flex-wrap: wrap;
        font-size: min(3vw, 1.4rem);
        justify-content: center;
        position: absolute;
        top: unset;
        width: 53%;
    }

    .reform_video_paragraph_text {
        width: 50%;
    }

    .reform_accordion_content {
        display: block;
        margin: auto;
        max-width: unset;
        width: 100%;
    }

    .reform_accordion_content_inner {
        padding: 9% 3% 7% 5%;
        width: 100%;

        & .reform_accordion_content_textarea {
            display: block;
            min-width: unset;
            opacity: 1;
            padding-left: 3%;
            width: unset;
        }
    }

    .reform_accordion_content_image_box {
        margin-top: 4%;
        opacity: 1;
        transform: unset;
        width: min(56vw,28rem);

        & .item_image {
            width: min(56vw,28rem);
        }
    }
    
    .reform_accordion_content_textarea {
        display: block;
        opacity: 1;
    }

    .reform_accordion_content_title_text {
        border-bottom: 1px solid #fff;
        font-size: 2.1vw;
        margin: auto auto min(1vw, 1rem) 0;
        opacity: 1;
        padding: 0 0% 3% 0.5%;
        text-align: left;
        width: 100%;
    }

    .reform_accordion_content_paragraph_text {
        font-size: 2vw;
        opacity: 1;
        width: min(31.5vw,16rem);
    }

    .reform_accordion_content_underside_number_text {
        opacity: 0;
    }

    .reform_accordion_content_upperside_number_text {
        font-size: min(8vw, 3.5rem);
        left: 8%;
        opacity: 0.7;
        top: 3%;
    }

    .reform_accordion_content_inner.is_active {
        border-left: unset;
        border-right: unset;
        padding: 9% 3% 7% 5%;
        width: 100%;

        & .reform_accordion_content_textarea {
            padding-left: 3%;
        }

        & .reform_accordion_content_title_text {
            opacity: 1;
        }

        & .reform_accordion_content_paragraph_text {
            opacity: 1;
            width: min(31.5vw,16rem);
        }

        & .reform_accordion_content_upperside_number_text {
            opacity: 0.7;
        }

        .reform_accordion_content_underside_number_text {
            opacity: 0;
        }
    }
    /* reformArea end */

    /* supportArea start */
    .support_container {
        margin: min(5vw,2rem) auto;
    }

    .support_title_text {
        font-size: min(3.25vw, 3rem);
        width: 58%;
    }

    .support_paragraph_text {
        font-size: min(1.5vw,1.25rem);
        margin-bottom: min(3vw, 2.5rem);
        width: 70%;
    }

    .support_content_title_text {
        font-size: min(2.5vw, 2rem);
        padding: min(2vw, 2rem) 0;
        width: 85%;
    }

    .support_content_grid_box_wrapper {
        flex-wrap: wrap;
        gap: 2vw 4vw;
        justify-content: space-around;
    }

    .support_grid_item_box {
        padding: 5% 5% 8%;
        width: 45%;
    }

    .support_grid_item_image_icon{
        display: block;
        left: 50%;
        position: absolute;
        top: 32%;
        transform: translateX(-50%);
        width: 11vw;
    }

    .support_grid_item_title_text {
        font-size: min(2.25vw,1.2rem);
    }

    .support_grid_item_paragraph_text {
        font-size: min(1.75vw,1rem);
    }

    .support_content_image_bg {
        bottom: 50%;
        height: 36%;
        transform: translateY(50%);
    }

    .support_content_link_text {
        font-size: min(3vw, 1.25rem);
        margin: min(3vw, 4rem) auto auto;
        padding: 2.5% 0;
        width: 37%;
    }
    /* supportArea end */

    /* serviceArea start */
    .service_title_text {
        font-size: min(4vw, 2rem);
        margin-bottom: min(2vw, 1rem);
    }

    .service_paragraph_text {
        font-size: min(2vw,0.9rem);
        margin-bottom: min(3vw, 2.5rem);
        width: 70%;
    }

    .service_content {
        flex-direction: column-reverse;
        padding: 5% 0;
    }

    .service_content_title_box {
        padding: 12% 0;
        width: 40%;
    }

    .service_content_title_text {
        font-size: min(4.5vw,2.5rem);
    }

    .service_content_image_figure {
        margin: auto auto 3%;
        width: 90%;
    }
    /* serviceArea end */

    /* companylogoArea start */
    .companylogo_container {
        margin: 0 auto min(2.5vw,1rem);
        padding: 5% 0;
    }

    .companylogo_image_box {
        height: min(10.5vw, 8rem);
        width: min(17vw, 12rem);
    }

    .companylogo_image_logo {
        width: 90%;
    }
    /* companylogoArea end */

    /* casestudyArea start */
    .casestudy_container {
        margin-top: min(7vw, 3rem);
    }

    .casestudy_title_text {
        font-size: 4.5vw;
        margin-bottom: 1vw;
    }

    .casestudy_paragraph_text {
        font-size: min(2vw, 0.9rem);
        margin-bottom: min(6vw, 2.5rem);
        width: 50%;
    }

    .casestudy_accordion_content {
        display: block;
    }

    .casestudy_accordion_content_inner {
        padding: 6% 12% 5% 5%;
        width: 100%;

        &:nth-child(1) {
            background: linear-gradient(100deg,#0BBAFB 0%,#4285EC 100%);
        }

        &:nth-child(2) {
            background: #06A7FA;
        }

        &:nth-child(3) {
            background: #065F90;
        }
    }

    .casestudy_accordion_content_title_text {
        border-bottom: 2px solid #fff;
        font-size: 2.75vw;
        margin-bottom: 3vw;
        min-width: 100%;
        opacity: 1;
        padding-bottom: 1vw;
        width: 100%;
    }

    .casestudy_accordion_content_case_box {
        & .item_image {
            height: 100%;
            opacity: 1;
            width: 39vw;
        }
    }

    .casestudy_accordion_content_paragraph_text {
        font-size: 2vw;
        line-height: 1.75;
        min-width: unset;
        opacity: 1;
        padding: 0 0 0 3vw;
        width: 44vw;
    }

    .casestudy_accordion_content_number_text {
        bottom: 4%;
        font-size: 7vw;
        opacity: 0.7;
        right: 3%;
    }

    /* accordion active css start */
    .casestudy_accordion_content_inner.is_active {
        padding: 6% 12% 5% 5%;
        width: 100%;

        & .casestudy_accordion_content_number_text {
            opacity: 0.7;
            right: 3%;
        }
    }
    /* accordion active css end */
    /* casestudyArea end */

    /* fucnctionArea start */
    .function_container {
        background: linear-gradient(to right,#E8F5FB 0%,#E8F5FB 27%, #ffffff00 27%);
        padding-top: 2vw;
    }

    .function_title_text {
        font-size: min(4vw, 2rem);
        margin-bottom: 0;
    }

    .function_paragraph_text {
        font-size: min(2vw, 0.9rem);
        margin-bottom: min(3vw, 2.5rem);
        width: 50%;
    }

    .function_content {
        padding-bottom: 28vw;
    }

    .function_content_image_pc {
        margin-left: -50%;
        margin-top: unset;
        margin-top: 10vw;
        width: 150%;

        &:nth-child(2),
        &:nth-child(3){
            display: block;
            margin-top: 58vw;
        }
    }

    .function_content_grid_box_wrapper {
        grid-gap: 8vw;
        grid-template:
            "grid_1" 23%
            "grid_2" 23%
            "grid_3" 23%
            "grid_4" 23%
            / 100%;
        margin: 1vw auto 0;
        width: 50%;
    }

    .function_grid_item_number_text {
        font-size: 4.5vw;
        left: -4%;
        top: -8%;
    }

    .function_grid_item_image {
        margin: 4vw auto 0;
        width: 70%;
    }

    .function_grid_item_paragraph_text {
        font-size: 2.5vw;
        margin: 2vw auto 0;
        width: 80%;
    }
    /* fucnctionArea end */

    /* planArea start */
    .plan_container {
        margin: min(11vw,13rem) auto auto;
    }

    .plan_title_text {
        font-size: 5.5vw;
        margin-bottom: 0;
    }

    .plan_paragraph_text {
        font-size: 2.5vw;
        margin-bottom: min(3vw, 2.5rem);
        width: 45%;
    }

    .plan_content {
        background:  linear-gradient(135deg,#0BBAFB 0%,#4285EC 100%);
    }

    .plan_content_image_bg {
        bottom: 0;
        height: unset;
        right: 0;
        top: unset;
        width: 90%;
    }

    .plan_content_title_text {
        font-size: min(3.5vw, 1.5rem);
        padding-top: 2vw;
    }

    .plan_content_inner_box {
        flex-wrap: wrap;
    }

    .plan_content_grid_box_wrapper {
        gap: 4% 2%;
        grid-template:
            "plan_grid_1 plan_grid_2" 50%
            "plan_grid_3 plan_grid_4" 50%
            / 49% 49%;
        width: 95%;
    }

    .plan_grid_item_title_box {
        height: 10vw;

        & .grid_item_title_text{
            font-size: 3vw;
        }
    }

    .plan_grid_item_paragraph_text {
        font-size: 2.5vw;
        margin: 0 auto 4vw;
    }

    .plan_grid_item_span_circle {
        font-size: 1.5vw;
        height: 11vw;
        left: -8%;
        top: -35%;
        width: 11vw;
    }

    .plan_content_image_area {
        margin-bottom: -33vw;
        margin-top: 4vw;
        width: 70%;
    }

    .plan_content_image_paragraph_text {
        font-size: 3vw;
        width: 70%;
    }

    .plan_content_link_text {
        font-size: 3vw;
        margin: 4vw auto auto;
        padding: 3.5% 0;
    }
    /* planArea end */

    /* footerArea start */
    .footer_contaier {
        margin-top: 40vw;
        padding-bottom: 3vw;
    }

    .footer_title_area {
        margin-bottom: 11vw;
        padding-top: min(3vw, 4rem);
        width: 50%;
    }

    .footer_title_span_text {
        font-size: 7.5vw;
    }

    .footer_title_text {
        font-size: 2.3vw;
        padding: 0 0 0 1vw;
        width: 61%;
    }

    .footer_contact_link_text {
        bottom: -80%;
        font-size: 3vw;
        left: 50%;
        padding: 3% 0;
        top: unset;
        transform: translate(-50%, 0%);
        width: 91%;
    }

    .footer_image_pc {
        right: -36%;
        top: -79%;
        width: 29vw;
    }

    .footer_grid_content_box {
        display: grid;
        grid-template:
            "gf1 gf1" 10%
            "gf2 gf3" 15%
            "gf5 gf6" 10%
            "gf8 gf9" 10%
            "gf11 gf11" 20%
            "gf12 gf12" 20%
            "gf13 gf14" 10%
            "gf15 gf15" 5%
            / 50% 50%;
        padding-top: 6vw;
        width: 90%;
    }

    .footer_grid_gf5,
    .footer_grid_gf6,
    .footer_grid_gf8,
    .footer_grid_gf9 {
        align-items: center;
        display: flex;
        justify-content: flex-start;
        margin: 3vw 1vw;
    }

    .footer_grid_gf4,
    .footer_grid_gf7,
    .footer_grid_gf10 {
        display: none;
    }

    .footer_grid_gf11 {
        margin-top: 3vw;
    }

    .footer_grid_gf11,
    .footer_grid_gf12 {
        align-items: center;
        justify-self: center;
    }

    .footer_grid_gf13,
    .footer_grid_gf14 {
        align-items: center;
        display: flex;
        justify-content: center;
        margin: 2vw 1vw;
    }

    .footer_grid_gf13 {
        .footer_link_text {
            margin-left: unset;
        }
    }

    .footer_grid_gf15 {
        margin-left: unset;
    }
    
    .footer_category_title_text {
        font-size: 3.25vw;
        margin: 2vw 0;
    }

    .footer_link_text {
        font-size: 2.75vw;
        margin: unset;
    }

    .footer_logo_image {
        width: 30vw;
    }

    .footer_link_text_button {
        font-size: 3vw;
        height: 10vw;
        width: 90vw;
    }

    .footer_copyright_text {
        font-size: 1.75vw;
    }

    /* footerArea end */
}