@charset "UTF-8";

/*--------------------------------------------------------------
#mainscreen-area
--------------------------------------------------------------*/
	
@media screen and (min-width: 300px) {
	
	#mainscreen-area {
		padding: 10px 30px 40px 30px;
		position: relative;
	}

	#mainscreen-area .illust {
		width: 100%;
	}
	
	#mainscreen-area .catch {
		
	}
	
	#mainscreen-area .catch h1 {
		font-family: "Dela Gothic One", sans-serif;
		font-style: italic;
		font-size: 57px;
		line-height: 0.9;
		margin-bottom: 20px;
	}
	
	#mainscreen-area .catch h1 span {
		display: block;
		letter-spacing: -5px;
	}
	
	#mainscreen-area .catch h5 {
		margin-left: 10px;
		font-family: "Bakbak One", sans-serif;
		font-size: 13px;
	}
	
	.catch h1 {
		opacity: 0;
		transform: translateX(40px);
		transition: none;
		will-change: transform, opacity;
	}

	.catch h1.animate-in {
		animation: h1SlideInRight 0.45s cubic-bezier(0.25, 1, 0.5, 1) forwards;
	}
	
	.companysite a {
		font-size: 14px;
		font-weight: 900;
		position: absolute;
		bottom: 0;
		right: 10px;
		transition: transform 0.3s ease, color 0.3s ease;
	}
	
	.companysite a:hover {
		transform: translateX(6px);
		color: #CCC; /* ややグレーへ変化（好みに応じて調整可） */
	}
	
	.companysite .material-symbols-outlined {
		margin-left: 5px;
		vertical-align: -3px;
		font-size: 20px;
		font-variation-settings:
			'FILL' 0,
			'wght' 400,
			'GRAD' 0,
			'opsz' 24
	}
}
	
@media screen and (min-width: 771px) {
	
	
	
}



@media screen and (min-width: 1161px) {
	
	#mainscreen-area {
		display: -webkit-flex;
		display: flex;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		align-items: center;
		padding: 3.646vw 4.167vw;
		position: relative;
	}

	#mainscreen-area .illust {
		width: 34.85vw;
	}
	
	#mainscreen-area .catch {
		
	}
	
	#mainscreen-area .catch h1 {
		font-family: "Dela Gothic One", sans-serif;
		font-style: italic;
		font-size: 9.5vw;
		line-height: 0.9;
		margin-bottom: 2.604vw;
	}
	
	#mainscreen-area .catch h1 span {
		display: block;
		letter-spacing: -0.26vw;
	}
	
	#mainscreen-area .catch h5 {
		margin-left: 0.521vw;
		font-family: "Bakbak One", sans-serif;
		font-size: 0.781vw;
	}
	
	.catch h1 {
		opacity: 0;
		transform: translateX(40px); /* 右から */
		transition: none;
		will-change: transform, opacity;
	}
	
	.catch h1.animate-in {
		animation: h1SlideInRight 0.45s cubic-bezier(0.25, 1, 0.5, 1) forwards;
	}
	
	.companysite a {
		font-size: 1.042vw;
		font-weight: 900;
		position: absolute;
		top: 1.562vw;
		right: 1.562vw;
		transition: transform 0.3s ease, color 0.3s ease;
	}
	
	.companysite a:hover {
		transform: translateX(6px);
		color: #CCC; /* ややグレーへ変化（好みに応じて調整可） */
	}
	
	.companysite .material-symbols-outlined {
		margin-left: 0.26vw;
		vertical-align: -0.156vw;
		font-size: 1.042vw;
		font-variation-settings:
			'FILL' 0,
			'wght' 400,
			'GRAD' 0,
			'opsz' 24
	}
	
}

@keyframes h1SlideInRight {
  0% {
    opacity: 0;
    transform: translateX(40px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}


/*--------------------------------------------------------------
.scrolldown
--------------------------------------------------------------*/
	
@media screen and (min-width: 300px) {
	
	.scrolldown {
		position:absolute;
		left: 10px;
		bottom: 60px;
		height: 100px;
	}
	
	.scrolldown span{
		position: absolute;
		left: -10px;
		top: 0;
		color: #151E23;
		font-size: 13px;
		font-family: "Bakbak One", sans-serif;
		writing-mode: vertical-rl;
	}

	.scrolldown::after {
		content: "";
		position: absolute;
		top: 100px;
		width: 1px;
		height: 50px;
		background: #151E23;
		animation: pathmove 1.4s ease-in-out infinite;
		opacity: 0;
	}
	
}
	
@media screen and (min-width: 771px) {
	
	
	
}



@media screen and (min-width: 1161px) {
	
	.scrolldown {
		position:absolute;
		left: 2.604vw;
		bottom: 3.125vw;
		height: 7.812vw;
	}
	
	.scrolldown span{
		position: absolute;
		left: -0.521vw;
		top: 0;
		color: #151E23;
		font-size: 0.938vw;
		font-family: "Bakbak One", sans-serif;
		writing-mode: vertical-rl;
	}

	.scrolldown::after {
		content: "";
		position: absolute;
		top: 3.906vw;
		width: 0.052vw;
		height: 5.208vw;
		background: #151E23;
		animation: pathmove 1.4s ease-in-out infinite;
		opacity:0;
	}
	
}

@keyframes pathmove{
	0%{
		height: 0;
		top: 75px;
		opacity: 0;
	}
	50%{
		height: 150px;
		opacity: 1;
	}
	100%{
		height:0;
		top: 130px;
		opacity: 0;
	}
}


/*--------------------------------------------------------------
#about-area
--------------------------------------------------------------*/
	
@media screen and (min-width: 300px) {
	
	#about-area {
		margin: 30px 0 0 0;
		padding: 30px 0 20px 0;
		width: auto;
		background: url("images/aboutus.png") top left no-repeat;
		-webkit-background-size: 100% auto;
		background-size: 100% auto;
	}
	
	#about-area div:first-child {
		padding: 0 8% 30px 8%;
	}
	
	#about-area div:first-child dt {
		padding: 0 0 30px 0;
	}
	
	#about-area div:first-child dd {
		padding: 0 0;
		font-size: 16px;
		font-weight: 700;
	}
	
	#about-area div:first-child dd span {
		font-family: "Bakbak One", sans-serif;
		font-size: 30px;
		display: block;
	}
	
	#about-area div:last-child {
		width: auto;
		margin-left: 0;
	}
	
	.about_link {
		text-align: center;
		margin-bottom: 50px;
	}

	.about_link a {
		display: inline-flex;
		align-items: center;
		font-size: 17px;
		font-weight: 900;
		text-decoration: none;
		color: inherit;
		gap: 8px;
		transition: opacity 0.6s ease, transform 0.6s ease;
	}
	
	.about_link a:hover {
		opacity: 0.6; /* 透過 */
		transform: scale(1.05);
	}

	.about_link .material-symbols-outlined {
		font-size: 40px;
		font-variation-settings:
		'FILL' 2,
		'wght' 200,
		'GRAD' 0,
		'opsz' 24;
	}
	
}
	
@media screen and (min-width: 771px) {
	
	
	
}



@media screen and (min-width: 1161px) {
	
	#about-area {
		margin: 0 auto;
		padding: 50px 0 0 0;
		width: 88.54vw;
		display: -webkit-flex;
		display: flex;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		background: url("images/aboutus.png") top left no-repeat;
		-webkit-background-size: 50% auto;
		background-size: 50% auto;
	}
	
	#about-area div:first-child {
		padding: 0 0 5.208vw 0;
	}
	
	#about-area div:first-child dt {
		padding: 0 0 2.604vw 4.167vw;
	}
	
	#about-area div:first-child dd {
		padding: 0 0 0 4.167vw;
		font-size: 1.042vw;
		font-weight: 700;
	}
	
	#about-area div:first-child dd span {
		font-family: "Bakbak One", sans-serif;
		font-size: 3.646vw;
		display: block;
	}
	
	#about-area div:last-child {
		width: 45.31vw;
		margin-left: 3.646vw;
	}
	
	.about_link {
		text-align: center;
		margin-bottom: 4.688vw;
	}

	.about_link a {
		display: inline-flex;
		align-items: center;
		font-size: 2.083vw;
		font-weight: 900;
		text-decoration: none;
		color: inherit;
		gap: 0.417vw;
		transition: opacity 0.6s ease, transform 0.6s ease;
	}
	
	.about_link a:hover {
		opacity: 0.6; /* 透過 */
		transform: scale(1.05);
	}

	.about_link .material-symbols-outlined {
		font-size: 5.208vw;
		font-variation-settings:
		'FILL' 2,
		'wght' 200,
		'GRAD' 0,
		'opsz' 24;
	}
	
}


/*--------------------------------------------------------------
#movie-area
--------------------------------------------------------------*/
	
@media screen and (min-width: 300px) {
	
	#movie-area {
		margin: 0;
		padding: 0 40px 0 20px;
		box-sizing: border-box;
		position: relative;
		background: url("images/about_bg.png") left bottom no-repeat;
		-webkit-background-size: 100% 50px;
		background-size: 100% 50px;
	}
	
	#movie-area .movie-img {
		position: relative;
	}
	
	#movie-area .movie-img img {
		border-radius: 10px;
	}
	
	#movie-area .movie-img a {
		display: block;
		font-size: 18px;
		color: #B1FF00;
		font-family: "Bakbak One", sans-serif;
		width: 80px;
		height: 80px;
		line-height: 80px;
		border: 1px solid #B1FF00;
		border-radius: 50%;
		text-align: center;
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		transition: opacity 0.6s ease, transform 0.6s ease; /* ←追加 */
	}
	
	#movie-area .movie-img a:hover {
		opacity: 0.6; /* 透過 */
		transform: translate(-50%, -50%) scale(1.1); /* ふわりと拡大 */
	}

	#movie-area span {
		font-family: "Bakbak One", sans-serif;
		font-size: 18px;
		writing-mode: vertical-rl;
		position: absolute;
		top: 0;
		right: 8px;
	}

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



@media screen and (min-width: 1161px) {
	
	#movie-area {
		margin: 0;
		padding: 0 10.417vw 7.812vw 5.208vw;
		box-sizing: border-box;
		position: relative;
		background: url("images/about_bg.png") left bottom no-repeat;
		-webkit-background-size: 100% 15.62vw;
		background-size: 100% 15.62vw;
	}
	
	#movie-area .movie-img {
		position: relative;
	}
	
	#movie-area .movie-img img {
		border-radius: 0.521vw;
	}
	
	#movie-area .movie-img a {
		display: block;
		font-size: 1.302vw;
		color: #B1FF00;
		font-family: "Bakbak One", sans-serif;
		width: 6.615vw;
		height: 6.615vw;
		line-height: 6.615vw;
		border: 1px solid #B1FF00;
		border-radius: 50%;
		text-align: center;
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		transition: opacity 0.6s ease, transform 0.6s ease; /* ←追加 */
	}
	
	#movie-area .movie-img a:hover {
		opacity: 0.6; /* 透過 */
		transform: translate(-50%, -50%) scale(1.1); /* ふわりと拡大 */
	}

	#movie-area span {
		font-family: "Bakbak One", sans-serif;
		font-size: 3.125vw;
		writing-mode: vertical-rl;
		position: absolute;
		top: 0;
		right: 5.208vw;
	}
	
}

/*--------------------------------------------------------------
#job-area
--------------------------------------------------------------*/
	
@media screen and (min-width: 300px) {
	
	#job-area {
		margin: 0;
		padding: 30px 8% 50px 8%;
		background: url("images/about_bg.png") left top;
		-webkit-background-size: 390px 390px;
		background-size: 390px 390px;
	}
	
	#job-area div:first-child {
		width: auto;
		margin-bottom: 30px;
	}

	#job-area div:last-child {
		width: auto;
	}
	
	#job-area div:last-child dt {
		font-size: 30px;
		font-weight: 900;
		line-height: 1.3;
		margin-bottom: 20px;
	}
	
	#job-area div:last-child dt span {
		font-size: 20px;
		display: block;
	}
}
	
@media screen and (min-width: 771px) {
	
	
	
}



@media screen and (min-width: 1161px) {
	
	#job-area {
		margin: 0;
		padding: 0 10.417vw 3.771vw 10.417vw;
		display: -webkit-flex;
		display: flex;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		background: url("images/about_bg.png") left top;
		-webkit-background-size: 20.31vw 20.31vw;
		background-size: 20.31vw 20.31vw;
	}
	
	#job-area div:first-child {
		width: 23.43vw;
	}

	#job-area div:last-child {
		width: 52vw;
	}
	
	#job-area div:last-child dt {
		font-size: 4.167vw;
		font-weight: 900;
		line-height: 1.3;
		margin-bottom: 2.083vw;
	}
	
	#job-area div:last-child dt span {
		font-size: 1.823vw;
		display: block;
	}
	
}


/*--------------------------------------------------------------
#slider-area
--------------------------------------------------------------*/
	
@media screen and (min-width: 300px) {
	
	#slider-area {
		margin: 0;
		padding: 0;
		background: url("images/about_bg.png") left top;
		-webkit-background-size: 390px 390px;
		background-size: 390px 390px;
	}
	
	#slider-area ul{
		display: none;
	}
	
	#slider-area ul img {
		width: 100%;
		height: auto;
		border-radius: 10px;
	}
	
	#slider-area ul .slick-slide {
		margin: 0 10px;
	}
	
	
	#slider-area ul.slick-initialized {
		display: block;
	}
	
	.scroll-wrapper {
		overflow: hidden;
		position: relative;
	}
	
	.scroll-list {
		display: flex;
		list-style: none;
		padding-inline: 0;
		margin-inline: 0;
		gap: 0;
		position: relative;
		left: calc(50% - 50vw);
		font-family: "Bakbak One", sans-serif;
		background: url("images/about_bg.png") left top;
		-webkit-background-size: 390px 390px;
		background-size: 390px 390px;
		padding-bottom: 30px;
	}
	
	.scroll-list li {
		color: #151E23;
		font-size: 50px;
		white-space: nowrap;
		padding: 0 0.5em 0 0;
		animation: marquee-right 30s linear infinite;
	}
	
	.scroll-list span.line {
		color: transparent;
		-webkit-text-stroke: 1px #151E23;
		padding: 0 0 0 0.5em;
	}
}
	
@media screen and (min-width: 771px) {
	
	
	
}



@media screen and (min-width: 1161px) {
	
	#slider-area {
		margin: 0;
		padding: 0;
		background: url("images/about_bg.png") left top;
		-webkit-background-size: 20.31vw 20.31vw;
		background-size: 20.31vw 20.31vw;
	}
	
	#slider-area ul{
		display: none;
	}
	
	#slider-area ul img {
		width: 100%;
		height: auto;
		border-radius: 0.521vw;
	}
	
	#slider-area ul .slick-slide {
		margin: 0 1.302vw;
	}
	
	
	#slider-area ul.slick-initialized {
		display: block;
	}
	
	.scroll-wrapper {
		overflow: hidden;
		position: relative;
	}
	
	.scroll-list {
		display: flex;
		list-style: none;
		padding-inline: 0;
		margin-inline: 0;
		gap: 0;
		position: relative;
		left: calc(50% - 50vw);
		font-family: "Bakbak One", sans-serif;
		background: url("images/about_bg.png") left top;
		-webkit-background-size: 20.31vw 20.31vw;
		background-size:20.31vw 20.31vw;
		padding-bottom: 5.208;
	}
	
	.scroll-list li {
		color: #151E23;
		font-size: 5.469vw;
		white-space: nowrap;
		padding: 0 0.5em 0 0;
		animation: marquee-right 30s linear infinite;
	}
	
	.scroll-list span.line {
		color: transparent;
		-webkit-text-stroke: 1px #151E23;
		padding: 0 0 0 0.5em;
	}
	
}

@keyframes marquee-right {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.rotate {
  animation: rotate 20s infinite linear;
}


/*--------------------------------------------------------------
#description-area
--------------------------------------------------------------*/
	
@media screen and (min-width: 300px) {
	
	#description-area {
		margin: 0;
		padding: 0 8% 170px 8%;
		background: url("images/about_bg.png") left top;
		-webkit-background-size: 390px 390px;
		background-size: 390px 390px;
		position: relative;
	}
	
	#description-area h4 {
		margin: 0 0 20px 0;
		padding: 0;
		font-size: 16px;
		font-weight: 900;
	}
	
	#description-area h4 span {
		margin: 0;
		padding: 0;
		font-size: 40px;
		font-family: "Bakbak One", sans-serif;
		display: block;
	}
	
	#description-area ul {
		margin: 0;
		padding: 0;
	}
	
	#description-area ul li {
		padding: 30px 5%;
		width: 100%;
		box-sizing: border-box;
	}
	
	#description-area ul li:nth-child(1) {
		background: url("images/num_01.png") left 0 top 20px no-repeat;
		-webkit-background-size: auto 50px;
		background-size:auto 50px;
		border-right: none;
		border-bottom: 1px solid #151E23;
	}
	
	#description-area ul li:nth-child(2) {
		background: url("images/num_02.png") left 0 top 20px no-repeat;
		-webkit-background-size: auto 50px;
		background-size:auto 50px;
		border-bottom: 1px solid #151E23;
	}
	
	#description-area ul li:nth-child(3) {
		background: url("images/num_03.png") left 0 top 20px no-repeat;
		-webkit-background-size: auto 50px;
		background-size:auto 50px;
		border-right: none;
		border-bottom: 1px solid #151E23;
	}
	
	#description-area ul li:nth-child(4) {
		background: url("images/num_04.png") left 0 top 20px no-repeat;
		-webkit-background-size: auto 50px;
		background-size:auto 50px;
	}
	
	#description-area dt {
		font-size: 20px;
		font-weight: 900;
		margin-bottom: 10px;
	}
	
	#description-area .item {
		height: 200px;
		bottom: -30px;
		left: 50%;
		-webkit-transform: translateX(-50%); /* Safari用 */
		transform: translateX(-50%);
		position: absolute;
	}
}
	
@media screen and (min-width: 771px) {
	
	
	
}



@media screen and (min-width: 1161px) {
	
	#description-area {
		margin: 0;
		padding: 2.208vw 7.292vw 3.208vw 30.72vw;
		background: url("images/about_bg.png") left top;
		-webkit-background-size: 20.31vw 20.31vw;
		background-size: 20.31vw 20.31vw;
		position: relative;
	}
	
	#description-area h4 {
		margin: 0 0 1.042vw 0;
		padding: 0;
		font-size: 1.562;
		font-weight: 900;
	}
	
	#description-area h4 span {
		margin: 0 3.385vw 0 0;
		padding: 0;
		font-size: 3.125;
		font-family: "Bakbak One", sans-serif;
		display: inline;
	}
	
	#description-area ul {
		margin: 0;
		padding: 0;
		display: -webkit-flex;
		display: flex;
		flex-wrap: wrap;
	}
	
	#description-area ul li {
		padding: 2.604vw 3.906vw;
		width: 50%;
		box-sizing: border-box;
	}
	
	#description-area ul li:nth-child(1) {
		background: url("images/num_01.png") left 1.042vw top 1.042vw no-repeat;
		-webkit-background-size: auto 5.208vw;
		background-size:auto 5.208vw;
		border-right: 1px solid #151E23;
		border-bottom: 1px solid #151E23;
	}
	
	#description-area ul li:nth-child(2) {
		background: url("images/num_02.png") left 1.042vw top 1.042vw no-repeat;
		-webkit-background-size: auto 5.208vw;
		background-size:auto 5.208vw;
		border-bottom: 1px solid #151E23;
	}
	
	#description-area ul li:nth-child(3) {
		background: url("images/num_03.png") left 1.042vw top 1.042vw no-repeat;
		-webkit-background-size: auto 5.208vw;
		background-size:auto 5.208vw;
		border-right: 1px solid #151E23;
		border-bottom: none;
	}
	
	#description-area ul li:nth-child(4) {
		background: url("images/num_04.png") left 1.042vw top 1.042vw no-repeat;
		-webkit-background-size: auto 5.208vw;
		background-size:auto 5.208vw;
	}
	
	#description-area dt {
		font-size: 1.562vw;
		font-weight: 900;
		margin-bottom: 0.521vw;
	}
	
	#description-area .item {
		width: 18.22vw;
		height: auto;
		position: absolute;
		bottom: -3.125vw;
		left: 8.333vw;
		margin: 0;
		-webkit-transform: translateX(0); /* Safari用 */
		transform: translateX(0);
	}
	
	
}


/*--------------------------------------------------------------
#recruitment-area
--------------------------------------------------------------*/
	
@media screen and (min-width: 300px) {
	
	#recruitment-area {
		margin: 0;
		padding: 50px 0 50px 0;
	}
	
	#recruitment-area h5 {
		font-size: 25px;
		font-weight: 900;
		text-align: center;
		letter-spacing: -3px;
		margin-bottom: 30px;
	}
	
	#recruitment-area h5 span {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 10px;
	}
	
	#recruitment-area h5 span::before {
		content: '';
		display: inline-block;
		margin-right: 10px;
		width: 30px;
		height: 1px;
		background-color: #151E23;
	}
}
	
@media screen and (min-width: 771px) {
	
	
	
}



@media screen and (min-width: 1161px) {
	
	#recruitment-area {
		margin: 0;
		padding: 3.646vw 0 5.208vw 0;
	}
	
	#recruitment-area h5 {
		font-size: 5.208vw;
		font-weight: 900;
		text-align: center;
		letter-spacing: -0.521vw;
		margin-bottom: 2.604vw;
	}
	
	#recruitment-area h5 span {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 0.521vw;
	}
	
	#recruitment-area h5 span::before {
		content: '';
		display: inline-block;
		margin-right: 1.562vw;
		width: 13.54vw;
		height: 0.052vw;
		background-color: #151E23;
	}
	
}

/*--------------------------------------------------------------
.tab
--------------------------------------------------------------*/
	
@media screen and (min-width: 300px) {
	
	.tab{
		display: -webkit-flex;
		display: flex;
		-webkit-justify-content: center;
		justify-content: center;
		width: 100%;
		margin: 0;
	}
	
	.tab li{
		width: 100%;
	}
	
	.tab li a{
		display: block;
		background: #FFF;
		margin: 0;
		padding: 30px 30px;
		width: 100%;
		text-align: center;
		font-size: 18px;
		font-weight: 900;
		position: relative;
	}
	
	.tab li.active a{
		background: #333333;
		color: #FFF;
	}
	
	.tab li .material-symbols-outlined {
		font-size: 20px;
		position: absolute;
		top: 50%;
		right: 10px;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
		font-variation-settings:
			'FILL' 0,
			'wght' 200,
			'GRAD' 0,
			'opsz' 24
	}

	.tab-contents {
		margin: 0;
		padding: 50px 0;
		background-color: #333333;
	}

	.area {
		display: none;
		opacity: 0;
		margin: 0 5%;
		width: auto;
	}

	.area.is-active {
		display: block;
		animation-name: displayAnime;
		animation-duration: 2s;
		animation-fill-mode: forwards;
	}
	
	/*アコーディオン*/
	
	.accordion-area {
		margin: 0;
	}

	.title {
		position: relative;
		cursor: pointer;
		font-size: 20px;
		font-weight: 900;
		padding: 30px 30px;
		transition: all .5s ease;
		background: #FFF;
		border-radius: 10px;
	}

	/* アイコンの円形背景 */
	.title::before {
		content: '';
		position: absolute;
		top: 50%;
		right: 15px; /* 円の右端が60pxボタンの中央に近づくように */
		transform: translateY(-50%);
		width: 30px;
		height: 30px;
		background-color: #231815;
		border-radius: 50%;
		z-index: 1;
	}

	.title::after {
		content: '';
		position: absolute;
		top: 50%;
		right: 30px; /* = right:15px + (30/2) */
		width: 16px;
		height: 2px;
		background-color: #fff;
		transform: translate(50%, -50%) rotate(0deg);
		transition: transform 0.3s ease;
		z-index: 2;
	}

	.title span::before {
		content: '';
		position: absolute;
		top: 50%;
		right: 30px;
		width: 16px;
		height: 2px;
		background-color: #fff;
		transform: translate(50%, -50%) rotate(90deg);
		transition: transform 0.3s ease;
		z-index: 2;
	}

	.title.close::after {
		transform: translate(50%, -50%) rotate(45deg);
	}

	.title.close span::before {
		transform: translate(50%, -50%) rotate(-45deg);
	}
	
	.box {
		display: none;
		background: #FFF;
		border-radius: 0 0 10px 10px;
		margin: -10px 0 0 0;
		padding: 10px 5% 30px 5%;
	}
	
	.inner-area {
		margin: 0;
		padding: 20px 0 0 0;
		border-top: 1px solid #707070;
	}
	
	.inner-area dl {
		margin: 0;
		padding: 0;
	}
	
	.inner-area dl dt {
		margin: 0;
		padding: 10px 0 0 0;
		font-size: 18px;
		font-weight: 900;
		line-height: 1.8;
		width: auto;
	}
	
	.inner-area dl dd {
		margin: 0;
		padding: 0 0 10px 0;
		width: auto;
	}
	
}
	
@media screen and (min-width: 771px) {
	
	
	
}



@media screen and (min-width: 1161px) {
	
	.tab{
		display: -webkit-flex;
		display: flex;
		-webkit-justify-content: center;
		justify-content: center;
		width: 81.77vw;
		margin: 0 auto;
	}
	
	.tab li a{
		display: block;
		background: #FFF;
		margin: 0;
		padding: 3.385vw 1.042vw;
		width: 40.88vw;
		text-align: center;
		font-size: 1.823vw;
		font-weight: 900;
		position: relative;
	}
	
	.tab li.active a{
		background: #333333;
		color: #FFF;
	}
	
	.tab li .material-symbols-outlined {
		font-size: 2.604vw;
		position: absolute;
		top: 50%;
		right: 1.823vw;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
		font-variation-settings:
			'FILL' 0,
			'wght' 200,
			'GRAD' 0,
			'opsz' 24
	}

	.tab-contents {
		margin: 0;
		padding: 5.208vw 0;
		background-color: #333333;
	}

	.area {
		display: none;
		opacity: 0;
		margin: 0 auto;
		width: 70.83vw;
	}

	.area.is-active {
		display: block;
		animation-name: displayAnime;
		animation-duration: 2s;
		animation-fill-mode: forwards;
	}
	
	/*アコーディオン*/
	
	.accordion-area {
		margin: 0;
	}

	.title {
		position: relative;
		cursor: pointer;
		font-size: 1.562vw;
		font-weight: 900;
		padding: 2.604vw 4.688vw;
		transition: all .5s ease;
		background: #FFF;
		border-radius: 0.521vw;
	}

	/* アイコンの円形背景 */
	.title::before {
		content: '';
		position: absolute;
		top: 50%;
		right: 2.083vw;
		transform: translateY(-50%);
		width: 2.865vw;
		height: 2.865vw;
		background-color: #231815;
		border-radius: 50%;
	}
	
	.title::after {
		content: '';
		position: absolute;
		top: 50%;
		right: 3.515vw; /* ＝40px + 27.5px（55/2） */
		width: 1.354vw;
		height: 0.156vw;
		background-color: #fff;
		transform: translate(50%, -50%) rotate(0deg);
		transition: transform 0.3s ease;
		z-index: 2;
	}
	
	.title span::before {
		content: '';
		position: absolute;
		top: 50%;
		right: 3.515vw;
		width: 1.354vw;
		height: 0.156vw;
		background-color: #fff;
		transform: translate(50%, -50%) rotate(90deg);
		transition: transform 0.3s ease;
		z-index: 2;
	}

	.title.close::after {
		transform: translate(50%, -50%) rotate(45deg);
	}

	.title.close span::before {
		transform: translate(50%, -50%) rotate(-45deg);
	}
	
	.box {
		display: none;
		background: #FFF;
		border-radius: 0 0 0.521vw 0.521vw;
		margin: -0.521vw 0 0 0;
		padding: 0.521vw 2.083vw 4.167vw 2.083vw;
	}
	
	.inner-area {
		margin: 0;
		padding: 2.604vw 3.385vw 0 3.385vw;
		border-top: 1px solid #707070;
	}
	
	.inner-area dl {
		margin: 0;
		padding: 0;
		 display: -webkit-flex;
		display: flex;
	}
	
	.inner-area dl dt {
		margin: 0;
		padding: 0.781vw 0;
		font-size: 1.042vw;
		font-weight: 900;
		line-height: 1.8;
		width: 11.45vw;
	}
	
	.inner-area dl dd {
		margin: 0;
		padding: 0.781vw 0;
		width: 48.43vw;
	}
	
}

@keyframes displayAnime{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}


/*--------------------------------------------------------------
.flow-area
--------------------------------------------------------------*/
	
@media screen and (min-width: 300px) {
	
	.flow-area {
		margin: 0 8%;
		padding: 30px 0;
		width: auto;
		color: #FFF;
	}
	
	.flow-area h6 {
		font-size: 18px;
		font-weight: 900;
	}
	
	.flow-area h6 span {
		font-size: 40px;
		margin-right: 30px;
		font-family: "Bakbak One", sans-serif;
	}
	
	.flow-area ul li {
		padding: 25px 10px;
		border-bottom: 1px solid #707070;
	}
	
	.flow-area ul li:last-child {
		border-bottom: none;
	}
	
	.flow-area dl {
	}
	
	.flow-area dt {
		width: auto;
		font-size: 20px;
		font-weight: 900;
		margin-bottom: 15px;
	}
	
	.flow-area dt span {
		font-size: 20px;
		margin-right: 20px;
		font-family: "Bakbak One", sans-serif;
	}
	
	.flow-area dd {
		width: auto;
	}
}
	
@media screen and (min-width: 771px) {
	
	
	
}



@media screen and (min-width: 1161px) {
	
	.flow-area {
		margin: 0 auto;
		padding: 5.208vw 0 2.865vw 0;
		width: 68.22vw;
		color: #FFF;
	}
	
	.flow-area h6 {
		font-size: 1.562vw;
		font-weight: 900;
	}
	
	.flow-area h6 span {
		font-size: 3.125vw;
		margin-right: 4.167vw;
		font-family: "Bakbak One", sans-serif;
	}
	
	.flow-area ul li {
		padding: 1.823vw 3.646vw;
		border-bottom: 1px solid #707070;
	}
	
	.flow-area ul li:last-child {
		border-bottom: none;
	}
	
	.flow-area dl {
		display: -webkit-flex;
		display: flex;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		align-items: center;
	}
	
	.flow-area dt {
		width: 18.48vw;
		font-size: 1.302vw;
		font-weight: 900;
		margin-bottom: 0;
	}
	
	.flow-area dt span {
		font-size: 1.562vw;
		margin-right: 1.823vw;
		font-family: "Bakbak One", sans-serif;
	}
	
	.flow-area dd {
		width: 42.18vw;
	}
	
}


/*--------------------------------------------------------------
.entry-area
--------------------------------------------------------------*/

@media screen and (min-width: 300px) {
	
	.entry-area {
		margin: 0;
		padding: 0 8%;
	}
	
	.entry-area dl {
		margin: 0;
		padding: 0;
		text-align: center;
	}
	
	.entry-area dt {
		margin: 0 0 20px 0;
		padding: 0;
		font-size: 16px;
		font-weight: 700;
		color: #FFF;
	}
	
	.entry-area dt span {
		margin: 0 0 0 5px;
		padding: 0;
		font-size: 30px;
		font-family: "Bakbak One", sans-serif;
	}
	
	
}

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


@media screen and (min-width: 1161px){
	
	.entry-area {
		margin: 0;
		padding: 0;
	}
	
	.entry-area dl {
		margin: 0;
		padding: 0;
		display: -webkit-flex;
		display: flex;
		-webkit-justify-content: center;
		justify-content: center;
		align-items: center;
		text-align: left;
	}
	
	.entry-area dt {
		margin: 0;
		padding: 0 4.688vw 0 0;
		font-size: 1.042vw;
		font-weight: 700;
		color: #FFF;
	}
	
	.entry-area dt span {
		margin: 0 2.083vw 0 0.26vw;
		padding: 0;
		font-size: 2.083vw;
		font-family: "Bakbak One", sans-serif;
	}

}


/*--------------------------------------------------------------
#career-area
--------------------------------------------------------------*/

@media screen and (min-width: 300px) {
	
	#career-area {
		margin: 0 8% 80px 8%;
		padding: 0;
		width: auto;
	}
	
	.career-map {
		margin: 0;
		padding: 30px 0 0 0;
	}
	
	.career-map ul {
		margin: 0;
		padding: 0;
	}
	
	.career-map ul li {
		margin: 0;
		padding: 20px 0 15px 0;
		width: 100%;
		box-sizing: border-box;
		border-bottom: 1px solid #ccc;
	}
	
	.career-map ul li:last-child {
		border-bottom: none;
	}
	
	.career-map dt {
		margin: 0 0 10px 0;
		text-align: left;
		font-size: 23px;
		font-weight: 900;
	}
	
	.career-map dd {
		margin: 0 0 15px 0;
	}
	
	.career-map dd span {
		margin: 0 10px 0 0;
		padding: 0 5px;
		border: 1px solid #231815;
	}
	
}

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


@media screen and (min-width: 1161px){
	
	#career-area {
		margin: 0 auto 5.208vw auto;
		padding: 0;
		width: 82.29vw;
	}
	
	.career-map {
		margin: 0;
		padding: 0 7.292vw;
	}
	
	.career-map ul {
		margin: 0;
		padding: 0;
		display: -webkit-flex;
		display: flex;
		-webkit-justify-content: space-between;
		justify-content: space-between;
	}
	
	.career-map ul li {
		margin: 0;
		padding: 1.823vw;
		display: -webkit-flex;
		display: flex;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		width: 33.3%;
		box-sizing: border-box;
		border-bottom: none;
	}
	
	.career-map dt {
		margin: 0 0 1.042vw 0;
		text-align: center;
		font-size: 1.562vw;
		font-weight: 900;
	}
	
	.career-map dd {
		margin: 0 0 0.781vw 0;
	}
	
	.career-map dd span {
		margin: 0 0.521vw 0 0;
		padding: 0 0.26vw;
		border: 1px solid #231815;
	}

}


/*--------------------------------------------------------------
.mid-image
--------------------------------------------------------------*/

@media screen and (min-width: 300px) {
	
	.mid-image {
		margin: 0 0 30px 0;
		padding: 0;
		position: relative;
	}
	
	.mid-image h4 {
		margin: 0;
		padding: 0;
		position: absolute;
		top: -20px;
		right: 5%;
		font-size: 20px;
		font-weight: 900;
		line-height: 1.5;
	}
	
}

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


@media screen and (min-width: 1161px){
	
	.mid-image {
		margin: 0 0 3.646vw 0;
		padding: 0;
		position: relative;
	}
	
	.mid-image h4 {
		margin: 0;
		padding: 0;
		position: absolute;
		top: -2.083vw;
		right: 9.375vw;
		font-size: 2.604vw;
		font-weight: 900;
		line-height: 1.5;
	}

}

/*--------------------------------------------------------------
#benefits-area
--------------------------------------------------------------*/

@media screen and (min-width: 300px) {
	
	#benefits-area {
		margin: 0 2%;
		padding: 0;
		width: auto;
	}
	
	#benefits-area h3 {
		margin-bottom: 30px;
		padding: 0 6%;
	}
	
	.features-l,
	.features-r {
		background: #FFF;
		border: 1px solid #231815;
		margin-bottom: 10px;
		border-radius: 10px;
	}
	
	.features-l {
		padding: 30px 8% 30px 8%;
	}
	
	.features-l div:first-child {
		width: auto;
	}
	
	.features-l div:last-child {
		width: auto;
	}
	
	.features-r {
		flex-direction: row-reverse;
		padding: 30px 8% 30px 8%;
	}
	
	.features-r div:first-child {
		width: auto;
	}
	
	.features-r div:last-child {
		width: auto;
	}
	
	#benefits-area dt {
		margin: 0 0 15px 0;
		font-size: 30px;
		font-weight: 900;
		line-height: 1.2;
	}
	
	#benefits-area dt span {
		margin: 30px 0 0 0;
		font-size: 20px;
		background: #B1FF00;
		line-height: 1;
	}
	
	.item1 {
		padding: 20px 5% 0 5%;
	}
	
	.item3 {
		padding: 20px 0 0 0;
	}
	
	
}

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


@media screen and (min-width: 1161px){
	
	#benefits-area {
		margin: 0 auto;
		padding: 3.646vw 0 0 0;
		width: 81.77vw;
	}
	
	#benefits-area h3 {
		margin-bottom: 50px;
		padding: 0;
	}
	
	.features-l,
	.features-r {
		display: -webkit-flex;
		display: flex;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		align-items: center;
		background: #FFF;
		border: 1px solid #231815;
		margin-bottom: 1.562vw;
		border-radius: 0.521vw;
	}
	
	.features-l {
		padding: 3.906vw 6.25vw 3.906vw 6.771vw;
	}
	
	.features-l div:first-child {
		width: 32.81vw;
	}
	
	.features-l div:last-child {
		width: 29.68vw;
	}
	
	.features-r {
		flex-direction: row-reverse;
		padding: 3.906vw 6.25vw 3.906vw 5.208vw;
	}
	
	.features-r div:first-child {
		width: 30.2vw;
	}
	
	.features-r div:last-child {
		width: 36.45vw;
	}
	
	#benefits-area dt {
		margin: 0 0 0.781vw 0;
		font-size: 2.865vw;
		font-weight: 900;
		line-height: 1.2;
	}
	
	#benefits-area dt span {
		margin: 1.562vw 0 0 0;
		font-size: 1.562vw;
		background: #B1FF00;
		line-height: 1;
	}
	
	.item1,
	.item3 {
		padding: 0;
	}
	
}


/*--------------------------------------------------------------
#real-area
--------------------------------------------------------------*/

@media screen and (min-width: 300px) {
	
	#real-area {
		margin: 0;
		padding: 50px 0 30px 0;
		position: relative;
	}
	
	#real-area h3 {
		margin: 0 8% 40px 8%;
		width: auto;
	}
	
	#real-area p {
		padding: 0 8% 30px 8%;
	}
	
	#real-area ul {
		margin: 0 5%;
		padding: 0;
		width: auto;
	}
	
	#real-area ul li {
		width: 100%;
		position: relative;
		overflow: hidden;
		transition: all 0.6s ease;
		margin-bottom: 30px;
	}
	
	#real-area ul li img {
		border-radius: 10px;
	}
	
	#real-area ul li:hover {
		opacity: 0.7;
		transform: scale(1.02);
	}
	
	#real-area dd.real_number {
		margin-top: -70px;
		margin-bottom: 10px;
		margin-left: 10px;
		margin-right: 10px;
		font-size: 15px;
		font-family: "Bakbak One", sans-serif;
	}
	
	#real-area dd.midashi {
		margin-left: 10px;
		margin-right: 10px;
		padding-left: 5px;
		padding-bottom: 5px;
		font-size: 25px;
		font-weight: 900;
		box-decoration-break: clone;
		-webkit-box-decoration-break: clone;
		display: inline;
		line-height: 1.6;
		letter-spacing: -3px;
		background-color: #FFF;
	}
	
	#real-area dd.name {
		margin-top: 15px;
		margin-left: 15px;
		margin-right: 15px;
		font-size: 16px;
		font-weight: 700;
		line-height: 1.2;
	}
	
	#real-area dd.name span {
		font-size: 25px;
		font-family: "Bakbak One", sans-serif;
		font-weight: normal;
	}
	
	
	
}

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


@media screen and (min-width: 1161px){
	
	#real-area {
		margin: 0;
		padding: 3.646vw 0 4.688vw 0;
		position: relative;
	}
	
	#real-area h3 {
		margin: 0 auto 2.083vw auto;
		width: 81.77vw;
	}
	
	#real-area p {
		position: absolute;
		top: 7.292vw;
		right: 12.5vw;
		padding: 0;
	}
	
	#real-area ul {
		margin: 0 auto;
		padding: 0;
		width: 91.66vw;
		display: -webkit-flex;
		display: flex;
		-webkit-justify-content: space-between;
		justify-content: space-between;
	}
	
	#real-area ul li {
		width: 48%;
		position: relative;
		overflow: hidden;
		transition: all 0.6s ease;
		margin-bottom: 0;
	}
	
	#real-area ul li img {
		border-radius: 0.521vw;
	}
	
	#real-area ul li:hover {
		opacity: 0.7;
		transform: scale(1.02);
	}
	
	#real-area dd.real_number {
		margin-top: -7.812vw;
		margin-bottom: 0.521vw;
		margin-left: 3.125vw;
		margin-right: 3.125vw;
		font-size: 0.781vw;
		font-family: "Bakbak One", sans-serif;
	}
	
	#real-area dd.midashi {
		margin-left: 3.125vw;
		margin-right: 3.125vw;
		padding-left: 0.26vw;
		padding-bottom: 0.26vw;
		font-size: 2.604vw;
		font-weight: 900;
		box-decoration-break: clone;
		-webkit-box-decoration-break: clone;
		display: inline;
		line-height: 1.6;
		letter-spacing: -0.156vw;
		background-color: #FFF;
	}
	
	#real-area dd.name {
		margin-top: 0.781vw;
		margin-left: 3.646vw;
		margin-right: 3.125vw;
		font-size: 0.938vw;
		font-weight: 700;
		line-height: 1.2;
	}
	
	#real-area dd.name span {
		font-size: 1.562vw;
		font-family: "Bakbak One", sans-serif;
		font-weight: normal;
	}

}


/*--------------------------------------------------------------
#news-area
--------------------------------------------------------------*/

@media screen and (min-width: 300px) {
	
	#news-area {
		margin: 0 3% 20px 3%;
		padding: 30px 5%;
		width: auto;
		background: #FFF;
		box-sizing: border-box;
		position: relative;
	}
	
	#news-area h6 {
		font-size: 50px;
		font-family: "Bakbak One", sans-serif;
		line-height: 1;
	}
	
	#news-area h6 span {
		font-size: 18px;
		font-weight: 700;
		padding-left: 10px;
		display: block;
		font-family: "Zen Kaku Gothic New", sans-serif;
	}
	
	#news-area li a {
		padding: 20px 10px;
		border-bottom: 1px solid #E5E5E5;
		display: block;
	}
	
	#news-area dl {
	}
	
	#news-area dt {
		font-size: 16px;
		font-family: "Bakbak One", sans-serif;
		width: auto;
	}
	
	#news-area dt span {
		font-size: 13px;
		font-weight: 700;
		font-family: "Zen Kaku Gothic New", sans-serif;
		border: 1px solid #231815;
		padding: 0 5px;
		margin-left: 20px;
	}
	
	#news-area dd {
		font-size: 16px;
		font-weight: 700;
		width: auto;
	}
	
	#news-area li a {
		transition: background-color 0.3s ease;
	}
	
	#news-area li a:hover {
		background-color: rgba(0, 0, 0, 0.03); /* うっすらグレー */
	}

	#news-area dd {
		transition: color 0.4s ease, transform 0.4s ease, opacity 0.4s ease;
		transform: translateX(0);
		opacity: 1;
	}

	#news-area li a:hover dd {
		transform: translateX(10px);
		color: #555;
		opacity: 0.8;
	}

	.news_link {
		text-align: center;
		margin-bottom: 50px;
	}

	.news_link a {
		display: inline-flex;
		align-items: center;
		font-size: 18px;
		font-weight: 900;
		text-decoration: none;
		color: inherit;
		gap: 8px;
		transition: opacity 0.6s ease, transform 0.6s ease;
	}
	
	.news_link a:hover {
		opacity: 0.6; /* 透過 */
		transform: scale(1.05);
	}

	.news_link .material-symbols-outlined {
		font-size: 40px;
		font-variation-settings:
		'FILL' 2,
		'wght' 200,
		'GRAD' 0,
		'opsz' 24;
	}
}

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


@media screen and (min-width: 1161px){
	
	#news-area {
		margin: 0 auto 2.083vw auto;
		padding: 3.646vw 3.125vw 3.646vw 20.83vw;
		width: 75vw;
		background: #FFF;
		box-sizing: border-box;
		position: relative;
	}
	
	#news-area h6 {
		position: absolute;
		top: 2.604vw;
		left: 4.167vw;
		font-size: 4.167vw;
		font-family: "Bakbak One", sans-serif;
		line-height: 1;
	}
	
	#news-area h6 span {
		font-size: 1.302vw;
		font-weight: 700;
		padding-left: 0.521vw;
		display: block;
		font-family: "Zen Kaku Gothic New", sans-serif;
	}
	
	#news-area li a {
		padding: 1.042vw;
		border-bottom: 1px solid #E5E5E5;
		display: block;
	}
	
	#news-area dl {
		display: -webkit-flex;
		display: flex;
	}
	
	#news-area dt {
		font-size: 1.042vw;
		font-family: "Bakbak One", sans-serif;
		width: 13.02vw;
	}
	
	#news-area dt span {
		font-size: 0.781vw;
		font-weight: 700;
		font-family: "Zen Kaku Gothic New", sans-serif;
		border: 1px solid #231815;
		padding: 0 0.26vw;
		margin-left: 1.562vw;
	}
	
	#news-area dd {
		font-size: 1.042vw;
		font-weight: 700;
		width: 40.1vw;
	}
	
	#news-area li a {
		transition: background-color 0.3s ease;
	}
	
	#news-area li a:hover {
		background-color: rgba(0, 0, 0, 0.03); /* うっすらグレー */
	}

	#news-area dd {
		transition: color 0.4s ease, transform 0.4s ease, opacity 0.4s ease;
		transform: translateX(0);
		opacity: 1;
	}

	#news-area li a:hover dd {
		transform: translateX(10px);
		color: #555;
		opacity: 0.8;
	}

	.news_link {
		text-align: center;
		margin-bottom: 3.906vw;
	}

	.news_link a {
		display: inline-flex;
		align-items: center;
		font-size: 1.042vw;
		font-weight: 900;
		text-decoration: none;
		color: inherit;
		gap: 0.417vw;
		transition: opacity 0.6s ease, transform 0.6s ease;
	}
	
	.news_link a:hover {
		opacity: 0.6; /* 透過 */
		transform: scale(1.05);
	}

	.news_link .material-symbols-outlined {
		font-size: 2.604vw;
		font-variation-settings:
		'FILL' 2,
		'wght' 200,
		'GRAD' 0,
		'opsz' 24;
	}

}