/**
 * YUI 3.5.0 - reset.css (http://developer.yahoo.com/yui/3/cssreset/)
 * http://cssreset.com
 * Copyright 2012 Yahoo! Inc. All rights reserved.
 * http://yuilibrary.com/license/
 */
/*
  TODO will need to remove settings on HTML since we can't namespace it.
  TODO with the prefix, should I group by selector or property for weight savings?
*/
html{
  color:#000;
  background:#FFF;
}
/*
  TODO remove settings on BODY since we can't namespace it.
*/
/*
  TODO test putting a class on HEAD.
    - Fails on FF.
*/
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td {
  margin:0;
  padding:0;
}
table {
  border-collapse:collapse;
  border-spacing:0;
}
fieldset,
img {
  border:0;
}
/*
  TODO think about hanlding inheritence differently, maybe letting IE6 fail a bit...
*/
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
  font-style:normal;
  font-weight:normal;
}

ol,
ul {
  list-style:none;
}

caption,
th {
  text-align:left;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size:100%;
  font-weight:normal;
}
q:before,
q:after {
  content:'';
}
abbr,
acronym {
  border:0;
  font-variant:normal;
}
/* to preserve line-height and selector appearance */
sup {
  vertical-align:text-top;
}
sub {
  vertical-align:text-bottom;
}
input,
textarea,
select {
  font-family:inherit;
  font-size:inherit;
  font-weight:inherit;
}
/*to enable resizing for IE*/
input,
textarea,
select {
  *font-size:100%;
}
/*because legend doesn't inherit in IE */
legend {
  color:#000;
}
/* YUI CSS Detection Stamp */
#yui3-css-stamp.cssreset { display: none; }

/* style.css */

/* -------------------- */
/* base
/* -------------------- */
body{
  font-family: 'Roboto', 'Noto Sans JP', sans-serif;
}
li{
  list-style:none;
}
a{
    text-decoration: none;
    color:#fff;
}
img{
  width:100%;
  vertical-align: bottom;
}



/* -------------------- */
/* header
/* -------------------- */
header {
  width: 100%; /* 幅いっぱいを指定 */
  height: 60px; /* 高さを50pxに指定 */
  background: rgb(58, 58, 58); /* 背景色にグレーを指定 */
  padding: 20px 20px; /* ヘッダーに上下左右それぞれ余白を指定 */
  box-sizing: border-box; /* padding分を含んで幅を100%にするため */
  position: fixed; /* ウィンドウを基準に画面に固定 */
  top: 0; /* 上下の固定位置を上から0pxにする */
  left: 0; /* 左右の固定位置を左から0pxにする */
  display: flex; /* 中の要素を横並びにする */
  align-items: center; /* 中の要素を上下中央に並べる */
  z-index: 99;
  float: left;
}

.header-nav .nav-list{
  /* navの横並び */
  display: flex;
  line-height:50px;
}

header .header-nav .nav-list li{
/* メニューそれぞれに間隔をあけるため */
    margin-left: 40px;
    text-align: center;
}

.nav-list {
  font: 20px ;
  font:bold ;
}

a{
  color:rgb(255, 255, 255);
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
}
a:visited{
  color:rgb(255, 255, 255);
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
}
a:hover {
  color: #f7f331;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
}





.burger-btn{
  display: none;
}

/* ------------------ */
/* fv
/* ------------------ */
.fv{
  height:90vh;
  background-color:#141414;
  background-image: url(../img/fv-bgi@2x.jpg);
  background-position: center;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

}
.main-copy{
   font-size: 50px;
   color: #fff;
   font-weight: bold;
   border:2px solid #fff;
   padding: 34px 42px;
}

/* ------------------ */
/* about
/* ------------------ */
.section-title{
  font-size: 36px;
  font-weight: bold;
  text-align: center;
  letter-spacing: 0.05em;
  margin-bottom: 70px;
}
h3{
  font-size: 2.4rem;
  font-weight: bold;
  line-height:2;
  letter-spacing: 0.1em;
  margin-bottom: 40px;
}
.section-wrapper{
  padding:100px 10% 50px; 
  
}




@media screen and (max-width:768px){
  /* ----------------------- */
  /* base_sp
  /* ----------------------- */
  

  /* ------------------ */
  /* humberger-menu */
  /* ------------------ */
  .header{
      padding: 0 5%;
  }
  .burger-btn{
      display: block;
      width: 39px;
      height: 39px;
      position: relative;
      z-index: 3;
  /*   codepenの挙動のため */
    background-color:transparent;
    border:none;
    }
    .bar{
      width: 20px;
      height: 1px;
      display: block;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      background-color: #fff;
    }
    .bar_top{
      top: 10px;
    }
    .bar_mid{
      top: 50%;
      transform: translate(-50%,-50%);
    }
    .bar_bottom{
      bottom: 10px;
    }
    .burger-btn.close .bar_top{
      transform: translate(-50%,10px) rotate(45deg);
      transition: transform .3s;
    }
    .burger-btn.close .bar_mid{
      opacity: 0;
      transition: opacity .3s;
    }
    .burger-btn.close .bar_bottom{
      transform: translate(-50%,-8px) rotate(-45deg);
      transition: transform .3s;
    }
    .nav-wrapper{
      display: none;
      width: 100vw;
      height: 100vh;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 2;/*キービジュアルと.btn_triggerとの重なりの前後関係を調整*/
     }
     .header-nav{
        width: 100%;
        height: 100%;
        background-color:rgb(58,58,58);
        z-index: 2;
      }
     .header-nav .nav-list{
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        text-align: center;
      }
      .header-nav .nav-item{
        margin-right: 0;
        margin-bottom: 40px;
      }
  
  /* ------------------ */
  /* fv */
  /* ------------------ */
  .main-copy{
    font-size: 30px;
  }
  
  /* ------------------ */
  /* about h3:大見出し h4:中見出し*/
  /* ------------------ */

h3 {
  font-size: 36px;/* IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(2.4rem + ((1vw - 0.64rem) * 2.1429));/* 24px~36pxで可変*/
  line-height: 1.3;
}
.section-wrapper{
  padding:50px 5% 25px;  
}

h4 {
  font-size: 24px;/* IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(2rem + ((1vw - 0.64rem) * 0.7143));/* 20px~24pxで可変*/
  line-height: 1.3;
}
@media (min-width: 1200px) {/* 1200px以上*/
  h3 {
      font-size: 3.6rem;/* 36px*/
  }
  h4 {
      font-size: 2.4rem;/* 24px*/
  }
}
@media screen and (max-width: 640px) {/* 640px以下*/
  body{
  line-height: 2;
  }
  h3{
      font-size: 2.4rem;/* 24px*/
  }
  h4 {
      font-size: 2rem;/* 20px*/
  }

}
}
.section-title2{
text-align: center;

}
.section-wrapper2{
background-color: black;
color: white;
}


.about-title1{
text-align: center;
}

.section-title3{
  text-align: center;
}

/******1　モノクロのこだわり*******/

.box1{
margin:10%;
}

h6 {
  font-size: 2vw;
  position: relative;
  overflow: hidden;
  padding: 1.5rem 2rem 1.5rem 130px;
  border: 2px solid rgb(255, 255, 255);
}

h6:before {
  position: absolute;
  top: -150%;
  left: -75px;
  width: 200px;
  height: 300%;
  content: '';
  -webkit-transform: rotate(25deg);
  transform: rotate(25deg);
  background: rgb(255, 255, 255);
}

h6 span {
  font-size: 40px;
  font-size: 4rem;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  display: block;
  padding-top: 3px;
  padding-left: 16px;
  color: rgb(0, 0, 0);
}

@media screen and (max-width: 959px) {
	/* 959px以下に適用されるCSS（タブレット用） */
  h6 {
    font-size: 1em;
    position: relative;
    overflow: hidden;
    padding: 1.5rem 2rem 1.5rem 130px;
    border: 2px solid rgb(255, 255, 255);
  }
  
  h6:before {
    position: absolute;
    top: -150%;
    left: -75px;
    width: 200px;
    height: 300%;
    content: '';
    -webkit-transform: rotate(25deg);
    transform: rotate(25deg);
    background: rgb(255, 255, 255);
  }
  
  h6 span {
    font-size: 40px;
    font-size: 3.5rem;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    display: block;
    padding-top: 3px;
    padding-left: 16px;
    color: rgb(0, 0, 0);
  }
}


@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
  h6 {
    font-size: 0.2em;
    position: relative;
    overflow: hidden;
    padding: 0.5rem 4rem 0.5rem;
    border: 2px solid rgb(255, 255, 255);
  }
  
  h6:before {
    position: absolute;
    top: -150%;
    left: -150px;
    width: 200px;
    height: 300%;
    content: '';
    -webkit-transform: rotate(25deg);
    transform: rotate(25deg);
    background: rgb(255, 255, 255);
  }
  
  h6 span {
    font-size: 10px;
    font-size: 1.5rem;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    display: block;
    padding-top: 0.5px;
    padding-left: 10px;
    color: rgb(0, 0, 0);
  }

}







/******フッター****/
.footer{
  background: rgb(58, 58, 58); /* 背景色にグレーを指定 */
  color: white;
  text-align: center;
 }

/* PC用のCSSはメディアクエリの外に記述する */

@media screen and (max-width: 959px) {
	/* 959px以下に適用されるCSS（タブレット用） */
  .footer{
    background: rgb(58, 58, 58); /* 背景色にグレーを指定 */
    color: white;
    text-align: center;
    font-size: 20%;
   }
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
  .footer{
    background: rgb(58, 58, 58); /* 背景色にグレーを指定 */
    color: white;
    text-align: center;
    font-size: 20%;
   }
}




/***各種title修正***/
@media screen and (max-width: 959px) {
  .section-title3{
    color: #000;
    font-weight: bold;
    font-size: 2em;
    text-align: center;
 }
 p{
  font-size: 0.5em;
 }
.about-title1{
  font-size: 1em;
  text-align: center;

}
}

@media screen and (max-width: 480px) {
  .section-title3{
    color: #000;
    font-weight: bold;
    font-size:1.5em;
    text-align: center;
  }
  .about-title1{
    font-size: 0.5em;
    text-align: center;
  
  }
  p{
    font-size: 0.25em;
   }
}


#fade {
  margin: 50px 0;
  font-weight: bold;
  color: black;
  }
  
  .fadeInDown {
   -webkit-animation-fill-mode:both;
   -ms-animation-fill-mode:both;
   animation-fill-mode:both;
   -webkit-animation-duration:1s;
   -ms-animation-duration:1s;
   animation-duration:1s;
   -webkit-animation-name: fadeInDown;
   animation-name: fadeInDown;
   visibility: visible !important;
  }
  @-webkit-keyframes fadeInDown {
   0% { opacity: 0; -webkit-transform: translateY(-20px); }
   100% { opacity: 1; -webkit-transform: translateY(0); }
  }
  @keyframes fadeInDown {
   0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
   100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
  }


  
#fade2 {
  color: white;
  }
  
  .fadeInDown {
   -webkit-animation-fill-mode:both;
   -ms-animation-fill-mode:both;
   animation-fill-mode:both;
   -webkit-animation-duration:1s;
   -ms-animation-duration:1s;
   animation-duration:1s;
   -webkit-animation-name: fadeInDown;
   animation-name: fadeInDown;
   visibility: visible !important;
  }
  @-webkit-keyframes fadeInDown {
   0% { opacity: 0; -webkit-transform: translateY(-20px); }
   100% { opacity: 1; -webkit-transform: translateY(0); }
  }
  @keyframes fadeInDown {
   0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
   100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
  }


  /*****top****/
/***top画****/
.slide {
  position   : relative;
  overflow   : hidden;       /* 画像のサイズに合わせて変更ください */
  width      :100%;
  height     :95vh;
  text-align: center;
  margin     : auto;      /* サンプルは中央寄せの背景：白 */
}
 
 /*=== 画像の設定 ======================================= */
.slide img {
  display    : block;
  position   : absolute;
  width      : inherit;
  height     : inherit;
  opacity    : 0;
  animation  : slideAnime 30s ease-in-out;
  animation-iteration-count: infinite;
}
 
 /*=== スライドのアニメーションを段差で開始する ========= */
.slide img:nth-of-type(1) { animation-delay: 0s }
.slide img:nth-of-type(2) { animation-delay: 5s }
.slide img:nth-of-type(3) { animation-delay: 10s }
.slide img:nth-of-type(4) { animation-delay: 15s }
.slide img:nth-of-type(5) { animation-delay: 20s }
.slide img:nth-of-type(6) { animation-delay: 25s }
 
 /*=== スライドのアニメーション ========================= */
@keyframes slideAnime{
   0% { opacity: 0 }
   2% { opacity: 1 }
  23% { opacity: 1 }
  25% { opacity: 1 }
  75% { opacity: 1 }
 100% { opacity: 1 }
}


body {
  padding-top: 1em; /* ヘッダーの後ろに要素が隠れないようにするため */
}




/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.slide { display: block !important; }
.slide2 { display: none !important; }
.slide3 { display: block !important; }
.slide4 { display: none !important; }
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
    .slide { display: none !important; }
    .slide2 { display: block !important; }
    .slide3 { display: none !important; } 
    .slide4 { display: block !important; }
}

/***top画****/
.slide2 {
  position   : relative;
  overflow   : hidden;       /* 画像のサイズに合わせて変更ください */
  width      :100%;
  height     :95vh;
  text-align: center;
  margin     : auto;      /* サンプルは中央寄せの背景：白 */
}
 
 /*=== 画像の設定 ======================================= */
.slide2 img {
  display    : block;
  position   : absolute;
  width      : inherit;
  height     : inherit;
  opacity    : 0;
  animation  : slideAnime 30s ease-in-out;
  animation-iteration-count: infinite;
}
 
 /*=== スライドのアニメーションを段差で開始する ========= */
.slide2 img:nth-of-type(1) { animation-delay: 0s }
.slide2 img:nth-of-type(2) { animation-delay: 5s }
.slide2 img:nth-of-type(3) { animation-delay: 10s }
.slide2 img:nth-of-type(4) { animation-delay: 15s }
.slide2 img:nth-of-type(5) { animation-delay: 20s }
.slide2 img:nth-of-type(6) { animation-delay: 25s }
 
 /*=== スライドのアニメーション ========================= */
@keyframes slideAnime{
   0% { opacity: 0 }
   2% { opacity: 1 }
  23% { opacity: 1 }
  25% { opacity: 1 }
  75% { opacity: 1 }
 100% { opacity: 1 }
}

.slide3 {
  position   : relative;
  overflow   : hidden;       /* 画像のサイズに合わせて変更ください */
  width      :100%;
  height     :95vh;
  text-align: center;
  margin     : auto;      /* サンプルは中央寄せの背景：白 */
}
 
 /*=== 画像の設定 ======================================= */
.slide3 img {
  display    : block;
  position   : absolute;
  width      : inherit;
  height     : inherit;
  opacity    : 0;
  animation  : slideAnime 30s ease-in-out;
  animation-iteration-count: infinite;
}
 
 /*=== スライドのアニメーションを段差で開始する ========= */
.slide3 img:nth-of-type(1) { animation-delay: 0s }
.slide3 img:nth-of-type(2) { animation-delay: 5s }
.slide3 img:nth-of-type(3) { animation-delay: 10s }
.slide3 img:nth-of-type(4) { animation-delay: 15s }
.slide3 img:nth-of-type(5) { animation-delay: 20s }
.slide3 img:nth-of-type(6) { animation-delay: 25s }
.slide3 img:nth-of-type(7) { animation-delay: 30s }
.slide3 img:nth-of-type(8) { animation-delay: 35s }
.slide3 img:nth-of-type(9) { animation-delay: 40s }
.slide3 img:nth-of-type(10) { animation-delay: 45s }
.slide3 img:nth-of-type(11) { animation-delay: 50s }
.slide3 img:nth-of-type(12) { animation-delay: 55s }
 
 /*=== スライドのアニメーション ========================= */
@keyframes slideAnime{
   0% { opacity: 0 }
   2% { opacity: 1 }
  23% { opacity: 1 }
  25% { opacity: 1 }
  75% { opacity: 1 }
 100% { opacity: 1 }
}
/***top画****/
.slide4 {
  position   : relative;
  overflow   : hidden;       /* 画像のサイズに合わせて変更ください */
  width      :100%;
  height     :95vh;
  text-align: center;
  margin     : auto;      /* サンプルは中央寄せの背景：白 */
}
 
 /*=== 画像の設定 ======================================= */
.slide4 img {
  display    : block;
  position   : absolute;
  width      : inherit;
  height     : inherit;
  opacity    : 0;
  animation  : slideAnime 30s ease-in-out;
  animation-iteration-count: infinite;
}

 /*=== スライドのアニメーションを段差で開始する ========= */
 .slide4 img:nth-of-type(1) { animation-delay: 0s }
 .slide4 img:nth-of-type(2) { animation-delay: 5s }
 .slide4 img:nth-of-type(3) { animation-delay: 10s }
 .slide4 img:nth-of-type(4) { animation-delay: 15s }
 .slide4 img:nth-of-type(5) { animation-delay: 20s }
 .slide4 img:nth-of-type(6) { animation-delay: 25s }

  /*=== スライドのアニメーション ========================= */
@keyframes slideAnime{
  0% { opacity: 0 }
  2% { opacity: 1 }
 23% { opacity: 1 }
 25% { opacity: 1 }
 75% { opacity: 1 }
100% { opacity: 1 }
}