@charset "UTF-8";
@media screen and (max-width: 999px) {
.loading {position: fixed; z-index: 20; width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; opacity: 1; background: #fff;}
.loading .img { width: 60vw; height: auto; filter: blur(1.5rem); opacity: 0; transition: all .6s;}
.loading.in .img {filter: blur(0); opacity: 1; transition: all .6s;}
.loading.out {opacity: 0; z-index: -10; transition: all .6s;}
.loading.out .img { filter: blur(1.5rem); transition: all .6s;}

body {overflow-x:hidden; font-size: 3vw; background: #F4F4F4;}
h3 {font-size: 120%; line-height: 1.3; font-weight: bold;}
.mb1 {margin-bottom: 1.5vw;}
.mb2 {margin-bottom: 2.5vw;}
.mb3 {margin-bottom: 3.5vw;}
.mb5 {margin-bottom: 5.5vw;}
.mt30 {margin-top: 40vw!important;}
.w30 { display: block; width: 60%; margin-left: auto; margin-right: auto;}
.w50 { display: block; width: 100%; margin-left: auto; margin-right: auto;}
.w100 {width: 100%!important;}

.maincont {position: relative; z-index: 3; width: 100%; height: auto; margin-top: 15vw; overflow: hidden; opacity: 0; transition: all 1.5s;}
.maincont.on {height: auto;overflow: visible; opacity: 1; transition: all 1.5s;}
iframe { width: 100%; height: 60vw; border:0;}

.header { position: fixed; top: 0; left: 0; z-index: 4; width: 100vw; height: 15vw; transition: all 1.5s; opacity: 0; background: #1C1C1C; display: flex; justify-content: space-between;}
.header.on {top: 0vw; opacity: 1;}
.header .left { width: 30%; height: 100%; text-align: left; box-sizing: border-box; margin-left: 2vw; padding: 0; display: flex; justify-content: flex-start; align-items: center;}
.header .left a { display: block; width: fit-content; height: auto;}
.header .left a img {display: block; width: 30vw; height: auto;}
.header .right { width: 59%; height: auto; display: flex; justify-content: flex-end; margin-right: 2vw; }
.header .right .gmenu { flex-grow: 1; width: auto; display: flex; justify-content: flex-start; align-items: center; }
.header .right .gmenu a { display: block; width: 25%; height: auto;}
.header .right .gmenu a p:first-child {color: #fff; font-size: 80%; font-weight: bold; line-height: 1; margin-bottom: .5vw;}
.header .right .gmenu a p:last-child {color: #3885DB; font-size: 50%; font-weight: normal; line-height: 1;}
.header .right .linkbox { display: none; }

.cta {position: relative; z-index: 3; position: relative; width: 100%; height: auto; aspect-ratio:1/.8; background: url(https://kameno.co.jp/system_panel/uploads/images/bg_cta.jpg) no-repeat center center; background-size: cover; padding: 4vw 0 0; text-align: center; margin: 15vw auto 0;display: flex; justify-content: center; align-items: center; flex-direction: column;}
.cta h2 {color: #fff; font-size: 160%; line-height: 1;}
.cta h3 {color: #fff; font-size: 290%; line-height: 1; text-align: center; font-family: "bebas-kai", sans-serif; font-weight: 400; font-style: normal;}
.cta img {display: block; margin-right: auto; margin-left: auto; width: 60%; height: auto;}
.cta p {color: #fff; font-size: 100%;}
.cta .linkbtn p {font-size: 100%;}

.footer {position: relative; z-index: 3; width: 100%; height: auto; background: #F0F0F0; padding: 4vw 4.2vw; box-sizing: border-box; display: block;}
.footer .left { width: 50%; margin: 0 auto 2vw;}
.footer .right { width: 100%; margin: 0 auto; text-align: center; color: #000;}
.cp {position: relative; z-index: 3;display: block; width: 100%; padding: 1vw 0; box-sizing: border-box; text-align: center; color: #fff; background: #18181C;}

.btnbox { display: flex; justify-content: center; align-items: center; width: 100%;}
.linkbtn { display: block; width: fit-content; font-weight: bold; font-size: 100%; padding: 1vw 3vw; background: linear-gradient(#025cb9 0%, #022f5c 100%); border-radius: 3vw; margin-left: 2vw; margin-right: 2vw; text-align: center;transition:all .6s}
.linkbtn p {color: #fff; font-size: 100%; line-height: 1;}
.linkbtn:hover p {color: #fff; opacity: .7; transition:all .6s}

/*form*/
.contactTxt strong {color: red; font-weight: normal;}
.form .formRow input[type="text"],.form .formRow input[type="email"],button,textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; border: none; border-radius: 0; font: inherit; outline: none; border:solid 1px #ccc;}
.form {width: 100%; margin: 0 auto;}
.form .formRow { margin: 0 0 2vw; padding: 0; text-align: left;}
.form .formRow input[type="text"],.form .formRow input[type="email"],.form .formRow select,.form .formRow textarea {width: 90%; background: #fff;}
.form .formRow textarea {height: 10em;}
.form p {margin-bottom: 0;}
.form .pp { display: block;width: 100%;height: 20vw; margin: 2vw auto; overflow: scroll; border: solid 1px #fafafa;padding: 1vw; box-sizing: border-box; text-align: left;}
.form .submit { text-align: center; margin: auto;}
.form .formRow input[type="text"],
.form .formRow input[type="email"],
.form .formRow textarea { padding: 0.5vw 2vw; border-radius: 20px; }
.form #submit {opacity: 0.4; position: relative; display: block; width: max-content; padding: 1vw 3vw; background: linear-gradient(#025cb9 0%, #022f5c 100%); border-radius: 3vw; color: #fff; font-size: 130%; letter-spacing: 0.2rem; margin: 0 auto; text-align: center; border: none;}
.form #submit.active {opacity: 1;}
.formTd .d-inline-block {display:block!important;}
.formTd .d-inline-block input { margin-right: .4vw;}


/*form*/

.section { width: 85vw; margin: 15vw auto 0; text-align: center; color: #000;}

.pagettl {position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; height: 40vw; }
.pagettl .txt { position: absolute; z-index: 2; width: 80%; height: 80%; display: flex; justify-content: center; align-items: center; flex-direction: column;}
.pagettl .txt h1 { font-size: 300%; font-style: bold; color: #fff;}
.pagettl .txt p { font-size: 100%; color: #fff;}
.pagettl .bg { position: absolute; z-index: 1; width: 100%; height: 100%; background: #000; }
.pagettl .bg img { width: 100%; height: 100%; object-fit: cover; opacity: .3;}

.pagettl.recruit {position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; height: 80vw; }
.pagettl.recruit .txt h1 { font-size: 380%; font-family:serif; font-style: bold;}
.pagettl.recruit .txt p { font-size: 110%; font-family:serif; font-style: bold; text-align: center;}
.pagettl.recruit .bg img { width: 100%; height: 100%; object-fit: cover; opacity: 1!important;}


.hbox h2 { margin-left: auto; margin-right: auto; width: fit-content; font-size: 160%; text-align: center; padding-bottom: 1vw; border-bottom: solid 3px #43CBFD;}

.txtlist { border-top: dotted 1px rgba(0,0,0,.7);}
.txtlist .flcell { display: flex; justify-content: flex-start; width: 100%; border-bottom: dotted 1px rgba(0,0,0,.7);}
.txtlist .flcell .fleft { width: 30%; text-align: left; padding: 2vw 0; box-sizing: border-box;}
.txtlist .flcell .fright { width: 70%; text-align: left; padding: 2vw 0; box-sizing: border-box;}
.txtlist .flcell .full { width: 100%; text-align: left; padding: 2vw 0; box-sizing: border-box;}

.mainbox { display: block; position: relative; width: 100%; height: auto;aspect-ratio: 1/1.1; margin: 15vw auto; color: #000;}
.mainbox .bg { position: relative; z-index: 1; width: 61vw; height: auto; overflow: hidden;aspect-ratio: 1/1.943;}
.mainbox .bg img {position: absolute; top: 0; left: 0; width: 100%; height: auto;}
.mainbox .txt { position: absolute; z-index: 2; width: 70vw; height: fit-content; background: #fff; border: solid 4px #EBEBEB; padding: 3vw; box-sizing: border-box;}
.mainbox .txt h1,.mainbox .txt h2 { position: relative; display: flex; justify-content: center; align-items: center; width:fit-content; font-size: 140%; margin-left: auto;margin-right: auto; }
.mainbox .txt h1:before,.mainbox .txt h2:before { position: absolute; content:""; width: 2vw; height: 1px; background: rgba(0,0,0,.6); display: block; left: -2.5vw;}
.mainbox .txt h1:after,.mainbox .txt h2:after { position: absolute; content:""; width: 2vw; height: 1px; background: rgba(0,0,0,.6); display: block; right: -2.5vw;}
.mainbox .en { position: absolute; z-index: 2; top: 5vw;}
.mainbox .en img { display: block; width: auto; height: 11vw; margin-bottom: 1vw;}
.maincont.index .mainbox .en img { display: block; width: auto; height: 10vw; margin-bottom: 1vw;}

.mainbox.sec1 .txt {left: 5vw; top: 25vw;}
.mainbox.sec1 .bg {margin-left: 39vw;}
.mainbox.sec1 .en { position: absolute; z-index: 2; top: -5vw; left: 2vw; }
.mainbox.sec1 .en img:first-child {margin-left: 0;}
.mainbox.sec1 .en img:last-child { margin-left: 5vw;}

.mainbox.sec2 .txt {left: 27vw; top: 30vw;}
.mainbox.sec2 .bg {margin-left: 0;}
.mainbox.sec2 .en { position: absolute; z-index: 2; top: -3vw; left: 4vw; }
.mainbox.sec2 .en img:first-child {margin-left: 0;}
.mainbox.sec2 .en img:last-child { margin-left: 10vw;}

.mainbox.recruit { aspect-ratio: 1/1.4;}
.mainbox.recruit .txt {width: 90vw; left: 3vw; top: 42vw;}
.mainbox.recruit .txt h3 {font-size: 110%; font-weight: bold;}
.mainbox.recruit .bg {margin-left: 0; width: 75vw;}
.mainbox.recruit .en { position: absolute; z-index: 2; top: -6vw; left: 8vw; }

.servicelist {display: block; margin-top: 15vw; overflow: hidden;}
.servicecell {position: relative; width: 100%; height: auto; aspect-ratio:1/1; box-sizing: border-box; overflow: hidden;}
.servicecell .txt { position: absolute; z-index: 2; top: 30vw; left: 10%; width: 80%; height: fit-content; display: flex; justify-content: center; align-items: center; flex-direction: column; background: #fff; border: solid 4px #EBEBEB; padding: 3vw; box-sizing: border-box; color: #000;}
.servicecell .txt .ttlbox { width: 100%; display: flex; justify-content: flex-start; align-items: center;}
.servicecell .txt .ttlbox .num { display: inline-block; margin:0 2vw 0 0; width: 23%;}
.servicecell .txt .ttlbox .num p { letter-spacing: -.1vw; font-size: 600%; font-family: "bebas-kai", sans-serif; font-weight: 400; font-style: normal; line-height: 1;
display: inline-block; background: linear-gradient(#025cb9 0%, #022f5c 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-mask-image: linear-gradient(#025cb9 0%, #022f5c 100%)}
.servicecell .txt .ttlbox .main {flex: 1; line-height: 1;}
.servicecell .txt .ttlbox .main h2,.servicecell .txt .ttlbox .main h3 {font-size: 250%; color: #000; margin: 0; font-weight: bold;}
.servicecell .txt .ttlbox .main p {color: #BA0419;}
.servicecell .txt .description {display: block; width: 100%; text-align: left; font-size: 100%;}
.servicecell .bg { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; }
.servicecell .bg img { width: 100%; height: 100%; object-fit: contain;object-position: top;}

.kv {position: relative; width: 100%; height: auto; aspect-ratio:1/.8; overflow: hidden; margin-top: 15vw;}
.kv .txt {position: absolute; z-index: 2; width: 90vw; height: fit-content; margin: 14vw 5vw 0; display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; }
.kv .txt img {display: block; width: auto; height: 9vw; margin-bottom: 1vw;}
.kv .txt img:last-child {height: 18vw;}
.kv .bg {position: absolute; z-index: 1; width: 100%; height: auto; aspect-ratio:1/.8; overflow: hidden; background: #000;}
.kv .bg img { width: 100%; height: 100%; object-fit: cover;}

.cscrolldown{width:1px;height:60px;position:absolute;bottom:2vw;left:0;right:0;margin:0 auto;overflow:hidden;z-index:3; opacity: 1;}
.cscrolltxt{position:absolute;bottom:18vw;left:0;right:0;margin:0 auto;overflow:hidden;z-index:3; opacity: 1; font-size: 70%; color: #fff; width:max-content;}
.cscrolltxt br {display: none;}
.cline{width:100%;height:100%;display:block;background:linear-gradient(to bottom,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 50%);background-position:0 -60px;background-size:100% 200%;animation:scrolldown 2.2s cubic-bezier(0.76,0,0.3,1) forwards infinite}
@keyframes scrolldown{0%{background-position:0 60px-abs}75%{background-position:0 0}100%{background-position:0 60px}}

.slidebox {position: relative; width: 100%; height: auto; aspect-ratio:1/.56; overflow: hidden;}
.slide {position: absolute; width: 100%;height: 100%;}
.slide img { width: 100%; height: 100%; object-fit: cover;}

.indexrecruitsec {position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; height: auto; aspect-ratio:1/1.4; background: #000; }
.indexrecruitsec .txt { position: absolute; z-index: 2; width: 100%; height: 90%; display: flex; justify-content: center; align-items: center; flex-direction: column;}
.indexrecruitsec .txt h2 { font-size: 190%; font-style: bold; color: #fff;line-height: 1; letter-spacing: .1em;filter: drop-shadow(1px 1px 4px rgba(255,255,255,.6));}
.indexrecruitsec .txt p.waza { display: inline-block; font-size: 1500%; background: linear-gradient(#3897FA 0%, #0077EF 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;line-height: 1;}
.indexrecruitsec .txt p.lead { font-size: 100%; color: #fff;line-height: 1.6; text-align: center; letter-spacing: .1em;filter: drop-shadow(1px 1px 4px rgba(255,255,255,.6));}
.indexrecruitsec .bg { position: absolute; z-index: 1; width: 100%; height: 100%; background: #2B2A32; }
.indexrecruitsec .bg img { width: 100%; height: 100%; object-fit: cover; opacity: 1;}

.maincont.index .btnbox a {position: relative; display: block; width: fit-content; padding: 1vw 6vw; background: #000; text-align: center; margin: 0 auto; }
.maincont.index .btnbox a p { color: #fff; margin: 0; padding: 0; font-size: 100%;}
.maincont.index .btnbox a:before {position: absolute; display: block; content:""; width: 2vw; height: 1px; background: #fff; right: 0; top: 0; bottom: 0; margin: auto 0;}
.maincont.index .btnbox a:after {position: absolute; display: block; content:""; width: 2vw; height: 1px; background: #000; right: -2vw; top: 0; bottom: 0; margin: auto 0;}
.maincont.index .mainbox .txt p {font-size: 90%;}
.maincont.index + .cta {margin-top: 0;}

.spnobr { text-align: left;}
.spnobr br {display: none;}
}