@charset "UTF-8";

html {
  font-size: 100%;
}
img {
  max-width: 100%;
}
.wrapper {
  max-width: 1400px;
  padding: 0 40px;
}

/*header*/
#header {
  width: 100%;
  height: 80px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  left: 0;
  right: 0;
  z-index: 10
}
/*ハンバーガーメニュー閉じているとき*/
#navi {
  position: fixed;
  top: 0;
  /*メニューが閉じている時は、「left: -300px;」で画面左に隠し、「opacity: 0;」で非表示にしている*/
  width: 300px;
  color: #fff;
  padding: 36px 50px;
  transition: all 0.5s;
  z-index: 20;
  left:-300px;
  opacity: :0;
}
/*ハンバーガーメニュー開いているとき*/
.open #navi {
  left:0; /*メニューが開いている時は、「left: 0;」「opacity: 1;」で画面左に表示する*/
  opacity:1;
  margin-top: 50px;
}
.toggle_btn {
  width: 30px;
  height: 30px;
  position: relative;
  transition: all 0.5s;
  cursor: pointer;
  z-index: 20;
}
/*ハンバーガーメニューの線の設定(メニューが閉じているとき)*/
.toggle_btn span {
  display: block;
  position: absolute;
  width: 40px;
  height: 2px;
  background-color: #333;
  border-radius: 4px;
  transition: all 0.5s;
  right:-500px;

}
.toggle_btn span:nth-child(1) {
  top:0;
}
.toggle_btn span:nth-child(2) {
  top:0;
  bottom:0;
  margin: auto;
}
.toggle_btn span:nth-child(3) {
  bottom:0;
}
/*ハンバーガーメニューの線の設定（メニューが開いているとき）*/
.open .toggle_btn span{
  background-color: #333;
}
.open .toggle_btn span:nth-child(1){
  transform: translateY(10px) rotate(-45deg);
}
.open .toggle_btn span:nth-child(2){
  opacity: 0;
}
.open .toggle_btn span:nth-child(3){
  transform: translateY(-12px) rotate(45deg);
}

/*mainvidualの画像*/
.mainvisual img {
 height: 500px;
 width: 100%;
 object-fit: cover;
}
/*section pickup*/
h2{
  text-align: center;
  margin-top:100px;
  margin-bottom: 50px;
}
#slide img{
  object-fit: cover;
  width:500px;
  height:300px;
  position: absolute;
  left:0;
  top:0;
}
#slide{
 width:640px;
 height:300px;
 position: relative;
margin-left: 430px;
}
/*intoroduce*/
.item img{
  width: 400px;
  height: 450px;
  object-fit: cover;

}
.item {
  box-shadow: 0 10px 25px 0 rgba(0,0,0,.5);
  width: 400px;
}
.grid{
  display: grid;
  gap:26px;
  grid-template-columns: repeat(3,1fr);
  margin-top: 6%;
  margin-bottom: 50px;
}
.fadeIn {
  transition: 1s;
  opacity: 0;
}
.fadeIn.animated {
  opacity:1;
}
h3{
  font-size: 14px;
  text-align: center;
}

/*.hamburger {
  position: relative;
  width: 40px;
  height: 32px;
}
.hamburger span{
  display: :block;
  width:100%;
  height: 4px;
  position: absolute;
  background: #000;
  transition: all .4s;
  left:0;
}

.hamburger span:nth-child(1){
  top:0
}
.hamburger span:nth-child(2){
  top:0;
  bottom:0;
  margin: auto;
}
.hamburger span:nth-child(3){
  bottom:0;
}*/

/*ハンバーガーメニュークリック後のスタイル*/
/*.hamburger.show span:nth-child(1) {
  transform: translateY(10px) rotate(-45deg);
}
.hamburger.show span :nth-child(2) {
  opacity: 0;
}
.hamburger.show span:nth-child(3) {
  transform: translateY(-12px) rotate(45deg);
}



nav {
  position: fixed;
    top: 3rem;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s, visibility .5s;
}
.nav.show {
    opacity: 1;
    visibility: visible;
}*/