@charset "UTF-8";
:root {
	--navy: #003C5D;
	--bg-pale-green: #FCFFFD;
	--bg-dark-green: #E7F7F9;
	--bace-green: #00A9A3;
	--bitter-green: #EDF5F5;
	--blue-green: #24A5B6;
	--light-gree: #DAFFF5;
	--gray-blue: #A0B8C5;
	--black: #333333;
	--white: #ffffff;  
  }
/*—————————————————————————————————————
header start
—————————————————————————————————————*/

.header {
	position: fixed;
    top: 0;
    left: 0;
    z-index: 4;
    width: 100%;
    padding: 12px 20px;
    background-color: #ffffff;
    box-shadow: 0px 5px 8px -5px rgba(0,0,0,0.2)
  }
  .header_menu {
	display: flex;
	justify-content: space-between;
	align-items: center;
  }
  .header_inner {
	display: flex;
	align-items: center;
	gap: 1.5em;
  }
  .header_nav {
	display: flex;
	align-items: center;
	gap: clamp(14px, 10*(1vw + 1vh), 24px);
	font-weight: 500;
	font-size: 16px;
  }
  .header_nav a {
	color: var(--navy);
  }
  .header_btn {
	display: flex;
	align-items: center;
	gap: 10px;
  }

  .header_btn .btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;	
	width: 160px;
	height: 30px;
    padding-right: .125em;
    padding-left: .125em;
	font-size: 14px;
    font-weight: 500;
    color: #333333;
    text-align: center;
	border: 1px solid #333333;
	border-radius: 15px;
    line-height: 1;
}

.header_btn a.btn-cta{
	font-size: 0.8em;
	font-weight: 500;
	padding: 8px 40px;
}

  .header_breadcrumbs {
	display: flex;
	align-items: center;
	font-size: 12px;
  }
  .header_breadcrumbs li {
	position: relative;
	margin-right: 3px;
  }
  .header_breadcrumbs li a {
	position: relative;
	display: block;
	padding-right: 20px;
	color: inherit;
  }
  .header_breadcrumbs li:not(:first-child) a,
  .header_breadcrumbs li:last-child {
	padding-left: 20px;
  }
  .header_breadcrumbs li:last-child a {
	padding-right: 0;
	margin-right: 0;
  }
  .header_breadcrumbs li:not(:last-child)::after {
	position: absolute;
	top: 50%;
	right: -3px;
	width: 3px;
	height: 8px;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4.24 8.33'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:none%3Bstroke:%23333%3Bstroke-miterlimit:10%3B%7D%3C/style%3E%3C/defs%3E%3Cg id='design-text'%3E%3Cpolyline class='cls-1' points='.38 8.01 3.59 4.17 .38 .32'/%3E%3C/g%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4.24 8.33'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:none%3Bstroke:%23333%3Bstroke-miterlimit:10%3B%7D%3C/style%3E%3C/defs%3E%3Cg id='design-text'%3E%3Cpolyline class='cls-1' points='.38 8.01 3.59 4.17 .38 .32'/%3E%3C/g%3E%3C/svg%3E");
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	background-color: currentColor;
	transform: translateY(-50%);
	content: '';
  }
  .header_hbtn {
	position: relative;
	display: none;
	width: 40px;
	height: 30px;
  }
  .header_hbtn span {
	position: absolute;
	display: block;
	width: 100%;
	height: 3px;
	background-color: #000;
  }
  .header_hbtn span:nth-of-type(1) {
	top: 0;
  }
  .header_hbtn span:nth-of-type(2) {
	top: 50%;
	transform: translateY(-50%);
  }
  .header_hbtn span:nth-of-type(3) {
	bottom: 0;
  }
  .header_splogo {
	display: none;
  }

  @media screen and (max-width: 1112px) {
	.header_box,
	.header_breadcrumbs {
	  display: none;
	}
	.header_hbtn {
	  display: block;
	  background-color: transparent;
	  border: none;
	}
	.header_hbtn.active {
	  position: fixed;
	  top: 30px;
	  right: 20px;
	  background-color: transparent;
	  border-style: none;
	}

	.header_hbtn.active span:nth-of-type(1) {
	  top: 50%;
	  transform: translateY(-50%) rotate(45deg);
	  transform-origin: center;
	}
	.header_hbtn.active span:nth-of-type(2) {
	  display: none;
	}
	.header_hbtn.active span:nth-of-type(3) {
	  bottom: 50%;
	  transform: translateY(50%) rotate(-45deg);
	  transform-origin: center;
	}
	.header_box.active {
	  position: fixed;
	  top: 0;
	  left: 0;
	  display: block;
	  width: 100%;
	  height: 100vh;
	  height: 100dvh;
	  padding-top: 30px;
	  padding-bottom: 50px;
	  background-color: #fff;
	  overflow-y: scroll;
	}
	.header_box.active .header_splogo {
	  display: block;
	  text-align: center;
	}
	.header_box.active .header_inner {
	  flex-direction: column;
	  width: 80%;
	  gap: 2em;
	  margin-right: auto;
	  margin-left: auto;
	}
	.header_box.active .header_inner>* {
	  width: 100%;
	}
	.header_box.active .header_nav {
	  flex-direction: column;  
	  gap: 0; 
	  margin-top: 20px;
	}
	.header_box.active .header_nav>* {
	  width: 100%;
	  border-bottom: 1px solid var(--bace-green);
	}
	.header_box.active .header_nav a {
	  position: relative;
	  display: block;
	  padding: 18px;
	  font-size: 20px;
	  text-align: center;
	  line-height: 1.8;
	}
	.header_box.active .header_nav a::after {
	  position: absolute;
	  top: 50%;
	  right: max(16px, 3.478vw);
	  width: 20px;
	  height: 20px;
	  background: url("../images/icon-arrow.svg") no-repeat center center / contain;
	  transform: translateY(-50%);
	  content: '';
	}
	.header_box.active .header_btn {
	  flex-direction: column;
	  gap: 1em;
	}
	.header_box.active .header_btn>* {
	  width: 100%;
	}
	.header_box.active .header_btn .btn {
	  width: 100%;
	  height: 48px;
	  border-radius: 24px;
	  font-size: 20px;
	}
	.header_btn a.btn-cta{
		width: 100%;
		padding: 0.8em;
		font-size: 1.1em;
	}
	
  }
  @media screen and (max-width: 480px) {
	.header_box.active .header_inner {
	  width: 86.6vw;
	}
	.header_box.active .header_btn>* {
	  width: 90%;
	}
	.header_pclogo img {
	  width: 100px;
	}
  }
  
  /*—————————————————————————————————————
  // header end
  —————————————————————————————————————*/