@charset "UTF-8";
/*header*/
.eye-catching{
    background-color: #999;
  }
  .eye-catching h2{
    color: #f6f8f9;
    text-shadow: none;
  }
  /*category*/
h3{
    text-shadow:
    /*2pxの輪郭線*/
    2px 0px 0px #f6f8f9,
    -2px 0px 0px #f6f8f9,
    0px 2px 0px #f6f8f9,
    0px -2px 0px #f6f8f9,
    2px 2px 0px #f6f8f9,
    2px -2px 0px #f6f8f9,
    -2px -2px 0px #f6f8f9,
    -2px 2px 0px #f6f8f9,
    /*3pxの輪郭線*/
    3px 0px 0px #f6f8f9,
    -3px 0px 0px #f6f8f9,
    0px 3px 0px #f6f8f9,
    0px -3px 0px #f6f8f9,
    3px 3px 0px #f6f8f9,
    3px -3px 0px #f6f8f9,
    -3px -3px 0px #f6f8f9,
    -3px 3px 0px #f6f8f9;
  }
  .book-note_category h3,.picture-start_category h3, 
    .portrait_category h3, .landscape-painting_category h3{
      width: auto;
    height: auto;
    margin: 60px 100px 60px 100px;
    padding-top: 30px;
    padding-bottom: 30px;
    border-radius: 20px;
    box-shadow: 0px 0px 10px  #333;
    }
  .book-note_category h3:hover, .picture-start_category h3:hover, 
  .portrait_category h3:hover, .landscape-painting_category h3:hover{
    opacity: 0.7;
  }
  .book-note_category h3{  
    background-color: #ffcc00;
    background-image: url(../images/top/book-note_button.jpg);
    background-size: contain;
    border: solid 4px #ffcc00; 
  }
  .picture-start_category h3{
    background-color: #0099ff;
    background-image: url(../images/top/picture-start_button.jpg);
    background-size: contain;
    border: solid 4px #0099ff;
  }
  
  .portrait_category h3{
    background-color: #ff6600;
    background-image: url(../images/top/portrait_button.jpg);
    background-size: contain;
    border: solid 4px #ff6600;
  }
  .landscape-painting_category h3{
    background-color: #009933;
    background-image: url(../images/top/landscape-painting_button.jpg);
    background-size: contain;
    border: solid 4px #009933;
  }
  @media(max-width: 880px){
    h3{
      text-shadow:
      /*2pxの輪郭線*/
      2px 0px 0px #f6f8f9,
      -2px 0px 0px #f6f8f9,
      0px 2px 0px #f6f8f9,
      0px -2px 0px #f6f8f9,
      2px 2px 0px #f6f8f9,
      2px -2px 0px #f6f8f9,
      -2px -2px 0px #f6f8f9,
      -2px 2px 0px #f6f8f9;
    }
    .book-note_category h3,.picture-start_category h3, 
    .portrait_category h3, .landscape-painting_category h3{
      width: auto;
      height: auto;
      margin: 30px 24px 30px 24px;
      padding-top: 30px;
      padding-bottom: 30px;
      border-radius: 15px;
      box-shadow: 0px 0px 7px  #333;
    }
  }

  /*footer*/
footer{
    background-color: #999;
  }
  footer p{
    color: #ccc;
  }