@charset "shift_jis";
/* ===================================================================
CSS information
 file name  : freepagefull05_natsuyasumi
 author     : honyaclub.com
 date       : 20190726
 update     : 20190726
 about      : freepagefull05_夏休みおすすめの本
=================================================================== */
/* ---------------------------------------------------------------------

html,body

----------------------------------------------------------------------*/
/*==========  PC　ここから  ==========*/
@media screen and (min-width: 751px) {
  /*----- wrapper背景 -----*/
  #wrapper {
    background-color: #e6f4f8;
  }
  
  /*----- header固定のナビゲーション----- */
  /*----- contents内容 -----*/
  #contents {
    padding-top: 5.5rem;
    margin-bottom: 1rem;
  }
  #contents #main img {
    width: 100%;
    max-width: 950px;
  }
  
  /*----- コンテンツ01 -----*/
  .content01 {
    width: 80%;
  }
  .content01 p.lead {
    font-size: 18px;
    font-weight: bold;
    color: #003399;
  }
  
  /*----- TAB CONTROLLERS -----*/
  .panel-label br {
    display: block;
  }
  
  /*----- THE PANELS -----*/
  /*----- goods list ------*/
  .introduction h2 {
    width: 90%;
    background-color: #0d6fb8;
    padding: 5px;
    margin: 0 auto;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
  }
  .introduction .list {
    padding: 20px 0;
  }
  .introduction .goods-list li {
    width: 45%;
    padding: 2%;
  }
  .introduction .goods-list h3 {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
  }
  .introduction .goods-list li a {
    color: #003399;
  }
  .introduction .goods-list li dl {
    width: 100%;
  }
  .introduction .goods-list li dl dt {
    min-width: 30%;
    display: inline-block;
    vertical-align: top;
  }
  .introduction .goods-list li dl dd {
    min-width: 65%;
    display: inline-block;
    vertical-align: top;
  }
  .goods-list li {
    width: 220px;
  }
  .goods-list li dl dt {
    margin: 0 auto 10px;
  }
  .goods-list li dl dt img {
    max-height: 150px;
    max-width: 100px;
  }
  .goods-list li dl dd {
    width: 200px;
  }
  .goods-list li dl dd p.title {
    height: 60px;
    color: #003399;
  }
  
  /*----- 特集リンク -----*/
  #feature {
    background-color: #0d6fb8;
  }
  #feature h2 {
    font-size: 18px;
    font-weight: bold;
    color: #fff;
  }
  #feature p {
    color: #fff;
  }
  #feature li {
    display: inline-block;
    width: 45%;
  }
  #feature li dt {
    padding: 10px;
  }
  #feature li dt img {
    width: 80%;
    max-width: 440px;
  }
  
  /*----- Return to TOP -----*/
  #pageTop a {
    background-color: #000;
  }
  
  /*----- footer -----*/
  #footer-container, #footer {
    background-color: #e6f4f8;
  }
  
}

/*==========  Tab  ==========*/
/*@media screen and (max-width:959px){
.sp{display: none;}
.pc{display:block;}

}*/

/*==========  Smt  ==========*/
@media screen and (max-width : 750px) {
  img {
    max-width: 100%;
    height: auto;
  }
  .pc {
    display: none;
  }
  .sp {
    display: block;
    margin: 0 auto;
  }
  
  /*----- wrapper背景 -----*/
  #wrapper {
    background-color: #e6f4f8;
  }

  /*-----　contents内容　-----*/
  #main {
    margin-bottom: 0;
  }
  
  /*----- content01 -----*/
  .content01 {
    width: auto;
  }
  .content01 p.lead {
    font-size: 15px;
    font-weight: bold;
    color: #003399;
  }
  
  /*----- goods list ------*/
  
  .introduction h2 {
    width: 100%;
    background-color: #0d6fb8;
    padding: 5px;
    margin: 0 auto;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
  }
  .introduction .list {
    padding: 10px 0;
  }
  .introduction .goods-list h3 {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
  }
  .introduction .goods-list li a {
    color: #003399;
  }
  .goods-list {
    height: auto!important;
  }
    .goods-list li {
    width: 100%;
    height: auto;
  }

  /*----- 特集リンク -----*/
  #feature {
    background-color: #0d6fb8;
  }
  #feature h2 {
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    margin: 10px 0 20px;
  }
  #feature p {
    color: #fff;
  }
  #feature li dt {
    padding: 10px;
  }  
  #feature dl {
    margin-bottom: 30px;
  }

  /*----- Return to TOP -----*/
  #pageTop a {
    background-color: #000;
  }
  
  /*----- footer -----*/
  #footer-container, #footer {
    background-color: #e6f4f8;
  }

}