/* font */
@font-face {
  font-family: 'Ruble';
  src: url('../fonts/RubleSans.ttf') format('truetype'),
       url('../fonts/RubleSans.woff') format('woff'),
	   url('../fonts/RubleSans.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src:	url('../fonts/Roboto.ttf') format('truetype'),
		url('../fonts/Roboto.woff') format('woff'),
		url('../fonts/Roboto.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Bold';
  src: 
       url('../fonts/RobotoBold.ttf') format('truetype'),
       url('../fonts/RobotoBold.woff') format('woff'),
	   url('../fonts/RobotoBold.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Bold Condensed';
  src: 
       url('../fonts/RobotoBoldCondensed.ttf') format('truetype'),
       url('../fonts/RobotoBoldCondensed.woff') format('woff'),
	   url('../fonts/RobotoBoldCondensed.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Condensed';
  src: url('../fonts/RobotoCondensed.ttf') format('truetype'),
       url('../fonts/RobotoCondensed.woff') format('woff'),
	   url('../fonts/RobotoCondensed.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Condensed Light';
  src: url('../fonts/RobotoCondensedLight.ttf') format('truetype'),
       url('../fonts/RobotoCondensedLight.woff') format('woff'),
	   url('../fonts/RobotoCondensedLight.woff2') format('woff2');
  font-display: swap;
}


:root {
  --color_1: #0AB69F;	/* green */
  --color_2: #97DA7B;	/* green light */
  --color_3: #6354B1;	/* purple */
  --color_4: #FBF8F1;	/* beige */
  --color_5: #222f3e;	/* black */
  --color_6: #8395a7;	/* gray */
  --color_7: #54a0ff;	/* blue */
  --font_family_normal: 'Roboto', sans-serif;
  --font_family_bold: 'Roboto Bold', sans-serif;
  --font_family_bold_condensed: 'Roboto Bold Condensed', sans-serif;
  --font_family_condensed: 'Roboto Condensed', sans-serif;
  --font_family_consended_light: 'Roboto Condensed Light', sans-serif;
}


/* MAIN */
.wrapper {	
	display: grid;
    grid-template-rows: minmax(50px, auto) 1fr minmax(50px, auto);
    grid-template-columns: 1fr;
	grid-template-areas: "header"
						 "main"
						 "footer";
    grid-gap: 40px;
    justify-content: center;
    align-items: stretch;
	width: 100%;
	max-width: 100%;
	min-height: 100vh;
	margin: 0 auto;
	padding: 0;
	font-family: var(--font_family_normal);
    font-size: 17px;
    line-height: 1.3;
    color: #333;
	text-align: left;
    text-decoration: none;
    background-color: #FFF;
	position: relative;
}
@media (max-width: 1366px) {
	.wrapper {
		font-size: 15px;
	}
}


header {
	display: flex;
	grid-area: header;
	flex: 1 1 100%;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: stretch;
	font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
	background-color: rgba(247, 241, 227, 0.5);
	border-bottom: 7px solid var(--color_1);
	z-index: 3;
}
.header {
    display: flex;
	flex: 1 1 100%;
	flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
	width: 100%;
	max-width: 1360px;
	margin: 0 auto;
    padding: 10px;
	font-family: inherit;
    font-size: 1.2em;
    line-height: inherit;
    color: inherit;
	background-color: transparent;
	position: relative;
	outline: 0px solid;
}
@media (max-width: 480px) {	
	.header {
		flex-flow: column;
		justify-content: center;
		align-items: flex-start;
	}
}


main {
	display: flex;
	grid-area: main;
	flex: 1 1 100%;
	flex-flow: row wrap;
    justify-content: flex-start;
	align-content: flex-start;
    align-items: flex-start;
	min-height: 100px;
	font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
	background-color: #FFF;
	overflow: hidden;
}
.main {
	display: flex;
	flex: 0 1 auto;
	flex-flow: row wrap;
    justify-content: flex-start;
	align-content: flex-start;
    align-items: flex-start;
	width: 100%;
	max-width: 1360px;
	min-height: 100px;
	margin: 0 auto;
    padding: 40px 10px 20px;
	font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
	background-color: transparent;
	position: relative;
	overflow: hidden;
	outline: 0px solid;
}


footer {
	display: flex;
	grid-area: footer;
	flex: 1 1 100%;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: flex-start;
	font-family: inherit;
    font-size: 0.9em;
    line-height: inherit;
    color: inherit;
	border-top: 3px solid #6C7FD8;
	background-color: #f7f1e3;
	overflow: hidden;
}
.footer {
    display: flex;
	flex: 1 1 100%;
	flex-flow: row wrap;
    justify-content: space-around;
    align-items: flex-start;
	width: 100%;
	max-width: 1360px;
	margin: 0 auto;
    padding: 10px;
	font-family: inherit;
    font-size: 1.2em;
    line-height: inherit;
    color: inherit;
	background-color: transparent;
    overflow: hidden;
	outline: 0px solid;
}
.footer_line {
	width: 100%;
	margin: 0;
	padding: 5px 10px;
	font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: #FFF;
	text-align: center;
	background-color: #747d8c;
}



/* tag */
h1 {
	font-family: var(--font_family_bold_condensed);
    color: var(--color_5);
}
h2 {
	font-family: var(--font_family_bold_condensed);
    color: var(--color_5);
}
h3 {
	font-family: var(--font_family_bold_condensed);
    color: var(--color_5);
}
h4 {
	font-family: var(--font_family_bold_condensed);
    color: var(--color_5);
}
h5 {
	font-family: var(--font_family_bold_condensed);
    color: var(--color_5);
}


a {
	color: var(--color_7);
}

b {
	font-family: var(--font_family_bold_condensed);
    color: var(--color_1);
}

q {
	background-color: rgba(247, 241, 227, .5);
	border-radius: 2px;
}



/* effect */
@keyframes effect_bg {
  0% {
    background-color: #fdf9ec;
  }
  50% {
    background-color: #f2f9f2;
  }
  100% {
    background-color: #fdf9ec;
  }
}


/*--- header ---*/
.text_x4 {
    align-items: center;
	width: 220px;
	height: auto;
	margin: 0;
	padding: 13px 5px 5px;
	font-size: 1.1em;
	line-height: 1;
	font-family:  var(--font_family_condensed);
	text-align: center;
	color: #FFF;
	border-top: 7px solid var(--color_2);
	background: linear-gradient(-45deg, transparent 33px, var(--color_1) 0) right, linear-gradient(45deg, transparent 33px, var(--color_1) 0) left;
	background-size: 50% 100%;
	background-repeat: no-repeat;
	position: absolute;
	top: 0;
	right: 10px;
}
.text_x4 > .two {
	font-family: var(--font_family_consended_light);
}
.text_x4 > .two b {
	font-family: var(--font_family_bold_condensed);
}
.text_x4 > .three {
	font-family: var(--font_family_consended_light);
}
@media (min-width: 1980px) {
	.text_x4 > .two b {
		font-size: 1.1em!important;
	}
}
@media (max-width: 480px) {	
	.text_x4 {
		justify-content: center;
		width: auto;
		margin: 5px auto;
		padding: 3px 5px 5px;
		position: relative;
		color: inherit;
		background: none!important;
		border-top: none!important;
	}
	
	.text_x4 > .two {
		color: var(--color_1);
		background: none!important;
		border-top: none!important;
	}
}

/* text_min */
.header > .text_min {
	display: none;
}
@media (max-width: 1085px) {
	.header > .text_min {
		display: inline-block;
		flex: 0 1 auto;
		order: 2;
		width: calc(100% - 550px);
		margin: 5px auto 5px 10px;
		font-family: var(--font_family_bold_condensed);
		font-size: inherit;
		line-height: inherit;
		color: #295ca1;
		text-align: center;
		text-transform: capitalize;
	}
}
@media (max-width: 755px) {	
	.header > .text_min {
		display: none;
	}
}

/* icon */
.header > .wrap {
	justify-content: space-between;
	align-content: stretch;
	width: auto;
	margin: 5px auto 5px 20px;
	font-size: 16px;
}
.header > .wrap > .icon_1x2 {
	grid-template-columns: 40px 1fr;
	grid-gap: 10px 15px;
	margin: 5px auto;
	padding: 10px;
}
.header > .wrap > .icon_1x2 > .one {
	font-size: 1.1em;
	font-family:  var(--font_family_condensed);
	line-height: 1.5;
	color: var(--color_1);
	text-transform: uppercase;
}
.header > .wrap > .icon_1x2 > .two {
	font-family:  var(--font_family_condensed_light);
	line-height: 1;
	color: #596275;
}

@media (max-width: 1260px) {
	.header > .wrap {
		font-size: 14px;
	}
}
@media (max-width: 1190px) {
	.header > .wrap {
		justify-content: space-around;
		width: calc(100% - 500px);
		margin: 5px auto 5px 10px;
	}
	.header > .wrap > .show {
		display: none;
	}
}
@media (max-width: 1085px) {	
	.header > .wrap {
		display: none;
	}
}
@media (max-width: 900px) {	
	.header > .wrap {
		order: 4;
		width: 100%;
	}
	.header > .wrap > .icon_1x2 {
		display: grid;
		text-align: inherit;
	}
	.header > .wrap > .icon_1x2 > .show {
		display: grid;
	}
}
@media (max-width: 480px) {		
	.header > .wrap {
		display: flex;
		justify-content: center;
		align-content: flex-start;
		width: auto;
		margin: 10px auto;
		font-size: 16px;
		background: transparent;
	}
	.header > .wrap > .icon_1x2 {
		width: 230px;
	}
	.header > .wrap > .icon_1x2 > .show {
		display: grid;
	}
}

.footer > .icon_1x3 {
	font-family: var(--font_family_consended_light);
}


/* logo */
.logo {
	grid-template-rows: 1fr 25px;
	grid-template-columns: minmax(50px, auto) 1fr;
	grid-gap: 0px 20px;
	margin: 5px;
	padding: 5px;
	font-family: var(--font_family_bold_condensed);
	position: relative;
}
.logo > .img > img {
	width: 64px;
	height: 64px;
}
.logo > .one{
	font-size: 1.2em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--color_1);
}
.logo > .two {
	line-height: 1;
	letter-spacing: 1px;
	color: var(--color_3);
	white-space: nowrap;
}
@media (max-width: 480px) {	
	.logo {
		justify-content: center;
		width: auto;
		margin: 5px auto;
		font-size: inherit;
	}	
}
@media (max-width: 320px) {	
	.logo > .img > img {
		width: 44px;
		height: 44px;
	}	
}



/*============   MAIN   ============*/
.blog {
    grid-template-columns: repeat(auto-fit, minmax(43%, 1fr));
    grid-gap: 80px 7%;
	justify-content: center;
	margin: 60px auto;
	background-color: rgba(247, 241, 227,.2);
}

@media (max-width: 600px) {
	.blog {
		grid-template-columns: repeat(auto-fit, minmax(90%, 1fr));
		grid-gap: 60px 0;
		flex: 1 1 100%;
		justify-content: flex-start;
		align-items: flex-start;
	}
}

/*--- button ---*/
.button {
	font-family: var(--font_family_condensed);
	color: #fff;
	background-color: var(--color_1);
	border: 2px solid var(--color_1);
}

.explane_marker {
	font-family: var(--font_family_bold_condensed);
}
.explane {
	font-family: var(--font_family_consended_light);
}
.explane > sup,
.explane > p > sup {
	font-family: var(--font_family_bold_condensed);
}

.grid {
	margin: 30px auto;
}


.icon_2x2 {
	width: calc(50% - 40px);
	margin: 40px 20px;
	padding: 20px;
	border: 1px solid #e1e1e1;
	border-radius: 5px;
}
.icon_2x2 > .img {
	padding: 20px;
}
.icon_2x2 > .img > img {
	filter: invert(1);
}
.icon_2x2 > .one {
	height: 2.6em;
	font-size: 1.3em;
	line-height: 1.3;
	font-family: var(--font_family_bold_condensed);
    color: var(--color_5);
}
.icon_2x2 > .img2 > img {
	filter: brightness(0) invert(1) sepia(1) saturate(5) hue-rotate(57deg);
}
.icon_2x2 > .img2 > img:hover {
  filter: brightness(0) invert(1) sepia(1) saturate(100) hue-rotate(180deg);
}
@media (max-width: 768px) {
	.icon_2x2 {
		width: 100%;
		margin: 20px auto;
	}
}
@media (max-width: 421px) {
	.icon_2x2 {
		grid-template-rows: minmax(20px, auto) minmax(20px, auto) 1fr minmax(20px, auto);
		grid-template-columns: 1fr;
		grid-template-areas:	"icon"
								"one"
								"two"
								"icon2";
		grid-gap: 10px 0;
		justify-content: center;
		text-align: center;
	}
	.icon_2x2 > .img {
		max-width: 140px;
		margin: 0 auto;
	}
	.icon_2x2 > .one {
		height: auto;
	}
	.icon_2x2 > .img2 {
		max-width: 64px;
		margin: 0 auto;
	}
}


.icon_1x3 > .one {
	font-size: 1.1em;
}
.icon_1x3 > .one b {
	color: var(--color_1);
}


.img_a > .content {
	background-color: #F9F9F9;
}
.img_a > .content > .content_inner > .title {
    font-family: var(--font_family_bold_condensed);
}


.img_b > .title {
	font-family: var(--font_family_bold_condensed);
	color: var(--color_3);
}

.img_b > .text_min {
	font-family: var(--font_family_consended_light);
}

.img_b > .link {
	font-family: var(--font_family_consended_light);
	color: var(--color_7);
}

.img_b > .link:hover {
  color: var(--color_2);
}


.link_button {
    color: #fff;
    background-color: var(--color_2);
}

.link_button:hover {
    background-color: var(--color_2);
}

.link_button:active {
    background-color: var(--color_2);
}


.list_check > li .title  {
	font-family: var(--font_family_bold_condensed);
}

.list_column > li a {
    color: #54a0ff;
}
.list_column > li a:hover {
    color: #00d2d3;
}


.list_icon_32 > li {
    background-image: url(/data/icons/ul_li_image_icon_X64.png);
}
.list_icon_32 > li .title {
	font-family: var(--font_family_bold_condensed);
}

.list_icon_64 > li {
    background-image: url(/data/icons/ul_li_image_icon_X64.png);
}
.list_icon_64 > li .title {
	font-family: var(--font_family_bold_condensed);
}

.list_number {
	margin: 40px 0;
	padding: 10px 20px 10px 50px;
	background: linear-gradient(135deg, #FBF8F1 50%, #f2fdf7 50%);
}
.list_number > li .title  {
    font-family: var(--font_family_bold_condensed);
    color: var(--color_3);
}


.list_title_text_link li h4 {
	font-family: var(--font_family_bold_condensed);
    color: #57606f;
}
.list_title_text_link li a {
    color: #54a0ff;
}
.list_title_text_link li a:hover {
    color: #e84393;
}


.ruble {
    color: #2c3e50;
}


.scroll_top {
	background-color: rgba(56, 173, 169, .5);
}


.sub_h {
	margin: -10px 0 20px;
	font-family: var(--font_family_bold_condensed);
    font-size: 1.2em;
    color: var(--color_6);
	text-transform: lowercase;
}


.tableX4 p.title {
	background-color: rgba(253, 150, 68, .7);
}
.tableX4 p {
    color: #FFFFFF;
    background-color: rgba(88, 177, 159, .9);
}
.tableX4 span.title {
	background-color: rgba(253, 150, 68, .2);
}
.tableX4 span {
    background-color: rgba(248, 239, 186, .3);
}


.text_bg {
	margin: -20px 0 40px;
	font-family: var(--font_family_bold_condensed);
	color: var(--color_1);
}
.text_bg_a {
	margin: -20px 0 40px;
	font-family: var(--font_family_bold_condensed);
	background: linear-gradient(45deg, var(--color_1), var(--color_2));
}
.text_bg_b {
	font-family: var(--font_family_bold_condensed);
	background: linear-gradient(45deg, var(--color_1), var(--color_2));
	border: 3px solid #ffffff;
}


.tile > .title {
	font-family: var(--font_family_bold_condensed);
    color: var(--color_1);
}
.tile > .link {
	font-family: var(--font_family_bold_condensed);
    color: var(--color_1);
	border: 1px solid var(--color_1);
}
.tile_a > .wrap_inner > .box > .value {
	font-family: var(--font_family_bold_condensed);
	font-size: 1.05em;
}
.tile > .link:hover {
	color: #FFF;
	background-color: var(--color_1);
}
.tile > .link:active {
	color: #FFF;
	background-color: var(--color_1);
}

.wrap_up_bottom_lines:before {
	border-top: 1px dashed #CCC;
}
.wrap_up_bottom_lines:after {
	border-top: 1px dashed #CCC;
}



/*--- footer ---*/
@media (max-width: 320px) {
	.footer > .icon_1x3 {
		grid-template-columns: 1fr;
		grid-template-areas: 	"one"
								"two"
								"three";
		justify-content: center;
		text-align: center;
		font-size: 1.2em;
	}
	.footer > .icon_1x3 > .img > img {
		display: none
	}
}

.footer > .wrap {
	display: block;
	margin: 5px auto;
	font-family: 'Roboto Condensed', sans-serif;
	text-align: center;
}
.footer > .wrap p {
    color: #444038;
}
.footer > .wrap p span {
	display: inline-block;
}
.footer > .wrap > .list {
	justify-content: space-around;
	margin: 0;
}
.footer > .wrap > .list li a {
	color: var(--color_7);
	transition: color 0.3s ease;
}
.footer > .wrap > .list li a:hover {
	color: #fa8231;
}
@media (max-width: 1190px) {	
	.footer > .wrap {
		order: 1;
	}
}