@charset "UTF-8";
* {margin: 0; padding: 0;}
p { line-height: 1.6;}

.tal {text-align: left;}
.tac {text-align: center;}
.wow {opacity: 0;}
.cp { width: 100%; padding: 0 0 1vw; text-align: center;}

a:link { text-decoration: none; color: #000;}
a:visited { text-decoration: none; color: #000;}
a:hover { text-decoration: none; opacity: .6; transition: all .5s;}
a:active { text-decoration: none; color: #000;}
a:link,a:visited,a:hover,a:active {transition: all .6s; }

img { width: 100%; height: 100%; object-fit: contain;}

.displayfont {font-family: "andale-mono-mt-pro", sans-serif;}
.displayfont2 {font-family: "arial", sans-serif;font-weight: 700;}

.maincont {position: relative; top: 0; left: 0; z-index: 9; width: 100%; height: auto; overflow: hidden; opacity: 0; transition: all .5s; margin: 0 auto;}
.maincont.on {height: auto;overflow: visible; opacity: 1; transition: all .5s;}

.error404 .whitebg { min-height:100vh; padding-top: 10vw; box-sizing: border-box;}
.error404 .whitebg .section {text-align: center; margin: 0 auto;}


.cp {background: #000; text-align: center; color: #fff; margin: 2vw auto 0; padding: 2vw 0 0; border-top: solid 1px rgba(255,255,255,.3);}
.footer a {color: #fff;}


@media screen and (max-width: 999px) {
body { background: url(images/bg.webp),#fafafa; background-size: 50px auto; background-attachment: fixed; padding: 0; margin: 0; font-family: serif; font-size: 2.5vw; color: #000; overflow-x: hidden; font-family: sans-serif;}
.mb1 {margin-bottom: 1vw;}
.mb2 {margin-bottom: 2vw;}
.mb3 {margin-bottom: 3vw;}
.mb5 {margin-bottom: 5vw;}
.mb10 {margin-bottom: 10vw;}
.mb20 {margin-bottom: 20vw;}
.mb60 {margin-bottom: 60vw;}

.w50 { display: block; width: 50vw;}
.w70 {width: 70%!important;}
.w90 {width: 90%!important;}


a.btn { display: block; color: #fff; width: fit-content; padding: .3vw 1vw; box-sizing: border-box; border-radius: 2vw; border: solid 1px rgba(255,255,255,.3); text-align: center; margin-right: auto; margin-left: auto; font-size: 90%; letter-spacing: .3em; font-family: "andale-mono-mt-pro", sans-serif;}

img {width: 100%; height: 100%; object-fit: contain;}
#spMenu,.spnavi {display: none;}

.header {position: fixed; z-index: 20; left: 0; top: -10vw; width: 100%; height: 10vw; background: #000; display: flex; justify-content: space-between; align-items: center; padding: 3vw; box-sizing: border-box; opacity: 0; transition: all 1s;}
.header.on { opacity: 1; top: 0; transition: all 1s;}
.header .logo { color: #fff; width: 25vw; height: auto; display: flex; justify-content: flex-start; align-items: center;}
.header .gmenu {display: none;}
.submenu {display: none;}
#spMenu { 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: #fff; font-size: 0.1em; }
.menu-trigger p { position: absolute; left: 0; width: 100%; height: 1px; background: #fff; font-size: 0.1em; box-shadow: 0px 0px 8px rgba(0,0,0,0.2); }
.menu-trigger p:nth-of-type(1) { top: 1vw; }
.menu-trigger p:nth-of-type(2) { top: 2.3vw; }
.menu-trigger.active p:nth-of-type(1) { transform: translateY(1.2vw) rotate(-45deg); background: #fff; }
.menu-trigger.active p:nth-of-type(2) { transform: translateY(-.05vw) rotate(45deg); background: #fff; }

.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,1); 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: 19;}
.spnavi a {position: relative; display: block; width: 100%; color: #000; font-size: 100%; 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;}






.kv {position: relative; z-index: 1; top: 0; left: 0; width: 100%; height: auto; aspect-ratio:1/.9; overflow: hidden;}
.kv .txt {position: absolute; z-index: 2; top: 20%; left: 3%; width: 97%; height: 70vw;}
.kv .txt img {width: 80%; height: auto; object-fit: contain; display: block; margin-bottom: 2vw;}
.kv .txt .grttl {display: block; font-size: 140%; margin-bottom: 2vw;font-weight: bold; background: linear-gradient(to right,#f93137 0%, #f7e800 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color:transparent;  }
.kv .txt .labelBox { display: flex; justify-content: flex-start; align-items: center; }
.kv .txt .labelBox img { width: 15vw; height: auto; margin-right: 3vw;}

.kv .kvSolution {position: absolute; z-index: 3; top: 47%; left: 10%; width: 80%; height: 94vw;}
.kv .kvSolution .panelCell {position: absolute; z-index: 1; top: -1vw; left: -2vw; width: 80vw; height: auto; background: rgba(255,255,255,.95); border-radius: 1vw; padding: 1vw 3vw 3vw; box-sizing: border-box; opacity: 0; transition: all 3s;}
.kv .kvSolution .panelCell.visible {opacity: 1; z-index: 2; top: 0; left: 0; transition: all 1s;}
.kv .kvSolution .panelCell .logo {display: block; margin-bottom: 1vw; height: 3vw;}
.kv .kvSolution .panelCell .ttl {display: block; margin-top: 1vw;}
.kv .kvSolution .panelCell .des {display: block; margin-top: 1vw; min-height:4em;}
.panelCell .bar {position: relative; margin-top: 2vw; height: 2px; background: #f00; width: 0%; transition: none;}
.panelCell.visible .bar {animation: progressBar linear forwards;}
@keyframes progressBar {from { width: 0%; }to { width: 100%; }}

.kv #nextBtn {position: absolute; z-index: 5; bottom: 0; right: 0vw; padding: 1vw; color: #fff; font-size: 140%;display: block; width: 14vw; text-align: right; box-sizing: border-box;}
.kv #prevBtn {position: absolute; z-index: 5; bottom: 0; left: 0vw; padding: 1vw; color: #fff; font-size: 140%;;display: block; width: 14vw; text-align: left; box-sizing: border-box;}


.kv .videocont {position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: auto; aspect-ratio:1/2; background: #000;}
.kv .videocont.on {height: auto;overflow: visible; opacity: 1; transition: all .5s;}
.kv .videocont video {width: 100%; height: 100%; object-fit: cover; opacity: .8;}

.pagettl {position: relative; z-index: 1; top: 0; left: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: auto; margin-top: 10vw; aspect-ratio:1/.2; overflow: hidden;}
.pagettl .txt { width: auto; height: auto; text-align: center; margin: auto; color: #000;}
.pagettl .txt.w * {color: #fff;}
.pagettl .txt h1 {font-size: 140%;}
.pagettl .txt p { font-size: 100%;}
.pagettl + .section {margin-top: 0;}
.cta {position: fixed; right: 0; bottom: 4vw; width: 3.4vw; height: auto; z-index: 20;}

#canvas {position: fixed; z-index: 1; top: 0; left: 0; width: 100%; height: 100vh; opacity: 1; transition: all .5s;}
#canvas canvas {width: 100%; height: 100%; object-fit: cover;}

.footer {position: relative; z-index: 2; background: #000; padding: 6vw 3vw; box-sizing: border-box; display: block;}
.footer .left {width: 100%; margin-bottom: 4vw;}
.footer .left a {display: block; width: 30%; height: auto; color: #fff!important; text-align: left;}
.footer .mdl {width: 100%; margin-bottom: 4vw;}
.footer .mdl p {color: #fff; line-height: 1; display: block; margin-bottom: .5vw; font-size: 80%;}
.footer .mdl p:last-child {margin-bottom: 0;}
.footer .right {flex:1; padding-left: 1vw; box-sizing: border-box; display: flex; justify-content: flex-start; flex-wrap: wrap; gap:3vw 0; width: 100%;}
.footer .right a {position: relative; display: flex; justify-content: flex-start; align-items: center; width: 50%; padding:0; height: auto; text-align: left; color: #fff; font-size: 90%;font-family: "andale-mono-mt-pro", sans-serif; font-size: 90%;}
.footer .right a::before {display: block; content:""; width: .8vw; height: .8vw; margin-right: .5vw; background-size: auto 100%; background: url(images/icon_boxarrow1.webp) no-repeat center center; opacity: .8;}


.whitebg {display: block; position: relative; background: rgba(255,255,255,.9); position: relative; overflow: hidden;}

.section { display: block; position: relative; width: 85.4vw; margin: 10vw auto;}

.lineTtl {position: relative; color: #fff; }
.lineTtl::before { display: block; position: absolute; content:""; width: 6vw; height: 1px; top: 0; bottom: 0; margin: auto; left: -7.3vw; background: rgba(255,255,255,.29);}

.whitebg .lineTtl::before { display: block; position: absolute; content:""; width: 6vw; height: 1px; top: 0; bottom: 0; margin: auto; left: -7.3vw; background: rgba(0,0,0,.29);}
.whitebg .lineTtl {position: relative; color: #222; }

.flcell { width: 100%; display: flex; justify-content: center; align-items: center; }
.flcell .left { width: 50%;}
.flcell .right { width: 50%;}

.numttl {width: fit-content; height: auto; text-align: left; display: flex; justify-content: center; align-items: center; margin: 0;}
.numttl .num { width: 7vw; font-size: 170%; margin-right: 2vw;}
.numttl .numttlmain {flex:1;}
.numttl .numttlmain h2,.numttl .numttlmain h3 { font-size: 120%; font-weight: bold; display: block; text-align: left; margin-bottom: .2vw; line-height: 1;}
.numttl .numttlmain p {line-height: 1; font-size: 90%;}

.indexsec2 .numttl {width: fit-content; height: auto; text-align: left; display: flex; justify-content: center; align-items: center; margin: 0 auto;}




.indexsec1 .left {background: url(https://craftfix.co.jp/wp-content/themes/craftfix/images/cflogo.webp) no-repeat top center; background-size: auto 100%;}
.indexsec1 .box { width: 80%; margin: 0 auto;}
.indexsec1 .box .grttl {display: block; font-size: 160%; margin-bottom: 3vw;font-weight: bold; background: linear-gradient(to right,#d41a3c 0%, #f7e800 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color:transparent;  }
.indexsec1 .flcell { width: 100%; display: block; margin-top: 6vw; }
.indexsec1 .flcell .left { width: 100%; margin-bottom: 6vw;}
.indexsec1 .flcell .right { width: 100%;}

.indexsec2 .flcell {margin-top: 6vw;}
.indexsec2 .flcell { width: 100%; display: block; margin-top: 6vw; }
.indexsec2 .flcell .left {position: relative; width: 100%; margin: 0 auto 3vw;}
.indexsec2 .flcell .right { width: 100%; margin: 0 auto;}
.indexsec2 .left .slide { position: relative; z-index: 1; top: 0; left: 0; width: 100%; height: auto; aspect-ratio:1/.677; display: block;}
.indexsec2 .left .slide .cell {width: 100%; height: 100%; object-fit: cover;}
.indexsec2 .grttl {display: block; font-size: 140%; margin-bottom: 1vw;font-weight: bold; background: linear-gradient(to right,#f93137 0%, #f7e800 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color:transparent;  }
.indexsec2 .labelBox { width: 100%; display: flex; margin-top: 1vw;}
.indexsec2 .labelBox .cell {width: 48%; margin: 1vw auto; background: rgba(255,255,255,.6); padding: 3vw 0; box-sizing: border-box;}
.indexsec2 .labelBox .cell .numttl .num {display: none;}
.indexsec2 .labelBox .cell .labelimg {padding: 2vw 4vw 0; width: 60%; margin: 0 auto; box-sizing: border-box;}

.solutionPanel {width: 100%; display: block; margin-top: 4vw;}
.solutionPanel .cell {display: block; width: 100%; padding: 4vw; margin: auto; text-align: center; box-sizing: border-box; border-radius: 1vw; background: rgba(255,255,255,.9); margin-bottom: 3vw;}
.solutionPanel .cell .logo {display: block; margin: 0 auto .5vw; width: auto; height: 10vw; }
.solutionPanel .cell .img {display: block;margin-bottom: 1vw;}
.solutionPanel .cell .ttl {display: block; margin-bottom: .5vw; font-weight: bold; font-size: 140%; text-align: left; }
.solutionPanel .cell .txt {display: block; text-align: left; }
.solutionPanel .txtcell {display: block; width: 100%; padding: 2vw; margin: auto; text-align: left; box-sizing: border-box;}
.solutionPanel .txtcell h2 {font-size: 190%; margin-bottom: 3vw;background: linear-gradient(to right,#f93137 0%, #f7e800 100%); background-clip: border-box; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;}
.solutionPanel .txtcell h3 {font-size: 110%; margin-bottom: 3vw;}
.solutionPanel .txtcell p {display: block;}





.linkbnr { display: block; margin: 8vw auto;}
.linkbnr .cell {margin-bottom: 3vw;display: flex; justify-content: center; align-items: center; width: 100%; background: rgba(255,255,255,.2); padding: 1vw; box-sizing: border-box;}
.linkbnr .cell .box { display: flex; justify-content: flex-start; align-items: center; width: 100%; height: 100%; border: solid 1px rgba(0,0,0,.2); background: #fff; padding: 4vw; box-sizing: border-box;}
.linkbnr .cell .left { width: 80%; display: flex; justify-content: flex-start; align-items: center; }
.linkbnr .cell .left .icon { width: 11%; margin-right: 2vw;}
.linkbnr .cell .left .txt { width: 75%; text-align: left;}
.linkbnr .cell .left .txt .ttl { font-weight: bold; font-size: 120%; margin-bottom: 1vw; line-height: 1;}
.linkbnr .cell .left .txt .en {font-size: 80%; text-align: left; color: #222; line-height: 1;}
.linkbnr .cell .right { width: 20%; display: flex; justify-content: flex-end; align-items: center; }
.linkbnr .cell .right .icon { width: 30%;}

.indexnews { display: block;}
.indexnews .ttl { width: 100%; margin-bottom: 3vw;}
.indexnews .ttl h2 {font-size: 180%; font-weight: bold;}
.indexnews .ttl p {font-weight: bold;}
.indexnews .newsBox { width: 100%; display: block; margin: 0 auto;}
.indexnews .newsBox .cell { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; margin-bottom: 3vw;}
.indexnews .newsBox .cell .img { width: 30%; margin-right: 3%;}
.indexnews .newsBox .cell .txt { width: 67%; text-align: left;}
.indexnews .newsBox .cell .txt .date {display: block; width: fit-content; color: #fff; border-radius: 1.5vw; text-align: center; margin-bottom: .5vw; background: linear-gradient(to right,#d41a3c 0%, #f7e800 100%); overflow: hidden; padding: 1vw; line-height: 1;}
.indexnews .newsBox .cell .txt h2 { font-size: 100%; }




.divisionsCell {display: flex; justify-content: flex-start; flex-wrap: wrap; width: 100%; gap:2vw 2.25vw; margin-top: 4vw;}
.divisionsCell .cell { width: 23%; border-radius: 1vw; background: rgba(255,255,255,.9); padding: 2vw; box-sizing: border-box;}
.divisionsCell .cell .left {width: 100%; margin-right: 0; margin-bottom: 1vw;}
.divisionsCell .cell.full {width: 100%;}
.divisionsCell .cell.full {display: flex; justify-content: flex-start; align-items: center; width: 100%;}
.divisionsCell .cell.full .left {width: 20%; margin-right: 5%; margin-bottom: 0;}
.divisionsCell .cell.full .right {width: 70%;}
.divisionsCell .cell .psnttl {position: relative; width: 100%; display: flex; justify-content: space-between; align-items: center; margin-bottom: 2vw;}
.divisionsCell .cell .psnttl .ttlleft {width: fit-content; text-align: left; font-size: 140%; font-weight: bold; padding-right: 1vw; padding-left: .5vw; border-left: solid 4px #B41D23;}
.divisionsCell .cell .psnttl .ttlmdl {display: block; width: auto; flex:1; height: 1px; background: rgba(0,0,0,.29);}
.divisionsCell .cell .psnttl .ttlright {width: fit-content; text-align: right; padding-left: 1vw;}

.section.ci {display: block; padding: 4vw 0;}
.section.ci .ciBox { width: 100%; margin-top: 3vw; padding: 0; box-sizing: border-box;}
.section.ci .ciBox h2 {font-size: 120%; margin-bottom: 4vw;}
.section.ci .ciBox p {display: block; width: 100%;}
.section.ci .ciBox p br {display: none;}

.section.greetings {display: block; padding: 4vw 0;}
.section.greetings .messageBox { width: 100%; padding: 0; box-sizing: border-box; padding: 4vw; background: rgba(0,0,0,.82);color: #fff;}
.section.greetings .messageBox .left { width: 100%; padding: 0; box-sizing: border-box; color: #fff; font-size: 100%; margin-bottom: 5vw;}
.section.greetings .messageBox .left h3 {color: #fff; font-size: 240%; margin-bottom: 2vw; padding-bottom: 1vw; border-bottom: solid 1px rgba(255,255,255,.3);  -webkit-text-stroke: 1px rgba(240, 171, 173, 0.6); text-stroke: 1px rgba(255,255,255,.6); color: rgba(0,0,0,0);}
.section.greetings .messageBox .left .messageSign {font-size: 100%; font-weight: bold; text-align: right; margin-top: 6vw;}
.section.greetings .messageBox .left .messageSign img { width: 50%; height: auto; display: block; margin: 0 0 0 auto;}
.section.greetings .messageBox .right { width: 100%; padding: 0; box-sizing: border-box;}







.section.cioutlineSec {display: block; padding: 4vw 0;}
.section.cioutlineSec .ciOutline {display: block; width: 100%;}
.section.cioutlineSec .ciOutline .cell { width: 100%; margin-top: 3vw;}
.section.cioutlineSec .ciOutline .cell h2 {margin-bottom: .5vw; padding-left: .5vw; border-left: solid 4px #B41D23; font-size: 120%;}

.newslist .newsBox { display: flex; justify-content: flex-start; flex-wrap: wrap; gap:1vw 1%;}
.newslist .newsBox .cell { width: 100%; display: block; border-radius: 1vw; background: rgba(255,255,255,.9); overflow: hidden; padding: 4vw; box-sizing: border-box; margin-bottom: 3vw;}
.newslist .newsBox .cell .ttl { width: 100%; display: block; margin-bottom: 2vw;}
.newslist .newsBox .cell .ttl .date {display: block; width: fit-content; color: #fff; border-radius: 1.5vw; text-align: center; margin: 0 1vw 0 0; background: linear-gradient(to right,#d41a3c 0%, #f7e800 100%); overflow: hidden; padding: 1vw; line-height: 1;}
.newslist .newsBox .cell .ttl h2 {font-size: 140%; font-weight: bold; }
.newslist .newsBox .cell .img { width: 100%; margin-bottom: 2vw;}
.newslist .newsBox .cell .txt { width: 100%; text-align: left;}

.section.salesoffice {display: flex; justify-content: flex-start; align-items: flex-start; padding: 4vw 0;}
.section.salesoffice .salesofficeBox {display: block; width: 100%; margin-bottom: 5vw;}
.section.salesoffice .salesofficeBox .left { width: 100%; margin-bottom: 2vw; aspect-ratio:1/1.323;}
.section.salesoffice .salesofficeBox .left img {display: block;}
.section.salesoffice .salesofficeBox .right { width: 100%; padding: 0; box-sizing: border-box; text-align: left;}
.section.salesoffice .salesofficeBox .right h2 {font-size: 140%; font-weight: bold; margin-bottom: 1vw; padding-left: .5vw; border-left: solid 4px #B41D23;}
.section.salesoffice .salesofficeBox .map { width: 100%; margin: 3vw auto; padding: 0; box-sizing: border-box; text-align: left;}
.section.salesoffice .salesofficeBox .map iframe {width: 100%; height: 45vw; border: none;}
.section.salesoffice .salesofficeBox .subimg { width: fit-content; display: flex; justify-content: flex-start; gap: 0 .3vw;}
.section.salesoffice .salesofficeBox .subimg img { width: 33%; height: auto; display: block;;}



.newsdetail .article { width: 100%; margin: 0 auto; display: block; border-radius: 1vw; background: rgba(255,255,255,.9); overflow: hidden; padding: 3.5vw; box-sizing: border-box;}
.newsdetail .article .ttl { width: 100%; display: block; margin-bottom: 2vw;}
.newsdetail .article .ttl .date {display: block; width: fit-content; color: #fff; border-radius: 1.5vw; text-align: center; margin: 0 1vw 0 0; background: linear-gradient(to right,#d41a3c 0%, #f7e800 100%); overflow: hidden; padding: 1vw; line-height: 1;}
.newsdetail .article .ttl h2 {font-size: 140%; font-weight: bold; }
.newsdetail .article .img { width: 100%; margin: 1vw auto;}
.newsdetail .article .txt { width: 100%; text-align: left;}

.solutionsCell .cell {width: 100%; margin-top: 4vw;}
.solutionsCell a.cell {display: block; width: 100%; border-radius: 1vw; background: rgba(255,255,255,.9); overflow: hidden; margin-bottom: 2vw;}
.solutionsCell .cell .left {width: 100%; margin-bottom: 2%; box-sizing: border-box; overflow: hidden;}
.solutionsCell .cell .left img { width: 100%; height: 100%; display: block; object-fit: cover;}
.solutionsCell .cell .right {width: 100%; padding: 2vw 4vw 4vw; box-sizing: border-box;}
.solutionsCell .cell .right .ttl {width: fit-content; height: 10vw; margin-bottom: 2vw;}
.solutionsCell .cell .right p {font-size: 100%; }
.solutionsCell .cell .right .tagBox { display: flex; justify-content: flex-start; flex-wrap: wrap; width: 100%; gap: 1vw; margin-top: 2vw;}
.solutionsCell .cell .right .tagBox p { display: flex; justify-content: center; align-items: center; width: fit-content; padding: .2vw 1vw; border: solid 1px #222; border-radius: 1vw; text-align: center; color: #B41D23; font-size: 90%;}
.solutionsCell .cell .arrow {display: none;}

.solutionsCell div.cell {display: block; width: 100%; border-radius: 1vw; background: rgba(255,255,255,.9); overflow: hidden; padding: 5vw; box-sizing: border-box;}
.solutionsCell div.cell .left {width: 100%; margin-bottom: 2vw; padding: 0;}
.solutionsCell div.cell .right {width: 100%; padding: 0;}

.solutionDetail {width: 100%; margin: 10vw auto; display: block;}
.solutionDetail .dcell { width: 100%; background: none; padding: 0; box-sizing: border-box; margin-bottom: 10vw; display:flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
.solutionDetail .dcell * {color: #000;}
.solutionDetail .dcell .img { width: 8%; margin-right: 2%;}
.solutionDetail .dcell .mainttl { width: 90%; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
.solutionDetail .dcell .mainttl .num { width: 5vw; font-size: 140%; margin-right: 1vw;font-weight: bold;}
.solutionDetail .dcell .mainttl h2 {font-size: 120%;line-height: 1;}
.solutionDetail .dcell .subttl { width: 100%; color: #222; line-height: 1; margin-bottom: 2vw; font-size: 60%;}

.solutionDetailOption {width: 100%; margin: 0 auto 10vw; display: block;}
.solutionDetailOption .ttlBox {position: relative; width: 100%; display: flex; justify-content: center; align-items: center; margin: 0 auto 7vw;}
.solutionDetailOption .ttlBox::before { display: block; flex:1; content:""; width: auto; height: 1px; background: #999; margin-right: 2em;}
.solutionDetailOption .ttlBox::after { display: block; flex:1; content:""; width: auto; height: 1px; background: #999; margin-left: 2em;}
.solutionDetailOption h2 {width: fit-content; text-align: center; font-size: 120%; margin: 0 auto;}
.solutionDetailOption .solutionDetailOptionLeft {width: 100%; padding: 0 0 5vw 0; box-sizing: border-box;}
.solutionDetailOption .solutionDetailOptionLeft .ttl {width: fit-content; height: 10vw; margin: 0 auto 5vw;}
.solutionDetailOption .solutionDetailOptionRight {width: 100%; box-sizing: border-box; overflow: hidden;}
.solutionDetailOption .solutionDetailOptionRight img { width: 100%; height: 100%; display: block; object-fit: cover;}

.section.servicePage {display: block; padding: 0; margin: 8vw auto;}
.section.servicePage .lineTtl {width: 100%; }
.section.servicePage .servicePageBox {display: block; margin-top: 3vw; }
.section.servicePage .servicePageBox .flcell.rm { width: 100%; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; gap:2vw 2%;}
.section.servicePage .servicePageBox .flcell.rm * { color: #000;}
.section.servicePage .servicePageBox .flcell.rm .left { width: 49%;}
.section.servicePage .servicePageBox .flcell.rm .right { width: 49%;}
.section.servicePage .servicePageBox .flcell.rm .num { font-size: 180%; width: 3vw; height: 3vw; display: flex; justify-content: center; align-items: center; color: #fff; border-radius: 50%; overflow: hidden; background: #d41a3c;}

.section.servicePage .full { width: 63%; margin: 5vw 0 5vw 20%;}
.section.servicePage .servicePageBox.pandd .flcont { width: 100%; display: block;}
.section.servicePage .servicePageBox.pandd .flcont * { color: #000;}
.section.servicePage .servicePageBox.pandd .flcont .spdn { display: none;}
.section.servicePage .servicePageBox.pandd .flcont .left { width: 100%; margin-bottom: 3vw;}
.section.servicePage .servicePageBox.pandd .flcont .right { width: 100%; margin-bottom: 3vw;}
.section.servicePage .servicePageBox.pandd .flcont .num { margin-right: 1vw; font-size: 140%; width: 6vw; height: 6vw; display: flex; justify-content: center; align-items: center; color: #fff; border-radius: 50%; overflow: hidden; background: #d41a3c;}
.section.servicePage .servicePageBox.pandd .flcont h3 {margin-bottom: 0; font-size: 110%;}
.section.servicePage .servicePageBox.pandd .flcont p {text-align: left;}
.section.servicePage .servicePageBox.pandd .flcont .mb1 {margin-bottom: .4vw;}


.section.servicePage .servicePageBox.pandd.wtxt .flcont { width: 100%; display: block;}
.section.servicePage .servicePageBox.pandd.wtxt .flcont .left,.section.servicePage .servicePageBox.pandd.wtxt .flcont .right { width: 100%; background: rgba(255,255,255,.8); padding: 4vw; box-sizing: border-box; margin: 0 0 3vw; }

.section.servicePage .servicePageBox.bs {display: flex; display: block; width: 100%; }
.section.servicePage .servicePageBox.bs .left {width: 100%; margin-bottom: 3vw;}
.section.servicePage .servicePageBox.bs .left p.l {font-weight: bold; font-size: 125%; line-height: 1.6;}
.section.servicePage .servicePageBox.bs .right {position: relative; width: 100%;}
.section.servicePage .servicePageBox.bs .right img {display: block; margin-left: 9vw;}

.section.servicePage .servicePageBox.cs {display: flex; justify-content: flex-start; width: 100%; margin: auto; }
.section.servicePage .servicePageBox.cs .left {display: flex; justify-content: flex-start; flex-wrap: wrap; width: 100%; gap:5vw 4%; }
.section.servicePage .servicePageBox.cs .csCell {position: relative; width: 100%; padding: 4vw; background: #fff; border-radius: 2vw; box-sizing: border-box; display: flex; justify-content: flex-start; flex-wrap: wrap; overflow: hidden;}
.section.servicePage .servicePageBox.cs .csCell .headCell { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; }
.section.servicePage .servicePageBox.cs .csCell .headCell .num { position: relative; width: 12%; margin-right: 2%; aspect-ratio:1/1; overflow: hidden;}
.section.servicePage .servicePageBox.cs .csCell .headCell .ttl { width: 86%; font-size: 120%; font-weight: bold; margin-top: .5vw;}
.section.servicePage .servicePageBox.cs .csCell .headCell .ttl span { font-size: 50%; display: block;}
.section.servicePage .servicePageBox.cs .txtCell { width: 100%; margin-top: 1vw; padding-top: 2vw; border-top: dotted 1px #cacaca;}
.section.servicePage .servicePageBox.cs .txtCell p {display: block; margin-bottom: .5vw;}

.bspanel .solutionPanel .smt,.bspanel .solutionPanel .txtcell {display: none;}

.page .section.servicePage .grttl,.page .section.ci .ciBox .grttl {display: block; font-size: 135%; margin-bottom: 3vw;font-weight: bold; background: linear-gradient(to right,#d41a3c 0%, #f7e800 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color:transparent;  }
.page .section.servicePage .grttl br {display: none;}


form dl {width: 100%; display: block; font-size: 100%;}
form dt { width: 100%; margin-bottom: 1vw;}
form dt span {color:red;}
form dd { width: 100%; margin-bottom: 3vw;}
form input[type="text"],form input[type="email"],form textarea,form select { width: 100%; padding: 1vw; box-sizing: border-box;}
form textarea {height: 7em;}
form .btnbox {text-align: center; margin: 0 auto;}
form .btnbox input {margin-right: .5vw;}
form .btnbox a {display: block; width: fit-content; margin: 1vw auto 0;}
form .btnbox button { background: #000; color: #fff; display: block; margin: 1vw auto 0; padding: 1vw; border: none;}

body.page-id-20 {background: #000;}
#canvas video { width: 100%; height: 100%; object-fit: cover; opacity: .3;}





.maincont.businessdivision .wbg { background: #fff;}
.maincont.businessdivision .bdsectionttl { background: transparent; width: 100%; height: auto; padding: 6vw 0 0;}
.maincont.businessdivision .bdsectionttl .insideCont{ background: #222; width: 100%; height: auto; padding: 0 0 0 3vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
.maincont.businessdivision .bdsectionttl .icon { width: 13vw; height: 13vw; display: flex; justify-content: center; align-items: center; border-left: solid 1px rgba(255,255,255,.3); }
.maincont.businessdivision .bdsectionttl .icon img {width: 40%; height: auto; object-fit: contain;}
.maincont.businessdivision .bdsectionttl .ttlmain { color: #fff;}
.maincont.businessdivision .bdsectionttl .ttlmain h2 { font-size: 120%;}
.maincont.businessdivision .bdsectionttl .ttlmain p { font-size: 70%;}

.maincont.businessdivision .section {width: 100%; background: #fff; margin: 0; padding: 4vw 0 10vw; box-sizing: border-box; overflow: hidden;}
.maincont.businessdivision .section h2 {margin: 0 3vw 1vw; padding-left: 1vw; border-left: solid 4px #B41D23;}

.maincont.businessdivision .divisionsCell.full {display: block; width: 95%; margin: 0 auto 10vw; box-sizing: border-box;}
.maincont.businessdivision .divisionsCell.full .cell {display: block; background: #fff; width: 100%; padding: 1vw; margin-bottom: 2vw; box-sizing: border-box; }
.maincont.businessdivision .divisionsCell.full .cell .left {width: 100%; margin-bottom: 3vw; margin-bottom: 0;}
.maincont.businessdivision .divisionsCell.full .cell .right {width: 100%; padding: 1vw; box-sizing: border-box;}
.maincont.businessdivision .divisionsCell.full .cell .psnttl {position: relative; width: 100%; display: flex; justify-content: space-between; align-items: center; margin-bottom: 4vw; padding-bottom: 2vw; border-bottom: dotted 1px #cacaca;}
.maincont.businessdivision .divisionsCell.full .cell .psnttl .ttlleft {width: fit-content; text-align: left; font-size: 120%; font-weight: bold;}
.maincont.businessdivision .divisionsCell.full .cell .psnttl .ttlright {width: fit-content; text-align: right; font-size: 110%; font-weight: bold;}

.maincont.businessdivision .divisionsCell.full .cell .right h3 { width: fit-content; padding: 1.5vw; text-align: center; border-radius: 1vw; border: solid 1px #cacaca; margin-bottom: 1vw; font-size: 100%; }
.maincont.businessdivision .divisionsCell.full .cell .right p {margin-bottom: 2vw;}



.maincont.businessdivision .divisionsCell.sub {display: block; width: 95%; margin: 0 auto 10vw; box-sizing: border-box;}
.maincont.businessdivision .divisionsCell.sub .cell {display: block; background: #fff; width: 100%; padding: 1vw; margin-bottom: 2vw; box-sizing: border-box; }
.maincont.businessdivision .divisionsCell.sub .cell .left {width: 100%; margin-bottom: 3vw; margin-bottom: 0;}
.maincont.businessdivision .divisionsCell.sub .cell .right {width: 100%; padding: 1vw; box-sizing: border-box;}
.maincont.businessdivision .divisionsCell.sub .cell .psnttl {position: relative; width: 100%; display: block; margin-bottom: 2vw;}
.maincont.businessdivision .divisionsCell.sub .cell .psnttl .ttl {width: fit-content; text-align: left; font-size: 100%; font-weight: bold;}
.maincont.businessdivision .divisionsCell.sub .cell .psnttl .name {width: fit-content; text-align: right; font-size: 120%; font-weight: bold;}

.maincont.businessdivision .businessdivisionNavi { width: 90%; display: flex; justify-content: space-between; align-items: center;flex-direction: column; gap:2vw; margin: 0 auto;}
.maincont.businessdivision .businessdivisionNavi a * {border: none!important;}
.maincont.businessdivision .businessdivisionNavi a { width: 100%; height: auto; padding: 1vw; background: rgba(255,255,255,.2); display: flex; justify-content: center; align-items: center; box-sizing: border-box; transition: all .3s;}
.maincont.businessdivision .businessdivisionNavi a .containBox{ width: 100%; height: 100%; padding: 2vw; background: #fff; display: flex; box-sizing: border-box; transition: all .3s;}
.maincont.businessdivision .businessdivisionNavi a .icon { width: 6%; height: auto; padding-right: 4%; display: flex; justify-content: center; align-items: center; border-left: solid 1px rgba(255,255,255,.3); }
.maincont.businessdivision .businessdivisionNavi a .icon img {width: 100%; height: auto; object-fit: contain; filter: invert(100%); transition: all .3s;}
.maincont.businessdivision .businessdivisionNavi a .ttlmain { width: 83%; color: #000; transition: all .3s;}
.maincont.businessdivision .businessdivisionNavi a .ttlmain h2 { font-size: 110%;}
.maincont.businessdivision .businessdivisionNavi a .ttlmain p { font-size: 50%;}
.maincont.businessdivision .businessdivisionNavi a .arrow { width: 5%; height: auto; display: flex; justify-content: center; align-items: center; border-left: solid 1px rgba(255,255,255,.3); }
.maincont.businessdivision .businessdivisionNavi a .arrow img {width: 100%; height: auto; object-fit: contain; filter: invert(100%); transition: all .3s;}

.maincont.businessdivision .businessdivisionNavi a:hover { background: rgba(0,0,0,.2); transition: all .3s; opacity: 1;}
.maincont.businessdivision .businessdivisionNavi a:hover .containBox{ background: #222; transition: all .3s;}
.maincont.businessdivision .businessdivisionNavi a:hover .ttlmain { color: #fff; transition: all .3s;}
.maincont.businessdivision .businessdivisionNavi a:hover .icon img { filter: invert(0%); transition: all .3s;}
.maincont.businessdivision .businessdivisionNavi a:hover .arrow img { filter: invert(0%); transition: all .3s;}

.maincont.supportPage .headSec h2 { font-size: 320%;}
.maincont.supportPage .headSec h3 { font-size: 130%; margin-bottom: 5vw;}
.maincont.supportPage .headSec h3 br {display: none;}
.maincont.supportPage .headSec p { display: block; }

.maincont.supportPage .headSubCont {display: block; width: 100%; height: 35.8vw; padding: 4vw 0 0; margin: 0 auto 10vw; background: linear-gradient(to right,#f93137 0%, #f7e800 100%);}
.maincont.supportPage .headSubCont .contentInner {width: 85.4vw; height: auto; aspect-ratio:1/.441; position: relative; margin: 0 auto; overflow: hidden;}
.maincont.supportPage .headSubCont .contentInner .ttlBox {position: absolute; z-index: 2; left: 0; bottom: 0; width: 100%; height: auto; background: rgba(0,0,0,.7); padding: 1vw 2vw; box-sizing: border-box;}
.maincont.supportPage .headSubCont .contentInner .ttlBox p {color: #fff; font-size: 100%; line-height: 1; margin-bottom: .6vw; }
.maincont.supportPage .headSubCont .contentInner .ttlBox h2 { color: #fff; font-size: 200%; line-height: 1;}
.maincont.supportPage .headSubCont .contentInner .img {position: absolute; z-index: 1; left: 0; bottom: 0; width: 100%; height: auto; aspect-ratio:1/.441; overflow: hidden;}
.maincont.supportPage .headSubCont .contentInner .ttlBox .img img {width: 100%; height: 100%; object-fit: cover;}

.maincont.supportPage .section.supportCont { display: flex; justify-content: space-between; align-items: flex-start; flex-direction: column;}
.maincont.supportPage .section.supportCont .txt {width: 100%; margin-bottom: 5vw;}
.maincont.supportPage .section.supportCont .txt .numttl { display: flex; margin-bottom: 4vw;}
.maincont.supportPage .section.supportCont .txt .numttl .num {font-size: 160%; margin-right: 1vw; color: #000; font-weight: bold;}
.maincont.supportPage .section.supportCont .txt .numttl h2 {font-size: 160%; color: #000;}
.maincont.supportPage .section.supportCont .txt .txtCont,.maincont.supportPage .section.supportCont .txt .pointCont {margin-left: 4vw; font-size: 100%;}
.maincont.supportPage .section.supportCont .txt .txtCont {margin-bottom: 7vw;}
.maincont.supportPage .section.supportCont .txt .txtCont p {margin-bottom: 2vw; line-height: 1.8;}
.maincont.supportPage .section.supportCont .txt .txtCont p:last-child {margin-bottom: 0;}
.maincont.supportPage .section.supportCont .txt .pointCont h3 {font-size: 110%; color: #B41D23; margin-bottom: .6vw;}
.maincont.supportPage .section.supportCont .txt .pointCont p {margin-bottom: 2vw;}
.maincont.supportPage .section.supportCont .txt .pointCont p:last-child {margin-bottom: 0;}
.maincont.supportPage .section.supportCont .img {width: 100%; display: flex; justify-content: space-between; align-items: center;}
.maincont.supportPage .section.supportCont .img .box { width: 48%; height: auto; aspect-ratio:1/.677; overflow: hidden;}
.maincont.supportPage .section.supportCont .img .box img img {width: 100%; height: 100%; object-fit: cover;}
.maincont.supportPage .supportcta {width: 90%; height: auto; margin: 10vw auto;}




}






































@media screen and (min-width: 1000px) {

body { background: url(images/bg.webp),#fafafa; background-size: 50px auto; background-attachment: fixed; padding: 0; margin: 0; font-family: serif; font-size: .8vw; color: #000; overflow-x: hidden; font-family: sans-serif;}
.mb1 {margin-bottom: 1vw;}
.mb2 {margin-bottom: 2vw;}
.mb3 {margin-bottom: 3vw;}
.mb5 {margin-bottom: 5vw;}
.mb10 {margin-bottom: 10vw;}
.mb20 {margin-bottom: 20vw;}
.mb60 {margin-bottom: 60vw;}

.w30 { display: block; width: 30vw;}
.w50 { display: block; width: 50vw;}
.w70 {width: 70%!important;}
.w90 {width: 90%!important;}

.wow {opacity: 0; filter: blur(1.5rem); transition: all 1.5s;}
.wow.animated { filter: blur(0); transition: all 1.5s;}

a.btn { display: block; color: #fff; width: fit-content; padding: .3vw 1vw; box-sizing: border-box; border-radius: 2vw; border: solid 1px rgba(255,255,255,.3); text-align: center; margin-right: auto; margin-left: auto; font-size: 90%; letter-spacing: .3em; font-family: "andale-mono-mt-pro", sans-serif;}

#spMenu,.spnavi {display: none;}

.header {position: fixed; z-index: 20; left: 0; top: -10vw; width: 100%; height: auto; background: #000; display: flex; justify-content: space-between; align-items: center; padding: 0 3vw; box-sizing: border-box; opacity: 0; transition: all 1s;}
.header.on { opacity: 1; top: 0; transition: all 1s;}
.header .logo { color: #fff; width: 7vw; height: auto;}
.header .gmenu {display: flex; justify-content: flex-start; align-items: center; }
.header .gmenu a {display: block; color: #fff; padding: 1vw 0 1vw 4vw; font-size: 100%;font-family: "andale-mono-mt-pro", sans-serif; opacity: 0; transition: all 2.5s;}
.header.on .gmenu a { opacity: 1; padding-left: 2vw; transition: all 2.5s;}
.header.on .gmenu a:hover { color: #B41D23; letter-spacing: .1em; transition: all .5s;}

.submenu {position: fixed; z-index: 19; left: 0; top: -10vw; width: 100%; height: auto; background: rgba(0,0,0,.8); display: flex; justify-content: flex-end; align-items: center; padding: 0 3vw; box-sizing: border-box; opacity: 0; transition: all 1s;}
.submenu.on { opacity: 1; top: 2.8vw; transition: all 1s;}
.submenu a {color: #fff; padding: 1vw 0 1vw 3vw; font-size: 100%;font-family: "andale-mono-mt-pro", sans-serif; opacity: 1; transition: all 2.5s;}
.submenu a:hover { color: #fff; letter-spacing: .1em; transition: all .5s;}


.kv {position: relative; z-index: 1; top: 0; left: 0; width: 100%; height: auto; aspect-ratio:1/.5; overflow: hidden;}
.kv .txt {position: absolute; z-index: 2; top: 15%; left: 10%; width: 55%; height: 40vw; -webkit-filter: drop-shadow(3px 3px 5px rgba(0,0,0,.3)); filter: drop-shadow(3px 3px 5px rgba(0,0,0,.3));}
.kv .txt img {width: 100%; height: auto; object-fit: contain; display: block; margin-bottom: 2vw;}
.kv .txt .grttl {display: block; font-size: 280%; margin-bottom: 2vw;font-weight: bold; background: linear-gradient(to right,#f93137 0%, #f7e800 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color:transparent;  }
.kv .txt .grttl:after {}
.kv .txt .labelBox { display: flex; justify-content: flex-start; align-items: center; }
.kv .txt .labelBox img { width: 7vw; height: auto; margin-right: 2vw;}

.kv .videocont {position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: auto; aspect-ratio:1/.5; background: #000;}
.kv .videocont.on {height: auto;overflow: visible; opacity: 1; transition: all .5s;}
.kv .videocont video {width: 100%; height: 100%; object-fit: cover; opacity: .55;}

.pagettl {position: relative; z-index: 1; top: 0; left: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: auto; margin-top: 4.5vw; aspect-ratio:1/.2; overflow: hidden;}
.pagettl .txt { width: auto; height: auto; text-align: center; margin: auto; color: #000;}
.pagettl .txt.w * {color: #fff;}
.pagettl .txt h1 {font-size: 200%;}
.pagettl .txt p { font-size: 100%;}
.pagettl + .section {margin-top: 0;}
.cta {position: fixed; right: 0; bottom: 4vw; width: 3.4vw; height: auto; z-index: 20;}

#canvas {position: fixed; z-index: -1; top: 0; left: 0; width: 100%; height: 100vh; opacity: 1; transition: all .5s;}
#canvas canvas {width: 100%; height: 100%; object-fit: cover;}

.footer {position: relative; z-index: 2; background: #000; padding: 3vw 3vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
.footer .left {width: 9%;}
.footer .left a {display: block; width: 90%; height: auto;}
.footer .mdl {width: 25%; padding: 0 0 0 1vw; box-sizing: border-box; border-left: solid 1px rgba(255,255,255,.4);}
.footer .mdl p {color: #fff; line-height: 1; display: block; margin-bottom: .5vw; font-size: 80%;}
.footer .mdl p:last-child {margin-bottom: 0;}
.footer .right {flex:1; padding-left: 1vw; box-sizing: border-box; display: flex; justify-content: flex-start; flex-wrap: wrap; gap:1vw 1.3vw;}
.footer .right a {position: relative; display: flex; justify-content: flex-start; align-items: center; width: 14vw; padding:0; height: auto; text-align: left; color: #fff; font-size: 90%;font-family: "andale-mono-mt-pro", sans-serif;}
.footer .right a::before {display: block; content:""; width: .8vw; height: .8vw; margin-right: .5vw; background-size: auto 100%; background: url(images/icon_boxarrow1.webp) no-repeat center center; opacity: .8;}


.whitebg {background: rgba(255,255,255,.9); position: relative; overflow: hidden;}
.whitebg .section { margin: 4vw auto;}

.section { display: block; position: relative; width: 85.4vw; margin: 6vw auto;}

.lineTtl {position: relative; color: #000; }
.lineTtl::before { display: block; position: absolute; content:""; width: 6vw; height: 1px; top: 0; bottom: 0; margin: auto; left: -7.3vw; background: rgba(0,0,0,.29);}

.whitebg .lineTtl::before { display: block; position: absolute; content:""; width: 6vw; height: 1px; top: 0; bottom: 0; margin: auto; left: -7.3vw; background: rgba(0,0,0,.29);}
.whitebg .lineTtl {position: relative; color: #222; }

.flcell { width: 100%; display: flex; justify-content: center; align-items: center; }
.flcell .left { width: 50%;}
.flcell .right { width: 50%;}

.numttl {width: fit-content; height: auto; text-align: left; display: flex; justify-content: center; align-items: center; margin: 0;}
.numttl .num { width: 2vw; font-size: 230%; margin-right: .8vw;}
.numttl .numttlmain {flex:1;}
.numttl .numttlmain h2,.numttl .numttlmain h3 { font-size: 120%; font-weight: bold; display: block; text-align: left; margin-bottom: .2vw; line-height: 1;}
.numttl .numttlmain p {line-height: 1; font-size: 90%;}

.indexsec2 .numttl {width: fit-content; height: auto; text-align: left; display: flex; justify-content: center; align-items: center; margin: 0 auto;}

.indexsec1 .left {background: url(https://craftfix.co.jp/wp-content/themes/craftfix/images/cflogo.webp) no-repeat top center; background-size: auto 100%;}
.indexsec1 .box { width: 80%; margin: 0 auto;}
.indexsec1 .box .grttl {display: block; font-size: 220%; margin-bottom: 3vw;font-weight: bold; background: linear-gradient(to right,#d41a3c 0%, #f7e800 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color:transparent;  }

.indexsec2 .flcell {margin-top: 3vw;}
.indexsec2 .left {position: relative; width: 50%; height: auto;}
.indexsec2 .left .slide { position: relative; z-index: 1; top: 0; left: 0; width: 100%; height: auto; aspect-ratio:1/.677; display: block;}
.indexsec2 .left .slide .cell {width: 100%; height: 100%; object-fit: cover;}
.indexsec2 .right { width: 50%; padding: 2vw 0 0 2vw; box-sizing: border-box;}
.indexsec2 .grttl {display: block; font-size: 220%; margin-bottom: 1vw;font-weight: bold; background: linear-gradient(to right,#d41a3c 0%, #f7e800 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color:transparent;  }
.indexsec2 .labelBox { width: 100%; display: flex; justify-content: space-between; align-items: flex-start; margin-top: 1vw;}
.indexsec2 .labelBox .cell {width: 48%; margin: 1vw; background: rgba(255,255,255,.9); padding: 1vw; box-sizing: border-box; -webkit-filter: drop-shadow(0px 0px 5px rgba(0,0,0,.1)); filter: drop-shadow(0px 0px 5px rgba(0,0,0,.1));}
.indexsec2 .labelBox .cell .labelimg {padding: 1vw 4vw 0; box-sizing: border-box;}

.solutionPanel {width: 100%; display: flex; justify-content: flex-start; flex-wrap: wrap; gap:3.9vw; margin-top: 4vw;}
.solutionPanel .cell { overflow: hidden; position: relative; display: block; width: 30%; padding: 1vw 3vw; margin: auto; text-align: center; box-sizing: border-box; border-radius: 1vw; background: rgba(255,255,255,.9); -webkit-filter: drop-shadow(0px 0px 5px rgba(0,0,0,.1)); filter: drop-shadow(0px 0px 5px rgba(0,0,0,.1));}
.solutionPanel .cell .logo {display: block; margin: 0 0 1.5vw; width: auto; height: 3vw;filter: grayscale(100%); transition: all .5s;}
.solutionPanel a.cell:hover .logo {filter: grayscale(0%); transition: all .5s;}
.solutionPanel .cell .img {display: block;margin-bottom: 1vw; aspect-ratio: 1/.56; overflow: hidden;}
.solutionPanel .cell .img img {width: 100%; height: 100%; object-fit: cover;}
.solutionPanel .cell .ttl {display: block; margin-bottom: .5vw; font-weight: bold; font-size: 110%; text-align: left; }
.solutionPanel .cell .txt {display: block; text-align: left; min-height:7em; }
.solutionPanel .txtcell {display: block; width: 65%; padding: 2vw 0 0 7vw; margin: auto; text-align: left; box-sizing: border-box;}
.solutionPanel .txtcell h2 {display: block; font-size: 330%; margin-bottom: 1vw;font-weight: bold; background: linear-gradient(to right,#d41a3c 0%, #f7e800 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color:transparent;  }
.solutionPanel .txtcell h3 {font-size: 180%; margin-bottom: 1vw;}
.solutionPanel .txtcell p {display: block; width: 70%;}

.solutionPanel .cell:after {position: absolute; top: 0; left: 0; width: .9vw; height: 100%; content:""; display: block;}
.solutionPanel .cell:nth-of-type(1):after {background: linear-gradient(to right,#fff200 0%,#fff200 50%,#0c86d0 50%, #0c86d0 100%)}
.solutionPanel .cell:nth-of-type(2):after {background: linear-gradient(to right,#da525d 0%,#da525d 50%,#00b49b 50%, #00b49b 100%)}
.solutionPanel .cell:nth-of-type(3):after {background: linear-gradient(to right,#c56127 0%,#c56127 50%,#b2b73e 50%, #b2b73e 100%)}
.solutionPanel .cell:nth-of-type(4):after {background: linear-gradient(to right,#ebd3a2 0%,#ebd3a2 50%,#c16b27 50%, #c16b27 100%)}
.solutionPanel .cell:nth-of-type(5):after {background: linear-gradient(to right,#007190 0%,#007190 50%,#0091e3 50%, #0091e3 100%)}
.solutionPanel .cell:nth-of-type(6):after {background: linear-gradient(to right,#0093a5 0%,#0093a5 50%,#f9dc65 50%, #f9dc65 100%)}
.solutionPanel .cell:nth-of-type(7):after {background: linear-gradient(to right,#f8b6ba 0%,#f8b6ba 50%,#9a72aa 50%, #9a72aa 100%)}


.linkbnr { display: flex; justify-content: flex-start; flex-wrap: wrap; gap:2vw; margin: 4vw auto;}
.linkbnr .cell {display: flex; justify-content: center; align-items: center; width: 48%; background: rgba(0,0,0,.05); padding: .3vw; box-sizing: border-box; -webkit-filter: drop-shadow(0px 0px 5px rgba(0,0,0,.1)); filter: drop-shadow(0px 0px 5px rgba(0,0,0,.1));}
.linkbnr .cell .box { display: flex; justify-content: flex-start; align-items: center; width: 100%; height: 100%; background: rgba(255,255,255,1); padding: 2vw 4vw; box-sizing: border-box;}
.linkbnr .cell .left { width: 50%; display: flex; justify-content: flex-start; align-items: center; }
.linkbnr .cell .left .icon { width: 20%; margin-right: 1vw;}
.linkbnr .cell .left .txt { width: 75%; text-align: left;}
.linkbnr .cell .left .txt .ttl { font-weight: bold; font-size: 150%; margin-bottom: .5vw; line-height: 1;}
.linkbnr .cell .left .txt .en {font-size: 90%; text-align: left; color: #222; line-height: 1;}
.linkbnr .cell .right { width: 50%; display: flex; justify-content: flex-end; align-items: center; }
.linkbnr .cell .right .icon { width: 10%;}

.indexnews { display: flex; justify-content: flex-start; align-items: flex-start;}
.indexnews .ttl { width: 20%;}
.indexnews .ttl h2 {font-size: 200%; font-weight: bold;}
.indexnews .ttl p {font-weight: bold;}
.indexnews .newsBox { width: 80%; display: flex; justify-content: flex-start; flex-wrap: wrap; gap:2vw 2%;}
.indexnews .newsBox .cell { width: 45%; display: flex; justify-content: flex-start; align-items: flex-start;}
.indexnews .newsBox .cell .img { width: 30%; margin-right: 3%;}
.indexnews .newsBox .cell .txt { width: 67%; text-align: left;}
.indexnews .newsBox .cell .txt .date {display: block; width: fit-content; color: #fff; border-radius: .5vw; text-align: center; margin-bottom: .5vw; background: linear-gradient(to right,#d41a3c 0%, #f77400 100%); overflow: hidden; padding: .3vw .5vw; line-height: 1;}
.indexnews .newsBox .cell .txt h2 { font-size: 120%; }


.corporateinformation .whitebg.imgbg { background: url(https://craftfix.co.jp/wp-content/themes/craftfix/images/bsbg.webp),rgba(255,255,255,.9); background-repeat: no-repeat; background-size: 70% auto; background-position: 86% bottom; padding-bottom: 15vw;}
.section.ci {display: flex;  justify-content: flex-start;  align-items: flex-start; padding: 7vw 0;}
.section.ci .lineTtl {width: 14.4vw;}
.section.ci .ciBox { width: 56.7vw; padding: 0; box-sizing: border-box; margin: 0; text-align: center;}
.section.ci .ciimage { width: 90%; margin-right: auto; margin-left: auto;}
.section.ci .ciBox h2 {font-size: 200%;}
.section.ci .ciBox p {display: block; width: 71%;  margin-right: auto; margin-left: auto; font-size: 110%;}
.section.ci .ciBox p:last-child {margin-bottom: 0;}

.section.greetings {display: flex; justify-content: flex-start; align-items: flex-start; padding: 2vw 0;}
.section.greetings .messageBox {position: relative; display: block; width: 82.2%; margin-left: 10%;}
.section.greetings .messageBox .left {position: absolute; z-index: 2; top: 5vw; background: rgba(0,0,0,.82); width: 55%; padding: 3vw; box-sizing: border-box;color: #fff;}
.section.greetings .messageBox .left h3 {color: #fff; font-size: 240%; margin-bottom: 2vw; padding-bottom: 1vw; border-bottom: solid 1px rgba(255,255,255,.3);  -webkit-text-stroke: 1px rgba(240, 171, 173, 0.6); text-stroke: 1px rgba(255,255,255,.6); color: rgba(0,0,0,0);}
.section.greetings .messageBox .left .messageSign { margin-top: 3vw;}
.section.greetings .messageBox .left .messageSign img { width: 18vw; height: auto; display: block; margin: 0 0 0 auto;}
.section.greetings .messageBox .right { position: relative; z-index: 1; left: 50%; top: 0; width: 50%; padding: 0; box-sizing: border-box;}

.section.cioutlineSec {display: flex;  justify-content: flex-start;  align-items: flex-start; padding: 4vw 0 0;}
.section.cioutlineSec .ciOutline {display: flex; justify-content: flex-start; flex-wrap: wrap; width: 70%; margin-left: 10%;}
.section.cioutlineSec .ciOutline .cell { width: 50%; padding: 0 0 0; box-sizing: border-box;}
.section.cioutlineSec .ciOutline .cell h2 {margin-bottom: .5vw; padding-left: .5vw; border-left: solid 4px #B41D23;}

.newslist .newsBox { display: flex; justify-content: flex-start; flex-wrap: wrap; gap:1vw 1%;}
.newslist .newsBox .cell { width: 49.5%; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; border-radius: 1vw; background: rgba(255,255,255,.9); overflow: hidden; padding: 1.5vw; box-sizing: border-box;}
.newslist .newsBox .cell .ttl { width: 100%; display: flex; justify-content: flex-start; align-items: center; margin-bottom: 1vw;}
.newslist .newsBox .cell .ttl .date {display: block; width: fit-content; color: #fff; border-radius: .5vw; text-align: center; margin: 0 1vw 0 0; background: linear-gradient(to right,#d41a3c 0%, #f77400 100%); overflow: hidden; padding: .3vw .5vw; line-height: 1;}
.newslist .newsBox .cell .ttl h2 {font-size: 140%; font-weight: bold; }
.newslist .newsBox .cell .img { width: 30%; margin-right: 3%;}
.newslist .newsBox .cell .txt { width: 67%; text-align: left;}

.section.salesoffice {display: flex; justify-content: flex-start; align-items: flex-start; padding: 4vw 0;}
.section.salesoffice .salesofficeBox {display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; width: 100%; margin-left: 5%;}
.section.salesoffice .salesofficeBox .left { width: 36%; margin-right: 4%; aspect-ratio:1/1.323;}
.section.salesoffice .salesofficeBox .left img {display: block;}
.section.salesoffice .salesofficeBox .right { width: 60%; padding: 0; box-sizing: border-box; text-align: left;}
.section.salesoffice .salesofficeBox .right h2 {font-size: 160%; font-weight: bold; margin-bottom: 1vw; padding-left: .5vw; border-left: solid 4px #B41D23;}
.section.salesoffice .salesofficeBox .map { width: 100%; margin: 3vw auto; padding: 0; box-sizing: border-box; text-align: left;}
.section.salesoffice .salesofficeBox .map iframe {width: 100%; height: 15vw; border: none;}
.section.salesoffice .salesofficeBox .subimg { width: fit-content; display: flex; justify-content: flex-start; gap: 0 .3vw;}
.section.salesoffice .salesofficeBox .subimg img { width: 33%; height: auto; display: block;;}



.newsdetail .article { width: 65%; margin: 0 auto; display: block; border-radius: 1vw; background: rgba(255,255,255,.9); overflow: hidden; padding: 3.5vw; box-sizing: border-box;}
.newsdetail .article .ttl { width: 100%; display: flex; justify-content: flex-start; align-items: center; margin-bottom: 1vw;}
.newsdetail .article .ttl .date {display: block; width: fit-content; color: #fff; border-radius: .5vw; text-align: center; margin: 0 1vw 0 0; background: linear-gradient(to right,#d41a3c 0%, #f77400 100%); overflow: hidden; padding: .3vw .5vw; line-height: 1;}
.newsdetail .article .ttl h2 {font-size: 200%; font-weight: bold; }
.newsdetail .article .img { width: 100%; margin: 1vw auto;}
.newsdetail .article .txt { width: 100%; text-align: left;}

.solutionsCell .cell {width: 100%; margin-top: 2vw;}
.solutionsCell a.cell {display: flex; justify-content: flex-start; width: 100%; border-radius: 1vw; background: rgba(255,255,255,.9); overflow: hidden;}
.solutionsCell .cell .left {width: 30%; margin-right: 5%; box-sizing: border-box; overflow: hidden;}
.solutionsCell .cell .left img { width: 100%; height: 100%; display: block; object-fit: cover;}
.solutionsCell .cell .right {width: 65%; padding: 2vw 2vw 2vw 0; box-sizing: border-box; min-height: 18vw;}
.solutionsCell .cell .right .ttl {width: fit-content; height: 3.5vw; margin-bottom: 1vw;}
.solutionsCell .cell .right p {font-size: 130%; }
.solutionsCell .cell .right .tagBox { display: flex; justify-content: flex-start; flex-wrap: wrap; width: 100%; gap: .5vw; margin-top: 1vw;}
.solutionsCell .cell .right .tagBox p { display: flex; justify-content: center; align-items: center; width: fit-content; padding: .2vw 1vw; border: solid 1px #222; border-radius: 1vw; text-align: center; color: #B41D23; font-size: 90%;}
.solutionsCell .cell .arrow {width: 4%; display: flex; justify-content: center; align-items: center; background: #F4F2F2; padding: 0 .5vw; box-sizing: border-box;}

.solutionsCell div.cell {display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; width: 100%; border-radius: 1vw; background: rgba(255,255,255,.9); overflow: hidden;}
.solutionsCell div.cell .left {width: 35%; margin-right: 4%; padding: 3vw 0 0 3vw;}
.solutionsCell div.cell .right {width: 60%; padding: 3vw 3vw 0 0; box-sizing: border-box;}

.solutionDetail {width: 80%; margin: 5vw auto; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; gap:5vw 8%;}
.solutionDetail .dcell { width: 28%; background: none;}
.solutionDetail .dcell * {color: #000;}
.solutionDetail .dcell .img { width: 28%; margin: 0 auto;}
.solutionDetail .dcell .mainttl {margin: 2vw 0 0; width: 100%; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
.solutionDetail .dcell .mainttl .num { width: 2vw; font-size: 210%; margin-right: .8vw;font-weight: bold;}
.solutionDetail .dcell .mainttl h2 {font-size: 145%;line-height: 1;}
.solutionDetail .dcell .subttl { color: #222; line-height: 1.5; margin-bottom: 1vw;}

.solutionDetailOption {width: 80%; margin: 0 auto 7vw; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
.solutionDetailOption .ttlBox {position: relative; width: 100%; display: flex; justify-content: center; align-items: center; margin: 0 auto 7vw;}
.solutionDetailOption .ttlBox::before { display: block; flex:1; content:""; width: auto; height: 1px; background: #999; margin-right: 2em;}
.solutionDetailOption .ttlBox::after { display: block; flex:1; content:""; width: auto; height: 1px; background: #999; margin-left: 2em;}
.solutionDetailOption h2 {width: fit-content; text-align: center; font-size: 170%; margin: 0 auto;}
.solutionDetailOption .solutionDetailOptionLeft {width: 40%; padding: 0 4vw 0 0; box-sizing: border-box;}
.solutionDetailOption .solutionDetailOptionLeft .ttl {width: fit-content; height: 5vw; margin-bottom: 3vw;}
.solutionDetailOption .solutionDetailOptionLeft h3,.solutionDetailOption .solutionDetailOptionLeft p { font-size: 130%; line-height: 1.5; }
.solutionDetailOption .solutionDetailOptionRight {width: 60%; box-sizing: border-box; overflow: hidden;}
.solutionDetailOption .solutionDetailOptionRight img { width: 100%; height: 100%; display: block; object-fit: cover;}

.section.servicePage {display: flex;  justify-content: flex-start;  align-items: flex-start; flex-wrap: wrap; padding: 0; margin: 8vw auto;}
.section.servicePage .lineTtl {width: 14.4vw; }
.section.servicePage .servicePageBox {display: flex; justify-content: flex-start; flex-wrap: wrap; width: 56.7vw;}
.section.servicePage .servicePageBox .flcell.rm { width: 70%; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; gap:2vw 2%;}
.section.servicePage .servicePageBox .flcell.rm * { color: #000;}
.section.servicePage .servicePageBox .flcell.rm .left { width: 49%;}
.section.servicePage .servicePageBox .flcell.rm .right { width: 49%;}
.section.servicePage .servicePageBox .flcell.rm .num { font-size: 180%; width: 3vw; height: 3vw; display: flex; justify-content: center; align-items: center; color: #fff; border-radius: 50%; overflow: hidden; background: #000;}

.section.servicePage .full { width: 63%; margin: 5vw 0 5vw 20%;}
.section.servicePage .servicePageBox.pandd .flcont { width: 100%; display: flex; justify-content: flex-start; flex-wrap: wrap; gap:3vw 0;}
.section.servicePage .servicePageBox.pandd .flcont * { color: #000;}
.section.servicePage .servicePageBox.pandd .flcont .left { width: 50%;}
.section.servicePage .servicePageBox.pandd .flcont .right { width: 45%; margin-left: 5%;}
.section.servicePage .servicePageBox.pandd .flcont .num { margin-right: .4vw; font-size: 140%; width: 2vw; height: 2vw; display: flex; justify-content: center; align-items: center; color: #fff; border-radius: 50%; overflow: hidden; background: #000;}
.section.servicePage .servicePageBox.pandd .flcont h3 {margin-bottom: 0;}
.section.servicePage .servicePageBox.pandd .flcont p {text-align: left;}
.section.servicePage .servicePageBox.pandd .flcont .mb1 {margin-bottom: .4vw;}


.section.servicePage .servicePageBox.pandd.wtxt .flcont { width: 100%; display: flex; justify-content: flex-start; flex-wrap: wrap; gap:1vw 2%;}
.section.servicePage .servicePageBox.pandd.wtxt .flcont .left,.section.servicePage .servicePageBox.pandd.wtxt .flcont .right { width: 48%; background: rgba(255,255,255,.8); padding: 2vw; box-sizing: border-box; margin: 0; }

.bspanel .solutionPanel .smt,.bspanel .solutionPanel .txtcell {display: none;}

.page .section.servicePage .grttl,.page .section.ci .ciBox .grttl {display: block; font-size: 200%; margin-bottom: 3vw;font-weight: bold; background: linear-gradient(to right,#d41a3c 0%, #f7e800 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color:transparent;  }

.section.servicePage .servicePageBox.bs {display: flex; justify-content: flex-start; width: 71vw; }
.section.servicePage .servicePageBox.bs .left {width: 60%;}
.section.servicePage .servicePageBox.bs .left p {font-size: 115%; display: block; width: 90%; line-height: 1.3;}
.section.servicePage .servicePageBox.bs .left p.l {font-weight: bold; font-size: 135%; line-height: 1.9;}
.section.servicePage .servicePageBox.bs .right {position: relative; width: 40%;}
.section.servicePage .servicePageBox.bs .right img {display: block; margin-left: 6.1vw; width: 30vw;}

.section.servicePage .servicePageBox.cs {display: flex; justify-content: flex-start; width: 90%; margin: auto; }
.section.servicePage .servicePageBox.cs .left {display: flex; justify-content: flex-start; flex-wrap: wrap; width: 100%; gap:6vw 8%; }
.section.servicePage .servicePageBox.cs .csCell {position: relative; width: 46%; padding: 2vw; background: #fff; border-radius: 2vw; box-sizing: border-box; display: flex; justify-content: flex-start; flex-wrap: wrap; overflow: hidden;}
.section.servicePage .servicePageBox.cs .csCell .headCell { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; }
.section.servicePage .servicePageBox.cs .csCell .headCell .num { position: relative; width: 12%; margin-right: 2%; aspect-ratio:1/1; overflow: hidden;}
.section.servicePage .servicePageBox.cs .csCell .headCell .ttl { width: 86%; font-size: 160%; font-weight: bold; margin-top: .5vw;}
.section.servicePage .servicePageBox.cs .csCell .headCell .ttl span { font-size: 50%; display: block;}
.section.servicePage .servicePageBox.cs .txtCell { width: 100%; margin-top: .5vw; padding-top: 1vw; border-top: dotted 1px #cacaca; min-height: 12vw;}
.section.servicePage .servicePageBox.cs .txtCell p {display: block; margin-bottom: .5vw;}
.section.servicePage .servicePageBox.cs .csCell:nth-of-type(1) { background: url(https://craftfix.co.jp/wp-content/themes/craftfix/images/csbgicon1.webp),#fff; background-repeat: no-repeat; background-size: 13vw auto; background-position: center center;}
.section.servicePage .servicePageBox.cs .csCell:nth-of-type(2) { background: url(https://craftfix.co.jp/wp-content/themes/craftfix/images/csbgicon2.webp),#fff; background-repeat: no-repeat; background-size: 13vw auto; background-position: center center;}
.section.servicePage .servicePageBox.cs .csCell:nth-of-type(3) { background: url(https://craftfix.co.jp/wp-content/themes/craftfix/images/csbgicon3.webp),#fff; background-repeat: no-repeat; background-size: 13vw auto; background-position: center center;}
.section.servicePage .servicePageBox.cs .csCell:nth-of-type(4) { background: url(https://craftfix.co.jp/wp-content/themes/craftfix/images/csbgicon4.webp),#fff; background-repeat: no-repeat; background-size: 13vw auto; background-position: center center;}

body.page-id-20 {background: #000;}
#canvas video { width: 100%; height: 100%; object-fit: cover; opacity: .3;}



form dl {width: 90%; margin-left: 10%; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; font-size: 120%;}
form dt { width: 20%; margin-bottom: 3vw;}
form dt span {color:red;}
form dd { width: 80%; margin-bottom: 3vw;}
form input[type="text"],form input[type="email"],form textarea,form select { width: 90%; padding: 1vw; box-sizing: border-box;}
form textarea {height: 7em;}
form .btnbox {text-align: center; margin: 0 auto;}
form .btnbox input {margin-right: .5vw;}
form .btnbox a {display: block; width: fit-content; margin: 1vw auto 0;}
form .btnbox button { background: #000; color: #fff; display: block; margin: 1vw auto 0; padding: 1vw; border: none;}

.maincont.businessdivision .wbg { background: #fff;}
.maincont.businessdivision .bdsectionttl { background: transparent; width: 100%; height: auto; padding: 6vw 0 0;}
.maincont.businessdivision .bdsectionttl .insideCont{ background: #222; width: 100%; height: auto; padding: 0 0 0 7.3vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
.maincont.businessdivision .bdsectionttl .icon { width: 6vw; height: 6vw; display: flex; justify-content: center; align-items: center; border-left: solid 1px rgba(255,255,255,.3); }
.maincont.businessdivision .bdsectionttl .icon img {width: 40%; height: auto; object-fit: contain;}
.maincont.businessdivision .bdsectionttl .ttlmain { color: #fff;}
.maincont.businessdivision .bdsectionttl .ttlmain h2 { font-size: 150%;}
.maincont.businessdivision .bdsectionttl .ttlmain p { font-size: 70%;}

.maincont.businessdivision .section {width: 100%; background: #fff; margin: 0; padding: 4vw 4vw 0; box-sizing: border-box; overflow: hidden;}
.maincont.businessdivision .section h2 {margin: 0 7.3vw 1vw; padding-left: 1vw; border-left: solid 4px #B41D23;}

.maincont.businessdivision .divisionsCell.full {display: block; margin: 0 7.3vw 4vw; box-sizing: border-box;}
.maincont.businessdivision .divisionsCell.full .cell {display: flex; justify-content: flex-start; align-items: flex-start; background: #fff; width: 100%; padding: 1vw; margin-bottom: 2vw; box-sizing: border-box; border-right: solid 4px #B41D23; -webkit-filter: drop-shadow(3px 3px 5px rgba(0,0,0,.1)); filter: drop-shadow(3px 3px 5px rgba(0,0,0,.1));}
.maincont.businessdivision .divisionsCell.full .cell .left {width: 17vw; margin-right: 3vw; margin-bottom: 0;}
.maincont.businessdivision .divisionsCell.full .cell .right {width: 55.9vw; padding: 1vw; box-sizing: border-box;}
.maincont.businessdivision .divisionsCell.full .cell .psnttl {position: relative; width: 100%; display: flex; justify-content: space-between; align-items: center; margin-bottom: 2vw; padding-bottom: 1vw; border-bottom: dotted 1px #cacaca;}
.maincont.businessdivision .divisionsCell.full .cell .psnttl .ttlleft {width: fit-content; text-align: left; font-size: 160%; font-weight: bold;}
.maincont.businessdivision .divisionsCell.full .cell .psnttl .ttlright {width: fit-content; text-align: right; font-size: 140%; font-weight: bold;}

.messageFromStaff {display: flex; justify-content: flex-start; gap: 0 1vw; flex-wrap: wrap;}
.messageFromStaff div {width: 48%;}
.messageFromStaff div.full {width: 100%;}
.maincont.businessdivision .divisionsCell.full .cell .right h3 { width: fit-content; padding: .2vw 1vw; text-align: center; border-radius: 1vw; border: solid 1px #cacaca; margin-bottom: .7vw; font-size: 100%; }
.maincont.businessdivision .divisionsCell.full .cell .right p {display: block; width: 100%; margin-bottom: 2vw;}
.maincont.businessdivision .divisionsCell.sub {display: flex; justify-content: flex-start; flex-wrap: wrap; width: fit-content; gap:2vw 4%; margin: 0 7.3vw 4vw; box-sizing: border-box;}
.maincont.businessdivision .divisionsCell.sub .cell {display: flex; justify-content: flex-start; align-items: flex-start; width: 48%; padding: 1vw 0 1vw 1vw; background: #fff; border-right: solid 4px #B41D23; box-sizing: border-box; -webkit-filter: drop-shadow(3px 3px 5px rgba(0,0,0,.1)); filter: drop-shadow(3px 3px 5px rgba(0,0,0,.1));}
.maincont.businessdivision .divisionsCell.sub .cell .left {width: 17vw; margin-right: 1vw; margin-bottom: 0;}
.maincont.businessdivision .divisionsCell.sub .cell .right {width: 36vw; padding-right: 1vw; box-sizing: border-box;}
.maincont.businessdivision .divisionsCell.sub .cell .psnttl {position: relative; width: 100%; display: block; margin-bottom: 2vw;}
.maincont.businessdivision .divisionsCell.sub .cell .psnttl .ttl {width: fit-content; text-align: left; font-size: 100%; font-weight: bold;}
.maincont.businessdivision .divisionsCell.sub .cell .psnttl .name {width: fit-content; text-align: right; font-size: 155%; font-weight: bold;}

.maincont.businessdivision .businessdivisionNavi { width: 90%; display: flex; justify-content: space-between; align-items: center; margin: 0 auto;}
.maincont.businessdivision .businessdivisionNavi a * {border: none!important;}
.maincont.businessdivision .businessdivisionNavi a { width: 23%; height: auto; padding: .3vw; background: rgba(255,255,255,.2); display: flex; justify-content: center; align-items: center; box-sizing: border-box; transition: all .3s; background: rgba(0,0,0,.2);}
.maincont.businessdivision .businessdivisionNavi a .containBox{ width: 100%; height: 100%; padding: 1vw; background: #fff; display: flex; box-sizing: border-box; transition: all .3s;}
.maincont.businessdivision .businessdivisionNavi a .icon { width: 8%; height: auto; padding-right: 4%; display: flex; justify-content: center; align-items: center; border-left: solid 1px rgba(255,255,255,.3); }
.maincont.businessdivision .businessdivisionNavi a .icon img {width: 100%; height: auto; object-fit: contain; filter: invert(100%); transition: all .3s;}
.maincont.businessdivision .businessdivisionNavi a .ttlmain { width: 83%; color: #000; transition: all .3s;}
.maincont.businessdivision .businessdivisionNavi a .ttlmain h2 { font-size: 115%;}
.maincont.businessdivision .businessdivisionNavi a .ttlmain p { font-size: 50%;}
.maincont.businessdivision .businessdivisionNavi a .arrow { width: 5%; height: auto; display: flex; justify-content: center; align-items: center; border-left: solid 1px rgba(255,255,255,.3); }
.maincont.businessdivision .businessdivisionNavi a .arrow img {width: 100%; height: auto; object-fit: contain; filter: invert(100%); transition: all .3s;}

.maincont.businessdivision .businessdivisionNavi a:hover { transition: all .3s; opacity: 1;}
.maincont.businessdivision .businessdivisionNavi a:hover .containBox{ background: linear-gradient(to right,#B41D23 0%, #f93137 100%); transition: all .3s;}
.maincont.businessdivision .businessdivisionNavi a:hover .ttlmain { color: #fff; transition: all .3s;}
.maincont.businessdivision .businessdivisionNavi a:hover .icon img { filter: invert(0%); transition: all .3s;}
.maincont.businessdivision .businessdivisionNavi a:hover .arrow img { filter: invert(0%); transition: all .3s;}

.maincont.supportPage .headSec h2 { font-size: 500%;}
.maincont.supportPage .headSec h3 { font-size: 160%;}
.maincont.supportPage .headSec p { display: block; width: 70%; }

.maincont.supportPage .headSubCont {display: block; width: 100%; height: 35.8vw; padding: 4vw 0 0; margin: 0 auto 10vw; background: linear-gradient(to right,#f93137 0%, #f7e800 100%);}
.maincont.supportPage .headSubCont .contentInner {width: 85.4vw; height: auto; aspect-ratio:1/.441; position: relative; margin: 0 auto; overflow: hidden;}
.maincont.supportPage .headSubCont .contentInner .ttlBox {position: absolute; z-index: 2; left: 0; bottom: 0; width: 100%; height: auto; background: rgba(0,0,0,.7); padding: 1vw 2vw; box-sizing: border-box;}
.maincont.supportPage .headSubCont .contentInner .ttlBox p {color: #fff; font-size: 150%; line-height: 1; margin-bottom: .6vw; }
.maincont.supportPage .headSubCont .contentInner .ttlBox h2 { color: #fff; font-size: 500%; line-height: 1;}
.maincont.supportPage .headSubCont .contentInner .img {position: absolute; z-index: 1; left: 0; bottom: 0; width: 100%; height: auto; aspect-ratio:1/.441; overflow: hidden;}
.maincont.supportPage .headSubCont .contentInner .ttlBox .img img {width: 100%; height: 100%; object-fit: cover;}

.maincont.supportPage .section.supportCont { display: flex; justify-content: space-between; align-items: flex-start;}
.maincont.supportPage .section.supportCont .txt {width: 40%;}
.maincont.supportPage .section.supportCont .txt .numttl { display: flex; margin-bottom: 4vw;}
.maincont.supportPage .section.supportCont .txt .numttl .num {font-size: 290%; margin-right: 2vw; color: #000; font-weight: bold;}
.maincont.supportPage .section.supportCont .txt .numttl h2 {font-size: 260%; color: #000;}
.maincont.supportPage .section.supportCont .txt .txtCont,.maincont.supportPage .section.supportCont .txt .pointCont {margin-left: 4vw; font-size: 110%;}
.maincont.supportPage .section.supportCont .txt .txtCont {margin-bottom: 7vw;}
.maincont.supportPage .section.supportCont .txt .txtCont p {margin-bottom: 2vw; line-height: 1.8;}
.maincont.supportPage .section.supportCont .txt .txtCont p:last-child {margin-bottom: 0;}
.maincont.supportPage .section.supportCont .txt .pointCont h3 {font-size: 120%; color: #B41D23; margin-bottom: .6vw;}
.maincont.supportPage .section.supportCont .txt .pointCont p {margin-bottom: 2vw;}
.maincont.supportPage .section.supportCont .txt .pointCont p:last-child {margin-bottom: 0;}
.maincont.supportPage .section.supportCont .img {width: 50%;}
.maincont.supportPage .section.supportCont .img .box { width: 100%; margin-bottom: 2vw; height: auto; aspect-ratio:1/.677; overflow: hidden;}
.maincont.supportPage .section.supportCont .img .box img img {width: 100%; height: 100%; object-fit: cover;}
.maincont.supportPage .supportcta {width: 75%; height: auto; margin: 6vw auto;}
}