@charset "UTF-8"; * {margin: 0; padding: 0;}

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


/* 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(--s16) calc(var(--vw)*48) var(--s16) var(--s32); 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)*90);}
header .inner .logo svg { width: 100%; height: 100%; object-fit: contain;}
header .inner .gmenu { display: flex; justify-content: flex-end; width: fit-content;}
header .inner .gmenu a { display: block; margin-left: calc(var(--vw)*85);text-align: center;}
header .inner .gmenu a span {display: block; line-height: 1;}
header .inner .gmenu a span:first-child { color: var(--fc1); font-size: 85%;transition: all .5s; margin-bottom: calc(var(--vw)*6); }
header .inner .gmenu a:hover span:first-child { color: var(--orange1);transition: all .5s; }
header .inner .gmenu a span:last-child { color: var(--fc1); opacity: .6; font-size: 50% ;}
header .inner .spbtn { display: none;}

.spmenu {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:1920/380; overflow: hidden; width: 100%; height: auto;}
footer .cta .txt {position: absolute; z-index: 2; top: 0; left: 0; aspect-ratio:1920/380; 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));}
footer .cta .txt h2 { font-weight: bold; font-size: 200%; margin-bottom: var(--s24);}
footer .cta .txt p { margin-bottom: var(--s64);}
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;}
footer .cta .txt a:hover { padding: var(--s16) var(--s32) var(--s16) 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(--s128);}
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: 1.5vw; height: 1.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:1920/380; overflow: hidden; width: 100%; height: auto; }
footer .cta .bg img { display: block; width: 100%; height: 100%; object-fit: cover;}
footer .gmenu { width: 100%; box-sizing: border-box; display: flex; justify-content: space-between;background:var(--c1); padding:var(--s64); border-bottom: solid 1px rgba(255,255,255,.15);}
footer .gmenu a { display: block;text-align: center;}
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; font-size: 85%;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: 80%;}


/* 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: 55%;	max-height: 80vh;	overflow-y: auto;	margin: var(--s64) auto 0;	padding: var(--s64);	background: #fff;}
.modal__close {	position: absolute;	top: 16px;right: 16px; width: var(--s32); height: auto; aspect-ratio:1/1;}
.modal__close svg {width: 100%; height: 100%; }

#modal_committee .modalbox {}
#modal_committee .modalbox .top { width: 100%; display: flex; justify-content: flex-start; margin-bottom: var(--s80);}
#modal_committee .modalbox .top .left { width: 50%; display: flex; justify-content: flex-start; align-items: center;}
#modal_committee .modalbox .top .left .img { width: 20%; margin-right: 5%;}
#modal_committee .modalbox .top .left .img img {}
#modal_committee .modalbox .top .left .txt { flex: 1;}
#modal_committee .modalbox .top .left .txt h2 { font-size: 165%;}
#modal_committee .modalbox .top .left .txt p {}
#modal_committee .modalbox .top .right {width: 50%;display: flex; justify-content: center; align-items: center;padding: 0 var(--s64); box-sizing: border-box; border-left: solid 1px 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;}
/* #modal_committee .modalbox .btm .tableList {border-top: solid 1px var(--linegray2);}
#modal_committee .modalbox .btm .tableList .cell { width: 100%; display: flex; justify-content: flex-start; align-items: center; border-bottom: solid 1px var(--linegray2);}
#modal_committee .modalbox .btm .tableList .cell .left {width: 25%; border-right: solid 1px var(--linegray2); padding: var(--s16) var(--s8); box-sizing: border-box;}
#modal_committee .modalbox .btm .tableList .cell .right {width: 75%; padding: var(--s16) var(--s16) var(--s16) var(--s64); box-sizing: border-box;}
#modal_committee .modalbox .btm .tableList .cell:nth-of-type(odd) {background: var(--bggray1);} */

.companyprofile_person .modal__content {width: 70%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; height: fit-content;}
.companyprofile_person .modalbox .top { width: 100%; display: flex; justify-content: flex-start;}
.companyprofile_person .modalbox .top .left { width: 28%; display: block;}
.companyprofile_person .modalbox .top .left .img { width: 50%; margin-bottom: 5%;}
.companyprofile_person .modalbox .top .left .img img {}
.companyprofile_person .modalbox .top .left .txt { flex: 1;}
.companyprofile_person .modalbox .top .left .txt h2 { font-size: 165%;}
.companyprofile_person .modalbox .top .left .txt p {}
.companyprofile_person .modalbox .top .right {width: 72%;display: flex; justify-content: center; align-items: center;padding: 0 var(--s64); box-sizing: border-box; border-left: solid 1px var(--linegray2);}


.tableList {border-top: solid 1px var(--linegray2);}
.tableList .cell { width: 100%; display: flex; justify-content: flex-start; align-items: center; border-bottom: solid 1px var(--linegray2); font-size: 90%;}
.tableList .cell .left {width: 25%; padding: var(--s16); box-sizing: border-box;}
.tableList .cell .right {width: 75%; border-left: solid 1px var(--linegray2); padding: var(--s16) var(--s16) var(--s16) var(--s64); box-sizing: border-box;}
.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 .cell .right { padding: var(--s16);}
.tableList.company.company .cell .left {width: 25%;}
.tableList.company.company .cell .right {width: 75%; display: flex; justify-content: space-between; align-items: center;}
.tableList.company.company .cell .right img {width: 45%; display: block;}
.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: 1.5vw; height: 1.5vw; margin-left: 1vw;}
.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/.64; overflow: hidden;}
.fadeSlider__item.is-active{	position:relative;	opacity:1;	pointer-events:auto;}
.fadeSlider__item img{	width:100%;	display:block; object-fit: cover;}
.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(--s16) var(--s16) var(--s16) 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)*46) 0 var(--s32);}
.linkbtn span:last-child {position: absolute; top: 0; bottom: 0; margin: auto; right: var(--s16); display: flex; justify-content: center; align-items: center; width: 1.5vw; height: 1.5vw; background: #fff; border-radius: 50%; }
.linkbtn span:last-child svg { fill:var(--orange1);}






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

section {display: flex; justify-content: flex-start; align-items: flex-start; width: 100%; margin-bottom: var(--s320);}
section p {line-height: 1.8; }

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

.pagettl .photoCredit {position: absolute; z-index: 3; font-size: 90%; right: 3vw; bottom: 3vw; text-align: right; color: #fff;}
.secttl { width: calc(var(--vw) * 360); display: flex; justify-content: flex-start; align-items: flex-start; margin-top: calc(var(--vw) * 12);}
.secttl:before { display: block; content:""; width: calc(var(--vw) * 104); height: 1px; background: var(--linegray1); margin-top: var(--s16);}
.secttl p { width: calc(var(--vw) * 256); padding-left: var(--s24); box-sizing:border-box; font-size: 80%;}

.secmain { flex:1;}
.secmain h2 {font-size: 165%; margin-bottom: var(--s128);}
.secmain .duoCell {width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
.secmain .duoCell h2 {width: 100%;}
.secmain .duoCell .left {width: calc(var(--vw)*584); margin-right:var(--s32);}
.secmain .duoCell .left h3 {font-size: 120%; margin-bottom: calc(var(--vw)*80); padding-right: var(--s32);line-height: 1.8;}
.secmain .duoCell .left p {margin-bottom: calc(var(--vw)*80); padding-right: var(--s32);}
.secmain .duoCell .right {width: calc(var(--vw)*840); height: fit-content; margin-right:calc(var(--vw) * 104);}
.secmain .duoCell .right .infoGraphic { display: block; width: calc(var(--vw)*584); height: auto;}
.secmain .duoCell .right.slider { padding:0 var(--s64); box-sizing: border-box;}

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


.secmain .midCell {width: calc(var(--vw)*1272); }
.secmain .midCell p {margin-bottom: calc(var(--vw)*80); display: block; overflow: hidden;}
.secmain .midCell .duoImg {width: 100%; display: flex; justify-content: space-between; align-items: flex-start; padding-top: calc(var(--vw) * 48);}
.secmain .midCell .duoImg .cell {width: calc(var(--vw)*584);}

.secmain .innerCell {width: calc(var(--vw)*1560); margin-top: var(--s256); display: flex; justify-content: flex-start; align-items: flex-start; gap:var(--s64);}
.secmain .innerCell .cell {width: calc(var(--vw)*584);}
.secmain .innerCell .cell.wide {width: calc(var(--vw)*944);}
.secmain .innerCell .cell .cellHeader {position: relative; display: flex; justify-content: flex-start; align-items: center;  margin-bottom: var(--s64); 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: 140%;}
.secmain .innerCell .cell p {margin-bottom: calc(var(--vw)*60);}

.secmain .innerCell .cell.full {width: calc(var(--vw)*1272);}
.secmain .innerCell .cell.full .linkbtn {margin-left: auto; margin-right: auto;}

.inlineLinkCell {margin-top: 0 !important; padding-top: var(--s256);}




/* Separater */
.secDevider {position: relative;width: 100%;margin-bottom: var(--s320); aspect-ratio:1722/380; overflow: hidden; background: #000;}
.secDevider p {position: relative; z-index: 2; display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; height: auto; aspect-ratio:1722/380; font-size: 175%; color: #fff; text-align: center; font-weight: bold;filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.6));}
.secDevider .img {position: absolute; z-index: 1; top: 0;left: 0; width: 100%; height: auto; aspect-ratio:1722/380;}
.secDevider .img img { width: 100%; height: 100%; object-fit: cover; opacity: .8;}

/* Recruit */
.joinUs {margin-bottom: 0;}
.recruitAceBox {display: block; margin-right: auto; margin-left: auto; margin-top: calc(var(--vw)*140);}
.recruitAceBox h2 {text-align: center; margin-bottom: var(--s64);}
.recruitAceBox .fullWidthCell {position: relative; width: 100%; height: auto; aspect-ratio:1/.3;}
.recruitAceBox .fullWidthCell .top {position: relative; z-index: 2; width: 100%; height: auto; aspect-ratio:1/.3; display: flex; justify-content: center; align-items: center;}
.recruitAceBox .fullWidthCell .top p {display: block; width: 40%; height: auto;}
.recruitAceBox .fullWidthCell .bottom {position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: auto; aspect-ratio:1/.3; display: flex; justify-content: center; align-items: center;}
.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) * 450);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(--s64) calc(var(--vw)*45);}
.memberBox .cell {display: block; width: calc(var(--vw)*266); 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: flex;justify-content: flex-start; align-items: flex-start;	background:#fff;	border-radius:20px;	padding:var(--s64);	box-sizing:border-box;}
.memberModal__close{	position:absolute;top: 16px;right: 16px; z-index: 10; width: var(--s32); height: var(--s32);	border:none;	background:none;	font-size:28px;	cursor:pointer;}
.memberModal__panel .memberModal__head {width: 25%; margin-right: 5%;}
.memberModal__head .photo{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: 110%; margin: var(--s16) 0 var(--s8);}
.memberModal__panel .memberModal__head .txt {display: flex; justify-content: flex-start; align-items: center; margin-top: var(--s16);}
.memberModal__panel .memberModal__head .txt h3 {text-align: left; margin: 0 var(--s16) 0 0 ; width: fit-content;}
.memberModal__panel .memberModal__head .txt p { margin: 0; width: fit-content;}
.memberModal__panel .memberModal__body {flex:1; }
.memberModal__panel .memberModal__body .qa {margin-bottom: var(--s32);}
.memberModal__panel .memberModal__body h4 {font-size: 100%; margin-bottom: var(--s8); padding-left: var(--s16); border-left: solid 5px var(--orangetxt);}
.memberModal__panel .memberModal__body p { margin-bottom: 0; font-size: 80%; 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(--s64); overflow: hidden; padding: var(--s32) var(--s64); 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(--s64) auto 0; text-align: left; }
.requirementsBox .detailBox .detailBoxCell:nth-of-type(1) {margin-top: 0;}
.requirementsBox .detailBox .detailBoxCell h4 {font-size: 125%; margin-bottom: var(--s16); margin-top: var(--s64);}
.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: flex; justify-content: flex-start; border-bottom: solid 1px var(--linegray2); font-size: 90%;}
.requirementsBox .detailBox .detailBoxCell .listBox .cell .left {width: 20%; padding: var(--s16); box-sizing: border-box;}
.requirementsBox .detailBox .detailBoxCell .listBox .cell .right {width: 80%; border-left: solid 1px var(--linegray2); padding: var(--s16); box-sizing: border-box; font-size: 90%;}
.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(--s64); 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(--s64); border-bottom: solid 1px var(--linegray2); transition: all .5s;}

/* ------------------------------
form
------------------------------ */
.entryForm{width:100%;}
.formRow{	margin-bottom:var(--s64);}
.formRow.half{display:flex;gap:var(--s32);}
.formRow.half .formCell{width:50%;}
.formCell label{display:flex;	align-items:center;	gap:var(--s16);	margin-bottom:var(--s16);}
.formCell .ttl{	font-weight:bold; font-size: 85%;}
.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:1rem; cursor:pointer;}
.checkLabel input{ width:24px; height:24px; accent-color:var(--orange1);}
.formAgree.entry .checkLabel:nth-of-type(1) {margin-right: var(--s64);}
/* ------------------------------
 submit
------------------------------ */
.formSubmit{ display:flex; justify-content:center;}
.formSubmit button{ border:none; cursor:pointer; font-family:inherit;}
.formSubmit button span {font-size: 135%;}
.formSubmit .linkbtn{ min-width:24rem;}

/* 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 {margin-right: var(--s16);}
.ceoMessage .left p img {width: 10vw; height: auto;}
.ceoMessage .right {width: 6vw; height: auto; }
.ceoMessage .right img {width: 100%; height: auto; aspect-ratio:1/1;}

.ourJourney {width: 100%; display: flex; justify-content: flex-start; align-items: center; margin-bottom: var(--s128);}
.ourJourney h2 {width: fit-content; margin-right: var(--s16); margin-bottom: 0!important;}
.ourJourney svg {width: var(--s32); height: auto;}


/* Article List */
.secmain section.articleList {width: calc(var(--vw)*1272); margin-bottom: 0!important;}
.pageArticleList {width: calc(var(--vw)*1272);}

.pageArticleList .artList {}
.pageArticleList .artList a { transition: all .5s;}
.pageArticleList .artList a:hover { transition: all .5s;}
.pageArticleList .artList .cell {padding: calc(var(--vw)*64) 0; border-bottom: solid 1px var(--linegray2);width: 100%; display: flex; justify-content: flex-start; align-items: center;}
.pageArticleList .artList .ttl {width: 67%; padding: 0 var(--s64); box-sizing: border-box;}
.pageArticleList .artList .ttl .artTtl {display: block; font-size: 130%; font-weight: bold; color: var(--fc1); margin-bottom: var(--s24);}
.pageArticleList .artList .ttl .artTtl:hover {color: var(--orange1);}
.pageArticleList .artList .ttl p {}
.pageArticleList .artList .ttl .taglist {width: 100%; display: flex; justify-content: flex-start; flex-wrap: wrap; gap: var(--s16); margin-top: var(--s24);}
.pageArticleList .artList .date {width: 15%; display: flex; justify-content: space-between; align-items: center;}
.pageArticleList .artList .arrow {width: calc(var(--vw)*15);}
.pageArticleList .artList .arrow svg {width:100%; height: auto; object-fit: contain;}

.articleList .artList:nth-of-type(1) { border-top: solid 1px var(--linegray2);}
.articleList .img {position: relative; width: 18%; height: auto; overflow: hidden; aspect-ratio:1/1;}
.articleList .img img {display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 100%; height: 100%; object-fit: contain; object-position: center; transition: all .5s;}
/* .articleList .img:hover img {width: 110%; height: 110%; transition: all .5s;} */
.articleList.listCasestudy .ttl {flex:1; padding: 0 var(--s64);}
.articleList.listCasestudy .arrow {width: calc(var(--vw)*25);}


.clientName { width: fit-content; background: var(--fc1); padding: 6px var(--s16); margin-bottom: var(--s16); color: #fff; font-size: 80%;}

.articleList.listNews .pageArticleList .artList .cell .ttl .artTtl  { margin-bottom: 0;}

.taglist a {display: inline-block; padding: var(--s8) var(--s16); font-size: 80%; border-radius: 10px; border: solid 1px var(--linegray2); color: var(--fc1);}
.taglist a:hover {border: solid 1px var(--orange1); color: var(--orange1);}

.noArticle {margin-top: var(--s16);}



/* Article List cagetory list page */
.pagettl.categoryPageTtl {margin-bottom: 0;}
.categoryNavi { padding: var(--s64) 0; background: var(--bggray2); margin: 0 auto var(--s128);}
.categoryNavi ul {width: calc(var(--vw)*1456); margin-right: auto; margin-left: auto; display: flex; justify-content: flex-start; flex-wrap: wrap; gap:var(--s32) var(--s64);}
.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; font-size: 80%; padding-left: 1em; 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: .5em;}

section.categoryPage {width: calc(var(--vw)*1456); margin-right: auto; margin-left: auto; margin-bottom: var(--s128);}
section.categoryPage .pageArticleList {width: 100%;}

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

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

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

article.insights .articleBody{ width: calc(var(--vw)*1272); 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: calc(var(--vw)*1272); margin: 0 auto var(--s128); border: solid 1px var(--linegray2); background: var(--bggray2); padding: var(--s64); box-sizing: border-box; font-size: 90%;}
.articleAuthor .top { width: 100%; display: flex; justify-content: flex-start; align-items: center;}
.articleAuthor .top h2 { font-size: 125%; margin-right: var(--s16);}
.articleAuthor .top h3 { font-size: 145%; margin-right: var(--s16);}
.articleAuthor .top .profile p { display: inline;}

article.news .articleBody,article.casestudy .articleBody { width: calc(var(--vw)*1272); margin: 0 auto var(--s320); }

.pager {width: calc(var(--vw)*1456); margin-right: auto; margin-left: auto; margin-bottom: var(--s320);}
.pager .nav-links {display: flex; justify-content: center; align-items: center; gap:2vw;}
.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/.5; overflow: hidden; display: flex; justify-content: center; align-items: center; margin-bottom: var(--s128);}
.kv .txt {padding-left: var(--s256);}
.kv .txt h1 {font-size: 48px; line-height: 1; margin-bottom: 16px; letter-spacing: .1em;backdrop-filter: blur(6px); padding: 8px;}
.kv .txt h2 {font-size: 28px; line-height: 1; margin-bottom: 64px; letter-spacing: .1em;backdrop-filter: blur(6px); padding: 8px;}
.kv .txt h1 span {color: var(--c2);}
.kv .txt br {display: none;}
.kv .txt h2 span {color: var(--c2);}
.kv .txt p {font-size: 17px; line-height: 2; letter-spacing: .3em;backdrop-filter: blur(6px); padding: 8px;}
canvas { position:absolute;top: 0; z-index: 1; left: -30vw; pointer-events:none; aspect-ratio:1/.5; }

.indexServiceBtnBox {  width: 100%; display: flex; justify-content: flex-start; flex-wrap: wrap; gap:var(--s32);}
.indexServiceBtnBox a {display: flex; justify-content: flex-start; align-items: center; width: 48.5%; padding: var(--s16) var(--s32); 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: 20%; height: auto; aspect-ratio:1/1;}
.indexServiceBtnBox a .txt {flex:1; color: #fff; margin: 0 5%; font-size: 115%;}
.indexServiceBtnBox a .btn { font-size: 90%; color: #fff; margin-right: 5%;}
.indexServiceBtnBox a .arrow { width: 7%; 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)*60);}
.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)*60);}
.graphTip{ position:absolute;z-index:3; display:none; background:#fff; border:1px dashed #999; padding:12px;white-space:nowrap; transform:translateX(-50%);}
.graphBtn{position:absolute;font-size:var(--base);background:var(--fc1);color:#fff;font-weight:bold;border-radius:50%;aspect-ratio:1/1;width:calc(var(--base)*1.7);height:calc(var(--base)*1.7);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: 24.5%;}
.graphBtn.p2 {position: absolute; top: 62%; left: 39%;}
.graphBtn.p3 {position: absolute; top: 61%; left: 48.5%;}
.graphBtn.p4 {position: absolute; top: 57%; left: 53.5%;}
.graphBtn.p5 {position: absolute; top: 53%; left: 63%;}
.graphBtn.p6 {position: absolute; top: 55.5%; left: 68.2%;}
.graphBtn.p7 {position: absolute; top: 53%; left: 78%;}
.graphBtn.p8 {position: absolute; top: 56%; left: 83%;}



}


/*
rgba(173,173,173,.45)
calc(var(--vw)*1456)


h1
265
h1 + p
165

h2
165

h3
120
*/