@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&display=swap');


.ttl_h3 {
	font-size:8rem;
	font-family: "Figtree", sans-serif;
	font-optical-sizing: auto;
	font-weight: 800;
	font-style: normal;
	margin:0 0 40px;
	color:#005bac;
	line-height:1.4;
}


.ttl_h3 span {
	display:block;
	font-size:1.8rem;
	font-weight:600;
}


@media all and (max-width:640px) {
.ttl_h3 {
	font-size:5rem;
	font-family: "Figtree", sans-serif;
	font-optical-sizing: auto;
	font-weight: 800;
	font-style: normal;
	margin:0 0 40px;
	color:#005bac;
	line-height:1.4;
}	
}


.txt_catch {
	font-size:2.4rem;
	font-weight:600;
	margin:0 0 60px;
}



/* header */
header {
	width:100%;
	padding-top:46%;
	position:relative;
}


header::before {
	content:"";
	display:block;
	width:calc(100% - 30px);
	background:#005bac;
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	z-index:-1;
}

.mv {
	width:80%;
	height:calc(100% - 30px);
	background:url("../images/bg_mv.jpg") no-repeat center center;
	background-size:cover;
	position:absolute;
	top:0;
	right:0;
}


.logo {
	width:150px;
	height:50px;
	position:absolute;
	top:30px;
	left:30px;
}


.header_contact {
	display:flex;
	width:240px;
	height:50px;
	color:#FFF;
	font-weight:600;
	background:#16206d;
	align-items: center;
	justify-content:center;
	font-size:1.6rem;
	position:absolute;
	top:30px;
	right:30px;
	border-radius: 30px;
	transition:all .3s ease;
}


.header_contact:hover {
	background:#448aca;
}


.txt_mv01 {
	color:#FFF;
	font-size:clamp(4rem, 7.14vw, 12rem);
	position:absolute;
	top:40%;
	left:15%;
	letter-spacing: 0;
	font-family: "Dancing Script", cursive;
	font-optical-sizing: auto;
	font-weight: 600;
	font-style: normal;
}


.txt_mv02 {
	color:#FFF;
	font-size:clamp(6rem, 9.78vw, 15rem);
	position:absolute;
	top:25%;
	left:12%;
	letter-spacing: 0;
	font-family: "Figtree", sans-serif;
	font-optical-sizing: auto;
	font-weight: 800;
	font-style: normal;
}


.txt_mv03 {
	color:#FFF;
	font-size:clamp(1.6rem, 1.78vw, 3rem);
	position:absolute;
	top:65%;
	left:12%;
	letter-spacing: 0;
}


@media all and (max-width:560px) {
header {
	width:100%;
	padding-top:100%;
	position:relative;
}


header::before {
	content:"";
	display:block;
	width:calc(100% - 30px);
	background:#005bac;
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	z-index:-1;
}

.mv {
	width:80%;
	height:calc(100% - 30px);
	background:url("../images/bg_mv.jpg") no-repeat center center;
	background-size:cover;
	position:absolute;
	top:0;
	right:0;
}


.logo {
	width:120px;
	height:40px;
	position:absolute;
	top:20px;
	left:20px;
}


.header_contact {
	display:flex;
	width:150px;
	height:40px;
	color:#FFF;
	font-weight:600;
	background:#16206d;
	align-items: center;
	justify-content:center;
	font-size:1.3rem;
	position:absolute;
	top:20px;
	right:20px;
	border-radius: 30px;
	transition:all .3s ease;
}


.header_contact:hover {
	background:#448aca;
}
	
	
.txt_mv01 {
	color:#FFF;
	font-size:clamp(7rem, 7.14vw, 11rem);
	position:absolute;
	top:43%;
	left:18%;
	letter-spacing: 0;
}


.txt_mv02 {
	color:#FFF;
	font-size:clamp(10rem, 7.14vw, 14rem);
	position:absolute;
	top:23%;
	left:11%;
	letter-spacing: 0;
	font-family: "Figtree", sans-serif;
	font-optical-sizing: auto;
	font-weight: 800;
	font-style: normal;
}


.txt_mv03 {
	color:#FFF;
	font-size:clamp(1.8rem, 1.78vw, 3rem);
	position:absolute;
	top:70%;
	left:12%;
	letter-spacing: 0;
}
}



/* about */
.sec_about {
	width:100%;
	padding:100px 0;
	position:relative;
}


.sec_about::after {
	content:"";
	display:block;
	background:#005bac;
	width:calc(50% + 20px);
	height:60%;
	position:absolute;
	bottom:180px;
	left:calc(50% - 20px);
	z-index:-1;
}


.block_about {
	width:96%;
	max-width:1400px;
	margin:0 auto;
	font-size:1.6rem;
}


.about_img {
	width:50%;
}


.about_img img {
	width:100%;
}


.about_txt {
	width:45%;
	margin:0;
}


@media all and (max-width:1024px) {
.sec_about::after {
	content:"";
	display:block;
	background:#005bac;
	width:calc(45% + 20px);
	height:60%;
	position:absolute;
	bottom:180px;
	left:calc(55% - 20px);
	z-index:-1;
}
	
.about_img {
	width:45%;
}


.about_img img {
	width:100%;
}


.about_txt {
	width:50%;
	margin:0;
}
}



@media all and (max-width:640px) {
.sec_about {
	width:100%;
	padding:50px 0;
	position:relative;
}
	
	
.sec_about::after {
	content:"";
	display:block;
	background:#005bac;
	width:100%;
	height:30%;
	position:absolute;
	bottom:90px;
	left:0;
	z-index:-1;
}
	

.about_img {
	width:100%;
}


.about_img img {
	width:100%;
}


.about_txt {
	width:100%;
	margin:0 0 30px;
}
	
}



/* services */
.sec_service {
	width:100%;
	padding:100px 0;
	background:#f6f6f6;
}


.block_services {
	width:96%;
	max-width:1400px;
	margin:0 auto;
	font-size:1.6rem;
}


.block_flex {
	width:100%;
	display:flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin:0 auto 100px;
}


.block_flex_reverse {
	width:100%;
	display:flex;
	flex-wrap: wrap;
	flex-direction: row-reverse;
	justify-content: space-between;
	margin:0 auto 100px;
}


.service_img {
	width:50%;
}


.service_img img {
	width:100%;
}


.service_txt {
	width:48%;
	margin:0;
}


.service_txt h4 {
	color:#448aca;
	font-size:2.4rem;
	font-weight:500;
	margin:0 0 20px;
	padding:60px 0 0;
	position:relative;
}


.service_txt h4::before {
	content:attr(data-number);
	display:inline-block;
	background:#005bac;
	letter-spacing: 0px;
	color:#FFF;
	font-family: "Figtree", sans-serif;
	font-optical-sizing: auto;
	font-weight: 600;
	font-style: normal;
	padding:5px 15px;
	position:absolute;
	top:0;
	left:0;
}


@media all and (max-width:640px) {
.sec_service {
	width:100%;
	padding:50px 0;
	background:#f6f6f6;
}
	
	
.block_flex {
	width:100%;
	display:flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin:0 auto 50px;
}


.block_flex_reverse {
	width:100%;
	display:flex;
	flex-wrap: wrap;
	flex-direction: row-reverse;
	justify-content: space-between;
	margin:0 auto 50px;
}
	
	
.service_img {
	width:100%;
}


.service_txt {
	width:100%;
	margin:0 0 15px;
}
}


/* flow */
.sec_flow {
	width:100%;
	padding:100px 0;
	background:#ecf3fa;
}


.block_flow {
	width:96%;
	max-width:1400px;
	margin:0 auto;
	font-size:1.6rem;
}


.list_flow {
	display:flex;
	flex-wrap: wrap;
	justify-content: space-between;
	counter-reset: number 0;
}


.list_flow li {
	width:23%;
	background:#FFF;
	padding:1em;
	position:relative;
	text-align:center;
	margin:0 0 20px;
}


.list_flow li::after {
	display:block;
	content:"";
	border-top:15px solid transparent;
	border-bottom:15px solid transparent;
	border-left:15px solid #00736d;
	position:absolute;
	right:-15px;
	top:50%;
	transform:translateY(-50%);
}


.list_flow li:nth-child(4n)::after {
	display:none;
	content:"";
	border-top:15px solid transparent;
	border-bottom:15px solid transparent;
	border-left:15px solid #00736d;
	position:absolute;
	right:-15px;
	top:50%;
	transform:translateY(-50%);
}


@media all and (max-width:768px) {
.list_flow li {
	width:48%;
	background:#FFF;
	padding:1em;
	position:relative;
	text-align:center;
	margin:0 0 20px;
}
	
.list_flow li:nth-child(2n)::after {
	display:none;
	content:"";
	border-top:15px solid transparent;
	border-bottom:15px solid transparent;
	border-left:15px solid #00736d;
	position:absolute;
	right:-15px;
	top:50%;
	transform:translateY(-50%);
}
}


.list_flow li h4 {
	display:inline-block;
	margin:0 0 20px;
	font-size:2.1rem;
	position:relative;
	padding:0 0 0 40px;
}


.list_flow li h4::before {
	counter-increment: number 1;
	content: counter(number) ""; 
	color:#FFF;
	background:#00736d;
	display:inline-block;
	width:30px;
	height:30px;
	padding:0;
	line-height:1.3;
	border-radius: 50%;
	position:absolute;
	top:5px;
	left:0;
	text-align:center;
}


.area_thumb {
	width:40%;
	margin:0 auto 30px;
}


.area_thumb img {
	width:100%;
}


@media all and (max-width:640px) {
.sec_flow {
	width:100%;
	padding:50px 0;
	background:#ecf3fa;
}
	
	
.list_flow li {
	width:48%;
	background:#FFF;
	padding:.7em;
	position:relative;
	text-align:center;
	margin:0 0 20px;
	font-size:1.5rem;
}
	
	
.list_flow li h4 {
	display:inline-block;
	margin:0 0 20px;
	font-size:1.8rem;
	position:relative;
	padding:0 0 0 30px;
}
	
.list_flow li h4::before {
	counter-increment: number 1;
	content: counter(number) ""; 
	color:#FFF;
	background:#00736d;
	display:inline-block;
	width:25px;
	height:25px;
	padding:0;
	line-height:1.3;
	border-radius: 50%;
	position:absolute;
	top:5px;
	left:0;
	text-align:center;
}
	
.area_thumb {
	width:50%;
	margin:0 auto 20px;
}
	
}

.list_flow li p {
	text-align:left;
}


/* contact */
.sec_contact {
	width:100%;
	padding:60px 0;
	background:url("../images/bg_contact@2x.jpg") no-repeat center center;
	background-size:cover;
	overflow: hidden;
}


.block_contact {
	width:96%;
	max-width:1400px;
	margin:0 auto;
	font-size:1.6rem;
	text-align:center;
	color:#FFF;
}


.block_contact h4 {
	font-size:3rem;
	margin:0 0 70px;
}


.flex_contact {
	width:100%;
	max-width:1000px;
	margin:0 auto;
	display:flex;
	flex-wrap: wrap;
	justify-content: space-around;
}


.flex_contact div {
	width:35%;
}


.flex_contact div a {
	display:block;
	width:100%;
	background:#FFF;
	padding:1em;
	font-size:2.1rem;
	color:#005bac;
	transition:all .3s linear;
	text-aloign:center;
	font-weight:600;
	margin:0 0 15px;
}


@media all and (max-width:768px) {
.flex_contact div {
	width:42%;
}
	
	
.flex_contact div a {
	display:block;
	width:100%;
	background:#FFF;
	padding:1em;
	font-size:1.8rem;
	color:#005bac;
	transition:all .3s linear;
	text-aloign:center;
	font-weight:600;
	margin:0 0 15px;
}	
}


@media all and (max-width:560px) {
.block_contact h4 {
	font-size:2.4rem;
	margin:0 0 40px;
}
	
.flex_contact div {
	width:100%;
}	
}



/* contact form */
.sec_form {
	width:100%;
	padding:100px 0;
}


.block_form {
	width:96%;
	max-width:1400px;
	margin:0 auto;
	font-size:1.6rem;
}


.area_form {
	width:100%;
	max-width:1000px;
	margin:0 auto;
	background:#ecf3fa;
	padding:80px;
}


@media all and (max-width:640px) {
.sec_form {
	width:100%;
	padding:50px 0;
}
	
.area_form {
	width:100%;
	max-width:1000px;
	margin:0 auto;
	background:#ecf3fa;
	padding:15px;
}
}


.reqire {color:#900;}


.area_form input[type="text"] {
	width:100%;
	font-size:1.6rem;
	padding:1em;
	border:1px solid #eeeeee;
}


.area_form input[type="date"] {
	width:100%;
	max-width:250px;
	font-size:1.6rem;
	padding:1em;
	border:1px solid #eeeeee;
}


.area_form textarea {
	width:100%;
	font-size:1.6rem;
	height:20em;
	padding:1em;
	border:1px solid #eeeeee;
}

/* radio button parts */
input[type="radio"] {
  position: relative;
  width: 16px;
  height: 16px;
  border: 1px solid #000;
	background:#FFF;
  border-radius: 50%;
  vertical-align: -2px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

input[type="radio"]:checked:before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #000;
  content: '';
}

::placeholder {
	color:#CCC;
}

*:focus {
outline: none;
}


/* Checkboxes styles */
input[type="checkbox"] { display: none; }

input[type="checkbox"] + label {
  display: inline-block;
  position: relative;
  padding-left: 35px;
	font-size:1.6rem;
  color: #000;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

input[type="checkbox"] + label:last-child { margin-bottom: 0; }

input[type="checkbox"] + label:before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  border: 2px solid #AAA;
  position: absolute;
	background:#FFF;
  left: 0;
  top: 4px;
  -webkit-transition: all .12s, border-color .08s;
  transition: all .12s, border-color .08s;
}

input[type="checkbox"]:checked + label:before {
  width: 10px;
  top: 0;
  left: 5px;
  border-radius: 0;
	border: 3px solid #6cc0e5;
	background:transparent;
  border-top-color: transparent;
  border-left-color: transparent;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}


/* uploader */
.upload-container {
    width: 100%;
    margin: 0 auto;
}

#drop-area {
    border: 2px dashed #ccc;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    background-color: #fff;
    cursor: pointer;
}

#drop-area.hover {
    border-color: #333;
}

.my-form {
    margin-bottom: 10px;
}

#fileElem {
    display: none;
}

#fileSelectButton {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 20px;
    font-size: 16px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#fileSelectButton:hover {
    background-color: #0056b3;
}

#gallery {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
}

.gallery-item {
    width: 100px;
    height: 100px;
    margin: 5px;
    border: 1px solid #ddd;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background-color: #fff;
}

.gallery-item img {
    max-width: 100%;
    max-height: 100%;
    display: block;
}

.remove-button {
	font-family:"font awesome 6 pro";
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(255, 255, 255, 0.7);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    padding: 2px 6px;
}


.list_uploadImage {
	width:100%;
	display:flex;
	flex-wrap:wrap;
	justify-content:flex-start;
}


.list_uploadImage li {
	width:150px;
	margin:5px;
}


.list_nego_step {
	width:100%;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	counter-reset: number 0; 
}


.list_nego_step li {
	width:23%;
	font-size:1.6rem;
	border-radius: 10px;
	padding:10px 10px 20px;
	background:#FFF;
	box-shadow: 0px 0px 10px rgba(0,0,0,.2);
	position:relative;
	margin:0 0 15px;
}


.list_nego_step li::before {
	display:inline-block;
	width:45px;
	height:40px;
	border-radius: 50%;
	position:absolute;
	top:-5px;
	left:-5px;
	color:#FFF;
	font-weight:600;
	font-size:1.8rem;
	padding:5px 0 0;
	background:#000;
	counter-increment: number 1;
	content: counter(number);
	text-align:center;
	z-index:10;

}


@media all and (max-width:768px) {
.list_nego_step li {
	width:48%;
	font-size:1.6rem;
	border-radius: 10px;
	padding:10px 10px 20px;
	background:#FFF;
	box-shadow: 0px 0px 10px rgba(0,0,0,.2);
	position:relative;
	margin:0 0 20px;
}
}


@media all and (max-width:560px) {
.list_nego_step li {
	width:100%;
	font-size:1.6rem;
	border-radius: 10px;
	padding:10px 10px 20px;
	background:#FFF;
	box-shadow: 0px 0px 10px rgba(0,0,0,.2);
	position:relative;
	margin:0 0 30px;
}
}


.btn_send {
	display:inline-block;
	color:#FFF;
	background:#005bac;
	border:1px solid #005bac;
	padding:1.5em 3em;
	transition:all .3s ease;
}


.btn_send:hover {
	display:inline-block;
	color:#005bac;
	background:#FFF;
	border:1px solid #005bac;
	padding:1.5em 3em;
	transition:all .3s ease;
}



/* footer */
footer {
	width:100%;
	background:#448aca;
	color:#FFF;
	font-size:1.2rem;
	text-align:center;
	padding:50px 0;
}


.footer_logo {
	width:100px;
	margin:0 auto 30px;
}


.footer_logo img {
	width:100%;
}