*{
	padding:0;
	margin: 0;
	font-size: 62.5%;
	scroll-behavior: smooth;
}
body{
	font-family: 'Kosugi Maru','Roboto Condensed','Roboto Slab','Rochester', 'Rock Salt', sans-serif;
}

/*フェード効果*/

/* 画面外にいる状態 */
.fadein {
	opacity : 0;
	transform : translate(0, 50px);
	transition : all 500ms;
	}

/* 画面内に入った状態 */
.fadein.scrollin {
	opacity : 1;
	transform : translate(0, 0);
	}

/*header*/
.ranking-page{
	background-image:url(https://gigaplus.makeshop.jp/sdarts/project/2021ranking/image/bg.jpg);
	
}
p{
	font-size:3.5rem;
}
h2{
	text-align: center;
	padding: 20px;
	font-size:4rem;
	font-weight: 800;
	
}

h2::after{
  	content: " ";
	display: block;
	border-bottom: solid 3px #000;
	bottom: -30px;
	width: 100px;
	margin: 30px auto;
}
/*header*/
header img{
	width: 100%;
}
h1{
	padding: 0!important;
	margin: 0!important;
	background-image:url(https://gigaplus.makeshop.jp/sdarts/project/2021ranking/image/red_line.png);
	
}

.red-line{
	width: 100%;
	position: absolute;
}


.date{
	background-image:url(https://gigaplus.makeshop.jp/sdarts/project/2021ranking/image/red_line.png);
	height: 1.5em;
	font-size:4rem;
	margin: 0 auto;
	text-align: center;
	color: #fff;
	font-weight: 800;
	padding-top: 20px;
}

/*中の人*/
.introduction{
	background-color: #fff;
}
.introduction ul{
	list-style-type: none;
	display: flex;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-evenly;
    align-items: flex-start;
	
}
.introduction li{
	width: 28vw;
	font-size:2.5rem;
	margin: 30px 20px;
	text-align: center;
	
}
.introduction li img{
	width:200px;
}
.nakanohito_name{
	display:block;
	font-size:3rem;
	font-weight: bold;
	margin: 10px 0;
}


.ranking_container1{
	padding-top: 50px;
	
}

.h2_title{
	font-weight:bold; 
	margin-top:50px;
	display: block;
	text-align: center;
}
/*
.h2_title::before{
	content:"";
}
.h2_title::after{
	content: "";
}*/



.flex_00{
	margin: 30px 50px;
	display: flex;
	justify-content:space-around;
	align-items: center;
	
}

.h2_icon{
	width: 20vw;
	padding-left: 100px;
	display: block;
	margin: 15px;
}
.flex_00 p{
	padding: 60px 30px 60px 70px;
	width: 60%;
	background-image: url(https://gigaplus.makeshop.jp/sdarts/project/2021ranking/image/fukidashi01.png);
	background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    text-align: center;
}


/*rank_middle_container*/

.rank_mini_container{
	margin: 20px 50px;
	padding: 70px 20px 20px 20px;
	background-color: #fff;
	border-radius: 30px;
	position: relative;
	height: auto;
	z-index: 1;
}

/*.rank_mini_container::after{
    margin: 20px 50px;
	padding: 70px 20px 20px 20px;
	background-color: #fff;
	border-radius: 30px;
	position: absolute;
	height: 200px;
	z-index: 999;
	border: 1px solid #000;
	z-index:999;
}*/

h3 img{
	width:20vw;
	position: absolute;
	left:-20px;
	top:-40px;
}

.maker-logo{
	position: absolute;
	top:30px;
	right: 20px;
}
h4{
	font-size:1.8rem;
	margin-top: 70px;
	text-align: center;
	
	
}
.product{
	display: block;
	margin: 50px auto;
	
}

/*btn*/
@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;
    }
}
.kira-n_btn{
	display: block;
	padding: 20px;
	width: 70%;
	background-color: #76E475;
	color: #fff;
	text-decoration: none;
	border-radius: 30px;
	border: 3px solid #fff;
	box-shadow: 7px 9px 16px -7px rgba(0,0,0,0.6);
	text-align: center;
	position: absolute;
	bottom:-40px;
	right: -10px;
	overflow: hidden;
	font-size:3.5rem;
	font-weight: bold;
	
}


.kira-n_btn::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: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
/*comment*/

.flex-1{
	display:flex;
	justify-content: space-between;
	margin: 70px;
	margin-bottom: 90px;
	align-items: center;
	
	
}
.flex-1 p{
	font-size: 4rem;
	width: 70%;
	padding: 30px;
	margin-right: 50px;
}

.flex-1 img{
	width: 150px;
	height: 150px;
	border: 3px solid #000;
	border-radius: 100px;
	
}

.comment{
	position:relative;
    background:#FFFFFF;
    padding:20px;
    text-align:left;
    color:#333333;
    font-size:1.4rem;
    border-radius:35px;
    -webkit-border-radius:35px;
    -moz-border-radius:35px;
}

.comment:after{
  border: solid transparent;
    content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    border-color: rgba(255, 255, 255, 0);
    border-top-width:19px;
    border-bottom-width:19px;
    border-left-width:32px;
    border-right-width:32px;
    margin-top: -19px;
    border-left-color:#FFFFFF;
    left:100%;
    top:46%;
}
/*footer*/
.under-container{
	background-color: #D5CFCF;
	height:400px; 
}

.under-container h2{
	margin-bottom: 50px;
	
}
.under-container a{
	background-color: #fff;
	font-size:4rem;
	box-shadow: 9px 9px 0px 0px rgba(0,0,0,0.6);
	padding: 30px;
	margin: 0 50px;
	text-align: center;
	text-decoration: none;
	color: #000;

}
.flex{
	display: flex;
	justify-content: center;
}
/*home-btn*/

.white-area{
	position:relative;
	height: 200px;
	background-color: #fff;
	
}
.home-btn{
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	width: 60%;
	padding: 20px 50px;
	background-color: #ec9939;
	border-radius: 50px;
	box-shadow: 5px 5px 0px 0px rgba(0,0,0,0.6);
	text-align: center;
	text-decoration: none;
	color: #fff;
	font-weight: bolder;
	font-size:3.5rem;
}


/*line*/
.line{
	width: 50%;
	height: 2rem;
	background-image: -webkit-repeating-linear-gradient(135deg, #000, #000 1px, transparent 2px, transparent 5px);
	background-image: repeating-linear-gradient(-45deg, #000, #000 1px, transparent 2px, transparent 5px);
	background-size: 7px 7px;
	margin: 0 auto;
  
}



@media screen and (min-width:1024px) {
	.ranking_container1{
	max-width: 1200px;
	margin: 0 auto;

	}
	h3 img{
		width: 15vw;
	}
	.h2_icon {
    width: 15%;
    padding-left: 20%;
	}
	a:hover{
		opacity: 0.5;
	}
	h4{
		font-size:3rem;
	}
	.flex-1 p{
	font-size: 3rem;

}
}