@charset "utf-8";

/* ==================================================
   共通
-------------------------------------------------- */
.home h2 {
	font-size: 4.4rem;
	line-height: 1;
}

.home_title_jp {
	margin-top: 4px;
	margin-bottom: 38px;
	font-size: 2.2rem;
	line-height: 1.75;
}

@media only screen and (max-width: 767px) {
	.home_title_jp {
		margin-bottom: 30px;
	}
}



/* ==================================================
   メインビジュアル
-------------------------------------------------- */
.home_mainvisualArea {
	position: relative;
	width: 100%;
}

.home_mainvisual_bg::before {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
	width: 100%;
	height: calc(100% - 80px);
	background: var(--c_main) url("../images/mainvisual_bg.webp") 0 bottom / cover repeat-x;
}
.home_mainvisual_bg::before,
.home_mainvisual_catch {
	height: calc(100% - 80px);
}
.home_mainvisual_catch {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	position: absolute;
	left: 160px;
	top: 0;
	z-index: 15;
	height: calc(100% - 80px);
	color: var(--c_white);
}

.home_mainvisual_catch h1 {
	font-size: 12.4rem;
	letter-spacing: .15em;
	line-height: 1;
}

.home_mainvisual_catch p {
	margin-top: 56px;
	font-weight: var(--fw_b);
	font-size: 2.5rem;
	letter-spacing: .15em;
}

.home_mainvisual_photo {
	position: relative;
	z-index: 0;
	width: calc(50vw + 530px);
	height: auto;
	margin-left: auto;
}

@media only screen and (max-width: 1160px) {
	.home_mainvisual_bg::before,
	.home_mainvisual_catch {
		height: calc(100% - 40px);
	}
	.home_mainvisual_catch {
		left: 40px;
	}

	.home_mainvisual_catch h1 {
		font-size: 9.1rem;
	}

	.home_mainvisual_catch p {
		margin-top: 20px;
		font-size: 1.8rem;
	}

	.home_mainvisual_photo {
		width: 84vw;
	}
}

@media only screen and (max-width: 767px) {
	.home_mainvisual_bg::before,
	.home_mainvisual_catch {
		height: calc(100% - 24px);
	}
	.home_mainvisual_bg::before {
		background-image: url("../images/mainvisual_bg_sp.webp");
	}
	.home_mainvisual_catch {
		left: 4vw;
	}

	.home_mainvisual_catch h1 {
		font-size: 5.6rem;
		letter-spacing: .06em;
	}

	.home_mainvisual_catch p {
		margin-top: 20px;
		font-size: 1.8rem;
		letter-spacing: .06em;
	}

	.home_mainvisual_photo {
		width: 100%;
	}
}



/* ==================================================
   立教IT会とは
-------------------------------------------------- */
.home_aboutArea {
	justify-content: space-between;
	align-items: center;
	padding-top: 104px;
	padding-bottom: 104px;
}

.home_about_photo {
	width: 529px;
}

.home_about_sentenceArea .btn {
	margin-top: 46px;
}

@media only screen and (max-width: 1160px) {
	.home_about_photo {
		flex: 1;
	}
}

@media only screen and (max-width: 1024px) {
	.home_about_sentenceArea {
		width: calc(50% - 20px);
	}

	.home_about_sentence .br::before {
		content: none;
	}

	.home_about_photo {
		flex: none;
		width: calc(50% - 20px);
	}
}

@media only screen and (max-width: 980px) {
	.home_aboutArea {
		flex-direction: column;
		padding-bottom: 64px;
	}

	.home_about_sentenceArea {
		width: 100%;
	}

	.home_about_photo {
		display: none;
	}

	.home_about_photo_tb {
		width: 100%;
		height: 24vw;
		margin-bottom: 104px;
		background: url("../images/home_about_photo_tb.webp") center center / cover no-repeat;
		background-attachment: fixed;
	}
}

@media only screen and (max-width: 767px) {
	.home_aboutArea {
		padding-top: 64px;
		padding-bottom: 40px;
	}

	.home_about_sentence {
		margin-top: 24px;
	}

	.home_about_photo_tb {
		height: 38vw;
		/* margin-bottom: 64px; */
		margin-bottom: 0;
	}

	.home_about_sentenceArea .btn {
		margin-top: 30px;
	}
}



/* ==================================================
   次回のイベント
-------------------------------------------------- */
.home_nextArea {
	position: relative;
	padding-top: 104px;
	padding-bottom: 168px;
}
.home_nextArea::before {
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: -2;
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--c_main);
	clip-path: polygon(0 0, calc(100% - 4.167vw) 0, calc(100% - 10.833vw) 100% , 0 100%);
}

.home_next h2,
.home_next .home_title_jp {
	color: var(--c_white);
	text-align: center;
}

.home_next_note {
	margin-top: 56px;
	color: #ffd589;
	font-weight: var(--fw_b);
	font-size: 2.3rem;
	text-align: center;
}

.home_next_note span {
	display: inline-block;
}

@media only screen and (max-width: 767px) {
	.home_nextArea {
		padding-top: 64px;
		padding-bottom: 64px;
	}
	.home_nextArea::before {
		clip-path: none;
	}

	.home_next_note {
		margin-top: 36px;
	}
}



/* ==================================================
   活動報告
-------------------------------------------------- */
.home_reportArea {
	position: relative;
	margin-top: -64px;
	margin-bottom: 80px;
	padding-top: 104px;
	padding-bottom: 104px;
}
.home_reportArea::before {
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: -2;
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--c_gray);
	clip-path: polygon(4.167vw 0, 100% 0, 100% 100%, 10.833vw 100%);
}

.home_report h2,
.home_report .home_title_jp {
	text-align: center;
}

.home_report .btn {
	margin-top: 72px;
	text-align: center;
}

@media only screen and (max-width: 767px) {
	.home_reportArea {
		margin-top: 0;
		margin-bottom: 0;
		padding-top: 64px;
		padding-bottom: 64px;
	}
	.home_reportArea::before {
		clip-path: none;
	}

	.home_report .btn {
		margin-top: 48px;
		text-align: center;
	}
}
