@charset "utf-8";
/*
File: common.css (共通CSS)
Author: 株式会社Genova Design
Author site: https://genovadesign.co.jp/
Developer: Antoine Turquois
Developer site: http://antoine.turquois.com/
*/


/*============== --- ===================
================ BASE ==================
===================================== */
html {
	width: 100%;
	height: 100%;
	font-size: 62.5%;
}
body {
	position: relative;
	z-index: 1;
	/* font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif; */
	font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
	font-size: 14px;
	line-height: 2;
	color: #333632;
	letter-spacing: 0;
	background: #fff;
	-webkit-text-size-adjust: 100%;
}
a {
	color: #14B4C7;
	text-decoration: underline;
	vertical-align: middle;
}
a:hover {
	color: #008c9d;
	transition-timing-function: cubic-bezier(0.33, 1, 0.66, 1);
	transition-duration: 0.3s;
}
a:focus {
	outline: 1px solid currentColor;
	outline-offset: 2px;
}
a[href^="tel:"] {
	pointer-events: none;
	cursor: text;
}
a:hover img {
  opacity: 0.8;
}
a.window {
	padding: 0 5px 0 0;
}
a.window::after {
	display: inline-block;
	width: 13px;
	height: 12px;
	margin: 0px 0 -1px 4px;
	content: '';
	background: url(../img/icon_window_blue.png) no-repeat;
}
*:focus {
	outline: none;
}
img {
	width: auto;
	max-width: 100%;
	padding: 0;
	margin: 0;
	vertical-align: bottom;
}
p {
	margin-bottom: 20px;
}
p:last-child {
	margin-bottom: 0;
}
table {
	width: 100%;
}
strong {
	font-weight: bold;
}
.copy,
.hidden {
	display: none;
}

@media screen and (max-width: 767px) {
	a[href^="tel:"] {
		pointer-events: auto;
		cursor: pointer;
	}
}


/*--------------------------------------
  Pc sp change
--------------------------------------*/
.sp {
	display: none;
}
.mb {
	display: none;
}

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

@media screen and (max-width: 480px) {
	.mb {
		display: block;
	}
	.pcm {
		display: none;
	}
}


/* ============== --- ==================
================ HEADER ================
===================================== */
#wrapper {
	box-sizing: border-box;
	height: auto;
	background: url(../img/body_bgimg.png) no-repeat top center;
	background-attachment: fixed;
	background-size: cover;
}
.header {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 3;
	width: 100%;
	background: #fff;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.16);
}
.header__inner {
	position: relative;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 15px 20px;
}
/* logo */
.header .header__logo {
	max-width: 225px;
}
/* menu */
.header .header__menu .header__nav > ul {
	display: flex;
	align-items: flex-end;
	justify-content: center;
}
.header .header__menu .header__nav > ul > li + li {
	margin: 0 0 0 30px;
}
.header .header__menu .header__nav > ul > li > a {
	position: relative;
	font-size: 14px;
	font-weight: bold;
	line-height: 1.2;
	color: #333;
	text-align: center;
	text-decoration: none;
}
.header .header__menu .header__nav > ul > li.name {
	font-weight: bold;
	color: #009EB1;
}
.header .header__menu .header__nav > ul > li.logout > a > span:before {
	display: inline-block;
	width: 17px;
	height: 14px;
	margin: 0 7px -3px 0;
	content: '';
	background: url(../img/icon_logout.png) no-repeat center center;
	background-size: cover;
}
/* toggle menu */
.header .toggle-menu {
	display: none;
}

@media screen and (min-width: 768px) {
	.header .header__menu .header__nav > ul > li > a::after {
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 0;
    height: 3px;
    content: "";
    background: #5bc4d1;
    transition: width .2s ease-in-out;
	}
	.header .header__menu .header__nav > ul > li > a:hover::after {
		width: 100%;
	}
}

@media screen and (max-width: 767px) {
	#wrapper {
		padding: 70px 0 0;
	}
	.header {
		position: absolute;
		top: 0;
		display: block;
	}
	.header__inner {
		padding: 5px 15px;
	}
	/* toggle menu */
	.header .toggle-menu {
		display: block;
	}
	.toggle-menu {
		width: 38px;
		height: 60px;
		margin: 0 5px 0 0;
		color: #fff;
		text-align: left;
		cursor: pointer;
		background: none;
	}
	.menu-trigger,
	.menu-trigger span {
		box-sizing: border-box;
		display: inline-block;
		transition: all .4s;
	}
	.menu-trigger {
    position: relative;
    display: block;
    width: 38px;
    height: 24px;
    margin: 10px auto 0;
    text-align: center;
		cursor: pointer;
    background: none;
    border: 0px;
		appearance: none;
	}
	.menu-trigger::after {
		display: block;
		margin-top: 30px;
		margin-left: -3px;
		font-size: 10px;
		font-weight: bold;
		line-height: 1;
		color: #14b4c7;
		letter-spacing: 0.15em;
		content: "MENU";
	}
	.menu-trigger span {
		position: absolute;
		left: 0;
		width: 100%;
		height: 4px;
		background-color: #14b4c7;
	}
	.menu-trigger span:nth-of-type(1) {
		top: 0;
	}
	.menu-trigger span:nth-of-type(2) {
		top: 10px;
	}
	.menu-trigger span:nth-of-type(3) {
		bottom: 0;
	}
	.toggle-menu.active .menu-trigger span:nth-of-type(1) {
		-webkit-transform: translateY(10px) rotate(-45deg);
		transform: translateY(10px) rotate(-45deg);
	}
	.toggle-menu.active .menu-trigger span:nth-of-type(2) {
		opacity: 0;
	}
	.toggle-menu.active .menu-trigger span:nth-of-type(3) {
		-webkit-transform: translateY(-10px) rotate(45deg);
		transform: translateY(-10px) rotate(45deg);
	}

	/* menu */
	.header .header__menu {
		position: absolute;
    top: 100%;
    left: 0;
		display: none;
    width: 100%;
	}
	.header .header__menu .header__nav > ul {
		display: block;
		text-align: center;
		background: #14b4c7;
	}
	.header .header__menu .header__nav > ul > li {
		position: relative;
		border-top: 1px solid #fff;
	}
	.header .header__menu .header__nav > ul > li + li {
		margin: initial;
	}
	.header .header__menu .header__nav > ul > li.name {
		display: none;
	}
	.header .header__menu .header__nav > ul > li.logout > a > span:before {
		margin: 0 7px -2px 0;
		background: url(../img/icon_logout_white.png) no-repeat;
		background-size: cover;
	}
	.header .header__menu .header__nav > ul > li > a {
		display: block;
		width: calc(100% - 70px);
		padding: 18px 50px 18px 20px;
		font-size: 15px;
		color: #fff;
		text-align: left;
		background: #14b4c7;
	}
	.header .header__menu .header__nav > ul > li > a:hover {
		background: #35c3d4;
	}
}


/* ============== --- ==================
================ FOOTER ================
===================================== */
.footer {
	padding: 58px 0;
	background: url(../img/footer_bgimg.png) no-repeat top center;
	background-size: cover;
}
.footer__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.footer__left {
	max-width: 30%;
	margin: 0 5% 0 0;
}
.footer__right {
	max-width: 65%;
}
.footer  .footer__copyright {
	margin: 40px 0 0;
}
.footer  .footer__copyright p {
	font-size: 10px;
	line-height: 1.5;
	color: #FFFFFF;
	letter-spacing: 0.05em;
}
.footer__top-links, 
.footer__bottom-links {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
.footer__top-links li a,
.footer__bottom-links li a {
	font-size: 13px;
	line-height: 1.6;
	color: #FFFFFF;
	text-decoration: none;
	transition-duration: 0.6s;
}
.footer__top-links li a:hover,
.footer__bottom-links li a:hover {
	text-decoration: underline;
}
.footer__top-links {
	margin: 10px 0 0;
}
.footer__top-links li + li {
	margin: 0 0 0 30px;
}
.footer__top-links li a {
	font-weight: bold;
}
.footer__top-links li.logout > a::before {
	display: inline-block;
	width: 17px;
	height: 14px;
	margin: 0 7px -3px 0;
	content: '';
	background: url(../img/icon_logout_white.png) no-repeat;
	background-size: cover;
}
.footer__bottom-links {
	margin: 35px 0 0;
}
.footer__bottom-links li + li {
  margin: 0 0 0 18px;
}
.footer__bottom-links li:first-child a {
	position: relative;
	padding-right: 20px;
}
.footer__bottom-links li:first-child a::before {
	position: absolute;
	top: 50%;
	right: 0;
	width: 1px;
	height: 12px;
	margin: -6px 0 0;
	content: '';
	background: #fff;
}
.footer__bottom-links li:last-child a {
	position: relative;
	padding: 0 0 0 20px;
}
.footer__bottom-links li:last-child a::before {
	position: absolute;
	top: 50%;
	left: 0;
	width: 13px;
	height: 12px;
	margin-top: -5px;
	content: '';
	background: url(../img/icon_window.png) no-repeat;
}

@media screen and (max-width: 1080px) and (min-width: 768px) {
	.footer__left {
		width: 25%;
	}
	.footer__right {
		width: 70%;
	}
	.footer__bottom-links {
		margin: 30px 0 0;
	}
	.footer__bottom-links li + li {
		margin: 0 0 0 5px;
	}
	.footer__bottom-links li a {
		font-size: 11px;
	}
	.footer__bottom-links li:first-child a {
		padding-right: 10px;
	}
}

@media screen and (max-width: 767px) {
	.footer {
		padding: 40px 0;
	}
	.footer__inner {
		display: block;
		align-items: initial;
		justify-content: initial;
	}
	.footer__left,
	.footer__right {
		max-width: 100%;
	}
	.footer__left {
		margin: 0;
		text-align: center;
	}
	.footer .footer__copyright {
		margin: 20px 0 0;
	}
	.footer__right {
		margin: 20px 0 0;
	}
	.footer__top-links, 
	.footer__bottom-links {
		justify-content: center;
		text-align: center;
	}
	.footer__top-links li + li {
		margin: 0 0 0 15px;
	}
	.footer__bottom-links li + li {
		margin: 0 0 0 7px;
	}
	.footer_link1 li, .footer_link2 li {
		margin-left: 5px;
	}
	.footer_link1 li:first-child, .footer_link2 li:first-child {
		margin-left: 0;
	}
	.footer__bottom-links {
		flex-wrap: wrap;
		margin: 20px 0 0;
	}
	.footer__bottom-links li a {
    font-size: 11px;
	}
	.footer__bottom-links li:last-child a::before {
		left: 3px;
		margin-top: -6px;
	}
	.footer__bottom-links li:first-child a {
		padding-right: 10px;
	}
}


/* ============== --- ==================
================ Side ================
===================================== */

/*--------------------------------------
  cookies
--------------------------------------*/
.cookie-box {
	position: fixed;
	bottom: 20px;
	left: 0;
	width: 100%;
	transition-duration: 0.7s;
}
.cookie-box .cookie-banner {
	display: flex;
	justify-content: space-between;
	width: 100%;
	max-width: 1020px;
	padding: 20px 30px;
	margin: auto;
	background: #efefef;
	border-radius: 10px;
	box-shadow: 2px 6px 6px #00000029;
}
.cookie-box .cookie-banner__text {
	width: 70%;
}
.cookie-box .cookie-banner__text a {
	color: #009EB1;
	text-decoration: underline;
}
.cookie-box .cookie-banner__buttons {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.cookie-box .cookie-banner__buttons > button {
	position: relative;
	width: 140px;
	height: 100%;
	max-height: 50px;
	font-size: 16px;
	font-weight: bold;
	border: none;
	border-radius: 5px;
	box-shadow: none;
	transition-timing-function: cubic-bezier(0.33, 1, 0.66, 1);
	transition-duration: 0.3s;
}
.cookie-box .cookie-banner__buttons > button + button {
	margin: 0 0 0 15px;
}
.cookie-box .cookie-banner__buttons > button:hover {
	cursor: pointer;
	opacity: .7;
}
.cookie-box .cookie-banner__buttons > button.cookie-banner__refuse {
	color: black;
	background: #d0d1d0;
}
.cookie-box .cookie-banner__buttons > button.cookie-banner__validate {
	color: #FFFFFF;
	background: #5BC4D1;
}

@media screen and (max-width: 1140px) {
	.cookie-box .cookie-banner {
		flex-direction: column;
		max-width: calc(100% - 200px);
	}
	.cookie-box .cookie-banner__text {
		width: 100%;
		padding: 0 0 10px;
	}
	.cookie-box .cookie-banner__buttons {
		justify-content: center;
	}
}

@media screen and (max-width: 767px) {
	.cookie-box .cookie-banner {
		max-width: calc(100% - 80px);
	}
	.cookie-box .cookie-banner__buttons > button {
		font-size: 14px;
	}
}


/*--------------------------------------
 feedback
--------------------------------------*/
.feedback {
	position: fixed;
	right: 10px;
	bottom: 20px;
	z-index: 10;
}
.feedback img.feedback__launcher{
	position: relative;
	max-width: 100px;
}
.feedback .feedback__container {
	position:relative;
}
.feedback .feedback__container:hover {
	cursor:pointer;
}
.feedback .feedback__container::before {
	position: absolute;
	top: 0px;
	left: 0;
	width: 100px;
	height: 22px;
	content: '';
	background: url(../img/feedback_text.png) no-repeat;
	background-size: cover;
	opacity:0;
	transition: all .5s ease-in-out;
}
.feedback .feedback__container.feedback__container--white::before {
	background: url(../img/feedback_text_white.png) no-repeat;
	background-size: cover;
}
.feedback .feedback__container:hover::before {
	position: absolute;
	top: -15px;
	opacity: 1;
}
.popup {
	width:335px;
	padding:20px;
	background: white;
	border: 5px solid #5BC4D1;
	border-radius: 10px;
	box-shadow: 0px 3px 6px #00000029;
}
.popup .popup__header {
	display: flex;
	justify-content: space-between;
	padding: 0 0 10px;
	border-bottom: 1px solid grey;
}
.popup .popup__phase-1 .popup__header img {
	max-width: 40px;
	height: auto;
	margin-right: 15px;
}
.popup .popup__header p {
	font-size: 15px;
	font-weight: bold;
	line-height: 1.5;
}
.popup .popup__body label {
	padding: 5px 0 0;
}
.popup__field {
	font-size: 11px;
}
.popup .popup__body label span {
	margin: 0 0 0 8px;
	font-size: 12px;
	font-weight: normal;
	font-weight: bold;
	color: #EF565C;
}
.popup .popup__body .textarea,
.popup .popup__body .input,
.popup .popup__body .input {
	background: #efefef;
}
.popup .popup__body .textarea {
	height: 180px;
	resize: none;
}
.popup .popup__footer {
	display: flex;
	justify-content: space-between;
}
.popup .popup__footer input {
	height: 45px;
	border: none;
	transition-timing-function: cubic-bezier(0.33, 1, 0.66, 1);
	transition-duration: 0.3s;
}
.popup .popup__footer input:hover {
	cursor: pointer;
	opacity: .7;
}
.popup .popup__footer .popup__back {
	width: 45px;
	margin: 0 10px 0 0;
	font-size: 20px;
	color: white;
	background-color: #626461;
}
.popup .popup__footer .popup__validate {
	width: 85%;
	font-weight: bold;
	color: #FFFFFF;
	background: #5BC4D1;
}
.popup__phase-2 {
	display: none;
	padding: 30px;
}
.popup .popup__phase-2 .popup__header {
	border: none;
}
.popup .popup__phase-2 .popup__header img {
	padding: 30px 0;
	margin: auto;
}
.popup .popup__phase-2 h6 {
	padding: 10px 0px 30px 0;
	font-size: 22px;
	font-weight: bold;
	color: #009EB1;
	text-align: center;
	letter-spacing: 0px;
}
.popup .popup__phase-2 p {
	padding-bottom: 70px;
	font-size:14px;
	text-align: center;
	white-space: pre;
}
.popup .popup__phase-2 .popup__footer .popup__back {
	width: 100%;
	margin-right: initial;
	font-size: 19px;
}

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

/*--------------------------------------
  loader
--------------------------------------*/
.loader {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	display: none;
	width: 100%;
	height: 100%;
	background: rgba( 255, 255, 255, .8 );
}
.loader__icon {
	position: absolute;
	top: calc(50% - 8em);
	left: calc(50% - 0.5em);
	width: 1em;
	height: 1em;
	margin: 100px auto;
	font-size: 14px;
	text-indent: -9999em;
  border-radius: 50%;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: loading-animation 1.1s infinite ease;
  animation: loading-animation 1.1s infinite ease;
}
body.body--loading,
body.body--loading .loader {
	overflow: hidden;
}
body.body--loading .loader {
	display: block;
}
body.no_loading .loader {
	display: none;
}


/* ============== --- ==================
================ LAYOUT ================
===================================== */

/* -------------------------------------
  Bread
------------------------------------- */
.breadcrumb {
	margin-top: 60px;
	background: #d0d1d0;
}
.breadcrumb > ul {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 11px 20px;
	line-height: 1.3;
}
.breadcrumb > ul > li {
	position: relative;
	font-size: 12px;
	color: #626461;
	letter-spacing: 0;
}
.breadcrumb > ul > li + li {
	margin: 0 0 0 20px;
}
.breadcrumb > ul > li + li::before {
	position: absolute;
	top: 0;
	left: -13px;
  content: ">"
}
.breadcrumb > ul > li a {
	color: #626461;
	text-decoration: none;
	vertical-align: baseline;
}

.breadcrumb > ul > li a:hover {
	text-decoration: underline;
}

@media screen and (max-width: 767px) {
	.breadcrumb {
		margin-top: 0;
	}
}


/*--------------------------------------
  page title
--------------------------------------*/
.page-title {
	padding: 45px 0 20px;
}
.page-title h1 {
	font-family: '游ゴシック体', 'Yu Gothic', YuGothic, sans-serif;
	font-size: 30px;
	font-weight: bold;
	line-height: 1.2;
	color: #333632;
	text-align: center;
	letter-spacing: 0;
}

@media screen and (max-width: 767px) {
	.page-title {
		padding: 40px 0 20px;
	}
	.page-title h1 {
		font-size: 26px;
	}
}

/*--------------------------------------
  alerts
--------------------------------------*/
.alerts {
	position: relative;
	z-index: 6;
}
.alerts .alert {
	display: none;
	border: 1px solid transparent;
	border-radius: 4px;
}
.alerts .alert.alert--success {
	color: #3c763d;
	background-color: #dff0d8;
	border-color: #d6e9c6;
}
.alerts .alert.alert--info {
	color: #8a6d3b;
	background-color: #fcf8e3;
	border-color: #faebcc;
}
.alerts .alert.alert--error {
	color: #a94442;
	background-color: #f2dede;
	border-color: #ebccd1;
}
.alerts .alert .alert__inner {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 0 15px 0 30px;
}
.alerts .alert .alert__prefix {
	font-weight: bold;
}
.alerts .alert .alert__content {
	margin: 0 0 0 20px;
}
.alerts .alert .alert__close {
	padding: 0 15px;
	margin-left: auto;
	font-size: 21px;
	font-weight: 700;
	line-height: 1;
	color: #000;
	text-shadow: 0 1px 0 #fff;
	cursor: pointer;
	background: none;
	filter: alpha(opacity=20);
	border: 0px;
	opacity: .2;
}

@media screen and (max-width: 767px) {
	.alerts {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
	}

	.alerts .alert .alert__content {
		margin: 0 0 0 15px;
	}
}


/*--------------------------------------
  Containers
--------------------------------------*/
.container {
	box-sizing: border-box;
	width: 100%;
	max-width: 1140px;
	padding: 0 30px;
	margin: 0 auto;
}

.sub-container {
	box-sizing: border-box;
	width: 100%;
	max-width: 820px;
	padding: 0 10px;
	margin: 0 auto;
}

@media (max-width: 767px) {
	.container {
		padding: 0 15px;
	}
}


/*--------------------------------------
  content
--------------------------------------*/
.under-content {
	min-height: calc(100vh - 500px);
	padding: 8px 0 95px;
}
.under-content__inner {
	padding: 65px 20px;
	background: #fff;
	border-radius: 5px;
	box-shadow: 0 3px 6px rgb(0 0 0 / 16%);
}

@media screen and (max-width: 767px) {
	.under-content {
		padding: 8px 0 40px;
	}
	.under-content__inner {
		padding: 30px 10px;	
	}
}


/*--------------------------------------
  box
--------------------------------------*/
.box {
	position: relative;
	padding: 38px 30px 60px;
	background: #EFF8F8;
	border-radius: 5px;
	box-shadow: 0px 3px 6px #00000029;
}
.result-intro + .box {
	border-radius: 0px 0px 5px 5px;
}
.box + .box {
	margin: 80px 0 0;
}
.box__title {
	position: absolute;
	top: -17.5px;
	left: 50%;
	box-sizing: border-box;
	width: 100%;
	max-width: 526px;
	padding: 3px 15px 2px;
	margin: 0 auto;
	margin-left: -263px;
	font-size: 19px;
	font-weight: bold;
	line-height: 1.6;
	color: #fff;
	text-align: center;
	background: #333632;
	border-radius: 16px;
}
.box-legend {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 25px;
	color: #333632;
}
.box-legend > li {
	font-size: 14px;
	line-height: 1.6;
	letter-spacing: 0;
}
.box-legend > li + li {
	margin: 0 0 0 20px;
}
.box-legend > li.green-circle::before,
.box-legend > li.pink-circle::before {
	display: inline-block;
	width: 14px;
	height: 14px;
	margin: 0 4px -2px 0;
	content: '';
	border-radius: 50%;
}
.box-legend > li.green-circle::before {
	background: #AFE3C5;
}
.box-legend > li.pink-circle::before {
  background: #F0B1B4;
}
.box-legend.box-legend--prio {
	padding: 10px 0 0;
}
.box-legend.box-legend--prio > li {
	position: relative;
	padding: 0 0 0 22px;
	font-size: 18px;
	font-weight: bold;
}
.box-legend.box-legend--prio > li::before {
	display: inline-block;
	width: 18px;
	height: 18px;;
	margin: 0 4px -2px 0;
	content: '';
	background-size: cover;
	border-radius: 50%;
}

@media screen and (max-width: 767px) {
	.box {
		padding: 30px 10px 40px;
	}
	.box__title {
		max-width: 240px;
		margin-left: -120px;
		font-size: 14px;
	}
	.box-legend {
		display: block;
		align-items: initial;
		justify-content: initial;
		margin: 0 0 15px;
		text-align: center;
	}
	.box-legend > li + li {
		margin: 10px 0 0;
	}
}


/*--------------------------------------
  titles
--------------------------------------*/
.under-title__h2 {
	margin: 0 0 30px;
}
.under-title__h2 h2 {
	position: relative;
	padding-left: 17px;
	font-size: 17px;
	font-weight: bold;
	line-height: 1.4;
	color: #333632;
	letter-spacing: 0;
}
.under-title__h2 h2::before {
	position: absolute;
	top: -1px;
	left: 0;
	display: block;
	width: 4px;
	height: 100%;
	content: '';
	background: #5BC4D1;
}
.under-title__h3 {
	margin: 0 0 25px;
}
.under-title__h3 h3 {
	position: relative;
	padding-left: 20px;
	font-size: 15px;
	font-weight: bold;
	line-height: 1.2;
	color: #333632;
	letter-spacing: 0;
}
.under-title__h3 h3::before {
	position: absolute;
	top: -2px;
	left: 0;
	display: block;
	width: 4px;
	height: 100%;
	content: "";
	background: #9EA09D;
}
.under-title__h4 h4 {
	font-size: 17px;
	font-weight: bold;
}


/*--------------------------------------
  Buttons
--------------------------------------*/
/* base btn */
.btn {
	position: relative;
	display: block;
	width: 100%;
	max-width: 420px;
	margin: 0 auto;
}
.btn > a,
.btn > button {
	width: 100%;
	height: 100%;
	padding: 17px 40px;
	font-size: 19px;
	font-weight: bold;
	line-height: 1.4;
	color: #fff;
	text-align: center;
	background: #5BC4D1;
	border: none;
	border-radius: 5px;
	transition-timing-function: cubic-bezier(0.33, 1, 0.66, 1);
	transition-duration: 0.3s;
}
.btn > a {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 17px 10%;
	text-decoration: none;
}
.btn > button:hover,
.btn > a:hover {
	cursor: pointer;
	opacity: .7;
}
.btn.btn--small {
	max-width: 350px;
}
.btn.btn--small > a {
	padding: 0 5%;
}
.btn.btn--small > button {
	padding: 12px 20px;
	font-size: 15px;
}
.btn.btn--arrow > button::after,
.btn.btn--arrow > a::after {
	position: absolute;
	top: 50%;
	right: 15px;
	display: block;
	margin-top: -4px;
	content: '';
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 8px solid #fff;
}
.btn.btn--plus > button,
.btn.btn--plus > a {
	background: #5BC4D1 url(../img/icon_plus_white.png) no-repeat 8% center;
}
.btn.btn--hidden {
	display: none;
}
.btn.btn--danger > a, 
.btn.btn--danger > button {
	background: #f84646;
}

/* search btn */
.search-btn {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	margin: auto;
	font-size: 16px;
	font-weight: bold;
	color: #FFFFFF;
	background: transparent linear-gradient(110deg, #5BC4D1 0%, #6FA0D9 100%) 0% 0% no-repeat padding-box;
	border: none;
	border-radius: 5px;
	box-shadow: none;
	transition-timing-function: cubic-bezier(0.33, 1, 0.66, 1);
	transition-duration: 0.3s;
}
.search-btn > a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 0 10% 0 15%;
	line-height: 1.4;
	color: #fff;
	text-decoration: none;
}
.search-btn::after {
	position: absolute;
	top: calc(50% - 0.3em);
	right: 3%;
	content: '';
	border-top: 0.3em solid transparent;
	border-bottom: 0.3em solid transparent;
	border-left: 0.6em solid #fff;
}
.search-btn.search-btn--bubble::before {
	position: absolute;
	top: calc(50% - 0.85em);
	left: 4%;
	width: 2em;
	height: 1.9em;
	content: '';
	background: url(../img/icon_bubble.png) no-repeat center center;
	background-size: cover;
}
.search-btn:hover {
	cursor: pointer;
	opacity: .7;
}
/* check btn */
.check-btn {
	position: relative;
	width: 100%;
	padding: 0.9em 2em 0.8em;
	font-size: 26px;
	font-weight: bold;
	color: #333632;
	background: #fff;
	box-shadow: 0px 3px 6px #00000029;
	transition-timing-function: cubic-bezier(0.33, 1, 0.66, 1);
	transition-duration: 0.3s;
}
.check-btn span {
	color: #009EB1;
}
.check-btn::before {
	position: absolute;
	top: calc(50% - 0.7em);
	left: 1.3em;
	display: block;
	width: 1.7em;
	height: 1.5em;
	content: '';
	background: url(../img/icon_check.png) no-repeat;
	background-size: contain;
}
.check-btn::after {
	position: absolute;
	top: calc(50% - 0.3em);
	right: 3%;
	content: '';
	border-top: 0.3em solid transparent;
	border-bottom: 0.3em solid transparent;
	border-left: 0.6em solid #5BC4D1;
}
.check-btn:hover {
	cursor: pointer;
	opacity: .7;
}

.less_btn {
	width: 55px;
}
.less_btn span {
	display: inline-block;
	padding-left: 4px;
	font-size: 13px;
	vertical-align: baseline;
}
.delete-btn {
	width: 20px;
	height: 20px;
	overflow: hidden;
	cursor: pointer;
	background-color: #EF565C;
	border-radius: 20px;
	transition: all 0.2s ease-in;
}
.delete-btn:hover {
	width: 55px;
	height: 20px;
	background-color: #EF565C;
	border-radius: 20px;
}
.delete-btn__minus {
	width: 100%;
	padding-left: 4px;
	font-size: 30px;
	font-weight: 300;
	line-height: 15px;
	color: #ffffff;
	vertical-align: text-top;
}
.delete-btn__text {
	font-size: 13px;
	font-weight: 300;
	line-height: 20px;
	color: #ffffff;
	vertical-align: top;
}
.add-url-btn {
	position: absolute;
	top: 50%;
	right: 15px;
	width: 57px;
	height: 20px;
	padding-left: 12px;
	margin-top: -10px;
	font-size: 13px;
	font-weight: bold;
	color: #fff;
	text-align: left;
	cursor: pointer;
	background: #5BC4D1;
	border: none;
	border-radius: 10px;
	box-shadow: none;
	transition-timing-function: cubic-bezier(0.33, 1, 0.66, 1);
	transition-duration: 0.3s;
}
.add-url-btn:hover {
	opacity: 0.7;
}
.add-url-btn::before {
	position: absolute;
	top: 50%;
	right: 4px;
	display: block;
	margin-top: -4px;
	content: '';
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 8px solid #fff;
}
/* add option */
.add-option-btn {
	position: absolute;
	top: calc(50% - 8px);
	right: 7px;
	width: 16px;
	height: 16px;
	cursor: pointer;
	background: url(../img/icon_plus.png) no-repeat center;
	background-size: cover;
	border: none;
	border-radius: 0;
	transition-timing-function: cubic-bezier(0.33, 1, 0.66, 1);
	transition-duration: 0.3s;
}
.add-option-btn:hover {
	background: url(../img/icon_plus_on.png) no-repeat center;
	background-size: cover;
}

/* plus btn */
.plus-btn {
	position: relative;
	box-sizing: border-box;
	display: block;
	width: 100%;
	max-width: 200px;
	padding: 11px 20px 6px 45px;
	margin: auto;
	font-size: 15px;
	font-weight: bold;
	color: #fff;
	background: #5BC4D1 url(../img/icon_plus_white.png) no-repeat;
	background-position: 40% center;
	border: none;
	border-radius: 5px;
	box-shadow: none;
	transition-timing-function: cubic-bezier(0.33, 1, 0.66, 1);
	transition-duration: 0.3s;
}
.plus-btn:hover {
	cursor: pointer;
	opacity: 0.7;
}
.plus-btn.plus-btn--small {
	max-width: 140px;
	padding: 7px 10px 5px 30px;
	margin-top: -16px;
	background: #5BC4D1 url(../img/icon_plus_bg.png) no-repeat;
	background-position: 10% center;
}
.plus-btn.plus-btn--mini {
	max-width: 80px;
	padding: 10px 0px 6px 20px;
	background-position: 15% center;
}
.plus-btn__container {
	padding: 30px 20px 0;
	border-radius: 0 0 5px 5px;
}

@media screen and (max-width: 767px) {
	.btn button {
		font-size: 16px;
	}
}


/*--------------------------------------
  Modal
--------------------------------------*/
.modal {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 4;
	display: none;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0,0,0,0.4);
	box-shadow: 0px 3px 6px #00000029;
}
.modal .modal__inner {
	max-width: 550px;
	padding: 0 20px;
	margin: 15vh auto 5vh;
}
.modal.modal--unlock .modal__inner {
	max-width: 400px;
}
.modal .modal__content {
	padding: 5%;
	background: #fff;
	border-radius: 0.5em;
}
.modal__header {
	position: relative;
}
.modal__header .modal__header__img {
	margin: 0 33%;
}
.modal__header .modal__header__close {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	width: 20px;
	height: 17px;
	cursor: pointer;
	background-color: inherit;
	border: none;
}
.modal__header .modal__header__close::before,
.modal__header .modal__header__close::after {
	position: absolute;
	top: 0;
	left: 10px;
	width: 2px;
	height: 100%;
	content: "";
	background: #000;
	transform: rotateZ(145deg);
}
.modal__header .modal__header__close::after {
	transform: rotateZ(40deg);
}
.modal__header .modal__header__title {
	font-size: 22px;
	text-align: center;
}
.modal__header .modal__header__title > h4 {
	font-weight: bold;
}
.modal .modal__form {
	font-weight: 400;
}
.modal .modal__form .modal__field {
	font-size: 13px;
}
.modal .modal__form .modal__field + .modal__field{
	margin: 20px 0 0;
}
.modal .modal__form .modal__field .btn {
	max-width: 70%;
	margin: auto;
}
.modal__list li {
	position: relative;
	margin: 0 0 0 20px;
}
.modal__list li + li {
	margin: 10px 0 0 20px;
}
.modal__list li::before {
	position: absolute;
	top: calc(50% - 5px);
	left: -20px;
	width: 10px;
	height: 10px;
	content: "";
	background: #5bc4d1;
	border-radius: 50%;
}
.modal__list li p {
	display: inline-block;
	margin: 2px 0 0;
}


/*--------------------------------------
  Forms
--------------------------------------*/
.label {
  display: block;
  padding: 0 0 0.3em;
  font-size: 1.2em;
  font-weight: bold;
}
.input[type="text"],
.input[type="password"],
.input[type="email"],
.textarea,
.select {
  width: calc(100% - 1.4em);
  min-height: 2em;
	padding: 0.3em 0.7em;
  font-size: 1em;
	background-color: #fff;
	border: 1px solid #ddd;
  border-radius: 0.2em;
	box-shadow: inset 0 1px 2px rgb(0 0 0 / 7%);
}
.input:disabled {
	cursor: not-allowed;
}
.textarea {
	padding: 0.7em;
  resize: vertical;
}
.select {
  width: 100%;
  padding: 0.3em;
  cursor: pointer;
	background: #fff url(../img/icon_arrow.svg) no-repeat 97% center;
	background-size: 1.2em 1.5em;
	-webkit-appearance: none;
	appearance: none;
}


/*--------------------------------------
  Tables
--------------------------------------*/
.table-container {
	overflow: auto;
}
/* zebra table */
.zebra-table {
	font-size: 14px;
	background: #fff;
}
.zebra-table tbody tr:nth-child(2n + 1) {
	background: #EFF8F8;
}
.zebra-table thead tr th {
	padding: 3px 7px;
	font-size: 16px;
}
.zebra-table tbody {
	vertical-align: middle;
}
.zebra-table tbody tr {
	height: 40px;
}
.zebra-table tbody tr td {
	padding: 2px 5px;
	border-right: 1px solid #B1E1E6;
}
.zebra-table tbody tr td:last-child {
	border-right: 0px;
}

/* striped table */
.striped-table thead th {
	padding: 0 0 5px;
	font-size: 12px;
	background: #fff;
}
.striped-table thead th:first-child,
.striped-table thead th:last-child {
	padding: 0 0 5px 20px;
}
.striped-table tbody td {
	padding: 5px 0;
	vertical-align: top;
	cursor: context-menu;
	background: #fff;
	border-top: 1px solid #B1E1E6;
}
.striped-table tbody tr td:nth-child(1) {
	padding-left: 15px;
	font-weight: bold;
}
.striped-table.striped-table--head-transparent thead th {
	background: none;
}
@media screen and (max-width: 767px) {
	.striped-table tbody td,
	.striped-table thead td {
		font-size: 10px;
	}
	.striped-table tbody tr td:nth-child(1) {
		padding-left: 5px;
	}
	.striped-table tbody tr td:nth-child(2)::after {
		top: 15px;
		right: 0;
	}
	.striped-table thead td:first-child {
		padding-left: 5px;
	}
	.striped-table thead td:nth-child(3) {
		width: 32.5% !important;
	}
	.striped-table thead td:last-child {
		width: 89px !important;
	}
	.striped-table .prio1::before {
		width: 10px;
		height: 10px;
		background-size: cover !important;
	}
}

/* style table */
.style-table th,
.style-table td {
	padding: 8px 12px 7px;
	text-align: left;
	word-break: break-all;
}
.style-table thead th {
	background: #D0D1D0;
	border-right: 1px solid #FFFFFF;
}
.style-table thead th:last-child {
	border-right: none;
}
.style-table tbody td {
	padding: 12px 12px 13px;
	text-align: left;
	background: #EFEFEF;
	border-right: 1px solid #9EA09D;
	border-bottom: 1px solid #9EA09D;
}
.style-table tbody tr:last-child td {
	border-bottom: none;
}
.style-table tbody tr td:last-child {
	border-right: none;
}
.style-table.style-table--blue thead th {
	background: #B1E1E6;
}
.style-table.style-table--blue tbody td {
	background: #D1F1F5;
	border-right: 1px solid #5BC4D1;
	border-bottom: 1px solid #5BC4D1;
}
@media screen and (max-width: 767px) {
	.style_table th,
	.style_table td {
		padding: 8px 5px !important;
		font-size: 14px;
		letter-spacing: 0;
	}
}


/*--------------------------------------
  animations
--------------------------------------*/
@keyframes loading-animation {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #009eb1, 1.8em -1.8em 0 0em rgba(0,158,177, 0.2), 2.5em 0em 0 0em rgba(0,158,177, 0.2), 1.75em 1.75em 0 0em rgba(0,158,177, 0.2), 0em 2.5em 0 0em rgba(0,158,177, 0.2), -1.8em 1.8em 0 0em rgba(0,158,177, 0.2), -2.6em 0em 0 0em rgba(0,158,177, 0.5), -1.8em -1.8em 0 0em rgba(0,158,177, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(0,158,177, 0.7), 1.8em -1.8em 0 0em #009eb1, 2.5em 0em 0 0em rgba(0,158,177, 0.2), 1.75em 1.75em 0 0em rgba(0,158,177, 0.2), 0em 2.5em 0 0em rgba(0,158,177, 0.2), -1.8em 1.8em 0 0em rgba(0,158,177, 0.2), -2.6em 0em 0 0em rgba(0,158,177, 0.2), -1.8em -1.8em 0 0em rgba(0,158,177, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(0,158,177, 0.5), 1.8em -1.8em 0 0em rgba(0,158,177, 0.7), 2.5em 0em 0 0em #009eb1, 1.75em 1.75em 0 0em rgba(0,158,177, 0.2), 0em 2.5em 0 0em rgba(0,158,177, 0.2), -1.8em 1.8em 0 0em rgba(0,158,177, 0.2), -2.6em 0em 0 0em rgba(0,158,177, 0.2), -1.8em -1.8em 0 0em rgba(0,158,177, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(0,158,177, 0.2), 1.8em -1.8em 0 0em rgba(0,158,177, 0.5), 2.5em 0em 0 0em rgba(0,158,177, 0.7), 1.75em 1.75em 0 0em #009eb1, 0em 2.5em 0 0em rgba(0,158,177, 0.2), -1.8em 1.8em 0 0em rgba(0,158,177, 0.2), -2.6em 0em 0 0em rgba(0,158,177, 0.2), -1.8em -1.8em 0 0em rgba(0,158,177, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(0,158,177, 0.2), 1.8em -1.8em 0 0em rgba(0,158,177, 0.2), 2.5em 0em 0 0em rgba(0,158,177, 0.5), 1.75em 1.75em 0 0em rgba(0,158,177, 0.7), 0em 2.5em 0 0em #009eb1, -1.8em 1.8em 0 0em rgba(0,158,177, 0.2), -2.6em 0em 0 0em rgba(0,158,177, 0.2), -1.8em -1.8em 0 0em rgba(0,158,177, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(0,158,177, 0.2), 1.8em -1.8em 0 0em rgba(0,158,177, 0.2), 2.5em 0em 0 0em rgba(0,158,177, 0.2), 1.75em 1.75em 0 0em rgba(0,158,177, 0.5), 0em 2.5em 0 0em rgba(0,158,177, 0.7), -1.8em 1.8em 0 0em #009eb1, -2.6em 0em 0 0em rgba(0,158,177, 0.2), -1.8em -1.8em 0 0em rgba(0,158,177, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(0,158,177, 0.2), 1.8em -1.8em 0 0em rgba(0,158,177, 0.2), 2.5em 0em 0 0em rgba(0,158,177, 0.2), 1.75em 1.75em 0 0em rgba(0,158,177, 0.2), 0em 2.5em 0 0em rgba(0,158,177, 0.5), -1.8em 1.8em 0 0em rgba(0,158,177, 0.7), -2.6em 0em 0 0em #009eb1, -1.8em -1.8em 0 0em rgba(0,158,177, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(0,158,177, 0.2), 1.8em -1.8em 0 0em rgba(0,158,177, 0.2), 2.5em 0em 0 0em rgba(0,158,177, 0.2), 1.75em 1.75em 0 0em rgba(0,158,177, 0.2), 0em 2.5em 0 0em rgba(0,158,177, 0.2), -1.8em 1.8em 0 0em rgba(0,158,177, 0.5), -2.6em 0em 0 0em rgba(0,158,177, 0.7), -1.8em -1.8em 0 0em #009eb1;
  }
}