@charset "UTF-8";
/* CSS Document */
/* CSS Document */


main .video-wrapper {
  position: relative;
  height: 75vh;
  width: 100%;
}
main .video-wrapper video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

.fvWrap {
	max-width: 1200px;
	margin: auto;
	
}

.item01 {
width: 40%;
	margin: auto;
	margin-bottom: 20px;
}

.catchTITLE {
	width: 55%;
	margin: auto;
	margin-bottom: 20px;
}

main .video-wrapper .catch-copy {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: -webkit-max-content;
  height: -moz-max-content;
  height: max-content;
  text-align: center;
  color: #fff;
  margin: auto;
	letter-spacing: 0;
	text-align: center;
	text-transform: uppercase;
}


main .video-wrapper .catch-copy h2 {
 font-family: "Poppins", sans-serif;
	text-align: center;
	font-size: clamp(3rem, 10vw, 10rem);
	font-weight: 600;
	color:#fff;
	margin-bottom: 30px;
	
}
main .video-wrapper .catch-copy h2 span {
color:#f5eb4a;
	
}
main .video-wrapper .catch-copy h3 {
 background: #14add0;
	text-align: center;
	color:#fff;
	width: fit-content;
	display: inline;
	padding: 10px 30px;
	box-sizing: border-box;
	font-size: clamp(1.4rem, 1.6vw, 1.8rem);
	border-radius: 4px;
}



main .contentWrap {
	max-width: 1200px;
	margin: auto;
}



/*------------------------------------

topContent01 

------------------------------------*/

.topContent01 {
	background: #f5eb4a;
	padding: 50px 5% 60px 5%;
	box-sizing: border-box;
}
.topContent01 .wrap {
	max-width: 1600px;
	margin: auto;
}

.topicsHEAD {
	max-width: 1120px;
	margin: auto;
}

.topContent01 h2 {
	text-align: center;
	font-family: "Poppins", sans-serif;
	font-size: clamp(2.2rem, 4.9vw, 5.5rem);
	font-weight: 600;
	color:#fff;
	margin-bottom: 40px;
	line-height: 1.4;
}

.topContent01 h2 span {
	display: block;
	font-size: clamp(1.4rem, 1.6vw, 1.8rem);
	color:#fff;
	line-height: 1.4;
}

.topicsNAV {
	display: flex;
	justify-content: space-between;
	margin-bottom: 50px;
}
.topicsNAV li {
	width: 19.8%;
	box-sizing: border-box;
	background: #fff;
	
}
.topicsNAV li a {
	display: block;
	padding: 7px 10px;
	box-sizing: border-box;
	text-align: center;
	font-size: clamp(1.4rem, 1.6vw, 1.8rem) ;
	background: #00b6c9;
	color:#fff;
}
.topicsNAV li a:hover {
	background: #f5eb4a;
}
.topicsNAV li a.active {
	background: #f5eb4a;
	color:#222;
}


.topTOPICSLIST {
	display: flex;
	flex-wrap: wrap;
}
.topTOPICSLIST li {
	width: 24%;
	margin: 0 0.5%;
	position: relative;
	margin-bottom: 30px;
}
.topTOPICSLIST li a {
	color:#222;
}
.topTOPICSLIST li figure {
	margin-bottom: 5px;
}
.topTOPICSLIST li figure img {
	border-radius: 10px;
	height: 210px;
	object-fit: cover;
}

.topTOPICSLIST .cate {
	position: absolute;
	font-size: clamp(1.2rem, 1.3vw, 1.4rem) ;
	text-align: center;
	color:#fff;
	 z-index: 1;
	line-height: 1;
	padding: 6px 0;
	width: 90px;
	box-sizing: border-box;
	border-bottom-right-radius: 20px;
	top:0px;
	left: 0px;
}
.topTOPICSLIST .cate.information {
	background: #104aef;
}
.topTOPICSLIST .cate.service-news {
	background: #efa810;
}
.topTOPICSLIST .cate.other-news {
	background: #707070;
}
.topTOPICSLIST .cate.corporate-news {
	background: #0da36c;
}
.topTOPICSLIST .cate.recruit-news {
	background: #f07677;
}
.topTOPICSLIST .date {
	font-size: clamp(1rem, 1.2vw, 1.2rem) ;
	
}
.topTOPICSLIST h3 {
	font-size: clamp(1.3rem, 1.4vw, 1.5rem) ;
	
}

/* 019 */
.button019 a {
	font-size: clamp(1.5rem, 1.6vw, 1.8rem) ;
    background: #eb9e32;
    border-radius: 5px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 20px auto 0;
    max-width: 300px;
    padding: 10px 25px;
    color: #fff;
    transition: 0.3s ease-in-out;
    font-weight: 500;
}
.button019 a:after {
  content: "";
  position: absolute;
  top: 50%;
  bottom: 0;
  right: 2rem;
  font-size: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: right 0.3s;
  width: 6px;
  height: 6px;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  transform: translateY(-50%) rotate(45deg);
}

.button019 a:hover:after {
  right: 1.4rem;
}




/*------------------------------------

topContent02 

------------------------------------*/

.topContent02 {
	background: url("../../images/recruit/fresh/bg01.png");
    background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
	padding: 60px 0 20px 0;
	box-sizing: border-box;
	position: relative;
	z-index: 1;
}
.topContent02 h2 {
	font-family: "Zen Maru Gothic", sans-serif;
	font-size: clamp(2.4rem, 5.8vw, 7rem);
	font-weight: 600;
	text-align: center;
	color:#fff;
	margin-bottom: 40px;
}	
.topContent02 p {
	font-family: "Zen Maru Gothic", sans-serif;
	font-size: clamp(1.5rem, 1.5vw, 1.8rem) ;
	font-weight: 500;
	text-align: center;
	color:#fff;
	margin-bottom: 30px;
}	
.topContent02 h2::first-letter {
	color:#fff;
}

/* 019 */
.button020 a {
	font-size: clamp(1.5rem, 1.6vw, 1.8rem) ;
    background: #14add0;
    border-radius: 5px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 10px auto 0;
    max-width: 300px;
    padding: 10px 25px;
    color: #fff;
    transition: 0.3s ease-in-out;
    font-weight: 500;
}
.button020 a:after {
  content: "";
  position: absolute;
  top: 50%;
  bottom: 0;
  right: 2rem;
  font-size: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: right 0.3s;
  width: 6px;
  height: 6px;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  transform: translateY(-50%) rotate(45deg);
}

.button020 a:hover:after {
  right: 1.4rem;
}


/*------------------------------------

topContent03 

------------------------------------*/

.topContent03 {
	background: #fff;
	padding: 60px 0;
	box-sizing: border-box;
	position: relative;
	
}
.topContent03:before {
	position: absolute;
 content: '';/*何も入れない*/
  display: inline-block;
  width: 600px;/*画像の幅*/
  height: 350px;/*画像の高さ*/
	background-image: url("../../images/recruit/fresh/bgitem01.png");
	background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
	top:-100px;
	left: -100px;
	z-index: 0;
}
.topContent03:after {
	position: absolute;
 content: '';/*何も入れない*/
  display: inline-block;
  width: 600px;/*画像の幅*/
  height: 350px;/*画像の高さ*/
	background-image: url("../../images/recruit/fresh/bgitem02.png");
	background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
	bottom:-150px;
	right: -300px;
	z-index: 0;
}

.topContent03 h2 {
	text-align: center;
	font-size: clamp(2.2rem, 4.1vw, 5rem);
	font-weight: 500;
	color:#00b6c9;
	margin-bottom: 40px;
	line-height: 1.4;
	font-family: "Zen Maru Gothic", sans-serif;
}

.topContent03 h2 span {
	display: block;
	font-size: clamp(1.4rem, 1.6vw, 1.8rem);
	color:#666666;
	line-height: 1.4;
}

.aboutbox {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	position: relative;
	z-index: 1;
}
.aboutbox li {
	width: 49%;
	margin-bottom: 20px;
}



/*------------------------------------

topContent04

------------------------------------*/
.topContent04 {
	background: #eff8fa;
	padding: 50px 5% 50px;
	box-sizing: border-box;
	position: relative;
	z-index: 1;
}
.topContent04 .Wrap {
	max-width: 1400px;
	margin: auto;
}

.topMessage {
	display: flex;
	justify-content: space-between;
}
.topMessage .left {
	width: 30%;
	position: relative;
	bottom:0;
}
.topMessage figure {
	margin-top: -70px;
	position: relative;
	z-index: 1;
}
.topMessage .right {
	width: 68%;
}
.topMessage .right h2 {
	font-size: clamp(2.2rem, 3vw, 4rem);
	font-weight: 600;
	line-height: 1.4;
	font-family: "Noto Serif JP", serif;
	margin-bottom: 20px;
	color:#14add0;
}
.topMessage .right p {
	margin-bottom: 20px;
	font-family: "Zen Maru Gothic", sans-serif;
	font-size: clamp(1.4rem, 1.5vw, 1.8rem) ;
}

.topMessage .right .name {
	display: flex;
	justify-content: flex-end;
	margin: 0 0 0 auto;
	margin-bottom: 60px;
}
.topMessage .right .name .logo {
	width: 100px;
	margin-right: 10px;
}
.topMessage .right .name .sub {
	font-size: clamp(1.4rem, 1.4vw, 1.6rem);
	margin-right: 10px;
	position: relative;
	top:10px;
}
.spdaihyo {
		display: none;
	}


/*------------------------------------

topContent05 

------------------------------------*/


.topContent05 {
	background: #fff;
	padding: 50px 0 50px;
	box-sizing: border-box;
	position: relative;
}

.topContent05:before {
	position: absolute;
 content: '';/*何も入れない*/
  display: inline-block;
  width: 800px;/*画像の幅*/
  height:500px;/*画像の高さ*/
	background-image: url("../../images/recruit/fresh/bgitem03.png");
	background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
	top:-300px;
	left: -100px;
	z-index: 0;
}

.topContent05 h2 {
	text-align: center;
	font-size: clamp(2.2rem, 4.1vw, 5rem);
	font-weight: 500;
	color:#00b6c9;
	margin-bottom: 20px;
	line-height: 1.4;
	font-family: "Zen Maru Gothic", sans-serif;
}

.topContent05 h2 span {
	display: block;
	font-size: clamp(1.4rem, 1.6vw, 1.8rem);
	color:#666666;
	line-height: 1.4;
}
.topContent05 h3 {
	text-align: center;
	font-size: clamp(1.5rem, 1.6vw, 2rem);
	font-weight: 500;
	color:#262626;
	margin-bottom: 40px;
	line-height: 1.4;
	font-family: "Zen Maru Gothic", sans-serif;
}


.intLIST {
	margin-bottom: 40px;
}
.slick-list {
  margin: 0 -15px;
}
.slick-slide {
  margin: 0 5px;
}
.slick-track {
  display: flex !important;
}
.slick-slide {
  height: auto !important;
}

.intLIST .slideITEM {
	background: #fff;
	box-sizing: border-box;
	display: flex;
  flex-direction: column;
	position: relative;
}
.intLIST .slideITEM a {
	display: flex;
    flex-direction: column;
    height: 100%; /* ←追加 */
}

.intLIST .slideITEM .cateBOX {
	position: absolute;
	background: #eb9e32;
	color:#fff;
	font-size: clamp(1.2rem, 1.3vw, 1.4rem);
	padding: 0 20px;
	display: inline;
	border-top-left-radius: 10px;
	z-index: 1;
}
.intLIST .slideITEM img {
	margin-bottom: 10px;
	border-top-left-radius: 10px;
}
.intLIST .slideITEM h3 {
	font-size: clamp(1.5rem, 1.6vw, 1.7rem);
	margin-bottom: 5px;
	line-height: 1.5;
	text-align: left;
}
.intLIST .slideITEM .user {
	display: flex;
	justify-content: space-between;
	margin-top: auto;
}

.intLIST .slideITEM .user .nen {
position: relative;
	width: 45%;
}
.intLIST .slideITEM .user .nen span {
	border: 1px solid #888888;
	text-align: center;
	font-size: clamp(1.2rem, 1.2vw, 1.3rem);
	padding: 0 5px;
	position: absolute;
	bottom:13px;
}
.intLIST .slideITEM .user .name {
	font-size: clamp(1.8rem, 2.5vw, 3rem);
}
.intLIST .slideITEM .user .name.woman {
	color:#f07677;
}
.intLIST .slideITEM .user .name.mens {
	color:#70c4d7;
}


.crosstalkOUT {
	background: #14add0;
	border-radius: 15px;
	position: relative;
}
.crosstalkBOX  {
	background: #ffff00;
	padding: 60px;
	box-sizing: border-box;
	margin-top: 100px;
	border-radius: 15px;
	clip-path: polygon(15% 0, 100% 0, 100% 85%, 85% 100%, 0 100%, 0 15%);
	position: relative;
}

.ill01 {
	position: absolute;
	right:20px;
	width: 250px;
	top: -20px;
	z-index: 2;
}
.crosstitle {
	max-width: 50%;
	margin: auto;
	margin-bottom: 20px;
}
.crosstalkBOX h4 {
	text-align: center;
	font-size: clamp(1.5rem, 1.6vw, 1.8rem);
	font-weight: 500;
	color:#262626;
	margin-bottom: 40px;
	line-height: 1.4;
	font-family: "Zen Maru Gothic", sans-serif;
}
.crossBOX {
	display: flex;
	justify-content:space-between;
	position: relative;
	z-index: 1;
}
.crossBOX li {
	width: 49%;
}



/*------------------------------------

topContent06 

------------------------------------*/

.topContent06 {
	background: #eff8fa;
	padding: 60px 0 60px;
	box-sizing: border-box;
}
.topContent06 h2 {
	text-align: center;
	font-size: clamp(2.2rem, 4.1vw, 5rem);
	font-weight: 500;
	color:#00b6c9;
	margin-bottom: 60px;
	line-height: 1.4;
	font-family: "Zen Maru Gothic", sans-serif;
}

.topContent06 h2 span {
	display: block;
	font-size: clamp(1.4rem, 1.6vw, 1.8rem);
	color:#666666;
	line-height: 1.4;
}

.PlaceBOX {
	display: flex;
	justify-content: space-between;
	margin-bottom: 40px;
}
.PlaceBOX li {
	width: 24%;
	background: #fff;
	padding: 20px;
	box-sizing: border-box;
	box-sizing: border-box;
	border-radius: 15px;
}
.PlaceBOX li figure {
	width: 70%;
	margin: auto;
	margin-bottom: 10px;
	margin-top: -50px;
}

.PlaceBOX li h3 {
	font-size: clamp(1.8rem, 2vw, 2.4rem);
	color:#14add0;
	margin-bottom: 10px;
	text-align: center;
	font-family: "Zen Maru Gothic", sans-serif;
}
.PlaceBOX li p {
	font-size: clamp(1.4rem, 1.5vw, 1.6rem);
}
.topContent06 h4 {
	text-align: center;
	font-size: clamp(1.4rem, 1.6vw, 1.8rem);
	font-family: "Zen Maru Gothic", sans-serif;
	font-weight: 500;
	
}


/*------------------------------------

topContent07 

------------------------------------*/

.topContent07 {
	background: #fff;
	padding: 30px 5% 100px;
	box-sizing: border-box;
}
.topContent07 .wrap {
	max-width: 1220px;
	margin: auto;
	position: relative;
}
.topContent07 h2 {
	color:#14add0;
	text-align: center;
	font-size: clamp(1.8rem, 2vw, 2.4rem);
	font-family: "Zen Maru Gothic", sans-serif;
	padding: 0;
	margin: 0;
	line-height: 1;
	margin-bottom: 30px;
}
.engTITLE {
	font-family: "Roboto", sans-serif;
	font-size: clamp(5rem, 9.8vw, 12rem);
	font-weight: bold;
	color:#bfe7f0;
	text-align: center;
	line-height: 1;
}
.topContent07 p {
	font-size: clamp(1.4rem, 1.6vw, 2rem);
	text-align: center;
	font-family: "Zen Maru Gothic", sans-serif;
	
}

.leftIMG {
	position: absolute;
	left:0;
	max-width: 250px;
}
.rightIMG {
	position: absolute;
	right:0;
	max-width: 250px;
}











/*------------------------------------

topContent08 

------------------------------------*/

.topContent08 {
	background: #14add0;
	padding: 50px 5% 50px;
	box-sizing: border-box;
}

.topENTRY  {
	background: #ffff00;
	padding: 60px 100px;
	border-radius: 10px;
	box-sizing: border-box;
	position: relative;
	margin-top: -80px;
}


.topENTRY:before {
	position: absolute;
 content: '';/*何も入れない*/
  display: inline-block;
  width: 330px;/*画像の幅*/
  height:155px;/*画像の高さ*/
	background-image: url("../../images/recruit/enitem01.png");
	background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
	top:0px;
	left: 0px;
	z-index: 0;
	border-radius: 10px;
}
.topENTRY:after {
	position: absolute;
 content: '';/*何も入れない*/
  display: inline-block;
  width: 200px;/*画像の幅*/
  height:215px;/*画像の高さ*/
	background-image: url("../../images/recruit/enitem02.png");
	background-repeat: no-repeat;
  background-size: contain;
	border-radius: 10px;

	bottom:0px;
	right: 0px;
	z-index: 0;
}

.topENTRY .inner  {
	position: relative;
	z-index: 1;
}


.topENTRY h2  {
	font-size: clamp(1.4rem, 1.6vw, 2rem);
	text-align: center;
	font-family: "Zen Maru Gothic", sans-serif;
	padding: 0;
	margin: 0;
	line-height: 1;
}
.topENTRY figure  {
	
	max-width: 90%;
	margin: auto;
	margin-bottom: 20px;
}
.topENTRY p  {
	font-size: clamp(1.4rem, 1.6vw, 2rem);
	text-align: center;
	font-family: "Zen Maru Gothic", sans-serif;
	padding: 0;
	margin: 0;
	margin-bottom: 20px;
}

.entryBTBOX {
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
}
.entryBTBOX li {
	width: 49.5%;
}

.entryBTBOX li {
	width: 49.5%;
}

.entryBUTTON a {
	font-size: clamp(1.5rem, 1.6vw, 1.8rem) ;
    background: #eb9e32;
    border-radius: 5px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 10px auto 0;
    padding: 20px 25px;
    color: #fff;
    transition: 0.3s ease-in-out;
    font-weight: 500;
}
.entryBUTTON a:after {
  content: "";
  position: absolute;
  top: 50%;
  bottom: 0;
  right: 2rem;
  font-size: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: right 0.3s;
  width: 6px;
  height: 6px;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  transform: translateY(-50%) rotate(45deg);
}

.entryBUTTON a:hover:after {
  right: 1.4rem;
}










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

main .video-wrapper {
  position: relative;
  height: 55vh;
  width: 100%;
}
main .video-wrapper video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

main .video-wrapper .catch-copy {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: -webkit-max-content;
  height: -moz-max-content;
  height: max-content;
  text-align: center;
  color: #fff;
  margin: auto;
	letter-spacing: 0;
	text-align: center;
	text-transform: uppercase;
}


main .video-wrapper .catch-copy h2 {
 font-family: "Poppins", sans-serif;
	text-align: center;
	 font-size: calc(22px + 5.5vw);
	font-weight: 600;
	color:#00b6c9;
	margin-bottom: 20px;
	line-height: 1.2;
	
}
main .video-wrapper .catch-copy h3 {
 font-family: "Poppins", sans-serif;
	text-align: center;
	 font-size: calc(16px + 0.3vw);
	font-weight: 600;
	line-height: 1.8;
}



.catch-copy figure {
	max-width: 55vw;
	position: absolute;
	text-align: center;
	top:20%;
	right: 0;
  left: 0;
  margin: 0 auto;
}
	
.item01 {
width: 70%;
	margin: auto;
	margin-bottom: 10px;
}
	
.catchTITLE {
	width: 90%;
	margin: auto;
	margin-bottom: 20px;
}

	
/*------------------------------------

topContent01 SP

------------------------------------*/

.topContent01 {
	padding: 30px 5% 30px 5%;
	box-sizing: border-box;
}
.topContent01 .wrap {
	max-width: 1600px;
	margin: auto;
}

.topicsHEAD {
	max-width: 1120px;
	margin: auto;
}

.topContent01 h2 {
	text-align: center;
	font-family: "Poppins", sans-serif;
	font-size: clamp(2.8rem, 4.9vw, 5.5rem);
	font-weight: 600;

	margin-bottom: 20px;
	line-height: 1.4;
}
.topContent01 h2::first-letter {

}
.topContent01 h2 span {
	display: block;
	font-size: clamp(1.4rem, 1.6vw, 1.8rem);

	line-height: 1.4;
}

.topicsNAV {
    display: flex;
    gap: 3px; /* 各メニューの間隔 */
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 15px;
    -webkit-overflow-scrolling: touch; /* スムーズスクロール */
	margin-bottom: 20px;
  }

  .topicsNAV li {
    width: auto; /* 均等幅を解除 */
    flex: 0 0 auto; /* 横スクロールに必要 */
  }

  .topicsNAV li a {
    padding: 5px 16px;
    display: block;
    white-space: nowrap; /* 折り返し防止 */
	  font-size: clamp(1.3rem, 1.6vw, 1.8rem) ;
  }
	
	
.topicsNAV li a:hover {
	background: #f5eb4a;
}
.topicsNAV li a.active {
	background: #f5eb4a;
}
	
/* スクロールバー全体 */
.topicsNAV::-webkit-scrollbar {
  height: 6px;   /* 横スクロールなので高さを指定 */
}

/* スクロールバーの背景部分 */
.topicsNAV::-webkit-scrollbar-track {
  background: #ffffff; /* 白 */
}

/* スクロールバーのつまみ部分 */
.topicsNAV::-webkit-scrollbar-thumb {
  background: #cccccc; /* うっすらグレー（白すぎると見えないため） */
  border-radius: 3px;
}

/* つまみにホバーした時 */
.topicsNAV::-webkit-scrollbar-thumb:hover {
  background: #bbbbbb;
}


.topTOPICSLIST {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.topTOPICSLIST li {
	width: 49%;
	margin: 0 0;
	position: relative;
	margin-bottom: 20px;
}
.topTOPICSLIST li a {

}
.topTOPICSLIST li figure {
	margin-bottom: 5px;
}
.topTOPICSLIST li figure img {
	border-radius: 6px;
	height: 110px;
	object-fit: cover;
}

.topTOPICSLIST .cate {
	position: absolute;
	font-size: clamp(1rem, 1.5vw, 1.5rem) ;
	text-align: center;
	color:#fff;
	 z-index: 1;
	line-height: 1;
	padding: 5px 5px;
	width: 70px;
	box-sizing: border-box;

}
.topTOPICSLIST .cate.cate01 {
	background: #024c92;
}
.topTOPICSLIST .cate.cate02 {
	background: #f0a727;
}
.topTOPICSLIST .cate.cate03 {
	background: #019787;
}
.topTOPICSLIST .cate.cate04 {
	background: #e77576;
}
.topTOPICSLIST .date {
	font-size: clamp(1rem, 1.3vw, 1.4rem) ;
	
}
.topTOPICSLIST h3 {
	font-size: clamp(1.3rem, 1.5vw, 1.6rem) ;
	display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
	
}

/* 019 */
.button019 a {
	font-size: clamp(1.5rem, 1.6vw, 1.8rem) ;

    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 20px auto 0;
    max-width: 300px;
    padding: 10px 25px;

    transition: 0.3s ease-in-out;
    font-weight: 500;
}
.button019 a:after {
  content: "";
  position: absolute;
  top: 50%;
  bottom: 0;
  right: 2rem;
  font-size: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: right 0.3s;
  width: 6px;
  height: 6px;

  transform: translateY(-50%) rotate(45deg);
}

.button019 a:hover:after {
  right: 1.4rem;
}




/*------------------------------------

topContent02 

------------------------------------*/

.topContent02 {
	background: url("../../images/recruit/fresh/bg01sp.png");
    background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
	padding: 60px 0 100px 0;
	box-sizing: border-box;
	position: relative;
	z-index: 1;
}


.topABOUTBOX {
	position: relative;
	background: #f5eb4a;
}


/* 019 */
.button020 a {
	font-size: clamp(1.5rem, 1.6vw, 1.8rem) ;
    background: #00b6c9;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 10px auto 0;
    max-width: 300px;
    padding: 10px 25px;
    color: #fff;
    transition: 0.3s ease-in-out;
    font-weight: 500;
}
.button020 a:after {
  content: "";
  position: absolute;
  top: 50%;
  bottom: 0;
  right: 2rem;
  font-size: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: right 0.3s;
  width: 6px;
  height: 6px;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  transform: translateY(-50%) rotate(45deg);
}

.button020 a:hover:after {
  right: 1.4rem;
}





/*------------------------------------

topContent03 

------------------------------------*/

.topContent03 {
	background: #f4f4f4;
	padding: 30px 5%;
	box-sizing: border-box;
	position: relative;
}
	
.topContent03:before {
	position: absolute;
 content: '';/*何も入れない*/
  display: inline-block;
  width: 250px;/*画像の幅*/
  height: 200px;/*画像の高さ*/
	background-image: url("../../images/recruit/fresh/bgitem01.png");
	background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
	top:-50px;
	left: -100px;
	z-index: 0;
}
.topContent03:after {
	position: absolute;
 content: '';/*何も入れない*/
  display: inline-block;
  width: 200px;/*画像の幅*/
  height: 200px;/*画像の高さ*/
	background-image: url("../../images/recruit/fresh/bgitem02.png");
	background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
	bottom:-100px;
	right: -50px;
	z-index: 0;
}
	
.topContent03 h2 {
	text-align: center;
	
	font-size: clamp(2.8rem, 4.9vw, 5.5rem);
	font-weight: 600;
	color:#002f5d;
	margin-bottom: 20px;
	line-height: 1.4;
}
.topContent03 h2::first-letter {

}
.topContent03 h2 span {
	display: block;
	font-size: clamp(1.4rem, 1.6vw, 1.8rem);
	color:#002f5d;
	line-height: 1.4;
}
	
.aboutbox {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: space-between;
	position: relative;
	z-index: 1;
}
.aboutbox li {
	width: auto;
	margin-bottom: 10px;
}



.strengtheLIST {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 50px;
}
.strengtheLIST li {
	width: 100%;
	background: #fff;
	border-radius: 10px;
	margin-bottom: 20px;
}
.strengtheLIST li .mark {
	width: 70px;
	margin: auto;
	margin-bottom: 10px;
	margin-top: -30px;
}
.strengtheLIST li .stimg {
	width: 95%;
	margin-bottom: 10px;
}
.strengtheLIST li h3 {
	font-size: clamp(1.8rem, 2vw, 2.4rem);
	color:#002f5d;
	padding: 0 5%;
	box-sizing: border-box;
	margin-bottom: 10px;
}
.strengtheLIST li p {
	font-size: clamp(1.4rem, 1.4vw, 1.6rem);
	color:#002f5d;
	padding: 0 5%;
	box-sizing: border-box;
	margin-bottom: 20px;
	line-height: 1.5;
}

.topContent03 .button020 a {
	margin-top: -10px;
}



/*------------------------------------

topContent04

------------------------------------*/
.topContent04 {

	padding: 30px 5% 30px;
	box-sizing: border-box;
	position: relative;
}

.topContent04 .head {
	padding: 0px 5%;
	box-sizing: border-box;
}

.topContent04 h2 {

	font-size: clamp(3rem, 4.9vw, 5.5rem);
	font-weight: 600;
	color:#002f5d;
	margin-bottom:10px;
	line-height: 1.4;
	text-align: center;
}
.topContent04 h2::first-letter {
  color:#00b6c9;
}
.topContent04 h2 span {
	font-size: clamp(1.4rem, 1.6vw, 1.8rem);
	color:#002f5d;
	line-height: 1.4;
}


.topContent04 .head h3 {
width: 100%;
	font-size: clamp(1.8rem, 3vw, 4rem);
	font-weight: bold;
	line-height: 1.4;
	font-family: "Noto Serif JP", serif;
	margin-bottom: 20px;

}

.serviceBLOCK {
	position: relative;
	
}
.serviceBLOCK .left {
	width: 100%;
	background: url("../../images/top/sv01.jpg") no-repeat;
	background-size: cover;
	padding: 5% 10%;
	box-sizing: border-box;
	float: none;
	clip-path: polygon(0 0, 100% 0, 95% 100%, 0% 100%);
	margin-bottom: 10px;
}
.serviceBLOCK .right {
	width: 100%;
	background: url("../../images/top/sv02.jpg") no-repeat;
	background-size: cover;
	padding: 5% 10%;
	box-sizing: border-box;
	float: none;
	clip-path: polygon(5% 0, 100% 0, 100% 99%, 0% 100%);
	margin-top: 0px;
}
.serviceBLOCK h3 {
	font-size: clamp(2rem, 3vw, 3.6rem);
	margin-bottom: 10px;
	color:#fff;

}
.serviceBLOCK .left p,
.serviceBLOCK .right p {
	font-size: clamp(1.4rem, 1.4vw, 1.6rem);
	color:#fff;
}

.serviceBLOCK .bottomtxt {
	width: 100%;
	margin: 0 0 0 0;
	padding: 0 5%;
	box-sizing: border-box;
	font-size: clamp(1.4rem, 1.4vw, 1.6rem);
	line-height: 1.5;
	margin-top: 10px;
}

.topContent04 .button020 {
	margin-top: 10px;
	margin-bottom: 5px;
}
	

.topMessage {
	display: flex;
	justify-content: space-between;
}
.topMessage .left {
	width: auto;
	display: none;
}
.topMessage figure {
	margin-top: 0px;
	position: relative;
	z-index: 1;
}
.topMessage .right {
	width: auto;
}
.topMessage .right h2 {
	font-size: clamp(1.8rem, 3vw, 4rem);
	font-weight: 600;
	line-height: 1.4;
	font-family: "Noto Serif JP", serif;
	margin-bottom: 10px;
}
.topMessage .right p {
	margin-bottom: 20px;
}

.topMessage .right .name {
	display: flex;
	justify-content: flex-end;
	margin: 0 0 0 auto;
	margin-bottom: 30px;
	margin-top: -20px;
}
.topMessage .right .name .logo {
	width: 40px;
	margin-right: 10px;
}
.topMessage .right .name .sub {
	font-size: clamp(1.2rem, 1.4vw, 1.6rem);
	margin-right: 5px;
	position: relative;
	top:10px;
}
	
.topMessage .right .name .sign {
		display: block;
	width: 30%;
	}
	
	.spdaihyo {
		display: block;
		float: left;
		width: 40%;
		margin-right: 10px;
	}




/*------------------------------------

topContent05 

------------------------------------*/

.topContent05 {

	padding: 30px 0 30px;
	box-sizing: border-box;
}
.topContent05:before {
	position: absolute;
 content: '';/*何も入れない*/
  display: inline-block;
  width: 350px;/*画像の幅*/
  height:500px;/*画像の高さ*/
	background-image: url("../../images/recruit/fresh/bgitem03.png");
	background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
	top:-200px;
	left: -100px;
	z-index: 0;
}

.topContent05 .Wrap {
	max-width: 1400px;
	margin: auto;
}
	
.intLIST {
	margin-bottom: 20px;
}

	
	

.intLIST .slideITEM {
	background: #fff;
	box-sizing: border-box;
	display: flex;
  flex-direction: column;
	position: relative;
}

.intLIST .slideITEM .cateBOX {
	position: absolute;
	background: #eb9e32;
	color:#fff;
	font-size: clamp(1rem, 1.3vw, 1.4rem);
	padding: 0 10px;
	display: inline;
	border-top-left-radius: 10px;
}


.intLIST .slideITEM img {
	margin-bottom: 10px;
	border-top-left-radius: 10px;
}
.intLIST .slideITEM h3 {
	font-size: clamp(1.2rem, 1.6vw, 1.7rem);
	line-height: 1.3;
	text-align: left;
}
.intLIST .slideITEM .user {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin-top: auto;
}

.intLIST .slideITEM .user .nen {
position: relative;
	width: auto;
}
.intLIST .slideITEM .user .nen span {
	border: 1px solid #888888;
	text-align: center;
	font-size: clamp(1.2rem, 1.2vw, 1.3rem);
	padding: 0 5px;
	position: relative;
	bottom:0;
}
.intLIST .slideITEM .user .name {
	font-size: clamp(2rem, 2.5vw, 3rem);
}
.intLIST .slideITEM .user .name.woman {
	color:#f07677;
}
.intLIST .slideITEM .user .name.mens {
	color:#70c4d7;
}


.crosstalkOUT {
	background: #14add0;
	border-radius: 15px;
	margin-top: -60px;
}
.crosstalkBOX  {
	background: #ffff00;
	padding: 20px;
	box-sizing: border-box;
	margin-top: 100px;
	border-radius: 15px;
	clip-path: polygon(15% 0, 100% 0, 100% 85%, 85% 100%, 0 100%, 0 15%);
	position: relative;
	
}

.ill01 {
	position: absolute;
	right:20px;
	width: 80px;
	top: -10px;
	left: -20px;
	z-index: 2;
}
.crosstitle {
	max-width: 70%;
	margin: auto;
	margin-bottom: 20px;
}
.crosstalkBOX h4 {
	text-align: center;
	font-size: clamp(1.5rem, 1.6vw, 1.8rem);
	font-weight: 500;
	color:#262626;
	margin-bottom: 20px;
	line-height: 1.4;
	font-family: "Zen Maru Gothic", sans-serif;
}
.crossBOX {
	display: flex;
	flex-direction: column;
	justify-content:space-between;
	position: relative;
	z-index: 1;
}
.crossBOX li {
	width: auto;
	margin-bottom: 10px;
}



/*------------------------------------

topContent06 

------------------------------------*/

.topContent06 {

	padding: 30px 0 30px;
	box-sizing: border-box;
}
.topContent06 h2 {
	text-align: center;
	font-size: clamp(2.2rem, 4.1vw, 5rem);
	font-weight: 500;
	color:#00b6c9;
	margin-bottom: 60px;
	line-height: 1.4;
	font-family: "Zen Maru Gothic", sans-serif;
}

.topContent06 h2 span {
	display: block;
	font-size: clamp(1.4rem, 1.6vw, 1.8rem);
	color:#666666;
	line-height: 1.4;
}

.PlaceBOX {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin-bottom: 15px;
}
.PlaceBOX li {
	width: auto;
	background: #fff;
	padding: 20px;
	box-sizing: border-box;
	box-sizing: border-box;
	border-radius: 15px;
	margin-bottom: 20px;
}
.PlaceBOX li figure {
	width: 40%;
	margin: auto;
	margin-bottom: 10px;
	margin-top: -40px;
}

.PlaceBOX li h3 {
	font-size: clamp(1.8rem, 2vw, 2.4rem);
	color:#14add0;
	margin-bottom: 10px;
	text-align: center;
	font-family: "Zen Maru Gothic", sans-serif;
	
}
.PlaceBOX li p {
	font-size: clamp(1.4rem, 1.5vw, 1.6rem);
	text-align: center;
}

/*------------------------------------

topContent07 

------------------------------------*/

.topContent07 {
	background: #fff;
	padding: 30px 5% 60px;
	box-sizing: border-box;
}
.topContent07 .wrap {
	max-width: auto;
	margin: auto;
	position: relative;
}
.topContent07 h2 {
	color:#14add0;
	text-align: center;
	font-size: clamp(1.8rem, 2vw, 2.4rem);
	font-family: "Zen Maru Gothic", sans-serif;
	padding: 0;
	margin: 0;
	line-height: 1;
	margin-bottom: 30px;
}
.engTITLE {
	font-family: "Roboto", sans-serif;
	font-size: clamp(5rem, 9.8vw, 12rem);
	font-weight: bold;
	color:#bfe7f0;
	text-align: center;
	line-height: 1;
}
.topContent07 p {
	font-size: clamp(1.4rem, 1.6vw, 2rem);
	text-align: left;
	font-family: "Zen Maru Gothic", sans-serif;
	
}

.leftIMG {
	position: absolute;
	left:0;
	max-width: 80px;
	top:-50px;
}
.rightIMG {
	position: absolute;
	right:0;
	top:-50px;
	max-width: 80px;
}


/*------------------------------------

topContent08 

------------------------------------*/

.topContent08 {
	background: #14add0;
	padding: 50px 0 30px;
	box-sizing: border-box;
}

.topENTRY  {
	background: #ffff00;
	padding: 20px 20px;
	border-radius: 10px;
	box-sizing: border-box;
	position: relative;
	margin-top: -80px;
}


.topENTRY:before {
	position: absolute;
 content: '';/*何も入れない*/
  display: inline-block;
  width: 200px;/*画像の幅*/
  height:94px;/*画像の高さ*/
	background-image: url("../../images/recruit/enitem01.png");
	background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
	top:0px;
	left: 0px;
	z-index: 0;
	border-radius: 10px;
}
.topENTRY:after {
	position: absolute;
 content: '';/*何も入れない*/
  display: inline-block;
  width: 120px;/*画像の幅*/
  height:129px;/*画像の高さ*/
	background-image: url("../../images/recruit/enitem02.png");
	background-repeat: no-repeat;
  background-size: contain;
	border-radius: 10px;

	bottom:0px;
	right: 0px;
	z-index: 0;
}

.topENTRY .inner  {
	position: relative;
	z-index: 1;
}


.topENTRY h2  {
	font-size: clamp(1.6rem, 1.6vw, 2rem);
	text-align: center;
	font-family: "Zen Maru Gothic", sans-serif;
	padding: 0;
	margin: 0;
	line-height: 1.5;
	margin-bottom: 15px;
}
.topENTRY figure  {
	max-width: 100%;
	margin: auto;
	margin-bottom: 10px;
}
.topENTRY p  {
	font-size: clamp(1.4rem, 1.6vw, 2rem);
	text-align: center;
	font-family: "Zen Maru Gothic", sans-serif;
	padding: 0;
	margin: 0;
	margin-bottom: 10px;
}

.entryBTBOX {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin-bottom: 10px;
}
.entryBTBOX li {
	width: 100%;
}

.entryBTBOX li {
	width: 100%;
}

.entryBUTTON a {
	font-size: clamp(1.5rem, 1.6vw, 1.8rem) ;
    background: #eb9e32;
    border-radius: 5px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 5px auto 0;
    padding: 12px 25px;
    color: #fff;
    transition: 0.3s ease-in-out;
    font-weight: 500;
}
.entryBUTTON a:after {
  content: "";
  position: absolute;
  top: 50%;
  bottom: 0;
  right: 2rem;
  font-size: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: right 0.3s;
  width: 6px;
  height: 6px;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  transform: translateY(-50%) rotate(45deg);
}

.entryBUTTON a:hover:after {
  right: 1.4rem;
}


	
}


/* 初期状態（透明＋上に少しずらす） */
.scroll-fade {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* フェードイン後 */
.scroll-fade.show {
  opacity: 1;
  transform: translateY(0);
}

/* 初期状態（透明 & 下に少しずらす） */
.fadein {
  opacity: 0;
  transform: translateY(20px); /* 浮き上がり感を強くする */
  transition: opacity 1s ease-out, transform 1s ease-out;
}
/* フェードイン状態 */
.fadein.in-view {
  opacity: 1;
  transform: translateY(0);
}


/* 初期状態：透明＋右にズレている */
.slide-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* スライドイン後 */
.slide-right.show {
  opacity: 1;
  transform: translateX(0);
}

/* 初期状態：透明＋左にズレている */
.slide-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* スライドイン後（表示状態） */
.slide-left.show {
  opacity: 1;
  transform: translateX(0);
}



.syogai {
	max-width: 500px;
	margin: auto;
}

.floating-banner {
  position: fixed; /* バナーを追従させる */
  z-index: 1; /* 他の要素の下に隠れないように */
  top: 150px; /* バナーの上下の位置 */
right:0px;
display:block;
width:50px;
}
.floating-banner image {
  width: 100%; /* 画像の最大幅 */
}

.floating-entry {
display:none;
}


@media screen and (max-width: 834px){
	
.syogai {
	max-width: 500px;
	margin: auto;
}
.floating-banner {
display:none;
}
	
.floating-entry {
  position: fixed; /* バナーを追従させる */
  z-index: 1; /* 他の要素の下に隠れないように */
  bottom: 0px; /* バナーの上下の位置 */
left:0px;
display:block;
width:85%;
margin:0px;
}
.floating-entry image {
  width: 100%; /* 画像の最大幅 */
}
	
.floatingBUTTON a {
	font-size: clamp(2.4rem, 1.6vw, 1.8rem) ;
    background: #eb9e32;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto 0;
    padding: 15px 25px;
	height: 60px;
    color: #fff;
    transition: 0.3s ease-in-out;
    font-weight: 500;
	box-sizing: border-box;
}
.floatingBUTTON a:after {
  content: "";
  position: absolute;
  top: 50%;
  bottom: 0;
  right: 2rem;
  font-size: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: right 0.3s;
  width: 6px;
  height: 6px;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  transform: translateY(-50%) rotate(45deg);
}

.floatingBUTTON a:hover:after {
  right: 1.4rem;
}
	
}










