@charset "UTF-8";
/* ========================================
  @media screen and (min-width: 768px), print
======================================== */
@media screen and (min-width: 768px),print {
#benefits {
    max-width: 1920px;
    width: 100%;
    margin-inline: auto;
}
#benefits main {
    background: url(../images/page-common/com-bg.png)repeat;
    background-size: contain;
}
#benefits .seo_bread_list {color: #FFFFFF;position: relative;z-index: 2;margin-bottom: -91px;}
#benefits .seo_bread_list span,
#benefits .seo_bread_list a {
    color: #FFFFFF;
}

/* mv
-------------------------------------*/
.mv {
    padding-block: 0 92px;
}
.mv .photo {padding-block: 0 54px;}
.mv .photo img {
    width: 100%;
    height: auto;
}
.mv .enttl {
    text-align: center;
    margin-bottom: -37px;
}
.mv .list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    width: min(95%, 960px);
    margin-inline: auto;
    margin-bottom: 31px;
}
.mv .list li {
    background: url(../images/benefits/mv-fukidashi.svg)no-repeat;
    background-size: contain;
    font-weight: 500;
    font-size: 30px;
    text-align: center;
    display: grid;
    place-items: center;
    padding-block: 9px 28px;
}
.mv .lead {
    font-weight: 500;
    font-size: 33px;
    text-align: center;
    color: #fff;
}

/* point
-------------------------------------*/
.point {
    padding-block: 0 160px;
}
.point .upper{
    background: #FFFFFF;
    position: relative;
}
.point .upper .inner {
    width: min(95%, 1100px);
    margin-inline: auto;
    position: relative;
    padding-block: 100px 51px;
}
.point .upper .label {
    position: absolute;
    top: -34px;
    left: 0;
}
.point .upper .ttl {
    font-weight: bold;
    font-size: 26px;
    letter-spacing: 0.05em;
    line-height: 1.384615;
    text-align: center;
    margin-bottom: 34px;
}
.point .upper .lead {
    font-size: 20px;
    letter-spacing: 0.05em;
    line-height: 2.2;
    text-align: center;
    margin-bottom: 81px;
}
.point .upper .btn {
    width: min(95%, 640px);
    margin-inline: auto;
    position: absolute;
    z-index: 2;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
}
.point .upper .btn a {
    display: block;
    background: #F0596D;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.05em;
    line-height: 1.625;
    text-align: center;
    color: #fff;
    padding-block: 28px;
    position: relative;
    border-radius: 200px;
}
.point .upper .btn a::after {
    position: absolute;
    content: "";
    background: url(../images/common/btn-arrow.svg)no-repeat center center;
    background-size: contain;
    width: 10px;
    height: 7px;
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
}
.point .list {
    display: grid;
    gap: 100px;
    width: min(95%, 1060px);
    margin-inline: auto;
    padding-block: 180px 0;
    position: relative;
}
.point .list li {
    display: grid;
    grid-template-columns: 47.645% 1fr;
    gap: 50px;
    position: relative;
}
.point .list li:nth-child(6) {
    grid-template-columns: 47.645% 51%;
}
.point .list li:nth-child(4)::after {
    position: absolute;
    content: "";
    background: url(../images/benefits/point-wow.svg)no-repeat;
    background-size: contain;
    width: 110px;
    height: 110px;
    top: -54px;
    right: -70px;
}
.point .list li:nth-child(7)::after {
    position: absolute;
    content: "";
    background: url(../images/benefits/point-klg.svg)no-repeat;
    background-size: contain;
    width: 110px;
    height: 110px;
    top: -47px;
    right: 108px;
}
.point .list li .ttl {
    font-weight: bold;
    font-size: 42px;
    color: #fff;
    display: flex;
    gap: 22px;
    align-items: baseline;
    padding-left: 5px;
    margin-bottom: 10px;
}
.point .list li .ttl span img {
    vertical-align: baseline;
}
.point .list li .txt {
    font-size: 16px;
    letter-spacing: 0.05em;
    line-height: 2;
    color: #fff;  
    width: 505px;
}

/* link-sec
-------------------------------------*/
.link-sec {
    background: url(../images/page-common/link-sec-bg.jpg)no-repeat center;
    background-size: cover;
    padding-block: 180px 135px;
}
.link-sec .ttl {
    font-weight: bold;
    font-size: 30px;
    text-align: center;
    color: #fff;
    margin-bottom: 70px;
}
.link-sec .bnr-item {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 80px;
    width: min(95%, 1100px);
    margin-inline: auto;
}

}

/* ========================================
@media screen and (min-width:768px) and (max-width:1240px)
======================================== */
@media screen and (min-width:768px) and (max-width:1240px) {
.mv .enttl img {
    width: 94.27vw;
}
.mv .list {
    gap: 2.419vw;
    width:77.42vw;
    margin-bottom: 2.5vw;
}
.mv .list li {
    font-size: 2.419vw;
    padding-block: 0.726vw 2.258vw;
}
.point .upper .lead {
    font-size: clamp(1.125rem, 0.922rem + 0.42vw, 1.25rem);
}
.point .list li .photo img {
    width: 100%;
    height: auto;
}
.point .list li .txt {
    width: fit-content;
}
.point .list li:nth-child(6) {
    grid-template-columns: 47.645% 1fr;
}
.point .list li:nth-child(4)::after {
    position: absolute;
    content: "";
    background: url(../images/benefits/point-wow.svg)no-repeat;
    background-size: contain;
    width: 6.871vw;
    height: 6.871vw;
    top: -4.355vw;
    right: -1.645vw;
}
.point .list li:nth-child(7)::after {
    position: absolute;
    content: "";
    background: url(../images/benefits/point-klg.svg)no-repeat;
    background-size: contain;
    width: 6.871vw;
    height: 6.871vw;
    top: -3.79vw;
    right: 2.71vw;
}
.link-sec .bnr-item li img {
    width: 100%;
    height: auto;
}
}

/* ========================================
  @media screen and (max-width: 767px) 
======================================== */
@media screen and (max-width: 767px) {
#benefits main {
    background: url(../images/page-common/com-bg.png)repeat;
    background-size: contain;
}
#benefits .seo_bread_list {color: #FFFFFF;position: relative;z-index: 2;margin-bottom: -12vw;padding: 3vw 0vw 3.5vw;}
#benefits .seo_bread_list span,
#benefits .seo_bread_list a {
    color: #FFFFFF;
}

/* mv
-------------------------------------*/
.mv {
    padding-block: 0 23.15vw;
}
.mv .photo {padding-block: 0 10.2vw;}
.mv .photo img {
    width: 100%;
    height: auto;
}
.mv .enttl {
    text-align: center;
    margin-bottom: 5vw;
}
.mv .list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.21vw;
    width: 88.89vw;
    margin-inline: auto;
    margin-bottom: 4.35vw;
}
.mv .list li {
    background: url(../images/benefits/mv-fukidashi_sp.svg)no-repeat;
    background-size: contain;
    font-weight: 500;
    font-size:3.382vw;
    text-align: center;
    display: grid;
    place-items: center;
    padding-block: 2.46vw 4.29vw;
}
.mv .lead {
    font-weight: 500;
    font-size:4.589vw;
    text-align: center;
    color: #fff;
}
    
/* point
-------------------------------------*/
.point {
    padding-block: 0 17.32vw;
}
.point .upper{
    background: #FFFFFF;
    position: relative;
}
.point .upper .inner {
    width: 82.13vw;
    margin-inline: auto;
    position: relative;
    padding-block: 22.21vw 24.12vw;
}
.point .upper .label {
    position: absolute;
    top: -11.51vw;
    left: -5vw;
}
.point .upper .label img {
    width: 27.54vw;
}
.point .upper .ttl {
    font-weight: bold;
    font-size:4.831vw;
    letter-spacing: 0.05em;
    line-height: 1.8;
    margin-bottom: 5.25vw;
}
.point .upper .lead {
    font-size:3.865vw;
    letter-spacing: 0.05em;
    line-height: 2;
}
.point .upper .btn {
    width: 82.13vw;
    margin-inline: auto;
    position: absolute;
    z-index: 2;
    bottom: -7.25vw;
    left: 50%;
    transform: translateX(-50%);
}
.point .upper .btn a {
    display: block;
    background: #F0596D;
    font-weight: 500;
    font-size:3.382vw;
    letter-spacing: 0.05em;
    line-height: 1.85714;
    text-align: center;
    color: #fff;
    padding-block: 4.13vw;
    position: relative;
    border-radius: 5.9vw;
}
.point .upper .btn a::after {
    content: "";
    display: block;
    width: 2.42vw;
    height: 1.69vw;
    background: url(../images/common/btn-arrow.svg)no-repeat center center;
    background-size: contain;
    position: absolute;
    top: 50%;
    right: 7.21vw;
    transform: translateY(-50%);
}
.point .list {
    display: grid;
    gap: 12.49vw;
    width: 82.13vw;
    margin-inline: auto;
    padding-block: 29.47vw 0;
    position: relative;
}
.point .list li {
    display: grid;
    position: relative;
}
.point .list li:nth-child(4)::after {
    position: absolute;
    content: "";
    background: url(../images/benefits/point-wow.svg)no-repeat;
    background-size: contain;
    width: 18.12vw;
    height: 18.12vw;
    top: 4.26vw;
    right: 0;
}
.point .list li:nth-child(7)::after {
    position: absolute;
    content: "";
    background: url(../images/benefits/point-klg.svg)no-repeat;
    background-size: contain;
    width: 18.12vw;
    height: 18.12vw;
    top: -7.35vw;
    right: 0;
}
.point .list li .txt-box {
    display: contents;
}
.point .list li .ttl {
    font-weight: bold;
    font-size:7.729vw;
    color: #fff;
    display: flex;
    gap: 3.86vw;
    align-items: baseline;
    margin-bottom: 3.83vw;
    order: 1;
    padding-left: 0.5vw;
}
.point .list li:nth-child(6) .ttl {
    gap: 3vw;
    width: max-content;
    padding: 0;
}
.point .list li .ttl span img {
    vertical-align: baseline;
}
.point .list li .txt {
    font-size:3.382vw;
    letter-spacing: 0.05em;
    line-height: 2.142857;
    color: #fff;  
    order: 3;
}
.point .list li .photo {
    order: 2;
    margin-bottom: 3.83vw;
}

/* link-sec
-------------------------------------*/
.link-sec {
    background: url(../images/page-common/link-sec-bg_sp.jpg)no-repeat;
    background-size: cover;
    padding-block: 24.15vw 22.22vw;
}
.link-sec .ttl {
    font-weight: bold;
    font-size:4.831vw;
    text-align: center;
    color: #fff;
    margin-bottom: 9.66vw;
}
.link-sec .bnr-item {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 4.83vw;
    width: 67.63vw;
    margin-inline: auto;
}
}