.top .contents { width: auto;}
/*
.top .contents article { float: none; width: auto; margin: 0 auto;}
.top section { max-width: 1100px; margin: 2em auto;}
*/
.top img { max-width: 100%; height: auto;}
.contents { padding-bottom: 0;}
div[class^="top_section_"] { padding: 40px 0;}

/*01*/
div.top_section_01 { padding-top: 0; padding-bottom: 0;}

/*02*/
div.top_section_02 { padding-top: 0; padding-bottom: 0; background: repeating-linear-gradient( -45deg, #E8E8E8, #E8E8E8 16px, #E3E3E3 16px, #E3E3E3 19px);}
.top_section_02 .wrap { padding: 40px 0; background: url("../img/top_sec_02_bg.png") center center no-repeat; background-size: 100%;}
.ranking { display: flex; justify-content: flex-start; flex-wrap: wrap; width: 60%; margin: 0 auto;}
.ranking h2 { font-size: 1.2em;;}
.ranking_01 { width: 20%; padding-right: 10px;}
.ranking_02 { width: 80%;}
.ranking_03 p:last-of-type { margin-bottom: 0;}

/*03*/
div.top_section_03 { background: url("../img/top_sec02_bg.png") right center no-repeat #F4F4F4; background-size: contain;}
.top_section_03 h2,
.top_section_03 .heading { font-size: 1.3em; font-weight: bold;}
.map { float: left; width: 50%; padding: 0 2%;}
.map p:last-of-type { margin-bottom: 0;}

/*04*/
div.top_section_04 { background: url("../img/top_sec04_bg.png") center center no-repeat; background-size: cover;}
.top_section_04 h2 { text-align: center;}
.select { display: flex; justify-content: center; align-items: stretch;}
.select > div { position: relative; width: 27.333%; margin: 5% 3%; padding: 2em 2.5em 2.5em; background-color: rgba(255,255,255,0.85);}
.select a { position: absolute; float: right; bottom: 1em; right: 2em; padding-bottom: 0.4em; color: #000; text-decoration: none; font-size: 0.9em;}
/*.select a:focus,*/
.select a:before { position: absolute; display: block; content: ""; bottom: 0px; left: 0px; right: 0px; height: 3px; background-color: #000; opacity: 1;}
/*.select a:focus:before,*/
.select a:hover:before { opacity: 0;}

/*05*/
div.top_section_05 { padding-bottom: 60px;}
.top_section_05 h2 { text-align: center;}
.live { width: 770px; margin: 0 auto;}
.comment { float: left; margin-top: 2em;}
.live a { position: relative; float: right; margin-top: 3em; padding-bottom: 0.4em; color: #000; text-decoration: none; font-size: 0.9em;}
/*.live a:focus,*/
.live a:before { position: absolute; display: block; content: ""; bottom: 0px; left: 0px; right: 0px; height: 3px; background-color: #000; opacity: 1;}
/*.live a:focus:before,*/
.live a:hover:before { opacity: 0;}


/*************************************************
 レスポンシブ　820 + 20
**************************************************/
@media screen and (min-width:0px) and (max-width:840px) {
  .top section { width: auto;}
  .contents .wrap { width: auto; margin-left: 2.5%; margin-right: 2.5%;}
  footer { padding-bottom: 80px;}
  
  /*02*/
  div.top_section_02 { background: none;}
  .top_section_02 .wrap { padding: 20px 0; background: none;}
  .ranking { width: auto;}
  .ranking h2 { text-align: center}
  .ranking_01 { width: 100%; padding-right: 0px; text-align: center;}
  .ranking_02 { width: 100%;}
  .ranking_03 p:last-of-type { margin-bottom: 0;}
  
  /*03*/
  div.top_section_03 { padding-top: 20px; padding-top: 320px; background-size: auto 300px; background-position: right top;}
  .top_section_03 h2,
  .top_section_03 .heading { font-size: 1.3em; font-weight: bold;}
  .map { float: none; width: auto; padding: 0;}
  
  /*04*/
  .select { display: block; justify-content: center; align-items: stretch;}
  .select > div { position: relative; width: 94%; margin: 3% 3%;}
  
  /*05*/
  div.top_section_05 { padding-bottom: 80px;}
  .top_section_05 h2 { text-align: center;}
  .live { width: auto; margin: 0 auto;}
  .comment { margin-top: 1em;}
  .live a { clear: both; margin-top: 0em; clear: both;}
}

/*************************************************
 レスポンシブ　640 + 20 
**************************************************/
@media screen and (min-width:0px) and (max-width:660px) {
  /*スライダー*/
  div.top_section_01 { padding-bottom: 40px;}
  div.top_section_01,
  .slide_box,
  .slick-dotted {overflow: visible;}
  .buttons { bottom: -50px;}
  .slick-dots { bottom: -30px;}
}