@charset "utf-8";


/*** FOOTER ***/

#FOOTER{
  position: relative;
  padding: 1em;
  width: 100%;
  max-width: 97.8rem;  
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  column-gap: 1.5em;
  border-top: 0.1rem solid var(--kiyota-gray-2);
}

.foot-link{
  display: flex;
  font-size: var(--kiyota-fs-s);
}

.foot-link li:not(:last-child){ display: none;}

.foot-link a{
  padding: 0 0 0 1rem;
  background: url(/kiyota/common/img/icon_arrow_black.svg) left center no-repeat;
  background-size: 0.8rem;
}

#FOOTER .copyright{
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  column-gap: 1rem;
  font-size: var(--kiyota-fs-xs); 
  letter-spacing: -0.05em;
}

#FOOTER .copyright strong{ font-size: var(--kiyota-fs-s); letter-spacing: inherit;}


@media screen and (max-width: 767px) {

#FOOTER{
  position: relative;
  padding: 1.5em 1em 1em;
  width: 100%;
  max-width: 97.8rem;  
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 1.5em;
  border-top: none;
  background-color: var(--kiyota-blue-1);
  color: #fff;
}

.foot-link{
  display: flex;
  column-gap: 0;
  border-right: 0.1rem solid #fff;
}

.foot-link li{ border-left: 0.1rem solid #fff;}
.foot-link li:first-child,
.foot-link li:nth-child(2){ display: block;}

.foot-link a{
  padding: 1rem 1.5rem;
  background: none;
}

.foot-link a.txt-link { color: #fff;}

#FOOTER .copyright{
  padding-top: 1.5em;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: var(--kiyota-fs-s);  
  border-top: 0.1rem solid #fff;
}

#FOOTER .copyright strong{ font-size: var(--kiyota-fs-m);}

}/* End max 767 */








@media (hover: hover) {
a { transition: opacity .3s ease;}
a:hover { opacity: 0.7;}

a.txt-link { transition: color .3s ease, text-decoration-color 0.3s ease; text-decoration-color: transparent;}
a.txt-link:hover { color: var(--kiyota-blue-1); opacity: 1; text-decoration-color: currentColor;}

.head-navi ul a { transition: background-color .3s ease;}
.head-navi ul a:hover { background-color: var(--kiyota-blue-1); opacity: 1;}

.menu-list .home-link a { transition: background-color .3s ease;}
.menu-list .home-link a:hover { background-color: var(--kiyota-blue-1); opacity: 1;}
.menu-list .category:hover { opacity: 1;}
.menu-list .category img { transition: opacity .3s ease; }
.menu-list .category:hover img { opacity: 0.6;}

.global-menu .sub-menu a { transition: background-color .3s ease, color .3s ease;}
.business .global-menu .sub-menu a:hover { background-color: var(--kiyota-gray-5); color: var(--kiyota-blue-2); opacity: 1;}
.company .global-menu .sub-menu a:hover { background-color: var(--kiyota-gray-5); color: var(--kiyota-blue-3); opacity: 1;}
.recruit .global-menu .sub-menu a:hover { background-color: var(--kiyota-gray-5); color: var(--kiyota-blue-4); opacity: 1;}

}/* End hover */

@media screen and (max-width: 767px) and (hover: hover) {
.global-menu .sub-menu a { transition: background .3s ease, color .3s ease;}
.business .global-menu .sub-menu a:hover { color: var(--kiyota-blue-2); opacity: 1; background: url(/kiyota/common/img/arrow_blue_2.svg) right 1rem center no-repeat #fff; background-size: 0.8rem auto;}
.company .global-menu .sub-menu a:hover { color: var(--kiyota-blue-3); opacity: 1; background: url(/kiyota/common/img/arrow_blue_3.svg) right 1rem center no-repeat #fff; background-size: 0.8rem auto;}
.recruit .global-menu .sub-menu a:hover { color: var(--kiyota-blue-4); opacity: 1; background: url(/kiyota/common/img/arrow_blue_4.svg) right 1rem center no-repeat #fff; background-size: 0.8rem auto;}

}/* End max767 hover */


.mt-auto{ margin-top: auto;}
.mt-1{ margin-top: 1em;}
.mt-2{ margin-top: 2em;}
.mt-3{ margin-top: 3em;}
.mt-4{ margin-top: 4em;}
.mt-5{ margin-top: 5em;}
.mt-05{ margin-top: 0.5em;}

.mb-1{ margin-bottom: 1em;}
.mb-2{ margin-bottom: 2em;}
.mb-3{ margin-bottom: 3em;}
.mb-4{ margin-bottom: 4em;}
.mb-5{ margin-bottom: 5em;}
.mb-05{ margin-bottom: 0.5em;}

.ml-1{ margin-left: 1em;}
.ml-2{ margin-left: 2em;}
.ml-3{ margin-left: 3em;}
.ml-4{ margin-left: 4em;}

.mr-1{ margin-right: 1em;}
.mr-2{ margin-right: 2em;}
.mr-3{ margin-right: 3em;}
.mr-4{ margin-right: 4em;}

.margin-1{ margin: 1em;}
.margin-2{ margin: 2em;}

.pt-1{ padding-top: 1em;}
.pt-2{ padding-top: 2em;}
.pt-3{ padding-top: 3em;}
.pt-4{ padding-top: 4em;}
.pt-5{ padding-top: 5em;}
.pt-05{ padding-top: 0.5em;}

.pb-1{ padding-bottom: 1em;}
.pb-2{ padding-bottom: 2em;}
.pb-3{ padding-bottom: 3em;}
.pb-4{ padding-bottom: 4em;}
.pb-5{ padding-bottom: 5em;}
.pb-05{ padding-bottom: 0.5em;}

.pl-1{ padding-left: 1em;}
.pl-2{ padding-left: 2em;}
.pl-3{ padding-left: 3em;}
.pl-4{ padding-left: 4em;}

.pr-1{ padding-right: 1em;}
.pr-2{ padding-right: 2em;}
.pr-3{ padding-right: 3em;}
.pr-4{ padding-right: 4em;}

.padding-1{ padding: 1em;}
.padding-2{ padding: 2em;}