article{
    padding-bottom: 60px;
}
#visual{
    display: block;
    overflow: hidden;
    padding-top: 0;
}
.keyvisual {
    display: block;
}
.keyvisual_sp {
    display: none;
}
.green{
    color: #28A549;
    font-weight: 700;
}
.line{
    /* padding: 0 5px; */
    /* text-decoration: underline;
    text-decoration-color: rgba(255, 248, 165, 1);
    text-decoration-thickness: 12px;
    text-underline-offset: -2px; */
    display: inline;
    box-shadow: inset 0 -10px 0 0 rgba(255, 248, 165, 1);
}
a:hover{
    opacity: 0.7;
    transition: 0.4s;
}
.content{
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    padding: 60px 5px 0 5px;
    font-family: 'Noto Sans JP', sans-serif;
    box-sizing: border-box;
    font-size: 20px;
    line-height: 1.6;
    position: relative;
}
h2{
    font-size: 48px;
    font-weight: 700;
    line-height: 1.5;
    color: #28A549;
}
.graph{
    max-width: 950px;
    width: 100%;
    margin-top: 40px;
}
.bg_green{
    background-color: #E9F6D4;
    padding-bottom: 60px;
}
.bg_add{
    background:  url("/genen/assets/img/bg_add_pc.png");
    max-width: 1278px;
    width: 100%;
    margin: 0 auto;
    margin-top: 60px;
    background-size: cover;
    background-position: center 60px;
    background-repeat: no-repeat, no-repeat;
    padding-bottom: 60px;
}
.point{
    background:  url("/genen/assets/img/poing_bg_pc.png");
    margin-top: 60px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat, no-repeat;
    padding: 60px 0;
    color: #ffffff;
    font-size: 24px;
}
.balloon_1 {
    position: relative;
    display: inline-block;
    margin-bottom: 30px;
    padding: 10px 20px;
    border: 2px solid #28a549;
    border-radius: 16px;
    background-color: #ffffff;
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #000000;
    box-sizing: border-box;
}

.balloon_1::before {
  content: "";
  position: absolute;
  bottom: -20px; /* 三角形の高さ分だけ下にずらす */
  left: 50%;
  border-style: solid;
  border-width: 20px 12px 0 12px;
  border-color: #28a549 transparent transparent;
  transform: translateX(-50%);
}

.balloon_1::after {
  content: "";
  position: absolute;
  bottom: -16px; /* 内側三角形の高さ分だけ下にずらす */
  left: 50%;
  border-style: solid;
  border-width: 17px 10.2px 0 10.2px;
  border-color: #ffffff transparent transparent;
  transform: translateX(-50%);
}
.txt{
    line-height: 1.8;
}
.txt .font-l{
    font-size: 26px;
    font-weight: 700;
}
.txt_2{
    font-size: 32px;
    font-weight: 700;
    margin-top: 24px;
}
.txt_2 .font-l{
    font-size: 40px;
}
.anker_list{
    max-width: 700px;
    width: 100%;
    margin: 0 auto;
    margin-top: 60px;
    border-left: 1px solid #28A549;
    border-right: 1px solid #28A549;
    border-bottom: 1px solid #28A549;;
}
.anker_list a{
    border-top: 1px solid #28A549;
    padding: 17px 20px;
    text-align: left;
    display: flex;
    position: relative;
    align-items: center;
}
.anker_list a::after{
    content: "";
    background: url("/genen/assets/img/anker_icon.png");
    margin-left: 12px;
    width: 18px;
    height: 18px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: top;
    transform: translateY(1px);
    position: absolute;
    right: 20px;
}
.ballon2 {
    position: relative;
    display: inline-block;
    margin-bottom: 44px;
    padding: 24px 40px;
    border-radius: 48px;
    background-color: #e9f6d4;
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.5;
    color: #28a549;
    margin-top: 60px; 
}

.ballon2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    border-style: solid;
    border-width: 20px 16px 0 16px;
    border-color: #e9f6d4 transparent transparent;
    translate: -50% 100%;
}
.accent{
    display: flex;
    align-items: center;
    justify-content: center;
}
h2.accent::before{
    content: "";
    background: url("/genen/assets/img/line_left_pc.png");
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 24px;
    height: 57px
}
h2.accent::after{
    content: "";
    background: url("/genen/assets/img/line_right_pc.png");
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 24px;
    height: 57px
}
h2.accent{
    gap: 40px;
}
.bg_add .content{
    max-width: 1020px;
}
.col{
    margin: 0 auto;
    margin-top: 60px;
    max-width: 950px;
    width: 100%;
}
.col .col_item{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    margin-bottom: 60px;
}
.col .col_item.reverse{
    flex-direction: row-reverse;
}
.col_item .img{
    max-width: 380px;
    width: 100%;
}
.col_item .item{
    max-width: 530px;
    text-align: left;
}
.col_item .item .title{
    font-size: 26px;
    font-weight: 700;
    color: #28A549;
    margin-bottom: 20px;
}
.point .point_l{
    font-size: 30px;
    font-weight: 700;
}
.lead_text{
    margin-top: 40px;
    padding-bottom: 20px;
}
h3{
    font-size: 32px;
    font-weight: 700;
    color: #28A549;
    margin-top: 20px;
}
h3.accent::before{
    content: "";
    background: url("/genen/assets/img/line_left_pc.png");
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 24px;
    height: 35px
}
h3.accent::after{
    content: "";
    background: url("/genen/assets/img/line_right_pc.png");
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 24px;
    height: 35px
}
h3.accent{
    gap: 40px;
}
.recipe_item{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    padding: 20px;
    gap: 30px;
}
.recipe_item .img{
    max-width: 438px;
    width: 100%;
}
.recipe_item .item{
    text-align: left;
    flex: 1;
}
.recipe_item.pt01{
    background:  url("/genen/assets/img/card_bg_1_pc.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat, no-repeat;
}
.recipe_item.pt02{
    background:  url("/genen/assets/img/card_bg_2_pc.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat, no-repeat;
    flex-direction: row-reverse;
}
.recipe_item .label{
    border: 2px solid #28A549;
    background-color: #ffffff;
    padding: 10px;
    font-size: 20px;
    width: fit-content;
}
.recipe_item .menus{
    padding: 20px 5px 0;
}
.recipe_item .menus li{
    font-size: 19px;
    margin-bottom: 17px;
    padding-left: 20px;
    position: relative;
}
.recipe_item .menus li::before{
    content: "・";
    position: absolute;
    left: 0;
}
.recipe_item .menus .point_txt{
    margin-top: 17px;
    line-height: 2.2;
    display: inline-block;
}
.recipe_item .menus .point_txt .dot{
    position: relative;
    display: inline-block;
}
.recipe_item .menus .point_txt .dot::before{
    content: ".";
    position: absolute;
    top: -3px;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
}
.btn_genen{
    max-width: 345px;
    background-color: #28A549;
    font-size: 20px;
    font-weight: 700;
    width: 100%;
    margin: 0 auto;
    margin-top: 40px;
}
.btn_genen a{
  padding: 17px;
  align-self: center;
  display: flex;
  justify-content: center;
}
.btn_genen a span {
    color: #ffffff;
    display: flex;
    align-items: center;
}
.btn_genen a span:after {
    content: "";
    background: url("/genen/assets/img/next_icon.png");
    margin-left: 8px;
    width: 18px;
    height: 18px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: top;
    transform: translateY(1px);
}
.sub_title {
    font-size: 32px;
}
.product{
  display: flex;
  flex-wrap: wrap;
  gap: 120px;
  margin-top: 60px;

}
.product_item{
  width: calc(50% - 60px);
  box-sizing: border-box;
  align-items: center;
  flex-direction: column;
  display: flex;
  gap: 20px;
}
.product_item .img{
  width: 100%;
  justify-self: center;
}
.product_item .content_item{
  min-height: 176px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 319fr auto;
  gap: 10px;
}
.product_item .content_item .title{
  font-weight: 700;
  font-size: 25px;
  align-self: center;
}
.product_item .content_item .txt{
  font-size: 16px;
}
.product_item .content_item .txt.mentsuyu{
  min-height: 87px;
}
.product_item .content_item .note{
  font-weight: 400;
  font-size: 12px;
  color: #838383;
}
.product_item ._btn{
  margin: 0 auto;
  font-size: 16px;
}
._btn.btn_genen a span:after {
    content: "";
    background: url("/genen/assets/img/next_icon.png");
    width: 16px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: translateY(0); 
}
.product_btn{
    max-width: 345px;
    background-color: #EE7028;
    font-size: 20px;
    font-weight: 700;
    width: 100%;
    margin: 0 auto;
}
.product_btn a {
    padding: 17px;
    align-self: center;
    display: flex;
    justify-content: center;
}
.product_btn a span {
    color: #ffffff;
    display: flex;
    align-items: center;
}
._btn.product_btn a span:after {
    content: "";
    background: url(/genen/assets/img/o_next_icon.png);
    margin-left: 8px;
    width: 16px;
    height: 16px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: top;
    /* transform: translateY(1px); */
}
@media (max-width: 940px) {
    .point{
        font-size: 22px;
        padding: 3vw 12vw;
    }
}
@media (max-width: 840px) {
    .point{
        font-size: 19px;
        padding: 2vw 12vw;
    }
}
@media (max-width: 768px) {
    #visual{
        position: relative;
        top: 42px;
        margin-bottom: 42px;
        overflow: inherit;
    }
    .keyvisual {
        display: none;
    }
    .keyvisual_sp {
        display: block;
        /* width: 100vw; */
    }
    .keyvisual_sp img {
        width: 100%;
        height: auto;
    }
    .balloon_1{
        font-size: 19px;
        width: 100%;
        padding-top: 13px;
        padding-bottom: 13px;
    }
    .content{
        padding: 60px 15px 0 15px;
        font-size: 19px;
    }
    .txt{
        font-size: 19px;
        line-height: 1.7;
    }
    .txt .font-l{
        font-size: 23px;
    }
    .txt_2 {
        font-size: 20px;
        font-weight: 500;
        margin-top: 18px;
    }
    .txt_2 .font-l {
        font-size: 28px;
    }
    h2 {
    font-size: 27px;
    font-weight: 700;
    line-height: 1.5;
    }
    .bg_green{
        padding: 0 8px;
        padding-bottom: 60px;
    }
    .bg_add {
        background: url(/genen/assets/img/bg_add_sp.png);
        width: 100%;
        margin: 0 auto;
        margin-top: 60px;
        background-size: cover;
        background-position: center 60px;
        background-repeat: no-repeat, no-repeat;
        padding-bottom: 40px;
    }
    .ballon2 {
        font-size: 19px;
        border-radius: 16px;
        margin-bottom: 40px;
    }
    h2.accent {
        gap: 9px;
    }
    h2.accent::before {
        content: "";
        background: url(/genen/assets/img/line_left_sp.png);
        display: inline-block;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        width: 15px;
        height: 33px;
    }
    h2.accent::after {
        content: "";
        background: url(/genen/assets/img/line_right_sp.png);
        display: inline-block;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        width: 15px;
        height: 33px;
    }
    .accent {
        align-items: end;
    }
    .col {
        margin-top: 40px;
    }
    .col .col_item{
        flex-direction: column;
        gap: 20px;
    }
    .col_item .item .title {
        font-size: 23px;
        text-align: center;
        line-height: 1.7;
    }
    .col .col_item.reverse{
        flex-direction: 
        column;
    }
    .point {
        background: url(/genen/assets/img/poing_bg_sp.png);
        margin-top: -40px;
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat, no-repeat;
        padding: 45px 0px;
        color: #ffffff;
        font-size: 18px;
    }
    .point .point_l {
        font-size: 22px;
    }
    h3 {
        font-size:  23px;
    }
    h3.accent {
        gap: 10px;
    }
    .recipe_item{
        flex-direction: column;
        padding: 15px;
    }
    .recipe_item.pt01{
        background: url(/genen/assets/img/card_bg_1_sp.png);
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat, no-repeat;
        width: calc(100% + 30px);
        margin-left: -15px;
        box-sizing: border-box;
    }
    .recipe_item.pt02{
        background: url(/genen/assets/img/card_bg_2_sp.png);
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat, no-repeat;
        flex-direction: column;
        width: calc(100% + 30px);
        margin-left: -15px;
        box-sizing: border-box
    }
    .sub_title{
        font-size: 20px;
        margin-bottom: 10px;
        text-underline-offset: 0;
    }
    .product_title{
        letter-spacing: -1.5px;
    }
    .lead_text{
        font-size: 14px;
    }
    .product{
        flex-direction: column;
        gap: 60px;
        margin-top: 40px;
    }
    .product_item{
        width: 100%;
    }
    .product_item .content_item .title{
        font-size: 22px;
    }
    .product_item .content_item .txt{
        font-size: 14px;
    }
    .product_item .content_item{
        min-height: 100%;
    }
    .product_item .img{
        margin-bottom: -10px;
    }
    .product_item .content_item .txt.mentsuyu{
        min-height: 100%;
    }
}