@charset "utf-8";
/* CSS Document */
body {
    font-family: 'Noto Sans JP', sans-serif;
}
main {
    width: 100%;
    overflow: hidden;
}
ul {
    list-style-type: none;
    margin: 0.5em 0;
    padding: 0;
}
h1 {
    margin: 0 auto;
    margin-bottom: 0.85em;
    font-size: 4rem;
}
h2 {
    font-size:2.25rem;
    margin: 0 auto;
}
h3 {
    font-size: 1.15rem;
    margin: 0 auto;
}
h4 {
    text-align: center;
    margin: 0 auto;
}
p{
    margin: 0.5em auto;
}
img {
	max-width: 100%;
	height: auto;
    display: block;
}
.h2_border {
    width: 100px;
}
.logo img {
    display: block;
}
.content {
    width: 1080px;
    margin: 0 auto;
}
.radius {
    border-radius: 20px;
    margin: 0 auto;
}
.radius-l {
    border-radius: 50px;
    margin: 0 auto;
}
.flex {
    display: -webkit-flex;
    display: flex;
}
.flex_center {
    display: -webkit-flex;
    display: flex;
    justify-content: center;
}
.flex_end {
    display: -webkit-flex;
    display: flex;
    justify-content: flex-end;
}
.flex_column {
    display: -webkit-flex;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}
.flex_sb {
    display: -webkit-flex;
    display:flex;
    justify-content: space-between;
}
.items_center {
    align-items: center;
}
.items_start {
    align-items: flex-start;
}
.items_end {
    align-items: flex-end;
}
.text_sss {
    font-size: 0.45em;
}
.text_ss {
    font-size: 0.65em;
}
.text_s {
    font-size: 0.75em;
}
.text_sm {
    font-size: 1em;
}
.text_m {
    font-size: 1.25em;
}
.text_ml {
    font-size: 1.5em;
}
.text_l {
    font-size: 1.75em;
}
.text_ll {
    font-size: 2.25em;
}
.text_bold {
    font-weight: bold;
}
.align-left {
    text-align: left;
}
.align-center {
    text-align: center;
    margin: 0 auto;
}
.align-right {
    text-align: right;
}
.red {
    color:#E24948;
}
.wh {
    color:#ffffff;
}
.pl {
    color:#a380ee;
}
.gr {
    color:#19e0b1;
}
.or {
    color:#ffae50;
}
.pi {
    color:#d2699c;
}
.blu {
    color:#5484db;
}
.bg-pink {
    background:#FBF0EF;
}
.bg-gray {
    background:#F9F9F9;
}
.bg-gray2 {
    background:#888888;
}
.bg-wh {
    background:#ffffff;
}
.bg-pl {
    background:#eae4ff;
}
.bg-gr {
    background:#c2f5e9;
}
.bg-or {
    background:#ffe6d7;
}
.bg-pi {
    background:#ffe7f1;
}
.bg-blu {
    background:#e7effe;
}
.border {
    border: 1px #888888 solid;
    margin: 0 auto;
}
.border_br {
    border-bottom: 5px #E24948 solid;
    margin: 1rem auto 0;
    text-align: center;
}
.border_bpl {
    border-bottom: 5px #a380ee solid;
    margin: 1rem auto 0;
    text-align: center;
}
.border_bgr {
    border-bottom: 5px #19e0b1 solid;
    margin: 1rem auto 0;
    text-align: center;
}
.border_bor {
    border-bottom: 5px #ffae50 solid;
    margin: 1rem auto 0;
    text-align: center;
}
.border_bpi {
    border-bottom: 5px #d2699c solid;
    margin: 1rem auto 0;
    text-align: center;
}
.border_bblu {
    border-bottom: 5px #5484db solid;
    margin: 1rem auto 0;
    text-align: center;
}
.border_r {
    border: 2px #E24948 dashed;
    text-align: center;
}
.border_pl {
    border: 2px #a380ee dashed;
    text-align: center;
}
.border_gr {
    border: 2px #19e0b1 dashed;
    text-align: center;
}
.border_or {
    border: 2px #ffae50 dashed;
    text-align: center;
}
.border_pi {
    border: 2px #d2699c dashed;
    text-align: center;
}
.border_blu {
    border: 2px #5484db dashed;
    text-align: center;
}
.margin-y1{
    margin: 1rem 0;
}
.margin-y2{
    margin: 2rem 0;
}
.margin-y3{
    margin: 3rem 0;
}
.margin-y4{
    margin: 4rem 0;
}
.margin-x1{
    margin: 0 1rem;
}
.margin-x2{
    margin: 0 2rem;
}
.margin-x3{
    margin: 0 3rem;
}
.margin-x4{
    margin: 0 4rem;
}
.padding-y1{
    padding: 1rem 0;
}
.padding-y2{
    padding: 2rem 0;
}
.padding-y3{
    padding: 3rem 0;
}
.padding-y4{
    padding: 4rem 0;
}
.padding-x1{
    padding: 0 1rem;
}
.padding-x2{
    padding: 0 2rem;
}
.padding-x3{
    padding: 0 3rem;
}
.padding-x4{
    padding: 0 4rem;
}
.flexible {
    width: 55%;
    margin: 0 auto;
}
.btn {
    width: 60%;
    margin: 0 auto;
    justify-content: center;
}
.btn a {
    width: 100%;
    background: #FFA674;
    background: linear-gradient(90deg, rgba(255, 166, 116, 1) 0%, rgba(238, 119, 104, 1) 50%, rgba(223, 35, 23, 1) 100%);
    padding: 1.75rem 1rem;
    /* border-radius */
    border-radius: 5px;
    /* box-shadow */
    box-shadow: 0px 5px 0px 0px rgba(146,10,0,1);
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
}
.btn a:hover {
    width: 100%;
    opacity: 0.5;
    transition-duration: 0.5s;/*要素が変化するまでの時間を指定*/
}
.btn a img {
    margin-left: 2rem;
}
header {
    width: 100%;
    background: #ffffff;
    margin: 0 auto;
    padding: 0.5rem 0;
}
header .btn {
    width: 100%;
    margin: 0 auto;
    justify-content: center;
}
header .btn a {
    width: 100%;
    font-size: 1.15rem;
    padding: 1.25rem 2rem;
}
header .btn a:hover {
    width: 100%;
    font-size: 1.15rem;
    padding: 1.25rem 2rem;
}
.box {
    width: 100%;
    margin: 0 auto;
}
.text_cont {
    width: 65%;
}
.img_cont {
    width: 30%;
    margin: 0 auto;
    text-align: center;
}
.fv1,
.bv1 {
    background: url("../img/bg_graphic_1.svg") center center no-repeat;
    width: 100%;
    background-size: cover;
    background-color: #ffffff;
    position: relative;
    padding: 1.5rem 0;
}
.fv2,
.bv2 {
    background: url("../img/bg_graphic_2.svg") center center no-repeat;
    width: 100%;
    background-size: cover;
    background-color: #ffffff;
    position: relative;
    padding: 1.5rem 0;
}
.fv3,
.bv3 {
    background: url("../img/bg_graphic_3.svg") center center no-repeat;
    width: 100%;
    background-size: cover;
    background-color: #ffffff;
    position: relative;
    padding: 1.5rem 0;
}
.fv4,
.bv4 {
    background: url("../img/bg_graphic_4.svg") center center no-repeat;
    width: 100%;
    background-size: cover;
    background-color: #ffffff;
    position: relative;
    padding: 1.5rem 0;
}
.fv5,
.bv5 {
    background: url("../img/bg_graphic_5.svg") center center no-repeat;
    width: 100%;
    background-size: cover;
    background-color: #ffffff;
    position: relative;
    padding: 1.5rem 0;
}
.fv1 .box,
.fv2 .box,
.fv3 .box,
.fv4 .box,
.fv5 .box {
    width: 84%;
    margin: 0 auto;
}
.bv1 .box,
.bv2 .box,
.fv3 .box,
.fv4 .box,
.bv5 .box {
    width: 80%;
    margin: 0 auto;
}
.fv1 .text_cont,
.fv2 .text_cont,
.fv3 .text_cont,
.fv4 .text_cont,
.fv5 .text_cont,
.bv1 .text_cont,
.bv2 .text_cont,
.bv3 .text_cont,
.bv4 .text_cont,
.bv5 .text_cont {
    width: 60%;
    margin: 0 auto;
}
.bv1 .pb,
.bv2 .pb,
.bv3 .pb,
.bv4 .pb,
.bv5 .pb {
    margin: 1rem 0;
    font-size: 1.1rem;
    padding-right: 0.5rem;
}
.fv1 .img_cont,
.fv2 .img_cont,
.fv3 .img_cont,
.fv4 .img_cont,
.fv5 .img_cont,
.bv1 .img_cont,
.bv2 .img_cont,
.bv3 .img_cont,
.bv4 .img_cont,
.bv5 .img_cont {
    width: 40%;
    margin: 0 auto;
    text-align: center;
}
.fv1 .img_cont img,
.fv2 .img_cont img,
.fv3 .img_cont img,
.fv4 .img_cont img,
.fv5 .img_cont img,
.bv1 .img_cont img,
.bv2 .img_cont img,
.bv3 .img_cont img,
.bv4 .img_cont img,
.bv5 .img_cont img {
    margin-left: 3rem;
    text-align: left;
}
.fv1 li,
.fv2 li,
.fv3 li,
.fv4 li,
.fv5 li {
    margin-bottom: 1rem;
}
.fv1 li span,
.fv2 li span,
.fv3 li span,
.fv4 li span,
.fv5 li span {
    margin: 0 1rem 0 0;
}
.fv1 p,
.fv2 p,
.fv3 p,
.fv4 p,
.fv5 p {
    border-radius: 20px;
    margin: 0 auto;
}
.problem {
    position: relative;
}
.problem .box {
    width: 100%;
    margin: 0 auto;
}
.problem .card {
    margin: 0 auto;
    width: 30%;
    border-radius: 10px;
}
.problem .box .card-img {
    text-align: center;
    margin: 0 auto;
    width: 100%;
}
.problem .box .card-img img {
    text-align: center;
    margin: 0 auto;
    max-width: 100%;
}
.problem .box .card-text {
    text-align: center;
    margin: 0 auto;
    max-width: 100%;
}
.problem .box p {
    padding: 1rem;
    line-height: 140%;
    margin: 0 auto;
    text-align: center;
    font-size: 0.9rem;
}
.problem h3 {
    margin: 0 auto;
    text-align: center;
}
.problem .triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-right: 85px solid transparent;
    border-left: 85px solid transparent;
    border-top: 35px solid #FDCE50;
    border-bottom: 0;
    margin: 0 auto;
    margin-top: 2rem;
}
.features {
    padding: 6rem 0 2em;
}
.features .boxwrap {
    margin: 2rem auto 0;
}
.features .box {
    margin: 0 auto 2rem;
}
.features .box h3 {
    font-size: 1.5rem;
} 
.features .box p {
    padding: 1rem 0;
    line-height: 180%;
    font-size: 1rem;
}
.tag1,
.tag2,
.tag3,
.tag4,
.tag5 {
    width: 10%;
    text-align: center;
    padding: 0 2rem;
}
.tag1 p,
.tag2 p,
.tag3 p,
.tag4 p,
.tag5 p {
    font-size: 2rem;
    line-height: 120%!important;
}
.tag1 {
    background:#a380ee;
}
.tag2 {
    background:#19e0b1;
}
.tag3 {
    background:#ffae50;
}
.tag4 {
    background:#d2699c;
}
.tag5 {
    background:#5484db;
}
.bv1 .box h2,
.bv2 .box h2,
.bv3 .box h2,
.bv4 .box h2,
.bv5 .box h2 {
    font-size: 4rem; 
}
.bv1 .box .text_cont p,
.bv2 .box .text_cont p,
.bv3 .box .text_cont p,
.bv4 .box .text_cont p,
.bv5 .box .text_cont p {
    line-height: 160%;
}  
footer {
    width: 100%;
    display: flex;
    background: #333333;
    padding: 2em 0;
}
.footer_nav {
    align-items: center;
    color: #ffffff;
    width: 90%;
    margin: 0 auto;
}
.footer_nav a {
    color: #ffffff;
    text-decoration: none;
    margin: 0 1em;
    font-size: 0.85em;
}
.footer_nav a:hover {
    color: #ffffff;
    text-decoration: underline;
    transition-duration: 0.5s;/*要素が変化するまでの時間を指定*/
}
.footer_nav li{
    margin: 0  0.5em;
}
.footer_nav li:last-child {
    color: #ffffff;
}
@media screen and (max-width: 1079px) and (min-width: 960px) {
    .content {
        width: 90%;
        margin: 0 auto;
    }
    .flexible {
        width: 80%;
        margin: 0 auto;
    }
    .fv1 .box,
    .fv2 .box,
    .fv3 .box, 
    .fv4 .box,
    .fv5 .box {
        width: 100%;
        margin: 0 auto;
        border-radius: 5px;
    }
    .bv1 .box,
    .bv2 .box,
    .bv3 .box,
    .bv4 .box,
    .bv5 .box {
        width: 90%;
        margin: 0 auto;
        padding: 0.5rem 0;
        border-radius: 5px;
    }
    .bv1 .box h2,
    .bv2 .box h2,
    .bv3 .box h2,
    .bv4 .box h2,
    .bv5 .box h2 {
        font-size: 3.85rem; 
    }
    .bv1 .box p,
    .bv2 .box p,
    .bv3 .box p,
    .bv4 .box p,
    .bv5 .box p {
        line-height: 160%;
    } 
    .btn {
        width: 70%;
        margin: 0 auto;
    }
    .problem .box {
        width: 100%;
        margin: 0 auto;
    }
    .bv1 .text_cont .pt,
    .bv2 .text_cont .pt,
    .bv3 .text_cont .pt,
    .bv4 .text_cont .pt,
    .bv5 .text_cont .pt {
        font-size: 1.05rem;
    }
    .bv1 .pb,
    .bv2 .pb,
    .bv3 .pb,
    .bv4 .pb,
    .bv5 .pb {
        font-size: 1rem;
    }
    .fv1 .img_cont img,
    .fv2 .img_cont img,
    .fv3 .img_cont img,
    .fv4 .img_cont img,
    .fv5 .img_cont img,
    .bv1 .img_cont img,
    .bv2 .img_cont img,
    .bv3 .img_cont img,
    .bv4 .img_cont img,
    .bv5 .img_cont img {
        margin-left: 3rem;
        text-align: left;
    }
    .footer_nav {
        width: 100%;
        margin: 0 auto;
    }
    .footer_nav a {
        font-size: 0.75em;
    }
}
@media screen and (max-width: 959px) and (min-width: 768px) {
    h1,.bv .box h2 {
        font-size: 3.05rem;
        margin: 0 auto;
    }
    h2 {
        font-size: 2.25rem;
        margin: 0 auto;
    }
    h3 {
        font-size: 2rem;
        margin: 0 auto;
    }
    .text_ml {
        font-size: 1.25em;
    }
    .text_l {
        font-size: 1.4em;
    }
    .content {
        width: 90%;
        margin: 0 auto;
    }
    .flexible {
        width: 60%;
        margin: 0 auto;
    }
    .fv1 .box,
    .fv2 .box,
    .fv3 .box,
    .fv4 .box,
    .fv5 .box {
        width: 100%;
        margin: 0 auto;
    }
    .fv1 p,
    .fv2 p,
    .fv3 p,
    .fv4 p,
    .fv5 p {
        font-size: 1.5rem;
    }
    .problem .content {
        width: 96%;
        margin: 0 auto;
    }
    .problem .box {
        width: 100%;
        margin: 0 auto;
    }
    .problem .card {
        margin: 0 auto;
        width: 31%;
    }
    .problem .box p {
        padding: 0.5rem;
        line-height: 160%;
        margin: 0 auto;
        text-align: center;
        font-size: 0.7rem;
    }
    .bv1 .box,
    .bv2 .box,
    .bv3 .box,
    .bv4 .box,
    .bv5 .box {
        width: 100%;
        margin: 0 auto;
    }
    .bv1 .text_cont .pt,
    .bv2 .text_cont .pt,
    .bv3 .text_cont .pt,
    .bv4 .text_cont .pt,
    .bv5 .text_cont .pt {
        font-size: 0.9rem;
    }
    .bv1 .tb,
    .bv2 .tb,
    .bv3 .tb,
    .bv4 .tb,
    .bv5 .tb {
        flex-direction: column;
        margin-bottom: 0.5rem;
    }
    .bv .tb img  {
        width: 40%;
        margin: 0.5rem auto;
    }
    .bv1 .pb,
    .bv2 .pb,
    .bv3 .pb,
    .bv4 .pb,
    .bv5 .pb {
        font-size: 1.05rem;
        margin: 0 auto;
    }
    .fv1 .img_cont img,
    .fv2 .img_cont img,
    .fv3 .img_cont img,
    .fv4 .img_cont img,
    .fv5 .img_cont img,
    .bv1 .img_cont img,
    .bv2 .img_cont img,
    .bv3 .img_cont img,
    .bv4 .img_cont img,
    .bv5 .img_cont img {
        margin-left: 1rem;
        text-align: left;
    }
    .bv1 .box,
    .bv2 .box,
    .bv3 .box,
    .bv4 .box,
    .bv5 .box {
        width: 100%;
        margin: 0 auto;
        text-align: left;
    }
    .bv1 .btn,
    .bv2 .btn,
    .bv3 .btn,
    .bv4 .btn,
    .bv5 .btn {
        width: 70%;
        margin: 0 auto;
        justify-content: center;
    }
    .bv1 .box h2,
    .bv2 .box h2,
    .bv3 .box h2,
    .bv4 .box h2,
    .bv5 .box h2 {
        font-size: 3rem; 
    }
    .features .box h3 {
        font-size: 1.85rem;
    } 
    .features .box p {
        padding: 1rem 0;
        line-height: 160%;
        font-size: 0.95rem;
    } 
    .footer_nav {
        width: 100%;
        margin: 0 auto;
    }
    .footer_nav li {
        margin: 0  0.5em;
        font-size: 0.6em;
    }
    .footer_nav a {
        font-size: 0.6em;
    }
}
@media screen and (max-width: 767px) and (min-width: 481px) {
    header .content {
        width: 96%;
        margin: 0 auto;
    }
    header li img {
        width: 70%;
    }
    header .text_ml {
        font-size: 0.75rem;
    }
    header .btn a {
        width: 100%;
        font-size: 1rem;
        padding: 1.25rem 2rem;
    }
    header .btn a:hover {
        width: 100%;
        font-size: 1rem;
        padding: 1.25rem 2rem;
    }
    h1 {
        margin: 0 auto;
        margin-bottom: 0.85em;
        font-size: 3.5rem;
    }
    h2 {
        font-size: 1.85rem;
        margin: 0 auto;
    }
    h3 {
        font-size: 1.05rem;
        margin: 0 auto;
    }
    .text_ml {
        font-size: 1rem;
    }
    .text_ll {
        font-size: 1.5rem;
    }
    .text_l {
        font-size: 1.1rem;
    }
    .text_s {
        font-size: 0.4rem;
    }
    .content {
        width: 90%;
        margin: 0 auto;
    }
    .radius-l {
        border-radius: 70px;
        margin: 0 auto;
    }
    .fv1,
    .bv1 {
        background: url("../img/bg_graphic_1_sp.svg") center center no-repeat;
        width: 100%;
        background-size: cover;
        padding: 2rem 0;
    }
    .fv2,
    .bv2 {
        background: url("../img/bg_graphic_2_sp.svg") center center no-repeat;
        width: 100%;
        background-size: cover;
        padding: 2rem 0;
    }
    .fv3,
    .bv3 {
        background: url("../img/bg_graphic_3_sp.svg") center center no-repeat;
        width: 100%;
        background-size: cover;
        padding: 2em 0;
    }
    .fv4,
    .bv4 {
        background: url("../img/bg_graphic_4_sp.svg") center center no-repeat;
        width: 100%;
        background-size: cover;
        padding: 2em 0;
    }
    .fv5,
    .bv5 {
        background: url("../img/bg_graphic_5_sp.svg") center center no-repeat;
        width: 100%;
        background-size: cover;
        padding: 2em 0;
    }
    .fv1 .box,
    .fv2 .box,
    .fv3 .box,
    .fv4 .box,
    .fv5 .box {
        width: 100%;
        margin: 0 auto;
        flex-direction: column;
        background-color: rgba(255, 255, 255, 0.7); 
        border-radius: 0.75rem;
    }
    .fv1 .text_cont,
    .fv2 .text_cont,
    .fv3 .text_cont,
    .fv4 .text_cont,
    .fv5 .text_cont,
    .bv1 .text_cont,
    .bv2 .text_cont,
    .bv3 .text_cont,
    .bv4 .text_cont,
    .bv5 .text_cont {
        width: 100%;
        margin: 0 auto;
    }
    .fv1 li,
    .fv2 li,
    .fv3 li,
    .fv4 li,
    .fv5 li {
        margin: 0 0 1rem 0;
    }
    .fv1 li span,
    .fv2 li span,
    .fv3 li span,
    .fv4 li span,
    .fv5 li span {
        margin: 0 1rem 0 0;
    }
    .fv1 p,
    .fv2 p,
    .fv3 p,
    .fv4 p,
    .fv5 p {
        font-size: 1rem;
    }
    .btn {
        width: 80%;
    }
    .btn a {
        width: 100%;
        font-size: 1.25rem;
    }
    .btn a:hover {
        width: 100%;
        font-size: 1.25rem;
    }
    .problem .box {
        width: 94%;
        margin: 0 auto;
    }
    .problem .box .flex {
        flex-direction: column;
    }
    .problem .card {
        margin: 0 auto 1rem; 
        width: 90%;
        flex-direction: row;
        display: flex;
        align-items: center;
        text-align: left;
        padding: 1rem;
    }
    .problem .box .card-img {
        text-align: center;
        margin: 0 auto;
        width: 24%;
    }
    .problem .box .card-img img {
        text-align: center;
        margin: 0 auto;
        max-width:100%;
    }
    .problem .box .card-text {
        width: 76%;
    }
    .problem .box .card-text p {
        text-align: left;
        line-height: 140%;
        font-size: 1rem;
    }
    .problem h3 {
        margin: 0 auto;
        text-align: center;
        font-size: 1.85rem;
    }
    .features {
        padding: 4rem 0 2em;
    }
    .features .box {
        flex-direction: column;
        width:90%; 
        margin: 0 auto 3rem;
    }
    .features .box h3 {
        font-size: 1.5rem;
        line-height: 140%;
    } 
    .features .text_cont {
        width: 100%;
    }
    .features .img_cont {
        width: 100%;
    }
    .features .img_cont img {
        width: 100%;
    }
    .tag1,
    .tag2,
    .tag3,
    .tag4,
    .tag5 {
        width: 80%;
        text-align: center;
        padding: 0 2rem;
        margin-bottom: 0.5rem;
    }
    .tag1 p,
    .tag2 p,
    .tag3 p,
    .tag4 p,
    .tag5 p {
        font-size: 2.5rem;
        line-height: 120%!important;
        text-align: center;
    }
    .bv1 .box,
    .bv2 .box,
    .bv3 .box,
    .bv4 .box,
    .bv5 .box {
        width: 100%;
        margin: 0 auto;
        text-align: left;
        flex-direction: column;
        background-color: rgba(255, 255, 255, 0.7);
        border-radius: 0.75rem;
    }
    .bv1 .sp-column,
    .bv2 .sp-column,
    .bv3 .sp-column,
    .bv4 .sp-column,
    .bv5 .sp-column {
        flex-direction: row;
    }
    .bv1 .box h2,
    .bv2 .box h2,
    .bv3 .box h2,
    .bv4 .box h2,
    .bv5 .box h2 {
        font-size: 3rem;
    }
    .bv1 .text_cont .pt,
    .bv2 .text_cont .pt,
    .bv3 .text_cont .pt,
    .bv4 .text_cont .pt,
    .bv5 .text_cont .pt {
        font-size: 0.9rem;
    }
    .bv1 .tb,
    .bv2 .tb,
    .bv3 .tb,
    .bv4 .tb,
    .bv5 .tb {
        flex-direction: column;
        margin-bottom: 0.5rem;
    }
    .bv1 .tb img,
    .bv2 .tb img,
    .bv3 .tb img,
    .bv4 .tb img,
    .bv5 .tb img {
        width: 40%;
        margin: 0.5rem auto;
    }
    .bv1 .pb,
    .bv2 .pb,
    .bv3 .pb,
    .bv4 .pb,
    .bv5 .pb {
        font-size: 1.05rem;
        margin: 0 auto;
    }
    .fv1 .img_cont,
    .fv2 .img_cont,
    .fv3 .img_cont,
    .fv4 .img_cont,
    .fv5 .img_cont {
        width: 50%;
        margin: 0 auto;
        text-align: center;
    }
    .bv1 .img_cont,
    .bv2 .img_cont,
    .bv3 .img_cont,
    .bv4 .img_cont,
    .bv5 .img_cont {
        width: 50%;
        margin: 0 auto;
        text-align: center;
    }
    .fv1 .img_cont img,
    .fv2 .img_cont img,
    .fv3 .img_cont img,
    .fv4 .img_cont img,
    .fv5 .img_cont img,
    .bv1 .img_cont img,
    .bv2 .img_cont img,
    .bv3 .img_cont img,
    .bv4 .img_cont img,
    .bv5 .img_cont img {
        margin: 1rem auto;
        width: 100%;
    }
    .footer_nav {
        width: 100%;
        margin: 0 auto;
        flex-direction: column;
    }
    .footer_nav li {
        margin: 0  0 1rem;
        font-size: 0.75rem;
    }
    .footer_nav a {
        font-size: 0.75rem;
    }
}
@media screen and (max-width: 480px) and (min-width: 376px) {
    header .content {
        width: 96%;
        margin: 0 auto;
    }
    header .logo {
        width: 30%;
    }
    header li img {
        width: 100%;
    }
    header .btn {
        width: 100%;
    }
    header .btn a {
        width: 100%;
        font-size: 0.85rem;
        padding: 1rem 1.5rem;
    }
    h1 {
        padding-top: 0!important;
        margin: 0 0 0.85em;
        font-size: 2.5rem;
    }
    h2 {
        font-size: 1.65rem;
        margin: 0 auto;
    }
    h3 {
        font-size: 1.05rem;
        margin: 0 auto;
    }
    .text_ml {
        font-size: 1rem;
    }
    .text_ll {
        font-size: 2rem;
        padding: 0.5rem;
    }
    .text_l {
        font-size: 1.1rem;
    }
    .text_s {
        font-size: 0.4rem;
    }
    .content {
        width: 90%;
        margin: 0 auto;
    }
    .flexible {
        width: 70%;
        margin: 0 auto;
    }
    .radius-l {
        border-radius: 70px;
        margin: 0 auto;
    }
    .padding-y4 {
        padding: 3rem 0;
    }
    .fv1,
    .bv1 {
        background: url("../img/bg_graphic_1_sp.svg") center center no-repeat;
        width: 100%;
        background-size: cover;
        padding: 1rem 0;
    }
    .fv2,
    .bv2 {
        background: url("../img/bg_graphic_2_sp.svg") center center no-repeat;
        width: 100%;
        background-size: cover;
        padding: 1rem 0;
    }
    .fv3,
    .bv3 {
        background: url("../img/bg_graphic_3_sp.svg") center center no-repeat;
        width: 100%;
        background-size: cover;
        padding: 1rem 0;
    }
    .fv4,
    .bv4 {
        background: url("../img/bg_graphic_4_sp.svg") center center no-repeat;
        width: 100%;
        background-size: cover;
        padding: 1rem 0;
    }
    .fv5,
    .bv5 {
        background: url("../img/bg_graphic_5_sp.svg") center center no-repeat;
        width: 100%;
        background-size: cover;
        padding: 1rem 0;
    }
    .fv1 .box,
    .fv2 .box,
    .fv3 .box,
    .fv4 .box,
    .fv5 .box {
        width: 100%;
        margin: 0 auto;
        flex-direction: column;
        background-color: rgba(255, 255, 255, 0.7); 
        border-radius: 0.75rem;
    }
    .fv1 .text_cont,
    .fv2 .text_cont,
    .fv3 .text_cont,
    .fv4 .text_cont,
    .fv5 .text_cont,
    .bv1 .text_cont,
    .bv2 .text_cont,
    .bv3 .text_cont,
    .bv4 .text_cont,
    .bv5 .text_cont {
        width: 100%;
        margin: 0 auto;
    }
    .fv1 li,
    .fv2 li,
    .fv3 li,
    .fv4 li,
    .fv5 li {
        margin: 0 0 1rem 0;
    }
    .fv1 li span,
    .fv2 li span,
    .fv3 li span,
    .fv4 li span,
    .fv5 li span {
        margin: 0 1rem 0 0;
    }
    .fv1 p,
    .fv2 p,
    .fv3 p,
    .fv4 p,
    .fv5 p {
        font-size: 1rem;
    }
    .btn {
        width: 100%;
    }
    .btn a {
        width: 100%;
        font-size: 1.25rem;
    }
    .btn a:hover {
        width: 100%;
        font-size: 1.25rem;
    }
    .problem .box {
        width: 94%;
        margin: 0 auto;
    }
    .problem .box .flex {
        flex-direction: column;
    }
    .problem .card {
        margin: 0 auto 1rem; 
        width: 90%;
        flex-direction: row;
        display: flex;
        align-items: center;
        text-align: left;
        padding: 1rem;
    }
    .problem .box .card-img {
        text-align: center;
        margin: 0 auto;
        width: 24%;
    }
    .problem .box .card-img img {
        text-align: center;
        margin: 0 auto;
        max-width:100%;
    }
    .problem .box .card-text {
        width: 76%;
    }
    .problem .box .card-text p {
        text-align: left;
        line-height: 140%;
        font-size: 0.75rem;
    }
    .problem h3 {
        margin: 0 auto;
        text-align: center;
        font-size: 1.35rem;
    }
    .problem .triangle {
        margin-top: 1rem;
    }
    .features {
        padding: 4rem 0 2em;
    }
    .features .box {
        flex-direction: column;
        width:90%; 
        margin: 0 auto 3rem;
    }
    .features .box h3 {
        font-size: 1.5rem;
        line-height: 140%;
        text-align: center;
    } 
    .features .text_cont {
        width: 100%;
    }
    .features .img_cont {
        width: 100%;
    }
    .features .img_cont img {
        width: 100%;
    }
    .tag1,
    .tag2,
    .tag3,
    .tag4,
    .tag5 {
        width: 80%;
        text-align: center;
        padding: 0 2rem;
        margin-bottom: 0.5rem;
    }
    .tag1 p,
    .tag2 p,
    .tag3 p,
    .tag4 p,
    .tag5 p {
        font-size: 2.5rem;
        line-height: 120%!important;
        text-align: center;
    }
    .bv1 .box,
    .bv2 .box,
    .bv3 .box,
    .bv4 .box,
    .bv5 .box {
        width: 100%;
        margin: 0 auto;
        text-align: left;
        flex-direction: column;
        background-color: rgba(255, 255, 255, 0.7); 
        border-radius: 0.75rem;
    }
    .bv1 .sp-column,
    .bv2 .sp-column,
    .bv3 .sp-column,
    .bv4 .sp-column,
    .bv5 .sp-column {
        flex-direction: row;
    }
    .bv1 .box h2,
    .bv2 .box h2,
    .bv3 .box h2,
    .bv4 .box h2,
    .bv5 .box h2 {    
        font-size: 2.5rem;
    }
    .bv1 .text_cont .pt,
    .bv2 .text_cont .pt,
    .bv3 .text_cont .pt,
    .bv4 .text_cont .pt,
    .bv5 .text_cont .pt {
        font-size: 0.9rem;
    }
    .bv1 .tb,
    .bv2 .tb,
    .bv3 .tb,
    .bv4 .tb,
    .bv5 .tb {
        flex-direction: column;
        margin-bottom: 0.5rem;
    }
    .bv1 .tb img,
    .bv2 .tb img,
    .bv3 .tb img,
    .bv4 .tb img,
    .bv5 .tb img  {
        width: 40%;
        margin: 0.5rem auto;
    }
    .bv1 .pb,
    .bv2 .pb,
    .bv3 .pb,
    .bv4 .pb,
    .bv5 .pb {  
        font-size: 1.05rem;
        margin: 0 auto;
    }
    .fv1.img_cont,
    .fv2 .img_cont,
    .fv3 .img_cont,
    .fv4 .img_cont,
    .fv5 .img_cont,
    .bv1 .img_cont,
    .bv2 .img_cont,
    .bv3 .img_cont,
    .bv4 .img_cont,
    .bv5 .img_cont {
        width: 70%;
        margin: 0 auto;
        text-align: center;
    }
    .fv1 .img_cont img,
    .fv2 .img_cont img,
    .fv3 .img_cont img,
    .fv4 .img_cont img,
    .fv5 .img_cont img,
    .bv1 .img_cont img,
    .bv2 .img_cont img,
    .bv3 .img_cont img,
    .bv4 .img_cont img,
    .bv5 .img_cont img {
        margin: 1rem auto;
        width: 100%;
    }
    .footer_nav {
        width: 100%;
        margin: 0 auto;
        flex-direction: column;
    }
    .footer_nav li {
        margin: 0  0 1rem;
        font-size: 0.75rem;
    }
    .footer_nav a {
        font-size: 0.75rem;
    }
}
@media screen and (max-width: 375px) {
    header .content {
        width: 96%;
        margin: 0 auto;
    }
    header .logo {
        width: 30%;
    }
    header li img {
        width: 100%;
    }
    header .btn {
        width: 100%;
    }
    header .btn a {
        width: 100%;
        font-size: 0.85rem;
        padding: 1rem 1.5rem;
    }
    h1 {
        padding-top: 0!important;
        margin: 0 0 0.85em;
        font-size: 2.5rem;
    }
    h2 {
        font-size: 1.65rem;
        margin: 0 auto;
    }
    h3 {
        font-size: 1.05rem;
        margin: 0 auto;
    }
    .text_ml {
        font-size: 1rem;
    }
    .text_ll {
        font-size: 2rem;
        padding: 0.5rem;
    }
    .text_l {
        font-size: 1.1rem;
    }
    .text_s {
        font-size: 0.4rem;
    }
    .content {
        width: 90%;
        margin: 0 auto;
    }
    .flexible {
        width: 80%;
        margin: 0 auto;
    }
    .radius-l {
        border-radius: 70px;
        margin: 0 auto;
    }
    .padding-y4 {
        padding: 3rem 0;
    }
    .fv1,
    .bv1 {
        background: url("../img/bg_graphic_1_sp.svg") center center no-repeat;
        width: 100%;
        background-size: cover;
        padding: 1rem 0;
    }
    .fv2,
    .bv2 {
        background: url("../img/bg_graphic_2_sp.svg") center center no-repeat;
        width: 100%;
        background-size: cover;
        padding: 1rem 0;
    }
    .fv3,
    .bv3 {
        background: url("../img/bg_graphic_3_sp.svg") center center no-repeat;
        width: 100%;
        background-size: cover;
        padding: 1rem 0;
    }
    .fv4,
    .bv4 {
        background: url("../img/bg_graphic_4_sp.svg") center center no-repeat;
        width: 100%;
        background-size: cover;
        padding: 1rem 0;
    }
    .fv5,
    .bv5 {
        background: url("../img/bg_graphic_5_sp.svg") center center no-repeat;
        width: 100%;
        background-size: cover;
        padding: 1rem 0;
    }
    .fv1 .box,
    .fv2 .box,
    .fv3 .box,
    .fv4 .box,
    .fv5 .box {
        width: 100%;
        margin: 0 auto;
        flex-direction: column;
        background-color: rgba(255, 255, 255, 0.7); 
        border-radius: 0.75rem;
    }
    .fv1 .text_cont,
    .fv2 .text_cont,
    .fv3 .text_cont,
    .fv4 .text_cont,
    .fv5 .text_cont,
    .bv1 .text_cont,
    .bv2 .text_cont,
    .bv3 .text_cont,
    .bv4 .text_cont,
    .bv5 .text_cont {
        width: 100%;
        margin: 0 auto;
    }
    .fv1 li,
    .fv2 li,
    .fv3 li,
    .fv4 li,
    .fv5 li {
        margin: 0 0 1rem 0;
    }
    .fv1 li span,
    .fv2 li span,
    .fv3 li span,
    .fv4 li span,
    .fv5 li span {
        margin: 0 1rem 0 0;
    }
    .fv1 p,
    .fv2 p,
    .fv3 p,
    .fv4 p,
    .fv5 p {
        font-size: 0.8rem;
    }
    .btn {
        width: 100%;
    }
    .btn a {
        width: 100%;
        font-size: 1.25rem;
    }
    .btn a:hover {
        width: 100%;
        font-size: 1.25rem;
    }
    .problem .box {
        width: 94%;
        margin: 0 auto;
    }
    .problem .box .flex {
        flex-direction: column;
    }
    .problem .card {
        margin: 0 auto 1rem; 
        width: 90%;
        flex-direction: row;
        display: flex;
        align-items: center;
        text-align: left;
        padding: 1rem;
    }
    .problem .box .card-img {
        text-align: center;
        margin: 0 auto;
        width: 24%;
    }
    .problem .box .card-img img {
        text-align: center;
        margin: 0 auto;
        max-width:100%;
    }
    .problem .box .card-text {
        width: 76%;
    }
    .problem .box .card-text p {
        text-align: left;
        line-height: 140%;
        font-size: 0.75rem;
    }
    .problem h3 {
        margin: 0 auto;
        text-align: center;
        font-size: 1.35rem;
    }
    .problem .triangle {
        margin-top: 1rem;
    }
    .features {
        padding: 4rem 0 2em;
    }
    .features .box {
        flex-direction: column;
        width:90%; 
        margin: 0 auto 3rem;
    }
    .features .box h3 {
        font-size: 1.5rem;
        line-height: 140%;
        text-align: center;
    } 
    .features .text_cont {
        width: 100%;
    }
    .features .img_cont {
        width: 100%;
    }
    .features .img_cont img {
        width: 100%;
    }
    .tag1,
    .tag2,
    .tag3,
    .tag4,
    .tag5 {
        width: 80%;
        text-align: center;
        padding: 0 2rem;
        margin-bottom: 0.5rem;
    }
    .tag1 p,
    .tag2 p,
    .tag3 p,
    .tag4 p,
    .tag5 p {
        font-size: 2.5rem;
        line-height: 120%!important;
        text-align: center;
    }
    .bv1 .box,
    .bv2 .box,
    .bv3 .box,
    .bv4 .box,
    .bv5 .box {
        width: 100%;
        margin: 0 auto;
        text-align: left;
        flex-direction: column;
        background-color: rgba(255, 255, 255, 0.7); 
        border-radius: 0.75rem;
    }
    .bv1 .sp-column,
    .bv2 .sp-column,
    .bv3 .sp-column,
    .bv4 .sp-column,
    .bv5 .sp-column {
        flex-direction: row;
    }
    .bv1 .box h2,
    .bv2 .box h2,
    .bv3 .box h2,
    .bv4 .box h2,
    .bv5 .box h2 {    
        font-size: 2.5rem;
    }
    .bv1 .text_cont .pt,
    .bv2 .text_cont .pt,
    .bv3 .text_cont .pt,
    .bv4 .text_cont .pt,
    .bv5 .text_cont .pt {
        font-size: 0.9rem;
    }
    .bv1 .tb,
    .bv2 .tb,
    .bv3 .tb,
    .bv4 .tb,
    .bv5 .tb {
        flex-direction: column;
        margin-bottom: 0.5rem;
    }
    .bv1 .tb img,
    .bv2 .tb img,
    .bv3 .tb img,
    .bv4 .tb img,
    .bv5 .tb img {
        width: 40%;
        margin: 0.5rem auto;
    }
    .bv1 .pb,
    .bv2 .pb,
    .bv3 .pb,
    .bv4 .pb,
    .bv5 .pb {  
        font-size: 1.05rem;
        margin: 0 auto;
    }
    .fv1 .img_cont,
    .fv2 .img_cont,
    .fv3 .img_cont,
    .fv4 .img_cont,
    .fv5 .img_cont,
    .bv1 .img_cont,
    .bv2 .img_cont,
    .bv3 .img_cont,
    .bv4 .img_cont,
    .bv5 .img_cont {
        width: 60%;
        margin: 0 auto;
        text-align: center;
    }
    .fv1 .img_cont img,
    .fv2 .img_cont img,
    .fv3 .img_cont img,
    .fv4 .img_cont img,
    .fv5 .img_cont img,
    .bv1 .img_cont img,
    .bv2 .img_cont img,
    .bv3 .img_cont img,
    .bv4 .img_cont img,
    .bv5 .img_cont img {
        margin: 1rem auto;
        width: 100%;
    }
    .footer_nav {
        width: 100%;
        margin: 0 auto;
        flex-direction: column;
    }
    .footer_nav li {
        margin: 0  0 1rem;
        font-size: 0.75rem;
    }
    .footer_nav a {
        font-size: 0.75rem;
    }
}