@charset "UTF-8";

/* ========================================
  @media screen and (min-width: 768px), print
======================================== */
@media screen and (min-width: 768px),print {

/* mv
-------------------------------------*/
.mv {
    background: url(../images/sns/mv-bg.jpg)no-repeat center;
    background-size: cover;
    margin-top: 18px;
}
.mv .inner {
    width: min(95%, 940px);
    margin-inline: auto;
    padding: 114px 0 129px;
}
.mv h2 {
    color: #FFF;
    text-align: center;
    font-size: clamp(2.5rem, 2.417rem + 0.17vw, 2.625rem);
    font-weight: 700;
    line-height: 1.45238;
    margin-bottom: 59px;
}
.mv .content {
    background: rgba(26, 26, 26, 0.65);
    padding: 43px 60px 36px;
    display: grid;
    grid-template-columns: 60.85% 1fr;
    gap: 85px;
    align-items: center;
}
.mv .content h3 {
    color: #FFF;
    font-size: 20px;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 24px;
}
.mv .content .txt {
    color: #FFF;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75; 
    margin-bottom: 23px;
}
.mv .content .link {
    color: #FFF;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.66667; /* 166.667% */
}
.mv .content .link a {
    text-decoration: underline;
    color: #FFF;
}

/* worries
-------------------------------------*/
.worries .inner {
    width: min(95%, 1200px);
    margin-inline: auto;
    padding: 86px 0 150px;
    text-align: center;
}
.worries h2 {
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.5625; /* 156.25% */
    margin-bottom: 78px;
}
.worries .content {
    margin-bottom: 41px;
}
.worries .content h3 {
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    line-height: normal;
    padding: 16px 0;
    border-top: 2px solid #1A1A1A;
    border-bottom: 2px solid #1A1A1A;
    margin-bottom: 56px;
    margin-inline: 20px;
}
.worries .worries-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.worries .worries-list > li {
    padding: 0 20px 50px;
}
.worries .worries-list > li:not(:last-child) {
    border-right: 1px solid #E0E0E0;;
}
.worries .worries-list > li h4 {
    color: #000;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5; /* 150% */
    margin-bottom: 22px;
}
.worries .worries-list > li .photo {
    text-align: center;
    margin-bottom: 32px;
}
.worries .list-item {
    display: grid;
    gap: 20px;
}
.worries .list-item > li {
    color: #FFF;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.66667; /* 166.667% */
    border-radius: 10px;
    background: #1A1A1A;
    padding: 25px 0;
}
.worries .list-item > li span {
    color: #FFE330;
}
.worries .lead {
    text-align: center;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.5625; /* 156.25% */
    display: inline-block;
    position: relative;
}
.worries .lead::after {
    position: absolute;
    content: "";
    background: url(../images/sns/worries-human.png)no-repeat;
    background-size: contain;
    width: 73px;
    height: 209px;
    bottom: -159px;
    right: -78px;
    z-index: 2;
}

/* service共通
-------------------------------------*/
.service .ttl-box .enttl{
    color: #FFF;
    text-align: center;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 17px;
}
.service .ttl-box h2 {
    color: #FFF;
    text-align: center;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.458333;
    margin-bottom: 24px;
}
.service .ttl-box .lead {
    color: #FFF;
    text-align: center;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.45;
}
.service .content {
    background: #F2F2F2;
}
.service .content .inner {
    width: min(95%, 1400px);
    margin-inline: auto;
    background: #FFF;
    position: relative;
    padding: 79px 100px 90px;
    top: -80px;
}
.service .content .inBox01 {
    display: grid;
    grid-template-columns: 58.33% 1fr;
    gap: 60px;
    padding-bottom: 69px;
    align-items: flex-start;
}
.service .content .inBox01 .enttl {
    color: #F2F2F2;
    font-size: 50px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 8px;
}
.service .content .inBox01 h3 {
    font-size: 25px;
    font-weight: 700;
    line-height: 1.44;
    border-bottom: 2px solid #1A1A1A;
    padding-bottom: 19px;
}
.service .content .inBox01 .list li {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    border-bottom: 1px solid #BDBDBD;
    position: relative;
    padding-left: 57px;
    height: 60px;
    display: grid;
    align-items: center;
}
.service .content .inBox01 .list li::before {
    position: absolute;
    content: "";
    background: url(../images/page-common/check-icon.svg)no-repeat;
    background-size: contain;
    width: 27px;
    height: 23px;
    left: 14px;
    top: 54%;
    transform: translateY(-50%);
}
.service .content .inBox01 .photo {padding-top: 10px;}
.service .content .inBox02 .content-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
}
.service .content .inBox02 .content-list li h4 {
    color: #FFF;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.4444;
    background: #1A1A1A;
    padding: 10px 21px 14px;
    margin-bottom: 21px;
    border-radius: 5px;
}
.service .content .inBox02 .content-list .service-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 11px;
}
.service .content .inBox02 .content-list .service-list li {
    background: #F2F2F2;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
    height: 100px;
    border-radius: 10px;
    display: grid;
    place-items: center;
}
.service .content .inBox02 .content-list .recommend-list {
    display: grid;
    gap: 10px;
}
.service .content .inBox02 .content-list .recommend-list li {
    background: #F2F2F2;
    font-size: 16px;
    font-weight: 500;
    line-height: normal;
    height: 60px;
    border-radius: 10px;
    display: grid;
    align-items: center;
    padding: 0 44px;
    position: relative;
}
.service .content .inBox02 .content-list .recommend-list li::before {
    position: absolute;
    content: "・";
    color: #1a1a1a;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.4em;
}

/* service01
-------------------------------------*/
.service01 .ttl-box {
    background: url(../images/sns/service01-ttl-bg.jpg)no-repeat center;
    background-size: cover;
    padding: 146px 0 185px;
    position: relative;
}

/* service02
-------------------------------------*/
.service02 .ttl-box {
    background: url(../images/sns/service02-ttl-bg.jpg)no-repeat center;
    background-size: cover;
    padding: 146px 0 185px;
    position: relative;
}

/* service03
-------------------------------------*/
.service03 .ttl-box {
    background: url(../images/sns/service03-ttl-bg.jpg)no-repeat center;
    background-size: cover;
    padding: 146px 0 185px;
    position: relative;
}

/* lead-sec
-------------------------------------*/
.lead-sec {
    padding: 118px 0 140px;
}
.lead-sec h2{
    padding-left: 20px;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.4375;
    text-align: center;
    margin-bottom: 33px;
}
.lead-sec .logo {
    text-align: center;
}


/* seminar
-------------------------------------*/
#sns #parts-seminar {margin-bottom: -296px;}
#sns #parts-seminar .inner {padding: 101px 0 425px;}

}

/* ========================================
@media screen and (min-width:768px) and (max-width:1000px)
======================================== */
@media screen and (min-width:768px) and (max-width:1000px) {
.mv .img img {
    width: 100%;
    height: auto;
}
}

/* ========================================
@media screen and (min-width:768px) and (max-width:1100px)
======================================== */
@media screen and (min-width:768px) and (max-width:1100px) {
.worries .list-item > li {
    font-size: clamp(0.688rem, -0.325rem + 2.11vw, 1.125rem);
}
.worries .lead {
    font-size: clamp(1.5rem, 1.167rem + 0.69vw, 2rem);
}
}

/* ========================================
@media screen and (min-width:768px) and (max-width:1440px)
======================================== */
@media screen and (min-width:768px) and (max-width:1440px) {
/* service共通
-------------------------------------*/
.service .ttl-box .enttl{
    font-size: 2.083vw;
    margin-bottom: 1.181vw;
}
.service .ttl-box h2 {
    font-size: 3.333vw;
    margin-bottom: 1.667vw;
}
.service .ttl-box .lead {
    font-size: clamp(1.125rem, 0.982rem + 0.3vw, 1.25rem);
}
.service .content .inner {
    padding: 5.486vw 6.944vw 6.25vw;
    top: -5.556vw;
}
.service .content .inBox01 {
    grid-template-columns: 63.33% 1fr;
    gap: 4.167vw;
    padding-bottom: 4.792vw;
}
.service .content .inBox01 .enttl {
    font-size: 3.472vw;
    margin-bottom: 0.556vw;
}
.service .content .inBox01 h3 {
    font-size: clamp(1rem, 0.357rem + 1.34vw, 1.563rem);
    padding-bottom: 1.319vw;
}
.service .content .inBox01 .list li {
    font-size: clamp(0.75rem, 0.464rem + 0.6vw, 1rem);
    padding-left: 3.958vw;
    line-height: 1.5;
}
.service .content .inBox01 .list li::before {
    width: 1.875vw;
    height: 1.597vw;
    left: 0.972vw;
}
.service .content .inBox01 .photo {padding-top: 0.694vw;}
.service .content .inBox02 .content-list {
    gap: 2.778vw;
}
.service .content .inBox02 .content-list li h4 {
    font-size: clamp(0.875rem, 0.589rem + 0.6vw, 1.125rem);
    padding: 0.694vw 1.458vw 0.972vw;
    margin-bottom: 1.458vw;
    border-radius: 0.347vw;
}
.service .content .inBox02 .content-list .service-list {
    gap: 0.764vw;
}
.service .content .inBox02 .content-list .service-list li {
    font-size: clamp(0.625rem, 0.339rem + 0.6vw, 0.875rem);
    font-weight: 500;
    height: 6.944vw;
    border-radius: 0.694vw;
}
.service .content .inBox02 .content-list .recommend-list {
    gap: 0.694vw;
}
.service .content .inBox02 .content-list .recommend-list li {
    height: 4.167vw;
    border-radius: 0.694vw;
    padding: 0 3.056vw;
    font-size: clamp(0.688rem, 0.33rem + 0.74vw, 1rem);
}
.service .content .inBox02 .content-list .recommend-list li::before {
    left: 1.389vw;
    font-size: 1.4em;
}
.service .content .inBox01 .photo img {
    width: 100%;
    height: auto;
}

/* service01
-------------------------------------*/
.service01 .ttl-box {
    padding: 10.139vw 0 12.847vw;
}

/* service02
-------------------------------------*/
.service02 .ttl-box {
    padding: 10.139vw 0 12.847vw;
}

/* service03
-------------------------------------*/
.service03 .ttl-box {
    padding: 10.139vw 0 12.847vw;
}


}


/* ========================================
@media screen and (max-width: 767px) 
======================================== */
@media screen and (max-width: 767px) {
/* mv
-------------------------------------*/
.mv {
    background: url(../images/sns/mv-bg_sp.jpg)no-repeat center;
    background-size: cover;
}
.mv .inner {
    padding: 12.80vw 0 11.84vw;
}
.mv h2 {
    color: #FFF;
    text-align: center;
    font-size:5.314vw;
    font-weight: 700;
    line-height: 1.4545;
    margin-bottom: 6.28vw;
    letter-spacing: -0.08em;
    padding-left: 2.2vw;
}
.mv .content {
    background: rgba(26, 26, 26, 0.65);
    padding: 7.97vw 7.73vw 7.25vw 8.94vw;
    display: grid;
    width: 89.37vw;
    margin-inline: auto;
}
.mv .content .txt-box {
    display: contents;
}
.mv .content h3 {
    color: #FFF;
    font-size:3.865vw;
    font-weight: 700;
    line-height: 1.4375;
    margin-bottom: 5.02vw;
    order: 1;
}
.mv .content .txt {
    color: #FFF;
    font-size:3.14vw;
    font-weight: 400;
    line-height: 1.69231;
    margin-bottom: 5.62vw;
    order: 2;
}
.mv .content .link {
    color: #FFF;
    font-size:2.898vw;
    font-weight: 500;
    line-height: 1.66667; /* 166.667% */
    order: 4;
    text-align: center;
    padding-right: 1vw;
}
.mv .content .link a {
    text-decoration: underline;
    color: #FFF;
}
.mv .content .img {
    order: 3;
    text-align: center;
    margin-bottom: 2.22vw;
}
.mv .content .img img {
    width: 42.51vw;
}

/* worries
-------------------------------------*/
.worries .inner {
    /* width: 90.10vw; */
    margin-inline: auto;
    padding: 10.93vw 0 12.8vw;
    text-align: center;
}
.worries h2 {
    text-align: center;
    font-size:5.314vw;
    font-weight: 700;
    line-height: 1.72727;
    margin-bottom: 14.01vw;
    letter-spacing: -0.08em;
}
.worries .content {
 margin-bottom: 5vw;
}
.worries .content h3 {
    text-align: center;
    font-size:4.348vw;
    font-weight: 700;
    line-height: normal;
    padding: 4.38vw 0 6vw;
    border-top: 0.48vw solid #1A1A1A;
    border-bottom: 0.48vw solid #1A1A1A;
    margin-bottom: 0;
    margin-inline: auto;
    width: 89.37vw;
}
.worries .worries-list {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 0.6vw;
    width: 89.37vw;
    margin-inline: auto;
}
.worries .worries-list > li {
    padding: 8.0vw 0 7.97vw;
}
.worries .worries-list > li:not(:last-child) {
    border-bottom: 0.2vw solid #E0E0E0;;
}
.worries .worries-list > li h4 {
    color: #000;
    text-align: center;
    font-size:4.348vw;
    font-weight: 700;
    line-height: 1.5; /* 150% */
    margin-bottom: 4.35vw;
}
.worries .worries-list > li .photo {
    text-align: center;
    margin-bottom: 2.90vw;
}
.worries .worries-list > li .photo img {
    width: 28.99vw;
}
.worries .list-item {
    display: grid;
    gap: 2.42vw;
    width: 86.96vw;
    margin-inline: auto;
}
.worries .list-item > li {
    color: #FFF;
    text-align: center;
    font-size:4.348vw;
    font-weight: 700;
    line-height: 1.66667; /* 166.667% */
    border-radius: 2.42vw;
    background: #1A1A1A;
    padding: 3.62vw 0;
}
.worries .list-item > li span {
    color: #FFE330;
}
.worries .lead {
    text-align: center;
    font-size:3.865vw;
    font-style: normal;
    font-weight: 700;
    line-height:2;
    letter-spacing: -0.08em;
    display: inline-block;
    position: relative;
    width: max-content;
}
.worries .lead span {
    font-size:6.763vw;
    font-weight: 700;
    line-height: 1.53571;
    display: block;
    margin: 4vw 0 0;
    letter-spacing: -0.08em;
}
.worries .lead::after {
    position: absolute;
    content: "";
    background: url(../images/sns/worries-human_sp.png)no-repeat;
    background-size: contain;
    width: 10.39vw;
    height: 30.19vw;
    bottom: -25.5vw;
    right: -0.5vw;
}

/* service共通
-------------------------------------*/
.service .ttl-box .enttl{
    color: #FFF;
    text-align: center;
    font-size:4.831vw;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 3vw;
}
.service .ttl-box h2 {
    color: #FFF;
    text-align: center;
    font-size:7.729vw;
    font-weight: 700;
    line-height: 1.458333;
    margin-bottom: 2.2vw;
}
.service .ttl-box .lead {
    color: #FFF;
    text-align: center;
    font-size:3.623vw;
    font-weight: 500;
    line-height: 1.45;
}
.service .content {
    background: #F2F2F2;
}
.service .content .inner {
    width: 89.37vw;
    margin-inline: auto;
    background: #FFF;
    position: relative;
    padding: 6.04vw 3.62vw 11.59vw;
    top: -14.5vw;
}
.service .content .inBox01 {
    display: grid;
    gap: 8vw;
    padding-bottom: 8.5vw;
}
.service .content .inBox01 .enttl {
    color: #F2F2F2;
    font-size:6.763vw;
    font-weight: 700;
    line-height: 1.2857;
    margin-bottom: 1.45vw;
    padding-left: 2vw;
}
.service .content .inBox01 h3 {
    font-size: 4.348vw;
    font-weight: 700;
    line-height: 1.44;
    border-bottom: 0.48vw solid #1A1A1A;
    padding-bottom: 2.66vw;
    padding-left: 1.7vw;
    letter-spacing: -0.08em;
    margin-bottom: 1vw;
}
.service .content .inBox01 .list li {
    font-size: 3.382vw;
    font-weight: 700;
    line-height: 1.42857;
    border-bottom: 0.2vw solid #BDBDBD;
    position: relative;
    padding: 4.35vw 0 3.62vw 11.2vw;
}
.service .content .inBox01 .list li::before {
    position: absolute;
    content: "";
    background: url(../images/page-common/check-icon.svg)no-repeat;
    background-size: contain;
    width: 5.56vw;
    height: 4.83vw;
    left: 2.18vw;
    top: 5vw;
}
.service .content .inBox02 .content-list {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 8.45vw;
}
.service .content .inBox02 .content-list li h4 {
    color: #FFF;
    font-size:3.865vw;
    font-weight: 500;
    line-height: 1.4375;
    background: #1A1A1A;
    padding: 3.14vw 4.35vw 3.4vw;
    margin-bottom: 2.90vw;
    border-radius: 1.21vw;
}
.service .content .inBox02 .content-list .service-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.42vw 2.66vw;
}
.service .content .inBox02 .content-list .service-list li {
    background: #F2F2F2;
    text-align: center;
    font-size:3.382vw;
    font-weight: 500;
    line-height: normal;
    height: 24.15vw;
    border-radius: 2.42vw;
    display: grid;
    place-items: center;
}
.service .content .inBox02 .content-list .recommend-list {
    display: grid;
    gap: 2.42vw;
}
.service .content .inBox02 .content-list .recommend-list li {
    background: #F2F2F2;
    font-size:3.382vw;
    font-weight: 500;
    line-height: normal;
    height: 16.91vw;
    border-radius: 2.42vw;
    display: grid;
    align-items: center;
    padding: 0 0 0 7.5vw;
    position: relative;
}
.service .content .inBox02 .content-list .recommend-list li::before {
    position: absolute;
    content: "・";
    color: #1a1a1a;
    left: 3.83vw;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2em;
}

/* service01
-------------------------------------*/
.service01 .ttl-box {
    background: url(../images/sns/service01-ttl-bg_sp.jpg)no-repeat center;
    background-size: cover;
    padding: 21.50vw 0 32.635vw;
    position: relative;
}

/* service02
-------------------------------------*/
.service02 .ttl-box {
    background: url(../images/sns/service02-ttl-bg_sp.jpg)no-repeat center;
    background-size: cover;
    padding: 21.50vw 0 32.635vw;
    position: relative;
}
.service02 .content .inBox01 h3 {
    padding-bottom: 4.35vw;
    margin-bottom: 1.3vw;
}

/* service03
-------------------------------------*/
.service03 .ttl-box {
    background: url(../images/sns/service03-ttl-bg_sp.jpg)no-repeat center;
    background-size: cover;
    padding: 21.50vw 0 27.38vw;
    position: relative;
}
.service03 .ttl-box h2 {
    letter-spacing: -0.08em;
}
.service03 .content .inBox01 h3 {
    padding-bottom: 4.35vw;
}
.service03 .content .inBox01 .list li:nth-child(1) {padding: 4.9vw 0 5.4vw 11.2vw;}

/* lead-sec
-------------------------------------*/
.lead-sec {
    padding: 15.46vw 0 16.5vw;
}
.lead-sec h2{
    font-size:6.039vw;
    font-weight: 700;
    line-height: 1.4375;
    letter-spacing: -0.08em;
    text-align: center;
    margin-bottom: 5.80vw;
    padding-left: 4.5vw;
}
.lead-sec .logo {
    text-align: center;
}

/* seminar
-------------------------------------*/
#sns #parts-seminar .inner {padding: 17.15vw 0 40.11vw;}
#sns #parts-seminar h2 {
    font-size:6.763vw;
}

}