/* body */
body {
  background-color: #000; }

article {
  color: #fff; }

article:first-of-type {
  background-image: url(../img/tsubaki_about_back02.jpg);
  background-position: center center;
  background-size: 1400px;
  padding: 0 20px 60px 20px; }
  @media screen and (max-width: 640px) {
    article:first-of-type {
      background-size: 1000px;
      background-position: center right; } }

/* header */
header {
  height: 50vh;
  min-height: 427px; }

header h1 {
  width: 44%;
  max-width: 249px;
  position: absolute;
  top: 15%;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto; }

header img {
  display: block;
  width: 100%; }

/* slider */
#slider {
  max-width: 1000px;
  margin: 120px auto 0;
  position: relative; }

@media screen and (max-width: 1000px) {
  #slider {
    max-width: 680px; } }

.slider {
  padding-left: 709px;
  position: relative; }

@media screen and (max-width: 1000px) {
  .slider {
    display: none; } }

.slider img {
  display: block;
  width: 100%; }

.slider ul {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0 0 -34px -29px; }

.slider li {
  width: 50%;
  padding: 0 0 34px 29px; }

.slider li img:first-child {
  width: 68%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0; }

.slider li img:last-child {
  opacity: .5;
  cursor: pointer;
  -webkit-transition: .2s;
  transition: .2s; }

.slider li img:hover:last-child {
  opacity: 1; }

.flexslider {
  display: none;
  width: 100%;
  max-width: 680px; }

@media screen and (max-width: 1000px) {
  .flexslider {
    display: block; } }

.flex-prev,
.flex-next {
  background-size: contain;
  width: 25px !important;
  height: 0 !important;
  padding-top: 25px;
  overflow: hidden !important; }

.flex-prev {
  background-image: url(../img/ico_slider_prev.png); }

.flex-next {
  background-image: url(../img/ico_slider_next.png); }

@media screen and (max-width: 1000px) {
  .flex-viewport {
    overflow: hidden; } }