@charset "utf-8";
/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/
*,*::before,*::after{box-sizing:border-box}*{margin:0}html,body{height:100%}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}#root,#__next{isolation:isolate}li {list-style: none;margin: 0;}


/* ----------------------
 	本文
---------------------- */

body {line-height: 1;font-size: 63%;-webkit-text-size-adjust: 100%;margin: 0;}
html,body {width: 100%;height: 100%;margin: 0;padding: 0;}


/* ----------------------
 	Login
---------------------- */

.login_page {
	width : 100%;
	min-width : 500px;
	height: 100%;
	position: relative;
}

.login_page.video01 {
	background:url("../images/bg_vide01.png") no-repeat left top;
	background-size: 100% 100%;
}

.login_page.video02 {
	background:url("../images/bg_vide02.png") no-repeat left top;
	background-size: 100% 100%;
}

.login_page h1 {
	width: 50%;
	margin: 0px auto 40px;
	padding-top: 50px;
	text-align: center;
}

.login_page h1 img {
	width: 100%;
	height: auto;
}

.login_page h1 span {
	font-size: 2vw;
	display: block;
	margin-bottom: 15px;
}

form {
	border-radius: 6px;
	border: solid 1px #eee;
	width: 50%;
	min-width: 400px;
	margin: 0px auto;
	padding: 20px;
	background-color: #fff;
}

form .form_name {
	display: table;
	width: 100%;
	margin-bottom: 20px;
}

form p.form_name span:nth-child(1) {
	display: table-cell;
	width : 30%;
	text-align: center;
}

form p.form_name span:nth-child(2) {
	display: table-cell;
	width : 70%;
}

form p.form_name input[type="password"] {
	padding: 3px;
	width: 100%;
}

form p.alert {
	color: red;
	text-align: center;
	margin-top: 15px;
	font-size: 80%;
}

form .btn {
	text-align: center;
}

form input[type="submit"] {
	font-weight: 700;
	line-height: 1.5;
	display: inline-block;
	padding: 5px 30px;
	margin: 0 auto;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	letter-spacing: 0.1em;
	color: #fff;
	background-color: #4b7bb3;
	border-radius: 100vh;
	border: none;
}

form input[type="submit"]:hover {
	color: #fff;
	background: #555;
}

/* form font */
	form {
		font-size:16px;
	}
	form input[type="submit"] {
		font-size:16px;
	}


.footer {
	position: absolute;
	bottom: 70px;
	text-align: center;
	width: 100%;
}

.footer img {
	width: 10%;
	height: auto;
	margin: 0px auto;
}
/* ----------------------
 	Index Page
-----------------------*/

.anq_area {
	padding: 40px 20px 15px;
	margin: 0 auto;
	max-width: 1024px;
}

.top_page {
	padding: 40px 20px 15px;
	margin: 0 auto;
	max-width: 1024px;
}

.top_page > h1 {
	padding-bottom: 5px;
	margin: 0 auto 25px;
	display: flex;
	align-items: center;
	position: relative;
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.3
}

.top_page > h1:before {
	content: ' ';
	display: inline-block;
	width: 16px;
	height: 16px;
	background: url("../common_images/circle.svg") 0 0 no-repeat;
	background-size: contain;
	margin-right: 5px;
}

.top_page > h1:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 140px;
  height: 3px;
  background: #CBE9F0;
  background: linear-gradient(90deg, #023F99 0%, #023F99 50%, #CBE9F0 50%, #CBE9F0 100%)
}


.top_page > p.lead {
	font-size: 1.2rem;
	line-height: 1.6;
	margin-bottom: 15px;
}

.top_page > p.period {
	background-color:#F2F6FC;
	border-radius: 9px;
	padding: 25px 25px 25px 30px;
	font-size: 1.2rem;
	line-height: 1.6;
	text-indent: -5em;
	padding: 25px 25px 25px 7em;
	margin-bottom: 40px;
}

/* -- 左右振分 -- */

.top_page > ul {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: 1fr;
	grid-column-gap: 25px;
	grid-row-gap: 0px;
	padding: 0;
}

.top_page > ul > li {
	border-radius: 9px;
	border: solid 3px #ccc;
}

.top_page > ul > li  ul.ml {
	min-height: 10em;
}

.top_page > ul > li > a {
	display: block;
	padding: 25px;
	text-decoration: none;
	color: #333;
	border-radius: 6px;
	height:100%;
}

.top_page > ul > li > a:hover {
	background-color: #eee;
}

.top_page > ul > li > a > h2 {
	width: 80%;
	margin: 0px auto 40px;
	text-align: center;
}

.top_page > ul > li > a > h2 img {
	width: 100%;
	height: auto;
}

.top_page > ul > li > a > h2 span {
	font-size: 1.4em;
	display: block;
	margin-bottom: 20px;
}

.top_page li > a > dl > div {
	display: grid;
	grid-template-columns: 1fr 5fr;
	grid-template-rows: 1fr;
	grid-column-gap: 0px;
	grid-row-gap: 0px;
	font-size: 0.8rem;
	border-top: dotted 2px #ccc;
}

.top_page li > a > dl > div > dt {
	padding: 10px 0;
	line-height: 1.6;
}

.top_page li > a > dl > div > dd {
	padding: 10px 0;
	line-height: 1.6;
}

.top_page li > a > dl > div > dd > ul {
	padding: 0;
} 

.top_page li > a > dl > div > dd > ul > li {
	text-indent: -1em;
	padding-left: 1em;
	margin-bottom: 5px;
}

.top_page li .btn {
	font-size: 1rem;
	width: 100%;
	max-width: 600px;
	min-width: 300px;
	display: inline-block;
	text-align: center;
	border-radius: 50vh;
	background-color: #0076BF;
	padding: 15px 30px;
	text-decoration: none;
	color: white;
	font-weight: 700;
}

.top_page li:hover .btn {
	background-color: #333;
}

.top_page li .comingsoon {
	font-size: 1rem;
	color: #FF0004;
	text-align: center;
	width: 100%;
	font-weight: 700;
	max-width: 600px;
	min-width: 300px;
	display: inline-block;
	border-radius: 50vh;
	background-color: #eee;
	padding: 15px 30px;
	margin: 0 auto;
}

.top_page li:hover .comingsoon {
	background-color: #fff;
}

.page_btn {
	padding: 0px 20px 80px;
	margin: 0 auto;
	max-width: 1024px;
}

.top_page .back_btn,
.page_btn .back_btn {
	margin: 40px auto 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 200px;
	height: 40px;
	font-size: 1.4em;
	font-weight: 700;
	line-height: 1;
	background: #023F99;
	border-radius: 30px;
}

.top_page .back_btn a,
.page_btn .back_btn a {
	color:#fff;
	text-decoration: none;
}

.top_page .back_btn:hover,
.page_btn .back_btn:hover {
  opacity: .8
}

.dl_page {
	padding: 20px 20px;
	margin: 0 auto;
	max-width: 1024px;
}

.dl_page > h2 {
	padding-bottom: 5px;
	margin: 0 auto 25px;
	display: flex;
	align-items: center;
	position: relative;
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.3
}

.dl_page > h2:before {
	content: ' ';
	display: inline-block;
	width: 16px;
	height: 16px;
	background: url("../common_images/circle.svg") 0 0 no-repeat;
	background-size: contain;
	margin-right: 5px;
}

.dl_page > h2:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 140px;
  height: 3px;
  background: #CBE9F0;
  background: linear-gradient(90deg, #023F99 0%, #023F99 50%, #CBE9F0 50%, #CBE9F0 100%)
}

.dl_page table.overview,
.top_page table.overview {
	font-size: 1.4em;
	margin-bottom: 30px;
}

.dl_page table.overview tr > th,
.dl_page table.overview tr > td,
.top_page table.overview tr > th,
.top_page table.overview tr > td {
	border-top: 2px dotted #83C9D9;
}

.dl_page table.overview tr.bb > th,
.dl_page table.overview tr.bb > td,
.top_page table.overview tr.bb > th,
.top_page table.overview tr.bb > td {
	border-bottom: 2px dotted #83C9D9;
}

.dl_page table.overview tr.bnon > th,
.dl_page table.overview tr.bnon > td,
.top_page table.overview tr.bnon > th,
.top_page table.overview tr.bnon > td {
	border-top: none;
}

.dl_page table tr > th,
.top_page table tr > th {
	padding: 10px 0;
	line-height: 1.6;
	width: 150px;
  	color: #54B6CC;
	background-color: #f1f1f1;
}

.dl_page table tr > td,
.top_page table tr > td {
	padding: 10px;
	line-height: 1.6;
}

.dl_page table tr > td > ul,
.top_page table tr > td > ul {
	padding: 0;
} 

.dl_page table tr > td > ul > li,
.top_page table tr > td > ul > li {
	text-indent: -1em;
	padding-left: 1em;
	margin-bottom: 5px;
}

.dl_page table tr > td.flex_box,
.top_page table tr > td.flex_box {
 	display: flex;
}

.dl_page table tr > td.flex_box > .item,
.top_page table tr > td.flex_box > .item {
	width: 50%;
	padding: 10px;
}

.dl_page table tr > td.flex_box > .item:nth-child(1),
.top_page table tr > td.flex_box > .item:nth-child(1) {
	border-right: dotted 1px #ccc;
}

.dl_page table tr > td.flex_box > .item > h4,
.top_page table tr > td.flex_box > .item > h4 {
	font-size: 1.4em;
	font-weight: 700;
	margin-bottom: 10px;
}

.dl_page table tr > td.flex_box > .item > .time,
.top_page table tr > td.flex_box > .item > .time {
	padding-bottom: 15px;
}

.dl_page table tr > td.flex_box > .item > .cont li,
.top_page table tr > td.flex_box > .item > .cont li {
	text-indent: -1em!important;
	padding-left: 1em!important;
	margin-left: -3em!important;
}

.dl_page table tr > td.flex_box > .item > .cont li::before,
.top_page table tr > td.flex_box > .item > .cont li::before {
	content:"・";
}

@media screen and (max-width: 800px) {

	.dl_page table tr > td.flex_box,
	.top_page table tr > td.flex_box {
		display: block;
	}
	.dl_page table tr > td.flex_box > .item,
	.top_page table tr > td.flex_box > .item {
		width: 100%;
	}
	.dl_page table tr > td.flex_box > .item:nth-child(1),
	.top_page table tr > td.flex_box > .item:nth-child(1) {
		margin-bottom: 15px;
		border-bottom: dotted 1px #ccc;
		padding-bottom: 15px;
		border-right: none!important;
	}

	.dl_page table tr > td.flex_box > .item > h4,
	.top_page table tr > td.flex_box > .item > h4 {
		font-size: 3.8vw;
	}
}

p.note_tt {
	color: #023F99;
	font-weight: 700;
	background-color: transparent;
	font-size: 1.6em;
	margin-bottom: 25px;
}

dl.notes {
	margin: 0 auto;
	font-size: 1.4em;
}

dl.notes dt {
	padding-left: 2.3em;
	text-indent: -1em;
	color: #555;
	font-weight: 700;
	margin-bottom: 1px;
	text-indent: -1em;
	padding-left: 1em;
	margin-bottom: 5px;
}

dl.notes dt::before{
	content: "● ";
	color: #023F99;
}

dl.notes dd {
	margin-bottom: 25px;
	padding-left: 1.5em;
}

dl.notes dd mark {
	font-weight: 700;
	background-color: transparent;
}

dl.notes dd > ul {
	padding-left: 1em;
	margin-top: 10px;
}

dl.notes dd > ul > li {
	text-indent: -1em;
	padding-left: 1em;
	margin-bottom: 15px;
}

dl.notes dd > ul > li > span.tt {
	font-weight: 700;
	display: inline-block;
	margin-bottom: 1px;
}

dl.notes dd > ul > li:before {
	content: "・ ";
}

dl.notes dd > .note {
	padding-left: 2em;
}

dl.notes dd > .note:before {
	content: "※ ";
}

@media screen and (max-width: 560px) {
	dl.notes {
		width: 100%;
		margin: 0 auto;
		font-size: 80%;
	}
}

@media screen and (max-width: 900px) {
	.top_page li > a > dl > div {
		grid-template-columns: 1fr 4fr;
		font-size: 1.2vw;
	}

	.top_page > ul > li  ul.ml {
		min-height: 14vh;
	}
}

@media screen and (max-width: 700px) {
	.top_page > ul {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: repeat(2, 1fr);
		grid-column-gap: 0px;
		grid-row-gap: 25px;
		padding: 0;
	}

	.top_page > ul > li > a > h2 span {
		font-size: 4vw;
		margin-bottom: 15px;
	}
	.top_page li > a > dl > div {
		grid-template-columns: 1fr 4fr;
		font-size: 3vw;
	}
}

@media screen and (max-width: 640px) {
	
	.movie_area > h2,
	.anq_area > h2 {
		font-size: 1.6rem;
	}

	.top_page > ul > li > a > h2 span {
		font-size: 4vw;
		margin-bottom: 15px;
	}

	.top_page > ul > li  ul.ml {
		min-height: 22vh;
	}

	.top_page .back_btn {
		width: 300px;
		font-size: 1.8em;
	}
}

/* ----------------------
 	Login Page
-----------------------*/

/*-- Global -----------*/

.movie_area,
.anq_area {
	padding: 35px 20px;
}

.movie_area > h2,
.anq_area > h2 {
	max-width: 1024px;
	padding-bottom: 5px;
	margin: 0 auto 25px;
	display: flex;
	align-items: center;
	position: relative;
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.3
}
.movie_area > h2:before,
.anq_area > h2:before {
	content: ' ';
	display: inline-block;
	width: 16px;
	height: 16px;
	background: url("../common_images/circle.svg") 0 0 no-repeat;
	background-size: contain;
	margin-right: 5px;
}

.movie_area > h2:after,
.anq_area > h2:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 140px;
  height: 3px;
  background: #CBE9F0;
  background: linear-gradient(90deg, #023F99 0%, #023F99 50%, #CBE9F0 50%, #CBE9F0 100%)
}

@media screen and (max-width: 640px) {
	.movie_area > h2,
	.anq_area > h2 {
		font-size: 1.6rem;
	}
}

.line {
	background:linear-gradient(transparent 60%, #DCF3F6 60%);
}

mark{
	color:#0076BF;
	font-style:normal;
	font-weight:700;
	font-size: 130%;
	background:transparent
}

/*-- header -----------*/

header {
	padding: 20px 0px 30px;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
	background: url("../common_images/line.png") repeat-x left bottom
}

header .main_logo {
    width: 100%;
	max-width: 400px;
	margin: 0 auto;
    text-align: center
}

header .main_logo img {
	margin: 0 auto;
	width: 100%;
	height: auto;
}

header .main_logo span {
	display: block;
	margin-bottom: 10px;
	font-size: 1rem;
	font-weight: 700
}

/*-- main -----------*/

main {
	width: 100%;
}
.movie_area.v1 {
	background-color:#F2F6FC;
}

.movie_area.v2 {
	background-color:#F5FEFF;
}

/*-- 映像--*/
.youtube {
	aspect-ratio: 16 / 9;
	width: auto;
	max-width: 960px;
	height: auto;
	margin: 0 auto;
	margin: 0 auto 30px;
}

.youtube iframe{
	width: 100%!important;
	height: 100%!important;
	border: solid 1px #ccc;
}

/*-- チャプター--*/

.movie_area > ul {
	width: 100%;
	max-width: 1024px;
	margin: 0 auto;
	padding: 0 0 0 20px;
}

.movie_area > ul li {
	margin-bottom: 20px;
  	font-size: 1.6em;
}

.movie_area > ul > li:before {
	content: ' ';
	display: inline-block;
	width: 16px;
	height: 16px;
	background: url("../common_images/arrow.svg") 0 0 no-repeat;
	background-size: contain;
	margin-right: 5px;
}

.movie_area > ul li > ul.faq {
	margin-top: 15px;
}

.movie_area > ul li > ul.faq li {
	padding-left: 1.2em;
	text-indent: -1.2em;
	margin-right: 0px;
	font-size: 90%;
	line-height: 1.4;
	margin-bottom: 12px;
}

.movie_area > ul li > ul.faq li::before {
	content:"Q.";
	font-weight: 700;
}

.movie_area > ul li > ul.faq li dl {
	margin-top: 10px;
	font-size: 80%;
}

.movie_area > ul li > ul.faq li dl > dt {
	margin-bottom: 5px;
	padding-left: 1em;
	text-indent: -1em;
	color: #555;
}
.movie_area > ul li > ul.faq li dl > dd a {
	color: #555;
}
.movie_area > ul li > ul.faq li dl > dd a:hover {
	text-decoration: none;
}

.movie_area > ul li > ul.faq li dl > dt::before {
	content:"※";
}

.movie_area > ul li > ul.faq li dl > dd {
	padding-left: 1em;
	text-indent: 0em;
}

@media screen and (max-width: 640px) {
	.movie_area > ul li {
		margin-bottom: 20px;
		font-size: 1rem;
	}
}

/*-- アンケート --*/

p.info {
  	font-size: 1rem;
	margin-bottom: 20px;
}

.anq_area > ul {
	display: table;
	width: 100%;
	max-width: 1024px;
	margin: 0 auto;
	padding: 0;
}

.anq_area > ul li {
	display: table-cell;
  	font-size: 1.6em;
	vertical-align:  middle;
}

.anq_area > ul li.txt {width: 80%;padding: 0;}
.anq_area > ul li.qr {width: 20%;text-align: center;}

.anq_area > ul li.txt .note {
	font-size: 75%;
	color: red;
	text-align: center;
}
.anq_area > ul li.txt .note::before {
	content: "※";
}

@media screen and (max-width: 1024px) {
	.anq_area > ul {width: 100%;}
	.anq_area > ul li {font-size: 2vw;}
	.anq_area > ul li.txt {width: 75%;}
	.anq_area > ul li.qr {width: 25%;}
}

@media screen and (max-width: 900px) {
	.anq_area > ul li {font-size: 2.4vw;}
}

@media screen and (max-width: 640px) {
	.anq_area > ul {width: 100%;}
	.anq_area > ul li {font-size: 3.6vw;}
	.anq_area > ul li.txt {width: 100%;}
	.anq_area > ul li.qr,
	.anq_area > ul li.txt .note.left_arrow {display: none;}
}

.anq_area > ul li.txt > p {
	margin-bottom: 25px;
	line-height: 1.6;
}

.anq_area > ul li.txt .btn {
	text-align: center;
	margin-top: 40px;
}

.anq_area > ul li.txt .btn > a {
	width: 100%;
	max-width: 600px;
	min-width: 300px;
	display: inline-block;
	text-align: center;
	border-radius: 50vh;
	background-color: #0076BF;
	padding: 15px 30px;
	text-decoration: none;
	color: white;
	font-weight: 700;
}

.anq_area > ul li.txt .btn > a:hover {
	background-color: #333;
}

.anq_area > ul li.qr img {
	width: 100%;
	height: auto;
	margin: 0 auto;
}

/*-- fotter -----------*/

footer {
	width: 100%;
	background-color: #0076BF;
	padding: 15px 20px 30px;
	text-align: center;
}

footer > small {
	color: white;
	font-size: 0.8rem;
}

footer > .tab {
	display: table;
	width: 100%;
	max-width: 1024px;
	margin: 0 auto;
	font-size: 0.8rem;
}

footer > .tab small {
	display: table-cell;
	color: white;
	width: 80%;
}

footer > .tab .logout {
	display: table-cell;
	width: 20%;
}

footer > .tab > .logout a {
	width: 100%;
	display: inline-block;
	text-align: center;
	border-radius: 50vh;
	background-color: #fff;
	padding: 15px 30px;
	text-decoration: none;
	color: #0076BF;
	font-weight: 700;
}

@media screen and (max-width: 900px) {
	footer > .tab {
		font-size: 2vw;
	}
	footer > .tab small {
		width: 70%;
	}
	footer > .tab .logout {
		width: 30%;
	}

	footer > small {
		font-size: 1.6vw;
	}
}

@media screen and (max-width: 640px) {
	footer > .tab {
		display: block;
		font-size: 2.8vw;
	}
	footer > .tab small {
		display: block;
		width: 100%;
	}
	footer > .tab .logout {
		display: block;
		width: 70%;
		margin: 15px auto;
	}

	footer > small {
		font-size: 2.2vw;
	}
}

/* -- START 20240927 -- */

.foot_links {
	margin: 30px auto 0;
	background: url("../../images/line.png") repeat-x left top;
	padding: 15px 0 10px;
}

.foot_links ul {
	max-width: 1100px;
	margin: 0 auto;
	font-size: 1.4em;
}

.foot_links ul li {
	display: inline-block;
	position: relative;
}

.foot_links ul li a {
	padding-left: 1em;
}

.foot_links ul li a::before {
	content: '';
	position: absolute;
	top: 40%;
	left: 0;
	transform: rotate(45deg) translateY(-50%);
	width: 6px;
	height: 6px;
	border-width: 2px 2px 0 0;
	border-style: solid;
	border-color: #333;
}