/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jun 09 2024 | 12:58:26 */
header.custom{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:101;
}

header .logo{
   margin: 0 0 0 20px;
   margin-right: auto;
}
header .logo a img{
	width: 280px;
	height: auto;
}
footer .logo a img{
	width: 230px;
	height: auto;
}

header .logo a,
footer .logo a{
	display: flex;
	align-items: center;
	color:#2a6eb3!important;
	gap: 17px;
}
header .company,
footer .company{
   display: flex;
   flex-direction: column;
   align-items: center;
   line-height: 25px;
}
#pcNav{
  display:block;
}
#spNav {
   display:none;
}
#header-container{
  display: flex;
  position: relative;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 76px;
  box-sizing: initial;
  gap: 27px;
}
header.initial{
  background-color:transparent;
  transition: all 0.5s ease;
}
.spMenu-opened header{
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
header.scrolled{
  background-color:rgba(255,255,255,0.85);
  transition: all 0.5s ease;
}
#pcNav ul{
  display: flex;
  align-items: center;
  padding:0;
  font-size: 18px;
  gap: 30px;
  margin-right: 10px;
}
a.tel,
footer a.tel{
    position: relative!important;
    color: #fff!important;
    padding-left: 27px!important;
    font-size: 18px!important;
}
a.tel::before{
    position: absolute!important;
    content: url(../fonts/tel.svg)!important;
    top: calc(50% - 4px)!important;
    transform: translateY(-50%)!important;
    width: 17px!important;
    height: 17px!important;
    left: 0px!important;
}
a.e-mail{
    position: relative!important;
	padding: 2px 20px!important;
	color: #ffffff!important;
    border-radius: 3px!important;
    padding-left: 27px!important;
    font-size: 17px!important;
}
a.e-mail::before{
    position: absolute!important;
    content: url(../fonts/e-mail-w.svg)!important;
    top: calc(50% - 4px)!important;
    transform: translateY(-50%)!important;
    width: 20px!important;
    height: 20px!important;
    left: -2px!important;
}
#pcNav li a {
   color: #333;
   position: relative;
}
#pc-contact ul{
	display: flex;
	flex-direction: column;
	gap: 3px;
}
#pc-contact {
    background-color: #2a6eb3;
    border-radius: 0 0 0 15px;
    padding: 12px 15px 10px 25px;
}
#pc-contact li{
	position: relative;
}
#pc-contact li:first-of-type::after,
#footer-contact li:first-of-type::after{
	content: '';
    display: block;
    width: 100%;
    height: 1px;
    border-bottom: 1px dotted #a5cbf0;
    position: absolute;
    left: -3px;
    bottom: -3px;
}
header .contact{
   font-size: 18px;
}
a.underline::after {
  position: absolute;
  bottom: 3px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background-color: rgb(0, 0, 0);
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform .3s;
}
a.underline:hover::after {
  transform-origin: left top;
  transform: scale(1, 1);
}
header.scrolled a.underline::before,
header.scrolled a.underline::after {
  border-bottom: solid 2px #000;
}

#pcNav li>a.underline {
  padding: 18px 0em;
}
/*----------------------------------------------------
list
--------------------------------------------------- */
#pcNav .drop-down,
#pcNav .drop-down ul{
  position:relative;
}
#pcNav .drop-down{
  padding-right: 20px;
}
#pcNav .drop-down::before,
#pcNav .drop-down::after{
  content: '';
  position: absolute;
  width: 7px;
  height: 1px;
  top: calc(50% + 1px);
  background-color: #000;
  border-radius: 5px;
}

#pcNav .drop-down::before{
  right: -3px;
  transform: translateY(-50%) rotate(-45deg);
}
#pcNav .drop-down::after{
  right: 2px;
  transform: translateY(-50%) rotate(45deg);
}

#pcNav .drop-down > div{
   position: absolute;
   display: flex;
   top: 40px;
   background-color: #2a6eb3;
   transition: all .2s ease;
   padding: 10px 20px 15px 20px;
   border: 1px solid #e3e3e3;
   opacity: 0;
   visibility: hidden;
   transform: scaleY(0);
   transform-origin: center top;
   transition: .5s;
   left: -21px;
}
#pcNav .drop-down > div.bukken{
  width: 170px;
}

#pcNav .drop-down  a{
  color: #fff;
}
.top #pcNav .drop-down > div{
  background-color:rgba(51, 51, 51, 70%);
}

.services-container{
  width: 33em;
  left: -260px;
}
.samples-container{
  width: 15.7em;
  left: -30px;
}

#pcNav .drop-down:hover > div{
  opacity: 1;
  visibility: visible;
  transform: scaleY(1);
  transition: .5s;
}
 #pcNav .drop-down ul{
  display: block;
}
#pcNav .drop-down ul:nth-child(1){
  margin-right:0.5em;
}
#pcNav .drop-down li{
  line-height:2.5em;
  font-size:1rem;
}
#pcNav .drop-down li>a{
  color:#fff;
  transition:all .5s ease;
  display: block;
}
#pcNav .drop-down li>a:hover{
  color:#b5fdf2;
  opacity: 1;
  transition:all .5s ease;
}

#pcNav li.contact li a{
   padding:0.3em 1em 0.3em 3.5em;
   font-weight:normal;
   display: block;
}

/*---------------------------------------------------
contact
----------------------------------------------------*/
#pcNav li.contact > a {
  background-color: #E85E48;
  color: #fff;
  border-radius: 1.5em;
  transition:all .5s ease;
  width:8em;
  height: 40px;
  padding-left:1.3em;
  vertical-align: middle;
  text-align:center;
  display: table-cell;
}
#pcNav li.contact {
  position: relative;
}

#pcNav li.contact li{
  padding:0;
  font-size:1.0rem;
}
#pcNav li.contact:hover ul{
  top: 57px;
  visibility: visible;
  opacity: 1;
 }

#pcNav li.contact li{
  line-height: 2.5em;
}

#pcNav li.contact li a{
  color:#fff;
  border-radius: 0.35em;
}

#pcNav span.fas{
  margin-right: 0.5em;
  color:#fff;
}

#pcNav li.contact li a:hover{
  color: rgb(11, 116, 148);
  background-color:#fff;
  transition:0.5s ease;
}
#pcNav li.contact li a:hover span{
  color: rgb(11, 116, 148);
  transition:0.5s ease;
}
#pcNav li.form a::before{
   position: absolute;
   font-family: 'icons';
   content: '\e901';
   top: calc(50% - 1px);
   transform: translateY(-50%);
   left: 24px;
}
#pcNav li.online a::before{
   position: absolute;
   font-family: 'icons';
   content: '\e905';
   top: calc(50% - 1px);
   transform: translateY(-50%);
   left: 24px;
}
#pcNav li.tel a::before{
   position: absolute;
   font-family: 'icons';
   content: '\e91f';
   top: calc(50% - 1px);
   transform: translateY(-50%);
   left: 24px;
}
/*---------------------------------------------------
footer
----------------------------------------------------*/
.site-footer a{
	color: #2a6eb3;
}
body.home footer .has-1-columns {
    padding: 40px 0;
}

.footer-inner-01 {
    margin: 0 0 50px 30px;
}
.footer-inner-02{
    display: flex;
    align-items: flex-end;
	justify-content: space-between;
	padding: 0 30px;
}
.footer-menu{
	display: flex;
	gap: 30px;
}
.footer-menu li{
	position: relative;
}
.footer-menu li:not(:last-of-type)::after{
	position: absolute;
    content: '\ff5c';
    right: -22px;
    color: #9bc5ef;
}
.footer-adv-overlay{
	padding: 0;
}
.footer-adv-overlay li a:before {
    content: none;
}
footer .e-mail{
	background-color: #2a6eb3!important;
	padding: 10px 15px 13px 46px!important;
	font-size: 15px!important;
}
footer .e-mail::before {
    top: calc(50% - 3px)!important;
    left: 20px!important;
	border-radius: 0!important;
}
/*********************************************************
1100px
**********************************************************/
@media screen and (max-width:1100px) {

#pcNav,
#pc-contact{
  display:none;
}
/*--------------------------------------------------------
Hamburger Menu
--------------------------------------------------------*/
#spMenuBtn {
  position: relative;
  width: 50px;
  height: 50px;
  border: none;
  background-color:transparent;
  color:#333;
  font-size:8pt;
  transition: .5s;
  border-radius:2px;
  padding: 0;
}
#spNav {
  position: relative;
  display:block;
  width: 50px;
  height: 50px;
  margin-right: 6px;
}
.active #spMenuBtn {
  color:#fff;
  z-index: 2;
  transition: .5s;
}
.spMenuBtn-container {
  display: block;
  width: 100%;
  height: 100%;
}
.spMenuBtn-container .bar {
  display: block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 2px;
  border-radius: 5px;
  background-color: #2a6eb3;
  transition:.5s;
}
.spMenu-opened .spMenuBtn-container .bar{
  background-color:#fff;
  transition:.5s;
}
.spMenuBtn-container .bar:nth-of-type(1) {
  top: 10px;
}
.spMenuBtn-container .bar:nth-of-type(2) {
  top: 22px;
}
.spMenuBtn-container span:last-child {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0px;
  color: #2a6eb3;
}
.spMenu-opened .spMenuBtn-container span:last-child {
	color: #fff;
}
.spMenu-opened .spMenuBtn-container span:nth-of-type(1) {
    transform: translate(-50% , 10px) rotate(-45deg);
	top: 4px;
}
.spMenu-opened .spMenuBtn-container span:nth-of-type(2) {
    transform: translate(-50% , -10px) rotate(45deg);
	top: 24px;
}

/*-------------------------------------------------------
spMenu
------------------------------------------------------- */
.spMenu-container img{
   width: 210px;
   margin-left 15px;
}
.sp-logo{
	background-color: #fff;
	display: flex;
	align-items: center;
	padding: 13px 0 10px 20px;
}
.spMenu-container>li{
  border-bottom: 1px solid #52384b;
}
.spMenu-container .drop-down>li:not(:last-child),
.spMenu-container .drop-down>li:not(:last-child){
  border-bottom: 1px dashed rgba(255,255,255,0.2);
}
.spMenu-container .drop-down>li:last-child,
.spMenu-container .drop-down>li:last-child{
  border-bottom: none;
}

.spMenu-container {
    position: fixed;
    display: flex;
    flex-direction: column;
	justify-content: space-between;
	gap: 50px;
    padding: 100px 0 0 0;
    top: 0px;
    right: -100vw;
    width: 86%;
    height: 100%;
    background-color: #2a6eb3;
    transition: all .5s;
    opacity: 0;
    z-index: -1;
}
#spNav.active .spMenu-container {
    right: 0px;
    opacity: 1;
    z-index: 1;
}
.spMenu-container>ul {
  text-align: left;
}
.spMenu-container .menus{
	display: flex;
	flex-direction: column;
	margin-left: 20px;
}
.spMenu-container a,
.spMenu-container .include-accordion{
	color: #fff;
}
.spMenu-container .menus a,
.accordionBtn{
    display: block;
    padding: 10px 0 10px 12px;
    border-top: none;
    border-left: none;
    border-right: none;
  	border-bottom: 1px dotted #6ca0d5;
    text-align: left;
    position: relative;
}
.spMenu-container .menus .accordion a{
    border-bottom: 1px dashed #548cc5;
}

.accordionBtn{
    width: 100%;
    background-color: transparent;
}
.accordion{
  position: relative;
}
.spMenu-container .contact {
	margin-bottom: auto;
    margin-left: 35px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.spMenu-container .tel::before{
    top: calc(50% - 4px)!important;
}
.spMenu-container .e-mail::before{
    top: calc(50% - 4px)!important;
}
.spMenu-container>ul ul{
  margin-top:0px;
  padding:0 5px 0 30px;
  text-align: left;
}
.spMenu-container .active ul{
 margin-bottom: 15px;
}

#spNav div.overlay {
  position:fixed;
  top:0;
  left:-100vw;
  background-color:#000;
  width:100%;
  height:100%;
  opacity:0;
  visibility: hidden;
 }
#spNav.active div.overlay {
 left:0;
 opacity:0.6;
 visibility: visible;
 transition:0.5s;
}

/*閭梧勹縺ｮ繧ｹ繧ｯ繝ｭ繝ｼ繝ｫ繧呈ｭ｢繧√ｋ*/
.spMenu-opened {
   overflow-y:hidden;
 }

/*---------------------------------------------------------------
accordion
----------------------------------------------------------------*/
#spNav li>button::before {
  right: 35px;
  left: initial;
  width:1.5px;
  height:8px;
  background-color:#fff;
}
#spNav li>button::after {
  right: 30px;
  left: initial;
  width:1.5px;
  height:8px;
  background-color:#fff;
}
.accordionBtn:focus,
.accordionBtn:hover{
  background-color: transparent;
  border-top: none;
  border-right: none;
  border-left: none;
  border-bottom: 1px dotted #6ca0d5;

}
.accordionBtn::before,
.accordionBtn::after{
   content:'';
   position:absolute;
   top: 50%;
   width:2px;
   height:8px;
   background-color:#fff;
   transition:.5s;
}
.accordionBtn::before{
   transform: translateY(-50%) rotate(-45deg);
   right:26px;
}
.accordionBtn::after{
   right:20px;
   transform: translateY(-50%) rotate(45deg);
}
.spMenu-container.active .accordionBtn::before{
   transform: translateY(-50%) rotate(-135deg);
   right:26px;
}
.spMenu-container.active .accordionBtn::after{
   right:20px;
   transform: translateY(-50%) rotate(135deg);
}

.scroll-control.active{
   overflow-y:auto;
}
.accordionBtn + ul{
   height:0;
   padding:0;
   overflow:hidden;
   transition:.5s;
   background-color:transparent;
   margin:0;
}

}
/*********************************************************************************
767px
**********************************************************************************/
@media screen and (max-width: 767px){
footer .has-1-columns{
	padding: 40px 0;
}
}
/*********************************************************************************
599px
**********************************************************************************/
@media screen and (max-width: 599px){
header .logo{
   margin: 0 0 0 10px;
}
#header-container {
    display: flex;
    position: relative;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 76px;
    box-sizing: initial;
    gap: 15px;
}
.footer-inner-02 {
    align-items: flex-start;
    flex-direction: column;
    gap: 30px;
}
}