@charset "UTF-8";

#flow+section ul {
   display: flex;
   flex-wrap: wrap;
   gap: 4rem;
}
#flow+section ul li {
    list-style: none;
    width: calc(50% - 2rem);
    padding: 2rem;
    box-sizing: border-box;
    background: var(--i_sub2_color);
}
#flow+section ul .heading_wrap {
    display: flex;
    margin-bottom: 3rem;
}
#flow+section ul .heading_num {
    font-size: 7rem;
    font-weight: 600;
    color: var(--i_main_color);
    margin-right: 3rem;
    line-height: 1;
}
#flow+section ul .heading_en {
    font-size: 3rem;
    color: var(--i_main_color);
}
#flow+section ul .heading_ja {
    font-size: 1.8rem;
}
#flow+section ul .heading {
    position: relative;
}
#flow+section ul .heading::before {
    position: absolute;
    content: '';
    width: 40px;
    height: 2px;
    background: var(--i_main_color);
    bottom: -15px;
    left: 0;
}
#flow+section ul .body {
    display: flex;
    gap: 2rem;
}
#flow+section ul .heading_en,
#flow+section ul .heading_ja {
    line-height: 1.2;
}
#flow+section ul .heading_en {
    font-weight: 600;
}
#flow+section ul .icon {
    width: calc(20% - 1rem);
}
#flow+section ul .text {
    width: calc(80% - 1rem);
}
@media screen and (max-width: 900px) {
#flow+section ul .heading_num {
    font-size: 5rem;
    margin-right: 2rem;
}
#flow+section ul .heading_en {
    font-size: 2.4rem;
}
#flow+section ul .heading_ja {
    font-size: 1.6rem;
}
}
@media screen and (max-width: 768px) {
#flow+section ul {
   flex-direction: column;
}
#flow+section ul li {
    width: 100%;
}
#flow+section ul .heading_num {
    font-size: max(9vw, 4rem);
    margin-right: 2rem;
}
#flow+section ul .heading_en {
    font-size: max(5vw, 2rem);
}
#flow+section ul .heading_ja {
    font-size: max(3.7vw, 1.8rem);
}
#flow+section ul .body {
    flex-direction: column;
    align-items: center;
}
#flow+section ul .icon {
    width: 50%;
    height: 50%;
}
#flow+section ul .text {
    width: 100%;
}
#flow+section ul .icon img {
    width: 100%;
    margin: 0 auto;
}
}