@charset "utf-8";

/*-------------------------------------------------------------------
 *
 * H2V support Style Sheet
 * index
 * - Common
 * - mainImg
 * - news
 * - manual
 * - tool
 * - signup
 * - website
 * - app
 * - faq
 * - document
 * - contact
 * - note
 *
-------------------------------------------------------------------*/

/*===================================================================
	Common
===================================================================*/
* {
	font-family: "Yu Gothic";
	font-size: 16px;
	font-weight: 500;
	color: #363535;
	line-height: normal;
	box-sizing: border-box;
}
header .header_innner,
footer .footer_innner {
	max-width: 1280px;
	margin: 0 auto;
}
#contents {
	background-color: #F2F4F6;
}
.contBlock_innner {
	padding: calc((70 / 16) * 1rem) calc((5 / 16) * 1rem);
	max-width: 1080px;
	margin: 0 auto;
}
h2 {
	padding: calc((13 / 16) * 1rem) 0 calc((13 / 16) * 1rem) calc((23 / 16) * 1rem);
	font-size: calc((20 / 16) * 1rem);
	font-weight: 700;
	border-left: 1px solid #363535;
}
a:link, a:visited {
	color: inherit;
	text-decoration: none;
	transition: 0.3s;
}
a:hover {
	opacity: .7;
}
a.underline_link {
	text-decoration: underline;
}
.pdf_link:after {
	content: url(../img/pdf_icon.svg);
	margin-left: calc((13 / 16) * 1rem);
	font-size: 0;
}
.arrow_link:after {
	content: url(../img/arrow_icon.svg);
	font-size: 0;
}
.external_link:after {
	content: url(../img/external_icon.svg);
	margin-left: calc((13 / 16)* 1rem);
	font-size: 0;
}
.linkBox {
	max-width: 500px;
	padding: calc((31 / 16) * 1rem) calc((33 / 16) * 1rem) calc((28 / 16) * 1rem) calc((50 / 16) * 1rem);
	border-radius: 10px;
	background-color: #FDFDFE;
	box-shadow: 4px 4px 4px 0px #E2E5E9;
}
.blue {
	color: #2771E0;
}
.red {
	color: #F40D0D;
}
.fw700 {
	font-weight: 700;
}
.bg_W {
	background-color: #F8F9FB;
}
.flexBlock {
	display: flex;
	flex-wrap: wrap;
}
.jc_C {
	justify-content: center;
}
.jc_E {
	justify-content: flex-end;
}
.jc_SB {
	justify-content: space-between;
}
.ai_C {
	align-items: center;
}
.fw_NW {
	flex-wrap: nowrap;
}
.fd_C {
	flex-direction: column;
}


/*	header
-------------------------------------------------------------------*/
header {
	position: sticky;
	top: 0;
	left: 0;
	background-color: #FBFBFB;
}
header .header_innner {
	padding: calc((30 / 16) * 1rem) calc((35 / 16) * 1rem) calc((30 / 16) * 1rem) calc((43 / 16) * 1rem);
}
header nav a + a {
	margin-left: 1rem;
}

/*	footer
-------------------------------------------------------------------*/
footer {
	background-color: #7C838F;
}
footer .footer_innner {
	padding: calc((30 / 16) * 1rem) calc((65 / 16) * 1rem) calc((9 / 16) * 1rem) calc((74 / 16) * 1rem);
}
footer a:link,
footer a:visited,
footer p {
	color: #BBB;
}
footer .logo a {
	font-size: calc((14 / 16) * 1rem);
}
footer .logo a img {
	display: block;
	margin-bottom: 1rem;
}
footer .logo + .flexBlock {
	margin-top: 1.5rem;
}
footer a.underline_link,
footer p.copyright {
	font-size: calc((12 / 16) * 1rem);
}
footer a.underline_link + a.underline_link {
	margin-left: 1rem;
}
footer p.copyright {
	padding-top: calc((10 / 16) * 1rem);
}

@media (max-width: 900px) {
	footer .footer_innner > .flexBlock {
		display: block;
	}
	footer p.copyright {
		text-align: right;
	}
}


/*===================================================================
	mainImg
===================================================================*/
#contents .mainImg {
	padding: calc((56 / 16) * 1rem) 0 calc((35 / 16) * 1rem);
}
#contents .mainImg h1 {
	max-width: 375px;
	margin: 0 auto;
}
#contents .mainImg h1 + p {
	margin-top: calc((22 / 16) * 1rem);
}


/*===================================================================
	attention
===================================================================*/
#contents .attention p {
	padding: calc((24 / 16)* 1rem) calc((80 / 16)* 1rem) calc((21 / 16)* 1rem);
	border-top: 1px solid #363535;
	border-bottom: 1px solid #363535;
}
#contents .attention p span {
  display: inline-block;
  margin-bottom: calc((10 / 16) * 1rem);
}


/*===================================================================
	guide
===================================================================*/
#contents .guideBlock .h2_wrapper {
	width: 21%;
}
#contents .guideBlock .guide {
	width: 79%;
}
#contents .guideBlock .guide .linkBox {
	padding: calc((16 / 16)* 1rem) calc((27 / 16)* 1rem) calc((13 / 16)* 1rem) calc((50 / 16)* 1rem);
}
#contents .guideBlock .guide .linkBox + .linkBox {
	margin-top: calc((10 / 16) * 1rem);
}


/*===================================================================
	news
===================================================================*/
#contents .newsBlock .h2_wrapper {
	width: 21%;
}
#contents .newsBlock .news {
	width: 79%;
}
#contents .newsBlock a {
	display: block;
	padding: calc((4 / 16) * 1rem) 0;
}
#contents .newsBlock a dl dt,
#contents .newsBlock a dl dd {
	font-size: calc((14 / 16) * 1rem);
}
#contents .newsBlock a dl dt {
	color: #8D9397;
}
#contents .newsBlock a dl dt + dd {
	margin-left: calc((13 / 16) * 1rem);
}
#contents .newsBlock .type {
	display: flex;
	align-items: center;
	height: calc((21 / 16) * 1rem);
	margin-right: calc((13 / 16) * 1rem);
	padding: calc((1 / 16) * 1rem) calc((12 / 16) * 1rem);
	font-size: calc((12 / 16) * 1rem);
	font-weight: 700;
	color: #FFF;
	border-radius: calc((30 / 16) * 1rem);
	background-color: #484F55;
}
#contents .newsBlock a + a {
	margin-top: calc((10 / 16) * 1rem);
}
#contents .newsBlock .newsNotes {
	margin-top: calc((44 / 16) * 1rem);
	font-size: calc((12 / 16) * 1rem);
	font-weight: 400;
}
#contents .newsBlock .othernotice {
	margin-top: calc((23 / 16) * 1rem);
	display: block;
}

@media (max-width: 900px) {
	#contents .newsBlock .contBlock_innner.flexBlock {
		display: block;
	}
	#contents .newsBlock .h2_wrapper,
	#contents .newsBlock .news {
		width: 100%;
	}
}


/*===================================================================
	manual
===================================================================*/
#contents .manualBlock .h2_wrapper {
	width: 16.4%;
}
#contents .manualBlock .manual {
	width: 83.6%;
	padding-top: calc((16 / 16)* 1rem);
}
#contents .manualBlock .manual > p + .flexBlock {
	margin-top: calc((28 / 16)* 1rem);
}
#contents .manualBlock .manual .type {
	width: 22%;
}
#contents .manualBlock .manual .type + * {
	width: 78%;
}
#contents .manualBlock .manual .var {
	font-weight: 400;
}
#contents .manualBlock .manual .var + a {
	margin-top: calc((46 / 16)* 1rem);
}
#contents .manualBlock .manual .manualList a {
	display: block;
}
#contents .manualBlock .manual .manualList dl {
	padding-bottom: calc((6 / 16)* 1rem);
	border-bottom: 1px solid #DEE5EF;
}
#contents .manualBlock .manual .manualList dl dd {
	margin-top: calc((9 / 16)* 1rem);
	font-size: calc((13 / 16) * 1rem);
	font-weight: 500;
	color: #8D9397;
}
#contents .manualBlock .manual a + a {
	margin-top: calc((33 / 16)* 1rem);
}
#contents .manualBlock .manual .manualList + .manualList {
	margin-top: calc((50 / 16)* 1rem);
}
#contents .manualBlock .manual > .flexBlock + .flexBlock {
	margin-top: calc((75 / 16)* 1rem);
}

@media (max-width: 900px) {
	#contents .manualBlock .contBlock_innner.flexBlock,
	#contents .manualBlock .manual .flexBlock {
		display: block;
	}
	#contents .manualBlock .h2_wrapper,
	#contents .manualBlock .manual,
	#contents .manualBlock .manual .type,
	#contents .manualBlock .manual .type + * {
		width: 100%;
	}
}


/*===================================================================
	tool
===================================================================*/
#contents .toolBlock .tool {
	margin-top: calc((31 / 16)* 1rem);
}
#contents .toolBlock .tool p + .flexBlock {
	margin-top: calc((30 / 16)* 1rem);
}
#contents .toolBlock .tool .linkBox {
	flex-wrap: nowrap;
	width: 46.3%;
	padding: calc((28 / 16)* 1rem) calc((26 / 16)* 1rem) calc((21 / 16)* 1rem) calc((40 / 16)* 1rem);
}
#contents .toolBlock .tool .linkBox,
#contents .toolBlock .tool .linkBox :not(span) {
	font-size: calc((14 / 16) * 1rem);
}
#contents .toolBlock .tool .linkBox .linkBox_innner > div {
	margin-top: calc((13 / 16) * 1rem);
}
#contents .toolBlock .tool .linkBox ul {
	margin-top: calc((5 / 16) * 1rem);
	padding-left: calc((22 / 16)* 1rem);
	list-style: disc;
}
#contents .toolBlock .tool .linkBox.arrow_link:after {
	display: flex;
	align-items: center;
}
#contents .toolBlock .tool .linkBox + .linkBox {
	margin-left: calc((14 / 16)* 1rem);
}

@media (max-width: 900px) {
	#contents .toolBlock .tool > .flexBlock {
		display: block;
	}
	#contents .toolBlock .tool .linkBox {
		width: 100%;
		margin: 0 auto;
	}
	#contents .toolBlock .tool .linkBox + .linkBox {
		margin: calc((14 / 16)* 1rem) auto 0;
	}
}


/*===================================================================
	signup
===================================================================*/
#contents .signupBlock .signup {
	margin: calc((16 / 16)* 1rem) 0 0 calc((26 / 16)* 1rem);
}
#contents .signupBlock .signup p + .flexBlock {
	margin-top: calc((42 / 16)* 1rem);
}
#contents .signupBlock .signup .linkBox {
	width: 47.4%;
}
#contents .signupBlock .signup .linkBox + .linkBox {
	margin-left: calc((32 / 16)* 1rem);
}

@media (max-width: 900px) {
	#contents .signupBlock .signup > .flexBlock {
		display: block;
	}
	#contents .signupBlock .signup .linkBox {
		width: 100%;
		margin: 0 auto;
	}
	#contents .signupBlock .signup .linkBox + .linkBox {
		margin: calc((32 / 16)* 1rem) auto 0;
	}
}


/*===================================================================
	website
===================================================================*/
#contents .websiteBlock .website {
	margin: calc((30 / 16)* 1rem) 0 0 calc((39 / 16)* 1rem);
}
#contents .websiteBlock .website .website_inner {
	width: 48.0%;
}
#contents .websiteBlock .website .linkBox {
	margin-top: calc((14 / 16)* 1rem);
}
#contents .websiteBlock .website .website_inner + .website_inner {
	margin-left: calc((32 / 16)* 1rem);
}

@media (max-width: 900px) {
	#contents .websiteBlock .website > .flexBlock {
		display: block;
	}
	#contents .websiteBlock .website .website_inner {
		width: 100%;
		max-width: 500px;
		margin: 0 auto;
	}
	#contents .websiteBlock .website .website_inner + .website_inner {
		margin: calc((32 / 16)* 1rem) auto 0;
	}
}


/*===================================================================
	app
===================================================================*/
#contents .appBlock .app {
	margin: calc((23 / 16)* 1rem) 0 0 calc((26 / 16)* 1rem);
}
#contents .appBlock .app .small {
	margin-top: calc((8 / 16)* 1rem);
	font-size: calc((14 / 16)* 1rem);
}
#contents .appBlock .app p + .flexBlock {
	margin-top: calc((68 / 16)* 1rem);
}
#contents .appBlock .app .appList{
	width: 60%;
}
#contents .appBlock .app .appName {
	padding: calc((7 / 16)* 1rem) 0 calc((7 / 16)* 1rem) calc((23 / 16)* 1rem);
	font-weight: 700;
	border-left: 1px solid #363535;
}
#contents .appBlock .app .appList .flexBlock a + a {
	margin-left: calc((15 / 16)* 1rem);
}
#contents .appBlock .app .appList .flexBlock + .flexBlock {
	margin-top: calc((37 / 16)* 1rem);
}

@media (max-width: 900px) {
	#contents .appBlock .app .appList {
		width: 90%;
	}
}


/*===================================================================
	faq
===================================================================*/
#contents .faqBlock .faq {
	margin: calc((18 / 16)* 1rem) 0 0 calc((26 / 16)* 1rem);
}
#contents .faqBlock .faq .linkBox {
	width: 47.4%;
	margin-top: calc((63 / 16)* 1rem);
}

@media (max-width: 900px) {
	#contents .faqBlock .faq > .flexBlock {
		display: block;
	}
	#contents .faqBlock .faq .linkBox {
		width: 100%;
		max-width: 500px;
		margin: calc((63 / 16)* 1rem) auto;
	}
}


/*===================================================================
	document
===================================================================*/
#contents .documentBlock .document {
	margin: calc((30 / 16)* 1rem) 0 0 calc((39 / 16)* 1rem);
}
#contents .documentBlock .document .document_inner {
	width: 48%;
}

@media (max-width: 900px) {
	#contents .documentBlock .document > .flexBlock {
		display: block;
	}
	#contents .documentBlock .document .document_inner {
		width: 100%;
		max-width: 500px;
		margin: 0 auto;
	}
	#contents .documentBlock .document .document_inner + .document_inner {
		margin: calc((32 / 16)* 1rem) auto 0;
	}
}


/*===================================================================
	contact
===================================================================*/
#contents .contactBlock .contact {
	max-width: 880px;
	margin: 0 auto;
	padding: calc((22 / 16)* 1rem) calc((100 / 16)* 1rem) calc((32 / 16)* 1rem);
	border: 1px solid #9EA6AC;
}
#contents .contactBlock .contact .contactTitle {
	font-size: calc((20 / 16)* 1rem);
}
#contents .contactBlock .contact .contactTitle + p {
	margin-top: calc((13 / 16)* 1rem);
}
#contents .contactBlock .contact p + .tel {
	margin-top: calc((19 / 16)* 1rem);
}
#contents .contactBlock .contact .tel {
	font-size: calc((18 / 16)* 1rem);
}
#contents .contactBlock .contact .tel a {
	margin: 0 calc((22 / 16)* 1rem);
	font-size: calc((36 / 16)* 1rem);
}
#contents .contactBlock .contact .tel .small {
	font-size: calc((14 / 16)* 1rem);
}


/*===================================================================
	note
===================================================================*/
#contents .noteBlock .note:not(:last-child) {
	padding-bottom: calc((19 / 16)* 1rem);
}
#contents .noteBlock .note p,
#contents .noteBlock .note li {
	font-size: calc((12 / 16)* 1rem);
}
#contents .noteBlock .note ul {
	padding-left: calc((20 / 16)* 1rem);
	list-style: disc;
}
#contents .noteBlock .note + .note {
	padding-top: calc((19 / 16)* 1rem);
	border-top: 1px solid #9EA6AC;
}