/* setting */
@import url('https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,200;1,200&display=swap');

/* reset */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}
article, aside, details, figcaption, figure, main, footer, header, hgroup, nav, section {
  display: block;
}
audio, canvas, video {
  display: inline-block;
}
ul, ol {
  list-style: none;
}
img, td {
  vertical-align: top;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

:root {
  --theme-color: #081829;
  --font-color: #112336;
  --btn-color: #EA3800;
	--active-color: #0286cd;
}

html {
	width: 100%;
	height: 100%;
	font-size: 62.5%;
	line-height: 1.33;
}

body {
	width: 100%;
	height: 100%;
	font: 1.0rem/1.6 "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック, "Yu Gothic", 游ゴシック体, YuGothic, sans-serif;
  color: var(--font-color);
	background: #F5F5F5;
	@media (min-width: 769px) {
    font: 1.2rem/1.6 "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック, "Yu Gothic", 游ゴシック体, YuGothic, sans-serif;
	}
}

main {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	font-feature-settings: 'palt';
  letter-spacing: 0.11rem;
}

section {
	position: relative;
}

img {
	width: 100%;
}

/* SP/PC表示要素きりかえ */
.sp { display: inline !important; }
.pc { display: none !important; }
.sp-block { display: block !important; }
.pc-block { display: none !important; }
@media (min-width: 769px) {
	.sp{ display: none !important; }
	.pc{ display: inline !important; }
	.sp-block{ display: none !important; }
	.pc-block{ display: block !important; }
}

/* pages */
.header {
	position: fixed;
	display: block;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.8);
	z-index: 1000;

	a {
		text-decoration: none;
		transition: opacity 150ms linear;
	}

	.inner {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 92%;
		max-width: 960px;
		height: 48px;
		margin: 0 auto;
	}
}
.header__logo {
	width: 120px;
}

.header__menu {
	display: flex;
	align-items: center;
	justify-content: end;
	width: 100%;
}

.header__nav {
	width: 100%;

	display: none;
}

.header__apply {
	a {
		display: block;
		width: 120px;
		height: 28px;
		color: #fff;
		font-size: 16px;
		font-weight: bold;
		text-align: center;
		line-height: 28px;
		background-color: var(--btn-color);
		border-radius: 9px;
		transition: color 250ms linear, background 150ms linear;
	}
}
.header__sns-list {
	display: flex;
	align-items: center;
	margin-left: 20px;
}

.header__sns-item {
	display: flex;
	align-items: center;
	margin-left: 10px;

	&:first-child {
		margin-left: 0;
	}
	a {
		/* transition: opacity 250ms linear; */
		&:hover {
			opacity: 0.7;
		}
	}
}
.header__sns-item--tw {
	width: 26px;
}

.header__sns-item--fb {
	width: 22px;
}



@media (min-width: 769px) {
	.header {
		height: 60px;

		.header.scroll {
			background: rgba(0, 0, 0, 1);
		}

		.inner {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: calc(960px/1024px) * 100vw;
			max-width: 960px;
			height: 60px;
			margin: 0 auto;
		}
	}
	.header__logo {
		width: 120px;
	}

	.header__menu {
		display: flex;
		align-items: center;
		width: 100%;
	}

	.header__nav {
		display: block;

		width: 100%;
	}

	.header__nav-list {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.header__nav-item {
		margin-left: 11px;

		a {
			display: flex;
			align-items: center;
			font-size: 1.2em;
			font-weight: bold;
			color: #fff;

			&:hover,
			&.active {
				color: var(--active-color);

				&:after {
					border-top: 6px var(--active-color) solid;
				}
			}

			&:after {
				content: '';
				display: inline-block;
				margin-left: 4px;
				border-top: 6px #fff solid;
				border-right: 5px transparent solid;
				border-left: 5px transparent solid;
				border-bottom: 0px transparent solid;
				/* transition: border 200ms linear; */
			}
		}
	}

	.header__sns-list {
		display: flex;
		align-items: center;
		margin-left: 20px;
	}

	.header__sns-item {
		display: flex;
		align-items: center;
		margin-left: 10px;

		a {
			&:hover {
				opacity: 0.7;
			}
		}
	}
	.header__sns-item:first-child {
		margin-left: 0;
	}

	.header__sns-item--tw {
		width: 26px;
	}

	.header__sns-item--fb {
		width: 22px;
	}
}


@media (min-width: 1024px) {
	.header {
		.header__logo {
			width: 142px;
		}
	}
	.header__nav-item {
		margin-left: 13px;

		a {
			font-size: 1.2em;

			&:after {
				margin-left: 5px;
				border-top: 6px #fff solid;
				border-right: 5px transparent solid;
				border-left: 5px transparent solid;
				border-bottom: 0px transparent solid;
			}
		}
	}

	.header__apply {			
		a {
			width: 144px;
			height: 39px;
			font-size: 16px;
			color: #fff;
			line-height: 39px;
			border-radius: 12px;
			&:hover {
				background-color: var(--active-color);
			}	
		}
	}

	.header__sns-list {
		margin-left: 24px;
	}

	.header__sns-item {
		margin-left: 12px;
	}
	.header__sns-item--tw {
		width: 32px;
	}

	.header__sns-item--fb {
		width: 28px;
	}
}

main {
	.inner {
		width: 92%;
		max-width: 960px;
		margin: 0 auto;
		padding-top: 40px;
	
		@media (min-width: 769px) {
			padding-top: 70px;
		}
	}
	
	.ttl {
		font-size: 2.8em;
		font-weight: 800;
		color: var(--font-color);
		text-align: center;
		line-height: 1em;
		@media (min-width: 769px) {
			font-size: 3.2em;
		}
	
		span {
			display: inline-block;
			padding-bottom: 4px;
			border-bottom: 3px var(--font-color) solid;
			@media (min-width: 769px) {
				padding-bottom: 6px;
			}
		}
	}
	.ttl + .content {
		margin-top: 24px;
		@media (min-width: 769px) {
			margin-top: 33px;
		}
	}
	
	.content {
		padding: 30px 12px;
		@media (min-width: 769px) {
			padding: 40px;
		}
	}

	.apply-button {
		display: block;
		width: 300px;
		height: 42px;
		line-height: 42px;
		text-align: center;
		background-color: var(--btn-color);
		font-size: 2rem;
		font-weight: bold;
		color: var(--theme-color);
		text-decoration: none;
		border-radius: 12px;
		box-shadow: 2px 2px 2px #ababab;
	
		span {
			position: relative;
			padding-left: 12px;
			color: #fff;
		}
	}
	.apply-button--narrow {
		height: 50px;
		line-height: 50px;
	}
	
	@media (min-width: 769px) {
		.apply-button {
			width: 360px;
			height: 56px;
			line-height: 56px;
			font-size: 20px;
			transition: background 150ms linear;
	
			span {
				padding-left: 19px;
				&:before {
					border-width: 10px 0 10px 10px;
					margin-top: -9px;
				}
			}	
	
			>div {
				transition: color 250ms linear;
			}
	
			.txt-02 {
				font-size: 18px;
				margin-top: 16px;
			}
	
			&:hover {
				background-color: var(--active-color);
	
				> div{
					color: #fff;
				}
			}
		}
		.apply-button--narrow {
			height: 80px;

			.txt-01 {
				padding-top: 13px;
			}
			.txt-02 {
				margin-top: 7px;
			}
		}
	}	
}

.mainvis {
	position: relative;
	width: 100%;
	padding: 32px 0;
	background: url(../images/bg_mainvis.webp) center/cover no-repeat;

	.inner {
		display: flex;
    align-items: center;
    justify-content: center;
    height: 86vw;
		max-width: 1000px;
    padding-top: 40px;
	}
}

.mainvis__btn {
	/* width: 63%; */
	margin: 10px auto 0;
	/* transform: translateY(60px); */
	/* transition: opacity 0.8s $ease-out-quad 3s, transform 0.6s $ease-out-quad 3s; */
	a.apply-button {
		font-weight: bold;
		color: #fff;
	}
}


@media (min-width: 769px) {
	.mainvis {	
		max-width: 1800px;
		margin: 0 auto;
		padding: 0;

		.inner {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 46vw;
			max-height: 496px;
			padding-top: 60px;
		}

		.ttl {
			flex-basis: 1000px;
			width: auto;
			margin: 0;
		}
	}
	.mainvis__img {
		display: block;
		flex-basis: 334px;
	}	

	.mainvis__btn {
		width: 390px;
		height: 60px;
		line-height: 60px;
		margin: 26px auto 0;
		a.apply-button {
			width: 100%;
			height: 60px;
			line-height: 60px;
			font-size: 2.8rem;
		}
	}
}

.info {
	width: 100%;
	height: 45px;
	line-height: 45px;
	font-size: 2.3rem;
	font-weight: bold;
	text-align: center;
	color: var(--font-color);
	background-color: var(--active-color);
}

.intro {
	.content {
		border-radius: 6px;
		background: rgba(255,255,255, 0.85);
	}
}
.intro__txt {
	font-size: 1.4em;
	color: #081829;
	margin: 16px auto 0;
	&:first-of-type {
		margin: 0 auto;
	}
}
.intro__recommend {
	margin: 24px auto 0;
	padding: 24px 24px 30px;
	font-weight: bold;
	text-align: center;
	background: #F2F7FA;
	h2 {
		font-size: 2.2rem;
		font-weight: bold;
		@media (min-width: 769px) {
			font-size: 2.5rem;
		}
	}
}
.intro__recommend__list {
	margin-top: 12px;
	font-size: 1.7em;
	text-align: center;
	color: #0165AB;
	border-radius: 5px;
	@media (min-width: 769px) {
		margin-top: 16px;
	}
	ul {
		@media (min-width: 769px) {
			/* display: flex;
			align-items: center;
			gap: 2%;
      justify-content: space-between; */
			display: inline-block;
    	text-align: left;
		}
	}
	li {
		position: relative;
		margin-top: 8px;
    line-height: 1.6;
    padding-left: 1.8rem;
		text-align: left;
		&:before {
			content: "●";
			margin-right: .8rem;
			font-family: serif;
			font-size: 1rem;
			position: absolute;
			top: 4px;
			left: 4px;
			@media (min-width: 769px) {
				top: 9px;
			}
		}
	}	
}	


.intro__ttl {
	margin-top: 20px;
	font-size: 2.0em;
	color: #081829;
	text-align: center;
	line-height: 1em;
	font-weight: bold;
}

.intro__list {
	width: 90%;
	margin: 10px auto 0;
	background-color: #234584;
}

.intro__item {
	display: flex;
	align-items: center;
	flex-basis: 48.7%;
	padding: 12px 0;
	color: #fff;
	background-color: #234584;
}
.intro__item__img {
	flex-basis: 14%;
	padding: 0 4% 0 8%;
}
.intro__item__txt {
	flex: 1 1 0;
}

.intro__date {
	display: flex;
	align-items: center;
	line-height: 24px;
	margin-top: 12px;
	.num {
		display: inline-block;
		font-size: 2.8em;
		line-height: 1em;
		margin-right: 3px;
		font-family: 'Oswald', sans-serif;
	}
	.day {
		display: inline-block;
		width: 24px;
		height: 24px;
		font-size: 1.4em;
		line-height: 24px;
		text-align: center;
		border: 1px #fff solid;
		border-radius: 100%;
	}
}

.intro__theme {
	position: relative;
	width: 100%;
	margin-top: 10px;

	span {
		font-size: 1.55em;
		font-weight: 800;
		line-height: 1.2em;
	}
}

.intro__tag {
	position: relative;
	width: 100%;
	text-align: center;
	margin-top: 10px;
	padding: 10px 0 12px;
	background: #fff;

	span {
		display: block;
		font-size: 1.3rem;
		font-feature-settings: "palt";
		line-height: 1.4em;
	}
}


@media (min-width: 769px) {
	.intro {
		.content {
			background: rgba(#fff, 0.85);
		}
	}
	.intro__txt {
		font-size: 1.8em;
	}

	.intro__ttl {
		margin-top: 36px;
		font-size: 3.0em;
	}

	.intro__list {
		display: flex;
		flex-wrap: wrap;
		width: 94%;
		gap: 0 1.25%;
		margin-top: 15px;
		padding: 0;
		background-color: transparent;
	}

	.intro__item {
		display: block;
		flex-basis: 24%;
		padding: 18px 0;
	}
	.intro__item__img {
		width: 24%;
		margin: 0 auto;
	}
	.intro__item:first-child {
		.intro__theme {
			span {
				font-size: 2.2em;
			}
		}
	}

	.intro__date {
		justify-content: center;
		line-height: 36px;
		.num {
			font-size: 4em;
			margin-right: 6px;
		}
		.day {
			width: 36px;
			height: 36px;
			font-size: 2em;
			line-height: 36px;
		}
	}

	.intro__theme {
		margin-top: 15px;
		text-align: center;

		span {
			font-size: 2.6em;
		}
	}
	.intro__tag {
		padding: 14px 0 20px;
		span {
			font-size: 1.8rem;
		}
	}
}


.apply {
	width: 100%;

	.inner {
		text-align: center;
	}
}
.apply__balloon {
	position: relative;
	display: inline-block;
	margin: 0 0 -20px;
	padding: 32px 44px;
	color: #fff;
	font-size: 14px;
	line-height: 1.4;
	span {
		font-size: 21px;
	}
	&:before {
		content: "";
		position: absolute;
		top: 42px;
		left: 30px;
		border-right: 2px solid #fff;
		width: 0;
		height: 38px;
		transform: rotate(-30deg);
	}
	&:after {
		content: "";
		position: absolute;
		top: 42px;
		right: 30px;
		border-right: 2px solid #fff;
		width: 0;
		height: 38px;
		transform: rotate(30deg);
	}
}

.apply__btn {
	width: 300px;
	margin: 0 auto;
	a {
		color: #fff;
	}
}


@media (min-width: 769px) {
	.apply__balloon {
		font-size: 16px;
		span {
			font-size: 23px;
		}
		&:before {
			top: 46px;
		}
		&:after {
			top: 46px;
		}
	}	
	.apply__btn {
		width: 360px;
	}
}


.timetable {
	.content {
		border-radius: 6px;
		background-color: rgba(#fff, 0.77);

		.inner {
			width: 94%;
			padding: 12px 0 24px;
		}
	}
	.content__ttl {
		font-size: 2.1em;
		font-weight: 800;
		color: #081829;
		text-align: center;
		background-color: var(--theme-color);
		padding: 12px 0;
	}

	.content__item {
		margin-top: 24px;
		&:first-of-type {
			margin-top: 0;
		}
	}

	.content__head {
		/* flex-basis: 28%; */
		margin-right: 3%;
	}

	.content__time {
		font-family: 'Oswald', sans-serif;
		font-size: 24px;
		font-weight: bold;
	}

	.content__body {
		flex: 1;
	}

	.content__theme {
		font-size: 1.9em;
		font-weight: 800;
		color: #081829;
		line-height: 1.2em;
		font-feature-settings: 'palt';
	}

	.content__txt {
		font-size: 1.4em;
		color: #081829;
		line-height: 1.33em;
		margin-top: 10px;
	}
	.content__txt + .content__speaker {
		margin-top: 12px;
	}

	.content__speaker {
		display: flex;
		align-items: center;
		margin-top: 12px;
	}

	.content__img {
		flex-basis: 72px;
		margin-right: 6px;
		/* clip-path: polygon(50% 0%, 93.5% 25%, 93.5% 75%, 50% 100%, 6.5% 75%, 6.5% 25%); */

		img {
			border-radius: 50%;
		}
	}

	.content__profile {
		flex: 1;
		font-size: 1.4em;
		font-weight: 600;
		color: #081829;
		line-height: 1.23em;
		font-feature-settings: 'palt';
	}
	.note {
		margin-top: 42px;
		font-size: 1.2rem;
	}
}
.timetable__btn {
	width: vw(638);
	margin: 24px auto 0;
}

@media (min-width: 769px) {
	.timetable {
		.content {
			.inner {
				padding: 24px 0 48px;
			}
		}
		.content__ttl {
			font-size: 3em;
			line-height: 1em;
			padding: 32px 0;
		}

		.content__item {
			display: flex;
			justify-content: space-between;
			margin-top: 48px;
			align-items: center;
		}


		.content__head {
			flex-basis: 18.5%;
		}

		.content__body {
			width: 81%;
			padding-left: 22px;
			border-left: 4px #E0E0E0 solid;
		}

		.content__theme {
			font-size: 25px;
		}

		.content__txt {
			font-size: 1.6em;
			margin-top: 16px;
		}
		.content__txt + .content__speaker {
			margin-top: 24px;
		}

		.content__speaker {
			margin-top: 12px;
		}

		.content__img {
			margin-right: 8px;
		}

		.content__profile {
			font-size: 1.6em;
		}
		.content__notice {
			margin-top: 12px;
			font-size: 2rem;
		}
		.note {
			font-size: 1.4rem;
      text-align: center;
		}
	}
	.timetable__ttl {
		font-size: 4em;

		span {
			padding-bottom: 6px;
		}
	}
	.timetable__btn {
		max-width: 638px;
		margin: 48px auto 0;
	}
}


@media (min-width: 1024px) {
	.timetable {
		.content__time {
			font-size: 24px;
		}
	}
}

.outline__ttl {
	font-size: 2.8em;
	font-weight: 800;
	color: #fff;
	text-align: center;
	line-height: 1em;

	span {
		display: inline-block;
		padding-bottom: 4px;
		border-bottom: 1px #fff solid;
	}
}

.content {
	background-color: rgba(255,255,255,.77);
	border-radius: 6px;
}

.outline__table {
	width: 100%;
	color: #081829;

	tr {
		&:nth-child(odd) {
			background-color: #f9f9f9;
		}
		&:nth-child(even) {
			background-color: #eeeeee;
		}
	}

	th, td {
		font-size: 1.4em;
		padding: 8px 4px;
		border: 1px #d4d4d4 solid;
	}

	th {
		width: 25%;
		font-weight: bold;
	}

	td {
		width: 75%;
		span {
			display: block;
			margin-right: 8px;
			text-align: left;
			line-height: 1.5em;
		}
	}
}
.outline__sponsor {
	margin-top: 25px;

	.ttl {
		font-size: 2.2em;
		font-weight: 800;
		color: fff;
		text-align: center;
	}

	.img {
		width: 187px;
		margin: 20px auto 0;
	}
}

@media (min-width: 769px) {
	.outline__ttl {
		font-size: 4em;

		span {
			padding-bottom: 6px;
		}
	}

	.outline__table {
		th, td {
			font-size: 1.8em;
			padding: 15px;
		}

		th {
			width: 17%;
		}

		td {
			width: 83%;
			span {
				display: inline-block;
				width: 126px;
			}	
		}
	}
	.outline__sponsor {
		margin-top: 50px;

		.ttl {
			font-size: 3em;
		}

		.img {
			margin: 50px auto 0;
		}
	}	
}

.contact {
	iframe {
		display: block;
		width: 96%;
		margin: 0 auto 0;
	}
}
.contact__ttl {
	font-size: 2.8em;
	font-weight: 800;
	color: #fff;
	text-align: center;
	line-height: 1em;

	span {
		display: inline-block;
		padding-bottom: 4px;
		border-bottom: 1px #fff solid;
	}
}

.contact__txt {
	margin-top: 20px;
	font-size: 1.4em;
	a {
		color: #00AEBD;
	}
}
.contact__txt:last-child {
	margin-top: 60px;
}


@media (min-width: 769px) {
	.contact__ttl {
		font-size: 4em;
		font-weight: 800;

		span {
			padding-bottom: 6px;
		}
	}

	.contact__txt {
		font-size: 1.6em;
	}

	.contact__form {
		margin: 60px auto 0;
	}

	#content + .contact {
		margin-top: 80px;
	}
}

.pagetop {
	display: none;
	position: fixed;
	right: 10px;
  bottom: 10px;
	z-index: 1000;
	transition: opacity 500ms linear, z-index 500ms linear;

	.apply__btn {
		a {
			border-radius: 0 3px 0 0;
		}
	}

	a {
		position: relative;
		display: block;
		width: 40px;
		height: 40px;
		background-color: rgba(28, 150, 182, 0.77);
		border-radius: 6px;
	}

	img {
		position: absolute;
		left: 50%;
		top: 50%;
		width: 16px;
		height: 16px;
		transform: translate(-50%, -45%) rotate(-90deg);
	}
}

@media (min-width: 769px) {
	.pagetop {
		right: 30px;
		bottom: 30px;

		a {
			&:hover {
				background-color: rgba(28, 150, 182, 0.5);
			}
		}
	}
}


.footer {
	.inner {
		padding: 46px 0 23px;
	}
}
.footer__logo {
	width: 248px;
	margin: 50px auto 25px;
}

@media (min-width: 769px) {
	.footer {	
		.inner {
			padding: 96px 0 48px;
		}
	}
	.footer__logo {
		width: 248px;
		margin: 50px auto 50px;
	}
}

.js-fadein {
	transform: translate3d(0, 70px, 0);
  transition: 1s;
  opacity: 0;
}
.js-fadein.animation {
  transform: translate3d(0, 0, 0);
  opacity: 1;
	animation-name: fadeInAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
	animation-timing-function:ease;
}

@keyframes fadeInAnime{
  0% {
		transform: translateY(70px);
    opacity: 0;
  }

  100% {
		transform: translateY(0);
    opacity: 1;
  }
}