@charset "utf-8";

/* ────────────────────────────────────────────

max-width: 767px 

──────────────────────────────────────────── */


/* general framework */
.wrap {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
}
.content {
	height: 100%;
	display: flex;
	flex-direction: column-reverse;
	margin: 0 2.5rem;
}

/* title */
/* font */
/* btn */

/* footer フッター
------------------------------------------------------------------ */
.footer{
	font-size: 0.8rem;
	text-align: center;
	width: 100%;
	padding: 20px 0;
	margin-top: auto;
	background: #fff;
}
.footer .logo {
	width: 47%;
	margin: 0 auto 10px;
}


/* header */
header {
	z-index: 99;
}
#header {
	padding: 10px 15px;
	width: 100%;
	z-index: 99;
}
#header .headerTitleArea{
	display: flex;
	justify-content: space-between;
}
#header .logoWrap {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 15px;
	padding-right: 35px;
}
#header .logoWrap .logo {
	width: 135px;
}
.logoInfoText{
	font-size: 12px;
}
#header .headerTitleWrap {
	font-size: 21px;
	font-weight: bold;
	width: 85%;
	max-width: 360px;
}
nav:has(.breadcrumnbNavi) {
	margin-top: auto;
}
nav:has(.globalNavi) {
	display: none;
}
nav:has(.globalNavi.active) {
	display: block;
}

/* toggle */
#toggle {
	position: absolute;
	top: 15px;
	right: 15px;
	display: flex;
	width: 32px;
	height: 26px;
}
#toggle span{
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 100%;
	height: 5px;
	background: #000;
	transition: .3s;
}
#toggle span:first-of-type{
	top: 0;
	transform: translateY(0);
}
#toggle span:last-of-type{
	top: unset;
	bottom: 0;
	transform: translateY(0);
}
#toggle.active span {
	opacity: 0;
}
#toggle.active span:first-of-type{
	top: 50%;
	opacity: 1;
	transform: rotate(45deg) translateY(0);
}
#toggle.active span:last-of-type{
	top: 50%;
	bottom: unset;
	opacity: 1;
	transform: rotate(-45deg) translateY(0);
}

/* spメニュー */
#changeMenu {
	position: fixed;
	width: 100%;
	top: 96px;
	left: 0;
	display: none;
	opacity: 0;
	z-index: 1;
}
#changeMenu.open {
	display: block;
	opacity: 1;
}
#changeMenu ul {
	position: relative;
	padding: 0 15px;
	background: #fff;
	z-index: 1;
	height: calc(100% + 45px);
}
.spNaviArea {
	max-height: calc(100svh - 94px);
	overflow: auto;
}
#changeMenu ul li:not(:last-child) {
	border-bottom: 2px solid #1fa893;
}
#changeMenu ul a {
	position: relative;
	display: flex;
	padding: 2.5svh 0;
	padding-left: 55px;
	font-size: 16px;
	font-weight: normal;
	height: 55px;
}
#changeMenu .btnLogoutWrap {
	width: calc(100% + 30px);
	margin-top: -2px;
	margin-left: -15px;
	border-bottom: none !important;
	margin-bottom: 5px;
}
#changeMenu li.btnLogoutWrap a {
	height: unset!important;
	padding: 0;
}
#changeMenu .btnLogout {
	width: 100%;
	height: 45px;
	background: #00A08E;
	color: #fff;
	border-radius: unset;
}
#changeMenu.open::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100svh;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: -1;
}
body:has(#changeMenu.open) {
	overflow-y: hidden;
}
#changeMenu .openContactModal {
	cursor: pointer;
}

/* サブカラムメニュー */
.subColumn {
	width: 210px;
	background: #FFFFFF;
	box-shadow: 1px 1px 2px rgba(35,24,21,.75);
}
.subColumn ul li {
	border-bottom: 1px dotted #1fa893;
}
.subColumn ul li:last-child {
	border-bottom: none;
}
.subColumn ul li.active {
	background: #fde8bb;
}
.subColumn ul li a {
	position: relative;
	display: block;
	padding: 10px 10px 10px 70px;
	font-size: 1.4rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	width: 100%;
	height: 58px;
}
.subColumn ul li a:before {
	
}

/* トップのメニュー */
.menu {
	margin: 0 auto;
}
.menu ul {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.menu ul li a {
	display: flex;
	align-items: center;
	width: 100%;
	height: 80px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 1px 1px 2px rgba(35,24,21,.75);
	position: relative;
	padding: 10px 10px 10px 80px;
	font-size: 2.0rem;
	font-weight: 600;
}
#linkSelect .menu ul{
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px;
	padding-bottom: 20px;
}
#linkSelect .menu ul li{
	width: calc((100% - 10px) / 2);
}
#linkSelect .menu ul li a{
	justify-content: center;
	padding: 10px;
}

.menu ul li:nth-child(even) a {
	border: 2px solid #fde2a8;
}
.menu ul li:nth-child(odd) a {
	border: 2px solid #a8d8cf;
}


/* 公開予定 非活性css */
.menu ul li.comingSoon, .subColumn ul li.comingSoon {
	position: relative;
	pointer-events: none;
}
.menu ul li.comingSoon::after, .subColumn ul li.comingSoon::after {
	content: "";
	position: absolute;
	background: rgba(181, 181, 182, 0.4);
	width: 97%;
	height: 90%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.menu ul li.comingSoon::before, .subColumn ul li.comingSoon::before {
	width: 80%;
	content: "2026年展開予定";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	background: url(/lib/img/bg_comingSoon.png) center no-repeat;
	background-size: contain;
	padding: 10px 20px;
	z-index: 1;
}
.menu ul li.comingSoon::after, .subColumn ul li.comingSoon::after {
	content: "";
	position: absolute;
	background: rgba(181, 181, 182, 0.7);
	width: 97%;
	height: 90%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.subColumn ul li.comingSoon::before {
	width: 88%;
	font-size: 16px;
}
.subColumn ul li.comingSoon::after {
	width: 100%;
	height: 100%;
}

/* icon */
.icoTP:before { background: url(/lib/img/icon/ico_home.png) center center no-repeat;}
.icoFP:before { background: url(/lib/img/icon/ico_fp.png) center center no-repeat;}
.icoDL:before { background: url(/lib/img/icon/ico_dl.png) center center no-repeat;}
.icoLV:before { background: url(/lib/img/icon/ico_live.png) center center no-repeat;}
.icoEL:before { background: url(/lib/img/icon/ico_el.png) center center no-repeat;}
.icoPD:before { background: url(/lib/img/icon/ico_pre_doc.png) center center no-repeat;}
.icoAS:before { background: url(/lib/img/icon/ico_survey.png) center center no-repeat;}
.icoCE:before { background: url(/lib/img/icon/ico_history.png) center center no-repeat;}
.icoPW:before { background: url(/lib/img/icon/ico_pass.png) center center no-repeat;}
.icoIV:before { background: url(/lib/img/icon/ico_info_video.png) center center no-repeat;}
.icoSM:before { background: url(/lib/img/icon/ico_system_manual.png) center center no-repeat;}
.icoTP:before,
.icoFP:before,
.icoDL:before,
.icoLV:before,
.icoEL:before,
.icoPD:before,
.icoAS:before,
.icoCE:before,
.icoPW:before,
.icoIV:before,
.icoSM:before {
	content: "";
	position: absolute;
	display: inline-block;
	width: 40px;
	height: 40px;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	background-size: cover;
	border-radius: 5px;
}
.menu .icoTP:before,
.menu .icoFP:before,
.menu .icoDL:before,
.menu .icoLV:before,
.menu .icoEL:before,
.menu .icoPD:before,
.menu .icoAS:before,
.menu .icoCE:before,
.menu .icoPW:before,
.menu .icoIV:before,
.menu .icoSM:before {
	width: 60px;
	height: 60px;
	left: 10px;
}
.icoDocDl {
	position: relative;
}
.icoDocDl:after {
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	content: "";
	display: inline-block;
	background: url(/lib/img/ico_dl.png) center center no-repeat;
	background-size: contain;
	width: 30px;
	height: 20px;
}


/* general */
body {
	letter-spacing: 1px;
}
body main {
	position: relative;
}   

body main:not(.ios) {
	background: #00a08e url(/lib/img/bg.jpg) -396px -112px no-repeat;
}
body main.ios {
	background: unset!important;
}
body main.ios::after {
	content: "";
	background: #00a08e url(/lib/img/bg.jpg) -396px -112px no-repeat;
	position: fixed;
	right: 0;
	top: 0;
	width: 100%;
	height: 120svh;
	z-index: -1;
}
body main::before {
	content:"";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #00a08e;
	z-index: -1;
}
.titleA {
	font-size: 22px;
	border-bottom: 2px solid #00A08E;
	padding: 0 0 15px 0px;
	margin-bottom: 30px;
	letter-spacing: .8px;
	position: relative;
}
.titleA span {
	display: flex;
	align-items: center;
	position: relative;
	padding-left: 55px;
}
.titleB {
	font-size: 20px;
	background: #fff;
	box-shadow: 1px 1px 2px rgba(35,24,21,.75);
	padding: 8px;
	align-items: center;
	margin-bottom: 30px;
	position: relative;
	line-height: 1.8;
	word-break: keep-all;
}	
.titleB:before {
	position: absolute;
	left: 9px;
	top: 12px;
	display: inline-block;
	content: "";
	width: 2px;
	background: #00A08E;
	height: 30px;
}
.titleB span {
	display: inline-block;
	padding: 5px 9px;
	border-right: 2px solid #00A08E;
}
.titleB span.gr {
	color: #00A08E;
}
.titleB span.bl {
	color: #000;
}
.titleB span:last-child {
	margin-right: 10px;
} 
.titleB:not(:has(> span)) {
	padding-left: 20px;
}
.titleC {
	background: #F39800;
	border-radius: 100vmax;
	color: #fff;
	font-size: 18px;
	text-align: center;
	padding: 10px;
	margin-bottom: 30px;
}
.titleD {
	background: #00A08E;
	border-radius: 100vmax;
	color: #fff;
	font-size: 18px;
	text-align: center;
	padding: 10px;
	margin-bottom: 25px;
	width: 100%;
}
.titleE {
	position: relative;
	font-size: 16px;
	margin-bottom: 20px;
	word-break: break-all;
	display: flex;
	align-items: start;
	padding-left: 95px;
	min-height: 2em;
}
.titleE span {
	position: absolute;
	left: 0;
	font-size: 18px;
	color: #fff;
	background: #00A08E;
	border-radius: 5px;
	display: inline-block;
	padding: 8px 10px;
	width: 85px;
	text-align: center;
}
.pageTitle {
	text-align: center;
	font-size: 24px;
	padding-bottom: 15px;
	margin-bottom: 30px;
	border-bottom: 4px solid #b4b4b3;
}
.pageName {
	text-align: center;
	font-size: 26px;
	font-weight: bold;
	margin-bottom: 40px;
}
.articleArea {
	position: relative;
	margin-bottom: 40px;
}
body#index .articleArea {
	margin-bottom: 0;
}
.articleArea.vCenter {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 20px;
	margin: auto;
	text-align: left;
	width: fit-content;
	min-height: 250px;
} 
.content {
	display: none;
	background: #fff;
	padding: 20px 40px;
	margin: 20px 0 0 40px;
}
.center {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
.contents {
	display: flex;
	justify-content: space-between;
	align-items: start;
}
/* メインカラム */
.mainColumn {
	width: 100%;
	background: #fff;
	border-radius: 10px;
	padding: 30px 15px;
}

.examWrap {
	background: #fff;
	box-shadow: 1px 1px 2px rgba(35,24,21,.75);
	padding: 30px 15px;
	min-height: 350px;
}

.sentence {
	font-size: 16px;
	width: fit-content;
	margin: 0 auto 30px;
	line-height: 1.4;
}

/* TOPへ戻るボタン */
.revTop a {
	background: #fff;
	color: #00A08E;
	border: 2px solid #00A08E;
	border-radius: 100vmax;
	display: flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	min-width: 200px;
	height: 40px;
	margin: 0 auto;
	padding: 0 20px;
}


.contentsWrap {
	max-width: 100%;
	padding: 30px 15px 50px;
	border-radius: 10px;
}
.contentsWrap.mainContents {
	background: #fff;
	margin: 20px;
}

.noDataWrap{
	min-height: 300px;
	padding: 20px 0 0 20px;
}
body.live .noDataWrap{
	min-height: 100px;
}

#linkSelect .titleA,
body.materialDL .titleA,
body.infoMovieList .titleA,
body.live .titleA{
	display: flex;
	flex-direction: column;
}
.noteText{
	display: block;
	text-align: right;
	font-size: 16px;
	margin-left: auto;
}
body#linkSelect .titleA .noteText,
body.materialDL .titleA .noteText,
body.infoMovieList .titleA .noteText,
body.live .titleA .noteText{
	font-size: 14px;
	margin-bottom: -10px;
}

/* 階層ページパンくず */
.selectBreadcrumbNav .selectBreadcrumbList{
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-bottom: 20px;
}
.selectBreadcrumbNav .selectBreadcrumbList li{
	font-weight: bold;
}
.selectBreadcrumbNav .selectBreadcrumbList li a{
	text-decoration: none;
	text-underline-offset: 5px;
}

.selectBreadcrumbNav .selectBreadcrumbList li:after{
	display: inline-block;
	content: '>';
	margin-left: 5px;
}
.selectBreadcrumbNav .selectBreadcrumbList li:last-of-type:after{
	display: none;
}

/* login 
------------------------------------------------------------------ */
.sentense {
	margin-bottom: 50px;
	font-size: 1.8rem;
}
.loginArea {
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 35px;
	margin-bottom: 40px;
}
.loginArea li {
	text-align: left;
}
.loginArea li p {
	font-size: 1.8rem;
	margin-bottom: 15px;
}
.loginArea input {
	border: 1px solid #a7d7ce;
	width: 100%;
	outline: none;
	font-size: 1.8rem;
	padding: 18px 16px;
}
.btn.btnLogin {
	background-color: #00A08E;
	color: #FFFFFF;
	font-size: 2.2rem;
	font-weight: 700;
	width: 85%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 35px;
	border-radius: 35px;
	cursor: pointer;
	position: relative;
	padding: 15px 0;
	border: none;
}
.btnLogin::before {
	content: ''; 
	background: url(/lib/img/ico_login.svg) no-repeat center center;
	background-size: contain; 
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 20px;
	width: 30px; 
	height: 30px;
	z-index: 1000;
}
.btn.inactive {
	background: #9FA0A0;
	border: 2px solid #9FA0A0;
	color: #fff;
	pointer-events: none;
}
.forgotPW {
	text-align: center;
	color: blue;
	text-decoration: underline;
	font-size: 1.4rem;
}

body.login .spNaviArea ul li {
	display: none;
}
body.login .spNaviArea ul li.btnContact {
	display: block;
}

.errorText {
	font-size: 16px;
	font-weight: normal;
	color: #E60012;
	margin-bottom: 5px;
}
.errorText:not(:has(~ .warningText)) {
	margin-bottom: 25px !important;
}
.warningText {
	font-size: 16px;
	font-weight: normal;
	color: #E60012;
	margin-top: 10px;
	margin-bottom: 25px;
}
.expiryDate .warningText{
	font-weight: bold;
}
.manualLink {
	margin-top: 15px;
}

.passSwich {
	width: fit-content!important;
	position: absolute!important;
	right: 18px!important;
	margin: 0!important;
	cursor: pointer;
}
.passSwich.position01 {
	top: 55%!important;
}
.passSwich.position02 {
	top: 39%!important;
}
.passSwich.position03 {
	top: 49%!important;
}
*:has(> .passSwich) {
	position: relative!important;
}


/* index 
------------------------------------------------------------------ */
#index .contentsWrap.mainContents {
	margin-top: 10px;
	margin-bottom: 10px;
}

.update {
	font-size: 16px;
	text-align: right;
	margin-bottom: 25px;
}
.update ul li:not(:last-child) {
	margin-bottom: 2px;
}
body#index .contentsWrap {
	border-radius: unset;
}

/* news */
.newsArea {
	background: #fff;
	height: 350px;
	width: 100%;
	margin: 0 auto;
	padding: 10px 8px;
	display: flex;
	flex-direction: column;
	gap: 15px;
	border: 6px solid #b4b4b3;
	border-radius: 8px;
	margin-bottom: 30px;
}

.newsArea ul::-webkit-scrollbar {
	width: 10px;
}
.newsArea ul::-webkit-scrollbar-track {
	background: #c0c0c0;
}
.newsArea ul::-webkit-scrollbar-thumb {
	background: #00A08E;
}
.newsArea h3 {
	color: #00A08E;
	font-size: 1.8rem;
}
.newsArea ul {
	overflow-y: auto;
	font-size: 1.8rem;
}
.newsArea ul li {
	width: 100%;
	display: flex;
	justify-content: flex-start;
	flex-direction: column;
	word-break: break-all;
	margin-bottom: 12px;
}
.newsArea ul li{
  border-bottom: 1px dashed #ccc;
  padding: 10px 0 10px 5px;
}
.newsArea ul li p {
	display: inline-block;
}
.newsArea ul li a {
  text-decoration: underline;
  text-underline-offset: 2px;  
  color: inherit;
}
.newsArea ul li .newIcon {
	display: inline-block;
	white-space: nowrap;
	font-size: 12px;
	font-weight: bold;
	color: #fff;
	background: #ff0000;
	padding: 3px 9px;
	text-align: center;
	line-height: 1.2;
}
.newsArea ul li .dateBlock{
	display: block;
}

/*  menu/index
------------------------------------------------------------------ */
.generalProductsWrap:not(:last-child) {
	margin-bottom: 50px;
}
.generalProducts {
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	gap: 40px;
}
.trainingProducts {
	display: flex;
}
.trainingProducts ul,
.examProducts ul {
	width: 100%;
	display: flex;
	gap: 0 15px;
}
.trainingProducts ul li {
	width: 50%;
}
.trainingProducts ul li a,
.examProducts ul li a {
	border-radius: 10px;
	box-shadow: 1px 1px 2px rgba(35,24,21,.75);
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 5vw 0;
}
.trainingProducts ul li figure figcaption,
.examProducts ul li figure figcaption {
	font-size: 16px;
	text-align: center;
	margin-bottom: 15px;
}
.examProducts ul li figure figcaption {
	color: #a0a0a0;
}
.trainingProducts ul li figure img,
.examProducts ul li figure img {
	width: 35%;
}
.trainingProducts ul li a {
background: #E7F4F1;
	color: #00A08E;
}
.examProductsArea {
	width: calc(50% - 7.5px);
}
.examProducts ul li {
	width: 100%;
}
.examProducts ul li a {
	background: #E9EAEA;
}


/* /menu/step/course/movie, /menu/step/course/pdf
------------------------------------------------------------------ */
.trainingIcon {
	width: 25%;
	border-radius: 5px;
	box-shadow: 1px 1px 2px rgba(35, 24, 21, .75);
	background: #E7F4F1;
	color: #00A08E;
	padding: 3px 20px 18px;
}
.trainingIcon figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
}
.trainingIcon figcaption {
	font-size: 16px;
	text-align: center;
}
.trainingFlex {
	display: flex;
	align-items: flex-start;
	flex-direction: column-reverse;
	gap: 10px;
	margin-bottom: 50px;
}
.trainingFlex .textBox {
	width: 100%;
	background: #fff;
	margin: 0 auto;
	box-shadow: 1px 1px 2px rgba(35, 24, 21, .75);
	padding: 15px 10px 15px 20px;
}
.trainingFlex .textBox p {
	overflow: auto;
	max-height: 150px;
	width: 100%;
	overflow-wrap: break-word;
	word-break: break-word;
	padding-right: 5px;
}
.trainingFlex .textBox p::-webkit-scrollbar {
	width: 10px;
}
.trainingFlex .textBox p::-webkit-scrollbar-track {
	background: #c0c0c0;
}
.trainingFlex .textBox p::-webkit-scrollbar-thumb {
	background: #00A08E;
}
.movieBox {
	position: relative;
	width: 100%;
	background: #00A08E;
	border-radius: 5px;
	box-shadow: 1px 1px 2px rgba(35, 24, 21, .75);
	margin: 0 auto 20px;
	padding: 8px;
}
.movieBox #player {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	background: #fff;
}
.movieBox:has(.fullScreen) {
	padding: 0;
	border-radius: 0;
	background: #000;
	display: flex;
	align-items: stretch;
	flex-direction: column;
	justify-content: center;
}

.movieControl {
	display: flex;
	justify-content: space-between;
	padding-top: 10px;
}
.movieControl .time {
	color: #fff;
	font-size: 14px;
}
.leftColumn {
	width: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: 2%;
}
#playButton {
	display: none;
	width: 0;
	height: 0;
	border-style: solid;
	border-top: 9px solid transparent;
	border-bottom: 9px solid transparent;
	border-left: 16px solid #fff;
	border-right: 0;
}
#pauseButton {
	display: none;
	position: relative;
	width: 18px;
	height: 21px;
}
#pauseButton::before,
#pauseButton::after {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 33%;
	height: 100%;
	box-sizing: border-box;
	background-color: #fff;
	content: "";
}
#pauseButton::before {
	left: 0;
}
#pauseButton::after {
	right: 0;
}
#playButton.active {
	display: block;
}
#pauseButton.active {
	display: block;
}
.centerColmn {
	width: 66%;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
}
#rewind30Button, #forward30Button {
	width: 38px;
}
#rewind10Button, #forward10Button {
	width: 28px;
}
.rightColumn {
	width: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 2%;
}
#fullScreenButton .change, #fullScreenButton .exit {
	display: none;
}
#fullScreenButton .change.active, #fullScreenButton .exit.active {
	display: block;
}

.movieControl {
  height: 60px;
  opacity: 1;
  transition: height 1.2s ease, opacity 0.3s ease;
  overflow: hidden;
}

.movieControl.shrink {
  height: 0;
  opacity: 0;
}




/* live
------------------------------------------------------------------ */
.titleA span.liveTime {
	float: right;
	padding: 0;
	font-size: 16px;
	line-height: 1.8;
	font-weight: medium;
}
.liveArea {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.liveMovie {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	margin-bottom: 15px;
	border: 10px solid #00A08E;
	border-radius: 3px;
}
.liveMovie iframe {
	width: 100%;
	height: 100%;
}
.liveMovie button {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #888;
	border-radius: 25px;
	width: 50px;
	height: 50px;
	opacity: 0.8;
	cursor: pointer;
	z-index: 1;
}
.liveMovie button::before {
	content:"";
	position: absolute;
	top: 50%;
	left: 73%;
	transform: translate(-50%, -50%);
	width: 0px;
	height: 0px;
	border: 1.2em solid transparent;
	border-left: 2.0em solid #fff;
	box-sizing: border-box;
}
.liveWatch,
.movieInfoWatch {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin-bottom: 40px;
}
.liveWatch .liveNow {
		border-bottom: 1px solid #777;
}
.liveWatch .liveList,
.movieInfoWatch .liveList {
	display: flex;
	align-items: stretch;
	flex-direction: column;
}
.liveWatch .liveList li,
.movieInfoWatch .liveList li {
	padding: 8px 0;
}
.liveWatch .schedule,
.movieInfoWatch .schedule {
	display: flex;
	align-items: center;
	font-size: 15px;
	width: 100%;
	margin-bottom: 10px;
}
.liveWatch .schedule .status,
.movieInfoWatch .schedule .status {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	font-size: 12px;
	color: #fff;
	line-height: 1.0;
	border-radius: 3px;
	margin-right: 10px;
	padding: 3px 0;
}
.liveWatch .schedule .status.new,
.movieInfoWatch .schedule .status.new {
	background: #F39800;
}
.liveWatch .schedule .status.delivered,
.movieInfoWatch .schedule .status.delivered {
	background: #777;
}
.liveWatch .schedule .date,
.movieInfoWatch .schedule .date {
	margin-right: 18px;
}
.liveWatch .liveContents,
.movieInfoWatch .movieInfoContents {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.liveWatch .liveContents .watchBtn,
.movieInfoWatch .movieInfoContents .watchBtn {
	margin-left: 15px;
}
.liveWatch .liveContents .watchBtn a,
.movieInfoWatch .movieInfoContents .watchBtn a {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.4rem;
	font-weight: bold;
	background: #00A08E;
	color: #fff;
	padding: 7px 0;
	border-radius: 15px;
	width: 110px;
}


/* /password
------------------------------------------------------------------ */
.noticeText {
	width: 100%;
	padding: 10px 20px;
	background: #fff;
	border: 2px solid #ff0000;
	margin-bottom: 40px;
}
.noticeText p {
	color: #ff0000;
	font-size: 16px;
	line-height: 1.2;
}
#new_password{
	margin-bottom: 15px;
}
.inputArea {
	width: 95%;
	margin: 0 auto;
}
.inputArea label {
	display: inline-block;
	width: 100%;
	font-size: 18px;
	margin-bottom: 15px;
}
.inputArea input {
	display: inline-block;
	width: 100%;
	border: 3px solid #00A08E;
	height: 65px;
	margin-bottom: 40px;
	font-size: 20px;
	padding-left: 15px;
}
.inputArea input:focus-visible {
	outline: unset;
}
.changePasswordBtn {
	width: fit-content;
	margin: 0 auto;
}
.changePasswordBtn button {
	width: 280px;
	padding: 20px 25px;
	background: #00A08E;
	color: #fff;
	font-weight: bold;
	font-size: 22px;
	line-height: 1.0;
	border-radius: 100vmax;
	margin-bottom: 30px;
}
.selectArea {
	position: relative;
	margin-bottom: 20px;
}
.selectArea::after {
	content: "▼";
	position: absolute;
	right: 18px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	color: #009D85;
	font-size: 18px;
}
.inputArea select {
	display: inline-block;
	width: 100%;
	border: 3px solid #00A08E;
	min-height: 65px;
	background: #E7F4F1;
	font-size: 18px;
	outline: unset;
	padding: 5px 38px 5px 15px;
	white-space: normal;
}
.inputArea select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.passwordNote {
	font-size: 18px;
	width: 95%;
	margin: 0 auto 20px;
}
body.passwardB .contentsWrap.mainContents {
	margin-bottom: 50px;
}
.passwordInfoText{
	width: 95%;
	margin: 0 auto 30px;
	padding-left: 1em;
	text-indent: -1em;
}

/*  menu/investment_products/step/history
------------------------------------------------------------------ */
.historyArea {
	width: 100%;
	margin: 0 auto;
}
.historyArea.wide {
	width: auto;
	margin: 0;
}
.historyWrap .ttlMovie,
.historyWrap .ttlDocument {
	font-size: 15px;
	margin-bottom: 8px;
}
.historyArea .historyListWap {
	font-size: 1.4rem;
	font-weight: 700;
}
.historyArea .historyListWap li:has(ul) {
	display: flex;
	align-items: flex-start;
	flex-direction: column;
	gap: 20px;
	margin-bottom: 20px;
}
.historyArea ul li .historyList {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 15px;
	padding-bottom: 25px;
}
.historyArea ul li .historyList.exam {
	display: flex;
	align-items: center;
}
.historyArea ul li .historyList.exam .point {
	width: 50vw;
	text-align: center;
}
.historyArea ul li .historyList li {
	display: flex;
	align-items: center;
	gap: 15px;
}
.historyArea ul li .historyList li p {
	font-size: 1.8rem;
}
.historyArea ul li .historyList li p span {
	font-size: 1.4rem;
	margin-left: 1em;
}
.ttlTypeA,
.ttlTypeB {
	width: 90px;
	color: #fff;
	border-radius: 5px;
	padding: 8px 0;
	margin-right: 5px;
	font-size: 16px;
	font-weight: normal;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ttlTypeA {
	background: #00A08E;
}
.ttlTypeB {
	background: #F39800;
}
.acBtn {
	position: relative;
}
.acBtn:hover {
	cursor: pointer;
}
.acBtn:after {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 15px;
	content: "▼";
	background: #f39800;
	display: inline-block;
	color: #fff;
	border-radius: 100%;
	width: 24px;
	height: 24px;
	font-size: 18px;
	padding: 3px 0px 0px 3px;
	line-height: 1.0;
	transition: .2s;
}
.acBtn.active:after {
	top: 2px;
	transform: rotate(-90deg) translateX(-50%);
}
.icoS {
	height: 28px;
	margin-right: 5vw;
}
.icoM {
	height: 30px;
	margin-right: 10px;
}

/* progress bar */
.progressArea {
	position: relative;
	width: fit-content;
}
progress {
	-webkit-appearance: none; /* プログレスバーのスタイルをリセット */
	-moz-appearance: none; /* プログレスバーのスタイルをリセット */
	background-color: #DCDDDD; /* プログレスバーの背景色/-moz- 用 */
	position: relative;
	width: 50vw;
	height: 15px;
}
progress:before,
progress:after {
	content: "";
	display: inline-block;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: #000;
	width: 2px;
	height: 20px;
}
progress:before {
	left: 0;
}
progress:after {
	right: 0;
}
.progressA::-webkit-progress-bar { background-color: #DCDDDD; /* プログレスバーの背景色/-webkit- 用 */}
.progressA::-webkit-progress-value { background-color: #00A08E; /* プログレスバーの進捗部分色/-webkit- 用 */}
.progressA::-moz-progress-bar {	background-color: #00A08E; /* プログレスバーの進捗部分色/-moz- 用 */}
.progressB::-webkit-progress-bar { background-color: #DCDDDD; /* プログレスバーの背景色/-webkit- 用 */}
.progressB::-webkit-progress-value { background-color: #f39800; /* プログレスバーの進捗部分色/-webkit- 用 */}
.progressB::-moz-progress-bar {	background-color: #f39800; /* プログレスバーの進捗部分色/-moz- 用 */}

.progressArea .progressWrap {
	position: relative;
}
.progressArea .progressWrap .percentage {
	/* progressのvalue値を取得して位置調整 */
	position: absolute;
	top: 4px;
	left: calc(var(--progress) * 1% - 1em);
	white-space: nowrap;
}
.progressArea:has(~ span .icoS) .progressWrap .percentage {
	left: calc(var(--progress) * 1% - 2.5em);
}
.movieHistory .percentage:after,
.docHistory .percentage:after {
	content: "%";
	font-size: 10px;
}
.examHistory .percentage:after {
	content: "点";
	font-size: 10px;
}
.dlStatus {
	display: flex;
	align-items: center;
	color: #00A08E;
	text-align: center;
	line-height: 1.2;
}


/*  pre_sales_training/index
------------------------------------------------------------------ */
.preDocWrap {
	margin-bottom: 40px;
}
.preDocList ul {
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
}
.preDocList ul li {
	width: calc(50% - 10px);
	height: 42vw;
}
.preDocList ul li a {
	background: #fff;
	border-radius: 5px;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	box-shadow: 1px 1px 2px rgba(35,24,21,.75);
}
.preDocList ul li figure {
	text-align: center;
}
.preDocList ul li figure img {
	margin-bottom: 10vw;
	width: 15vw;
}
.preDocList ul li figcaption {
	text-align: center;
	font-size: min(3.5vw, 16px);
	line-height: 1.4;
	display: flex;
	align-items: center;
	margin-bottom: 15px;
}


/*  pre_sales_training/general_course_exam/index
------------------------------------------------------------------ */
.preGeneralDocList ul {
	width: 100%;
	display: flex;
	justify-content: space-evenly;
	gap:15px;
}
.preGeneralDocList ul li {
	width: 50%;
}
.preGeneralDocList ul li a {
	font-size: min(3.5vw, 16px);
	width: 100%;
	height: 25vw;
	background: #fff;
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 1px 1px 2px rgba(35, 24, 21, .75);
}


/*  pre_sales_training/general_course_exam/basic
------------------------------------------------------------------ */
.preBasicDocList {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 40px 20px;
}	
.preBasicDocList dl {
	width: calc(50% - 10px);
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
}		
.preBasicDocList dl dt {
	margin-bottom: 20px;
}
.preBasicDocList dl dt a {
	position: relative;
	background: #fff;
	border-radius: 10px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: 42vw;
	box-shadow: 1px 1px 2px rgba(35,24,21,.75);
}
.preBasicDocList dl dt a.reading::after {
	display: flex;
	align-items: center;
	justify-content: center;
	content: "読了済み";
	color: #fff;
	font-size: 20px;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 10px;
	background: rgba(159, 160, 160, 0.9);
}
.preBasicDocList dl dt figure {
	display: flex;
	width: 100%;
	height: 100%;
	text-align: center;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.preBasicDocList dl dt figure img {
	margin: 5vw 0;
	width: 15vw;
}
.preBasicDocList dl dt figcaption {
	text-align: center;
	font-size: min(3.5vw, 16px);
	line-height: 1.4;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 0 5px;
	margin-bottom: 15px;
}
a.icoDocDl {
	font-size: 14px;
	background: #fff;
	border: 2px solid #00A08E;
	border-radius: 10px;
	width: 150px;
	margin: 0 auto;
	display: flex;
	padding: 10px 40px 10px 10px;
	align-items: center;
	justify-content: center;
	box-shadow: 1px 1px 2px rgba(35,24,21,.75);
}


/*  pre_sales_training/general_course_exam/BasicTrainingText
------------------------------------------------------------------ */
.basicTrainingTextWrap {
	width: 100%;
	margin: 0 auto;
}
.basicTrainingText {
	background: #fff;
	box-shadow: 1px 1px 2px rgba(35,24,21,.75);
	margin-bottom: 30px;
}
.basicTrainingText p {
	padding: 12px 20px;
	word-break: break-all;
	font-size: min(3.5vw, 16px);
}

.basicTrainingText::-webkit-scrollbar {
	width: 10px;
}
.basicTrainingText::-webkit-scrollbar-track {
	background: #c0c0c0;
}
.basicTrainingText::-webkit-scrollbar-thumb {
	background: #00A08E;
}
.btnReport {
	position: relative;
	background: #fff;
	color: #00A08E;
	border: 2px solid #00A08E;
	border-radius: 100vmax;
	display: flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	min-width: 200px;
	height: 40px;
	margin: 0 auto 20px;
	padding: 0 20px;
}
.btnReport.reading {
	pointer-events: none;
	border: none;
}
.btnReport.reading::after {
	display: flex;
	justify-content: center;
	align-items: center;
	content: "読了済み";
	color: #fff;
	font-size: 20px;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 100vmax;
	background: rgba(159, 160, 160, 1.0);
}

/*  pre_sales_training/reading_completed
------------------------------------------------------------------ */
.trainingCompleteWrap {
	min-height: 450px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.trainingCompleteWrap p {
	font-size: 2.4rem;
	font-weight: bold;
}


/*  menu/investment_products/step/index
------------------------------------------------------------------ */
.stepTitle {
	font-size: 1.8rem;
	font-weight: 700;
	padding: 10px;
	border: 2px solid #00A08E;
	background: #fff;
	margin-bottom: 10px;
	width: 100%;
	margin: 0 auto 40px;
}
.stepTitle span {
	border-left: 2px solid #00A08E;
	display: inline-block;
	padding-left: 20px;
	margin-left: 10px;
}
.tabArea ul {
	display: flex;
	width: 100%;
}
.tabArea ul li {
	background: #00A08E;
	border-radius: 10px 10px 0 0;
	color: #fff;
	width: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 2.6rem;
	height: 60px;
}
.tabArea ul li:has(a) {
	background: #C9CACA;
	color: #727171;
}
.tabArea ul li .movie,
.tabArea ul li .book {
	position: relative;
	padding-left: 50px;
}
.tabArea ul li .movie:before,
.tabArea ul li .book:before {
	display: inline-block;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY( -50%);
	content: "";
	width: 40px;
	height: 40px;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: auto;
	mask-size: auto;
}
.tabArea ul li .movie:before {
	background: url("/lib/img/ico_movie.svg") no-repeat center center / contain;
}
.tabArea ul li .book:before {
	background-color: #fff;
	-webkit-mask-image: url("/lib/img/ico_book.svg");
	mask-image: url("/lib/img/ico_book.svg");
}
.tabArea ul li a {
	text-decoration: none;
}
.tabContent {
	border: 10px solid #00A08E;
	border-radius: 0 0 10px 10px;
	background: #fff;
}


/*  menu/investment_products/step/exam/index
------------------------------------------------------------------ */
.articleArea .description p {
	text-align: center;
	margin-bottom: 30px;
	font-size: 20px;
	line-height: 1.6;
}
.articleArea .description ul {
	font-size: 16px;
	margin: 0 auto 30px;
	width: fit-content;
}
.articleArea .description ul li {
	position: relative;
	padding-left: 20px;
}
.articleArea .description ul li:before {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 100%;
	background: #00A08E;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}
.articleArea .description ul li:not(last-child) {
	margin-bottom: 10px;
}

.btnArea ul {
	display: flex;
	gap: 15px;
	justify-content: center;
}
.btnArea ul li {
	width: 50%;
	max-width: 150px;
}
.btnArea  .btnYes,
.btnArea .btnNo {
	width: 100%;
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 5px;
	font-size: 22px;
	color: #fff;
	padding: 10px 0;
	box-shadow: 1px 1px 2px rgba(35, 24, 21, .75);
}
.btnArea .btnYes {
	background: #E60012;
}
.btnArea .btnNo {
	background: #00A0E9;
}


/*  menu/investment_products/step/exam/question
------------------------------------------------------------------ */
.questionWrap {
	width: 100%;
}
.questionArea {
	display: flex;
	align-items: flex-start;
	flex-direction: column;
	gap: 20px;
	margin-bottom: 30px;
}
.numberColumn {
	display: flex;
	align-items: center;
	gap: 5px;
	width: 100%;
}
.questionNumber {
	color: #fff;
	font-size: 1.8rem;
	background: #00A08E;
	border-radius: 5px;
	width: 97px;
	height: 37px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.questionType {
	width: 35%;
	max-width: 120px;
	padding: 3px 0;
	font-size: 14px;
	color: #ef6d77;
	text-align: center;
	border: 1px solid #ef6d77;
	border-radius: 10px;
}
.questionType.required {
	color: #fff;
	background: #ef6d77;
}
.articleArea .questionText {
	font-size: 16px;
	white-space: wrap;
	width: 100%;
}
.articleArea .questionText p {
	margin-bottom: 40px;
	font-size: 16px;
	word-break: break-all;
	line-height: 1.6;
}
.articleArea .questionImage {
	width: 100%;
	text-align: center;
	margin: 0 auto 30px;
}

.answer {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 15px 35px;
	margin-bottom: 20px;
}
.answer li {
	width: 100%;
}
.answer li label {
	position: relative;
	border: 2px solid #00A08E;
	border-radius: 5px;
	background: #fff;
	display: flex;
	align-items: center;
	gap: 20px;
	width: 100%;
	min-height: 60px;
	margin: 0 auto;
	word-break: break-all;
	cursor: pointer;
	padding: 15px;
	transition: .2s;
}
.answer li span {
	color: #00A08E;
	font-size: 2.5rem;
}
.answer li input[type='radio'] {
	display: none;
}
.answer li input[type="radio"]:checked + label {
	background: #00A08E;
	color: #fff;
}
.answer li input[type="radio"]:checked + label span {
	color: #fff;
}
.answer.checkBox li input[type='checkbox'] {
	display: none;
}
.answer.checkBox li label:has(input[type="checkbox"]:checked) {
	background: #00A08E;
	color: #fff;
}
.answer.checkBox li label:has(input[type="checkbox"]:checked) span {
	color: #fff;
}
.answer li:hover {
	opacity: .7;
}

.answer.trueOrFalse {
	display: flex;
	justify-content: center;
	gap: 15px 35px;
	margin-bottom: 80px;
}
.answer.trueOrFalse li {
	width: unset;
}
.answer.trueOrFalse li label {
	position: relative;
	border: 2px solid #00A08E;
	border-radius: 5px;
	background: #fff;
	display: flex;
	align-items: center;
	gap: 20px;
	width: 60px;
	height: 60px;
	margin: 0 auto;
	word-break: break-all;
	cursor: pointer;
	transition: .2s;
}
.answer.trueOrFalse li:first-child label::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: url(/lib/img/ico_true.png);
	background-size: 100%;
	width: 38px;
	height: 38px;
}
.answer.trueOrFalse li:last-child label::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: url(/lib/img/ico_false.png);
	background-size: 100%;
	width: 38px;
	height: 38px;
}




.btnWrap {
	padding: 0 20px;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 30px 35px;
}
.btnWrap .btnNext {
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	padding: 0 10px 0 15px;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.0;
	color: #fff;
	width: fit-content;
	position: relative;
	width: 130px;
	max-width: 47%;
	height: 50px;
	background: #F39800;
}
.btnWrap .btnNext::after {
	content: "";
	position: absolute;
	right: -40px;
	border-left: 16px solid #F39800;
	border-top: 24px solid transparent;
	border-right: 24px solid transparent;
	border-bottom: 24px solid transparent;
}
.btnWrap .btnNext.inactive {
	background: #9FA0A0;
	border: unset;
}
.btnWrap .btnNext.inactive::after {
	border-left: 16px solid #9FA0A0;
}
.btnWrap .btnPrev {
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	padding: 0 15px 0 10px;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.0;
	color: #fff;
	width: fit-content;
	position: relative;
	width: 130px;
	max-width: 47%;
	height: 50px;
	background: #F39800;
}
.btnWrap .btnPrev::after {
	content: "";
	position: absolute;
	left: -40px;
	border-right: 16px solid #F39800;
	border-top: 24px solid transparent;
	border-left: 24px solid transparent;
	border-bottom: 24px solid transparent;
}
.naviBtn {
	width: 100%;
	display: flex;
	justify-content: center;
	gap: 35px;
}
.stopbtn {
	width: 220px;
	height: 50px;
	border: 2px solid #00A08E;
	border-radius: 25px;
	font-size: 20px;
	color: #00A08E;
}
.pager {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
}
.pager ul {
	display: flex;
	flex-wrap: wrap;
	background: #fff;
	width: fit-content;
	position: relative;
	border-radius: 6px;
}
.pager .prev {
	content: "";
	display: inline-block;
	background: #00A08E;
	height: calc(tan(60deg) * 24px / 2);
	width: 16px;
	clip-path: polygon(0 50%, 100% 0, 100% 100%);
}
.pager .next {
	content: "";
	display: inline-block;
	background: #00A08E;
	height: calc(tan(60deg) * 24px / 2);
	width: 16px;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.pager ul li {
	width: calc(100% / 10);
	border: 1px solid #ccc;
	text-align: center;
}
.pager ul li:nth-child(1),
.pager ul li:nth-child(1) a,
.pager ul li:nth-child(11),
.pager ul li:nth-child(11) a {
	border-radius: 5px 0 0 5px;
}
.pager ul li:nth-child(10),
.pager ul li:nth-child(10) a,
.pager ul li:nth-child(20),
.pager ul li:nth-child(20) a {
	border-radius: 0 5px 5px 0;
}
.pager ul li:nth-child(-n+10) {
	margin-bottom: 10px;
}
.pager ul li {
	text-decoration: none;
	padding: 6px 8px;
	display: inline-block;
	font-size: 12px;
	color: #ccc;
}
.pager ul li.fin {
	background: #00A08E;
	color: #fff;
}
.pager ul li.current {
	background: #00A08E;
	color: #fff;
	pointer-events: none;
}
.pager ul li:not(:nth-child(10n)) {
	border-right: 1px solid #ccc !important;
}

#stopModal {
	display: none;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99;
}
.stopModalContent {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	background: rgba( 0, 0, 0, .6)
}
.stopModalContent .modalBox {
	width: 90vw;
	background: #fff;
	padding: 60px 40px;
	z-index: 1;
	transform: scale(0);
	transition: transform 0.5s ease;
}
#stopModal.active .stopModalContent .modalBox {
	transform: scale(1.0);
}
.stopModalContent .modalText {
	font-size: min(3.8vw, 24px);
	font-weight: bold;
	text-align: center;
	line-height: 1.2;
	margin-bottom: 9vw;
}
.stopModalContent .modalText span {
	color: #F39800;
}
.btnText {
	font-size: min(2.8vw, 18px);
	font-weight: bold;
	text-align: center;
	line-height: 1.2;
	margin-bottom: 30px;
}
#stopModalOverlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
	z-index: 0;
}


/*  menu/investment_products/step/exam/answer
------------------------------------------------------------------ */
.finish {
	width: 150px;
	height: 50px;
	align-items: center;
	border-radius: 5px;
	font-size: 20px;
	color: #fff;
	padding: 10px 0;
	background: #E60012;
	box-shadow: 1px 1px 2px rgba(35, 24, 21, .75);
}
.menuStepExamAnswer .examWrap {
	min-height: 250px;
}
.menuStepExamAnswer p {
	font-size: 20px;
	line-height: 1.5;
	margin-bottom: 30px;
}


/*  menu/investment_products/step/exam/commentary
------------------------------------------------------------------ */
.judge {
	margin: 0 auto ;
	display: flex;
	align-items: center;
	justify-content: start;
	margin-bottom: 20px;
}
.judge p {
	font-size: 18px;
	width: 85px;
	display: flex;
	justify-content: center;
	text-align: center;
	line-height: 1.2;
}
.judge .choiced {
	width: calc(100% - 85px);
	padding: 10px 15px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.judge .choiced span {
	color: #00A08E;
	font-size: 18px;
	font-weight: 600;
	display: inline-block;
	margin-right: 20px;
}
.judge .choiced p {
	width: unset;
	word-break: break-all;
	font-size: 16px;
	line-height: 1.2;
	justify-content: start;
	text-align: left;
}
.commentary {
	margin: 0 auto 50px;
	font-size: 16px;
	line-height: 1.4;
	word-break: break-all;
}
.commentaryImage {
	width: 100%;
	text-align: center;
	margin: 0 auto 30px;
}
.btnRev {
	font-size: 1.1rem;
	font-weight: 900;
	border: 2px solid #00A08E;
	border-radius: 100vmax;
	color: #00A08E;
	width: 56px;
	height: 25px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: auto;
}


/*  menu/investment_products/step/exam/result
------------------------------------------------------------------ */
.resultWrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 15px;
}
.resultArea {
	width: 95%;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: 5px;
	margin-bottom: 80px;
}
.scoreArea {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 25px;
}
.scoringResult {
	font-size: 18px;
	text-align: right;
}
.score {
	font-size: 38px;
	font-weight: bold;
}
.score span {
	font-size: 50px;
	font-weight: bold;
}
.judgment {
	text-align: center;
}
.judgment p {
	color: #E60012;
	font-size: 24px;
	font-weight: bold;
}
.issued {
	position: absolute;
	right: 0;
	top: 65px;
	width: 140px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 5px;
	font-size: 14px;
	color: #fff;
	padding: 8px;
	background: #E60012;
}
.result {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	width: 100%;
}
.result ul li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
	gap: 10px;
}
.result ul li dl {
	width: 70%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 5px;
	font-size: 12px;
}
.result ul li dl dt {
	width: 32%;
	background: #00A08E;
	color: #fff;
	border-radius: 5px;
	padding: 8px 0;
	text-align: center;
	margin-right: 5px;
}
.result ul li dl dd {
	width: 17%;
	background: #DCDDDD;
	color: #fff;
	border-radius: 5px;
	padding: 8px 0;
	text-align: center;
}
.result .btnWrap {
	width: 30%;
}
.btnExplanation {
	width: 100%;
	display: inline-block;
	font-size: 12px;
	text-align: center;
	color: #fff;
	background: #727171;
	padding: 8px 0;
	border-radius: 5px;
}	
.result ul li dl dd.chose {
	background:#E60012;
}
body.menuStepExamCommentary .examWrap {
	position: relative;
	padding: 20px 15px;
}
body.menuStepExamCommentary .btnRev {
	position: absolute;
	right: 12px;
	bottom: 8px;
	width: 120px;
	height: 28px;
	font-size: 1.2rem;
}


/*  materials_dl
------------------------------------------------------------------ */	
.materialsList {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	gap: 35px;
	margin-bottom: 40px;
}
.materialsList li {
	background: #fff;
	padding: 30px 15px;
	border: 1px solid #a7d7ce;
}
.ttlMaterials {
	font-size: 18px;
	color: #00A08E;
	padding-bottom: 0px;
	border-bottom: 2px solid #00A08E;
	margin-bottom: 25px;
	font-weight: 600;
	order: 2;
}
.ttlMaterials span {
	background: #E7F4F1;
	padding: 6px 8px;
	margin-right: 5px;
	display: inline-block;
}
.materialsInfo {
	display: flex;
	flex-direction: column;
}
.thumbNaterials {
	max-width: 60%;
	margin: 0 auto 30px;
	order: 1;
}
.txtNaterials {
	word-break: break-all;
	order: 3;
}
.txtNaterials p {
	font-size: 16px;
	line-height: 1.4;
	margin-bottom: 20px;
}
a.icoMaterialDl {
	font-size: 18px;
	color: #00A08E;
	background: #fff;
	border: 2px solid #00A08E;
	border-radius: 30px;
	width: 220px;
	margin: 0 auto;
	display: flex;
	padding: 15px 0;
	align-items: center;
	justify-content: center;
	position: relative;
	order: 4;
}


/*  PDFビューワー
------------------------------------------------------------------ */
.fileDownload .contentsWrap {
	width: 100%;
	height: 100%;
	max-width: unset;
	padding: 0;
	margin: 0;
	overflow: hidden;
}
.fileDownload .mainContents {
	height: 100%;
}
.fileDownload iframe.viewer {
	height: 100%;
}


/*  fp_navi
------------------------------------------------------------------ */
body.fpNavi .articleArea .description p {
	font-size: 20px;
	margin-bottom: 30px;
}
.fpInfoText {
	width: 100%;
	margin: 30px 0;
}
.fpInfoText ul {
	margin-bottom: 20px;
}
.fpInfoText li {
	line-height: 1.2;
	text-indent: -1em;
	padding-left: 1em;
}
.fpInfoText p {
	padding-left: 1em;
}
body.fpNavi .warningText{
	margin: 0;
}


/* password_reset
------------------------------------------------------------------ */
body.passwordResetComplete .column {
	height: 200px;
}
body.passwordResetComplete .articleArea {
	margin: auto;
}
body.passwordReset .articleArea {
	margin: 0 auto;
}
.resetBtnWrap {
	width: 100%;
	display: flex;
}
.resetBtnWrap button {
	background: #00A08E;
	color: #FFF;
	font-size: 22px;
	font-weight: bold;
	width: 280px;
	display: inline-block;
	border-radius: 30px;
	cursor: pointer;
	position: relative;
	padding: 20px 25px;
	line-height: 1;
	margin: 0 auto;
}
.resetQuestionText {
	font-size: 20px;
	line-height: 1.5;
	text-align: center;
	margin-bottom: 30px;
}

/* リセット完了画面テキスト */
body.passwordResetComplete .resetCompleteText {
	font-size: 18px;
}
body.passwordReset #toggle,
body.passwordResetComplete #toggle {
	display: none;
}


/* /survey
------------------------------------------------------------------ */
.surveyTopFlex {
	margin-bottom: 40px;
}
.surveyTopFlex li {
	margin-bottom: 35px;
}
.surveyTopFlex ul li:last-child {
	margin-bottom: 0;
}
.surveyTopFlex .surveyColumn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}
.surveyTopFlex .surveyTitle {
	position: relative;
	display: flex;
	align-items: center;
	font-size: 16px;
	margin-bottom: 15px;
}
.surveyTopFlex .surveyTitle.new::before {
	display: inline-block;
	content: "NEW";
	font-size: 12px;
	color: #fff;
	background: #F39800;
	width: 50px;
	padding: 4px 0;
	text-align: center;
	border-radius: 3px;
	margin-right: 10px;
}
.surveyTopFlex .date {
	font-size: 16px;
}
.surveyTopFlex .startBtn button {
	background: #00A08E;
	color: #fff;
	font-size: 16px;
	line-height: 1.0;
	padding: 8px 0;
	border-radius: 20px;
	width: 110px;
}
.surveyTopFlex .fin button {
	background: #777;
	color: #fff;
	font-size: 16px;
	line-height: 1.0;
	padding: 8px 0;
	border-radius: 20px;
	width: 110px;
	pointer-events: none;
}
.answer li:has(textarea) {
	width: 100%;
}
.answer li label.text {
	padding: 0;
	box-sizing: content-box;
}
.answer li label.text textarea {
	width: 100% !important;
	border: unset;
	outline: unset;
	font-size: 16px;
}

/*  survey/confirm
------------------------------------------------------------------ */
.surveyConfirm {

}
.confirmAns {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 15px 35px;
	margin-bottom: 50px;
}
.confirmAns li {
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 15px 0;
	word-break: break-all;
}
.confirmAns li span {
	color: #00A08E;
	font-size: 2.5rem;
}

/*  survey/complete
------------------------------------------------------------------ */
body.surveyComplete p {
	font-size: 16px;
	line-height: 1.4;
}


/*  survey/entry
------------------------------------------------------------------ */
body.surveyEntry p {
	font-size: 16px;
	line-height: 1.4;
}


/*  survey/input
------------------------------------------------------------------ */
body.surveyInput .articleArea .questionText {
	display: flex;
	flex-direction: column;
}
body.surveyInput .btnwrap {
	margin-top: auto;
}

.inactive {
	pointer-events: none;
	color: #9FA0A0;
}

.totalQuestions {
	text-align: center;
	margin-top: 20px;
}

/*  /contact
------------------------------------------------------------------ */
body.contact .btnLogoutWrap {
	display: none;
}
body.contact #toggle {
	display: none;
}
body.contact .revTop,
body.passwordReset .revTop {
	margin-top: 25px;
}


/*  /password_registered
------------------------------------------------------------------ */
body.passwardRegistered .articleArea.vCenter {
	flex-direction: row;
}
body.passwardRegistered p {
	font-size: 18px;
}

/*  /info_movie
------------------------------------------------------------------ */
body.infoMovie .articleArea.vCenter {
	width: 100%;
}
body#linkSelect .menu ul li a {
	position: relative;
	padding: 10px 10px 10px 65px;
	font-size: min(3.0vw, 22px);
	justify-content: left;

}
body#linkSelect .menu ul li a::before {
	content: "";
	position: absolute;
	display: inline-block;
	width: 44px;
	height: 44px;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	background-size: cover;
	border-radius: 8px;
}
.select_icoA::before { background: url(/lib/img/icon/ico_select_a.png) center center no-repeat;}
.select_icoB::before { background: url(/lib/img/icon/ico_select_b.png) center center no-repeat;}
.select_icoB_green::before { background: url(/lib/img/icon/ico_select_b_green.png) center center no-repeat;}
.select_icoC::before { background: url(/lib/img/icon/ico_select_c.png) center center no-repeat;}
.select_icoC_orange::before { background: url(/lib/img/icon/ico_select_c_orange.png) center center no-repeat;}
.select_icoD::before { background: url(/lib/img/icon/ico_select_d.png) center center no-repeat;}
.select_icoE::before { background: url(/lib/img/icon/ico_select_e.png) center center no-repeat;}
.select_icoE_orange::before { background: url(/lib/img/icon/ico_select_e_orange.png) center center no-repeat;}
.select_icoF::before { background: url(/lib/img/icon/ico_select_f.png) center center no-repeat;}
.select_icoG::before { background: url(/lib/img/icon/ico_select_g.png) center center no-repeat;}
.select_icoH::before { background: url(/lib/img/icon/ico_select_h.png) center center no-repeat;}
.select_icoP::before { background: url(/lib/img/icon/ico_select_p.png) center center no-repeat;}
.select_icoQ::before { background: url(/lib/img/icon/ico_select_q.png) center center no-repeat;}
.select_icoQ_green::before { background: url(/lib/img/icon/ico_select_q_green.png) center center no-repeat; }
.select_icoS::before,
.select_icoR::before { background: url(/lib/img/icon/ico_select_p_orange.png) center center no-repeat;}

body.linkSelect4 .select_icoI,
body.linkSelect4 .select_icoJ,
body.linkSelect4 .select_icoL,
body.linkSelect4 .select_icoM,
body.linkSelect4 .select_icoE,
body.linkSelect4 .select_icoN,
body.linkSelect4 .select_icoO {
	background: #fff!important;
	padding: 0!important;
	justify-content: center!important;
}
body.linkSelect4 .select_icoI::before,
body.linkSelect4 .select_icoJ::before,
body.linkSelect4 .select_icoL::before,
body.linkSelect4 .select_icoM::before,
body.linkSelect4 .select_icoE::before,
body.linkSelect4 .select_icoN::before,
body.linkSelect4 .select_icoO::before {
	display: none!important;
}

body.linkSelect4 .select_icoI {
	border: 2px solid #006428!important;
}
body.linkSelect4 .select_icoJ {
	border: 2px solid #cc7eb2!important;
}
body.linkSelect4 .select_icoL {
	border: 2px solid #65aadd!important;
}
body.linkSelect4 .select_icoM {
	border: 2px solid #bf7e39!important;
}
body.linkSelect4 .select_icoE {
	border: 2px solid #9fa0a0!important;
}
body.linkSelect4 .select_icoN,
body.linkSelect4 .select_icoT {
	border: 8px solid #a8d9cf!important;
	padding: 0!important;
	justify-content: center !important;
	z-index: 1;
}
body.linkSelect4 .select_icoN::after,
body.linkSelect4 .select_icoT::after {
  content: "";
  position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	background: #fff;
	border: 2px solid #009c84;
	z-index: -1;
}
body.linkSelect4 .select_icoO,
body.linkSelect4 .select_icoU {
	border: 8px solid #fde2a9!important;
	padding: 0!important;
	justify-content: center !important;
	z-index: 1;
}
body.linkSelect4 .select_icoO::after,
body.linkSelect4 .select_icoU::after {
  content: "";
  position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	background: #fff;
	border: 2px solid #f9b815;
	z-index: -1;
}


/* contactpage */
body.contactLink .pageTitle {
	border-bottom: 4px solid #00A08E;
}
body.contactLoginLink .titleA {
	text-align: center;
}
body.contactLoginLink .titleA span {
	padding: 0;
	justify-content: center;
}
body.contactLoginLink .titleA span::before {
	display: none;
}
body.contactLink #toggle {
	display: none;
}
.contactText {
	font-size: 14px;
	font-weight: bold;
	line-height: 1.6;
}
.contactText.mb40 {
	margin-bottom: 40px;
}
.contactText.mb80 {
	margin-bottom: 80px;
}
.contactText.right {
	text-align: right;
}
.contactBtnWrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}
.contactBtnWrap a {
	margin: 0;
}
.contactBtnWrap .contactBtn {
	width: fit-content;
}
.contactBtnWrap .contactBtn a {
	background: #00A08E;
	color: #fff;
	border: 2px solid #00A08E;
	border-radius: 100vmax;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	text-align: center;
	min-width: 200px;
	height: 40px;
	padding: 0 20px;
}

/*  /error
------------------------------------------------------------------ */
body.error .btnLogoutWrap {
	display: none;
}
body.error #toggle {
	display: none;
}
::-ms-reveal {
  display: none;
}