@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Noto+Sans+JP:wght@300;400;500;700;900&family=Oswald:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


main[class*=oc__] {
  /* background-image: linear-gradient(90deg, #eb666c, #f0885e); */
  color: #000;
  font-family: 'Noto Sans JP', sans-serif;
  /* background-color: #f2f8f9; */
}
main[class*=oc__] .oswald {
  font-family: 'Oswald', sans-serif;
}
main[class*=oc__] .contents__inner {
  padding-block: 5rem;
}
main[class*=oc__] .contents__block {
  margin: 0 auto;
  width: calc(100% - (100vw / (1366 / 220)));
  max-width: 1120px;
}
main[class*=oc__] h1 img {
  width: 100%;
}
main[class*=oc__] p {
  font-size: clamp(0.8125rem, 0.5287rem + 0.7568vw, 1.5625rem);
}
main[class*=oc__] .headline .hl-img {
  width: calc(100vw / (1366 / var(--hl-w,1366)));
  max-width: calc(var(--hl-w) * 1px);
  min-width: calc(var(--hl-w) / 2 * 1px);
  margin: 0 auto;
}

main[class*=oc__] .post-pickup.swiper {
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  overflow: inherit;
}
main[class*=oc__] .post-pickup__list-item {
  display: grid;
  gap: 3.2rem;
}
main[class*=oc__] .post-pickup__list-item a {
  display: block;
  width: 100%;
  height: 100%;
  height: 269px;
  height: 19.6925329429vw;
  min-height: 241px;
  max-height: 269px;
  transition: opacity 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {
  main[class*=oc__] .post-pickup__list-item a:hover {
    opacity: 0.7;
  }
}
main[class*=oc__] .post-pickup__list-item img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
@media only screen and (max-width: 769px) {
  main[class*=oc__] {
    margin-top: 50px;
  }
  main[class*=oc__] .contents__inner {
    padding-block: 0;
  }
  main[class*=oc__] .contents__inner + .contents__inner {
    margin-top: 4rem;
  }
  main[class*=oc__] .contents__block {
    width: calc(100% - 2rem);
    max-width: inherit;
  }
  main[class*=oc__] .headline .hl-img {
    width: calc(100vw / (375 / (var(--hl-w,375) * .5)));
    min-width: inherit;
  }

  main[class*=oc__] .post-pickup__list-item {
    width: 80% !important;
    gap: 1.6rem;
  }
  main[class*=oc__] .post-pickup__list-item a {
    height: 131px;
    height: 34.9333333333vw;
    min-height: inherit;
    max-height: inherit;
  }
}



/* カスタム投稿：オープンキャンパス */
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
main[class*=_open-campus] .content__post {
  padding-top: 5rem;
}
main[class*=_open-campus] .headline {
	padding-bottom: 3.4rem;
}
main[class*=_open-campus] .headline .hl-txt {
	text-align: center;
}
main[class*=_open-campus] .headline .hl-txt span {
	color: #000;
	font-size: clamp(28px, 40/1440 * 100vw, 40px);
	font-weight: bold;
	letter-spacing: 0.1em;
	position: relative;
}
main[class*=_open-campus] .headline .hl-txt span::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: -2rem;
	width: calc(100% + 3rem);
	height: 15px;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(248, 187, 0, 1) 35%, rgba(236, 112, 0, 1) 80%, rgba(255, 255, 255, 0) 100%);
	opacity: .5;
	z-index: -1;
}
@media only screen and (max-width: 769px) {
	main[class*=_open-campus] .headline {
	  padding-bottom: 2rem;
	}
	main[class*=_open-campus] .content__post {
	  margin-top: 0;
	  padding-top: 1.6rem;
	}
	main[class*=_open-campus] .contents__inner {
		padding-block: 3rem;
	}
}
main[class*=_open-campus] .post__title .meta .date {
  display: grid;
  grid-template-columns: 100px auto auto auto;
  font-family: "Barlow", sans-serif;
  font-size: clamp(30px, 80/1440 * 100vw, 80px);
  place-content: center;
  align-items: center;
  line-height: 1;
  gap: 10px;
  font-weight: bold;
}
main[class*=_open-campus] .post__title .meta .text {
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: clamp(12px, 22/1440 * 100vw, 22px);
	font-weight: bold;
	padding: 1rem 0;
}
main[class*=_open-campus] .post__title .meta .week {
	font-size: 50%;
}
main[class*=_open-campus] .post__title .meta .time {
	font-size: 65%;
}
main[class*=_open-campus] .post__title .bnr__bus {
  max-width: 500px;
  margin: auto;
  width: 45%;
}
main[class*=_open-campus] .post__title .bnr__bus p {
  color: #f8931f;
  font-size: clamp(1.125rem, 0.9594rem + 0.4415vw, 1.5625rem);
  font-weight: 500;
  margin-bottom: .75rem;
  position: relative;
  text-align: center;
}
main[class*=_open-campus] .post__title .bnr__bus p::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background: #f8931f;
  width: 100%;
  height: 1px;
  z-index: -1;
}
main[class*=_open-campus] .post__title .bnr__bus p span {
  background-color: #fff;
  padding: 0 .5rem;
}
main[class*=_open-campus] .post__title .bnr__bus img { width: 100%;}
main[class*=_open-campus] .post__title .bnr__bus a {
  display: block;
}
@media only screen and (max-width: 769px) {
	main[class*=_open-campus] .post__title .meta .date {
		gap: 5px;
		grid-template-columns: 50px auto auto auto;
	}
	main[class*=_open-campus] .post__title .meta .text {
		padding: .5rem 0;
	}
}

main[class*=oc__] .post__container_topics {
  max-width: 700px;
  margin: auto;
  width: 90%;
}
main[class*=oc__] .post__container_topics .contents__inner {
	padding-block: 0;
	padding-top: 3rem;
}
main[class*=oc__] .post__container_topics ul {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
main[class*=oc__] .post__container_topics ul li a {
	border: 1px solid var(--main-color);
	border-radius: 30px;
	color: var(--main-color);
	font-size: clamp(1rem, 0.8581rem + 0.3784vw, 1.375rem);
	line-height: 1.25;
	display: block;
	padding: .75rem 1.5rem;
	position: relative;
	text-align: center;
}
main[class*=oc__] .post__container_topics ul li a small {
  font-size: 80%;
  margin-left: .5rem;
}
main[class*=oc__] .post__container_topics ul li a:hover {
  opacity: .7;
}
main[class*=oc__] .post__container_topics ul li a::before {
	content: "◆";
	position: absolute;
	left: 0px;
	top: 0px;
	bottom: 0px;
	line-height: 1;
	height: .75em;
	font-size:1em;
	color: #f8931f;
	font-family: Arial, Helvetica, sans-serif;
	margin: auto;
}
main[class*=oc__] .post__container_topics ul li a::after {
  position: absolute;
  content: "";
  border-top: solid 2px #f8931f;
  border-right: solid 2px #f8931f;
  width: 10px;
  height: 10px;
  top: 0;
  bottom: 0;
  right: 1.5rem;
  margin: auto;
  transform: rotate(45deg);
  transition: transform .3s ease;
}
main[class*=oc__] .post__container_topics dl {
  margin-top: 2rem;
}
main[class*=oc__] .post__container_topics dl dt {
  background-color: #f8931f;
  color: #fff;
  font-size: clamp(1rem, 0.8581rem + 0.3784vw, 1.375rem);
  font-weight: 500;
  padding: .5rem;
  text-align: center;
}
main[class*=oc__] .post__container_topics dl dd {
  background-color: #ffe2c5;
  line-height: 1.55;
  padding: .5rem;
  text-align: center;
}
main[class*=oc__] .post__container_topics dl dd p {
  font-size: clamp(0.875rem, 0.7804rem + 0.2523vw, 1.125rem);
}
main[class*=oc__] .post__container_topics dl dd small {
  display: block;
  font-size: 80%;
}
main[class*=oc__] .post__container_topics dl dd a {
  background-color: #fff;
  border: 2px solid #f8931f;
  border-radius: 50px;
  color: #f8931f;
  font-size: clamp(12px,1vw,14px);
  font-weight: bold;
  margin-top: 5px;
  padding: 5px 2rem;
}
main[class*=oc__] .post__container_topics dl dd a:hover {
  opacity: .7;
}
@media only screen and (max-width: 769px) {
	main[class*=oc__] .post__container_topics .contents__inner {
		padding-top: 1.5rem;
	}
	main[class*=oc__] .post__container_topics ul li a {
		border-radius: 50px;
		padding: .5rem 1rem;
		padding-right: 2.5rem;
	}
	main[class*=oc__] .post__container_topics ul li a::after {
		right: 1rem;
		width: 8px;
		height: 8px;
	}
	main[class*=oc__] .post__container_topics ul li a small {
		display: block;
		margin: auto;
		padding-top: 5px;
	}
}

/* 230708のみ */
main[class*=oc__] .oc230708 {
  margin: 3rem calc(50% - 50vw) 0;
  width: 100vw;
}
main[class*=oc__] .oc230708 a {
  display: block;
  margin: auto;
  max-width: 600px;
  width: 85%;
}
main[class*=oc__] .oc230708 img { width: 100%;}

main[class*=_open-campus] .post__container img {
  width: 100%;
}
main[class*=_open-campus] .post__container .contents__block + .contents__block {
  padding-top: 6.4rem;
}

main[class*=_open-campus] .post__container .con__outline dl {
  display: grid;
  grid-template-columns: 170px auto;
}
main[class*=_open-campus] .post__container .con__outline .contents__block {
	max-width: 50%;
}
main[class*=_open-campus] .post__container .con__outline dl dt {
  position: relative;
}
main[class*=_open-campus] .post__container .con__outline dl dt .time {
  display: flex;
  align-items: center;
  font-size: clamp(25px, 40/1440 * 100vw, 40px);
  font-family: "Barlow", sans-serif;
  font-weight: bold;
  gap: 1rem;
}
main[class*=_open-campus] .post__container .con__outline dl dt .time::before {
  content: "";
  width: 30px;
  height: 30px;
  background-color: #f8931f;
  border-radius: 50%;
}
main[class*=_open-campus] .post__container .con__outline dl dd .headline {
  padding-bottom: 2.4rem;
}
main[class*=_open-campus] .post__container .con__outline dl dd .headline h2 {
  font-size: clamp(18px, 30/1440 * 100vw, 30px);
  width: -moz-fit-content;
  width: fit-content;
  border-bottom: 2px solid #f8931f;
  line-height: 1.2;
  padding-bottom: .5rem;
}
main[class*=_open-campus] .post__container .con__outline dl dd p {
  line-height: 2;
}
main[class*=_open-campus] .post__container .con__outline dl:not(:last-child) {
  padding-bottom: 3.2rem;
}
main[class*=_open-campus] .post__container .con__outline dl:not(:last-child) dt::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 2px;
  height: calc(100% + 30px);
  left: 15px;
  background-color: var(--main-color);
  top: 30px;
}
@media only screen and (max-width: 769px) {
	main[class*=_open-campus] .post__container .con__outline {
		margin-top: 0;
	}
	main[class*=_open-campus] .post__container .con__outline .contents__block {
		max-width: inherit;
		width: 90%;
	}
	main[class*=_open-campus] .post__container .con__outline dl {
		grid-template-columns: 110px auto;
	}
	main[class*=_open-campus] .post__container .con__outline dl:not(:last-child) dt::before {
		top: 20px;
		left: 9px;
		height: calc(100% + 40px);
	}
	main[class*=_open-campus] .post__container .con__outline dl dt .time {
		gap: .5rem;
	}
	main[class*=_open-campus] .post__container .con__outline dl dt .time::before {
		width: 20px;
		height: 20px;
	}
	main[class*=_open-campus] .post__container .con__outline dl dd .headline {
		padding-bottom: 1rem;
	}
	main[class*=_open-campus] .post__container .con__outline dl dd p {
		line-height: 1.5;
	}
}

main[class*=_open-campus] .bnr__list--grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-content: center;
  gap: 1.2rem;
}
main[class*=_open-campus] .bnr__list--grid a {
  display: block;
  transition: opacity 0.3s ease;
}
main[class*=_open-campus] .bnr__list--grid a img { width: 100%;}
@media (hover: hover) and (pointer: fine) {
  main[class*=_open-campus] .bnr__list--grid a:hover {
    opacity: 0.7;
  }
}
@media only screen and (max-width: 769px) {
	main[class*=_open-campus] .post__container .con__bnr {
		margin-top: 0;
	}
	main[class*=_open-campus] .bnr__list--grid {
	  grid-template-columns: 1fr;
	  gap: 1.2rem;
	}
}

main[class*=_open-campus] .post__container .con__training .headline {
  padding-bottom: 0;
  margin-bottom: 2.4rem;
}
main[class*=_open-campus] .post__container .con__training .headline h3 {
	color: #fff;
	font-size: clamp(28px, 40/1440 * 100vw, 40px);
	font-weight: 900;
	letter-spacing: 0.1em;
	line-height: 1.5;
	padding-left: .75rem;
	position: relative;
	z-index: 1;
}
main[class*=_open-campus] .post__container .con__training .headline h3 span {
	font-size: 70%;
}
main[class*=_open-campus] .post__container .con__training .headline {
	position: relative;
}
main[class*=_open-campus] .post__container .con__training .headline::after {
	content: "";
	position: absolute;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background-size: contain;
	background-position: right bottom;
	background-repeat: no-repeat;
	mix-blend-mode: multiply;
}
main[class*=_open-campus] .post__container .con__training .headline.--dep01 {
	background: linear-gradient(90deg,rgba(0, 91, 145, 1) 0%, rgba(30, 150, 209, 1) 50%, rgba(186, 230, 255, 1) 100%);
}
main[class*=_open-campus] .post__container .con__training .headline.--dep01::after {
	background-image: url(../img/oc/course_headline_01-2.svg);
}
main[class*=_open-campus] .post__container .con__training .headline.--dep02 {
	background: linear-gradient(90deg,rgba(102, 45, 139, 1) 0%, rgba(102, 45, 139, 1) 55%, rgba(189, 135, 188, 1) 80%, rgba(236, 220, 236, 1) 100%);
}
main[class*=_open-campus] .post__container .con__training .headline.--dep02::after {
	background-image: url(../img/oc/course_headline_02-2.svg);
}
main[class*=_open-campus] .post__container .con__training .headline.--dep03 {
	background: linear-gradient(90deg,rgba(9, 135, 166, 1) 0%, rgba(70, 189, 214, 1) 60%);
}
main[class*=_open-campus] .post__container .con__training .headline.--dep03::after {
	background-image: url(../img/oc/course_headline_03-2.svg);
}
main[class*=_open-campus] .post__container .con__training .headline.--dep04 {
	background: linear-gradient(90deg,rgba(50, 133, 109, 1) 0%, rgba(111, 181, 162, 1) 60%);
}
main[class*=_open-campus] .post__container .con__training .headline.--dep04::after {
	background-image: url(../img/oc/course_headline_04-2.svg);
}
main[class*=_open-campus] .post__container .con__training .headline.--dep05 {
	background: linear-gradient(90deg,rgba(10, 99, 163, 1) 0%, rgba(109, 156, 208, 1) 60%);
}
main[class*=_open-campus] .post__container .con__training .headline.--dep05::after {
	background-image: url(../img/oc/course_headline_05-2.svg);
}
main[class*=_open-campus] .post__container .con__training .headline.--dep06 {
	background: linear-gradient(90deg,rgba(90, 92, 150, 1) 0%, rgba(148, 149, 195, 1) 60%);
}
main[class*=_open-campus] .post__container .con__training .headline.--dep06::after {
	background-image: url(../img/oc/course_headline_06-2.svg);
}
main[class*=_open-campus] .post__container .con__training .img {
  display: block;
  padding-bottom: 1.6rem;
}
main[class*=_open-campus] .post__container .con__training .text p {
  font-size: clamp(0.75rem, 0.5371rem + 0.5676vw, 1.3125rem);
  line-height: 1.55;
}
main[class*=_open-campus] .post__container .con__training .contents__block {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3.2rem 1.6rem;
}
@media only screen and (max-width: 769px) {
  main[class*=_open-campus] .post__container .con__training .headline {
    margin: 0 auto 1.2rem;
	padding-bottom: 1.2rem;
    width: calc(100% - 2rem);
  }
  main[class*=_open-campus] .post__container .con__training .dept .headline {
	padding-bottom: 0;
  }
  main[class*=_open-campus] .post__container .con__training .contents__block {
    grid-template-columns: 1fr;
    width: 100%;
    gap: 1.6rem;
  }
  main[class*=_open-campus] .post__container .con__training .contents__block .dept > *:not(.headline) {
    width: calc(100% - 2rem);
    margin: 0 auto;
    padding-bottom: .8rem;
  }
}
main[class*=_open-campus] .post__container .con__briefing {
	position: relative;
}
main[class*=_open-campus] .post__container .con__briefing::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #F0F0F0;
	z-index: -1;
}
main[class*=_open-campus] .post__container .con__briefing .contents__block {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
main[class*=_open-campus] .post__container .con__briefing .contents__block .briefing {
  width: calc(100% / 2 - 2rem);
  margin: 0 1rem 2rem;
}
main[class*=_open-campus] .post__container .con__briefing .briefing > *:not(:last-child) {
  padding-bottom: .8rem;
}
main[class*=_open-campus] .post__container .con__briefing .briefing .headline  {
	background: linear-gradient(90deg,rgba(236, 112, 0, 1) 35%, rgba(248, 187, 0, 1) 75%);
	color: #fff;
	display: flex;
	gap: .5rem;
	align-items: center;
	justify-content: center;
	padding: .5rem 0;
	width: 100%;
}
main[class*=_open-campus] .post__container .con__briefing .briefing .headline p {
	font-size: clamp(22px, 40/1440 * 100vw, 40px);
	font-weight: bold;
	font-family: "Barlow", sans-serif;
}
main[class*=_open-campus] .post__container .con__briefing .briefing .headline h3 {
	font-size: clamp(18px, 30/1440 * 100vw, 30px);
}
main[class*=_open-campus] .post__container .con__briefing .time p {
  font-size: clamp(0.875rem, 0.5439rem + 0.8829vw, 1.75rem);
  text-align: center;
}
main[class*=_open-campus] .post__container .con__briefing .text p {
  font-size: clamp(0.75rem, 0.5371rem + 0.5676vw, 1.3125rem);
  line-height: 1.55;
}
main[class*=_open-campus] .post__container .con__briefing .img {
  display: block;
}
@media only screen and (max-width: 769px) {
  main[class*=_open-campus] .post__container .con__briefing .contents__block {
    gap: 1.5rem;
  }
  main[class*=_open-campus] .post__container .con__briefing .contents__block .briefing {
    margin: 0 auto;
    width: 100%;
  }
}
main[class*=_open-campus] .post__container .con__event {
	position: relative;
}
main[class*=_open-campus] .post__container .con__event::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #FEFBDE;
	z-index: -1;
}
main[class*=_open-campus] .post__container .con__event .event {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.6rem;
}
main[class*=_open-campus] .post__container .con__event .event a {
  display: block;
  transition: opacity 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {
  main[class*=_open-campus] .post__container .con__event .event a:hover {
    opacity: 0.7;
  }
}
main[class*=_open-campus] .post__container .con__event .event .img {
  display: block;
}
@media only screen and (max-width: 769px) {
	main[class*=_open-campus] .post__container .con__event {
		margin-top: 0;
	}
  main[class*=_open-campus] .post__container .con__event .event {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }
}
main[class*=_open-campus] .btn {
	padding-bottom: 5rem;
}
main[class*=_open-campus] .btn .button {
	background: #fff;
    border-radius: 100vw;
    border: 1px solid #000;
	box-sizing: border-box;
	display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(14px, 25 / 1366 * 100vw, 25px);
	font-weight: bold;
	line-height: 1.2;
	max-width: 730px;
    height: 120px;
    margin: 3rem auto 0;
	padding: 0 1em;
    position: relative;
	width: 100%;
    z-index: 1;
}
main[class*=_open-campus] .btn .button .label {
	color: #fff !important;
    font-weight: 600;
    position: relative;
}
main[class*=_open-campus] .btn .button::before {
	content: "";
    position: absolute;
    top: 0;
    right: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    border-radius: 100vw;
    mix-blend-mode: multiply;
    transition: all 0.3s ease;
    transform: translate(5px, 5px);
	background: linear-gradient(-90deg,rgba(236, 112, 0, 1) 35%, rgba(248, 187, 0, 1) 75%);
}
main[class*=_open-campus] .btn .button::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 100%;
	height: 10rem;
	background: url(../img/oc/button_img.png) no-repeat bottom center/contain;
}
main[class*=_open-campus] .btn .button:hover::before {
	transform: translate(0, 0);
}
@media only screen and (max-width: 769px) {
	main[class*=_open-campus] .btn .button {
		height: 70px;
	}
	main[class*=_open-campus] .btn .button::after {
		height: 5rem;
	}
}

main[class*=_open-campus] .cpt,
main[class*=__free-bus] .cpt {
  background: #ffe2c5;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
main[class*=_open-campus] .cpt h2,
main[class*=__free-bus] .cpt h2 {
  font-size: clamp(1.3125rem, 0.5793rem + 1.9551vw, 3.25rem);
  text-align: center;
  line-height: 1.4;
  color: #f8931f;
  margin-bottom: 2rem;
}
main[class*=__free-bus] .cpt .button-wrapper {
  padding-top: 2.4rem;
}
main[class*=_open-campus] .cpt .button,
main[class*=__free-bus] .cpt .button {
  width: 480px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  color: #000;
  font-size: clamp(0.8125rem, 0.4577rem + 0.946vw, 1.75rem);
  border-radius: 50px;
  position: relative;
  margin: 0 auto;
  box-shadow: 0 6px 10px 5px rgb(247 199 172 / 20%);
  transition: opacity .3s ease;
}
main[class*=_open-campus] .cpt .text-slider,
main[class*=__free-bus] .cpt .text-slider {
  width: 100%;
  height: -moz-fit-content;
  height: fit-content;
  position: absolute;
  inset: 0;
  margin: auto;
  z-index: -1;
  display: flex;
  white-space: nowrap;
  gap: 6.4rem;
  will-change: transform;
  animation: loopSlider__text 20s linear 0s infinite forwards;
}
main[class*=_open-campus] .cpt .text-slider span,
main[class*=__free-bus] .cpt .text-slider span {
  min-width: 1076px;
  font-size: 10rem;
  font-weight: bold;
  color: #ffc27d;
}
@media only screen and (max-width: 769px) {
  main[class*=_open-campus] .cpt .text-slider,
  main[class*=__free-bus] .cpt .text-slider {
    animation: loopSlider__text_sp 30s linear 0s infinite forwards;
    gap: 3.2rem;
  }
  main[class*=_open-campus] .cpt .text-slider span,
  main[class*=__free-bus] .cpt .text-slider span {
    min-width: 542px;
    font-size: 5rem;
  }
  main[class*=_open-campus] .cpt .button-wrapper,
  main[class*=__free-bus] .cpt .button-wrapper {
    padding-top: 1.2rem;
    padding-bottom: 1.2rem;
  }
  main[class*=_open-campus] .cpt .button,
  main[class*=__free-bus] .cpt .button {
    width: 280px;
    height: 52px;
  }
}
@keyframes loopSlider__text {
  to {
    transform: translateX(-3420px);
  }
}
@keyframes loopSlider__text_sp {
  to {
    transform: translateX(-1722px);
  }
}



/* 交通費補助 */
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
main[class*=_t-expenses] {
  overflow: hidden;
}
main[class*=_t-expenses] img { width: 100%;}
main[class*=_t-expenses] .contents__block {
  margin: 0 auto;
  width: calc(100% - (100vw / (1366 / 220)));
  max-width: 940px;
}
main[class*=_t-expenses] .--bg-accent01 {
  background-color: #fffbc7;}
main[class*=_t-expenses] .--bg-accent02 {
  background-color: #d5ead8;}
main[class*=_t-expenses] .--bg-accent03 {
  background-color: #d3edfb;}
main[class*=_t-expenses] .--bg-accent04 {
  background-color: #fadce9;}

main[class*=_t-expenses] .contents__block.--mw-full {
    width: 100%;
    max-width: inherit;
    padding-bottom: 5rem;
    margin: 0 auto;
}
main[class*=_t-expenses] .post-pickup {
  overflow: hidden;
}
main[class*=_t-expenses] .post-pickup__list-item {
  display: block;
  max-width: 590px;
  width: 100% !important;
}
main[class*=_t-expenses] .post-pickup__list-item a {
  height: 100%;
  min-height: inherit;
  max-height: inherit;
}
main[class*=_t-expenses] .post-pickup__list-item.no-slide {
  margin: auto;
  width: 80% !important
}

main[class*=_t-expenses] .sec00 .outline {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2em;
}
main[class*=_t-expenses] .outline dt {
  font-size: clamp(1rem, 0.5743rem + 1.1352vw, 2.125rem);
  font-weight: 500;
  text-align: center;
  background-color: #fabe00;
  color: #5e564d;
  padding: 0.25em 0;
  margin-bottom: 1em;
}
main[class*=_t-expenses] .outline dd {
  font-size: clamp(0.84rem, 0.52rem + 0.54vw, 1.375rem);
  line-height: 1.75;
}
main[class*=_t-expenses] .outline dd small {
  font-size: 80%;
}
main[class*=_t-expenses] .outline dd.t-center {
  text-align: center;
}
main[class*=_t-expenses] .outline dd > span {
  display: block;
  font-size: 0.9em;
  margin-top: 1em;
}

main[class*=_t-expenses] .sec01 {
  background-color: #eddfcd;
}
main[class*=_t-expenses] .sec01 .t-expenses__list > *:not(:last-child) {
  padding-bottom: 2.4rem;
}
main[class*=_t-expenses] .sec01 .t-expenses__list .text {
  text-align: center;
}
main[class*=_t-expenses] .sec01 .t-expenses__list .text p {
  color: #000;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0.5em auto;
  padding: 0 0.25em;
  background-color: #FFF;
  font-size: clamp(0.75rem, 0.4425rem + 0.8199vw, 1.5625rem);
  line-height: 1.5;
}
main[class*=_t-expenses] .sec01 .t-expenses__list .text p > span {
  display: inline-block;
}

main[class*=_t-expenses] .sec01 .t-expenses__list .t-expenses-flex {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 2rem;
}
main[class*=_t-expenses] .sec01 .t-expenses__list .t-expenses-flex.start {
  gap: 1.5rem;
}
main[class*=_t-expenses] .headline .hl-img { width: 100%;}
main[class*=_t-expenses] .sec01 .t-expenses__list .img {
  text-align: center;
}
main[class*=_t-expenses] .sec01 .t-expenses__list .img img { width: 100%;}
main[class*=_t-expenses] .sec01 .t-expenses__list table {
  border-collapse: collapse;
  border: 1px solid #727171;
  border-spacing: 0;
  width: 100%;
}
main[class*=_t-expenses] .sec01 .t-expenses__list table th {
  border: 1px solid #727171;
  background-color: #9c9b99;
  font-weight: 700;
  font-size: clamp(1rem, 0.9527rem + 0.1261vw, 1.125rem);
  padding: 0.5em;
}
main[class*=_t-expenses] .sec01 .t-expenses__list table td {
  border: 1px solid #727171;
  padding: 0.5em;
  font-size: clamp(0.875rem, 0.8277rem + 0.1261vw, 1rem);
  font-weight: 500;
  line-height: 1.5;
}
main[class*=_t-expenses] .sec01 .t-expenses__list table th {
  text-align: center;
}
main[class*=_t-expenses] .sec01 .t-expenses__list table thead th {
  color: #231815;
  background-color: #FFF;
}
main[class*=_t-expenses] .sec01 .t-expenses__list table tbody tr:not([class*="--bg"]) {
  background-color: #FFF;
}
main[class*=_t-expenses] .sec01 .t-expenses__list table tbody th {
  vertical-align: middle;
  color: #5e564d;
  background-color: transparent;
  width: 26%;
}
main[class*=_t-expenses] .sec01 .t-expenses__list table tbody td {
  vertical-align: middle;
  color: #5e564d;
}
main[class*=_t-expenses] .sec01 .t-expenses__list table tbody td .bold {
  font-size: clamp(0.875rem, 0.7331rem + 0.3784vw, 1.25rem);
  font-weight: 500;
  text-align: center;
  display: block;
}
main[class*=_t-expenses] .sec01 .t-expenses__list table tbody td .big {
  font-weight: bold;
  font-size: 150%;
}
main[class*=_t-expenses] .sec01 .t-expenses__list .attention {
  font-size: clamp(0.625rem, 0.5304rem + 0.2523vw, 0.875rem);
  color: #5e564d;
  margin-top: .55rem;
}
main[class*=_t-expenses] .sec02 {
  background: #fff;
}
main[class*=_t-expenses] .sec02 .step .headline h2 {
  font-size: clamp(1rem, 0.5743rem + 1.1352vw, 2.125rem);
  text-align: center;
  background-color: #fabe00;
  color: #5e564d;
  padding: 0.5em 0;
}
main[class*=_t-expenses] .sec02 .step__list {
  padding-top: 3.4rem;
}
main[class*=_t-expenses] .sec02 .step__list dl {
  position: relative;
  text-align: center;
}
main[class*=_t-expenses] .sec02 .step__list dl:not(:last-child)::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 28px 28px 0 28px;
  border-color: #e60012 transparent transparent transparent;
  margin: 2rem auto;
}
main[class*=_t-expenses] .sec02 .step__list dt {
  position: absolute;
  top: -28px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 100%;
  height: 60px;
}
main[class*=_t-expenses] .sec02 .step__list dt img {
  width: 100%;
  height: 100%;
}
main[class*=_t-expenses] .sec02 .step__list dd {
  font-size: clamp(0.9375rem, 0.5827rem + 0.946vw, 1.875rem);
  text-align: center;
  background-color: #fcee9f;
  color: #5e564d;
  padding: 2.4rem 0;
  line-height: 1.5;
  min-width: 630px;
}
main[class*=_t-expenses] .sec03 .bnr__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.6rem;
  max-width: 850px;
  margin: 3.2rem auto 0;
}
main[class*=_t-expenses] .sec03 .bnr__list a {
  display: block;
  transition: opacity 0.3s ease;
}

main[class*=_t-expenses] .sec04 {
  background: #fff;
  padding-block: 5rem;
}
main[class*=_t-expenses] .sec04 dt {
  color: #00A4EA;
  background: none;
  border-bottom: 2px solid #00A4EA;
  padding-bottom: 1em;
}
main[class*=_t-expenses] .sec04 li {
  list-style: none;
}
main[class*=_t-expenses] .sec04 li span {
  display: table-cell;
}
main[class*=_t-expenses] .sec04 dt small {
  font-size: 60%;
}

main[class*=_t-expenses] .button-wrapper {
  margin: 5em auto 0;
  max-width: 540px;
}
main[class*=_t-expenses] .button {
  display: block;
  background: linear-gradient(90deg, rgb(225, 122, 0) 0%, rgb(246, 171, 0) 100%);
  border-radius: 100vw;
  color: #fff;
  font-size: 1.5rem;
  font-weight: bold;
  padding: 1em 0;
  text-align: center;
}
main[class*=_t-expenses] .button span {
  display: inline-block;
  background: url(../img/oc/t-expenses/arrow_1.png) no-repeat right center;
  padding-right: 30px;
}
main[class*=_t-expenses] .button:hover {
  opacity: .8;
}
@media (hover: hover) and (pointer: fine) {
  main[class*=_t-expenses] .sec03 .bnr__list a:hover {
    opacity: 0.7;
  }
}
@media only screen and (max-width: 769px) {
  main[class*=_t-expenses] {
    margin-top: 50px;
  }
  main[class*=_t-expenses] .contents__block.--mw-full {
    padding-bottom: 2.5rem;
  }
  main[class*=_t-expenses] .contents__block {
    width: calc(100% - 2rem);
    max-width: inherit;
  }

  main[class*=_t-expenses] .sec00 .bnr {
    margin: 0 auto 2rem;
  }
  main[class*=_t-expenses] .sec00 .outline {
    grid-template-columns: 1fr;
  }

  main[class*=_t-expenses] .sec01 .t-expenses__list > *:not(:last-child) {
    padding-bottom: 1.4rem;
  }
  main[class*=_t-expenses] .sec01 .t-expenses__list .img {
    padding: 1rem 0;
  }
  main[class*=_t-expenses] .sec01 .t-expenses__list .t-expenses-flex {
    display: block;
  }
  main[class*=_t-expenses] .sec01 .t-expenses__list .t-expenses-flex.start > *:last-child {
    margin-top: 1.4rem;
  }

  main[class*=_t-expenses] .sec02 .step .headline h2 {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
  }
  main[class*=_t-expenses] .sec02 .step__list dt {
    height: 45px;
  }
  main[class*=_t-expenses] .sec02 .step__list dd {
    max-width: 630px;
    min-width: 100%;
    padding: 1.4rem 0;
  }

  main[class*=_t-expenses] .outline dd.t-center {
    text-align: left;
  }
  main[class*=_t-expenses] .sec03 .bnr__list {
    grid-template-columns: 1fr;
    gap: 1.4rem;
    margin: 0 auto;
  }

  main[class*=_t-expenses] .sec04 {
    padding-block: 2.5rem;
  }

  main[class*=_t-expenses] .button-wrapper {
    margin-top: 3em;
  }
  main[class*=_t-expenses] .button {
    font-size: .95rem;
  }
}



/* __30: 無料送迎バス */
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
main[class*=_free-bus] {
  background-color: #fff;
  background-image: none;
  color: #000;
}
main[class*=_free-bus] img { width: 100%;}
main[class*=_free-bus] .lead {
  text-align: center;
}
main[class*=_free-bus] .lead h3 {
  background-color: #e60012;
  color: #fff;
  font-size: clamp(1.25rem, 0.777rem + 1.2614vw, 2.5rem);
  margin-bottom: 1rem;
  padding: .75rem;
}
main[class*=_free-bus] .lead p {
  font-size: clamp(0.8125rem, 0.3158rem + 1.3244vw, 2.125rem);
  line-height: 2;
}
main[class*=_free-bus] .route {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  -moz-column-gap: 3.2rem;
  column-gap: 3.2rem;
  padding-top: 6.4rem;
}
main[class*=_free-bus] .route h2 {
  font-size: clamp(1.3rem, 0.9973rem + 0.8073vw, 2.1rem);
  text-align: center;
  color: #FFF;
  border-radius: 50px;
  padding: 0.25em 0;
  margin-bottom: 3.2rem;
}
main[class*=_free-bus] .route__list li {
  display: grid;
  grid-template-columns: 104px auto 104px;
  -moz-column-gap: 1.6rem;
       column-gap: 1.6rem;
}
main[class*=_free-bus] .route__list li:last-child span.label {
  color: #22ac38;
}
main[class*=_free-bus] .route__list li span {
  font-size: clamp(0.75rem, 0.3243rem + 1.1352vw, 1.875rem);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
}
main[class*=_free-bus] .route__list li .go {
  background-color: #bce2e9;
  grid-column: 1;
}
main[class*=_free-bus] .route__list li .end {
  background-color: #e0eecb;
  grid-column: 3;
}
main[class*=_free-bus] .route__list li .bottom {
  grid-column: 1;
}
main[class*=_free-bus] .route__list li .top {
  grid-column: 3;
}
main[class*=_free-bus] .route__list li:first-child {
  padding-bottom: 0.8rem;
  margin-bottom: 0.8rem;
}
main[class*=_free-bus] .route__list li:not(:first-child):not(:last-child) {
  padding-bottom: 0.8rem;
  margin-bottom: 0.8rem;
  border-bottom: 1px solid #e6e6e5;
}
main[class*=_free-bus] .route__list li:nth-child(2) span:last-child {
  color: #e72a25;
}
main[class*=_free-bus] .sec02 .bnr__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.6rem;
  max-width: 850px;
  margin: 0 auto;
}
main[class*=_free-bus] .sec02 .bnr__list a {
  display: block;
  transition: opacity 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {
  main[class*=_free-bus] .sec02 .bnr__list a:hover {
    opacity: 0.7;
  }
}
main[class*=_free-bus] .route__map__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.6rem;
}
@media only screen and (max-width: 769px) {
  main[class*=_free-bus] {
    margin-top: 50px;
  }
  main[class*=_free-bus] .route {
    display: block;
    padding-top: 3.2rem;
  }
  main[class*=_free-bus] .route h2 {
    margin-bottom: 1.6rem;
  }
  main[class*=_free-bus] .route__list li {
    grid-template-columns: 65px auto 65px;
    -moz-column-gap: 0.8rem;
         column-gap: 0.8rem;
  }
  main[class*=_free-bus] .route__map {
    padding-top: 3.4rem;
  }
  main[class*=_free-bus] .route__map__list {
    gap: 0.8rem;
  }
  main[class*=_free-bus] .sec02 .bnr__list {
    grid-template-columns: 1fr;
    gap: 1.4rem;
    margin: 0 auto;
  }
}


/* 交通費補助 */
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
main[class*=_wep] img {
  width: 100%;
}
main[class*=_wep] .contents__inner {
  max-width: 1200px;
  margin: auto;
}
main[class*=_wep] .content__title {
  background: #f2f2f2;
}
main[class*=_wep] .content__title .contents__inner {
  padding: 5rem 0;
}
main[class*=_wep] .content__merit {
  background: #98c3e3;
  margin: 0 auto;
  padding: 2rem;
}
main[class*=_wep] .content__merit h3 {
  max-width: 750px;
  margin: 0 auto;
}
main[class*=_wep] .content__merit h3:nth-of-type(2){
  margin: 3rem auto 1rem;
}
main[class*=_wep] .content__merit ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
main[class*=_wep] .sec01 {
  background: #b7da90;
}
main[class*=_wep] .sec01 .contents__inner {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 5rem;
}
main[class*=_wep] .sec01 h3 {
  max-width: 400px;
  margin: 0 auto 2rem;
}
main[class*=_wep] .sec01 .flex-box {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
main[class*=_wep] .sec01 .flex-box .box1 {
  position: relative;
}
main[class*=_wep] .sec01 .flex-box .box1 a {
  position: absolute;
  left: 4%;
  bottom: 15%;
  width: 40%;
  margin: auto;
}
main[class*=_wep] .sec02 {
  background: #efd09a;
}
main[class*=_wep] .sec02 .contents__inner {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 5rem 0 0;
}
main[class*=_wep] .sec02 h3 {
  max-width: 240px;
  margin: 0 auto 2rem;
}
main[class*=_wep] .sec03 {
  background: #f7931e;
}
main[class*=_wep] .sec03 figure {
  max-width: 700px;
  margin: auto;
}
main[class*=_wep] .sec03 a {
  display: block;
  max-width: 450px;
  margin: 3rem auto 0;
}
@media only screen and (max-width: 769px) {
  main[class*=_wep] .content__title .contents__inner {
    padding: 2rem 0;
  }
  main[class*=_wep] .content__merit {
    padding: 2rem 5%;
  }
  main[class*=_wep] .content__merit h3 {
    margin: 0 auto 1rem;
  }
  main[class*=_wep] .content__merit h3:nth-of-type(2){
    margin: 2rem auto 1rem;
  }
  main[class*=_wep] .content__merit ul {
    grid-template-columns: repeat(1, 1fr);
    gap: 1rem;
    margin: auto;
    width: 85%;
  }
  main[class*=_wep] .sec01 .contents__inner {
    margin-top: 0;
    padding: 2rem 5%;
  }
  main[class*=_wep] .sec01 h3 {
    margin-bottom: 1rem;
    width: 80%;
  }
  main[class*=_wep] .sec01 .flex-box {
    display: block;
    margin: auto;
    width: 85%;
  }
  main[class*=_wep] .sec01 .flex-box .box1 {
    width: 100%;
  }
  main[class*=_wep] .sec01 .flex-box .box2 {
    margin-top: 1rem;
    width: 100%;
  }
  main[class*=_wep] .sec01 .flex-box .box3 {
    margin-top: 1rem;
    width: 100%;
  }
  main[class*=_wep] .sec01 .flex-box .box1 a {
    left: 5%;
    bottom: 5%;
    width: 90%;
  }
  main[class*=_wep] .sec02 .contents__inner {
    margin: 0 auto;
    padding: 2rem 5%;
  }
  main[class*=_wep] .sec02 h3 {
    margin-bottom: 1rem;
    width: 55%;
  }
  main[class*=_wep] .sec02 .contents__inner .box {
    margin: 0 calc(50% - 50vw);
    width: 100vw;
  }
  main[class*=_wep] .sec03 .contents__inner {
    padding: 2rem 5%;
  }
  main[class*=_wep] .sec03 figure {
    width: 90%;
  }
  main[class*=_wep] .sec03 a {
    box-shadow: 3px 3px 0px #d2d1d1;
    margin: 1.5rem auto 0;
    width: 85%;
  }
}


/* YouTubeオープンキャンパス */
#youtubeOC {
  letter-spacing: 2px;
}
#youtubeOC .wrapper {
  max-width: 1100px;
  margin: auto;
  padding: 120px 0;
  position: relative;
}
#youtubeOC img {
  width: 100%;
}
#youtubeOC .button {
  background: #e67f12;
  border-radius: 40px;
  color: #fff;
  display: block;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  max-width: 650px;
  margin: 50px auto 0;
  padding: .75rem;
  position: relative;
}
#youtubeOC .button::after {
  content: "";
  position: absolute;
  right: 40px;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent transparent transparent #fff;
  border-width: 6px 0px 6px 12px;
}
#youtubeOC .button:hover {
  opacity: .7;
}
#youtubeOC .secttl {
  align-items: center;
  display: flex;
  gap: 25px;
  justify-content: center;
  text-align: center;
  position: relative;
}
#youtubeOC .secttl span {
  font-size: 40px;
  line-height: 1.3;
}
#youtubeOC .secttl span.line {
  width: 2px;
  height: 100px;
  line-height: 1.3;
  background: #e67f12;
  transform: rotate(-25deg);
}
#youtubeOC .secttl span.line:last-of-type{
  transform: rotate(25deg);
}
#youtubeOC .secttl span.bgline {
  background:linear-gradient(transparent 70%, #faec21 70%);
}

#youtubeOC .sec01 {
  background: #f3eddf;
}
#youtubeOC .sec01 ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 1rem;
  margin-top: 40px;
}
#youtubeOC .sec01 .photo {
  position: absolute;
  width: 115px;
  height: 298px;
  top: -8rem;
  right: 3rem;
}

#youtubeOC .sec02 ul {
  align-items: flex-end;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: .5rem 1.5rem;
  margin-top: 40px;
}
#youtubeOC .sec02 .photo {
  position: absolute;
  width: 100px;
  height: 290px;
  top: -1rem;
  left: 3rem;
}


#youtubeOC .sec03 {
  background-color: #ffdf9f;
  background-image: repeating-linear-gradient(-45deg,rgba(255, 255, 255, 1), rgba(255, 255, 255, 1) 5px,transparent 0, transparent 15px) !important;
}
#youtubeOC .sec03 .photo {
  position: absolute;
  width: 140px;
  height: 270px;
  top: -1rem;
  right: 3rem;
}
#youtubeOC .sec03 .photo1 {
  position: absolute;
  width: 162px;
  height: 375px;
  top: 62rem;
  left: -5rem;
}
#youtubeOC .sec03 .photo2 {
  position: absolute;
  width: 270px;
  height: 270px;
  top: 95rem;
  right: -10rem;
}
#youtubeOC .sec03 .photo3 {
  position: absolute;
  width: 162px;
  height: 375px;
  top: 120rem;
  right: -4rem;
}
#youtubeOC .sec03 .photo4 {
  position: absolute;
  width: 270px;
  height: 270px;
  top: 135rem;
  left: -13rem;
}
#youtubeOC .sec03 .photo5 {
  position: absolute;
  width: 148px;
  height: 370px;
  top: 175rem;
  left: -5rem;
}
#youtubeOC .sec03 .photo6 {
  position: absolute;
  width: 270px;
  height: 270px;
  top: 210rem;
  right: -13rem;
}
#youtubeOC .sec03 .photo7 {
  position: absolute;
  width: 148px;
  height: 396px;
  bottom: 96rem;
  right: -5rem;
}
#youtubeOC .sec03 .photo8 {
  position: absolute;
  width: 270px;
  height: 270px;
  bottom: 95rem;
  left: -14rem;
}
#youtubeOC .sec03 .photo9 {
  position: absolute;
  width: 148px;
  height: 388px;
  bottom: 50rem;
  left: -5rem;
}
#youtubeOC .sec03 .content {
  background: #fff;
  border-radius: 20px;
  box-sizing: border-box;
  margin-top: 50px;
  padding: 60px 80px;
}
#youtubeOC .sec03 .flow {
  background: #f2f2f2;
  box-shadow: none;
  border-radius: 20px;
  display: grid;
  grid-template-columns: 50px calc(100% - 270px) 200px;
  justify-content: space-between;
  margin-bottom: 60px;
  padding: 30px 50px;
  position: relative;
}
#youtubeOC .sec03 .flow::after {
  content: "";
  position: absolute;
  bottom: -40px;
  left: 0;
  right: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: #e67f12 transparent transparent transparent;
  border-width: 14px 14px 0px 14px;
}
#youtubeOC .sec03 .flow:nth-of-type(2)::after,
#youtubeOC .sec03 .flow:nth-of-type(6)::after {
  content: none;
}
#youtubeOC .sec03 .flow .num {
  background: #fff;
  border: 2px solid #e67f12;
  border-radius: 100px;
  color: #e67f12;
  width: 50px;
  height: 50px;
  position: relative;
  text-align: center;
}
#youtubeOC .sec03 .flow .num span {
  display: block;
  font-size: 30px;
  font-weight: 600;
  padding-top: 6px;
}
#youtubeOC .sec03 .flow .txt p {
  color: #e67f12;
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 1rem;
}
#youtubeOC .sec03 .flow .txt a {
  margin: auto 5rem;
  width: 220px;
}
#youtubeOC .sec03 .flow .txt ul {
  display: flex;
  gap: .5rem;
  width: 75%;
}
#youtubeOC .sec03 .flow .img {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  width: 200px;
}
#youtubeOC .sec03 .flow .img.movie {
  position: relative;
}
#youtubeOC .sec03 .flow .w100 {
  margin-top: 2em;
  grid-column: 1/4;
  text-align: center;
}
#youtubeOC .sec03 .flow .w100 p {
  font-size: 24px;
  font-weight: bold;
  margin: 1rem auto;
  padding-left: 2.5rem;
  text-align: center;
}
#youtubeOC .sec03 .flow .w100 img {
  width: 80%;
}
#youtubeOC .sec03 .ao {
  background: #faec21;
  border-radius: 20px;
  padding: 3rem 8rem;
}
  #youtubeOC .sec03 .ao .button {
    border: 2px solid #e67f12;
    background: #fff;
    color: #e67f12;
  }
  #youtubeOC .sec03 .ao .button::after {
    border-color: transparent transparent transparent #e67f12;
  }
#youtubeOC .sec03 .movie-box {
  margin-bottom: 60px;
}
#youtubeOC .sec03 .movie-box h3 {
  border-top: 1px solid #e67f12;
  border-bottom: 1px solid #e67f12;
  color: #e67f12;
  font-size: 32px;
  line-height: 1.2;
  padding: 15px 0 18px;
  text-align: center;
}
#youtubeOC .sec03 .movie-box h4 {
  background: #e67f12;
  color: #fff;
  font-size: 36px;
  line-height: 1.2;
  margin: 50px auto 30px;
  padding: 15px 50px 20px;
}
#youtubeOC .sec03 .movie-box h4 span {
  border-left: 6px solid #fff;
  display: block;
  padding-left: 15px;
}
#youtubeOC .sec03 .movie-box h5 {
  font-size: 28px;
  margin-bottom: 50px;
  position: relative;
  text-align: center;
}
#youtubeOC .sec03 .movie-box h5::before,
#youtubeOC .sec03 .movie-box h5::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 1px;
  height: 150%;
  background: #000;
}
#youtubeOC .sec03 .movie-box h5::before {
  margin-left: -1.5rem;
  transform: rotate(-20deg);
}
#youtubeOC .sec03 .movie-box h5::after {
  margin-left: 1rem;
  transform: rotate(20deg);
}
#youtubeOC .sec03 .movie-box h5 span {
  background:linear-gradient(transparent 60%, #ff6 60%);
}
#youtubeOC .sec03 .movie-box .grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2.5rem 2rem;
}
#youtubeOC .sec03 .movie-box .grid p {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: normal;
  margin-bottom: 10px;
  text-align: center;
}
#youtubeOC .sec03 .movie-box .grid p.btn {
  background: #e67f12;
  border-radius: 40px;
  color: #fff;
  display: block;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  max-width: 150px;
  margin: 15px auto 0;
  padding: .75rem;
  position: relative;
}
#youtubeOC .sec03 .movie-box .grid p.btn::after {
  content: "";
  position: absolute;
  right: 15px;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent transparent transparent #fff;
  border-width: 3px 0px 3px 6px;
}
#youtubeOC .sec03 .movie-box .grid p.btn.no-link {
  background-color: #777;
}
#youtubeOC .sec03 .movie-box .grid p.btn.no-link::after {
  content: none;
}
#youtubeOC .sec03 .movie-box .grid .movie iframe {
  width: 100%;
  height: 200px;
}

#youtubeOC .sec04 {
  background: url(../img/libs/bg01.png) repeat center/10px 10px;
}
#youtubeOC .sec04 .photo {
  position: absolute;
  width: 135px;
  height: 290px;
  top: 3rem;
  right: 2rem;
}
#youtubeOC .sec04 .subtext {
  max-width: 490px;
  margin: 3rem auto;
}
#youtubeOC .sec04 .grid-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
#youtubeOC .sec04 .grid-box .weekday {
  background: #d2ebef;
}
#youtubeOC .sec04 .grid-box > div {
  background: #ffdf9f;
  border-radius: 20px;
  box-sizing: border-box;
  padding: 20px;
}
#youtubeOC .sec04 .grid-box > div ul {
  margin: 10px 0;
}
#youtubeOC .sec04 .grid-box > div ul li {
  font-size: 18px;
  letter-spacing: normal;
  line-height: 1.75;
}
#youtubeOC .sec04 .grid-box > div .button-flex {
  display: flex;
  gap: .5rem;
  justify-content: space-between;
}
@media only screen and (max-width: 769px) {
  #youtubeOC .wrapper {
    padding: 40px 0;
    width: 90%;
  }
  #youtubeOC .secttl span {
    font-size: 22px;
  }
  #youtubeOC .secttl span.line {
    transform: rotate(-15deg);
  }
  #youtubeOC .secttl span.line:last-of-type {
    transform: rotate(15deg);
  }
  #youtubeOC .button {
    font-size: 14px;
    margin: 25px auto 0;
    width: 320px;
  }
  #youtubeOC .button::after {
    right: 20px;
    border-width: 6px 0px 6px 9px;
  }

  #youtubeOC .kv .wrapper {
    padding: 0 0 40px;
    width: 100%;
  }

  #youtubeOC .sec01 .photo {
    display: none;
  }
  #youtubeOC .sec01 ul {
    grid-template-columns: 1fr 1fr;
    margin-top: 20px;
  }

  #youtubeOC .sec02 .photo {
    display: none;
  }
  #youtubeOC .sec02 .secttl {
    gap: 10px;
    letter-spacing: 1px;
  }
  #youtubeOC .sec02 ul {
    grid-template-columns: 1fr 1fr;
    gap: .5rem 1rem;
    margin-top: 20px;
  }

  #youtubeOC .sec03 .photo {
    display: none;
  }
  #youtubeOC .sec03 .photo12,
  #youtubeOC .sec03 .photo34,
  #youtubeOC .sec03 .photo56,
  #youtubeOC .sec03 .photo78,
  #youtubeOC .sec03 .photo1,
  #youtubeOC .sec03 .photo2,
  #youtubeOC .sec03 .photo3,
  #youtubeOC .sec03 .photo4,
  #youtubeOC .sec03 .photo5,
  #youtubeOC .sec03 .photo6,
  #youtubeOC .sec03 .photo7,
  #youtubeOC .sec03 .photo8,
  #youtubeOC .sec03 .photo9 {
    display: none
  }
  #youtubeOC .sec03 .content {
    margin-top: 25px;
    padding: 5%;
  }
  #youtubeOC .sec03 .flow {
    grid-template-columns: 40px calc(100% - 50px);
    padding: 5%;
  }
  #youtubeOC .sec03 .flow .num {
    width: 40px;
    height: 40px;
  }
  #youtubeOC .sec03 .flow .num span {
    font-size: 24px;
    padding: 4px 0 0 3px;
  }
  #youtubeOC .sec03 .flow .txt p {
    font-size: 18px;
    margin-bottom: 5px;
  }
  #youtubeOC .sec03 .flow .txt a {
    margin: 0;
  }
  #youtubeOC .sec03 .flow .txt ul {
    flex-wrap: wrap;
    gap: 0;
    justify-content: center;
    width: 100%;
  }
  #youtubeOC .sec03 .flow .txt ul li {
    margin: 0 5px;
    width: calc(100% / 2 - 10px);
  }
  #youtubeOC .sec03 .flow .img {
    grid-column: 1/4;
    justify-content: center;
    margin-top: 10px;
    width: 100%;
  }
  #youtubeOC .sec03 .flow .img img {
    width: auto;
    height: 88px;
  }
  #youtubeOC .sec03 .flow .img.movie img {
    width: 100%;
    height: auto;
  }
  #youtubeOC .sec03 .flow .w100 {
    margin-top: 0;
    text-align: center;
  }
  #youtubeOC .sec03 .flow .w100 p {
    font-size: 18px;
    line-height: 1.5;
    margin: 2rem auto;
    padding-left: 0;
  }
  #youtubeOC .sec03 .ao {
    border-radius: 10px;
    padding: 2rem 5%;
  }
    #youtubeOC .sec03 .ao .button {
      max-width: 320px;
      width: 100%;
    }
  #youtubeOC .sec03 .movie-box h3 {
    font-size: 18px;
  }
  #youtubeOC .sec03 .movie-box h4 {
    font-size: 18px;
    margin: 30px auto 15px;
    padding: 10px 15px 10px;
  }
  #youtubeOC .sec03 .movie-box h4 span {
    border-width: 3px;
    padding-left: 10px;
  }
  #youtubeOC .sec03 .movie-box h5 {
    font-size: 22px;
    line-height: 1.5;
    margin-bottom: 30px;
  }
  #youtubeOC .sec03 .movie-box h5::before,
  #youtubeOC .sec03 .movie-box h5::after {
    top: inherit;
    height: 65%;
  }
  #youtubeOC .sec03 .movie-box h5::before {
    left: .5rem;
    margin-left: 0;
  }
  #youtubeOC .sec03 .movie-box h5::after {
    right: .5rem;
    margin-left: 0;
  }
  #youtubeOC .sec03 .movie-box .grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  #youtubeOC .sec03 .movie-box .grid p {
    font-size: 18px;
    text-align: left;
  }

  #youtubeOC .sec04 .photo {
    display: none;
  }
  #youtubeOC .sec04 .secttl {
    gap: 20px;
    letter-spacing: 1px;
  }
  #youtubeOC .sec04 .subtext {
    margin: 1.8rem auto 1.5rem;
  }
  #youtubeOC .sec04 .grid-box {
    grid-template-columns: 1fr;
  }
  #youtubeOC .sec04 .grid-box > div ul li {
    font-size: 14px;
  }
}


/* 個別進学相談会 */
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
main[class*=weekday] img {
  width: 100%;
}
main[class*=weekday] .inner {
  max-width: 1120px;
  margin: auto;
}
main[class*=weekday] .visual ul {
  display: flex;
  justify-content: center;
  max-width: 500px;
  margin: auto;
  padding: 3em 0;
  gap: 1em;
}

main[class*=weekday] h3 {
  background: #f8ec00;
  border-radius: 100vw;
  color: #e27600;
  font-size: clamp(20px, 35/1366* 100vw, 35px);
  font-weight: bold;
  margin-bottom: 1em;
  padding: .5em 1em .55em;
  text-align: center;
}
main[class*=weekday] section .inner {
  padding: 3em 0;
}
main[class*=weekday] section .container {
  background: #fff;
  padding-bottom: 3em;
}
main[class*=weekday] section .button a {
  display: block;
  max-width: 350px;
  margin: 2em auto 0;
}

main[class*=weekday] section .lead {
  display: grid;
  gap: 2em;
  padding: 3em;
}
main[class*=weekday] section .lead .time {
  max-width: 390px;
  margin: auto;}
main[class*=weekday] section .lead figure {
  max-width: 790px;
  margin: auto;}
main[class*=weekday] section .lead p {
  font-size: clamp(16px, 25/1366* 100vw, 25px);
  font-weight: 600;
  line-height: 1.7;
  text-align: center;}
main[class*=weekday] section .merit {
  background: #fdf3c8;
  padding: 3em;
}
main[class*=weekday] section .merit h4 {
  max-width: 135px;
  margin: 0 auto 2em;
}
main[class*=weekday] section .merit .grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1em;
}
main[class*=weekday] section .merit dl {
  background: #fff;
  border-radius: 15px;
  display: flex;
  align-items: center;
  gap: 1em;
  justify-content: center;
  padding: 1.5em;}
main[class*=weekday] section .merit dl dt {
  width: 30px;
  aspect-ratio: 30/22;}
main[class*=weekday] section .merit dl dd {
  font-size: clamp(14px, 18/1366* 100vw, 18px);
  font-weight: 600;
  line-height: 1.4;}
main[class*=weekday] section .present {
  padding: 3em;
}
main[class*=weekday] section .present h4 {
  max-width: 105px;
  margin: 0 auto 2em;}
main[class*=weekday] section .present .grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1em;}
main[class*=weekday] section .present a:hover {
  opacity: .5;}

main[class*=weekday] section .flow {
  box-shadow: none;
  padding: 3em;
}
main[class*=weekday] section .flow h4 {
  background: #f6b42d;
  color: #fff;
  font-size: clamp(18px, 25/1366* 100vw, 25px);
  font-weight: 600;
  margin-bottom: 1em;
  padding: .7em 1em;
  text-align: center;
  position: relative;
}
main[class*=weekday] section .flow h4::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -20px;
  margin: auto;
  width: 30px;
  height: 20px;
  background-color: #f6b42d;
  clip-path: polygon(50% 20px, 0% 0%, 30px 0%);
}
main[class*=weekday] section .flow .block {
  align-items: center;
  border-bottom: 5px solid #f6b42d;
  display: grid;
  grid-template-columns: 50px 18em auto;
  gap: 1em;
  padding: 2em 1em;
  position: relative;
}
main[class*=weekday] section .flow .block::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -20px;
  margin: auto;
  width: 30px;
  height: 20px;
  background-color: #f6b42d;
  clip-path: polygon(50% 20px, 0% 0%, 30px 0%);
}
main[class*=weekday] section .flow .block:last-of-type {
  border-bottom: none;
}
main[class*=weekday] section .flow .block:last-of-type::after {
  content: none;
}
main[class*=weekday] section .flow .head {
  font-size: clamp(16px, 22/1366* 100vw, 22px);
  font-weight: 600;
}
main[class*=weekday] section .flow .head span {
  background: linear-gradient(90deg, rgba(225,123,0,1) 0%, rgba(245,170,0,1) 100%);
  color: #fff;
  padding: 0.2em 1em;
  text-align: center;
}
main[class*=weekday] section .flow .text {
  font-size: clamp(14px, 18/1366* 100vw, 18px);
  font-weight: 600;
  line-height: 1.4;
}
main[class*=weekday] section .flow .zoom {
  background: #f6b42d;
  margin-top: 1em;
  padding: 1em 18%;
}
main[class*=weekday] section .flow .zoom p {
  margin-bottom: .5em;
  text-align: center;}
main[class*=weekday] section .flow .zoom ul {
  display: flex;
  gap: .5em;
  justify-content: center;}
main[class*=weekday] section .present-bnr {
  background: #ffec21;
  border-radius: 15px;
  max-width: 500px;
  margin: auto;
  padding: 1em;
  text-align: center;
}
main[class*=weekday] section .present-bnr img {
  margin-bottom: .5em;
  width: 65%;
}
main[class*=weekday] section .present-bnr p {
  color: #ff0000;
  font-size: clamp(14px, 22/1366* 100vw, 22px);
  font-weight: 600;
  line-height: 1.5;
}
main[class*=weekday] section .tel {
  border-top: 5px solid #f6b42d;
  border-bottom: 5px solid #f6b42d;
  margin: 3em 3em 0;
  padding: 2em;
  display: grid;
  gap: 1em;
  justify-content: center;
}
main[class*=weekday] section .tel p {
  font-size: clamp(14px, 18/1366* 100vw, 18px);
  font-weight: 600;
  line-height: 1.4;
  text-align: center;}
main[class*=weekday] section .tel a {
  color: #e27600;
  font-size: clamp(25px, 37/1366* 100vw, 37px);
  font-weight: 700;
  background: url(../img/oc/weekday/icon-tel.png) no-repeat left center/contain;
  padding: 10px 0 10px 1.7em;}
main[class*=weekday] section .notes {
  margin: 2em 3em 0;
}
main[class*=weekday] section .notes li {
  font-size: clamp(14px, 18/1366* 100vw, 18px);
  font-weight: 600;
  line-height: 1.4;
  padding-left: 1em;
  text-indent: -1em;
}
main[class*=weekday] section .banner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2em;
  padding: 5em 3em 0;
}

main[class*=weekday] .offline {
  background: #e27600;
}
main[class*=weekday] .online {
  background: #f8ec00;
}
main[class*=weekday] .online h3 {
  background: #e27600;
  color: #f8ec00;
}
@media only screen and (max-width: 769px) {
  main[class*=weekday] .visual ul {
    gap: .5em;
    padding: 1.5em 0;
    width: calc(100% - 2em);
  }

  main[class*=weekday] section .inner {
    padding: 2em 0;
    width: calc(100% - 3em);
  }
  main[class*=weekday] section .container {
    overflow: hidden;
    padding-bottom: 2em;
  }
  main[class*=weekday] section .button a {
    margin-top: 1.5em;
    width: calc(100% - 2em);
  }

  main[class*=weekday] section .lead {
    padding: 1.5em 1em;
  }

  main[class*=weekday] section .merit {
    padding: 1.5em 1em;
  }
  main[class*=weekday] section .merit h4 {
    width: 115px;
    margin-bottom: 1em;}
  main[class*=weekday] section .merit .grid {
    gap: .5em;
    grid-template-columns: auto;
  }
  main[class*=weekday] section .merit dl dt {
    width: 40px;}
  main[class*=weekday] section .merit dl dd {
    width: calc(100% - 40px - .5em);}
  main[class*=weekday] section .present {
    padding: 1.5em 1em;
  }
  main[class*=weekday] section .present h4 {
    max-width: 90px;
    margin-bottom: 1em;}
  main[class*=weekday] section .present .grid {
    grid-template-columns: auto;}
  main[class*=weekday] section .flow {
    padding: 3em 0 1.5em;
  }
  main[class*=weekday] section .flow h4 {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
    padding: 1.7em 0;}
  main[class*=weekday] section .flow .block {
    grid-template-columns: 35px auto;
    gap: 1em .5em;}
  main[class*=weekday] section .flow .text {
    grid-column: 3/1;}
  main[class*=weekday] section .present-bnr {
    box-sizing: border-box;
    padding: .5em;
    width: calc(100% - 2em);
  }
  main[class*=weekday] section .present-bnr img {
    width: 80%;}
  main[class*=weekday] section .tel {
    gap: .5em;
    margin: 1.5em auto 0;
    padding: 1em 0;
    width: 100%;
  }
  main[class*=weekday] section .tel a {
    padding: 5px 0 5px 1.5em;}
  main[class*=weekday] section .notes {
    margin: 1em 1em 0;
  }
  main[class*=weekday] section .notes li {
    line-height: 1.5;}
  main[class*=weekday] section .flow .zoom {
    padding: 1em;
  }
  main[class*=weekday] section .banner {
    grid-template-columns: auto;
    gap: 1.5em;
    padding: 3em 1em 0;
  }
}