@charset "utf-8";

/*//////////////////////////////////////////////////////////////////////////////

	HOME

//////////////////////////////////////////////////////////////////////////////*/


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

	common

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

main h2 {
	display: flex;
	flex-direction: column;
	margin: 0;
	font-size: 1rem;
	font-weight: bold;
	color: rgba(var(--main-color),1);
}

main h2::before {
	display: block;
	margin-bottom: .15em;
	font-size: 3em;
	letter-spacing: .05em;
	font-family: 'Oswald', sans-serif;
}

main #company h2::before {
	content: "Company";
}

main #news h2::before {
	content: "News";
}

main #blog h2::before {
	content: "Blog";
}

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

main h2::before {
	font-size: 2.5em;
}
	
}

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

main h2 {
	font-size: 3vw;
}	
	
main h2::before {
	font-size: 7vw;
}
	
}


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

	promotion

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

#content > #promotion {
	position: relative;
	width: 100%;
	height: 920px;
	margin-top: -200px;
}

#content > #promotion::before {
	content: '';
	position: absolute;
	bottom: -170px;
	left: 50%;
	translate: -50% 0;
	width: 800px;
	aspect-ratio: 800 / 532;
	background-image: url("../../common/img/package_set.png?20250708");
	background-repeat: no-repeat;
	background-size: cover;
	z-index: 10;
}

#content > #promotion .bg {
	position: relative;
	height: 100%;
	overflow: hidden;
}

#content > #promotion .bg::after {
	content: '';
	position: absolute;
	top: 53%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 230%;
	height: 230%;
	background-image: url("../../common/img/promotion_bg.svg");
	background-position: center;
	background-size: cover;
	z-index: -100;
	animation: rotate 30s linear infinite;
}

@keyframes rotate {
0% {transform: translate(-50%, -53%) rotate(0deg);}
100% {transform: translate(-50%, -53%) rotate(360deg);}
}

#content > #promotion .site_column {
	max-width: 1600px;
	height: 100%;
}

#content > #promotion .catch {
	display: flex;
	position: absolute;
	top: 24%;
	left: 50%;
	translate: -50% 0;
	flex-direction: column;
	align-items: center;
	width: 100%;
	animation: catch .7s ease-out;
}

@keyframes catch {
0% {opacity: 0; scale: .8;}
100% {opacity: 1; scale: 1;}
}

#content > #promotion .en_catch {
	margin: 0;
	font-size: 4em;
	font-weight: 500;
	letter-spacing: .3em;
	color: rgba(var(--main-color),1);
	font-family: 'Oswald', sans-serif;
}

#content > #promotion .en_catch::after {
	content: '';
	display: block;
	width: 112px;
	aspect-ratio: 112/18;
	margin: .2em auto 0;
	background-image: url("../../common/img/icon_cmyk_circle.svg");
	background-repeat: no-repeat;
	background-size: contain;
}

#content > #promotion .ja_catch {
	margin: 1em 0 0;
	font-size: 2em;
	letter-spacing: .4em;
	text-indent: .4em;
}

#content > #promotion .group {
	position: absolute;
	right: 0;
	bottom: 84px;
	z-index: 2;
}

#content > #promotion .group ul {
	list-style: none;
}

#content > #promotion .group ul li {
	width: 320px;
	border-radius: 8px;
}

#content > #promotion .group ul li:not(:first-child) {
	margin-top: 1em;
}

#content > #promotion .group ul li a {
	position: relative;
	width: 100%;
	height: 100%;
	aspect-ratio: 320/100;
	background-size: cover;
	background-position: center;
	border-radius: 8px;
	box-shadow: 0 0 .5em 0 rgba(0,0,0,.25);
	transition: filter .4s;
}

#content > #promotion .group ul li a:hover {
	opacity: 1;
	filter: brightness(200%);
}

#content > #promotion .group ul .print_archive a {
	background-image: url("../../common/img/banner_archive_blue.svg");
}

#content > #promotion .group ul .recruit a {
	background-image: url("../../common/img/banner_recruit.svg");
}

#content > #promotion .group ul li a::after {
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	translate: 0 -50%;
	right: 1.5em;
	width: 1em;
	aspect-ratio: 1/1;
	background-repeat: no-repeat;
	background-size: cover;
	animation: arrow 2s infinite;
}

@keyframes arrow {
0%,100% {translate: 0 -50%;}
50% {translate: 40% -50%;}
}

#content > #promotion .group ul .print_archive a::after {
	background-image: url(../../common/img/icon_arrow_white.svg);
}

#content > #promotion .group ul .recruit a::after {
	background-image: url(../../common/img/icon_arrow_blue.svg);
}

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

#content > #promotion::before {
	bottom: -10%;
	left: 31%;
	width: 50%;
}

}

@media screen and (max-width: 1300px) {
	
#content > #promotion {
    height: 800px;
}

#content > #promotion .group {
	bottom: 54px;
}	
	
}

@media screen and (max-width: 1024px) {
	
#content > #promotion {
    height: 730px;
}

#content > #promotion .bg::after {
	top: 60%;
}	
	
#content > #promotion .catch {
	top: 28%;
}	
	
}

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

#content > #promotion {
    height: 700px;
}	

#content > #promotion .bg::after {
	top: 63%;
}	
	
#content > #promotion .catch {
	top: 30%;
}	
	
#content > #promotion .group ul li {
	width: 250px;
}
	
}

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

#content > #promotion {
	height: 180vw;
}

#content > #promotion::before {
	bottom: -15%;
	left: 50%;
	width: 96%;
}
	
#content > #promotion .bg::after {
	top: 63%;
}	
	
#content > #promotion .catch {
	top: 61vw;
}	
	
#content > #promotion .en_catch {
	font-size: 9.5vw;
	text-align: center;
	line-height: 1.2;
}

#content > #promotion .en_catch::after {
	width: 21vw;
	margin: 5vw auto 0;
}	
	
#content > #promotion .en_catch span {
	display: block;
}	

#content > #promotion .ja_catch {
    margin: 1em 0 0;
	font-size: 5vw;
}	

#content > #promotion .group {
	bottom: 26%;
	width: 100%;
}	
	
#content > #promotion .group ul {
	display: flex;
	justify-content: space-between;
	width: 100%;
}

#content > #promotion .group ul li {
	width: 48.5%;
}	

#content > #promotion .group ul li:not(:first-child) {
    margin-top: 0;
}

#content > #promotion .group ul li a {
	border-radius: 4px;
}

#content > #promotion .group ul li a:hover {
	filter: unset;
}

#content > #promotion .group ul li a::after {
	right: 4vw;
	width: 2.5vw;
}

#content > #promotion figure {
	width: 100%;
    bottom: -12%;
}	
	
}


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

	社名変更

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

main #company .name_change {
	margin: 0 0 80px;
}

main #company .name_change a {
	width: 720px;
	aspect-ratio: 720 / 238;
	margin: 0 auto;
	background-image: url("../img/name_change.svg");
	background-size: cover;
}

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

main #company .name_change {
	margin: 0 0 60px;
}	
	
main #company .name_change a {
	width: 520px;
}
	
}

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

main #company .name_change {
	margin: 0 0 40px;
}
	
}

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

main #company .name_change {
	margin: 0 0 5vw;
}
	
main #company .name_change a {
	width: 80%;
}
	
}


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

	会社案内

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

main #company {
	position: relative;
	padding: 11% 0 0 0;
	background-color: rgba(var(--main-color),.1);
}

main #company .group {
	display: flex;
	justify-content: space-between;
}

main #company .group .text {
	position: relative;
	flex: 1;
	padding: 0 5% 12% 12%;
}

main #company .group .text h2 {
	margin-bottom: 30px;
}

main #company .group .text > figure {
	position: absolute;
	right: -15%;
	bottom: -15%;
	width: 570px;
	aspect-ratio: 800 / 604;
}

main #company .group .text > figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 14px;
}

main #company .group > figure {
	width: 58%;
}

main #company .group > figure img {
	width: 100%;
	border-radius: 20px 0 0 0;
}

main #company .link_button {
	text-align: right;
	margin-top: 10%;
}

@media screen and (max-width: 1700px) {
	
main #company .group .text > figure {
	bottom: -35%;
}
	
}

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

main #company .group .text {
	padding: 0 4% 12% 4%;
}
	
main #company .group .text > figure {
	right: 20%;
	bottom: -25%;
	width: 70%;
}

main #company .link_button {
	margin-top: 8%;
}	
	
}
	
@media screen and (max-width: 1200px) {
	
main #company .group .text > figure {
	right: 35%;
	bottom: -27%;
	width: 55%;
}
	
main #company .group > figure {
	width: 55%;
}
	
}

@media screen and (max-width: 1024px) {
	
main #company .group .text > figure {
	right: 35%;
	bottom: -27%;
	width: 55%;
}	
	
}

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

main #company .group {
	align-items: flex-end;
}
	
}

@media screen and (max-width: 920px) {
	
main #company .group .text > figure {
	right: 37%;
	bottom: -35%;
}		
	
main #company .group > figure {
	width: 48%;
}

main #company .link_button {
	position: absolute;
	right: 8%;
	top: 15%;
	margin: 0;
}		

}

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

main #company {
	padding: 30vw 0 0 0;
}

main #company .group .text {
	padding-bottom: 5%;
}	

main #company .group .text > figure img {
	border-radius: 2vw;
}
	
main #company .group {
	align-items: flex-start;
	flex-direction: column;
}	

main #company .group figure {
	width: 84%;
}	
		
main #company .group figure img {
	border-radius: 0 2vw 0 0;
}

main #company .group .text > figure {
	right: 4%;
	bottom: -137%;
	width: 33%;
}		

main #company .link_button {
	right: 36%;
}	
	
}
	

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

	お知らせ

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

main #news {
	margin-top: -90px;
}

main #news .inner {
	position: relative;
	width: 45%;
	margin: 0 auto;
	margin-right: 0;
}

main #news header,
main #news .group {
	padding-left: 12%;
	padding-right: 14%;
}

main #news header {
	display: flex;
	padding-top: 12%;
	justify-content: space-between;
	align-items: center;
	background-image: url("../../common/img/bg_image.png");
	border-radius: 25px 0 0 0;
}

main #news .group {
	padding-top: 25px;
	background-image: url("../../common/img/bg_image.png");
}

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

main #news header,
main #news .group {
	padding-left: 7%;
	padding-right: 7%;
}

main #news header {
	padding-top: 7%;
}

main #news .inner {
	width: 64%;
}
	
}

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

main #news {
	margin-top: -60px;
}
	
}

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

main #news {
	margin-top: -34px;
}
	
}

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

main #news {
	margin-top: -10vw;
}	

main #news .inner {
	width: 100%;
}	
	
main #news header,
main #news .group {
	padding-left: 7%;
	padding-right: 7%;
}
	
main #news header {
	width: 58vw;
	padding-top: 8vw;
	border-radius: 0 2vw 0 0;
}	
	
}


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

	ブログ

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

main #blog {
	padding-top: 50px;
}

main #blog .site_column {
	max-width: 1300px;
}

main #blog h2 {
	margin-bottom: 35px; 
	text-align: center;
}

main #blog .link_button {
	text-align: center;
}

@media screen and (max-width: 900px) {
	
main #blog .link_button {
	margin-top: 18px;
}

}

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

main #blog {
	padding-top: 12vw;
}

main #blog .link_button {
	margin-top: 2vw;
}

}