@charset "UTF-8";

/* ---------------------------------------------------------------------------
  ★共通
--------------------------------------------------------------------------- */
:root{
  scroll-padding-top: 171px;
}
html {font-size: 62.5%;scroll-behavior: smooth;}
body{  
  font-size: 1.6rem;
}
object {pointer-events: none;}
.sp {display: none !important;}
a[href^="tel:"] {pointer-events: none;}
a {
    text-decoration: none;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}
.pcFlex{display: flex;}
.pcFlex.half{
 justify-content: space-between;
}
.pcFlex.half >*{
 width: 47.6%;
}
.img_r {overflow: hidden;}
.img_r>img {float: right;
    width: 33%;
    margin-left: 15px;
    margin-bottom: 15px;
}
p,li,dt,dd,th,td,input{
  font-size: 1.6rem;
}
h1,h2,h3,h4,h5,h6 {
  font-size: 1.6rem;
}

section{
  padding: 100px 0;
}


/*img30Txts
========================================== */
.img30Txts {
	gap: 0 4%;
}
.img30Txts > .img,
.img30Txts > figure {
    width: 30%;
}
.img30Txts .txts{
	flex: 1;
}

/*img50Txts
========================================== */
.img50Txts {
	gap: 0 4%;
}
.img50Txts > .img,
.img50Txts > figure {
	flex: 1;
}
.img50Txts .txts{
	flex: 1;
}

/*tab
========================================== */
.tabBtn li{
	width: min(48%,240px);
}
.tabBtn li a{
	font-size: 1.8rem;
}

/*ボタン
========================================== */
.btnWrap{
 margin-top: 35px;
}

/*タイトル
========================================== */
.h2Tit {
	font-size: 3.6rem;
}
.h3Tit{
	font-size: 3.4rem;
	margin-bottom: 40px;
}
.h4Tit{
	font-size: 3rem;
	margin-bottom: 20px;
}

/*-- mainTitle --*/
.mainTitle{
	height: 150px;
}
.mainTitle h2{
	font-size: 4rem;
}

/*テキスト
========================================== */
.leadTxt{
	margin-bottom: 20px;
 font-size: 2.6rem;
 font-weight: 700;
 line-height: 1.85;
 text-align: center;
}

.leadWrap,
.leadWrap:has(+ section)
.leadWrap:has(+ section.bgLLBlue){
    padding: 50px 0;
}
.leadWrap .leadTxt{
	font-size: 2.2rem;
	margin-top: 20px;
}

/*-- table --*/
.basicTable >dt{
	padding: 15px 2.5%;
	width: 23%;
}
.basicTable >dd{
	padding: 15px 2.5%;
	width: 77%;
}
.basicTable >dt:last-of-type{
	border-bottom: none;
}
 .basicTable >dd:last-of-type{
	border-bottom: none;
}

table.basicTable thead th{
	font-size: 1.8rem;
}

/* =======================================
  ページャー
========================================== */
/*		anchorLink
-----------------------------*/
.anchorLink{
	padding: 35px 0;
	gap:0 30px;
}
.anchorLink ul{
	padding: 35px 0;
	gap:15px 20px;
}
.pageLinks{
	gap:15px 30px;
	 margin: 50px auto;
	padding: 35px 0 ;
}
.pageLinks ul{
	gap:15px 20px;
}
.anchorLink li,
.pageLinks li{
	flex: 1;
	height: 56px;
}
.anchorLink a,
.pageLinks li a{
	padding: 8px 10px;
}
.anchorLink + section{
	padding-top: 65px;
}
/*-- pageNavi --*/
.pageNavi{
	gap:0 1.5%;
 margin-top: 80px;
}
.pageNavi .current,
.pageNavi .inactive,
.pageNavi a{
	font-size: 1.8rem;
	width: 40px;
	height: 40px;
}

/*-- pager --*/
.pager{
	margin: 50px auto 0px;
}
.pager a{
	font-size: 1.6rem;
}

/* =======================================
	header
========================================== */
header::after {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  display: block;
  width: 50vw;
  height: 100%;
  background-color: var(--blue);
}
#logo{
 width: 12%;
  display: grid;
  align-items: center;
}
#headerText{
 height: 101px;
  padding: 26px min(3.6vw,50px) 0 0;
}
.headerLinks{
 position: absolute;
 top: 8px;
 right:min(3.6vw,50px);
  flex-wrap: wrap;
  gap: 9px 4%;
  width: min(42vw, 423px);
 z-index: 1;
}
.headerLinks .tel{
  display: flex;
  align-items: center;
}
.headerLinks .tel p{
  margin-left: 8px;
}
.headerLinks .contact,
.headerLinks .login{
  width: 48%;
}

header.fixed #headerText{
 padding-top: 15px;
 height: 82px;
}
header.fixed .headerLinks{
 gap:5px 4%;
}
header.fixed .headerLinks .tel a.telNum{
 font-size: 2.2rem;
}
header.fixed .headerLinks .contact a,
header.fixed .headerLinks .login a{
 height: 38px;
}
/* =======================================
	gnavi
========================================== */
.gnavi{
  border-radius: 30px 0 0 0;
  padding: 24px 30px 20px;
 padding-right: min(3vw,20px);
}
header.fixed .gnavi{
 padding-top: 10px ;
 padding-bottom: 10px ;
}
.gnavi.active{
}
#gnaviList{
  display: flex;
 justify-content: space-between;
  gap: min(2vw, 13px);
}
#gnaviList li{
}
#gnaviList li a{
}
#gnaviList li.hasSub{
 position: relative;
}
#gnaviList .hasSub:hover >a{
}
#gnaviList .sub li a:hover::after{
}
#gnaviList .hasSub:hover .sub{
	display: block;
	visibility: visible;
}
#gnaviList .sub{
	display: none;
	visibility: hidden;
	position: absolute;
	top: 100%;
	left: 50%;
 transform: translate(-50%, 0);
	z-index: 2;
	transition: all 0.6s ease-in-out;
	min-width:100px;
 border-radius: 2px;
 background: #dff9ff;
 margin-top: 8px;
}
#gnaviList .sub::before{
 content: "";
 display: block;
 border-radius: 50%;
 background: #dff9ff;
 width: 18px;
 height: 18px;
 position: absolute;
 top: -9px;
 left: 50%;
 transform: translate(-50%, 0);
}
#gnaviList .sub li{
}
#gnaviList .sub li a{
 position: relative;
	display: block;
	padding: 16px 20px 17px 30px;
 color: #5cc2db;
 font-size: 1.6rem;
	font-weight: 700;
	white-space: nowrap;
 line-height: 1.4;
 text-align: center;
}
#gnaviList .sub li + li{
 border-top: 1px #92d6de solid;
}
#gnaviList li a:hover{
  opacity: .7;
}

/* =======================================
	footer/#footContact
========================================== */
#footContactList.pcFlex{
  gap: 0 38px;
}
#footContactList li{
  width: min(48%,527px);
}
#footContactList a:hover{
  opacity: .7;
}

/* =======================================
	footer/#footBottom
========================================== */
#footBottom .inner1200.pcFlex{
  justify-content: space-between;
}
#footBottom .addsnsBox{
	align-items: flex-end
}
#footBottom .addsnsBox .insta{
	width: 50px;
	margin-left: 50px
}

#footBottom .tel{
  display: flex;
  align-items: center;
}
#footBottom .tel .time{
  margin-left: 1em;
}
.vtBox{
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 9px;
}
.vtBox figure{
  width: min(20%,104px);
}
.footerRight{
  width: 50%;
  display: flex;
  justify-content: end;
  gap: 0 8%;
}
.footerNavi li{
}

/* pgs
========================================== */
.pgs main{
	padding-bottom: 70px;
}
.pgs .h3Tit::before{
	width: 30px;
	height: 30px;
	top: -32px;
	left: calc(50% - 25px);
}
.pgs .h3Tit::after{
	width: 10px;
	height: 10px;
	top: -36px;
	left: calc(50% + 3px);
}

/* =======================================
	top
========================================== */
/*		#topCando
-----------------------------*/
#topCando {
margin-top: -10.3vw;
 padding-top: 16.85vw;
 padding-bottom: 190px;
}
@media screen and (max-width: 1440px) {
#topCando {
 padding-top:280px;
}
}/*--*/
@media screen and (max-width: 1120px) {
#topCando {
 padding-top:350px;
}
}/*--*/
#topCando .inner1200{
 max-width: 1170px !important;
}
#topCando .txts{
 width: 55.5vw;
 height: 55.5vw;
 max-width: 834px;
 max-height: 834px;
}

#topCando ul li{
 position: absolute;
}
#topCando ul li:nth-of-type(1){
 left: 0;
 top: 0;
}
#topCando ul li:nth-of-type(2){
 right: 0;
 top: 0;
}
#topCando ul li:nth-of-type(3){
 left: 0;
 bottom: 54px;
}
#topCando ul li:nth-of-type(4){
 right: 0;
 bottom: 105px;
}
#topCando ul li:nth-of-type(5){
 left: 50%;
 transform: translate(-50%, 0);
 top: min(92%,601px);
}

#topCando ul li:nth-of-type(1) figure{
 width: min(20.4vw,307px);
 height:min(20.4vw,307px);
}
#topCando ul li:nth-of-type(2) figure{
 width: min(22.05vw,331px);
 height:min(22.05vw,331px);
}
#topCando ul li:nth-of-type(3) figure{
 width: min(23.2vw,349px);
 height:min(23.2vw,349px);
}
#topCando ul li:nth-of-type(4) figure{
 width: min(19.18vw,288px);
 height:min(19.18vw,288px);
}
#topCando ul li:nth-of-type(5) figure{
 width: min(19.25vw,289px);
 height:min(19.25vw,289px);
}

/*		#topLinks PC
-----------------------------*/
#topLinks ul{
 justify-content: space-between;
}
#topLinks ul li{
  width: min(48%, 520px);
}

/*		#topContentsNews PC
-----------------------------*/
#topContentsNews.pcFlex {

}
#topContentsNews.pcFlex .txts{
  width: 230px;
  border-right: 1px dotted #999999;
}
#topContentsNews .newsList{
 width: calc(100% - 230px);
  padding-left: 34px;
}

/*		#topContentsLinks PC
-----------------------------*/
#topContentsLinks a:hover{
  opacity: .7;
}
@media screen and (max-width: 1160px) {
 #topContentsLinks.flex{
  gap:60px 2.5%;
 }
 #topContentsLinks a{
  width: 200px;
  height: 200px;
 }
}/*-max1000 only-*/


/* =======================================
	#about PC
========================================== */
#aboutLead .pcFlex{
	align-items: center;
}

#aboutPolicyBox figure{
	margin: -50px auto 30px;
}
#aboutPolicyBox p{
	font-size: 2rem;
}

#aboutSupportList.flex{
	gap: 4%;
}
#aboutSupportList li{
	flex: 1;
}
#aboutSupportList li figure img{
	margin-top: -30px;
}
#aboutSupportList li figure figcaption{
	font-size: 2.4rem;
}
#aboutSupportList + p{
	text-align: center;
}

#companyProfile .tabBtn{
	gap: 15px;
}
#companyProfile .tabBtn li{
	width: min(48%,480px);
}
#companyProfile .tabConts{
	padding: 30px;
}

/* =======================================
	#can
========================================== */
.canLeadCatch{
    margin-top: 40px;
    font-size: 2rem;
}
#canFeature .img50Txts,
#canFeature .strengthTraining,
#canFeature .trainingEffect{
	margin-top: 40px;
	padding: 30px;
}
#canFeature .strengthTraining .img50Txts{
	flex-direction: row-reverse;
}
#canFeature .strengthTraining .img50Txts + .h4Tit{
	margin: 40px auto 20px;
}
#canFeature .iconList li p{
	font-size: 1.8rem;
}
#canFeature .iconList li figure img{
    height: 97px;
}
#canFeature .iconList li.iconList01 figure img{
    height: 80px;
}
#canFeature .iconList li.iconList02 figure img{
    margin-left: 18px;
}
#canFeature .iconList li.iconList03 figure img{
    height: 89px;
}
#canFeature .img50Txts:nth-of-type(even){
  flex-direction: row-reverse;
}

#canProcess .img30Txts{
	align-items: center;
}
#canProcess .img30Txts:has(+ .img30Txts)::after{
    left: calc(50% - 50px);
    width: 100px;
    height: 30px;
}
#canProcess .img30Txts:has(+ .img30Txts)::before{
    bottom: -60px;
    left: calc(50% - 50px);
    width: 100px;
    height: 30px;
}
.canFivefieldList.flex{
    gap: 30px 3%;
}
.canFivefieldList li{
	padding: 20px 15px 15px;
}
.canFivefieldList li:nth-child(4),
.canFivefieldList li:nth-child(5){
	width: calc(92% / 2);
}
.canFivefieldList li h4{
    font-size: 2.4rem;
	}
.canFivefieldList li p{
	margin-top: 20px;
	padding: 20px;
}

/* =======================================
	#training PC
========================================== */
#trainingLead .iconList li{
  padding: 30px;
}
#trainingLead .iconList li:not(:last-child)::after{
	width: 25px;
	height: 60px;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
	top: calc(50% - 30px);
	right: -25px;
}
#trainingLead .iconList li figure{
	width: 65%;
}
#trainingLead .iconList li.iconList01 figure img{
    width: min(6.3vw,89px);
}
#trainingLead .iconList li.iconList02 figure img{
	margin-top: -10px;
    width: min(6.7vw,95px);
}
#trainingLead .iconList li.iconList03 figure img{
    width: min(5.8vw,82px);
}
#trainingLead .arrowList li:has(+li) figure{
    position: relative;
}
#trainingLead .arrowList li:has(+li) figure::after{
    position: absolute;
    right: calc(-30px - 2.5vw);
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    border: solid var(--blue);
    border-width: 10px 10px 0 0;
}
#trainingLead .iconList li h5{
	font-size: min(1.7vw,2.2rem);
}

#trainingFeature .iconList{
	gap: 10px 2.5%;
	padding: 30px 30px 25px;
}
#trainingFeature .iconList li.iconList01 figure img{
	 width: min(8.5vw,109px);
}
#trainingFeature .iconList li.iconList02 figure img{
   width: min(6vw,77px);
}
#trainingFeature .iconList li.iconList03 figure img{
	width: min(7.5vw,93px);
}
#trainingFeature .iconList li.iconList04 figure img{
	width: min(6.8vw,84px);
}
#trainingFeature .iconList li.iconList05 figure img{
  width: min(8.4vw,100px);
}
#trainingFeature .iconList li h5{
	font-size: min(1.5vw,2rem);
}
#trainingFeature .trainingFeatureCatch{
	text-align: center;
}

#trainingDetail .img30Txts{
	align-items: center;
}
#trainingDetail .img30Txts:has(+ .img30Txts)::after{
    left: calc(50% - 50px);
    width: 100px;
    height: 30px;
}
#trainingDetail .img30Txts:has(+ .img30Txts)::before{
    bottom: -60px;
    left: calc(50% - 50px);
    width: 100px;
    height: 30px;
}
#trainingDetail .img30Txts .h4Tit .processNum{
	padding: 0 0.3em;
}

#trainingDetailFeature{
	padding: 40px 30px;
}
#trainingDetailFeature h4 {
	font-size:min(3.1vw,3.6rem) ;
}
#trainingDetailFeature .txts{
 padding: 40px 40px 30px;
}

.trainingCaseBox{
	margin-bottom: 40px;
	padding: 50px;
}
.trainingCaseBox .h4Tit{
	font-size: 2.4rem !important;
	margin-top: -70px;
	width: 100px;
	height: 100px;
}
#trainingCase .arrowList{
margin-top: -50px;
    margin-bottom: 20px;
		padding: 30px 60px;
}
#trainingCase .arrowList li:has(+li)::after {
	width: 25px;
	height: 35px;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
	top: calc(50% - 15px);
	right: -15%;
}

/* =======================================
	#service PC
========================================== */
.serviceTargetListWrap ul{
    width: 44%;
}
#serviceTarget .arrowList li.targetAge{
    font-size: 3rem;
}
#serviceTarget .arrowList li.targetAge .fontL{
    font-size: 1.8em;
}
#serviceTarget .arrowList li.targetService{
    font-size: 2.2rem;
}
#serviceTarget .arrowList{
	gap: 40px;
}
#serviceTarget .arrowList li:has(+li)::after{
    left: calc(50% - 15px);
    bottom: -15px;
    width: 30px;
    height: 15px;
}

.serviceSupportBox.img30Txts{
    align-items: center;
		margin-top: -30px;
}
.serviceSupportBox.img30Txts:nth-of-type(even){
    flex-direction: row-reverse;
}
.serviceSupportBox .img figure img{
object-fit: cover;
 width: 100%;
 height: 260px;
 aspect-ratio:400/260;
}
.serviceSupportBox .img figure + figure{
    margin-top: 30px;
}
.serviceSupportBox figcaption{
    bottom: 10px;
    right: 10px;
    padding: 6px 15px;
}
.serviceSupportBox figcaption span{
	font-size: 1.4rem;
}
.serviceSupportBox .txts{
    position: relative;
    z-index: -1;
}
.serviceSupportBox:nth-of-type(odd) .txts{
    margin-left: -20vw;
    padding-left: 22vw;
		padding-right: 8vw;
}
.serviceSupportBox:nth-of-type(even) .txts{
    margin-right: -20vw;
    padding-right: 22vw;
		padding-left: 8vw;
}
.serviceSupportBox .txts p{
    font-size: 1.8rem;
}
#serviceSupport .h3Tit{
	margin-bottom: 15px;
}
#serviceSupport .bdrBox{
	padding: 30px 30px 40px;
}
#serviceSupport .bdrBox p{
	font-size: 2.2rem;
}

.serviceVoiceList.flex{
    gap: 30px 4%;
}
.serviceVoiceList li{
    padding: 30px;
}
.serviceVoiceList li h5{
	font-size: 2rem;
	margin-bottom: 20px;
	padding: 15px 15px 20px;
}

#serviceFlow .tabBtn li{
	width: 40%;
}
.serviceFlowBox .flowCont{
    display: flex;
		align-items: center;
    gap: 0;
}
.serviceFlowBox .flowCont .txts{
    flex: 1;
}
.serviceFlowBox .flowCont .txts p{
	padding-right: 2em;
}
.serviceFlowBox .flowCont figure{
    width: 40%;
}

/* =======================================
	#howto
========================================== */
#howtoFlow .iconList{
	margin: 0 auto;
	width: 75%;
}
#howtoFlow .iconList li{
	gap: 0 4%;    
  align-items: center;
	margin-bottom: 65px;
}
#howtoFlow .iconList li::before{
bottom: -60px;
  left: calc(50% - 50px);
  width: 100px;
  height: 30px;
}
#howtoFlow .iconList li::after{
	bottom: -59px;
	left: calc(50% - 50px);
  width: 100px;
  height: 30px;
}
#howtoFlow .iconList li .txts{
    flex: 1;
}
#howtoFlow .iconList li .txts .btn{
	margin-left: auto;
	margin-right: 0;
}

#howtoTrial p{
	line-height: 1.8;
	text-align: center;
}
#howtoTrialList li{
	flex: 1;
}
#howtoTrialList li figure figcaption {
	font-size: 2rem;
	margin-top: -3em;
}

.howtoPriceTable{
	padding: 30px 4.2%;
	width: 75%;
}
.howtoPriceTable dt{
	font-size: 2rem;
	 width: calc(100% - 3rem*7);
}
.howtoPriceTable dd{
	width: 7em;
	font-size: 3rem;
}
.howtoPriceNote{
    font-size: 2rem;
		text-align: center;
}
#howtoPrice .h4Tit{
	font-size: 2.4rem;
	margin-top: 60px;
}
#howtoPrice .h3Tit + p{
	text-align: center;
}

#howtoTransportationBox .img50Txts{
    flex-direction: row-reverse;
		align-items: center;
}

/* =======================================
	#staff PC
========================================== */
.staffVoiceBox{
    margin-bottom: 30px;
		padding: 30px;
}
.staffVoiceBox dt .name{
		font-size: 2.2rem;
}
.staffVoiceBox dt .name span{
	font-size: 1.8rem;
}
.staffVoiceBox .license{
    font-size: 1.6rem;
}

#staffSlide{
  padding: 100px 0;
}

/* =======================================
	#esg PC
========================================== */
#esgAbout{
	padding-top: 60px;
}
.esgAboutBox{
    margin-top: 40px;
}
.esgAboutBox .h3Tit{
	margin-bottom: 15px;
}
.esgAboutBox .txts{
  padding: 30px;
}

.esgInitiativeSubti{
    margin-bottom: 40px;
}
.esgInitiativeSubti h3{
	font-size: 1.8rem;
	line-height: 4rem;
}
.sdgsIcons.flex{
    align-items: end;
}
.esgInitiativeBox{
    padding: 100px 0;
}
.esgInitiativeBox .esgBox{
	padding: 30px;
}
.esgInitiativeSubti.pcFlex{
    gap: 40px;
}
.esgInitiativeSubti h3 .en{
    font-size: 2em;
}
.esgInitiativeSubti h3 .en span{
    font-size: 2em;
}

/* =======================================
   recruit PC
========================================== */
#recruitLead .pcFlex{
	align-items: center;
}
#recruitBenefit ul{
 flex-flow: row wrap;
 justify-content: center;
 gap:35px 3.5%;
}
#recruitBenefit ul li{
 width: 31%;
 padding: 25px;
}
#recruitBenefit ul li figure{
	height: 80px;
}
#recruitBenefit ul li:nth-child(1) figure img{
	height: 60px;
	margin-top: 10px;
}
#recruitBenefit ul li:nth-child(5) figure img,
#recruitBenefit ul li:nth-child(6) figure img{
	height: 70px;
	margin-top: 10px;
}
#recruitBenefit ul li .h4Tit{
	font-size: 2rem;
}

#recruitEducation .pcFlex{
 justify-content: space-between;
}
#recruitEducation .pcFlex figure{
 width: 35%;
}
#recruitEducation .pcFlex .txts{
 width: 60%;
}

/* =======================================
   program PC
========================================== */
#selfEvaluation h4{
	font-size: 2.2rem;
	margin-bottom: 15px;
}
#selfEvaluation h4:not(:first-of-type){
 margin-top: 60px;
}
#selfEvaluation .pcFlex{
	flex-wrap: wrap;
	gap: 0 5%;
}
#selfEvaluation .pcFlex li{
	font-size: 1.8rem;
	width: 47.5%;
}
#supportService .pcFlex{
 justify-content: space-between;
}
#supportService .pcFlex .txts{
 width: 55%
}
#supportService .pcFlex figure{
 width: 40%;
}

/* =======================================
	news PC
========================================== */
/*		一覧
-----------------------------*/
#newsList .pageNavi{
	margin-bottom: 0;
}
.newsBox .pcFlex{
 justify-content: space-between;
}
.newsBox figure{
 width: 30%;
}
.newsBox .txts{
 width: 66%;
}

/*	詳細　single
-----------------------------*/
article{
 padding: 100px 0;
}
#newsDetail h3{
	font-size: 2.4rem;
}
.newsDetailCont:has(figure){
 display: flex;
	gap: 40px;
}
.newsDetailCont:has(figure) figure{
	width: 400px;
	text-align: center;
}
.newsDetailCont:has(figure) figure img{
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.newsDetailCont:has(figure) .txts{
	flex: 1;
}

/* =======================================
	contact
========================================== */
#contactLead{
	padding: 50px 0;
}
#contactLead .leadTxt{
	font-size: 2.2rem;
}

/* =======================================
	form
========================================== */
#contactForm{
 padding-bottom: 150px;
}

/* =======================================
	thanks
========================================== */

#thanks{
}

#thanks p{
  font-size: 1.8rem;
}

/* =======================================
	privacypolicy
========================================== */
#privacyPolicy{
	margin-top: 50px;
}
#privacyMain .h4Tit{
	font-size: 2.4rem;
	margin-bottom: 10px;
}
#privacyMain .h5Tit{
	margin-top: 40px;
}