@charset "UTF-8";


/* Grid Layout  */
.grid {
	max-width: 960px;
	margin: 0 auto 3em;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	/* flex-start flex-end center space-between space-around */
	/*align-items: ; */
	/* flex-start flex-end center */
	gap: 2%;
}

.grid .item {
	text-align: center;
	margin: 0;
}

.grid .item:after {
	content: "";
	display: block;
	clear: both;
}

.grid img {
	margin-top: 0;
}

.item-main {
	margin-top: 0;
}

.grid .img-wrap {
	line-height: 0;
	/* margin: 20px 0 0 0; */
}

.grid .img-wrap+.item-body {
	margin: 0;
}

.grid .img-wrap+.item-body .item-txt {
	margin: 0;
	padding: 10px 0;
}

.grid .item-txt {
	line-height: 1.5;
	color: #fff;
	font-weight: bold;
	font-size: 1.2rem;
	background: var(--accent-col);
	text-align: center;
	align-items: center;
}

.title-txt {
	line-height: 1.5;
	color: #222222;
	font-weight: bold;
	font-size: 1.2rem;
	text-align: center;
	padding: 0.2em;
}


.grid .item-txt2 {
	line-height: 1.5;
	color: #222222;
	font-weight: bold;
	font-size: 0.9rem;
	text-align: center;
	padding: 0.2em;
}






.row2-1 .item {
	width: 49%;
}

.row2-2 .item {
	width: 49%;
}

.row3-3 .item {
	width: 32.333%;
}

.row3-2 .item {
	width: 32.333%;
}

.row3-1 .item {
	width: 32.333%;
}

.row4-3 .item {
	width: 24%;
}

.row4-2 .item {
	width: 24%;
}

.row4-1 .item {
	width: 24%;
}

.row5-2 .item {
	width: 19%;
}

.row5-1 .item {
	width: 19%;
}

.row6-6 .item {
	width: 16.666%;
	margin: 0;
}

.row6-3 .item {
	width: 16%;
	margin: 0;
}


@media screen and (max-width: 768px) {
	.row2-1 .item {
		width: auto;
	}

	.row2-2 .item {
		width: 85%;
	}

	.row3-3 .item {
		width: 32.333%;
	}

	.row3-2 .item {
		width: 49%;
	}

	.row3-1 .item {
		width: auto;
	}

	.row4-3 .item {
		width: 32%;
	}

	.row4-2 .item {
		width: 49%;
	}

	.row4-1 .item {
		width: auto;
	}

	.row5-2 .item {
		width: 49%;
	}

	.row5-1 .item {
		width: auto;
	}

	.row6-6 .item {
		width: 16.666%;
	}

	.row6-3 .item {
		width: 32%;
	}
}

/* ******************************************************************** */

/* 共通 --------------------------------------------------------------- */
body {
	font-family: "Arial", "Yu Gothic", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}

.txtCenter {
	text-align: center !important;
}

.fbold {
	font-weight: bold;
}

.mt1 {
	margin-top: 1em;
}

.mt0 {
	margin-top: 0 !important;
}

.mb0 {
	margin-bottom: 0 !important;
}

.wrap {
	position: relative;
	text-align: center;
	background: #FFFFFF;
}

.annot {
	display: inline-block;
	margin-top: 1em;
	text-indent: -1em;
	padding-left: 1em;
	font-size: 0.9rem;
	text-align: left;
}

.container1 a {
	text-decoration: underline;
	color: var(--accent-txt-col);
	font-weight: bold;
}

.container1 a:hover {
	opacity: 0.7;
}

.btn__wrap {
	display: flex;
	justify-content: center;
	gap: 3em;
	margin-top: 2em;
}

.btn {
	display: block;
	width: 60%;
	margin: 20px auto;
	background: #ffd800;
	font-weight: bold;
	font-size: 1.3rem;
	text-align: center;
	border: solid 2px #ffd800;
	border-radius: 9999px;
	transition: 0.1s all;
}

.btn:hover {
	background: #FDE975;
	border: solid 2px #ffd800;
}


.btn a {
	/* position: relative; */
	display: inline-block;
	width: 100%;
	padding: 1em;
	color: #000;
	text-decoration: none;
	border-radius: 9999px;
}


img {
	max-width: 100%;
}

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

.fadein {
	/* 最初は非表示 */
	opacity: 0;
	visibility: hidden;
	transform: translateY(30px);
	transition: opacity 1s, visibility 1s, transform 1s;
}

.is-fadein {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.fadeLeft {
	/* 最初は非表示 */
	opacity: 0;
	visibility: hidden;
	transform: translateX(-30px);
	transition: opacity 1s, visibility 1s, transform 1s;
}

.is-fadeLeft {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
}

.fadeRight {
	/* 最初は非表示 */
	opacity: 0;
	visibility: hidden;
	transform: translateX(30px);
	transition: opacity 1s, visibility 1s, transform 1s;
}

.is-fadeRight {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
}

:root {
	--main-col: #1b3f57;
	--accent-col: #0b7497;
	--accent-txt-col: #0b7497;
}

#container {
	font-weight: 500;
	font-size: 1.2rem;
}

#container h1,
#container h2 {
	font-weight: bold;
	text-align: center;
}

h2.title {
  padding: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.8rem;
  color: #ffffff;
}

h2.title.online {
  background: #eb4956;
}
h2.title.online2 {
  background: #ffe2e4;
  color: #1e1d1d;
}

h2.title.weekly {
  background: #1ca2d2;
}

h2.title.weekly2 {
  background: #daf5ff;
  color: #1e1d1d;
}

.catch {
	font-family: "Noto Sans cjk JP", "Yu Gothic", sans-serif;
	font-weight: bold;
	text-align: center;
	margin: 0 0 1em;
}

img.mt1 {
	max-width: 760px;
	width: 100%;
}

h3.catch {
	letter-spacing: 3px;
	font-size: clamp(1rem, 1.4rem, 2rem);
}

h4.catch {
	letter-spacing: 2px;
	font-size: clamp(1rem, 1.3rem, 2rem);
	margin-bottom: 1em;
}

.cont__wrap {
	max-width: 1080px;
	margin: auto;
	padding: 0;
}

.marker {
	font-size: 1.2em;
	font-weight: bold;
}
.marker.online {
	background: linear-gradient(transparent 60%, #ffb5bbff 40%);
}
.marker.weekly {
	background: linear-gradient(transparent 60%, #b5e8fa 40%);
}


.dc {
	display: initial !important;
}

.icon_new,
.icon_re {
	display: inline-block;
	padding: 0 0.3em;
	margin-right: 0.5em;
	background: #fff;
	font-weight: bold;
}

.icon_new {
	color: var(--accent-col);
}

.icon_re {
	color: #333;
}

@media screen and (min-width: 768px) {
	.btn__wrap .btn {
		margin: 0;
	}
}

@media screen and (max-width: 767px) {
	.annot {
		font-size: 0.8rem;
	}

	#container {
		font-size: 1rem;
	}

	.btn__wrap {
		flex-direction: column;
		gap: 1em;
	}

	.btn {
		font-size: 1em;
		margin: 1em auto 1em;
		width: 80%;
	}

	/* .btn a {
		width:100%;
	} */
	/* .cont__wrap {
		padding:2em 0.8em;
	} */
	#container .disc {
		text-align: left;
		margin-bottom: 1.5rem;
	}

	h2.title {
		/* height:55px; */
		font-size: 1.5rem;
		color: #1e1d1d;
	}

	h3.catch {
		font-size: 0.9rem;
	}

	h4.catch {
		font-size: 1.2rem;
	}

	.marker {
		font-size: 1.2em;
	}
}

/* --------------------------------------------------------------- */

/* KV ---------------------------------------*/
.kv__img {
	text-align: center;
}

@media screen and (max-width:767px) {
	.kv {
		height: auto;
	}
}

/* ----------------------------------------- */





@media screen and (max-width: 767px) {
	.nav__area {
		height: auto;
		background: initial;
		gap: 0;
	}

	.nav__area .wrap {
		width: 100%;
	}

	.nav__area.flex {
		flex-direction: column;
	}

	.cp__nav,
	.dc__nav {
		width: 100%;
		padding: 0;
		gap: 0;
	}

	.cp__nav a,
	.dc__nav a {
		display: flex;
		align-items: center;
	}

	.cp__nav li,
	.dc__nav li {
		width: 50%;
		height: 3em;
		padding: 0.5em;
		display: flex;
		align-items: center;
		line-height: 1.1;
		border: solid 1px var(--main-col);
	}

	.here,
	.there,
	.dc .here {
		background: var(--accent-col);
	}

	.here a,
	.there a,
	.here a:before,
	.there a:before,
	.dc .here li a::before,
	.dc .there li a::before {
		color: var(--main-col);
	}

	.here li a::before,
	.there li a::before {
		padding-right: 8px;
		font-size: 1rem;
	}

	.there li a::before {
		font-size: 0.9rem;
	}
}


/* ----------------------------------------- */


/* regist ---------------------------------- */
#regist,
#present {
	background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 206, 227, 1) 100%);
}

.emailForm__ttl {
	display: none
}

.simpleForm__wrap .btn__wrap {
	margin: 0 auto !important;
}

.disc {
	text-align: center;
	padding: 1em 0;
}

#regist .disc {
	font-size: 1rem;
	background: #f8f7ea;
}

.disc .what {
	width: 70%;
	padding: 2em;
	margin: 0.5em auto 3em;
	text-align: left;
	font-size: 1.3em;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 20px;
	line-height: 2.3em;
}

.disc .what .what__tit {
	font-weight: bold;
	text-align: center;
	font-size: 1.2em;
	border-bottom: 3px solid;
	margin-bottom: 1em;
	padding-bottom: 0.5em;
}

.formExp {
	font-size: 0.9em;
}

#regist .annot {
	font-size: 0.7rem;
}

.wrap h3.catch {
	margin-top: 2em;
}

.wrap .sb {
	position: absolute;
	width: 150px;
	bottom: 80%;
	left: 28%;
}

.wrap .chara03 {
	position: absolute;
	width: 23%;
	right: 0%;
	top: -118%;
}

@media screen and (min-width: 768px) {
	.wrap .present-set {
		position: absolute;
		width: 30%;
		left: -11%;
		top: -45%;
	}
}

@media screen and (max-width: 767px) {
	.simpleForm__wrap {
		margin: 1em 0 2em 0;
	}

	#regist .disc {
		font-size: 0.9rem;
	}

	.disc .what {
		width: 90%;
	}

	.disc .what .what__tit {
		font-weight: bold;
		text-align: center;
		font-size: 1.3em;
		border-bottom: 3px solid;
		margin-bottom: 1em;
		padding-bottom: 0.5em;
	}

	.wrap h3.catch {
		font-size: 1rem;
		margin-top: 1.5em;
	}

	.wrap .sb {
		width: 28vw;
		top: -11vw;
		left: 0;
	}

	.wrap .present-set {
		width: 90%;
		display: block;
		margin: 0 auto;
	}
}

/* ----------------------------------------- */

/* collection ---------------------------------- */
#collection {
	background: #FFFFFF;
}

.bg-img {
	/* background: #FCF9E8 url(../images/bg_pc.png) repeat; */
	background: #f0f3f5;
	background-attachment: fixed;
	padding: 20px 5px 20px 5px;
}

h1.cont__tit {
	background: var(--accent-col);
	padding: 0.5em 0;
	color: #fff;
	font-size: 2rem;
}

.cont__tit span {
	display: inline-block;
	background: #FFF;
	color: var(--accent-col);
	font-size: clamp(1rem, 1.3vw, 2rem);
	padding: 0em 1em;
	margin-top: 0.5em;
	border-radius: 999px;
}

#collection .item {
	margin-bottom: 1em;
}

#collection .cont__inner,
#snsCp .cont__inner,
#dContents .cont__inner {
	background: rgba(255, 255, 255, 0.8);
	/* width:1080px; */
	text-align: center;
	/* margin: 3em 0; */
	padding: 0 0 1em;
	margin-bottom: 1em;
}

.container {
	padding: 1em;
	min-width: 800px;
	text-align: center;
}

.grid .item {
	position: relative;
}

#collection .grid.row2-2 {
	margin: 30px auto;
}

#collection .annot02 {
	display: block;
	text-align: right;
	margin: 0.5rem 0 2rem;
	font-size: 0.7rem;
}

.subTitle {
	font-size: 1.0em;
	line-height: 1.6rem;
}

.courseTitle {
	font-weight: bold;
	font-size: 1.0em;
	line-height: 1.6rem;
}

.what .btn a {
	padding: 0.5em 0;
}

@media screen and (max-width: 767px) {
	h1.cont__tit {
		font-size: 1.3rem;
	}

	.container1 .btn__wrap {
		margin: 1em 0 0;
	}

	.container {
		min-width: initial;
		max-width: 100%;
		padding: 1.0em 0.5em 1.0em;
	}

	.subTitle {
		font-size: 1.0em;
	}

	.grid .item-txt {
		font-size: 0.9em;
	}

}

.footer {
	padding: 1rem;
	text-align: center;
	color: #FFF;
	background-color: #222222;
}


body {
	font-family: "Open Sans", sans-serif;
	line-height: 1.25;
}


.txt {
	text-align: left;
	font-size: .85em;
}

.hnum {
	text-align: center;
	color: #000;
	font-weight: bold;
}

.wide-th {
	width: 100px;
}

.full {
	background-color: #cccccc;
	text-align: center;
	color: #000;
	font-weight: bold;
}

.non {
	background: #fff
}



.flowBox {
	margin: auto;
	border-radius: 10px;
	border: solid 2px #696969;
	text-align: center;
	width: 90%;
	padding: 1em;
	font-size: 1.0em;
}

.flowBox_innner {
	line-height: 1.6rem;
	text-align: left;
}


.table-container {
	width: 100%;
	overflow-x: auto;
	margin-top: 40px;
}

.table-container table {
	width: 90%;
	min-width: 700px;
	margin: 0 auto;
	border-collapse: collapse;
	font-size: 0.9em;
	table-layout: fixed;
}

.table-container th,
.table-container td {
	border: 1px solid #999;
	padding: 8px;
	text-align: left;
	white-space: normal;
}

.table-container thead {
	display: table-header-group !important;
}

.thead-online {
  background-color: #ffe2e4;
}
.thead-weekly {
  background-color: #daf5ff;
}


/* .table-container tbody tr:nth-child(odd) {
	background-color: #eeeeee;
}

.table-container tbody tr:nth-child(even) {
	background-color: #f8f8f8;
} */

/* 縦並び防止のため display:block 系すべて無効化 */
@media screen and (max-width: 1000px) {

	.table-container table,
	.table-container thead,
	.table-container tbody,
	.table-container tr,
	.table-container th,
	.table-container td {
		display: revert !important;
	}
}