@charset "UTF-8";

/*--------------------------------------------------------------------
index.html	(トップページ)
top.css
--------------------------------------------------------------------*/

/*------------#title---------------------------------------------------------------*/
#title::before {
	height: 25%;
	clip-path: polygon(100% 0, 0 0, 100% 100%);
}
#title::after { clip-path: polygon(0 0, 100% 0%, 100% 93%, 0% 100%); }
#titleBg {
	height: 800px;
	clip-path: polygon(0 0, 100% 0%, 100% 93%, 0% 100%);
}
#titleBg > div {
	position: absolute;
	width: 100%;
	max-width: 540px;
	top: 55%;
	left: 50%;
	transform: var(--transformXY);
}
#titleBg > div h2 {
	width: 100%;
	padding-top: 27.88461538461538%;
	background: url("../img/top_logo.png") no-repeat left top / contain;
	overflow: hidden;
	line-height: 0;
	font-size: 0;
	text-indent: -99999px;
}
#title h3 {
	width: 100%;
	padding: 0 0.5em;
	line-height: 1.2;
	text-align: center;
	font-family: var(--mincho);
	font-size: 4em;
	font-weight: bold;
	color: var(--co-white);
	text-shadow: 
		 3px  3px 3px var(--co-black),
		-3px  3px 3px var(--co-black),
		 3px -3px 3px var(--co-black),
		-3px -3px 3px var(--co-black),
		 3px  0px 3px var(--co-black),
		 0px  3px 3px var(--co-black),
		-3px  0px 3px var(--co-black),
		 0px -3px 3px var(--co-black);
	z-index: 5;
}
#title h3 span {
	display: block;
	font-size: 0.46em;
}
@media (max-width: 520px) {
	#title h3 { font-size: 2.5em; }
}

/*------------main---------------------------------------------------------------*/
main {
	width: 100%;
	margin: 60px auto 0;
}


/*------------article-------------------------*/
article { padding-bottom: 0; }
main article:not(:last-of-type) {
	margin-bottom: 0;
	padding-bottom: 0;
}
article:not(:last-of-type)::after { display: none; }
footer {
	position: relative;
	margin-top: 0;
	padding-top: 0;
}
footer::before { display: none; }


/*------------TopTxt-------------------------*/
#TopTxt {
	width: 100%;
	max-width: inherit;
	padding: 0 1em;
}
#TopTxt h2 {
	width: 100%;
	text-align: center;
	font-family: var(--mincho);
	font-feature-settings: "palt" 1;
	font-size: 1.9em;
	font-weight: bold;
	color: var(--co-orange);
}
#TopTxt p {
	margin-top: 20px;
	text-align: center;
	font-size: 1.125em;
}


/*------------content-------------------------*/
#content {
	position: relative;
	width: 100%;
	max-width: inherit;
	margin-top: 110px;
	padding-bottom: 180px;
	overflow-x: hidden;
}
#content::before {
	position: absolute;
	display: block;
	content: "";
	width: 100%;
	height: calc(140px + 0.5%);
	bottom: 0;
	left: 0;
	background-color: var(--co-white);
	clip-path: polygon(50% 50%, 100% 0, 100% 100%, 0 100%, 0 0);
	z-index: 1;
}
#content h3 {
	margin-bottom: 20px;
	text-align: center;
	font-family: var(--mincho);
	font-feature-settings: "palt" 1;
	font-size: 2.2em;
	font-weight: bold;
}
#content ul {
	display: flex;
	flex-direction: column;
	gap: 40px;
	width: 100%;
	margin: 0 auto;
}
#content ul li a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-direction: row;
}
#content ul li:nth-of-type(2n) a { flex-direction: row-reverse; }
#content ul li .worPho {
	position: relative;
	flex: 1;
	width: 70%;
	clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%);
	z-index: 0;
}
#content ul li:nth-of-type(2n) .worPho { clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%); }
#content ul li .worPho::after {
	position: absolute;
	display: block;
	content: "";
	width: 100%;
	height: 100%;
	background-color: rgba(255,255,255,0.50);
	mix-blend-mode: multiply;
	left: 0;
	top: 0;
	z-index: 2;
}
#content ul li .worPho::before {
	position: absolute;
	display: block;
	content: "";
	width: 35%;
	height: 79%;
	background-color: rgba(0,189,110,0.80);
	clip-path: polygon(50% 0, 100% 0, 100% 100%, 0% 100%);
	bottom: 0;
	right: 0;
	left: inherit;
	z-index: 1;
}
#content ul li:nth-of-type(2n) .worPho::before {
	width: 30%;
	background-color: rgba(97,219,130,0.80);
	clip-path: polygon(0 0, 100% 0, 50% 100%, 0 100%);
	left: 0;
	right: inherit;
}
#content ul li .worPho img {
	width: 100%;
	height: 400px;
}
#content ul li p {
	width: 30%;
	padding-top: 95px;
	background: url("../img/contents_a.png") no-repeat center top;
	text-align: center;
	font-family: var(--mincho);
	font-feature-settings: "palt" 1;
	font-size: 1.7em;
	font-weight: bold;
}
#content ul li p span {
	display: block;
	font-size: 0.75em;
	font-weight: bold;
}

@media (max-width: 480px) {
	#content ul li a,
	#content ul li:nth-of-type(2n) a {
		flex-direction: column;
		gap: 20px;
	}
	#content ul li .worPho,
	#content ul li p { width: 100%; }
	#content ul li p { padding-top: 60px; }
}


/*------------info------------------------*/
#news {
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 55px 0;
	background-color: var(--co-white);
}
#news section {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	width: 100%;
	max-width: inherit;
}
#news h2 {
	display: flex;
	align-items: flex-end;
	width: 15%;
	-ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-family: var(--mincho);
	font-feature-settings: "palt" 1;
	font-size: 2.2em;
	font-weight: bold;
	color: var(--co-orange);
}
#news div {
	width: 85%;
	padding: 30px 40px;
	background-color: var(--co-orange);
}
#news iframe {
	display: block;
	width: 100%;
	height: 210px;
	border: none;
	background-color: transparent;
}
@media (max-width: 690px) {
	#news section {
		flex-direction: column;
		gap: 15px;
	}
	#news div {
		width: 100%;
		margin: 0 auto;
		padding: 15px 1em;
	}
	#news h2 {
		display: block;
		width: 96%;
		margin: 0 auto;
		-ms-writing-mode: unset !important;
		writing-mode: unset !important;
		transform: rotate(0);
	}
}


/*------------recruit-------------------------------------------------------------*/
#recruit {
	position: relative;
	width: 100%;
	min-height: 350px;
	background: url("../img/recruit_p.jpg") no-repeat left top / cover;
	margin: 0 auto;
}
#recruit::before {
	position: absolute;
	display: block;
	content: "";
	width: 100%;
	height: 100%;
	background-color: #4cd199;
	mix-blend-mode: multiply;
}
#recruit a {
	position: relative;
	display: block;
	width: 100%;
	height: 350px;
	z-index: 1;
}
#recruit p {
	position: absolute;
	width: 100%;
	padding: 20px;
	left: 0;
	bottom: -0.25em;
	z-index: 0;
	line-height: 1;
	text-align: center;
}
#recruit p span {
	position: relative;
	display: inline-block;
	padding: 0 80px;
	font-family: var(--mincho);
	font-feature-settings: "palt" 1;
	font-size: clamp(25px, 13.8889vw + -24.4444px, 100px);
	font-weight: bold;
}
#recruit p span::after {
	position: absolute;
	display: inline-block;
	content: "";
	width: 42px;
	height: 42px;
	background: url("../img/recruit_a.png") no-repeat left top;
	top: 50%;
	right: 0;
	transform: var(--transformY);
	z-index: 0;
}
@media (max-width: 960px) {
	#recruit p span { padding: 0 45px; }
}