/* 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;
}


/* setting */
/* @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap'); */

:root {
  --theme-color: #394EA0E5;
  --font-color: #122425;
	--active-color: #fffc40;
  --btn-color: linear-gradient(266deg, #FF8282 -68%, #F7931E -22%, #ED1C24 23%, #EB008B 133%);
  --btn-active-color: linear-gradient(266deg, #FF8282 -68%, #F7931E -22%, #ED1C24 23%, #EB008B 133%);
}

/* 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; }
}

/* common */
.apply-button {
	display: inline-block;
	position: relative;
	width: 343px;
	height: 42px;
	line-height: 42px;
	text-align: center;
	background: var(--btn-color);
	font-size: 2rem;
	font-weight: 500;
	color: #fff;
	text-decoration: none;
	border-radius: 12px;
	transition: all 250ms linear;
	&:after {
		content: '';
		display: block;
		position: absolute;
		top: 3px;
		left: 3px;
		width: 337px;
		height: 36px;
		border-radius: 9px;
	}
	span {
		position: relative;
		z-index: 3;
	}

	&:hover {
		color: #ed174c;
		&:after {
			background: #fff;
		}
	}

	@media (min-width: 769px) {
		width: 360px;
		height: 56px;
		line-height: 56px;
		&:after {
			top: 3px;
			left: 3px;
			width: 354px;
			height: 50px;
			border-radius: 9px;
		}
	}	
}

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

body {
	width: 100%;
	height: 100%;
	font: 1.4rem/1.6 "Noto Sans JP", "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック, "Yu Gothic", 游ゴシック体, YuGothic, sans-serif;
  color: var(--font-color);
	background: #F9F9F9 url(../images/bg_mainvis.png) center top / 100% no-repeat;
	@media (min-width: 769px) {
    font: 1.8rem/1.6 "Noto Sans JP", "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック, "Yu Gothic", 游ゴシック体, YuGothic, sans-serif;
	}
}

main {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
}

section {
	position: relative;
}

img {
	width: 100%;
}

.header {
	display: block;
	width: 100%;
	background-color: rgba(57, 78, 160, 0.90);
	z-index: 100;

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

	.inner {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 92%;
		max-width: 960px;
		height: 58px;
		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 {
	.apply-button {
		width: 72px;
		height: 26px;
		line-height: 26px;
		font-size: 12px;
		border-radius: 6px;
		&::after {
			top: 2px;
			left: 2px;
			width: 68px;
			height: 22px;
			border-radius: 4px;
		}
	}
}
@media (min-width: 769px) {
	.header__apply {
		.apply-button {
			width: 140px;
			height: 31px;
			line-height: 31px;
			font-size: 12px;
			border-radius: 6px;
			&::after {
				top: 2px;
				left: 2px;
				width: 136px;
				height: 27px;
				border-radius: 4px;
			}
		}
	}
}

.header__sns-list {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-left: 20px;
}
.header__sns-item {
	width: 20px;
	a {
		display: flex;
	}
}

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



@media (min-width: 769px) {
	.header {
		position: fixed;

		.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: 72px;
			margin: 0 auto;
		}
	}
	.header__logo {
		width: 142px;
	}

	.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;
		gap: 24px;
	}

	.header__nav-item {
		a {
			position: relative;
			display: flex;
			align-items: center;
			color: #fff;
			font-size: 1.4rem;
			font-weight: 500;
			transition: all 150ms linear;

			&::before {
				content: '';
				width: 100%;
				height: 1px;
				background-color: #fff;
				position: absolute;
				bottom: -1px;
				left: 0;
				transform: scale(0,1); /* 線のx軸の長さを0 */
				transition: .4s; /* 要素の変形する時間*/
				transform-origin: left top; /* 要素の座標の原点を設定*/
			}
	
			&:hover::before,
			&.active::before {
				transform: scale(1,1); /* 線のx軸の長さを1 */
			}	

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

	.header__sns-item {
		a {
			&:hover {
				opacity: 0.7;
			}
		}
	}
}


main {
	@media (min-width: 769px) {
		padding-top: 152px;
	}
	.inner {
		width: 92%;
		max-width: 1000px;
		margin: 0 auto;
	}
	
	.ttl {
		padding-top: 32px;
		font-size: 3.2rem;
		color: var(--font-color);
		color: #394EA0;
		font-weight: 700;
		line-height: 1;
		@media (min-width: 769px) {
			padding-top: 80px;
			font-size: 4.5rem;
		}
	}
	.ttl + .content {
		margin-top: 16px;
		@media (min-width: 769px) {
			margin-top: 16px;
		}
	}	
	.content {
		/* padding: 30px 12px;
		@media (min-width: 769px) {
			padding: 40px;
		} */
	}
}

.mainvis {
	position: relative;
	width: 100%;
	padding: 40px 0 0;
	
	.inner {
		text-align: center;
		
	}

	h1 {
		width: 74.8%;
		margin: 0 auto;
	}
}

.mainvis__img {
	display: none;
}

.mainvis__btn {
	margin-top: 28px;
	text-align: center;
}


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

		.inner {
		}

		h1 {
			padding-top: 16px;
			width: 738px;
		}
	}
	.mainvis__img {
		display: block;
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 1207px;
		z-index: -1;
	}	
}
.intro {
	.content {
		padding: 16px;
		border-radius: 6px;
		background: #F6F8FF;
	}
}

@media (min-width: 769px) {
	.intro {
		.content {
			padding: 40px;
		}
		.ttl {
			padding-top: 140px;
		}
	}
}


.apply {
	width: 100%;
	margin-top: 32px;

	.inner {
		text-align: center;
	}
}

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

		.inner {
			width: 94%;
			padding: 12px 0 24px;
		}
	}

	.content__item {
		margin-top: 24px;
		padding: 16px;
		background: #FFF;
		border: 2px solid #394EA0;
		border-radius: 24px;
		&:first-of-type {
			margin-top: 16px;
		}
		&:nth-child(even) {
			background: #F6F8FF;
		}
	}

	.content__speaker {
		display: flex;
		align-items: center;
		gap: 8px;
		margin-top: 16px;
	}

	.content__time {
		display: inline-block;
		padding: 14px 16px;
		font-size: 24px;
		font-weight: 700;
		line-height: 1;
		color: #FFF;
		border-radius: 8px;
		background: #394EA0;
	}

	.content__body {
		flex: 1;
	}

	.content__ttl {
		margin-top: 16px;
		color: #394EA0;
		font-size: 24px;
		font-weight: 700;
		line-height: 1.4;
	}
	.content__txt {
		margin-top: 10px;
	}

	.content__img {
		flex-basis: 100px;
		img {
			border-radius: 50%;
		}
	}

	.content__profile {
		flex: 1;
		color: #081829;
		line-height: 1.23em;
		font-size: 12px;
			span {
				display: block;
				margin-top: 10px;
				font-size: 16px;
				font-weight: 700;
			}
	}
	.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__item {
			display: flex;
			justify-content: space-between;
			flex-direction: row-reverse;
			gap: 32px;
			margin-top: 40px;
			padding: 40px;
		}

		.content__speaker {
			display: block;
			margin-top: 0;
			text-align: center;
		}
		.content__img {
			display: inline-block;
			max-width: 160px;
		}
		.content__profile {
			margin-top: 16px;
		}

	
		.content__body {
			width: 81%;
		}

		.content__time {
			display: inline-block;
			padding: 14px 16px;
			font-size: 24px;
			font-weight: 700;
			line-height: 1;
			color: #FFF;
			border-radius: 8px;
			background: #394EA0;
		}

		.content__ttl {
			font-size: 24px;
		}

		.content__txt {
			margin-top: 16px;
		}

		.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;
	}
}

.outline {
	padding-bottom: 80px;
	.content {
		padding: 2px 16px 10px;
		background: #F6F8FF;
		border-radius: 6px;
		@media (min-width: 769px) {
			padding: 30px 0 40px;
		}
	}
}

.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;
	}
}

.outline__list {
	width: 100%;
	max-width: 740px;
	margin: 0 auto;
	border-bottom: 1px solid #394EA080;
	&:last-of-type {
		border: none;
	}
	dt {
		padding: 18px 0 0;
		font-weight: 700;
		color: var(--theme-color);
	}
	dd {
		padding: 8px 0 18px;
	}
}

.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__list {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		width: 100%;
		max-width: 740px;
		margin: 0 auto;
		border-bottom: 1px solid #394EA080;
		&:last-of-type {
			border: none;
		}
		dt {
			flex-basis: 20%;
			font-weight: 700;
			text-align: center;
			color: var(--theme-color);
		}
		dd {
			flex-basis: 80%;
		}
		dt, dd {
			padding: 26px 0;
		}
	}

	.outline__sponsor {
		margin-top: 50px;

		.ttl {
			font-size: 3em;
		}

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

.contact {
	padding-bottom: 40px;
	background: #FFF;
	.ttl {
		line-height: 1em;
		text-align: center;
		font-weight: 500;
		color: var(--font-color);
		font-size: 2.4rem;
		span {
			padding-bottom: 8px;
			border-bottom: 3px solid #333;
		}
		@media (min-width: 769px) {
			font-size: 3.2rem;
		}
	}

	iframe {
		display: block;
		width: 96%;
		margin: 0 auto 0;
	}
}
.contact__ttl {

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

.contact__txt {
	margin-top: 42px;
}

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

		span {
			padding-bottom: 6px;
		}
	}

	.contact__txt {
		margin-top: 48px;
		font-size: 1.6rem;
	}	

	.contact__form {
		margin: 60px auto 0;
	}

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

@media (min-width: 864px){
	.contact {
		.inner {
			max-width: 860px;
		}
		iframe {
			width: 90%;
		}
	}
}

.apply__balloon {
	display: none;
	position: fixed;
	right: 0;
	bottom: 7px;
	width: 100%;
	text-align: center;
	z-index: 1000;
	transition: opacity 500ms linear, z-index 500ms linear;
}

@media (min-width: 769px) {
	.apply__balloon {
		right: 16px;
    bottom: 46px;
		width: 160px;
		.apply-button {
			width: 160px;
			height: 160px;
			line-height: 160px;
			border-radius: 50%;
			box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.25);
			&:after {
				width: 154px;
				height: 154px;
				border-radius: 50%;
			}
		}
	}
}

.slideIn{
	display:block;
	animation-name:slideInAnime;
	animation-duration:.5s;
	animation-fill-mode:forwards;
}

@keyframes slideInAnime{
  0%{transform:translateY(300px)}
  to{transform:translateY(0)}
}


.footer {
	text-align: center;
	.inner {
		padding: 40px 0 24px;
	}
}
.footer__logo {
	width: 223px;
	margin: 0 auto 8px;
}

@media (min-width: 769px) {
	.footer {	
		.inner {
			padding: 40px 0 24px;
		}
	}
	.footer__logo {
		width: 223px;
		margin: 0 auto 8px;
	}
}

.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;
  }
}