/* -------------------- common -------------------- */

html {
    font-size: 62.5%; /* 10px */
}
body {
    margin: 0;
    padding: 0;
    word-break: normal;
    box-sizing: border-box;
    background-color: #fff;

    font-family: "M PLUS 1";
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;

    letter-spacing : -0.07em;
    cursor: pointer;
}

.container {
    overflow: hidden;
}
.wrapper {
    margin:0 auto;
    padding-top: 80px;
    padding-bottom: 80px;
    width: 80%;
    max-width: 1400px;
    overflow: hidden;
}
a {
    cursor: pointer;
}
.pc_n {
    display: none;
}


ol, ul {　
    list-style: none;
}

/* h2 */
    .h2,
    .h2_small,
    .h2_middle,
    .h2_big {
        text-align: center;
        padding-bottom: 50px;
    }
    .h2_small img{
        width: 30%;
    }
    .h2_middle img{
        width: 70%;
    }
    .h2_big img {
        width: 100%;
    }
/* text */
.sec04_txt,
.sec03_txt,
.sec05_txt,
.sec08_txt {
    text-align: center;
    font-weight: 600;
    line-height: 7rem;
    font-size: 3.5rem;
}

/*padding*/
.pd_t20 {
    padding-top: 2rem;
}
.pd_b20 {
    padding-bottom: 2rem;
}
.pd_t40 {
    padding-top: 4rem;
}
.pd_b40 {
    padding-bottom: 4rem;
}
.pd_t60 {
    padding-top: 6rem;
}
.pd_b60 {
    padding-bottom: 6rem;
}
.pd_t100 {
    padding-top: 10rem;
}
.pd_b100 {
    padding-bottom: 10rem;
}

/*font-size*/
.notes {
    font-size: 1.2rem;
}
.px20 {
    font-size: 2rem;
}
.px25 {
    font-size: 2.5rem;
}
.px30 {
    font-size: 3rem;
}
.px35 {
    font-size: 3.5rem;
}
.px40 {
    font-size: 4rem;
}
.px50 {
    font-size: 5rem;
}
.px55 {
    font-size: 5.5rem;
}
.px65 {
    font-size: 6.5rem;
}
.px70 {
    font-size: 7rem;
}
.px80 {
    font-size: 8rem;
}
.emp {
    font-size: 1.5em;
}
/* font-weight */
.w6 {
    font-weight: 600;
}
.w7 {
    font-weight: 700;
}
.w8 {
    font-weight: 800;
}


/* font-color */
.wht {
    color: #fff;
}
.ylw {
    color:#fff100 ;
}
.gray {
    color: #333;
}
.blue {
    color: #045cb6;
}
.orange {
    color: #f36304;
}

/* font empashis*/
.dot_txt {
    text-emphasis:dot;
}

/* deco */
.highlight {
    text-decoration: underline;
    text-underline-offset: -0.1em;
    text-decoration-thickness: 0.4em;
    text-decoration-color: #fff500;
    text-decoration-skip-ink: none;
}
.highlight2 {
    text-decoration: underline;
    text-underline-offset: -0.05em;
    text-decoration-thickness: 0.4em;
    text-decoration-color: #f36404;
    text-decoration-skip-ink: none;
}

/* position */
.txt_c {
    text-align: center;
}

/* background */
#sec01 {
    background-color: #e5e5e5;
}

#footer {
    background-color: #f36404;
}
#cta,
#sec03 {
  background-color: #ffffff;
  background-image: repeating-linear-gradient(45deg, #c7f0cf80, #c7f0cf80 2px, transparent 2px, transparent 4px), repeating-linear-gradient(-45deg, #c7f0cf80, #c7f0cf80 2px, transparent 2px, transparent 4px);
}
#cta_white {
    background-color: #fff;
}
#sec07 {
    background-color: #f5f6fa;
}


/* -------------------- CTA -------------------- */
.button-49 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    padding: .7em 1.4em;
    border: 4px solid #f36304;
    border-radius: 50px;
    background-color: #fff;
    color: #f36304;
    font-size: clamp(16px, 2.5vw, 28px);
    white-space: nowrap;
    box-sizing: border-box;       /* ←追加ポイント */
    width: 100%;                  /* ←SP対応想定 */
    max-width: 100%;              /* ←親要素からはみ出さない */
}
.button-49 w6 pc_n tab_n {
    display: none;
}
.button-49 i {
    flex-shrink: 0;
    margin-right: 0.5em;
}
.button-49 span {
    min-width: 0;
}
a.cta_line_txt { /*ref:https://excellent.ne.jp/homepage/6562/*/
    display: block;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    margin: auto;
    padding: 3rem 4rem;
    font-weight: bold;
    background: #06c755;
    color: #fff;
    border-radius: 10px;
    transition: 0.5s;
    animation: move_d 2s infinite;
    box-shadow: 0 2rem 0 rgb(6, 199, 85, 0.5);
    position: relative;
    }
    @keyframes move_d {
        0% {box-shadow: 0 2rem 0 rgb(6, 199, 85, 0.5); top: 0px;}
        10% {box-shadow: 0 0 0 rgb(6, 199, 85, 0.5); top: 5px;}
        20% {box-shadow: 0 2rem 0 rgb(6, 199, 85, 0.5); top: 0px;}
        30% {box-shadow: 0 0 0 rgb(6, 199, 85, 0.5); top: 5px;}
        40% {box-shadow: 0 2rem 0 rgb(6, 199, 85, 0.5); top: 0px;}
    }
    a.cta_line_txt:hover {
        color: #06c755;
        background: #22884c;
    }

    /**/
    a.cta_line_txt::before {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        120deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-20deg);
    animation: shine 1.8s infinite;
    pointer-events: none;
    border-radius: 10px;
    }

@keyframes shine {
    0% {
        left: -75%;
    }
    100% {
        left: 125%;
    }
    }  
/**/

.cta_btn img {
        width: 100%;
}
.cta_tel {
    text-align: center;
    font-weight: 700;
    color: #2e9b20;
    font-size: 2vw;
    letter-spacing: 1px;
}

/* -------------------- MV -------------------- */
#MV {
    position: relative;
    margin: 0;
}
.pc_mv_bg {
    width: 100vw;
}
.pc_mv_points {
    position: absolute;
    width: 75%;
    left: 15%;
    bottom: 10%;
}
/*points-animation*/
.dokidoki {
    animation: dokidoki 1.8s infinite;
}
@keyframes dokidoki{
0% {
    transform: scale(1.01);
}
5% {
    transform: scale(1.03);
}
95% {
    transform: scale(1);
}
100% {
    -webkit-transform: scale(1);
}
}

/* -------------------- Floating -------------------- */
.FixedBanner {
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 1000;
    font-weight: 600;
    display: flex;
    justify-content: center;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.2);
    border-radius: 120px;
    width: 350px;
    height: 90px;
    letter-spacing: 1px;
}
.FixedBanner a {
    display: inline-block;
    width: calc(100% + 4px);
    height: calc(100% + 2px);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-decoration: none;
    background: #2e9b20eb;
    padding: 15px 30px;
    transition: 0.4s ease;
    transform-origin: 77.5% 50%;
    border-radius: 120px;
    z-index: 10;
    margin-top: -1px;
    margin-left: -2px;
    text-align: center;
}

.FixedBanner .bubble {
    position: absolute;
    top: 0%;
    left: 0%;
    padding: 8px 16px;
    display: inline-block;
    font-weight: bold;
    text-align: center;
    border-radius: 40px;
    font-size: 15px;
    background: #fff500;
    color: #f36304;
    transform: translate(0%, -50%);
    z-index: 5;
}
.FixedBanner a .bubble:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 80%);
    width: 18px;
    height: 18px;
    background: #fff500;
    clip-path: polygon(50% 80%, 0 0, 100% 0);
}
.FixedBanner .FixedBanner-sub {
    font-size: 1.8rem;
    color: #fff;
    padding-bottom: 0.5rem;
}
.FixedBanner .FixedBanner-main {
    font-size: 2.2rem;
    color: #fff;
}

.FixedBanner a:hover {
    color: #fff500;
    background: #1f6b15eb;
}

/* -------------------- sec01 -------------------- */
#sec01 .h2 {
    font-size: 6.5rem;
    margin-top: -5%;
}

.trouble {
    display: flex;
    justify-content: center;
}
.trouble .sec01_person01{
    width: 350px;
    height: 100%;
}

.trouble img {
    width: 40px;
    height: 40px;
}

.trouble p {
    font-size: 2.5rem;
    line-height: 3.5rem;
}

/*-- trouble list --*/
.list6 {
    margin: 0 2rem;
}
.box,
.list {
    padding: 0;
    margin: 0;
    font-weight: bold;
    list-style-type: none;
}
.list {
    display: flex;
    align-items: center;
    margin: 1em 0;
    padding: 1rem;
    /*padding: 5px 10px*/
    background-color: rgb(255, 255, 255);
    border: 2px solid rgb(26, 26, 26);
}
.list img {
    height: 50%;
}
.text {
    margin: 0 0 0 1em;
    color: #333;
}
/**/


/* -------------------- sec02 -------------------- */
#sec02 .wrapper {
    padding-top: 0;
}
.feature {
    width: 80%;
}
.tag3 {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
}
.tag3 i {
    color: #2e9b20;
    margin: auto 1rem;
}
.radius_green {
    display: block;
    text-align: center;
    width: 21%;
    padding: 0.5em 0.5em;
    background: #2e9b20;
    color: #fff500;
    border-radius: 100px;
}
.feature {
    width: 100%;
    background-image: repeating-linear-gradient(140deg, #f5f2d0, #f5f2d0 2px, transparent 2px, transparent 4px);
}
.feature_content {
    display: flex;
    justify-content: space-between;    
    width: 80%;
    margin: auto;
}
.box-021 {
    position: relative;
    justify-content: center;
    width: 100%;
    margin: 1.5rem;
    background-color: #fff;
    box-shadow: 1rem 1rem 0px 0px rgba(244, 103, 4, 0.2);
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1.4;
}
.box-021::before {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 1.5em;
    height: 1.5em;
    border: 1px solid #f36304;
    color: #f36304;
    content: attr(data-number);
}
.box-021 p {
    text-align: center;
    padding: 1.5rem 1rem;
}

/* -------------------- sec03 -------------------- */
/*求人ボックス*/
.swiper {
    max-width: 850px;
    display: flex;
    justify-content: center;

}
    .offer_box {
        width: 100%;
        max-width: 700px;
        background-color: #fff;
        border-radius: 15px;
        margin: 0 auto 50px auto;
    }
    .offer_head {
        background-color: #2e9b20;
        padding-top: 2rem;
        border-radius: 15px 15px 0 0;
    }
    .phrase {
        background-color: #f36304;
        padding: 2rem;

        font-size: 3rem;
        color:#fff;
        font-weight: 600;
        text-align: center;
    }
    .offer_head h3 {
        padding-top: 3rem; 
        padding-bottom: 3rem;
        margin: 0 auto;

        text-align: center;
    }
    .offer_head .pref {
        background-color: #fff;
        padding: 1rem 2rem;
        margin-right: 2rem;
        font-weight: 600;
        font-size: 2.5rem;
        color: #2e9b20;
    }
    .offer_head .ind {
        font-size: 3rem;
        font-weight: 600;
        color: #fff;
    }

    .offer_detail {
        display: flex;
        padding: 2rem;
        margin: 0 auto;
    }
    .offer_detail_img{
        width: 30%;
    }
    .offer_detail_img img {
        width: 100%;
    }
    
    .offer_detail_txt {
        margin-left: 2rem;
    }
    .offer_detail_txt .item {
        margin-bottom: 3rem;
        font-size: 2.5rem;
    }
    .offer_detail_txt .tag {
        background-color: #f5f6fa;
        padding: 0.5rem 2rem;
        font-size: 1.8rem;
        margin-right: 1rem;
    }
    .offer_detail_txt .explanation {
        font-size: 2rem;
        line-height: 3rem;
    }

    /*swiper*/
    .swiper-button-next, .swiper-button-prev {
        color: #2e9b20;
        background: #ffffff83;
        border-radius: 100px;
        padding: 2rem;
        margin-top:calc(0px - (var(--swiper-navigation-size)/ 1));
    }


/* -------------------- sec04 -------------------- */

#sec04 { /* imgの親要素 */
  clip-path: polygon(0 100%, 100% 94%, 100% 0, 0 6%);
　　　 /* 起点(0,0)は左上 作りたい形を囲むように座標を指定 例)polygon(左下, 右下, 右上, 左上) */
}
.bg-wrap {
    background-image: url(../img/sec04_bg_flat.png);
}
#sec04 .wrapper {
    padding-bottom: 0;
}

#sec04 .h2_middle {
    padding-top: 30px;
}

/* 3points */
.points3 ul {
    display: flex;
    flex-direction: column;
    padding-bottom: 100px;
}

.points3 li {
    width: 80%;
    margin-bottom: 40px;
}

.points3 li img {
    width: 100%;
}

.points3 .right {
    margin-left: auto;
}


/* -------------------- sec05 -------------------- */
.c_voices ul {
  display: flex;
  flex-wrap: wrap; /* 2列に折り返すために追加 */
  gap: 30px; /* 任意：項目同士の余白調整 */
  padding: 0;
  margin: 0;
  list-style: none;
}

.c_voices li {
  width: 48%; /* 画面幅に2つ並べるため（gapを考慮） */
  box-sizing: border-box;
}

.c_voice {
  width: 100%; /* li内で最大幅にする */
  background-image: repeating-linear-gradient(140deg, #f5f2d0, #f5f2d0 1px, transparent 1px, transparent 2px);
  border-style: solid;
  border-width: 3px;
  border-color: #abd7a6;
  border-radius: 5px;
  padding: 1rem 2rem;
  position: relative;
  line-height: 3rem;
}

.c_voice .sec05_person {
    width: 25%;
}
.c_voice_status {
    display: flex;
    align-items: center;
    font-size: 2rem;
    margin-bottom: 1rem;
}
.c_voice_status p {
    color: #f36304;
    text-align: left;
    font-size: 2rem;
    font-weight: 700;
    width: 70%;
    margin-left: 2rem;
}
.message_img img{
    width: 100%;
}

/* -------------------- sec06 -------------------- */

.steps3 li {
    display: flex;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35);
}
.steps3 li:not(:last-child) {
      margin-bottom: 40px;
}

.steps3 img {
    width: 30%;
    height: auto;
    display: block;
    object-fit: cover;
}
.step_txt_h3 {
    display: flex;
    width: 100%;
    font-size: 4rem;
    font-weight: 700;
}
.step_txt span{
    padding-top: 2rem;
    padding-bottom: 2rem;
    background-color: #f36304;
    color: #fff;
    text-align: center;
    width: 30%;
}
.step_txt .h3 {
    padding-left: 4rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
    background-color: #fffbb6;
    color: #f36304;
    width: 70%;
}
.step_txt .step_exp {
    padding: 2rem 4rem 2rem rem;
    font-size: 2.5rem;
    line-height: 4.5rem;
}

/* -------------------- sec07 -------------------- */
#sec07 h2 {
  -webkit-text-stroke: 1.5rem rgb(255, 255, 255);
  text-stroke: 1.5rem rgb(255, 255, 255);
  paint-order: stroke;
}

.Qa-Box {
    width: 80%;
    margin: 0 auto;
  }

.Qa :not(:last-child) {
      margin-bottom: 3.5rem;
}

.Qa-Box .Qa dt,
.Qa-Box .Qa dd {
    display: flex;
    align-items: baseline;
    margin: 1.5rem 0;
    padding: 1.5rem;
}

.Qa-Box .Qa dt {
    background: #fff;
}

.Qa-Box .Qa dt p {
    margin: 0;
    padding-left: 1.5rem;
    font-size: 2.8rem;
    font-weight: bold;
    color: #2e9b20;
    width: 100%;
}

.Qa-Box .Qa dd p {
    margin: 0;
    padding-left: 1.5rem;
    width: 100%;
    font-size: 2.5rem;
    line-height: 4.5rem;
}

.Qa-Box .Qa dt::before {
    content: "Q";
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    background: #2e9b20;
    width: 5rem;
    height: 5rem;
    font-size: 3rem;
}

.Qa-Box .Qa dd::before {
    content: "A";
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    background: #f36304;
    width: 5rem;
    height: 5rem;
    font-size: 3rem;
}

/* -------------------- footer -------------------- */
#footer {
    text-align: center;
    color: #fff;
    padding-top: 6rem;
    padding-bottom: 6rem;
    font-size: 2rem;
    line-height: 4rem;
}

/* ------------------------------ TABLET ------------------------------ */
@media only screen and (max-width: 1000px) and (min-width: 768px) {
    /* Common */
    .tab_n {
        display: none;
    }
    .tab_show {
        display: block;
    }

    .wrapper {
        width: 90%;
    }
    /* CTA*/
    .cta_tel {
        font-size: clamp(16px, 3vw, 28px);
    }

    /* sec01 */
    #sec01 .h2 {
        font-size: 5rem;
    }
    .trouble .sec01_person01 {
        width: 250px;
    }

    /* sec02 */
    .feature_content {
        width: 95%;
    }
    /* sec05 */
    .c_voices li {
        width: 100%;
    }
    .c_voice_status p {
        font-size: 2.5rem;
        line-height: 4rem;
    }

    /* sec06 */
    .step_txt .h3 {
        padding-left: 2rem;
    }
    .step_txt .step_exp {
        padding: 2rem;
        font-size: 2.4rem;
    }

    /* sec07 */
    .Qa-Box {
        width: 100%;
    }

    /* footer */
    #footer {
        padding-bottom: 12rem;
    }

    

}


/* ------------------------------ SP ------------------------------ */
@media (max-width: 767px) {
    /* 共通 */
    html {
        font-size: 31.25%; /* 1rem:5px */
    }
    .sp_n {
        display: none;
    }
    .pc_n {
        display: block;
    }
    .wrapper {
        width: 90%;
        padding-top: 40px;
        padding-bottom: 40px;
        overflow: hidden;
    }

    /* text */

        .sec04_txt,
        .sec03_txt,
        .sec05_txt,
        .sec08_txt {
            text-align: center;
            font-weight: 600;
            line-height: 5.4rem;
            font-size: 3.4rem;
        }
        /* h2 */
        .h2,
        .h2_small,
        .h2_middle,
        .h2_big {
            text-align: center;
            padding-bottom: 5rem;
        }
        .h2 img,
        .h2_middle img {
            width: 98%;
        }
        .h2_small img{
            width: 60%;
        }

    /*--- CTA ---*/
        .button-49 {
        font-size: clamp(14px, 2.8vw, 18px);
        padding: 0.6em 1em;
        text-align: center;
        line-height: 4rem;
        }
        /*Line*/
        a.cta_line_txt {
            width: 100%;
        }

        .cta_tel {
            font-size: 2.8vw;
        }

    /*--- MV ---*/
    .sp_mv_bg {
        width: 100vw;
    }
    .sp_mv_points {
        position: absolute;
        width: 90%;
        left: 5%;
        bottom: 0%;
    }

    /*--- Floating ---*/
    .FixedBanner {
        position: fixed;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        height: 70px;
        width: 90%; /* スマホ用に幅を調整 */
    }
    .FixedBanner .FixedBanner-sub {
        font-size: 2.8rem;
    }
    .FixedBanner .FixedBanner-main {
        font-size: 3.5rem;
    }

    /*--- sec01 ---*/
    #sec01 .wrapper {
        padding-bottom: 0;
    }
    #sec01 .h2 {
    font-size: 6.6vw;
    }
    .trouble {
        display: block;
    }
    .list6 {
        margin: 0;
    }
    .list {
        width: 100%;
    }
    .trouble img {
         width: 30px;
         height: 30px;
    }
    .trouble p {
        font-size: 2.7rem;
    }
    .trouble .sec01_person01{
        width: 35%;
        float: right;
    }

    /*--- sec02 ---*/
    .tag3 {
        width: 100%;
        font-size: 2rem;
    }
    .radius_green {
        width: 28%;
    }
    .feature_content {
        width: 100%;
    }

   /*--- sec03 ---*/
    #sec03 .h2 {
        padding-bottom: 6rem;
    }
    .swiper {
        width: 100%;
    }
    .offer_box {
        width: 90%;
    }
    .offer_detail_txt .item {
        margin-bottom: 2.5rem;
    }

    /*--- sec04 ---*/
    #sec04 .h2_middle {
        padding-top: 20px;
    }
    /* points3 */
    .points3 {
        padding-bottom: 40px;
    }
    .points3 ul {
        padding-bottom: 0;
    }
    .points3 li {
        width: 95%;
        margin-bottom: 10px;
    }
    .points3_container {
        display: flex;
        flex-direction: column;
        margin-bottom: 40px;
    }
    #sec04 > ul li:nth-child(even) .points3_container {
        flex-direction: column;
    }
    .points3_img img {
        width: 100%;
        height: auto;
    }
    .points3_detail {
        margin-bottom: 40px;
    }

    /*--- sec05 ---*/
    .c_voices li {
        width: 100%;
    }
    .c_voice_status p {
        font-size: 2.5rem;
    }

    /*--- sec06 ---*/
    .steps3 li:not(:last-child) {
      margin-bottom: 20px;
    }
    .step_txt_h3 {
        font-size: 3rem;
    }
    .step_txt .h3 {
        padding-left: 3rem;
    }
    .steps3 img {
        width: 30%;
    }
    .step_txt .step_exp {
        font-size: 2rem;
        line-height: 3rem;
        padding: 1rem;
    }


    /*--- sec07 ---*/
    .Qa-Box {
        width: 100%;
    }

    /*--- footer---*/
    #footer {
        padding-bottom: 100px;
    }