@charset "utf-8";

/** ***************************************************************************
 * ビジュアル
 * ************************************************************************* */

#visual {
  height: 480px;
  background: url("../_image/index/visual-sp.jpg") center top / cover no-repeat;
}

@media screen and (min-width:768px) {

  #visual {
    height: 520px;
    background-image: url("../_image/index/visual-pc.jpg");
  }

}

/**
 * 内容
 */

#visual div.content {
  padding: 40px 20px;
}

@media screen and (min-width:768px) {

  #visual div.content {
    max-width: 1060px;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
  }

}

/* 下層ビジュアル */
#visual-kasou {
  height: 120px;
  background: url("../_image/index/kasou-visual-sp.jpg") center top / cover no-repeat;
}

@media screen and (min-width:768px) {

  #visual-kasou {
    height: 200px;
    background-image: url("../_image/index/kasou-visual-pc.jpg");
  }

}



/* キャッチコピー */

#visual .catchcopy {
  letter-spacing: 1px;
  font-size: 23px;/*18px*/
  font-weight: 700;
}

@media screen and (min-width:768px) {

  #visual .catchcopy {
    line-height: 1.57;
    font-size: 35px;
  }

}

/* 和文 */

#visual .text-1 {
  margin-top: 5px;
  font-size: 12px;/*9px*/
  font-weight: 500;
}

@media screen and (min-width:768px) {

  #visual .text-1 {
    margin-top: 15px;
    font-size: 17px;
  }

}

/* 英文 */

#visual .text-2 {
  margin-top: 5px;
  color: #99715c;
  font-size: 11px;/*8px*/
  font-weight: 500;
}

@media screen and (min-width:768px) {

  #visual .text-2 {
    margin-top: 15px;
    font-size: 15px;
  }

}

/** ***************************************************************************
 * 企業理念
 * ************************************************************************* */

/**
 * 内容
 */

#philosophy div.content {
  text-align: center;
}

#philosophy div.content .catchcopy {
  font-family: 'Noto Serif JP', serif;
  font-size: 1.5625em;
  font-weight: 600;
}

/** ***************************************************************************
 * 会社概要
 * ************************************************************************* */

#overview {
  padding-top: 30px;
  padding-bottom: 30px;
  overflow: hidden;
  position: relative;
  z-index: 0;
}

#overview::after {
  content: '';
  width: 100vw;
  height: 100%;
  background-color: #f9f7f6;
  position: absolute;
  z-index: -1;
  top: 0;
  left: calc(50% - 50vw);
}

@media screen and (min-width:768px) {

  #overview {
    padding-top: 45px;
    padding-bottom: 45px;
  }

}

/**
 * 会社概要
 */

#overview div.overview {
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (min-width:768px) {

  #overview div.overview {
    max-width: 600px;
  }

}

/** ***************************************************************************
 * 生産工場の様子
 * ************************************************************************* */

#factory {
  overflow: hidden;
}
/**
 * ギャラリー
 */

#factory div.gallery {
  max-width: none;
  width: 100vw;
  position: relative;
  z-index: 0;
  left: calc(50% - 50vw);
  display: flex;
  align-items: flex-start;
  justify-content: center;
}


#factory div.gallery img {
  width: calc(100% / 3 + 10px);
}

#factory div.gallery img:nth-child(3n+1) {
  margin-top: 10px;
}

#factory div.gallery img:nth-child(3n+2) {
  margin-top: 20px;
  margin-left: -10px;
}


@media screen and (min-width:1200px) {
#factory div.gallery {
	padding:0 20%;/*工場の写真の左右を空きをなくす*/
}
}

#factory div.gallery img:nth-child(3n+3) {
  margin-left: -10px;
}

@media screen and (min-width:768px) {

	
  #factory div.gallery img {
    width: calc(100% / 3 + 20px);
  }

  #factory div.gallery img:nth-child(3n+1) {
    margin-top: 40px;
  }

  #factory div.gallery img:nth-child(3n+2) {
    margin-top: 100px;
    margin-left: 40px;/*026.2.26 -20px*/
  }

  #factory div.gallery img:nth-child(3n+3) {
	margin-top: 40px;/*026.2.26 0px*/
    margin-left: 40px;/*026.2.26 -20px*/
  }

}


/** ***************************************************************************
 * 主な取扱商品
 * ************************************************************************* */

/**
 * 取扱商品
 */

#product div.product ul.list li {
  padding-left: 20%;
  padding-right: 20%;
  font-size: 1.25em;
  text-align: center;
}

#product div.product ul.list li ~ li {
  margin-top: 30px;
}

#product div.product ul.list li img {
  margin-bottom: 5px;
}

@media screen and (min-width:768px) {

  #product div.product ul.list {
    margin-top: 30px;/*026.2.26*/
	margin-bottom: -20px;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-start;
  }

  #product div.product ul.list li {
    width: calc(100% / 3);/*取扱商品を6つ→3つ2段*/
    padding-left: 60px;/*5px*/
    padding-right: 60px;/*5px*/
    margin-bottom: 30px;/*20px*/
    font-size: 0.95em;/*0.75em*/
    text-align: center;
  }

  #product div.product ul.list li ~ li {
    margin-top: 0;
  }

}