@charset "utf-8";

/*-----------------------------
 common
-------------------------------*/
:root{
	--basic : #006ce1; /*基本色 var(--basic)*/
	--gray1 : #666666; /*濃グレーバック var(--gray1)*/
	--gray2 : #F7F7F7; /*薄グレーバック var(--gray2)*/
	--border: #D3D3D3; /*ボーダー var(--border)*/
}

html {
	scroll-behavior: smooth;
	/*scroll-padding-top: 60px;*/
/**/}
html[lang="ja"] {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", Meiryo, sans-serif;
	letter-spacing: 0.05em;
}
@media (width < 768px) {
	html {
		font-size: calc(100vw / 375 * 16); /* 16px相当 */
	}
}
@media (768px <= width) {
	html {
		font-size: 18px;
		scroll-padding-top: 76px;
	}
}

body {
	font-feature-settings: "palt";
	color: #000000;
	font-weight: 400;
	text-align: left;
	/*margin: 60px auto 0;*/
	background: #e3e3e3;
}
@media (768px <= width) {
	body {
		/*margin: 76px auto 0;*/
	}
}

:focus {
	outline: none;
}
:focus-visible {
	outline: 1px #0017C7 solid;
}
div.pdfemb-viewer {
	z-index: 1;
}

#root {
	/*overflow: hidden;*/
}

.wrap {
	margin: 0 auto;
	position: relative;
	overflow: hidden;
}
.wrap .mincho {
	font-family: 'Yu Mincho','YuMincho', serif;
}
.wrap * {
	box-sizing: border-box;
}
.contentWrap {
	max-width: 1200px;
	margin: 0 auto;
}
.contentWrap img {
	max-width: 100%;
	height: auto;
}
.contentWrap a,
.contentWrap a::before,
.contentWrap a::after,
.contentWrap a img {
	text-decoration: underline;
	color: #0017C7;
	-webkit-transition: all 0.3s ease-out;
		 -moz-transition: all 0.3s ease-out;
			-ms-transition: all 0.3s ease-out;
			 -o-transition: all 0.3s ease-out;
					transition: all 0.3s ease-out;
}
.contentWrap a:hover {
	text-decoration: none;
}
.contentWrap a:hover img {
	opacity: 0.8;
}

.contentWrap p {
	line-height: 2;
}
.contentWrap p + p {
	margin-top: 1em;
}
.contentWrap em {
	font-style: normal;
	letter-spacing: 0.03em;
}
.contentWrap sup {
	font-size: 60%;
	vertical-align: text-top;
}
.contentWrap p small {
	font-size: 70%;
}
.contentWrap .center {
	text-align: center !important;
}
.contentWrap .left {
	text-align: left !important;
}
.contentWrap .right {
	text-align: right !important;
}
.contentWrap .note {
	font-size: 80%;
	text-align: left;
	margin-top: 1em;
}
.contentWrap .note li {
	margin-left: 1em;
	text-indent: -1em;
	line-height: 1.8;
}

.flex {
	display: flex;
}
.flex.item2 {
	flex-wrap: wrap;
	gap: 20px;
	& > li {
    width: calc((100% - 20px * 1) / 2);
	}
}
.flex.item3 {
	flex-wrap: wrap;
	gap: 19px;
	& > li {
    width: calc((100% - 19px * 2) / 3);
	}
}
.flex.item4 {
	flex-wrap: wrap;
	gap: 12px;
	& > li {
    width: calc((100% - 12px * 3) / 4);
	}
}
@media (width < 768px) {
	.flex.item2.sp1 li,
	.flex.item3.sp1 li,
	.flex.item4.sp1 li {
		width: 100%
	}
	.flex.item3.sp2 li,
	.flex.item4.sp2 li {
		width: calc((100% - 19px * 1) / 2);
	}
}
.flex.btn {
	justify-content: center;
}
.flex.btn li {
	margin: 0 2%;
}
.imgArea > div {
	display: table-cell;
	vertical-align: middle;
	margin: 0;
}

.required {
	color: #EB0000;
	font-weight: 400;
}

.accordion dt {
	-webkit-transition: all 0.3s ease-out;
		 -moz-transition: all 0.3s ease-out;
			-ms-transition: all 0.3s ease-out;
			 -o-transition: all 0.3s ease-out;
					transition: all 0.3s ease-out;
}
.accordion dt:hover {
	opacity: 0.9;
	cursor: pointer;
}

.pagetop {
  display: none;
  position: fixed;
  bottom: 50px;
  right: 40px;
  z-index: 5;
}
.pagetop a {
  position: relative;
  display: block;
	border: rgba(255,255,255,0.5) 1px solid;
	border-radius: 30px;
  width: 50px;
  height: 50px;
	background-color: #000000;
	padding-top: 26px;
	text-align: center;
	text-decoration: none;
}
.pagetop a span {
	display: none;
}
.pagetop a::after, .pagetop a::before {
  content: "";
  position: absolute;
  top: 40%;
  left: 50%;
  width: 2px;
  height: 14px;
  background-color: #fff;
  -webkit-transform-origin: 0 top;
  transform-origin: 0 top;
	-webkit-transition: all 0.3s ease-out;
		 -moz-transition: all 0.3s ease-out;
			-ms-transition: all 0.3s ease-out;
			 -o-transition: all 0.3s ease-out;
					transition: all 0.3s ease-out;
}
.pagetop a::after {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.pagetop a::before {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.pagetop a:hover {
  opacity: 0.8;
}
.pagetop a:hover::after, .pagetop a:hover::before {
  top: 35%;
}

@media (width < 768px) {
	.pc {
		display:none !important;
	}
	.pagetop {
		bottom: 80px;
		right: 20px;
  }
  .pagetop a {
		width: 40px;
		height: 40px;
		padding: 0;
  }
	.pagetop a span {
		display: none;
	}
  .pagetop a::after, .pagetop a::before {
		top: 14px;
		width: 1px;
		height: 14px;
  }
	.contentWrap p {
		letter-spacing: 0.01em;
	}
	.contentWrap em {
		letter-spacing: 0.03em;
	}
}
@media (768px <= width) {
	.sp {
		display:none !important;
	}
}



/*-----------------------------
Header
-------------------------------*/
#header {
  width: 100%;
	position: relative;
	background-color: #000000;
	& h1 {
		margin: 0;
	}
}
#header .contentWrap {
	max-width: 1600px;
}



/*-----------------------------
Footer
-------------------------------*/
footer {
	width: 100%;
	padding: 0;
	background: #000;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
footer #footer-inner {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 23px 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
footer img {
	width: 100%;
	max-width: 116px;
	height: auto;
}
footer small {
	text-align: right;
	color: #fff;
	font-size: 12px;
}

@media screen and (max-width: 749px) {
	footer {
		width: 100%;
		padding: 0;
		background: #000;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	footer #footer-inner {
		width: 100%;
		margin: 0 auto;
		padding: 20px 6.7%;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
	}
	footer img {
		width: 100%;
		max-width: 92px;
		height: auto;
	}
	footer small {
		text-align: right;
		color: #fff;
		font-size: 10px;
	}
}



/*-----------------------------
section setting
-------------------------------*/
section {
	padding: 0 5%;
}
h1 {
	margin: 1.875rem auto 0;
	font-size: 2.8125rem;
	letter-spacing: 0.02em;
	font-weight: 700;
	line-height: 1;
	/*word-break: keep-all;
	text-wrap: balance;*/
}
h1 span {
	display: inline-block;
}
h2 {
	text-align: center;
	font-size: 58px;
	font-weight: 900;
	line-height: 1;
	word-break: auto-phrase;
	padding-top: 1em;
	margin-bottom: 1em;
	& span {
		display: inline-block;
		background: linear-gradient(90deg, #b200ff 0%, #8775ff 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
}
h3 {
	text-align: center;
	font-size: 34px;
	font-weight: 700;
	line-height: 1.5;
	word-break: auto-phrase;
	margin-bottom: 0.5em;
	& span {
		display: inline-block;
		background: linear-gradient(90deg, #b200ff 0%, #8775ff 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
}
h4 {
	font-size: 1.25rem;
	line-height: 2.2;
	word-break: auto-phrase;
}

p.lead {
	text-align: center;
	font-size: 116%;
	font-weight: 700;
}

u {
	font-weight: 700;
	text-decoration: underline 3px;
}
@media (width < 768px) {
	h1 {
		margin: 0 auto 2rem;
	}
	section h1 {
		font-size: 1.5625rem;
	}
	section h2 {
		font-size: 1.5rem;
	}
	section h3 {
		font-size: 1.3rem;
	}
	section h4 {
		font-size: 1.2rem;
	}
	p.lead {
		font-size: 1.1rem;
	}
}

/* -----------------Margin---------------------- */
.mb10 {
	margin-bottom: 10px !important;
}
.mb30 {
	margin-bottom: 30px !important;
}
.mb50 {
	margin-bottom: 50px !important;
}
.mb60 {
	margin-bottom: 60px !important;
}
.mb100 {
	margin-bottom: 100px !important;
}
@media (width < 768px) {
	.mb10 {
		margin-bottom: 4% !important;
	}
	.mb30 {
		margin-bottom: 10% !important;
	}
	.mb50 {
		margin-bottom: 13% !important;
	}
	.mb60 {
		margin-bottom: 20% !important;
	}
	.mb100 {
		margin-bottom: 26% !important;
	}
}
.mt10 {
	margin-top: 10px !important;
}
.mt30 {
	margin-top: 30px !important;
}
.mt50 {
	margin-top: 50px !important;
}
.mt60 {
	margin-top: 60px !important;
}
.mt100 {
	margin-top: 100px !important;
}
@media (width < 768px) {
	.mt10 {
		margin-top: 4% !important;
	}
	.mt30 {
		margin-top: 10% !important;
	}
	.mt50 {
		margin-top: 13% !important;
	}
	.mt60 {
		margin-top: 20% !important;
	}
	.mt100 {
		margin-top: 26% !important;
	}
}



/* -----------------Button---------------------- */
a.btn {
	display: inline-block;
	text-align: left;
	color: #000;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 2.2;
	text-decoration: none !important;
	padding: 1em 4.5em 1em 2.5em;
	margin-top: 10px;
	background-image: url("../images/icon-btn.svg");
	background-repeat: no-repeat;
	background-position: center right 2.5em;
	background-color: var(--gray2);
	border-radius: 5px;
}
a.btn:hover {
	cursor: pointer;
	background-position: center right 2em;
	opacity: 0.8;
}

#header a.btn {
	background-color: var(--other) !important;
	line-height: 1;
	padding: 1.25em 1em 1.25em 1em !important;
	white-space: nowrap;
	margin: 0;
}
::-webkit-full-page-media, :future, :root #header a.btn {
	padding: 0.8em 1em!important;
}
#contact a.btn,
#contact a.btn[target="_blank"] {
	background-color: var(--contact) !important;
}
a.btn.no-icon {
	background-image: none !important;
	padding: 1em 2.5em 1em 2.5em !important;
}
.contentWrap a.btn.blank,
.contentWrap a.btn[target="_blank"] {
	padding: 1em 3.5em 1em 2.5em;
	background-image: url("../images/icon_blank.svg");
	background-repeat: no-repeat;
	background-position: center right 1.5em;
	background-color: var(--gray2);
}
.contentWrap a.btn.blank:after,
.contentWrap a.btn[target="_blank"]:after {
	display: none;
}
.contentWrap a.btn[href$=".xlsx"],
.contentWrap a.btn[href$=".xlsm"],
.contentWrap a.btn[href$=".xls"] {
	padding: 0.5em 3.5em 0.5em 2.5em;
	background-image: url("../images/icon_download.svg");
	background-repeat: no-repeat;
	background-position: center right 1.5em;
	background-color: var(--education);
}
.contentWrap a.btn[href$=".xlsx"]:after,
.contentWrap a.btn[href$=".xlsm"]:after,
.contentWrap a.btn[href$=".xls"]:after {
	display: none;
}
.contentWrap a.btn[href$=".pdf"] {
	padding: 0.5em 3.5em 0.5em 2.5em;
	background-image: url("../images/icon_paper.svg");
	background-repeat: no-repeat;
	background-position: center right 1.5em;
	background-color: var(--education);
}
.contentWrap a.btn[href$=".pdf"]:after {
	display: none;
}
a.btn.narrow {
	padding: 0.5em 3em 0.5em 1.5em !important;
	background-position: center right 1em !important;
}
a.btn.blank.narrow,
.contentWrap a.btn.narrow[target="_blank"] {
	padding: 0.5em 3em 0.5em 1.8em !important;
	background-position: center right 1em !important;
}
a.btn.no-icon.narrow {
	background-image: none !important;
	padding: 0.5em 2em 0.5em 2em !important;
}

.contentWrap a[target="_blank"] {
	padding-right: 1.2em;
	background-image: url("../images/icon_blank.svg");
	background-repeat: no-repeat;
	background-position: center right;
	background-size: auto 60%;
}

@media (width < 768px) {
	a.btn {
		font-size: 1rem;
		padding: 1.15em 3.5em 1.15em 1.5em;
		background-position: center right 1em;
	}
	a.btn:hover {
		background-position: center right 1em;
	}
}


/* -----------------Share---------------------- */
.line {
	margin-top: 1.875rem;
	border-bottom: 1px var(--border) solid;
}
.linedot {
	margin-top: 1.875rem;
	border-bottom: 1px var(--border) dashed;
}
.txtbox {
	background-color: var(--gray2);
	padding: 1.25rem;
	margin-top: 1.875rem;
	& .header {
		background-color: var(--gray1);
		padding: 0.5em;
		color: #fff;
		font-weight: 700;
		line-height: 2.2;
	}
}
.table {
	margin-top: 1rem;
	border-collapse: collapse;
	border: 1px var(--border) solid;
	& th, & td {
		padding: 1em;
		border: 1px var(--border) solid;
		line-height: 2.2;
	}
	& thead th {
		background-color: var(--gray1);
		color: #fff;
	}
}
.table.striped {
	& th, & td {
		border-top: none;
		border-bottom: none;
	}
	& tr:nth-child(even) {
		background-color: var(--gray2);
	}
}
@media (width < 768px) {
  .table {
    display: block;
    overflow-x: scroll;
    white-space: nowrap;
  }
  .table .fixed {
    position: sticky;
    left: 0;
  }
}

.imgbox {
	max-width: 900px;
	margin: 0.625rem auto 0;
}
.imgbox2 {
	display: flex;
	margin: 0.625rem auto 0;
	flex-wrap: wrap;
	gap: 20px;
	& > li {
    width: calc((100% - 20px * 1) / 2);
	}
}
.imgbox3 {
	display: flex;
	margin: 0.625rem auto 0;
	flex-wrap: wrap;
	gap: 19px;
	& > li {
    width: calc((100% - 19px * 2) / 3);
	}
}
.imgbox4 {
	display: flex;
	margin: 0.625rem auto 0;
	flex-wrap: wrap;
	gap: 12px;
	& > li {
    width: calc((100% - 12px * 3) / 4);
	}
}
.imgbox-txt-left,
.imgbox-txt-right {
	display: flex;
	margin: 0.625rem auto 0;
	flex-wrap: wrap;
	gap: 20px;
	& > li {
    width: calc((100% - 20px * 1) / 2);
	}
}
@media (width < 768px) {
	.imgbox-txt-left li,
	.imgbox-txt-right li {
		width: 100%
	}
}

.articlebox {
	background-color: #ffffff;
	border: #8775ff 1px solid;
	border-radius: 10px;
	padding: 1em 2em;
	& ul {
		width: auto;
		margin: auto;
		font-size: 1.1rem;
		& li {
			margin-left: 1em;
			text-indent: -1em;
		}
	}
}
.articlebox.flex {
	& h3 {
		padding-right: 1em;
	}
	@media (width < 768px) {
		display: block;
	}
}

.box {
	background-color: #ffffff;
	border: #8775ff 1px solid;
	padding: 3.5em 2em 2em;
	position: relative;
	margin-bottom: 2em;
	&::before {
		content: "";
		display: block;
		width: 100%;
		height: 2em;
		background: linear-gradient(90deg, #b200ff 0%, #8775ff 100%);
		position: absolute;
		top: 0; left: 0;
	}
	& ul {
		width: auto;
		margin: auto;
		font-size: 1.1rem;
		list-style: disc;
		& li {
			margin-left: 1em;
		}
	}
	& ul.note {
		list-style: none;
	}
}

.midasi {
	position: relative;
	text-align: center;
	font-size: 1.5rem;
	line-height: 1.5;
	word-break: auto-phrase;
	margin-bottom: -1em;
	&::after {
		content: "";
		display: block;
		width: 100%;
		height: 1px;
		background: #000000;
		position: absolute;
		margin: auto;
		top: 0; bottom: 0;
		left: 0; right: 0;
	}
	& span {
		display: inline-block;
		background: #e3e3e3;
		padding: 0 1em;
		position: relative;
		z-index: 1;
	}
	@media (width < 768px) {
		font-size: 1.1rem;
		padding: 0 2em;
		margin-bottom: 0;
	}
}

.videowrap {
	max-width: 768px;
	margin: 0.625rem auto 0;
	& .video {
		width: 100%;
		aspect-ratio: 16 / 9;
		& iframe {
			width: 100%;
			height: 100%;
		}
	}
	& .caption {
		margin-top: 0;
		line-height: 2.2;
	}
}



/*-----------------------------
FAQ
-------------------------------*/
#qa {
	padding: 0;
}
#qa .contentWrap {
  max-width: 1110px;
  padding: 0 3% 3%;
}
#qa dl {
	background-color: rgba(255,255,255,1.00);
	border-radius: 10px;
	padding: 1.25em;
	& + dl {
		margin-top: 1.25em;
	}
	& dt {
		border-bottom: 2px #a0a0a0 solid;
		padding-bottom: 1.25em;
		font-weight: bold;
		position: relative;
		padding-left: 3em;
		& span {
			content: "";
			display: inline-block;
			font-size: 2em;
			font-weight: bold;
			color: #0B57A0;
			position: absolute;
			left: 0;
			top: -0.4em;
		}
	}
	& dd {
		padding-top: 1.25em;
		position: relative;
		padding-left: 3em;
		& span {
			content: "";
			display: inline-block;
			font-size: 2em;
			font-weight: bold;
			color: #CC26D5;
			position: absolute;
			left: 0.1em;
			top: 0.2em;
		}
	}
}


@media (768px <= width) {
	#faq h2 {
		font-size: 3.75rem;
		& span {
			font-size: 2.5rem;
		}
	}
}




/* # フローティングボタン # */
.wrap .floatbtn {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	text-align: center;
	line-height: 1;
	z-index: 9;
	@media (768px <= width) {
		display: none !important;
	}
}
.wrap .floatbtn .close {
	width: 18px;
	height: 18px;
	position: absolute;
	bottom: 105%;
	left: 2%;
	transform: rotate(45deg);
	margin-top: -8px;
	opacity: 1;
	transition: all 0.3s;
	cursor: pointer;
}
.wrap .floatbtn .close:hover {
	transform: rotate(315deg);
}
.wrap .floatbtn .close span {
	display: inline-block;
	width: 18px;
	height: 2px;
	background-color: #000;
	position: absolute;
	top: 8px;
	right: 0;
}
.wrap .floatbtn .close span::after {
	content: "";
	display: inline-block;
	width: 18px;
	height: 2px;
	background-color: #000;
	transform: rotate(90deg);
	position: absolute;
	top: 0;
	right: 0;
}
#root .wrap .floatbtn .cta a {
	border-radius: 0;
	padding: 1.3em 2.3em;
	width: 100%;
	max-width: 100%;
}
#root .wrap .floatbtn .cta a::after {
	right: 10%;
}