@charset "UTF-8";

/* 仕事の基本を知る */

.about-dlp-block {
    margin-bottom: 80px;
}
.about-dlp-block h2 {
    text-align: center;
    font-size: 1.6rem;
    padding-top: 80px;
    margin-bottom: 20px;
    position: relative;
}
.about-dlp-block h2:before {
    width: 64px;
    height: 64px;
    background-image: url(../img/common_img/point-icon.svg);
    left: 50%;
    transform: translateX(-50%);
    top: 0;
}
.our-needs .hero-txt01 {
    position: relative;
    margin-bottom: 50px;
}
.our-needs .hero-txt01 span {
    position: relative;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
    background: #1E3190;
    border-radius: 100px;
    color: #FFF;
    font-size: 1.3rem;
    padding: 4px 20px;
}
.concerns-block {
    position: relative;
}
.concerns-block .figure01 {
    position: absolute;
    width: 350px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}
.concerns-block ul {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    top: 80px;
    padding-bottom: 100px;
}
.concerns-block ul li {
    position: relative;
    width: calc(50% - 150px);
    padding: 10px 10px;
    text-align: center;
    background: #fff;
    filter: drop-shadow(0px 0px 6px rgba(82, 75, 48, 0.2));
    border-radius: 20px;
    margin-bottom: 20px;
}
.concerns-block ul li:nth-child(1) {
   margin-right: 150px; 
}
.concerns-block ul li:nth-child(2) {
    margin-left: 150px; 
}
.concerns-block ul li:nth-child(3) {
   margin-right: 150px; 
}
.concerns-block ul li:nth-child(4) {
    margin-left: 150px; 
}
.concerns-block ul li:nth-child(5) {
    width: calc(50% - 100px);
    margin-left: 0; 
}
.concerns-block ul li p {
    text-align: center;
    color: #606060;
    line-height: 1.6em;
    font-size: min(1.2vw,1rem);
}
.conj-style01 {
    text-align: center;
    font-size: 1.4rem;
    padding-bottom: 100px;
    position: relative;
    margin-bottom: 30px;
}
.conj-style01 span {
    font-size: 1.4rem;
    color: #E26A6A;
}
.conj-style01::after {
    width: 50px;
    height: 80px;
    background-image: url(../img/common_img/about-arrow.svg);
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
}
.about-dlp-block .figure02 {
    width: 100%;
    max-width: 900px;
    margin: 0 auto 30px;
}
.conj-style02 {
    text-align: center;
    font-size: 1.2rem;
    position: relative;
}
.conj-style02 span {
    font-size: 1.6rem;
    color: #E26A6A;
}
.about-dlp-block .hero-txt02 {
    text-align: center;
    font-size: 2rem;
    line-height: 1.6em;
}
.about-dlp-block .figure03 {
    width: 100%;
    max-width: 730px;
    margin: 30px auto 30px;
}
.about-dlp-block .conclusion-txt {
    text-align: center;
    font-size: 1.1rem;
}
@media screen and (max-width: 834px) {
   .about-dlp-block {
        margin-bottom: 50px;
    }
    .about-dlp-block h2 {
        text-align: center;
        font-size: 1.1rem;
        padding-top: 40px;
        margin-bottom: 20px;
        position: relative;
    }
    .about-dlp-block h2:before {
        width: 34px;
        height: 34px;
        background-image: url(../img/common_img/point-icon.svg);
        left: 50%;
        transform: translateX(-50%);
        top: 0;
    }
    .our-needs .hero-txt01 {
        position: relative;
        margin-bottom: 30px;
    }
    .our-needs .hero-txt01 span {
        position: relative;
        display: inline-block;
        left: 50%;
        transform: translateX(-50%);
        background: #1E3190;
        border-radius: 100px;
        line-height: 1.4em;
        color: #FFF;
        font-size: 0.9rem;
        padding: 10px 30px;
    }
    .concerns-block {
        position: relative;
    }
    .concerns-block .figure01 {
        position: relative;
        width: 300px;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    .concerns-block ul {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        top: 20px;
        padding-bottom: 40px;
        width: 90%;
        left: 50%;
        transform: translateX(-50%);
    }
    .concerns-block ul li {
        position: relative;
        width: 100%;
        padding: 10px 10px;
        text-align: center;
        background: #fff;
        filter: drop-shadow(0px 0px 6px rgba(82, 75, 48, 0.2));
        border-radius: 20px;
        margin-bottom: 10px;
    }
    .concerns-block ul li:nth-child(1) {
        margin-right: 0; 
    }
    .concerns-block ul li:nth-child(2) {
        margin-left: 0; 
    }
    .concerns-block ul li:nth-child(3) {
        margin-right: 0; 
    }
    .concerns-block ul li:nth-child(4) {
        margin-left: 0; 
    }
    .concerns-block ul li:nth-child(5) {
        width: 100%;
        margin-left: 0; 
    }
    .concerns-block ul li p {
        text-align: center;
        color: #606060;
        line-height: 1.6em;
        font-size: min(3vw,0.9rem);
    }
    .conj-style01 {
        text-align: center;
        font-size: 1rem;
        padding-bottom: 100px;
        position: relative;
        margin-bottom: 30px;
    }
    .conj-style01 span {
        font-size: 1.2rem;
        color: #E26A6A;
    }
    .conj-style01::after {
        width: 50px;
        height: 80px;
        background-image: url(../img/common_img/about-arrow.svg);
        left: 50%;
        transform: translateX(-50%);
        bottom: 0;
    }
    .about-dlp-block .figure02 {
        width: 100%;
        max-width: 500px;
        margin: 0 auto 30px;
        overflow: hidden;
    }
    .about-dlp-block .figure02 img {
        width: 140%;
        left: -40%;
        position: relative;;
    }
    .conj-style02 {
        text-align: center;
        font-size: min(3.5vw,1rem);
        position: relative;
    }
    .conj-style02 span {
        font-size: min(4.5vw,1.6rem);
        color: #E26A6A;
    }
    .about-dlp-block .hero-txt02 {
        text-align: center;
        font-size: 1.2rem;
        line-height: 1.6em;
    }
    .about-dlp-block .figure03 {
        width: 100%;
        max-width: 730px;
        margin: 30px auto 30px;
    }
    .about-dlp-block .conclusion-txt {
        text-align: center;
        font-size: 0.9rem;
    }
}



.introduction-txt {
    text-align: center;
    font-size: 1.2rem;
    padding: 30px 0 60px;
}
@media screen and (max-width: 834px) {
    .introduction-txt {
        text-align: center;
        font-size: 0.9rem;
        padding: 0 0 40px;
    }
}
.efforts-index {
    position: relative;
    margin: 0 auto 80px;
}
.efforts-index li {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 40px;
}
.efforts-index li .bg {
    width: 47%;
}
.efforts-index li .banner-ttl {
    width: 47%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.efforts-index li:nth-child(even) .bg {
    order: 2;
}
.efforts-index li:nth-child(even) .banner-ttl {
    order: 1;
}
.efforts-index li .banner-ttl p {
    font-size: 1.3rem;
    position: relative;
    padding: 20px 0;
    text-align: center;
    width: 100%;
    margin: 0 auto;
}
.efforts-index li .banner-ttl p:before {
    width: 30px;
    height: 30px;
    background-image: url(../img/common_img/bracket-left.svg);
    left: 0;
    top: 0;
    transition: all .5s;
}
.efforts-index li .banner-ttl p:after {
    width: 30px;
    height: 30px;
    background-image: url(../img/common_img/bracket-right.svg);
    right: 0;
    bottom: 0;
    transition: all .5s;
}

@media (hover: hover) {
    .efforts-index li:hover .banner-ttl p:before {
        left: 20px;
        top: 5px;
    }
    .efforts-index li:hover .banner-ttl p:after {
        right: 20px;
        bottom: 5px;
    }
}

@media screen and (max-width: 834px) {
    .efforts-index {
        position: relative;
        margin: 0 auto 40px;
    }
    .efforts-index li {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-bottom: 30px;
    }
    .efforts-index li .bg {
        width: 100%;
        order: 2;
    }
    .efforts-index li .banner-ttl {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        order: 1;
        margin-bottom: 10px;
    }
    .efforts-index li:nth-child(even) .bg {
        order: 2;
    }
    .efforts-index li:nth-child(even) .banner-ttl {
        order: 1;
    }
    .efforts-index li .banner-ttl p {
        font-size: 1.1rem;
        position: relative;
        padding: 10px 0;
        text-align: center;
        width: 90%;
        margin: 0 auto;
    }
    .efforts-index li .banner-ttl p:before {
        width: 20px;
        height: 20px;
        background-image: url(../img/common_img/bracket-left.svg);
        left: 0;
        top: 0;
        transition: all .5s;
    }
    .efforts-index li .banner-ttl p:after {
        width: 20px;
        height: 20px;
        background-image: url(../img/common_img/bracket-right.svg);
        right: 0;
        bottom: 0;
        transition: all .5s;
    }
}




.work-detail-ttl {
    font-size: 2rem;
    position: relative;
    padding: 20px 0;
    text-align: center;
    width: 100%;
    max-width: 736px;
    margin: 0 auto;
}
.work-detail-ttl:before {
    width: 30px;
    height: 30px;
    background-image: url(../img/common_img/bracket-left.svg);
    left: 0;
    top: 0;
    transition: all .5s;
}
.work-detail-ttl:after {
    width: 30px;
    height: 30px;
    background-image: url(../img/common_img/bracket-right.svg);
    right: 0;
    bottom: 0;
    transition: all .5s;
}
.section-explanation {
    padding-bottom: 80px;
}
.section-explanation h3 {
    border-bottom: solid 4px #F5F2DA;
    padding-left: 110px;
    height: 130px;
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 40px;
}
.section-explanation h3::before {
    width: 90px;
    height: 90px;
    background-image: url(../img/work_img/icon-explanation.png);
    left: 0;
}
.section-explanation h3 span {
     font-size: 1.5rem;
}
.explanation-case {
    padding: 0;
}
.case-ttl {
    text-align: center;
    font-size: 1.2rem;
    color: var(--main-color);
}
.case-txt {
    text-align: center;
    color: var(--main-color);
}
.case-family {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px 1.5%;
    margin-bottom: 50px;
}
.case-family li {
    width: 18.8%;
    display: flex;
    flex-direction: column;
}
.case-family li .member-txt {
    background: #F5F2DA;
    border-radius: 10px;
    flex: 1;
    margin: 15px 0 0;
    padding: 20px;
}
.case-family li:last-child .member-txt {
    background: #DCEDED;
}
.case-family li .member-txt .member-relation {
    text-align: center;
    font-size: 1.1rem;
}
.case-family li .member-txt .member-profile {
    text-align: center;
    font-size: 0.8rem;
    line-height: 1.6em;
}
.step-txt {
    position: relative;
    width: 100%;
}
.step-txt span {
    display: inline-block;
    text-align: center;
    position: relative;
    font-size: 1.2rem;
    background: #F5F2DA;
    padding: 10px 30px;
    left: 50%;
    transform: translateX(-50%);
    line-height: 1.6em;
    border-radius: 10px;
}
.note-image {
    width: 90%;
    margin: 30px auto 0;
}
.note-image.with-arrow {
    padding-bottom: 160px;
    position: relative;
}
.note-image.with-arrow::after {
    width: 50px;
    height: 80px;
    background-image: url(../img/common_img/about-arrow.svg);
    left: 50%;
    transform: translateX(-50%);
    bottom: 40px;
}
.plan-note {
    padding: 30px 0 0;
    font-size: 1.14rem;
}
.section-point {
    position: relative;
    margin-bottom: 100px;
    padding-bottom: 50px;
}
.section-point h3 {
    border-bottom: solid 4px #F5F2DA;
    padding-left: 110px;
    height: 130px;
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 40px;
}
.section-point h3::before {
    width: 90px;
    height: 90px;
    background-image: url(../img/work_img/icon-point-finger.png);
    left: 0;
}
.section-point h3 span {
     font-size: 1.5rem;
}
.section-point:before {
    width: 100%;
    height: calc(100% - 250px);
    background: #F5F2DA;
    z-index: -1;
    bottom: 0;
    left: 0;
}
.section-point-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 90%;
    max-width: 900px;
    margin: 0 auto 40px;
}
.section-point-list li {
    width: 48%;
    background: #fff;
    filter: drop-shadow(0px 0px 6px rgba(82, 75, 48, 0.2));
    border-radius: 10px;
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.section-point-list li p {
    text-align: center;
    font-size: 1.1rem;
    color: var(--main-color);
}
.section-point-note {
    text-align: center;
    font-size: 1.2rem;
}

@media screen and (max-width: 834px) {
    .work-detail-ttl {
        font-size: 1.4rem;
        position: relative;
        padding: 10px 0;
        text-align: center;
        width: 90%;
        max-width: 600px;
        margin: 0 auto 20px;
    }
    .work-detail-ttl:before {
        width: 20px;
        height: 20px;
        background-image: url(../img/common_img/bracket-left.svg);
        left: 0;
        top: 0;
        transition: all .5s;
    }
    .work-detail-ttl:after {
        width: 20px;
        height: 20px;
        background-image: url(../img/common_img/bracket-right.svg);
        right: 0;
        bottom: 0;
        transition: all .5s;
    }
    .section-explanation {
        padding-bottom: 80px;
    }
    .section-explanation h3 {
        border-bottom: solid 3px #F5F2DA;
        padding-left: 60px;
        height: 70px;
        display: flex;
        align-items: center;
        position: relative;
        margin-bottom: 30px;
    }
    .section-explanation h3::before {
        width: 50px;
        height: 50px;
        background-image: url(../img/work_img/icon-explanation.png);
        left: 0;
    }
    .section-explanation h3 span {
        font-size: 1.1rem;
        line-height: 1.4em;
    }
    .explanation-case {
        padding: 0;
    }
    .case-ttl {
        text-align: center;
        font-size: 1rem;
        color: var(--main-color);
    }
    .case-txt {
        text-align: center;
        color: var(--main-color);
    }
    .case-family {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px 1.5%;
        max-width: 460px;
        margin: 30px auto 60px;
    }
    .case-family li {
        width: 48%;
        display: flex;
        flex-direction: column;
        text-align: center;
    }
    .case-family li img {
        width: 50%;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
     }
    .case-family li .member-txt {
        background: #F5F2DA;
        border-radius: 10px;
        flex: 1;
        margin: 10px 0 0;
        padding: 10px;
    }
    .case-family li:last-child .member-txt {
        background: #DCEDED;
    }
    .case-family li .member-txt .member-relation {
        text-align: center;
        font-size: 1rem;
    }
    .case-family li .member-txt .member-profile {
        text-align: center;
        font-size: 0.8rem;
        line-height: 1.6em;
    }
    .step-txt {
        position: relative;
        width: 100%;
    }
    .step-txt span {
        display: inline-block;
        text-align: center;
        position: relative;
        font-size: 1rem;
        background: #F5F2DA;
        padding: 10px 20px;
        left: 50%;
        transform: translateX(-50%);
        line-height: 1.6em;
        border-radius: 10px;
    }
    .note-image {
        width: 100%;
        margin: 30px auto 0;
    }
    .note-image.with-arrow {
        padding-bottom: 100px;
        position: relative;
    }
    .note-image.with-arrow::after {
        width: 30px;
        height: 50px;
        background-image: url(../img/common_img/about-arrow.svg);
        left: 50%;
        transform: translateX(-50%);
        bottom: 20px;
    }
    .plan-note {
        padding: 30px 0 0;
        font-size: 0.9rem;
    }
    .section-point {
        position: relative;
        margin-bottom: 100px;
        padding-bottom: 50px;
    }
    .section-point h3 {
        border-bottom: solid 3px #F5F2DA;
        padding-left: 60px;
        height: 70px;
        display: flex;
        align-items: center;
        position: relative;
        margin-bottom: 40px;
    }
    .section-point h3::before {
        width: 50px;
        height: 50px;
        background-image: url(../img/work_img/icon-point-finger.png);
        left: 0;
    }
    .section-point h3 span {
        font-size: 1.1rem;
        line-height: 1.4em;
    }
    .section-point:before {
        width: 100%;
        height: calc(100% - 200px);
        background: #F5F2DA;
        z-index: -1;
        bottom: 0;
        left: 0;
    }
    .section-point-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 90%;
        max-width: 900px;
        margin: 0 auto 10px;
    }
    .section-point-list li {
        width: 100%;
        background: #fff;
        filter: drop-shadow(0px 0px 6px rgba(82, 75, 48, 0.2));
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 20px;
    }
    .section-point-list li p {
        text-align: center;
        font-size: 1rem;
        color: var(--main-color);
    }
    .section-point-note {
        text-align: center;
        font-size: min(4vw,1rem);
    }
}


.work-shared-links {
    background: #F5F2DA;
    padding: 80px 0;   
}
.work-shared-links .ttl {
    text-align: center;
    font-size: 1.3rem;
    margin-bottom: 20px;
}
.work-shared-links ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 15px 3%;
}
.work-shared-links ul li {
    width: 31.33%;
    padding: 10px 0;
    text-align: center;
}
.work-shared-links ul li p {
    position: relative;
}
.work-shared-links ul li p:after {
    width: 14px;
    height: 14px;
    background-image: url(../img/common_img/link-arrow.svg);
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
}
@media (max-width: 834px) {
    .work-shared-links {
        background: #F5F2DA;
        padding: 40px 0;   
    }
    .work-shared-links .ttl {
        text-align: center;
        font-size: 1rem;
        margin-bottom: 20px;
    }
    .work-shared-links ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px 4%;
    }
    .work-shared-links ul li {
        width: 48%;
        padding: 10px 0;
        text-align: center;
    }
    .work-shared-links ul li p {
        position: relative;
        font-size: 0.7rem;
    }
    .work-shared-links ul li p:after {
        width: 14px;
        height: 14px;
        background-image: url(../img/common_img/link-arrow.svg);
        right: 0px;
        top: 50%;
        transform: translateY(-50%);
    }
}



.section-explanation h4 {
    position: relative;
}
.section-explanation h4 span {
    display: inline-block;
    text-align: center;
    position: relative;
    font-size: 1.1rem;
    background: #F5F2DA;
    padding: 10px 20px;
    left: 50%;
    transform: translateX(-50%);
    line-height: 1.6em;
    border-radius: 10px;
}
.base-picks-wrap {
    position: relative;
}
.base-picks {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 50px auto 80px;
}
.base-picks .txt {
    width: 48%;
}
.base-picks .image {
    width: 48%;
    border-radius: 12px;
    overflow: hidden;
}
.base-picks:nth-of-type(odd) .txt {
    order: 2;
}
.base-picks:nth-of-type(odd) .image {
    order: 1;
}
.base-picks .txt .ttl {
    position: relative;
    margin-bottom: 30px;
    font-size: 1.4rem;
    top: 20px;
}
.base-picks .txt .ttl span {
    display: inline-block;
    padding: 5px 0;
    margin-right: 20px;
    width: 220px;
    font-size: 2rem;
    text-align: center;
    position: relative;
    top: -20px;
}
.base-picks .txt .ttl span:before {
    width: 30px;
    height: 30px;
    background-image: url(../img/common_img/bracket-left.svg);
    left: 0;
    top: 0;
    transition: all .5s;
}
.base-picks .txt .ttl span:after {
    width: 30px;
    height: 30px;
    background-image: url(../img/common_img/bracket-right.svg);
    right: 0;
    bottom: 0;
    transition: all .5s;
}
.base-picks .txt p:not([class]) {
    font-size: 1.1rem;
}
.base-end-txt {
    text-align: center;
    font-size: 1.2rem;
}
.base-movie {
    width: 90%;
    margin: 20px auto 0;
    max-width: 600px;
}

@media screen and (max-width: 834px) {
    .section-explanation h4 span {
        display: inline-block;
        text-align: center;
        position: relative;
        font-size: 0.9rem;
        background: #F5F2DA;
        padding: 10px 20px;
        left: 50%;
        transform: translateX(-50%);
        line-height: 1.6em;
        border-radius: 10px;
    }
    .base-picks {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin: 30px auto 50px;
    }
    .base-picks .txt {
        width: 100%;
    }
    .base-picks .image {
        width: 100%;
        border-radius: 12px;
        overflow: hidden;
        max-width: 400px;
        margin: 20px auto 0;
    }
    .base-picks:nth-of-type(odd) .txt {
        order: 1;
    }
    .base-picks:nth-of-type(odd) .image {
        order: 2;
    }
    .base-picks .txt .ttl {
        position: relative;
        margin-bottom: 20px;
        font-size: 1.4rem;
        top: 20px;
        text-align: center;
    }
    .base-picks .txt .ttl span {
        display: inline-block;
        padding: 5px 0;
        margin-right: 20px;
        width: 180px;
        font-size: 1.5rem;
        text-align: center;
        position: relative;
        top: -15px;
    }
    .base-picks .txt .ttl span:before {
        width: 20px;
        height: 20px;
        background-image: url(../img/common_img/bracket-left.svg);
        left: 0;
        top: 0;
        transition: all .5s;
    }
    .base-picks .txt .ttl span:after {
        width: 20px;
        height: 20px;
        background-image: url(../img/common_img/bracket-right.svg);
        right: 0;
        bottom: 0;
        transition: all .5s;
    }
    .base-picks .txt p:not([class]) {
        font-size: 0.9rem;
    }
    .base-end-txt {
        text-align: center;
        font-size: 1rem;
    }
    .base-movie {
        width: 90%;
        margin: 20px auto 0;
        max-width: 600px;
    }
}

.local-picks .flex-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 40px auto 80px;
}
.local-picks-ttl {
    text-align: center;
    font-size: 1.8rem;
    margin: 80px auto 0;
    position: relative;
    padding: 20px 20px;
}
.local-picks-ttl:before {
    width: 30px;
    height: 30px;
    background-image: url(../img/common_img/bracket-left.svg);
    left: 0;
    top: 0;
    transition: all .5s;
}
.local-picks-ttl:after {
    width: 30px;
    height: 30px;
    background-image: url(../img/common_img/bracket-right.svg);
    right: 0;
    bottom: 0;
    transition: all .5s;
}
.local-picks .flex-content .txt {
    width: 48%;
    display: flex;
    align-items: center;
    order: 2;
}
.local-picks .flex-content .txt p {
    font-size: 1.1rem;
}
.local-picks .flex-content .image {
    width: 48%;
    border-radius: 12px;
    overflow: hidden;
    order: 1;
}

@media screen and (max-width: 834px) {
    .local-picks .flex-content {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin: 20px auto 50px;
    }
    .local-picks-ttl {
        text-align: center;
        font-size: 1.2rem;
        margin: 40px auto 0;
        position: relative;
        padding: 15px 20px;
        max-width: 500px;
    }
    .local-picks-ttl:before {
        width: 30px;
        height: 30px;
        background-image: url(../img/common_img/bracket-left.svg);
        left: 0;
        top: 0;
        transition: all .5s;
    }
    .local-picks-ttl:after {
        width: 30px;
        height: 30px;
        background-image: url(../img/common_img/bracket-right.svg);
        right: 0;
        bottom: 0;
        transition: all .5s;
    }
    .local-picks .flex-content .txt {
        width: 100%;
        display: flex;
        align-items: center;
        order: 2;
    }
    .local-picks .flex-content .txt p {
        font-size: 0.9rem;
    }
    .local-picks .flex-content .image {
        width: 100%;
        border-radius: 12px;
        overflow: hidden;
        order: 1;
        margin-bottom: 20px;
    }
}

.mag-block:nth-of-type(1) {
    margin-bottom: 120px;
}
.mag-block:nth-of-type(2) {
    margin-bottom: 80px;
}
.mag-block .block-ttl {
    text-align: center;
    font-size: 1.8rem;
    margin: 80px auto 0;
    position: relative;
    padding: 20px 20px;
    width: 90%;
    max-width: 736px;
}
.mag-block .block-ttl:before {
    width: 30px;
    height: 30px;
    background-image: url(../img/common_img/bracket-left.svg);
    left: 0;
    top: 0;
    transition: all .5s;
}
.mag-block .block-ttl:after {
    width: 30px;
    height: 30px;
    background-image: url(../img/common_img/bracket-right.svg);
    right: 0;
    bottom: 0;
    transition: all .5s;
}
.mag-block .flex-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 30px auto;
}
.mag-block .flex-box .txt {
    width: 60%;
}
.mag-block .flex-box .txt .ttl {
    font-size: 1.4rem;
    color: var(--main-color);
}
.mag-block .flex-box .txt p:not([class]) {
    font-size: 1.1rem;
}
.mag-block .flex-box .image {
    width: 36%;
}
.mag-point {
    margin: 30px auto 0;
    background: #F5F2DA;
    padding: 30px 40px 40px;
    position: relative;
}
.mag-point > p {
    font-size: 1.2rem;
    color: var(--main-color);
    text-align: center;
}
.mag-point::before {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 18px 40px 18px;
    border-color: transparent transparent #F5F2DA transparent;
    transform: rotate(0deg);
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
}
.mag-point ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 20px auto 0;
}
.mag-point ul li {
    width: 48%;
    background: #fff;
    filter: drop-shadow(0px 0px 6px rgba(82, 75, 48, 0.2));
    border-radius: 10px;
    padding: 40px;
    margin-bottom: 20px;
}
.members .mag-point ul li {
    width: 100%;
}
.mag-point ul li .ttl {
    font-size: 1.4rem;
    color: var(--main-color);
    text-align: center;
    padding-bottom: 5px;
}
@media screen and (max-width: 834px) {
    .mag-block:nth-of-type(1) {
        margin-bottom: 40px;
    }
    .mag-block:nth-of-type(2) {
        margin-bottom: 0px;
    }
    .mag-block .block-ttl {
        text-align: center;
        font-size: 1.2rem;
        margin: 80px auto 0;
        position: relative;
        padding: 15px 10px;
        width: 90%;
        max-width: 736px;
    }
    .mag-block .block-ttl:before {
        width: 20px;
        height: 20px;
        background-image: url(../img/common_img/bracket-left.svg);
        left: 0;
        top: 0;
        transition: all .5s;
    }
    .mag-block .block-ttl:after {
        width: 20px;
        height: 20px;
        background-image: url(../img/common_img/bracket-right.svg);
        right: 0;
        bottom: 0;
        transition: all .5s;
    }
    .mag-block .flex-box {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin: 30px auto;
    }
    .mag-block .flex-box .txt {
        width: 100%;
    }
    .mag-block .flex-box .txt .ttl {
        font-size: 1.1rem;
        color: var(--main-color);
    }
    .mag-block .flex-box .txt p:not([class]) {
        font-size: 0.9rem;
        padding-bottom: 20px;
    }
    .mag-block .flex-box .image {
        width: 100%;
        padding-bottom: 20px;
    }
    .mag-point {
        margin: 30px auto 0;
        background: #F5F2DA;
        padding: 20px 20px 20px;
        position: relative;
    }
    .mag-point > p {
        font-size: 1rem;
        color: var(--main-color);
        text-align: center;
        line-height: 1.6em;
    }
    .mag-point::before {
        width: 0px;
        height: 0px;
        border-style: solid;
        border-width: 0 18px 40px 18px;
        border-color: transparent transparent #F5F2DA transparent;
        transform: rotate(0deg);
        top: -30px;
        left: 50%;
        transform: translateX(-50%);
    }
    .mag-point ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin: 20px auto 0;
    }
    .mag-point ul li {
        width: 100%;
        background: #fff;
        filter: drop-shadow(0px 0px 6px rgba(82, 75, 48, 0.2));
        border-radius: 10px;
        padding: 20px;
    }
    .smartlife-journal .mag-point ul li:nth-child(1) {
        margin-bottom: 20px;
    }
    .members .mag-point ul li {
        width: 100%;
    }
    .mag-point ul li .ttl {
        font-size: 1rem;
        color: var(--main-color);
        text-align: center;
        padding-bottom: 5px;
    }
}

.board-block {
    position: relative;
}
.board-point-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 40px;
}
.board-point-list li {
    width: 48%;
    background: #fff;
    filter: drop-shadow(0px 0px 6px rgba(82, 75, 48, 0.2));
    border-radius: 10px;
    padding: 30px;
}
.board-point-list li .ttl {
    position: relative;
    padding-bottom: 10px;
}
.board-point-list li .ttl span {
     display: inline-block;
    text-align: center;
    position: relative;
    font-size: 1.1rem;
    background: #F5F2DA;
    padding: 5px 20px;
    left: 50%;
    transform: translateX(-50%);
    line-height: 1.6em;
    border-radius: 6px;
}
.board-point-list li p:not([class]) {
    font-size: 1.2rem;
    color: var(--main-color);
    text-align: center;
}
.board-realation .realation-box {
    width: 100%;
    background: #fff;
    filter: drop-shadow(0px 0px 6px rgba(82, 75, 48, 0.2));
    border-radius: 10px;
    padding: 30px 40px;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.board-realation .realation-box .ttl {
    width: 45%;
    display: flex;
    align-items: center;
}
.board-realation .realation-box .ttl p {
    text-align: center;
    font-size: 1.3rem;
    position: relative;
    padding: 15px 10px;
    width: 90%;
    max-width: 736px;
    line-height: 1.6em;
}
.board-realation .realation-box .ttl p:before {
    width: 30px;
    height: 30px;
    background-image: url(../img/common_img/bracket-left.svg);
    left: 0;
    top: 0;
    transition: all .5s;
}
.board-realation .realation-box .ttl p:after {
    width: 30px;
    height: 30px;
    background-image: url(../img/common_img/bracket-right.svg);
    right: 0;
    bottom: 0;
    transition: all .5s;
}
.board-realation .realation-box .txt {
    width: 55%;
    display: flex;
    align-items: center;
}
@media screen and (max-width: 834px) {
    .board-block {
        position: relative;
    }
    .board-point-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-bottom: 40px;
    }
    .board-point-list li {
        width: 100%;
        background: #fff;
        filter: drop-shadow(0px 0px 6px rgba(82, 75, 48, 0.2));
        border-radius: 10px;
        padding: 20px 10px;
        margin-bottom: 20px;
    }
    .board-point-list li .ttl {
        position: relative;
        padding-bottom: 10px;
    }
    .board-point-list li .ttl span {
        display: inline-block;
        text-align: center;
        position: relative;
        font-size: 1rem;
        background: #F5F2DA;
        padding: 5px 20px;
        left: 50%;
        transform: translateX(-50%);
        line-height: 1.6em;
        border-radius: 6px;
    }
    .board-point-list li p:not([class]) {
        font-size: 0.9rem;
        color: var(--main-color);
        text-align: center;
    }
    .board-realation .realation-box {
        width: 100%;
        background: #fff;
        filter: drop-shadow(0px 0px 6px rgba(82, 75, 48, 0.2));
        border-radius: 10px;
        padding: 30px 20px;
        margin-bottom: 20px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .board-realation .realation-box .ttl {
        width: 100%;
    }
    .board-realation .realation-box .ttl p {
        text-align: center;
        font-size: 1rem;
        position: relative;
        padding: 10px 10px;
        width: 90%;
        margin: 0 auto 10px;
        max-width: 300px;
        line-height: 1.6em;
    }
    .board-realation .realation-box .ttl p:before {
        width: 20px;
        height: 20px;
        background-image: url(../img/common_img/bracket-left.svg);
        left: 0;
        top: 0;
        transition: all .5s;
    }
    .board-realation .realation-box .ttl p:after {
        width: 20px;
        height: 20px;
        background-image: url(../img/common_img/bracket-right.svg);
        right: 0;
        bottom: 0;
        transition: all .5s;
    }
    .board-realation .realation-box .txt {
        width: 100%;
        display: flex;
        align-items: center;
    }
}