@charset "utf-8";

*,*::before,*::after{box-sizing:border-box;}
* { margin: 0;}
html{font-size:62.5%;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none; scroll-behavior: smooth; scrollbar-gutter: stable;}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0;}
ul[role='list'],ol[role='list']{list-style:none;}
body{min-height:100vh;-webkit-font-smoothing: antialiased;}
h1,h2,h3,h4,button,input,label{line-height:1.1;}
h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor;}

img,picture{max-width:100%;display:block;}
input,button,textarea,select{font:inherit;}
textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex;}

:where(ul,dl,ol,li,dt,dd,p){margin:0;padding:0;}
:where(ol,ul,menu){list-style:none;}
:where(em,address){ font-style: normal;}

html:focus-within { scroll-behavior: smooth;}
@media (prefers-reduced-motion: no-preference) { html:focus-within { scroll-behavior: smooth;}}

details > summary {
  list-style: none;
  cursor: pointer;
  display: block;
  outline: none;
}

details summary::-webkit-details-marker { display: none;}


:root {
  --kiyota-fs-xs: 1rem;
  --kiyota-fs-s: 1.2rem;
  --kiyota-fs-m: 1.4rem;
  --kiyota-fs-l: 1.6rem;
  --kiyota-fs-xl: 1.8rem;
  --kiyota-fs-xxl: 2rem;

  --kiyota-lh-none: none;
  --kiyota-lh-xs: 1.2;
  --kiyota-lh-s: 1.4;
  --kiyota-lh-m: 1.6;
  --kiyota-lh-l: 1.8;
  --kiyota-lh-xl: 2;

  --kiyota-black: #333;
  --kiyota-red: #9e1b32;
  
  --kiyota-blue-1: rgba(87, 195, 234, 1);
  --kiyota-blue-2: rgba(0, 140, 214, 1);
  --kiyota-blue-3: rgba(0, 64, 152, 1);
  --kiyota-blue-4: rgba(0, 150, 170, 1);
    
  --kiyota-gray-1: #a7afb2;
  --kiyota-gray-2: #999;
  --kiyota-gray-3: #ccc;
  --kiyota-gray-4: #eee;
  --kiyota-gray-5: #f2f2f2;
}


body{
  background-color: #fff;
  color: var(--kiyota-black);
  font-size: var(--kiyota-fs-m);
  font-family: "Lucida Grande", "Lucida Sans Unicode", "メイリオ", Meiryo, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", Helvetica, Arial, Verdana, sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-display: swap;
  line-height: var(--kiyota-lh-m);
}

.font-size-xs{ font-size: var(--kiyota-fs-xs);}
.font-size-s{ font-size: var(--kiyota-fs-s);}
.font-size-m{ font-size: var(--kiyota-fs-m);}
.font-size-l{ font-size: var(--kiyota-fs-l);}
.font-size-xl{ font-size: var(--kiyota-fs-xl);}
.font-size-xxl{ font-size: var(--kiyota-fs-xxl);}

.font-weight-bold,strong{ font-weight: bold;}

.line-height-none{ line-height: var(--kiyota-lh-none);} 
.line-height-12{ line-height: var(--kiyota-lh-xs);} 
.line-height-14{ line-height: var(--kiyota-lh-s);} 
.line-height-16{ line-height: var(--kiyota-lh-m);} 
.line-height-18{ line-height: var(--kiyota-lh-l);} 
.line-height-2{ line-height: var(--kiyota-lh-xl);} 

.font-color-black{ color: var(--kiyota-black);}

.font-color-red{ color: var(--kiyota-red);}

.font-color-blue-1{ color: var(--kiyota-blue-1);}
.font-color-blue-2{ color: var(--kiyota-blue-2);}
.font-color-blue-3{ color: var(--kiyota-blue-3);}
.font-color-blue-4{ color: var(--kiyota-blue-4);}

.font-color-gray-1{ color: var(--kiyota-gray-1);}
.font-color-gray-2{ color: var(--kiyota-gray-2);}
.font-color-gray-3{ color: var(--kiyota-gray-3);}
.font-color-gray-4{ color: var(--kiyota-gray-4);}
.font-color-gray-5{ color: var(--kiyota-gray-5);}

.notline{ text-decoration: line-through;}
.no-wrap{ white-space: nowrap;}

a,area,button,input,label,select,summary,textarea,
[tabindex] {
  -ms-touch-action: manipulation;
  touch-action: manipulation;
}

a {
  color: var(--kiyota-black);
  text-decoration: underline;
  cursor: pointer;
}

.no-line a,
a.no-line { text-decoration: none;}

a:visited,
a:hover,
a:focus,
a:active { color: #inherit;}


#WRAP{
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: clip;
}



/*** HEADER ***/

#HEADER{
  width: 100%;
  max-width: 97.8rem;
}

#HEADER h1{
  width: 100%;
  display: block;
  aspect-ratio: 978 / 60;
}

.home #HEADER h1{
  width: 100%;
  display: block;
  aspect-ratio: 978 / 300;
}

.head-navi ul{
  margin-top: 1.5rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  column-gap: 1rem;
}

.head-navi ul a{
  padding: 0.4rem;
  width: 15rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--kiyota-gray-1);
  border-radius: 2em;
  color: #fff;
  text-decoration: none;
}

.head-navi ul li.sp-only{ display: none;}

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

.head-navi ul{ padding: 0 1em;}

}/* End max 767 */


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

#HEADER{
  width: 100%;
  max-width: 48rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.home #HEADER h1,
#HEADER h1{ aspect-ratio: 480 / 175;}

.home .head-navi ul{ display: flex;}

.head-navi ul li.sp-only{ display: block;}
.head-navi ul li:not(.sp-only){ display: none;}
/*
.home .head-navi ul li{ display: none;}
*/

}/* End max 767 */



/*** CONTENTS ***/

.contents{
  padding: 0 0 3em;
  width: calc(100% - 2em);
  max-width: 97.8rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  column-gap: 4rem;
}


.contents-body-index{
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
}



.contents-body{
  position: relative;
  margin: 0;
  padding: 0;
  width: calc(100% - 24rem);
  max-width: 73.8rem;
}

.global-menu{
  position: relative;
  margin: 0;
  width: 20rem;
  display: block;
  align-self: stretch;
  order: -1;
}


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

.contents{
  padding: 2em 0 3em;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  column-gap: 0;
}

.contents-body{ width: calc(100% - 2em);}

.global-menu{
  margin: auto;
  width: calc(100% - 2em);
  max-width: 48rem;
}

}/* End max 767 */



/*** CONTENTS TITLE ***/

.contents-title{
  position: relative;
  margin-bottom: 3em;
  width: 100%;
  min-height: 14rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.access .contents-title,
.privacy .contents-title{ border-bottom: 0.1rem solid var(--kiyota-blue-1);}
.business .contents-title{ border-bottom: 0.1rem solid var(--kiyota-blue-2);}
.company .contents-title{ border-bottom: 0.1rem solid var(--kiyota-blue-3);}
.recruit .contents-title{ border-bottom: 0.1rem solid var(--kiyota-blue-4);}

.contents-title h2{
  font-size: 2.5rem;
  font-weight: normal;
  text-align: center;
  line-height: 1.1;
}

.contents-title p{
  position: absolute;
  bottom: 0.5rem;
  font-size: var(--kiyota-fs-s);
  text-align: center;
  line-height: 1.1;
  letter-spacing: 0.1em;
}

.access .contents-title p,
.privacy .contents-title p{ color: var(--kiyota-blue-1);}
.business .contents-title p{ color: var(--kiyota-blue-2);}
.company .contents-title p{ color: var(--kiyota-blue-3);}
.recruit .contents-title p{ color: var(--kiyota-blue-4);}

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

.contents-title{
  margin-bottom: 0;
  width: 100%;
  min-height: 12rem;
  flex-direction: column;
}

.business .contents-title,
.company .contents-title,
.recruit .contents-title,
.access .contents-title,
.privacy .contents-title{ border-bottom: none;}

.contents-title h2{ font-size: 2.2rem;}

.access .contents-title h2,
.privacy .contents-title h2{ color: var(--kiyota-blue-1);}
.business .contents-title h2{ color: var(--kiyota-blue-2);}
.company .contents-title h2{ color: var(--kiyota-blue-3);}
.recruit .contents-title h2{ color: var(--kiyota-blue-4);}

.contents-title p{
  position: relative;
  bottom: inherit;
  margin: 1em 0 0;
  padding: 1em 1em 0;
  width: 100%;  
}

.access .contents-title p,
.privacy .contents-title p{ border-top: 0.1rem solid var(--kiyota-blue-1);}
.business .contents-title p{ border-top: 0.1rem solid var(--kiyota-blue-2);}
.company .contents-title p{ border-top: 0.1rem solid var(--kiyota-blue-3);}
.recruit .contents-title p{ border-top: 0.1rem solid var(--kiyota-blue-4);}

}
/* End max 767 */



/*** MENU ***/

.business .menu-company .sub-menu,
.business .menu-recruit .sub-menu,
.company .menu-business .sub-menu,
.company .menu-recruit .sub-menu,
.recruit .menu-company .sub-menu,
.recruit .menu-business .sub-menu{ display: none;}

.business .menu-business .category img,
.company .menu-company .category img,
.recruit .menu-recruit .category img{ opacity: 0.6;}

.global-menu .copy{
  position: relative;
  margin: 0 0 1rem;
  width: 20rem;
  display: block;
  font-size: var(--kiyota-fs-xs);
  font-weight: bold;
  text-align: justify;
  word-break: break-all;
  letter-spacing: 0.42em;
  white-space: nowrap;
}

.global-menu .menu-list{
  position: sticky;
  top: 2em;
  left: 0;
  margin: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1rem;
  font-size: var(--kiyota-fs-l);
}

.menu-list .home-link a{
  padding: 1rem;
  display: block;
  font-weight: bold;  
  background-color: var(--kiyota-gray-1);
  color: #fff;
  text-align: center;
  text-decoration: none;
}

.menu-list .category{
  display: block;
  background-color: var(--kiyota-black);
}

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

.global-menu .copy,
.menu-list .home-link{ display: none;}

.menu-list .menu-business .category,
.menu-list .menu-company .category,
.menu-list .menu-recruit .category{
  display: block;
  width: calc(100% / 3 - 1rem);
  max-width: 14rem;
  aspect-ratio: 1 / 1;
}

.menu-list .menu-company .category{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.menu-list .menu-recruit .category{
  position: absolute;
  top: 0;
  right: 0;
}


}/* End max 767 */


.global-menu .sub-menu{
  margin: 0;
  width: 100%;
}

.global-menu .sub-menu a{
  padding: 1rem;
  display: block;
  border-bottom: .1rem solid var(--kiyota-gray-2);
  background-color: #fff;
  text-decoration: none;
  text-align: center;
}

.global-menu .sub-menu li:last-child a{ border-bottom: none;}

/*.business.page-01 .global-menu .sub-menu li:nth-child(1) a,*/
.business.page-02 .global-menu .sub-menu li:nth-child(1) a,
.business.page-03 .global-menu .sub-menu li:nth-child(2) a,
.business.page-04 .global-menu .sub-menu li:nth-child(3) a,
.business.page-05 .global-menu .sub-menu li:nth-child(4) a{ background-color: var(--kiyota-gray-5); color: var(--kiyota-blue-2);}

.company.page-01 .global-menu .sub-menu li:nth-child(1) a,
.company.page-02 .global-menu .sub-menu li:nth-child(2) a,
.company.page-03 .global-menu .sub-menu li:nth-child(3) a,
.company.page-04 .global-menu .sub-menu li:nth-child(4) a{ background-color: var(--kiyota-gray-5); color: var(--kiyota-blue-3);}

.recruit.page-01 .global-menu .sub-menu li:nth-child(1) a,
.recruit.page-02 .global-menu .sub-menu li:nth-child(2) a,
.recruit.page-03 .global-menu .sub-menu li:nth-child(3) a,
.recruit.page-04 .global-menu .sub-menu li:nth-child(4) a{ background-color: var(--kiyota-gray-5); color: var(--kiyota-blue-4);}

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

.global-menu .sub-menu{
  margin: 1em 0 0;
  width: 100%;
  border: .1rem solid var(--kiyota-gray-2);
}

.global-menu .sub-menu a{
  padding: 1rem 2rem;
  background: url(/kiyota/common/img/arrow_gray.svg) right 1rem center no-repeat var(--kiyota-gray-5);
  background-size: 0.8rem auto;
  text-align: left;
}

.global-menu .sub-menu li:last-child a{ border-bottom: none;}
/*.business.page-01 .global-menu .sub-menu li:nth-child(1) a,*/
.business.page-02 .global-menu .sub-menu li:nth-child(1) a,
.business.page-03 .global-menu .sub-menu li:nth-child(2) a,
.business.page-04 .global-menu .sub-menu li:nth-child(3) a,
.business.page-05 .global-menu .sub-menu li:nth-child(4) a{ background: url(/kiyota/common/img/arrow_blue_2.svg) right 1rem center no-repeat #fff; background-size: 0.8rem auto;}
.company.page-01 .global-menu .sub-menu li:nth-child(1) a,
.company.page-02 .global-menu .sub-menu li:nth-child(2) a,
.company.page-03 .global-menu .sub-menu li:nth-child(3) a,
.company.page-04 .global-menu .sub-menu li:nth-child(4) a{ background: url(/kiyota/common/img/arrow_blue_3.svg) right 1rem center no-repeat #fff; background-size: 0.8rem auto;}
.recruit.page-01 .global-menu .sub-menu li:nth-child(1) a,
.recruit.page-02 .global-menu .sub-menu li:nth-child(2) a,
.recruit.page-03 .global-menu .sub-menu li:nth-child(3) a,
.recruit.page-04 .global-menu .sub-menu li:nth-child(4) a{ background: url(/kiyota/common/img/arrow_blue_4.svg) right 1rem center no-repeat #fff; background-size: 0.8rem auto;}

}/* End max 767 */



.contents-section{ position: relative; scroll-margin-top: 9rem; padding-bottom: 8rem;}

/* section-title */

.sub-title{
  margin-bottom: 1em;
  padding: 0.5em;
  color: #fff;
  font-size: var(--kiyota-fs-l);
  font-weight: bold;
  letter-spacing: 0.05em;
  background-color: var(--kiyota-gray-1);
}

.section-title::after{
  position: absolute;
  bottom: -0.2rem;
  left: 0;
  width: 25%;
  height: 0.2rem;
  display: block;
  background-color: var(--kiyota-red);
  content: "";
}

.section-sub-title-1{
  position: relative;
  margin-bottom: 1em;
  padding: 0 0 0 2.5rem;
  font-size: var(--kiyota-fs-xxl);
  font-weight: 400;
  line-height: var(--kiyota-lh-xs);
  letter-spacing: 0.05em;
}

.section-sub-title-1::before{
  position: absolute;
  top: calc(0.5em - 0rem);
  left: 0;
  width: 1.5rem;
  height: 0.4rem;
  display: block;
  background-color: var(--kiyota-red);
  content: "";
}

.section-sub-title-2{
  position: relative;
  margin-bottom: 1em;
  padding: 0 0 0.5em;
  font-size: var(--kiyota-fs-xxl);
  font-weight: 400;
  line-height: var(--kiyota-lh-xs);
  letter-spacing: 0.05em;
  border-bottom: 0.1rem dotted var(--kiyota-gray-3);
}




.list-ul li{
  margin: 0 0 0 1.5em;
  padding: 0 0 0.5em 0;
  list-style-type: disc;
}

.list-ul li.circle{ list-style-type: circle;}

.list-ol li{
  margin: 0 0 0 1.5em;
  padding: 0 0 0.5em 0;
  list-style-type: decimal;
}


.list-dl{ border-top: 0.1rem solid var(--kiyota-gray-2);}
.list-dl.border-none{ border-top: none;}

.list-dl .dl-inner{
  margin: 0;
  padding: 1.8em 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: 2rem;
  border-bottom: 0.1rem solid var(--kiyota-gray-2);
}

.list-dl .dl-inner dt{ font-weight: bold;}






/* notice */

.notice-txt,
.notice-list li{
  position: relative;
  padding: 0 0 0 1.2em;
  text-align: left;
}

.notice-list li{ padding: 0 0 0.5em 1.2em; list-style: none;}

.notice-txt:before,
.notice-list li:before{
  position: absolute;
  top: 0;
  left: 0;
  color: var(--kiyota-red);
  font-weight: var(--kiyota-fw-bold);
  content: "\203B";
}

.notice-txt.red,
.notice-list.red li{ color: var(--kiyota-red);}



/* button */

.button{
  position: relative;
  padding: 0.8em 1em;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.4rem;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
}

.button.button-l{ font-size: var(--kiyota-fs-l);}
.button.button-s{ font-size: var(--kiyota-fs-s);}
.button.button-xs{ font-size: var(--kiyota-fs-xs);}

.button.button-gray3{ color: var(--kiyota-black); background-color:var(--kiyota-gray-3); border: solid 0.1rem var(--kiyota-black);}
.button.button-white{ color: var(--kiyota-black); background-color: #fff; border: solid 0.1rem var(--kiyota-black);}
.button.button-black{ color: #fff; background-color: var(--kiyota-black); border: solid 0.1rem var(--kiyota-black);}
.button.button-red{ color: #fff; background-color: var(--kiyota-red); border: solid 0.1rem var(--kiyota-red);}
.button.button-white-red{ color: var(--kiyota-black); background-color: #fff; border: solid 0.1rem var(--kiyota-red);}

.button .svg-icon{
  width: 2.4rem;
  height: 2.4rem;
  display: block;
  fill: var(--kiyota-black);
  aspect-ratio: 1 / 1;
}

.button .svg-icon.size-l{ width: 2.8rem; height: 2.8rem;}
.button .svg-icon.red{ fill: var(--kiyota-red);}

.arrow{ position: relative; display: inline-block;}
.arrow-block{ width: 100%; display: block;}

.arrow::before{
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 1.6rem;
  height: 1.6rem;
  display: block;
  background: url(/kiyota/common/img/icon_arrow.svg) no-repeat;
  background-size: contain;
  content: "";
}

.arrow.size-s::before{
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 1.2rem;
  height: 1.2rem;
  display: block;
  background: url(/kiyota/common/img/icon_arrow.svg) no-repeat;
  background-size: contain;
  content: "";
}


.arrow-white::before{ background: url(/kiyota/common/img/icon_arrow_white.svg) no-repeat;}

.arrow-left{ padding-left: 1.4em;}
.arrow-right{ padding-right: 1.4em;}

.arrow-left::before{ left: 0;}
.arrow-right::before{ right: 0;}

.arrow-left.left-way::before{ transform: scale(-1, 1);}


.button.mail{ position: relative; padding-left: 2.2em;}

.button.mail::before{
  position: absolute;
  top: 0;
  left: 1em;
  bottom: 0;
  margin: auto;
  width: 2.4rem;
  height: 2.4rem;
  display: block;
  background: url(/kiyota/common/img/icon_mail.svg) no-repeat;
  background-size: contain;
  content: "";
}

.button.mail.size-l::before{ width: 3.4rem; height: 3.4rem;}


/* flex */

.flex-box{ display: flex; flex-wrap: wrap;}
.flex-box.align-center{ align-items: center;}
.flex-box.align-flex-start{ align-items: flex-start;}
.flex-box.justify-space-between{ justify-content: space-between;}
.flex-box.justify-center{ justify-content: center;}
.flex-box.justify-flex-end{ justify-content:flex-end;}

.flex-box.direction-column{ flex-direction: column;}
.flex-box.gap-05{ gap: 0.5rem;}
.flex-box.gap-1{ gap: 1rem;}



/*** IMAGE ASPECT-RATIO ***/

.aspect-1-1 { aspect-ratio: 1 / 1;}
.aspect-1-2 { aspect-ratio: 1 / 2;}
.aspect-2-1 { aspect-ratio: 2 / 1;}
.aspect-3-1 { aspect-ratio: 3 / 1;}
.aspect-3-2 { aspect-ratio: 3 / 2;}
.aspect-6-4 { aspect-ratio: 3 / 2;}
.aspect-4-3 { aspect-ratio: 4 / 3;}
.aspect-9-16 { aspect-ratio: 9 / 16;}
.aspect-16-9 { aspect-ratio: 16 / 9;}


.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;}