@charset "utf-8";

/* html, body {
  overflow-x: hidden;
} */

/*------------------------------------------------------------
	ヘッダー
------------------------------------------------------------*/
.page-id-2 #main {
	margin-bottom: 0;
}

/* .page-id-37 #main {
	margin-bottom: 0;
} */

#gNavi li.on a {
	border-color: #000;
}
@media all and (min-width: 897px) and (max-width: 1170px) {
  #gHeader .logo {
    width: 15rem;
  }
}
@media all and (min-width: 897px) {
	#gNavi a:hover {
		border-color: #000;
	}
}
@media all and (max-width: 896px) {
	.page-id-2 #main {
		margin-bottom: 0;
	}

	/* .page-id-37 #main {
		margin-bottom: 0;
	} */

	#gHeader .logo {
		height: 20px;
	}
}
/*------------------------------------------------------------
	menu
------------------------------------------------------------*/
.menuBox {
	min-width: 128rem;
}
.menuBox .innerBox .sub {
	margin: 3rem 10.5rem 0 0;
}
.menuBox .innerBox .sub:nth-of-type(4n) {
	margin-right: 0;
}
/*------------------------------------------------------------
	comFBox
------------------------------------------------------------*/
.comFBox .fBox .lBox .logo {
	width: 20.7rem;
}
@media all and (max-width: 896px) {
	.comFBox .fBox .lBox .logo {
		width: 20.9rem;
	}
}
/*------------------------------------------------------------
	Top-main
------------------------------------------------------------*/
body.home{
	#main {
		margin-bottom: 0;
	}
  #main .level {
  	position: relative;
  	z-index: 2;
  }
  .mainVisual {
  	position: relative;
  	z-index: 1;
    width:100%;
    /* aspect-ratio:9 / 5; */
  }
  .mainVisual .content {
  	display: flex;
  	align-items: center;
  	min-height: inherit;
  }
  .mainVisual .imgtext {
  	margin: 1rem 0 0 10rem;
  	width: 59.4rem;
  }
  .mainVisual .newsBox {
  	position: absolute;
		bottom: 5rem;
  	right: 4rem;
  	box-shadow: 0 0 2.6rem rgba(0, 0, 0, 0.08);
  }
  .newsBox .lBox {
  	font-size: 2rem;
  }
  #main .group {
  	padding: 1px 0 10.8rem;
  	background-color: rgba(228, 239, 239,0.5);
  }
  #main .group .headLine01 {
  	margin: -6.3rem 0 0.7rem;
  	color: #222;
  }
  #main .group .headLine01 .en {
  	margin-bottom: 1rem;
  }
  #main .group .headLine01 .jp {
  	font-size: 2rem;
  }
  #main .group .photo {
  	margin: 0 auto;
  	width: 79rem;
  }
  #main .group .innerBox {
  	position: relative;
  }
  #main .group .imgBox {
  	position: absolute;
  	z-index: 1;
  }
  #main .group .imgBox .ttl {
  	margin-bottom: 0.2rem;
  	font-weight: 700;
  	font-size: 1.6rem;
  	color: #222;
  	line-height: 2.25;
  }
  #main .group .imgBox .txtList li {
  	padding-left: 1rem;
  	position: relative;
  	font-size: 1.4rem;
  	color: #666;
  	line-height: 1.6;
  }
  #main .group .imgBox .txtList li::after {
  	width: 0.5rem;
  	height: 0.5rem;
  	position: absolute;
  	z-index: 1;
  	top: 0.9rem;
  	left: 0;
  	content: "";
  	background-color: #fc7e17;
  	border-radius: 50%;
  }
  #main .group .imgBox01 {
  	top: 10.6rem;
  	left: 0;
  }
  #main .group .imgBox02 {
  	bottom: 3.8rem;
  	left: 9.2rem;
  }
  #main .group .imgBox02 .txtList li::after {
  	background-color: #afd505;
  }
  #main .group .imgBox03 {
  	bottom: 3.8rem;
  	right: 14rem;
  }
  #main .group .imgBox03 .txtList li::after {
  	background-color: #08adf5;
  }
  #main .group .imgBox04 {
  	top: 10.6rem;
  	right: 0;
  }
  #main .group .imgBox04 .txtList li::after {
  	background-color: #8088c7;
  }
  #main .future {
  	padding: 11rem 0 11.2rem;
  	border-bottom: 1px solid #d8d8d8;
  }
  #main .future .headLine01 {
  	margin-bottom: 1.3rem;
  	color: #222;
  }
  #main .future .headLine01 .en {
  	margin-bottom: 1rem;
  }
  #main .future .headLine01 .jp {
  	font-size: 2rem;
  }
  #main .future h3 {
  	margin-bottom: 4rem;
  }
  #main .future h3 .en {
  	margin-bottom: 0.2rem;
  	font-size: 4rem;
  	display: block;
  }
  #main .future h3 .jp {
  	color: #a5a5a5;
  	font-size: 2.2rem;
  }
  #main .future .imgBox {
  	margin: 0 5.1rem 8.8rem;
  	align-items: center;
  }
  #main .future .future-popup__flex {
  	display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		flex-direction: row-reverse;
  }

  #main .future .imgBox .photoBox {
  	width: calc(50% + 2.2rem);
  	border-radius: 4rem;
  	overflow: hidden;
  }
  #main .future .imgBox .photoBox img {
  	width: 100%;
  }
	#main .future .future-popup__move img {
		transition: transform 0.6s ease, opacity 0.6s ease;
	}
  #main .future .imgBox .textBox {
  	padding-bottom: 0.5rem;
  	width: calc(50% - 7rem);
  }
  #main .future .imgBox .textBox .sub {
  	margin-left: auto;
  	width: 53rem;
  }
  #main .future .future-popup__sub {
  	margin-left: auto;
		width: 53rem;
  }
  #main .future .imgBox .textBox .ttl {
  	margin-bottom: 3rem;
  	font-weight: 700;
  	font-size: 3.8rem;
  	line-height: 1.447;
  }
  #main .future .imgBox .textBox .txt {
  	font-weight: 500;
  	line-height: 2;
  }
  #main .future .imgBox:nth-of-type(2n) {
  	flex-direction: row-reverse;
  }
  #main .future .imgBox:nth-of-type(2n-1) .sub {
  	margin-left: 0;
  }
  #main .future .imgBox01 {
  	margin-bottom: 8.8rem;
  }
  #main .future .future-popup {
  	margin-bottom: 12.5rem;
  }
  #main .future .innerBox h3 {
  	width: 17.6rem;
  }
  #main .future .innerBox h3 .en {
  	margin-bottom: 0;
  	line-height: 1.3;
  }
  #main .future .innerBox .sub {
  	width: calc(100% - 25rem);
    display:grid;
  	align-items: center;
    grid-template-columns:repeat(2, 1fr);
    gap:50px 4%;
  }
  #main .future .innerBox .sub .title {
  	color: #333;
  	font-size: 3.8rem;
  	font-weight: 700;
  }
  #main .future .innerBox .sub .value {
  	display: flex;
  	align-items: center;
  	justify-content: space-between;
  }
  #main .future .innerBox .sub .value .pho {
  	width: 9.3rem;
  }
  #main .future .innerBox .sub .value .txtBox {
  	width: calc(100% - 11.6rem);
  }
  #main .future .innerBox .sub .value .txtBox .ttl {
  	margin-bottom: 0.6rem;
  	color: #e8131f;
  	font-weight: 700;
  	font-size: 2.2rem;
  }
  #main .future .innerBox .sub .value .txtBox .txt {
  	color: #666;
  	font-size: 1.4rem;
  	font-weight: 500;
  }
  #main .future .innerBox .sub .value.li01 .txtBox .ttl {
  }
  #main .future .innerBox .sub .value.li02 .txtBox .ttl {
  	color: #fc7e17;
  }
  #main .future .innerBox .sub .value.li03 .txtBox .ttl {
  	color: #009944;
  }
  #main .future .innerBox .sub .value.li04 .txtBox .ttl {
  	color: #08adf5;
  }
  #main .future .innerBox .sub .value.li05 .txtBox .ttl {
  	color: #303776;
  }
	#main .future .future-popup__button {
		margin-top: 50px;
	}

  #main .future .comBtn a,
  #main .future .comBtn .link {
    position: relative;
    font-weight: 700;
    display: block;
    font-family: "Raleway", sans-serif;
  }

  #main .future .comBtn a::after,
  #main .future .comBtn .link::after {
    width: 3.5rem;
    height: 3.5rem;
    position: absolute;
    z-index: 1;
    top: -0.5rem;
    right: 0;
    content: "";
    background-color: #000;
    border-radius: 50%;
    box-sizing: border-box;
    transition: transform .3s ease, opacity .3s ease;
    transform: scale(1);
    opacity: .9;
  }
  #main .future .comBtn a::before,
  #main .future .comBtn .link::before {
    width: 1.5rem;
    height: 1.7rem;
    position: absolute;
    z-index: 2;
    top: 0.2rem;
    right: 0.8rem;
    content: "";
    background: url(../img/index/icon06.png) no-repeat left top / 100%;
    transition: transform .3s ease;
  }
  #main .future .comBtn a span,
  #main .future .comBtn .link span {
    border-bottom: 0.2rem solid transparent;
    transition: border-color .3s ease;
  }

  /* ▼ホバー時：ボタン単体での反応 */
  #main .future .future-popup__move:hover .link::after,
  #main .future .future-popup__move:hover a::after {
    transform: scale(1.6);
    opacity: 1;
  }
  #main .future .future-popup__move:hover .link span,
  #main .future .future-popup__move:hover a span {
    border-bottom-color: #000;
  }
	#main .future .future-popup__move:hover img,
  #main .future .future-popup__move:hover img {
    transform: scale(1.1);
    opacity: 1;
  }

	/* hover（PCのみ） */
	@media (max-width: 897px) {
		#main .future .comBtn a::after,
		#main .future .comBtn .link::after {
			top: -1rem !important;
		}
		.comBtn a::before, .comBtn .link::before {
			top: -0.3rem !important;
		}
		#main .future .future-popup__move:hover .link::after,
		#main .future .future-popup__move:hover a::after {
			transform: none !important;
			opacity: .9 !important;
		}
		#main .future .future-popup__move:hover .link span,
		#main .future .future-popup__move:hover a span {
			border-bottom-color: transparent !important;
		}
		#main .future .future-popup__move:hover img {
			transform: none !important;
			opacity: 1 !important;
		}
	}

  #main .our {
  	padding-top: 11.6rem;
  }
  #main .our .headLine01 {
  	margin-bottom: 0.8rem;
  }
  #main .our .imgBox {
  	margin-bottom: 5.2rem;
  }
  #main .our .imgBox > a {
  	position: relative;
  	align-items: center;
  	flex-direction: row-reverse;
    transition: .3s;
  }
  #main .our .imgBox :last-of-type {
  	margin-bottom: 0;
  }
  #main .our .imgBox > a::after {
  	width: calc(50% + 17.8rem);
  	height: 90%;
  	min-height: 46rem;
  	position: absolute;
  	content: "";
  	z-index: -1;
  	left: 0;
  	bottom: -3.2rem;
  	background-color: #fdf3ea;
  	border-radius: 0 3rem 3rem 0;
  	pointer-events: none;
  }
  #main .our .imgBox .photoBox {
  	width: calc(50% + 13.5rem);
  	border-radius: 3rem 0 0 3rem;
  	overflow: hidden;
  }
  #main .our .imgBox .textBox {
  	padding-top: 8.4rem;
  	position: relative;
  	z-index: 1;
  	width: calc(50% - 13.5rem);
  }
  #main .our .imgBox .textBox .sub {
  	margin: 0 -8rem 0 auto;
  	width: 54.4rem;
  }
  #main .our .imgBox .title {
  	margin-bottom: 2rem;
  	font-size: 1.9rem;
  	font-weight: 700;
  }
  #main .our .imgBox .logo {
  	margin-bottom: 3.5rem;
  }
  #main .our .imgBox .logo img {
  	height: 7rem;
  }
  #main .our .imgBox .textBox .ttl {
  	margin-bottom: 0.9rem;
  	font-size: 1.7rem;
  	font-weight: 700;
  	color: #222;
  }
  #main .our .imgBox .textBox .txt {
  	margin-bottom: 5.6rem;
  	font-size: 1.2rem;
  	font-weight: 500;
  	color: #666;
  	line-height: 1.66;
  }
  #main .our .imgBox .imgBox01::after {
  	background-color: #f5fae8;
  } 
  #main .our .imgBox .imgBox02::after {
  	background-color: #edfaff;
  } 
  #main .our .imgBox .imgBox03::after {
  	background-color: #eceef6;
  } 
  @media all and (min-width: 897px) {
    #main .our .imgBox > a .photoBox img {
      transition:transform ease 0.3s
    } 
    #main .our .imgBox > a:hover .photoBox img {
  		transform: scale(1.05);
    } 
    #main .our .imgBox > a:hover .comBtn .link span {
  		border-bottom-color: #000;
  	}
  	#main .our .imgBox > a:hover .comBtn .link::after {
  		transform: scale(1.6);
  	}
  }
  #main .company {
  	padding: 5.3rem 0 7.1rem;
  	border-bottom: 3.8rem solid #f5f8f8;
  }
  #main .company li {
  	position: relative;
  	display: flex;
  	align-items: center;
  	padding: 0 3rem 1.5rem;
  }
  #main .company li:not(:last-child) {
  	border-right: 1px solid #d8d8d8;
  }
  #main .company .li01 {
  	padding-left: 0;
  	width: 15.8%;
  }
  #main .company .li02 {
  	width: 35.4%;
  }
  #main .company .li03 {
  	width: 29.5%;
  }
  #main .company .li04 {
  	padding-right: 0;
  	width: 19.3%;
  }
  #main .company h3 {
  	font-weight: 500;
  	font-size: 2.6rem;
  	letter-spacing: 0.1em;
  }
  #main .company .img {
  	margin-bottom: 0.8rem;
  	width: 23.6rem;
  }
  #main .top-company-img02 {
		margin-top: 0.4rem;
  	margin-bottom: 2.2rem;
  	width: 23.6rem;
  }
  #main .company .txt {
  	margin-bottom: 0.4rem;
  	font-size: 1.3rem;
  }
  #main .company .name {
  	margin-bottom: 0.4rem;
  	font-weight: 700;
  }
  #main .company .add {
  	color: #666;
  	font-size: 1.4rem;
  }
  #main .company .li04 .name {
  	padding: 2rem 0;
  }
  #main .news {
  	padding: 7.5rem 0 11.5rem;
  }
  #main .news .headLine01 {
  	width: 28rem;
  }
  #main .news .newsList {
  	margin-top: 3rem;
  	width: calc(100% - 39rem);
  }
  #main .news .newsList li {
  	margin-bottom: 3.2rem;
  }

  #main .news .newsList li:last-child {
  	margin-bottom: 0;
  }
  #main .news .newsList a {
  	display: flex;
  	flex-wrap: wrap;
  }
  #main .news .newsList a:hover {
  	opacity: 0.7;
  }
  #main .news .newsList .time {
  	width: 13.7rem;
  	display: inline-block;
  	font-weight: 500;
  	font-size: 2rem;
  }
  #main .news .newsList .txt {
  	margin-top: 0.3rem;
  	flex: 1;
  	font-weight: 500;
  	line-height: 1.33;
  }

  #main .news .comLink {
  	margin-top: -5.3rem;
  }
	/* PC時は5件目以降を非表示 */
	@media screen and (min-width: 896px) {
		.newsList li:nth-child(n+5) {
			display: none;
		}
	}
  #main .recruit {
  	/* padding: 13.7rem 0 10.9rem; */
  	padding: 10rem 0;
  	background: url(../img/index/recruit_photo01.jpg) no-repeat center top / cover;
		z-index: 0;
  }
	#main .recruit::before {
		content: "";
		position: absolute;
		inset: 0; /* top, right, bottom, left全部0 */
		background: rgba(0, 0, 0, 0.2); /* 黒20% */
		z-index: -1; /* 背景より上、コンテンツより下 */
	}
  #main .recruit .headLine01 {
  	margin-bottom: 2.4rem;
  }
  #main .recruit .headLine01 .en {
  	color: #fff;
  }
  #main .recruit .text {
  	margin-bottom: 4rem;
  	color: #fff;
  	font-weight: 700;
  	font-size: 3rem;
  	line-height: 1.63;
  }
  #main .recruit .comLink a {
  	color: #fff;
  	border-bottom-color: #fff;
  }
  #gFooter {
  	position: relative;
  	z-index: 2;
  }
}
@media all and (max-width: 896px) {
  body.home{
  	.mainVisual .imgtext {
  		height: 100vh;
  	}
  	.mainVisual .imgtext {
  		margin-left: 1rem;
  		width: 25rem;
  	}
  	.mainVisual .newsBox {
  		right: 2rem;
			bottom: 5%;
  	}
  	.newsBox .lBox {
  		font-size: 1.5rem;
  	}
  	.newsBox .rBox {
  		width: calc(100% - 2rem);
  	}
  	#main .group {
  		padding-bottom: 4.3rem;
  	}
  	#main .group .content {
  		padding: 0 1rem;
  	}
  	#main .group .headLine01 {
  		margin: -3.6rem 1.5rem 2.5rem;
  	}
  	#main .group .headLine01 .en {
  		margin-bottom: 0;
  	}
  	#main .group .headLine01 .jp {
  		font-size: 1.6rem;
  	}
  	#main .group .photo {
  		width: 28.1rem;
  	}
  	#main .group .imgBox {
  		position: static;
  		display: flex;
  		align-items: center;
  	}
  	#main .group .imgBox .photoBox {
  		width: 13.7rem;
  	}
  	#main .group .imgBox .textBox {
  		padding: 0 0 0.5rem 0.2rem;
  		flex: 1;
  	}
  	#main .group .imgBox .ttl {
  		margin-bottom: 0;
  		font-size: 1.4rem;
  		line-height: 2.1;
  	}
  	#main .group .imgBox .txtList li {
  		padding-left: 1rem;
  		font-size: 1.1rem;
  		line-height: 1.63;
  	}
  	#main .group .imgBox .txtList li::after {
  		top: 0.7rem;
  	}
  	#main .future {
  		padding: 8rem 0 3rem;
  	}
  	#main .future .headLine01 {
  		margin-bottom: 5.2rem;
  	}
  	#main .future .headLine01 .en {
  		margin-bottom: 0;
  	}
  	#main .future .headLine01 .jp {
  		font-size: 1.6rem;
  	}
  	#main .future h3 {
  		margin-bottom: 2rem;
  	}
  	#main .future h3 .en {
  		margin-bottom: 0;
  		font-size: 4.4rem;
  		line-height: 1.4;
  	}
  	#main .future h3 .jp {
  		font-size: 1.8rem;
  	}
  	#main .future .imgBox {
  		margin: 0 2rem 3.8rem;
  		display: block;
  	}
  	#main .future .imgBox .photoBox {
  		margin-bottom: 3.1rem;
  		width: auto;
  		border-radius: 2rem;
  	}
  	#main .future .imgBox .textBox {
  		padding-bottom: 0.5rem;
  		width: auto;
  	}
  	#main .future .imgBox .textBox .sub {
  		margin-left: 0;
  		width: auto;
  	}

		#main .future .future-popup__sub {
			margin-left: 0;
  		width: auto;
		}
  	#main .future .imgBox .textBox .ttl {
  		margin-bottom: 1.6rem;
  		font-size: 2.8rem;
  		letter-spacing: -0.07em;
  		line-height: 1.428;
  	}
  	#main .future .imgBox .textBox .txt {
  		font-size: 1.6rem;
  		letter-spacing: -0.05em;
  		line-height: 1.875;
  	}
  	#main .future .imgBox01 {
  		margin-bottom: 4rem;
  	}
  	#main .future .innerBox .content {
  		display: block;
  	}
  	#main .future .innerBox h3 {
  		width: auto;
  	}
  	#main .future .innerBox h3 .en {
  		margin-bottom: 0.4rem;
  	}
  	#main .future .innerBox .sub {
  		width: auto;
      grid-template-columns:1fr;
  		gap:2em;
  	}
    #main .future .innerBox .sub .title {
  		margin: 2rem 0;
  		color: #000;
  		letter-spacing: -0.07em;
  		font-size: 2.8rem;
    }
  	#main .future .innerBox .sub .value .pho {
  		margin-left: 0.5rem;
  		width: 8rem;
  	}
  	#main .future .innerBox .sub .value .txtBox {
  		width: calc(100% - 10.5rem);
  	}
  	#main .future .innerBox .sub .value .txtBox .ttl {
  		margin-bottom: 0.8rem;
  		font-size: 1.8rem;
  	}
  	#main .future .innerBox .sub .value .txtBox .txt {
  		margin-right: -1rem;
  		font-size: 1.2rem;
  		line-height: 1.66;
  	}
    #main .future .innerBox .sub .value.li01{
      order:1;
    }
    #main .future .innerBox .sub .value.li02{
      order:2;
    }
    #main .future .innerBox .sub .value.li03{
      order:3;
    }
    #main .future .innerBox .sub .value.li04{
      order:4;
    }
    #main .future .innerBox .sub .value.li05{
      order:5;
    }
  	#main .our {
  		padding-top: 7.2rem;
  	}
  	#main .our .headLine01 {
  		margin-bottom: 4.5rem;
  	}
  	#main .our .imgBox {
  		margin-bottom: 2rem;
  		display: block;
  		background-color: #fdf3ea;
  	}
    #main .our .imgBox > a{
  		padding: 5.5rem 2rem 5.3rem;
      flex-direction:row;
    }
  	#main .our .imgBox > a::after {
  		display: none;
  	}
  	#main .our .imgBox .photoBox {
  		margin: 0 -2rem 2rem 0;
  		width: auto;
  		border-radius: 2rem 0 0 2rem;
  	}
  	#main .our .imgBox .photoBox img {
  		width: 100%;
  	}
  	#main .our .imgBox .textBox {
  		padding-top: 0;
  		width: 100%;
  	}
  	#main .our .imgBox .textBox .sub {
  		margin: 0;
  		width: auto;
  	}
  	#main .our .imgBox .title {
  		margin-bottom: 2rem;
  		font-size: 1.9rem;
  		font-weight: 700;
  	}
  	#main .our .imgBox .logo {
  		margin-bottom: 2rem;
  	}
  	#main .our .imgBox .logo img {
  		height: 6rem;
  	}
  	#main .our .imgBox .textBox .ttl {
  		margin-bottom: 1.1rem;
  		font-size: 1.8rem;
  		line-height: 1.47;
  	}
  	#main .our .imgBox .textBox .txt {
  		margin-bottom: 3rem;
  	}
  	#main .our .imgBox01 {
  		background-color: #f5fae8;
  	} 
  	#main .our .imgBox02 {
  		background-color: #edfaff;
  	} 
  	#main .our .imgBox03 {
  		background-color: #eceef6;
  	} 
  	#main .our .comBtn {
  		margin-right: 0;
  	}
  	#main .company {
  		padding: 0.2rem 0 6.7rem;
  	}
  	#main .company ul {
  		display: block;
  	}
  	#main .company li {
  		display: block;
  		text-align: center;
  		padding: 2.8rem 1rem !important;
  	}
  	#main .company li:not(:last-child) {
  		border-right: 0;
  		border-bottom: 1px solid #d8d8d8;
  	}
  	#main .company .li01 {
  		width: auto;
  	}
  	#main .company .li02 {
  		width: auto;
  	}
  	#main .company .li03 {
  		width: auto;
  	}
  	#main .company .li04 {
  		width: auto;
  	}
  	#main .company h3 {
  		font-size: 2.2rem;
  	}
  	#main .company .img {
  		margin: 0 auto 1.9rem;
			height: 8.6rem;
  	}
  	#main .company .img img{
			height: 100%;
  	}
		#main .top-company-img02 {
			margin: 0 auto 1.9rem;
			height: 7rem;
		}
  	#main .company .txt {
  		margin-bottom: 0.4rem;
  		font-size: 1.2rem;
  	}
  	#main .company .name {
  		margin-bottom: 0.4rem;
  		font-size: 1.8rem;
  	}
  	#main .company .add {
  		font-size: 1.2rem;
  	}
  	#main .company .li04 {
  		padding: 0 !important;
  	}
  	#main .company .li04 .name {
  		margin-bottom: 0;
  		padding: 3rem 0;
  		border-bottom: 1px solid #d8d8d8;
  	}
  	#main .news {
  		padding: 7rem 0 9.5rem;
  	}
  	#main .news .innerBox {
  		display: block;
  	}
  	#main .news .headLine01 {
  		margin-bottom: 6.5rem;
  		width: auto;
  	}
  	#main .news .newsList {
  		margin: 0 0 5rem;
  		width: auto;
  	}
  	#main .news .newsList li {
  		margin-bottom: 1.5rem;
  	}
  	#main .news .newsList .time {
  		width: 8.7rem;
  		font-size: 1.4rem;
  	}
  	#main .news .newsList .txt {
  		margin-top: 0;
  		line-height: 1.71;
  	}
  	#main .news .comLink {
  		margin-top: 0;
  	}
  	#main .recruit {
  		/* padding: 47.692vw 0 12.051vw; */
  		padding: 8rem 0;
  		background-image: url(../img/index/recruit_photo01-new_sp.jpg);
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
  	}
  	#main .recruit .headLine01 {
  		margin-bottom: 4rem;
  	}
  	#main .recruit .headLine01 .en{
  		font-size: 5rem;
  	}
  	#main .recruit .text {
  		margin-bottom: 3.8rem;
  		font-size: 1.9rem;
  		line-height: 1.5;
  	}
  	#main .recruit .comLink {
  		margin-left: 0;
  	}
  	#gFooter {
  		position: relative;
  		z-index: 2;
  	}
  }
}
/*------------------------------------------------------------
	popupBox
------------------------------------------------------------*/
body.popFix {
	touch-action: none;
	overscroll-behavior: none;
	overflow: hidden;
}
.mfp-bg {
	background-color: #fff;
	opacity: 1;
}
.mfp-wrap {
	overflow-y: auto;
}
@media all and (min-width: 897px) {
	body.fixed {
		overflow-y: scroll;
	}
}
.mfp-container {
	position: fixed;
	overflow-y: auto;
}
.popupBox {
	position: relative;	
	width: 100%;
}
.popupBox {
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 2;
	background-color: #fff;
}
.popupBox .innerBox {
	padding: 1.3rem 2rem;
	position: relative;
}
.popupBox .icon {
	position: absolute;
	z-index: 1;
	top: 2rem;
	right: 2rem;
	width: 4.7rem;
}
.popupBox .icon a {
	display: block;
}
.popupBox .icon a:hover {
	opacity: 0.7;
}
/* popupBox01 */
.popupBox01 .imgBox {
	align-items: center;
	flex-direction: row-reverse;
}
.popupBox01 .imgBox .photoBox {
	width: calc(50% + 12.6rem);
}
.popupBox01 .imgBox .textBox {
	padding-bottom: 2.5rem;
	position: relative;
	z-index: 1;
	width: calc(50% - 12.6rem);
}
.popupBox01 .imgBox .textBox h2 {
	margin-bottom: 3rem;
	color: #222;
}
.popupBox01 .imgBox .textBox .title {
	margin-bottom: 2.6rem;
	font-size: 3.3rem;
	font-weight: 700;
	letter-spacing: -0.07em;
}
.popupBox01 .imgBox .textBox .text {
	margin-bottom: 2.4rem;
	font-weight: 500;
	font-size: 1.6rem;
	line-height: 1.875;
	letter-spacing: -0.05em;
}
.popupBox01 .imgBox .textBox .text:last-of-type {
	margin-bottom: 0;
}
.popupBox01 .imgBox .textBox .sub {
	margin: 0 -4.8rem 0 auto;
	width: 52.2rem;
}
/* popupBox02 */
.popupBox02 .innerBox {
	padding: 19.5rem 0 21.5rem;
}
.popupBox02 .imgBox {
	align-items: center;
}
.popupBox02 .imgBox .photoBox {
	width: 52.5%;
	text-align: center;
}
.popupBox02 .imgBox .photoBox img {
	width: 36.6rem;
}
.popupBox02 .imgBox .textBox {
	margin-top: 1.2rem;
	flex: 1;
}
.popupBox02 .imgBox .textBox .title {
	margin-bottom: 4rem;
	color: #222;
}
.popupBox02 .imgBox .textBox .text {
	font-weight: 500;
	font-size: 1.5rem;
	letter-spacing: -0.05em;
	line-height: 2;
}
@media all and (min-width: 897px) and (max-width: 1120px) {
	.popupBox01 .imgBox .photoBox {
		width: 45rem;
	}
	.popupBox02 .imgBox .photoBox {
		width: 44.5%;
	}
	.popupBox02 .imgBox .photoBox img {
		width: 30rem;
	}
}
@media all and (max-width: 896px) {
	.mfp-container {
		padding: 0 !important;
	}
	.popupBox .innerBox {
		padding: 1.1rem 0;
	}
	.popupBox .icon {
		top: 1.9rem;
		right: 1.8rem;
		width: 3.3rem;
	}
	/* popupBox01 */
	.popupBox01 .imgBox {
		display: block;
	}
	.popupBox01 .imgBox .photoBox {
		margin: 0 auto -2.7rem;
		width: 39rem;
	}
	.popupBox01 .imgBox .textBox {
		padding: 0 2.3rem 4rem;
		position: relative;
		z-index: 1;
		width: auto;
	}
	.popupBox01 .imgBox .textBox h2 {
		margin-bottom: 1.6rem;
		font-size: 1.5rem;
	}
	.popupBox01 .imgBox .textBox .title {
		margin-bottom: 2.4rem;
		font-size: 2.8rem;
		line-height: 1.45;
	}
	.popupBox01 .imgBox .textBox .sub {
		margin: 0;
		width: auto;
	}
	/* popupBox02 */
	.popupBox02 .innerBox {
		padding: 16.5rem 0 11.7rem;
	}
	.popupBox02 .imgBox {
		display: block;
	}
	.popupBox02 .imgBox .photoBox {
		margin-bottom: 9.5rem;
		width: auto;
	}
	.popupBox02 .imgBox .photoBox img {
		width: 20.1rem;
	}
	.popupBox02 .imgBox .textBox {
		margin-top: 0;
	}
	.popupBox02 .imgBox .textBox .title {
		margin-bottom: 3.3rem;
		font-size: 1.8rem;
	}
	.popupBox02 .imgBox .textBox .text {
		font-size: 1.6rem;
		line-height: 1.875;
	}
}
/*------------------------------------------------------------
	news
------------------------------------------------------------*/
body.news{
  .pageTitle {
  	padding-bottom: 4.7rem;
  	margin-bottom: 5.6rem;
  	position: relative;
  }
  .pageTitle .achieve {
  	width: 16.2rem;
  	position: absolute;
  	right: 0;
  	z-index: 5;
  	bottom: 1.3rem;
  	display: flex;
  }
  .pageTitle .achieve .txt {
  	flex: 1;
  	color: #a8a8a8;
  	font-size: 2rem;
  }
  .pageTitle .achieve ul {
  	width: 6.5rem;
  	font-size: 2rem;
  	background: url(../img/common/icon05.png) no-repeat top 1.3rem right / 1.3rem;
  }
  #main .newsList {
  	margin-top: -4.4rem;
  }
  #main .newsList a {
  	display: block;
  }
  #main .newsList li {
  	margin: 4.4rem 3.8% 0 0;
  	width: 30.8%;
  }
  #main .newsList li:nth-child(3n) {
  	margin-right: 0;
  }
  #main .newsList .photo {
  	margin-bottom: 1.7rem;
  	border-radius: 1rem;
  	overflow: hidden;
  }
  #main .newsList .photo img {
  	width: 100%;
  }
  #main .newsList .textBox .time {
  	margin-bottom: 0.8rem;
  	font-family: "Raleway", sans-serif;
  	font-weight: 500;
  	color: #9d9d9d;
  }
  #main .newsList .textBox .text {
  	font-weight: 500;
  }
  #main .newsList a:hover {
  	opacity: 0.7;
  }
}
@media all and (max-width: 896px) {
  body.news{
  	.pageTitle .achieve {
  		width: 15rem;
  		align-items: center;
  	}
  	.pageTitle .achieve .txt {
  		font-size: 1.8rem;
  	}
  	.pageTitle .achieve ul {
  		font-size: 1.6rem;
  		background-position: top 1rem right;
  	}
  	#main .newsList {
  		margin-top: 0;
  		display: block;
  	}
  	#main .newsList li {
  		margin: 0 0 3rem;
  		width: auto;
  	}
  	#main .newsList li:last-child {
  		margin-bottom: 0;
  	}
  }
}
/*------------------------------------------------------------
	news/detail
------------------------------------------------------------*/
#detail {
	padding-top: 13rem;
}
#detail .content {
	width: 98rem;
}
#detail h2 {
	margin: 0 0.6rem 4.9rem;
	padding: 0.8rem 2rem 4.6rem;
	font-weight: 500;
	font-size: 2.8rem;
	text-align: center;
	line-height: 1.785;
	border-bottom: 1px solid #d8d8d8;
}
#detail h2 .en {
	margin-bottom: 1.2rem;
	display: block;
	line-height: 1.5;
	font-size: 3rem;
}
#detail h2 .date {
	margin-top: 1.8rem;
	display: block;
	color: #9d9d9d;
	font-weight: 500;
	font-size: 1.5rem;
	line-height: 1.5;
}
#detail p {
	margin-bottom: 5.9rem;
	line-height: 2;
	word-break: break-all;
}
#detail p a {
	text-decoration: underline;
}
#detail figure {
	padding: 0;
	margin: -0.9rem 0 5.9rem;
	text-align: center;
}
#detail figure img {
	width: 100%;
	border-radius: 1rem;
}
#detail .imgList {
	margin: -2rem 0 5.2rem;
}
#detail .imgList li {
	width: 47rem;
	margin-top: 2rem;
}
#detail .imgList li img {
	width: 100%;
	border-radius: 1rem;
}
#detail .pageLink {
	margin: 12rem auto 0;
	position: relative;
	max-width: 82rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
#detail .pageLink .back a {
	padding-bottom: 1rem;
	width: 13.7rem;
	display: block;
	font-weight: 700;
	text-align: center;
	border-bottom: 0.2rem solid #000;
}
#detail .pageLink .prev {
	position: absolute;
	left: 0;
	top: 0;
}
#detail .pageLink .next {
	position: absolute;
	right: 0;
	top: -0.1rem;
}
#detail .pageLink .prev a,
#detail .pageLink .next a {
	min-height: 3.5rem;
	display: inline-flex;
	align-items: center;
	font-size: 1.6rem;
	font-weight: 400;
}
#detail .pageLink .prev a {
	padding-left: 5.3rem;
}
#detail .pageLink .next a {
	padding-right: 5.3rem;
}

#detail .pageLink .arrow-icon {
  padding: 10px;
  width: 60px;
  height: 60px;
	margin: 0 17.1px;
}

@media all and (min-width: 897px) {
	#detail a:hover {
		opacity: 0.7;
	}
	#detail .pageLink a:hover {
		opacity: 0.7;
	}
}
@media all and (max-width: 896px) {
	#detail {
		padding-top: 10rem;
	}
	#detail .content {
		width: auto;
	}
	#detail h2 {
		margin: 0 0 3rem;
		padding: 0.8rem 0 3rem;
		font-size: 1.8rem;
	}
	#detail h2 .date {
		margin-top: 1.5rem;
	}
	#detail p {
		margin-bottom: 3rem;
	}
	#detail figure {
		margin: 0 0 3rem;
	}
	#detail .imgList {
		margin: 0 0 3rem;
		display: block;
	}
	#detail .imgList li {
		width: auto;
		margin-top: 2rem;
	}
	
	#detail .pageLink {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 1.5rem;
		position: static;
		margin-top: 5rem;
		max-width: 50rem;
	}

	#detail .pageLink .prev,
	#detail .pageLink .next {
		position: static;
	}

	/* 左寄せ */
	#detail .pageLink .prev {
		text-align: left;
	}

	/* 中央寄せ */
	#detail .pageLink .back {
		text-align: center;
	}

	/* 右寄せ */
	#detail .pageLink .next {
		text-align: right;
	}

	#detail .pageLink .back a {
		padding-bottom: 0.5rem;
		width: 10rem;
		display: inline-block;
	}

	#detail .pageLink .prev a,
	#detail .pageLink .next a {
		min-height: 3rem;
		font-size: 1.4rem;
	}

	#detail .pageLink .arrow-icon {
		width: 44px;
		height: 44px;
		padding: 8px;
		margin: 0;
	}
}
/*------------------------------------------------------------
	contact
------------------------------------------------------------*/
body.contact{
  .pageTitle {
  	margin-bottom: 8.2rem;
  	padding-bottom: 0;
  	border-bottom: none;
  }
  #main .pTop {
  	margin-bottom: 5.9rem;
  	padding-bottom: 2.7rem;
  	line-height: 2;
  	border-bottom: 1px solid #d8d8d8;
  }
  #main .mailForm table {
  	margin-bottom: 5rem;
  	width: 100%;
  	max-width: 97rem;
  	border-collapse: collapse;
  }
  #main .mailForm th,
  #main .mailForm td {
  	padding: 0 0 3rem 1.6rem;
  	vertical-align: top;
  	text-align: left;
  	font-weight: 500;
  	word-break: break-all;
  	box-sizing: border-box;
  }
  #main .mailForm th {
  	padding: 1.0rem 0 0;
  	position: relative;
  	width: 22.2%;
  	font-weight: 500;
  }
  #main .mailForm tr:last-child td {
  	padding-bottom: 0;
  }
  #main .mailForm .must,
  #main .mailForm .any {
  	position: absolute;
  	right: 0;
  	top: 1.5rem;
  	width: 5.3rem;
  	padding: 0.1rem 0 0.2rem;
  	color: #e65441;
  	font-size: 1.2rem;
  	text-align: center;
  	border: 1px solid #e65441;
  	border-radius: 1.2rem;
  }
  #main .mailForm .any {
  	color: #575757;
  	border-color: #a8a8a8;
  }
  #main .mailForm input[type="text"],
  #main .mailForm input[type="email"],
  #main .mailForm input[type="tel"],
  #main .mailForm textarea {
  	width: 100%;
  	padding: 1rem 1.6rem;
  	height: 4.6rem;
  	font-size: 1.8rem;
  	color: #000;
  	border: 0;
  	box-sizing: border-box;
  	appearance: none;
  	box-shadow: none;
  	border-radius: 0.5rem;
  	background: #ededed;
  }
  #main .mailForm td textarea {
  	height: 24.9rem;
  	resize: vertical;
  }
  #main .mailForm select::-ms-expand {
  	display: none;
  }
  #main .mailForm input::-webkit-input-placeholder,
  #main .mailForm textarea::-webkit-input-placeholder { 
  	color: #a3a3a3;
  	opacity: 1;
  }
  #main .mailForm input:-moz-placeholder,
  #main .mailForm textarea:-moz-placeholder {
  	color: #a3a3a3;
  	opacity: 1;
  }
  #main .mailForm input::-moz-placeholder,
  #main .mailForm textarea::-moz-placeholder {
  	color: #a3a3a3;
  	opacity: 1;
  }
  #main .mailForm input:-ms-input-placeholder,
  #main .mailForm textarea:-ms-input-placeholder {
  	color: #a3a3a3;
  	opacity: 1;
  }
  #main .mailForm .agreeText {
  	margin-bottom: 4.5rem;
  	text-align: center;
  	font-size: 1.6rem;
  	line-height: 2;
  	font-weight: 500;
  }
  #main .mailForm .agreeText label {
  	cursor: pointer;
  }
  #main .mailForm .agreeText a {
  	text-decoration: underline;
  }
  #main .mailForm .agree {
  	margin-bottom: 3.9rem;
  	text-align: center;
  }
  #main .mailForm input[type="checkbox"] {
  	display: none;
  }
  #main .mailForm input[type="checkbox"] + span {
  	min-height: 2.4rem;
  	display: inline-flex;
  	align-items: center;
  	font-size: 1.6rem;
  	font-weight: 500;
  	background: url(../img/common/check_img01.png) no-repeat left center;
  	background-size: 2.4rem auto;
  }
  #main .mailForm input[type="checkbox"]:checked + span {
  	background-image: url(../img/common/check_img02.png);
  }
  #main .mailForm .submit li {
  	margin: 0 0 1rem;
  }
  #main .mailForm .submit input {
  	width: 27.5rem;
  	padding: 1rem;
  	height: 6rem;
  	font-size: 1.8rem;
  	color: #000;
  	font-weight: 500;
  	box-sizing: border-box;
  	appearance: none;
  	box-shadow: none;
  	border-radius: 0;
  	background: #fff;
  	cursor: pointer;
  	border: 0.3rem solid #000;
  	transition: .3s;
  }
}
@media all and (min-width: 897px) {
  body.contact{
  	#main .mailForm .agreeText a:hover {
  		text-decoration: none;
  	}
  	#main .mailForm .submit input:hover {
  		opacity: 0.7;
  	}
  }
}
@media all and (max-width: 896px) {
  body.contact{
  	.pageTitle {
  		margin-bottom: 4rem;
  	}
  	#main .mailForm table {
  		margin-bottom: 5rem;
  		max-width: 100%;
  	}
  	#main .mailForm th,
  	#main .mailForm td {
  		display: block;
  		width: 100% !important;
  		padding: 0 0 2rem;
  	}
  	#main .mailForm th {
  		padding: 1rem 0;
  	}
  	#main .mailForm .must,
  	#main .mailForm .any {
  		margin-left: 1.5rem;
  		position: static;
  		display: inline-block;
  		width: 5.3rem;
  	}
  	#main .mailForm input[type="text"],
  	#main .mailForm input[type="email"],
  	#main .mailForm input[type="tel"],
  	#main .mailForm textarea {
  		padding: 1rem;
  		height: 4rem;
  		font-size: 1.4rem;
  	}
  	#main .mailForm td textarea {
  		height: 20rem;
  	}
  	#main .mailForm .agreeText {
  		margin-bottom: 3rem;
  		font-size: 1.4rem;
  	}
  	#main .mailForm .agree {
  		margin-bottom: 3.9rem;
  	}
  	#main .mailForm input[type="checkbox"] + span {
  		font-size: 1.4rem;
  		background-size: 2rem auto;
  	}
  	#main .mailForm .submit {
  		display: block;
  		text-align: center;
  	}
  }
}
/* iOSの独自UIを殺して、こちらの指定を確実に通す */
#main .mailForm .submit input[type="submit"],
#main .mailForm .submit .wpcf7-submit {
  -webkit-appearance: none !important; /* ←iOS必須 */
  appearance: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* 元の見た目を強制（幅はmax-widthにしてはみ出しを防止） */
#main .mailForm .submit input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;               /* SPで安全に全幅化 */
  max-width: 27.5rem;        /* もとの 27.5rem を上限に */
  padding: 1rem;
  height: 6rem;
  font: inherit;
  font-size: 1.8rem;
  font-weight: 500;
  color: #000;
  background: #fff;
  border: 0.3rem solid #000;
  cursor: pointer;
  transition: .3s;
  box-sizing: border-box;
  touch-action: manipulation;
}

/* ダークモードの自動反転を止める（iOSで色が変わるのを防止） */
#main .mailForm,
#main .mailForm .submit input[type="submit"] {
  color-scheme: light;
}

/* iPhone対策：SP幅ではフォーム入力の文字サイズを16px以上に */
@media (max-width: 896px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  input[type="password"],
  select,
  textarea {
    font-size: 16px !important;   /* ここが最重要 */
    line-height: 1.4;
  }
}

/* 自動文字拡大の抑制（念のため） */
html { 
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/*------------------------------------------------------------
	privacy
------------------------------------------------------------*/
body.privacy{
  #main p {
  	line-height: 2;
  }
  #main .pTop {
  	margin-bottom: 7.1rem;
  }
  #main .inner:not(:last-child) {
  	margin-bottom: 4.4rem;
  }
  #main .txtList li {
  	padding-left: 1em;
  	text-indent: -1em;
  	line-height: 2;
  }
  #main .text01 {
  	margin-bottom: 0.5rem;
  }
}
@media all and (max-width: 896px) {
  body.privacy{
  	.headLine01 .en {
  		font-size: 4.3rem;
  	}
  	.pageTitle {
  		margin-bottom: 4rem;
  	}
  	#main .pTop {
  		margin-bottom: 3rem;
  	}
  	#main .inner:not(:last-child) {
  		margin-bottom: 3rem;
  	}
  }
}
/*------------------------------------------------------------
	sustainability
------------------------------------------------------------*/
body.sustainability{
  .pageTitle {
  	margin-bottom: 6rem;
  }
  #main .itemList {
  	margin: 0 0 3.8rem;
    flex-direction:column;
  	row-gap:9rem;
  }
  #main .itemList li {
  	display: grid;
  	grid-template-columns:32rem 1fr;
  }
  #main .itemList li .phoBox {
    display:grid;
  	grid-template-columns:17rem 1fr;
    align-items:center;
  }
  #main .itemList li .txtBox {
  	margin-top: 0.5rem;
  }
  #main .itemList .phoBox img {
    order:1;
  }
  #main .itemList h4 {
  	font-size: 2.8rem;
  	font-weight: 700;
    order:2;
  }
  #main .itemList p {
  	line-height: 1.5;
  }
  #main p {
  	line-height: 2;
  }
}
@media all and (max-width: 896px) {
  body.sustainability{
  	.pageTitle {
  		margin-bottom: 3rem;
  	}
  	.headLine01 .en {
  		font-size: 5rem;
  	}
  	#main .headLine02 {
  		margin-bottom: 3rem;
  	}
  	#main .itemList {
  		margin: 0 0 2rem;
  		display: block;
  	}
  	#main .itemList li {
  		margin: 0 0 2.5rem;
  		width: auto;
  		align-items: center;
  	}
  	#main .itemList li .phoBox {
  		width: 7rem;
  		text-align: center;
  	}
  	#main .itemList li .phoBox img {
  		width: auto;
  	}
  	#main .itemList li .txtBox {
  		width: calc(100% - 9rem);
  	}
  	#main .itemList h4 {
  		margin-bottom: 1rem;
  		font-size: 2rem;
  	}
  }
}
/*------------------------------------------------------------
	Recruit
------------------------------------------------------------*/
body.recruit{
  #main {
  	margin-bottom: 0;
  }
  #main .mainVisual {
  	min-height: 100vh;
  	position: relative;
  	background: url(../img/recruit/main_img.jpg) no-repeat center top /cover;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    padding:8rem 0 0;
  }
  #main .mainVisual .content {
  	position: relative;
    max-width:initial;
    margin:0;
    padding:0 12rem;
  }
  #main .mainVisual .content h2 {
  	color: #fff;
    margin:0 0 3rem;
  }
  #main .mainVisual .textBox {
  }
  #main .mainVisual .textBox p:not(:last-of-type) {
  	margin:0 0 1em;
  }
  #main .mainVisual .textBox p span {
  	box-decoration-break: clone;	
  	-webkit-box-decoration-break: clone;
    background:#fff;
  	padding: .1em .5em;
    line-height:1.9;
    color:#566876;
  }
  #main .scroll {
  	width: 3rem;
  	height: 21rem;
  	right: 2.3rem;
  	bottom: -8.9rem;
  	position: absolute;
  	z-index: 10;
  }
  #main .scroll a::before {
  	position: absolute;
  	z-index: 9;
  	top: 0.2rem;
  	left: 0;
  	width: 1px;
  	height: 21rem;
  	content: "";
  	background-color: #666;
  }
  #main .utility {
    display:flex;
    align-items:center;
    gap:0 6.4rem;
    margin:10.2rem 0 6rem;
  }
  #main .utility h3 {
    margin:0;
  }
  #main .utility ul {
    display:flex;
    gap:0 4rem;
    font-size:1.6rem;
  }
  #main .utility ul a {
    padding:0 0 0 1.8rem;
  	background: url(../img/recruit/icon01.png) no-repeat 0 .7em / 1rem auto;
  }
  #main .job table {
    width:100%;
    border-collapse:collapse;
    margin:0 0 10rem;
  }
  #main .job table th,
  #main .job table td {
    border-top:1px solid #D8D8D8;
    border-bottom:1px solid #D8D8D8;
  }
  #main .job table th {
    padding:2rem 0 2rem 2em;
    font-weight:bold;
    width:18rem;
  }
  #main .job table td {
    padding:2rem 0;
    line-height:2;
  }
  #main .job table ul li {
    padding:0 0 0 .7em;
    position:relative;
  }
  #main .job table ul li::before {
    display:inline-block;
    content:"";
    position:absolute;
    top:1em;
    left:0;
    width:5px;
    height:5px;
    border-radius:50%;
    background:#A8A8A8;
  }
  #main .linkBtn{
    margin:10rem 0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:1em;
  }
  #main .linkBtn a{
    border:3px solid #000;
    display:inline-block;
    width:44.6%;
    text-align:center;
    padding:1em 0;
    transition:all .3s;
  }
}
@media (min-width: 897px) and (max-width: 1170px) {
  body.recruit{
    #main .mainVisual .content {
      padding:0 7rem;
    }
  }
}
@media all and (min-width: 897px) {
  body.recruit{
    #main .linkBtn a:hover{
      opacity:.6;
    }
  }
}
@media all and (max-width: 896px) {
  body.recruit{
    #main .mainVisual {
    	background-image: url(../img/recruit/main_img_sp.jpg);
    }
    #main .mainVisual .content {
      padding:0 3rem;
  	}
  	#main .scroll {
  		width: 2.4rem;
  		right: 1rem;
  	}
    #main .utility {
      flex-direction:column;
      align-items:flex-start;
      margin-top:6rem;
      row-gap:1rem;
  	}
    #main .utility ul {
      flex-direction:column;
      row-gap:.5rem;
  	}
    #main .job table {
      margin:0 0 5rem;
      border-top:1px solid #D8D8D8;
  	}
    #main .job table th,
    #main .job table td {
      display:block;
      width:100%;
  	}
    #main .job table th{
      border:none;
      padding-left:0;
  	}
    #main .linkBtn{
      margin:5rem 0;
  	}
    #main .linkBtn a{
      width:100%;
  	}
  }
}

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

.mv {
  display: flex;
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.mv__left {
  width: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* padding: 4% 3%; */
  padding: 0 3%;
  box-sizing: border-box;
  z-index: 2;
}

.mv__catch {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: flex-start;
  max-width: 90%;
	z-index: 3;
}

.mv__catch-line--01 {
  width: 45%;
  max-width: none;
  height: auto;
  display: block;
}

.mv__catch-line--02 {
  width: 80%;
  max-width: none;
  height: auto;
  display: block;
	margin-top: 2rem;
}

.mv__deco {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: -100;
  transition: opacity 0.1s linear;
}

.mv__deco.is-transparent {
  opacity: 0.2;
}

.mv__deco-sp {
  position: fixed;
  top: 10%;
  left: 0;
  width: 100%;
  height: auto;
  z-index: -100;
  transition: opacity 0.1s linear;
}

.mv__deco-sp.is-transparent {
  opacity: 0.2;
}

.mv__right {
  width: 60%;
  height: 100%;
	padding: 15px 15px 15px 0;
  position: relative;
  z-index: 1;
}

.mv__slider {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.mv__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 2.5s ease-in-out;
  z-index: 0;
}

.mv__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0 6px 6px 0;
}

.mv__slide.is-active {
  opacity: 1;
  z-index: 1;
}

@media screen and (max-width: 896px) {
  .mv {
    display: flex;
    flex-direction: column;
    /* height: 80rem; */
    height: 90vh;
  }

  .mv__right {
    order: 1;
    width: 100%;
    height: 50vh;
		padding: 0;
    position: relative;
  }

  .mv__left {
    order: 2;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
  }

	.mv__slide img {
		border-radius: 0;
	}

  .mv__catch {
    order: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 2rem 1rem 1rem;
		margin-top: 5rem;
		margin-bottom: 3rem;
  }

  .mv__catch-line--01 {
    width: 45%;
    max-width: 320px;
  }

  .mv__catch-line--02 {
    width: 80%;
    max-width: 360px;
    margin-top: 1rem;
  }
}

/*------------------------------------------------------------
	message
------------------------------------------------------------*/
#main .message {
	margin: 22.3rem 0 22.6rem;
}

#main .message{
  position: relative;
  overflow-x: clip;     /* hidden より副作用が少ない。スクロールコンテナ化しない */
  max-width: 100%;
  contain: layout paint;/* 子のはみ出しが親を押し広げるのを抑える（対応ブラウザで有効） */
}

#main .message .imgBox {
	flex-direction: row-reverse;
	max-width: 1800px;
  margin: 0 auto;
}
#main .message h2 {
	margin-bottom: 3.7rem;
	color: #222;
}
#main .message .title {
	margin-bottom: 5.2rem;
	font-size: 3.8rem;
	letter-spacing: -0.07em;
	line-height: 1.44;
	font-weight: 700;
}

#main .message .imgBox {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
}

#main .message .textBox {
  flex: 0 1 55%;
  max-width: 55%;
}
@media screen and (min-width: 1800px) {
	#main .message .textBox {
  flex: 0 1 50%;
  max-width: 50%;
	}
}

#main .message .imgBox .textBox .text {
	margin-bottom: 2.9rem;
	font-size: 2rem;
	font-weight: 400;
	line-height: 2.1;
	letter-spacing: -0.05em;
}
#main .message .imgBox .textBox .text:last-of-type {
	margin-bottom: 7.15rem;
}
#main .message .imgBox .textBox .sub {
	margin-right: auto;
	width: 60rem;
	margin-top: 8rem;
}
@media screen and (min-width: 1800px) {
	#main .message .imgBox .textBox .sub {
	margin-top: 14rem;
}
}
#main .message .imgBox .photoBox {
	width: calc(50% - 8.1rem);
}

#main .message .popLink li {
	margin: 2rem 4.9rem 0 0;
}
#main .message .popLink li:nth-child(2n) {
	margin-right: 0;
}

#main .message .message__img {
  flex: 0 1 58%;
  max-width: 60%;
  margin-left: -13%;
}

#main .message .message__img img {
  width: 100%;
  height: auto;
  display: block;
}

.message__img.sp-only {
  display: none;
}

.message__img.pc-only {
  display: block;
}


@media screen and (max-width: 896px) {
	#main .message__img.sp-only {
    display: block;
    margin: 3rem 0;
  }

  #main .message__img.pc-only {
    display: none;
  }

  #main .message {
    margin: 6rem 0 17rem 0;
  }

	#main .message h2 {
		margin-bottom: 1.5rem;
		color: #222;
	}
	#main .message .title {
		font-size: 2.8rem;
	}

  #main .message .imgBox {
		display: block;
    width: 100%;
  }

	#main .message .imgBox .textBox .text {
		font-size: 1.6rem;
	}

  #main .message .textBox {
    padding: 0 2rem;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }

  #main .message .imgBox .textBox .sub {
    width: 100%;
    max-width: 100%;
    margin-top: 0;
  }

  #main .message .popLink {
    justify-content: center;
    margin-top: 3rem;
    padding: 0 2rem;
  }

  #main .message .imgBox .textBox .sub {
    width: 100%;
    margin-top: 0;
  }

  #main .message .message__img {
		margin: 3rem -5%;
		width: 120%;
		max-width: none;
		flex: 0 0 auto;
	}

  #main .message .message__img img {
    width: 100%;
    height: auto;
  }

  #main .message h2,
  #main .message .title {
    padding: 0 2rem;
  }

  #main .message .popLink {
    justify-content: center;
    margin-top: 3rem;
    padding: 0 2rem;
  }
}



/*------------------------------------------------------------
	MV-sustainability
------------------------------------------------------------*/
#main .sustainability {
  position: relative;
  padding: 5rem 0;
  background-color: #f3f9f8;
  text-align: left;
}

#main .sustainability-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

#main .sustainability-bg {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 700px;
  height: 100%;
  background: url(../img/index/sustainability-img.png) no-repeat right top;
  background-size: cover;
  z-index: 0;
  pointer-events: none;
}

#main .sustainability .content {
	padding: 5rem 0;
  position: relative;
  z-index: 1;
}

#main .sustainability .headLine01 {
  width: 63rem;
  margin-bottom: 5.1rem;
}

#main .sustainability .headLine01 .en {
	font-size: 9rem;
}

#main .sustainability .text {
  font-size: 2.2rem;
  font-weight: 700;
  color: #000;
  margin-bottom: 5.1rem;
}

#main .sustainability .comLink a {
	width: 17.3rem;
  font-size: 2rem;
  font-weight: 700;
  color: #000;
  text-decoration: none;
  border-bottom: 4px solid #000;
  padding-bottom: 1.2rem;
}

@media screen and (max-width: 896px) {
  #main .sustainability {
    padding: 8rem 0;
  }

  #main .sustainability-container {
    padding: 0 2rem;
		height: 450px;
  }

	#main .sustainability .content {
		padding: 0;
	}

  #main .sustainability .headLine01 {
    width: 100%;
    font-size: 3.2rem;
    margin-bottom: 4rem;
  }

  #main .sustainability .headLine01 .en {
    font-size: 5rem;
  }

  #main .sustainability .headLine01 .jp {
    display: block;
    font-size: 1.4rem;
    margin-top: 0.5rem;
  }

  #main .sustainability .text {
    font-size: 1.6rem;
    margin-bottom: 3.5rem;
  }

  #main .sustainability .comLink {
    text-align: left;
		margin-right: auto;
		margin-left: 0;
  }

  #main .sustainability .comLink a {
    font-size: 1.3rem;
    border-bottom: 2px solid #000;
    display: inline-block;
		width: 11.9rem;
  }

  #main .sustainability-bg {
    position: static;
    width: 100%;
    height: 280px;
    background-position: center bottom;
    background-size: contain;
  }
}

/*------------------------------------------------------------
  Recruit-page MV
------------------------------------------------------------*/
:root {
  --container: 1200px;
  --split-left: 0.37;
  --split-right: 0.63;
}

.recruit-mv {
  position: relative;
  min-height: clamp(640px, 100dvh, 880px);
}

.recruit-mv__inner {
  position: static;
  display: flex;
  align-items: center;
  gap: 2rem;
  max-width: var(--container);
  margin: 0 auto;
  height: 100%;
  z-index: 2;
}

.recruit-mv .headLine01 { margin: 0 0 0.7rem; color: #222; }
.recruit-mv .headLine01 .en { margin-bottom: 1rem; }
.recruit-mv .headLine01 .jp { font-size: 2rem; }

.recruit-mv__left {
  flex: 0 0 calc(var(--container) * var(--split-left));
  margin-top: 15.8rem;
  padding-right: 51px;
}

.recruit-mv__body {
  margin-top: 66px;
  font-size: 1.6rem;
  line-height: 1.8;
}
.recruit-mv__body p + p { margin-top: 3.8rem; }

.recruit-mv__right {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: calc(
    (100% - var(--container)) / 2 + var(--container) * var(--split-left)
  );
  overflow: hidden;
  z-index: 1;
}
.recruit-mv__right .mv__slider,
.recruit-mv__right .mv__slide { height: 100%; }

.recruit-mv__right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (min-width: 1440px) {
  .recruit-mv__right {
  }
}

/* ===== SP ===== */
@media (max-width: 896px) {
  .recruit-mv {
    min-height: unset;
  }
  .recruit-mv__inner {
    flex-direction: column;
    max-width: 100%;
    padding: 0;
    gap: 0;
  }

  .recruit-mv__right {
    position: relative;
    left: auto;
    right: auto;
    width: 100dvw;
    height: 37dvh;
    min-height: 420px;
    margin: 0 0 2.4rem;
    z-index: 1;
  }
  .recruit-mv__right::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,.45) 100%);
    pointer-events: none;
    z-index: 2;
  }
  .recruit-mv__right .mv__slider,
  .recruit-mv__right .mv__slide { height: 100%; }
  .recruit-mv__right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  .recruit-mv .headLine01 {
    position: absolute;
    /* top: 22%; */
    top: 13%;
    left: 5%;
    margin: 0;
    color: #fff;
    z-index: 3;
  }
  .recruit-mv .headLine01 .en,
  .recruit-mv .headLine01 .jp { color: #fff; }
  .recruit-mv .headLine01 .jp { font-size: clamp(1.6rem, 3.5vw, 2rem); }

  .recruit-mv__left {
    order: 1;
    flex: 1 1 auto;
    margin-top: 0;
    padding: 0 clamp(16px, 5vw, 24px);
  }
  .recruit-mv__body {
    margin-top: 3rem;
    font-size: 1.6rem;
    line-height: 1.9;
  }
  .recruit-mv__body p + p { margin-top: 2.8rem; }

  .recruit-mv .scroll { display: none; }
}

/* =====================
  Contactform7
===================== */

/* 無効ボタンの見た目 */
.wpcf7 input.wpcf7-submit[disabled] {
  opacity: .5;
  cursor: not-allowed;
}

.wpcf7 .agreeText input[type="checkbox"],
.wpcf7 .agreeText input.wpcf7-validates-as-required[type="checkbox"] {
  display: inline-block !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  margin-right: 0.5em !important;
	vertical-align: middle !important;
  opacity: 1 !important;
  clip: auto !important;
  clip-path: none !important;
  overflow: visible !important;
  -webkit-appearance: checkbox !important;
  appearance: checkbox !important;
}

.agreeText .wpcf7-list-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  margin: 0 !important;
}

.agreeText .wpcf7-list-item-label {
  display: inline-block !important;
  cursor: pointer;
}

/* スピナー非表示 */
.wpcf7-spinner {
  display: none !important;
}

/*------------------------------------------------------------
	sustainability-page
------------------------------------------------------------*/


	.sb-content {
		--sb-max: 1200px;
		--sb-gap: 3.2rem;
		--sb-vgap: 5.6rem;
		padding: 2.3rem 1.4rem;
	}
	
	.sb-content__inner {
		max-width: var(--sb-max);
		margin: 0 auto;
	}
	
	.sb-content__title {
		margin: 0 0 5rem;
		font-size: 2.6rem;
	}
	
	.sb-content__list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: grid;
		row-gap: var(--sb-vgap);
	}
	
	.sb-content__item {
		display: grid;
		grid-template-columns: minmax(300px, 560px) 1fr;
		align-items: center;
		column-gap: var(--sb-gap);
	}
	
	.sb-content__photo-box {
		text-align: center;
	}
	
	.sb-content__photo {
		display: block;
		width: 100%;
		max-width: 560px;
		height: auto;
		aspect-ratio: 16 / 9;
		margin: 0 auto;
	}
	
	.sb-content__text-box {
		margin-left: 20px;
	}

	.sb-content__subtitle {
		margin: 0 0 1.2rem;
		font-weight: 700;
		font-size: 3.4rem;
		letter-spacing: .02em;
	}
	
	.sb-content__threetitle {
		margin-bottom: 1.9rem;
		padding-left: 1.8rem;
		font-size: 2.6rem;
		font-weight: 700;
		background: url("../img/sustainability/line01.png") no-repeat left 0.7rem / 0.4rem;
	}
	
	.sb-content__text {
		margin: 0;
		font-size: 1.8rem;
	}
	
	.sb-content__item + .sb-content__item {
		padding-top: 3.2rem;
		border-top: 1px solid #eee;
	}
	
	@media (max-width: 1200px) {
		.sb-content {
			--sb-gap: 2.8rem;
			--sb-vgap: 5.2rem;
		}
	}
	
	@media (max-width: 1024px) {
		.sb-content {
			--sb-gap: 2.4rem;
			--sb-vgap: 4.8rem;
		}

		.sb-content__item {
			grid-template-columns: minmax(260px, 560px) 1fr;
		}
	}
	
	@media (max-width: 896px) {
		.sb-content {
			padding: 4rem 1.6rem;
		}
		.sb-content__title {
			font-size: 2.6rem;
			margin-bottom: 2.4rem;
		}

		.sb-content__item {
			grid-template-columns: 1fr;
			row-gap: 1.6rem;
			align-items: start;
		}
		.sb-content__subtitle {
			font-size: 2.6rem;
			text-align: left;
			margin-top: 2rem;
		}

		.sb-content__threetitle {
			font-size: 2.2rem;
			margin-top: 2rem;
		}
		.sb-content__item + .sb-content__item {
			padding-top: 2.4rem;
		}

		.sb-content__text {
			margin: 0;
			font-size: 1.6rem;
		}
		.sb-content__text-box {
			margin-left: 5px;
		}
	}

/*------------------------------------------------------------
	brの処理
------------------------------------------------------------*/
.br-sm {
  display: none;
}
@media all and (max-width: 896px) {
  .br-sm {
    display: block;
  }
}

.br-sm-hide {
  display: block;
}
@media all and (max-width: 896px) {
  .br-sm-hide {
    display: none;
  }
}

/* =========================================================
   Valueのポップアップ（CSS 全面書き直し）
   - 背面スクロール完全固定（iOS含む）…JS側で body に -no-scroll と
     --scroll-lock-top を付与する前提（未指定時は 0）
   - モーダル内のみスクロール可（慣性対応）
   - 既存のクラス名は踏襲（.c-modal / .value-popup 系）
========================================================= */

/* -------------------------
   基本トークン
------------------------- */
:root {
  --modal-pad-x: 40px;      /* ダイアログ左右パディング（SPで上書き） */
  --modal-pad-y: 0px;       /* ダイアログ上下パディング */
  --overlay-bg: rgba(0, 0, 0, .5);
  --wrap-width: 1200px;     /* .value-popup__wrapper の最大幅 */
  --close-bg: #999;
  --close-bg-hover: #777;
  --close-fg: #fff;
}

/* -------------------------
   背景スクロール抑止（強力版）
------------------------- */
html.-no-scroll,
body.-no-scroll {
  overflow: hidden;
  height: 100%;
}
body.-no-scroll {
  position: fixed;                       /* 背景固定（iOS対応） */
  top: var(--scroll-lock-top, 0);        /* JSで現在位置を負値で設定 */
  left: 0;
  right: 0;
  width: 100%;
}

/* -------------------------
   Modal: 基本
------------------------- */
.c-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  isolation: isolate;                    /* 外部の stacking 文脈の影響を遮断 */
  overscroll-behavior: none;             /* 背景側のバウンス抑止 */

  /* フェード管理（隠れている間は操作不可） */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity .28s ease,
    visibility 0s linear .28s;
}

/* 表示時 */
.c-modal.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity .28s ease,
    visibility 0s;
}

/* オーバーレイ */
.c-modal__overlay {
  position: absolute;
  inset: 0;
  background: var(--overlay-bg);
  opacity: 0;
  transition: opacity .28s ease;
}
.c-modal.is-active .c-modal__overlay { opacity: 1; }

/* ダイアログ本体 */
.c-modal__dialog {
  position: relative;
  z-index: 1;
  box-sizing: border-box;

  /* レイアウト */
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: var(--modal-pad-y) var(--modal-pad-x);
  background: #fff;
  color: #222;

  /* スクロールはモーダル内だけ許可（iOS慣性対応） */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable both-edges;

  /* アニメ初期値 */
  transform: translateY(16px) scale(.985);
  opacity: 0;
  transition: opacity .28s ease, transform .28s ease;
  will-change: opacity, transform;
}
.c-modal.is-active .c-modal__dialog {
  opacity: 1;
  transform: none;
}

/* -------------------------
   Close Button
------------------------- */
/* 画面右上に常時固定（dialog の transform に影響されない） */
.c-modal__close{
  position: fixed;
  top: max(0px, env(safe-area-inset-top));
  right: max(0px, env(safe-area-inset-right));
  margin: 0;

  display: inline-flex;
  align-items: center;
  gap: 21px;

  background: var(--close-bg);
  color: var(--close-fg);
  font-size: 18px;
  font-weight: 400;
  border: none;
  border-radius: 0 0 0 30px;
  padding: 20px 20px 20px 27px;
  cursor: pointer;
  transition: background .25s ease, transform .12s ease, opacity .2s ease;
  z-index: 100000; /* overlay より前、モーダルより前 */
}
.c-modal__close:hover { background: var(--close-bg-hover); }
.c-modal__close:active { transform: translateY(1px); }
.c-modal__close:focus-visible {
  outline: 3px solid #08ADF5;
  outline-offset: 2px;
  border-radius: 12px;
}

.c-modal__close-text { line-height: 1; }

.c-modal__close-icon {
  position: relative;
  width: 24px;
  height: 24px;
  display: inline-block;
}
.c-modal__close-icon::before,
.c-modal__close-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;    /* 線の長さ */
  height: 2px;    /* 線の太さ */
  background: #fff;
  transform-origin: center;
}
.c-modal__close-icon::before { transform: translate(-50%, -50%) rotate(45deg); }
.c-modal__close-icon::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* -------------------------
   Value Popup（内容）
------------------------- */
.value-popup {
  padding: 100px 0;
  font-family: "Noto Sans JP", "Raleway", sans-serif;
}

.value-popup__wrapper {
  width: var(--wrap-width);
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

.value-popup__title {
  font-size: 90px;
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 8px;
}

.value-popup__subtitle {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 67px;
}

.value-popup__list {
  display: grid;
  row-gap: 50px;
}

.value-popup__item {
  display: grid;                           /* 2カラム */
  grid-template-columns: 600px 560px;      /* 600 + 40 + 560 = 1200 */
  column-gap: 40px;
  align-items: center;
}

.value-popup__text { min-width: 0; }

.value-popup__label {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 12px;
  line-height: 1.2;
}
.value-popup__label--green  { color: #009944; }
.value-popup__label--orange { color: #303776; }
.value-popup__label--red    { color: #E8131F; }
.value-popup__label--blue   { color: #08ADF5; }
.value-popup__label--navy   { color: #303776; }

.value-popup__heading {
  font-size: 38px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 24px;
  letter-spacing: 0;
}

.value-popup__desc {
  font-size: 18px;
  line-height: 2;
  color: #333;
  margin: 48px 0 0;
  max-width: 600px;
}

.value-popup__image { min-width: 0; }

.value-popup__img {
  display: block;
  width: 100%;
  height: 360px;
  object-fit: cover;
  border-radius: 30px;
}
.c-modal .value-popup figure { margin: 0; }

/* -------------------------
   Responsive
------------------------- */

/* 1200px 未満：モーダル余白など微調整 */
@media (max-width: 1200px) {
  :root { --modal-pad-x: 32px; }

  .c-modal__dialog {
    margin: 16px auto;
    padding: var(--modal-pad-y) var(--modal-pad-x);
  }

  .value-popup__wrapper {
    width: auto;
    max-width: var(--wrap-width);
    padding: 0 24px;
  }
}

/* 1024px 未満：1カラム化＋画像を本文の上に */
@media (max-width: 1024px) {
  :root { --modal-pad-x: 24px; }

  .c-modal__dialog {
    margin: 0 auto;
    padding: 0 var(--modal-pad-x);
  }

  .value-popup { padding: 72px 0; }

  .value-popup__title {
    font-size: 56px;
    line-height: 1.1;
    margin: 0 0 8px;
  }

  .value-popup__subtitle {
    font-size: 18px;
    margin: 0 0 40px;
  }

  .value-popup__list { row-gap: 40px; }

  /* レイアウト入れ替え（画像→本文の順） */
  .value-popup__item {
    grid-template-columns: 1fr;
    grid-template-areas:
      "label"
      "heading"
      "image"
      "desc";
    row-gap: 16px;
    column-gap: 0;
    align-items: start;
  }

  /* 子要素を直接グリッドのアイテム化 */
  .value-popup__text { display: contents; }
  .value-popup__label   { grid-area: label;   font-size: 20px; margin: 0 0 8px; }
  .value-popup__heading { grid-area: heading; font-size: 32px; margin: 0 0 12px; }
  .value-popup__image   { grid-area: image; }
  .value-popup__desc    { grid-area: desc; font-size: 16px; line-height: 2; max-width: none; margin-top: 0; }

  .value-popup__img { width: 95%; height: auto; border-radius: 24px; margin: 0 auto; }

  .c-modal__close {
    gap: 12px;
    padding: 14px 16px 14px 18px;
    border-radius: 0 0 0 20px;
    font-size: 16px;
  }
  .c-modal__close-icon { width: 20px; height: 20px; }
  .c-modal__close-icon::before,
  .c-modal__close-icon::after { width: 20px; height: 2px; }
}

/* 640px 未満：余白/タイポ調整 */
@media (max-width: 640px) {
  :root { --modal-pad-x: 16px; }

  .c-modal__dialog { padding: 0 var(--modal-pad-x); }

  .value-popup { padding: 56px 0; }
  .value-popup__wrapper { padding: 0; }

  .value-popup__title { font-size: 40px; margin: 0 0 6px; }
  .value-popup__subtitle { font-size: 14px; margin: 0 0 28px; }

  .value-popup__list { row-gap: 32px; }
  .value-popup__item { row-gap: 10px; margin-top: 3rem; }

  .value-popup__label { font-size: 16px; }
  .value-popup__heading { font-size: 26px; margin: 0 0 10px; }
  .value-popup__img { border-radius: 16px; width: 100%; }
  .value-popup__desc { font-size: 16px; line-height: 1.9; margin: 10px 0 30px; }

	.c-modal__close{
    top: max(0px, env(safe-area-inset-top));
    right: max(0px, env(safe-area-inset-right));
    margin-right: 0;
  }
  .c-modal__close-icon { width: 18px; height: 18px; }
  .c-modal__close-icon::before,
  .c-modal__close-icon::after { width: 18px; height: 2px; }
}

/* -------------------------
   Motion Reduction
------------------------- */
@media (prefers-reduced-motion: reduce) {
  .c-modal,
  .c-modal__overlay,
  .c-modal__dialog {
    transition: none !important;
  }
  .c-modal.is-active { opacity: 1 !important; visibility: visible !important; }
  .c-modal__dialog { transform: none !important; opacity: 1 !important; }
}

.t-recruit-color--white {
	color: #fff !important;
}

@media all and (max-width: 896px) {
  .t-recruit-content {
		height: 450px;
	}
}