@charset "Shift-JIS";


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

	p.text {
		font-size: 1rem;
		line-height: 1.6;
		text-align: justify;
		/* margin: 0 0 1rem 0; */
	}

	.flex-container {
		display: flex;
		gap: 28px;
	}

	/* -------------------------------------------------------------------------------------------
	*
	* intro
	*
	* ----------------------------------------------------------------------------------------- */

	#intro {
		padding: 2.5rem 0 0 0;
	}

	#intro .intro-img {
		width: calc(100% - 532px - 28px);
	}

	#intro .intro-img img {
		width: 100%;
		height: auto;
	}

	#intro .intro-text {
		width: 532px;
	}

	#intro .intro-text h2.title {
		position: relative;
		padding: 0 0 0.889rem 0;
		margin: 0 0 0.889rem 0;
	}

	#intro .intro-text h2.title::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		width: 78px;
		height: 4px;
		border-radius: 20px;
		background: linear-gradient(90deg, #57C4F5 0%, #0580F2 100%);
	}

	#intro .intro-text h2.title span {
		color: #0580F2;
		font-family: "Outfit", sans-serif;
		font-size: 2.11rem;
		font-weight: 700;
		letter-spacing: 0.05em;
		line-height: 1.4;
	}

	#intro .intro-text .subtitle {
		color: var(--color-blue);
		margin: 0 0 0.889rem 0;
	}

	#intro .intro-text .subtitle p.sub {
		font-size: 1rem;
		font-weight: 700;
		line-height: 1.6;
		margin: 0 0 0.389rem 0;
	}

	#intro .intro-text .subtitle p.tag span {
		display: inline-block;
		padding: 0.25rem 0.75rem;
		background-color: var(--color-blue);
		color: #fff;
		font-size: 1rem;
		font-weight: 700;
		line-height: 1.4;
	}

	#intro .intro-text .subtitle p.main {
		font-size: 1.56rem;
		font-weight: 700;
		line-height: 1.6;
	}


	section.interview {
		padding: 60px 0 0 0;
	}

	section.interview .interview-title {
		color: var(--color-blue);
		font-size: 1rem;
		font-weight: 700;
		letter-spacing: 0.05em;
		line-height: 1.4;
		margin: 0 0 0.889rem 0;
		padding: 0 0 0 1rem;
		position: relative;
	}
	section.interview .interview-title::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		margin: auto;
		width: 6px;
		height: 90%;
		border-radius: 20px;
		background: linear-gradient(90deg, #57C4F5 0%, #0580F2 100%);
	}

	section.interview.flex-container  .interview-text {
		width: 540px;
	}
	section.interview .interview-text p.text {
		font-size: 0.889rem;
	}

	section.interview.flex-container .interview-img {
		width: calc(100% - 540px - 28px);
	}

	section.interview.flex-container .interview-img img {
		width: 100%;
		height: auto;
	}



}

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



	p.text {
		font-size: 1rem;
		line-height: 1.6;
		text-align: justify;
		/* margin: 0 0 1rem 0; */
	}

	.flex-container {
		display: flex;
		flex-direction: column;
		gap: 8.72vw;
	}
	.flex-container[data-num="5"],
	.flex-container[data-num="11"] {
		flex-direction: column-reverse;
	}

	/* -------------------------------------------------------------------------------------------
	*
	* intro
	*
	* ----------------------------------------------------------------------------------------- */

	#intro {
	}

	#intro .intro-img {
		width: 100%;
		position: absolute;
		top: 6.5rem;
		left: 0;
	}

	#intro .intro-img img {
		width: 100%;
		height: auto;
	}

	#intro .intro-text {
		width: 100%;
	}

	#intro .intro-text h2.title {
		position: relative;
		padding: 0 0 0.889rem 0;
		margin: 0 0 25.5rem 0;
		text-align: center;
	}

	#intro .intro-text h2.title::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		width: 19.744vw;
		height: 1.28vw;
		border-radius: 100vw;
		background: linear-gradient(90deg, #57C4F5 0%, #0580F2 100%);
	}

	#intro .intro-text h2.title span {
		color: #0580F2;
		font-family: "Outfit", sans-serif;
		font-size: 2.11rem;
		font-weight: 700;
		letter-spacing: 0.05em;
		line-height: 1.4;
	}

	#intro .intro-text .subtitle {
		color: var(--color-blue);
		margin: 0 0 0.889rem 0;
		text-align: center;
	}

	#intro .intro-text .subtitle p.sub {
		font-size: 1rem;
		font-weight: 700;
		line-height: 1.6;
		margin: 0 0 0.389rem 0;
	}

	#intro .intro-text .subtitle p.tag span {
		display: inline-block;
		padding: 0.25rem 0.75rem;
		background-color: var(--color-blue);
		color: #fff;
		font-size: 1rem;
		font-weight: 700;
		line-height: 1.4;
	}

	#intro .intro-text .subtitle p.main {
		font-size: 1.56rem;
		font-weight: 700;
		line-height: 1.6;
	}


	section.interview {
		padding: 2.778rem 0 0 0;
	}

	section.interview .interview-title {
		color: var(--color-blue);
		font-size: 1rem;
		font-weight: 700;
		letter-spacing: 0.05em;
		line-height: 1.4;
		margin: 0 0 0.889rem 0;
		padding: 0 0 0 1rem;
		position: relative;
	}
	section.interview .interview-title::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		margin: auto;
		width: 6px;
		height: 90%;
		border-radius: 20px;
		background: linear-gradient(90deg, #57C4F5 0%, #0580F2 100%);
	}

	section.interview.flex-container  .interview-text {
		width: 100%;
	}
	section.interview .interview-text p.text {
		font-size: 0.889rem;
	}

	section.interview.flex-container .interview-img {
		width: 100%;
	}

	section.interview.flex-container .interview-img img {
		width: 100%;
		height: auto;
	}


}