@charset "utf-8";
/* -----------------------------
 welfare.css
----------------------------- */


/* -----------------------------
 PC
----------------------------- */
@media screen and (min-width:1000px) {


/* --------------------------------------- #mainimg --------------------------------------- */

	#mainimg { position: relative;	}

	#mainimg h1 {
		position: absolute;
		bottom: 0;
		left: 0;

		padding: 20px 30px;
		width: 80%;

		background: 
			linear-gradient(
				to right,
				rgba(0, 26, 75, 0.6),
				rgba(0, 26, 75, 0.6),
				transparent
			)
		;

		letter-spacing: 2px;
		font-size: 3vw;
		color: #FFFFFF;
	}

	#mainimg img {
		width: 100%;
		height: auto;
height: 300px;
	}

	#mainimg > div:nth-of-type(2) {
		margin: 0px auto 100px;

		width: fit-content;
	}

	#mainimg > div:nth-of-type(2) p {
		line-height: 150%;
		letter-spacing: 1px;
		font-size: large;
	}

	#mainimg > div:last-of-type img {
		width: 100%;
height: 300px;
	}


/* --------------------------------------- #welfare --------------------------------------- */

	#welfare h1 {
		position: relative;

height: 250px;

		text-align: center;
		font-size: 3vw;
	}

	#welfare h1 span {
		position: absolute;
		top: 50%;
		left: 50%;

		transform: translate(-50%, -50%);
	}

	#welfare .imgFaq {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	#welfare .imgFaq ul,
	#welfare .imgFaq div {
		width: 50%;
	}

	#welfare .imgFaq ul {
		display: flex;
		justify-content: center;
		flex-direction: column;
	}

	#welfare .imgFaq ul li {
		margin-bottom: 15px;
		font-size: 1.6vw;
	}

	#welfare .textBox {
		height: 180px;
	}

	#welfare .textBox h2 {
		margin-bottom: 30px;

		text-align: center;
		font-size: 1.5vw;
		font-weight: bold;
	}

	#welfare .textBox p {
		margin-bottom: 10px;
		text-align: center;
		font-size: 1.2vw;
	}

	#welfare .imgFaq,
	#welfare .imgConsul { margin-bottom: 50px; }

	#welfare .imgFaq img {
		width: 100%;
		height: auto;
	}
	#welfare .imgConsul img {
		width: 100%;
		height: auto;
	}

	#welfare .type {
		display: flex;
		justify-content: space-around;

		margin-bottom: 100px;
	}

	#welfare .type div { width: 35%; }

	#welfare .type h3 {
		margin-bottom: 20px;
		padding: 15px 60px;
		background-color: #000000;

		text-align: center;
		letter-spacing: 2px;
		font-size: 1.3vw;
		color: #FFFFFF;
	}

	#welfare .type ul li {
		position: relative;

		margin-bottom: 5px;
		padding-left: 1.5vw;

		letter-spacing: 1px;
		font-size: 1vw;
	}

	#welfare .type ul li::before {
		content: '■';

		position: absolute;
		left: 0;

		transform:
			rotate(45deg)
			scale(-0.8)
		;

		font-size: -1vw;
	}

	.conBtn {
		display: flex;
		justify-content: space-between;
	}

	.toCon a {
		display: block;
		margin: 0px auto;
		padding: 30px 50px;
		width: fit-content;
		border-radius: 5px;
		background:
			linear-gradient(
				to bottom,
				#818181 0%,
				#575757 100%
			)
		;

		font-size: x-large;
		color: #FFFFFF;
	}


}

/* -----------------------------
 SP
----------------------------- */
@media screen and (max-width:999px) {

/* --------------------------------------- #mainimg --------------------------------------- */

	#mainimg {
		position: relative;

		margin: 0px auto 50px;
	}

	#mainimg h1 {
		position: absolute;
		bottom: 0;
		left: 0;

		padding: 20px 30px;
		width: 80%;
		background: 
			linear-gradient(
				to right,
				rgba(0, 26, 75, 0.6),
				rgba(0, 26, 75, 0.6),
				transparent
			)
		;

		letter-spacing: 2px;
		font-size: 8vw;
		color: #FFFFFF;
	}

	#mainimg img {
		width: 100%;
		height: auto;
	}


/* --------------------------------------- #welfare --------------------------------------- */

	#welfare { margin-bottom: 50px; }

	#welfare h1 {
		margin-bottom: 50px;
		text-align: center;
		line-height: 150%;
		font-size: 7vw;
	}

	#welfare .textBox {
		margin-bottom: 30px;
		padding: 15px;
	}

	#welfare .textBox h2 {
		margin-bottom: 20px;
		text-align: center;
		letter-spacing: 2px;
		font-size: 5vw;
		font-weight: bold;
	}

	#welfare .textBox p {
		margin-bottom: 15px;
		line-height: 150%;
	}

	#welfare .imgFaq {
		margin-bottom: 30px;
		width: 100%;
	}

	#welfare .imgFaq ul {
		margin-bottom: 20px;
		padding: 0px 10px;
		width: 100%;
	}

	#welfare .imgFaq ul li {
		margin-bottom: 10px;
		line-height: 150%;
		font-size: 4vw;
	}

	#welfare .imgFaq img {
		width: 100%;
		height: auto;
	}

	#welfare .imgConsul { margin-bottom: 50px; }

	#welfare .imgConsul img {
		width: 100%;
		height: auto;
	}

	#welfare .type {
		display: flex;
		justify-content: space-around;

		margin-bottom: 50px;
	}

	#welfare .type div { width: 46%; }

	#welfare .type h3 {
		margin-bottom: 20px;
		padding: 15px 0px;
		background-color: #000000;

		text-align: center;
		letter-spacing: 2px;
		color: #FFFFFF;
	}

	#welfare .type ul li {
		position: relative;

		margin-bottom: 5px;
		padding-left: 6vw;

		letter-spacing: 1px;
		line-height: 150%;
		font-size: 4vw;
	}

	#welfare .type ul li::before {
		content: '■';

		position: absolute;
		left: 0;

		transform:
			rotate(45deg)
			scale(-0.8)
		;

		font-size: -1vw;
	}

	.conBtn {
		display: flex;
		justify-content: space-between;
	}

	.toCon a {
		display: block;
		margin: 0px auto;
		padding: 20px 10px;
		width: 90%;
		border-radius: 5px;
		background:
			linear-gradient(
				to bottom,
				#818181 0%,
				#575757 100%
			)
		;

		font-size: 4vw;
		color: #FFFFFF;
	}



/* --------------------------------------- #footer --------------------------------------- */

	footer nav ul li a {
		display: block;
		width: 100%;
		height: auto;
	}


}
