@charset "UTF-8";
@media screen and (max-width: 999px) {
body {background: #fff; font-family: sans-serif; font-size: 3vw; overflow-x:hidden; width:100%;}

.formTd .d-inline-block {display:block!important;}
.formTd .d-inline-block input { margin-right: .4vw;}
.contactText strong {color:red; padding-left:.3vw;}
.requiredText {color:red; padding-left:.3vw;}

iframe {width: 100%; height: 60vw; border: none;}
.wow {opacity: 0;}
.dn {display: none!important;}


.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: 20vw; 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;}

.header { position: fixed; top: -10vw; left: 0; z-index: 10; width: 100%; height: auto; transition: all 1.5s; opacity: 0; background: rgba(255,255,255,.8); padding: 1vw 2vw; box-sizing: border-box;}
.header.on {z-index: 9;}
.header.in {top: 0; opacity: 1;}
.header { display: flex; justify-content: space-between; align-items: center;}
.header .left { display: flex; justify-content: flex-start; align-items: center;}
.header .left .logo { display: block; width: 10.5vw; height: auto; margin-right: 3vw; transition: all 1.5s; transform: scale(1);}
.header .left .logotxt { display: block; width: 30vw; height: auto; transition: all .5s; opacity: 1;}
.header.on .left .logotxt { transition: all .5s; opacity: 0;}
.header .left img { width: 100%; height: 100%; object-fit: contain;}
.header .gmenu { display: none;}

#spMenu { position: fixed; top: 3.7vw; right: 4vw; z-index: 10; display: flex; justify-content: center; align-items: center; width: 6.5vw; height: 3.5vw; transition: all 1s; padding: 0; align-items: center; margin: 0; opacity: 1; transition: all .6s;}
#spMenu .menu-trigger { position: relative; width: 6.5vw; height: 3.5vw; display: block; justify-content: center; align-items: center; margin: auto; top: 0; bottom: 0; left: 0; right: 0; }

.menu-trigger,.menu-trigger p { display: block; transition: all .4s; box-sizing: border-box; }
.menu-trigger.down p { position: absolute; left: 0; width: 100%; height: 1px; background: #000; font-size: 0.1em; }
.menu-trigger p { position: absolute; left: 0; width: 100%; height: 1px; background: #000; font-size: 0.1em; box-shadow: 0px 0px 8px rgba(0,0,0,0.2); }
.menu-trigger p:nth-of-type(1) { top: 1.5vw; }
.menu-trigger p:nth-of-type(2) { top: 3vw; }
.menu-trigger.active p:nth-of-type(1) { transform: translateY(1.2vw) rotate(-45deg); background: #000; }
.menu-trigger.active p:nth-of-type(2) { transform: translateY(-.05vw) rotate(45deg); background: #000; }
.spnavi { display: flex; justify-content: flex-start; align-items: center; flex-direction: column; position: fixed; top: 0; left: 0; z-index: -21; opacity: 0; background: rgba(255,255,255,.9); width: 100%; height: 100vh; padding-top: 20vw; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; transition: all 1s; }
.spnavi.active { opacity: 1; z-index: 8;}
.spnavi a {position: relative; display: block; width: 100%; color: #000; font-size: 120%; font-weight: bold; margin: 0 auto 0; text-align: center;filter: blur(1.5rem); transition: all 1s;}
.spnavi a p {font-weight: 700;}
.spnavi.active a {filter: blur(0); transition: all 1s; margin-top: 4vw;}

.sns { position: fixed; bottom: -4vw; left: 4vw; z-index: 9; width: fit-content; height: auto; transition: all 1.5s; opacity: 0; display: flex; justify-content: space-between; align-items: center;}
.sns.on {opacity: 1; bottom: 2vw; }
.sns a {width: 4.5vw; height: 4.5vw; display: block; margin-right: 4vw; }
.sns a:last-child {margin-right: 0;}
.sns img { width: 100%; height: 100%; object-fit: contain;}

.footer {position: relative; display: block; width: 96vw; margin: 25vw auto 15vw; text-align: center;}
.footer .box {margin-bottom: 5vw;}
.footer .box h2 { display: block; margin: 0 auto 2vw; font-size: 120%;}
.footer .box p { display: block; margin-left: auto; margin-right: auto; font-size: 100%;}
.footer .box p br {display: none;}
.footer .linkbtn p {color: #fff; font-size: 110%;}
.cp { width: 100%; padding: 0 0 15vw; text-align: center;}


.btnbox { display: flex; justify-content: space-between; align-items: center; width: 100%;}
.linkbtn { display: block; width: fit-content; font-weight: bold; font-size: 100%; padding: 1vw 3vw; background: #000; border-radius: .5vw; margin-left: auto; margin-right: auto; text-align: center;}
.linkbtn p {color: #fff; font-size: 100%;}
.linkbtn:hover {background: #cacaca;transition:all .6s}
.linkbtn:hover p {color: #fff; transition:all .6s}

.linkbtn.linkbtn260723 {
  background-color:#eb6ea5;
  font-size: 20px;
}
.linkbtn.linkbtn260723.linkbtn-bk{
  font-size: 100%;
  background-color: #000;
  margin-top:24px ;
  padding-block: 18px;
}



.btnbox260723 h2 {
  font-size: 120%;
}

.maincont {position: relative; z-index: 1; width: 100%; height: auto;overflow-y: hidden; opacity: 0; transition: all 1.5s;}
.maincont.on {height: auto;overflow: visible; opacity: 1; transition: all 1.5s;}

.container {position: relative; display: block; width: 96vw; max-width:100%!important; margin: 15vw auto; padding: 0!important; text-align: center;}
.section {position: relative; display: block; width: 96vw; margin: 15vw auto; text-align: center;}
.section.narrow {position: relative; display: block; width: 96vw; margin: 15vw auto; text-align: center;}

.pagettl {position: relative; width: 100%; height: auto; aspect-ratio:1/1.2; display: flex; justify-content: center; align-items: center; flex-direction: column;}
.pagettl h1 { position: relative; font-size: 160%; font-weight: 700; display: block; margin: 0 auto 1vw; letter-spacing: .2em; text-indent: -.2em; text-align: center;}
.pagettl p { position: relative; font-size: 90%; display: block; margin: 0 auto; text-align: center;}
.pagettl .cscrolldown{width:1px;height:60px;position:absolute;bottom:-3vw;left:0;right:0;margin:0 auto;overflow:hidden;z-index:3; opacity: 1;}
.pagettl .cscrolltxt{position:absolute;bottom:13vw;left:0;right:0;margin:0 auto;overflow:hidden;z-index:3; opacity: 1; font-size: 100%; color: #000; width:max-content;}
.pagettl .cline{width:100%;height:100%;display:block;background:linear-gradient(to bottom,rgba(0,0,0,1) 50%,rgba(0,0,0,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}}


.hbox { width: 100%; height: auto; display: block; text-align: center;}
.hbox h1, .hbox h2 { font-size: 160%; font-weight: 700; display: block; margin: 0 auto;}

.ttlbox.num { display: flex; justify-content: center; align-items: center; width: fit-content; margin: 0 auto 5vw;}
.ttlbox.num h2 { display: block; margin: 0 0 0 1vw; font-size: 160%;}
.ttlbox.num div { width: 6vw; height: 6vw; display: flex; justify-content: center; align-items: center; padding: .3vw; border: solid 2px #000; border-radius: 50%;}
.ttlbox.num div p { font-size: 110%; font-weight: bold;}
.ttlbox { width: 100%; height: auto; display: block; text-align: center;}
.ttlbox h2 { font-size: 120%; font-weight: 700; display: block; margin: 0 auto;}

#faqcont h2 {font-size: 120%; padding-left: 2vw; border-left: solid 5px #e87007;}
.faqbox { width: 100%; height: auto; display: block; text-align: left;}
.faqbox .cell:nth-of-type(1) {padding-top: 4vw; border-top: dotted 1px #000;}
.faqbox .cell {padding: 4vw 0; border-bottom: dotted 1px #000; text-align: left; box-sizing: border-box;}
.faqbox h3 { font-size: 110%; font-weight: 700; display: block; margin: 0 0; cursor: pointer;}
.faqbox p { display: none; margin-top: 2vw; box-sizing: border-box; padding: 0 5vw;}
.faqbox p.clicked { display: block;}

.graybg {background: #EAEAEA; padding: 0; overflow: hidden;}
.graybg .section {margin: 10vw auto; width: 96vw;}
.graybg .duocell { width: 100%; display: block; margin: 0 auto;}
.graybg .duocell .left { width: 92%; position: relative; height: fit-content; aspect-ratio: 1/1; margin: 0 auto 6vw;}
.graybg .duocell .right { width: 100%; text-align: left; margin: 0 auto;}
.graybg .duocell .right .ttlbox h2 {text-align: left; margin-left: 0; margin-right: 0;}
.graybg .duocell .right .ttlbox p {text-align: left; margin-left: 0; margin-right: 0; font-size: 100%;}
  .graybg .duocell .right .spec .fleft { width:35%;}
  .graybg .duocell .right .spec .fright { width: 65%;}
  
.slidebox {position: relative; width: 100%; height: auto; aspect-ratio:1/.7; overflow: hidden;}
.slide {position: absolute; width: 100%;height: 100%;}
.slide img { width: 100%; height: 100%; object-fit: cover;}





.mb1 {margin-bottom: 2vw!important;}
.mb2 {margin-bottom: 4vw!important;}
.mb3 {margin-bottom: 6vw!important;}
.mb5 {margin-bottom: 10vw!important;}
.mb7 {margin-bottom: 14vw!important;}
.mb10 {margin-bottom: 20vw!important;}
.mt10 {margin-top: 20vw!important;}

.tac {text-align: center!important;}
.tal {text-align: left!important;}
.tar {text-align: right!important;}

.largep { font-size: 110%!important;}

.fz110p {font-size: 110%!important;}
.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: 45%; text-align: left; padding: 2vw 0; box-sizing: border-box;}
.txtlist .flcell .fright { width: 55%; text-align: left; padding: 2vw 0; box-sizing: border-box;}

.companyinfo .flcell .fleft { width: 25%; text-align: left; padding: 2vw; box-sizing: border-box;}
.companyinfo .txtlist .flcell .fright { width: 75%; text-align: left; padding: 2vw; box-sizing: border-box;}



/*form*/
.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 5vw; 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: 0.5vw 5.15vw 0.5vw 5.15vw; color: #fff; font-size: 130%; letter-spacing: 0.2rem; margin: 0 auto; text-align: center; border: none; background: #000;}
.form .submit.active {opacity: 1;}
.formTd .d-inline-block {display:block!important;}
.formTd .d-inline-block input { margin-right: .4vw;}

.form.con1 .formRow.con1 {display: flex; transition: all .5s;}
.form.con2 .formRow.con1 {display: none; transition: all .5s;}

.form .inq {display: none;}
.form.con2 .inq {display: flex;}
/*form*/

.flowbox { width: 96%; margin: 0 auto;}
.flowbox .row_full { margin-bottom: 3vw;}
.flowbox .dot {width: .6vw; height: auto; margin: 0 auto 3vw;}
.flowbox .dot img {display: block; width: 100%; height: auto; object-fit: contain;}
.flowbox .box {position: relative; border: solid 5px #000; border-radius: 2vw; padding: 4vw; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;width: 100%;}
.flowbox .box .inner { width: 100%; display: flex; justify-content: space-between; align-items: center;}
.flowbox .box .inner .num { width: 6vw; height: 6vw; border-radius: 50%; border: solid 2px #000; display: flex; justify-content: center; align-items: center;}
.flowbox .box .inner .num p {font-weight: bold; font-size: 110%;}
.flowbox .box .inner .txt { width: 90%; text-align: left;}
.flowbox .row_tri { margin-bottom: 3vw; display: block;}
.flowbox .row_tri .dot {margin-bottom: 0;}
.flowbox .row_tri .box {position: relative; border: solid 5px #000; border-radius: 2vw; padding: 2vw 1vw; display: flex; justify-content: center; align-items: center; width: 100%; margin-bottom: 2vw;}
.flowbox .row_tri .box  .inner {width: 100%;}
.flowbox .row_tri .box  .inner .txt { width: 90%; text-align: left;}
.flowbox .dotnone {display: none;}

.newslist .webgene-blog { display: flex; justify-content: flex-start; flex-wrap: wrap; width: 100%;}
.newslist .webgene-blog .webgene-item {position: relative; display: block; width: 48%; margin: 0 4% 5% 0; overflow: hidden; aspect-ratio: 1/1;}
.newslist .webgene-blog .webgene-item:nth-of-type(2n) {margin-right: 0;}
.newslist .webgene-blog .webgene-item .webgene-item-content a {display: block; width: 100%; height: 100%; aspect-ratio:1/1; overflow: hidden; margin-bottom: 0;}
.newslist .webgene-blog .webgene-item .webgene-item-content .txt { position: absolute; z-index: 2; top: 0; left: 0; display: flex; justify-content: center; align-items: center; text-align: center; width: 100%; font-weight: 700; background: rgba(0,0,0,.8); opacity: 0; color: #fff; transition: all .6s; aspect-ratio:1/1;}
.newslist .webgene-blog .webgene-item .webgene-item-content a:hover .txt { transition: all .6s; opacity: 1;}
.newslist .webgene-blog .webgene-item .webgene-item-content a .thumb { position: absolute; z-index: 1; display: block; text-align: center; width: 100%; height: 100%; aspect-ratio:1/1;}
.newslist .webgene-blog .webgene-item .webgene-item-content a .thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1); transition: all .6s;}
.newslist .webgene-blog .webgene-item .webgene-item-content a:hover .thumb img { transition: all .6s; transform: scale(1.1);}
.webgene-blog h1 {font-size: 120%;}

.section.pricelist {width: 96%;}
.section.pricelist .flcell {align-items: center; flex-direction: column;}
.section.pricelist .flcell .fleft { width: 100%; text-align: left; padding: 4vw 1vw 1vw; box-sizing: border-box;}
.section.pricelist .flcell .fleft p {font-size: 110%; font-weight: bold;}
.section.pricelist .flcell .fright { width: 100%; text-align: left; padding: 0 1vw 4vw; box-sizing: border-box;}
.section.pricelist .flcell .fright h3 { font-size: 110%; color: #e87007;}
.section.pricelist .flcell .fright h3 + p { margin-top: .5vw;}

.noticelist { display: block;}
.noticelist .cell {width: 100%; margin: 0 0 4% 0 ;}
.noticelist .cell:nth-of-type(even) {margin-right: 0;}
.noticelist .cell:nth-last-of-type(1) {width: 100%; margin: 0;}
.noticelist .cell h2 {background: #e87007; border-radius: 2vw; color: #fff; text-align: center; font-size: 120%; padding: 1vw 0; margin-bottom: 1vw;}
.noticelist .cell p {text-align: left;}

.printingslist { display: flex; justify-content: flex-start; flex-wrap: wrap; width: 100%;}
.printingslist .cell {position: relative; display: block; width: 32%; margin: 0 2% 2% 0; overflow: hidden; aspect-ratio: 1/.7;}
.printingslist.sq .cell {aspect-ratio: 1/1;}
.printingslist .cell img {display: block; position: absolute; top: 0; bottom: 0; right: 0; left: 0; transform: scale(1); transition: all 1s; width: 100%; height: auto; object-fit: cover;}
.printingslist .cell:hover img {transform: scale(1.3); transition: all 1s;}
.printingslist .cell:nth-of-type(3n) {margin-right: 0;}

#galleryMain { position: fixed; z-index: -10; opacity: 0; top: 0; right: 0; width: 100%; height: 100vh; overflow: hidden; display: block; background: rgba(0,0,0,.8); transition: all .6s;}
#galleryMain.on { opacity: 1; z-index: 30;}
#galleryMain .img { position: absolute; z-index: -1; top: 20vw; left: 0; right: 0; margin: auto; aspect-ratio: 1/.775; width: 96%; max-height: 96vh; overflow: hidden; margin-top: 5vw; opacity: 0; z-index: -1;}
#galleryMain .img.on { opacity: 1; z-index: 1;}
#galleryMain .img img { width: 100%; height: 100%; object-fit: contain; cursor: pointer;}
#galleryMain .closebtn { position: absolute; top: 10vw;  left: 0; display: block; margin: auto; width: 98vw; height: auto; text-align: center; color: #fff; z-index: 2; }
#galleryMain .closebtn p { color: #fff; font-size: 3vw;}

.featureSec .flcell {display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; width: 100%;}
.featureSec .flcell .fleft  { width: 6vw; height: 6vw; border-radius: 50%; border: solid 2px #000; display: flex; justify-content: center; align-items: center;}
.featureSec .flcell .fleft p {font-weight: bold; font-size: 110%;}
.featureSec .flcell .fright { width: 90%; text-align: left; margin-left: 2vw;}
.featureSec .flcell .fright h3 { font-size: 120%; text-align: left;}

.kv {position: relative; width: 100%; aspect-ratio: 1/1; overflow: hidden;}
.kv .kvslide { width: 100%; height: auto; aspect-ratio: 1/1; overflow: hidden;}
.kv .kvslide img {display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}

.indexTxt {position: relative; width: 100%; height: auto; aspect-ratio: 1/1; margin: 0 auto; display: flex; justify-content: center; align-items: center; flex-direction: column; }
.indexTxt p { font-size: 140%; font-weight: bold; margin-bottom: 1vw; text-align: center; opacity: 0;}



.indexvideocont {position: relative; width: 100%; aspect-ratio: 1/1.1; overflow: hidden;}
.indexvideocont .txt {position: absolute; z-index: 2; top: 20vw; left: 12vw; width: 70%; height: 50vw; margin: 0 auto; text-align: left;}
.indexvideocont .ttlbox h2 {text-align: left; margin-left: 0; margin-right: 0;}
.indexvideocont .ttlbox p {text-align: left; margin-left: 0; margin-right: 0;}
.indexvideocont .video {position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: auto; aspect-ratio: 1/1.1; overflow: hidden;}
.indexvideocont .video video {display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}

.maincont.gallery .section {width: 100%!important; margin: 0 auto!important; padding: 15vw 0!important;}
.maincont.gallery .section .lazy .cell {cursor: default; width: 100%; height: 66.7vw; display: block; margin-bottom:6vw;}
.maincont.gallery .section .lazy img { opacity: 0; transition: opacity 0.5s ease-in-out;}
.maincont.gallery .section .lazy img { opacity: 1;}

.txtlist.optionlist .flcell .fright { width: 100%; padding: 0 1vw 0vw;}
.txtlist.optionlist .flcell .img {display: block; width: 60%; height: auto; margin: 0 auto 4vw; padding: 1vw; box-sizing: border-box;}
.txtlist.optionlist .flcell .fright.full {width: 100%; padding-bottom: 4vw;}

.galleryNavi {position: fixed; z-index: 6; opacity: 0; left: 2vw; bottom: 10vw; width: 100%; margin: 0 auto; display: block; transition: all 1s; font-size: 80%;}
.galleryNavi.on {opacity: 1; transition: all 1s;}
.galleryNavi a { border: solid 2px #000; border-radius: 2vw; padding: 1vw; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;width: fit-content; margin: 0 2vw 2vw 0; font-weight: bold; background: #fff; overflow: hidden;}
.galleryNavi a:last-child {margin-right: 0;}
.galleryNavi a.current {padding: 2vw; font-size: 100%; transition: all 1s; background: #000; color: #fff; border: solid 2px #000;}

#chatbot-btn {transform: scale(0.8)!important; bottom: -3vw !important; right: -4vw !important;}

.container.contactform .btnbox { display: block; width: 80%; margin: auto;}
.container.contactform .btnbox .estimate { width: 100%; margin-bottom: 3vw;}
.container.contactform .btnbox .generalinquiry { width: 100%;}

.container.contactform .btnbox260723 {
  display: flex;
  flex-direction: column;
  gap: 80px;
}

}