/**
 * 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{
    background-color: #1B1310;
    color: #fff;
    height:74px;
    padding: 0 120px;
    border-bottom:1px solid #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.nav-list{
    /* navの横並び */
    display: flex;
}
.nav-item{
    /* メニューの右側に余白 */
    margin-right: 55px;
}

.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:#1B1310;
        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{
      font-size: 20px;
      margin-bottom: 30px;
  }
  .section-wrapper{
      padding:100px 5% 50px;  
  }


}