@charset "utf-8";
/* CSS Document */

body {
	font-family: "YuGothic","Yu Gothic Medium",sans-serif;
	color: #181818;
	font-size: 16px;
}

.main {
    margin: 0 auto;
    max-width: 900px;
}

/*    ここからトップの設定   */
.main-visual {
	width: 100%;
}

.top__txt {
	padding: 16px;
}

.top__txt_middle {
	padding: 0 16px;
}

.conteiner_padding {
	padding: 16px;
}

/*    ここからランキングの設定   */
.ranking {
    padding: 16px 16px 0 16px;
}

.ranking__title {
    position: relative;
    padding: 0.5em;
    background: #34a9ef;
    color: #ffffff;
    font-size: min(6vw,28px);
}

.ranking__title::before {
    position: absolute;
    content: '';
    top: 100%;
    left: 0;
    border: none;
    border-bottom: solid 15px transparent;
    border-right: solid 20px #477a8a;
}

.ranking__txt {
    margin: 24px 0;
}

.ranking__top_title {
	display: flex;
	margin: 16px 0;
	align-items: end;
}

.ranking__top_icon {
	width: 60px;
}

.ranking__top_name {
	color:#d2a83a;
	font-weight: bold;
	font-size: 28px;
}

.ranking_img {
    width: 100%;
}


.cta__sub_conteiner {
	display: flex;
	justify-content: center;
	align-items: flex-end;
}

.cta__item {
	width: 100%;
	margin: 0 10px 0 0;
}

.cta__item:nth-child( 2n ) {
	margin: 0;
}

.cta__btn {
	position: relative;
	width: 100%;
	height: 80px;
	line-height: 80px;
	display: inline-block;
	text-align: center;
	border-radius: 40px;
	color: #ffffff;
	background: #e86bb6;
	font-weight: bold;
	font-size: 20px;
	border-bottom: 5px solid #be4f92;
	box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
	overflow: hidden;
}

.cta__btn::after {
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	right: 5%;
	width: 0;
	height: 0;
	margin-top: -5px;
	border: 7px solid transparent;        /*top right bottom を透明化 */ 
	border-left: 11px solid #fff;
}

.btn__txt {
	padding: 0 7% 0 0;
    font-size: min(4.5vw,20px);
}

/*キラッと光る*/
.cta__btn::before {
	content: '';
	/*絶対配置でキラッと光るの位置を決める*/
	position: absolute;
	top: -20px;
	left: -50%;
	/*キラッと光る形状*/
	width: 20%;
	height: 50%;
	background: linear-gradient(to right, rgba(255,255,255,9) 0%, rgba(255,255,255,0.0) 100%);
	transform: skewX(125deg);
	animation: shiny 3s ease-in-out infinite;
}

.cta__margin {
	margin: 16px 0;
}

.men_btn {
	background: #34a9ef;
	border-bottom: 5px solid #0280C9;
}

.ctr__btn_description {
	display: flex;
    flex-direction: column;
    align-items: center;
	font-weight: bold;
	color: #4B4949;
	font-size: 14px;
}

.cta__main_item {
	position: relative;
    display: block;
    margin: 16px auto;
    padding: 24px 10px;
    text-align: center;
    background: linear-gradient(180deg, rgb(64, 162, 248), rgba(14, 244, 255, 1));
    color: #ffffff;
    font-size: 1.5em;
    font-weight: bold;
    border-bottom: 5px solid #0280C9;
    border-radius: 3rem;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
	overflow: hidden;
}

.cta__main_item::after {
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	right: 50px;
	width: 0;
	height: 0;
	margin-top: -5px;
	border: 9px solid transparent;        /*top right bottom を透明化 */ 
	border-left: 13px solid #fff;
}

/*　　　　　受賞情報　　　　　*/
.top__award {
	margin: 32px 0 28px;
}

.award__heading {
	margin: 0 0 20px 0;
	text-align: center;
	line-height: 1.4;
	color: #34a9ef;
	font-weight: bold;
	font-size: 24px;
}

.award__img_conteiner {
	display: flex;
	justify-content: space-evenly;
}

.award__img {
	width: 27%;
}

.cta__main_txt {
	line-height: 1.2;
	text-align: center;
	font-size: min(4vw,28px);
	color: #4B4949;
}

.annotation {
	margin: 16px 0 0 0;
	text-align: left;
	font-size: 0.7rem;
	color:#4B4949;
}

.annotation_under {
	text-align: left;
	font-size: 0.7rem;
	color:#4B4949;
}

/*キラッと光る*/
.cta__main_item::before {
	content: '';
	/*絶対配置でキラッと光るの位置を決める*/
	position: absolute;
	top: 0;
	left: -50%;
	/*キラッと光る形状*/
	width: 50%;
	height: 100%;
	background: linear-gradient(to right, rgba(255,255,255,9) 0%, rgba(255,255,255,0.0) 100%);
	transform: skewX(125deg);
	animation: shiny 3s ease-in-out infinite;
}

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

80% {
	transform: scale(1) rotate(120deg);
	opacity: 1;
}

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

/*      ランキング下位の設定       */
.ranking__conteiner_low-rank {
	border-top: solid 2px #e2e2e2;
	margin: 40px 0;
	padding: 40px 0 0 0;
}

.low-rank__title {
	color: #4B4949;
	font-size: 24px;
}

.low-rank__table {
    width: 100%;
	margin: 0 auto;
	text-align:center;
	border: solid #CCCCCC 1px;
	font-size: min(3.5vw,20px)
}

.table_headline{
	padding:8px 0;
	background:#d9d9d9;
	border: solid #CCCCCC 1px;
	font-size: min(4vw,20px);
}

.table_headline_rank {
	width: 15%;
}

.table_headline_name {
	width: 20%;
}

.table_headline_property {
	width: 45%;
}

.table_headline_link {
	width: 30%;
}

.low-rank__table_cell {
	padding: 8px;
	vertical-align: middle;
	background: #f4f4f4;
	border: solid #CCCCCC 1px;
}

.low-rank__table_icon {
	width: 70%;
    max-width: 90px;
    border-radius: 0.5rem;
    border: solid 0.2px #d4d2d2;
}

.table__icon_name {
	font-size: min(3vw,16px);
}

.low-rank__table_link {
	margin: 0 4px 0 0;
	color: #ffffff;
/* .position: relative;
	display: block;
	padding: 0.7em 8px;
	font-weight: bold;
	background: #e86bb6;
	border-radius: 0.5rem;
	font-size: min(4vw,20px); */
}

.dl__conteiner {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	padding: 0.7em 8px;
	font-weight: bold;
	background: #e86bb6;
	border-radius: 0.5rem;
	font-size: min(4vw,20px);
}

.dl__icon {
	width: 15%;
	height: 15%;
	min-width: 15px;
}

.low-rank__table_link::after {
	content: "";
	background-image: url(image\iconmonstr-save-lined-240.png);
	position: absolute;
	top: 50%;
	right: 50px;
	width: 50px;
	height: 50px;
	margin-top: -5px;
}

.property {
	padding: 12px;
	text-align: left;
}

.link_color {
	margin: 8px 0 0 0;
	background: #36a8f1;
}

/*      記事リンクの設定       */
.article {
	margin: 0 auto;
	padding: 0px 16px 40px 16px;
}

.article__title {
	text-align: center;
}

.article__title_img {
	max-width: 500px;
	width: 80%;
}

.article__list {
	position: relative;
	margin: 8px 0 24px 0;
}

.article__list_item::before {
	content: "★";
	position: absolute;
	left: 0;
	color: #e86ab7;
	font-size: min(4vw,20px);
}

.article__list_link {
	display: block;
	padding: 0 0 0 20px;
	color: #e86ab7;
	font-size: min(4vw,20px);
}

.article__list_btn {
	display: block;
	padding: 24px 10px 24px 10px;
	font-weight: bold;
	font-size: min(4vw,28px);
	text-align: center;
	color: #ffffff;
	background: #e86ab7;
	border-radius: 0.5rem;
	box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
}

/*      フッターの設定       */
.footer {
	padding: 40px 20px 40px 20px;
	background: #4B4949;
	text-align: center;
	color: #FFFFFF;
}

.footer__list {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 0 10px 0;
}

.footer__list_link {
	padding: 8px 10px 8px 10px;
	color: #FFFFFF;
	font-size: min(4vw,16px);
}

/*      文字スタイルの設定       */
.txt__color_yelow {
	color: #fcde44;
}

.txt__color_red {
	color: #d70003;
	font-weight: bold;
}

.txt__marker_yelow {
	font-weight: bolder;
	background: linear-gradient(transparent 40%, #ffff66 50%);
}

.txt__marker_pink {
	font-weight: bolder;
	background: linear-gradient(transparent 40%, #fec6d6 50%);
}

.txt__marker_bleu {
	font-weight: bolder;
	background: linear-gradient(transparent 40%, #a0e8fa 50%);
}

.txt__bold {
	font-weight: bold;
}

.wavy {
	font-weight: bold;
	border-bottom: dashed 2px #e86bb6;
}

@media screen and (min-width: 600px){
	.br {
		display: none;
	}

	.top__award {
		margin: 54px 0 60px;
	}

	.annotation,.annotation_under {
		text-align: center;
	}

	.cta__btn::before {
		content: '';
		/*絶対配置でキラッと光るの位置を決める*/
		position: absolute;
		top: 0px;
		left: -50%;
		/*キラッと光る形状*/
		width: 50%;
		height: 100%;
		background: linear-gradient(to right, rgba(255,255,255,9) 0%, rgba(255,255,255,0.0) 100%);
		transform: skewX(125deg);
		animation: shiny 3s ease-in-out infinite;
	}
}