/* ---------------------------------------- 
 - BASE
---------------------------------------- */
p{
        line-height: 200%;
}
.section_ttl_area{
    margin-top: 60px;
    text-align: center;
}
.section_ttl_area h2{
    font-size: 18px;
    font-family: var(--font_en);
}
.section_ttl_area h3{
    font-size: 14px;
    margin-top: 10px;
    font-family: var(--font_jp);
}
.section_txt_area{
    margin-top: 40px;
    text-align: center;
}
.section_txt_area h3{
    font-size: 14px;
}
.section_txt_area h4{
    font-size: 12px;
    margin-top: 5px;
}
.section_txt{
    margin-top: 20px;
    font-size: 11px;
    line-height: 200%;
}
@media screen and (min-width: 1024px) {
    .pc_none{
        display: none;
    }
}
/* ---------------------------------------- 
 - BASE
---------------------------------------- */
.brands_img{
    margin-top: 80px;
}
.brands_area{
    width: 90%;
    margin: 0 auto;
}
.brands_ttl{
    margin-top: 60px;
}
.brands_logo{
    margin: 0 auto;
    width: 45%;
    max-width: 220px;
}
.brands_logo_short{
    margin: auto;
    width: 25%;
    max-width: 180px;
}
.brands_logo_long{
        margin: 0 auto;
    width: 50%;
    max-width: 320px;
}
.brands_ttl p{
font-size: 12px;
text-align: center;
margin-top: 10px;
}
.brands_explanation h3{
font-size: 15px;
line-height: 175%;
text-align: center;
margin-top: 40px;
}
.brands_explanation_txtarea{
    margin-top: 20px;
}
.brands_explanation_txt{
    font-size: 11px;
}
.brands_explanation_txt_note{
    margin-top: 10px;
    font-size: 11px;
}
.brands_story{
    margin-top: 60px;
}
.brands_story h3{
    text-align: center;
    font-size: 15px;
}
.brands_wrap{
    margin-top: 60px;
}
.brands_block_img{
    width: 40%;
    margin: 0 auto;
    max-width: 350px;
}
.brands_block_txtarea{
    max-width: 600px;
    margin: 0 auto;
    margin-top: 40px;
}
.brands_block_txtarea h4{
    font-size: 12px;
}
.brands_block_note{
    font-size: 11px;
    margin-top: 10px;
}
.brands_point_li{
    margin-top: 40px;
}
.brands_block_txtarea h4{
    font-size: 14px;
    margin-top:40px;
}
.brands_point_txt_wrap h4{
    margin-top: 30px;
}
.brands_wrap_explanation{
    font-size: 11px;
    margin-top: 20px;
    line-height: 175%;
}
.brands_explanation_img{
    margin: 0 auto;
    margin-top: 30px;
    width: 90%;
}
.brands_block_txtarea h5{
    margin-top: 5px;
    font-size: 14px;
}
.brands_point_ttl{
    margin-top: 40px;
    font-size: 14px;
}
.brands_point_txt_wrap{
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color_border);
}
.brands_point_txt_wrap h4{
    font-family: var(--font_en);
}
.brands_point_txt_wrap h4 span{
    margin-left: 5px;
    font-size: 18px;
}
.brands_point_txt p{
    font-size: 11px;
    margin-top: 10px;
}
.brands_point_note{
    margin-top: 40px;
    font-size: 11px;
}
.brands_evidence{
    margin-top: 40px;
}
.brands_evidence h5{
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color_border);
}
.evidence_li{
    margin-top: 10px;
}
.evidence_li li{
    margin-top: 5px;
    font-size: 11px;
}
.how{
    margin-top: 60px;
}
.how h3{
    font-size: 15px;
    text-align: center;
}
.how_img{
    margin: 0 auto;
    max-width: 600px;
    margin-top: 40px;
}
.how_wrap_illust .how_img{
    width: 40%;
     max-width: 300px;
}
.how_wrap_txt{
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    column-gap: 20px;
}
.how_wrap_txt .how_txt{
    margin-top: 0;
    width:calc(100% - 40px);
    margin: 0 auto;
}
.how_wrap_txt .how_txt_num{
    width: 20px;
    text-align: center;
}
.how_wrap_txt .how_txt p{
    margin-top: 0;
}
.how_txt_num{
    font-size: 18px;
}

.how_txt{
    margin: 0 auto;
    max-width: 600px;
    width: fit-content;

    margin-top: 40px;
}
.how_txt h5{
        font-size: 12px;
    margin-top: 20px;
    font-weight: normal;
    text-align: center;
}
.how_txt_small h5{
    margin-top: 20px;
    font-size: 10px;
    font-weight: normal;
    text-align: center;
}
.how_txt p{
    margin-top: 10px;
    font-size: 11px;
}
.how_explanation_center{
      font-size: 11px;
      margin-top: 20px;
      text-align: center;  
}
.component{
    font-size: 11px;
    max-width: 600px;
    margin: 0 auto;
    margin-top: 60px;
}
.component h5{
    font-size: 14px;
    text-align: center;
    margin-top: 40px;
}
.component_left{
    margin-top: 20px;
    line-height: 175%;
}
.more_area{
    margin-top: 60px;
}
.more_area h3{
    font-size: 15px;
    text-align: center;
}
.brands_other_ttl{
    margin-top: 60px;
    font-size: 15px;
    text-align: center;
    font-weight: bold;
}
.more_link{
    margin-top: 40px;
}
.more_link_li{
    width: 90%;
    max-width: 400px;
    margin: 0 auto;
}
.more_link_li li{
    margin-bottom: 20px;
}
.more_link_li img{
    width: 20px;
}
.more_link_li li a{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.more_link_ttl h5{
font-size: 14px;
font-weight: normal;
}
.more_link_ttl p{
    font-size: 14px;
    margin-top: 5px;
}
@media screen and (min-width: 768px) {
    .brands_ttl{
        margin-top: 80px;
    }
.brands_ttl p{
    font-size: 14px;
}
.brands_explanation h3{
    font-size: 16px;
    line-height: 200%;
}
.brands_block_txtarea{
    margin:0 auto;
    margin-top: 40px;
}
.brands_explanation_txtarea{
    text-align: center;
}
.brands_explanation_txtarea .brands_explanation_txt_left{
    text-align: left;
}
.brands_story{
    margin-top: 40px;
}
.brands_story h3{
    font-size: 16px;
}
.brands_explanation_txt{
    font-size: 12px;
    line-height: 200%;
}
.brands_other_ttl{
    font-size: 22px;
    margin-top: 120px;
}
.brands_block_txtarea h4{
    font-size: 14px;
}
.brands_block_note{
    font-size: 12px;
}
.brands_wrap_explanation{
    font-size: 12px;
}
.brands_block_txtarea h5{
    font-size: 14px;
}
.brands_point_txt p{
    font-size: 12px;
}
.brands_point_note{
    font-size: 12px;
}
.evidence_li li{
    font-size: 12px;
}
.how{
    margin: 0 auto;
    margin-top: 60px;
    max-width: 600px;
}
.how h3{
    font-size: 16px;
}
.how_txt{
        margin: 0 auto;
}
.how_txt h5{
    font-size: 12px;
    text-align: left;
}
.how_txt_small h5{
    font-size: 10px;
    text-align: left; 
}
.how_wrap_illust .how_img{
    width: 20%;
}
.how_wrap_illust{
    width: 90%;
    margin: 0 auto;
    margin-top: 40px;
    display: flex;
    column-gap: 40px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.how_txt p{
    font-size: 12px;
}
.how_txt{
    width: 300px;
}
.how_explanation_center{
      font-size: 12px;
}
.how_wrap_txt{
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    width: 550px;
}
.how_wrap_txt .how_txt{
    margin: 0;
}
.how_wrap_txt .how_txt p{
    text-align: left;
}
.component{
    margin-top: 60px;
}
.component h5{
    font-size: 16px;
    text-align: center;
}
.component{
    max-width: 1000px;
}
.component p{
    font-size: 12px;
    text-align: center;
    margin-top: 20px;
}
.component .component_left{
    max-width: 1000px;
    text-align: left;
    line-height: 200%;
}
.more_area h3{
    font-size: 16px;
}
}
@media screen and (min-width: 1024px) {
    .brands_img{
        height: 85vh;
        max-height: 800px;
        object-fit: cover;
        object-position: center;
        overflow: hidden;
    }
        .brands_img img{
            height: 100%;
           object-fit: cover;
        display: block;
        object-position: center;
        }
        .brands_ttl{
            margin-top: 120px;
        }
        .brands_ttl p {
        font-size: 16px;
    }
        .brands_explanation h3{
            font-size:22px;
        }
        .brands_explanation_txt{
            font-size: 14px;
        }
        .brands_explanation_txt_note{
            font-size: 12px;
            margin-top: 30px;
        }
        .brands_story{
            margin-top: 100px;
        }
          .brands_story h3{
            font-size: 22px;
          }
        .brands_wrap{
            height:auto;
            display: flex;
            flex-wrap: wrap;
            column-gap: 10%;
            max-width: 1200px;
            margin: 0 auto;
            margin-top: 100px;
        }
        .brands_block_img{
            max-width: 300px;
            margin: 0;
            margin-left: auto;
            width: 40%;
        }
        .brands_block_txtarea{
            margin-top: 0;
            max-width: none;
            width: 50%;
        }
        .brands_block_txtarea h4{
            font-size: 16px;
        }
        .brands_block_note{
            font-size: 14px;
            margin-top: 20px;
        }
        .brands_point_li{
            margin-top: 40px;
        }
        .brands_wrap_explanation{
            margin-top: 20px;
            font-size: 14px;
        }
        .brands_point_txt_wrap{
            display: flex;
            align-items: center;
            margin-top: 40px;
            column-gap: 20px;
        }
.brands_point_txt_wrap h4{
    margin: 0;
}
.brands_point_txt_wrap h4 span{
    font-size: 25px;
}
.brands_point_txt_wrap h5{
    margin-top: 0;
}
.brands_point_txt_wrap span{
    margin-left: 10px;
    font-size: 20px;
}
.brands_point_txt p{
    font-size: 14px;
    line-height: 200%;
    margin-top: 20px;
}
.brands_point_txt_wrap h5{
    font-size: 16px;
}
.brands_point_note{
    font-size: 14px;
}
.evidence_li li{
    font-size: 14px;
    margin-top: 20px;
}
.how{
    max-width: none;
    margin-top: 100px;
}
.how h3{
    font-size: 22px;
}
.how_wrap{
    display: flex;
    column-gap: 40px;
    margin-top: 80px;
    justify-content: center;
}
.how_wrap_txt{
      column-gap: 20px; 
      width: 700px; 
}
.how_wrap_txt .how_txt p{

    font-size: 14px;
}
.how_explanation_center{
        margin-top: 40px;
      font-size: 14px;
}
.how_txt_num{
    font-size: 24px;
}
.how_wrap_illust{
    align-items: center;
    column-gap: 100px;
}
.how_wrap_illust .how_img{
    width: 23%;
}
.how_img{
    width: 30%;
 max-width: none;
 margin: 0;
}
.brands_point_ttl{
    font-size: 16px;
}
.how h3{
    text-align: center;
}
.how_txt{
    margin: 0;
    width: 390px;
}
.how_txt h5{
    margin-top: 0;
    font-size: 15px;
    line-height: 200%;
    text-align: left;
}
.how_txt_small h5{
    font-size: 12px;   
}
.how_txt h3{
    text-align: left;
    font-size: 16px;
}
.how_txt p{
    font-size: 12px;
    margin-top: 20px;
    text-align: left;
}
.component{
    margin-top: 60px;
}
.component{
    margin-top: 100px;
}.component h5{
    font-size: 22px;
}
.component p{
    font-size: 14px;
    margin-top: 40px;
}
.component .component_left{
    margin-top: 40px;
}
.brands_area{
    max-width: 1200px;
}
.more_link_li{
    display: flex;
    flex-wrap: wrap;
    column-gap: 60px;
        max-width: none;
    width: fit-content;
}
.more_link_li li a{
    display: block;
    text-align: center;
}
.more_link_li img{
    width: 20px;
    margin-top: 10px;
}
.more_area{
    margin-top: 100px;
}
.more_area h3{
    font-size: 18px;
}
}