/* reset.css start */
* {
    border: 0;

    /* 検証用コード */
    /* border: red solid 1px; */

    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 */

/* custom_property start */
:root {
    --green_gradation_color: linear-gradient(to bottom right, #2AAEB5 25%, #098E93 75%);
    --monotone_gradation_color: linear-gradient(to bottom, #0303039c, #ffffff00);
    --bg_main_container: url(/src/assets/images/bg_mainVisualArea_01_pc.jpeg);
    /* --bg_main_container: url(/src/assets/images/bg_mainVisualArea_02_pc.jpg); */
    --bg_feature_container: url(/src/assets/images/bg_featureArea_01_pc.jpeg);
    --bg_trial_content_box: url(/src/assets/images/bg_trialArea_01_pc.jpeg);
    --bg_merit_container: url(/src/assets/images/bg_meritArea_01_pc.jpeg);
    --bg_banner_container: url(/src/assets/images/bg_bannerArea_01_pc.jpeg);
}

/* custom_property end */

/* mainVisualArea start */

/* ********************************* */
/* ヘッダー領域 */
/* ********************************* */
.header_container {
    height: max(5rem, 5vw);
    left: 50%;
    padding: 0 5%;
    position: absolute;
    /* position: sticky; */
    top: 0;
    transform: translateX(-50%);
    width: 100%;
    z-index: 999;
    background-color: #3db8bf;
}

/* .header_container:after {
    background: var(--monotone_gradation_color);
    content: "";
    height: 170px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
} */

.header_inner_box {
    align-items: center;
    display: flex;
    height: inherit;
    justify-content: space-between;
}

.header_logo_box {
    margin-right: 2%;
    width: min(8.5vw, 13rem);
}

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

    &:hover {
        opacity: 0.5;
    }
}

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

.header_contact_text {
    display: none;
    visibility: hidden;
}

.header_hamburger_area {
    display: none;
}

.header_navigation_area {
    align-items: center;
    display: flex;
    height: inherit;
    opacity: 1;
    position: static;
    width: 85%;
}

.header_navigation_inner {
    margin-left: auto;
    margin-right: auto;
    max-width: initial;
    width: 100%;
}

.header_navigation_list {
    align-items: center;
    display: flex;
    padding-left: 0;
    padding-right: 0;
}

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

.header_navigation_link_text {
    color: #ffffff;
    font-size: min(1.1vw, 1.75rem);
    font-weight: 500;
    margin-right: min(1.5vw, 1.75rem);
    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: var(--bg_main_container);
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
}

.main_inner {
    padding-bottom: 10%;
    padding-top: 12%;
}

.main_content_box {
    background: rgb(31 31 31 / 40%);
    display: block;
    margin: auto;
    max-width: 950px;
    width: 80%;
}

.main_title_area {
    display: block;
}

.main_logo_image {
    display: block;
    margin: auto;
    padding-bottom: min(1vw, 1rem);
    padding-top: min(3vw, 2.75rem);
    width: min(16vw, 320px);
}

.main_logo_span_text {
    color: #fff;
    display: block;
    font-size: min(1.75vw, 1.2rem);
    margin-bottom: min(2.5vw, 1.5rem);
    text-align: center;
}

.main_title_text {
    border-bottom: 1px solid #fff;
    border-top: 1px solid #fff;
    color: #fff;
    font-size: min(2.4vw, 1.75rem);
    margin: auto auto min(2.5vw, 2.2rem);
    padding: min(0.75vw, 0.75rem) 0;
    text-align: center;
    width: 72%;
}

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

.main_subtitle_span_text {
    display: inline;
}

.main_link_area {
    border-top: 0.25rem solid #fff;
    display: flex;
    justify-content: space-between;
    margin: min(1.9vw, 3rem) auto auto;
    padding: min(1.9vw, 3rem) 0;
    width: 85%;
}

.main_link_trial_text,
.main_link_contact_text {
    align-items: center;
    border: 3px solid #fff;
    border-radius: 50vw;
    color: #fff;
    display: flex;
    font-size: min(1.5vw, 1.6rem);
    font-weight: 500;
    justify-content: center;
    padding: min(1vw, 0.75rem) min(2vw, 1.5rem);
    transition: 0.5s;
    width: min(33vw, 46%);
}

.main_link_trial_text {
    background: #18C8CE;

    &:hover {
        background: #fff;
        color: #18C8CE;
    }
}

.main_link_contact_text {
    background: #F67C43;

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

/* mainVisualArea end */

/* ********************************* */
/* メイン領域 改定*/
/* ********************************* */
.new_main_area {
    background-image: url(/src/assets/images/bg_new_brandimage_pc_01.jpg);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    position: relative;
}

.new_main_message_area {
    left: 10vh;
    position: absolute;
    top: 50vh;
    transform: translateY(-50%);

    h1 {
        color: #028c7c;
        font-size: min(3.2rem, 3.2vw);
        font-weight: 500;
    }

    h3 {
        font-size: min(1.2rem, 1.2vw);
        font-weight: 400;
        line-height: 1.5;
    }
}

.new_main_link_area {
    background-color: #4242426e;
    height: 60vh;
    transform: translateY(-50%);
    position: absolute;
    right: 10vh;
    text-align: center;
    top: 50vh;
    width: 50vw;

    h2 {
        color: white;
        font-size: min(1.2rem, 1.2vw);
        padding-top: 6vh;
    }
}

/* ********************************* */
/* ブランドイメージ領域 */
/* ********************************* */
.eyes_brand_image_area {
    padding: 5rem 1rem 5rem 1rem;
    text-align: center;
    position: relative;

    img {
        width: 70vw;
        height: auto;
    }

    p {
        font-size: min(1.5rem, 1.5vw);
        line-height: 1.5;
        margin-bottom: 1.5rem;

        span {
            color: #0aa492;
            border-bottom: 1px solid  #0aa492;
        }
    }
}

.eyes_brand_image_area::before {
    background: #e4fbfdcb;
    content: "";
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
    z-index: -1;
}

/* ********************************* */
/* ブランドイメージ特徴リンク領域 */
/* ********************************* */
.brand_feature_link_area {
    padding: 5rem 1rem 5rem 1rem;
    text-align: center;

    p {
        font-size: min(1.5rem, 1.5vw);
        line-height: 1.5;
        margin-bottom: 1.5rem;
    }
}

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

.brand_feature_link_box {
    /* box-shadow: 3px 3px 4px 1px rgba(201, 200, 200, 0.45); */
    width: 45vw;
    padding: 1rem;

    img:nth-child(1) {
        width: 50%;
    }

    img:nth-child(3) {
        width: 100%;
    }

    p {
        font-size: min(1.1rem, 1.1vw);
    }

    span {
        color: #05ACE2
    }
}

.brand_feature_link_btn {
    margin: 1rem 0 1rem 0;
    background-color: #05ACE2;
    width: 100%;
    color: white;
    padding: 0.5rem;

    &:hover {
        background-color: #0378a7;
        transition: 0.5s;
    }
}

/* featureArea start */
/* ********************************* */
/* Fratureエリア領域 */
/* ********************************* */
.feature_container {
    padding-top: 3rem;
    position: relative;
}

.feature_container::before {
    background: #e4fbfdcb;
    content: "";
    height: 80%;
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
    z-index: -1;
}

.feature_container::after {
    background: var(--bg_feature_container);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100%;
    content: "";
    display: block;
    height: min(34vw, 41rem);
    left: 50%;
    max-width: 60rem;
    position: absolute;
    top: min(46vw, 24rem);
    transform: translateX(-100%);
    width: 50%;
    z-index: -1;
}

.feature_image_pc {
    display: none;
}

.feature_image_text {
    display: block;
    margin: auto auto 0.5rem;
    width: 7rem;
}

.feature_title_text {
    font-size: 2.4rem;
    line-height: 1.75;
    margin-bottom: 1rem;
    text-align: center;
}

.feature_paragraph_text {
    font-size: 1.5rem;
    line-height: 1.75;
    text-align: center;
}

.feature_content {
    background: #0d9ba5cc;
    color: #fff;
    margin-left: 47%;
    margin-top: 6%;
    max-width: 50rem;
    padding: 2.5%;
    position: relative;
    width: 45%;
}

.feature_content_title_area {
    text-align: left;
    width: 100%;
}

.feature_content_span_text {
    font-size: min(1.5vw, 1.5rem);
    font-weight: 500;
    letter-spacing: 0.05em;
}

.feature_content_title_text {
    font-size: min(2.25vw, 2.2rem);
    margin-top: min(1vw, 1rem);
}

.feature_content_title_span_text {
    display: block;
    font-size: min(3.5vw, 3.25rem);
}

.feature_content_paragraph_text {
    font-size: min(2.2vw, 2.5rem);
    font-weight: 500;
    line-height: 1.75;
    margin-top: 3rem;
}

.feature_content_list {
    display: flex;
    justify-content: space-between;
    margin: min(5vw, 5rem) auto;
    width: 85%;
}

.feature_content_item {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: start;

    & .item_image {
        margin-bottom: min(2vw, 1.5rem);
        width: 45%;
    }

    & .item_paragraph_text {
        font-size: min(1.5vw, 1.6rem);
        font-weight: 500;
        line-height: 1.25;
        text-align: center;
    }
}

.feature_link_contact_text {
    background-color: #F57E49;
    border: 3px solid #fff;
    border-radius: 20rem;
    color: #FFFFFF;
    display: block;
    font-size: min(3vw, 1.5rem);
    font-weight: 700;
    margin: auto auto min(3vw, 3rem);
    padding: min(1vw, 1rem) 0;
    text-align: center;
    transition: 0.5s;
    width: 70%;

    &:hover {
        background-color: #FFFFFF;
        color: #F57E49;
    }
}

/* featureArea end */

/* ********************************** */
/* ファンクションエリア */
/* ********************************** */
/* functionArea start */
.function_container {
    margin: 12rem auto;
}

.function_header_area {
    margin: 1% min(5vw, 5%) 4%;

    p {
        border-bottom: thick double #0c8e90;
        padding: 1rem;
    }
}

.function_title_sub_text {
    color: #43B8BE;
    display: block;
    font-size: min(3vw, 2rem);
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.5rem;
    text-align: center;
}

.function_title_text {
    font-size: 2.4rem;
    line-height: 1.75;
    margin-bottom: 1rem;
    text-align: center;
}

.function_paragraph_text {
    font-size: 1.5rem;
    line-height: 1.75;
    padding-left: 5%;
    padding-right: 5%;
    text-align: center;
}

.function_paragraph_span_text {
    display: inline;
}

.function_content {
    display: flex;
    justify-content: space-between;
    margin: 3.5rem auto auto;
    max-width: 1920px;
    width: 100%;
}

.function_left_area,
.function_right_area {
    padding: 6% min(5vw, 5%) 0;
    width: 49.5%;
}

.function_left_area {
    background: #F2F7FD;

    & .function_list_box {
        justify-content: right;
    }
}

.function_right_area {
    background: #E4F7FA;

    & .function_list_box {
        justify-content: left;
    }
}

.function_list_box {
    display: flex;
    flex-wrap: wrap;
    gap: 0 2%;
}

.function_item_box {
    display: block;
    height: min(26vw, 450px);
    text-align: center;
    width: 48%;
}

.function_image_wrapper {
    align-items: center;
    border-radius: 3px;
    box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.4);
    display: flex;
    height: min(13.5vw, 15.5rem);
    margin: auto;
    width: 90%;

    & .item_image {
        width: 100%;
    }
}

.function_item_title_text {
    color: #3dafb7;
    font-size: min(1.75vw, 1.5rem);
    margin-top: 4%;
}

.function_item_title_span_text {
    font-size: min(1vw, 0.75rem);
}

.function_item_paragraph_text {
    font-size: min(1.25vw, 1.25rem);
    line-height: 1.5;
    margin: 4% auto auto;
    width: 90%;
}

.function_left_link_text,
.function_right_link_text {
    align-items: center;
    border: 3px solid #fff;
    border-radius: 50vw;
    color: #fff;
    display: flex;
    font-size: min(2vw, 1.75rem);
    font-weight: 500;
    justify-content: center;
    margin: 50px auto;
    padding: 2% 0;
    transition: 0.5s;
    width: 60%;
}

.function_left_link_text {
    background: #408CE9;

    &:hover {
        background: #fff;
        color: #408CE9;
    }
}

.function_right_link_text {
    background: #F67C43;

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

/* 機能詳細へのリンク */
.function_icon_image_box {
    align-items: center;
    background-color: white;
    border-radius: 20vw;
    color: #08bcbf;
    display: flex;
    font-size: min(1.75vw, 1.5rem);
    font-weight: bold;
    justify-content: center;
    padding: 1rem;
    text-align: center;

    &:hover {
        background-color: #05a9ac;
        color: white;
        transition: 0.5s;
    }

    img {
        height: auto;
        opacity: 0.5;
        width: 50px;
    }

    ;
}

/* functionArea end */

/* trialArea start */
.trial_image_text {
    display: block;
    margin: auto auto 0.5rem;
    width: 7rem;
}

.trial_title_text {
    font-size: 2.4rem;
    line-height: 1.75;
    margin-bottom: 1rem;
    text-align: center;
}

.trial_content_box_wrapper {
    background: #000;
    width: 100%;
}

.trial_content_box {
    background: var(--bg_trial_content_box);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #fff;
    display: block;
    margin: auto;
    max-width: 1400px;
    padding-bottom: 5%;
    width: 100%;
}

.trial_content_title_text {
    font-size: 3.3rem;
    line-height: 1.5;
    margin-bottom: 2.5rem;
    padding-top: 6rem;
    text-align: center;
}

.trial_content_subtitle_text {
    font-size: 2rem;
    font-weight: 300;
    line-height: 1.5;
    text-align: center;
}

.trial_content_paragraph_box {
    display: flex;
    justify-content: center;
    margin: 4% auto 2%;
    width: 75%;
}

.trial_content_paragraph_text {
    align-items: center;
    display: flex;
    font-weight: 300;
    justify-content: center;
    line-height: 1.5;
    padding-bottom: 7%;
    padding-top: 7%;
    text-align: center;
    width: 50%;
}

.trial_content_paragraph_text.left_box {
    border-right: 3px solid #fff;
    font-size: min(5vw, 3.25rem);
}

.trial_content_paragraph_text.right_box {
    border-left: 3px solid #fff;
    font-size: min(4.2vw, 3rem);
}

.trial_content_link_text {
    align-items: center;
    background: #F67C43;
    border: 3px solid #fff;
    border-radius: 50vw;
    color: #fff;
    display: flex;
    font-size: min(2vw, 1.75rem);
    font-weight: 500;
    justify-content: center;
    margin: 50px auto auto;
    padding: 1% 0;
    transition: 0.5s;
    width: 45%;

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

/* trialArea end */

/* optionArea start */
.option_container {
    margin: 8rem auto;
}

.option_title_sub_text {
    color: #43B8BE;
    display: block;
    font-size: min(3vw, 2rem);
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.5rem;
    text-align: center;
}

.option_title_text {
    font-size: 2.4rem;
    line-height: 1.75;
    margin-bottom: 1rem;
    text-align: center;
}

.option_paragraph_text {
    font-size: 1.5rem;
    line-height: 1.75;
    text-align: center;
}

.option_grid_content_box {
    display: grid;
    grid-column-gap: min(1vw, 20px);
    grid-row-gap: min(1vw, 20px);
    grid-template:
        "grid_1 grid_1 grid_2 grid_3" 42%
        "grid_4 grid_5 grid_5 grid_3" 24%
        "grid_4 grid_6 grid_6 grid_6" 30%
        / 20.5% 25.5% 22.5% 27.5%;
    margin: 2.5rem auto;
    max-width: 1400px;
    width: 75%;
}

.option_grid_item_box {
    color: #fff;
    overflow: hidden;
    padding: min(1vw, 30px) min(1vw, 15px) min(2vw, 30px);
    position: relative;
}

/* option area grid designation start */
.option_gird_1_box {
    background: #4D4F4E;
    grid-area: grid_1;

    & .option_grid_item_span_square_block {
        background: #a3a3a3;
    }

    & .option_grid_item_category_text {
        right: 5%;
        top: 2%;
    }

    & .option_grid_item_image_bg {
        height: min(20vw, 23rem);
        right: -20%;
        top: -10%;
        width: min(28vw, 33rem);
    }
}

.option_gird_2_box {
    background: #61a7b4;
    grid-area: grid_2;

    & .option_grid_item_span_square_block {
        background: #3c5761;
    }

    & .option_grid_item_category_text {
        bottom: 5%;
        right: 10%;
    }

    & .option_grid_item_image_bg {
        height: min(16vw, 20rem);
        left: -5%;
        top: 0%;
        width: min(23vw, 28rem);
    }
}

.option_gird_3_box {
    background: #444444;
    grid-area: grid_3;

    & .option_grid_item_title_text {
        font-size: min(1.2vw, 1.5rem);
        line-height: 2.3;
    }

    & .option_grid_item_span_square_block {
        background: #279296;
    }

    & .option_grid_item_category_text {
        bottom: 0%;
        right: 10%;
        transform: rotate(90deg);
        transform-origin: center right;
    }

    & .option_grid_item_image_bg {
        height: min(27vw, 32rem);
        left: -93%;
        top: 0%;
        width: min(40vw, 48rem);
    }
}

.option_gird_4_box {
    background: #727574;
    grid-area: grid_4;

    & .option_grid_item_span_square_block {
        background: #383838;
    }

    & .option_grid_item_category_text {
        bottom: 5%;
        right: 5%;
    }

    & .option_grid_item_image_bg {
        height: min(22vw, 26rem);
        right: -68%;
        top: 0%;
        width: min(39vw, 47rem);
    }
}

.option_gird_5_box {
    background: #6BAD9D;
    grid-area: grid_5;

    & .option_grid_item_span_square_block {
        background: #98c5ba;
    }

    & .option_grid_item_category_text {
        right: 5%;
        top: 2%;
    }

    & .option_grid_item_image_bg {
        height: min(8.5vw, 11rem);
        left: 35%;
        top: 0%;
        width: min(12vw, 16rem);
    }
}

.option_gird_6_box {
    background: var(--green_gradation_color);
    grid-area: grid_6;
    padding: min(1vw, 30px) min(4vw, 50px) min(2vw, 40px);
    text-align: right;

    .option_grid_item_title_box {
        justify-content: flex-end;
    }

    & .option_grid_item_title_text {
        display: block;
        width: fit-content;
    }

    & .option_grid_item_span_square_block {
        background: #98D1D4;
    }

    & .option_grid_item_category_text {
        bottom: 10%;
        left: 3%;
    }

    & .option_grid_item_image_bg {
        height: min(13vw, 15rem);
        left: 0;
        top: 0;
        width: min(19vw, 23rem);
    }
}

/* option area grid designation end */

.option_grid_item_title_box {
    align-items: center;
    display: flex;
    justify-content: flex-start;
    position: relative;
    z-index: 5;
}

.option_grid_item_span_square_block {
    background: #098E93;
    height: min(1.5vw, 2rem);
    width: min(1.5vw, 2rem);
}

.option_grid_item_title_text {
    font-size: min(1.5vw, 1.75rem);
    margin-left: min(1vw, 1rem);
    position: relative;
}

.option_grid_item_paragraph_text {
    font-size: min(1.1vw, 1.35rem);
    line-height: 1.75;
    margin-bottom: min(0.5vw, 0.5rem);
    margin-top: min(0.5vw, 0.5rem);
    position: relative;
    z-index: 5;
}

.option_grid_item_category_text {
    content: "";
    font-size: min(2.5vw, 2.5rem);
    font-weight: 500;
    opacity: 0.5;
    position: absolute;
    z-index: 5;
}

.option_grid_item_link_text {
    align-items: center;
    background: #FDFDFD;
    border: 3px solid #FDFDFD;
    border-radius: 50vw;
    color: #F67840;
    display: flex;
    font-size: min(1.3vw, 1.3rem);
    font-weight: 500;
    justify-content: center;
    margin: min(1vw, 1rem) 0 min(2vw, 1.25rem) auto;
    padding: 1% 0;
    position: relative;
    transition: 0.5s;
    width: 30%;
    z-index: 5;

    &:hover {
        background: #F67840;
        color: #FDFDFD;
    }
}

.option_grid_item_image_bg {
    opacity: 0.2;
    position: absolute;
    transition: 0.5s;
    z-index: 4;
}

.option_grid_item_box:hover .option_grid_item_image_bg {
    transform: scale(1.1);
}

/* optionArea end */

/* ************************************** */
/* 強み選ばれる理由セクション */
/* ************************************** */
.strongtaste_contaier {
    margin: min(11vw, 8rem) auto;
}

.strong_content {
    /* background: var(--green_gradation_color); */
    margin: 3% auto 6rem;
    padding-bottom: 2%;
    position: relative;
}

.strong_content_img {
    bottom: 0;
    /* height: auto; */
    max-width: 50vw;
    opacity: 0.2;
    position: absolute;
    right: 0;
    z-index: -1;
}

.strong_content_box {
    display: flex;
    justify-content: center;
    padding-top: 2vw;
    text-align: center;
}

.strong_content_item {
    border-bottom: 1px solid rgb(7, 128, 86);
    border-top: 1px solid rgb(7, 128, 86);
    width: 50%;
}

.strong_content_item_under {
    border-bottom: 1px solid rgb(7, 128, 86);
    width: 50%;
}

.strong_content_head_text {
    color: #43B8BE;
    font-size: min(3vw, 2rem);
    font-weight: 400;
}

.strong_content_text {
    color: #43B8BE;
    font-size: min(3vw, 3rem);
    font-weight: 200;
}

.strong_item_grid_area {
    color: #43B8BE;
    column-gap: 5px;
    display: grid;
    grid-template:
        "box1 box2 box3" 10vw
        "box4 box5 box6" 10vw /
        21vw 21vw 21vw;
    row-gap: 5px;
}

.strong_grid1 {
    align-items: center;
    align-items: center;
    border: 1px solid rgb(7, 128, 86);
    display: grid;
    grid-area: box1;
}

.strong_grid2 {
    align-items: center;
    border: 1px solid rgb(7, 128, 86);
    display: grid;
    grid-area: box2;
}

.strong_grid3 {
    align-items: center;
    border: 1px solid rgb(7, 128, 86);
    display: grid;
    grid-area: box3;
}

.strong_grid4 {
    align-items: center;
    border: 1px solid rgb(7, 128, 86);
    display: grid;
    grid-area: box4;
}

.strong_grid5 {
    align-items: center;
    border: 1px solid rgb(7, 128, 86);
    display: grid;
    grid-area: box5;
}

.strong_grid6 {
    align-items: center;
    border: 1px solid rgb(7, 128, 86);
    display: grid;
    grid-area: box6;
}

.strong_grid_text {
    align-items: center;
    color: #43B8BE;
    display: flex;
    font-size: min(2vw, 1.5rem);
    font-weight: 500;
    justify-content: center;
}

.strong_grid_text::before {
    background-image: url(/src/assets/images/icon_index_strongAreaWhiteCheck_pc_03.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    display: inline-block;
    height: min(3vw, 2.5rem);
    margin-right: 0.5rem;
    width: min(3vw, 2.5rem);
}

.strong_btn {
    align-items: center;
    background: #F67C43;
    border: 3px solid #fff;
    border-radius: 50vw;
    color: #fff;
    display: flex;
    font-size: min(2vw, 1.75rem);
    font-weight: 500;
    justify-content: center;
    margin: 50px auto auto;
    padding: 0.75% 0;
    transition: 0.5s;
    width: 25%;

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

/* ************************************** */
/* flowArea start */
/* ************************************** */
.flow_title_sub_text {
    color: #43B8BE;
    display: block;
    font-size: min(3vw, 2rem);
    font-weight: 700;
    line-height: 1;
    text-align: center;
}

.flow_title_text {
    font-size: 2.4rem;
    line-height: 1.75;
    margin-bottom: 1rem;
    text-align: center;
}

.flow_paragraph_text {
    font-size: 1.5rem;
    line-height: 1.75;
    text-align: center;
}

.flow_content_box {
    background: var(--green_gradation_color);
    margin: 3% auto 6rem;
    padding-bottom: 2%;
}

.flow_content_list {
    display: flex;
    justify-content: center;
    margin: min(17vw, 17rem) auto auto;
    max-width: 1440px;
    position: relative;
    width: 60%;
    z-index: 1;
}

.flow_content_item {
    color: #fff;
    position: relative;
    text-align: center;
    width: 33.3%;
    z-index: 4;
}

.flow_content_item_image_box {
    bottom: min(15vw, 14rem);
    content: "";
    height: 100%;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    width: min(14.75vw, 13.5rem);
    z-index: 3;
}

.flow_content_item_image_bg {
    height: 100%;
    object-fit: contain;
    width: 100%;
}

.flow_content_item_span_text {
    align-items: center;
    display: flex;
    font-size: min(3vw, 2.5rem);
    font-weight: 500;
    height: min(10vw, 9rem);
    justify-content: center;
    opacity: 0.5;
    position: relative;
    z-index: 6;
}

.flow_content_item_title_text {
    align-items: start;
    display: flex;
    font-size: min(2.25vw, 2rem);
    font-weight: 500;
    height: min(8vw, 7rem);
    justify-content: center;
    line-height: 1.5;
}

.flow_content_item_paragraph_text {
    font-size: min(1.25vw, 1.25rem);
    font-weight: 300;
    line-height: 1.75;
}

.flow_content_link_text {
    align-items: center;
    background: #F67C43;
    border: 3px solid #fff;
    border-radius: 50vw;
    color: #fff;
    display: flex;
    font-size: min(2vw, 1.75rem);
    font-weight: 500;
    justify-content: center;
    margin: 50px auto auto;
    padding: 0.75% 0;
    transition: 0.5s;
    width: 25%;

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

/* flowArea end */

/* meritArea start */
.merit_container {
    position: relative;
}

.merit_title_sub_text {
    color: #43B8BE;
    display: block;
    font-size: min(3vw, 2rem);
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.5rem;
    text-align: center;
}

.merit_container::before {
    background: #F0F9FA;
    content: "";
    height: 100%;
    position: absolute;
    right: 0;
    top: 79%;
    width: 33%;
    z-index: -1;
}

.merit_container::after {
    background: var(--bg_merit_container);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100%;
    content: "";
    display: block;
    height: min(32vw, 40rem);
    left: 50%;
    max-width: 80rem;
    position: absolute;
    top: min(24vw, 14rem);
    transform: translateX(-83%);
    width: 67%;
    z-index: -1;
}

.merit_title_text {
    font-size: 2.4rem;
    line-height: 1.75;
    text-align: center;
}

.merit_paragraph_text {
    font-size: 1.5rem;
    line-height: 1.75;
    text-align: center;
}

.merit_content_box {
    background: #1da5afcc;
    margin-left: 45%;
    margin-top: 8%;
    max-width: 65rem;
    padding: 3% 2% 2% 4%;
    width: 55%;
}

.merit_content_list_box {
    color: #fff;
}

.merit_content_item {
    display: flex;
}

.merit_content_item_image_box {
    display: block;
    width: min(5vw, 5rem);

    & .item_image {
        display: block;
        width: min(5vw, 5rem);
    }
}

.merit_content_item_textarea {
    margin-bottom: min(2vw, 2rem);
    padding: 1% 2%;
}

.merit_content_item_title_text {
    font-size: min(2vw, 2rem);
    line-height: 1.75;
}

.merit_content_item_paragraph_text {
    display: block;
    font-size: min(1.3vw, 1.5rem);
    font-weight: 300;
    line-height: 1.5;
    margin-left: min(5vw, 5rem);
}

.merit_content_paragraph_text {
    color: #fff;
    font-size: min(1.5vw, 1.5rem);
    font-weight: 300;
    line-height: 1.75;
    margin-right: auto;
    width: 95%;
}

.merit_content_link_text {
    align-items: center;
    background: #F67C43;
    border: 3px solid #fff;
    border-radius: 50vw;
    color: #fff;
    display: flex;
    font-size: min(2vw, 1.75rem);
    font-weight: 500;
    justify-content: center;
    margin: 50px auto auto;
    padding: 0.5% 0;
    transition: 0.5s;
    width: 25%;

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

/* meritArea end */

/* newsArea start */
.news_container {
    margin: min(11vw, 8rem) auto;
}

.news_title_sub_text {
    color: #43B8BE;
    display: block;
    font-size: min(3vw, 2rem);
    font-weight: 700;
    line-height: 1;
    text-align: center;
}

.news_title_text {
    font-size: min(3.75vw, 2.4rem);
    line-height: 1.5;
    text-align: center;
}

.news_paragraph_text {
    font-size: min(2vw, 1.5rem);
    line-height: 3;
    text-align: center;
}

.news_content_wrapper {
    background: rgba(170, 219, 221, 0.384);
    margin: min(2vw, 1.75rem) auto;
    padding: min(4vw, 5rem) 0;
}

.news_content_box {
    display: flex;
    margin: auto;
    max-width: 1440px;
    padding-left: 8%;
    width: 80%;
}

.news_latest_link_box {
    align-items: center;
    display: flex;
    position: relative;
    width: 35%;
    z-index: 10;
}

.news_latest_category_type_text {
    align-items: center;
    background: #05ACE2;
    border-radius: 50vw;
    color: #fff;
    display: flex;
    font-size: min(1vw, 1.1rem);
    justify-content: center;
    left: 4%;
    padding: min(1vw, 0.5rem) 0;
    position: absolute;
    top: 7%;
    transition: 0.5s;
    width: 40%;
    z-index: 10;
}

.news_latest_inner_box {
    bottom: 10%;
    font-size: min(1.25vw, 1.2rem);
    font-weight: 700;
    left: 4%;
    position: absolute;
    transition: 0.5s;
}

.news_latest_release_datetime_text {
    color: #439BC2;
    display: block;
    margin-bottom: 1%;
    transition: 0.5s;
    z-index: 10;
}

.news_latest_content_title_text {
    color: #439BC2;
    font-size: min(1vw, 1rem);
    transition: 0.5s;
    width: 90%;
    z-index: 10;
}

.news_latest_content_image_background {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: 0.5s;
    width: 100%;
    z-index: -1;
}

.news_latest_link_box:hover .news_latest_content_title_text,
.news_latest_link_box:hover .news_latest_release_datetime_text {
    color: #0a3b50;
}

.news_latest_link_box:hover .news_latest_category_type_text {
    background: #fff;
    color: #05ACE2;
}

.news_latest_link_box:hover .news_latest_content_image_background {
    opacity: 0.5;
}

.news_list_box {
    margin-left: 2.5%;
    width: 62.5%;
}

.news_item_box {
    display: flex;
    margin-bottom: 2%;
}

.news_category_type_text {
    align-items: center;
    background: #05ACE2;
    border-radius: 50vw;
    color: #fff;
    display: flex;
    font-size: min(1vw, 1.1rem);
    justify-content: center;
    padding: min(1vw, 0.5rem) 0;
    width: 25%;
}

.news_category_type_text.announce_background_color {
    background: #17CFC4;
}

.news_item_inner_link_box {
    border-bottom: 1px solid rgb(255, 255, 255);
    border-radius: 0.1vw;
    color: #257E81;
    display: flex;
    margin-left: 1%;
    padding-left: 1%;
    transition: 0.5s;
    width: 74%;

    &:hover {
        background: #257E81;
        border-bottom: 1px solid #257E81;
        color: #ffffff;
    }
}

.news_release_datetime_text {
    align-items: center;
    display: flex;
    font-size: min(1.25vw, 1.2rem);
}

.news_content_title_text {
    align-items: center;
    display: flex;
    font-size: min(1.25vw, 1.2rem);
    margin-left: 1%;
}

/* ニュース一覧 */
/* .newsdetail_link_area{
    display: flex;
    justify-content: center;
    margin-bottom: 5vh;
}

.newsdetail_link_area_width{
    width: 40%;
} */

/* newsArea end */

/* bannerArea start */
.banner_container {
    margin: auto;
    max-width: 1920px;
    padding-top: min(6vw, 3rem);
    position: relative;
}

.banner_container::after {
    background: var(--bg_banner_container);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100%;
    bottom: min(-22%, -5rem);
    content: "";
    display: block;
    height: min(39vw, 40rem);
    max-width: 80rem;
    opacity: 0.35;
    position: absolute;
    right: 0%;
    width: 80%;
    z-index: -1;
}

.banner_title_text {
    font-size: min(3.75vw, 2.4rem);
    line-height: 1.5;
    text-align: center;
}

.banner_paragraph_text {
    font-size: min(2vw, 1.5rem);
    line-height: 3;
    text-align: center;
}

.banner_image_text {
    display: block;
    margin: auto auto 0.5rem;
    width: 7rem;
}

.banner_content_box_wrapper {
    background: #1facb19c;
    display: block;
    margin-left: 10%;
    margin-top: 6%;
    padding: 2%;
    transition: 0.5s;
    width: min(80%, 75rem);
}

.banner_content_box_wrapper:hover {
    background: #0e6f72dc;
    transition: 0.5s;

    & .banner_content_box {
        opacity: 0.9;
    }
}

.banner_content_box {
    background: linear-gradient(to right, #fff 80%, #ffffff00 80%);
    display: flex;
    padding: 0.5%;
}

.banner_content_textarea {
    padding: 0.5% 0.5% 0;
    width: 55%;
}

.banner_content_title_textarea {
    padding: 0 1%;
}

.banner_content_catchcopy_text {
    color: #067465;
    font-size: min(1.3vw, 1.25rem);
    font-weight: 300;
    text-align: center;
}

.banner_content_title_box,
.banner_content_subtitle_box {
    align-items: center;
    display: flex;
    justify-content: left;
    padding: 0 1%;
}

.banner_content_title_text {
    align-items: center;
    display: flex;
    font-size: min(1.75vw, 1.75rem);
    font-weight: 700;
    justify-content: center;
    margin: min(1vw, 0.5rem) 0.5% 0;
    padding: 0.5% 0;
}

.banner_content_title_text:nth-child(1) {
    background: #067465;
    color: #fff;
    width: 34%;
}

.banner_content_title_text:nth-child(2) {
    background: #A7DDDF;
    color: #067465;
    width: 64%;
}

.banner_content_subtitle_text {
    color: #000;
    font-size: min(3vw, 3rem);
    margin-bottom: 1%;
}

.banner_content_subtitle_image {
    width: min(3vw, 3rem);
}

.banner_content_paragraph_text {
    border-top: 2px solid #067465;
    color: #000;
    font-size: min(1vw, 1rem);
    font-weight: 300;
    padding: 2%;
}

.banner_content_imagearea {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-left: 5%;
    object-fit: cover;
    width: 40%;
}

.banner_content_image_box {
    display: flex;
    flex-direction: column;
    width: 50%;
}

.banner_content_image_bg {
    width: 100%;
}

/* bannerArea end */

/* footerArea start */
.footer_container {
    background: #19898d9c;
    margin-top: min(4vw, 4rem);
    padding: min(3vw, 2rem) 0 0;
    width: 100%;
}

.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: 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: #54a787;
        border: 3px solid #f7f9f9;
        color: #f7f9f9;

        &:hover {
            background: #f7f9f9;
            color: #54a787;
        }
    }
}

.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: #045b70;
        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: #f7f9f9;
    border: 3px solid #f7f9f9;
    border-radius: 50vw;
    color: #54a787;
    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: #54a787;
        color: #f7f9f9;
    }
}

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

/* footerArea end */

/* ***************************************************** */
/* floating bunner */
/* フローティングバナースタイル */
/* ***************************************************** */

.floating_banner {
    bottom: 50px;
    display: none;
    position: fixed;
    right: 20px;
    z-index: 99999;
}

.floating_banner_block {
    align-items: center;
    background-image: linear-gradient(90deg, rgb(66, 178, 235), rgba(65, 204, 239, 1));
    /* background-image: linear-gradient(90deg, rgba(255, 0, 165, 0.87), rgba(161, 85, 241, 0.87)); */
    border-radius: 60px;
    color: #fff;
    display: flex;
    justify-content: center;
    min-height: 60px;
    min-width: 200px;
    text-align: center;
}

.floating_banner_block:hover {
    background-image: linear-gradient(90deg, rgba(255, 0, 165, 0.87), rgba(161, 85, 241, 0.87));
    color: #f8fafa;
    font-weight: 400;
    opacity: 1;
    transform: translateY(-5px);
    transition: 1s;
}

.floating_text_block {
    display: block;
    text-align: center;
}

.floating_banner_text {
    align-items: center;
    display: flex;
    font-size: 1rem;
    font-weight: 200;
    font-weight: 600;
    /* position: relative; */
}

.floating_bunner_sub_text {
    font-size: 1rem;
    font-weight: 300;
}

.floating_banner_text::after {
    background-image: url(/src/assets/images/icon_index_floating_bunner_01_pc.png);
    background-size: contain;
    content: "";
    display: inline-block;
    height: 40px;
    margin-left: 0.5rem;
    width: 40px;
}

/* ********************************************************************************************************** */
/* mobile coding start */
/* ********************************************************************************************************** */

/* from pc_1024px to mobile coding start */
@media screen and (max-width: 1024px) {

    /* mainVisualArea start */
    .header_logo_image {
        width: 9rem;
    }

    .header_logo_box {
        width: 9rem;
    }

    .header_navigation_link_text {
        color: #fff;
        font-size: 1rem;
        margin-right: 1.2rem;
    }

    .main_logo_image {
        width: min(24vw, 270px);
    }

    .main_subtitle_text {
        font-size: min(2.75vw, 1.75rem);
    }

    .main_link_area {
        margin: min(3vw, 3rem) auto auto;
        padding: min(3vw, 3rem) 0;
        width: 90%;
    }

    .main_link_trial_text,
    .main_link_contact_text {
        font-size: min(2.2vw, 1.25rem);
        width: min(34vw, 22rem);
    }

    /* mainVisualArea end */
}

/* from pc_1024px to mobile coding end */

/* **************************************************** */
/* Meddia  */
/* **************************************************** */
@media screen and (max-width: 750px) {

    /* mainVisualArea start */
    .header_container {
        background: unset;
        display: block;
        height: 80px;
        left: 0;
        padding: unset;
        position: fixed;
        right: 0;
        top: 0;
        transform: unset;
        width: 100%;
        z-index: 999;
    }

    .header_container:after {
        height: 100px;
    }

    .header_inner_box {
        padding: 0 20px;
    }

    .header_logo_box,
    .header_logo_image {
        width: min(25vw, 12rem);
    }

    .header_hamburger_area {
        align-items: center;
        display: flex;
        height: 100%;
        position: absolute;
        right: min(3vw, 2rem);
        top: 0;
        z-index: 100;
    }

    .header_contact_text {
        align-items: center;
        background: #0ABCC2;
        color: #fff;
        display: flex;
        font-size: min(3.5vw, 1.25rem);
        height: min(10.5vw, 3rem);
        margin-right: min(15vw, 5rem);
        opacity: 1;
        padding-left: min(5vw, 2rem);
        padding-right: min(5vw, 2rem);
        transition: 1s;
        visibility: visible;
    }

    .header_contact_text.is_active {
        opacity: 0;
        visibility: hidden;
    }

    .hamburger_button {
        background-color: transparent;
        border: transparent;
        cursor: pointer;
        height: 50px;
        margin: 0;
        position: relative;
        width: 50px;
    }

    .hamburger_span {
        background: #2cd4e0;
        border-radius: 20px;
        display: block;
        height: 3px;
        left: 50%;
        position: relative;
        transform: translateX(-50%);
        transition: all 0.4s;
        width: 35px;
    }

    .hamburger_button .hamburger_span:nth-of-type(1) {
        top: -8px;
    }

    .hamburger_button .hamburger_span:nth-of-type(2) {
        top: 1px;
        transform: translateX(-0.45deg);
    }

    .hamburger_button .hamburger_span:nth-of-type(3) {
        top: 10px;
        transform: translateX(-0.45deg);
    }

    .hamburger_button.is_active .hamburger_span:nth-of-type(1) {
        top: 4px;
        transform: translateX(-50%) rotate(225deg);
    }

    .hamburger_button.is_active .hamburger_span:nth-of-type(2) {
        opacity: 0;
    }

    .hamburger_button.is_active .hamburger_span:nth-of-type(3) {
        top: -2px;
        transform: translateX(-50%) rotate(-225deg);
    }

    .header_navigation_area {
        align-items: center;
        background: transparent;
        display: flex;
        height: 100vh;
        justify-content: center;
        opacity: 0;
        position: absolute;
        right: -100%;
        top: 0;
        transition: top 0.6s, right 0.6s, opacity 0.6s;
        width: 100%;
        z-index: 10;
    }

    .header_navigation_area.is_active {
        background-color: #20a2abf0;
        opacity: 1;
        position: fixed;
        right: 0;
        top: 0;
    }

    .header_navigation_inner {
        content: "";
        position: absolute;
        top: 100px;
    }

    .header_navigation_list {
        display: block;
        padding-left: 3%;
        padding-right: 3%;
    }

    .header_navigation_item {
        margin: auto;
        position: relative;
        width: 90%;

        &:last-child .header_navigation_link_text {
            border-bottom: unset;
        }
    }

    .header_navigation_link_text {
        border-bottom: 1px solid #fff;
        color: #fff;
        display: block;
        font-size: min(5vw, 1rem);
        padding: min(5vw, 1.25rem) min(10vw, 4rem);
        position: relative;
        width: 100%;

        &::after {
            transform-origin: unset;
        }

        &:hover::after {
            transform: translate(130%, 0%) rotate(45deg);
            transform-origin: unset;
        }
    }

    .header_navigation_link_text::before {
        border: 1px solid #fff;
        border-radius: 50%;
        content: '';
        height: 1rem;
        left: 3%;
        position: absolute;
        top: 50%;
        transform: translate(0%, -35%);
        width: 1rem;
    }

    .header_navigation_link_text::after {
        background: unset;
        border-bottom: 1px solid #fff;
        border-right: 1px solid #fff;
        height: 0.25rem;
        left: 3%;
        top: 50%;
        transform: translate(130%, 0%) rotate(45deg);
        width: 0.25rem;
    }

    .main_inner {
        padding-bottom: 16%;
        padding-top: 20%;
    }

    .main_content_box {
        background: unset;
        position: relative;
        width: 100%;
    }

    .main_logo_image {
        display: none;
    }

    .main_logo_span_text {
        display: none;
    }

    .main_title_text {
        border: none;
        display: block;
        font-size: min(6.5vw, 4rem);
        line-height: 1.75;
        margin: auto auto 25px;
        padding: unset;
        text-shadow: 0 2px 4px rgb(95, 95, 95);
        width: 80%;
    }

    .main_subtitle_area {
        background: #44bec2cc;
        margin-top: 20px;
        position: absolute;
        right: 50%;
        top: 100%;
        transform: translateX(50%);
        width: 85%;
        z-index: 111;
    }

    .main_subtitle_text {
        font-size: min(3.5vw, 4rem);
        font-weight: 500;
        line-height: 1.75;
        padding-top: min(5vw, 2rem);
        width: 78%;
    }

    .main_subtitle_span_text {
        display: inline-block;
    }

    .main_link_area {
        border-top: 4px solid #fff;
        display: block;
        margin: min(4vw, 1.75rem) auto auto;
        padding-bottom: min(6vw, 2.5rem);
        padding-top: min(3.5vw, 1.5rem);
    }

    .main_link_trial_text,
    .main_link_contact_text {
        display: block;
        font-size: min(3.5vw, 1.75rem);
        margin: auto;
        padding: min(2vw, 0.5rem) 0;
        text-align: center;
        width: 55%;
    }

    .main_link_trial_text {
        margin: auto auto min(4vw, 1.5rem);
    }

    /* ********************************* */
    /* メディア：メイン領域 改定*/
    /* ********************************* */
    .new_main_area {
        background-image: url(/src/assets/images/bg_new_brandimage_sp_01.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        height: 60vh;
        position: relative;
    }

    .new_main_message_area {
        left: 5vw;
        position: absolute;
        top: 25vh;
        transform: translateY(-30%);

        h1 {
            color: #028c7c;
            font-size: min(6rem, 6vw);
            font-weight: bold;
        }

        h3 {
            font-size: min(4rem, 4vw);
            font-weight: bold;
            line-height: 1.5;
        }
    }

    .new_main_link_area {
        z-index: 10;
        background-color: #16bcb18e;
        /* min-height: 30vh;
        max-height: 32vh; */
        height: auto;
        transform: translateY(-50%);
        position: absolute;
        right: 0vh;
        text-align: center;
        top: 60vh;
        width: 100vw;

        h2 {
            color: white;
            font-size: min(3rem, 3vw);
            padding-top: 3vh;
        }
    }

    /* mainVisualArea end */

    /* ********************************* */
    /* メディア：ブランドイメージ領域 */
    /* ********************************* */
    .eyes_brand_image_area {
        padding: 1rem 1rem 1rem 1rem;

        img {
            width: 80vw;
            height: auto;
        }

        p {
            font-size: min(4rem, 4vw);
            line-height: 1.5;
            margin-bottom: 2rem;
        }


    }

    /* ********************************* */
    /* メディア：ブランドイメージ特徴リンク領域 */
    /* ********************************* */
    .brand_feature_link_area {
        padding: 1rem 1rem 1rem 1rem;

        p {
            font-size: min(3rem, 3vw);
            line-height: 1.5;
            margin-bottom: 1.5rem;
        }

        ;
    }

    .brand_feature_link_box {
        width: 95vw;
        padding: 1rem;

        p {
            font-size: min(2.5rem, 2.5vw);
        }

    }

    .brand_feature_link_btn {
        margin: 1rem 0 1rem 0;
        background-color: #05ACE2;
        width: 100%;
        color: white;
        padding: 0.5rem;

        &:hover {
            background-color: #0378a7;
            transition: 0.5s;
        }
    }

    /* featureArea start */
    .feature_container {
        padding-top: min(19vw, 8rem);
    }

    .feature_container::after {
        bottom: min(60vw, 22rem);
        height: min(68vw, 30rem);
        left: 0;
        max-width: unset;
        top: unset;
        transform: unset;
        width: 100%;
    }

    .feature_container::before {
        background: #DFF3F4;
        height: 120%;
    }

    .feature_image_pc {
        display: block;
        margin: auto auto 50px;
        width: min(80vw, 480px);
    }

    .feature_image_text {
        width: min(20vw, 150px);
    }

    .feature_title_text {
        font-size: min(6vw, 45px);
        line-height: 1.75;
        margin-bottom: 10px;
        margin-top: 10px;
    }

    .feature_paragraph_text {
        font-size: min(3vw, 22px);
        line-height: 1.5;
        margin-bottom: max(27vw, 7rem);
        padding: 0 2.5%;
    }

    .feature_content {
        display: block;
        margin: auto;
        max-width: unset;
        padding: min(7vw, 3rem) 0;
        width: 85%;
    }

    .feature_content_title_area {
        text-align: center;
    }

    .feature_content_span_text {
        font-size: min(3vw, 1.2rem);
    }

    .feature_content_title_text {
        font-size: min(4.5vw, 2rem);
        margin-top: min(6vw, 2.5rem);
    }

    .feature_content_title_span_text {
        font-size: min(7vw, 40px);
        margin-top: min(2vw, 1rem);
    }

    .feature_content_paragraph_text {
        font-size: min(4vw, 1.75rem);
        margin-top: min(6vw, 2.5rem);
    }

    .feature_content_list {
        margin: min(8vw, 3.5rem) auto;
        width: 70%;
    }

    .feature_content_item {
        width: 31%;

        & .item_image {
            margin-bottom: min(2vw, 1rem);
            width: min(8vw, 4rem);
        }

        & .item_paragraph_text {
            font-size: min(2.5vw, 1.2rem);
            line-height: 1.5;
        }
    }

    .feature_link_contact_text {
        display: none;
        visibility: hidden;
    }

    /* featureArea end */

    /* functionArea start */
    .function_container {
        margin: 7rem auto 0;
    }

    .function_title_sub_text {
        font-size: min(4.8vw, 2.25rem);
    }

    .function_title_text {
        font-size: min(5vw, 35px);
        line-height: 1.75;
    }

    .function_paragraph_text {
        font-size: min(3vw, 22px);
        line-height: 1.5;
    }

    .function_paragraph_span_text {
        display: block;
    }

    .function_content {
        display: block;
        margin: 0.5rem auto auto;
    }

    .function_left_area,
    .function_right_area {
        background: unset;
        padding: 8% 7% 0;
        width: 100%;
    }

    .function_list_box {
        gap: 0 2%;
    }

    .function_item_box {
        height: min(52vw, 550px);
        width: 49%;
    }

    .function_image_wrapper {
        height: min(26vw, 13rem);
    }

    .function_item_title_text {
        font-size: min(3vw, 24px);
    }

    .function_item_title_span_text {
        font-size: min(2vw, 1rem);
    }

    .function_item_paragraph_text {
        font-size: min(2.5vw, 15px);
        line-height: 1.75;
    }

    .function_left_link_text,
    .function_right_link_text {
        font-size: min(3vw, 1.75rem);
        margin: 0 auto 10px;
        padding: 2.5% 0;
    }

    /* 機能詳細へのリンク */
    .function_icon_image_box {
        background-color: #05a9ac;
        color: #fbfcfc;
        font-size: min(3vw, 1.75rem);
        margin: 1rem;
        padding: 0rem;

        &:hover {
            background-color: #e6fafa;
            color: #05a9ac;
        }

        img {
            height: auto;
            opacity: 1;
            width: 50px;
        }

        ;
    }

    /* functionArea end */

    /* trialArea start */
    .trial_container {
        margin-top: 100px;
    }

    .trial_title_text {
        font-size: min(4.75vw, 35px);
    }

    .trial_content_box {
        margin: auto;
        padding-bottom: 2%;
    }

    .trial_content_title_text {
        font-size: min(6vw, 3rem);
        margin-bottom: min(3vw, 2rem);
        padding-top: min(10vw, 5rem);
    }

    .trial_content_subtitle_text {
        font-size: min(4vw, 1.75rem);
    }

    .trial_content_paragraph_box {
        margin: 5% auto 3%;
        width: 90%;
    }

    .trial_content_paragraph_text {
        padding-bottom: 7%;
        padding-top: 7%;
        width: 50%;
    }

    .trial_content_paragraph_text.left_box {
        border-right: 2px solid #fff;
        font-size: min(5.5vw, 2.75rem);
    }

    .trial_content_paragraph_text.right_box {
        border-left: 2px solid #fff;
        font-size: min(4.75vw, 2.5rem);
        line-height: 1.75;
    }

    .trial_content_link_text {
        font-size: min(3vw, 1.5rem);
        margin: 20px auto auto;
        padding: 2% 0;
        width: 50%;
    }

    /* trialArea end */

    /* optionArea start */
    .option_container {
        margin: 8vw auto;
    }

    .option_title_sub_text {
        font-size: min(4.8vw, 2.25rem);
    }

    .option_title_text {
        font-size: min(5vw, 2.4rem);
    }

    .option_paragraph_text {
        font-size: min(3vw, 22px);
        padding: 0 2.5%;
    }

    .option_grid_content_box {
        grid-column-gap: 0px;
        grid-row-gap: 0px;
        grid-template:
            "grid_1 grid_1 grid_3" 23.3%
            "grid_5 grid_5 grid_3" 20.2%
            "grid_6 grid_6 grid_6" 19%
            "grid_4 grid_2 grid_2" 37.5%
            / 45.5% 9% 45.5%;
        height: min(121vw, 900px);
        margin: 2.5rem auto;
        max-width: unset;
        width: 100%;
    }

    .option_grid_item_box {
        padding: 6% 4%;
    }

    /* option area grid designation start */
    .option_gird_1_box {
        & .option_grid_item_image_bg {
            height: 34vw;
            width: 50vw;
        }
    }

    .option_gird_2_box {
        & .option_grid_item_image_bg {
            height: 45vw;
            width: 70vw;
        }
    }

    .option_gird_3_box {
        & .option_grid_item_title_text {
            font-size: min(2.75vw, 22px);
            margin-left: min(3vw, 40px);
        }

        & .option_grid_item_title_text::after {
            left: max(-4.5vw, -2.2rem);
            top: min(1.8vw, 1rem);
        }

        & .option_grid_item_image_bg {
            height: 53vw;
            left: -67%;
            width: 76vw;
        }
    }

    .option_gird_4_box {
        & .option_grid_item_image_bg {
            height: 45vw;
            right: -20%;
            width: 80vw;
        }
    }

    .option_gird_5_box {
        & .option_grid_item_image_bg {
            height: 26vw;
            right: -20%;
            width: 36vw;
        }
    }

    .option_gird_6_box {
        padding: 3% 4%;

        & .option_grid_item_image_bg {
            height: 24vw;
            width: 37vw;
        }
    }

    /* option area grid designation end */

    .option_grid_item_title_text {
        font-size: min(3.5vw, 30px);
        margin-left: min(3vw, 40px);
    }

    .option_grid_item_span_square_block {
        height: min(3.5vw, 2rem);
        width: min(3.5vw, 2rem);
    }

    .option_grid_item_title_text::after {
        height: min(3vw, 2rem);
        left: max(-4.5vw, -3.5rem);
        top: min(1.25vw, 0.5rem);
        width: min(3vw, 2rem);
    }

    .option_grid_item_paragraph_text {
        font-size: min(2vw, 28px);
        margin-top: min(1vw, 12px);
    }

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

    .option_grid_item_link_text {
        font-size: min(1.75vw, 1.3rem);
        margin: min(2vw, 12px) 0 auto auto;
    }

    /* optionArea end */

    /* flowArea start */
    .flow_title_sub_text {
        font-size: min(4.8vw, 2.25rem);
    }

    .flow_title_text {
        font-size: min(5vw, 35px);
    }

    .flow_paragraph_text {
        font-size: min(3vw, 22px);
        padding: 0 2.5%;
    }

    .flow_content_list {
        margin: min(21vw, 9rem) auto auto;
        max-width: 450px;
        width: 90%;
    }

    .flow_content_item_image_box {
        bottom: max(16vw, 6.5rem);
        height: 95%;
    }

    .flow_content_item_span_text {
        font-size: max(3vw, 1.2rem);
        height: max(13vw, 6rem);
    }

    .flow_content_item_title_text {
        font-size: max(2vw, 0.8rem);
        height: max(8vw, 3rem);
    }

    .flow_content_item_paragraph_text {
        font-size: max(1.35vw, 0.5rem);
    }

    .flow_content_link_text {
        font-size: min(4vw, 2rem);
        margin: min(4vw, 3rem) auto min(-6vw, -1.25rem);
        padding: 1.5% 0;
        width: 60%;
    }

    /* flowArea end */

    /* meritArea start */
    .merit_container {
        padding-top: min(10vw, 5rem);
    }

    .merit_title_sub_text {
        font-size: min(4.8vw, 2.25rem);
    }

    .merit_container::before {
        background: #E1F8F9;
        height: 120%;
        left: 0;
        right: unset;
        top: -5%;
        width: 50%;
    }

    .merit_container::after {
        height: min(45vw, 21rem);
        left: 0;
        max-width: unset;
        top: min(48vw, 22rem);
        transform: unset;
        width: 100%;
    }

    .merit_title_text {
        font-size: min(5.75vw, 2.75rem);
    }

    .merit_paragraph_text {
        font-size: min(3.5vw, 1.75rem);
        padding: 0 2.5%;
    }

    .merit_content_box {
        margin: 24% auto auto;
        max-width: unset;
        padding: 5% 4%;
        width: 80%;
    }

    .merit_content_item {
        justify-content: flex-start;
    }

    .merit_content_item_image_box {
        width: min(6vw, 6rem);

        & .item_image {
            width: min(6vw, 6rem);
        }
    }

    .merit_content_item_textarea {
        margin-bottom: min(4vw, 4rem);
        padding: 0s 0 0 3%;
    }

    .merit_content_item_title_text {
        font-size: min(2.75vw, 2rem);
    }

    .merit_content_item_paragraph_text {
        font-size: min(2.25vw, 1.25rem);
    }

    .merit_content_paragraph_text {
        font-size: min(2vw, 1.75rem);
        margin: auto;
        width: 80%;
    }

    .merit_content_link_text {
        font-size: min(4.25vw, 2rem);
        margin: min(4vw, 3rem) auto;
        padding: 1.75% 0;
        width: 60%;
    }

    /* meritArea end */

    /* newsArea start */
    .news_container {
        margin: min(13vw, 6rem) auto 0;
    }

    .news_content_wrapper {
        background: unset;
        margin: min(2vw, 1.75rem) auto;
        padding: unset;
    }

    .news_title_sub_text {
        font-size: min(4.8vw, 2.25rem);
    }

    .news_title_text {
        font-size: min(5.75vw, 2.5rem);
    }

    .news_paragraph_text {
        font-size: min(2.5vw, 1.25rem);
        line-height: 2;
        padding: 0 2.5%;
    }

    .news_content_box {
        display: block;
        margin: auto;
        max-width: unset;
        max-width: 600px;
        padding-left: unset;
        width: 90%;
    }

    .news_latest_link_box {
        display: block;
        margin: auto;
        width: 85%;
    }

    .news_latest_category_type_text {
        font-size: min(2vw, 20px);
        margin: auto;
        padding: min(1.5vw, 1.5rem) 0;
        position: relative;
        width: 35%;
    }

    .news_latest_inner_box {
        bottom: 15%;
        font-size: min(2.75vw, 25px);
        left: 10%;
    }

    .news_latest_content_title_text {
        font-size: 2vw;
        width: 100%;
    }

    .news_latest_content_image_background {
        margin-top: min(2vw, 20px);
        position: relative;
        top: unset;
        transform: unset;
        width: 100%;
    }

    .news_list_box {
        margin: min(2vw, 20px) auto auto;
        width: 100%;
    }

    .news_item_box {
        margin-bottom: 3.5%;
    }

    .news_category_type_text {
        font-size: min(1.75vw, 15px);
        width: 23%;
    }

    .news_item_inner_link_box {
        border-bottom: 1px solid #e9e9e9;
        width: 75%;
    }

    .news_release_datetime_text,
    .news_content_title_text {
        font-size: min(2.25vw, 1.1rem);
    }

    .news_content_title_text {
        margin-left: 3%;
    }

    .newsdetail_link_area {
        margin-bottom: 1vh;
    }

    .newsdetail_link_area div {
        height: 5vh;
        width: 900%;
    }

    /* newsArea end */

    /* 選ばれる理由セクション */
    .strong_item_grid_area {
        color: white;
        column-gap: 5px;
        display: grid;
        grid-template:
            "box1 box2" 15vw
            "box3 box4" 15vw
            "box5 box6" 15vw /
            40vw 40vw;
        row-gap: 5px;
    }

    .strong_grid_text {
        font-size: min(3vw, 3rem);
    }

    .strong_content_item {
        width: 90%;
    }


    /* bannerArea start */
    .banner_container {
        padding-top: min(8vw, 8rem);
    }

    .banner_container::after {
        bottom: min(12.5%, 7.5rem);
        height: min(52vw, 25rem);
        max-width: unset;
        width: 100%;
    }

    .banner_image_text {
        width: min(20vw, 150px);
    }

    .banner_title_text {
        font-size: min(5.75vw, 2.75rem);
    }

    .banner_paragraph_text {
        font-size: min(3.5vw, 1.75rem);
        padding: 0 2.5%;
    }

    .banner_content_box_wrapper {
        margin-left: unset;
        margin-top: 31%;
        padding: 3%;
        width: 100%;
    }

    .banner_content_catchcopy_text {
        font-size: min(1.65vw, 1.7rem);
    }

    .banner_content_title_text {
        font-size: min(2.75vw, 3rem);
    }

    .banner_content_subtitle_text {
        font-size: min(4vw, 4rem);
    }

    .banner_content_subtitle_image {
        width: min(4vw, 4rem);
    }

    .banner_content_paragraph_text {
        font-size: min(1.7vw, 1rem);
        padding: 2%;
    }

    /* bannerArea end */

    /* footerArea start */
    .footer_container {
        padding: min(3vw, 2rem) 0;
    }

    .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%;
        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 */

    /* *************************************************** */
    /* floating area  */
    /* フローティングアリアはモバイルでは非表示 */
    /* *************************************************** */
    .floating_area {
        display: none;
    }

}