* {
	border-sizing:border-box;
	border-collapse:collapse;
	font-family:  'Noto Sans JP', sans-serif ;
}

html {
  overflow-y: scroll;
  overflow-x: hidden;
scroll-behavior:smooth;
}

body {
margin:0 auto;
padding:0;
  overflow-x: hidden;
}

.img-responsive {
  display: inline-block;
  height: auto;
  max-width: 100%;
margin:0 auto;
}

div:after,
ul:after {
 content: "";
display: block;
 clear: both;
}

ul{
 list-style: none;
 margin: 0px;
 padding: 0px;
}

a img {
    transition: opacity 0.2s linear;
}
a:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}


/*汎用*/

.pc { display: block !important; }
.sp { display: none !important; }
@media only screen and (max-width: 992px) {
.pc { display: none !important; }
.sp { display: block !important; }
}
.pc2 { display: block !important; }
.sp2 { display: none !important; }
@media only screen and (max-width: 878px) {
.pc2 { display: none !important; }
.sp2 { display: block !important; }
}

.ggmap {
position: relative;
padding-bottom: 74%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
 
.ggmap iframe,
.ggmap object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.tact{text-align:center;}
.tart{text-align:right;}
.talt{text-align:left;}


/*header*/

header{
    padding:0;
    position:relative;
    max-width:1200px;
    width:100%;
    margin:0 auto;
}
.headerInner{
    display: flex;
    flex-wrap: wrap;
    max-width:1200px;
    width:100%;
    margin:0 auto;
    position:relative;
    
}
header .logo{
    position: absolute;
    right: 10px;
    top: 0;
}
header .logo a{ 
    max-width: 80px;
    width: 80px;
    margin: 0 auto;
    padding: 0;
    text-align: right;
    display: inline-block;
}


@media only screen and (max-width: 768px) {

header{
    background-color:#D1D3D1;
    text-align:right;
}
header .logo{
    position:relative;
    width:80px;
    height:70px;
    display:inline-block;
}

}




/*menuSP*/
header input[type="checkbox"].on-off{
    display: none;
}



header label {
    color: #BF9734;
    display: inline-block;
    margin: 0;
    position:absolute;
    width: auto;
    top: 0px;
    left: 10px;
    z-index: 9999;
}
header label img{
    width:65px;
    height:65px;
}
header ul {
    -webkit-transition: all 0.8s;
    -moz-transition: all 0.8s;
    -ms-transition: all 0.8s;
    -o-transition: all 0.8s;
    transition: all 0.8s;
    margin: 0;
    padding: 0;
    list-style: none;
position:fixed;
    top: 70px;
background-color:#fff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    z-index:9998;
}


header input[type="checkbox"].on-off + ul{
    height: 0;
    overflow: hidden;
    width: 100%;
    background-color: rgba(255,255,255,0);
    right:0;
    top: 70px;
    padding: 0 15px;
}

header input[type="checkbox"].on-off:checked + ul{
    height: calc(100% - 70px);
    width: 100%;
    background-color: rgba(255,255,255,0.95);
    right:0;
    top: 70px;
    padding: 0 15px;
}

header ul li{
    width:calc(50%);
}
@media only screen and (max-width: 768px) {
header ul {
    display: block;
}
header ul li{
    width:calc(100%);
    max-width:260px;
    margin:0 auto;
}
}


/**/

.mainimage{
    background-color: #bfd63b;
    text-align:center;
    margin:0 auto 30px;
}
.mainimage p{
    padding: 0px 10px 30px;
    margin:0 auto;
    line-height:1.8em;
}


/*flagTitle*/

.flagTitleOuter{
    background-image:url(images/item_flag.png);
    background-position:center;
    background-size:cover;
    max-width:1180px;
    margin:0 auto 30px;
}
.flagTitleInner{
    max-width:516px;
    margin:0 auto;
}


/*rankList*/

.rankList{
    max-width:1180px;
    margin:0 auto 30px;
}
.rankList ul{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin:0 auto;
}
.rankList ul li{
    width:calc(50%);
    padding:5px;
}
.rankList ul li a{}
.rankList ul li a img{
    border:1px solid #000;
}
@media only screen and (max-width: 768px) {
.rankList ul li{
    width:calc(100%);
}
}


/*footer*/

footer{
    background-color:#8CC63F;
    font-size:12px;
    color:#fff;
    text-align:center;
    padding:7px;
}



/*rank*/

.rankTitleOuter{
    border-top:70px solid #D1D3D1;
    border-bottom:3px solid;
    margin:0 0 30px;
}
@media only screen and (max-width: 768px) {
.rankTitleOuter{
    border-top:none;
}
}
.rankTitleInner{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    max-width:1180px;
    margin:0 auto;
}
.rankTitleImage{
    width:100%;
    max-width:434px;
}
.rankTitleText{
    width:calc(100% - 434px);
    text-align:right;
    font-weight:bold;
    padding:7px;
}

@media only screen and (max-width: 768px) {
.rankTitleInner{
    display: block;
}
.rankTitleText{
    width:calc(100%);
    padding:0 7px 7px;
}
}


.rank01 .rankTitleOuter	   { border-color: #7fd6f2!important;}
.rank01 .rankTitleText		   {color: #7fd6f2;}
.rank01 .rankSubTitle	{background-color: #7fd6f2;}

.rank02 .rankTitleOuter	   { border-color: #8DC983!important;}
.rank02 .rankTitleText		   {color: #8DC983;}
.rank02 .rankSubTitle	{background-color: #8DC983;}

.rank03 .rankTitleOuter	   { border-color: #FCAD62!important;}
.rank03 .rankTitleText		   {color: #FCAD62;}
.rank03 .rankSubTitle	{background-color: #FCAD62;}

.rank04 .rankTitleOuter	   { border-color: #FC5E97!important;}
.rank04 .rankTitleText		   {color: #FC5E97;}
.rank04 .rankSubTitle	{background-color: #FC5E97;}

.rank05 .rankTitleOuter	   { border-color: #FED700!important;}
.rank05 .rankTitleText		   {color: #FED700;}
.rank05 .rankSubTitle	{background-color: #FED700;}

.rank06 .rankTitleOuter	   { border-color: #FFC7C4!important;}
.rank06 .rankTitleText		   {color: #FFC7C4;}
.rank06 .rankSubTitle	{background-color: #FFC7C4;}

.rank07 .rankTitleOuter	   { border-color: #A6C7C4!important;}
.rank07 .rankTitleText		   {color: #A6C7C4;}
.rank07 .rankSubTitle	{background-color: #A6C7C4;}

.rank08 .rankTitleOuter	   { border-color: #CEA44F!important;}
.rank08 .rankTitleText		   {color: #CEA44F;}
.rank08 .rankSubTitle	{background-color: #CEA44F;}

.rank09 .rankTitleOuter	   { border-color: #63C7C4!important;}
.rank09 .rankTitleText		   {color: #63C7C4;}
.rank09 .rankSubTitle	{background-color: #63C7C4;}

.rank10 .rankTitleOuter	   { border-color: #6D9CC4!important;}
.rank10 .rankTitleText		   {color: #6D9CC4;}
.rank10 .rankSubTitle	{background-color: #6D9CC4;}

.rank11 .rankTitleOuter	   { border-color: #D697C4!important;}
.rank11 .rankTitleText		   {color: #D697C4;}
.rank11 .rankSubTitle	{background-color: #D697C4;}

.rank99 .rankTitleOuter	   { border-color: #FB9183!important;}
.rank99 .rankTitleText		   {color: #FB9183;}
.rank99 .rankSubTitle	{background-color: #FB9183;}


.rankIntroText{
    max-width:960px;
    margin:0 auto 30px;
    line-height:1.8em;
    padding:0 15px;
}

.rankMainimage{
    max-width:850px;
    margin:0 auto 30px;
    padding:0 15px;
}

.rankSubTitle{
    max-width:1180px;
    margin:0 auto 15px;
    color:#fff;
    padding:7px 15px;
    font-size:1.5em;
    font-weight:bold;
}

.rankSection,
.rankSectionTips{
    max-width:1000px;
    margin:0 auto 30px;
}

.rankSectionTips{
    border-top:1px solid #CECCCC;
    padding:15px 15px 0;
}

.sectImage {
    margin: 0 0 15px;
}

.sectText{
    border-bottom:1px solid #CECCCC;
    padding:0px 0px 15px;
    margin:0px 0px 15px;
    line-height:2em;
}

.sectInfo{}
.sectInfo dl{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.sectInfo dt{
    width:35px;
}
.sectInfo dd{
    width:calc(100% - 35px);
    margin:0;
    padding:0 10px 0;
    font-size: 0.8em;
}
.sectInfo dd a{
    word-break: break-all;
}

/*toTop*/

.toTop{
    border-top:3px solid #8CC63F;
    padding:10px;
    text-align:center;
}
.toTop a{
    position: relative;
    border: 2px solid #8cc63f;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    max-width: 260px;
    margin: 0 auto;
    height: 45px;
    transition: all 0.2s linear;
    color: #FFF;
    background-color:#8cc63f;
}
.toTop a:hover{
    color: #8cc63f;
    background-color:#fff;
    text-decoration:none;
}
.toTop a:after{
    font-family: "Font Awesome 5 free";
    content: "\f105";
    font-weight : 900;
    position: absolute;
    top:50%;
    right: 15px;
    transform: translateY(-50%);
    -webkit- transform: translateY(-50%);
}

.rankSectionTips a,
.sectInfo dd a {
    color:#333;
   text-decoration:underline; 
}