@charset "UTF-8";
/* CSS Document */
/*
Theme Name: onepress-child
Template: onepress
*/
h1, h2, h3, h4, h5, h6, p {
	color: #000000;
}
h1, h2, h3, h4, h5, h6 {
	font-family: ruika, sans-serif;
font-weight: 100;
font-style: normal;
}
p {
	font-size:16px;
}

.pcview{}
.keyvisual-box{
	    position: relative;
	margin-top: -150px;
}

.keyvisual{}
#vis{
	    padding: 40px;
}

#video1 {
    width: 100%;
    height: auto;
	    border-radius: 38px;
	aspect-ratio:16/9;
}
.site-header{
	    background: none;
	    box-shadow: none;
}
.main-copy{
	    padding-right: 40px;
    text-align: right;
    margin-top: -190px;
}
.main-copy h2{
	font-family: ruika, sans-serif;
font-weight: 100;
font-style: normal;
	    font-size: 115px;
	    line-height: 1em;
	margin-bottom: 0;
	color: #34b9ac;
}
.main-copy h2 span{
	    font-size: 44px;
    display: block;
	    line-height: 1em;
	color: #000;
}


.site-branding .site-logo-div {
    background: #fff;
    padding: 20px;
	    padding-right: 10px;
    border-radius: 0px 0px 18px 0px;
}


.site-content {
    border-top: none;
    margin-top: 0;
}

.top-content{
	position: relative;
	margin: 120px 0px;
}
.top-content::before{
    content: "";
    background: url(http://kyoei-toso.co.jp/recruitment/wp-content/uploads/2025/10/bg_brash.png);
    display: block;
    width: 600px;
    height: 395px;
    background-repeat: repeat;
    background-size: 100%;
    position: absolute;
    top: 0;
    left: -30px;
	
    
}
.top-content::after{
	content: "";
    background: url(http://kyoei-toso.co.jp/recruitment/wp-content/uploads/2025/10/bg_brash.png);
    display: block;
    width: 600px;
    height: 395px;
    background-repeat: repeat;
    background-size: 100%;
    position: absolute;
    bottom: 0;
    right: -30px;
}
.top-content-inner{
	    position: relative;
    z-index: 1;
}

.top-content-inner::before{
	content:"";
	background: url(http://kyoei-toso.co.jp/recruitment/wp-content/uploads/2025/10/bg_dot.png);
    display: block;
    width: 400px;
    height: 101px;
    background-repeat: repeat;
    background-size: 72px;
    position: absolute;
	top:0;
	right: 240px;
}
.top-content-inner::after{
	content:"";
	background: url(http://kyoei-toso.co.jp/recruitment/wp-content/uploads/2025/10/bg_dot.png);
    display: block;
    width: 400px;
    height: 101px;
    background-repeat: repeat;
    background-size: 72px;
    position: absolute;
	bottom:0;
	right: 0;
}

.top-content-text{}
.top-content-text::before{
	content:"";
}
.top-content-text::after{
	content:"";
}
.top-content-text h2{
	position: relative;
	display: block;
	    font-size: 72px;
	z-index: 1;
	    margin-bottom: 45px;
}
.top-content-text h2 span{
	display: block;
	font-size: 32px;
}
.top-content-text h2::before{
    content: "";
    background: url(http://kyoei-toso.co.jp/recruitment/wp-content/uploads/2025/10/brush.png);
    width: 480px;
    height: 190px;
    display: block;
    background-size: contain;
    position: absolute;
    z-index: -1;
	    left: -100px;
    top: -50px;
}
.top-content-text p {
    position: relative;
    z-index: 1;
    width: 90%;
	font-size: 18px;
}
.more-btn{
    width: 100%;
}
.more-btn a{
color: #000;
    font-family: ruika, sans-serif;
    font-weight: 100;
    font-style: normal;
    background: #34b9ac;
    padding: 20px 20px 20px 50px;
    width: 200px;
    display: block;
    border-radius: 40px;
    position: relative;
    align-items: center;
    margin: 0 auto;
}
.more-btn a:hover{
	text-decoration: none;
	    background: #000;
    color: #fff;
}
.more-btn a::after{
    content: "";
    display: block;
    background: url(http://kyoei-toso.co.jp/recruitment/wp-content/uploads/2025/10/icon_roller.png);
    width: 20px;
    height: 20px;
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-color: #fff;
    padding: 20px 20px 20px 20px;
    border-radius: 20px;
    align-items: center;
    top: 0;
    bottom: 0;
    position: absolute;
    margin: auto;
    right: 15px;
}
.top-image{
    margin-top: -160px;
    width: 110%;
    float: right;
}
.top-image img{
	    object-fit: cover;
}
/*
.top-image1{
	width: 300px;
	top:0;
	right: 0;
}
.top-image1 img{
    aspect-ratio: 2 / 3;
}
.top-image1::before{
	content:"";
}
.top-image1::after{
	content:"";
}

.top-image2{
width: 540px;
    top: 180px;
    right: 180px;
}
.top-image2 img{
    aspect-ratio: 3 / 2;
}
.top-image2::before{
	content:"";
}
.top-image2::after{
	content:"";
}
*/
.col3-box{
	    display: flex;
	position: relative;
    z-index: 2;
	
}
.col2-box{
	    display: flex;
	position: relative;
    z-index: 2;
	flex-wrap: wrap;
}
.cell{
	position: relative;
    margin: 0px 15px;
    border-radius: 36px;
	width: 100%;
}
.cell-job{}
.cell-job1{
	    margin-top: 45px;
}
.cell-job3{
	    margin-top: -45px;
}
.cell-image{
	    aspect-ratio: 1 / 1.2;
}
.cell-image img{
	object-fit: cover;
    width: 100%;
    height: 100%;
	    border-radius: 36px;
}
.cell-header{
	position: absolute;
	top: 0;
	left: 0;
}
.cell-header h3{
	    background: #34b9ac;
    display: block;
    padding: 20px 30px;
    border-radius: 36px 0px 36px 0px;
}
.cell-header h3 span{
	    font-size: 0.8em;
}
.cell .more-btn{
	    position: absolute;
    bottom: 20px;
}
.cell .more-btn a{}
.cell-job2 .more-btn{
	    bottom: 65px;
}
.cell-job3 .more-btn{
	    bottom:110px;
}
.cell-service{
    width: calc(91% / 2);
    margin-bottom: 30px;
}
.pagetitle-box{
	position: relative;
	    margin-bottom: 120px;
}
.pagetitle-box::before{
    content: "";
    background: url(http://kyoei-toso.co.jp/recruitment/wp-content/uploads/2025/10/bg_brash.png);
    display: block;
    width: 600px;
    height: 395px;
    background-repeat: repeat;
    background-size: 100%;
    position: absolute;
    top: 60px;
    left: -30px;
    z-index: 1;
}
.pagetitle-box::after{
content: "";
    background: url(http://kyoei-toso.co.jp/recruitment/wp-content/uploads/2025/10/bg_brash.png);
    display: block;
    width: 600px;
    height: 395px;
    background-repeat: repeat;
    background-size: 100%;
    position: absolute;
    top: -180px;
    right: -70px;
    z-index: 1;
}
.pagetitle-text{
	    margin-top: 140px;
	position: relative;
	    z-index: 2;
}
.pagetitle-text::before{
	content: "";
}
.pagetitle-text::after{
	content: "";
}
.pagetitle-text h1{
	    position: relative;
    display: block;
    font-size: 72px;
    z-index: 1;
}
.pagetitle-text h1::before{
    content: "";
    background: url(http://kyoei-toso.co.jp/recruitment/wp-content/uploads/2025/10/brush.png);
    width: 480px;
    height: 190px;
    display: block;
    background-size: contain;
    position: absolute;
    z-index: -1;
    left: -100px;
    top: -50px;
}
.pagetitle-text h1::after{
	content: "";
}
.pagetitle-text h1 span{
	display: block;
    font-size: 32px;
}
.pagetitle-text p{
	    font-size: 32px;
    font-family: ruika, sans-serif;
    font-weight: 100;
    font-style: normal;
    color: #34b9ac;
}
.pagetitle-text p span{
	    display: block;
    color: #000;
    font-size: 0.8em;
}
.pagetitle-image{
    position: relative;
    margin-top: -30px;
    /*width: 120%;*/
    float: right;
    z-index: 2;
}
.pagetitle-image::before{
    content: "";
    background: url(http://kyoei-toso.co.jp/recruitment/wp-content/uploads/2025/10/bg_dot.png);
    display: block;
    width: 400px;
    height: 100px;
    background-repeat: repeat;
    background-size: 72px;
    position: absolute;
    top: -30px;
left: -220px;
}
.pagetitle-image::after{
content: "";
    background: url(http://kyoei-toso.co.jp/recruitment/wp-content/uploads/2025/10/bg_dot.png);
    display: block;
    width: 400px;
    height: 100px;
    background-repeat: repeat;
    background-size: 72px;
    position: absolute;
    bottom: -30px;
    right: -30px;
}
.pagetitle-image img{
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 36px;
}

.pagecontent-box{
	    max-width: 680px;
    margin: 0 auto;
}
.pagecontent-box::before{
	content: "";
}
.pagecontent-box::after{
	content: "";
}
.pagecontent-box840 {
	max-width: 840px;
}

.pagecontent-inner{}
.pagecontent-inner::before{
	content: "";
}
.pagecontent-inner::after{
	content: "";
}
.pagecontent-section{
	    margin-bottom: 120px;
	position: relative;
	z-index: 2;
}
.pagecontent-section::before{
    content: "";
    background: url(http://kyoei-toso.co.jp/recruitment/wp-content/uploads/2025/10/bg_brash.png);
    display: block;
    width: 600px;
    height: 395px;
    background-size: 100%;
    position: absolute;
    top: 0px;
	right:-80px;
	bottom: 0;
	margin: auto;
    z-index: 1;
}
.pagecontent-section::after{
	content: "";
}
.pagecontent-section h2{
	    color: #34b9ac;
}
.pagecontent-section h2 span{
	    display: block;
    font-size: 0.6em;
    color: #000;
}
.pagecontent-section h2::before{
	content: "";
}
.pagecontent-section h2::after{
	content: "";
}
.pagecontent-section-inner{
	    position: relative;
    z-index: 2;
}
.pagecontent-section-image{
	position: relative;
}
.pagecontent-section-image::before{
content: "";
    background: url(http://kyoei-toso.co.jp/recruitment/wp-content/uploads/2025/10/bg_dot.png);
    display: block;
    width: 400px;
    height: 100px;
    background-repeat: repeat;
    background-size: 72px;
    position: absolute;
    top: -30px;
    left: -30px;
}
.pagecontent-section-image::after{
content: "";
    background: url(http://kyoei-toso.co.jp/recruitment/wp-content/uploads/2025/10/bg_dot.png);
    display: block;
    width: 400px;
    height: 100px;
    background-repeat: repeat;
    background-size: 72px;
    position: absolute;
    bottom: -30px;
    right: -30px;
}
.pagecontent-section-image img{
	    border-radius: 36px;
    object-fit: cover;
    aspect-ratio: 3 / 2;
}
.pagecontent-section-image img::before{
	content: "";
}
.pagecontent-section-image img::after{
	content: "";
}
.p-strong{
	font-family: ruika, sans-serif;
    font-weight: 100;
    font-style: normal;
    font-size: 22px;
    color: #34b9ac;
	font-family: "toppan-bunkyu-midashi-go-std", sans-serif;
font-weight: 900;
font-style: normal;
}
.message{
	font-family: ruika, sans-serif;
    font-weight: 100;
    font-style: normal;
    font-size: 22px;
	font-family: "toppan-bunkyu-midashi-go-std", sans-serif;
font-weight: 900;
font-style: normal;
}

.big-text{
	font-size: 1.2em;
}
.small-text{
	font-size: 0.8em;
}
ul.color-list{
	    padding: 0;
}
ul.color-list li{
    list-style: none;
    margin: 0px;
    margin-bottom: 30px;
}
ul.color-list li h3{
    background: #34b9ac;
    padding: 10px 15px 0px 15px;
    display: inline-block;
    border-radius: 12px 12px 0px 0px;
}
ul.color-list li p{
    background: #34b9ac;
    padding: 10px 15px 10px 15px;
    display: block;
    margin-top: -15px;
    border-radius: 0px 12px 12px 12px;
}
.object-position0-50{
	    object-position: 0% 50%;
}
.object-position20-50{
	    object-position: 20% 50%;
}
.radius36 img{
	border-radius: 36px;
}

.cell-data{
    border: 5px solid #d5d9e4;
    padding: 30px 15px 15px 15px;
    margin: 0px 10px;
    margin-bottom: 20px;
}
.cell-data-image{
	    text-align: center;
}
.cell-data-image img{
	    width: 100%;
    height: auto;
    max-width: 140px;
    margin: 0 auto;
}
.cell-data-info{
	    margin-top: 20px;
}
.cell-data-info h2{
	    color: #34b9ac;
    text-align: center;
    margin-bottom: 0;
	    font-size: 24px;
}
.cell-data-info h2 span{
	font-size: 0.7em;
	display: inline;
	color: #34b9ac;
}

/*********
データ1
*********/
@property --count {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
.countUp1 {
    counter-set: countUp1 var(--count);
    animation: countUp1 3s 1;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.2, 0.1, 0.2, 1);
    font-variant-numeric: tabular-nums;
    font-size: 3rem;
    text-align: center;
    font-family: ruika, sans-serif;
    font-weight: 100;
    font-style: normal;
    color: #34b9ac;
}
.countUp1::after {
  content: counter(countUp1) "年";
	font-family: "toppan-bunkyu-midashi-go-std", sans-serif;
font-weight: 900;
font-style: normal;
}
@keyframes countUp1 {
  100% {
    --count: 37;
  }
}
/*********
データ2
*********/
@property --count2 {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
.countUp2 {
    counter-set: countUp2 var(--count2);
    animation: countUp2 3s 1;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.2, 0.1, 0.2, 1);
    font-variant-numeric: tabular-nums;
    font-size: 3rem;
    text-align: center;
    font-family: ruika, sans-serif;
    font-weight: 100;
    font-style: normal;
    color: #34b9ac;
}
.countUp2::after {
  content: counter(countUp2) "名";
	font-family: "toppan-bunkyu-midashi-go-std", sans-serif;
font-weight: 900;
font-style: normal;
}
@keyframes countUp2 {
  100% {
    --count2: 22;
  }
}
/*********
データ3
*********/
@property --count3 {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
.countUp3 {
    counter-set: countUp3 var(--count3);
    animation: countUp3 3s 1;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.2, 0.1, 0.2, 1);
    font-variant-numeric: tabular-nums;
    font-size: 3rem;
    text-align: center;
    font-family: ruika, sans-serif;
    font-weight: 100;
    font-style: normal;
    color: #34b9ac;
}
.countUp3::after {
  content: counter(countUp3) "件";
	font-family: "toppan-bunkyu-midashi-go-std", sans-serif;
font-weight: 900;
font-style: normal;
}
@keyframes countUp3 {
  100% {
    --count3: 300;
  }
}
/*********
データ4
*********/
@property --count4 {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
.countUp4 {
    counter-set: countUp4 var(--count4);
    animation: countUp4 3s 1;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.2, 0.1, 0.2, 1);
    font-variant-numeric: tabular-nums;
    font-size: 3rem;
    text-align: center;
    font-family: ruika, sans-serif;
    font-weight: 100;
    font-style: normal;
    color: #34b9ac;
}
.countUp4::after {
  content: counter(countUp4) ":9";
	font-family: "toppan-bunkyu-midashi-go-std", sans-serif;
font-weight: 900;
font-style: normal;
}
@keyframes countUp4 {
  100% {
    --count4: 16;
  }
}
/*********
データ５
*********/
@property --count5 {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
.countUp5 {
    counter-set: countUp5 var(--count5);
    animation: countUp5 3s 1;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.2, 0.1, 0.2, 1);
    font-variant-numeric: tabular-nums;
    font-size: 3rem;
    text-align: center;
    font-family: ruika, sans-serif;
    font-weight: 100;
    font-style: normal;
    color: #34b9ac;
}
.countUp5::after {
  content: counter(countUp5) "分";
	font-family: "toppan-bunkyu-midashi-go-std", sans-serif;
font-weight: 900;
font-style: normal;
}
@keyframes countUp5 {
  100% {
    --count5: 10;
  }
}
/*********
データ6
*********/
@property --count6 {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
.countUp6 {
    counter-set: countUp6 var(--count6);
    animation: countUp6 3s 1;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.2, 0.1, 0.2, 1);
    font-variant-numeric: tabular-nums;
    font-size: 3rem;
    text-align: center;
    font-family: ruika, sans-serif;
    font-weight: 100;
    font-style: normal;
    color: #34b9ac;
}
.countUp6::after {
  content: counter(countUp6) "日";
	font-family: "toppan-bunkyu-midashi-go-std", sans-serif;
font-weight: 900;
font-style: normal;
}
@keyframes countUp6 {
  100% {
    --count6: 90;
  }
}
/*********
データ7
*********/
@property --count7 {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
.countUp7 {
    counter-set: countUp7 var(--count7);
    animation: countUp7 3s 1;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.2, 0.1, 0.2, 1);
    font-variant-numeric: tabular-nums;
    font-size: 3rem;
    text-align: center;
    font-family: ruika, sans-serif;
    font-weight: 100;
    font-style: normal;
    color: #34b9ac;
}
.countUp7::after {
  content: counter(countUp7) "歳";
font-family: "toppan-bunkyu-midashi-go-std", sans-serif;
font-weight: 900;
font-style: normal;
}
@keyframes countUp7 {
  100% {
    --count7: 43;
  }
}

/*********
データ8
*********/
@property --count8 {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
.countUp8 {
    counter-set: countUp8 var(--count8);
    animation: countUp8 3s 1;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.2, 0.1, 0.2, 1);
    font-variant-numeric: tabular-nums;
    font-size: 3rem;
    text-align: center;
    font-family: ruika, sans-serif;
    font-weight: 100;
    font-style: normal;
    color: #34b9ac;
}
.countUp8::after {
  content: counter(countUp8) "社";
	font-family: "toppan-bunkyu-midashi-go-std", sans-serif;
font-weight: 900;
font-style: normal;
}
@keyframes countUp8 {
  100% {
    --count8: 8;
  }
}
/*********
データ9
*********/
@property --count9 {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
.countUp9 {
    counter-set: countUp9 var(--count9);
    animation: countUp9 3s 1;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.2, 0.1, 0.2, 1);
    font-variant-numeric: tabular-nums;
    font-size: 3rem;
    text-align: center;
    font-family: ruika, sans-serif;
    font-weight: 100;
    font-style: normal;
    color: #34b9ac;
}
.countUp9::after {
  content: counter(countUp9) "年";
	font-family: "toppan-bunkyu-midashi-go-std", sans-serif;
font-weight: 900;
font-style: normal;
}
@keyframes countUp9 {
  100% {
    --count9: 16;
  }
}
/*********
データ10
*********/
@property --count10 {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
.countUp10 {
    counter-set: countUp10 var(--count10);
    animation: countUp10 3s 1;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.2, 0.1, 0.2, 1);
    font-variant-numeric: tabular-nums;
    font-size: 3rem;
    text-align: center;
    font-family: ruika, sans-serif;
    font-weight: 100;
    font-style: normal;
    color: #34b9ac;
}
.countUp10::after {
  content: counter(countUp10) "%";
	font-family: "toppan-bunkyu-midashi-go-std", sans-serif;
font-weight: 900;
font-style: normal;
}
@keyframes countUp10 {
  100% {
    --count10: 60;
  }
}
/*********
データ11
*********/
@property --count11 {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
.countUp11 {
    counter-set: countUp11 var(--count11);
    animation: countUp11 3s 1;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.2, 0.1, 0.2, 1);
    font-variant-numeric: tabular-nums;
    font-size: 3rem;
    text-align: center;
    font-family: ruika, sans-serif;
    font-weight: 100;
    font-style: normal;
    color: #34b9ac;
}
.countUp11::after {
  content: counter(countUp11) "%";
	font-family: "toppan-bunkyu-midashi-go-std", sans-serif;
font-weight: 900;
font-style: normal;
}
@keyframes countUp11 {
  100% {
    --count11: 90;
  }
}

/*********
データ12
*********/
@property --count12 {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
.countUp12 {
    counter-set: countUp12 var(--count12);
    animation: countUp12 3s 1;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.2, 0.1, 0.2, 1);
    font-variant-numeric: tabular-nums;
    font-size: 3rem;
    text-align: center;
    font-family: ruika, sans-serif;
    font-weight: 100;
    font-style: normal;
    color: #34b9ac;
}
.countUp12::after {
  content: counter(countUp12) "ヶ所";
	font-family: "toppan-bunkyu-midashi-go-std", sans-serif;
font-weight: 900;
font-style: normal;
}
@keyframes countUp12 {
  100% {
    --count12: 3;
  }
}

/*============
nav
=============*/
nav {
  display: block;
  position: fixed;
  top: 0;
  right: -300px;
  bottom: 0;
  width: 320px;
  background: #ffffff;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transition: .5s;
  z-index: 9999;
}
.open nav {
  right: 0;
}
nav .inner {
  padding: 25px;
}
nav .inner ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav .inner ul li {
    position: relative;
    margin: 0;
    border-bottom: 2px solid #34b9ac;
}
nav .inner ul li a {
display: block;
    font-size: 16px;
    padding: 1em;
    text-decoration: none;
    transition-duration: 0.2s;
    font-family: ruika, sans-serif;
    font-weight: 100;
    font-style: normal;
    color: #34b9ac;
	font-family: "toppan-bunkyu-midashi-go-std", sans-serif;
font-weight: 900;
font-style: normal;
}
nav .inner ul li span {
display: block;
    color: #333;
    font-size: 16px;
    padding: 1em 1em 0em 1em;
    text-decoration: none;
    transition-duration: 0.2s;
    font-family: ruika, sans-serif;
    font-weight: 100;
    font-style: normal;
	font-family: "toppan-bunkyu-midashi-go-std", sans-serif;
font-weight: 900;
font-style: normal;
}
nav .inner ul li a:hover {
  background: #e4e4e4;
}
nav .inner ul li ul {
}
nav .inner ul li ul li {
	    border: none;
}
nav .inner ul li ul li a {
	    padding: 0.5em 0.5em 0.5em 2em;
}

@media screen and (max-width: 767px) {

}
/*============
@keyframes
=============*/
@keyframes equalizer01 {
  0% {
    width: 70%;
  }
  10% {
    width: 50%;
  }
  20% {
    width: 100%;
  }
  30% {
    width: 10%;
  }
  40% {
    width: 50%;
  }
  50% {
    width: 70%;
  }
  60% {
    width: 50%;
  }
  70% {
    width: 10%;
  }
  80% {
    width: 100%;
  }
  90% {
    width: 10%;
  }
  100% {
    width: 70%;
  }
}
@keyframes equalizer02 {
  0% {
    width: 30%;
  }
  10% {
    width: 20%;
  }
  20% {
    width: 40%;
  }
  30% {
    width: 10%;
  }
  40% {
    width: 20%;
  }
  50% {
    width: 30%;
  }
  60% {
    width: 20%;
  }
  70% {
    width: 10%;
  }
  80% {
    width: 40%;
  }
  90% {
    width: 10%;
  }
  100% {
    width: 30%;
  }
}
/*============
.toggle_btn
=============*/
.toggle_btn {
display: block;
    position: fixed;
    top: 20px;
    right: 20px;
    width: 60px;
    height: 50px;
    transform: translate(0, 0);
    transition: all .5s;
    cursor: pointer;
    z-index: 9999;
}
.open .toggle_btn {
  right: 310px;
}
.toggle_btn span {
  display: block;
  position: absolute;
  left: 0;
  width: 30px;
    height: 6px;
    background-color: #34b9ac;
  transition: all .5s;
}
.toggle_btn span:nth-child(1) {
  top: 5px;
  width: 60px;
  animation: equalizer01 7000ms infinite;
}
.toggle_btn span:nth-child(2) {
  top: 20px;
  width: 30px;
  animation: equalizer02 5000ms infinite;
  animation-delay: 0.33s;
}
.toggle_btn span:nth-child(3) {
  top: 35px;
  width: 20px;
  animation: equalizer02 5000ms infinite;
}
.open .toggle_btn span {
  background-color: #fff;
  width: 30px;
}
.open .toggle_btn span:nth-child(1) {
  transform: translate(0, 10px) rotate(-45deg);
  animation: unset;
}
.open .toggle_btn span:nth-child(2) {
  opacity: 0;
  animation: unset;
}
.open .toggle_btn span:nth-child(3) {
  transform: translate(0, -10px) rotate(45deg);
  animation: unset;
	top: 25px;
}
@media screen and (max-width: 767px) {

}
/*============
#mask
=============*/
#mask {
  display: none;
}
.open #mask {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .8;
  z-index: 998;
  cursor: pointer;
  transition: all .5s;
}
.header-btn {
    float: none;
    position: fixed;
    top: 10px;
    right: 120px;
    z-index: 9999;
}
.site-header {
z-index:100;
}

#nav-toggle{
	display: none;
}

.site-footer .site-info {
    position: relative;
    text-align: center;
    padding: 35px 0px;
    background: #34b9ac;
    font-weight: 500;
    color: #000;
	    padding-top: 0px;
}
.site-footer .btt a {
    color: #000;
    background: #34b9ac;
}
/**
メールフォーム
**/

.mailform{

}
.mailform p{
	margin-bottom: 0px;
}
.mailform input[type="text"],input[type="tel"],input[type="email"],textarea,select,input[type="submit"] {
	width: 100%;
	font-size: 16px;
	
}
.formrow{
    display: flex;
    width: 100%;
    border-bottom: 1px solid #b3b3b3;
    padding: 15px 10px;
}
.formlabel{
    flex-basis: 35%;
    padding-top: 7px;
}
.forminput{
	flex-basis: 65%;
}
.hissu{
	background: #d71616;
    color: #ffffff;
    font-size: 0.8em;
    padding: 0px 6px;
    border-radius: 4px;
    display: inline-block;
    margin-left: 10px;
}
.privacycheck {
	border-bottom: none;
}
.privacycheck p {
	display: block;
    margin: 0 auto;
}
.privacycheck label{}
.submitrow p{
	    display: block;
    width: 80%;
    margin: 0 auto;
}
.submitrow {
	border-bottom: none;
}
.privacyrow{
	text-align: center;
	    margin-top: -20px;
}
.privacyrow p{
    font-size: 1em;
    color: #7f7f7f;
    font-weight: bolder;
}
.privacyrow a{}

#footer-widgets{
	    padding-bottom: 0px;
    padding-top: 45px;
}
#footer-widgets .footer-logo{
	    background: #fff;
    border-radius: 12px;
    padding: 10px;
}
#footer-widgets .footer-logo img{}
#footer-widgets h3{
	color: #000000;
    font-size: 1.4em;
    font-family: "toppan-bunkyu-midashi-go-std", sans-serif;
    font-weight: 900;
    font-style: normal;
}

@media screen and (max-width: 999px) {
	.pagetitle-text {
    margin-top: 0;
	}
	.pagetitle-box::after {
    width: 420px;
    height: 276px;
	}
	.pagetitle-box::before {
    width: 420px;
    height: 276px;
	}
	.top-image {
    margin-top: 0;
    width: 100%;
    float: none;
}
	.col3-box {
    display: flex
;
    position: relative;
    z-index: 2;
    flex-wrap: wrap;
}
	.cell-image {
    aspect-ratio: 3 / 2;
}
	.cell-job1 {
    margin-top: 0;
}
	.cell-job3 {
    margin-top: 0;
}
	.cell-job {
    margin-bottom: 30px;
}
	.cell-job2 .more-btn {
    bottom: 20px;
}
	.cell-job3 .more-btn {
    bottom: 20px;
}
	.top-content-text h2 {
    margin-bottom: 0px;
}
	
.top-content-text p {
    width: 100%;
	}
	#footer-widgets .footer-logo {
    background: #fff;
    border-radius: 12px;
    padding: 10px;
    width: 85%;
    margin: 0 auto;
		        max-width: 480px;
}
	.site-footer .site-info {
    padding-top: 40px;
}
}

@media screen and (max-width: 680px) {
	.main-copy h2 {
    font-size: 55px;
	}
	.main-copy h2 span {
    font-size: 21px;
	}
	.main-copy {
    padding-right: 0;
    text-align: center;
    margin-top: -131px;
}
	.top-content-text h2 {
    font-size: 46px;
	}
	.top-content-text h2 span {
    display: block;
    font-size: 24px;
}
	.more-btn a {
    width: 180px;
	}
	.site-logo-div img {
    height: 70px;
    width: auto;
}
	.keyvisual-box {
    position: relative;
    margin-top: -120px;
}
	.pagetitle-text {
    margin-top: 10px;
    position: relative;
    z-index: 2;
}
	.pagetitle-box {
    position: relative;
    margin-bottom: 60px;
}
	.cell-service {
    width: 100%;
    margin-bottom: 30px;
}
	.pagetitle-text h1 {
    position: relative;
    display: block;
    font-size: 46px;
    z-index: 1;
}
	.pagetitle-text p {
    font-size: 28px;
    font-family: ruika, sans-serif;
    font-weight: 100;
    font-style: normal;
    color: #34b9ac;
    margin-top: 0px;
}
	.top-content::before {
    width: 360px;
    height: 237px;
	}
	.top-content::after{
		width: 360px;
    height: 237px;
		right: 0;
	}
	.top-content-text h2::before {
    width: 340px;
    height: 134px;
	}
	#vis {
    padding: 20px;
}
	    .keyvisual-box {
        position: relative;
        margin-top: -100px;
    }
	    .main-copy {
        padding-right: 0;
        text-align: center;
        margin-top: -110px;
    }
	.pagetitle-text h1::before {
    width: 340px;
    height: 134px;
	}
	.pagecontent-section::before {
    content: "";
    background: url(http://kyoei-toso.co.jp/recruitment/wp-content/uploads/2025/10/bg_brash.png);
    display: block;
    width: 340px;
    height: 225px;
    background-size: 100%;
    position: absolute;
    top: 0px;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 1;
}
	.pagetitle-box::after {
    content: "";
    background: url(http://kyoei-toso.co.jp/recruitment/wp-content/uploads/2025/10/bg_brash.png);
    display: block;
    width: 340px;
    height: 225px;
    background-repeat: repeat;
    background-size: 100%;
    position: absolute;
    top: -180px;
    right: 0;
    z-index: 1;
}
	.pagetitle-box::before {
    content: "";
    background: url(http://kyoei-toso.co.jp/recruitment/wp-content/uploads/2025/10/bg_brash.png);
    display: block;
    width: 340px;
    height: 225px;
    background-repeat: repeat;
    background-size: 100%;
    position: absolute;
    top: 140px;
    left: 0;
    z-index: 1;
}
	.pagecontent-section-image::before {
    content: "";
    background: url(http://kyoei-toso.co.jp/recruitment/wp-content/uploads/2025/10/bg_dot.png);
    display: block;
    width: 240px;
    height: 70px;
    background-repeat: repeat;
    background-size: 36px;
    position: absolute;
    top: -30px;
    left: 0;
}
	.pagecontent-section-image::after {
    content: "";
    background: url(http://kyoei-toso.co.jp/recruitment/wp-content/uploads/2025/10/bg_dot.png);
    display: block;
    width: 240px;
    height: 70px;
    background-repeat: repeat;
    background-size: 36px;
    position: absolute;
    bottom: -30px;
    right: 0;
}
	.pagetitle-image::before {
    content: "";
    background: url(http://kyoei-toso.co.jp/recruitment/wp-content/uploads/2025/10/bg_dot.png);
    display: block;
    width: 240px;
    height: 70px;
    background-repeat: repeat;
    background-size: 36px;
    position: absolute;
    top: -30px;
    left: 0;
}
	.pagetitle-image::after {
    content: "";
    background: url(http://kyoei-toso.co.jp/recruitment/wp-content/uploads/2025/10/bg_dot.png);
    display: block;
    width: 240px;
    height: 70px;
    background-repeat: repeat;
    background-size: 36px;
    position: absolute;
    bottom: -30px;
    right: 0;
}
	    .top-content-inner::before {
        width: 240px;
        height: 70px;
        left: 10px;
        right: auto;
        background-size: 36px;
        top: 40px;
    }
	    .top-content-inner::after {
        width: 240px;
        height: 70px;
        background-size: 36px;
    }
}
@media screen and (max-width: 540px) {
	.top-content-inner::after {
    width: 260px;
    height: 101px;
	}
	.top-content-inner::before {
    width: 260px;
    height: 101px;
    right: 230px;
	}
	.site-branding {
    float: left;
    margin-left: -15px;
}
	.site-branding .site-logo-div {
    background: #fff;
    padding: 10px;
    padding-right: 10px;
    padding-left: 15px;
    border-radius: 0px 0px 18px 0px;
}
	.more-btn a::after {
    right: 8px;
}
	    .more-btn a {
        width: 160px;
		padding: 15px 15px 15px 36px;
    }
	.header-btn {
    float: none;
    position: fixed;
    right: 95px;
	}
	.toggle_btn {
    top: 10px;
	}
	.cell-header h3 {
    padding: 15px 20px;
	}
	.header-btn .more-btn{}
	.header-btn .more-btn a{
		        width: 120px;
        padding: 15px 15px 15px 18px;
	}
	    .keyvisual-box {
        position: relative;
        margin-top: -45px;
			margin-bottom: -45px;
    }
	    .main-copy {
        margin-top: -50px;
    }
}