@charset "utf-8";

.bold { font-weight:bold;}
.clear { clear:both;}
.al { text-align:left;}
.ar { text-align:right;}
.ac { text-align:center;}
.clearfix:after { height:0; visibility:hidden; content:"."; display:block; clear:both;}
.clearfix { _height: 1px; min-height: 1px; /*￥*//*/ height: auto; overflow: hidden; /**/}
.noteText{font-size:0.8rem;}
.smallText{font-size:0.8em;}

.menu-trigger,.menu-trigger span { display: inline-block; transition: all .4s; box-sizing: border-box;}
.menu-trigger { position: relative; width:30px; height:21px;}
.menu-trigger span { position:absolute; left:0; width:100%; height:1px; background-color:#6D3C17;}
.menu-trigger span:nth-of-type(1) { top:0;}
.menu-trigger span:nth-of-type(2) { top:10px;}
.menu-trigger span:nth-of-type(3) { bottom:0;}
.menu-trigger.active span{background-color:#fff;}
.menu-trigger.active span:nth-of-type(1) { -webkit-transform: translateY(10px) rotate(-45deg); transform: translateY(10px) rotate(-45deg);}
.menu-trigger.active span:nth-of-type(2) { opacity:0;}
.menu-trigger.active span:nth-of-type(3) { -webkit-transform: translateY(-10px) rotate(45deg); transform: translateY(-10px) rotate(45deg);}

* { -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:rgba(0, 0, 0, 0);}
body {font-family:"ヒラギノ角ゴ ProN W3", "ヒラギノ角ゴ Pro W3", "ヒラギノ角ゴ W3", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "メイリオ", "Meiryo", "verdana", sans-serif; text-align: center; background: #fff; font-feature-settings: "palt"; line-height:1.7; color:#000; letter-spacing:0.1em;}
img{ border:none; vertical-align:middle; max-width:100%;}
img{ width:auto\9; height:auto\9;}
svg{ vertical-align:middle; max-width:100%;}
svg{ width:auto\9; height:auto\9;}
section{ overflow-x: hidden;}

.mincho{font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3","ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝","ＭＳ 明朝", serif;}
a{ text-decoration: none;}
a:hover{ text-decoration: none;}
header, footer, nav, section, article, aside, h1, h2, h3, h4, h5, h6, div, p, dl, dt, dd, table, th, td, a,li { box-sizing: border-box;}




#opening{ position:fixed; top:0; left:0; width:100%; height:100%; background:#fff; z-index:10100;}
#openingInner{ position:absolute; top:30%; left:50%; transform: translate(-50%,-50%); width:100%;}
#openingSlogan{ font-size:1.8rem; font-weight:bold; opacity:0; transform: scale(0.5); transform-origin: bottom center;}
#openingSlogan.animeOn{animation:openingAnime1 .75s ease-in 0s 1 normal forwards;}
#openingSlogan img{ width:auto; height:80px; opacity:0; transform: scale(0.5); transform-origin: bottom center;}
#openingSlogan img.animeOn{animation:openingAnime1 .75s ease-in 0s 1 normal forwards;}
#openingLogo{ margin-top:2rem;}
#openingLogo img{ width:auto; height:140px; opacity:0; transform: scale(0.5); transform-origin: center center;}
#openingLogo img.animeOn{animation:openingAnime1 .75s ease-in .75s 1 normal forwards;}

@keyframes openingAnime1 {
  0%{ opacity:0; transform: scale(0.5);}
  100%{ opacity:1; transform: scale(1);}
}

.pageCover{ overflow-x:hidden;}
.roundBtn{ line-height:1; padding:1rem 2rem; background:#6D3C17; border-radius:100px; color:#fff;}
.roundBtn:hover{background:hsl(26, 65%, 36%);}

.turnupAnime{opacity:0; filter: blur(10px);transform:translate(0,-2rem);}
.turnupAnime.animeOn{ animation:fadeInBlur .75s linear calc(var(--index) * 0.5s) 1 normal forwards;}
@keyframes fadeInBlur {
  0%{ opacity:0; filter: blur(10px);transform:translate(0,-2rem);}
  100%{ opacity:1; filter: blur(0px);transform:translate(0,0);}
}

@media only screen and (max-width : 800px) {
#openingSlogan{ font-size:1.2rem;}
#openingLogo img{ height:120px;}
.roundBtn{ font-size:0.8rem;}
}




#headerWrapper{ padding:2rem 0 2rem; background:#fff;}
#headerInner{ text-align:left; max-width:1080px; margin:0 auto; display:flex; justify-content:space-between; gap:2rem; align-items: center;}
#headerInner h1 img{ width:auto; height:100px;}
#gNavWrapper{ opacity:0; transform: translate(0,-1rem); transition: all .5s; display:flex; justify-content:space-between; gap:4rem; align-items: center;}
#gNavWrapper.on{opacity:1; transform: translate(0,0);}

#gNav > li{ display:inline-block; padding:0 0 0 2rem;}
#gNav > li a{ line-height:1; font-weight:bold; position:relative; display:inline-block;}
#gNav > li a:hover{ color: #6D3C17;}
#gNav > li a::after{ content:""; height:1px; width:100%; background:#6D3C17; position: absolute; bottom:-10px; left:0; transition: all .5s;transform: scaleX(0);}
#gNav > li a:hover::after{ transform: scaleX(1);}
#gNav > li a.current{ color: #6D3C17;}
#gNav > li a.current::after{ transform: scaleX(1);}
#hamburger{ position:fixed; top:10px; right:10px; display:block; z-index:10000;}

#gNavWrapper--sp{ display:block; transform: translate(110%,0); transition: all .5s; background:#6D3C17; position:fixed; right:0; top:0; width:280px; padding:2rem; z-index:9990;}
#gNavWrapper--sp.on{ transform: translate(0,0);}
#gNav--sp li{ margin:0 0 2rem;}
#gNav--sp li a{ color:#fff;}
#gNav--sp li a.spMailBtn{ background: #fff; display:block;color: #6D3C17; text-align: center; font-weight: bold;}
#gNav--sp li a.spMailBtn span{ display: inline-block; padding:0 0 0 2rem; background:url(img/icon_mail_brown.svg) 0 center no-repeat; background-size:1rem;}

@media only screen and (max-width : 1080px) {
#headerWrapper{ padding:2rem 1rem 2rem;}
#gNavWrapper{ gap:2rem;}
#gNav > li{ padding:0 0 0 1rem;}
}

@media only screen and (max-width : 940px) {
#headerWrapper{ padding:1rem 1rem;}
#headerInner{ display: block;}
#headerInner h1 img{height:80px;}
#gNavWrapper{ display:none;}
}




#footerWrapper{ margin-top:8rem;}
#footerInner{text-align:left; max-width:1080px; margin:0 auto; display:flex; justify-content:space-between; gap:2rem; align-items: center; padding:0 0 4rem;}
#footerLogo img{ width:auto; height:100px;}
#footerAddress{ color:#6D3C17; display: flex; justify-content: flex-start; align-items:flex-end; gap:2rem;}
#footerAddress dd{ font-size:0.8rem;margin-top:5px;}
#footerAddress img{ height:2rem; width:auto;}
.keyColorBlock{ background:#6D3C17; padding:1rem 0;}
#copyRight{ color:#fff; font-size:0.75rem; letter-spacing:0;}

@media only screen and (max-width : 1080px) {
  #footerInner{padding:0 1rem 4rem;}
}

@media only screen and (max-width : 800px) {
#footerWrapper{ margin-top:4rem;}
#footerInner{display:block;}
#footerLogo img{ height:80px;}
#footerAddress{ margin:2rem 0; gap:1rem;}
#footerAddress dt{ font-size:0.8rem;}
}




.spOnly{ display:none;}
@media only screen and (max-width : 800px) {
.pcOnly{ display:none;}
.spOnly{ display:block;}
}




.mainWrapper{ height:480px; margin:0 auto; background:#efefef url(img/main__pc.jpg) center center no-repeat; background-size:cover;}
.mainInner{  max-width:1080px; width:100%; height:100%; text-align: left; margin:0 auto; position:relative;}
.mainBox{ position:absolute; top:calc(50% - 3rem); left:0; transform: translate(0,-50%);}
.mainInner h2{ margin:2rem 0 0; font-size:1.4rem; font-weight: bold; line-height:1.2; color:#333;}
.mainTitle{ font-size:3.2rem; font-weight: bold; line-height:1.2;}

#mainContentsNav{ max-width:860px; width:100%; gap:1rem; margin:-6rem auto 0; display:flex; justify-content: space-between; align-items:center; position:relative; z-index:9900;}
#forCompaniesBtn{flex-basis:50%; background:url(img/nav_main1__pc.jpg) center center no-repeat; background-size: cover; box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);}
#forEngineersBtn{flex-basis:50%; background:url(img/nav_main2__pc.jpg) center center no-repeat; background-size: cover; box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);}

#forCompaniesBtn a{display:block; height:280px; padding:2rem; text-align: left; position:relative;}
#forCompaniesBtn a > svg{ position:absolute; bottom:0; right:0; width:2rem; height:2rem;}
#forCompaniesBtn dt{color:#FF9C02; letter-spacing:0; margin-bottom:10px; position:relative;}
#forCompaniesBtn dd{transition: all .5s;font-weight:bold; font-size:1.4rem; line-height:1.4; transform-origin: 0 0; position:relative;}
#forCompaniesBtn a::before{content:""; position: absolute; top:0; left:0; height:100%; width:100%; background:rgba(255,255,255,0); transition: all .5s;}
#forCompaniesBtn a:hover::before{background:rgba(255,255,255,0.4);mix-blend-mode:screen;}
#forCompaniesBtn a:hover dd{transform: scale(1.1);}

#forEngineersBtn a{  display:block; height:280px; padding:2rem; text-align: left; position:relative;}
#forEngineersBtn a > svg{ position:absolute; bottom:0; right:0; width:2rem; height:2rem;}
#forEngineersBtn dt{color:#FF9C02; letter-spacing:0; margin-bottom:10px; position:relative;}
#forEngineersBtn dd{transition: all .5s;font-weight:bold; font-size:1.4rem; line-height:1.4; transform-origin: 0 0; position:relative;}
#forEngineersBtn a::before{content:""; position: absolute; top:0; left:0; height:100%; width:100%; background:rgba(255,255,255,0); transition: all .5s;}
#forEngineersBtn a:hover::before{background:rgba(255,255,255,0.4);mix-blend-mode:screen;}
#forEngineersBtn a:hover dd{transform: scale(1.1);}

@media only screen and (max-width : 1080px) {
.mainWrapper{ padding:0 1rem;}
}

@media only screen and (max-width : 800px) {
.mainWrapper{ height:280px; background:#efefef url(img/main__sp.jpg) center center no-repeat;background-size:cover;}
.mainInner h2{ margin:2rem 0 0; font-size:1.0rem;}
.mainTitle{ font-size:1.4rem;}
.mainBox{top:50%;}

#mainContentsNav{ gap:4px; margin:4px auto 0;}
#forCompaniesBtn{ background:url(img/nav_main1__sp.jpg) center center no-repeat; background-size: cover;box-shadow:none;}
#forEngineersBtn{ background:url(img/nav_main2__sp.jpg) center center no-repeat; background-size: cover;box-shadow:none;}

#forCompaniesBtn a{ height:240px; padding:1rem 0.5rem;}
#forEngineersBtn a{ height:240px; padding:1rem 0.5rem;}
#forCompaniesBtn dt{font-size:0.8rem;}
#forCompaniesBtn dd{font-size:1rem;}
#forEngineersBtn dt{font-size:0.8rem;}
#forEngineersBtn dd{font-size:1rem;}
}

@media only screen and (max-width : 400px) {
#forCompaniesBtn a{ height:160px; padding:1rem 0.5rem;}
#forEngineersBtn a{ height:160px; padding:1rem 0.5rem;}
}



.baseMargin{overflow:hidden; margin:8rem auto 0;}

.baseContentBlock{max-width:1080px; width:100%; margin:0 auto;}
.flex{ display:flex; justify-content: space-between; align-items: center;}
.gap4{ gap:4rem;}

#aboutusPhotoBlock{ position:relative; flex-basis:50%; height:640px;}
#aboutusPhotoBlock::before{ content:""; position: absolute; top:0; right:0; height:200%; width:100%; background:url(img/top_aboutus__pc.jpg) right top no-repeat; background-size:contain;}
#aboutusPhotoBlock::after{content:""; position: absolute; top:0; right:0; height:100%; width:100%; background:#fff right top no-repeat; transition: all 2s;}
#aboutusPhotoBlock.animeOn::after{ transform: translate(-200%,0);}

.secContentBlock{ text-align: left; flex-basis:50%;}
.secContentBlock p{ font-size:1rem; margin:2rem 0;}

.secTitle .eng{color:#FF9C02; font-weight: bold; letter-spacing:0; display: block; font-size:1rem; margin-bottom:10px;}
.secTitle .jpn{font-weight:bold; font-size:1.8rem; line-height:1.4; display: block;}

.nextAboutusBtnBlock{ text-align: right; margin-top:4rem;}
.nextAboutusBtnBlock img{ height:2rem; width:auto;}
.nextAboutusBtnBlock svg{ height:2rem; width:auto;}
.nextAboutusBtnBlock svg:hover circle{fill:hsl(26, 65%, 36%);}

@media only screen and (max-width : 800px) {
.baseMargin{margin:4rem auto 0;}
.flex.spOneColumn{ flex-direction: column; padding:0 1rem}
.gap4{ gap:2rem;}

#aboutusPhotoBlock{ flex-basis:auto; width:100%; height:280px; overflow: hidden; display:none;}
#aboutusPhotoBlock::before{ height:100%; background:url(img/top_aboutus__sp.jpg) center top no-repeat; background-size:contain;}

.secContentBlock p{ font-size:0.8rem; margin:1rem 0;}
.secTitle .eng{font-size:0.8rem;}
.secTitle .jpn{font-size:1.0rem;}
.nextAboutusBtnBlock{ margin-top:1rem;}
}




.workObjBox{ margin:2rem 0 0;}
.workObjBox img{ height:2rem; width:auto;}

.genreList{ margin:2rem auto 0;max-width:calc(1080px - 2rem); width:100%;}
.genreList > li{ display:inline-block; vertical-align:top; width:25%; padding:0 1rem 0;}
.genreBox{ border:1px solid #ccc; height:320px; position:relative;}
.genreBox h3{ line-height:1.4; padding:1rem 2rem; text-align: left; font-weight: bold; font-size:1rem;}

#genre1::after{ content:""; position: absolute; bottom:0; left:0; width:100%; height:calc(100% - 4.8rem); background:url(img/top_genre1__pc.jpg) center center no-repeat; background-size:cover;}
#genre2::after{ content:""; position: absolute; bottom:0; left:0; width:100%; height:calc(100% - 4.8rem); background:url(img/top_genre2__pc.jpg) center center no-repeat; background-size:cover;}
#genre3::after{ content:""; position: absolute; bottom:0; left:0; width:100%; height:calc(100% - 4.8rem); background:url(img/top_genre3__pc.jpg) center center no-repeat; background-size:cover;}
#genre4::after{ content:""; position: absolute; bottom:0; left:0; width:100%; height:calc(100% - 4.8rem); background:url(img/top_genre4__pc.jpg) center center no-repeat; background-size:cover;}

.bgGray{ background-color:#F2F2F2;}
.matchingInner{ padding:4rem 2rem;max-width:1080px; width:100%; margin:0 auto; text-align: left;}
.matchingTextBox{margin:1.4rem 0 0;}
.matchingList{margin:2rem 0 0;}
.matchingList > li{ display:inline-block; padding:0 1rem 0 0;}
.matchingList > li > div{ background:#fff; line-height:1; padding:1rem 2rem; border-radius:100px; border:#ccc 1px solid;}

@media only screen and (max-width : 800px) {
.workObjBox{ margin:1rem 0 0;}
.workObjBox img{ height:1.6rem;}

.genreList{ padding:0 0.5rem;}
.genreList > li{ width:50%; padding:0 0.5rem 1rem;}
.genreBox{ height:280px;}
.genreBox h3{ padding:1rem 1rem; font-size:0.8rem;}

#genre1::after{ height:calc(100% - 4.2rem);background:url(img/top_genre1__sp.jpg) center center no-repeat; background-size:cover;}
#genre2::after{ height:calc(100% - 4.2rem);background:url(img/top_genre2__sp.jpg) center center no-repeat; background-size:cover;}
#genre3::after{ height:calc(100% - 4.2rem);background:url(img/top_genre3__sp.jpg) center center no-repeat; background-size:cover;}
#genre4::after{ height:calc(100% - 4.2rem);background:url(img/top_genre4__sp.jpg) center center no-repeat; background-size:cover;}

.matchingInner{ padding:4rem 1rem;}
.matchingTextBox{font-size:0.8rem;margin:1rem 0 0;}
.matchingList > li{ padding:0 0.5rem 0.5rem 0;}
.matchingList > li > div{ padding:1rem 1rem; font-size:0.8rem;}
}
@media only screen and (max-width : 400px) {
.genreBox{ height:200px;}
}




.caseBannerBtn{ max-width:1080px; width:100%; height:320px; display:block; text-align:left; margin:0 auto; border-radius:8px; background:url(img/case_banner__pc.jpg) center 30% no-repeat; background-size: cover; border:1px solid #ccc; position:relative;}
.caseBannerInner{ position:absolute; top:50%; left:2rem; transform: translate(0,-50%);}
.caseTextBox{ margin:1rem 0 0;}
.nextCaseBtnBlock{ margin:1rem 0 0 0; transition: all .5s;}

.caseBannerBtn:hover .nextCaseBtnBlock{margin:1rem 0 0 1rem;}

@media only screen and (max-width : 800px) {
.caseBannerBtn{ width:calc(100% - 2rem); margin:0 1rem; height:240px; background:url(img/case_banner__sp.jpg) left top no-repeat; background-size: cover;}
.caseBannerInner{ left:1rem;}
.caseTextBox{
font-size:0.8rem;
background: rgba(242, 242, 242, 0.8);
padding: 0.25em 0.5em;
/*
text-shadow:
1px 0 0 rgba(255, 255, 255,0.5),
1px 1px 0 rgba(255, 255, 255,0.5),
0 1px 0 rgba(255, 255, 255,0.5),
-1px 1px 0 rgba(255, 255, 255,0.5),
-1px 0 0 rgba(255, 255, 255,0.5),
-1px -1px 0 rgba(255, 255, 255,0.5),
0 -1px 0 rgba(255, 255, 255,0.5),
1px -1px 0 rgba(255, 255, 255,0.5);
*/
}
}




.contactInner{padding:4rem 2rem;max-width:1080px; width:100%; margin:0 auto;}
.contactTextBox{ margin:1.4rem 0 0;}

.contactBtnList{ display:flex; justify-content: space-between; gap:2rem; align-items:center; margin:2rem 0 0;}
.contactBtnList > li{ flex-basis:50%;}
.contactBtnList > li div{ padding:2rem;}

.forCompaniesContactBtn{ background:#fff; border-radius:8px;}
.forCompaniesContactBtn dt img{ height:1.2rem; width:auto;}
.forCompaniesContactBtn dd{font-weight:bold; font-size:1.2rem; margin-top:5px;}
.forCompaniesContactBtn a{line-height:1; padding:1rem 2rem; background:#6D3C17; border-radius:100px; color:#fff; margin:1rem 0 0; display:inline-block; width:360px;}
.forCompaniesContactBtn a:hover{background:hsl(26, 65%, 36%);}

.forEngineerContactBtn{ background:#fff; border-radius:8px;}
.forEngineerContactBtn dt img{ height:1.2rem; width:auto;}
.forEngineerContactBtn dd{font-weight:bold; font-size:1.2rem; margin-top:5px;}
.forEngineerContactBtn a{line-height:1; padding:1rem 2rem; background:#FF9C04; border-radius:100px; color:#fff; margin:1rem 0 0; display:inline-block; width:360px;}
.forEngineerContactBtn a:hover{background:hsl(36, 100%, 61%);}

@media only screen and (max-width : 800px) {
  .contactTextBox{ margin:1rem 0 0; font-size:0.8rem;}
  .contactBtnList{ gap:2rem; margin:2rem auto 0; flex-direction: column;}
  .contactBtnList > li{ flex-basis:100%;}
  .forCompaniesContactBtn a{padding:1rem 1rem; width:280px; font-size:0.8rem; letter-spacing:0;}
  .forEngineerContactBtn a{padding:1rem 1rem; width:280px; font-size:0.8rem; letter-spacing:0;}

  .forCompaniesContactBtn dd{font-size:1.0rem;}
  .forEngineerContactBtn dd{font-size:1.0rem;}
}




.lowerMainWrapper{ height:380px; margin:0 auto; background:#fff;}
.lowerMainWrapper.forcompanies{ background:url(img/for-companies_main__pc.jpg) 65% center no-repeat; background-size: contain;}
.lowerMainWrapper.forengineers{ background:url(img/for-engineers_main__pc.jpg) 65% center no-repeat; background-size: contain;}
.lowerMainWrapper.aboutus{ background:url(img/aboutus_main__pc.jpg) center center no-repeat; background-size: cover;}

.lowerMainInner{  max-width:1080px; width:100%; height:100%; text-align: left; margin:0 auto; position:relative; position:relative;}
.lowerMainBox{ position:absolute; top:50%; left:0; transform: translate(0,-50%); width:100%;}
.lowerMainEng{color:#FF9C02; letter-spacing:0; font-weight:bold; margin-bottom:10px;}
.lowerMainTitle{ font-size:1.8rem; font-weight: bold; line-height:1.4;}
.lowerMainWrapper.aboutus .lowerMainTitle{ color:#fff;}

.lowerMainText{ margin:1.4rem 0 0; width:40%;}

.leadWrapper h2{font-size:1.8rem; font-weight: bold; line-height:1.4;}
.leadTextBox{margin: 1.4rem auto 0; max-width:720px;}

@media only screen and (max-width : 800px) {
.lowerMainBox{ left:1rem; width:calc(100% - 2rem);}
.lowerMainEng{font-size:0.8rem;}
.lowerMainTitle{ font-size:1.2rem;}
.lowerMainText{ margin:1rem 0 0; width:100%;font-size:0.8rem;
background:rgba(242, 242, 242,0.8); padding:0.25em 0.5em;
}

.leadWrapper{ padding:0 1rem;}
.leadWrapper h2{font-size:1.0rem;}
.leadTextBox{margin:1rem auto 0; font-size:0.8rem;}
.leadTextBox br{ display:none;}
}




.serviceListWrapper{ margin:4rem auto 0; max-width:1080px; width:100%;}
.serviceListWrapper > ul > li{ display:flex; justify-content: space-between; align-items: center; gap:4rem; margin:2rem 0 0;}
.serviceListWrapper > ul > li > div.orderImageLeft{ flex-basis:50%; order:2;}
.serviceListWrapper > ul > li > div.orderTextRight{ flex-basis:50%; order:1;}

.serviceListWrapper > ul > li > div.orderImageRight{ flex-basis:50%; order:1;}
.serviceListWrapper > ul > li > div.orderTextLeft{ flex-basis:50%; order:2;}

.serviceListWrapper > ul > li > div{ text-align: left;}
.serviceListWrapper > ul > li > div h3{font-size:1.4rem; font-weight: bold;}
.serviceListWrapper > ul > li > div .serviceDetail{font-size:1rem; margin:1.4rem 0 0;}
.serviceListWrapper > ul > li > div a{ display:inline-block; line-height:1; padding:1rem 2rem; background:#6D3C17; border-radius:100px; color:#fff; margin: 1.4rem 0 0;}
.serviceListWrapper > ul > li > div a:hover{background:hsl(26, 65%, 36%);}

.serviceStepWrapper{ margin:4rem auto 0; max-width:1080px; width:100%; border:1px solid #ccc; padding:1rem; text-align:left;}
.serviceStepWrapper h2{font-size:1.4rem; font-weight: bold;}
.serviceStepWrapper > ol{ margin:2rem 0 0; display:flex; flex-wrap: wrap; gap:1rem;}
.serviceStepWrapper > ol > li{flex: 1 1 160px; max-width: 160px; border:1px solid #ccc; padding:1rem; position:relative;}

.serviceStepWrapper > ol > li:nth-child(1)::after{ content:"STEP01"; position: absolute; left:0; top:-1.7em; font-size:0.75rem; letter-spacing:0; font-weight: bold;}
.serviceStepWrapper > ol > li:nth-child(2)::after{ content:"STEP02"; position: absolute; left:0; top:-1.7em; font-size:0.75rem; letter-spacing:0; font-weight: bold;}
.serviceStepWrapper > ol > li:nth-child(3)::after{ content:"STEP03"; position: absolute; left:0; top:-1.7em; font-size:0.75rem; letter-spacing:0; font-weight: bold;}
.serviceStepWrapper > ol > li:nth-child(4)::after{ content:"STEP04"; position: absolute; left:0; top:-1.7em; font-size:0.75rem; letter-spacing:0; font-weight: bold;}
.serviceStepWrapper > ol > li:nth-child(5)::after{ content:"STEP05"; position: absolute; left:0; top:-1.7em; font-size:0.75rem; letter-spacing:0; font-weight: bold;}
.serviceStepWrapper > ol > li:nth-child(6)::after{ content:"STEP06"; position: absolute; left:0; top:-1.7em; font-size:0.75rem; letter-spacing:0; font-weight: bold;}

.serviceStepWrapper > ol > li dl{ font-size:0.8rem; text-align: center; margin-top:1.7em;}
.serviceStepWrapper > ol > li:nth-child(1) dl{ margin-top:0;}
.serviceStepWrapper > ol > li dl dt{ margin-bottom:1em;}
.serviceStepWrapper > ol > li dl dt span{ display:block;}
.serviceStepWrapper > ol > li dl dt span::before{ content:"| "; font-weight: normal;}
.serviceStepWrapper > ol > li dl dt span::after{ content:" |"; font-weight: normal;}

.missionInner{ padding:4rem 2rem;max-width:1080px; width:100%; margin:0 auto; text-align: left;}
.missionTextBox{margin:1.4rem 0 0;}

.casestudyBannerBtn{ max-width:1080px; width:100%; height:280px; display:block; text-align:left; margin:0 auto; border-radius:8px; background:url(img/xxx_casebtn.jpg) center center no-repeat; background-size: cover; border:1px solid #ccc; position:relative;}
.casestudyBannerInner{ position:absolute; top:50%; left:2rem; transform: translate(0,-50%);}
.casestudyTextBox{ margin:1rem 0 0;}
.nextCasestudyBtnBlock{ margin:1rem 0 0;}

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

.lowerMainWrapper{ height:200px;}
.lowerMainWrapper.forcompanies{ background:url(img/for-companies_main__pc.jpg) 60px 0 no-repeat; background-size: cover;}
.lowerMainWrapper.forengineers{ background:url(img/for-engineers_main__pc.jpg) center center no-repeat; background-size: cover;}

.serviceListWrapper > ul > li{ flex-direction:column; gap:1rem;}
.serviceListWrapper > ul > li > div.orderImageLeft{ flex-basis:auto; order:1; padding:0 1rem;}
.serviceListWrapper > ul > li > div.orderTextRight{ flex-basis:auto; order:2; padding:0 1rem;}
.serviceListWrapper > ul > li > div.orderImageRight{ flex-basis:auto; order:1; padding:0 1rem;}
.serviceListWrapper > ul > li > div.orderTextLeft{ flex-basis:auto; order:2; padding:0 1rem;}

.serviceListWrapper > ul > li > div h3{font-size:1.0rem;}
.serviceListWrapper > ul > li > div .serviceDetail{font-size:0.8rem; margin:1rem 0 0;}
.serviceListWrapper > ul > li > div a{ font-size:0.8rem; margin: 1rem 0 0;}

.serviceStepWrapper h2{font-size:1.0rem;}
.serviceStepWrapper > ol > li{margin-bottom:1rem;}

.missionTextBox{font-size:0.8rem;margin:1rem 0 0;}

.casestudyBannerBtn{ width:calc(100% - 2rem); margin:0 1rem; height:240px;}
.casestudyBannerInner{ left:1rem;}
.casestudyTextBox{ font-size:0.8rem;}
}




.engineerListWrapper{ margin:4rem auto 0; max-width:1080px; width:100%;}
.engineerListWrapper > ul > li{ margin:2rem 0 0;}
.engineerListWrapper > ul > li:nth-child(odd) h3{font-size:1.4rem; font-weight: bold; text-align:left; position:relative;}
.engineerListWrapper > ul > li:nth-child(odd) h3::after{ content:""; position:absolute; top:50%; right:0; background:#FF9C04; height:2px; transform: translate(0,-50%);}
.engineerListWrapper > ul > li:nth-child(even) h3{font-size:1.4rem; font-weight: bold; text-align:right; position:relative;}
.engineerListWrapper > ul > li:nth-child(even) h3::after{ content:""; position:absolute; top:50%; left:0; background:#FF9C04; height:2px; transform: translate(0,-50%);}

.engineerListWrapper > ul > li:nth-child(1) h3::after{ width:calc(100% - 18em);}
.engineerListWrapper > ul > li:nth-child(2) h3::after{ width:calc(100% - 16em);}
.engineerListWrapper > ul > li:nth-child(3) h3::after{ width:calc(100% - 15em);}

.engineerBox{ display:flex; justify-content: space-between; gap:4rem; margin:1rem 0 0;}
.engineerBox .orderImageLeft{ flex-basis:50%; order:2;}
.engineerBox .orderTextRight{ flex-basis:50%; order:1; text-align: left;}

.engineerBox .orderImageRight{ flex-basis:50%; order:1;}
.engineerBox .orderTextLeft{ flex-basis:50%; order:2; text-align: left;}

.engineerStepWrapper{ margin:4rem auto 0;}
.engineerStepWrapper h2{font-size:1.4rem; font-weight: bold;}
.engineerStepWrapper > ol{ margin:2rem auto 0; display:flex; flex-wrap: wrap; max-width:1080px; width:100%;}
.engineerStepWrapper > ol > li{flex: 1 1 216px; max-width: 216px; padding:3rem 1rem 1rem; position:relative;}

.engineerStepWrapper > ol > li:nth-child(1){ background:#AFE3ED;}
.engineerStepWrapper > ol > li:nth-child(2){ background:#EAF1FC;}
.engineerStepWrapper > ol > li:nth-child(3){ background:#E5F6FF;}
.engineerStepWrapper > ol > li:nth-child(4){ background:#E3FEFF;}
.engineerStepWrapper > ol > li:nth-child(5){ background:#BBE2F7;}

.engineerStepWrapper > ol > li:nth-child(1)::after{ content:"STEP01"; position:absolute; top:1rem; left:50%; transform: translate(-50%,0);font-size:0.75rem; letter-spacing:0; font-weight: bold;}
.engineerStepWrapper > ol > li:nth-child(2)::after{ content:"STEP02"; position:absolute; top:1rem; left:50%; transform: translate(-50%,0);font-size:0.75rem; letter-spacing:0; font-weight: bold;}
.engineerStepWrapper > ol > li:nth-child(3)::after{ content:"STEP03"; position:absolute; top:1rem; left:50%; transform: translate(-50%,0);font-size:0.75rem; letter-spacing:0; font-weight: bold;}
.engineerStepWrapper > ol > li:nth-child(4)::after{ content:"STEP04"; position:absolute; top:1rem; left:50%; transform: translate(-50%,0);font-size:0.75rem; letter-spacing:0; font-weight: bold;}
.engineerStepWrapper > ol > li:nth-child(5)::after{ content:"STEP05"; position:absolute; top:1rem; left:50%; transform: translate(-50%,0);font-size:0.75rem; letter-spacing:0; font-weight: bold;}

.engineerStepWrapper > ol > li:nth-child(1)::before{ background:#AFE3ED; content:""; width:1rem; height:1rem; position: absolute; right:-0.5rem; top:50%; transform: translate(0,-50%) rotate(45deg); z-index:8900;}
.engineerStepWrapper > ol > li:nth-child(2)::before{ background:#EAF1FC; content:""; width:1rem; height:1rem; position: absolute; right:-0.5rem; top:50%; transform: translate(0,-50%) rotate(45deg); z-index:8900;}
.engineerStepWrapper > ol > li:nth-child(3)::before{ background:#E5F6FF; content:""; width:1rem; height:1rem; position: absolute; right:-0.5rem; top:50%; transform: translate(0,-50%) rotate(45deg); z-index:8900;}
.engineerStepWrapper > ol > li:nth-child(4)::before{ background:#E3FEFF; content:""; width:1rem; height:1rem; position: absolute; right:-0.5rem; top:50%; transform: translate(0,-50%) rotate(45deg); z-index:8900;}

.engineerStepWrapper > ol > li dl{font-size:0.8rem; text-align: center; position:relative; z-index:8999;}
.engineerStepWrapper > ol > li dl dt{ margin-bottom:1em;}
.engineerStepWrapper > ol > li dl dt span{ display:block;}
.engineerStepWrapper > ol > li dl dt span::before{ content:"| "; font-weight: normal;}
.engineerStepWrapper > ol > li dl dt span::after{ content:" |"; font-weight: normal;}

.offerBox{ margin:4rem auto 0;}
.offerBox a{ display:inline-block; line-height:1; padding:1rem 2rem; background:#FF9C04; border-radius:100px; color:#fff;}
.offerBox a:hover{background:hsl(36, 100%, 61%);}
.offerComment{font-size:1.4rem; font-weight: bold; margin:1rem auto 0;}

@media only screen and (max-width : 800px) {
.engineerListWrapper > ul > li:nth-child(odd) h3{font-size:1.0rem; padding-left:1rem;}
.engineerListWrapper > ul > li:nth-child(even) h3{font-size:1.0rem; padding-right:1rem;}

.engineerBox{ flex-direction:column; gap:1rem;}
.engineerBox .orderImageLeft{ flex-basis:auto; order:1; padding:0 1rem;}
.engineerBox .orderTextRight{ flex-basis:auto; order:2; font-size:0.8rem; padding:0 1rem;}
.engineerBox .orderImageRight{ flex-basis:auto; order:1; padding:0 1rem;}
.engineerBox .orderTextLeft{ flex-basis:auto; order:2; font-size:0.8rem; padding:0 1rem;}

.engineerStepWrapper h2{font-size:1.0rem;}
.engineerStepWrapper > ol > li{flex: 1 1 180px; max-width: 180px;}

.offerBox{ margin:2rem auto 0;}
.offerBox a{ font-size:0.8rem;}
.offerComment{font-size:0.8rem;}
}

@media only screen and (max-width : 600px) {
.engineerStepWrapper > ol > li{flex: 1 1 50%; max-width: none;}
.engineerStepWrapper > ol > li:nth-child(1)::before{ content:none;}
.engineerStepWrapper > ol > li:nth-child(2)::before{ content:none;}
.engineerStepWrapper > ol > li:nth-child(3)::before{ content:none;}
.engineerStepWrapper > ol > li:nth-child(4)::before{ content:none;}
}




.howtoStartWrapper h2{ position:relative;font-size: 1.4rem; font-weight: bold;}
.howtoStartWrapper h2::before{content:""; position:absolute; top:50%; left:50%; background:#FF9C04;width:300px; height:2px; transform: translate(80%,-50%);}
.howtoStartWrapper h2::after{content:""; position:absolute; top:50%; right:50%; background:#FF9C04;width:300px; height:2px; transform: translate(-80%,-50%);}

.howtoStartWrapper h2 span::before{content:"\\ ";}
.howtoStartWrapper h2 span::after{content:" /";}

.howtoStartWrapper > ol{ margin:2rem auto 0; display:flex; gap:1rem; justify-content:space-between; max-width:1080px; width:100%;}
.howtoStartWrapper > ol > li{ border:1px solid #ccc; padding:3rem 1rem 1rem; position:relative;}
.howtoStartWrapper > ol > li dl{font-size:0.8rem; text-align: center;}
.howtoStartWrapper > ol > li dl dt{ margin-bottom:1em;}
.howtoStartWrapper > ol > li dl dt span{ display:block;}
.howtoStartWrapper > ol > li dl dt span::before{ content:"| "; font-weight: normal;}
.howtoStartWrapper > ol > li dl dt span::after{ content:" |"; font-weight: normal;}
.howtoStartWrapper > ol > li dl dd{text-align: left;}

.howtoStartWrapper > ol > li:nth-child(1)::after{ content:"IMAGE01"; position:absolute; top:1rem; left:50%; transform: translate(-50%,0);font-size:0.75rem; letter-spacing:0; font-weight: bold;}
.howtoStartWrapper > ol > li:nth-child(2)::after{ content:"IMAGE02"; position:absolute; top:1rem; left:50%; transform: translate(-50%,0);font-size:0.75rem; letter-spacing:0; font-weight: bold;}
.howtoStartWrapper > ol > li:nth-child(3)::after{ content:"IMAGE03"; position:absolute; top:1rem; left:50%; transform: translate(-50%,0);font-size:0.75rem; letter-spacing:0; font-weight: bold;}

.messageWrapper{ margin:4rem auto 0;max-width:860px; width:100%;}
.messageWrapper h3{font-size: 1.0rem; font-weight: bold;}
.messageWrapper h3 span::before{content:"\\ ";}
.messageWrapper h3 span::after{content:" /";}

.commentBox{ margin:2rem auto 0;}
.commentBox.pr4rem{ padding-right:4rem;}
.commentBox.pl4rem{ padding-left:4rem;}

.commentBox dl{ display:flex; justify-content:space-between; align-items: center;}
.commentBox dl dt{flex-basis:240px; text-align: center;}
.commentBox dl dt img{ width:160px; height:auto; border-radius:100px;}
.commentBox dl dt span{ display:block;font-size:0.8rem; letter-spacing:0; margin:10px auto 0;}

.commentBox dl dd{ font-size:0.8rem; text-align: left; flex-basis:calc(100% - 240px);}
.commentBox dl dd div{border:1px solid #ccc; background: #fff; padding:2rem; position:relative;}
.commentBox dl dd div::before{ content:""; position:absolute; width:1rem; height:1rem; background:#ccc; top:50%; left:-0.6rem; transform: translate(0,-50%) rotate(-45deg); z-index:7900;}
.commentBox dl dd div::after{ content:""; position:absolute; width:calc(1rem - 1px); height:calc(1rem - 1px); background:#fff; top:50%; left:-0.5rem;transform: translate(0,-50%) rotate(-45deg); z-index:7990;}

@media only screen and (max-width : 800px) {
.howtoStartWrapper h2{ font-size: 1.0rem;}
.howtoStartWrapper h2::before{transform: translate(56%,-50%);}
.howtoStartWrapper h2::after{transform: translate(-56%,-50%);}
.howtoStartWrapper > ol{ flex-direction: column; padding:0 1rem;}

.commentBox.pr4rem{ padding-right:0;}
.commentBox.pl4rem{ padding-left:0;}

.commentBox dl{ flex-direction: column;}
.commentBox dl dt{flex-basis:auto;}
.commentBox dl dd{ padding:1rem 1rem 0; flex-basis:auto;}
.commentBox dl dd div{ padding:1rem;}
.commentBox dl dd div::before{ top:-0.6rem; left:50%; transform: translate(-50%,0) rotate(-45deg);}
.commentBox dl dd div::after{ top:-0.5rem; left:50%; transform: translate(-50%,0) rotate(-45deg);}
}




.visionInner{ padding:4rem 2rem;max-width:1080px; width:100%; margin:0 auto; text-align: left;}
.visionTextBox{margin:1.4rem 0 0;}

.pointWrapper{ margin:4rem auto 0;max-width:860px; width:100%;}
.pointWrapper > h3{font-size: 1.4rem; font-weight: bold;}

.pointWrapper > ol{ margin:4rem auto 0;}
.pointWrapper > ol > li{ position:relative; margin:4rem auto 0;}

.pointWrapper > ol > li:nth-child(1) .pointTitle h4::before{ content:""; width:200px; height:80px; background:url(img/text_strongpoint.svg) center center no-repeat; background-size:contain; position:absolute; top:-5rem; left:-8rem;}
.pointWrapper > ol > li:nth-child(1) .pointTitle h4::after{ content:"01";position:absolute; top:-0.4em; left:-4rem; font-size:2.4rem; letter-spacing:0; color:#FF9C04;}
.pointWrapper > ol > li:nth-child(2) .pointTitle h4::before{ content:""; width:200px; height:80px; background:url(img/text_strongpoint.svg) center center no-repeat; background-size:contain; position:absolute; top:-5rem; left:-8rem;}
.pointWrapper > ol > li:nth-child(2) .pointTitle h4::after{ content:"02";position:absolute; top:-0.4em; left:-4rem; font-size:2.4rem; letter-spacing:0; color:#FF9C04;}
.pointWrapper > ol > li:nth-child(3) .pointTitle h4::before{ content:""; width:200px; height:80px; background:url(img/text_strongpoint.svg) center center no-repeat; background-size:contain; position:absolute; top:-5rem; left:-8rem;}
.pointWrapper > ol > li:nth-child(3) .pointTitle h4::after{ content:"03";position:absolute; top:-0.4em; left:-4rem; font-size:2.4rem; letter-spacing:0; color:#FF9C04;}
.pointWrapper > ol > li:nth-child(4) .pointTitle h4::before{ content:""; width:200px; height:80px; background:url(img/text_strongpoint.svg) center center no-repeat; background-size:contain; position:absolute; top:-5rem; left:-8rem;}
.pointWrapper > ol > li:nth-child(4) .pointTitle h4::after{ content:"04";position:absolute; top:-0.4em; left:-4rem; font-size:2.4rem; letter-spacing:0; color:#FF9C04;}

.pointTitle h4{font-size: 1.4rem; font-weight: bold; display:inline-block; position:relative;}
.pointTitle.leftText{ text-align:left; padding:0 0 0 8rem;}
.pointTitle.rightText{ text-align:center; margin-left:0; padding:0 0 0 8rem;}

.pointBox{ display:flex; justify-content: space-between; gap:2rem; margin:1rem 0 0; align-items: center;}
.pointBox > div{ text-align: left;}
.pointBox div.orderImageLeft{ flex-basis:50%; order:2;}
.pointBox div.orderTextRight{ flex-basis:50%; order:1;}
.pointBox div.orderImageRight{ flex-basis:50%; order:1;}
.pointBox div.orderTextLeft{ flex-basis:50%; order:2;}

.aboutusThemeInner{ padding:4rem 2rem;max-width:1080px; width:100%; margin:0 auto; text-align: left; display:flex; justify-content: space-around; align-items: center;}
.aboutusThemeInner h2{font-weight: bold;font-size: 1.8rem;line-height: 1.4; display: block;}
.aboutusThemeInner h2::before{content:"『 ";}
.aboutusThemeInner h2::after{content:" 』";}

.aboutusThemeInner img{ height:280px; width:auto;}

@media only screen and (max-width : 800px) {
.visionInner{ padding:4rem 1rem;}
.visionTextBox{margin:1rem 0 0; font-size:0.8rem;}

.pointWrapper > h3{font-size: 1.0rem;}

.pointWrapper > ol > li:nth-child(1) .pointTitle h4::before{ width:120px; height:40px; top:-2rem; left:-7rem;}
.pointWrapper > ol > li:nth-child(1) .pointTitle h4::after{ top:0; left:-2rem; font-size:1.0rem;}
.pointWrapper > ol > li:nth-child(2) .pointTitle h4::before{ width:120px; height:40px; top:-2rem; left:-7rem;}
.pointWrapper > ol > li:nth-child(2) .pointTitle h4::after{ top:0; left:-2rem; font-size:1.0rem;}
.pointWrapper > ol > li:nth-child(3) .pointTitle h4::before{ width:120px; height:40px; top:-2rem; left:-7rem;}
.pointWrapper > ol > li:nth-child(3) .pointTitle h4::after{ top:0; left:-2rem; font-size:1.0rem;}
.pointWrapper > ol > li:nth-child(4) .pointTitle h4::before{ width:120px; height:40px; top:-2rem; left:-7rem;}
.pointWrapper > ol > li:nth-child(4) .pointTitle h4::after{ top:0; left:-2rem; font-size:1.0rem;}

.pointTitle h4{font-size: 1.0rem;}

.pointBox{ gap:1rem; flex-direction: column;}
.pointBox > div{ text-align: left;}
.pointBox div.orderImageLeft{ flex-basis:auto; order:2; padding:0 1rem;}
.pointBox div.orderTextRight{ flex-basis:auto; order:1; padding:0 1rem; font-size:0.8rem;}
.pointBox div.orderImageRight{ flex-basis:auto; order:2; padding:0 1rem;}
.pointBox div.orderTextLeft{ flex-basis:auto; order:1; padding:0 1rem; font-size:0.8rem;}

.aboutusThemeInner{ padding:4rem 1rem;}
.aboutusThemeInner h2{font-size:1.4rem;}
.aboutusThemeInner img{ height:180px;}
}
@media only screen and (max-width : 500px) {
  .aboutusThemeInner h2{font-size:1.0rem;}
  .aboutusThemeInner img{ height:100px;}
}



.teamWrapper{max-width:1080px; width:100%; margin:0 auto; text-align: left;}

.teamBlock{ margin:4rem auto 0;}
.teamBlock:not(:first-of-type){ padding-top:4rem; position:relative;}
.teamBlock:not(:first-of-type)::before{ content:""; position: absolute; top:0; left:0; width:100%; height:4px; background:#FF9C04;}

.teamProfile1{ display:flex; justify-content: space-between; gap:4rem; align-items: center; margin:2rem auto 0; max-width: 860px; width: 100%;}
.teamProfile1Image{ order:1; flex-basis:50%;}
.teamProfile1Text{ order:2; flex-basis:50%;}

.teamProfile1Text dl dt{ font-size:1.0rem; font-weight: normal;}
.teamProfile1Text dl dd{ font-size:2.4rem;}
.teamProfile1Text ul{ margin:2rem 0 0;}
.teamProfile1Text ul > li{ font-size:1.0rem;}
.extraInfo{ font-size:0.8rem; margin:2rem 0 0;}
.teamProfile1Text table{ font-size:0.8rem; margin:1em 0 0; width:100%;}
.teamProfile1Text table th{ width:6em;}
.teamProfile1Text table th.w10em{ width:10em;}
.teamProfile1Text table th::after{content:"：";}
.teamProfile1Text ul.extraList{ margin:1em 0 0;}
.teamProfile1Text ul.extraList > li{ font-size:0.8rem;}

.teamProfile2{ display:flex; justify-content: space-between; gap:4rem; align-items: center; margin:2rem auto 0; max-width: 860px; width: 100%;}
.teamProfile2Image{flex-basis:50%;}
.teamProfile2Text{flex-basis:50%;}

.teamProfile2Text table{ font-size:0.8rem; margin:1em 0 0; width:100%;}
.teamProfile2Text table th{ width:12em; padding:0.5em 0;}
.teamProfile2Text table td{ padding:0.5em 0;}
.teamProfile2Text table th::after{content:"：";}

.teamComment{margin:2rem auto 0; max-width: 860px; width: 100%;}
.teamComment h3{ text-align:center; font-weight:bold;}
.teamComment h3::before{content:"\\ ";}
.teamComment h3::after{content:" /";}

@media only screen and (max-width : 800px) {
.teamBlock:first-of-type{ margin-top:2rem;}
.teamBlock:not(:first-of-type){ padding-top:2rem;}

.teamWrapper .secTitle{ padding-left:1rem;}

.teamProfile1{ flex-direction: column; gap:1rem;}
.teamProfile1Image{ order:1; flex-basis:auto; width:100%;}
.teamProfile1Text{ order:2; flex-basis:auto; width:100%;}
.teamProfile1Text ul{ margin:1rem 0 0;}

.extraInfo{ margin:1rem 0 0;}

.teamBlock .teamProfile1{ padding:0 1rem;}
.teamProfile1Text dl dt{ font-size:0.8rem;}
.teamProfile1Text dl dd{ font-size:1.4rem;}
.teamProfile1Text ul > li{ font-size:0.8rem;}

.teamBlock .teamProfile2{ padding:0 1rem;}
.teamProfile2{ flex-direction: column; gap:1rem; margin:0 auto 0;}
.teamProfile2Image{flex-basis:auto; width:100%;}
.teamProfile2Text{flex-basis:auto; width:100%;}
}




.simplePageWrapper{ max-width:1080px; width:100%; margin:0 auto;}
.simplePageLeadWrapper{ margin:2rem 0 0;}

.companyDetailWrapper{ max-width:860px; width:100%; margin:4rem auto 0;}
.companyBox{ margin:4rem auto 0;}

.companyTitle{ font-weight: bold;}
.companyTitle::before{ content:"| "; font-weight: normal;}
.companyTitle::after{ content:" |"; font-weight: normal;}

.companyBox h3{ font-weight: bold; margin:2rem auto 0;}

table.lawTable{ font-size:1rem; margin:1em 0 0;}
table.lawTable th{ width:14em; padding:0.5em 0;}
table.lawTable td{ padding:0.5em 0;}
table.lawTable th::after{content:"：";}

table.companyTable{ font-size:1rem; margin:1em 0 0;}
table.companyTable th{ width:7em; padding:0.5em 0;}
table.companyTable td{ padding:0.5em 0;}
table.companyTable th::after{content:"：";}

@media only screen and (max-width : 800px) {
.simplePageWrapper .secTitle{ padding:2rem 0 0 1rem;}
.simplePageLeadWrapper{ margin:1rem 0 0; font-size: 0.8rem; padding:0 1rem;}
.simplePageLeadWrapper br{ display:none;}

.companyDetailWrapper{ margin:2rem auto 0; padding:0 1rem;}
.companyBox{ margin:2rem auto 0;}
.companyBox h3{ font-size:0.8rem;}
table.lawTable{ font-size:0.8rem;}
table.companyTable{ font-size:0.8rem;}
}




.privacyDetailWrapper{ max-width:860px; width:100%; margin:4rem auto 0;}
.privacyDetailWrapper > ol > li { margin:2rem 0 0;}
.privacyDetailWrapper > ol > li dl dd{ font-size:0.8rem;}

@media only screen and (max-width : 800px) {
.privacyDetailWrapper{ margin:2rem auto 0; padding:0 1rem;}
.privacyDetailWrapper > ol > li { margin:1rem 0 0; font-size:0.8rem;}
}




.recruitDetailWrapper{ max-width:860px; width:100%; margin:4rem auto 0;}
table.recruitTable{ font-size:1rem; margin:1em 0 0; border-top:1px solid #000; width:100%;}
table.recruitTable th{ width:14em; padding:2em 0; border-bottom:1px solid #000;}
table.recruitTable td{ padding:2em 0; border-bottom:1px solid #000;}
table.recruitTable th::after{content:"：";}
table.recruitTable td ul li{ list-style-type: disc; list-style-position: outside; margin-left:1.1em;}
table.recruitTable td ol{counter-reset:number;}
table.recruitTable td ol li{position:relative; padding-left:1.7rem}
table.recruitTable td ol li:before{
  position: absolute;
  counter-increment: number;
  content: counter(number);
  display:inline-block;
  background: #fff; border:1px solid #000;
  letter-spacing:0;
  color: #000;
  font-size: 0.75rem;
  border-radius: 50%;
  left: 0;
  width: 1.0rem;
  height: 1.0rem;
  line-height: 1.0rem;
  text-align: center;
  /*以下 上下中央寄せのため*/
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.recruitBtnWrapper{ padding:1px 0 4rem;}

@media only screen and (max-width : 800px) {
.recruitDetailWrapper{ margin:2rem auto 0;}

table.recruitTable{ font-size:0.8rem;}
table.recruitTable th{ display:block; width:100%; padding:1em 1rem;}
table.recruitTable td{ display:block; width:100%; padding:1em 1rem; }
}




.categoryPageWrapper{ max-width:1080px; width:100%; margin:0 auto;}
.categoryPageLeadWrapper{ margin:2rem 0 0;}

.caseListWrapper{ width:100%; margin:4rem auto 0;}
.caseListWrapper > ul > li{ background:#FAFAFA; padding:2rem; border-radius:8px; margin-top:2rem;}

.caseFlex{ display: flex; justify-content: space-between; gap:4rem; align-items: center; width:100%;}
.caseImage{ flex-basis:50%; order:1;}
.caseDetail{ flex-basis:50%; order:2;}
.caseDetail div.extraInfo{ margin:1rem 0 0; font-weight: bold; font-size:1rem;}
.caseDetail dl{ font-size:1rem; margin:2rem 0 0;}
.caseDetail dl dt{ margin-top:1rem;}
.caseDetail dl dd{ font-size:0.8rem;}

.caseTitle .eng{color:#FF9C02; font-weight: bold; letter-spacing:0; display: block; font-size:1rem; margin-bottom:10px;}
.caseTitle .jpn{font-weight:bold; font-size:1.4rem; line-height:1.4; display: block;}

@media only screen and (max-width : 800px) {
.categoryPageWrapper .secTitle{ padding:2rem 0 0 1rem;}
.categoryPageLeadWrapper{ margin:1rem 0 0; font-size: 0.8rem; padding:0 1rem;}
.categoryPageLeadWrapper br{ display:none;}

.caseListWrapper{ margin:2rem auto 0;}
.caseListWrapper > ul > li{ padding:1rem; border-radius:0;}

.caseFlex{ gap:1rem; flex-direction: column;}
.caseImage{ flex-basis:auto; width:100%;}
.caseDetail{ flex-basis:auto; width:100%;}

.caseDetail div.extraInfo{ font-size:0.8rem;}
.caseDetail dl{ font-size:0.8rem; margin:1rem 0 0;}
.caseDetail dl dt{ font-size:0.8rem;}

.caseTitle .eng{font-size:0.8rem;}
.caseTitle .jpn{font-size:1.0rem;}
}




.interviewListWrapper{ width:100%; margin:4rem auto 0;}
.interviewListWrapper > ul > li{ background:#FAFAFA; padding:2rem; border-radius:8px; margin-top:2rem;}

.interviewFlex{ display: flex; justify-content: space-between; gap:4rem; align-items: center; width:100%;}
.interviewPerson{ flex-basis:50%;}
.interviewDetail{ flex-basis:50%;}

.interviewPerson div.extraInfo{ margin:2rem 0 2rem; font-weight: bold; font-size:1rem;}
.interviewDetail > dl > dt{ position: relative; padding:1.7rem 0 0; margin:0 0 1rem;}
.interviewDetail > dl > dt::before{ position: absolute; top:0; left:0; content:"Q."; font-weight: bold;}
.interviewDetail > dl > dd{ position: relative; padding:1.7rem 0 0; margin:0 0 2rem;}
.interviewDetail > dl > dd::before{ position: absolute; top:0; left:0; content:"A."; font-weight: bold;}
.interviewDetail > dl > dd:last-child{ margin:0 0 0;}

.interviewTitle .eng{color:#FF9C02; font-weight: bold; letter-spacing:0; display: block; font-size:1rem; margin-bottom:10px;}
.interviewTitle .jpn{font-weight:bold; font-size:1.4rem; line-height:1.4; display: block;}

@media only screen and (max-width : 800px) {
.interviewListWrapper{ margin:2rem auto 0;}
.interviewListWrapper > ul > li{ padding:1rem; border-radius:0;}

.interviewFlex{ gap:1rem; flex-direction: column;}
.interviewPerson{ flex-basis:auto; width:100%;}
.interviewDetail{ flex-basis:auto; width:100%;}

.interviewPerson div.extraInfo{ margin:1rem 0 1rem; font-size:0.8rem;}
.interviewDetail > dl{ font-size:0.8rem;}
.interviewDetail > dl > dt{ padding:1.4rem 0 0;}
.interviewDetail > dl > dd{ padding:1.4rem 0 0;}

.interviewTitle .eng{font-size:0.8rem;}
.interviewTitle .jpn{font-size:1.0rem;}
}





.contactFormWrapper{max-width:860px; margin:4rem auto 0; text-align:left;}
.require::after{content:"必須"; display: inline-block; line-height: 1; padding: 0.25rem 0.5rem; background: #e26459; border-radius: 5px; color: #fff; font-size: 0.75rem; margin: 0.25rem 0 0 1rem; vertical-align: top;}

input[type=text]{ border:1px solid #ccc; background:#fff; padding:0.5rem; max-width:480px; width:100%;}
input[type=text].p-postal-code{ max-width:7em;}
input[type=text].sizeS{ max-width:320px;}
input[type=number]{ border:1px solid #ccc; background:#fff; padding:0.5rem; max-width:5em; width:100%;}
input[type=email]{ border:1px solid #ccc; background:#fff; padding:0.5rem; max-width:480px; width:100%;}
textarea{ border:1px solid #ccc; background:#fff; padding:0.5rem; width:100%; height:6em;}
input[type=radio],input[type=checkbox]{ display:none;}
.form-check-label{ position:relative; display:inline-block; padding:0 0 0 1.8em; cursor:pointer; line-height:1;}
.form-check-label::after{content:''; position:absolute; top:50%; left:0; display:block; line-height:1; transform: translate(0,-50%); width:16px; height:16px; border: 2px solid #333;}
.form-check-label::before { content: ""; position: absolute; top: 50%; left: 0; display: block; line-height: 1; transform: translate(0, -50%); width: 16px; height: 16px; content: ""; opacity: 0; background:#655F5F;}
input[type=radio]:checked + .form-check-label::before { opacity:1;}
input[type=radio]:checked + .form-check-label::after { border: 2px solid #655F5F;}
input[type=checkbox]:checked + .form-check-label::before { opacity:1;}
input[type=checkbox]:checked + .form-check-label::after { border: 2px solid #655F5F;}
select { appearance: none; background: none; border: none; color: #333; font-size: 1rem; width: 100%; height: 100%; padding: 0 10px;}
.selectBox{ background:#eee; height:3rem; width:100%; max-width:calc(375px - 2rem); border-radius:8px; position: relative; z-index:1;}
.selectBox::after {position: absolute;content: '';width: 8px;height: 8px;right: 10px;top: 50%;transform: translateY(-50%) rotate(45deg);border-bottom: 2px solid #333;border-right: 2px solid #333;z-index: -1;}

.formList > dt{ margin-bottom:0.5em;}
.formList > dd{ margin-bottom:02em;}

.submitWrapper > ul > li{ display:inline-block; margin:0 0.5rem 0 0;}
.contactMailAttentionTextWrapper{ font-size:0.8rem; padding:2rem 0 0;}

.submitBtn{ font-size: 1rem; display:inline-block; padding:1rem 2rem; background:#6D3C17; border-radius:100px;box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1); position:relative; color:#fff;}
.submitBtn:hover{background:hsl(26, 65%, 36%);}

.submitBtn.gray{ background:#ccc;}
.submitBtn:hover.gray{ background:hsl(0, 0%, 63%);}

.beforeCheckText{ margin:0 0 2rem;}

.checkAnser{border:1px solid #ccc; min-height:1em; background:#eee; padding:0.5rem; max-width:480px; width:100%;}
.checkAnser.w100{ max-width:initial;}

.contactNoteListWrapper{ margin:2rem 0;}
.contactNoteListWrapper ul li{ list-style-type: disc; list-style-position:outside; margin:0 0 0 1.0em; font-size:0.8rem;}
.privacyText{ font-size:0.8rem; margin:0 0 2rem;}
.privacyText a{ color: #6D3C17; text-decoration: underline;}
.agreeWrapper{ padding:1rem; background-color:#efefef; margin:2rem 0;}
.agreeWrapper p{ margin-bottom:1rem;}

.sendCompWrapper{margin:0 0 4rem;}
.sendCompWrapper p{ margin:0 0 1rem;}
.sendCompWrapper p.note{ font-size:0.8rem;}
.addressBox{margin-top:10px;}

#workdescWrapper{ margin-top:10px; display:none;}
#where1descWrapper{ margin:10px 0; display:none;}
#where1descWrapper p{ font-size:0.8rem; margin:0 0 10px;}
#where2descWrapper{ margin:10px 0; display:none;}
#where2descWrapper p{ font-size:0.8rem; margin:0 0 10px;}

@media only screen and (max-width : 800px) {
  .contactFormWrapper{ padding:0 1rem;}

  .sendCompWrapper{margin:0 0 2rem;}
  .sendCompWrapper p{ font-size:0.8rem;}

  .agreeWrapper{ font-size:0.8rem;}

  .submitBtn {min-width:auto; width:100%;}
}


.pagenationWrapper{position:relative; max-width:1000px; margin:4rem auto 0; text-align:center; font-size:0.8rem;}
.pagenation a{ display:inline-block; box-sizing:border-box; vertical-align:top; width:40px; height:40px; border:1px solid #333; line-height:38px; overflow:hidden; color:#333; text-decoration:none; background:#fff; margin-top:1rem;}
.pagenation a:hover{ background:#000; color:#b8cf55;}
.pagenation span{ display:inline-block; box-sizing:border-box; vertical-align:top; width:40px; height:40px; border:1px solid #333; background:#000; color:#b8cf55; line-height:38px; margin-top:1rem;}
.pagenation span.dotdotdot{ background:transparent; color:#666; border:none;}

.pagenation a.nextPaginationBtn{ position:relative; background:#eee; color:#666;}
.pagenation a.nextPaginationBtn:after{ content:""; position:absolute; top:20px; right:20px; display:block; width:5px; height:5px; border:1px solid; border-color: #b8cf55 #b8cf55 transparent transparent; transform: translate(2px, -4px) rotate(45deg); -webkit-transform: translate(2px, -4px) rotate(45deg);}
.pagenation a.nextPaginationBtn:hover{ background:#000;}

.pagenation a.backPaginationBtn{ position:relative; background:#eee; color:#666;}
.pagenation a.backPaginationBtn:after{ content:""; position:absolute; top:20px; left:20px; display:block; width:5px; height:5px; border:1px solid; border-color: transparent transparent #b8cf55 #b8cf55; transform: translate(-3px, -4px) rotate(45deg); -webkit-transform: translate(-3px, -4px) rotate(45deg);}
.pagenation a.backPaginationBtn:hover{ background:#000;}

.backBtnWrapper{ margin:2rem auto 2rem;}

@media only screen and (max-width : 800px) {}




.singleWrapper{ max-width:860px; width:100%; margin:4rem auto 0;}

@media only screen and (max-width : 800px) {
.singleWrapper{ margin:2rem auto 0; padding:0 1rem;}
}