@charset "UTF-8";
h2{
  margin-bottom: 32px;

  color: var(--tc);
  font-size: 38px;
  font-weight: 700;
  text-align: center;
}
section{
  width: min(1120px,100%);
  padding: 80px 16px;
  margin-inline: auto;
}
/**/
/*--hero--*/
/**/
#hero{
  width: 100%;
  margin-bottom: 80px;
}
#hero img{
  width: 100%;
  max-width: auto;
}
/**/
/*--GAINA--*/
/**/
#GAINA{
  width: min(1110px,100%);
  padding: 0 16px;
  margin-inline: auto;
  margin-bottom: 96px;
}
#GAINA .gaina-inner{
  padding-bottom: 72px;

  border: solid 2px var(--tc);
}
#GAINA .gaina-inner>img{
  display: block;
}
#GAINA p.heading{
  margin-bottom: 40px;

  color: var(--tc);
  font-size: 30px;
  font-weight: 700;
  text-align: center;

  line-height: 1.4;
}
#GAINA .content{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 0 clamp(16px, 5vw,96px);
  margin-bottom: 64px;

  line-height: 1.6;
}
#GAINA .btn{
  display: inline-block;
  margin-inline: auto;
  min-width: 80px;
  font-size: 16px;
  padding: 12px 1.1em;
  
  color: #fff;
  text-align: center;
  
  user-select: none;
  cursor: pointer;
  
  transition: all 0.3s;
  
  background: var(--tc);
  border: solid 2px var(--tc);
  border-radius: 4px;
}
/**/
/*--intro--*/
/**/
#intro{
  position: relative;

  padding: 72px 16px 240px;
}
#intro p.heading{
  margin-bottom: 56px;

  color: var(--tc);
  font-size: 24px;
  font-weight: 700;
  text-align: center;
}
#intro .intro-itemContainer{
  width: min(1120px,100%);
  margin-inline: auto;
}
#intro .intro-item{
  position: relative;
}
#intro .intro-itemContainer .intro-item:nth-child(2){
  margin-top: 120px;
}
#intro .img-wrap{
  display: block;
  width: 60%;
  margin-right: auto;
}
#intro .intro-itemContainer .intro-item:nth-child(2) .img-wrap{
  margin-top: 120px;

  margin-left: auto;
  margin-right: 0;
}
#intro .intro-item img{
  width: 100%;
}
#intro .textContent{
  position: absolute;
  right: 0;
  top: 32px;

  display: inline-block;
  width: 40%;
  padding: 32px;

  background: #EFF9FF;
  border-top: solid 5px #D6F0FF;
}
#intro .intro-itemContainer .intro-item:nth-child(2) .textContent{
  right: auto;
  left: 0;
}
#intro .textContent .title{
  color: var(--tc);
  font-size: 28px;
  font-weight: 700;
}
img#img-aboutus{
  position: absolute;
  z-index: -1;
  left: 20vw;
  bottom:64px;
}

/**/
/*--works--*/
/**/
section#works{
  width: 100%;

  background-image: url(../img/index/works-bg.jpg);
  background-size: cover;
}
section#works h2{
  color: #fff;
}
div.works-itemContainer{
  display: grid;
  grid-template-columns: repeat(2,1fr);
  column-gap: 24px;
  row-gap: 64px;

  width: min(1120px,100%);
  margin-inline: auto;
  margin-bottom: 40px;
}
a.works-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
}
a.works-item img{
  margin-bottom: 8px;
}
section#works .desc{
  width: min(1120px,100%);
  padding: 16px 0;
  margin-inline: auto;

  color: #fff;
  font-size: 24px;
  font-weight: 700;
  text-align: center;

  border: solid 1px #fff;
}
/**/
/*--items--*/
/**/
div.product-itemContainer{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  column-gap: 24px;
}
a.product-item{
  position: relative;
  z-index: 1;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  width: 100%;
  aspect-ratio: 1/1;

  color: var(--tc);
  font-size: 26px;
  font-weight: 700;

  border: solid 2px var(--tc);
  box-shadow: #0028791f 0px 2px 8px 0px;
}
a.product-item::before{
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;

  display: inline-block;
  width: 52px;
  height: 52px;

  background: var(--tc);
  clip-path: polygon(100% 0, 0% 100%, 100% 100%);
}
a.product-item .icon{
  height: 40%;
  max-height: 40%;
  margin-bottom: 16px;
}
a.product-item .icon img{
  height: 100%;
}
/**/
/*--flow--*/
/**/
ul.flow-itemContainer>*+*{
  margin-block-start: 32px;
}
li.flow-item>.title{
  position: relative;

  padding: 4px 0;
  padding-left: 120px;
  margin-bottom: 8px;

  color: var(--tc);
  font-size: 25px;
  font-weight: 700;
  
  background: #CEDCF7;

  overflow: hidden;
}
li.flow-item>.title::before{
  content: attr(data-number);
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);

  color: #FFFFFF;
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
}
li.flow-item ul li{
  padding-bottom: 16px;
}
li.flow-item ul>*+*{
  padding-top: 16px;
  
  border-top: solid 1px #DEDEDE;
}
li.flow-item ul li .title{
  font-size: 18px;
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
  font-weight: 700;
  line-height: 1.6;
}
/**/
/*--FAQ--*/
/**/
ul.faq-itemContainer>*+*{
  margin-block-start: 32px;
}
li.faq-item{
  box-shadow: #0028791f 0px 2px 8px 0px;
}
li.faq-item label{
  position: relative;

  display: grid;
  grid-template-columns: 48px 1fr;
  column-gap: 16px;
  align-items: center;

  width: 100%;
  padding: 20px 24px;
  padding-right: 64px;

  border-style: solid;
  border-color: var(--tc);
  border-width: 1px 1px 0px 1px;
}
li.faq-item .icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 48px;
  height: 48px;

  color: #fff;
  font-size: 24px;
  font-weight: 700;

  background: var(--tc);
  border-radius: 50%;
  border: solid 2px var(--tc);
}
li.faq-item .content-wrap .icon{
  color: var(--tc);
  background: #fff;
}
li.faq-item label .title{
  color: var(--tc);
  font-size: 22px;
  font-weight: 700;
}
li.faq-item label .arrow{
  position: absolute;
  top: 50%;
  right: 16px;

  transform: translateY(-50%);
  transition: 0.3s all linear;
}
li.faq-item:has(input[type="checkbox"]:checked) .arrow{
  transform: translateY(-50%)rotate(180deg);
  transition: 0.3s all linear;
}
li.faq-item input[type="checkbox"]{
  display: none;
}
li.faq-item .content-wrap{
  display: grid; 
  grid-template-rows: 0fr;
  transition: 0.3s all linear;

  border-style: solid;
  border-color: var(--tc);
  border-width: 0px 1px 1px 1px;
}
li.faq-item:has(input[type="checkbox"]:checked) .content-wrap{
  grid-template-rows: 1fr;
  transition: 0.3s all linear;
}
li.faq-item .content-wrap>div{
  overflow: hidden;
}
li.faq-item .content-wrap .content{
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 16px;
  width: 100%;
  padding: 20px 24px;
  padding-right: 64px;
}
@media (min-width : 1200px){
  a.works-item,
  a.works-item:hover,
  a.product-item,
  a.product-item:hover{
    transition: 0.3s all linear;
  }
  a.works-item:hover,
  a.product-item:hover{
    opacity: 0.8;
  }
}
@media (max-width : 1200px){
  #intro{
    overflow-x: hidden;
  }

  /**/
  /*--GAINA--*/
  /**/
  #GAINA .content{
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width : 599px){
  #GAINA .content{
    display: grid;
    grid-template-columns: 1fr;
  }
  /**/
  /*--intro--*/
  /**/
  #intro{
    position: relative;
  
    padding: 72px 16px 240px;
  }
  #intro p.heading{
    margin-bottom: 56px;
  
    font-size: min(4vw,24px);
    font-weight: 700;
    text-align: center;
  }
  #intro .intro-item{
    position: relative;
    display: flex;
    flex-direction: column;
  }
  #intro .intro-itemContainer .intro-item:nth-child(2){
    margin-top: 0;
  }
  #intro .img-wrap{
    display: block;
    width: 100%;
    margin-right: auto;
  }
  #intro .intro-itemContainer .intro-item:nth-child(2) .img-wrap{
    margin-top: 32px;
  
    margin-left: auto;
    margin-right: auto;
  }
  #intro .textContent{
    position: static;
    right: auto;
    top: auto;

    width: 100%;
    padding: 32px 8px;
  }
  #intro .textContent .title{
    font-size: min(5.5vw,28px);
  }
  img#img-aboutus{
    position: absolute;
    z-index: -1;
    left: 50%;
    transform: translateX(-50%);
    bottom:64px;
  }
  /**/
  /*--works--*/
  /**/
  div.works-itemContainer{
    column-gap: 8px;
    row-gap: 16px;
  }
  a.works-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    
    color: #fff;
    font-size: min(4vw,24px);
    font-weight: 700;
    text-align: center;
  }
  section#works .desc{
    padding: 8px;
  
    font-size: min(4vw,24px);
  }
  /**/
  /*--items--*/
  /**/
  div.product-itemContainer{
    column-gap: 8px;
  }
  a.product-item{
    font-size: min(3.2vw,26px);
  }
  a.product-item::before{
    width: 16px;
    height: 16px;
  }
  a.product-item .icon{
    height: 33.5%;
    max-height: 33.5%;
    margin-bottom: 8px;
  }
  /**/
  /*--flow--*/
  /**/
  li.flow-item>.title{
    padding-left: min(25vw,120px);
  
    font-size: min(5.8vw,25px);
  }
  li.flow-item>.title::before{
    font-size: min(10vw,56px);
  }
}