@charset "UTF-8";

/* fucoidan_explanation↓ */
#page_fucoidan_explanation .flex_sb_center {
    text-align: start;
}

#fucoidan_basic .flex_start_start img {
    display: block;
    height: 250px;
    margin: 16px;
}

#fucoidan_basic .parent {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    border: 1px solid #0000ff;
}

#fucoidan_basic .parent img {
    display: block;
    margin: auto;
    width: 100%;
}

#fucoidan_basic .parent p {
    padding: 0px 20px;
}

#fucoidan_basic .div1 {
    grid-area: 1 / 1 / 2 / 2;
}

#fucoidan_basic .div2 {
    grid-area: 1 / 3 / 2 / 4;
}

#fucoidan_basic .div3 {
    grid-area: 2 / 1 / 3 / 2;
}

#fucoidan_basic .div4 {
    grid-area: 2 / 3 / 3 / 4;
}

#fucoidan_basic .div5 {
    grid-area: 3 / 1 / 4 / 2;
}

#fucoidan_basic .div6 {
    grid-area: 3 / 3 / 4 / 4;
}

#fucoidan_basic .div7 {
    grid-area: 1 / 2 / 4 / 3;
}

#fucoidan_basic .div1 img,
#fucoidan_basic .div2 img,
#fucoidan_basic .div3 img,
#fucoidan_basic .div4 img,
#fucoidan_basic .div5 img,
#fucoidan_basic .div6 img {
    padding: 20px;
}

#fucoidan_basic .div7 img {
    padding-top: 20px;
}

#fucoidan_basic .div6 p {
    padding-bottom: 20px;
}

#dictionary_or_web .flex_start_start img {
    padding-right: 20px;
}

#dictionary_or_web .border-bottom {
    display: flex;
    justify-content: start;
    align-items: start;
    border-bottom: 1px dotted #cccc;
    flex-wrap: wrap;
    margin-top: 23px;
    padding-bottom: 0px;
}

#dictionary_or_web dt {
    font-weight: bold;
    width: 20%;
}

#dictionary_or_web dd {
    width: 80%;
}

/* glucan_and_future↓ glucan_remarks*/
#g-future img,
#reason img {
    width: 100%;
}

#goal .fw_bold a {
    padding-left: 5px;
}

/* hara↓ */
#hara img {
    width: 100%;
}

/* law,agreement↓ */
#law1 .flex_start_start {
    flex-wrap: wrap;
    margin: 23px 0px;
    width: 100%;
}

#law1 .flex_start_start dt {
    font-weight: bold;
    padding: 10px 0px 5px 10px;
    width: 25%;
}

#law1 .flex_start_start dd {
    padding: 10px 0px 5px 0px;
    width: 75%;
}

#law1 .flex_start_start dt:not(:first-of-type),
#law1 .flex_start_start dd:not(:first-of-type) {
    border-top: 1px dotted #cccccc;
}

#agreement .decimal {
    padding-left: 36px;
}

#agreement .decimal ol {
    margin: 8px 0px;
}

#agreement .pad-free {
    padding-left: 10px;
}

#agreement .border-bottom {
    margin-bottom: 23px;
}

/* login↓ */
#page_login #login img {
    width: 100%;
}

#page_login #login .for_pc li {
    border-bottom: 1px dashed #333;
    color: #ff0000;
    font-size: 24px;
    font-weight: bold;
    padding-bottom: 23px;
    margin-bottom: 23px;
}

/* SP */
@media screen and (max-width:900px) {

    /* fucoidan_explanation↓ */
    #page_fucoidan_explanation p img,
    #page_fucoidan_explanation .flex_start_center img,
    #page_fucoidan_explanation .flex_start_start img {
        margin-left: 0px;
        margin-right: 0px;
        height: auto;
        width: 100%;
    }

    #page_fucoidan_explanation .flex_sb_center img {
        display: block;
        margin: auto;
    }

    #fucoidan_basic .parent {
        display: block;
    }

    #fucoidan_basic .div7 img {
        padding-bottom: 20px;
    }

    #dictionary_or_web .flex_start_start img {
        padding: 10px 0px;
    }

    #dictionary_or_web .border-bottom {
        display: block;
    }

    #dictionary_or_web .border-bottom dt,
    #dictionary_or_web .border-bottom dd {
        width: 100%;
    }

    /* glucan_and_future↓  glucan_remarksなし*/
    #goal img {
        width: 100%;
    }


    /* fucoidan-extract ↓ */
    /* javaカートのデザイン↓ */
    #f-extract_product table {
        border-collapse: collapse;
        border-top: 1px dotted #d9d8d8;
        border-bottom: 1px dotted #d9d8d8;
    }

    #f-extract_product th,
    #f-extract_product2 th,
    #f-extract_product3 th {
        background-color: #e8ffe4;
        padding: 5px 30px;
        white-space: nowrap;
        border-collapse: collapse;
        border-top: 1px dotted #d9d8d8;
        border-bottom: 1px dotted #d9d8d8;
    }

    #f-extract_product td,
    #f-extract_product2 td,
    #f-extract_product3 td {
        padding: 5px 10px;
        vertical-align: middle;
        white-space: nowrap;
        border-collapse: collapse;
        border-top: 1px dotted #d9d8d8;
        border-bottom: 1px dotted #d9d8d8;
    }

    #f-extract_product .inner {
        width: 80%;
    }

    #f-extract_product .inner dl {
        display: flex;
        justify-content: center;
        align-items: start;
        flex-wrap: wrap;
    }

    #f-extract_product img {
        width: 50%;
    }

    /* law,agreement↓ */
    #law1 .flex_start_start dd:not(:first-of-type) {
        border-top: none;
    }

    #law1 .flex_start_start dt {
        width: 100%;
    }

    #law1 .flex_start_start dd {
        padding: 0px 10px 10px;
        width: 100%;
    }

    /* login↓ */
    #page_login #login .for_sp li {
        padding-bottom: 23px;
    }

    #page_login #login .for_sp li:not(:last-of-type) {
        border-bottom: 1px solid #333;
        margin-bottom: 23px;
    }

    #page_login #login .for_sp li:not(:first-of-type) {
        background: url(../images/arw005111.gif) center top no-repeat;
        background-size: 20px;
        padding-top: 48px;
    }

    #page_login #login .for_sp li p {
        padding-top: 23px;
    }
}