/*
 Theme Name: Twenty Twenty-Five Child
 Template: twentytwentyfive
 Version: 1.0
*/



/* rankbox1 */
.rankbox1 {margin: 25px 0px 50px; background: #f7f7f7; padding: 15px; overflow:hidden; border-radius:7px;}
.rankbox1 h3.myrank, .rankbox1 h4.myrank {margin:0 0 10px; color: #ed6666;}
.rankbox1-table {font-size: 12px; display:grid;}
.rankbox1-table .orange {font-size: 15px;}
.rankbox1-table th {width: 30%; padding: 5px; vertical-align: middle;}
.rankbox1-table td {padding:5px 10px; background-color:white;}

/* button */
.btn {display:inline-block; padding:10px 25px; border:0; color:#4b3a24; border-radius:50px;}
a.btn-detail {color: #ffffff; font-weight:bold; background: #2ccc84; width: 88%; margin-top: 5px;}
a.btn-detail:hover {color: #2ccc84; background: white;}
a.btn-detail02 {color: #ffffff; background: #a0a0a0;}
a.btn-detail02:hover {color: #a0a0a0;}
.cta a.btn-detail, .pointbox-red a.btn-detail {background: #ed6666;}
.cta a.btn-detail:hover, .pointbox-red a.btn-detail:hover {color: #ed6666; background: white;}
.btn-detail:after {font-family: "Font Awesome 5 Free"; content: '\f054'; font-weight:bold; margin:10px;}
.btn-top:after {font-family: "Font Awesome 5 Free"; content: '\f077'; font-weight:bold; margin:10px;}
.btn-down:after {font-family: "Font Awesome 5 Free"; content: '\f078'; font-weight:bold; margin:10px;}

.bridge_design_button {display: inline-block; background: #2ccc84; font-weight: bold; color: #fff; padding: 0 15px; height: 40px; line-height: 40px; width: calc(100% - 1px); text-align:center;}
.bridge_design_button:after {font-family: "Font Awesome 5 Free"; content: '\f054'; font-weight:bold; float:right;}
a.bridge_design_button:hover {color:white; background:#1f9962;}
.ranking_list {clear: both;}
.ranking_list ul {list-style: none; width: 100%; margin-bottom: 30px; padding:0; overflow: hidden;}
.ranking_list ul li {width: 50%; float: right;}

/* 比較カード */
.hikaku-card-logo {margin-bottom: 10px}
.rank-span:before {font-family: "Font Awesome 5 Free"; content: '\f521';}
.rank-1 .rank-span, .rank-1 .rank-span:before {color:#FFD700;}
.rank-2 .rank-span, .rank-2 .rank-span:before {color:#C0C0C0;}
.rank-3 .rank-span, .rank-3 .rank-span:before {color:#C47222;}

/*　ランキング　*/
.rank-desc, .review-desc {font-size:90%;}
.rank-detail {border: none;}
.rank-detail th, .rank-detail td {border-color: white; background-color: #f1f1f1; font-weight: normal; padding: 10px;}

.rank-kuchikomi {background-color: white; padding: 10px; margin: 3px 0 10px; border-radius: 5px; font-size: 80%;}
.contributor {color:#666; border-bottom: 1px dashed #ccc; margin-bottom: 5px;}
.contributor span {color: orange;}
.hitokoto {padding:10px 5px;}
.hitokoto span:before {font-family:"Font Awesome 5 Free"; content:'\f00c'; margin-right:5px;}
.hitokoto-review {padding: 15px 15px 10px;}
.review-title span:before {font-family:"Font Awesome 5 Free"; content:'\f304'; margin-right:10px;}
.tag-red {display: inline-block; padding: 3px 8px; font-size: 10px; color: #FFF; background-color: #ff4f4f; border-radius: 5px;}

h3.myrank, h4.myrank, .myrank {border:none; font-weight:bold;}

.myrank1title:before {font-family: "Font Awesome 5 Free"; content: '\f521【1】'; color:#FFD700;}
.myrank2title:before {font-family: "Font Awesome 5 Free"; content: '\f521【2】'; color:#C0C0C0;}
.myrank3title:before {font-family: "Font Awesome 5 Free"; content: '\f521【3】'; color:#C47222;}
.myrank4title:before {font-family: "Font Awesome 5 Free"; content: '\f521【4】';}
.myrank5title:before {font-family: "Font Awesome 5 Free"; content: '\f521【5】';}
.myrank6title:before {font-family: "Font Awesome 5 Free"; content: '\f521【6】';}
.myrank7title:before {font-family: "Font Awesome 5 Free"; content: '\f521【7】';}
.myrank8title:before {font-family: "Font Awesome 5 Free"; content: '\f521【8】';}
.myrank9title:before {font-family: "Font Awesome 5 Free"; content: '\f521【9】';}
.myrank10title:before {font-family: "Font Awesome 5 Free"; content: '\f521【10】';}
.myrank11title:before {font-family: "Font Awesome 5 Free"; content: '\f521【11】';}
.myrank12title:before {font-family: "Font Awesome 5 Free"; content: '\f521【12】';}
.myrank13title:before {font-family: "Font Awesome 5 Free"; content: '\f521【13】';}
.myrank14title:before {font-family: "Font Awesome 5 Free"; content: '\f521【14】';}
.myrank15title:before {font-family: "Font Awesome 5 Free"; content: '\f521【15】';}
.myrank16title:before {font-family: "Font Awesome 5 Free"; content: '\f521【16】';}
.myrank17title:before {font-family: "Font Awesome 5 Free"; content: '\f521【17】';}
.myrank18title:before {font-family: "Font Awesome 5 Free"; content: '\f521【18】';}
.myrank19title:before {font-family: "Font Awesome 5 Free"; content: '\f521【19】';}
.myrank20title:before {font-family: "Font Awesome 5 Free"; content: '\f521【20】';}

.widgetranking {padding-left:40px;}
.widgetranking li {border-bottom:1px dashed #ccc; padding:10px; font-size:125%;}

li.widrank {font-weight:bold;}


/* タイプ別ランキング */
p#ranking_archive_headline {margin-bottom:2px;}
ul#ranking_catgory_sort {list-style: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: center;}
li.cat_sort_item {width: 33%;}
.cat_sort_item a {display:block; padding:10px; font-weight:bold; text-align:center; border: 2px solid #ed6666; border-radius: 7px; margin: 1px;}
.cat_sort_item a:hover, ul.widgethikaku a:hover {background-color:#ed6666; color:white;}
@media only screen and (max-width : 550px) {
	li.cat_sort_item {width: 50%;}
}





/* accordion-box */
.accordion-box {position: relative;}
.accordion-box label {height: 60px;/* グラデーションの高さ */ cursor: pointer; z-index: 1; text-align: center; position: absolute; bottom: 0; width: 100%; margin:0; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgb(247, 247, 247) 90%);}
.accordion-box input:checked ~ label {background: inherit; /* 開いた時グラデーションを消す */}
.accordion-box label:before {content: 'open';position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 0); color: #fff; background: #af978b; width: 18.75rem;}
.accordion-box label:after {font-family: "Font Awesome 5 Free"; content:'\f078'; font-weight: 700; position: absolute; bottom: 0; left: 58%; transform: translate(50px, 0); color: #fff; z-index: 1; animation: FloatVertical 2.5s ease-in-out infinite alternate;}
.accordion-box input {display: none;}
.accordion-box .accordion-container {overflow: hidden; height: 80px; /* 開く前に見えている部分の高さ */}
.accordion-box input:checked ~ label:after {font-family: "Font Awesome 5 Free"; content:'\f077'; font-weight: 700;}
.accordion-box input:checked ~ label:before {content: "close";}
.accordion-box input:checked ~ .accordion-container {height: auto; transition: all 0.5s; padding-bottom: 40px; /* 閉じるボタンのbottomからの位置 */}
.pr-box .accordion-box label {background: linear-gradient(to bottom,rgba(255,255,255,0) 0%,#fff1dd 90%);}


/* 吹き出し */
.balloon {display: flex; gap: 12px; margin: 1.5em 0;}
.balloon-right {flex-direction: row-reverse;}
.balloon-right .balloon-text::before {left: auto; right: -20px; border-right-color: transparent; border-left-color: #e6f0ff;}
.balloon-text {position: relative; background: #f3f3f3; padding: 0 16px; border-radius: 12px; max-width: 70%;}
.balloon-text::before {content: ""; position: absolute; top: 18px; left: -20px; border: 10px solid transparent; border-right-color: #f3f3f3;}