@charset "UTF-8";

/* ---------------------------------------------------------------------------
  ★共通
--------------------------------------------------------------------------- */
:root{
  scroll-padding-top: 154px;
}
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;
}



/*タイトル
========================================== */



/*-- table --*/
.basicTable {  
  display: grid;
  grid-template-columns: 268px 1fr; /* 左列固定、右列可変 */
  border-collapse: collapse;
}
.basicTable dt{
}
.basicTable dd{
}

/* =======================================
	header
========================================== */


/* =======================================
	gnavi
========================================== */
#gnaviList li a:hover{
  opacity: .7;
}


/* =======================================
	footer
========================================== */
footer .inner1200.pcFlex{
  justify-content: space-between;
}






/* =======================================
	modal
========================================== */
.modal-head.pcFlex{
  gap: 44px;
}
.modal-head.pcFlex .txts{
  position: relative;
  display: grid;
  align-items: center;
  padding: 60px 0;
}
.modal-head.pcFlex .txts p{
  position: absolute;
  left: 0;
  bottom: 0;
}
.modal-boxs.pcFlex{
  gap: 44px 5.8%;
  flex-wrap: wrap;  
}
.modal-boxs.pcFlex .modal-box{
  width: 47.1%;  
}

.modal-profile.pcFlex{
  flex-direction: row-reverse;
  align-items: end;
  justify-content: end;
  gap: 10px;
}
.modal-profile.pcFlex img{
  width: min(52.8%, 581px);
}



/* =======================================
	tab
========================================== */



/* =======================================
	top
========================================== */


/*		#mv
-----------------------------*/


/*		#topMessage
-----------------------------*/
#topMessage .inner1200.pcFlex {
  gap: 30px;
}
#topMessage .txts {
  flex: 1;
}
#topMessage .imgs {
  width: min(53%, 636px);
}


/*		#topHistory
-----------------------------*/
/*
#timelineScroll {
    overflow-x: scroll;
    padding-bottom: 65px;
}
#timeline {
    width: 1200px;
    overflow: hidden;
}
*/
@media screen and (max-width: 1100px) and (min-width: 901px) {
  #timeline::before{
    transform: translateY(97px) rotate(-7deg);
  }
  #timelineShowa.timelineBox::before {
    bottom: -82px;
  }
  #timelineHeisei.timelineBox::before {
    top: -115px;
  }/*
  #timelineMirai .timelineBoxInner{
    display: block;
  }
  #timelineMirai .timelineBoxInner figure{
    margin-top: 6px;
  }*/
  
}/* //end for PC */
@media screen and (max-width: 1200px) and (min-width: 1100px) {
  #timeline::before{
    transform: translateY(97px) rotate(-7deg);
  }
  #timelineShowa.timelineBox::before {
    bottom: -92px;
  }
  #timelineMirai.timelineBox::before {
    top: -106px;
  }
}/* //end for PC */


/*		#topChallenge
-----------------------------*/
.topChallengeList.pcFlex{
  flex-wrap: wrap; 
  gap: 37px 3%; 
}
.topChallengeList.pcFlex li{
  width: calc(94% / 3);
}
.topChallengeList.pcFlex li:nth-of-type(4){
  width: 100%; 
}

.topChallengeList li div.pcFlex:has(.topChallengeData){
  /*padding-left: 100px;  */
  gap: 3%;
  justify-content: end;
}
.topChallengeList li div > p{
  width: 380px;
}


/*		#topCatch
-----------------------------*/



/*		#topWork
-----------------------------*/
.topWorkBox .imgs::after{  
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(42, 76, 146, 1) 0%,
    rgba(42, 76, 146, 1) 40%,
    rgba(64, 64, 64, 0) 55.2%,
    rgba(64, 64, 64, 0) 58%
  );
  mix-blend-mode: darken;
  pointer-events: none;
}
.topWorkBox:nth-of-type(even) .imgs::after{  
  background: linear-gradient(
    270deg,
    rgba(42, 76, 146, 1) 0%,
    rgba(42, 76, 146, 1) 40%,
    rgba(64, 64, 64, 0) 55.2%,
    rgba(64, 64, 64, 0) 58%
  );
}

/*		#topInterview
-----------------------------*/
.topInterviewList.flex{
  margin-right: calc(50% - 50vw);
  gap: 22px;
}
.topInterviewList li {
  flex: 0 0 350px;
}


/*		#topStyle
-----------------------------*/
.topStyleList.pcFlex{
  justify-content: center;
}
.topStyleList.pcFlex li{
  width: min(33%, 334px);
}
.topStyleBoxWrap.pcFlex{
  gap: 40px 3.3%;
  justify-content: center;
}
.topStyleBoxWrap.pcFlex .topStyleBox{  
  display: flex;
  flex-direction: column;
}
.topStyleBoxWrap.pcFlex .topStyleBox .bgW{
  flex-grow: 1;
}
#topDataBox07 .bgW ul{
  position: relative;
  padding-right: 92px;
}
#topDataBox07 .bgW li#topDataBox07_3{
  position: absolute;
  top: 0;
  right: 0;
  padding: 15px 5px;
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  text-orientation: upright;
  -webkit-text-orientation: upright;
}


/*		#topData
-----------------------------*/
#topDataList {
  display: flex;
  display: grid;
  grid-template-columns: 1fr 17% 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 60px 2.8%;
}
#topDataBox01 {
  grid-row: 1;
  grid-column: 1 / 3;
}
#topDataBox02 {
  grid-row: 1;
  grid-column: 3;
}
#topDataBox03 {
  grid-row: 1;
  grid-column: 4;
}
#topDataBox04 {
  grid-row: 2;
  grid-column: 1 / 4;
}
#topDataBox05 {
  grid-row: 2;
  grid-column: 4;
}
#topDataBox06 {
  grid-row: 3;
  grid-column: 1;
}
#topDataBox07 {
  grid-row: 3;
  grid-column: 2 / 5;
}
.topDataBox .bgW:not(.pcFlex){
  display: grid;
  place-content: center;
}
#topDataBox04 .bgW.pcFlex{
  gap: 0 8.78%;
}
#topDataBox04 .bgW.pcFlex .txts + figure{
  margin-right: 4.86%;
  flex: 1;
  transform: translateY(36px);
  display: grid;
  align-items: end;
}
#topDataBox04 .bgW.pcFlex .txts + figure img{
}


/*		#topTraining
-----------------------------*/
#topTraining .bgW h3{
  margin-right: min(-10%, -110px);
  margin-left: min(-10%, -110px);
}
#topTraining .stepList .stepTxts.pcFlex{
  flex: 1;
  gap: 0 22px;
  align-items: center;
}
#topTraining .stepList .stepTxts.pcFlex figure{
  width: 219px;
}
#topTraining .stepList .stepTxts.pcFlex .txts{
  flex: 1;
}



/*		#topAllowance
-----------------------------*/

#topAllowanceHead dl{
  display: flex;
}
#topAllowanceHead dl dt{
  width: 268px;
}
#topAllowanceHead dl dd{
  flex: 1;
}


/*		#topEsg
-----------------------------*/
#topEsgBoxs.pcFlex{
  gap: 0 1.4%;
}
#topEsgBoxs.pcFlex .bdBox{
  width: calc(97.2% / 3);
}



/* =======================================
	form
========================================== */
.tb_cont th{
	border-bottom: 1px solid var(--wh);
	padding: 15px 2.5%;
	width: 25%;
}
.tb_cont td{
	border-bottom: 1px solid var(--base);
	padding: 15px 2.5%;
	width: 75%;
}
.tb_cont td input:not([type=checkbox]){
	padding: 8px;
	width: 80%;
}
.tb_cont td textarea{
	padding: 8px;
	width: 80%;
	height: 100px;
}
.tb_cont .hissu{
	padding: 3px 3%;
}
.tb_cont .zip{
	margin-right: 10px;
	width: 20%;
}
.tb_cont .zipBtn{
	font-size: 1.4rem;
	padding: 10px 14px;
}
.tb_cont .w50{
	width: 58%;
}
.tb_cont .fileBtn li{
	width: 33%;
}
.confirm {
  margin-top: 20px;
}

form#mailformpro dl {
  grid-template-columns: 200px 1fr;
}
form#mailformpro dl dt {
}

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

#thanks{
  margin-top: 154px
}

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