@charset "UTF-8";

/* base */
html {
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 62.5%;
  scrollbar-color: #00fcff #dffcff;
}

body {
  color: #0d1927;
  font-family: "メイリオ","Hiragino Kaku Gothic Pro","sans-serif";
  font-size: 1.6rem;
  margin: 0;
  padding: 0;
  width: 100%;
  -webkit-text-size-adjust: 100%;
  background-color: #cdd5e0;
  background-image: url(../img/bg_mn.png),url(../img/bg.png);
  background-repeat: no-repeat,repeat;
  background-position: center top, center top;
  background-attachment: scroll,fixed;
  }

*, *:before, *:after {
box-sizing: inherit;
 }

 a{
   color:#04bed0;
 }

 a:visited{
  color:#04bed0;
 }

 a:hover{
   color: #04bed0;
}

img {
  border: none;
  max-width:100%;
  height: auto;
  margin: 0;
}
.pic_center img {
  display: block;
  margin:0 auto;
}

a:hover img {
  opacity: 0.7;
  filter: alpha (opacity=70);
  -moz-opacity: 0.7;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}


.line_gr {
  background: linear-gradient(transparent 60%, rgba(0, 255, 0, .3) 50%);
}

.line_bl {
  background: linear-gradient(transparent 80%, rgba(0,252,255,.3) 50%);
}

.strong {
  color: #14bc14;
  font-weight: bold;
  font-size: 110%;
}

.u {
  border-bottom: 3px solid #04bed0;
}

.b {
  font-weight: bold;
}

.memo{
  font-size: 80%;
  line-height: 1;
}

p {
  line-height : 1.95 ;
  letter-spacing : 0.05em ;
  font-size: 1.6rem;
}

h1,h2,h3,h4,h5 {
  letter-spacing : 0.1em ;
}

ul, li {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  vertical-align:baseline;
  background:transparent;
  list-style-type: none;
}


/*waku*/
.waku_bl{
  border: 10px solid #04bed0;
  padding: 0.5em;
  margin: 1em;
  background-color: #fff;
}

.waku_bl li{
list-style-type:square;
margin-left: 2em;
padding: 0.5em;
}

.waku_gr{
  border: 10px solid #14bc14;
  padding: 0.5em;
  margin: 1em;
  background-color: #fff;
}

.waku_gr li{
list-style-type:square;
margin-left: 2em;
padding: 0.5em;
}

/* header */
header {
  background-color: rgba(255,255,255,.8);
  margin-bottom: 0;
}

.header-inner {
  padding: 5px;
  font-size: 1.2rem;
  color: #0d1927;
}

header nav{
  margin: 0;
  color: #fff;
}

header nav ul li{
  display: none;
}

/* ---------global navigation--------- */
.gnav{
  margin: 0;
  background-color:#04bed0;
  color: #fff;
  font-weight: bold;
}

.gnav ul{
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
}

.gnav li {
  border-right: 1px solid #fff;
    margin: 0 auto;
  width: 33.3%;
}

.gnav li:nth-child(1) {
  border-left: 1px solid #fff;
}

.gnav li a{
	display: block;
	padding: 15px 0;
	text-decoration: none;
	font-size: 1.6rem;
  text-align:center;
  color: #fff;
}

.gnav li a:link{
color: #fff;
}

.gnav li a:hover{
	background-color: #00ff00;
  color: #0d1927;
}

.gnav li a:visited{
  color: #fff;
}


/* mainvisual */
.mainvisual {
	position: relative;
  width: auto;
	height: 450px;
}

.logo {
  width: 100%;
  max-width: 1000px;
  height: auto;
  position: absolute;
  top: 10px;
  right: 0px;
  left:0px;
  margin: auto;
  -webkit-transition: all .3s;
  transition: all .3s;
}



@media screen and (min-width: 768px) {
  .logo2,.logo3{
    display: none;
  }

}

@media screen and (max-width: 768px) {
  .logo{
    display: none;
  }

  .logo2 {
    position: absolute;
    top: 10px;
    right:0px;
    left:0px;
    margin: auto;
    -webkit-transition: all .3s;
    transition: all .3s;
  }

  .logo3{
    margin-top:10px;
    margin-bottom:0;
  }

}

.toprank_h1wrap {
background-color: rgba(255,255,255,.7);
margin:0 20px 40px 20px;
padding:5px 10px;
background-image: url(../img/toprank.jpg);
background-repeat: no-repeat;
background-position: center right;
background-attachment: scroll;
background-size:cover;
}

.twobox{
  display: flex;
  flex-flow: row no-wrap;
  justify-content:space-between;
  margin:0;
  padding:5px
}

.twobox ul{
  margin:0;
}

.twobox li{
  border:1px solid #04bed0;
  width:49.5%;
  margin:0;
  padding:0;
  background-color:#fff;
}

.twobox img{
  margin-top: auto;
}

.soudantitle{
  display: block;
  font-weight: bold;
  background-color: #04bed0;
  padding: 10px;
  color: #fff;
  font-size: 2.0rem;;
}

.soudantitle::first-letter{
  color:#00ff00;
  font-size: 130%;
}


.twobox p{
  padding: 10px;
}

@media screen and (max-width: 600px) {
  .twobox{
    display: block;
    flex-direction: column;
    margin:0;
  }
  .twobox ul{
    margin:0;
  }
  .twobox li{
    width: 100%;
    margin-top:10px;
  }
}


/*table*/

table {
	border-collapse: collapse;
}

.table-scroll {
  overflow-x: scroll;
  margin-top: 10px;
}

.table_toprank{
  width: 120%;
  border: 1px solid #0d1927;
  margin:auto;
}

.table_toprank .tokucho{
  text-align: left;
  margin-left: 1.5em;
}

.table_toprank .tokucho li{
  list-style-type: square;
}

.table_toprank img{
  width: 30%;
  height: auto;
}

.toprank_h1wrap:after{
  content: "";
  display: block;
  height: 0;
  font-size:0;
  clear: both;
  visibility:hidden;
}

.table_toprank th{
  width: 15%;
  padding:5px;
  background-color: #fff;
  border: 1px solid #0d1927;
  font-size: 1.2rem;
}

.shamei img{
  width: 100%;;
}

.table_toprank td{
  width: 17%;
  border: 1px solid #0d1927;
  padding:5px 0 0 0;
  vertical-align:top;
  text-align: center;
  background-color: #fff;
  font-size: 1.2rem;
}

.table_toprank tr td:nth-of-type(1) {
  background-color: #e4ffe4;
}

.toprank h1{
  margin: 20px 20px 0 20px;
  color: #0d1927;
  background-color: rgba(255,255,255,.8);
  padding: 15px;
  text-shadow: 2px 2px 1px #fff,
  -2px 2px 1px #fff,
  2px -2px 1px #fff,
  -2px -2px 1px #fff;
}

.toprank h2{
  border-bottom: none;
  margin: 20px;
}

/* top page */
h1 {
 padding:15px 10px;
 margin: 20px 0;
 font-size: 2.5rem;
 color: #0d1927;
 border-bottom: solid 3px #0d1927;
 position: relative;
 line-height: 1.2em;
}

h1:after {
 position: absolute;
 content: " ";
 display: block;
 border-bottom: solid 3px #00fcff;
 bottom: -3px;
 width: 50%;
}

h2{
 padding: 15px 10px;
 margin: 0;
 font-size: 2.3rem;
 line-height: 1.2em;
 color: #0d1927;
 border-bottom: 1px solid #0d1927;
 background-color: rgba(255,255,255,.8);
 text-shadow: 2px 2px 1px #fff,
  -2px 2px 1px #fff,
  2px -2px 1px #fff,
  -2px -2px 1px #fff;
}

.contents01 h2, .contents_ranking h2{
  border-left: solid 10px #04bed0;
}

.contents02 h2{
  border-left: solid 10px #14bc14;
}

h2 a {
 color: #0d1927;
}

h3 {
  font-size: 2.0rem;
}

h4 {
  font-size: 2.0rem;
}

.ranking h3 {
  font-size: 2.3rem;
  margin: 0 0 20px 0;
  padding: 0 5px 5px 20px;
  border-bottom: 1px solid #04bed0;
  border-left: solid 10px #0d1927;
  line-height: 1.2em;
}


.ranking_01 h4 {
  padding: 5px;
  position: relative;
  display: inline-block;
  margin: 20px auto 0.5em 0;
  line-height: 1.2em;
}

.ranking_01 h4:before {
content: '';
position: absolute;
bottom: -5px;
display: inline-block;
width: 50px;
height: 3px;
left: 50%;
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
background-color: #00fcff;
}

.contents01 h3 {
  margin-bottom: 10px;
  padding: 10px;
  border-left: solid 20px #00fcff;
  background-color: #fff;
  display: inline-block;
  box-shadow: 2px 2px 5px #a1b7d1;
  -moz-box-shadow: 2px 2px 5px #a1b7d1;
  -webkit-box-shadow: 2px 2px 5px #a1b7d1;
}

.contents02 h3 {
  margin-bottom: 10px;
  padding: 10px;
  border-left: solid 20px #00ff00;
  background-color: #fff;
  display: inline-block;
  box-shadow: 2px 2px 5px #a1b7d1;
  -moz-box-shadow: 2px 2px 5px #a1b7d1;
  -webkit-box-shadow: 2px 2px 5px #a1b7d1;
}


@media screen and (max-width: 599px) {
#contents-wrap {
  padding-right: 0;
  }
}

/*  mokuji */
.mokuji{
  background-image: url(../img/mokuji_bk.jpg);
  background-repeat: no-repeat;
  background-position: center right;
  background-attachment: scroll;
  background-size:cover;
}

.mokuji h2{
  margin-top: -40px;
}

.mokuji ul{
  width:100%;
  line-height: 1.5em;
  margin-bottom: 10px;
}

.mokuji li{
  font-size: 1.6rem;
  margin:0 10px;
}

.mokuji .h3list li{
  margin-left:2em;
}


.picleft{
  float:left;
  width:15%;
  height:100%;
  margin:5px 0;
}

.mokuji li::before{
  content:url(../img/mokuji.png);
  display:inline-block;
  width:10px;
  height:auto;
  margin-right:20px;
  position:relative;
  top:7px;
  left:0;
}

.mokuji .h3list li::before{
  content:url(../img/mokuji2.png);
  display:inline-block;
  width:10px;
  height:auto;
  margin-right:20px;
  position:relative;
  top:7px;
  left:0;
}

.mokuji li a{
  color: #0d1927;
}

.mokuji li a:visited {
  color: #0d1927;
}

.mokuji li a:hover {
  color:#04bed0;
}

/* section ranking */

.contents_ranking {
  margin: 50px 0;
  margin-bottom: 20px;
}

.ranking {
  border: 10px solid #04bed0;
  padding: 10px;
  margin: 20px 0 40px 0;  
  background-color: rgba(255,255,255,1);
}

.rankingdeep {
  border: 10px solid #00ff00;
  padding: 10px;
  margin: 20px 0 40px 0;  
  background-color: rgba(255,255,255,1);
}

.ranking_inner {
  margin:0 0 20px 0;
  padding: 10px;
  background-color: rgba(255,255,255,.7);
}

.contents_ranking p {
  padding: 0 10px;
}

.ranking_01 p {
  padding: 0;
}

/* section contents */

.contents01,.contents02,.ranking {
  margin: 50px 0;
  box-shadow: 2px 2px 5px #a1b7d1,-2px -2px 5px #a1b7d1;
  -moz-box-shadow: 2px 2px 5px #a1b7d1,-2px -2px 5px #a1b7d1;
  -webkit-box-shadow: 2px 2px 5px #a1b7d1,-2px -2px 5px #a1b7d1;
}

.contents01:first-child{
  margin: 10px 0;
}


.contents01_inner {
  margin: 0;
  padding: 5px 25px 10px 25px;;
  background-color: rgba(255,255,255,.7);
}



.contents02_inner{
  margin-bottom: 30px;
  padding:5px 25px 10px 25px;
  background-color: rgba(255,255,255,.7);
}


/* ranking badge*/

.rankingdeep {
  position: relative;
  }
  
.rankingdeep h3{
  margin:10px;
  padding: 0 5px 20px 90px;
  border-bottom: 3px solid #00ff00;
  font-size:4rem;
	font-weight:bold;
	color: #0d1927;
	text-shadow: 0.05em 0.05em 0.05em rgba(0,255,0,1);
}


.badge {
  width: 150px;
  height:auto;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: absolute;
  top: -30px;
  left: -50px;
  z-index: 2;
  animation: badge 2s infinite;
}

.badge img {
  width: 100%;
  height: auto;
}

.ranking {
  position: relative;
  }


@keyframes badge {
  0% {
    transform: translate(2px, 0px);
  }
  5% {
    transform: translate(-2px, 0px);
  }
  10% {
    transform: translate(2px, 0px);
  }
  15% {
    transform: translate(-2px, 0px);
  }
  20% {
    transform: translate(2px, 0px);
  }
  25% {
     transform: translate(-2px, 0px);
  }
  30% {
    transform: translate(0px, 0px);
  }
}

@media screen and (max-width: 768px) { 
  .badge {
    width: 120px;
    top: -40px;
    left: -25px;
    z-index: 2;
  }

  .rankingdeep h3{
    font-size:1.6rem;
    margin:5px 0;
  }
}


/* ranking img */
.shouhin {
  display: block;
  overflow: hidden;
}

.shouhin img{
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
.shouhin:hover img{
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}


/* shouhin */
.two_box {
  margin: 0;
  padding: 0;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -webkit-flex;
  display: flex;
  }

.shouhin {
	width: 50%;
}

.shouhin img {
  width: 100%;
  height: auto;
  }

.info {
	width: 50%;
}

.info img {
  width: 100%;
  height: auto;
  }

.info h5 {
  margin: 0 0 10px 0;
  border-bottom: 1px solid #0d1927;
  padding: 5px;
  font-size: 1.8rem;
  color: #0d1927;
  font-weight: bold;
  text-align: center;
}

.info li{
  margin-left: 20px;
  list-style-type: square;
  font-size: 15px;
  color: #0d1927;
  padding: 5px;
}



/* ranking button */
.toprank_btn {
  margin-top: 0;
  padding: 5px;
  line-height: 1.5;
  font-size:1.2rem;
}

.rank_btn {
  margin-top: 20px;
  padding: 5px;
  line-height: 1.5;
  font-size:1.7rem;
}

.button01 {
	display: inline-block;
	text-align: center;
	text-decoration: none;
	outline: none;
  -webkit-transition: all .3s;
  transition: all .3s;
  font-weight: bold;
  padding: 15px;
  margin-bottom: 5px;
  width: 100%;
  height: auto;
  text-align: center;
  background-color: #0d1927;
  border: 1px solid #0d1927;
  color: #fff;
}

.button01:visited{
  color: #fff;
}

.button01:link{
  color: #fff;
}

.button01:hover {
  background-color: #fff;
  color: #0d1927;
}


.button02 {
  display: inline-block;
	text-align: center;
	text-decoration: none;
	outline: none;
  -webkit-transition: all .3s;
  transition: all .3s;
  font-weight: bold;
  padding: 15px;
  margin-bottom: 5px;
  width: 100%;
  height: auto;
  text-align: center;
  border: 1px solid #04bed0;
  background-color: #04bed0;
  color: #fff;
}

.button02:visited{
  color: #fff;
}

.button02:link{
  color: #fff;
}

.button02:hover {
  background-color: #fff;
  color: #04bed0;
}

.button03 {
  display: inline-block;
	text-align: center;
	text-decoration: none;
	outline: none;
  -webkit-transition: all .3s;
  transition: all .3s;
  font-weight: bold;
  padding: 15px;
  margin-bottom: 5px;
  width: 100%;
  height: auto;
  text-align: center;
  background-color: #00ff00;
  border: 1px solid #00ff00;
  color: #fff;
}

.button03:visited{
  color: #fff;
}

.button03:link{
  color: #fff;
}

.button03:hover {
  background-color: #fff;
  color: #00ff00;
}

.button04 {
  display: inline-block;
	text-align: center;
	text-decoration: none;
	outline: none;
  -webkit-transition: all .3s;
  transition: all .3s;
  font-weight: bold;
  padding: 15px;
  margin-bottom: 5px;
  width: 100%;
  height: auto;
  text-align: center;
  background-color: #0d1927;
  border: 1px solid #0d1927;
  color: #fff;
}

.button04:visited{
  color: #fff;
}

.button04:link{
  color: #fff;
}

.button04:hover {
  background-color: #fff;
  color: #0d1927;
}

.button00 {
	display: inline-block;
	text-align: center;
	text-decoration: none;
	outline: none;
  -webkit-transition: all .3s;
  transition: all .3s;
  font-weight: bold;
  padding: 15px;
  margin-bottom: 5px;
  width: 100%;
  height: auto;
  text-align: center;
  background-color: #00ff00;
  border: 1px solid #00ff00;
  color: #fff;
}

.button00:visited{
  color: #fff;
}

.button00:link{
  color: #fff;
}

.button00:hover {
  background-color: #fff;
  color: #00ff00;
}


.buttondeep {
	display: inline-block;
	text-align: center;
	text-decoration: none;
	outline: none;
  -webkit-transition: all .3s;
  transition: all .3s;
  font-weight: bold;
  padding: 15px;
  margin-bottom: 5px;
  width: 100%;
  height: auto;
  text-align: center;
  background-color: #dc143c;
  border: 3px solid #dc143c;
  color: #fff;
  border-radius:20px;
  position: relative;
  overflow: hidden;
}

.buttondeep2 {
	display: inline-block;
	text-align: center;
	text-decoration: none;
	outline: none;
  -webkit-transition: all .3s;
  transition: all .3s;
  font-weight: bold;
  padding: 15px;
  margin-bottom: 5px;
  width: 100%;
  height: auto;
  text-align: center;
  background-color: #dc143c;
  border: 3px solid #dc143c;
  color: #fff;
  border-radius:20px;
  position: relative;
  overflow: hidden;
}

.fs150{
  font-size: 150%;
}

.fcbk{
  color: #0d1927;
}

.buttondeep:visited,.buttondeep2:visited{
  color: #fff;
}

.buttondeep,.buttondeep2:link{
  color: #fff;
}

.buttondeep:hover,.buttondeep2:hover {
  background-color: #fff;
  color: #dc143c;
  border: 3px solid #dc143c;
}

@keyframes shiny {
  0% {
      transform: scale(0) rotate(25deg);
      opacity: 0;
  }

  50% {
      transform: scale(1) rotate(25deg);
      opacity: 1;
  }

  100% {
      transform: scale(50) rotate(25deg);
      opacity: 0;
  }
}


.buttondeep::after,.buttondeep2::after {
  content: '';
  position: absolute;
  top: -100px;
  left: -100px;
  width: 50px;
  height: 50px;
  background-image: linear-gradient(100deg,  rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 1) 100%, rgba(255, 255, 255, 0) 0%);
  
  /* アニメーション */
  animation-name: shiny;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@media screen and (min-width: 768px) {
  .rank_btn:after {
    content: "";
    display: block;
    clear: both;
  }
  
  .rank_btn {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    margin:0;
  }
  
  .toprank_btn {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    margin:0;
  }
  
  .button01 {
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    float:left;
    width: 50%;
    margin-right:1%;
  }
  
  .button02 {
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    float:right;
    width: 50%;
    margin-left:1%;
    border: 20px 20px 0 0;
  }
  
  .button03 {
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    float:right;
    width: 100%;
    margin-left:1%;
  }
  
  .button00 {
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    float:right;
    width: 50%;
    margin-left:1%;
  }

  .buttondeep {
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    float:right;
    width: 50%;
    margin-left:1%;
  }

  .buttondeep2 {
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    float:right;
    width: 100%;
    margin-left:1%;
  }

  .toprank_btn .button00,.toprank_btn .button01,.toprank_btn .button02,.toprank_btn .button03,buttondeep, .buttondeep2{
    width: 100%;
  }
}

/* ranking hikakulist */

.hikakulist{
display: flex;
flex-wrap: wrap;
width: 100%;
  border: 1px solid #04bed0;
  border-bottom: none;
}

.hikakulist li{
  list-style-type: square;
  margin-left: 1em;
}

.ranking_01 dt{
 width: 25%;
 border-bottom: 1px solid #04bed0;
 margin:0;
 padding:5px;
 background-color: #dffcff;
 font-weight: bold;
}

.ranking_01 dd{
 width: 75%;
  border-bottom: 1px solid #04bed0;
 margin:0;
 padding:5px;
}

.ranking_01 dd:hover {
  background-color: #dffcff;
}

/* ranking kuchikomi */
.kuchikomi {
  border: 1px solid #04bed0;
  margin: 20px 0;
  padding: 0;
}

.kuchikomi_inner{
  overflow: hidden;
}

.kuchikomi2 {
  border: 1px solid #0d1927;
  margin: 20px 0;
  padding: 0;

}

.kuchikomi:last-child {
  margin-bottom: 30px;
}

.midashi {
  background-color: #dffcff;
  font-weight: bold;
  padding: .5em 1em;
  color: #0d1927;
  letter-spacing: .075em;
  }

.midashi2 {
  background-color: #f5f5f5;
  font-weight: bold;
  padding: .5em 1em;
  color: #0d1927;
  letter-spacing: .075em;
  }


.kuchikomi p {
  margin-top: 5px;
  padding: 0 1em;
}

.kuchikomi2 p {
  margin-top: 5px;
  padding: 0 1em;
}

.age {
  border-top: 1px dotted #04bed0;
  font-size: 70%;
  padding:10px 20px;
  text-align: right;
}

.age2 {
  border-top: 1px dotted #0d1927;
  font-size: 70%;
  padding:10px 20px;
  text-align: right;
}



/* jirei */

.jirei {
  background-color: #dffcff;
  border: 1px solid #04bed0;
  margin: 20px;
  padding: 1.25em;
  color: #0d1927;
  letter-spacing: .1em;
  line-height: 1.75em;
}

.jirei li{
  list-style-type: square;
  margin-left:1em;
  padding:0.5em;
  line-height: 1.5em;
}


/* contents_btn */
.contents_btn h5{
font-size: 1.6rem;
font-weight: bold;
color: #0d1927;
font-weight: bold;
margin: 0;
padding: 15px 0 10px 10px;
border-bottom: 1px solid #00ff00;
}

.contents_btn {
  display: block;
  padding: 0 0 5px 0;
  margin-top: 50px;
  margin-bottom: 30px;
  background-color: #fff;
  border: 10px solid #00ff00;
  position:relative;
}

.contents_btn .linkbox{
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.contents_btn:hover {
 opacity: 0.8;
 -webkit-transition: 0.3s ease-in-out;
 -moz-transition: 0.3s ease-in-out;
 -o-transition: 0.3s ease-in-out;
 transition: 0.3s ease-in-out;
}


.contents_btn p{
  padding: 0 20px;
  line-height : 1.5 ;
}

.contents_btn img {
  width: 25%;
  height:auto;
  float: left;
  margin: 0 10px 20px 5px;
}

.contents_btn:after{
content:"";
display:block;
clear:both
}


/* kanren kiji */
.kanren ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  }

.kanren li {
  width: 25%;
  background-color: rgba(255,255,255,.9);
  }

.kanren li a {
  display: block;
  padding: 5px;
  color: #0d1927;
  text-decoration: none;
  font-size: 1.3rem;
}

.kanren li a:hover {
  text-decoration: underline #04bed0;
}


.kanren img {
  width: 100%;
  height: auto;
  border: none;
}

.kanren_txt {
  padding: 5px;
  line-height : 1.5 ;
  letter-spacing: 0.15em;
}

/* sitemap*/
.sitemap {
  margin-top: 20px;
  margin-bottom: 20px;
}

.sitemap li {
  list-style: none;
  line-height: 2;
  font-weight: bold;
  font-size: 1.6rem;
  margin-left: 2em;
  padding: 5px;
}

.sitemap li a {
  color: #0d1927;
}

.sitemap li a:hover {
  color: #04bed0;
}


.sitemap li::before{
  content:url(../img/mokuji.png);
  display:inline-block;
  width:10px;
  height:auto;
  margin-right:20px;
  position:relative;
  top:7px;
  left:0;
}

.sitemap2 li::before{
  content:url(../img/mokuji2.png);
  display:inline-block;
  width:10px;
  height:auto;
  margin-right:20px;
  position:relative;
  top:7px;
  left:0;
}

/* pagetop */
#page-top {
  position: fixed;
  right: 30px;
  bottom: 20px;
  padding: 0;
  width: 80px;
  z-index: 3;
}


#page-top a:hover {
  opacity: 0.8;
}

#page-top img {
  display: block;
  height: auto;
  width: 80px;
}


/* time */
time {
  font-family: "メイリオ","Hiragino Kaku Gothic Pro","sans-serif";
  font-size:11px;
  color: #fff;
  background-image:url(../img/kijiinfo.png);
  background-position:left center;
  background-repeat:no-repeat;
  -webkit-background-size:auto 50%;
  background-size:auto 50%;
  margin:0 0 5px 0;
  padding:6px 0 4px 17px;
  display:inline-block;
}

.kijiinfo {
  text-align:right;
}


/* underlayer */

.leadstc {
  margin: 10px 0 30px 0;
  background-color: #dffcff;
}

.leadstc h1{
  margin: 0px;
  padding: 10px 0 5px 10px;
}

.leadstc p{
  padding: 0 25px 10px 25px;
}

/* bread */
.bread {
  width:100%;
  margin:10px 0 0 0;
  padding:10px;
}

.bread li {
  color: #fff;
  font-size: 1.1rem;
  text-decoration: none;
  float: left;
  width: auto;
  padding:  0 0.5em 0 1em;
  background-image: url(../img/list.png);
  background-repeat: no-repeat;
  background-position: left center;
}

.bread li:first-child{
  background-image: none; 
}

.bread li a{
  color: #fff;
}

.bread li a:visited {
  color: #fff;
}

.bread li a:hover {
  color:#04bed0;
}

.bread li:first-child {
  list-style:none;
}

.wrap-contents_nav {
  clear: both;
}


@media screen and (min-width: 1400px) {
  .bread_column{
    width: 1400px;
    margin-left: auto;
    margin-right: auto
  }
} 

@media screen and(max-width:768px){
 .bread {
   margin-top:8px;
   padding-left:10px;
   padding-right:10px;
   font-size: 1.1rem;
  }

 .bread li {
   list-style:inside;
   list-style-image:url(../img/list.png);
  }

 .bread li a{
   color: #fff;
  }

 .bread li a:visited {
   color: #fff;
  }

 .bread li a:hover {
   color:#04bed0;
  }
}

/* side menu 1 */

nav {
  line-height: 1.5;
  letter-spacing: 0.05em;
  margin-top: 10px;
}

nav dt a, nav li a:link, nav li a:visited{
  text-decoration: none;
}


.sidemenu01 {
  margin-bottom: 30px;
}

.sidemenu01 dl {
  margin: 0;
}

.sidemenu01 dt {
  margin:0;
  padding:5px;
	line-height:140%;
	font-weight:bold;
  font-size: 1.7rem;
  background-color:#04bed0;
  display: block;
  border: 1px solid #0d1927;
  -webkit-transition: all .5s;
  transition: all .5s;
}

.sidemenu01 dt a {
  display: block;
  color: #fff;
}

.sidemenu01 dt a:hover {
text-decoration: underline;
}

.sidemenu01 dd {
  margin-left: 0;
  padding: 0;
}

.sidemenu01 li{
  background: url(../img/check.png) no-repeat center left;
  -webkit-transition: all .5s;
  transition: all .5s;
  background-color: rgba(255, 255, 255, 1);
  background-clip: padding-box;
 border: 1px solid #a1b7d1;
 margin:10px 0;
}


.sidemenu01 li a {
  display: block;
  padding: 10px 10px 10px 30px;
  font-size: 1.6rem;
  color: #0d1927;
}

.sidemenu01 li:hover {
  background-color: rgba(255, 255, 255, 0.5);
}


/* side menu 2 */
.sidemenu02 {
  margin-bottom: 30px;
}

.sidemenu02 dl {
  margin: 0;
}

.sidemenu02 dt {
  margin:0;
  padding:5px;
 	line-height:140%;
	font-weight:bold;
  font-size: 1.7rem;
  background-color: #14bc14;
  border: 1px solid #0d1927;
  -webkit-transition: all .5s;
  transition: all .5s;
}

.sidemenu02 dt a {
  display: block;
  color: #fff;
}

.sidemenu02 dt a:hover {
  text-decoration: underline;
}

.sidemenu02 dd {
  margin-left:0px;
  padding: 0;
}

.sidemenu02 li {
  -webkit-transition: all .5s;
  transition: all .5s;
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid #a1b7d1;
  background-clip: padding-box;
  margin:10px 0;
}

.sidemenu02 li a {
  display: block;
  padding: 10px;
  font-size: 1.4rem;
  color:#0d1927;
}

.sidemenu02 li:hover {
  background-color: rgba(255, 255, 255, 0.5);
}

.sidemenu02 a:after {
  content: '';
  display: block;
  clear: both;
}

.sidemenu02 .imgsm02 {
  float: right;
  width: 80px;
  margin: 0 0 0 5px;
}

.sidemenu02 .text {
  float: none;
  width: auto;
  margin-left: 5px;
  padding-right: 10px;
}

.smenu_no1 {
  padding:0;
}

.smenu_no1 .imgsm02_no1{
  width: 100%;
  margin: 0;
}

.smenu_no1 .text {
font-weight: bold;
text-align: center;
}

/* ranking badge*/

.badge_sm {
  width: 80px;
  height:auto;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: absolute;
  top: -10px;
  left: -20px;
  z-index: 2;
  animation: badge 2s infinite;
}

.badge_sm img {
  width: 100%;
  height: auto;
}

.smenu_no1 {
  position: relative;
  }


@keyframes badge_sm {
  0% {
    transform: translate(2px, 0px);
  }
  5% {
    transform: translate(-2px, 0px);
  }
  10% {
    transform: translate(2px, 0px);
  }
  15% {
    transform: translate(-2px, 0px);
  }
  20% {
    transform: translate(2px, 0px);
  }
  25% {
     transform: translate(-2px, 0px);
  }
  30% {
    transform: translate(0px, 0px);
  }
}

/* side menu 3 */
.sidemenu03 {
  margin-bottom: 30px;
}

.sidemenu03 dl {
  margin: 0;
}

.sidemenu03 dt {
  margin:0;
  padding:5px;
	line-height:140%;
	font-weight:bold;
  font-size: 1.7rem;
  background-color: #04bed0;
  border: 1px solid #0d1927;
  -webkit-transition: all .5s;
  transition: all .5s;
}

.sidemenu03 dt a {
  display: block;
  color: #fff;
}

.sidemenu03 dt a:hover {
  text-decoration: underline;
}

.sidemenu03 dd {
  margin-left:0px;
  padding: 0;
}

.sidemenu03 li{
  background-size: 20px 20px;
  -webkit-transition: all .5s;
  transition: all .5s;
  background-color: rgba(255, 255, 255, 1);
  background-clip: padding-box;
  margin: 10px 0;
  border: 1px solid #a1b7d1;
}

.sidemenu03 li a {
  display: block;
  padding: 10px;
  font-size: 1.4rem;
  color: #0d1927;
}

.sidemenu03 li:hover {
  background-color: rgba(255, 255, 255, 0.5);
}

.sidemenu03 a:after {
  content: '';
  display: block;
  clear: both;
}

.sidemenu03 .imgsm03 {
  float: left;
  width: 70px;
  margin: 0;
}

.sidemenu03 .text {
  float: none;
  width: auto;
  margin-left: 70px;
  padding-left: 10px;
}


/* footer */
footer	{
  background-color: #0d1927;
  background-repeat: no-repeat;
  background-position: center 0;
  width: 100%;
  height: auto;
  padding: 10px;
  margin-top: 50px;
}

.footer-inner p {
  margin: 0;
  font-size: 1.2rem;
  text-align: center;
  color: #fff;
}

.footer-inner a:link {
  text-decoration: none;
}


.footer-inner p a:hover {
  text-decoration: underline;
}

.footer-inner p a {
  color: #fff;
}

/* box LR */
.wrap-contents_nav, .footer {
padding-left: 20px;
padding-right: 20px;
}

/* box UD */

.wrap-contents_nav {
margin-top: 10px;
margin-bottom: 20px;
}


/* tablet */

@media screen and (max-width: 900px) {
  .mainvisual {
    width: auto;
    height: 380px;
  }
}

@media screen and (max-width: 768px) {
  body {
    background-image: url(../img/bg_mn.png),url(../img/bg.png);
    background-repeat: no-repeat,repeat;
    background-position: center top, center top;
    background-attachment: scroll,fixed;
    font-size: 1.4rem;
  }

  p{
    font-size: 1.4rem;
  }

  h1 {
    font-size: 1.8rem;
  }
  
  h2 {
    font-size: 1.8rem;
    line-height: 1.4em;
  }

  h3 {
    font-size: 1.6rem;
  }

 
  h4 {
    font-size: 1.6rem;
  }

 .ranking h3 {
    font-size: 1.8rem;
  }
  
  .rankingdeep h3{
    padding: 0 5px 20px 100px;
    font-size: 2rem;
    border-bottom: 3px solid #00ff00;
  }
  .ranking h4{
    font-size: 1.8rem;
  }

  .contents02 h3 {
    padding-left: 5px;
    background-size: 30px;
  }
 
  .toprank h1{
    padding:5px;
  }
    
  .toprank h2{
    padding:10px;
  }

  .gnav{
    display: none;
  }

  .header-inner {
  padding-top: 40px;
  }

  .mainvisual {
    width: auto;
    height: 330px;
  }


 
  .table_toprank th,.table_toprank td{
    font-size: 1.2rem;
  }

  .table_toprank .shamei img {
    width: 100%;
  }

  .table_toprank img{
    width: 20%;
  }

  .toprank_btn {
    font-size:1.4rem;
  }

   
  .table_toprank{
    width: 160%;
  }

  .mokuji li{
    font-size: 1.4rem; 
    margin:0 5px;
  }


  .midashi,.midashi2,.kuchikomi p,.kuchikomi2 p {
    font-size: 1.3rem;
  }

  .sidemenu01 dt,.sidemenu02 dt,.sidemenu03 dt,.sidemenu01 li a,.sidemenu02 li a,.sidemenu03 li a{
    font-size: 1.3rem;
  }

  .kanren li {
    width: 50%;
  }

  #page-top {
    padding: 0;
    position: fixed;
    right: 10px;
    bottom: 2px;
    width: 60px;
  }
  
  #page-top a {
    display: block;
    width: 60px;
    height: auto;
  }
  
  #page-top a:hover {
    opacity: 0.8;
  }
  
  #page-top img {
    display: block;
    width: 60px;
    height: auto;
  }

  .wrap-contents_nav {
    clear: both;
  }
}

/* responsive adjustment */
@media screen and (max-width: 600px) {
  .mainvisual {
    width: auto;
    height: 250px;
  }
    
  .shouhin {
    width: 100%;
    height: auto;
    margin: 0 auto 5px auto;
  }
  
  .info {
    width: 100%;
    height: auto;
  }
  
  .info li{
    font-size: 1.6rem;
    }
  
  .two_box {
    flex-direction: row;
    -moz-flex-wrap : wrap;
    -ms-flex-wrap : wrap;
    -o-flex-wrap : wrap;
    -webkit-flex-wrap : wrap;
    flex-wrap: wrap;
  }

  .contents_btn img {
    width: 100px;
  }

}

/* sp */

@media screen and (max-width: 414px) {
  body{
    font-size: 1.2rem;
  }

  p {
    font-size: 1.2rem;
  }

  .logo {
    width: 100%;
    height: auto;
    top: 5px;
    right: 0;
    left:0px;
  }

  .mainvisual {
    width: auto;
    height: 180px;
  }

  .table_toprank{
    width: 200%;
  }

  .table_toprank th{
    width: 10%;
  }
  
  .table_toprank td{
    width: 18%;
  }

  .toprank h1 {
    font-size: 1.8rem;
  }

  .toprank h2{
    background-size: contain;
    font-size: 1.8rem;
  }

  .toprank_btn {
    font-size:1.2rem;
  }

  .button00,.button01,.button02,.button03 {
    padding: 5px;
  }

  .mokuji li{
    font-size: 1.2rem; 
    margin:0 5px;
  }


  .midashi,.midashi2,.kuchikomi p,.kuchikomi2 p {
    font-size: 1.2rem;
  }

}

/* rakuraku sp */
@media screen and (max-width: 340px) {
  .mainvisual {
 	  width: auto;
 	  height: 155px;
 	}

  .logo {
    width: 100%;
    height: auto;
    top: 5px;
    right: 0;
    left:0px;
  }
} 


/* contents-boxとbox-sidemenuを横に */
@media screen and (min-width: 768px) {
  .wrap-contents_nav:after {
    content: "";
    display: block;
    clear: both;
  }

  .contents-box {
    float: right;
    width: 75%;
    padding-left: 20px;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .sidemenu-box {
    float: left;
    width: 25%;
  }
}

/* all 1400 */
@media screen and (min-width: 1400px) {
  .wrap-contents_nav, .footer-inner, .header-inner, .main, .best3, header nav ul, .toprank,.gnav ul {
    width: 1400px;
    margin-left: auto;
    margin-right: auto;
  }
}


/* 2024.10 追記
=========================================*/
.kanren img {
  aspect-ratio: 1/1;
}

.shouhin img {
  aspect-ratio: 3/2;
}