@charset "utf-8";

header {
    display: flex;
    align-items: center;
    padding: .5em 1em 0;
    max-width: 375px;
    margin: 0 auto;
}

h1 {
	font-weight: bold;
	/* color: #006a1d; */
	font-size: 80%;
	letter-spacing: 0.25em;
}

h1 img{
	width: auto;
height: 4.6em;
margin-top: 0.5em;
}

h2	{
	text-align: center;
	font-size: 1.2em;
	padding: .5em 0;
	font-weight: 900;
}

section h2 ~ * {
    padding: 1em;
    max-width: 375px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.index_recommend  {
    margin-top: .5rem;
}

.index_recommend h2 ~ div {
    border-top: 4px solid #00bd34;
}

.index_recommend h2 {
    position: relative;
    background-color: transparent;
    /* font-size: 2em; */
    text-align: left;
    padding: 0 8.5rem .5rem 1rem;
    font-weight: normal;
    max-width: 375px;
    margin: 0 auto;
    border: none;
}

.index_recommend h2 img {
	opacity: .8;
}

.index_recommend h2::after {
	content: "";
	background-image: url(../img/index_recommend.png);
	position: absolute;
	width: 6em;
	height: 10em;
	background-size: 100% auto;
	right: 1em;
	bottom: -1em;
	background-repeat: no-repeat;
	background-position: center bottom;
	z-index: 1;
}

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

.index_recommend_upper a {
    display: block;
    width: 11em;
    height: 18em;
    overflow: hidden;
    float: right;
    margin-left: 1em;
    border: .5em #fff solid;
    box-shadow: 0 2px 4px #666;
}

.index_recommend_upper a img {
	width: 15em;
}

.index_recommend .btn{
	filter: hue-rotate(-128deg);
}

.index_recommend dl {
	margin-bottom: .5em;
}

.index_recommend dl dt {
    font-weight: 900;
    font-size: 1.4em;
    line-height: 1.25;
    margin-bottom: .25em;
}

.index_recommend dl dd	{
}

.index_ranking h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 0;
}

.index_ranking h2::before, .index_ranking h2::after {
    content: "";
    width: 2em;
    height: 1em;
    background-image: url(../img/crown.png);
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom;
}


.index_ranking h2 ~ div	{
}

.index_ranking ul {
    border: 2px #fff solid;
    box-shadow: 0 0.3em 0.26em #aaa;
    border-radius: 1em;
    overflow: hidden;
    background-color: #fff;
}

.index_ranking li a {
	position: relative;
    display: flex;
    align-items: center;
    border-bottom: 1px dotted #ccc;
	padding: 0 2em 0 0
}

.index_ranking li:last-of-type a {
	border-bottom: none;
}

.index_ranking li a span {
    display: block;
    height: 2em;
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-image: url(../img/crown.png);
    text-align: center;
    padding: .5rem 1.4rem;
    font-weight: 900;
    color: #fff;
    font-size: .8em;
}

.index_ranking li:nth-of-type(1) a span {
	filter: hue-rotate(320deg);
}
.index_ranking li:nth-of-type(2) a span {
}
.index_ranking li:nth-of-type(3) a span {
	filter: hue-rotate(45deg);
}
.index_ranking li:nth-of-type(4) a span {
	filter: hue-rotate(170deg);
}
.index_ranking li:nth-of-type(5) a span {
	filter: hue-rotate(200deg);
}

.index_ranking li a::after {
    content: "";
    display: block;
    background-image: url(../img/chevron-right-light.svg);
    width: 1em;
    height: 1em;
    background-repeat: no-repeat;
    background-position: right center;
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
}

.index_ranking li figure {
    width: 5em;
    height: 5em;
    overflow: hidden;
    margin-right: .5em;
}





/*----------------------------------------------------------*/

@media ( min-width:768px ) {

section h2 ~ * {
    max-width: 700px;
}

.index_recommend_upper	{
	    position: relative;
			position: relative;
}

.index_recommend_upper a {
	float: none;
	position: absolute;
	right: 0;
}

.index_recommend h2 ~ div {
	min-height: 16em;
}

.index_recommend h2 ~ div > * {
	padding-right: 12em;

}

.index_recommend dl {
    margin-bottom: 1em;
}










}/*----------------------------------------------------------*/