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



@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;
  justify-content: center;
}

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

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

}/* 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;
}


@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);}

}/* End max 767 */





.index-menu{
  margin: auto;
  padding: 2em 0;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.index-menu li{
  margin: 0;
  padding: 0;
  width: calc(100% / 3 - 2rem);
}

.index-menu .category{
  margin: 0;
  padding: 0;
  width: 100%;
  display: block;
  aspect-ratio: 306 / 102;
}





.index-menu p{
  padding: 1em 0 0;
  line-height: var(--kiyota-lh-l);
}

.head-navi{ position: relative;}

.head-navi .link-dl{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  padding: 0 0 0 1rem;
  width: 15em;
  display: flex;
  align-items: center;
  background: url(/kiyota/common/img/icon_arrow_black.svg) left center no-repeat;
  background-size: 0.8rem;
  text-decoration: none;
}

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

.head-navi .link-dl{
  right: inherit;
  margin: auto 0;
}

}/* End max 910 */

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

.index-menu{
  padding: 0 1em 2em;
  max-width: 48rem;
  flex-direction: column;
  align-items: center;
}

.index-menu li{
  margin: 0;
  padding: 0;
  width: 100%;
}

.index-menu p{ display: none;}

.index-menu .category{ aspect-ratio: 480 / 167;}


.head-navi{
  position: relative;
  display: flex;
  flex-direction: column;
}

.head-navi .link-dl{
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  padding: 0 0 0 1rem;
  width: 15em;
  display: flex;
  align-items: center;
  background: url(/kiyota/common/img/icon_arrow_black.svg) left center no-repeat;
  background-size: 0.8rem;
  text-decoration: none;
}

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

}/* End max 767 */

















/*** 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;}