@charset "UTF-8";
/* ==================================================
	common
================================================== */
.main_content p + p {margin-top: 1em;}

.pc {display: inherit;}
.sp {display: none;}

@media screen and (max-width: 767px) {
.sp {display: inherit;}
.pc {display: none;}
}

/* ----------------------------------------
	section_content
---------------------------------------- */
@media screen and (min-width: 1024px) {
	#visid .section_content[class*="mw"],
	.visid .section_content[class*="mw"] {width: auto;}
	.section_content.mw1220 {max-width: 1220px;}
	.section_content.mw1400 {max-width: 1400px;}
	.section_content.mw1540 {max-width: 1540px;}
}

/* ----------------------------------------
	layout
---------------------------------------- */
.layout_v1 > .heading >.section_content {
	padding: 25px 20px;
}

.layout_v1 > .heading > .section_content > p{
	padding: 0px; 
}

/* ==================================================
	hero_img
================================================== */
.hero_img .img_area img {
	width: 100%;
}
.hero_img .text_area {
	padding: 10px 20px;
}

@media screen and (min-width: 768px) {
	.hero_img .text_area {
		padding: 40px 20px;
	}
}

@media screen and (min-width: 1024px) {
	.hero_img .img_area img {
		object-fit: cover;
		max-height: 400px; 
	}

	.hero_img .text_area {
		padding: 0;
		color: #fff;
	}
}

.inner{
text-align:right;
}

/* ----------------------------------------
	contents_list
---------------------------------------- */
.contents_list > li {
	padding: 2rem 0;
}
.contents_list .img_area {
	text-align: center;
}
.contents_list .text_area {
	margin-top: 1.5rem;
}

@media screen and (min-width: 768px) {
	.contents_list > li {
		display: flex;
		justify-content: space-between;
	}
	.contents_list .img_area {
		width: 36%;
	}
	.contents_list .text_area {
		align-self: center;
		width: 60%;
		margin-top: 0;
	}
}

@media screen and (min-width: 1024px) {
	.contents_list > li {
		padding: 30px 20px;
	}
	.contents_list .img_area {
		width: 350px;
	}
	.contents_list .text_area {
		width: 570px;
	}
}

/* ----------------------------------------
	heading
---------------------------------------- */
#visid h1,#visid h2,#visid h3,#visid h4,#visid h5,#visid h6,.visid h1,.visid h2,.visid h3,.visid h4,.visid h5,.visid h6 {font-weight: normal;}
.xl, .xxl, .x3l, .x4l, .x5l,.h1, .h2, .h3, .h4, .h5, .h6 {font-weight: normal;}
.xl, .xxl, .x3l, .x4l, .x5l {font-family: "FormaDJRMicro","FormaDJRJapaneseMicro","Arial","MS P S V b N"!important;}
.x5l { font-size: 46px; line-height: 50px; }
.x4l { font-size: 46px; line-height: 50px; }
.x3l { font-size: 46px; line-height: 50px; }
.xxl { font-size: 40px; line-height: 46px; }
.xl { font-size: 30px; line-height: 34px; }
.h1 { font-size: 26px; line-height: 28px; }
.h2 { font-size: 24px; line-height: 26px; }
.h3 { font-size: 22px; line-height: 26px; }
.h4 { font-size: 20px; line-height: 24px; }
.h5 { font-size: 18px; line-height: 26px; }
.h6 { font-size: 16px; line-height: 24px; }

@media screen and (min-width: 768px) {
	.x5l { font-size: 90px; line-height: 96px; }
	.x4l { font-size: 90px; line-height: 96px; }
	.x3l { font-size: 90px; line-height: 96px; }
	.xxl { font-size: 60px; line-height: 66px; }
	.xl { font-size: 40px; line-height: 44px; }
	.h1 { font-size: 36px; line-height: 40px; }
	.h2 { font-size: 32px; line-height: 36px; }
	.h3 { font-size: 26px; line-height: 30px; }
	.h4 { font-size: 20px; line-height: 26px; }
}

@media screen and (min-width: 1024px) {
	.x5l { font-size: 260px; line-height: 260px; }
	.x4l { font-size: 180px; line-height: 180px; }
	.x3l { font-size: 112px; line-height: 116px; }
	.xxl { font-size: 70px; line-height: 74px; }
	.xl { font-size: 50px; line-height: 52px; }
	.h1 { font-size: 40px; line-height: 42px; }
	.h2 { font-size: 34px; line-height: 40px; }
	.h3 { font-size: 28px; line-height: 34px; }
	.h4 { font-size: 22px; line-height: 28px; }
	.h5 { font-size: 20px; line-height: 28px; }
}

@media screen and (min-width: 1920px) {
	.x5l { font-size: 300px; line-height: 300px; }
	.x4l { font-size: 200px; line-height: 200px; }
	.x3l { font-size: 124px; line-height: 128px; }
	.xxl { font-size: 80px; line-height: 84px; }
	.xl { font-size: 60px; line-height: 62px; }
	.h1 { font-size: 48px; line-height: 50px; }
	.h2 { font-size: 38px; line-height: 42px; }
	.h3 { font-size: 30px; line-height: 36px; }
	.h4 { font-size: 24px; line-height: 32px; }
}

/* margin -------------------- */
.xl + p { margin-top: 20px; }
.h1 + p { margin-top: 10px; }
.h2 + p { margin-top: 16px; }
.h3 + p { margin-top: 16px; }
.h4 + p { margin-top: 10px; }
.h5 + p { margin-top: 10px; }


/* border -------------------- */
.bot{ border-top:1px solid #000;}
.bob{ border-bottom:1px solid #000;}
.bor{ border-right:1px solid #000; }
.bol{ border-left:1px solid #000; }

@media screen and (max-width: 767px) {
	.bor { border-right: 0px; }
  .bol { border-left: 0px; }
}



/* ----------------------------------------
	footnote
---------------------------------------- */
.main_content [class*="footnote"],
.main_content [class*="footnote"] > li {color: inherit;}

/* ----------------------------------------
	cont_wrap
---------------------------------------- */
.cont_wrap { padding:30px; }

@media screen and (min-width: 768px) {
	.cont_wrap { padding: 60px 30px; }
}

@media screen and (min-width: 1024px) {
	.cont_wrap { padding: 10px 30px; }
}

/* ----------------------------------------
	bnTbl Table
---------------------------------------- */
table.bnTbl {table-layout: auto;margin-left: auto;margin-right: auto;}
/* thead -------------------- */
.bnTbl thead th {font-size: 1.1em; vertical-align: middle; padding:15px 10px; font-weight: bold; text-align: left; line-height: 1.1;background-color:#e7e7e7;}
/* tbody -------------------- */
.bnTbl tbody tr {border-bottom: 1px solid #000;}
.bnTbl thead + tbody tr:first-child th,.bnTbl thead + tbody tr:first-child td {border-top: none;}
.bnTbl td {border-bottom:1px solid #000; vertical-align: middle; padding:15px 10px; font-weight: normal; text-align: left; line-height: 1.5;}

 tbody tr:last-child td { border-bottom:0px;}

/* ==================================================
	main
================================================== */
.main .img_area video {object-fit: cover;vertical-align: bottom;width: 100%;height: 100%;}
.main h1 {margin-bottom: 15px;font-size: 14px;font-weight: normal;line-height: 1.2;}
.main h2 {margin-bottom: 15px;}

@media screen and (max-width: 767px) {
	.main .img_area {height: 250px;}
	.main .inner {padding: 30px 20px;}
}

@media screen and (min-width: 768px) {
	.main .img_area {height: 450px;}
	.main .inner {position: absolute;top: 50%;left: 0;transform: translateY(-50%);width: 100%;padding: 0 20px;}
	.main .text_area {max-width: 1220px;margin: 0 auto;}
	.main .card {width: 430px;padding: 20px;}
}

@media screen and (min-width: 1280px) {
	.main .img_area {height: 600px;}
	.main .card {width: 450px;padding: 30px;}
}

@media screen and (min-width: 1920px) {
	.main .card {width: 500px;}
}


/* ==================================================
	row
================================================== */
.row {margin: 0 -15px;}
.row > li {padding: 0 15px;}
.row .img_area {text-align: center;}
.row .img_area img {border-radius: 10px;}
.row .text_area {margin-top: 10px;}
.row .btn_area {margin-top: 25px;}

@media screen and (min-width: 768px) {
	.row {display: flex;flex-wrap: wrap;}
	.row > li {width: 50%;margin-top: 60px;}
}

@media screen and (min-width: 1024px) {
	.row.col_lg_3 > li {width: 33.33333%;}
}

/* ==================================================
	base
================================================== */

#visid,.visid {font-size: 16px;}
/* ----------------------------------------
	sup
---------------------------------------- */
sup.small {vertical-align: super;font-size: 13.3333px;font-weight: normal;}

/* ----------------------------------------
	button
---------------------------------------- */
#visid .button,.visid .button {padding: .5em 1.2em;font-size: 16px;border-radius: 0;}
#visid .button.slim,.visid .button.slim {font-size: 13px;}
#visid .button.sslim,.visid .button.sslim {font-size: 11px;}

/* primary */
#visid .button.primary,.visid .button.primary {background: #000;}
#visid .button.primary:hover,.visid .button.primary:hover {background: #5a5a5a;}

/* critical */
#visid .button.critical,.visid .button.critical {background: #165dba;}
#visid .button.critical:hover,.visid .button.critical:hover {background: #114a94;}

/* white */
#visid .button.white,.visid .button.white {color: #000;}
#visid .button.white:hover,.visid .button.white:hover {background: #ccc;}


a.button_bl {
    display: inline-block;
    background-color: #024AD8;
    color: #fff;
    font-size:16px;
    padding:0.5em 2em;
    text-decoration:none;
    border-radius:8px;
text-align:center;
  }

a.button_bk {
    display: inline-block;
    background-color: #000000;
    color: #fff;
    font-size:16px;
    padding:0.5em 2em;
    text-decoration:none;
    border-radius:8px;
text-align:center;
  }

a.button_bl:hover,a.button_bk:hover{
    opacity: 0.5;
}



@media screen and (max-width:800px) {
    a.button_bk,a.button_bl{ display:block; width:100%!important;}


}



/* ----------------------------------------
	display
---------------------------------------- */
@media screen and (min-width: 1280px) {
	.d_none_xl { display: none; }
	.d_block_xl { display: block; }
	.d_inline_xl { display: inline; }
	.d_i_block_xl { display: inline-block; }
	.d_none_i_xl { display: none !important; }
	.d_block_i_xl { display: block !important; }
	.d_inline_i_xl { display: inline !important; }
	.d_i_block_i_xl { display: inline-block !important; }
}


/* ----------------------------------------
	play
---------------------------------------- */
a.play {display: inline-block;position: relative;transition: .2s;width: 70px;height: 70px;background: rgba(0,0,0,.6);border: 3px solid #fff;}
a.play:hover {background: rgba(0, 0, 0, .8);}
a.play::after {content: "";position: absolute;width: 0;height: 0;top: 50%;left: 53%;transform: translate(-50%,-50%);border-style: solid;border-width: 13px 0 13px 22.5px;border-color: transparent transparent transparent #fff;}
* + a.play {margin-top: 20px;}

/* ----------------------------------------
	link_arrow
---------------------------------------- */
a.link_arrow {display: inline-block;position: relative;min-height: 30px;padding-top: 4px;padding-left: calc(30px + 10px);color: #000;font-size: 16px;text-align: left;}
* + .link_arrow {margin-top: 20px;}
.link_arrow::before,.link_arrow::after {position: absolute;}
.link_arrow::before {display: inline-block;content: "";top: 0;left: 0;width: 30px;height: 30px;background: #000;border-radius: 50%;}
.link_arrow::after {content: "\E90c";top: 7px;left: 8px;transform: rotate(270deg);font-family: HPIcons;color: #fff;font-weight: bold;line-height: 1;}

/* white -------------------- */
a.link_arrow.cv_white {color: #fff;}
.link_arrow.cv_white::before {background: #fff;}
.link_arrow.cv_white::after {color: #000;}

/* ----------------------------------------
	modal
---------------------------------------- */
#visid .modal_content,.visid .modal_content {border: none;}


/* ----------------------------------------
	list_basic
---------------------------------------- */
#visid .list_basic > li::before,.visid .list_basic > li::before {content: "\2022";font-family: Arial;font-size: 130%;top: .06em;width: auto;height: auto;line-height: 1;background: none;}

/* ----------------------------------------
	notes
---------------------------------------- */
.notes {padding-left: 1em;font-size: 12px;line-height: 1.33;text-indent: -1em;}
.notes > li:nth-child(n+2) {margin-top: .5em;}

/* num -------------------- */
.notes_num {counter-reset: num;font-size: 12px;line-height: 1.33;}
.notes_num > li {position: relative;padding-left: 3em;}
.notes_num > li:nth-child(n+2) {margin-top: .5em;}
.notes_num > li::before {counter-increment: num;content: "\203B" counters(num, "-") "";position: absolute;left: 0;}

/* num_none */
.notes_num > li.num_none {padding-left: 0;}
.notes_num > li.num_none::before {opacity: 0;}


/* ==================================================
	list
================================================== */
.list {
	margin: 0 -15px;
}
.list > li {
	margin-top: 40px;
	padding: 0 15px;
	font-size: 15px;
}
.list h3 {
	display: flex;
	align-items: center;
	padding-bottom: .5em;
	font-weight: normal;
	line-height: 1.3;
	border-bottom: 1px solid #000;
}
.list dt {
	position: relative;
	margin-top: 20px;
	padding-left: 20px;
}
.list dt::before {
	content: "";
	position: absolute;
	top: 4px;
	left: 0;
	width: 14px;
	height: 14px;
	margin-right: 5px;
	background: #000;
	border-radius: 50%;
}
.list dd li {
	margin-top: .4em;
}
.list dd li a {
	color: #000;
	text-decoration: underline;
}
.list dd li a:hover {
	text-decoration: none;
}

@media screen and (min-width: 1024px) {
	.list {
		display: flex;
	}
	.list > li {
		width: 33.33333%;
	}
}

/* ==================================================
	standard Color
================================================== */

.colorgray{ background-color:#e6e6e6; }
.colorcream{ background-color:#f2ebdc; }
.colorwarning{ color:#ff3900;}


/* ==================================================
	page_top
================================================== */

@media screen and (min-width: 1024px) {
	.page_top {
		width: 1280px!important;
		margin-left: -110px!important;
	}
}


/* ----------------------------------------
 Color :  #549ef7
---------------------------------------- */
.color100 { background-color:#549ef7; }
.color90 { background-color:#65a7f7; }
.color80 { background-color:#76b1f8; }
.color70 { background-color:#87bbf9; }
.color60 { background-color:#98c4fa; }
.color50 { background-color:#a9cefb; }
.color40 { background-color:#bad8fb; }
.color30 { background-color:#cbe1fc; }
.color20 { background-color:#dcebfd; }
.color10 { background-color:#edf5fe; }


.row>li {padding:30px!important;}
#visid .button,.visid .button {border-radius: 10px!important;}
.f_blue{color:#024AD8;}

.row>li:first-child{padding-right:40px!important;}