@charset "UTF-8";

/* 初めての方へ */
a[id*="st"] + section .heading.block_header_2 .h {
    font-size: 3.5rem !important;
    line-height: 1.4;
    color: var(--i_main_color);
    padding-left: 0;
    letter-spacing: 0.2rem !important;
}
a[id*="st"] + section .heading.block_header_2 p {
    font-size: 2rem !important;
    color: var(--i_main_color);
    letter-spacing: 0.2rem;
    padding-left: 0;
}
a[id*="st"] + section .heading.block_header_2 .h:before {
    display: none;
}
.st_wrapper {
    width: 100%;
    height: 100%;
    background: url(/common/upload_data/green-algaetechjp/image/st_bg_5.png)no-repeat;
    background-position: center center;
    background-size: cover;
}
@media screen and (min-width: 901px) {
    #product_sp + section {
        display: none;
    }
}
@media screen and (max-width: 900px) {
    .heading.block_header_1 p,
    .heading.block_header_6 .h {
        font-size: 2rem;
    }
    a[id*="st"] + .contents_box01:not(.block_image_text_2):not(.block_image_text_6):not(.block_text_6) .wrapper_item {
        display: flex;
    }
    a[id*="st"] + .contents_box01.block_image_text_3 .inner_item_img,
    a[id*="st"] + .contents_box01.block_image_text_4 .inner_item_img {
        flex-basis: 40%;
        position: relative;
    }
    a[id*="st"] + section .heading.block_header_2 .h {
        font-size: 2.5rem !important;
    }
    a[id*="st"] + section .heading.block_header_2 p {
        font-size: 1.6rem !important;
    }
    .st_wrapper {
        background: none;
    }
    a[id*="st"] + section {
        overflow: visible;
        margin-top: -10px
    }
    #st1 + section {
        margin-top: 0;
    }
    #st1 + section::before,
    #st3 + section::before {
        position: absolute;
        display: block;
        content: "";
        width: 90%;
        height: 100%;
        border: 10px solid var(--i_sub2_color);
        border-radius: 0 50px 50px 0;
        border-left: none;
        opacity: 1;
        pointer-events: none;
        z-index: -1;
        top: 0px;
        left: auto;
        right: 0;
        box-sizing: border-box;
    }
    #st2 + section::before,
    #st4 + section::before {
        position: absolute;
        display: block;
        content: "";
        width: 90%;
        height: 100%;
        border: 10px solid var(--i_sub2_color);
        border-radius: 50px 0px 0 50px;
        border-right: none;
        opacity: 1;
        pointer-events: none;
        z-index: -1;
        top: 0px;
        left: 0;
        box-sizing: border-box;
    }
    #product_pc + section {
        display: none;
    }
}
@media screen and (max-width: 600px) {
    a[id*="st"] + .contents_box01:not(.block_image_text_2):not(.block_image_text_6):not(.block_text_6) .wrapper_item {
        display: block;
    }
}

/*---そもそも、EPA・DHAって何がすごいの？---*/
#point + .composite_box01 .inner_item .heading {
    background: var(--i_btn_color);
    color: #fff;
    padding: 10px 0;
    position: relative;
    margin-bottom: 30px;
    border-radius: 20px 20px 0 0;
}
#point + .composite_box01 .inner_item .heading:before {
    position: absolute;
    display: block;
    content: "";
    border: 80px solid transparent;
    border-top: 20px solid var(--i_btn_color);
    position: absolute;
    top: 99%;
    left: 50%;
    transform: translate(-50%, 0);
}

#point + div .heading.block_header_4 p {
    color: #fff;
    font-size: 1.6rem;
}

#point + .composite_box01 .wrapper_item {
    overflow: visible;
}
#point + .composite_box01 .inner_item {
    box-shadow: 0 0 13px rgba(0, 0, 0, 0.1);
    border-radius: 20px 20px 0 0;
}

#point + .composite_box01.block_images_1 a + .inner_item_txt {
    margin-top: 0;
    padding-bottom: 20px;
}

#point + .composite_box01.block_images_1 a + .inner_item_txt > p,
#point + .composite_box01.block_images_1 a + .inner_item_txt ul {
    padding: 0 5%;
}

/*---なぜ「藻」が最強の選択肢なのか？---*/
#merit + div .inner_item {
    width: 300px;
    height: 300px;
    aspect-ratio: 1 / 1;
    border-radius: 100%;
}
#merit + div .wrapper_item {
    justify-content: center;
    gap: 20px;
}
#merit + div .wrapper_item a {
    transition: 0.3s;
}
#merit + div .wrapper_item a:hover {
    opacity: .5;
}
#merit + div .inner_item:nth-of-type(1) > a {
    pointer-events: none;
}
#merit + div .inner_item_txt {
    border-radius: 100%;
    padding: 15%;
    background: var(--i_sub_color);
    outline: 1px rgba(255, 255, 255, 0.8) solid;
    outline-offset: -5px;
}

#merit + div .heading.block_header_4 .h {
    font-size: 1.8rem !important;
}
#merit + div .heading.block_header_4 p {
    font-size: 1.8rem !important;
    color: #fff;
}

#merit + div .inner_item_txt .heading:before {
    background: none;
}

@media screen and (max-width: 700px) {
    #merit + div .inner_item {
        width: 46% !important;
        height: 46% !important;
    }
}
@media screen and (max-width: 600px) {
    #merit + div .inner_item {
        width: 100% !important;
        height: 100% !important;
    }
}

/*--------------20250716追加css---------------*/
/*--------アイコン(こんなお悩み、抱えていませんか？)-----------*/
a#fr1+div h3.h {
    color: #769460;
}

a#fr1+div img {
    object-fit: contain;
}

@media screen and (max-width: 768px) {
    a#fr1+div img {
    width: 45% !important;
}
a#fr1+div .inner_item:nth-of-type(4) .inner_item_img img {
    width: 30% !important;
}
}

/*--------イラスト(なぜ、一つの答えが多様な悩みに届くのか？)-----------*/
a#fr2+section img {
    object-fit: contain;
    width: 50% !important;
    height: auto;
}

@media screen and (max-width: 900px) {
    a#fr2+section img {
    width: 30% !important;
}
}