/* ==================================================
	reset
================================================== */
/*
body {
	margin: 0;
}
h1, h2, h3, h4, h5, h6 {
	font-size: inherit;
	font-weight: 400;
	margin: 0;
}
p {
	margin: 0;
}
ul, ol, li {
	margin: 0;
	padding: 0;
	list-style: none;
}
dl, dt, dd {
	margin: 0;
	padding: 0;
}


*/



/* ==================================================
	font
================================================== */

/* Forma DJR Display */
@font-face {
	font-family: 'FormaDJRDisplay';
	src:url('/portal/page/out/mss/hpi/sustainability/style/font/FormaDJRDisplay-Regular.ttf') format('truetype')
}
/* Forma DJR Micro */
@font-face {
	font-family: 'FormaDJRMicro';
	src:url('/portal/page/out/mss/hpi/sustainability/style/font/FormaDJRMicro-Regular.ttf') format('truetype')
}


/* Japanese -------------------- */

/* Forma DJR Display */
@font-face {
	font-family: 'FormaDJRJapaneseDisplay';
	src:url('/portal/page/out/mss/hpi/sustainability/style/font/FormaDJRJapaneseDisplay-Regular.ttf') format('truetype')
}
/* Forma DJR Micro */
@font-face {
	font-family: 'FormaDJRJapaneseMicro';
	src:url('/portal/page/out/mss/hpi/sustainability/style/font/FormaDJRJapaneseMicro-Regular.ttf') format('truetype')
}





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

.visid {
	width: 100%;
	max-width: 1148px;
	margin-right: auto;
	margin-left: auto;
	color: #000;
	font-family: "FormaDJRMicro","FormaDJRJapaneseMicro","Arial",sans-serif;
	font-size: 16px;
	line-height: 1.375;
}
.visid,
.visid *,
.visid *::before,
.visid *::after {
	box-sizing: border-box;
}
.visid img,
.visid video {
	vertical-align: bottom;
	max-width: 100%;
	height: auto;
}
.visid sup,
.visid sub {
	position: relative;
	vertical-align: baseline;
	height: 0;
	font-size: smaller;
	line-height: 1;
}
.visid sup {
	bottom: 1ex;
}
.visid sub {
	top: 1ex;
}



/* ----------------------------------------
	a
---------------------------------------- */

.visid a {
	color: #007dba;
	text-decoration: none;
}
.visid a:hover {
	text-decoration: underline;
}
.visid a:visited {
	color: #822980;
}


/* images -------------------- */

.visid a img {
	transition: .2s;
}
.visid a img:hover {
	opacity: .7;
}



/* ----------------------------------------
	table
---------------------------------------- */

.visid table {
	table-layout: fixed;
	border-collapse: collapse;
	width: 100%;
}

/* ==================================================

	display

================================================== */

.d_none { display: none; }
.d_block { display: block; }
.d_inline { display: inline; }
.d_i_block { display: inline-block; }
.d_none_i { display: none !important; }
.d_block_i { display: block !important; }
.d_inline_i { display: inline !important; }
.d_i_block_i { display: inline-block !important; }

@media screen and (min-width: 480px) {
	.d_none_sm { display: none; }
	.d_block_sm { display: block; }
	.d_inline_sm { display: inline; }
	.d_i_block_sm { display: inline-block; }
	.d_none_i_sm { display: none !important; }
	.d_block_i_sm { display: block !important; }
	.d_inline_i_sm { display: inline !important; }
	.d_i_block_i_sm { display: inline-block !important; }
}

@media screen and (min-width: 768px) {
	.d_none_md { display: none; }
	.d_block_md { display: block; }
	.d_inline_md { display: inline; }
	.d_i_block_md { display: inline-block; }
	.d_none_i_md { display: none !important; }
	.d_block_i_md { display: block !important; }
	.d_inline_i_md { display: inline !important; }
	.d_i_block_i_md { display: inline-block !important; }
}

@media screen and (min-width: 1024px) {
	.d_none_lg { display: none; }
	.d_block_lg { display: block; }
	.d_inline_lg { display: inline; }
	.d_i_block_lg { display: inline-block; }
	.d_none_i_lg { display: none !important; }
	.d_block_i_lg { display: block !important; }
	.d_inline_i_lg { display: inline !important; }
	.d_i_block_i_lg { display: inline-block !important; }
}
/* ----------------------------------------
	color
---------------------------------------- */

.fc0b435c { color: #0b435c !important; }
.fce3e1dc { color: #e3e1dc !important; }
.fcf9fafc { color: #f9fafc !important; }
.fca3a3a3 { color: #a3a3a3 !important; }
.fcc0d0d8 { color: #c0d0d8 !important; }
.fc114284 { color: #114284 !important; }
.fc967100 { color: #967100 !important; }
.fcc35400 { color: #c35400 !important; }


.bg0b435c { background-color: #0b435c !important; }
.bge3e1dc { background-color: #e3e1dc !important; }
.bgf9fafc { background-color: #f9fafc !important; }
.bga3a3a3 { background-color: #a3a3a3 !important; }
.bgc0d0d8 { background-color: #c0d0d8 !important; }
.bg114284 { background-color: #114284 !important; }
.bgefefef { background-color: #efefef !important; }
.bge8e8e8 { background-color: #e8e8e8 !important; }


/* ----------------------------------------
	button
---------------------------------------- */
@media screen and (min-width: 1024px) {
	.button.large {
		padding: 10px 150px 10px 150px;
		font-size: 18px;
		font-weight: bold;
	}
}

/* ----------------------------------------
	sup
---------------------------------------- */

sup.small {
	vertical-align: super;
	font-size: 13.3333px;
	font-weight: normal;
}



/* ----------------------------------------
	cont_wrap
---------------------------------------- */

.cont_wrap { padding: 40px 20px; }

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

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


/* ----------------------------------------
	marker
---------------------------------------- */

.marker {
	padding: .2em .4em;
	line-height: 1;
}
.yellow { background: #ffe500; }
.blue { background: #b9dbe3; }


/* ----------------------------------------
	reverse
---------------------------------------- */

.row {
	flex-direction: row;
}

@media screen and (min-width: 768px){
	.r_reverse_md {
		flex-direction: row-reverse;
	}
}

@media screen and (min-width: 1024px){
	.r_reverse_md {
		flex-direction: reverse;
	}
	.r_reverse_lg {
		flex-direction: row-reverse;
	}
}


.bo_000_s,
.bo_black_s {
	border: 1px solid #000 !important;
}



/* ----------------------------------------
	renewal
---------------------------------------- */

.cons_list {
	margin: 0 -10px;
}
.cons_list > li {
	margin-top: 20px;
	padding: 0 10px;
}
.cons_list .inner {
	height: 100%;
	border: 1px solid #000;
}
.cons_list .title_area {
	padding: 20px;
	border-bottom: 1px solid #000;
}
.cons_list .title_area h3 {
	margin-top: 10px;
	font-weight: normal;
}
.cons_list .text_area {
	padding: 20px;
}
.cons_list .text_area .h4{
	font-size: 20px;
	font-weight: normal;
}
.cons_list .text_area * + .list_basic {
	margin-top: 20px;
}

.cons_list .text_area .notes{
	font-size: 12px;
}
@media screen and (min-width: 768px) {
	.cons_list {
		display: flex;
		flex-wrap: wrap;
	}
	.cons_list > li {
		width: 50%;
	}
}

@media screen and (min-width: 1024px) {
	.cons_list > li {
		width: 33.33333%;
		margin-top: 0;
	}
	.cons_list .title_area h3 {
		font-size: 25px;
	}
}




/* ==================================================
	common
================================================== */

/* ==================================================
	column
================================================== */

.col1, .col2, .col3, .col4, .col5 {
	display: flex;
	flex-wrap: wrap;
}
.col1.space, .col2.space, .col3.space, .col4.space, .col5.space {
	justify-content: space-between;
}

/* width -------------------- */
.col1 > * { width: 100%; }
.col2 > * { width: 50%; }
.col3 > * { width: 33.333333%; }
.col4 > * { width: 25%; }
.col5 > * { width: 20%; }
.col1.space > * { width: 100%; }
.col2.space > * { width: 49%; }
.col3.space > * { width: 32%; }
.col4.space > * { width: 23.5%; }
.col5.space > * { width: 18.4%; }

/* margin-top -------------------- */
.col1.space > *:nth-of-type(n+2),
.col2.space > *:nth-of-type(n+3),
.col3.space > *:nth-of-type(n+4),
.col4.space > *:nth-of-type(n+5),
.col5.space > *:nth-of-type(n+6) { margin-top: 16px; }

/* empty elements -------------------- */
.col3.space::after,
.col4.space::before, .col4.space::after {
	display: block;
	content: "";
}
.col3.space::after { width: 32%; }
.col4.space::before, .col4.space::after { width: 23.5%; }
.col4.space::before { order: 1; }
.col5.space::before, .col5.space::after { content: none; }

@media screen and (min-width: 768px) {
	.col1.space > *:nth-of-type(n+2),
	.col2.space > *:nth-of-type(n+3),
	.col3.space > *:nth-of-type(n+4),
	.col4.space > *:nth-of-type(n+5),
	.col5.space > *:nth-of-type(n+6) { margin-top: 20px; }
}



@media screen and (min-width: 480px) {
	/* width -------------------- */
	.col1_sm > * { width: 100%; }
	.col2_sm > * { width: 50%; }
	.col3_sm > * { width: 33.333333%; }
	.col4_sm > * { width: 25%; }
	.col5_sm > * { width: 20%; }
	.col1_sm.space > * { width: 100%; }
	.col2_sm.space > * { width: 49%; }
	.col3_sm.space > * { width: 32%; }
	.col4_sm.space > * { width: 23.5%; }
	.col5_sm.space > * { width: 18.4%; }

	/* margin-top -------------------- */
	.col1_sm.space > *:nth-of-type(1n),
	.col2_sm.space > *:nth-of-type(1n),
	.col3_sm.space > *:nth-of-type(1n),
	.col4_sm.space > *:nth-of-type(1n),
	.col5_sm.space > *:nth-of-type(1n) { margin-top: 0; }
	.col1_sm.space > *:nth-of-type(n+2),
	.col2_sm.space > *:nth-of-type(n+3),
	.col3_sm.space > *:nth-of-type(n+4),
	.col4_sm.space > *:nth-of-type(n+5),
	.col5_sm.space > *:nth-of-type(n+6) { margin-top: 16px; }

	/* empty elements -------------------- */
	.col3_sm.space::after,
	.col4_sm.space::before, .col4_sm.space::after {
		display: block;
		content: "";
	}
	.col3_sm.space::after { width: 32%; }
	.col4_sm.space::before, .col4_sm.space::after { width: 23.5%; }
	.col4_sm.space::before { order: 1; }
	.col5_sm.space::before, .col5_sm.space::after { content: none; }
}



@media screen and (min-width: 768px) {
	/* width -------------------- */
	.col1_md > * { width: 100%; }
	.col2_md > * { width: 50%; }
	.col3_md > * { width: 33.333333%; }
	.col4_md > * { width: 25%; }
	.col5_md > * { width: 20%; }
	.col1_md.space > * { width: 100%; }
	.col2_md.space > * { width: 49%; }
	.col3_md.space > * { width: 32%; }
	.col4_md.space > * { width: 23.5%; }
	.col5_md.space > * { width: 18.4%; }

	/* margin-top -------------------- */
	.col1_md.space > *:nth-of-type(1n),
	.col2_md.space > *:nth-of-type(1n),
	.col3_md.space > *:nth-of-type(1n),
	.col4_md.space > *:nth-of-type(1n),
	.col5_md.space > *:nth-of-type(1n) { margin-top: 0; }
	.col1_md.space > *:nth-of-type(n+2),
	.col2_md.space > *:nth-of-type(n+3),
	.col3_md.space > *:nth-of-type(n+4),
	.col4_md.space > *:nth-of-type(n+5),
	.col5_md.space > *:nth-of-type(n+6) { margin-top: 20px; }

	/* empty elements -------------------- */
	.col3_md.space::after,
	.col4_md.space::before, .col4_md.space::after {
		display: block;
		content: "";
	}
	.col3_md.space::after { width: 32%; }
	.col4_md.space::before, .col4_md.space::after { width: 23.5%; }
	.col4_md.space::before { order: 1; }
	.col5_md.space::before, .col5_md.space::after { content: none; }
}



@media screen and (min-width: 1024px) {
	/* width -------------------- */
	.col1_lg > * { width: 100%; }
	.col2_lg > * { width: 50%; }
	.col3_lg > * { width: 33.333333%; }
	.col4_lg > * { width: 25%; }
	.col5_lg > * { width: 20%; }
	.col1_lg.space > * { width: 100%; }
	.col2_lg.space > * { width: 49%; }
	.col3_lg.space > * { width: 32%; }
	.col4_lg.space > * { width: 23.5%; }
	.col5_lg.space > * { width: 18.4%; }

	/* margin-top -------------------- */
	.col1_lg.space > *:nth-of-type(1n),
	.col2_lg.space > *:nth-of-type(1n),
	.col3_lg.space > *:nth-of-type(1n),
	.col4_lg.space > *:nth-of-type(1n),
	.col5_lg.space > *:nth-of-type(1n) { margin-top: 0; }
	.col1_lg.space > *:nth-of-type(n+2),
	.col2_lg.space > *:nth-of-type(n+3),
	.col3_lg.space > *:nth-of-type(n+4),
	.col4_lg.space > *:nth-of-type(n+5),
	.col5_lg.space > *:nth-of-type(n+6) { margin-top: 20px; }

	/* empty elements -------------------- */
	.col3_lg.space::after,
	.col4_lg.space::before, .col4_lg.space::after {
		display: block;
		content: "";
	}
	.col5_lg.space::before, .col5_lg.space::after { content: none; }
	.col3_lg.space::after { width: 32%; }
	.col4_lg.space::before, .col4_lg.space::after { width: 23.5%; }
	.col4_lg.space::before { order: 1; }
}

/* ==================================================

	d_flex

================================================== */

.d_flex { display: flex; }
.d_flex_i { display: flex !important; }

.jc_fs { justify-content: flex-start; }
.jc_fe { justify-content: flex-end; }
.jc_center { justify-content: center; }
.jc_sb { justify-content: space-between; }

.ai_fs { align-items: flex-start; }
.ai_fe { align-items: flex-end; }
.ai_center { align-items: center; }

.as_fs { align-self: flex-start; }
.as_fe { align-self: flex-end; }
.as_center { align-self: center; }

.fw_wrap { flex-wrap: wrap; }
.fw_nowrap { flex-wrap: nowrap; }



@media screen and (min-width: 480px) {
	.d_flex_sm { display: flex; }
	.d_flex_i_sm { display: flex !important; }

	.jc_fs_sm { justify-content: flex-start; }
	.jc_fe_sm { justify-content: flex-end; }
	.jc_center_sm { justify-content: center; }
	.jc_sb_sm { justify-content: space-between; }

	.ai_fs_sm { align-items: flex-start; }
	.ai_fe_sm { align-items: flex-end; }
	.ai_center_sm { align-items: center; }

	.as_fs_sm { align-self: flex-start; }
	.as_fe_sm { align-self: flex-end; }
	.as_center_sm { align-self: center; }

	.fw_wrap_sm { flex-wrap: wrap; }
	.fw_nowrap_sm { flex-wrap: nowrap; }
}



@media screen and (min-width: 768px) {
	.d_flex_md { display: flex; }
	.d_flex_i_md { display: flex !important; }

	.jc_fs_md { justify-content: flex-start; }
	.jc_fe_md { justify-content: flex-end; }
	.jc_center_md { justify-content: center; }
	.jc_sb_md { justify-content: space-between; }

	.ai_fs_md { align-items: flex-start; }
	.ai_fe_md { align-items: flex-end; }
	.ai_center_md { align-items: center; }

	.as_fs_md { align-self: flex-start; }
	.as_fe_md { align-self: flex-end; }
	.as_center_md { align-self: center; }

	.fw_wrap_md { flex-wrap: wrap; }
	.fw_nowrap_md { flex-wrap: nowrap; }
}



@media screen and (min-width: 1024px) {
	.d_flex_lg { display: flex; }
	.d_flex_i_lg { display: flex !important; }

	.jc_fs_lg { justify-content: flex-start; }
	.jc_fe_lg { justify-content: flex-end; }
	.jc_center_lg { justify-content: center; }
	.jc_sb_lg { justify-content: space-between; }

	.ai_fs_lg { align-items: flex-start; }
	.ai_fe_lg { align-items: flex-end; }
	.ai_center_lg { align-items: center; }

	.as_fs_lg { align-self: flex-start; }
	.as_fe_lg { align-self: flex-end; }
	.as_center_lg { align-self: center; }

	.fw_wrap_lg { flex-wrap: wrap; }
	.fw_nowrap_lg { flex-wrap: nowrap; }
}




.mt10 {margin-top: 10px;}
.mt20 {margin-top: 20px;}
.mt30 {margin-top: 30px;}
.mt40 {margin-top: 40px;}
.mt50 {margin-top: 50px;}
.mt60 {margin-top: 60px;}
.mt70 {margin-top: 70px;}
.mt80 {margin-top: 80px;}
.mt90 {margin-top: 90px;}
.mt100 {margin-top: 100px;}

.mr10 {margin-right: 10px;}
.mr20 {margin-right: 20px;}
.mr30 {margin-right: 30px;}
.mr40 {margin-right: 40px;}
.mr50 {margin-right: 50px;}
.mr60 {margin-right: 60px;}
.mr70 {margin-right: 70px;}
.mr80 {margin-right: 80px;}
.mr90 {margin-right: 90px;}
.mr100 {margin-right: 100px;}

.mb10 {margin-bottom: 10px;}
.mb20 {margin-bottom: 20px;}
.mb30 {margin-bottom: 30px;}
.mb40 {margin-bottom: 40px;}
.mb50 {margin-bottom: 50px;}
.mb60 {margin-bottom: 60px;}
.mb70 {margin-bottom: 70px;}
.mb80 {margin-bottom: 80px;}
.mb90 {margin-bottom: 90px;}
.mb100 {margin-bottom: 100px;}

.ml10 {margin-left: 10px;}
.ml20 {margin-left: 20px;}
.ml30 {margin-left: 30px;}
.ml40 {margin-left: 40px;}
.ml50 {margin-left: 50px;}
.ml60 {margin-left: 60px;}
.ml70 {margin-left: 70px;}
.ml80 {margin-left: 80px;}
.ml90 {margin-left: 90px;}
.ml100 {margin-left: 100px;}

.p10 {padding: 10px;}
.p20 {padding: 20px;}
.p30 {padding: 30px;}
.p40 {padding: 40px;}
.p50 {padding: 50px;}
.p60 {padding: 60px;}
.p70 {padding: 70px;}
.p80 {padding: 80px;}
.p90 {padding: 90px;}
.p100 {padding: 100px;}

.pt10 {padding-top: 10px;}
.pt20 {padding-top: 20px;}
.pt30 {padding-top: 30px;}
.pt40 {padding-top: 40px;}
.pt50 {padding-top: 50px;}
.pt60 {padding-top: 60px;}
.pt70 {padding-top: 70px;}
.pt80 {padding-top: 80px;}
.pt90 {padding-top: 90px;}
.pt100 {padding-top: 100px;}

@media screen and (min-width: 768px) {
	.mt20_md {margin-top: 20px;}
	.ml00_md {margin-left: 0px;}
}

@media screen and (min-width: 1024px) {
	.pl100_lg {padding-left: 100px;}
	.pr100_lg {padding-right: 100px;}
}


/* ==================================================

	text-align

================================================== */

.tright { text-align: right !important; }
.tcenter { text-align: center !important; }
.tleft { text-align: left !important; }

@media screen and (min-width: 480px) {
	.tright_sm { text-align: right !important; }
	.tcenter_sm { text-align: center !important; }
	.tleft_sm { text-align: left !important; }
}

@media screen and (min-width: 768px) {
	.tright_md { text-align: right !important; }
	.tcenter_md { text-align: center !important; }
	.tleft_md { text-align: left !important; }
}

@media screen and (min-width: 1024px) {
	.tright_lg { text-align: right !important; }
	.tcenter_lg { text-align: center !important; }
	.tleft_lg { text-align: left !important; }
}

/* ----------------------------------------
	colorBox
---------------------------------------- */

.colorBox .heading {
	padding: 20px;
	background: #5ecd7b;
}
.colorBox .subheading {
	padding: 15px 20px;
	background: #5ecd7b;
	border-top: 1px solid #000;
}
.colorBox .cont {
	padding: 20px;
	background: #7ed795;
}

@media screen and (min-width: 768px) {
	.colorBox .heading,
	.colorBox .subheading,
	.colorBox .cont {
		padding-right: 30px;
		padding-left: 30px;
	}
}
.colorBox {
	font-size: 18px;
}
.colorBox .heading {
	padding: 15px 20px;
}
.colorBox .sub_heading .inner {
	padding: 15px 20px;
}
.colorBox .text .inner {
	padding: 20px 20px 50px;
}
.colorBox .list_basic > li {
	font-size: 18px;
	line-height: 22px;
}
.colorBox .list_basic > li::before {
	top: 0;
	height: 22px;
	font-size: 1.5em;
	line-height: 22px;
}
.colorBox * + .list_basic {
	margin-top: 20px;
}
.colorBox .btn_area {
	margin-top: 20px;
}

@media screen and (min-width: 768px) {
	.colorBox .heading,
	.colorBox .description .inner {
		padding-right: 30px;
		padding-left: 30px;
	}
}

@media screen and (max-width: 1279px) {
	.colorBox .image img {
		width: 100%;
		height: auto;
	}
}

@media screen and (min-width: 1280px) {
	.colorBox .cont {
		display: flex;
	}
	.colorBox .description .inner {
		width: 440px;
		/*margin-left: calc(50vw - (610px + 30px));*/
	}
	.colorBox .image {
		max-width: 1053px;
	}
	.colorBox .image img {
		object-fit: cover;
		height: 100%;
	}
	/* imgL */
	.colorBox.imgL .cont {
		flex-direction: row-reverse;
	}
	.colorBox.imgL .description .inner {
		margin-right: calc(50vw - (610px + 30px));
		margin-left: auto;
	}
}

@media screen and (min-width: 1920px) {
	.colorBox .description .inner {
		width: calc(486px + 60px);
	}
}


.box {
	border: 1px solid #000;
}
.box .inner {
	padding: 10px;
}

@media screen and (min-width: 768px) {
	.box .inner {
		padding: 20px;
	}
}

/* ==================================================
	hardware
================================================== */

.prod_link {
	display: flex;
	flex-wrap: wrap;
	margin: -30px -5px 0;
}
.prod_link > li {
	width: calc(100% / 2);
	margin-top: 30px;
	padding: 0 5px;
	text-align: center;
}
.prod_link > li > a {
	color: #000;
}
.prod_link .img_area {
	padding: 20px 5px;
	background: #e6e6e6;
}
.prod_link p {
	font-size: 14px;
	line-height: 1.3;
}

@media screen and (min-width: 480px) {
	.prod_link > li {
		width: calc(100% / 3);
	}
}

@media screen and (min-width: 768px) {
	.prod_link > li {
		width: calc(100% / 4);
	}
}

@media screen and (min-width: 1024px) {
	.prod_link > li {
		width: calc(100% / 7);
	}
}

/*sustainable_list*/
.sustainable_list {
	margin-top: 20px;
}
.sustainable_list .img_area {
	text-align: center;
}
.sustainable_list .text_area {
	padding: 20px;
}
.sustainable_list >div:nth-of-type(n+2) {
	margin-top: 20px;
}
@media screen and (min-width: 768px) {
	.sustainable_list {
		margin-top: 40px;
	}
	.sustainable_list >div:nth-of-type(n+2) {
	margin-top: 40px;
}
	.sustainable_list .img_area {
		width: 40%;
	}
	.sustainable_list .text_area {
		width: 60%;
	}
}


.climateimpact .img_area {
	position: relative;
}
.climateimpact .img_area .top {
	position: absolute;
	top: 10px;
	left: 10px;
	width: 200px;
}
.climateimpact .img_area .bottom {
	position: absolute;
	bottom: 10px;
	right: 10px;
	color: #fff;
}
@media screen and (min-width: 480px) {
	.climateimpact .img_area .top {
		width: 300px;
	}
}
@media screen and (min-width: 768px) {
	.climateimpact .img_area .top {
		width: 400px;
	}
}

.climateimpact_project {
	background: #f2f2f2;
	padding: 20px;
}
.climateimpact_project >.col1> div {
	background: #fff;
	padding: 10px;
}
.climateimpact_project >.col1> div a {
	word-break: break-all;
}
@media screen and (min-width:768px) {
	.climateimpact_project >.col1> div {
		padding: 20px;
	}
}

/* ----------------------------------------
	target
---------------------------------------- */

.target {
	display: flex;
	margin: 20px -10px 0;
	text-align: center;
}
.target > li {
	max-width: 50%;
	padding: 0 10px;
}
.target .icon {
	display: flex;
	justify-content: center;
	height: 32px;
}
.target .icon > :nth-child(n+2) {
	margin-left: 10px;
}
.target .icon img {
	width: auto;
	max-height: 100%;
}
.target p {
	margin-top: 10px;
	font-size: 12px;
	line-height: 1.3;
}

@media screen and (max-width: 479px) {
	.target > li {
		flex: 1;
	}
	.target p br {
		display: none;
	}
}

@media screen and (min-width: 480px) {
	.target {
		margin-right: -15px;
		margin-left: -15px;
	}
	.target > li {
		padding: 0 15px;
	}
	.target .icon {
		height: 42px;
	}
}

@media screen and (min-width: 1024px) {
	.target .icon {
		height: 52px;
	}
}
/* ----------------------------------------
	cont_wrap
---------------------------------------- */

.cont_wrap {
	padding: 30px 20px;
}

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



/* ----------------------------------------
	heading
---------------------------------------- */

.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 {
	font-weight: normal;
}
.xl, .xxl, .x3l, .x4l, .x5l {
	font-family: "FormaDJRDisplay","FormaDJRJapaneseDisplay";
}

.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; }

@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; }
}


.heading {
	padding: 20px;
}

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

/* hLine -------------------- */

.hLine {
	overflow: hidden;
	font-weight: normal;
	text-align: center;
}
.hLine > span {
	display: inline-block;
	position: relative;
	padding: 0 .5em;
}
.hLine > span::before,
.hLine > span::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 99em;
	border-top: 1px solid #000;
}
.hLine > span::before {
	right: 100%;
}
.hLine > span::after {
	left: 100%;
}


/* title_line -------------------- */

.title_line {
	padding: 30px 20px 15px;
	border-bottom: 1px solid #000;
}

@media screen and (min-width: 768px) {
	.title_line {
		padding: 40px 30px 15px;
	}
}


/* title_bar -------------------- */

.title_bar {
	padding: 15px 20px;
}

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



/* ----------------------------------------
	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; }

.visid p + p,
.visid div + p,
.visid ul + p,
.visid ol + p,
.visid dl + p,
.visid img + p {
	margin-top: 1em;
}



/* ----------------------------------------
	sup
---------------------------------------- */

sup.small {
	vertical-align: super;
	font-size: 13.3333px;
	font-weight: normal;
}




/* ----------------------------------------
	button
---------------------------------------- */

a.button {
	display: inline-block;
	vertical-align: bottom;
	padding: .5em 1.2em;
	font-size: 16px;
	text-align: center;
	line-height: 1.2;
	transition: .2s;
}
a.button:link,
a.button:visited,
a.button:hover,
a.button:focus {
	color: #fff;
	text-decoration: none;
}
a.button.slim {
	font-size: 13px;
}
a.button.sslim {
	font-size: 11px;
}


/* color -------------------- */

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

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

/* white */
a.button.white {
	color: #000;
	background: #fff;
}
a.button.white:hover {
	background: #ccc;
}
.button.line {
	border: 1px solid #000;
	transition: .2s;
}
/* white2 -------------------- */

.button.line.white2:link,
.button.line.white2:visited {
	color: #fff;
	border-color: #fff;
}
.button.line.white2:hover,
.button.line.white2:focus {
	color: #000;
	background-color: #fff;
}

/* black -------------------- */

.button.line.black:link,
.button.line.black:visited {
	color: #000;
	border-color: #000;
}
.button.line.black:hover,
.button.line.black:focus {
	color: #fff;
	background-color: #000;
}

/* black2 -------------------- */

.button.line.black2:link,
.button.line.black2:visited {
	color: #fff;
	background-color: #000;
	border-color: #000;
}
.button.line.black2:hover,
.button.line.black2:focus {
	color: #000;
	background-color: #fff;
	border-color: #000;
}

/* ----------------------------------------
	c-button-secondary
---------------------------------------- */

.c-button-secondary {
	display: inline-block;
	position: relative;
	min-height: 32px;
	padding: 6px 0 0 38px;
	color: #000 !important;
	font-size: 16px;
	text-align: left;
	text-decoration: none !important;
	line-height: 1.2;
	border: 1px solid transparent;
}
.c-button-secondary::before,
.c-button-secondary::after {
	display: inline-block;
	content: "";
	position: absolute;
}
.c-button-secondary::before {
	top: 0;
	left: 0;
	z-index: 1;
	width: 30px;
	height: 30px;
	background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path d="M30,15A15,15,0,1,0,15,30,15,15,0,0,0,30,15ZM14,21a1,1,0,0,1-.86-1.51L15.83,15l-2.69-4.48a1,1,0,1,1,1.72-1l3,5a1,1,0,0,1,0,1l-3,5A1,1,0,0,1,14,21Z"></path></svg>');
}
.c-button-secondary::after {
	top: 5px;
	left: 5px;
	width: 20px;
	height: 20px;
	background: #fff;
	border-radius: 50%;
}
.c-button-secondary .c-button__text {
	position: relative;
}
.c-button-secondary .c-button__text::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	transition: width .2s linear;
	width: 0;
	height: 1px;
	background: #000;
}
.c-button-secondary:hover .c-button__text::after {
	width: 100%;
}

/* ==================================================
	local_navi
================================================== */
.tab-wrap {
	display: flex;
	flex-wrap: wrap;
	margin-top: 40px;
	padding-bottom: 10px;
	background: #fff;
}

.tab-label {
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: #767676;
	margin-right: 5px;
	padding: 10px;
	order: -1;
	text-align: center;
	line-height: 1.2;
	cursor: pointer;
}
@media screen and (max-width: 767px) {
	.tab-label {
		width: 48%;
		font-size: 14px;
	}
}

.tab-content {
	position: relative;
    width: 100%;
    display: none;
}
.tab-content::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 1px;
	border-top: 1px solid #000;
	top: -2px;
	left: 0;
	z-index: -1;
}
/* アクティブなタブ */
.tab-switch:checked+.tab-label {
	color: #000;
	background: #8edca2;
	border: 1px solid #000;
	border-radius: 4px 4px 0 0;
	border-bottom: none;
}
.tab-switch:checked+.tab-label+.tab-content {
     display: block;
}
/* ラジオボタン非表示 */
.tab-switch {
    display: none;
}
@media screen and (min-width: 1024px) {
	.tab-label {
	padding: 10px 15px;
	}
}

.local_navi_menu {
	position: sticky;
	top: 0;
	width: 100%;
	z-index: 5;
}
.acco_check {
	display: none;
}
.local_navi_menu_list {
	display: flex;
	flex-wrap: wrap;
}

.local_navi_menu_list > li {
	margin-top: 10px;
}
.local_navi_menu_list a {
	display: flex;
	align-items: center;
	padding: 0 10px;
	height: 100%;
	color: #000 !important;
	text-decoration: underline;
}
.local_navi_menu_list a:hover {
	text-decoration: none;
}

.local_navi_menu_list .prodname {
	display: block;
}

@media screen and (max-width: 1023px) {
	html {
		scroll-padding-top: 100px;
	}
	.local_navi_trigger {
		display: flex;
		align-items: center;
		transition: .2s;
		height: 48px;
		margin-bottom: 1px;
		padding: 8px 16px;
		color: #fff;
		background: #000;
		cursor: pointer;
	}
	.local_navi_trigger::before {
		content: "";
		width: 12px;
		height: 6px;
		margin-right: 8px;
		background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6"><path d="m455.465 769.707-1.847-.974 3.478-5.054-3.475-4.989 1.841-.983 4.156 5.966z" transform="rotate(90 611.663 158.045)" fill="%23fff"></path></svg>');
	}
	.acco_check:checked + .local_navi_trigger::before {
		transform: rotate(180deg);
	}
	.local_navi_menu {
		/*display: block;
		visibility: hidden;
		transition: .5s;
		opacity: 0;
		position: absolute;
		width: 100%;
		height: 0;
		margin-top: -1px;
		background: #fff;*/
	}
	.acco_check:checked + .local_navi_trigger + .local_navi_menu {
		visibility: visible;
		height: auto;
		padding: 0;
		opacity: 1;
	}
	.local_navi_menu_level1 {
		overflow-y: scroll;
		width: 100%;
		padding: 5px 0;
	}
	.local_navi_menu_level1 > li {
		padding: 5px 16px;
	}
	.local_navi_menu_level1 > li:nth-child(n+2) {
		margin-top: 10px;
	}
	.local_navi_menu_list a {
		font-size: 16px;
	}
}

@media screen and (min-width: 480px) and (max-width: 1023px) {
	.local_navi_menu_list .prodname {
		display: inline;
		margin-left: 5px;
	}
}

@media screen and (min-width: 1024px) {
	html {
		scroll-padding-top: 80px;
	}
	.local_navi_trigger {
		display: none;
	}
	.local_navi_menu_level1 {
		display: flex;
		justify-content: space-between;
		background: #fff;
	}
	.local_navi_menu_level1 > li {
		padding: 5px;
		width: 49%;
	}
	.local_navi_menu_list {
		display: flex;
		margin: 0 -5px;
	}
	.local_navi_menu_list > li {
		
		padding: 0 30px;
	}
	.local_navi_menu_list a {
		font-size: 18px;
		padding: 10px;
	}
}

/* ----------------------------------------
	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;
}



/* ----------------------------------------
	list_basic
---------------------------------------- */

.list_basic > li {
	position: relative;
	padding-left: 1em;
	line-height: 1.6;
	text-align: left;
}
.list_basic > li:nth-child(n+2) {
	margin-top: 5px;
}
.list_basic > li::before {
	content: "\2022";
	position: absolute;
	top: .06em;
	left: 0;
	font-family: Arial;
	font-size: 130%;
	line-height: 1;
}


/* row -------------------- */

.list_basic.row {
	display: flex;
	flex-wrap: wrap;
	margin-right: -30px;
}
.list_basic.row > li {
	margin-right: 30px;
}
.list_basic.row > li:nth-child(n+2) {
	margin-top: 0;
}



/* ----------------------------------------
	table - scroll
---------------------------------------- */

.table_scroll {
	display: block;
	overflow-x: auto;
	white-space: nowrap;
	-webkit-overflow-scrolling: touch;
}
.table_scroll::-webkit-scrollbar {
	height: 6px;
}
.table_scroll::-webkit-scrollbar-track {
	background: #f5f5f5;
}
.table_scroll::-webkit-scrollbar-thumb {
	background: #0096d6;
	border-radius: 3px;
}
.table_scroll table {
	min-width: 100%;
	width: auto;
}

.table_scroll_none {
	overflow-x: visible;
	white-space: normal;
}

@media screen and (min-width: 480px) {
	.table_scroll_sm {
		overflow-x: auto;
		white-space: nowrap;
	}
	.table_scroll_none_sm {
		overflow-x: visible;
		white-space: normal;
	}
	.table_scroll_none_sm table {
		width: auto;
	}
}

@media screen and (min-width: 768px) {
	.table_scroll_md {
		overflow-x: auto;
		white-space: nowrap;
	}
	.table_scroll_none_md {
		overflow-x: visible;
		white-space: normal;
	}
	.table_scroll_none_md table {
		width: auto;
	}
}

@media screen and (min-width: 1024px) {
	.table_scroll_lg {
		overflow-x: auto;
		white-space: nowrap;
	}
	.table_scroll_none_lg {
		overflow-x: visible;
		white-space: normal;
	}
	.table_scroll_none_lg table {
		width: auto;
	}
}


/* ----------------------------------------
	pop-up
---------------------------------------- */

.pop-up .open {
	transition: .2s;
	cursor: pointer;
}
.pop-up .open:hover {
	opacity: .75;
}
.pop-up [id^="pop-up"] {
	display: none;
}
.pop-up .overlay {
	display: none;
}
.pop-up [id^="pop-up"]:checked + .overlay {
	display: block;
	z-index: 9999;
	background-color: #00000070;
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
}
.pop-up .window {
	width: 90vw;
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.pop-up .close {
	cursor:pointer;
	position: absolute;
	color: #fff;
	font-size: 40px;
	right: -24px;
	top: -40px;
	text-align: right;
	padding-right: 6px;
	width: 100%;
}



/* ----------------------------------------
	video
---------------------------------------- */

.video-container {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%;
	overflow: hidden;
}
.video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/* video_wrap -------------------- */

.video_wrap {
	max-width: 860px;
	margin: 0 auto;
}
.title_comment + .video_wrap {
	margin-top: 20px;
}


/* videoText -------------------- */

.title_comment + .videoText {
	margin-top: 20px;
}
.videoText + .videoText {
	margin-top: 40px;
}
.videoText .text_area .title_line {
	margin-bottom: 15px;
}

@media screen and (max-width: 767px) {
	.videoText .text_area {
		margin-top: 20px;
	}
}

@media screen and (min-width: 768px) {
	.videoText {
		display: flex;
		justify-content: space-between;
	}
	.videoText .video_area,
	.videoText .text_area {
		width: calc(50% - 20px);
	}
}





/* ==================================================
	wolf_title
================================================== */

.wolf_title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px 20px;
	color: #fff;
	background: #0d435b;
}
.wolf_title .text_area {
	width: calc(67% - 15px);
}
.wolf_title .logo_area {
	width: 33%;
}
.wolf_title .logo_area img {
	width: 100%;
	max-width: 200px;
}

@media screen and (min-width: 768px) {
	.wolf_title {
		padding-right: 30px;
		padding-left: 30px;
	}
	.wolf_title .text_area {
		width: calc(100% - 220px);
	}
	.wolf_title .logo_area {
		width: 200px;
	}
}





/* ==================================================
	main
================================================== */

.main {
	background: #99ecc7;
	word-break: auto-phrase;
}
.main > .inner {
	padding: 0;
}
.main .img_area {
	position: relative;
	background: #e6e6e6;
}
.main .img_area img {
	width: 100%;
}
.main .img_area .pc {
	display: none;
}
.main .heading1 {
	background: #00d072;
	color: #000;
}
.main .heading2 {
	background: #66e3aa;
	color: #000;
}
.main .heading2 .logo {
	width: 60px;
	height: 60px;
	margin-top: 10px;
}
.main .heading > .inner {
	padding: 10px 20px;
}
.main .copy > .inner {
	padding: 20px;
}
.main .list > li {
	padding: 15px;
}
.main .list > li+li {
	border-top: 1px solid #000;
}
.main .list > li a {
	color: #000;
	text-decoration: none;
}
.main .list > li a:hover {
	color: #000;
	text-decoration: underline;
}

@media screen and (min-width: 768px) {
	.main .heading2 .logo {
		margin-top: 0;
	}
}

@media screen and (min-width: 1040px) {
/*	.main .img_area .pc {
		display: inline;
	}*/
}

/* ==================================================
	pc_security
================================================== */

.pc_security .heading {
	background: #9bc9ce;
}
.pc_security table {
	table-layout: fixed;
	width: 100%;
	border-bottom: 1px solid #000;
}
.pc_security table th,
.pc_security table td {
	vertical-align: middle;
	padding: 15px 10px;
	text-align: center;
	line-height: 1.4;
	border-top: 1px solid #000;
}
.pc_security table th:nth-child(n+2),
.pc_security table td:nth-child(n+2) {
	border-left: 1px solid #000;
}
.pc_security table th {
	font-weight: normal;
	background: #e6ecef;
}

@media screen and (max-width: 1023px) {
	.pc_security table {
		width: 1000px;
		white-space: normal;
	}
	.pc_security table th,
	.pc_security table td {
		padding: 10px;
		font-size: 14px;
	}
}





/* ==================================================
	remote_work
================================================== */

.remote_work .heading {
	background: #9bc9ce;
}
.remote_work .cont {
	background: #d6eaeb;
}
.remote_work .sub_heading {
	background: #c1dfe0;
}

/* ==================================================
	wps main
================================================== */

#wps .main {
	background: #cbe2fd;
}
#wps .main .img_area {
	position: relative;
}
#wps .main .img_area img {
	object-fit: cover;
	width: 100%;
	height: 385px;
}
#wps .main .heading {
	background: #0d435b;
	color: #fff;
	padding: 0;
}
#wps .main .text_area {
	padding: 0;
}
#wps .main .text_area .inner {
	padding: 20px;
}
#wps .main .copy > .inner p {
	font-size: 20px;
	line-height: 24px;
}
#wps .main .logo {
	padding: 40px 0 20px;
}
#wps .main .logo img {
	width: auto;
	height: 80px;
}

@media screen and (min-width: 768px) {
	#wps .main .text_area {
		padding: 0;
	}
	#wps .main .text_area .inner {
		padding-right: 30px;
		padding-left: 30px;
	}
	#wps .main .img_area img {
		height: 400px;
	}
	#wps .main .logo img {
		height: 100px;
	}
}

@media screen and (min-width: 1280px) {
	#wps .main > .inner {
		display: flex;
	}
	#wps .main .text_area {
		width: auto;
	}
	#wps .main .text_area .inner {
		width: 500px;
		/*margin-left: calc(50vw - (610px + 30px));*/
	}
	#wps .main .img_area {
		width: auto;
		max-width: 1053px;
	}
	#wps .main .img_area img {
		object-position: 80%;
		height: 100%;
	}
}

@media screen and (min-width: 1920px) {
	#wps .main .text_area .inner {
		width: calc(486px + 60px);
	}
}

/* ----------------------------------------
	title
---------------------------------------- */

.title {
	padding: 25px 20px;
	border-bottom: 1px solid #000;
}

@media screen and (min-width: 768px) {
	.title {
		padding-right: 30px;
		padding-left: 30px;
	}
}



.feature .heading {
	background: #0d435b;
	color: #fff;
}



.fs25 {font-size: 25px;}
.bold {font-weight: bold;}
.bo_r08 {border-radius: 8px;}
.bold {font-weight: bold;}


/* ==================================================
	license
================================================== */
.license {
	color: #114284;
}
@media screen and (min-width: 768px) {
	.license {
		display: flex;
		justify-content: space-between;
	}
	.license > div {
		width: 48%;
	}
}

.license .balloon_bottom {
	display: inline-block;
	background: #0096d6;
	border: 2px solid #fff;
	color: #fff;
}
.license .balloon::before,
.license .balloon::after {

}

.license .balloon_bottom::before{
	border-top-color: #ffffff;
}

.license .balloon_bottom::after {
	border-top-color: #0096d6;
}


/* ==================================================
	balloon
================================================== */
.balloon_bottom {
	position: relative;
	text-align: left;
	border-radius: .8rem;
	background-color: #B9DBE3;
}

.balloon_bottom::before,
.balloon_bottom::after {
	border: solid transparent;
	content: '';
	height: 0;
	width: 0;
	pointer-events: none;
	position: absolute;
	left: 50%;
	top: 100%;
}

.balloon_bottom::before {
	border-color: rgba(0, 150, 214, 0);
	border-top-width: 11px;
	border-bottom-width: 11px;
	border-left-width: 7px;
	border-right-width: 7px;
	margin-left: -7px;
	margin-top: 2px;
}

.balloon_bottom::after {
	border-color: rgba(255, 255, 255, 0);
	border-top-width: 8px;
	border-bottom-width: 8px;
	border-left-width: 5px;
	border-right-width: 5px;
	margin-left: -5px;
	border-top-color: #B9DBE3;
}

.balloon_top {
	position: relative;
	text-align: left;
	border-radius: .8rem;
	background-color: #B9DBE3;
}
.balloon_top::before,
.balloon_top::after {
	border: solid transparent;
	content: '';
	height: 0;
	width: 0;
	pointer-events: none;
	position: absolute;
	left: 50%;
	bottom: 100%;
}

.balloon_top::after {
	border-color: rgba(255, 255, 255, 0);
	border-top-width: 8px;
	border-bottom-width: 8px;
	border-left-width: 5px;
	border-right-width: 5px;
	border-bottom-color: #B9DBE3;
}

.balloon_left {
	position: relative;
	text-align: left;
	border-radius: .8rem;
	background-color: #B9DBE3;
}

.balloon_left::before,
.balloon_left::after {
	border: solid transparent;
	content: '';
	height: 0;
	width: 0;
	pointer-events: none;
	position: absolute;
	right: 100%;
	top: 50%;
}

.balloon_left::before {
	border-color: rgba(0, 150, 214, 0);
	border-top-width: 7px;
	border-bottom-width: 7px;
	border-left-width: 14px;
	border-right-width: 14px;
	margin-top: -8px;
	margin-right: 2px;
}

.balloon_left::after {
	border-color: rgba(255, 255, 255, 0);
	border-top-width: 5px;
	border-bottom-width: 5px;
	border-left-width: 10px;
	border-right-width: 10px;
	margin-top: -6px;
	border-right-color: #FFFFFF;
}

.balloon_right {
	position: relative;
	text-align: left;
	border-radius: .8rem;
	background-color: #B9DBE3;
}
.balloon_right::before,
.balloon_right::after {
	border: solid transparent;
	content: '';
	height: 0;
	width: 0;
	pointer-events: none;
	position: absolute;
	left: 100%;
	top: 50%;
}

.balloon_right::before {
	border-color: rgba(0, 150, 214, 0);
	border-top-width: 7px;
	border-bottom-width: 7px;
	border-left-width: 14px;
	border-right-width: 14px;
	margin-top: -8px;
	margin-left: 2px;
}

.balloon_right::after {
	border-color: rgba(255, 255, 255, 0);
	border-top-width: 5px;
	border-bottom-width: 5px;
	border-left-width: 10px;
	border-right-width: 10px;
	margin-top: -6px;
	border-left-color: #B9DBE3;
}



@media screen and (min-width: 768px) {
	.balloon_left_md {
		position:relative;
		text-align:left;
		border-radius:.8rem;
		background-color: #B9DBE3;
	}
	.balloon_left_md::before,
	.balloon_left_md::after {
		border: solid transparent;
		content:'';
		height:0;
		width:0;
		pointer-events:none;
		position:absolute;
		right:100%;
		top:50%;
		left:0;
	}
	
	.balloon_left_md::before{
		border-color: rgba(0, 150, 214, 0);
		border-top-width: 7px;
		border-bottom-width: 7px;
		border-left-width: 14px;
		border-right-width: 14px;
		margin-top: -8px;
		margin-right: 2px;
		margin-left: -28px;
	}
	
	.balloon_left_md::after {
		border-color: rgba(255, 255, 255, 0);
		border-top-width: 5px;
		border-bottom-width: 5px;
		border-left-width: 10px;
		border-right-width: 10px;
		margin-top: -6px;
		margin-left: -19px;
		border-right-color: #B9DBE3;
	}
	
	.balloon_right_md {
		position:relative;
		text-align:left;
		border-radius:.8rem;
		background-color: #B9DBE3;
	}
	.balloon_right_md::before,
	.balloon_right_md::after {
		border: solid transparent;
		content:'';
		height:0;
		width:0;
		pointer-events:none;
		position:absolute;
		left:100%;
		top:50%;
	}
	
	.balloon_right_md::before{
		border-color: rgba(0, 150, 214, 0);
		border-top-width: 7px;
		border-bottom-width: 7px;
		border-left-width: 14px;
		border-right-width: 14px;
		margin-top: -8px;
		margin-left: 2px;
	}
	
	.balloon_right_md::after {
		border-color: rgba(255, 255, 255, 0);
		border-top-width: 5px;
		border-bottom-width: 5px;
		border-left-width: 10px;
		border-right-width: 10px;
		margin-top: -6px;
		margin-left: 0px;
		border-left-color: #B9DBE3;
	}
}
/* ==================================================
	feature
================================================== */
.feature_list {
	display: flex;
	flex-wrap: wrap;
		justify-content: center;
		align-items: center;
}
.feature_list >div {
	width: 100%;
}

@media screen and (min-width: 768px) {
	.feature_list > div {
		width: 48%;
	}
}

/* ==================================================
	overview
================================================== */

/* ----------------------------------------
	merit
---------------------------------------- */

#overview .merit .img_area img {
	width: auto;
	max-width: 100%;
}
#overview .merit .img_area .item {
	position: relative;
}
#overview .merit .text {
	margin-top: 10px;
}
@media screen and (max-width: 1023px) {
	#overview .merit .img_area,
	#overview .merit .text_area {
		margin-top: 20px;
	}
}

@media screen and (min-width: 1024px) {
	#overview .merit {
		display: flex;
		justify-content: space-between;
	}
	#overview .merit .img_area {
		width: calc(50% - 15px);
	}
	#overview .merit .text_area {
		width: calc(50% - 15px);
	}
	#overview .merit .slider_navi {
		margin-top: 30px;
	}
}

@media screen and (min-width: 1280px) {
	#overview .merit .img_area {
		width: 60%;
	}
	#overview .merit .text_area {
		width: 38%;
	}
}

#overview .merit .slider_navi summary {
	display: block;
}
#overview .merit .slider_navi summary::-webkit-details-marker {
	display: none;
}
#overview .merit .slider_navi details summary {
	position: relative;
	padding: .8em 25px .8em 20px;
	font-size: 18px;
	cursor: pointer;
	border-bottom: 1px solid #ccc;
}
#overview .merit .slider_navi details summary::after {
	content: "";
	position: absolute;
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
	right: 10px;
	width: 8px;
	height: 8px;
	margin-left: 8px;
	border-right: 2px solid #767676;
	border-bottom: 2px solid #767676;
}
#overview .merit .slider_navi details summary:hover {
	cursor: pointer;
}
#overview .merit .slider_navi details[open] summary::after {
	content: "";
	position: absolute;
	top: 50%;
	transform: translateY(-50%) rotate(-135deg);
	right: 10px;
	width: 8px;
	height: 8px;
	margin-left: 8px;
	border-right: 2px solid #767676;
	border-bottom: 2px solid #767676;
}



/* ----------------------------------------
	cons_list
---------------------------------------- */

.cons_list {
	margin: 0 -10px;
}
.cons_list > li {
	margin-top: 20px;
	padding: 0 10px;
}
.cons_list .inner {
	height: 100%;
	border: 1px solid #000;
}
.cons_list .title_area {
	padding: 20px;
	border-bottom: 1px solid #000;
}
.cons_list .title_area h3 {
	margin-top: 10px;
}
.cons_list .text_area {
	padding: 20px;
}
.cons_list .text_area * + .list_basic {
	margin-top: 20px;
}

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

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


/* ==================================================
	report
================================================== */

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

@media screen and (min-width: 1024px) {
	.report_cont {
		display: flex;
		justify-content: space-between;
	}
	.report_cont .text_area {
		width: calc(50% - 15px);
	}
	.report_cont .img_area {
		width: calc(50% - 15px);
		margin-top: 0;
	}
}

@media screen and (min-width: 1280px) {
	.report_cont .text_area {
		width: 483px;
	}
	.report_cont .img_area {
		width: 707px;
	}
}
/* ----------------------------------------
	price_table
---------------------------------------- */

table.price_table {
	width: auto;
	max-width: 100%;
	margin-top: 10px;
	background: #fff;
}
.price_table th,
.price_table td {
	vertical-align: middle;
	padding: .4em;
	color: #000;
	font-size: 13px;
	font-weight: normal;
	line-height: 1.3;
	text-align: center;
	border: 1px solid #000;
}
.price_table th {
	background: #f2f2f2;
}
.price_table thead th:first-child {
	min-width: 5em;
}
.price_table thead th:last-child {
	min-width: 4.5em;
}
.price_table tbody th,
.price_table tbody td {
	text-align: left;
}
.price_table tbody td:last-child {
	text-align: right;
	white-space: nowrap;
}

@media screen and (min-width: 1280px) {
	.price_table thead th:first-child {
		width: 5em;
	}
	.price_table thead th:last-child {
		width: 4.5em;
	}
}





/* ==================================================
	register
================================================== */

.register_table td:first-child {
	width: 200px;
}

@media screen and (max-width: 479px) {
	table.register_table {
		width: 480px;
		white-space: normal;
	}
}






/* ----------------------------------------
	dashboard
---------------------------------------- */

.dashboard {
	background: #c0d0d8;
}
.dashboard .inner {
	padding: 40px 20px;
}
.dashboard .img_area img {
	height: auto;
}
.dashboard .text_area {
	margin-top: 20px;
}
.db_detail dt {
	margin-top: 30px;
	border-bottom: 1px solid #000;
}
.db_detail dd {
	margin-top: 1em;
}

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

@media screen and (min-width: 1024px) {
	.dashboard .inner {
		display: flex;
		padding: 80px 30px 80px 0;
	}
	.dashboard .img_area {
		display: flex;
		align-items: center;
		width: 50%;
	}
	.dashboard .text_area {
		width: 50%;
		max-width: 610px;
		margin-top: 0;
	}
}

@media screen and (min-width: 1024px) and (max-width: 1280px) {
	.dashboard .img_area img {
		object-fit: cover;
		object-position: 85%;
		height: 70%;
	}
}

/* ==================================================
	spec_price
================================================== */

.spec_price {
	padding: 40px 20px;
	color: #fff;
	background: #000;
}
.spec_price_list {
	margin: -20px -15px;
}
.spec_price_list > li {
	padding: 20px 15px;
}

@media screen and (min-width: 480px) {
	.spec_price_list {
		display: flex;
		flex-wrap: wrap;
	}
	.spec_price_list > li {
		width: 50%;
		padding: 30px 15px;
	}
}

@media screen and (min-width: 768px) {
	.spec_price {
		padding-right: 30px;
		padding-left: 30px;
	}
}

@media screen and (min-width: 1024px) {
	.spec_price_list {
		flex-wrap: nowrap;
	}
	.spec_price_list > li {
		flex: 1;
		width: auto;
	}
}




/* ==================================================
	flow
================================================== */

/* ----------------------------------------
	flow_table
---------------------------------------- */

.flow_table td:first-child {
	width: 130px;
}
.flow_table .notes {
	margin-top: 1em;
}

@media screen and (max-width: 767px) {
	table.flow_table {
		width: 700px;
		white-space: normal;
	}
}

@media screen and (min-width: 1024px) {
	.flow_table td:first-child {
		width: 200px;
	}
}

/* ==================================================
	glossary
================================================== */

.glossary_list dd + dt {
	margin-top: 50px;
}
.glossary_list dd {
	margin-top: 1em;
}


/* ==================================================
	overview
================================================== */

.overview {
	background: #f5f5f5;
}

.overview .img_area img {
	object-fit: cover;
	object-position: 35%;
	min-height: 250px;
}
.overview_list {
	margin-top: -10px;
}
.overview_list > li {
	margin-top: 40px;
}

@media screen and (min-width: 768px) {
	.overview_list {
		display: flex;
		flex-wrap: wrap;
		margin: 0 -15px;
	}
	.overview_list > li {
		width: 33.33333%;
		padding: 0 15px;
	}
}
/* ==================================================
	protect
================================================== */

.protect .heading {
	padding: 25px 20px;
	background: #8edca2;
}
.protect .cont {
	background: #bfebca;
}
.protect .text_area .inner {
	padding: 25px 20px;
}
.protect .list_basic {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid #000;
}

@media screen and (min-width: 768px) {
	.protect .heading,
	.protect .text_area .inner {
		padding-right: 30px;
		padding-left: 30px;
	}
}

@media screen and (max-width: 1023px) {
	.protect .img_area img {
		width: 100%;
	}
}

@media screen and (min-width: 1024px) {
	.protect .cont {
		display: flex;
	}
	.protect .text_area {
		width: 40%;
	}
	.protect .img_area {
		width: 60%;
	}
	.protect .img_area img {
		object-fit: cover;
		height: 100%;
	}
}

@media screen and (min-width: 1280px) {
	.protect .text_area {
		width: auto;
	}
	.protect .text_area .inner {
		width: 440px;
		/*margin-left: calc(50vw - (610px + 30px));*/
	}
	.protect .img_area {
		width: auto;
		max-width: 1053px;
	}
}

@media screen and (min-width: 1920px) {
	.protect .text_area .inner {
		width: calc(486px + 60px);
	}
}

/* ----------------------------------------
	lineBox
---------------------------------------- */

.lineBox_module {
	margin-top: 20px;
}
.lineBox_module > .inner {
	border: 1px solid #000;
}
.lineBox_module .img_area img {
	width: 100%;
}
.lineBox_module .title_area {
	padding: 20px;
	border-bottom: 1px solid #000;
}
.lineBox_module .text_area {
	padding: 20px;
}
.lineBox_module .btn_area {
	padding: 0 20px 20px;
}

@media screen and (min-width: 768px) {
	.lineBox {
		display: flex;
		margin: 0 -10px;
	}
	.lineBox_module {
		margin-top: 30px;
		padding: 0 10px;
	}
	/* v_2col */
	.v_2col .lineBox_module {
		width: 50%;
	}
	/* v_3col */
	.v_3col .lineBox_module {
		width: 33.33333%;
	}
}

/* ==================================================
	buy
================================================== */

.buy .lineBox_module .img_area {
	padding: 20px 10px;
	text-align: center;
	background: #e6e6e6;
}
.buy .lineBox_module .img_area img {
	max-width: 460px;
}
.buy .lineBox_module .list_basic > li:nth-child(n+2) {
	margin-top: 0;
}


/* ==================================================
	pickup
================================================== */

.pickup {
	background: #bfebca;
}
.pickup .heading {
	border-bottom: 1px solid #000;
}
.pickup .text_area .inner {
	padding: 25px 20px;
}

@media screen and (min-width: 768px) {
	.pickup .text_area .inner {
		padding-right: 30px;
		padding-left: 30px;
	}
}

@media screen and (max-width: 1023px) {
	.pickup .img_area img {
		width: 100%;
	}
}

@media screen and (min-width: 1024px) {
	.pickup .cont {
		display: flex;
		flex-direction: row-reverse;
	}
	.pickup .text_area {
		width: 40%;
	}
	.pickup .img_area {
		width: 60%;
	}
	.pickup .img_area img {
		object-fit: cover;
		height: 100%;
	}
}

@media screen and (min-width: 1280px) {
	.pickup .text_area {
		width: auto;
	}
	.pickup .text_area .inner {
		width: 440px;
		/*margin-right: calc(50vw - (610px + 30px));*/
	}
	.pickup .img_area {
		width: auto;
		max-width: 1053px;
	}
}

@media screen and (min-width: 1920px) {
	.pickup .text_area .inner {
		width: calc(486px + 60px);
	}
}



/* ==================================================

	table

================================================== */

/* hpeTable -------------------- */

.hpeTable th,
.hpeTable td {
	padding: .8em 1em;
	border: 1px solid #ccc;
}
.hpeTable th {
	color: #fff;
	text-align: left;
	background: #767676;
}
.hpeTable td.lightgrey {
	background: #f2f2f2;
}
.hpeTable td a:hover {
	text-decoration: underline;
}



/* style_basic -------------------- */

table.style_basic th,
table.style_basic td {
	padding: .8em 1em;
	border: 1px solid #ccc;
}
table.style_basic th {
	background: #f2f2f2;
}
table.style_basic .table_null {
	background: none;
	border: none;
}



/* table_null -------------------- */

th.table_null,
td.table_null {
	background: none;
	border: none;
}




/* ----------------------------------------
	sTable
---------------------------------------- */

table.sTable {
	table-layout: fixed;
	background: #fff;
}
.sTable th,
.sTable td {
	vertical-align: middle;
	padding: 15px;
	font-weight: normal;
	text-align: left;
	line-height: 1.4;
}

@media screen and (min-width: 768px) {
	table.sTable {
		width: 100%;
	}
}


/* thead -------------------- */

.sTable thead th {
	font-size: 20px;
	background: #f0bb5a;
	border-right: 1px solid #000;
	border-left: 1px solid #000;
}
.sTable thead tr:first-child th {
	border-top: 1px solid #000;
}
.sTable thead tr:nth-child(2) th {
	font-size: 18px;
	background: #f6d69c;
}
.sTable thead tr:nth-child(3) th {
	background: #fcf1de;
}

@media screen and (min-width: 1024px) {
	.sTable thead th {
		font-size: 22px;
	}
	.sTable thead tr:nth-child(2) th {
		font-size: 20px;
	}
	.sTable thead tr:nth-child(3) th {
		font-size: 18px;
	}
}


/* tbody -------------------- */

.sTable tbody th,
.sTable tbody td {
	border: 1px solid #000;
}
.sTable thead + tbody tr:first-child th,
.sTable thead + tbody tr:first-child td {
	border-top: none;
}
.sTable tbody th {
	background: #eaeaea;
	border-right: none;
}
.sTable tbody th + td {
	border-left: none;
}

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;
}
a.link_arrow:visited {
	color: #000;
}
* + .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: "";
	top: 10px;
	left: 8px;
	width: 10px;
	height: 10px;
	transform: rotate(-45deg);
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
}


.arrow_down {
	display: inline-block;
	content: "";
	margin: 1px 0 0 .5em;
	border-style: solid;
	border-width: 16px 10px 0 10px;
	border-color: #000 transparent transparent transparent ;
}


/*wps-edition*/

/* ----------------------------------------
	prodBox
---------------------------------------- */

.prodBox {
	font-size: 18px;
}
.prodBox > li {
	display: flex;
	flex-direction: column-reverse;
	background: #c2dfe1;
}
.prodBox >li .heading {
	background: #0d435b;
	color: #fff;
}
.prodBox > li:nth-child(n+2) {
	margin-top: 40px;
}
.prodBox .text {
	padding: 25px 20px 30px;
}
.prodBox .btn_area {
	margin-top: 20px;
}
.prodBox .img_area img {
	width: 100%;
}

@media screen and (min-width: 768px) {
	.prodBox > li {
		flex-direction: row;
	}

	.prodBox .text_area,
	.prodBox .img_area {
		width: 50%;
	}
	.prodBox .heading {
		padding: 25px 30px;
	}
	.prodBox .text {
		padding: 30px 30px 40px;
	}
	.prodBox .img_area img {
		object-fit: cover;
		height: 100%;
	}
}



/* ==================================================
	merit
================================================== */

.pc_security .merit {
	background: #eaf7fc;
}
.pc_security .merit_list {
	margin: 0 -15px;
}
.pc_security .merit_list > li {
	margin-top: 40px;
	padding: 0 15px;
}
.pc_security .merit_list .img_area img {
	width: 65px;
}
.pc_security .merit_list .text_area {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid #000;
}
.pc_security .merit_list h3 + p {
	margin-top: 8px;
}

@media screen and (min-width: 768px) {
	.pc_security .merit {
		padding-top: 50px;
		padding-bottom: 50px;
	}
	.pc_security .merit_list {
		display: flex;
		flex-wrap: wrap;
	}
	.pc_security .merit_list > li {
		width: 50%;
	}
}

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




/* ==================================================
	flow
================================================== */

.flow_list {
	counter-reset: num;
	margin: -40px -15px 0;
}
.flow_list > li {
	position: relative;
	margin-top: 40px;
	padding: 0 15px;
}
.flow_list > li::before {
	counter-increment: num;
	content: counter(num);
	position: absolute;
	width: 30px;
	height: 30px;
	color: #fff;
	text-align: center;
	line-height: 33px;
	background: #8edca2;
	border-radius: 50%;
}
.flow_list .img_area {
	text-align: center;
}
.flow_list h3 {
	margin-top: 15px;
	font-size: 16px;
	line-height: 1.3;
}
.flow_list p {
	margin-top: 10px;
	font-size: 14px;
}
.flow_list a.link_arrow {
	padding-top: 0;
	padding-left: 25px;
	font-size: 14px;
	letter-spacing: -.05em;
}
.flow_list .link_arrow::before {
	width: 20px;
	height: 20px;
}
.flow_list .link_arrow::after {
	top: 4px;
	left: 5px;
	font-size: 12px;
}

@media screen and (min-width: 480px) {
	.flow_list {
		display: flex;
		flex-wrap: wrap;
	}
	.flow_list > li {
		width: calc(100% / 2);
	}
}

@media screen and (min-width: 768px) {
	.flow_list > li {
		width: calc(100% / 4);
	}
}

@media screen and (min-width: 1024px) {
	.flow_list > li {
		width: calc(100% / 5);
	}
}



/* ==================================================
	pdf_list
================================================== */

.pdf_list {
	padding: 10px 0;
}
.pdf_list > li {
	margin-top: 40px;
	text-align: center;
}
.pdf_list h3 {
	line-height: 1.4;
}
.pdf_list .text_area * + p {
	margin-top: 5px;
}
.pdf_list .img_area {
	margin-top: 15px;
}
.pdf_list .button {
	min-width: 120px;
	margin-top: 15px;
}
@media screen and (min-width: 480px) {
	.pdf_list {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin: 0 -10px 0;
	}
	.pdf_list > li {
		width: 50%;
		max-width: 420px;
		padding: 0 10px;
	}
}


/* ==================================================
	faq
================================================== */

.faq__list {
	counter-reset: num;
}
.faq__list dt {
	position: relative;
	margin-top: 15px;
	padding-left: 45px;
	font-size: 18px;
}
.faq__list dt::before {
	counter-increment: num;
	content: "Q" counter(num) ".";
	position: absolute;
	left: 0;
}
.faq__list dd {
	margin-top: 5px;
	padding: 0 0 15px 45px;
	font-size: 15px;
	border-bottom: 1px solid #000;
}

/* ==================================================
	disclaimer
================================================== */

.disclaimer {
	padding: 30px 20px;
	word-wrap: break-word;
	background: #f2f2f2;
}
.disclaimer .section_content {
	padding: 20px;
	background: #fff;
}
.disclaimer .notes_num > li:nth-child(n+2) {
	margin-top: 20px;
}
.disclaimer .notes_num .notes {
	margin-top: .5em;
}

@media screen and (min-width: 768px) {
	.disclaimer {
		padding-right: 30px;
		padding-left: 30px;
	}
	.disclaimer .section_content {
		padding: 30px;
	}
}
/* ==================================================
	modal
================================================== */


.modal-wrapper {
	z-index: 999;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 40px 10px;
	text-align: center;
}

.modal-button {
	text-align: center;
	cursor :pointer;
}



.modal-wrapper:not(:target) {
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s, visibility .3s;
}

.modal-wrapper:target {
	opacity: 1;
	visibility: visible;
	transition: opacity .4s, visibility .4s;
}

.modal-wrapper::after {
	display: inline-block;
	height: 100%;
	margin-left: -.05em;
	vertical-align: middle;
	content: ""
}

.modal-wrapper .modal-window {
	box-sizing: border-box;
	display: inline-block;
	z-index: 20;
	position: relative;
	width: 100%;
	padding: 10px 30px 25px;
	background: #fff;
	vertical-align: middle
}

.modal-wrapper .modal-window .modal-content {
	max-height: 80vh;
	overflow-y: auto;
	text-align: left
}


.modal-content p {
	margin: 10px 0 0 0;
}

.modal-overlay {
	z-index: 10;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0, 0, 0, .8)
}

.modal-wrapper .modal-close {
	z-index: 20;
	position: absolute;
	top: 5px;
	right: 5px;
	width: 35px;
	color: #95979c !important;
	font-size: 30px;
	font-weight: 700;
	line-height: 35px;
	text-align: center;
	text-decoration: none;
	text-indent: 0
}

.modal-wrapper .modal-close:hover {
	color: #2b2e38 !important
}

/* close button -------------------- */

.modal_close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 20px;
	height: 20px;
	transform: rotate(45deg);
}
.modal_close::before,
.modal_close::after {
	content: "";
	position: absolute;
	top: 0;
	left: 9px;
	width: 2px;
	height: 20px;
	background: #999;
}
.modal_close::after {
	transform: rotate(90deg);
}



@media screen and (min-width: 768px) {
	.modal_content {
		width: auto;
		max-width: 90vw;
	}
	.modal_content_inner {
		padding: 40px;
	}
	.modal_close {
		width: 30px;
		height: 30px;
	}
	.modal_close::before,
	.modal_close::after {
		left: 14px;
		height: 30px;
	}
}



@media screen and (min-width: 1024px) {
	.modal_content {
		max-width: 1000px;
	}
}