@charset "UTF-8";
:root {
  --txtcolor:#262626;
  --color-bg: #fff;
  --color-bg-rgb: 255, 255, 255;
  --color-gray: #F5F5F5;
  --color-gray02: #C3C7CD;
  --color-footer-bg: #3788DE;
  --text-black:#101820;
  --main-gray-color:#E5E5E5;
  --color-primary:#3788DE;
  --color-secondary:#FFAB1A;
  --color-danger:#ff0000;
  --font-langJa:"Noto Sans JP",sans-serif;
  --font-langEn: "Poppins", sans-serif;
  --font-langNum: "Poppins", sans-serif;
  --pc-width:1400;
  --contents-width:1272;
  --contents-width-px:calc(var(--contents-width) * 1px);
  --blue1: linear-gradient(180deg, #3788DE 0%, #37BADE 100%);
  --blue2: #2F59AD;
  --blue4:linear-gradient(270deg, #285DC7 3.34%, #2F59AD 100%);
  --radius-xs: 8px;
  --radius-sm: 16px;
  --radius-md: 24px;
  --radius-lg: 32px;
}

/* 共通 */

.bg-gr{
    background-color: var(--blue1);
}

.bg-gray {
    background-color: var(--color-gray);
}

.poppins-bold {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: normal;
  }

.rubik {
  font-family: "Rubik", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

.sub_hero {
    width: 100%;
    height: 400px;
    color: #fff;
    line-height: 1;
    font-weight: bold;
    padding: 100px 0 0 64px ;
}

.subhero_ttl {
    display: block;
    font-size: 7.1rem;
    margin-bottom: 24px;
}

.sub_hero h2 {
    font-size: 2.1rem;
    letter-spacing: 0.1em;
}


.inner {
    max-width: 91%;
    margin: 0 auto;
}


.subttl {
    line-height: 1;
    display: block;
    font-size: 1.6rem;
    letter-spacing: 1;
}

h3 {
    font-size: 3.8rem;
    margin-bottom: 64px;
    letter-spacing: 0.05em;
    font-weight: bold;
}

p {
    line-height: 1.8;
}

.u-bl {
    color: var(--color-primary);
}

@media (max-width: 767px){
    .inner {
        max-width:89.33%;
    }
    .sub_hero {
        padding: 160px 0 0 20px ;
        height: 481px;
    }

    .subhero_ttl {
    font-size: 5.6rem;
    margin-bottom: 32px;
}
    .subttl {
    font-size: 1.2rem;
}
    .h3 {
        font-size: 2.8rem;
    }

    .c-title01 {
        font-size: 2.8rem;
    }
}


/*********************
        about
**********************/

.about .sub_hero {
    background: url('../img/about/subhero_bg.webp') center center / cover no-repeat;
}

.bg-gr{
    background: var(--blue1);
}

.aboutus {
    padding: 30px 0 227px 0;
    position: relative;
}

.c-bubble.services-bb {
    position: absolute;
    bottom: 74px;
    right: 4.5714%;
    transform: translateX(-50%);
    z-index: 1;
    width: 40px;
}

.philosophy {
    text-align: center;
    color: #fff;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 200px;
}

.philosophy .subttl{
    display: block;
    font-size: 1.6rem;
    color: var(--color-secondary);
    margin-bottom: 16px;
    letter-spacing: 1;
}

.philosophy_ttl {
    position: relative;
    display: inline-block;
    line-height: 1;
    font-size: 4.4rem;
    letter-spacing: 0.2em;
}

.philosophy_ttl::before,
.philosophy_ttl::after{
    position: absolute;
    display: block;
    content: '';
    background-image: url(../img/about/comma.svg);
    width: 115px;
    height: 67px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.3;
}

.philosophy_ttl::before {
    top: -71px;
    left: -74px;
}

.philosophy_ttl::after {
    transform: rotate(180deg);
    right: -74px;
    bottom: -72px;
}

.tablet-only {
    display: none;
}

@media ( max-width:1024px) {
    .tablet-only {
        display:block;
    }
    .philosophy_ttl {
        line-height: 1.875;
    }
}

@media (max-width:767px) {
    .about .sub_hero {
    background: url('../img/about/subhero_bg_sp.webp') center center / cover no-repeat;
}
    
}

.philosophy h3 {
    margin-bottom: 90px;
    letter-spacing:0.05em
}

/*********************************
            メッセージ
*********************************/

.message {
    color: var(--txtcolor);
}


.message-box {
    display: flex;
    position: relative;
}

.about-man_guid {
    position: absolute;
    display: block;
    width: 100px;
    aspect-ratio: 1 / 1;
    top:-64px;
    left: 0;
    z-index: 10;
    transform: scale(-1, 1);
}


.message .subttl {
    color: var(--color-primary);
}

.message-text {
    position: relative;
    padding: 64px 10% 80px 6.2%;
    background-color: #fff;
    margin-left: calc(50% - 50vw);
    padding-left: calc(50vw - 50% + 6.2%);
    border-radius: 0 16px 16px 0;
    max-width: 60vw;
}

.message-text p {
    line-height: 180%;
    font-weight: 600;
}

.pd-name {
    text-align: right;
    margin-top: 20px;
}

.message-img {
    position: absolute;
    left: calc(100% - 61px);
    top: 13.722%;
    width: 33.7vw;
    max-width: 472px;
    z-index: 1;
}

.message-img img {
    border-radius: 16px;
}

@media (min-width:768px) and (max-width:1024px){
    .message-img{
        width:41vw;
    }
}

@media (max-width:767px) {
    .aboutus {
        margin-top: -35px;
        z-index: 1;
        position: relative;
        padding: 0 0 160px;
    }
    .philosophy {
        margin-bottom: 171px;
    }

    .philosophy .subttl{
    font-size: 1.2rem;
    margin-bottom: 24px;
}
    .philosophy h3 {
        font-size: 2.8rem;
        margin-bottom: 64px;
    }

    .philosophy_ttl {
        width: 100%;
        display: block;
            font-size: 3.2rem;
    letter-spacing: 0.05em;
    }
    .philosophy_ttl::before,
    .philosophy_ttl::after{
        width: 66px;
        height: 44.13px;
        opacity: 0.3;
    }

    .philosophy_ttl::before {
        top: -35px;
        left: 0;
    }

    .philosophy_ttl::after {
        transform: rotate(180deg);
        right: 0;
        top:calc(100% - 13px);
    }

    /*      spメッセージ */
    .message-text {
       width:100%;
       max-width: 100%;
       margin:0 auto;
       border-radius: var(--radius-sm);
       padding:64px 28px;

    }

   .message-img {
    position: static;
    width: 100%;
    max-width: 100%;
    margin-bottom: 40px;
   }

   .about-man_guid {
    width: 80px;
    top:-62px;
    left: 20;
}

    
}


/* 企業詳細 */

.companyinfo {
    padding-bottom: 220px;
}
.companyinfo_bg {
    background-image:url(../img/about/company_bg.webp) ;
    opacity: 0.6;
    height: 600px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.bg_gr {
    background-color: var(--color-gray);
}

.companyinfo .inner {
    width: max(980px , 70%);
    margin: -178px auto 0;
    background-color: #fff;
    padding: 88px 0 120px;
    border-radius: 16px;
    position: relative;
    z-index: 1;
}

.about-man_box {
    position: absolute;
    width: 100px;
    aspect-ratio: 1 / 1;
    top:-61px;
    right:-20px;
      -webkit-animation: coma2 1s steps(1) infinite;
          animation: coma2 1s steps(1) infinite;
}

.about-man_stand {
    position: absolute;
    width: 100px;
    aspect-ratio: 1 / 1;
    transform: scale(-1, 1);
    bottom:-77px;
    left: 0;
}

.about-man_spana {
    position: absolute;
    width: 100px;
    aspect-ratio: 1 / 1;
    bottom:-56px;
    left: 64px;
      -webkit-animation: coma3 1.4s steps(1) infinite;
          animation: coma3 1.4s steps(1) infinite;
}

.about-man_ {
    position: absolute;
    width: 100px;
    aspect-ratio: 1 / 1;
    transform: scale(-1, 1);
    bottom:-77px;
    left: 0;
}

.about-kid_orange {
    position: absolute;
    width: 100px;
    aspect-ratio: 1 / 1;
    bottom:-63px;
    right:0;
      -webkit-animation: coma2 0.8s steps(1) infinite;
        animation: coma2 0.8s steps(1) infinite;
}

.about-kid_yellow {
    position: absolute;
    width: 100px;
    aspect-ratio: 1 / 1;
    bottom:-31px;
    right:51px;
          -webkit-animation: coma2 0.6s steps(1) infinite;
        animation: coma2 0.6s steps(1) infinite;
}

.companyinfo_box {
    width:73.877%;
    max-width:724px;
    margin: 0 auto;
}

.companyinfo .c-title01 {
    margin-bottom: 40px;
}

.companyinfo_tbl {
    margin: 0 auto;
    width:88.39%;
    max-width: 640px;
    border-collapse: collapse;
    text-align: left;
    table-layout: auto;
}

.companyinfo_tbl tr{
    border-bottom: 1px solid var(--color-gray02);
}

.companyinfo_tbl tr:last-child {
    border-bottom: none;
}

.companyinfo_tbl th,
.companyinfo_tbl td {
    padding: 24px 0;
}

.companyinfo_tbl th {
    width: 23%;
    color: var(--color-primary);
    font-weight: 700;
}

.companyinfo_tbl td {
    padding-left: 32px;
}

.companyinfo h4 {
    margin: 72px 0 40px 0;
    text-align: center;
    font-size: 2.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.licenses {
    margin: 0 auto;
    max-width: 640px;
    font-size: 1.4rem;
}

.licenses_list {
    list-style: none;
    display: flex;
    column-gap: 24px;
}

.licenses_list .col {
    flex: 1;
}

.licenses_list li {
    padding: 16px 0;
    border-bottom: 1px solid var(--color-gray02);
    font-weight: 700;
}

.licenses_list li::before {
    content: "";
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: var(--color-primary);
    margin-right: 8px;
}

.licenses_list li:last-child {
    border-bottom:none;
}

.license-note {
    display: inline-block;
    font-weight: 400;
    padding-left: 17px;
}

.source {
    display: block;
    font-weight: 400;
    text-align: right;
}




.qualification{
    margin: 0 auto;
    max-width: 640px;
    font-size: 1.4rem;
}

.qualification h5 {
    color: var(--color-primary);
    font-weight: 700;
    margin: 32px 0 16px 0;
}


.qualification_list {
    list-style: none;
    display: flex;
    column-gap: 24px;
}
.qualification_list .col {
    flex: 1;
}

.qualification_list li {
    padding: 8px 0;
    border-bottom: 1px solid var(--color-gray02);
}


@media (max-width: 767px) {
.companyinfo{
    padding-bottom: 260px;
}
 .companyinfo_bg {
    height: 545px;
    background-image:url(../img/about/company_bg_sp.webp) ;
    opacity: 1;
    }
    
.companyinfo .inner {
    width: 100%;
    margin: -248px auto 0;
    padding: 56px 7.88%;
}

.companyinfo_box {
    width: 100%;
}

.companyinfo_tbl{
    width: 100%;
}

.companyinfo h4 {
    font-size: 2.4rem;
    text-align: left;
    margin: 56px 0 16px;

}

.companyinfo_tbl.office th {
    display: block;
    width: 100%;
    padding-bottom: 0;
}

.companyinfo_tbl.office td {
    display: block;
    width: 100%;
    padding-left: 0;
}

.licenses_list {
    flex-direction: column;
}

.qualification_list {
    flex-direction: column;
}

.about-man_box {
    width: 80px;
    top:-40px;
    right:0;
}

.about-man_spana {
    width: 80px;
    bottom:-67px;
    left:57px;
}

.about-man_stand {
    width: 80px;
    bottom:-126px;
}

.about-kid_orange {
    width: 80px;
    bottom:-126px;
}

.about-kid_yellow {
    width: 80px;
    bottom:-67px;
    right:34px;
}



}

/******************
     数字で見る 
 ******************/

.numbers .inner {
    margin: 0 auto;
    padding:16px 0 255px 0;
    position: relative;
    width: max(980px , 70%);
}

.numbers .inner::after {
 content: '';
    display: block;
    position: absolute;
    bottom: 50px;
    background-image: url('../img/about/history.svg');
    background-repeat: no-repeat;
    background-size: contain;
    left: 50%;
    transform: translateX(-50%);
    width: 106%;
    max-width: 1044px;
    aspect-ratio: 1022 / 103;
}

.data-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    gap: 16px;
}

.data-list-01,
.data-list-02,
.data-list-03,
.data-list-04 {
    background-color:var(--color-gray);
    border-radius: var(--radius-sm);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

}

.data-list-01 {
    grid-row: 1 / 2;
    grid-column:1 / 3;
}

.data-list-01 img {
    width: 240px;
    margin-right: 48px;
}

.data-list-02 {
    grid-row: 2 / 3;
    grid-column: 1 / 2; 
}

.data-list-02 img {
    width: 92px;
    margin-right: 52px;
    margin-top: 24px;
}

.data-list-03 {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
}

.data-list-03 img {
    margin-right: 47px;
    margin-top: 26px;
}

.data-list-04 {
    grid-row: 3 / 4;
    grid-column: 1 / 3;
}

.data-list-04 img {
    width: 140px;
    margin-right: 80px;
    margin-top: 27px;
}

.numbers .text_box h4 {
    color: var(--color-primary);
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 40px 0 24px 40px;
    line-height: 1;
}


.numbers .text_box .note {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-gray02);
    padding: 0 0 12px 16px;
    line-height: 1;
}

/* カウンター */
.num {
    color: var(--color-secondary);
    font-size: 8.0rem;
}

.unit {
    color: var(--color-primary);
    font-size: 2.8rem;
    font-weight: 700;
}

.data-counter {
    margin-left: 76px;
    line-height: 1;
    margin-bottom: 30px;
}

@media (max-width: 767px) {
    .numbers .inner {
    padding:0 0 228px 0;
    width: 100%;
}

.numbers .inner::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 69px;
    background-image: url('../img/about/history_sp.svg');
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    aspect-ratio: 8 / 1;
}

.data-list {
    display: flex;
    flex-direction: column;
}


.data-list-01,
.data-list-02,
.data-list-03,
.data-list-04 {
    background-color:var(--color-gray);
    border-radius: var(--radius-sm);
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

}

.data-list-01 {
    flex-direction: column;
    align-items: flex-start;
}


.data-list-01 img {
    display: block;
    width: min(240px, 71.64%);
    margin: 0 auto;
    margin-bottom: 14px;

}

.data-list-01 .note{
    font-size: 1.0rem;
    font-weight: 700;
    color: var(--color-gray02);
    padding: 0 0 16px 16px;
    line-height: 1;
    text-align: left;
}

.data-list-02 {

}

.data-list-02 img {
    width: 28.65%;
    min-width: 96px;
    margin-right: 7.46%;
    margin-bottom: 18px;
}

.data-list-03 {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
}

.data-list-03 img {
    width:26.26%;
    min-width: 88px;
    margin-right: 7.164%;
    margin-bottom: 20px;
}

.data-list-04 {
    position: relative;
}

.data-list-04 .text_box {
    width: 100%;
}

.data-list-04 img {
    position: absolute;
    width: 33.4%;
    right: 24px;
    top: 32px;
    margin: 0;
}

.data-list-04 .num_sp{
    text-align: right;
    margin-left: 29.55%;
}

.numbers .text_box h4 {
    padding: 32px 0 24px 24px;
}

.numbers .text_box .note {
    font-size: 1.0rem;
    padding: 0 0 16px 16px;
}

/* カウンター */
.num {
    font-size: 19.2vw;
}

.data-list-01 .num {
    font-size: 16vw;
}

.unit {
    font-size: 7.46vw;
}

.data-counter {
    margin-left: 40px;
    margin-bottom: 24px;
}

    
}
/************************
          history 
**************************/

.history {
    padding: 20px 0 174px 0;
}



.history .c-title01{
    position: relative;
}

.history .c-title01::after {
    position: absolute;
    left: 50%;
    bottom: -24px;
    transform: translateX(-50%);
    content: "";
    display: block;
    width: 36px;
    height: 20px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-image: url(../img/common/title_wave.svg);
    mask-image: url(../img/common/title_wave.svg);
    background-color: var(--color-secondary);
}

.history_list {
    width: min(866px, 77%);
    margin: 0 auto;
}


.history_list th {
    width: 94px;
    color: var(--color-primary);
    position: relative;
}

.history_list th::before {
        content: " ";
        display: block;
        width: 1px;
        background: var(--color-gray02);
        height: 100%;
        position: absolute;
        top: 9px;
        right: -36px;
}

.history_list th::after {
        content: " ";
        display: block;
        width: 9px;
        height: 9px;
        background: var(--color-primary);
        border-radius: 4.5px;
        position: absolute;
        top: 9px;
        right: -40px;
}

.history_list td {
    padding-bottom: 42px;
}

.history_list tr:last-child td {
    padding-bottom: 0;
}

.year {
    font-size: 2.4rem;
    letter-spacing: 0.05em;
    font-weight: 700;
    position: relative;
    line-height: 1;
}

.nen {
    font-size: 1.6rem;
    font-weight: 500;
}

.era-name {
    position: absolute;
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--color-gray02);
    bottom:-12px;
    right: -16px;
}

.history_list dl {
    display: table;
}

.month ,
.history_txt {
    display: table-cell;
}

.month {
    width: 114px;
    font-weight: 500;
    line-height: 1.8;
}
.history_txt {
    padding-left: 32px;
}

@media (max-width:767px) {
    .history {
        width: 100%;
    padding: 0 0 160px 0;
}

.history_list {
    width: 100%;
}


.history_list th {
    width: 74px;
}

.history_list th::before {
        top: 8px;
        right: -12px;
}

.history_list th::after {
        content: " ";
        display: block;
        width: 9px;
        height: 9px;
        background: var(--color-primary);
        border-radius: 4.5px;
        position: absolute;
        top: 9px;
        right: -16px;
}

.history_list td {
    padding-bottom: 32px;
}

.history_list tr:last-child td {
    padding-bottom: 0;
}

.year {
    font-size: 2.0rem;
}

.nen {
    font-size: 1.4rem;
}

.era-name {
    font-size: 1.2rem;
    right: -8px;
}

.month {
    width: 55px;
}
.history_txt {
    padding-left: 16px;
}
}

/************************************
            私たちにできること
*************************************/

.details .sub_hero {
    background: url('../img/services/services_bg_pc.webp') center center / cover no-repeat;
}

.services-wrap {
    position: relative;
    width: 100%;
    overflow-x: hidden;
}

.c-bubble.ser-top-bb2 {
    position: absolute;
    bottom: 199px;
    right: 14.642%;
    transform: translateX(-50%);
    z-index: 1;
    width: 40px;
}

.service01 {
    position: relative;
    padding-left: max((100% - var(--contents-width-px)) / 2, 4%);
    margin-bottom: 200px;
}

.service02 {
    position: relative;
    padding-right: max((100% - var(--contents-width-px)) / 2, 4%);
    margin-bottom: 380px;

}

.services .c-title01  {
    color: #fff;
    margin-bottom: 137px;
}

.services .subttl {
    color: var(--color-secondary);
} 

.service-txt {
    display: flex;
    flex-direction: column;
    gap: 48px;
    padding: 80px 64px;
    background-color: #fff;
    border-radius: var(--radius-sm);
    width: 54.714286%;
    max-width: 766px;
    position: relative;
    z-index: 1;
}

.service-ttl  {
    color: var(--txtcolor);
    font-size: 3.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    position: relative;
}

.service-ttl::after {
    position: absolute;
    left: 0;
    bottom: -24px;
    content: "";
    display: block;
    width: 42px;
    height: 20px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-image: url(../img/common/title_wave.svg);
    mask-image: url(../img/common/title_wave.svg);
    background-color: var(--color-secondary);
}

.service-img img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.service01 .service-img,
.service02 .service-img {
    position: absolute;
    overflow: hidden;
    bottom: -80px;
    width: calc(688 / var(--pc-width) * 100%);
    height: 470px;
}
.service01 .service-img {
    right: 0;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.service02 .service-img {
    left: 0;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.service01 .service-txt {
    position: relative;
}

.service02 .service-txt {
     margin-left: auto; 
     position: relative;
}

.man_spana.ser-man_spana {
    position: absolute;
    width: 100px;
    height: 100px;
    left: 6px;
    bottom: -78px;
      -webkit-animation: coma3 1s steps(1) infinite;
          animation: coma3 1s steps(1) infinite;
}
.c-bubble.ser-top-bb1 {
    position: absolute;
    top: -71px;
    right: -90px;
    transform: translateX(-50%);
    z-index: 1;
    width: 40px;
}

.ser-man_guid {
    position: absolute;
    width: 100px;
    height: 100px;
    left: -15px;
    top: -74px;
    transform: scale(-1, 1);
      -webkit-animation: coma2 1s steps(1) infinite;
          animation: coma2 1s steps(1) infinite;
}

.ser-man_walk {
    position: absolute;
    width: 100px;
    height: 100px;
    right: 14px;
    bottom: -79px;
      -webkit-animation: coma2 0.8s steps(1) infinite;
          animation: coma2 0.8s steps(1) infinite;
}

@media (max-width: 767px) {
    .details .sub_hero {
    background: url('../img/services/services_bg_sp.webp') center center / cover no-repeat;
}

    .service01,
    .service02 {
        padding: 0 5.33333%;
    }

    .service01 {
    margin-bottom: 366px;
}

.service02 {
    margin-bottom: 466px;

}

   .service-txt {
    gap: 56px;
    padding: 56px 28px 80px;
    width: 100%;
    z-index: 0;
    }

    .service-ttl  {
    font-size: 2.4rem;
    } 

    .service01 .service-img,
    .service02 .service-img {
    position: absolute;
    overflow: hidden;
    bottom: -186px;
    width: 88.2666%;
    height: 226px;
}

.man_spana.ser-man_spana {
    width: 80px;
    height: 80px;
    left: 1px;
    top: -63px;
}

.c-bubble.ser-top-bb1 {
    top: -76px;
    right: 15px;
    width: 30px;
}

.c-bubble.ser-top-bb2 {
    TOP: 108px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    width: 30px;
}

.ser-man_guid {
    width: 80px;
    height: 80px;
    left: 0;
    top: -54px;
}

.ser-man_walk {
    position: absolute;
    width: 80px;
    height: 80px;
    right: 3x;
    bottom: -298px;
      -webkit-animation: coma2 0.8s steps(1) infinite;
          animation: coma2 0.8s steps(1) infinite;
}

}

/*************************
    都市環境ができること
***************************/
.card-wrap {
    padding-bottom: 256px;
}

.card-box {
    max-width: 1272px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(2, 1fr);
    margin: 0 auto;
    padding: 0 calc(56 / var(--pc-width) * 100%);
    gap: calc(56 / var(--pc-width) * 100%) calc(40 / var(--pc-width) * 100%);
}

.g-01 { grid-area: 1 / 1 / 2 / 3; }
.g-02 { grid-area: 1 / 3 / 2 / 5; }
.g-03 { grid-area: 1 / 5 / 2 / 7; }
.g-04 { grid-area: 2 / 2 / 3 / 4; }
.g-05 { grid-area: 2 / 4 / 3 / 6; }




.service-card {
    width: 100%;
    height: 100%;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    background-color: var(--color-gray);
    border-radius: var(--radius-xs);
    padding: 40px 0 26px 0;
    position: relative;
    transition: all 0.3s ease-in-out;
}


.card-ttl {
    font-size: 2.4rem;
    color: var(--color-primary);
    font-weight: 600;
    margin-left: 8.8888%;
    position: relative;
    transition: all 0.3s ease-in-out;
}

.card-ttl::after {
    position: absolute;
    left: 0;
    bottom: -16px;
    content: "";
    display: block;
    width: 36px;
    height: 16px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-image: url(../img/common/title_wave.svg);
    mask-image: url(../img/common/title_wave.svg);
    background-color: var(--color-secondary);
}

.card-img {
    margin: 0 auto;
    padding: 0 11.111%;
}

.card-text {
    padding: 0 12.222%;
    padding-bottom: 20px;
}

.view-more {
    font-size: 1.4rem;
    letter-spacing: 0.1em;
    text-align: right;
    position: relative;
    margin-top: auto;
    margin-right: 11.94%;
    transition: all 0.3s ease-in-out;
}

.view-more::after {
    position: absolute;
    right: -10px;
    top:50%;
    transform: translateY(-50%);
    content: "";
    display: inline-block;
    margin-left: 10px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-image: url(../img/services/icn-arrow.svg);
    mask-image: url(../img/services/icn-arrow.svg);
    background-color: var(--color-primary);
    width: 5px;
    aspect-ratio: 5 / 6;
    transition: all 0.3s ease-in-out;
}

.service-card:hover {
    background-color: var(--color-primary);
    color: #fff;
}

.service-card:hover .card-ttl {
    color: #fff;
}

.service-card:hover .view-more {
    color: #fff;
}

.service-card:hover .view-more::after {
    background-color: #fff;
    right: -18px;
}

@media (min-width:768px) and (max-width:1024px) {
    .card-box {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
    }

    .g-01 { grid-area: 1 / 1 / 2 / 3; }
    .g-02 { grid-area: 1 / 3 / 2 / 5; }
    .g-03 { grid-area: 2 / 1 / 3 / 3; }
    .g-04 { grid-area: 2 / 3 / 3 / 5; }
    .g-05 { grid-area: 3 / 2 / 4 / 4; }
}

@media (max-width:767px) {
    .card-wrap {
        padding-bottom: 220px;
    }

    .card-box {
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 56px 0;
    padding: 0;
    }

    .g-01 { grid-area: 1 / 1 / 2 / 2; }
    .g-02 { grid-area: 2 / 1 / 3 / 2; }
    .g-03 { grid-area: 3 / 1 / 4 / 2; }
    .g-04 { grid-area: 4 / 1 / 5 / 2; }
    .g-05 { grid-area: 5 / 1 / 6 / 2; }

    .card-text {
    padding: 0 12.222%;
    }

    .service-card {
        max-width: 100%;
    }
}

/*****************************
        各課詳細
******************************/

.fnav__wrap {
    text-align: center;
    position: sticky;
    top:70px;
    z-index: 200;
}

@media (max-width:1024px) {
    .fnav__wrap{
        display: none;
    }
    
}

.fixed-nav {
    display: inline-flex;
    padding: 16px 64px 16px 32px;
    align-items: center;
    gap: 16px;
    background-color: #fff;
    border-radius: 24px;
    border: 2px solid #C3C7CD;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    }

.fnav__link__child {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    line-height: 1;
    font-size: 1.5rem;
}
.fnav__img {
    width:68px;
}

.fnav__text {
    position: relative;
    letter-spacing: 0.1em;
    transition: all 0.1s;
}

.fnav__link__child:hover .fnav__text {
    opacity: 0.6;
}

.fnav__text::after {
    position: absolute;
    content: "";
    background-image: url(../img/services/icn-arrow.svg);
    width: 5px;
    height: 6px;
    right: -12px;
    top: 50%;
    transform: translateY(-50%);
}

.fnav__item__child {
    position: relative;
    padding-right: 30px;
}

.fnav__item__child:not(:last-child)::after {
    position: absolute;
    content: "";
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width:2px;
    height: 30px;
    background-color: var(--color-gray);
}


.detail-wrap {
    margin:0 auto;
    padding: 0 4.08%;
    border: 4px solid var(--color-primary);
    border-radius: var(--radius-sm);
    padding: 80px 0 100px;
    max-width: 1168px;
    position: relative;
}


.c-bubble.dtl-bb {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    width: 30px;
}

.detail-ttl {
    font-size: 3.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #fff;
    position: relative;
    margin-bottom: 45px;
    margin-left:  6.289% ;
    line-height: 1;
}

.detail-ttl::after {
    position: absolute;
    left: 0;
    bottom: -24px;
    content: "";
    display: block;
    width: 36px;
    height: 16px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-image: url(../img/common/title_wave.svg);
    mask-image: url(../img/common/title_wave.svg);
    background-color: var(--color-secondary);

}

.detail-wrap.kanri1 {
    background-color: var(--color-primary);
    position: relative;
    margin-top: 56px;
}

@media (max-width:1024px) {
    .detail-wrap.kanri1{
        margin-top: 0;
    }
    
}

.detail-wrap.kanri2 {
    background-color: #3795DE;
    position: relative;
    /* margin-top: -220px; */
    z-index: 1;
    border-color: #3795DE;
}

.detail-wrap.kankyo {
    background-color: #37A0DE;
    position: relative;
    /* margin-top: -220px; */
    z-index: 1;
    border-color: #37A0DE;
}

.detail-wrap.setsubi {
    background-color: #37ADDE;
    position: relative;
    /* margin-top: -220px; */
    z-index: 1;
    border-color: #37ADDE;
}

.detail-wrap.seisou {
    background-color: #37BADE;
    position: relative;
    /* margin-top: -220px; */
    z-index: 1;
    border-color: #37BADE;
}

.detail-wrap::before {
    position: absolute;
    content: "";
    background-repeat: no-repeat;
    background-size: contain;
    right: 20px;
    top: -40px;
    width: 280px;
    aspect-ratio: 7 / 5;

}

.detail-wrap.kanri1::before {
    background-image: url(../img/services/kanri1-pic.png);
}

.detail-wrap.kanri2::before {
    background-image: url(../img/services/card_02.png);
    right:-20px;
}

.detail-wrap.kankyo::before {
    background-image: url(../img/services/card_03.png);
}

.detail-wrap.setsubi::before {
    background-image: url(../img/services/card_04.png);
    right: -20px;
}

.detail-wrap.seisou::before {
    background-image: url(../img/services/card_05.png);
}

.detail-inner {
    background-color: #fff;
     padding: 0 5.4794% 64px;
}

.detail-item dl    {
    border-bottom: dotted 3px var(--color-secondary);
    padding: 40px 0;
}

.detail-item dl:last-child {
    border-bottom: none;
}

.detail-item dt {
    font-size: 1.9rem;
    font-weight: 600;
    margin-bottom: 32px;
    letter-spacing: 0.05em;
}

.detail-item dt::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--color-secondary);
    margin-right: 8px;
}

.detail-item img {
    max-width: 256px;
}

.detail-head {
    font-weight: 700;
    position: relative;
    letter-spacing: 0.05em;
}

.detail-head::before {
    content: "・";
    position: absolute;
    left: -1.2em;
    color: var(--color-secondary);
}

.dtl-pdt {
    padding-top: 40px;
}

.detail-txt {
    padding-left: 24px;
    flex: 1;
}

.sd-flex_1 {
    display: flex;
    align-items: flex-start;
    gap: 40px;
}

.sd-flex_1 .detail-img_wrap {
    width: calc((74.285714vw - 32px) / 3);
    max-width: 256px;
}


.sd-flex_2 {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.detail-img_wrap {
    display: flex;
    gap: 16px;
    justify-content: flex-end;
    
}

.detail-bg {
    padding-bottom: 100px;
    position: relative;
}

.detail-bg:nth-child(4) {
background: linear-gradient(to bottom, #fff 0px, #fff 220px, #f5f5f5 220px, #f5f5f5 100%);

}

.detail-bg:nth-child(3),
.detail-bg:nth-child(5) {
    background: linear-gradient(to bottom, #f5f5f5 0px, #f5f5f5 220px, #fff 220px, #fff 100%);
}

.detail-bg:last-child {
    padding-bottom: 160px;
    background: linear-gradient(to bottom, #fff 0px, #fff 220px, #f5f5f5 220px, #f5f5f5 100%);
}


.detail-bg:nth-child(4)::after,
.detail-bg:last-child::after {
      content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 120px;
  width: 100%;
  height: 100px;
  -webkit-mask-image: url(../img/common/bg_wave.svg);
          mask-image: url(../img/common/bg_wave.svg);
  -webkit-mask-repeat: repeat-x;
          mask-repeat: repeat-x;
  -webkit-mask-size: auto 100%;
          mask-size: auto 100%;
  -webkit-mask-position: bottom left;
          mask-position: bottom left;
  background-color: var(--color-primary);
  -webkit-animation: waveMove 10s linear infinite;
          animation: waveMove 10s linear infinite;
          background-color: var(--color-gray);
}

.detail-bg:nth-child(3)::after,
.detail-bg:nth-child(5)::after {
      content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 120px;
  width: 100%;
  height: 100px;
  -webkit-mask-image: url(../img/common/bg_wave.svg);
          mask-image: url(../img/common/bg_wave.svg);
  -webkit-mask-repeat: repeat-x;
          mask-repeat: repeat-x;
  -webkit-mask-size: auto 100%;
          mask-size: auto 100%;
  -webkit-mask-position: bottom left;
          mask-position: bottom left;
  background-color: var(--color-primary);
  -webkit-animation: waveMove 10s linear infinite;
          animation: waveMove 10s linear infinite;
          background-color: #fff;
}

.sd-pt40 {
    padding-top: 40px;
}

@media (max-width:767px) { 
    .detail-bg {
    padding-bottom: 260px;
}

.detail-bg:last-child {
    padding-bottom: 160px;
}

.detail-wrap {
    margin:0 auto;
    padding: 0 5.97%;
    padding: 56px 0 64px;
}


.c-bubble.dtl-bb {
    position: absolute;
    bottom: 16px;
    width: 18px;
}

.detail-ttl {
    font-size: 2.4rem;
    margin-left: 5.97%;
}

.detail-wrap.kanri1 {
    background-color: var(--color-primary);
    position: relative;
}


.detail-wrap::before {
    right: 0;
    top: -8px;
    width: 47.76%;
    max-width: 180px;
}

.detail-inner {
     padding: 0 5.4794% 64px;
}

.detail-txt {
    padding-left: 24px;
}

.sd-flex_1 {
    flex-direction: column;
    align-items: center;
}

.detail-img_wrap {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    
}
.sd-flex_1 .detail-img_wrap {
    width: 100%;

}


.sd-flex_2 {
    align-items: center;
}

.detail-ttl {
        font-size: 2.8rem;
    }

.detail-bg {
    padding-bottom: 80px;
    position: relative;
}

.detail-bg:nth-child(4) {
background: linear-gradient(to bottom, #fff 0px, #fff 180px, #f5f5f5 180px, #f5f5f5 100%);

}

.detail-bg:nth-child(3),
.detail-bg:nth-child(5) {
    background: linear-gradient(to bottom, #f5f5f5 0px, #f5f5f5 180px, #fff 180px, #fff 100%);
}

.detail-bg:last-child {
    padding-bottom: 120px;
    background: linear-gradient(to bottom, #fff 0px, #fff 180px, #f5f5f5 180px, #f5f5f5 100%);
}


.detail-bg:nth-child(4)::after,
.detail-bg:last-child::after {
      content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 80px;
  width: 100%;
  height: 100px;
  -webkit-mask-image: url(../img/common/bg_wave.svg);
          mask-image: url(../img/common/bg_wave.svg);
  -webkit-mask-repeat: repeat-x;
          mask-repeat: repeat-x;
  -webkit-mask-size: auto 100%;
          mask-size: auto 100%;
  -webkit-mask-position: bottom left;
          mask-position: bottom left;
  background-color: var(--color-primary);
  -webkit-animation: waveMove 10s linear infinite;
          animation: waveMove 10s linear infinite;
          background-color: var(--color-gray);
}

.detail-bg:nth-child(3)::after,
.detail-bg:nth-child(5)::after {
      content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 80px;
  width: 100%;
  height: 100px;
  -webkit-mask-image: url(../img/common/bg_wave.svg);
          mask-image: url(../img/common/bg_wave.svg);
  -webkit-mask-repeat: repeat-x;
          mask-repeat: repeat-x;
  -webkit-mask-size: auto 100%;
          mask-size: auto 100%;
  -webkit-mask-position: bottom left;
          mask-position: bottom left;
  background-color: var(--color-primary);
  -webkit-animation: waveMove 10s linear infinite;
          animation: waveMove 10s linear infinite;
          background-color: #fff;
}
}

/*********************
        vehicles
**********************/

.vehicles .sub_hero {
    background: url('../img/vehicles/subhero_bg.webp') center center / cover no-repeat;
}
.vehicles .c-title01{
    position: relative;
    font-size: 3.8rem;
    font-weight: 700;
    letter-spacing: 0.2em;
}
.vehicles .c-title01::after {
    position: absolute;
    left: 0;
    bottom: -24px;
    content: "";
    display: block;
    width: 36px;
    height: 20px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-image: url(../img/common/title_wave.svg);
    mask-image: url(../img/common/title_wave.svg);
    background-color: var(--color-secondary);
}

.vehicles-list{
    position: relative;
    overflow-x: hidden;
    padding-top: 65px;
    padding-bottom: calc(91px + 116px);
}

.vehicles-list::before{
    position: absolute;
    z-index: 2;
    top:0;
    right: 0;
    content:'Vehicles';
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: var(--color-secondary, #FFAB1A);
    color: transparent;
    font-family: Poppins;
    font-size: 120px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: 0.1em;
}

.vehicles-list .outer{
    position: relative;
}
.vehicles-list .outer::before{
    content: '';
    position: absolute;
    right: 0;
    top:0;
    z-index: 1;
    display: block;
    background: #fff;
    height: 100%;
    width: calc(1335 / 1400 * 100%);
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.vehicles-list .outer::after{
    content: '';
    position: absolute;
    left: 0;
    top:116px;
    z-index: 0;
    display: block;
    background: #DDE2E9;
    height: 100%;
    width: calc(1335 / 1400 * 100%);
    border-radius:  0 var(--radius-sm) var(--radius-sm) 0;
}
.vehicles-list .inner{
    position: relative;
    padding-top: 40px;
    padding-bottom: 81px;  
    max-width: 952px;
    width: 82%;
    z-index: 2;
}


.card-list{
    margin-top: 36px;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 32px calc(56 /1335 * 100%);
}

.card-list .list-item{
    padding-bottom: 2em;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.card-list .list-item:hover img,.card-list .list-item:focus img{
    transform: scale(1.2);
}

.card-list .title{
    padding: 1em 0;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: 0.8px;
    border-bottom: 1px solid var(--color-gray02);
    width: 100%;
    order: 2;
}
.card-list .text{
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 180%;
    order: 3;
}
.card-list .thumb{
    order: 1;
}
.card-list .thumb img{
    width: 100%;
    height: auto;
    transition: transform 0.3s ease-in-out;
}
.card-list ul{
    order: 4;
}
.card-list .list-item ul li{
    display: flex;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.5;
}
.card-list .list-item span{
    display: block;
}
.card-list .list-head{
    margin-right: 1em;
    color: var(--blue2);
}

.ve_man_spana{
    position: absolute;
    top: -3%;
    left: -12%;
    width: 100px;
    -webkit-animation: coma3 1s steps(1) infinite;
    animation: coma3 1s steps(1) infinite;
}

.ve_man_guid{
    position: absolute;
    bottom: -1%;
    right: -5%;
    width: 100px;

}

@media (max-width:767px) {

    .vehicles .c-title01{
        font-size: 3.2rem;
    }

    .vehicles-list::before{
        top: 0.65em;
        font-size: 54px;
    }
    .vehicles-list .inner{
        width: calc(295 / 375 * 100%);
    }
    .card-list{
    grid-template-columns: repeat(1,1fr);
    }
    .ve_man_spana{
        top:auto;
        bottom: -1%;
        left: -5%;
        width: 82px;
    }
    .ve_man_guid{
        width: 82px;
    }
}

/******************************
        都市環境の強み
*******************************/
 .strength .sub_hero {
    background: url('../img/strengths/strengths_bg.webp') center center / cover no-repeat;
}


.points .subttl {
    color: var(--color-secondary);
}

.points .c-title01 {
    color: #fff;
    margin-bottom: 137px;
}

.point-wrap {
    padding-bottom: 380px;
}

.point-l{
    position: relative;
    padding-left: max((100% - var(--contents-width-px)) / 2, 4%);
    margin-bottom: 200px;
}

.point-r{
    position: relative;
    padding-right: max((100% - var(--contents-width-px)) / 2, 4%);
    margin-bottom: 200px;
}

.point-l:last-of-type {
    margin-bottom: 0;
}


.point-txt {
    display: flex;
    flex-direction: column;
    gap: 48px;
    padding: 80px 64px;
    background-color: #fff;
    border-radius: var(--radius-sm);
    width: 54.714286%;
    max-width: 766px;
    position: relative;
    z-index: 1;
}

.point-ttl  {
    color: var(--txtcolor);
    font-size: 3.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    position: relative;
}

.point-ttl::after {
    position: absolute;
    left: 0;
    bottom: -24px;
    content: "";
    display: block;
    width: 42px;
    height: 20px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-image: url(../img/common/title_wave.svg);
    mask-image: url(../img/common/title_wave.svg);
    background-color: var(--color-secondary);
}

.point-img img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.point-l .point-img,
.point-r .point-img {
    position: absolute;
    overflow: hidden;
    bottom: -100px;
    width: calc(688 / var(--pc-width) * 100%);
    height: 470px;
}
.point-l .point-img {
    right: 0;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.point-r .point-img {
    left: 0;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.point-l .point-txt {
    position: relative;
}

.point-r .point-txt {
     margin-left: auto; 
     position: relative;
}


.strength-man_guid{
    position: absolute;
    width: 100px;
    height: 100px;
    left: 166px;
    bottom: -73px;
    transform: scale(-1, 1);
}

.c-bubble.st-top-bb1 {
    position: absolute;
    top: -71px;
    right: -130px;
    transform: translateX(-50%);
    z-index: 1;
    width: 40px;
}

.c-bubble.st-top-bb2 {
    position: absolute;
    bottom: -182px;
    right:141px;
    transform: translateX(-50%);
    z-index: 1;
    width: 40px;
}

.st-man_walk {
    position: absolute;
    width: 100px;
    height: 100px;
    right: 132px;
    bottom: -69px;
      -webkit-animation: coma2 0.8s steps(1) infinite;
          animation: coma2 0.8s steps(1) infinite;
}

.st-man_spana {
    position: absolute;
    width: 100px;
    aspect-ratio: 1 / 1;
    transform: scale(-1, 1);
    bottom:-50px;
    right: 91px;
      -webkit-animation: coma3 1.4s steps(1) infinite;
          animation: coma3 1.4s steps(1) infinite;
}

@media (max-width: 767px) {
    .strength .sub_hero {
    background: url('../img/strengths/strengths_bg_sp.webp') center center / cover no-repeat;
}

.points .c-title01 {
    margin-bottom: 100px;
}
    .point-l,
    .point-r {
        padding: 0 5.33333%;
    }

    .point-l,
    .point-r {
    margin-bottom: 306px;
}

   .point-txt {
    gap: 56px;
    padding: 56px 28px 80px;
    width: 100%;
    z-index: 0;
    }

    .point-ttl  {
    font-size: 2.4rem;
    } 

    .point-wrap {
    padding-bottom: 486px;
}



    .point-l .point-img,
    .point-r .point-img {
    position: absolute;
    overflow: hidden;
    bottom: -186px;
    width: 88.2666%;
    height: 226px;  
}

.c-bubble.st-top-bb1 {
    top: -76px;
    right: 15px;
    transform: translateX(-50%);
    z-index: 1;
    width: 30px;
}

.c-bubble.st-top-bb2 {
    position: absolute;
    bottom: -272px;
    left:50%;
    transform: translateX(-50%);
    z-index: 1;
    width: 30px;
}

.strength-man_guid{
    width: 80px;
    height: 80px;
    left: 9px;
    top: -48px;
}

.st-man_walk {
    width: 80px;
    height: 80px;
    left: -10px;
    bottom: -286px;
}

.st-man_spana {
    width: 80px;
    bottom:-266px;
    right: 0;

}
}

/* 活動実績 */

.expanding .c-title01 {
    margin-bottom: 24px;
}

.expanding .subttl {
    color: var(--color-primary);
}

.map-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding-right: 4.571429%;
}

.map-l {
    width:54.857143%;
}
.map-l__img {
    position: relative;
    top:-72px;
    z-index: -1;
}

.map-l__img img {
    width:100%;
}

.map-r {
    flex: 1;
    padding-bottom: 200px;
}

.map-r_ttl{
    color: var(--color-primary);
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-align: center;
    margin: 24px 0;
}

.map-servicelist {
    width: 100%;
    max-width: 458px;
    margin: 0 auto;
}

.map-servicelist ul{
    position: relative;
}

.map-servicelist li {
    padding: 16px 64px 16px 80px;
    border-radius: var(--radius-sm);
    background-color:#37BADE;
    margin-bottom: 8px;
    position: relative;
}

.map-servicelist li::before {
    content: "";
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    aspect-ratio: 4 / 5;
}

.map-servicelist li:nth-of-type(1)::before {
    background-image: url(../img/strengths/pin_red.svg);
}

.map-servicelist li:nth-of-type(2)::before {
    background-image: url(../img/strengths/pin_yellow.svg);
}
.map-servicelist li:nth-of-type(3)::before {
    background-image: url(../img/strengths/pin_blue.svg);
}

.map-servicelist li:nth-of-type(4)::before {
    background-image: url(../img/strengths/pin_perple.svg);
}

.map-servicelist li:nth-of-type(5)::before {
    background-image: url(../img/strengths/pin_green.svg);
}

.map-list__ttl {
    color: #FFF;
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
    line-height: 1.2;
}

.map-list_txt {
    color: #fff;
    font-size: 1.4rem;
    letter-spacing: 0.05em;
    line-height: 1;
}

.map-list__ttl:nth-of-type(2) {
    margin-top: 12px;
}

.strength-man_box {
    position: absolute;
    width: 100px;
    height: 100px;
    bottom: -53px;
    right:-13px;
          -webkit-animation: coma2 1s steps(1) infinite;
          animation: coma2 1s steps(1) infinite;
}

@media (max-width:767px) {
    .expanding .c-title01 {
    margin-bottom: 40px;
    }


.map-wrap {
    display: flex;
    flex-direction: column;
    padding-right: 0;
}

.map-l {
    width:100%;
}
.map-l__img {
    top:0;
}

.map-r {
    flex: 1;
     padding:0 5.333333%;
    padding-bottom: 160px;
    width: 100%;
}

.map-servicelist {
    max-width: 100%;
}

.map-servicelist li {
    padding: 16px 32px 16px 56px;
}

.map-servicelist li::before {
    left: 16px;
    width: 24px;
    aspect-ratio: 4 / 5;
}
}