@charset "utf-8";

/*初期値reset*/
*{
 margin:0;
 padding:0;
}
body{
 font-family: sans-serif;
 line-height: 1;
 color: #333;
 text-align: center;
}
ul{
 list-style: none;
}
a{
 display: block; text-decoration: none;
 color: inherit;/*親の色を継承*/
}
img{
 max-width: 100%;
 height: auto;/*なくても大丈夫*/
 vertical-align:  bottom;
}
.spnav,.btn{
  display: none;
}
/*共通余白*/
header,.pcnav,footer{
 padding: 30px 0px;
} 

/*header*/
header{
 background: #fdd; 
} 
h1{
 font-size:40px;
 color:#900; 
 font-weight: lighter;
 width: 11em;
 margin: 0 auto 10px;
 line-height: 50px;
 padding-left: 55px; background:
  url(../img/logo.svg)
  no-repeat
  left center;
 }
header p{
 font-size: 24px;
}


/*navigation*/
.pcnav{
 padding: 30px;
 background: #fff;
}
.pcnav ul{
 display:flex;
 justify-content:
  space-between;
 max-width: 1000px;
 margin: 0 auto;
}
.pcnav li{
 width: 18%;
 line-height: 44px;
}
.pcnav a{
 border: 1px solid #900;
}
.pcnav a:hover{
 color: #900;
 background: #fcc;
}

/*keyVisual*/
.kyeVis{
 padding: 50px 0;
 background: #fdd;
}




/*h2ブーケセレクション*/
.selection{
 padding: 50px;
}
h2{
 color: #900;
 margin-bottom: 20px;
}
.bouquet{
 text-align: left;
 display:flex;
 justify-content:
  space-between;
 max-width: 1000px;
 margin: 0 auto;
}
.bouquet section {
 width: 32%;
}
.bouquet a{
 padding: 20px;
}
section a:hover{
 background: #fcc;
}
h3{
 color: #900;
 margin: 20px 0;
}
.bouquet a p:first-of-type{
 line-height: 1.4;
 height: 12em;
}
.more{
 border: 1px solid #900;
 background: #fff;
 padding: 10px;
 width: 5em;
}


footer{
background: #fcc;
}

/*メディアクエリ*/
@media screen and (max-width:743px){  
  .pcnav{
    display: none;
  }
  .bouquet,.btn{
    display: block;
  }
  .bouquet section{
    width: auto;
  }

/*header*/
  header{
    padding: 10px 0;
  }
  h1{
    font-size: 25px;
    line-height: 25px;
    padding-left: 30px;
  }
  header p{
    font-size: 14px;
  }

/*navigation*/
  .btn{
    background: linear-gradient(#fff,#fcd);
  }
  .btn i{
    line-height: 50px;
    font-size: 35px;
    color: #f99;
    text-shadow: -1px -1px 1px #900;
  }
  .spnav{
    display: block;
    position: absolute;
    width: 100%;
    top: 120px;
  }
  .spnav li{
    line-height: 70px;
    font-weight: bold;
    border-bottom: 1px solid #900;
  }
  .spnav a{
    color: #900;
    background: rgba(255, 204, 204, 0.8);
  }
/*keyvisual*/
  .kyeVis{
    padding: 20px 0;
  }

/*ブーケセレクション*/
  .selection {
    padding: 20px 0;
  }
  .bouquet a{
    padding: 10px;
  }
  h3{
    text-align: center;
  }
  .bouquet a p:first-of-type{
    font-size: 14px;
    height: auto;
    margin-bottom: 20px;
  }
  .more{
    padding: 15px;
    font-size: 20px;
    color: #900;
    text-align: center;
    width: auto;
    border-radius: 5px;
    background: linear-gradient(#fff,#fcd);
  }
  
  footer{
    font-size: 12px;
  }
}