@charset "UTF-8";
/* CSS Document */

/*------------------------------------------------
Overview
------------------------------------------------*/
#overview_block {
  width: 1000px;
  margin: 100px auto 50px auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
#overview_block .image {
  width: 360px;
  height: 430px;
  display: block;
}
#overview_block .image img {
  width: 100%;
}
#overview_block .copyblock {
  width: 600px;
}
#overview_block .copyblock h1 {
  font-size: 44px;
  line-height: 46px;
  font-weight: 100;
  margin: 0 0 40px 0;
  letter-spacing: 0.15rem;
}
#overview_block .copyblock h1.ac {
  font-size: 44px;
  line-height: 44px;
  font-weight: 100;
  margin: 28px 0 43px 0;
  letter-spacing: 0.15rem;
}
#overview_block .copyblock .catch {
  font-size: 18px;
  font-weight: 400;
  padding-bottom: 15px;
}

#overview_block .copyblock .btnblock {
  width: 100%;
  margin: 75px 0 0 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 0;
}
#overview_block .copyblock .btnblock li {
  width: 260px;
  border: solid 1px #afafaf;
  padding: 15px 0 15px 25px;
  font-size: 18px;
  background-repeat: no-repeat;
  background-image: url(../image/arrow_btn.png);
  background-position: 245px center;
  list-style-type: none;
  display: block;
  vertical-align: middle;
  background-size: 14px 23px;
}
#overview_block .copyblock .btnblock li a {
  color: #000;
  display: block;
  text-decoration: none;
}
#overview_block .copyblock .btnblock li a:hover {
  color: #000;
  opacity: 0.3;
}

/*------------------------------------------------
topics title
------------------------------------------------*/
#colors h3 {
  font-weight: 400;
  line-height: 19px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  display: block;
  padding: 5px 15px;
  margin-top: 20px;
  border: solid 1px #000;
}

/*------------------------------------------------
Feature
------------------------------------------------*/
#feature {
  /* width: 1060px; */
  margin: 0 auto 60px auto;
}

#feature span {
  font-weight: 700;
  display: block;
}

#feature p {
  margin: 0 0 20px 0;
}

#feature ul {
  width: 100%;
  margin: 20px auto 0 auto;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

#feature li {
  /* font-family: 'Oswald', sans-serif; */
  /* width: 185px; */
  width: calc(100% / 5 - 10px);
  list-style-type: none;
  margin: 5px 0;
  display: block;
}
#feature li img {
  width: 100%;
  margin: 0;
  padding: 0;
}
#feature li h4 {
  font-weight: 600;
  line-height: 15px;
  letter-spacing: 0.02em;
  font-size: 14px;
  display: block;
  margin: 10px 0 5px 0;
  padding: 0;
  font-weight: 700;
}
#feature li p {
  font-size: 12px;
  line-height: 15px;
  letter-spacing: 0.03em;
  font-weight: 500;
}
#feature li a {
  color: #000;
  display: block;
  text-decoration: none;
}
#feature li a:hover {
  opacity: 0.5;
}

/*------------------------------------------------
COLOURS
------------------------------------------------*/
#colour p {
  margin: 0 0 15px 0;
}
#original p {
  /* margin: 0 0 15px 0; */
  /* text-align: right; */
}
a.button {
  text-decoration: none;
}
.button {
  padding: 14px 22px;
  background-color: #cecece;
  color: #333333;
  border-radius: 3px;
  margin-bottom: 20px;
  display: inline-block;
}
.button:hover {
  background-color: #e1e1e1;
}
.thumbs {
  display: block;
}

#original,
#pastel,
#pearl,
#metallic,
#grayish,
#colourpearl,
#lame,
#japanesque,
#mixing,
#luminous,
#colour {
  /* width: 1000px; */
  margin: 0 auto;
}

/*------------------------------------------------
smart phone
------------------------------------------------*/
@media screen and (max-width: 767px) {
  #overview_block {
    width: 90%;
    margin: 80px auto 50px auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  #overview_block .image {
    width: 100%;
    height: auto;
    display: block;
  }
  #overview_block .image img {
    width: 100%;
  }
  #overview_block .copyblock {
    width: 100%;
  }
  #overview_block .copyblock h1 {
    font-size: 42px;
  }
  #overview_block .copyblock h1.ac {
    font-size: 42px;
  }
  #overview_block .copyblock .btnblock {
    margin: 30px 0 0 0;
    display: -webkit-box;
  }
  #overview_block .copyblock .btnblock li {
    width: 48%;
    border: solid 1px #afafaf;
    padding: 10px 0;
    font-size: 18px;
    text-align: center;
    background-repeat: no-repeat;
    background-image: url(../image/arrow_btn.png);
    background-position: 245px center;
    list-style-type: none;
    display: block;
    vertical-align: middle;
    background-size: 14px 23px;
  }

  /*------------------------------------------------
	Feature
	------------------------------------------------*/
  #feature {
    /* width: 90%; */
    margin: 0 auto 60px auto;
  }
  #feature ul {
    margin-top: 40px;
  }

  #feature li {
    width: 45%;
  }
  /*------------------------------------------------
	COLOURS
	------------------------------------------------*/
  #original,
  #pastel,
  #pearl,
  #metallic,
  #grayish,
  #colourpearl,
  #lame,
  #japanesque,
  #mixing,
  #luminous,
  #colour {
    width: 100%;
    margin: 0 auto;
  }
}