@charset"utf-8";
*{
  padding:  0;
  margin:  0;
}
body{
  background:  #ffc;
  font-family:  sans-serif;
  line-height:  1;
  color:  #333;
}
ul{
  list-style:  none;
}
a{
  text-decoration:  none;
  color:  inherit;
  display:  block;
}
img{
  max-width:  100%;
  height:  auto;
  vertical-align:  bottom;
}

/*スマホメニュー*/
.spnav,.btn,.spwrap{
  display: none;
}


/*コンテンツ幅*/
.container{
  max-width:  960px;
  margin-inline: auto;
  padding-inline: 10px ;
}

/*header*/
header{
  background:  #900;
}
header .container{
  height:  200px;
  color:  #fff;
  background:
    url(../img/header.jpg) 
     no-repeat
     right center;
}

h1{
  padding:  40px 0 20px;
}
h1 span{
  font-size: 50px;
  letter-spacing: 15px;
  font-family: 'Cherry Bomb One', cursive;
}


/*navigation*/
.pcnav{
  margin-bottom:  20px;
  background:  #fc0;
}
.pcnav ul{
  display:  flex;
  text-align:  center;
  list-style:  none;
  font-size:  20px;
 }
.pcnav li{
  line-height:  50px;
  width:  20%;
}
.pcnav a{
  text-decoration:  none;
  display:  block;
  color:  #900;
}
.pcnav a:hover{
  color:  #fff;
  background:  #900;
}

/*keyvisual*/
.keyVis{
  display:  block;
  margin:  0 auto 30px;
}

/*3カラムレイアウト*/
.wrap{
  display:  flex;
  justify-content: 
    space-between;
  margin-bottom:  50px;
}
.wrap section{
  width:  32%;
}
.wrap a{
  padding:  10px;
}
.wrap a:hover{
  background: 
    rgba(255, 204, 0, 0.567);
}

/*h2見出し*/
h2{
  padding:  10px 10px 8px;
  margin-bottom:  20px;
  color:  #fff;
  background:  #900;
}
.wrap p:first-of-type{
  margin-top:  10px;
  height:  10em;
  line-height:  1.5;
}

/*詳細を見る*/
.more{
  width:  5em;
  padding:  5px 10px 3px;
  color:  #900;
  border:  2px solid #900;
  background:  #fc0;
}
.wrap a:hover .more{
  color:  #fff;
  background:  #f00;
}

/*footer*/
footer{
  padding:  20px;
  color:  #fff;
  background:  #900;
}


/*メディアクエリ*/
@media screen and (max-width:743px){
  


  header .container{
    height: 150px;
    background-size: auto 150px;
    text-shadow: 1px 1px 1px #700;
  }
  h1{
    padding: 20px 0;
    font-size: 20px;
  }
  h1 span{
    font-size: 32px;
    letter-spacing: 5px;
  }
  header p{
    margin-top: 25px;
    font-size: 12px;
  }


  .pcnav{
    display: none;
  }
  .btn{
    display: block;
    text-align: center;  
    background:linear-gradient(#ffc,#fca) ;
    border: 1px solid #900;
    border-radius: 5px;
  }
  .btn i{
    line-height: 50px;
    color: #900;
    font-size: 35px;
  }
  .spnav{
    /*display: block;*/
    position: absolute;
    width: 100%;
  } 

  .spnav li{
    line-height: 50px;
    text-align: center;
    border-bottom:1px solid rgb(224, 86, 86) ;
  }
  .spnav a{
    color: #fff;
    background: rgba(153, 0, 0, 0.651);
  }

  .keyVis{
    margin: 10px auto 20px;
  }

  .wrap{
    display: block;
    margin-bottom: 20px;
  }
  .wrap a {
    padding: 0;
  }
  .wrap section{
    width: auto;
  }

  h2{
    margin-bottom: 10px;
  }
  .wrap img{ 
    display: block;
    margin: auto;
  }
  .wrap p:first-of-type{
    margin-bottom: 10px;
    height: auto;
  }

  .more{
    width: auto;
    padding: 20px 0;
    text-align: center;
    margin-bottom: 20px;
  }

  footer{
    text-align: center;
  }
}