@charset "UTF-8";

/* ========================================
  @media screen and (min-width: 768px), print
======================================== */
@media screen and (min-width: 768px),print {
/* mv
-------------------------------------*/
.mv {
    background: url(../images/publicr/mv-bg.jpg) no-repeat center;
    background-size: cover;
    padding: 172px 0 243px;
    margin-top: 18px;
}
.mv h2 {
    color: #FFF;
    text-align: center;
    font-size: 42px;
    font-weight: 700;
    line-height: 1.45238;
    margin-bottom: 19px;
}
.mv .txt {
    color: #FFF;
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75; /* 175% */
}

/* worries
-------------------------------------*/
.worries {
    width: min(95%, 1400px);
    margin-inline: auto;
}
.worries .upper {
    background: url(../images/publicr/worries-bg-t.png)no-repeat center;
    background-size: cover;
    padding: 75px 0 100px;
    position: relative;
}
.worries .upper::after {
    position: absolute;
    content: "";
    background: url(../images/publicr/worries-arrow.svg)no-repeat;
    background-size: contain;
    width: 80px;
    height: 40px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(50%);
}
.worries .upper .inner {
    width: min(95%, 1100px);
    margin-inline: auto;
}
.worries .upper .name {
    font-size: 24px;
    font-weight: 700;
    line-height: normal;
    padding-bottom: 12px;
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: -2px;
    position: relative;
    align-items: center;
}
.worries .upper .name::after {
    position: absolute;
    content: "";
    background: #1a1a1a;
    width: 260px;
    height: 2px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
.worries .upper .name span {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.31578;
}
.worries .upper h2 {
    text-align: center;
    margin-bottom: 20px;
    padding-left: 5px;
}
.worries .upper .list {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    width: min(95%, 922px);
    position: relative;
}
.worries .upper .list li {
    color: #FFF;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.66667; /* 166.667% */
    background: #1A1A1A;
    padding: 25px 0;
    width: min(95%, 390px);
    height: 110px;
    border-radius: 10px;
}
.worries .upper .list li span {
    color: #FFE330;
}
.worries .bottom {
    background: url(../images/publicr/worries-bg-b.png)no-repeat center;
    background-size: cover;
    padding: 98px 0 102px;
    text-align: center;
}
.worries .bottom .lead {
    color: #FFF;
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.5625; /* 156.25% */
    position: relative;
    display: inline-block;
}
.worries .bottom .lead::after {
    position: absolute;
    content: "";
    background: url(../images/publicr/worries-deco.png)no-repeat;
    background-size: contain;
    width: 277px;
    height: 240px;
    top: 50%;
    transform:translateY(-50%);
    right: -223px;
}

/* worries01
-------------------------------------*/
.worries01 {
    margin-top: -77px;
    margin-bottom: 60px;
}
.worries01 .list {
    margin-left: auto;
    justify-content: flex-end;
}
.worries01 .list::before {
    position: absolute;
    content: "";
    background: url(../images/publicr/worries-human01.png)no-repeat;
    background-size: contain;
    width: 83px;
    height: 331px;
    top: -25px;
    left: -119px;
}
.worries01 .upper .list li:nth-child(2) {margin-right: 50px;}

/* worries02
-------------------------------------*/
.worries02 {
    margin-bottom: 71px;
}
.worries02 .list {
    margin-right: auto;
}
.worries02 .list::before {
    position: absolute;
    content: "";
    background: url(../images/publicr/worries-human02.png)no-repeat;
    background-size: contain;
    width: 140px;
    height: 322px;
    top: -39px;
    right: -142px;
}
.worries02 .upper .list li:nth-child(3) {margin-left: 50px;}

/* support
-------------------------------------*/
.support {
    background: url(../images/publicr/support-bg.png)no-repeat center;
    background-size: cover;
}
.support .inner{
    width: min(95%, 1200px);
    margin-inline: auto;
    padding: 111px 0 83px;
    position: relative;
}
.support .inBox {
    width: min(95%, 1100px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr 61.8181%;
    margin-bottom: 50px;
}
.support .ttl-box {
    padding-top: 10px;
}
.support .logo {
    margin-bottom: 27px;
}
.support h2 {
    color: #FFF;
    font-size: clamp(1.5rem, 1.25rem + 0.52vw, 1.875rem);
    font-weight: 700;
    line-height: 1.4333;
}
.support .list {
    display: grid;
    gap: 10px;
    position: relative;
}
.support .list::before {
    position: absolute;
    content: "";
    background: url(../images/publicr/support-deco.png)no-repeat;
    background-size: contain;
    width: 601px;
    height: 264px;
    bottom: -9px;
    left: -574px;
    mix-blend-mode: color-dodge;
}
.support .list li {
    font-size: clamp(0.813rem, 0.604rem + 0.43vw, 1.125rem);
    font-weight: 700;
    line-height: normal;
    padding: 18px 0 16px 80px;
    position: relative;
    background: #FFFFFF;
    border-radius: 4px;
}
.support .list li::before {
    position: absolute;
    content: "";
    background: url(../images/page-common/check-icon.svg)no-repeat;
    background-size: contain;
    width: 27px;
    height: 23px;
    left: 23px;
    top: 50%;
    transform: translateY(-50%);
}
.support .photo {
    margin-bottom: 50px;
    text-align: center;
}
.support .photo img {
    width: 100%;
    height: auto;
}
.support .lead {
    color: #FFF;
    font-size: clamp(1.75rem, 1.583rem + 0.35vw, 2rem);
    font-weight: 700;
    line-height: 1.4375;
    text-align: center;
}

/* publicr
-------------------------------------*/
.publicr {
    position: relative;
}
.publicr::before {
    position: absolute;
    content: "";
    background: #F2F2F2;
    width: 680px;
    height: 380px;
    top: 390px;
    right: 0;
}
.publicr::after {
    position: absolute;
    content: "";
    background: #F2F2F2;
    width: 600px;
    height: 300px;
    bottom: 0;
    left: 0;
}
.publicr .inner{
    width: min(95%, 1400px);
    margin-inline: auto;
    padding: 120px 0 0;
}
.publicr .enttl {
    color: #F2F2F2;
    font-size: 100px;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 45px;
    width: min(95%, 1100px);
    margin-inline: auto;
}
.publicr h3 {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.458333;
    position: relative;
    margin-bottom: 80px;
}
.publicr h3::before {
    position: absolute;
    content: "";
    background: #F2F2F2;
    width: 120px;
    height: 120px;
    top: -44px;
    left: -91px;
    z-index: -1;
}
.publicr h3::after {
    position: absolute;
    content: "";
    background: #C93800;
    width: 40px;
    height: 2px;
    bottom: -20px;
    left: 0;
}
.publicr h3 span {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.45;
    display: block;
    margin-bottom: 10px;
}
.publicr .txt {
    font-size: 16px;
    font-weight: 400;
    line-height: 2.25; /* 225% */
    margin-bottom: 36px;
    position: relative;
    z-index: 2;
}
.publicr .txt:nth-last-of-type(1) {
    margin-bottom: 0;
}
.publicr .inBox01 {
    display: grid;
    grid-template-columns: 1fr 37.14%;
    gap: 110px;
    align-items: flex-end;
    padding-bottom: 87px;
    position: relative;
}
.publicr .inBox01 .txt-box {
    padding-left: 240px;
}
.publicr .inBox01 .photo01 {margin-bottom: 15px;}
.publicr .inBox02 {
    display: grid;
    grid-template-columns: 30% 1fr;
    gap: 82px;
    position: relative;
    z-index: 2;
    padding-bottom: 60px;
}
.publicr .inBox02 .txt-box {
    position: relative;
}
.publicr .inBox02 .photo02 {margin-top: 69px;}

/* publicr01
-------------------------------------*/
.publicr01 .inBox02 .txt-box::after {
    position: absolute;
    content: "";
    background: url(../images/publicr/publicr01-human.jpg)no-repeat;
    background-size: contain;
    width: 180px;
    height: 252px;
    bottom: -1px;
    right: 151px;
}

/* publicr02
-------------------------------------*/
.publicr02 {
    margin-bottom: 210px;
}
.publicr02 h3 {
    margin-bottom: 71px;
}
.publicr02 .inBox01 {
    align-items: center;
    padding-bottom: 69px;
}
.publicr02 .inBox01 .photo01 {margin-bottom: 28px;}
.publicr02 .inBox02 .photo02 {margin-top: 46px;}
.publicr02 .inBox02 .txt-box::after {
    position: absolute;
    content: "";
    background: url(../images/publicr/publicr02-human.jpg)no-repeat;
    background-size: contain;
    width: 180px;
    height: 260px;
    bottom: -10px;
    right: 151px;
}

}

/* ========================================
@media screen and (min-width:768px) and (max-width:1280px)
======================================== */
@media screen and (min-width:768px) and (max-width:1280px) {
 /* worries
-------------------------------------*/
.worries .upper {
    padding: 5.859vw 0 7.813vw;
}
.worries .upper::after {
    width: 6.25vw;
    height: 3.125vw;
}
.worries .upper .name {
    font-size: 1.875vw;
    padding-bottom: 0.938vw;
    gap: 2.344vw;
    margin-bottom: -0.156vw;
}
.worries .upper .name::after {
    width: 20.313vw;
    height: 0.156vw;
}
.worries .upper .name span {
    font-size: 1.484vw;
}
.worries .upper h2 {
    margin-bottom: 1.563vw;
    padding-left: 0.391vw;
}
.worries .upper .list {
    gap: 2.344vw;
    width: 72.031vw;
}
.worries .upper .list li {
    font-size: 1.406vw;
    padding: 1.953vw 0;
    width: 30.469vw;
    height: 8.594vw;
    border-radius: 0.781vw;
}
.worries .bottom {
    padding: 7.656vw 0 7.969vw;
}
.worries .bottom .lead {
    font-size: 2.5vw;
}
.worries .bottom .lead::after {
    width: 21.641vw;
    height: 18.75vw;
    right: -17.422vw;
}

/* worries01
-------------------------------------*/
.worries01 {
    margin-top: -6.016vw;
    margin-bottom: 4.688vw;
}
.worries01 .list::before {
    width: 6.484vw;
    height: 25.859vw;
    top: -1.953vw;
    left: -9.297vw;
}
.worries01 .upper .list li:nth-child(2) {margin-right: 3.906vw;}

/* worries02
-------------------------------------*/
.worries02 {
    margin-bottom: 5.547vw;
}
.worries02 .list::before {
    width: 10.938vw;
    height: 25.156vw;
    top: -3.047vw;
    right: -11.094vw;
}
.worries02 .upper .list li:nth-child(3) {margin-left: 3.906vw;}   
}

/* ========================================
@media screen and (min-width:768px) and (max-width:1440px) 
======================================== */
@media screen and (min-width:768px) and (max-width:1440px) {
.support .list::before {
    width: 41.736vw;
    height: 18.333vw;
    bottom: -0.625vw;
    left: -39.861vw;
}
}

/* ========================================
@media screen and (min-width:768px) and (max-width:1640px) 
======================================== */
@media screen and (min-width:768px) and (max-width:1640px) {
/* publicr
-------------------------------------*/
.publicr::before {
    width: 41.463vw;
    height: 23.171vw;
    top: 23.78vw;
    right: 0;
}
.publicr::after {
    width: 36.585vw;
    height: 18.293vw;
    bottom: 0;
    left: 0;
}
.publicr .inner{
    width: 85.366vw;
    padding: 7.317vw 0 0;
}
.publicr .enttl {
    font-size: 6.098vw;
    margin-bottom: 2.744vw;
    width: 67.073vw;
}
.publicr h3 {
    font-size: 2.927vw;
    margin-bottom: 4.878vw;
}
.publicr h3::before {
    width: 7.317vw;
    height: 7.317vw;
    top: -2.683vw;
    left: -5.549vw;
}
.publicr h3::after {
    width: 2.439vw;
    height: 0.122vw;
    bottom: -1.22vw;
    left: 0;
}
.publicr h3 span {
    font-size: clamp(0.875rem, 0.545rem + 0.69vw, 1.25rem);
    margin-bottom: 0.61vw;
}
.publicr .txt {
    font-size: clamp(0.625rem, 0.295rem + 0.69vw, 1rem);
    margin-bottom: 2.195vw;
}
.publicr .inBox01 {
    grid-template-columns: 1fr 37.14%;
    gap: 6.707vw;
    padding-bottom: 5.305vw;
}
.publicr .inBox01 .txt-box {
    padding-left: 14.634vw;
}
.publicr .inBox01 .photo01 {margin-bottom: 0.915vw;}
.publicr .inBox01 .photo01 img {
    width: 100%;
    height: auto;
}
.publicr .inBox02 {
    grid-template-columns: 30% 1fr;
    gap: 5vw;
    padding-bottom: 3.659vw;
}
.publicr .inBox02 .photo02 {margin-top: 4.207vw;}
.publicr .inBox02 .photo02 img {
    width: 100%;
    height: auto;
}

/* publicr01
-------------------------------------*/
.publicr01 .inBox02 .txt-box::after {
    width: 10.976vw;
    height: 15.366vw;
    bottom: -0.061vw;
    right: 9.207vw;
}

/* publicr02
-------------------------------------*/
.publicr02 {
    margin-bottom: 12.805vw;
}
.publicr02 h3 {
    margin-bottom: 4.329vw;
}
.publicr02 .inBox01 {
    align-items: center;
    padding-bottom: 4.207vw;
}
.publicr02 .inBox01 .photo01 {margin-bottom: 1.707vw;}
.publicr02 .inBox02 .photo02 {margin-top: 2.805vw;}
.publicr02 .inBox02 .txt-box::after {
    width: 10.976vw;
    height: 15.854vw;
    bottom: -0.61vw;
    right: 9.207vw;
}
}


/* ========================================
@media screen and (max-width: 767px)
======================================== */
@media screen and (max-width: 767px) {
/* mv
-------------------------------------*/
.mv {
    background: url(../images/publicr/mv-bg_sp.jpg) no-repeat center;
    background-size: cover;
    padding: 17.5vw 0 23.8vw;
    margin-top: 2vw;
}
.mv h2 {
    color: #FFF;
    text-align: center;
    font-size:5.314vw;
    font-weight: 700;
    line-height: 1.4545;
    letter-spacing: -0.08em;
    margin-bottom: 6.1vw;
}
.mv .txt {
    color: #FFF;
    font-size:3.14vw;
    font-weight: 400;
    line-height: 1.69231;
    width: 72.71vw;
    margin-inline: auto;
}

/* worries
-------------------------------------*/
.worries {
    width: 94.20vw;
    margin-inline: auto;
}
.worries .upper {
    background: url(../images/publicr/worries-bg-t_sp.png)no-repeat center;
    background-size: cover;
    padding: 7.25vw 0 14.01vw;
    position: relative;
}
.worries .upper::after {
    position: absolute;
    content: "";
    background: url(../images/publicr/worries-arrow.svg)no-repeat;
    background-size: contain;
    width: 19.32vw;
    height: 9.66vw;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(50%);
}
.worries .upper .inner {
    width: 77.29vw;
    margin-inline: auto;
}
.worries .upper .name {
    font-size:4.348vw;
    font-weight: 700;
    line-height: normal;
    padding-bottom: 3.22vw;
    display: flex;
    justify-content: center;
    gap: 3.62vw;
    position: relative;
    align-items: baseline;
    padding-right: 1vw;
    margin-bottom: 6vw;
}
.worries .upper .name::after {
    position: absolute;
    content: "";
    background: #1a1a1a;
    width: 48.31vw;
    height: 0.48vw;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
.worries .upper .name span {
    font-size:3.623vw;
    font-weight: 700;
    line-height: 1.3333;
}
.worries .upper h2 {
    text-align: center;
    margin-bottom: 6.22vw;
}
.worries .upper .list {
    display: grid;
    gap: 2.90vw;
    position: relative;
}
.worries .upper .list li {
    color: #FFF;
    text-align: center;
    font-size:3.865vw;
    font-weight: 700;
    line-height: 1.4375;
    background: #1A1A1A;
    padding: 5.31vw 0;
    border-radius: 2.42vw;
}
.worries .upper .list li span {
    color: #FFE330;
}
.worries .bottom {
    background: url(../images/publicr/worries-bg-b.png)no-repeat center;
    background-size: cover;
    padding: 11.35vw 0 15.46vw;
    text-align: center;
}
.worries .bottom .lead {
    color: #FFF;
    text-align: center;
    font-size:5.072vw;
    font-weight: 700;
    line-height: 1.57143;
    position: relative;
    display: inline-block;
    letter-spacing: -0.08em;
}
.worries .bottom .lead::after {
    position: absolute;
    content: "";
    background: url(../images/publicr/worries-deco.png)no-repeat;
    background-size: contain;
    width: 29.47vw;
    height: 25.60vw;
    top: 1vw;
    right: -7.5vw;
}

/* worries01
-------------------------------------*/
.worries01 {
    margin-top: -9.7vw;
    margin-bottom: 9.66vw;
}

/* worries02
-------------------------------------*/
.worries02 {
    margin-bottom: 16.91vw;
}
.worries02 .bottom {
    padding: 17.39vw 0;
}
.worries02 .bottom .lead::after {
    top: 50%;
    transform: translateY(-50%);
    right: -0.5vw;
}

/* support
-------------------------------------*/
.support {
    background: url(../images/publicr/support-bg_sp.png)no-repeat center;
    background-size: cover;
}
.support .inner{
    padding: 15.70vw 0 14.73vw;
    position: relative;
}
.support .inBox {
    width: 89.37vw;
    margin-inline: auto;
    display: grid;
    margin-bottom: 11.59vw;
}
.support .ttl-box {margin-bottom: 19vw;}
.support .logo {
    text-align: center;
    margin-bottom: 3.5vw;
}
.support .logo img {
    width: 33.09vw;
}
.support h2 {
    text-align: center;
    color: #FFF;
    font-size:4.831vw;
    font-weight: 700;
    line-height: 1.45;
}
.support .list {
    display: grid;
    gap: 1.93vw;
    position: relative;
}
.support .list::before {
    position: absolute;
    content: "";
    background: url(../images/publicr/support-deco_sp.png)no-repeat;
    background-size: contain;
    width: 64.01vw;
    height: 28.02vw;
    top: -32vw;
    left:50%;
    transform: translateX(-50%);
    mix-blend-mode: color-dodge;
}
.support .list li {
    font-size:3.382vw;
    font-weight: 700;
    line-height: 1.42857;
    padding: 2.42vw 0 2.42vw 11.35vw;
    position: relative;
    background: #FFFFFF;
    border-radius: 0.97vw;
    height: 14.49vw;
    display: grid;
    align-items: center;
}
.support .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: 4.26vw;
    top: 50%;
    transform: translateY(-50%);
}
.support .photo {
    margin-bottom: 11.84vw;
    text-align: center;
}
.support .photo img {
    width: 100%;
    height: auto;
}
.support .lead {
    color: #FFF;
    font-size:5.072vw;
    font-weight: 700;
    line-height: 1.57143;
    text-align: center;
    letter-spacing: -0.08em;
}

/* publicr
-------------------------------------*/
.publicr .inner{
    width: 89.37vw;
    margin-inline: auto;
    padding: 15.22vw 0 0;
}
.publicr .enttl {
    color: #F2F2F2;
    font-size:12.077vw;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 6.04vw;
    text-align: center;
}
.publicr h3 {
    font-size:5.797vw;
    font-weight: 700;
    line-height: 1.458333;
    position: relative;
    margin-bottom: 9.66vw;
    text-align: center;
    order: 1;
    letter-spacing: -0.08em;
}
.publicr h3::after {
    position: absolute;
    content: "";
    background: #C93800;
    width: 9.66vw;
    height: 0.48vw;
    bottom: -4.03vw;
    left: 50%;
    transform: translateX(-50%);
}
.publicr h3 span {
    font-size:3.623vw;
    font-weight: 500;
    line-height: 1.4666;
    letter-spacing: -0.08em;
    display: block;
    margin-bottom: 3.14vw;
}
.publicr .txt {
    font-size:3.382vw;
    font-weight: 400;
    line-height: 1.85714;
    margin-bottom: 6.4vw;
    position: relative;
    z-index: 2;
    order: 3;
}
.publicr .inBox01 {
    display: grid;
    position: relative;
}
.publicr .inBox01 .txt-box {
    display: contents;
}
.publicr .inBox01 .photo01 {
    order: 2;
    margin-bottom: 4.59vw;
}
.publicr .inBox02 {
    display: grid;
    position: relative;
    z-index: 2;
}
.publicr .inBox02 .txt-box {
    position: relative;
}
.publicr .inBox02 .txt:nth-last-of-type(1) {
    margin-bottom: 0;
}


/* publicr02
-------------------------------------*/
.publicr02 {
    margin-bottom: 29.83vw;
}

}