@charset "UTF-8";

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

:root{
--vw:0.266666vw;
--base:calc(var(--vw) * 13);
}

html{overflow-x:hidden;}
body{font-size:var(--base); width: 100vw; overflow-x: hidden; word-break: break-all;}
body.isMenuOpen {overflow-y: hidden;}

/* Loading */
#loader{ position: fixed; inset: 0; z-index: 9999; display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; background: transparent; overflow: hidden; opacity: 1; pointer-events: none; visibility: hidden; transition: all .5s;}
body.is-loading #loader {	opacity: 1; pointer-events: auto; visibility: visible; }
#logoSvg{ position: relative; z-index: 2; transform: scale(1.74); }
.loader__panel{ position: absolute; left: 0; width: 100vw; background: var(--c1); z-index: 1; will-change: transform; }
.loader__panel--top{ top: 0; height: 50vh; }
.loader__panel--bottom{ bottom: 0; height: 50vh; }



/* Header */
header {position: fixed; z-index: 20; top: 0; left: 0; width: 100%; height: auto; background: #fff; filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.16)); padding: var(--s8) var(--s16) var(--s8) var(--s8); box-sizing: border-box; box-sizing: border-box; opacity: 0; transition: all .5s;}
header.clear {opacity: 1;}
header .inner {display: flex; justify-content: space-between; align-items: center;}
header .inner .logo {display: block; width: auto; height: calc(var(--vw)*40);}
header .inner .logo svg { width: 100%; height: 100%; object-fit: contain;}
header .inner .gmenu { display: none;}
header .inner .spbtn{position:relative;z-index:120;display:flex;flex-direction:column;justify-content:center;gap:calc(var(--vw) * 8);width:calc(var(--vw) * 30);height:calc(var(--vw) * 20);}
header .inner .spbtn p{display:block;width:100%;height:1px;background:var(--fc1);transition:transform .45s cubic-bezier(.77,0,.175,1),opacity .3s ease;}
header .inner .spbtn.open p:nth-child(1){	transform:translateY(calc(var(--vw) * 8)) rotate(45deg);}
header .inner .spbtn.open p:nth-child(2){opacity:0;}
header .inner .spbtn.open p:nth-child(3){	transform:translateY(calc(var(--vw) * -10)) rotate(-45deg);}

.spmenu {opacity: 0; visibility:hidden; position: fixed; z-index: 19; top: 0; left: 0; width: 100vw; height: 100%; background: rgba(0,0,0,.75); display: flex; justify-content: flex-start; align-items: center;  flex-direction:column; padding-top: 30vw; box-sizing: border-box; transition: all .5s;}
body.isMenuOpen .spmenu {opacity: 1; visibility:visible; transition: all .5s;}
.spmenu a {display: block; font-size: 110%; margin-bottom: var(--s16);}
.spmenu a span {color: #fff; }
.spmenu a span:nth-child(2) {display: none;}


/* footer */
footer { position: relative; overflow: hidden; width: 100%; height: auto; opacity: 0; transition: all .5s;}
footer.clear {opacity: 1;}
footer .cta { position: relative; aspect-ratio:1/1; overflow: hidden; width: 100%; height: auto; background: #000;}
footer .cta .txt {position: absolute; z-index: 2; top: 0; left: 0; aspect-ratio:1/1; overflow: hidden; width: 100%; height: auto; color: #fff; display: flex; justify-content: center; align-items: center; flex-direction: column;filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.6)); padding: 0 var(--s16); box-sizing: border-box;}
footer .cta .txt h2 { font-weight: bold; font-size: 140%; margin-bottom: var(--s24);}
footer .cta .txt p { margin-bottom: var(--s32);}
footer .cta .txt a { position: relative; display: block; border-radius: 30px; border: solid 1px #fff; width: fit-content; padding: var(--s16) var(--s16) var(--s16) 0; transition: all .5s; background: rgba(0,0,0,.3); font-size: 140%;}
footer .cta .txt a:hover { padding: var(--s8) var(--s32) var(--s8) 0;background: rgba(0,0,0,.3); transition: all .5s;}
footer .cta .txt a span:first-child {display: block; flex:1; text-align: center; color: #fff; margin: 0 var(--s64);}
footer .cta .txt a span:last-child {position: absolute; top: 0; bottom: 0; margin: auto; right: var(--s16); display: flex; justify-content: center; align-items: center; width: 5vw; height: 5vw; background: #fff; border-radius: 50%; }
footer .cta .txt a span:last-child svg { fill:var(--c2);}
footer .cta .bg { position: absolute; z-index: 1; top: 0; left: 0; aspect-ratio:1/1; overflow: hidden; width: 100%; height: auto; }
footer .cta .bg img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0.75;}
footer .gmenu { width: 100%; box-sizing: border-box; display: flex; flex-direction: column; background:var(--c1); border-bottom: solid 1px rgba(255,255,255,.15);}
footer .gmenu a { font-size: 140%; display: block;text-align: left; padding: var(--s16); box-sizing: border-box; border-bottom: 1px dotted rgba(255,255,255,.15);}
footer .gmenu a:last-child {border-bottom:none;}
footer .gmenu a span {display: block; line-height: 1;}
footer .gmenu a span:first-child { display: none; opacity: 0; }
footer .gmenu a span:last-child { color: #fff;transition: all .5s;}
footer .gmenu a:hover span:last-child { color: var(--orange1);transition: all .5s; }
footer .cp {background:var(--c1); color: #fff; text-align: center; padding: var(--s32) 0; text-align: center; line-height: 1; font-size: 110%;}


/* modal */
.modal {position: fixed;inset: 0;z-index: 9999;display: none; opacity: 0; transition: all .5s;}
.modal.is-open {display: block; opacity: 1; transition: all .5s;}
.modal__overlay {position: absolute;inset: 0;background: rgba(0,0,0,.45);}
.modal__content { position: relative; z-index: 1; width: 90%;	max-height: 80vh; overflow-y: auto;	margin: var(--s32) auto 0;	padding: var(--s16); box-sizing: border-box; background: #fff;}
.modal__close {	position: absolute; z-index: 10; top: 8px;right: 8px; width: calc(var(--vw)*20); height: auto; aspect-ratio:1/1;}
.modal__close svg {width: 100%; height: 100%; }

#modal_committee .modalbox { font-size: 90%;}
#modal_committee .modalbox .top { width: 100%; display: block; margin-bottom: var(--s32); line-height: 1.4;}
#modal_committee .modalbox .top .left { width: 100%; display: flex; justify-content: flex-start; align-items: center; margin-bottom: var(--s16);}
#modal_committee .modalbox .top .left .img { width: 25%; margin-right: var(--s16);}
#modal_committee .modalbox .top .left .img img {}
#modal_committee .modalbox .top .left .txt { flex:1;}
#modal_committee .modalbox .top .left .txt h2 { font-size: 120%;}
#modal_committee .modalbox .top .left .txt p {}
#modal_committee .modalbox .top .right {width: 100%;display: flex; justify-content: center; align-items: center;padding: 0 var(--s16); box-sizing: border-box; border-left: solid 2px var(--linegray2);}
#modal_committee .modalbox .btm {}
#modal_committee .modalbox .btm .secHeader { width: 100%; display: flex; justify-content: flex-start; align-items: center; margin-bottom: var(--s24);}
#modal_committee .modalbox .btm .secHeader h3 {width: 50%; font-size: 120%;}
#modal_committee .modalbox .btm .secHeader p {width: 50%; text-align: right;}

.companyprofile_person .modal__content {width: 92%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; height: fit-content;}
.companyprofile_person .modalbox .top { width: 100%; display: block;}
.companyprofile_person .modalbox .top .left { width: 100%; display: flex; margin-bottom: var(--s24);}
.companyprofile_person .modalbox .top .left .img { width: 20%; margin-right: 5%;}
.companyprofile_person .modalbox .top .left .txt { flex: 1;}
.companyprofile_person .modalbox .top .left .txt h2 { font-size: 135%;}
.companyprofile_person .modalbox .top .right {width: 100%;display: flex; justify-content: center; align-items: center;padding: 0 var(--s8); box-sizing: border-box; border-left: solid 2px var(--linegray2);}


.tableList {}
.tableList .cell { width: 100%; display: block; padding: var(--s16) var(--s8); box-sizing: border-box;}
.tableList .cell .left {width: 100%; font-weight: bold;}
.tableList .cell .right {width: 100%;}
.tableList .cell:nth-of-type(odd) {background: var(--bggray1);}

.tableList.company .cell {background: #f7d5cd;}
.tableList.company .cell:nth-of-type(odd) {background: #fbebe8;}
.tableList.company.company .cell .left {width: 100%; margin-bottom: 1vw;}
.tableList.company.company .cell .right {width: 100%; display: flex; justify-content: space-between; align-items: center;}
.tableList.company.company .cell .right img {width: 40%; display: block; margin-left: 5%;}
.tableList.company.company .cell a {display: flex; justify-content: flex-start; align-items: center; color: var(--fc1); transition: all .5s;}
.tableList.company.company .cell a svg { width: 5vw; height: 5vw; margin-left: 2vw;}
.tableList.company.company .cell a:hover {color: var(--orangehover);}
.tableList.company.company .cell a:hover svg {fill: var(--orangehover);}


/* slider */
.fadeSlider__images{	position:relative;	overflow:hidden;}
.fadeSlider__item{	position:absolute;	inset:0;	opacity:0;	transition:opacity .8s ease;	pointer-events:none; aspect-ratio: 1/.8; overflow: hidden;}
.fadeSlider__item.is-active{	position:relative;	opacity:1;	pointer-events:auto;}
.fadeSlider__item img{	width:100%;	display:block; object-fit: contain; object-position: center;}
.fadeSlider__nav{	display:flex;	justify-content:center;	gap:12px;	margin-top:16px;}
.fadeSlider__nav a{	width:10px;	height:10px;	border-radius:50%;	background:#ddd;	display:block;}
.fadeSlider__nav a.is-active{	background:var(--orange1);}

/* link button */
.linkbtn { position: relative; display: block; border-radius: 30px; width: fit-content; padding: var(--s8) var(--s8) var(--s8) 0; background: var(--orange1);filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0)); transition: all .5s;}
.linkbtn:hover {background: var(--orangehover); filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.3));  transition: all .5s;}
.linkbtn span:first-child {display: block; flex:1; text-align: center; color: #fff; margin: 0 calc(var(--vw)*20) 0 var(--s8); font-size: 100%;}
.linkbtn span:last-child {position: absolute; top: 0; bottom: 0; margin: auto; right: var(--s8); display: flex; justify-content: center; align-items: center; width: 4vw; height: 4vw; background: #fff; border-radius: 50%; }
.linkbtn span:last-child svg { fill:var(--orange1); width: 70%;}








/* Main */
main {margin-top: calc(var(--vw)*56); width: 100%; height: auto; opacity: 0; transition: all .5s;}
main.clear {opacity: 1;}

section {display: block; width: 100%; margin: 0 auto var(--s80);}
main p {line-height: 2; }
h1,h2,h3 {line-height: 1.5; }

.pagettl { position: relative; aspect-ratio:1/.5; overflow: hidden; width: 100%; height: auto; margin-bottom: var(--s32); }
.pagettl .txt {position: absolute; z-index: 2; top: 0; left: 0; aspect-ratio:1/.5; overflow: hidden; width: 100%; height: auto; color: #fff; display: flex; justify-content: center; align-items: flex-start; flex-direction: column; padding-left: 7.5vw; box-sizing:border-box; filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.8));}
.pagettl .txt h1 { font-weight: bold; font-size: 180%; margin-bottom: calc(var(--vw)*2); line-height: 1; }
.pagettl .txt p { font-size: 100%; font-weight: bold; letter-spacing: 0.08em;}
.pagettl .bg { position: absolute; z-index: 1; top: 0; left: 0; aspect-ratio:1/.5; overflow: hidden; width: 100%; height: auto; background: var(--bggray1); }
.pagettl .bg img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .8;}
.pagettl .photoCredit {position: absolute; z-index: 3; font-size: 90%; right: 3vw; bottom: 3vw; text-align: right; color: #fff;}

body.post-type-archive-case_study .pagettl .bg video { position: absolute; right: 0; top: 0; width: auto; height: 100%;}

.secttl { width: 100%; display: flex; justify-content: flex-start; align-items: center; margin-bottom: calc(var(--vw) * 16);}
.secttl:before { display: block; content:""; width: calc(var(--vw) * 20); height: 1px; background: var(--linegray1);}
.secttl p { width: fit-content; padding-left: calc(var(--vw)*8); box-sizing:border-box; font-size: 90%;}
.secttl p br {display: none;}
.secmain { width: 100%; margin: 0 auto;}
.secmain h2 {font-size: 160%; margin-bottom: var(--s32);}
.secmain h2 br {display: none;}
.secmain .duoCell {width: 85%; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; margin: 0 auto;}
.secmain .duoCell h2 {width: 100%;}
.secmain .duoCell .left {}
.secmain .duoCell .left h3 {font-size: 120%; margin-bottom: var(--s32);}
.secmain .duoCell .left p {margin-bottom: calc(var(--vw)*32);}
.secmain .duoCell .right {margin-top: var(--s32);}
.secmain .duoCell .right .infoGraphic { display: block; width: calc(var(--vw)*584); height: auto;}
.secmain .duoCell .right.slider { padding:0; box-sizing: border-box;}

.sticky {position:sticky;top:calc(var(--vw)*200);align-self:flex-start;}


.secmain .midCell { width: 85%; margin: 0 auto;}
.secmain .midCell p {margin-bottom: calc(var(--vw)*32); display: block; overflow: hidden;}
.secmain .midCell .duoImg {width: 100%; display: block;}
.secmain .midCell .duoImg .cell { margin-bottom: var(--s32);}

.secmain .innerCell {width: 85%; display: block; margin: var(--s64) auto 0;}
.secmain .innerCell .cell { margin-bottom: var(--s32);}
.secmain .innerCell .cell .cellHeader {position: relative; display: flex; justify-content: flex-start; align-items: center;  margin-bottom: var(--s32); background:linear-gradient(	to bottom,	transparent calc(50% - 0.5px),	var(--linegray2) calc(50% - 0.5px),	var(--linegray2) calc(50% + 0.5px),	transparent calc(50% + 0.5px));}
.secmain .innerCell .cell .cellHeader h3 {background: #fff; padding-right: 1em; font-size: 160%;}

.secmain .innerCell .cell.full {width: 100%;}
.secmain .innerCell .cell.full .linkbtn {margin-left: auto; margin-right: auto;}

#audit.innerCell {display: flex; flex-direction: column;}
#audit.innerCell .cell:nth-of-type(1) {order:2;}

.secmain.plain h2 {width: 85%; margin-left:7.5vw;}


/* Separater */
.secDevider {width: 100%;margin-bottom: var(--s80); overflow: hidden; display: flex; flex-direction: column; }
.secDevider p {order:2; position: relative; z-index: 2; width: 85%; height: auto; font-size: 125%; color: var(--fc1); text-align: left; font-weight: bold; margin: 1em auto 0; line-height: 1.7;}
.secDevider p br {display: none;}
.secDevider .img {order:1;}
.secDevider .img img { width: 100%;}

/* Recruit */
.joinUs {margin-bottom: 0;}
.recruitAceBox {display: block; margin-right: auto; margin-left: auto; margin-top: calc(var(--vw)*64);}
.recruitAceBox h2 {text-align: center; margin-bottom: var(--s32); font-size: 120%;}
.recruitAceBox .fullWidthCell {position: relative; width: 100%; height: auto; aspect-ratio:1/.7;}
.recruitAceBox .fullWidthCell .top {position: relative; z-index: 2; width: 100%; height: auto; aspect-ratio:1/.7; display: flex; justify-content: center; align-items: center;}
.recruitAceBox .fullWidthCell .top p {display: block; width: 100%; height: auto;}
.recruitAceBox .fullWidthCell .bottom {position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: auto; aspect-ratio:1/.7; display: flex; justify-content: center; align-items: center; overflow: hidden;}
.staffLoop{overflow:hidden;width:100%;}
.staffLoop__track{display:flex;width:max-content;animation:staffLoop 80s linear infinite;}
.staffLoop__item{flex:0 0 auto;width:calc(var(--vw) * 210);aspect-ratio:1/1.3; overflow: hidden; opacity: 0.5;}
.staffLoop__item img{width:100%;height:100%;object-fit:cover;display:block;}
@keyframes staffLoop{from{transform:translateX(0);}to{transform:translateX(-50%);}}

.memberBox { width: 100%; display: flex; justify-content: flex-start; flex-wrap: wrap; gap:var(--s32);}
.memberBox .cell {display: block; width: 44.7%; border: none; background: none; transition: all .3s;}
.memberBox .cell h3 {font-size: 100%; margin-top: var(--s8); color: var(--fc1); text-align: center;}
.memberBox .cell:hover img {opacity: .75; transition: all .3s;}

.memberModal{position:fixed;inset:0;display:none;z-index:9999;visibility:hidden;transition:.35s;}
.memberModal.is-open{opacity:1;visibility:visible;}
.memberModal__panel{transform:translate(-50%,-45%);	transition:.35s;}
.memberModal.is-open .memberModal__panel{transform:translate(-50%,-50%);}
.memberModal.is-open{display:block;}
.memberModal__bg{position:absolute;inset:0;background:rgba(0,0,0,.6);}
.memberModal__panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(1100px,90vw);max-height:90vh;	overflow:auto; display: block;	background:#fff;	border-radius:20px;	padding:var(--s32) var(--s16);	box-sizing:border-box;}
.memberModal__close{	position:absolute;top: 6px;right: 6px; z-index: 10; width: var(--s32); height: var(--s32);	border:none;	background:none;	font-size:32px;	cursor:pointer; color: var(--fc1);}
.memberModal__panel .memberModal__head {width: 100%; margin-bottom: var(--s32); display: flex; justify-content: flex-start; align-items: center;}
.memberModal__head .photo{width: 30%; margin-right: 5%; aspect-ratio:1/1.35;overflow:hidden;}
.memberModal__head .photo img{width:100%;height:100%;object-fit:cover;display:block;}
.memberModal__panel .memberModal__head h3 { font-size: 130%; margin: var(--s16) 0 var(--s8);}
.memberModal__panel .memberModal__head .team {}
.memberModal__panel .memberModal__body {flex:1; }
.memberModal__panel .memberModal__body .qa {margin-bottom: var(--s32);}
.memberModal__panel .memberModal__body h4 {font-size: 110%; margin-bottom: var(--s16); padding-left: var(--s8); border-left: solid 5px var(--orangetxt);}
.memberModal__panel .memberModal__body p { margin-bottom: 0; line-height: 1.6;}


















.requirementsBox { display: block; width: 100%; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.16); border-radius: 10px; box-sizing: border-box; margin: 0 auto var(--s32); overflow: hidden; padding: var(--s16); transition: all .5s;}
.requirementsBox .headBox {width: 100%; display: flex; justify-content: flex-start; align-items: center; transition: all .5s;}
.requirementsBox .headBox h3 {color: var(--fc1); padding-left: var(--s16); border-left: solid 8px var(--orangetxt); flex:1; transition: all .5s;}
.requirementsBox .headBox:hover h3 {color: var(--orangehover); transition: all .5s;}
.requirementsBox .headBox:hover .arrow svg {fill: var(--orangehover); transition: all .5s;}
.requirementsBox .detailBox { display: none; visibility: hidden; opacity: 0; transition: all 1s;}
.requirementsBox .detailBox .detailBoxCell { margin: var(--s32) auto 0; text-align: left; }
.requirementsBox .detailBox .detailBoxCell:nth-of-type(1) {margin-top: 0;}
.requirementsBox .detailBox .detailBoxCell h4 {font-size: 120%; margin-bottom: var(--s16); margin-top: var(--s32);}
.requirementsBox .detailBox .detailBoxCell p { margin-bottom: var(--s16);}
.requirementsBox .detailBox .detailBoxCell ul { margin-bottom: var(--s16); margin-left: var(--s32); list-style-type: disc;}
.requirementsBox .detailBox .detailBoxCell ul li { margin-bottom: var(--s16);}

.requirementsBox .detailBox .detailBoxCell .listBox {border-top: solid 1px var(--linegray2);border-left: solid 1px var(--linegray2);border-right: solid 1px var(--linegray2);}
.requirementsBox .detailBox .detailBoxCell .listBox .cell { width: 100%; display: block; justify-content: flex-start; border-bottom: solid 1px var(--linegray2); font-size: 90%; padding: var(--s16); box-sizing: border-box;}
.requirementsBox .detailBox .detailBoxCell .listBox .cell .left {width: 100%; padding-bottom: var(--s16); font-size: 110%;}
.requirementsBox .detailBox .detailBoxCell .listBox .cell .right {width: 100%; font-size: 100%;}
.requirementsBox .detailBox .detailBoxCell .listBox:nth-of-type(odd) {background: var(--bggray1);}
.requirementsBox .detailBox .detailBoxCell .listBox .cell h4 {margin: 0!important; font-size: 100%;}
.requirementsBox .detailBox .detailBoxCell .listBox .cell p:last-child {margin-bottom: 0;}


.requirementsBox .detailBox .linkbtn {margin-left: auto; margin-right: auto;}
.requirementsBox.is-open { padding: var(--s16); transition: all .5s;}
.requirementsBox.is-open .detailBox { display: block; visibility: visible; opacity: 1; transition: all 1s;}
.requirementsBox.is-open .headBox .arrow {display: none; transition: all .5s;}
.requirementsBox.is-open .headBox { padding-bottom: var(--s16); border-bottom: solid 1px var(--linegray2); transition: all .5s;}

/* ------------------------------
form
------------------------------ */
.entryForm{width:100%;}
.formCell{ margin-bottom:var(--s32);}
.formCell label{display:flex; align-items:center;	gap:var(--s16);	margin-bottom:var(--s8);}
.formCell .ttl{	font-weight:bold;}
.required{display:inline-flex;align-items:center;justify-content:center;height:auto;padding:6px;border:1px solid var(--orange1);	border-radius:5px;color:var(--orange1);font-size:80%;line-height:1;}
.entryForm input,.entryForm textarea{ width:100%; border:1px solid #C1C1C1; border-radius:10px; background:#fff; padding:1.2em 1.4em; font-size:1rem; font-family:inherit; transition:.3s; box-sizing: border-box; background: var(--bggray2);}
.entryForm input:focus,.entryForm textarea:focus{ outline:none; border-color:var(--orange1); box-shadow:0 0 0 2px rgba(255,127,0,.15);}
.entryForm textarea{ height:20rem; resize:vertical;}
.entryForm input::placeholder,.entryForm textarea::placeholder{ color:#999;}
.entryForm select{	width:100%; border:1px solid #C1C1C1; border-radius:10px; background:var(--bggray2); padding:1.2em 1.4em; font-size:1rem; font-family:inherit; color:#333; box-sizing:border-box; appearance:none; -webkit-appearance:none; cursor:pointer; }
.entryForm select:focus{	outline:none; border-color:var(--orange1); box-shadow:0 0 0 2px rgba(255,127,0,.15); }
.selectWrap{	position:relative; }
.selectWrap::after{	content:""; position:absolute; top:50%; right:1.4em; width:.7em; height:.7em; border-right:2px solid var(--orange1); border-bottom:2px solid var(--orange1); transform:translateY(-65%) rotate(45deg); pointer-events:none; }
.entryForm select:invalid{color:#999; }


/* ------------------------------
 agree
------------------------------ */
.formAgree{ display:flex; justify-content:center; margin-bottom:var(--s64);}
.checkLabel{ display:flex; align-items:center; gap:10px; cursor:pointer;}
.checkLabel input{ width:10px; height:10px; accent-color:var(--orange1); transform:scale(.7)}
.formAgree.entry {display: block;}
.formAgree.entry .checkLabel {margin-bottom: var(--s32);}
/* ------------------------------
 submit
------------------------------ */
.formSubmit{ display:flex; justify-content:center;}
.formSubmit button{ border:none; cursor:pointer; font-family:inherit;}
.formSubmit button span {font-size: 135%;}
.formSubmit .linkbtn{ font-size: 100%; width: 80%!important; }

/* Company */
.ceoMessage {width: 100%; display: flex; justify-content: flex-end; align-items: center;}
.ceoMessage p {margin-bottom: 0!important;}
.ceoMessage .left {flex:1; text-align: right;margin-right: var(--s16);}
.ceoMessage .left p:first-child {margin-bottom: var(--s8);}
.ceoMessage .left p span {display: block;}
.ceoMessage .left p img {width: 20vw; height: auto;}
.ceoMessage .right {width: 20vw; height: auto; }
.ceoMessage .right img {width: 100%; height: auto; aspect-ratio:1/1;}

.ourJourney {width: 92%; display: flex; justify-content: flex-start; align-items: center; margin: 0 4vw var(--s32);}
.ourJourney h2 {width: fit-content; margin-right: var(--s16); margin-bottom: 0!important; font-size: 100%; line-height: 1;}
.ourJourney svg {width: var(--s24); height: auto;}


/* Article List */
.secmain section.articleList {width: 100%; margin-bottom: 0!important;}
.pageArticleList {width: 100%;}
.articleList h2 {width: 85%; margin-left:7.5vw;}

.pageArticleList .artList { width: 85vw; margin: auto;}
.pageArticleList .artList a { transition: all .5s;}
.pageArticleList .artList a:hover { transition: all .5s;}
.pageArticleList .artList .cell {padding: var(--s32) 0; border-bottom: solid 1px var(--linegray2);width: 100%;display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap; box-sizing: border-box;}
.articleList .img { position: relative; display: block; width: 22%; box-sizing: border-box; margin-right: 3%; height: auto; overflow: hidden;}
.articleList .img img {display: block; margin: auto; width: 100%; height: auto; object-fit: contain; }
.pageArticleList .artList .ttl { flex:1;}
.pageArticleList .artList .ttl .clientName { font-size: 80%; margin-bottom: var(--s8);}
.pageArticleList .artList .ttl .artTtl {display: block; font-size: 100%; font-weight: bold; color: var(--fc1); margin-bottom: var(--s8); line-height: 1.3;}
.pageArticleList .artList .ttl .artTtl:hover {color: var(--orange1);}
.pageArticleList .artList .ttl p { font-size: 80%; padding-right: calc(var(--vw)*10); line-height: 1.4;}
.pageArticleList .artList .ttl .taglist {width: 100%; display: flex; justify-content: flex-start; flex-wrap: wrap; gap: var(--s8); margin-top: var(--s8);}
.pageArticleList .artList .date {width: 75%; display: flex; justify-content: space-between; align-items: center; margin-top: var(--s16); margin-left: 25%;}
.pageArticleList .artList .date svg {width:calc(var(--vw)*15); height: auto;}
.articleList .artList:nth-of-type(1) { border-top: solid 1px var(--linegray2);}
.articleList.listCasestudy .arrow {display: none;}
.clientName { width: fit-content; background: var(--fc1); padding: calc(var(--vw)*6) var(--s8) ; margin-bottom: var(--s16); color: #fff; line-height: 1;}
.articleList.listNews .pageArticleList .artList .cell .ttl .artTtl  { margin-bottom: 0;}
.taglist a {display: inline-block; padding:  calc(var(--vw)*4) var(--s8); font-size: 80%; border-radius: 10px; border: solid 1px var(--linegray2); color: var(--fc1);}
.noArticle {margin-top: var(--s16);}



/* Article List cagetory list page */
.pagettl.categoryPageTtl {margin-bottom: 0;}
.categoryNavi { padding: var(--s16); background: var(--bggray2); margin: 0 auto var(--s32);}
.categoryNavi ul {width: 100%; margin-right: auto; margin-left: auto; display: flex; justify-content: flex-start; flex-wrap: wrap; gap:var(--s8)}
.categoryNavi ul li {display: inline-block; text-align: left;}
.categoryNavi ul li a.current { border-left: solid 3px var(--orangetxt);color: var(--orange1);}
.categoryNavi ul li a {color: var(--fc1); transition: all .5s; padding-left: .2em; border-left: solid 1px var(--linegray1);}
.categoryNavi ul li a:hover {color: var(--orangehover); transition: all .5s;}
.categoryNavi ul li a span:first-child {padding-right: .2em;}


.articleHead { padding: var(--s16) 7.5vw; background: var(--bggray2); margin: 0 auto var(--s32);}
.articleHead .contBox { width: 100%; margin: 0 auto;}
.articleHead .pankz {display: flex; justify-content: flex-start; flex-wrap: wrap; width: 100%; margin-bottom: var(--s32);}
.articleHead .pankz a {color: var(--fc1); text-decoration: underline; display: block;}
.articleHead .pankz span {padding: 0 var(--s8);}
.articleHead .cat { color: var(--orangetxt); margin-bottom: var(--s8);}
.articleHead h2 { margin-bottom: var(--s16); font-size: 165%;}
.articleHead .summary {}
.articleHead .date { margin-top: var(--s16);}
.articleHead .taglist {width: 100%; display: flex; justify-content: flex-start; flex-wrap: wrap; gap: var(--s8); margin-top: var(--s16);}

.articleIndexBox {width: 92%;border: solid 1px var(--linegray2); background: var(--bggray2); padding: var(--s16) 4vw; box-sizing: border-box; margin: 0 4vw;}
.articleIndexBox h3 {font-size: 120%; margin-bottom: var(--s16);}
.articleIndexBox li {display: block; margin-bottom: var(--s8);}
.articleIndexBox li a { color: var(--fc1); transition: all .5s;}
.articleIndexBox li a:hover { color: var(--orangetxt); transition: all .5s;}

article { margin-bottom: var(--s32);}
article .articleBody h2 {margin: var(--s32) 0 var(--s16);font-size:120%;}
article .articleBody h3 {font-size:120%;margin-bottom:var(--s16);}
article .articleBody p {margin-bottom:var(--s16);}
article .articleBody ul {margin-bottom:var(--s16);}
article .articleBody img {display: block; margin:0 auto var(--s16);}

article .wp-block-columns.is-not-stacked-on-mobile {flex-direction: column;}

article.insights .articleBody{ width: 92%; margin: 0 auto; position: relative;counter-reset:article-h2;}
article.insights .articleBody h2{ position: relative;counter-increment:article-h2;}
article.insights .articleBody h2::before{position: absolute; top: calc(var(--vw) * 25); left: calc(var(--vw) * -400); display: block; content: ""; width: calc(var(--vw) * 104); height: 1px; background: var(--linegray1); margin-top: var(--s16);}
article.insights .articleBody h2::after{position: absolute; top: 0; left: calc(var(--vw) * -280);content:counter(article-h2, decimal-leading-zero); font-family:serif; font-size:calc(var(--vw) * 72); line-height:1; font-weight:400; text-align:center;}
article.insights .articleBody h2 .h2Text{}

.articleAuthor { width: 92%; margin: 0 auto var(--s64); border: solid 1px var(--linegray2); background: var(--bggray2); padding: var(--s16); box-sizing: border-box; font-size: 90%;}
.articleAuthor .top { width: 100%; display: block;}
.articleAuthor .top h2 { font-size: 105%; margin-bottom: var(--s8);}
.articleAuthor .top h3 { font-size: 140%;}
.articleAuthor .top p {}
















article.news .articleBody,article.casestudy .articleBody { width: 85%; margin: 0 7.5vw var(--s80); }

.pager {width: 95%; margin-right: auto; margin-left: auto; margin-bottom: var(--s80);}
.pager .nav-links {display: flex; justify-content: center; align-items: center; gap:5vw;}
.pager .nav-links a {color: var(--orangetxt); transition: all .3s;}
.pager .nav-links a:hover {color: var(--fc1); transition: all .3s;}
.pager .nav-links .current {color: var(--fc1);font-weight: bold;}



/* index */
.kv { position: relative; aspect-ratio:1/1.5; overflow: hidden; display: flex; justify-content: center; align-items: center; margin-bottom: var(--s32);}
.kv .txt { width: 90%; margin: 0 auto;}
.kv .txt h1 {font-size: 270%; line-height: 1; margin-bottom: var(--s16); letter-spacing: .1em;backdrop-filter: blur(6px); padding: 8px; line-height: 1.3; font-weight: bold;}
.kv .txt h2 {font-size: 180%; line-height: 1.8; margin-bottom: var(--s32); letter-spacing: .1em;backdrop-filter: blur(6px); padding: 8px; line-height: 1.3; font-weight: bold;}
.kv .txt h1 span {color: var(--c2);}
.kv .txt h2 span {color: var(--c2);}
.kv .txt p { line-height: 2; letter-spacing: .3em;backdrop-filter: blur(6px); padding: 8px; font-weight: bold;}
.kv .txt p br {display: none;}
canvas { position:absolute;top: 0; z-index: 1; left: 0; width: 100%; pointer-events:none; aspect-ratio:1/1.5; }

.indexServiceBtnBox {  width: 100%; display: flex; flex-direction: column; gap:var(--s16);}
.indexServiceBtnBox a {display: flex; justify-content: flex-start; align-items: center; width: 100%; padding: var(--s16) ;box-sizing: border-box; transition: all .5s;border-radius: 10px; background: linear-gradient(#ff871d 0%, #c75e03 100%); box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.41);}
.indexServiceBtnBox a:hover {background: linear-gradient(#0088b1 0%, #00b3de 100%); transition: all .5s;}
.indexServiceBtnBox a .icon { display: block; width: 10%; height: auto; aspect-ratio:1/1;}
.indexServiceBtnBox a .txt {flex:1; color: #fff; margin: 0 5%; font-size: 115%;}
.indexServiceBtnBox a .txt br {display: none;}
.indexServiceBtnBox a .btn { display: none;}
.indexServiceBtnBox a .arrow { width: 5%; height: auto; aspect-ratio:1/1;}
.indexServiceBtnBox a svg {width: auto; height: 100%; object-fit: contain;}

/* infographic animation */
.stepAnime{position:relative;width:100%;overflow:hidden; margin-bottom: calc(var(--vw)*32);}
.stepAnime img{position:absolute;inset:0;width:100%;height:auto;display:block;opacity:0;pointer-events:none;transition:opacity .3s ease-in-out;}
.stepAnime img:first-child{position:relative;opacity:1;}
.stepAnime.is-finished img{opacity:0;}
.stepAnime.is-finished img:last-child{opacity:1;}

.graphArea{ position:relative; margin-bottom: calc(var(--vw)*32);}
.graphTip{ position:absolute;z-index:3; display:none; background:#fff; border:1px dashed #999; padding:6px 3px;white-space:nowrap; transform:translateX(-50%); font-size: 70%;}
.graphBtn{position:absolute;font-size:90%;background:var(--fc1);color:#fff;font-weight:bold;border-radius:50%;aspect-ratio:1/1;width:calc(var(--base)*1.3);height:calc(var(--base)*1.3);border:none;display:flex;justify-content:center;align-items:center;line-height:1;z-index:2; transition: all .2s;}
.graphBtn:hover{color: var(--orangetxt); transition: all .2s;}
.graphBtn::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--fc1);z-index:-1;animation:graphPulse 2.2s ease-out infinite;}
@keyframes graphPulse{0%{	opacity:.7;transform:scale(1);}	100%{opacity:0;transform:scale(1.6);}}

.graphBtn.p1 {position: absolute; top: 65%; left: 22.5%;}
.graphBtn.p2 {position: absolute; top: 62%; left: 37%;}
.graphBtn.p3 {position: absolute; top: 61%; left: 45.5%;}
.graphBtn.p4 {position: absolute; top: 57%; left: 53.5%;}
.graphBtn.p5 {position: absolute; top: 53%; left: 61%;}
.graphBtn.p6 {position: absolute; top: 55.5%; left: 69.2%;}
.graphBtn.p7 {position: absolute; top: 53%; left: 77.5%;}
.graphBtn.p8 {position: absolute; top: 56%; left: 84%;}



}