@charset "UTF-8";

/* --------------------------------------------------------共通------------ */
.main {
  width: 1024px;
  height: auto;
  margin: 0 auto;
}

.h2-height {
  margin-top: 50px;
}

.main h2 {
  margin: 50px auto 15px;
  padding-left: 20px;
  border-left: 10px solid #87cefa;
  border-bottom: 1px solid #797e81;
}

.package {
  display: flex;
}

.package .text {
  margin: auto;
}

.point-blk {
  display: flex;
  justify-content: center;
}

.pointbox {
  width: 30%;
  height: 420px;
  position: relative;
  margin: 20px 10px 0;
  padding: 0.5em 1em;
  border: solid 3px #95ccff;
  border-radius: 8px;
}

.pointbox .pointbox-title {
  position: absolute;
  display: inline-block;
  top: -13px;
  left: 10px;
  padding: 0 9px;
  line-height: 1;
  font-size: 19px;
  background: #FFF;
  color: #95ccff;
  font-weight: bold;
}

.pointbox-title {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
}

.pointbox h3 {
  font-weight: bold;
  text-align: center;
}

.pointbox h3::after {
  display: block;
  content: '';
  width: 150px;
  height: 2px;
  margin: 0 auto 10px;
  background: #95ccff;
}

.software {
  text-indent: 30px;
}

.yazirusi {
  margin: 10px 0;
  color: black;
  text-align: center;
  font-size: 5rem;
}

@media screen and (max-width:769px) {
  .main h2{
    margin: 3rem auto;
    padding-left:10px;
  }

  .package {
    display: flex;
    flex-direction: column;
  }

  .point-blk {
    display: flex;
    flex-direction: column;
  }

  .pointbox {
    width: 100vw;
    height: 420px;
    margin: 20px 10px 0;
    padding: 0.5em 1em;
    border: solid 3px #95ccff;
    border-radius: 8px;
  }

  .yazirusi {
    margin: 5px 0;
  }

  .text br:nth-child(2){
    display: none;
  }

  .text{
    padding: 10px;
  }

  .software {
    text-indent: 10px;
  }

}

/* --------------------------------------------------------SkyShade---------- */
#sky-home {
  width: 100%;
  height: 600px;
  position: relative;
  background: url(../img/product/SkyShade01.jpg) no-repeat center center;
  background-size: cover;
  padding: 60px 0 0;
}

#sky-home h2 {
  position: absolute;
  color: white;
  top: 100px;
  left: 60px;
  font-size: 1.5rem;
}

#sky-home h1 {
  font-family: 'Playfair Display', serif;
  position: absolute;
  color: white;
  top: 140px;
  left: 60px;
  font-size: 5rem;
}

#SkyShade {
  display: flex;
  justify-content: center;
}

#SkyShade .bxslider {
  width: 600px;
}

#SkyShade .bxslider li img {
  width: 100%;
  object-fit: cover;
}

#SkyShade .slick-next:before
{
    content: '';
  }

#SkyShade .slick-prev:before
{
    content: '';
}

#SkyShade2 .text {
  display: flex;
  justify-content: center;
  margin: 20px auto 50px;
}

@media screen and (max-width:769px) {
  #sky-home {
    width: 100%;
    height: 600px;
    background: url(../img/product/SkyShade01.jpg) no-repeat center center;
    background-size: cover;
    padding: 60px 0 0;
  }

  #sky-home h2{
    top: 30px;
    left: 30px;
  }

  #sky-home h1{
    top: 70px;
    left: 30px;
  }

  .package .text br:first-child{
    display: none;
  }
}

/* ------------------------------------------------SomeNoCover(SNC)---------- */
#snc-home {
  width: 100%;
  height: 600px;
  position: relative;
  background: url(../img/product/SomeNoCover01.jpg) no-repeat center center;
  background-size: cover;
  padding: 60px 0 0;
}

#snc-home h2 {
  position: absolute;
  color: white;
  top: 100px;
  left: 60px;
  font-size: 2.5rem;
}

#snc .h2-height br:first-child{
  display: none;
}

#snc-home h1 img {
  position: absolute;
  width: 20%;
  top: 200px;
  left: 100px;
}

#snc-photo img {
  width: 40%;
  margin: 0 30px;
  border: 1px solid #797e81;
  border-radius: 10px;
}

@media screen and (max-width:769px) {
  #snc-home {
    width: 100%;
    height: 500px;
    background-position: center left -460px;
    padding: 60px 0 0;
  }

  #snc-home h1 img {
    position: absolute;
    width: 35%;
    top: 60px;
    left: 20px;
  }

  #snc-home h2 {
    position: absolute;
    color: white;
    top: 10px;
    left: 30px;
    font-size: 2rem;
  }

  #snc{
    width: 100vw;
  }

  #snc .h2-height br:first-child{
    display: block;
  }

  #snc .pointbox{
    width: 90vw;
    height: auto;
    margin: 15px auto;
    padding: 10px 10px 20px;
  }

  #snc .pointbox:last-child{
    margin: 15px auto 5px;
  }

  #snc-photo{
    width: 100%;
  }

  #snc-photo img{
    width: 80%;
  }

}

/* ---------------------------------------------SammerColor(夏の色)---------- */
#scolor-home {
  width: 100%;
  height: 300px;
  position: relative;
  background: url(../img/product/SammerColor01.jpg) no-repeat;
  background-position: bottom -150px right;
  background-size: cover;
  padding: 60px 0 0;
}

#scolor-home h2 {
  position: absolute;
  color: white;
  top: 100px;
  left: 250px;
  font-size: 1.6rem;
}

#scolor-home h1 {
  font-family: 'Playfair Display', serif;
  position: absolute;
  color: white;
  top: 170px;
  left: 250px;
  font-size: 8rem;
}

#scolor1,#scolor-blk,.scolor-middle{
  display: flex;
}

#scolor1 img {
  width: 30%;
  margin: 0 2px;
}

#scolor1 .text, #scolor2 .text, #scolor3 .text {
  margin: auto;
}

#scolor2, #scolor3 {
  width: 500px;
}

#scolor2 {
  margin-right: 10px;
}

#scolor3 {
  margin-left: 25px;
}

#scolor2 img, #scolor3 img {
  width: auto;
  height: 220px;
}

@media screen and (max-width:769px) {
  #scolor-home {
    width: 100vw;
    height: 500px;
    background-position: center right -100px;
    padding: 60px 0 0;
  }

  #scolor-home h2,#scolor-home h1{
    writing-mode:vertical-rl;
  }

  #scolor-home h1 {
    top: 50px;
    left: 40px;
    font-size: 5rem;
  }

  #scolor-home h2 {
    top: 50px;
    left: 80px;
    font-size: 1.6rem;
  }

  #scolor2,#scolor3{
    width: 100vw;
  }

  #scolor1 img,.scolor-middle img{
    width: 80%;
    margin: 5px auto;
  }

  #scolor1,#scolor-blk,.scolor-middle {
    flex-direction: column;
  }

  #scolor3{
    margin-left: 0;
  }
}


/* --------------------------------------Hollow Cutting Board(HCB)---------- */
#hcb-home {
  width: 100%;
  height: 600px;
  position: relative;
  background: url(../img/product/HCB01.jpg)no-repeat center center;
  background-size: cover;
  padding: 60px 0 0;
}

#hcb-home h1 {
  text-align: right;
  margin: 20px 60px auto;
  font-size: 7rem;
  color: black;
  text-shadow:
    0 0 0.5px white, 0 0 0.5px white,
    0 0 0.5px white, 0 0 0.5px white,
    0 0 0.5px white, 0 0 0.5px white,
    0 0 0.5px white, 0 0 0.5px white,
    0 0 0.5px white, 0 0 0.5px white,
    0 0 0.5px white, 0 0 0.5px white,
    0 0 0.5px white, 0 0 0.5px white,
    0 0 0.5px white, 0 0 0.5px white;
}

#hcb-home .color-brown {
  color: #5c3e26;
}

.hcb-middle h2 {
  border-left: 10px solid #C5956B;
}

#hcb-point {
  width: 100%;
  display: flex;
}

#hcb1 img {
  width: 80%;
  margin-top: 30px;
}

#hcb-point div {
  text-align: center;
}

#UDsign7 .pointbox {
  width: 50%;
  height: auto;
  border-color: #C5956B;
  margin: 50px auto 0;
}

#UDsign7 .pointbox-title {
  color: #C5956B;
}

#UDsign7 .pointbox h3::after {
  background-color: #C5956B;
}

#hcb2, #hcb3 {
  display: flex;
}

#hcb2 img, #hcb3 img {
  width: 50%;
  height: auto;
}

#hcb2 .text, #hcb3 .text {
  width: 40%;
  margin: 0 auto;
}

#hcb2 .pointbox p, #hcb3 .pointbox p {
  text-align: center;
  font-weight: bold;
  border-bottom: 2px solid #C5956B;
}

#hcb2 p, #hcb2 ul, #hcb3 p, #hcb3 ul {
  padding-left: 20px;
}

#hcb2 ul li, #hcb3 ul li {
  list-style-type: disc;
}

#hcb2 .pointbox-title, #hcb3 .pointbox-title {
  color: #C5956B;
}

#hcb2 .pointbox, #hcb3 .pointbox {
  width: 90%;
  height: auto;
  border-color: #C5956B;
}

#hcb2 .pointbox h3::after {
  background-color: #C5956B;
}

#hcb4 .software {
  display: flex;
}

#hcb4 img {
  width: 60%;
}

#hcb4 p {
  margin: auto auto 10px;
}

@media screen and (max-width:769px) {
  #hcb-home {
    width: 100%;
    height: 600px;
    position: relative;
    background: url(../img/product/HCB01.jpg)no-repeat bottom right 50%;
    background-size: cover;
    padding: 60px 0 0;
  }

  #hcb-home h1 {
    text-align: right;
    margin: -50px 30px auto;
    font-size: 6rem;
    line-height: 7rem;
    color: black;
    text-shadow:
      white 1px 0px, white -1px 0px,
      white 0px -1px, white 0px 1px,
      white 1px 1px, white -1px 1px,
      white 1px -1px, white -1px -1px,
      white 1px 1px, white -1px 1px,
      white 1px -1px, white -1px -1px,
      white 1px 1px, white -1px 1px,
      white 1px -1px, white -1px -1px;
  }

  #hcb1 {
    width: 100vw;
    display: flex;
    flex-direction: column;
  }

  #hcb-point img {
    width: 80%;
  }

  #hcb-point div {
    text-align: center;
  }

  #hcb-point p {
    font-size: 2.5rem;
    margin: 0 auto 20px;
  }

  #UDsign7 .pointbox {
    width: 80%;
    margin: 0 auto;
  }

  #hcb-point {
    flex-direction: column;
  }

  #hcb2, #hcb3 {
    width: 100vw;
    flex-direction: column;
  }

  #hcb2 img, #hcb3 img {
    width: 80%;
    margin: 0 auto;
  }

  #hcb2 .text, #hcb3 .text {
    width: 90%;
    margin: 0 auto 0;
  }

  #hcb2 .text p, #hcb3 .text p {
    padding-left: 0;
  }

  #hcb2 .pointbox, #hcb3 .pointbox {
    width: 90%;
    margin: 20px auto 0;
  }

  #hcb4 {
    width: 100vw;
  }

  #hcb4 img {
    width: 80%;
    margin: 0 auto;
  }

  #hcb4 .software {
    display: flex;
    flex-direction: column;
  }

  #hcb4 p {
    margin-top: 10px;
    font-size: 1.5rem;
    text-indent: 0;
  }
}

/* ---------------------------------------------karen(可憐)---------- */
#karen-home {
  width: 100%;
  height: 700px;
  position: relative;
  background: url(../img/product/karen01.jpg) no-repeat center center;
  background-size: cover;
  padding: 60px 0 0;
}

#karen-home img {
  position: absolute;
  top: 120px;
  left: 80px;
}

#karen1 {
  display: flex;
  justify-content: center;
  margin: 40px 0;
}

#karen1 img {
  width: 30%;
  border: 1px solid black;
  margin-right: 50px;
}

#karen1 .h2-height {
  margin-top: 0;
}

#karen1 .h2-height br {
  display: none;
}

#karen1 .text {
  margin-left: 50px;
}

#karen1 p {
  padding-top: 10px;
  padding-left: 30px;
}

#stepup {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

#stepup img {
  width: 30%;
}

#tutumi .bxslider img {
  width: 70%;
  height: auto;
}

#tutumi .text {
  display: flex;
  justify-content: center;
  margin-top: 80px;
}

#tutumi .slick-next:before
{
    content: '';
  }

#tutumi .slick-prev:before
{
    content: '';
}

#tutumi #howto{
  display: none;
}

#karen2 .hes-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 15px;
  padding: 15px;
  columns: 3;
}

#karen2 .hes-gallery img {
  width: 100%;
  object-fit: cover;
  transition: 0.3s;
  cursor: pointer;
  border: 1px solid #797e81;
}

#karen2 .pointbox {
  height: auto;
  margin-left: 20px;
  margin-right: 20px;
}

#karen2 .pointbox:last-child {
  width: 50%;
}

#karen-package .text {
  display: flex;
  justify-content: center;
}

#karen-package p {
  margin-left: 10px;
  margin-top: 30px;
}

#karen-package img {
  width: 40%;
  margin-right: 10px;
}

#award p {
  text-indent: 30px;
}

#award a {
  font-family: 'Noto Serif JP', serif;
  font-size: 1.2rem;
}

@media screen and (max-width:769px) {
  .main, #karen2, #karen-package, #award {
    width: 100vw;
  }

  #karen1,#stepup,#karen-package .text{
    flex-direction: column;
  }

  #karen-home {
    background-position: center right -300px;
    padding: 60px 0 0;
  }

  #karen-home img {
    width: 60%;
    top: 25px;
    left: 20px;
    /* 見本:filter: drop-shadow ( x軸 y軸 シャドウの長さ 色 ); */
    filter: drop-shadow(4px 4px 6px rgba(0,0,0,.5));
  }

  #karen1 img{
    display: none;
  }

  #karen1 .h2-height br {
    display: block;
  }

  #karen1 .text{
    margin-left: 0;
  }

  #karen1 .text p{
  padding-left: 15px;
  padding-right: 15px;
  }

  #karen2 .pointbox {
    width: 80%;
    height: auto;
  }

  #karen2 .pointbox:last-child {
    width: 80%;
    height: auto;
    margin-top: 50px;
  }

  #stepup img{
    margin: 10px auto;
    width: 80%;
  }

  #tutumi .bxslider {
    display: none;
  }

  #tutumi #howto{
    display: block;
    text-align: center;
  }

  #tutumi #howto img{
    width: 100%;
  }

  #tutumi .text {
    padding-left: 20px;
    padding-right: 20px;
  }

  #karen-package .text img {
    width: 80%;
    margin: 0 auto;
  }

  #karen-package .text p {
    font-size: 1.5rem;
    margin: 20px auto 0;
    padding-left: 20px;
    padding-right: 20px;
  }

  #award p {
    text-indent: 15px;
  }
}