@charset "UTF-8";
.cf { zoom: 1; /* for ie */ }
.cf:after { content: ""; display: table; clear: both; }

#page { width: 1160px; margin: 0 auto; margin: 60px auto; }
@media screen and (max-width: 480px) { #page { width: 100% !important; } }
@media screen and (max-width: 599px) { #page { margin: 30px auto; } }
@media screen and (max-width: 480px) { #page .page-in { padding: 1em; } }
#page h1 { font-size: 1.5em; padding: 1em 0; border-top: 2px solid #ff0066; border-bottom: 1px solid #ccc; margin-bottom: 2em; }
@media screen and (max-width: 480px) { #page h1 { margin-bottom: 1em; } }
#page h2, #page h3, #page h4 { margin-top: 2em; margin-bottom: 1em; }
@media screen and (max-width: 480px) { #page h2, #page h3, #page h4 { margin-top: 0; } }
#page h2 { border-left: 3px solid #ff0066; padding: 0.75em; font-size: 1.4em; background: #f5f5f5; }
#page h3 { border-left: 3px solid #ff0066; padding-left: 1em; font-size: 1.2em; }
#page h4 { border-left: 3px solid #ddd; padding-left: 1em; }
#page .col h4 { margin-top: 1em; }
#page .section { margin-bottom: 2em; }
#page a { text-decoration: underline; }
#page p { margin-bottom: 1em; }
#page p a { display: inline; }
#page ul, #page ol { margin-bottom: 2em; }
#page .icon-q { background: url(../img/icon/icon_q.gif) no-repeat; padding-left: 30px; }
#page .icon-a { background: url(../img/icon/icon_a.gif) no-repeat; padding-left: 30px; }

.scroll-x { overflow-x: scroll; }

.figure-list { display: flex; gap: 10px; margin-bottom: 30px; }

.figure-list figure { min-width: 300px; padding-bottom: 10px; }

.figure-list figure img { width: 100%; margin-bottom: 10px; }

.figure-list figcaption { font-size: 0.9em; }

.link { margin-bottom: 15px; }
.link a { color: #ff0066; text-decoration: none; font-weight: bold; }
.link a:before { font-family: 'FontAwesome'; content: "\f0c1"; }

.page-link { padding: 15px; border: 1px solid #ddd; }
.page-link a { display: inline-block; color: #ff0066; font-weight: bold; }

#ranking .ranking-header { padding: 100px 0; text-align: center; background: url(https://www.companion-enkai.com/img/page-title.jpg); }
@media screen and (max-width: 480px) { #ranking .ranking-header { padding: 50px 0; background-size: 1000px; } }
#ranking .ranking-header figure { margin-bottom: 30px; }
@media screen and (max-width: 480px) { #ranking .ranking-header figure { margin-bottom: 15px; padding: 10px; } }
#ranking .ranking-header h1 { font-size: 36px; font-weight: bold; line-height: 1; padding: 20px 30px; margin-bottom: 15px; color: #fff; border-top: 1px solid #fff; border-bottom: 1px solid #fff; display: inline-block; }
@media screen and (max-width: 480px) { #ranking .ranking-header h1 { font-size: 18px; padding: 15px 0; } }
#ranking .ranking-header .text { color: #fff; font-size: 0.9em; }
@media screen and (max-width: 480px) { #ranking .ranking-header .text { font-size: 0.8em; padding: 0 10px; } }
#ranking .ranking-nav { background: #333; }
#ranking .ranking-nav ul { width: 1160px; margin: 0 auto; }
@media screen and (max-width: 480px) { #ranking .ranking-nav ul { width: 100% !important; } }
#ranking .ranking-nav ul:after { content: ""; display: block; clear: both; }
#ranking .ranking-nav ul li { width: 20%; float: left; }
@media screen and (max-width: 480px) { #ranking .ranking-nav ul li { width: 50%; } }
#ranking .ranking-nav ul li a { text-align: center; color: #fff; padding: 20px 0; border-right: 1px solid #000; }
@media screen and (max-width: 480px) { #ranking .ranking-nav ul li a { padding: 10px 0; }
  #ranking .ranking-nav ul li a:nth-child(1), #ranking .ranking-nav ul li a:nth-child(2) { border-bottom: 1px solid #000; } }
#ranking .ranking-title { text-align: center; padding: 50px 0; }
@media screen and (max-width: 480px) { #ranking .ranking-title { padding: 15px 0; } }
#ranking .ranking-title h1 { font-weight: bold; font-size: 32px; margin-bottom: 15px; }
@media screen and (max-width: 480px) { #ranking .ranking-title h1 { font-size: 20px; margin-bottom: 10px; } }
@media screen and (max-width: 480px) { #ranking .ranking-title .text { padding: 0 10px; font-size: 0.9em; } }
#ranking .ranking-body { background: #eee; position: relative; padding: 100px 0 50px 0; }
@media screen and (max-width: 480px) { #ranking .ranking-body { padding: 3rem 0; } }
#ranking .ranking-body .sankaku { position: absolute; top: 0; left: 50%; margin-left: -20px; width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 20px solid #fff; }
#ranking .ranking-list:after { content: ""; display: block; clear: both; }
@media screen and (max-width: 480px) { #ranking .ranking-list { padding: 0 10px; } }
#ranking .ranking-list > li { position: relative; background: #fff !important; margin-bottom: 50px; }
#ranking .ranking-list > li:after { content: ""; display: block; clear: both; }
#ranking .ranking-list > li .number { position: absolute; top: 0; left: 30px; padding: 50px 0 15px; z-index: 9999; width: 50px; text-align: center; color: #fff; line-height: 1; font-size: 24px; font-weight: bold; background: #ddd url(../img/rank_02.png) no-repeat top 15px left 50%; background-size: 30px; color: #333; }
#ranking .ranking-list > li .number:last-child { margin-bottom: 0; }
#ranking .ranking-list > li .number:after { content: ''; position: absolute; left: 0; top: 100%; height: 0; width: 0; border-bottom: 20px solid transparent; border-left: 25px solid #ddd; border-right: 25px solid #ddd; }
#ranking .ranking-list > li .number01 { background: #AE9436 url(../img/rank_01.png) no-repeat top 15px left 50%; color: #fff; background-size: 30px; }
#ranking .ranking-list > li .number01:after { border-left: 25px solid #AE9436; border-right: 25px solid #AE9436; }
#ranking .ranking-list > li .number02 { background: #6B6F7D url(../img/rank_02.png) no-repeat top 15px left 50%; color: #fff; background-size: 30px; }
#ranking .ranking-list > li .number02:after { border-left: 25px solid #6B6F7D; border-right: 25px solid #6B6F7D; }
#ranking .ranking-list > li .number03 { background: #9A6C46 url(../img/rank_03.png) no-repeat top 15px left 50%; color: #fff; background-size: 30px; }
#ranking .ranking-list > li .number03:after { border-left: 25px solid #9A6C46; border-right: 25px solid #9A6C46; }
#ranking .ranking-list > li .pic { width: 37%; float: left; margin-right: 3%; }
@media screen and (max-width: 480px) { #ranking .ranking-list > li .pic { width: auto; font: none; margin-right: 0; } }
#ranking .ranking-list > li .pic img { width: 100%; }
#ranking .ranking-list > li .content { width: 60%; float: left; }
#ranking .ranking-list > li .content .in { padding: 30px 30px 30px 0; }
@media screen and (max-width: 480px) { #ranking .ranking-list > li .content .in { padding: 10px; } }
@media screen and (max-width: 480px) { #ranking .ranking-list > li .content { clear: both; width: auto; float: none; } }
#ranking .ranking-list > li .content .header { border-bottom: 1px solid #ddd; padding-bottom: 15px; margin-bottom: 15px; }
#ranking .ranking-list > li .content .name { font-size: 24px; font-weight: bold; }
#ranking .ranking-list > li .content .area { font-size: 0.9em; margin-bottom: 5px; }
#ranking .ranking-list > li .content .rating { display: flex; margin-bottom: 5px; }
#ranking .ranking-list > li .content .rating .star { line-height: 1; margin-right: 10px; }
#ranking .ranking-list > li .content .rating .star img { width: 100px; margin-right: 5px; }
#ranking .ranking-list > li .content .rating .kuchikomi:before { content: '\f27a'; font-family: 'FontAwesome'; padding-right: 5px; }
#ranking .ranking-list > li .content .rating .kuchikomi small { font-size: 0.8em; }
#ranking .ranking-list > li .content .kuchikomi-list { display: flex; gap: 10px; }
@media screen and (max-width: 480px) { #ranking .ranking-list > li .content .kuchikomi-list { padding-right: 0; } }
#ranking .ranking-list > li .content .kuchikomi-list li { display: inline-block; padding: 10px; background: #666; color: #fff; font-size: 0.9em; position: relative; -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; }
#ranking .ranking-list > li .content .kuchikomi-list li span { z-index: 9999; position: absolute; bottom: -10px; left: 10%; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #666; }
#ranking .check { background: #eee; text-align: center; padding-bottom: 30px; }

/*Chat Bubbles　CSS Setting*/
/* 全体のスタイル */
.voice { margin-bottom: 40px; }

/* 左画像 */
.voice-img-left { margin-left: 4px; margin-top: -1px; float: left; width: 80px; height: 80px; }

/* 右画像 */
.voice-img-right { margin-right: 4px; margin-top: -1px; float: right; width: 80px; height: 80px; }

.voice figure img { width: 100%; border: 2px solid #eee; border-radius: 50%; margin: 0; }

/* 画像の下のテキスト */
.voice-img-description { padding: 5px 0 0; font-weight: bold; font-size: 12px; text-align: center; }

/* 左からの吹き出しテキスト */
.voice-text-right { color: #444; position: relative; margin-left: 100px; margin-right: 100px; padding: 1.2em; border: 3px solid #eee; background-color: #fff; border-radius: 5px; /* 左の三角形を作る */ }
.voice-text-right:before { position: absolute; content: ''; border: 10px solid transparent; border-right: 10px solid #eee; top: 21px; left: -23px; }
.voice-text-right:after { position: absolute; content: ''; border: 10px solid transparent; border-right: 10px solid #fff; top: 21px; left: -19px; }

/* 右からの吹き出しテキスト */
.voice-text-left { position: relative; margin-left: 100px; margin-right: 100px; padding: 1.2em; border: 3px solid #eee; background-color: #fff; border-radius: 5px; /* 右の三角形を作る */ }
.voice-text-left:before { position: absolute; content: ''; border: 10px solid transparent; border-left: 10px solid #eee; top: 21px; right: -23px; }
.voice-text-left:after { position: absolute; content: ''; border: 10px solid transparent; border-left: 10px solid #fff; top: 21px; right: -19px; }

p.voice-text { margin: 0 0 8px; }
p.voice-text:last-child { margin-bottom: 0px; }

/* 回り込み解除 */
.voice:after, .voice:before { clear: both; content: ""; display: block; }

/*# sourceMappingURL=page.css.map */