@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap');

/* ---------------------------------
    reset
---------------------------------- */

body{
    -webkit-text-size-adjust: 100%;
}
h1,h2,h3,h4,h5{
    padding: 0!important;
    margin: 0!important;
}
p{
    margin: 0;
}
ol,ul{
    list-style:none;
}
ol,ul,dl,dt,dd{
    padding: 0;
    margin: 0;
}
.clearfix:after {
    content: "."; 
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}
a{
    color:#06c755;
    text-decoration:none;
}
a:hover{
    text-decoration: underline;
}
img{
    vertical-align:middle;
}

/* ---------------------------------
    共通
---------------------------------- */

/* 全体 */
*{
    box-sizing: border-box;
}
html{
    font-size: 62.5%;
}
body {
    margin: 0;
    word-break: break-all;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.6rem;
    color: #171717;
    line-height:1.6;
}
.container {
    max-width: 1000px;
    margin-left: auto!important;
    margin-right: auto!important;
}
p{
    line-height: 1.6;
}
.center{
    text-align: center;
}
.right{
    text-align: right;
}
a[href^="tel:"]{
    pointer-events: none;
}
.wrapper{
    min-width: 1280px;
}

/* 求人情報入力シート */

.formTable .contact-tel div label {
    padding-top: 8px;
    margin-left: 0;
    font-weight: bold;
    font-size: 1.4rem;
}
.contact-tel div:first-child label {
    padding-top: 0;
    margin-left: 0;
}
.job-info h2,.job-info h3{
    margin: 0 auto!important;
    width: 800px;
}
.job-info h2{
    padding: 0 .6em!important;
    margin: 40px auto 20px!important;
    border-left: 5px solid #06c755;
    font-weight: bold;
    font-size: 1.8rem;
}
.job-info h3{
    margin-bottom: 15px!important;
    color: #06c755;
    font-weight: bold;
    font-size: 1.6rem;
}
.form-salary {
    display: flex;
    align-items: flex-end;
}
#seishainContent td span{
    display:inline-block;
    margin-bottom: 8px;
    font-size: 1.4rem;
}
.form-salary .selectbox{
    display: inline-block!important;
    margin-left: 0;
}
.form-salary .selectbox::after{
    right: 15px;
    top: 55px;
}
.formTable .form-salary label{
    padding-top: 0;
    margin-left: 0;
}
.form-salary div{
    margin-left: 10px;
}
.other-info{
    display: inline-block;
    padding-top: 8px;
}
.page table #probation_details1 td div:first-child,
.page table #probation_details2 td div:first-child,
.page table #probation_details3 td div:first-child{
    display: flex;
}
.page table #probation_details1 .selectbox,
.page table #probation_details2 .selectbox,
.page table #probation_details3 .selectbox{
    margin: 0 0 8px 2%;
    width: 49%;
}
.page table #probation_details1 .selectbox:first-child,
.page table #probation_details2 .selectbox:first-child,
.page table #probation_details3 .selectbox:first-child{
    margin-left: 0;
}
.page table #probation_details1 .selectbox::after,
.page table #probation_details2 .selectbox::after,
.page table #probation_details3 .selectbox::after{
    right: 15px;
}
.job-info h3{
    margin-top: 30px!important;
}

.checkboxes{
    margin-top: 20px;
    margin: 20px 0 0 2%;
}
.checkboxes:first-child,.checkboxes:nth-child(2){
    margin-top: 0x;
}
.checkboxes:first-child,.checkboxes:nth-child(odd){
    margin-left: 0;
}
.checkboxes{
    display: flex;
    align-items:center;
    align-content:flex-start;
    width: 49%;
}
.checkboxes-wrap div:first-child label,
.checkboxes-wrap div:nth-child(2) label{
    padding-top: 0;
}
.other-benefits-txt{
    display: inline-block;
    margin-bottom: 5px;
    width: 100%;
    padding-top: 20px;
}
#transportation_details input{
    margin-right: 10px;
    width: 200px;
}
.message-from label {
    margin-left: 10px;
}
.message-from label:first-child {
    margin-left: 0;
}
.message-from label input{
    margin-right: 5px;
}
.page.job-info .checkboxes-wrap{
    display: flex;
    flex-wrap: wrap;
}

/* フォーム */
.page table .selectbox {
    display: inline-flex;
    align-items: center;
    position: relative;
    width: 100%;
    border-bottom: none;
}

.selectbox::after {
    position: absolute;
    right: 40px;
    width: 10px;
    height: 7px;
    background-color: #535353;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
    pointer-events: none;
}

.selectbox select {
    appearance: none;
    min-width: 230px;
    height: 2.8em;
    padding: 2px 16px;
    width: 100%;
    height: 55px;
    border: 1px solid #e4e7e6;
    border-radius: 5px;
    background-color: #fff;
    color: #333333;
    font-size: 16px !important;
    cursor: pointer;
    outline: none !important;
    box-shadow: none;
}

label.other-info span{
    font-weight: normal;
}
.selectbox label,
label.other-info,
.form-salary label,
.other-benefits-txt,
#probation_details1 label{
    font-weight: bold;
    font-size: 1.4rem;
}
label + input,label + select{
    margin-top: 5px;
}
.formTable div label{
    display: inline-block;
    margin-left: 8px;
}
.center.inner + form{
    margin-top: 50px;
}
.formTable input[type="text"],
.formTable input[type="tel"],
.formTable input[type="email"],
.formTable input[type="number"]{
    font-size: 16px !important;
    width: 100%;
    border: 1px solid #e4e7e6;
    outline: none !important;
    box-shadow: none;
    height: 55px;
    padding: 2px 16px;
    border-color: #e4e7e6;
    border-radius: 5px;
    vertical-align: middle;
}
.formTable textarea{
    font-size: 16px !important;
    width: 100%;
    border: 1px solid #e4e7e6;
    outline: none !important;
    box-shadow: none;
    height: 200px;
    padding: 2px 16px;
    border-color: #e4e7e6;
    border-radius: 5px;
    resize: vertical;
}
.job-info .formTable input[type="text"],
.job-info .formTable input[type="tel"],
.job-info .formTable input[type="email"],
.job-info .formTable input[type="number"],
.job-info .formTable textarea{
    font-size: 16px !important;
    width: 100%;
    border: 1px solid #e4e7e6;
    outline: none !important;
    box-shadow: none;
    height: 55px;
    padding: 2px 16px;
    border-color: #e4e7e6;
    border-radius: 5px;
}
.job-info .formTable textarea{
    padding: 14px 16px;
}
.job-info .formTable textarea.textarea-box{
    height: 200px;
    resize: vertical;
}
.formTable select{
width: 100%;
}
.formTable input:focus,
.formTable textarea:focus {
border-color: #06c755;
}
.formTable ::-webkit-input-placeholder {
color: #CCC;
}
.formTable ::-moz-placeholder {
color: #CCC;
}
.formTable :-ms-input-placeholder {
color: #CCC;
}
.formTable ::-ms-input-placeholder {
color: #CCC;
}
.formTable ::placeholder {
color: #CCC;
}
.formTable ::-ms-input-placeholder {
color: #CCC;
}
.formTable :-ms-input-placeholder {
color: #CCC;
}

.formTable__select{
    position: relative;
    display: flex;
    align-items: center;
}
.formTable__select select {
  text-transform: none;
  display: block;
  font-size: 16px;
  line-height: 1.3;
  height: 55px;
  padding: 6px 16px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  box-shadow: none;
  margin: 0;
  border: 1px solid #e4e7e6;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 4px !important;
  position: relative
}
.formTable__select select::-ms-expand {
  display: none
}
.formTable__select select:focus {
  border-color: #06c755;
  outline: none;
}
.formTable__select::before {
    border-bottom: 4.5px solid #06c755;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    content: "";
    position: absolute;
    right: 55px;
    top: 20px;
    width: 0;
  }
  .formTable__select::after {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4.5px solid #06c755;
    content: "";
    position: absolute;
    right: 55px;
    top: 31px;
    width: 0;
}
.formTable＿contact .formTable__select::after,
.formTable＿contact .formTable__select::before {
    right: 13px;
}
.formTable__select span{
    display: inline-block;
    margin-left: 10px;
    white-space: nowrap;
}
.page form table th,form table td{
    white-space:normal;
}

.submit-all {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    text-align: center;
}
.submit-all div{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 250px;
    margin-left: 20px;
    border: none;
    border-bottom: solid 5px #018c3a;
    border-radius: 5px;
    background-color: #06c755;
    color: #fff;
    font-weight: 600;
    font-size: 1em;
    position: relative;
    transition: .5s ease;
    cursor:pointer
}
.submit-all div [type="reset"], [type="submit"],[type="button"]{
    padding: .9em 2em;
    width: 100%;
}
.submit-all div.btn-reset{
    background: #ccc;
    border-bottom: solid 5px #9e9e9e;
}
.submit-all div:first-child{
    margin-left: 0;
}
.submit-all div::after {
    transform: rotate(45deg);
    width: 5px;
    height: 5px;
    margin-left: 10px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    content: '';
    display: inline-block;
    position: absolute;
    right: 10%;
    top: 50%;
}
.submit-all div.btn-reset::after {
    border: none;
}

.submit-all div.btn-back::after{

    border-width: 0 0 2px 2px;
    border-style: solid;
    border-color: #fff;
    content: '';
    display: inline-block;
    position: absolute;
    left: 6%;
    top: 50%;
}

.submit-all div:hover {
    transform: translateY(3px);
    border-bottom-width: 2px;
}
.form-name {
    display: flex;
}
.form-name input[type="text"]{
    width: 48%;
    margin-left: 4%;
}
.form-name input[type="text"]:first-child{
    margin-left: 0;
}
.formTable tr th span.hissu {
    display: inline-block;
    background: #f62f63;
    padding: 0 8px 1px 8px;
    color: #fff;
    margin-top: 5px;
    border-radius: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 1.4rem;
    font-weight: normal;
  }
  .formTable tr th span{
    display: flex;
    flex-direction: column;
  }
 .formTable_2 tr:first-child th, .formTable_2 tr:first-child td{
    border-top: none;
 }
 .formTable_2 tr:last-child th, .formTable_2 tr:last-child td{
    border-bottom: none;
 }
 .submit-txt{
    margin-top: 50px;
    text-align: center;
    font-size: 1.4rem;
 }
 .post-code{
    display: inline-block!important;
    width: 200px!important;
    margin: 0 0 15px 10px;
 }


 .radio-btn {
    display: flex;
    flex-wrap: wrap;
    gap: .3em 2em;
    border: none;
}

 @supports (selector(:has(*))) {


.radio-btn label {
    display: flex;
    align-items: center;
    gap: 0 .5em;
    position: relative;
    cursor: pointer;
}

.radio-btn label::before,
.radio-btn label::after {
    border-radius: 50%;
    content: '';
}

.radio-btn label::before {
    width: 18px;
    height: 18px;
    border: 2px solid #dee5eb;
    box-sizing: border-box;
}

.radio-btn label::after {
    position: absolute;
    top: 50%;
    left: 9px;
    transform: translate(-50%, -50%);
    width: 9px;
    height: 9px;
    background-color: #dee5eb;
}
.radio-btn label:has(:checked)::after {
    background-color: #2589d0;
    animation: anim-radio-btn .3s linear;
}

.checkboxes [type="checkbox"]{
	flex-shrink: 0;
}

@keyframes anim-radio-btn {
    0% {
        box-shadow: 0 0 0 1px transparent;
    }
    50% {
        box-shadow: 0 0 0 10px #2589d033;
    }
    100% {
        box-shadow: 0 0 0 10px transparent;
    }
}

.radio-btn input {
    display: none;
}
}
@supports not (selector(:has(*))) {
/* ...(ここに対応していなかった場合のcssを書く)... */
}



 


 /* フォーム - 確認ページ */
.form-confirm h2{
    margin-bottom: 20px!important;
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
}
.form-txt{
    margin-bottom: 50px;
    text-align: center;
}
.error-txt{
    text-align: center;
}
.error-txt p:first-child{
    margin-bottom: 30px;
}
.error_messe{
    color: #f62f63;
    font-weight: bold;
}

/* TOPページ */

/* TOPページ - parts */

.top section{
    padding: 120px 0;
}
.top .simple-bg{
    background: #f6f8f7;
}
.top .container {
    max-width: 1280px;
}
.top .basic-bg{
    background-image: url(../images/top_basicbg_top.png),url(../images/top_basicbg_bottom.png);
    background-repeat: no-repeat,no-repeat;
    background-position: top left,bottom right;
    background-size: 60% auto,60% auto;
}
.top .title-img{
    position: absolute;
    top: -175px;
    right: 0;
}
.pc-item{
    display: block;
}
.sp-item{
    display: none;
}

/* 下からふわっと現れる */
/* jQueryで追加、削除 */
.fadeUp {
    -webkit-animation-name: fadeUpAnime;
            animation-name: fadeUpAnime; /*アニメーションの名前*/
    -webkit-animation-duration: 1s;
            animation-duration: 1s; /*アニメーションの実行時間*/
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards; /*アニメーション後、要素が表示されたままにする*/
  }
  @-webkit-keyframes fadeUpAnime {
    0% {
      opacity: 0; /*非表示*/
      -webkit-transform: translateY(100px);
              transform: translateY(100px); /*縦方向に100pxずらす*/
    }
    100% {
      opacity: 1; /*表示*/
      -webkit-transform: translateY(0);
              transform: translateY(0); /*元の位置*/
    }
  }
  @keyframes fadeUpAnime {
    0% {
      opacity: 0; /*非表示*/
      -webkit-transform: translateY(100px);
              transform: translateY(100px); /*縦方向に100pxずらす*/
    }
    100% {
      opacity: 1; /*表示*/
      -webkit-transform: translateY(0);
              transform: translateY(0); /*元の位置*/
    }
  }
  .fadeUpTrigger {
    opacity: 0; /*非表示*/
  }

  /* 右からふわっと現れる */
/* jQueryで追加・削除 */
.fadeInRight {
    -webkit-animation-name: fadeInRightAnime;
            animation-name: fadeInRightAnime; /*アニメーションの名前*/
    -webkit-animation-duration: 1s;
            animation-duration: 1s; /*アニメーションの時間を1秒に設定*/
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards; /*アニメーション実行後、要素が表示されたままにする*/
  }
  @-webkit-keyframes fadeInRightAnime {
    0% {
      opacity: 0; /*非表示*/
      -webkit-transform: translateX(100px);
              transform: translateX(100px); /*100px分横にずれる*/
    }
    100% {
      opacity: 1; /*表示*/
      -webkit-transform: translateX(0);
              transform: translateX(0); /*元の位置*/
    }
  }
  @keyframes fadeInRightAnime {
    0% {
      opacity: 0; /*非表示*/
      -webkit-transform: translateX(100px);
              transform: translateX(100px); /*100px分横にずれる*/
    }
    100% {
      opacity: 1; /*表示*/
      -webkit-transform: translateX(0);
              transform: translateX(0); /*元の位置*/
    }
  }
  .fadeInRightTrigger {
    opacity: 0; /*非表示*/
  }
  /* 左からふわっと現れる */
  /* jQueryで追加・削除 */
  .fadeInLeft {
    -webkit-animation-name: fadeInLeftAnime;
            animation-name: fadeInLeftAnime;
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
  }
  @-webkit-keyframes fadeInLeftAnime {
    0% {
      opacity: 0;
      -webkit-transform: translateX(-100px);
              transform: translateX(-100px);
    }
    100% {
      opacity: 1;
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
  }
  @keyframes fadeInLeftAnime {
    0% {
      opacity: 0;
      -webkit-transform: translateX(-100px);
              transform: translateX(-100px);
    }
    100% {
      opacity: 1;
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
  }
  .fadeInLeftTrigger {
    opacity: 0;
  }



/* TOPページ - header*/

.top header .container{
    display: flex;
    justify-content:space-between;
    padding: 30px 0;
}
.top .header-contact{
    display: flex;
    align-items:center;
    
}
.top header h1{
    width: 145px;
    flex-shrink: 0;
}
.top header h1 img{
    width: 100%;
}

.top .header-contact a{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 377px;
    height:93px;
    margin-left: 20px;
    padding: 10px;
    border: none;
    box-shadow:0px 5px 0px 0px #018c3a;
    border-radius: 20px;
    background-image: -moz-linear-gradient( -92deg, rgb(7,215,92) 0%, rgb(6,199,85) 100%);
    background-image: -webkit-linear-gradient( -92deg, rgb(7,215,92) 0%, rgb(6,199,85) 100%);
    background-image: -ms-linear-gradient( -92deg, rgb(7,215,92) 0%, rgb(6,199,85) 100%);
    color: #fff;
    font-weight: 600;
    font-size: 3.0rem;
    position: relative;
    cursor:pointer;
    text-shadow: 0px 0px 10px rgba(5, 68, 31, 0.19);
}
/*
.top .header-contact a:first-child{
    box-shadow:0px 5px 0px 0px #c72c54;
    border-radius: 20px;
    background-image: -moz-linear-gradient( -92deg, rgb(246,83,126) 0%, rgb(246,47,99) 100%);
    background-image: -webkit-linear-gradient( -92deg, rgb(246,83,126) 0%, rgb(246,47,99) 100%);
    background-image: -ms-linear-gradient( -92deg, rgb(246,83,126) 0%, rgb(246,47,99) 100%);
}*/

.top .header-contact a::after {
    transform: rotate(45deg);
    width: 8px;
    height: 8px;
    margin-left: 10px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    content: '';
    display: inline-block;
    position: absolute;
    right: 6%;
    top: 47%;
}
.top .header-contact a img{
    margin-right: 10px;
    width: 43px;
    height: 59px;
}
.top .header-contact a:first-child img{
    width: 55px;
    height: 45px;
}

.top .header-contact a:hover{
    transform: translateY(3px);
    box-shadow:0px 2px 0px 0px #018c3a;
    text-decoration: none;
}
/*
.top .header-contact a:first-child:hover{
    box-shadow:0px 2px 0px 0px #c72c54;
}
*/
.top .header-contact a:first-child{
    margin-left: 0;
}





/* TOPページ - MV*/
.top .mv{
    text-align: center;
}
.top .mv img{
    margin-top: -15px;
    width: 100%; /*bodyの幅に対する割合 */
      max-width: 1920px;
}


/* TOPページ - footer*/
.top footer{
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 40px 0;
    background: #06c755;
    text-align: center;
    z-index: 10;
}
.top footer a{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 0;
    width: 377px;
    height: 93px;
    border-radius: 20px;
    background-image: -moz-linear-gradient( -92deg, rgb(248,242,77) 0%, rgb(240,232,2) 100%);
    background-image: -webkit-linear-gradient( -92deg, rgb(248,242,77) 0%, rgb(240,232,2) 100%);
    background-image: -ms-linear-gradient( -92deg, rgb(248,242,77) 0%, rgb(240,232,2) 100%);
    box-shadow: 0px 5px 0px 0px #aba500;
    background-color: #fef501;
    color: #171717;
    font-size: 3.0rem;
    font-weight: bold;
}
.top footer a:hover{
    transform: translateY(3px);
    box-shadow:0px 2px 0px 0px #aba500;
    text-decoration: none;
}
.top footer div a.now-btn{
    background-image: -moz-linear-gradient( -92deg, rgb(246,83,126) 0%, rgb(246,47,99) 100%);
    background-image: -webkit-linear-gradient( -92deg, rgb(246,83,126) 0%, rgb(246,47,99) 100%);
    background-image: -ms-linear-gradient( -92deg, rgb(246,83,126) 0%, rgb(246,47,99) 100%);
    background-color: #f62f63;
    box-shadow: 0px 5px 0px 0px #a91d42;
    color: #fff;
}
.top footer div a.now-btn:hover{
    box-shadow:0px 2px 0px 0px #a91d42;
}
  
.top footer a:hover{
    text-decoration: none;
}
.top footer div a::after {
    transform: rotate(45deg);
    width: 13px;
    height: 14px;
    margin-left: 10px;
    border-top: 2px solid #171717;
    border-right: 2px solid #171717;
    content: '';
    display: inline-block;
    position: absolute;
    right: 5%;
    top: 45%;
}
.top footer div a img {
    width: 37px;
    height: 27px;
    margin-right: 23px;
}
.top footer div:nth-child(2) a img{
    width: 27px;
    height: 43px;
}
.top footer div a.now-btn::after {
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
}
.top footer .container{
    position: relative;
    display: flex;
    justify-content:space-between;
    padding: 0 30px;
}
.top footer .container div{
    margin-left: 30px;
    border: solid 5px #fff;
    width: 387px;
    height: 108px;
    border-radius: 20px;
    background-color: #fff;
    text-align:center;
}
.top footer .container div:first-child{
    margin-left: 0;
}
.top footer .container div:last-child{
    animation: anime_cvbtn01 0.5s ease 0s infinite alternate;
    
    }

/*アニメーション*/

@keyframes anime_cvbtn01 {
    from {
      transform: scale(0.9,0.9);
    }
    to {
      transform: scale(1,1);
    }
}



/* TOPページ - メリット */
*,
*::before,
*::after {
  box-sizing: border-box;
}
.top h2{
    display: flex;
    flex-direction:column;
    margin-bottom: 80px!important;
    font-size: 6.0rem;
    text-align: center;
    font-weight:900;
    line-height: 1;
}
.top-merit h2 span:first-child{
    display: inline-block;
    font-size: 2.6rem;
}


.top-merit-stock{
    display: inline-block;
    position: relative;
    margin: 0 auto 25px!important;
    -webkit-transform: skewX(-15deg);
            transform: skewX(-15deg);
    color: #171717;
    background-color: #fef501;
    font-size: 2.6rem;
    line-height: 1;
}
.top-merit-stock span {
    display: block;
    padding: 20px;
    -webkit-transform: skewX(15deg);
            transform: skewX(15deg);
    color: #05c253;
}


.merit-inner-block {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 30px;
}
.merit-inner-block img{
    width: 100%;
    max-width: 432px;
    margin-right: 50px;
}

.top-merit .box {
    display: flex;
    align-items:center;
    padding-top: 30px;
    padding-bottom: 30px;
    background-color: #e4f4e7;
  }
  
  .top-merit .box{
    margin-top: 60px;
  }
  .top-merit .box:first-child{
    margin-top: 0;
  }
  
  .top-merit .box:nth-child(even)  {
    margin-right: calc(50% - 50vw);
    margin-left: -30px;
    padding-right: calc(50vw - 50%);
    padding-left: 30px;
    border-radius: 20px 0 0 20px;
  }

  .top-merit .box:nth-child(odd){
    margin-right: -30px;
    margin-left: calc(50% - 50vw);
    padding-right: 30px;
    padding-left: calc(50vw - 50%);
    border-radius: 0 20px 20px 0;
  }

  
  @keyframes slideIn {
    0% {
      transform: translateX(180px);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
    }
    40%,100% {
      opacity: 1;
    }
  }


  .top-merit .box h3{
    display: flex;
    align-items:center;
    margin-bottom: 40px!important;
    font-size: 4.0rem;
    font-weight: bold;
    line-height: 1.4;
  }
  .top-merit .box h3 span:first-child{
    margin: -8px 30px 0 0;
    font-size: 12.0rem;
    font-style: italic;
    line-height: 1;
    color: #05c253;
  }

  /* TOPページ - ステップ */
  .step-wrapper{
    display: flex;
    justify-content:space-between;
    margin-top: 150px;
  }
  .step-wrapper div {
    position:relative;
    width: 380px;
    padding: 0 30px 30px;
    border-radius: 20px;
    background-color: rgb(255, 255, 255);
    box-shadow: 5.142px 6.128px 0px 0px rgba(0, 38, 16, 0.14);
    text-align: center;
  }
  .step-wrapper div img{
    width: 100%;
    max-width: 319px;
  }
  .step-wrapper div h3{
    margin-bottom: 30px!important;
    color: #06c755;
    font-weight: 700;
    font-size: 3.6rem;
  }
  .step-wrapper div::after{
    content:url(../images/step-arrow.png);
      position: absolute;
      top: 50%;
      right: -58px;
      margin-top: -55px;
}
.step-wrapper div:last-child:after{
    content:none;
}
      


  .step-circle {
    position: relative;
    display: inline-block;
    margin-top: -89px;
    width: 177px;
    height: 178px;
    border-radius: 50%;
    background-color: #06c755;
  }
.step-circle .step-circle-inner {
    position: absolute;
    display: inline-block;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width :177px;
    text-align:center;
    font-size: 8.0rem;
    font-style: italic;
    color: #fff;
    font-weight: bold;
  }
  .step-circle .step-circle-inner span{
    display: block;
    line-height: 1;
  }
  .step-circle .step-circle-inner span:first-child{
    font-size: 3.2rem;
  }
  .step-circle .step-circle-inner span:last-child{
    margin-left: -15px;
  }
  .step-circle-title{
    display: inline-block;
    letter-spacing: -1px;
  }
  .step-img .center{
    font-size: 2.4rem;
    font-weight: bold;
  }


/* TOPページ - 事例 */
.top .top-case h2{
    margin-bottom: 0!important;
}
.case-wrapper{
    display: flex;
    flex-wrap:wrap;
}
.case-wrapper .case-inner{
    margin: 60px 40px 0 0;
    border-radius: 20px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.1);
    width: 290px;
    text-align: center
}
.case-inner + .case-inner:nth-child(4),
.case-inner + .case-inner:nth-child(8){
    margin-right: 0;
}
.case-wrapper .case-inner div{
    padding: 20px;
}
.case-wrapper h3{
    padding: 30px 0!important;
    background: #06c755;
    color: #fff;
    border-radius: 20px 20px 0 0;
    line-height: 1;
    font-size: 2.8rem;
    font-weight: bold;
}

/* TOPページ - 導入した結果 */
.top .result{
    padding-bottom: 60px;
    background: #f6f8f7;
    border-top: solid 15px #06c755;
    border-bottom: solid 15px #06c755;
}
.result h2{
    margin-bottom: 40px!important;
}
.result .container{
    margin-top: 40px;
}
.result .container div{
    display: flex;
    justify-content:space-between;
    width: 968px;
    margin: 0 auto 40px;
}

/* TOPページ - お悩み */

.top .worries{
    padding-bottom: 0;
    background-image: url(../images/top_worries_bg.png);
    background-image: image-set(url(../images/top_worries_bg.png) 1x, url(../images/top_worries_bg@2x.png) 2x);
    background-image: -webkit-image-set(url(../images/top_worries_bg.png) 1x, url(../images/top_worries_bg@2x.png) 2x);
    background-repeat: no-repeat;
    background-position: center center;
    background-size:cover;
}
.worries h2{
    margin-bottom: 0!important;
}
.worries .center img.poyopoyo {
    animation: poyopoyo 2s ease-out infinite;
    opacity: 1;
    z-index: 1;
  }
  @keyframes poyopoyo {
    0%, 40%, 60%, 80% {
      transform: scale(1.0);
    }
    50%, 70% {
      transform: scale(0.95);
    }
  }
img.worries-img{
    margin-top: -140px;
    margin-left: -50px;
    width: 100%;
    max-width: 1630px;
}

/* TOPページ - お悩みリスト */

.top .worrieslist {
    padding: 0;
}
.worrieslist .container{
    display: flex;
    padding: 50px 0 100px;
    background-image: url(../images/top_worrieslist_img.png);
    background-image: image-set(url(../images/top_worrieslist_img.png) 1x, url(../images/top_worrieslist_img@2x.png) 2x);
    background-image: -webkit-image-set(url(../images/top_worrieslist_img.png) 1x, url(../images/top_worrieslist_img@2x.png) 2x);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size:538px;
}
.worrieslist ul{
    width: 702px;
}
.worrieslist li{
    display: flex;
    align-items: center;
    padding: 30px 0 25px;
    font-size: 3.6rem;
    font-weight: bold;
    border-bottom: 5px solid #cdd1d0;
    line-height: 1;
}
.worrieslist li::before {
    display: inline-block;
    margin-right: 15px;
    width: 59px;
    height: 55px;
    background-image: url(../images/top_worries_checkmark.png);
    background-image: image-set(url(../images/top_worries_checkmark.png) 1x, url(../images/top_worries_checkmark@2x.png) 2x);
    background-image: -webkit-image-set(url(../images/top_worries_checkmark.png) 1x, url(../images/top_worries_checkmark@2x.png) 2x);
    background-repeat: no-repeat;
    content: '';
}
.worrieslist li span.worrieslist-txt-w span{
    font-size: 4.0rem;
}

/* TOPページ - お悩み コピー */

.introduction .introduction-balloon{
    margin-top: -200px;
    animation: skew 2.3s linear infinite;
    transform-origin:center;
    cursor: pointer;
}
@keyframes skew {
    0% {transform: skew(0deg, 0deg);}
    5% {transform: skew(2deg, 2.2deg);}
    10% {transform: skew(-1deg, -1deg);}
    15% {transform: skew(0.5deg, 1.2deg);}
    20% {transform: skew(-2deg, -1.5deg);}
    25% {transform: skew(0.9deg, 0.9deg);}
    30% {transform: skew(-0.6deg, -0.6deg);}
    35% {transform: skew(0.3deg, 0.3deg);}
    40% {transform: skew(-0.2deg, -0.2deg);}
    45% {transform: skew(0.1deg, 0.1deg);}
    50% {transform: skew(0deg, 0deg);}
    }

.introduction-title{
    display: flex;
    margin-bottom: 40px;
    align-items:flex-start;
}
.introduction-title p{
    font-size: 5.6rem;
    font-weight: bold;
}
.introduction-title p span{
    font-size: 6.4rem;
    font-weight: 900;
}
.introductio-copy{
    display: flex;
    margin-top: 45px;
    align-items:center;
}
.introductio-copy p{
    font-size: 3.2rem;
    font-weight: bold;
}
.introductio-copy p:first-child{
    margin-bottom: 50px;
}
.introductio-copy p span{
    font-weight: 900;
    color: #05c253;
}

/* TOPページ - WEBページ */

.webpage{
    padding: 0!important;
}
.webpage-inner{
    padding: 120px 0 60px;
    background: #06c755;
}
.webpage h2{
    color: #fff;
    font-weight: bold;
}
.webpage-box{
    position: relative;
    padding: 80px;
    background: #fff;
    text-align: center;
}
.webpage-box-img{
    display: flex;
    justify-content:space-between;
}
.webpage-box p{
    font-weight:500;
    font-size: 1.8rem;
    line-height: 2;
}
.webpage h3{
    display: inline-block;
    position: relative;
    margin: 80px 0 50px!important;
    -webkit-transform: skewX(-15deg);
            transform: skewX(-15deg);
    color: #171717;
    background-color: #fef501;
    font-size: 2.6rem;
    font-weight: bold;
    line-height: 1;
}
.webpage h3 span {
    display: block;
    padding: 20px 100px;
    -webkit-transform: skewX(15deg);
            transform: skewX(15deg);
}
.webpage-box p.webpage-copy{
    margin-top: 50px;
    font-size: 3.0rem;
    font-weight: bold;
    line-height: 1.8;
}
.webpage-box p.webpage-copy span{
    color: #f62f63;
}
.webpage-illust{
    position: absolute;
    right: 40px;
    bottom: 40px;
}
.webpage-copy-last{
    position: relative;
    background: #06c755;
    text-align: center;
    font-weight: bold;
    font-size: 8.0rem;
    font-style: italic;
    color: #fff;
    line-height: 1;
}

.triangle{
    position: relative;
  }
  .triangle::after{
    content: ""; 
    position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
    border-top: #06c755 solid 110px;
    border-right: transparent solid 50vw;
    border-left: transparent solid 50vw;
  }

  .webpage-point .container{
    position: relative;
    text-align: center;
  }

  .webpage-point ul{
    margin-top: 80px;
  }
  .webpage-point ul li {
    position: relative;
    display: inline-block;
    margin-left: 60px;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background-color: #06c755;
  }
  .webpage-point ul li span{
    font-size: 5.0rem;
    color: #fef501;
  }
  .webpage-point ul li:first-child{
    margin-left: 0;
  }
  .webpage-point ul li::after{
    position: absolute;
    content:url(../images/top_webpage_checkmark.png);
    top: -20px;
    right: 50%;
    margin-right: -58px;
  }
  .webpage-point ul li p {
    position: absolute;
    display: inline-block;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width :350px;
    text-align:center;
    font-size: 3.6rem;
    color: #fff;
    font-weight: bold;
    line-height: 1.5;
  }
  .webpage-point-copy{
    padding-bottom: 120px;
    margin-top: 77px;
    font-size: 8.0rem;
    font-style: italic;
    font-weight: bold;
    line-height: 1;
  }
  .webpage-point-copy span{
    font-size: 10.0rem;
    font-weight: 900;
    color: #06c755;
  }
  .top .webpage-point{
    padding-bottom: 0;
    background-image: url(../images/top_webpage_copybg.png);
    background-image: image-set(url(../images/top_webpage_copybg.png) 1x, url(../images/top_webpage_copybg@2x.png) 2x);
    background-image: -webkit-image-set(url(../images/top_webpage_copybg.png) 1x, url(../images/top_webpage_copybg@2x.png) 2x);
    background-repeat: no-repeat;
    background-position: center center;
    background-size:cover;
}
.webpage-point img:last-child{
    position: absolute;
    left: -38px;
    bottom: 0;
}

/* TOPページ - それだけではありません！ */
.top-point h2{
    display: inline-block;
    margin-bottom: 100px!important;
    width: 100%;
    font-size: 5.0rem;
    font-weight: bold;
    line-height: 1.7;
    text-align: center;
}
.top-point h2 .emphasis{
    font-size: 7.2rem;
    font-weight: 900;
}
.top-point h2 .maker{
    background:linear-gradient(transparent 60%, #fef501 40%);
}
.top-point-list{
    display: flex;
    justify-content:space-between;
}
.top-point-list div{
    width: 380px;
}
.top-point-list img{
    margin: 30px 0;
}
.top-point-list p{
    font-size: 1.8rem;
}
.top-point-list h3{
    padding: 18px 18px 18px 126px!important;
    background: #06c755;
    font-size: 2.8rem;
    font-weight: bold;
    color: #fff;
    line-height: 1;
}
.top-point-copy{
    font-size: 5.0rem;
    font-weight: bold;
    color: #05c253;
}
.top-point-copy-main{
    margin-top: 60px;
    font-size: 6.0rem;
    color: #171717;
    line-height: 1.6;
}
.top-point-copy-main span{
    font-size: 8.0rem;
}
.point-circle{
    position: relative;
    display: inline-block;
    width: 100px;
    height: 100px;
    margin: 0 0 -90px 16px;
    border-radius: 50%;
    background-color: #fff;
    border: solid #06c755 4px;
    color: #06c755;
    text-align: center;
}
.point-circle .point-circle-inner span:first-child {
    font-size: 2.0rem;
}
.point-circle .point-circle-inner{
    position: absolute;
    left: -1px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 93px;
    font-size: 3.8rem;
}
.point-circle .point-circle-inner span {
    display: block;
    line-height: 1;
    font-size: 4.0rem;
    font-weight: bold;
}
.top-point.simple-bg{
    position: relative;
}
.top-point.simple-bg:before{
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-top: 60px solid #f6f8f7;
    border-right: 110px solid transparent;
    border-left: 110px solid transparent;
}
.top-point-copy{
    background-image: url(../images/top_basicbg_top.png);
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 60% auto;
}
.top-point-copy-sub span{
    font-weight: 900;
}
.top-point-copy-main span{
    font-size: 8.0rem;
}
.top-point-copy-main span span{
    padding: 0 8px 8px 13px;
    background: #06c755;
    color: #fff;
    letter-spacing: 10px;
}

/* TOPページ - 3冠達成 */
.top-award{
    background-image: url(../images/top_award_bg.png);
    background-image: image-set(url(../images/top_award_bg.png) 1x, url(../images/top_award_bg@2x.png) 2x);
    background-image: -webkit-image-set(url(../images/top_award_bg.png) 1x, url(../images/top_award_bg@2x.png) 2x);
    background-repeat: no-repeat;
    background-position: center center;
    background-size:cover;
}
.top-award .container ul{
    display: flex;
    justify-content:space-between;
    margin: 70px auto 0;
    width: 1097px;
}
.top_3award{
    margin: 0 auto;
    animation: fuwafuwa 1s ease 0s infinite alternate;
    transform-origin:center;
    cursor: pointer;
    }
    @keyframes fuwafuwa {
    from {transform: scale(0.9,0.9);}
    to {transform: scale(1,1);}
}

/* TOPページ - サービス内容 */
.top-service h2 {
    color: #fff;
    font-weight: bold;
}
.top .top-service{
    background: #06c755;
}
.top .top-service .container{
    position: relative;
}
.top-service-titleimg{
    position: absolute;
    top: -165px;
    left: 0;
}
.top-service h2{
    color: #fff;
}
.top-service-list{
    position: relative;
}
.top .top-service-list .title-img{
    top: -168px;
}
.top-service-list-box{
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap:wrap;
}
.top-service-list-box div:first-child{
    width: 100%;
    margin-top: 0;
}
.top-service-list-box div:first-child div{
    margin-left: 0;
    width: 640px;
}
.top-service-list-box div{
    display:flex;
    align-items:center;
    width: 610px;
    margin-top: 60px;
    background: #fff;
}
.top-service-list-box div:nth-child(2n+3){
    margin-left: 60px;
}
.top-service-list-box div div{
    display: block;
    margin-top: 0;
    text-align: center;
}
.top-service-list-box h3{
    margin-bottom: 10px!important;
    font-size: 3.0rem;
    font-weight: bold;
    line-height: 1.6;
    color: #05c253;
}
.top-service-list-box p{
    font-size: 1.8rem;
    line-height: 1.8;
}
.service-circle {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #06c755;
  }
.service-circle .service-circle-inner {
    position: absolute;
    display: inline-block;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width :60px;
    text-align:center;
    font-size: 3.8rem;
    color: #fff;
    font-weight: 500;
  }
  .service-circle .service-circle-inner span{
    display: block;
    line-height: 1;
  }

/* TOPページ - 費用 */

.top .cost h3 {
    display: flex;
    justify-content: center;
    position: relative;
    width: 410px;
    padding: 20px 0!important;
    margin: 0 auto 46px!important;
    border-radius: 100px;
    background-color: #fef501;
    font-size: 2.8rem;
    font-weight: bold;
}

.top .cost h3::before {
    position: absolute;
    bottom: -25px;
    width: 50px;
    height: 26px;
    background-color: #fef501;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
}


.cost table{
    width: 1127px;
    margin: 0 auto;
    text-align: center;
    border-collapse: collapse;
    border-spacing: 0;
}
.cost table th{
    padding: 20px;
    background: #06c755;
    font-size: 3.0rem;
    font-weight: bold;
    color: #fff;
    border: solid 6px #e4e7e6;
    text-align: center;
}
.cost table td{
    padding: 30px;
    background-color: #fff;
    border: solid 6px #e4e7e6;
    vertical-align: middle;
    font-weight: 500;
}
.cost table td:first-child{
    font-size: 3.0rem;
    font-weight: bold;
}
.cost table td:nth-child(2){
    color: #f62f63;
    font-weight: bold;
    font-size: 5.0rem;
}
.cost table td:nth-child(2) span{
    font-size: 3.0rem;
}
.cost table td:last-child{
    text-align: left;
}
.cost table th:nth-child(1n+2){
    width: 425px;
}
.cost .center{
    margin-top: 60px;
}
.cost .cente:first-child{
    margin-top: 0;
}
.cost table.cost-payment td{
    width: 50%;
    color: #171717;
    font-weight: bold;
    font-size: 3.0rem;
}
.cost table.cost-payment td:last-child{
    text-align: center;
}

.top .cost p{
    margin: 40px auto 0;
    width: 1127px;
    text-align: right;
}

/* TOPページ - ご契約の流れ */

.top-flow h2{
    font-weight: bold;
}

.top-flow-box {
    position: relative;
    display: flex;
    align-items:center;
    position: relative;
    padding: 60px;
    background: #ffffff;
    border: 5px solid #06c755;
    border-radius: 20px;
    width: 100%;
}
.top-flow-box:after, .top-flow-box:before {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.top-flow-box:after {
    border-color: rgba(255, 255, 255, 0);
    border-top-color: #ffffff;
    border-width: 48px;
    margin-left: -48px;
}
.top-flow-box:before {
    border-color: rgba(6, 199, 85, 0);
    border-top-color: #06c755;
    border-width: 55px;
    margin-left: -55px;
}
.top-flow-box:last-child:after,
.top-flow-box:last-child:before{
    content: none;
}
.top-flow-box + .top-flow-box{
    margin-top: 80px;
}
.top-flow-box:first-child{
    margin-top: 0;
}
.top-flow-box img{
    margin-right: 50px;
}
.top-flow-box h3{
    margin-bottom: 20px!important;
    color: #05c253;
    font-size: 2.8rem;
    font-weight: bold;
}
.top-flow-box p{
    font-size: 1.8rem;
}
.top-flow-box .step-circle{
    position: absolute;
    top: 20px;
    left: -48px;
    width: 121px;
    height: 121px;
}
.top-flow-box .step-circle .step-circle-inner{
    width: 121px;
    font-size: 6.0rem;
    font-style: normal;
}
.top-flow-box .step-circle .step-circle-inner span:first-child{
    font-size: 2.8rem;
    font-weight: 500;
}
.top-flow-box .step-circle .step-circle-inner span:last-child{
    margin-left: 0;
}


/* コンタクトエリア上部 コピー */

.contact-copy .container{
    position: relative;
    display: flex;
    align-items: center;
    padding: 100px 0;
}
.contact-copy .container img:last-child{
    position: absolute;
    width: 614px;
    height: 605px;
    bottom: 0;
    right: 0;
    z-index: 0;
}
.top .contact-copy{
    padding: 0;
}
.top .contact-copy div{
    letter-spacing: -2px;
    z-index: 1;
    text-shadow: 2px 2px 21px #fff,
    -2px 2px 21px #fff,
    2px -2px 21px #fff,
    -2px -2px 21px #fff;
}
.top .contact-copy p{
    margin-top: 40px;
    font-size: 4.0rem;
    font-weight: bold;
}
.top .contact-copy p:first-child{
    margin-top: 0;
}
.top .contact-copy p span{
    color: #05c253;
    font-size: 5.0rem;
    font-weight: 900;
}

/* コンタクトエリア */

.top .contact-area{
    position: relative;
    padding: 80px 0;
    background: #06c755;
    text-align: center;
}
.contact-area a {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: -moz-linear-gradient( -92deg, rgb(246,83,126) 0%, rgb(246,47,99) 100%);
    background-image: -webkit-linear-gradient( -92deg, rgb(246,83,126) 0%, rgb(246,47,99) 100%);
    background-image: -ms-linear-gradient( -92deg, rgb(246,83,126) 0%, rgb(246,47,99) 100%);
    box-shadow:0px 5px 0px 0px #c72c54;
    position: relative;
    width: 749px;
    height: 118px;
    border-radius: 100px;
    font-weight: bold;
    font-size: 4.0rem;
    color: #fff;
    text-shadow: 0px 0px 10px rgba(87, 10, 30, 0.28);
  }
  .contact-area a:hover{
    transform: translateY(3px);
    box-shadow:0px 2px 0px 0px #c72c54;
    text-decoration: none;
}
.contact-area a img:first-child{
    position: absolute;
    width: 135px;
    height: 162px;
    left: -45px;
    bottom: -80px;
}
.contact-area a img:last-child{
    position: absolute;
    width: 61px;
    height: 61px;
    right: 20px;
    top: 52%;
    transform: translateY(-52%);
    -webkit-transform: translateY(-52%);
    -ms-transform: translateY(-52%);
}
.contact-area-btn{
    margin: 0 auto;
    border: solid 8px #fff;
    width: 765px;
    height: 138px;
    border-radius: 100px;
    background-color: #fff;
    animation: anime_cvbtn01 0.5s ease 0s infinite alternate;
}

/* QA */
.top .top-qa{
    background: #e4f4e7;
}
.top .top-qa h2{
    position: relative;
    font-weight: bold;
    z-index: 1;
}
.top .top-qa .container{
    position: relative;
}
.top-qa-titleimg{
    position: absolute;
    top: -165px;
    left: 0;
}
.top-qa-box{
    border: solid #06c755 2px;
    background-color: #fff;
}
.top-qa-box h3{
    display: flex;
    align-items:center;
    padding: 15px 30px!important;
    background: #06c755;
    color: #fff;
    font-size: 2.8rem;
    font-weight: bold;
}
.top-qa-box h3::before {
    display: inline-block;
    margin-right: 20px;
    width: 69px;
    height: 69px;
    background-image: url(../images/qa_icon.png);
    background-image: image-set(url(../images/qa_icon.png) 1x, url(../images/qa_icon@2x.png) 2x);
    background-image: -webkit-image-set(url(../images/qa_icon.png) 1x, url(../images/qa_icon@2x.png) 2x);
    background-repeat: no-repeat;
    content: '';
}
.top-qa-box div{
    padding: 30px;
    background: #fff;
    font-size: 2rem;
    line-height: 1.6;
    font-weight: 500;
}
.top-qa-box + .top-qa-box{
    margin-top: 50px;
}

/* TOPページ - VOICE */

.top .top-voice{
    padding-bottom: 318px;
}
.top-qa .top-merit-stock{
    width: 403px;
}
.top-voice-box{
    padding: 40px;
    margin-top: 90px;
    width: 610px;
    background: #f6f8f7;
    border: solid 4px #e4e7e6;
    border-radius: 20px;
    font-size: 1.8rem;
    font-weight: 500;
    text-align: center;
}
.top-voice-box:first-child,
.top-voice-box:nth-child(2){
    margin-top: 0;
}
.top-voice-box img{
    margin: -105px 0 15px
}
.top-voice-box div p{
    text-align: right;
}
.top-voice-box div p{
    margin-top: 30px;
}
.top-voice-box div p:first-child{
    margin-top: 0;
    text-align: left;
}
.top-voice-box-wrapper{
    display: flex;
    flex-wrap:wrap;
    justify-content:space-between;
}


/* 下層ページ */
.page header{
    padding: 30px 0;
    margin-bottom: 60px;
    background: #06c755;
    color: #ffffff;
    text-align: center;
}
.page header h1{
    font-size: 3rem;
    font-weight: bold;
}

/* 下層ページ - 表 */
.page table {
    margin: 0 auto;
    width: 800px;
    border-collapse: collapse;
}

.page table th,.page table td {
    padding: 15px 25px;
    border-top: 1px solid #e4e7e6;
    border-bottom: 1px solid #e4e7e6;
    vertical-align: middle;
}

.page table th {
    background: #f4f6f5;
    width: 200px;
    text-align: left;
    color: #05c253;
    white-space: nowrap;
    vertical-align:middle;
}
.page footer{
    margin-top: 100px;
}

/* 下層ページ - 求人募集 */

.page.recruitment header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 15;
  }
  .page.recruitment header h1{
    margin-bottom: 30px!important;
    font-weight:500;
    font-size: 1.6rem;
  }
  .page.recruitment .header-link{
    display: flex;
    justify-content: center;
}

.page.recruitment .header-link button:first-child{
    margin-left: 0;
}
.page.recruitment header button::after {
    transform: rotate(45deg);
    width: 8px;
    height: 8px;
    margin-left: 10px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    content: '';
    display: inline-block;
    position: absolute;
    right: 10%;
    top: 42%;
}
.page.recruitment header button.active::after{
    border-top: 2px solid #06c755;
    border-right: 2px solid #06c755;
}
.page.recruitment header button.active{
    background: #fff;
    color: #06c755;
}
.header-link button:first-child{
    margin-left: 0;
}
  .page.recruitment header button {
    position: relative;
    margin-left: 30px;
    display: inline-block;
    padding: 15px;
    width: 266px;
    border: solid 1px #fff;
    border-radius: 100px;
    color: #fff;
    font-weight:500;
    line-height: 1;
  }
  .page.recruitment header button:hover{
    text-decoration: none;
  }
  .page.recruitment footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #333;
    color: #fff;
    padding: 10px;
    z-index: 10;
  }
  .page.recruitment main {
    margin-top: calc(164px + 1em);
      margin-bottom: calc(164px + 1em);
      padding: 20px;
  }
  .tabcontent {
    display: none;
  }
  .page.recruitment h2{
    padding-top: 40px!important;
    margin-bottom: 30px!important;
    font-size: 2.4rem;
    font-weight: bold;
  }
.recruitment-point-box{
    border: solid 2px #e4e7e6;
    margin: 50px 0 60px;
}
.recruitment-point-box li{
    display: flex;
    align-items:center;
    justify-content: space-between;
    padding: 10px 30px;
    border-top: solid 2px #e4e7e6;
    font-weight: bold;
    font-size: 1.8rem;
}
.recruitment-point-box li:first-child{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 20px 30px 10px;
    border-top: none;
}
.recruitment-point-box li:first-child img{
    margin: 0 10px 10px 0 ;
    width: 76px;
    
}
.recruitment-point-box li:first-child img:last-child,
.recruitment-point-box li:first-child img:nth-child(11n){
    margin-right: 0;
}



.recruitment-point-box li a{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    margin-left: 20px;
    padding: 10px;
    border: none;
    box-shadow:0px 5px 0px 0px #018c3a;
    border-radius: 8px;
    background-color: #06c755;
    color: #fff;
    font-weight: 600;
    font-size: 1em;
    position: relative;
    transition: .5s ease;
    cursor:pointer
}
.recruitment-point-box li a:hover{
    transform: translateY(3px);
    box-shadow:0px 2px 0px 0px #018c3a;
    text-decoration: none;
}
.recruitment-point-box li p::before {
    content: '';
    display: inline-block;
    width: 26px;/*画像の幅*/
    height: 30px;/*画像の高さ*/
    margin-right: 18px;
    background-image: url(../images/point_icon_map@2x.png);
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
  }
  .recruitment-point-box li:nth-child(3) p::before {
    width: 23px;/*画像の幅*/
    height: 30px;/*画像の高さ*/
    background-image: url(../images/point_icon_train@2x.png);
  }
  .recruitment-point-box li:nth-child(4) p::before {
    width: 23px;/*画像の幅*/
    height: 30px;/*画像の高さ*/
    background-image: url(../images/point_icon_money@2x.png);
  }
  .recruitment-point-box li:last-child p::before {
    width: 27px;/*画像の幅*/
    height: 28px;/*画像の高さ*/
    background-image: url(../images/point_icon_time@2x.png);
  }
  .recruitment h3{
    padding: 15px!important;
    margin-bottom: 40px!important;
    background: #f4f6f5;
    color: #05c253;
    font-weight: bold;
    font-size: 2.0rem;
  }
  .recruitment section{
    margin-top: 60px;
  }
  .recruitment section p{
    margin-top: 30px;
  }
  .recruitment section .center a{
    display: inline-block;
    justify-content: center;
    align-items: center;
    width: 337px;
    margin-top: 50px;
    padding: 15px;
    border: none;
    box-shadow:0px 5px 0px 0px #c72c54;
    border-radius: 8px;
    background-color: #fa3d6e;
    color: #fff;
    font-weight: 600;
    font-size: 2.0rem;
    position: relative;
    transition: .5s ease;
    cursor:pointer
}
.recruitment section .center a:hover{
    transform: translateY(3px);
    box-shadow:0px 2px 0px 0px #c72c54;
    text-decoration: none;
}
.page.recruitment .map iframe{
    margin-top: 40px;
    width: 1000px;
    height: 280px;
}
.page.recruitment footer{
    padding: 40px 0;
    background-color: rgba(121, 123, 122,0.5);
}
.page.recruitment footer .center{
    display: flex;
    justify-content:center;
}
  .page.recruitment footer a{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 337px;
    padding: 15px;
    border: 2px solid #fff;
    box-shadow:0px 5px 0px 0px #c72c54;
    border-radius: 100px;
    background-color: #fa3d6e;
    color: #fff;
    font-weight: 600;
    font-size: 2.0rem;
    position: relative;
    transition: .5s ease;
    cursor:pointer
}
.page.recruitment footer a img{
    width: 25px;
    height: 24px;
    margin-right: 18px;
}
.page.recruitment footer a:hover{
    transform: translateY(3px);
    box-shadow:0px 2px 0px 0px #c72c54;
    text-decoration: none;
}
.page.recruitment footer a.tel{
    margin-left: 30px;
    background-color: #06c755;
    box-shadow:0px 5px 0px 0px #018c3a;
}
.page.recruitment footer a.tel img{
    width: 19px;
    height: 30px;
}

.page.recruitment .status-bar{
    display: flex;
    justify-content:center;
    align-items:center;
}
.page.recruitment .status-bar p{
    margin-top: 0;
    width: 300px;
    font-size: 1.8rem;
    font-weight: bold;
}
.page.recruitment .status-bar p:first-child{
    text-align: right;
}
.page.recruitment .status-bar p:last-child{
    text-align: left;
}

.page.recruitment .status-bar img{
    margin: 0 40px;
    width: 357px;
}
.status-bar + .status-bar{
    margin-top: 60px;
}
.jpb-message{
    display: flex;
}
.page.recruitment .jpb-message-img img{
    width: 280px;
    flex-shrink: 0;
    margin-right: 50px;
}
.jpb-message-txt p:first-child{
    margin-top: 0;
}

  /* ページナビ */
  .pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 8px;
    list-style-type: none;
    margin-top: 100px;
    padding: 0;
    font-size: 2.4rem;
}

.pager a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2em;
    height: 2em;
    border: 1px solid #06c755;
    border-radius: 25px;
    color: #06c755;
}
.pager a:hover{
    text-decoration: none;
    background: #06c755!important;
    color: #fff;
}

.pager a:not(:hover) {
    text-decoration: none;
}

.pager .current a {
    background-color: #06c755;
    color: #fff;
    pointer-events: none;
    font-weight: bold;
}
.recruit-flow h4{
    margin-bottom: 15px!important;
    font-weight: bold;
    font-size: 1.8rem;
}
.recruit-flow +.recruit-flow{
    padding-top: 20px;
    margin-top: 20px;
    border-top: 1px solid #e4e7e6;
}
.recruit-flow p{
    margin-top: 0!important;
}
.page.recruitment .app-method .app-method-list div{
    display: flex;
    align-items:center;
}
.page.recruitment .app-method .app-method-list div:first-child{
    margin-right: 50px;
}
.page.recruitment .app-method .app-method-list div p{
    margin: 0 0 0 15px;
    font-size: 2.2rem;
    font-weight: bold;
}
.page.recruitment .app-method .app-method-list img{
    width: 60px;
}
.app-method-list{
    display: flex;
}

/* スライダー */

.slider-wrapper {
    position: relative;
    max-width: 900px;
    margin: 50px auto;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  }
  
  .slider {
    display: flex;
    overflow: hidden;
    width: 100%;
    height: 400px;
  }
  .swiper-button-next, .swiper-rtl .swiper-button-prev{
    display: none;
  }

  .swiper-button-next, .swiper-button-prev {
    top: var(--swiper-navigation-top-offset,45%)!important;
    color: #06c755!important;
}
.swiper-pagination-bullet{
    background: #fff!important;
}
.swiper-pagination-bullet-active {
    background: #06c755!important;
}

.swiper-container {
    overflow: hidden;
}
.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{
    top:75%;
    width: 80px;
    position: absolute;
}
.swiper-container{
    position: relative;
}

  /*画像の縦横比を保持して、指定した高さ・横幅を超える分、リサイズして、トリミングする*/
  .swiper-slide img,
  .swiper-slide video {
    display: block;
    width: 100%;/*任意の横幅を指定*/
    height: 400px;/*任意の高さを指定*/
    object-fit: cover;
  }
  
  .slide {
    flex: 0 0 auto;
    width: 100%;
    transition: all 0.5s;
  }
  
  .slide img,
  .slide video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .caption {
    padding: 20px;
    background-color: #fff;
    color: #333;
    font-size: 18px;
    text-align: center;
  }
  
  .nav-dot-container {
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
  }
  
  .nav-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 5px;
    background-color: #bbb;
    border-radius: 50%;
    cursor: pointer;
  }
  
  .nav-dot.active {
    background-color: #717171;
  }
  
  @media (max-width: 600px) {
    .slider-wrapper {
      max-width: 90%;
    }
    
    .slide {
      height: 300px;
    }
  
    .caption {
      font-size: 16px;
    }
  
    .nav-dot {
      width: 8px;
      height: 8px;
    }
  }
  
  /* Hide the navigation dots as per your request */
  .nav-dot-container {
    display: none;
  }


  /* 750-1280pxまで */

@media screen and (max-width: 1280px) {
    .merit-inner-block{
        padding: 0;
    }
    .top-merit .box:nth-child(odd){
        margin: 60px 0 0;
        padding-left: 0;
    }
    .top-merit .box:nth-child(even){
        margin-right: 0;
        padding-right: 0;
    }
}


/* スマホ向けレイアウト */

@media screen and (max-width: 750px) {
    
    /* ---------------------------------
        共通
    ---------------------------------- */
    
    
    /* 全体 */
    
    .wrapper{
        min-width:100%;
    }
    .container{
        max-width: 750px;
        margin-left: auto;
        margin-right: auto;
    }
    .inner{
        padding: 0 15px;
    }
    img {
        max-width: 100%;
        height: auto;
    }
    a[href^="tel:"]{
        pointer-events: auto;
    }

    /* TOPページ */
    .top section{
        padding: 50px 15px;
    }
    .top h2{
        font-size: 2.8rem;
        margin-bottom: 40px!important;
    }
    .top-merit h2 span:first-child{
        font-size: 1.8rem;
        padding: 5px;
        margin-bottom: 15px!important;
    }
    .top-merit h2 span:first-child span{
        margin-bottom: 0!important;
    }

    /* TOPページ - パーツ*/
    .top .title-img {
        top: -55px;
        height: 60px;
    }
    .pc-item{
        display: none;
    }
    .sp-item{
        display: block;
    }

    /* TOPページ - ヘッダー*/
    .top .header-contact{
        width: 75%;
    }
    .top .header-contact a{
        width: 100%;
        height: 50px;
        font-size: 1.2rem;
        padding: 10px 5px;
        margin-left: 10px;
        border-radius: 15px!important;
    }
    .top .header-contact a::after{
        content: none;
    }
    .top .header-contact a:first-child img {
        width: 25px;
        height: 20px;
        margin-right: 3px;
    }
    .top .header-contact a img {
        width: 25px;
        height: 34px;
        margin-right: 3px;
    }
    .top header h1{
        width: auto;
    }
    .top .mv img{
        margin-top: 0;
    }
    .top header .container{
        padding: 15px;
    }

    /* TOPページ - フッター*/
    .top footer{
        width:100%;
        padding: 15px;
    }
    .top footer .container{
        display: flex;
        flex-wrap:wrap;
        width: 100%;
        padding: 0;
    }
    .top footer a{
        padding: 8px;
        width: 100%;
        height: 65px;
        font-size: 1.6rem;
        letter-spacing: -1px;
    }
    .top footer .container div:last-child{
        margin-top: 10px;
        width: 100%;
    }
    .top footer .container div{
        margin-left: 2%;
        width: 49%;
    }
    .top footer .container div:first-child{
        margin-left: 0;
    }
    .top footer div:nth-child(2){
        margin:0!important;
    }
    .top footer div:nth-child(2) a img {
        margin-right: 8px;
        width: 18px;
        height: 29px;
    }
    .top footer div a img{
        margin-right: 8px;
        width: 30px;
        height: 22px;
    }
    .top footer .container div{
        margin-left: 0;
        height: 80px;
    }
    .top footer div a::after{
        content: none;
    }
    .top .top-voice{
        padding-bottom: 250px;
    }
    

    

    /* TOPページ - お悩みリスト */
    .introduction.container .center img{
        width: 150px;
    }
    .introductio-copy,.introduction-title{
        display: inline-block;
        width: 100%;
    }
    .introduction .introduction-balloon{
        width: 150px;
        margin-top: -120px;
    }
    .introduction-title{
        margin-bottom: 15px;
    }
    .introduction-title p{
        display: inline-block;
        width: 100%;
        text-align: center;
        font-size: 2.8rem;
    }
    .introduction-title p span{
        font-size: 3.0rem;
    }
    .introductio-copy{
        margin-top: 20px;
    }
    .introductio-copy img{
        margin-bottom: 20px;
    }
    .introductio-copy p {
        font-size: 2.2rem;
        font-weight: bold;
        text-align: center;
    }
    .introductio-copy p:first-child{
        margin-bottom: 20px;
    }

    /* TOPページ - メリット*/
    .top-merit{
        background-size: 90% auto,90% auto;
    }
    .top-merit .box{
        display: inline-block;
    }
    .merit-inner-block {
        padding: 0;
    }
      .top-merit .box:nth-child(even){
        margin-left: calc(50% - 50vw);
        padding-left: calc(50vw - 50%);
      }
      .top-merit .box:nth-child(odd)  {
        margin-right: calc(50% - 50vw);
        padding-right: calc(50vw - 50%);
      }
      .merit-inner-block img{
        max-width:none;
        margin: 0 0 15px 0;
      }
      .top-merit .box:nth-child(odd),
      .top-merit .box:nth-child(even)
      {
        padding: 20px;
        margin: 25px 0 0;
        width: 100%;
        border-radius: 20px;
      }
      .top-merit .box:first-child{
        margin-top: 0;
      }
      .top-merit .box h3{
        display: inline-block;
        margin-bottom: 15px!important;
        width: 100%;
        font-size: 2.2rem;
        text-align: center;
      }
      .top-merit .box h3 span:first-child{
        display: inline-block;
        margin-right: 0;
        width: 100%;
        font-size: 2.2rem;
      }

    
    /* TOPページ - ステップ*/
    .step-wrapper{
        display: inline-block;
        margin-top: 0;
        width: 100%;
    }
    .step-wrapper div{
        padding: 20px;
        margin-top: 135px;
        width: 100%;
      }
      .step-wrapper div:first-child{
        margin-top: 80px;
      }
    .simple-bg .center{
        text-align: left;
      }
    .step-img .center{
        font-size: 1.8rem;
    }
    .step-wrapper div h3{
        font-size: 2.2rem;
    }
    .step-circle{
        width: 100px;
        height: 100px;
    }
    .step-circle .step-circle-inner span:first-child {
        font-size: 2.2rem;
    }
    .step-circle .step-circle-inner{
        width: 100px;
        font-size: 3.8rem;
    }
    .step-circle-title{
        display: block;
    }
    .step-wrapper div::after{
        content:url(../images/step-arrow-bottom.png);
        top: auto;
        left: auto;
        bottom: -70px;
        right: 50%;
        margin-right: -55px;
    }
    .step-wrapper div:last-child:after{
        content:none;
    }

    /* TOPページ - 事例*/

    .case-wrapper .case-inner{
        margin: 25px 0 0 0;
        width: 100%;
    }
    .case-wrapper h3{
        padding: 20px!important;
        font-size: 2.2rem;
    }

    /* TOPページ - 導入した結果*/
    .top .result{
        padding-bottom: 30px;
    }
    .top .result h2{
        margin-bottom: 25px!important;
    }
      .top .container {
        margin-top: 20px;
        max-width: 750px;
    }
    .result .container div{
        margin-bottom: 20px;
        width: auto;
    }
    .result .container div img{
        width: 48%;
    }
    .result .center img{
        width: 111px;
    }

    /* お悩み */
    .top .worries{
        padding-top: 20px;
    }
    img.worries-img{
        margin: -80px 0 0 0;
        max-width:none;
    }
    .worrieslist.simple-bg{
        padding: 50px 15px;
    }
    .worrieslist .container{
        padding: 0;
        margin-top: 0;
        background-image: none;
    }
    .worrieslist ul{
        width: 100%;
    }
    .worrieslist li{
        display: flex;
        padding: 20px 0;
        width: 100%;
        font-size: 1.8rem;
        line-height: 1.2;
    }
    .worrieslist .worrieslist-txt-w{
        display:inline-block;
    }
    .worrieslist li span.worrieslist-txt-w span{
        font-size: 2.4rem;
    }
    .worrieslist li:first-child{
        padding-top: 0;
    }
    .worrieslist li::before{
        margin-right: 8px;
        width: 30px;
        height: 28px;
        background-size: 30px 28px;
    }
    
    /* それだけではありません */
    .top .top-point h2{
        margin-bottom: 10px!important;
        font-size: 2.4rem;
    }
    .top .top-point h2 .emphasis{
        font-size: 3.0rem;
    }
    .top-point-list div{
        margin-top: 20px;
        width: 100%;
    }
    .top-point-list div:first-child{
        margin-top: 0;
    }
    .top-point-list{
        margin-top: 0;
    }
    .top-point-list img{
        width: 100%;
    }
    .top-point-copy{
        font-size:2.4rem;
    }
    .top-point-copy-main{
        margin-top: 20px;
        font-size:3.0rem;
    }
    .top-point.simple-bg:before{
        border-top: 40px solid #f6f8f7;
        border-right: 65px solid transparent;
        border-left: 65px solid transparent;
    }
    .top-point-copy-main span {
        font-size: 4.0rem;
    }
    .top-point-copy-main span span{
        padding: 0 4px 4px 6px;
        letter-spacing: 5px;
    }
    .top-point-copy .container.center{
        margin-top: 10px;
    }
    .top-point-list h3{
        padding: 15px!important;
        font-size: 2.2rem;
        text-align: center;
    }
    .point-circle .point-circle-inner{
        top: 52%;
        width: 72px;
    }
    .point-circle .point-circle-inner span:first-child {
        font-size: 1.8rem;
    }
    .point-circle .point-circle-inner span {
        font-size: 3.0rem;
    }
    .point-circle{
        margin: 0 0 -72px 10px;
        width: 80px;
        height: 80px;
    }

    /* TOPページ - 3冠達成*/
    .top-award .container ul{
        margin-top: 20px;
        width: auto;
    }
    .top-award .container ul li{
        width: 31%;
    }

    /* TOPページ - サービス内容*/
    .top-service-list div{
        display: inline-block;
        width: 100%;
    }
    .top-service-list div img{
        width: 100%;
    }
    .top-service-list div:nth-child(2n+3){
        margin-left: 0;
    }
    .service-circle{
        width: 50px;
        height: 50px;
    }
    .service-circle .service-circle-inner{
        width: 50px;
        font-size: 3.0rem;
    }
    .top-service-list-box h3{
        font-size: 2.2rem;
    }
    .top-service-list-box div:first-child div{
        width: 100%;
    }
    .top-service-list-box div{
        margin-top: 25px;
    }
    /* WEBページ */
    .webpage-inner{
        padding: 50px 15px;
    }
    .webpage-box-img{
        display: inline-block;
    }
    .webpage-box{
        padding: 20px;
    }
    .webpage-box p{
        text-align: left;
    }
    .webpage-box p br{
        display: none;
    }
    .webpage-point ul{
        margin-top: 60px;
    }
    .webpage-point ul li{
        width: 250px;
        height: 250px;
        margin: 30px 10px 0 10px;
    }
    .webpage-point ul li:first-child{
        margin-top: 0;
    }
    .webpage-point ul li p{
        width: 250px;
        font-size: 2.2rem;
    }
    .webpage-point ul li span {
        font-size: 3rem;
    }
    .webpage h3{
        margin: 20px 30px!important;
        font-size: 2.0rem;
    }
    .webpage h3 span{
        padding: 15px 50px;
    }
    .webpage-box-img img{
        margin-top: 20px;
    }
    .webpage-box-img img:first-child{
        margin-top: 0;
    }
    .webpage-box p.webpage-copy{
        margin-top: 20px;
        font-size: 2.4rem;
    }
    .webpage-illust {
        right: 0;
        bottom: -50px;
        width: 120px;
    }
    .triangle::after{
        border-top: #06c755 solid 60px;
        z-index: 1;
    }
    .webpage-copy-last{
        font-size: 4.0rem;
    }
    .top .webpage-point{
        z-index: 0;
    }
    .webpage-point-copy{
        padding-bottom: 50px;
        margin-top: 30px;
        font-size: 4.0rem;
    }
    .webpage-point-copy span{
        font-size:5.0rem;
    }
    .webpage-point img:last-child{
        left: -20px;
        width: 80px;
    }
    .webpage-point ul li::after{
        content: '';
        display: inline-block;
        top: -15px;
        width: 80px;
        height: 80px;
        margin-right: -48px;
        background-image: url(../images/top_webpage_checkmark.png);
        background-size: contain;
        background-repeat: no-repeat;
        vertical-align: middle;
    }

    /* それだけではありません */
    .top-point-list{
        display: inline-block;
    }

    .contact-copy .container img:last-child{
        right: 0px;
        width: 150px;
        height: auto;
    }

    /* サービス内容 */
    .top-service-titleimg {
        top: -45px;
        left: -30px;
        width: 100px;
    }
    .top-service h2{
        position: relative;
        z-index: 1;
    }
    .top .top-service-list .title-img{
        top: -56px;
    }
    .top-service-list-box div div{
        padding: 20px;
    }

    /*　コンタクトエリア　*/
    .contact-area-btn{
        width: 100%;
        height: 100px;
    }
    .contact-area a{
        width: 100%;
        height: 80px;
        font-size: 2.8rem;
    }
    .top .container{
        margin-top: 0;
    }
    .top .contact-area{
        padding: 50px 20px;
    }
    .contact-area a img:last-child {
        width: 30px;
        height: 30px;
        right: 15px;
    }
    .contact-area a img:first-child {
        width: 67px;
        height: 80px;
        left: -10px;
        bottom: -40px;
    }

    /* TOPページ - 費用 */
    .cost table{
        width: 100%;
    }
    .top .cost p{
        margin-top: 25px;
        width: 100%;
        font-size: 1.4rem;
    }
    .top .cost h3{
        padding: 10px!important;
        margin-bottom: 40px!important;
        width: 80%;
        font-size: 2.2rem;
    }
    .cost .center:nth-child(2){
        margin-top: 0;
    }
    .cost table{
        display: block;
        overflow-x: scroll;
        white-space: nowrap;
    }
    .cost table th{
        font-size: 1.8rem;
    }
    .cost table td:first-child{
        font-size: 1.8rem;
    }
    .cost table td:nth-child(2){
        font-size: 3.0rem;
    }
    .cost table th,
    .cost table td,
    .cost table th:nth-child(1n+2){
        width: 20%;
        padding: 10px;
    }
    .cost .center{
        margin-top: 30px;
    }
    .cost table.cost-payment{
        display: table;
        overflow-x:visible;
    }

    /* TOPページ - FLOW */
    .top-flow-box{
        display: inline-block;
        padding: 20px;
    }
    .top .title-img{
        margin-right: 0;
    }
    .top-flo .top .title-img{
        top: -60px;
    }
    .top-flow-box img{
        margin: 0 0 20px 0;
        width: 100%;
    }
    .top-flow-box img.title-img{
        width: auto;
    }
    .top-flow-box h3{
        margin-bottom: 10px!important;
        font-size: 2.2rem;
    }
    
    .top-flow-box .step-circle .step-circle-inner{
        top: 52%;
        width: 80px;
    }
    .top-flow-box .step-circle .step-circle-inner span:first-child {
        font-size: 1.8rem;
    }
    .top-flow-box .step-circle .step-circle-inner span {
        font-size: 3.0rem;
    }
    .top-flow-box .step-circle{
        margin: 0 0 -72px 10px;
        top: -25px;
        left: -25px;
        width: 80px;
        height: 80px;
        
    }
    .top-flow-box + .top-flow-box{
        margin-top: 60px;
    }

    .top .contact-copy p {
        font-size: 2.2rem;
        font-weight: bold;
        text-align: left;
    }
    .top .contact-copy p span{
        font-size: 2.6rem;
        font-weight: 900;
    }
    .top .contact-copy div{
        padding: 15px 15px 25px;
        letter-spacing: 0;
    }
    

    /* TOPページ - qa */

    .top-qa-box h3{
        display: inline-block;
    }
    .top-qa-box + .top-qa-box{
        margin-top: 25px;
    }
    .top-qa-box h3::before{
        width: 100%;
        margin-right: 0;
        background-position: 50% top;
    }
    .top-qa-box h3 {
        display: inline-block;
        width: 100%;
        padding: 15px 20px!important;
        font-size: 2.2rem;
        text-align: center;
    }
    .top-qa-box div{
        padding: 30px;
        font-size: 1.8rem;
    }

    /* TOPページ - voice */

    .top-voice-box img{
        margin-top: 0;
    }
    .top-voice-box{
        padding: 20px;
        margin-top: 30px;
        width: 100%;
        font-size: 1.6rem;
    }
    .top-voice-box:nth-child(2){
        margin-top: 30px;
    }

    /* 求人情報入力シート */

    .job-info h2,.job-info h3{
        width: 100%;
    }
	.job-info .form-salary {
		flex-wrap: wrap;
	}
	.job-info .form-salary div {
		margin-left: 0;
		width: 49%;
	}
	.job-info .form-salary div:last-child {
		margin-left: 2%;
	}
	.job-info .form-salary div.selectbox {
		margin-bottom: 10px;
		width: 100%;
	}

    /* フォーム */
    form input[type="text"], form textarea {
        width:80%;
        padding:5px;
        font-size:110%;
        display:block;
    }
    form input[type="submit"], form input[type="reset"], form input[type="button"] {
        display:block;
        width:100%;
    }
    .submit-all div{
        width: 48%;
        margin-left: 4%;
    }
    
    .submit-all{
        padding: 0 15px;
    }
    .formTable tr th span.hissu.hissu-fukuri{
        margin: 8px 0 0 0;
    }
    .formTable tr th span.hissu{
        margin: 0 0 0 8px;
    }
    .formTable tr th span{
        display: inline-block;
    }
    .submit-all div [type="reset"], [type="submit"],[type="button"]{
        padding: .9em 5px;
        width: 100%;
    }
    

    
    /* 下層ページ */

    .page header h1{
        font-size: 2.4rem;
    }
    .page table {
        width: 100%;
    }
    .page table th,.page table td {
        width: auto;
        display: block;
        border-top: none;
    }
    .page table tr:first-child {
        border-top: 1px solid #e4e7e6;
    }
    .page footer{
        margin-top: 80px;
    }

    /* 下層ページ - 表 */
    .page table th,.page table td {
        padding: 15px;
    }

    /* 下層ページ - 求人募集 */
    .page.recruitment header button {
        width: 32%;
        margin-left: 2%;
      }
      .page.recruitment header button:first-child{
        margin-left: 0;
      }
      .recruitment-point-box{
        margin-top: 40px;
      }
      .recruitment-point-box li:first-child{
        padding: 20px 20px 10px;
      }
      .recruitment-point-box li:first-child img{
        margin: 0 2.6% 10px 0;
        width: 23%;
    }

    .recruitment-point-box li:first-child img:nth-child(11n){
        margin-right: 2.3%;
    }
    .recruitment-point-box li:first-child img:nth-child(4n){
        margin-right: 0;
    }
    .recruitment-point-box li{
        display:inline-block;
        width: 100%;
        padding: 20px;
    }
    .recruitment-point-box li p{
        display: flex;
        margin-bottom: 15px;
    }
    .recruitment-point-box li a{
        margin-left: 0;
        width: 100%;
    }
    .recruitment-point-box li p::before{
        flex-shrink: 0;
    }
    .page.recruitment .map iframe{
        width: 100%;
    }
    .page.recruitment footer{
        padding: 20px;
    }
    .page.recruitment footer a{
        width: 48%;
        font-size: 1.8rem;
    }
    .page.recruitment footer a.tel{
        margin-left: 4%;
    }
    .page.recruitment footer .center{
        display: flex;
    }

    .page.recruitment .jpb-message{
        display: inline-block;
    }
    .page.recruitment .jpb-message-img img{
        margin: 0 0 30px 0;
        width: 100%;
    }
    .page.recruitment .status-bar img{
        margin: 0 15px;
    }
    .page.recruitment .status-bar p{
        width: 100%;
        font-size: 1.4rem;
    }
    .page.recruitment .app-method .app-method-list div p{
        margin-left: 10px;
        font-size: 2.0rem;
    }
    .page.recruitment .app-method .app-method-list img{
        width: 50px;
    }

    /* slider */
    /*画像の縦横比を保持して、指定した高さ・横幅を超える分、リサイズして、トリミングする*/
      .swiper-slide img,
      .swiper-slide video {
        height: 250px;/*任意の高さを指定*/
      }
      .swiper-button-next, .swiper-button-prev {
        top: var(--swiper-navigation-top-offset,40%)!important;
    }
    .swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
    .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{
        top: 60%;

    }
}