@charset "UTF-8";

/* TAG --------------------------------------- */

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
h2 abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

html {
    box-sizing: border-box;
}

body {
    line-height: 1;
    font-family: 'Noto Sans Japanese', 'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif !important;
    color: #545454;
    font-size: 14px !important;
    line-height: 160% !important;
}

input[type="checkbox"],
input[type="radio"] {
    display: inline-block;
    margin: 0 2px;
    padding: 0;
    vertical-align: middle;
    position: relative;
    top: -2px;
    cursor: pointer;
}

img {
    vertical-align: bottom;
}

ul {
    list-style: none;
}

em {
    font-style: normal;
    font-weight: bold;
    border-bottom: 1px dashed #FB343D;
}


/* Common --------------------------------------- */

a {
    color: #545454;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    color: #545454;
}

.hidden {
    display: none;
}

.clear {
    clear: both;
    font-size: 0px;
    line-height: 0px;
}

.alpha a:hover img {
    opacity: 0.8;
    filter: alpha(opacity=80);
    -ms-filter: "alpha(opacity=80)";
}

.mb00 {
    margin-bottom: 0px !important;
}

.mb10 {
    margin-bottom: 10px !important;
}

.mb20 {
    margin-bottom: 20px !important;
}

.mb30 {
    margin-bottom: 30px !important;
}

.mb40 {
    margin-bottom: 40px !important;
}

.mt10 {
    margin-top: 10px !important;
}

.mt20 {
    margin-top: 20px !important;
}

.mt30 {
    margin-top: 30px !important;
}

.mt40 {
    margin-top: 40px !important;
}

.pb10 {
    padding-bottom: 10px !important;
}

.pb20 {
    padding-bottom: 20px !important;
}

.pb30 {
    padding-bottom: 30px !important;
}

.pb40 {
    padding-bottom: 40px !important;
}

.pt10 {
    padding-top: 10px !important;
}

.pt20 {
    padding-top: 20px !important;
}

.pt30 {
    padding-top: 30px !important;
}

.pt40 {
    padding-top: 40px !important;
}

.backtotop {
    position: fixed;
    right: 10px;
    bottom: 10px;
    z-index: 9000;
    display: none;
}

.backtotop a {
    background: url(../../common/img/btn_pagetop.png) no-repeat center center;
    width: 64px;
    height: 64px;
    display: block;
    background-size: contain;
    text-indent: -9999px;
    outline: none;
}

.backtotop a:hover {
    opacity: 0.8;
    filter: alpha(opacity=80);
    -ms-filter: "alpha(opacity=80)";
}


/* abtest 210202 --------------------------------------- */

.backtotopb {
    position: fixed;
    right: 10px;
    bottom: 10px;
    z-index: 9000;
    display: none;
}

.backtotopb a {
    background: url(../../common/img/btn_pagetop-b.png) no-repeat center center;
    width: 64px;
    height: 64px;
    display: block;
    background-size: contain;
    text-indent: -9999px;
    outline: none;
}

.backtotopb a:hover {
    opacity: 0.8;
    filter: alpha(opacity=80);
    -ms-filter: "alpha(opacity=80)";
}


/* ratingStar --------------------------------------- */

.rate {
    margin: 0px;
    position: relative;
    display: inline-block;
    width: 80px;
    height: 21px;
    font-size: 16px;
}

.rate:before,
.rate:after {
    position: absolute;
    top: 0px;
    left: 0px;
    content: '★★★★★';
    display: inline-block;
    height: 21px;
}

.rate:before {
    color: #999;
}

.rate:after {
    color: #FF7800;
    overflow: hidden;
    white-space: nowrap;
}

.rate0:after {
    width: 0px;
}

.rate1:after {
    width: 16px;
}

.rate2:after {
    width: 32px;
}

.rate3:after {
    width: 48px;
}

.rate4:after {
    width: 64px;
}

.rate5:after {
    width: 80px;
}

.ratingNum {
    color: #FF7800;
    font-size: 32px;
    margin: 5px 0px;
    display: block;
}


/* gradation ------------------------------------------------ */

.gradationType01 {
    background: #ff7e16;
    background: -moz-linear-gradient( #ffdd5b 0%, #ff7e16 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#ffdd5b), to(#ff7e16));
    background: -webkit-linear-gradient( #ffdd5b 0%, #ff7e16 100%);
    background: -o-linear-gradient( #ffdd5b 0%, #ff7e16 100%);
    background: linear-gradient( #ffdd5b 0%, #ff7e16 100%);
}

.gradationType02 {
    background: #D80500;
    background: -moz-linear-gradient( #F95900 0%, #D80500 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#F95900), to(#D80500));
    background: -webkit-linear-gradient( #F95900 0%, #D80500 100%);
    background: -o-linear-gradient( #F95900 0%, #D80500 100%);
    background: linear-gradient( #F95900 0%, #D80500 100%);
}

.gradationType03 {
    background: #009944;
    background: -moz-linear-gradient( #ABCD03 0%, #009944 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#ABCD03), to(#009944));
    background: -webkit-linear-gradient( #ABCD03 0%, #009944 100%);
    background: -o-linear-gradient( #ABCD03 0%, #009944 100%);
    background: linear-gradient( #ABCD03 0%, #009944 100%);
}

.gradationType04 {
    background: #997FA3;
    background: -moz-linear-gradient( #B7A4BE 0%, #997FA3 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#B7A4BE), to(#997FA3));
    background: -webkit-linear-gradient( #B7A4BE 0%, #997FA3 100%);
    background: -o-linear-gradient( #B7A4BE 0%, #997FA3 100%);
    background: linear-gradient( #B7A4BE 0%, #997FA3 100%);
}

.gradationType05 {
    background: #FF55A2;
    background: -moz-linear-gradient( #FEA9A9 0%, #FF55A2 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#FEA9A9), to(#FF55A2));
    background: -webkit-linear-gradient( #FEA9A9 0%, #FF55A2 100%);
    background: -o-linear-gradient( #FEA9A9 0%, #FF55A2 100%);
    background: linear-gradient( #FEA9A9 0%, #FF55A2 100%);
}

.gradationType06 {
    background: #7C5327;
    background: -moz-linear-gradient( #FCD68F 0%, #7C5327 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#FCD68F), to(#7C5327));
    background: -webkit-linear-gradient( #FCD68F 0%, #7C5327 100%);
    background: -o-linear-gradient( #FCD68F 0%, #7C5327 100%);
    background: linear-gradient( #FCD68F 0%, #7C5327 100%);
}

.gradationType07 {
    background: #3ABFDA;
    background: -moz-linear-gradient( #79D3E6 0%, #3ABFDA 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#79D3E6), to(#3ABFDA));
    background: -webkit-linear-gradient( #79D3E6 0%, #3ABFDA 100%);
    background: -o-linear-gradient( #79D3E6 0%, #3ABFDA 100%);
    background: linear-gradient( #79D3E6 0%, #3ABFDA 100%);
}

.gradationType08 {
    background: #6DC316;
    background: -moz-linear-gradient( #B3DE84 0%, #6DC316 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#B3DE84), to(#6DC316));
    background: -webkit-linear-gradient( #B3DE84 0%, #6DC316 100%);
    background: -o-linear-gradient( #B3DE84 0%, #6DC316 100%);
    background: linear-gradient( #B3DE84 0%, #6DC316 100%);
}

.gradationType09 {
    background: #00A73C;
    background: -moz-linear-gradient( #42BE6E 0%, #00A73C 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#42BE6E), to(#00A73C));
    background: -webkit-linear-gradient( #42BE6E 0%, #00A73C 100%);
    background: -o-linear-gradient( #42BE6E 0%, #00A73C 100%);
    background: linear-gradient( #42BE6E 0%, #00A73C 100%);
}

.gradationType10 {
    background: #00B388;
    background: -moz-linear-gradient( #3BC4A3 0%, #00B388 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#3BC4A3), to(#00B388));
    background: -webkit-linear-gradient( #3BC4A3 0%, #00B388 100%);
    background: -o-linear-gradient( #3BC4A3 0%, #00B388 100%);
    background: linear-gradient( #3BC4A3 0%, #00B388 100%);
}

.gradationType11 {
    background: #00B388;
    background: -moz-linear-gradient( #3BC4A3 0%, #00B388 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#3BC4A3), to(#00B388));
    background: -webkit-linear-gradient( #3BC4A3 0%, #00B388 100%);
    background: -o-linear-gradient( #3BC4A3 0%, #00B388 100%);
    background: linear-gradient( #3BC4A3 0%, #00B388 100%);
}

.gradationType12 {
    background: #008CD6;
    background: -moz-linear-gradient( #4FB0E3 0%, #008CD6 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#4FB0E3), to(#008CD6));
    background: -webkit-linear-gradient( #4FB0E3 0%, #008CD6 100%);
    background: -o-linear-gradient( #4FB0E3 0%, #008CD6 100%);
    background: linear-gradient( #4FB0E3 0%, #008CD6 100%);
}

.gradationType13 {
    background: #07C1AA;
    background: -moz-linear-gradient( #5BD6C7 0%, #07C1AA 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#5BD6C7), to(#07C1AA));
    background: -webkit-linear-gradient( #5BD6C7 0%, #07C1AA 100%);
    background: -o-linear-gradient( #5BD6C7 0%, #07C1AA 100%);
    background: linear-gradient( #5BD6C7 0%, #07C1AA 100%);
}

.gradationType14 {
    background: #FFB21E;
    background: -moz-linear-gradient( #FFCA64 0%, #FFB21E 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#FFCA64), to(#FFB21E));
    background: -webkit-linear-gradient( #FFCA64 0%, #FFB21E 100%);
    background: -o-linear-gradient( #FFCA64 0%, #FFB21E 100%);
    background: linear-gradient( #FFCA64 0%, #FFB21E 100%);
}

.gradationType15 {
    background: #01D0DA;
    background: -moz-linear-gradient( #76E6EB 0%, #01D0DA 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#76E6EB), to(#01D0DA));
    background: -webkit-linear-gradient( #76E6EB 0%, #01D0DA 100%);
    background: -o-linear-gradient( #76E6EB 0%, #01D0DA 100%);
    background: linear-gradient( #76E6EB 0%, #01D0DA 100%);
}


/* abtest 210202 --------------------------------------- */

.gradationType16 {
    background: #148EFF;
    background: -moz-linear-gradient( #2BFFE7 0%, #148EFF 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#2BFFE7), to(#148EFF));
    background: -webkit-linear-gradient( #2BFFE7 0%, #148EFF 100%);
    background: -o-linear-gradient( #2BFFE7 0%, #148EFF 100%);
    background: linear-gradient( #2BFFE7 0%, #148EFF 100%);
}

.gradationType02orange {
    background: #ff6d00;
    background: -moz-linear-gradient( #FF8C36 0%, #ff6d00 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#FF8C36), to(#ff6d00));
    background: -webkit-linear-gradient( #FF8C36 0%, #ff6d00 100%);
    background: -o-linear-gradient( #FF8C36 0%, #ff6d00 100%);
    background: linear-gradient( #FF8C36 0%, #ff6d00 100%);
}


/* header ------------------------------------------------ */

#header {
    width: 100%;
}

#headerInner {
    width: 1000px;
    margin: 0px auto;
    text-align: center;
}

#headerInner h1 {
    padding: 20px 10px 15px 10px;
}


/* scrollBanner --------------------------------------- */

.scrollBanner {
    display: none;
}

.scrollBanner li {
    margin: 10px 5px;
}


/* mainImg --------------------------------------- */

#mainImg {
    width: 1000px;
    margin: 0px auto;
    position: relative;
}

#mainImg figure img {
    width: 1000px;
}

.mainImgBtnBox {
    position: absolute;
    bottom: 45px;
    left: 265px;
    background: #FFF;
    border-radius: 40px;
    t
}

.mainImgBtnBox a {
    color: #FFF;
    display: block;
    padding: 20px 40px;
    border-radius: 40px;
    text-align: center;
    width: 470px;
    font-size: 24px;
    line-height: 28px;
    position: relative;
    margin: 0px auto;
}

.mainImgBtnBox a:hover {
    text-decoration: none;
    opacity: 0.8;
}

.mainImgBtnBox a:after {
    content: '';
    display: block;
    width: 20px;
    height: 30px;
    background-image: url(../../common/img/btn_arrow01.png);
    background-size: contain;
    vertical-align: middle;
    position: absolute;
    right: 30px;
    top: 35px;
}

#mainImg #monthTextBox {
    font-size: 25px;
    line-height: 36px;
    font-weight: 900;
    position: absolute;
    top: 36px;
    left: 50px;
    text-align: center;
    padding: 5px;
    color: #000000;
}

#mainImg #monthTextBox strong {
    color: #F71418;
}


/* Layout --------------------------------------- */

#contentsWrap {
    display: flex;
    width: 1000px;
    margin: 10px auto 40px auto;
}

#contentsWrap #contentsSide {
    width: 320px;
    padding: 0px 0px 0px 10px;
}

#contentsWrap #contentsMain {
    width: 680px;
    padding: 0px 10px 0px 0px;
}

.contentsSingle {
    width: 1000px;
    margin: 0px auto;
}


/* characteristicRankingBox ------------------------------------------------ */

.characteristicRankingBox {
    margin: 20px 0px;
}

.characteristicRankingBox h2 {
    display: flex;
    font-size: 24px;
    line-height: 32px;
    font-weight: bold;
}

.characteristicRankingBox h2 i {
    margin-right: 10px;
}

.characteristicRankingBox ul {
    display: flex;
    width: 100%;
    margin-top: 30px;
}

.characteristicRankingBox li {
    width: 25%;
    padding-right: 10px;
    position: relative;
}

.characteristicRankingBox li:last-child {
    padding-right: 0px;
}

.characteristicRankingBox li a {
    font-size: 18px;
    line-height: 28px;
    text-align: center;
    display: block;
    width: 100%;
    color: #FFF;
    text-align: center;
    border-radius: 10px;
    padding: 80px 0px 10px 0px;
}

.characteristicRankingBox li img {
    position: absolute;
    top: -20px;
    left: 0px;
    right: 0px;
    margin: auto;
}

.characteristicRankingBox li a strong {
    display: block;
    font-size: 32px;
}

.characteristicRankingBox li a:hover {
    text-decoration: none;
    opacity: 0.8;
}


/* contentsSide --------------------------------------- */

#contentsSide #rankingNav {
    border: 1px solid #FF7E16;
}

#contentsSide #rankingNav h2 {
    font-size: 21px;
    line-height: 32px;
    font-weight: normal;
    color: #FFF;
    background: #FF7E16;
    padding: 10px 20px;
}

#contentsSide #rankingNav h2 span {
    font-size: 28px;
    line-height: 32px;
}

#contentsSide #rankingNav li {
    padding: 10px 10px 0px 10px;
}

#contentsSide #rankingNav li:last-child {
    padding: 10px;
}

#contentsSide #rankingNav li a {
    font-size: 18px;
    line-height: 21px;
    display: flex;
    color: #FFF;
    border-radius: 10px;
    padding: 11px 10px;
    align-items: center;
}

#contentsSide #rankingNav li a:hover {
    text-decoration: none;
    opacity: 0.8;
}

#contentsSide #rankingNav li i {
    width: 48px;
    margin-right: 5px;
}

#contentsSide h2.columnLink {
    margin-top: 10px;
}

#contentsSide h2.columnLink a {
    display: flex;
    font-size: 24px;
    line-height: 32px;
    align-items: center;
    color: #FF7E16;
}

#contentsSide h2.columnLink i {
    margin-right: 10px;
}

#contentsSide #contentsSideInner {
    padding: 10px;
}

#contentsSide #contentsSideInner {
    padding: 10px;
}

#contentsSide ul.sFeature {
    list-style: none;
    margin: 0px 0px 20px;
}

#contentsSide ul.sFeature li {
    margin-bottom: 10px;
}


/* ABtest 210222------------------------------------*/

#contentsSide h2.columnLinkblue {
    margin-top: 10px;
}

#contentsSide h2.columnLinkblue a {
    display: flex;
    font-size: 24px;
    line-height: 32px;
    align-items: center;
    color: #2E99FC;
}

#contentsSide h2.columnLinkblue i {
    margin-right: 10px;
}

#contentsSide #rankingNavblue {
    border: 1px solid #2E99FC;
}

#contentsSide #rankingNavblue h2 {
    font-size: 21px;
    line-height: 32px;
    font-weight: normal;
    color: #FFF;
    background: #2E99FC;
    padding: 10px 20px;
}

#contentsSide #rankingNavblue h2 span {
    font-size: 28px;
    line-height: 32px;
}

#contentsSide #rankingNavblue li {
    padding: 10px 10px 0px 10px;
}

#contentsSide #rankingNavblue li:last-child {
    padding: 10px;
}

#contentsSide #rankingNavblue li a {
    font-size: 18px;
    line-height: 21px;
    display: flex;
    color: #FFF;
    border-radius: 10px;
    padding: 11px 10px;
    align-items: center;
}

#contentsSide #rankingNavblue li a:hover {
    text-decoration: none;
    opacity: 0.8;
}

#contentsSide #rankingNavblue li i {
    width: 48px;
    margin-right: 5px;
}


/* localMenu ------------------------------------------------ */

#localMenu {
    margin: 20px 0px;
}

#localMenu h2 {
    display: flex;
    font-size: 24px;
    line-height: 32px;
    font-weight: bold;
}

#localMenu h2 i {
    margin-right: 10px;
}

#localMenu ul.rankingList {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 10px;
}

#localMenu ul.rankingList li {
    width: 25%;
    padding: 10px 10px 10px 0px;
    position: relative;
}

#localMenu ul.rankingList li:nth-child(4n) {
    padding-right: 0px;
}

#localMenu ul.rankingList li a {
    font-size: 18px;
    line-height: 28px;
    text-align: center;
    display: block;
    width: 100%;
    color: #FFF;
    text-align: center;
    border-radius: 10px;
    padding: 40px 0px 20px 0px;
}

#localMenu ul.rankingList li img {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
}

#localMenu ul.rankingList li a:hover {
    text-decoration: none;
    opacity: 0.8;
}

#localMenu ul.rankingList li.twoLines a {
    font-size: 14px;
    line-height: 21px;
    letter-spacing: -0.03em;
    padding: 35px 0px 15px 0px;
}

#localMenu .prefTable {
    margin: 10px 0px 40px 0px;
    font-size: 16px;
}

#localMenu .prefTable th {
    padding: 5px;
    font-weight: normal;
    width: 120px;
    font-weight: bold;
}

#localMenu .prefTable td {
    padding: 5px;
}

#localMenu .prefTable ul {
    display: flex;
    flex-wrap: wrap;
}

#localMenu .prefTable ul li {
    padding: 0px;
}

#localMenu .prefTable ul li:before {
    content: "|";
    padding: 0px 3px;
    display: inline-block;
}

#localMenu .prefTable ul li:first-child:before {
    content: none;
    padding: 0px 3px;
    display: inline-block;
}


/* Footer --------------------------------------- */

#fTextBox {
    background: #FFF7F1;
    color: #545454;
    padding: 20px;
    width: 100%;
    font-size: 12px;
    line-height: 15px;
}

#fTextBoxInner {
    width: 1000px;
    margin: 0px auto;
}

#fTextBox h5 {
    font-weight: normal;
    margin: 0px 0px 5px -5px;
}

#fTextBox ul {
    list-style: none;
    margin-top: 5px;
}

#fMemuWapper {
    background: #FFE9D7;
    width: 100%;
}

#fMemuWapper .fMemu {
    padding: 5px 0px;
    width: 1000px;
    margin: 0px auto;
    list-style: none;
    text-align: center;
    font-size: 12px;
    line-height: 15px;
}

#fMemuWapper .fMemu li {
    color: #333;
    display: inline-block;
    padding: 0px 5px
}

#fMemuWapper .fMemu li a {
    color: #545454;
    text-decoration: none;
}

#fMemuWapper .fMemu li a:hover {
    color: #545454;
}

#faddressWapper {
    background: #FF7E16;
    width: 100%;
}

#faddressWapper address {
    width: 1000px;
    padding: 5px 0px;
    text-align: center;
    color: #FFF;
    font-size: 12px;
    line-height: 15px;
    margin: 0px auto;
}


/* abtest 210202 --------------------------------------- */

#fTextBoxb {
    background: #F1F6FF;
    color: #545454;
    padding: 20px;
    width: 100%;
    font-size: 12px;
    line-height: 15px;
}

#fTextBoxInnerb {
    width: 1000px;
    margin: 0px auto;
}

#fTextBoxb h5 {
    font-weight: normal;
    margin: 0px 0px 5px -5px;
}

#fTextBoxb ul {
    list-style: none;
    margin-top: 5px;
}

#fMemuWapperb {
    background: #D7E5FF;
    width: 100%;
}

#fMemuWapperb .fMemu {
    padding: 5px 0px;
    width: 1000px;
    margin: 0px auto;
    list-style: none;
    text-align: center;
    font-size: 12px;
    line-height: 15px;
}

#fMemuWapperb .fMemu li {
    color: #333;
    display: inline-block;
    padding: 0px 5px
}

#fMemuWapperb .fMemu li a {
    color: #545454;
    text-decoration: none;
}

#fMemuWapperb .fMemu li a:hover {
    color: #545454;
}

#faddressWapperb {
    background: #148EFF;
    width: 100%;
}

#faddressWapperb address {
    width: 1000px;
    padding: 5px 0px;
    text-align: center;
    color: #FFF;
    font-size: 12px;
    line-height: 15px;
    margin: 0px auto;
}


/* searchForm ------------------------------------------------ */

#searchForm {
    width: 100%;
    margin: 0px auto;
    padding: 0px;
}

#searchForm h2 {
    display: flex;
    font-size: 24px;
    line-height: 32px;
    font-weight: bold;
}

#searchForm h2 i {
    margin-right: 10px;
}

#searchTable table {
    width: 100%;
    border-spacing: 0px;
    margin-top: 20px;
}

#searchTable table td {
    padding: 0px;
    text-align: left;
    vertical-align: middle;
    font-size: 14px;
    line-height: 24px;
}

#searchTable table th {
    text-align: left;
    padding: 0px 0px 0px 10px;
    font-size: 16px;
    line-height: 24px;
    vertical-align: middle;
    white-space: nowrap;
    width: 150px;
}

#searchTable label {
    font-weight: normal;
}

.formParts {
    width: 100%;
    margin: 3px auto;
    padding: 0px;
    text-align: center;
    display: flex;
    justify-content: stretch;
}

.formParts li {
    padding: 5px;
    margin: 0px;
    width: 100%;
}

.formParts label {
    width: 100%;
}

.checkboxInput {
    display: none !important;
}

.checkboxParts {
    cursor: pointer;
    position: relative;
    transition: .2s;
    color: #666;
    border-radius: 15px;
    display: inline-block;
    padding: 5px;
    width: 100%;
    min-width: 80px;
    text-align: center;
    font-weight: bold;
    background: #E0D8CB;
    font-weight: normal;
    box-shadow: 0px 0px 5px -3px rgba(0, 0, 0, 0.8);
    -webkit-box-shadow: 0px 0px 5px -3px rgba(0, 0, 0, 0.8);
    -moz-box-shadow: 0px 0px 5px -3px rgba(0, 0, 0, 0.8);
}

.checkboxInput:checked+.checkboxParts {
    background: #FF7E16;
    color: #FFF;
    box-shadow: 0px 0px 5px -3px rgba(0, 0, 0, 0.8);
    -webkit-box-shadow: 0px 0px 5px -3px rgba(0, 0, 0, 0.8);
    -moz-box-shadow: 0px 0px 5px -3px rgba(0, 0, 0, 0.8);
}

.radioInput {
    display: none !important;
}

.radioParts {
    cursor: pointer;
    position: relative;
    transition: .2s;
    color: #666;
    border-radius: 15px;
    display: inline-block;
    padding: 5px;
    width: 100%;
    text-align: center;
    font-weight: bold;
    background: #E0D8CB;
    font-weight: normal;
    box-shadow: 0px 0px 5px -3px rgba(0, 0, 0, 0.8);
    -webkit-box-shadow: 0px 0px 5px -3px rgba(0, 0, 0, 0.8);
    -moz-box-shadow: 0px 0px 5px -3px rgba(0, 0, 0, 0.8);
}

.radioInput:checked+.radioParts {
    background: #FF7E16;
    color: #FFF;
    box-shadow: 0px 0px 5px -3px rgba(0, 0, 0, 0.8);
    -webkit-box-shadow: 0px 0px 5px -3px rgba(0, 0, 0, 0.8);
    -moz-box-shadow: 0px 0px 5px -3px rgba(0, 0, 0, 0.8);
}

.selectParts {
    overflow: hidden;
    margin: 5px 0px;
    width: 49.5%;
}

.selectParts select {
    padding-right: 10px;
    cursor: pointer;
    text-overflow: ellipsis;
    border: none;
    outline: none;
    background: transparent;
    background-image: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
}

.selectParts select::-ms-expand {
    display: none;
}

.selectParts {
    position: relative;
    border-radius: 2px;
    border-radius: 25px;
    background: #FFF;
    box-shadow: 0px 0px 5px -3px rgba(0, 0, 0, 0.8);
    -webkit-box-shadow: 0px 0px 5px -3px rgba(0, 0, 0, 0.8);
    -moz-box-shadow: 0px 0px 5px -3px rgba(0, 0, 0, 0.8);
}

.selectParts::before {
    position: absolute;
    top: 15px;
    right: 10px;
    width: 0;
    height: 0;
    padding: 0;
    content: '';
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #FF7E16;
    pointer-events: none;
}

.selectParts select {
    padding: 5px 20px 5px 10px;
    color: #333;
}

#searchForm .submit {
    margin: 20px 0px 40px;
}

#searchForm .submit a {
    color: #FFF;
    display: block;
    padding: 15px;
    border-radius: 40px;
    text-align: center;
    width: 380px;
    font-size: 18px;
    line-height: 24px;
    position: relative;
    margin: 0px auto;
}

#searchForm .submit a:hover {
    text-decoration: none;
    opacity: 0.8;
}

#searchForm .submit a:after {
    content: '';
    display: block;
    width: 12px;
    height: 18px;
    background: url(../../common/img/btn_arrow01.png);
    background-size: contain;
    vertical-align: middle;
    position: absolute;
    right: 20px;
    top: 17px;
}


/* ABtest 210222------------------------------------*/

.checkboxPartsblue {
    cursor: pointer;
    position: relative;
    transition: .2s;
    color: #666;
    border-radius: 15px;
    display: inline-block;
    padding: 5px;
    width: 100%;
    min-width: 80px;
    text-align: center;
    font-weight: bold;
    background: #CBD4E0;
    font-weight: normal;
    box-shadow: 0px 0px 5px -3px rgba(0, 0, 0, 0.8);
    -webkit-box-shadow: 0px 0px 5px -3px rgba(0, 0, 0, 0.8);
    -moz-box-shadow: 0px 0px 5px -3px rgba(0, 0, 0, 0.8);
}

.checkboxInput:checked+.checkboxPartsblue {
    background: #159DFF;
    color: #FFF;
    box-shadow: 0px 0px 5px -3px rgba(0, 0, 0, 0.8);
    -webkit-box-shadow: 0px 0px 5px -3px rgba(0, 0, 0, 0.8);
    -moz-box-shadow: 0px 0px 5px -3px rgba(0, 0, 0, 0.8);
}

.radioPartsblue {
    cursor: pointer;
    position: relative;
    transition: .2s;
    color: #666;
    border-radius: 15px;
    display: inline-block;
    padding: 5px;
    width: 100%;
    text-align: center;
    font-weight: bold;
    background: #CBD4E0;
    font-weight: normal;
    box-shadow: 0px 0px 5px -3px rgba(0, 0, 0, 0.8);
    -webkit-box-shadow: 0px 0px 5px -3px rgba(0, 0, 0, 0.8);
    -moz-box-shadow: 0px 0px 5px -3px rgba(0, 0, 0, 0.8);
}

.radioInput:checked+.radioPartsblue {
    background: #159DFF;
    color: #FFF;
    box-shadow: 0px 0px 5px -3px rgba(0, 0, 0, 0.8);
    -webkit-box-shadow: 0px 0px 5px -3px rgba(0, 0, 0, 0.8);
    -moz-box-shadow: 0px 0px 5px -3px rgba(0, 0, 0, 0.8);
}


/* feature ------------------------------------------------ */

#feature {
    width: 100%;
    margin: 20px 0px 40px 0px;
    padding: 0px;
}

#feature h2 {
    display: flex;
    flex-wrap: wrap;
    font-size: 24px;
    line-height: 32px;
    font-weight: bold;
    background: #FF0;
    padding: 10px;
    margin-bottom: 5px;
}

#feature h2 i {
    margin-right: 10px;
}

#featureInner {
    border: 1px solid #FF7800;
    display: flex;
    padding: 40px;
}

#featureInner>.itemData:first-child {
    margin-right: 20px;
    border-right: 1px dashed #FF7800;
}

#featureInner>.itemData {
    padding-right: 15px;
    width: 50%;
}

#featureInner>.itemData figure {
    width: 210px;
    margin: 0px auto;
}

#featureInner>.itemData img {
    width: 100%;
}

#featureInner>.itemData {
    width: 285px;
    margin: 0px auto;
}

#featureInner .itemData h3 a {
    color: #FF7800;
    font-size: 21px;
    font-weight: bold;
    text-align: center;
    display: block;
    margin-bottom: 10px;
}

#featureInner .textBox {
    margin: 20px 0px;
    font-size: 15px;
    text-align: center;
}

#featureInner .textBox em {
    font-weight: normal;
    border: none;
}

#featureInner .linkBox {
    margin: 10px 0px;
}

#featureInner .linkBox a {
    color: #FFF;
    display: block;
    padding: 10px 5px;
    border-radius: 40px;
    text-align: center;
    width: 200px;
    font-size: 18px;
    line-height: 24px;
    position: relative;
    margin: 0px auto;
}

#featureInner .linkBox a:hover {
    text-decoration: none;
    opacity: 0.8;
}

#featureInner .linkBox a:after {
    content: '';
    display: block;
    width: 12px;
    height: 18px;
    background: url(../../common/img/btn_arrow01.png);
    background-size: contain;
    vertical-align: middle;
    position: absolute;
    right: 20px;
    top: 13px;
}


/* ABtest 210222------------------------------------*/

#featureInner>.itemDatablue:first-child {
    margin-right: 20px;
    border-right: 1px dashed #FF7800;
}

#featureInner>.itemDatablue {
    padding-right: 15px;
    width: 50%;
}

#featureInner>.itemDatablue figure {
    width: 210px;
    margin: 0px auto;
}

#featureInner>.itemDatablue img {
    width: 100%;
}

#featureInner>.itemDatablue {
    width: 285px;
    margin: 0px auto;
}

#featureInner .itemDatablue h3 a {
    color: #00ACD8;
    font-size: 21px;
    font-weight: bold;
    text-align: center;
    display: block;
    margin-bottom: 10px;
}


/* ranking ------------------------------------------------ */

#ranking {
    width: 100%;
    margin: 0px 0px 40px 0px;
    padding: 0px;
}

#rankingMainImg {
    width: 670px;
    margin: 0px auto;
    position: relative;
}

#rankingMainImg figure img {
    width: 670px;
}

#rankingMainImg #monthTextBox {
    font-size: 21px;
    line-height: 24px;
    font-weight: normal;
    position: absolute;
    bottom: 10px;
    right: 10px;
    text-align: center;
    padding: 5px;
    color: #FFF;
    background: #FB343D;
}

#rankingMainImg #monthTextBox {
    font-weight: normal;
}

#rankingOutline {
    padding: 10px 0px;
}

#rankingOutline em {
    font-style: normal;
    font-weight: bold;
    color: #000;
    border-bottom: 1px dashed #FB343D;
}

#ranking h2 {
    display: flex;
    flex-wrap: wrap;
    font-size: 24px;
    line-height: 32px;
    font-weight: bold;
}

#ranking h2 i {
    margin-right: 10px;
}

#ranking h2 i img {
    width: 32px;
}

#ranking .itemData {
    margin-top: 20px;
    padding-bottom: 20px;
}

#ranking #ranking00 {
    border: 1px solid #FF7E16;
}

#ranking #ranking01 {
    border: 1px solid #FB343D;
}

#ranking #ranking02 {
    border: 1px solid #9CABC8;
}

#ranking #ranking03 {
    border: 1px solid #009944;
}

#ranking #ranking00 h3 {
    background: #FF7E16;
}

#ranking #ranking01 h3 {
    background: #FB343D;
}

#ranking #ranking02 h3 {
    background: #9CABC8;
}

#ranking #ranking03 h3 {
    background: #009944;
}

#ranking .itemData h3 {
    position: relative;
    padding: 20px 20px 20px 80px;
    font-size: 24px;
    line-height: 32px;
    font-weight: bold;
}

#ranking .itemData h3 a {
    color: #FFF;
}

#ranking .itemData h3 i {
    position: absolute;
    top: 0px;
    left: 5px;
}

#ranking .appealTit {
    display: block;
    margin: 20px 0px 0px 0px;
    padding: 0px 30px;
    font-size: 21px;
    line-height: 28px;
    font-weight: bold;
}


/* ABtest 210222------------------------------------*/

#ranking #ranking00blue {
    border: 1px solid #2E99FC;
}

#ranking #ranking01blue {
    border: 1px solid #FB343D;
}

#ranking #ranking02blue {
    border: 1px solid #9CABC8;
}

#ranking #ranking03blue {
    border: 1px solid #009944;
}

#ranking #ranking00blue h3 {
    background: #2E99FC;
}

#ranking #ranking01blue h3 {
    background: #FB343D;
}

#ranking #ranking02blue h3 {
    background: #9CABC8;
}

#ranking #ranking03blue h3 {
    background: #009944;
}

#ranking .ratingBoxWrap {
    border: 1px solid #FF7800;
    text-align: center;
    margin: 10px 0px 0px 0px;
}

#ranking .ratingBoxWrap h4 {
    color: #FFF;
    font-size: 18px;
    padding: 5px;
    background: #FF7800;
}

#ranking .ratingBox {
    padding: 5px;
}

#ranking .itemDataInner {
    padding: 20px 30px;
    display: flex;
}

#ranking .itemDataInner .imgBox {
    width: 210px;
    margin-right: 20px;
}

#ranking .itemDataInner .imgBox figure {
    width: 210px;
}

#ranking .itemDataInner .imgBox img {
    width: 100%;
}

#ranking .pointBox ul {
    margin-top: 10px;
}

#ranking .pointBox li {
    font-size: 16px;
    line-height: 24px;
    font-weight: bold;
    padding: 0px 0px 5px 30px;
    background: url(../../common/img/ico_check.png) no-repeat;
    background-size: 24px 24px;
}

#ranking .specTable {
    padding: 0px 30px;
}

#ranking .specTable table {
    border-collapse: collapse;
    width: 100%;
    border-top: 1px solid #D9D9D9;
    border-bottom: 1px solid #D9D9D9;
}

#ranking .specTable th {
    white-space: nowrap;
    padding: 5px;
    background: #D9D9D9;
    text-align: center;
    border-right: 1px solid #FFF;
}

#ranking .specTable th:first-child {
    border-left: 1px solid #D9D9D9;
}

#ranking .specTable th:last-child {
    border-right: 1px solid #D9D9D9;
}

#ranking .specTable td {
    padding: 5px;
    background: #FFF;
    border-right: 1px solid #D9D9D9;
    text-align: center;
}

#ranking .specTable td:first-child {
    border-left: 1px solid #D9D9D9;
}

#ranking .specialtyBox {
    display: flex;
    align-items: center;
    border: 1px solid #FAD850;
    padding: 0px;
    margin: 10px 30px;
    background: #FAD850;
}

#ranking .specialtyBox h4 {
    width: 120px;
    font-weight: normal;
    font-size: 16px;
    padding: 5px 10px;
    color: #333;
    text-align: center;
}

#ranking .specialtyBox ul {
    display: flex;
    flex-wrap: wrap;
    background: #FFF;
    padding: 5px;
}

#ranking .specialtyBox ul li {
    background: #E1E1E1;
    border: 1px solid #999;
    color: #999;
    padding: 0px 10px;
    border-radius: 20px;
    margin: 5px 0px 5px 5px;
}

#ranking .specialtyBox ul li.on {
    background: #FFEFE0;
    border: 1px solid #FF7800;
    color: #FF7800;
}

#ranking .osusumePoint {
    padding: 20px;
    background: #FFFBD5;
    margin: 10px 30px;
    border-radius: 10px;
}

#ranking .osusumePoint .osusumeTit {
    margin-bottom: 10px;
}

#ranking .osusumePoint em {
    color: #FB343D;
    font-style: normal;
}

#ranking .linkBox ul {
    margin: 20px 0px 10px 0px;
    display: flex;
    justify-content: space-between;
}

#ranking .linkBox li:first-child {
    width: 23%;
    padding-right: 10px;
}

#ranking .linkBox li:last-child {
    width: 77%;
}

#ranking .linkBox a.btnType01 {
    color: #FF7E16;
    display: block;
    padding: 10px 10px;
    border-radius: 40px;
    text-align: center;
    font-size: 16px;
    line-height: 18px;
    background: #FCF1CE;
    margin: 0px;
    width: 100%;
    border: 1px solid #FF7E16;
}

#ranking .linkBox a.gradationType02 {
    color: #FFF;
    display: block;
    padding: 10px 40px 10px 20px;
    border-radius: 40px;
    text-align: center;
    font-size: 18px;
    line-height: 24px;
    position: relative;
    margin: 0px;
    width: 100%;
}

#ranking .linkBox a:hover {
    text-decoration: none;
    opacity: 0.8;
}

#ranking .linkBox a.gradationType02:after {
    content: '';
    display: block;
    width: 12px;
    height: 18px;
    background: url(../../common/img/btn_arrow01.png);
    background-size: contain;
    vertical-align: middle;
    position: absolute;
    right: 20px;
    top: 13px;
}

#ranking .linkBox {
    padding: 0px 30px;
}


/* mainTitImg ------------------------------------------------ */

#mainTitImg {
    margin: 0px 0px 20px 0px;
}

#mainTitImg figure {
    width: 670px;
}

#mainTitImg figure img {
    width: 100%;
}


/* jobData ------------------------------------------------ */

#jobData {
    margin: 0px 0px 20px 0px;
    border: 1px solid #FF7800;
}

#jobDataHead {
    background: #FF7800;
    color: #FFF;
    padding: 10px;
    text-align: center;
}

#jobDataHead h2 a {
    font-size: 28px;
    line-height: 36px;
    font-weight: bold;
    color: #FFF;
}

#jobDataHead .catch {
    font-size: 18px;
    line-height: 21px;
    font-weight: bold;
    color: #FFF;
    padding: 10px 0px;
    display: block;
}

#jobDataHead .catch em {
    border: none;
}

#jobDataInner {
    padding: 20px;
}

#jobDataInner .specialtyBox ul {
    display: flex;
    flex-wrap: wrap;
    background: #FFF;
}

#jobDataInner .specialtyBox ul li {
    width: 84px;
    background: #E1E1E1;
    border: 1px solid #999;
    color: #999;
    padding: 0px;
    text-align: center;
    border-radius: 20px;
    margin: 5px 0px 5px 5px;
}

#jobDataInner .specialtyBox ul li.on {
    background: #FFEFE0;
    border: 1px solid #FF7800;
    color: #FF7800;
}

#jobDataInner .honestDetailsBox {
    display: flex;
    margin: 20px 0px;
}

#jobDataInner .honestDetailsBox .honestDetailsImg {
    margin-right: 20px;
}

#jobDataInner .honestDetailsBox .honestDetailsImg img {
    max-width: 225px;
}

#jobDataInner .honestDetailsBox .honestDetailsText h3 {
    border-left: 5px solid #FF7800;
    padding-left: 10px;
    font-size: 18px;
    line-height: 21px;
    margin-bottom: 10px;
}

#jobDataInner .jobDataInnerWrap {
    display: flex;
}

#jobDataInner .memberAttributesBox {
    width: 360px;
}

#jobDataInner .recommendedLayerBox {
    padding: 0px 20px 0px 10px;
    width: 270px;
}

#jobDataInner .jobDataInnerWrap h3 {
    display: flex;
    font-size: 24px;
    line-height: 32px;
    font-weight: bold;
    margin-bottom: 20px;
}

#jobDataInner .jobDataInnerWrap h3 i {
    margin-right: 10px;
}

#jobDataInner .jobDataInnerWrap figure ul {
    margin-top: 10px;
}

#jobDataInner .jobDataInnerWrap figure li {
    text-align: center;
    padding: 2px 0px 3px;
    font-size: 18px;
    line-height: 24px;
    font-weight: bold;
}

#jobData .linkBox {
    margin: 40px 0px;
    text-align: center;
}

#jobData .linkBox a.gradationType02 {
    color: #FFF;
    display: inline-block;
    padding: 10px 80px 10px 60px;
    border-radius: 40px;
    text-align: center;
    font-size: 18px;
    line-height: 24px;
    position: relative;
    margin: 0px;
}

#jobData .linkBox a:hover {
    text-decoration: none;
    opacity: 0.8;
}

#jobData .linkBox a.gradationType02:after {
    content: '';
    display: block;
    width: 12px;
    height: 18px;
    background: url(../../common/img/btn_arrow01.png);
    background-size: contain;
    vertical-align: middle;
    position: absolute;
    right: 20px;
    top: 15px;
}

#jobData .linkBox {
    padding: 0px 30px;
}


/* ABtest 210222------------------------------------*/

#jobDataInner .specialtyBoxblue ul {
    display: flex;
    flex-wrap: wrap;
    background: #FFF;
}

#jobDataInner .specialtyBoxblue ul li {
    width: 84px;
    background: #E1E1E1;
    border: 1px solid #999;
    color: #999;
    padding: 0px;
    text-align: center;
    border-radius: 20px;
    margin: 5px 0px 5px 5px;
}

#jobDataInner .specialtyBoxblue ul li.on {
    background: #E0FAFF;
    border: 1px solid #009BFF;
    color: #009BFF;
}

#jobDatablue {
    margin: 0px 0px 20px 0px;
    border: 1px solid #00A3FF;
}

#jobDataHeadblue {
    background: #00A3FF;
    color: #FFF;
    padding: 10px;
    text-align: center;
}

#jobDataHeadblue h2 a {
    font-size: 28px;
    line-height: 36px;
    font-weight: bold;
    color: #FFF;
}

#jobDataHeadblue .catch {
    font-size: 18px;
    line-height: 21px;
    font-weight: bold;
    color: #FFF;
    padding: 10px 0px;
    display: block;
}

#jobDataHeadblue .catch em {
    border: none;
}

#jobDatablue .linkBox {
    margin: 40px 0px;
    text-align: center;
}

#jobDatablue .linkBox a.gradationType02orange {
    color: #FFF;
    display: inline-block;
    padding: 10px 80px 10px 60px;
    border-radius: 40px;
    text-align: center;
    font-size: 18px;
    line-height: 24px;
    position: relative;
    margin: 0px;
}

#jobDatablue .linkBox a:hover {
    text-decoration: none;
    opacity: 0.8;
}

#jobDatablue .linkBox a.gradationType02orange:after {
    content: '';
    display: block;
    width: 12px;
    height: 18px;
    background: url(../../common/img/btn_arrow01.png);
    background-size: contain;
    vertical-align: middle;
    position: absolute;
    right: 20px;
    top: 15px;
}

#jobDatablue .linkBox {
    padding: 0px 30px;
}


/* kuchikomi ------------------------------------------------ */

#kuchikomiBoxWrap {
    background: #FFFBD5;
    border-radius: 20px;
    padding: 20px;
    margin: 40px 0px 0px 0px;
}

.kuchikomiBox h3 {
    display: flex;
    font-size: 21px;
    line-height: 28px;
    font-weight: bold;
}

.kuchikomiBox h3 i {
    margin-right: 10px;
}

.kuchikomiData {
    background: #FFF;
    border-radius: 20px;
    padding: 20px;
    margin: 20px 0px;
}

.kuchikomiHead {
    display: flex;
    padding-bottom: 10px;
    border-bottom: 1px dashed #FF7800;
    margin-bottom: 10px;
}

.kuchikomiDataScore {
    padding-right: 20px;
    text-align: center;
    width: 120px;
}

.kuchikomiDataScore figure {
    width: 120px;
}

.kuchikomiDataScore .ratingNum {
    font-size: 18px;
    color: #333;
    margin: 0px;
}

.kuchikomiDataMeta {
    width: 430px;
}

.kuchikomiDataMeta dl {
    display: table;
    width: 100%;
    margin: 5px 0px;
}

.kuchikomiDataMeta dt {
    display: table-cell;
    text-align: center;
    padding: 5px;
    font-weight: normal;
    width: 50px;
}

.kuchikomiDataMeta dd {
    display: table-cell;
    padding: 5px;
}

.kuchikomiDataMeta .age {
    font-size: 18px;
    font-weight: bold;
    display: block;
}

.kuchikomiDataMeta .job01 dt {
    background: #818181;
    color: #FFF;
}

.kuchikomiDataMeta .job01 dd {
    background: #EFEFEF;
}

.kuchikomiDataMeta .job02 dt {
    background: #FF7E16;
    color: #FFF;
}

.kuchikomiDataMeta .job02 dd {
    background: #FFEEE1;
}

.kuchikomiDataMeta .income {
    margin: 10px 0px 5px 0px;
}

.kuchikomiDataMeta .income dt {
    background: #FF0;
    font-size: 18px;
    font-weight: bold;
}

.kuchikomiDataMeta .income dd {
    background: #FFFFC9;
    font-size: 21px;
    font-weight: bold;
}

.kuchikomiDataText {
    padding-bottom: 10px;
    border-bottom: 1px dashed #FF7800;
}

.kuchikomiDataText .kuchikomiDataTitle {
    display: flex;
    margin-bottom: 5px;
}

.kuchikomiDataText .kuchikomiDataTitle span {
    font-size: 18px;
    font-weight: bold;
}

.kuchikomiDataText .kuchikomiDataTitle i {
    margin-right: 5px;
}

.kuchimomiMoreBtn {
    color: #FF7800;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
}

.kuchimomiMoreBtn i {
    margin-left: 5px;
    vertical-align: 2px;
}

.kuchimomiMoreBtn:hover {
    cursor: pointer;
}


/* freeHtml ------------------------------------------------ */

#freeHtml {
    margin: 40px 0px;
}

#freeHtml h2 {
    display: flex;
    font-size: 24px;
    line-height: 32px;
    font-weight: bold;
}

#freeHtml h2 i {
    margin-right: 10px;
}

#freeHtml figure {
    width: 670px;
}

#freeHtml figure img {
    width: 100%;
}


/* comparison ------------------------------------------------ */

#comparison {
    margin: 20px 0px 40px 0px;
}

#comparison h2 {
    display: flex;
    font-size: 24px;
    line-height: 32px;
    font-weight: bold;
}

#comparison h2 i {
    margin-right: 10px;
}

#comparison table {
    border-collapse: collapse;
    width: 100%;
    border-top: 1px solid #FF9947;
    margin: 20px 0px;
}

#comparison table th {
    padding: 5px;
    background: #FF9947;
    text-align: center;
    border-right: 1px solid #FFF;
    vertical-align: middle;
    color: #FFF;
}

#comparison table th:first-child {
    border-left: 1px solid #FF9947;
}

#comparison table th:last-child {
    border-right: 1px solid #FF9947;
}

#comparison table th.none {
    background: #FFF;
    border-bottom: 1px solid #FF9947;
    border-right: 1px solid #FF9947;
}

#comparison table th.current {
    background: #FB343D;
}

#comparison table tr:nth-child(even) td {
    background: #FFFBEA;
}

#comparison table tr:nth-child(even) td.current {
    background: #F9D1CD;
}

#comparison table td {
    padding: 15px 5px;
    background: #FFF;
    border-right: 1px solid #FF9947;
    border-bottom: 1px solid #FF9947;
    text-align: center;
    vertical-align: middle;
}

#comparison table td:first-child {
    border-left: 1px solid #FF9947;
}

#comparison table td.head {
    white-space: nowrap;
    font-weight: bold;
}

#comparison table td.current {
    background: #F9D1CD;
}


/* comparison ------------------------------------------------ */

#comparisonblue {
    margin: 20px 0px 40px 0px;
}

#comparisonblue h2 {
    display: flex;
    font-size: 24px;
    line-height: 32px;
    font-weight: bold;
}

#comparisonblue h2 i {
    margin-right: 10px;
}

#comparisonblue table {
    border-collapse: collapse;
    width: 100%;
    border-top: 1px solid #009BFF;
    margin: 20px 0px;
}

#comparisonblue table th {
    padding: 5px;
    background: #009BFF;
    text-align: center;
    border-right: 1px solid #FFF;
    vertical-align: middle;
    color: #FFF;
}

#comparisonblue table th:first-child {
    border-left: 1px solid #009BFF;
}

#comparisonblue table th:last-child {
    border-right: 1px solid #009BFF;
}

#comparisonblue table th.none {
    background: #FFF;
    border-bottom: 1px solid #009BFF;
    border-right: 1px solid #009BFF;
}

#comparisonblue table th.current {
    background: #b234fb;
}

#comparisonblue table tr:nth-child(even) td {
    background: #eaf7ff;
}

#comparisonblue table tr:nth-child(even) td.current {
    background: #d3cdf9;
}

#comparisonblue table td {
    padding: 15px 5px;
    background: #FFF;
    border-right: 1px solid #009BFF;
    border-bottom: 1px solid #009BFF;
    text-align: center;
    vertical-align: middle;
}

#comparisonblue table td:first-child {
    border-left: 1px solid #009BFF;
}

#comparisonblue table td.head {
    white-space: nowrap;
    font-weight: bold;
}

#comparisonblue table td.current {
    background: #d3cdf9;
}


/* searchResult ------------------------------------------------ */

.searchHitCountBox {
    display: flex;
    margin: 20px 0px;
}

.searchHitCountBox h2 {
    width: 300px;
    display: flex;
    font-size: 24px;
    line-height: 32px;
    font-weight: bold;
}

.searchHitCountBox h2 i {
    margin-right: 10px;
}

.searchHitCountBox div {
    width: 525px;
    text-align: left;
    font-size: 24px;
    line-height: 32px;
    font-weight: bold;
}

.searchHitCountBox div strong {
    font-size: 32px;
    line-height: 0em;
    color: #FF7800;
    padding: 0px 5px;
}

.searchHitCountBox a {
    display: flex;
    align-items: center;
    background: #FFFF91;
    padding: 5px;
    border-radius: 20px;
    font-size: 18px;
    line-height: 24px;
    font-weight: bold;
}

.searchHitCountBox a span {
    padding: 0px 20px 0px 15px;
}

.searchHitCountBox a:hover {
    text-decoration: none;
}

.searchConditionBox {
    background: #FFFBD5;
    padding: 20px;
    border-radius: 10px;
    margin: 20px 0px;
}

.searchConditionBox li {
    display: inline-block;
    font-size: 16px;
    padding: 0px 10px 0px 0px;
}

.serachResultTable {
    width: 100%;
    border-collapse: separate;
    margin: 10px 0px 0px 0px;
    border-spacing: 0px;
    border-top: 1px solid #FF7800;
    border-right: 1px solid #FF7800;
}

.serachResultTable td {
    text-align: center;
    padding: 5px;
    vertical-align: middle;
    font-size: 14px;
    border-left: 1px solid #FF7800;
    border-bottom: 1px solid #FF7800;
}

.serachResultTable th {
    text-align: center;
    font-size: 16px;
    background: #FF7800;
    color: #FFF;
    padding: 5px;
    text-align: center;
    border-left: 1px solid #FFF;
    border-bottom: 1px solid #FF7800;
    font-weight: normal;
    white-space: nowrap;
}

.serachResultTable th:first-child {
    border-left: 1px solid #FF7800;
}

.serachResultTable td.siteName figcaption {
    margin-bottom: 10px;
    display: block;
    font-size: 18px;
    font-weight: bold;
}

.serachResultTable td.siteName figure img {
    width: 150px;
}

.serachResultTable td.siteName figure {
    width: 150px;
    margin: 0px auto;
}

.serachResultTable td.siteName a {
    color: #FF7800;
    text-decoration: none;
}

.serachResultTable td.siteName .ratingNum {
    font-size: 18px;
    color: #333;
    display: block;
    margin: 10px 0px 0px 0px;
}

.arrowBox {
    display: inline-block;
}

.arrowBox li {
    margin: 2px 5px;
    font-size: 1px;
    line-height: 8px;
    padding: 0px;
}

.sort:hover {
    cursor: pointer;
}

.serachResultTable .upArrow .sort {
    text-indent: -9999px;
    background-image: url(../../common/img/sort_up_arrow.png);
    background-repeat: no-repeat;
    background-position: bottom center;
    cursor: pointer;
    display: block;
    width: 16px;
    height: 12px;
}

.serachResultTable .upArrow .on {
    text-indent: -9999px;
    background-image: url(../../common/img/sort_up_arrow_o.png);
    background-repeat no-repeat;
    background-position: bottom center;
    cursor: pointer;
    display: block;
    width: 16px;
    height: 12px;
}

.serachResultTable .downArrow .sort {
    text-indent: -9999px;
    background-image: url(../../common/img/sort_down_arrow.png);
    background-repeat: no-repeat;
    background-position: bottom center;
    cursor: pointer;
    display: block;
    width: 16px;
    height: 12px;
}

.serachResultTable .downArrow .on {
    text-indent: -9999px;
    background-image: url(../../common/img/sort_down_arrow_o.png);
    background-repeat: no-repeat;
    background-position: bottom center;
    cursor: pointer;
    display: block;
    width: 16px;
    height: 12px;
}

.serachResultTable td ul.tags li {
    font-size: 12px;
    text-align: center;
    background: #E1E1E1;
    border: 1px solid #999;
    color: #999;
    padding: 0px 5px;
    border-radius: 10px;
    margin: 5px 0px 5px 5px;
}

.serachResultTable td ul.tags li.on {
    background: #FFEFE0;
    border: 1px solid #FF7800;
    color: #FF7800;
}

.serachResultTable td .linkBox {
    margin: 0px auto;
}

.serachResultTable td .linkBox li {
    padding: 0px 0px 10px 0px;
    text-align: center;
}

.serachResultTable td .linkBox a.btnType01 {
    color: #FF7E16;
    display: block;
    padding: 10px;
    border-radius: 20px;
    text-align: center;
    font-size: 14px;
    line-height: 18px;
    background: #FCF1CE;
    margin: 0px;
    width: 100%;
    border: 1px solid #FF7E16;
}

.serachResultTable td .linkBox a.gradationType02 {
    color: #FFF;
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
    text-align: left;
    font-size: 18px;
    line-height: 24px;
    position: relative;
    margin: 0px;
    width: 100%;
}

.serachResultTable td .linkBox a.gradationType02 small {
    font-size: 14px;
}

.serachResultTable td .linkBox a:hover {
    text-decoration: none;
    opacity: 0.8;
}


/* ABtest 210222------------------------------------*/

.searchHitCountBoxblue {
    display: flex;
    margin: 20px 0px;
}

.searchHitCountBoxblue h2 {
    width: 300px;
    display: flex;
    font-size: 24px;
    line-height: 32px;
    font-weight: bold;
}

.searchHitCountBoxblue h2 i {
    margin-right: 10px;
}

.searchHitCountBoxblue div {
    width: 525px;
    text-align: left;
    font-size: 24px;
    line-height: 32px;
    font-weight: bold;
}

.searchHitCountBoxblue div strong {
    font-size: 32px;
    line-height: 0em;
    color: #006CFF;
    padding: 0px 5px;
}

.searchHitCountBoxblue a {
    display: flex;
    align-items: center;
    background: #FFFF91;
    padding: 5px;
    border-radius: 20px;
    font-size: 18px;
    line-height: 24px;
    font-weight: bold;
}

.searchHitCountBoxblue a span {
    padding: 0px 20px 0px 15px;
}

.searchHitCountBoxblue a:hover {
    text-decoration: none;
}

.serachResultTableblue {
    width: 100%;
    border-collapse: separate;
    margin: 10px 0px 0px 0px;
    border-spacing: 0px;
    border-top: 1px solid #009BFF;
    border-right: 1px solid #009BFF;
}

.serachResultTableblue td {
    text-align: center;
    padding: 5px;
    vertical-align: middle;
    font-size: 14px;
    border-left: 1px solid #009BFF;
    border-bottom: 1px solid #009BFF;
}

.serachResultTableblue th {
    text-align: center;
    font-size: 16px;
    background: #009BFF;
    color: #FFF;
    padding: 5px;
    text-align: center;
    border-left: 1px solid #FFF;
    border-bottom: 1px solid #009BFF;
    font-weight: normal;
    white-space: nowrap;
}

.serachResultTableblue th:first-child {
    border-left: 1px solid #009BFF;
}

.serachResultTableblue td.siteName figcaption {
    margin-bottom: 10px;
    display: block;
    font-size: 18px;
    font-weight: bold;
}

.serachResultTableblue td.siteName figure img {
    width: 150px;
}

.serachResultTableblue td.siteName figure {
    width: 150px;
    margin: 0px auto;
}

.serachResultTableblue td.siteName a {
    color: #009BFF;
    text-decoration: none;
}

.serachResultTableblue td.siteName .ratingNum {
    font-size: 18px;
    color: #333;
    display: block;
    margin: 10px 0px 0px 0px;
}

.serachResultTableblue .upArrow .sort {
    text-indent: -9999px;
    background-image: url(../../common/img/sort_up_arrow.png);
    background-repeat: no-repeat;
    background-position: bottom center;
    cursor: pointer;
    display: block;
    width: 16px;
    height: 12px;
}

.serachResultTableblue .upArrow .on {
    text-indent: -9999px;
    background-image: url(../../common/img/sort_up_arrow_o.png);
    background-repeat no-repeat;
    background-position: bottom center;
    cursor: pointer;
    display: block;
    width: 16px;
    height: 12px;
}

.serachResultTableblue .downArrow .sort {
    text-indent: -9999px;
    background-image: url(../../common/img/sort_down_arrow.png);
    background-repeat: no-repeat;
    background-position: bottom center;
    cursor: pointer;
    display: block;
    width: 16px;
    height: 12px;
}

.serachResultTableblue .downArrow .on {
    text-indent: -9999px;
    background-image: url(../../common/img/sort_down_arrow_o.png);
    background-repeat: no-repeat;
    background-position: bottom center;
    cursor: pointer;
    display: block;
    width: 16px;
    height: 12px;
}

.serachResultTableblue td ul.tags li {
    font-size: 12px;
    text-align: center;
    background: #E1E1E1;
    border: 1px solid #999;
    color: #999;
    padding: 0px 5px;
    border-radius: 10px;
    margin: 5px 0px 5px 5px;
}

.serachResultTableblue td ul.tags li.on {
    background: #E0FAFF;
    border: 1px solid #009BFF;
    color: #009BFF;
}

.serachResultTableblue td .linkBox {
    margin: 0px auto;
}

.serachResultTableblue td .linkBox li {
    padding: 0px 0px 10px 0px;
    text-align: center;
}

.serachResultTableblue td .linkBox a.btnType01blue {
    color: #0092F0;
    display: block;
    padding: 10px;
    border-radius: 20px;
    text-align: center;
    font-size: 14px;
    line-height: 18px;
    background: #E0FAFF;
    margin: 0px;
    width: 100%;
    border: 1px solid #0092F0;
}

.serachResultTableblue td .linkBox a.gradationType02orange {
    color: #FFF;
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
    text-align: left;
    font-size: 18px;
    line-height: 24px;
    position: relative;
    margin: 0px;
    width: 100%;
}

.serachResultTableblue td .linkBox a.gradationType02orange small {
    font-size: 14px;
}

.serachResultTable td .linkBox a:hover {
    text-decoration: none;
    opacity: 0.8;
}

.searchConditionBoxblue {
    background: #D5EAFF;
    padding: 20px;
    border-radius: 10px;
    margin: 20px 0px;
}

.searchConditionBoxblue li {
    display: inline-block;
    font-size: 16px;
    padding: 0px 10px 0px 0px;
}


/* column pankuzu --------------------------------------- */

nav#pankuzu ul {
    margin: 0px auto 10px auto;
    font-size: 10px;
    line-height: 15px;
    width: 725px;
    list-style: none;
    padding: 5px 0px;
}

nav#pankuzu ul li {
    display: inline-block;
}

nav#pankuzu ul li:before {
    content: ">";
    padding: 0px 5px;
}

nav#pankuzu ul li:first-child:before {
    content: "";
    padding: 0px;
}


/* column index----------------------------------------------- */

#columnMain h1 {
    font-size: 22px;
    line-height: 140%;
    color: #494949;
    display: block;
    margin-bottom: 10px;
    padding: 0.4em 0.5em;
    background: #f4f4f4;
    border-left: solid 5px #DCC91F;
    border-bottom: solid 3px #d7d7d7;
}

#columnMain ul {
    margin: 0px;
    padding: 0px;
    font-size: 12px;
    line-height: 15px;
    list-style: none;
}

.tagList li {
    display: inline-block;
    padding: 0px 5px 0px 0px;
}

.tagList li:first-child {
    padding: 0px 5px 0px 0px;
}

.tagList li a {
    color: #008FFF;
}

.timeStamp {
    text-align: right;
    width: 100%;
}

.timeStamp li {
    display: inline-block;
    padding: 5px;
    color: #174A7D;
}

.timeStamp li time {
    padding: 0px 5px;
    color: #666;
}

#columnMain {
    font-size: 16px;
    line-height: 32px;
}

#columnMain .entryIndex {
    padding: 0px;
}

#columnMain h2.h2Type01 {
    font-size: 20px;
    line-height: 40px;
    height: 40px;
    background: #F5C87F;
    color: #39393a;
    padding: 0px 10px;
}

#columnMain h3.h3Type01 {
    font-size: 18px;
    line-height: 40px;
    height: 40px;
    border-bottom: 1px solid #cccccc;
    border-left: 7px solid #FF5800;
    color: #545454;
    padding: 0px 10px;
    font-weight: normal;
}

#columnMain ul.listType01 li {
    color: #174A7D;
    font-size: 16px;
    line-height: 25px;
    font-weight: bold;
    padding: 5px 5px 0px 10px;
}

#columnMain ul.listType01 li:before {
    font-family: "Font Awesome 5 Free";
    content: "\f150";
    color: #addc30;
    font-weight: 900;
    margin-right: 10px
}

#columnMain figure {
    text-align: center;
    margin: 0 0 20px;
}

#columnMain figure img {
    vertical-align: bottom;
    max-width: 720px;
}

#columnMain blockquote {
    position: relative;
    padding: 10px 20px;
    box-sizing: border-box;
    font-style: normal;
    background: #EDF5F6 url(../../common/img/bg_blockquote.png) no-repeat left top;
    border: 1px solid #87BEC5;
    border-radius: 3px;
}

#columnMain blockquote p {
    padding: 0px;
    margin: 10px 0px;
    line-height: 150%;
}

#columnMain blockquote cite {
    display: block;
    text-align: right;
    color: #999;
    font-size: 10px;
    font-style: normal;
}

#columnMain strong {
    color: #ff0000;
    background: linear-gradient(transparent 50%, #ff6 50%);
}

#columnMain b {
    color: #ff0000;
    background: linear-gradient(transparent 50%, #ff6 50%);
}

#columnMain cite {
    display: block;
    color: #999;
    font-size: 10px;
    font-style: normal;
}

#columnMain em {
    font-weight: 600;
    background: linear-gradient(transparent 50%, #ff0 50%);
    color: #ff0000;
    font-style: normal
}

#columnMain .matomeBox ul.point {
    padding: 10px;
    border: 1px solid #008FFF;
}

#columnMain .matomeBox ul.point li {
    color: #174A7D;
    font-size: 16px;
    line-height: 25px;
    font-weight: bold;
    padding: 5px 5px 0px 30px;
    background: url(../../common/img/ico_point01.png) no-repeat left 5px;
}

#columnMain ul.point {
    padding: 10px;
    border: 1px solid #008FFF;
}

#columnMain ul.point li {
    color: #174A7D;
    font-size: 16px;
    line-height: 25px;
    font-weight: bold;
    padding: 5px 5px 0px 30px;
    background: url(../../common/img/ico_point01.png) no-repeat left 5px;
}

#columnMain .pointBox {}

#columnMain p {
    margin: 0 0 20px;
}

#columnMain ol {
    margin-bottom: 30px;
}

#columnMain ol li {
    list-style-type: decimal;
    margin-left: 40px;
}

#columnMain h3.pointBoxTit {
    background: #008FFF;
    marin: 0px;
    padding: 0px;
}

#columnMain h3.pointBoxTit img {
    vertical-align: bottom;
}

#columnMain .pointBox ul.point {
    padding: 10px;
    border: 1px solid #008FFF;
}

#columnMain .pointBox ul.point p {
    margin: 0
}

#columnMain .pointBox ul.point li {
    color: #174A7D;
    font-size: 16px;
    line-height: 25px;
    font-weight: bold;
    padding: 5px 5px 0px 30px;
    background: url(../../common/img/ico_point01.png) no-repeat left 5px;
}

#columnMain .pointBox ul.point li em {
    font-style: normal;
    background: linear-gradient(transparent 30%, #FF0 30%);
}

#columnMain .pointBox ul.point li strong {
    color: #FF6B6B;
}

#columnMain .aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#columnMain table.tbarticle {
    border-spacing: 1px;
    width: 100%;
    max-width: 840px;
    margin: 10px auto;
    text-align: center;
    border-collapse: collapse;
    border-spacing: 0px;
    font-size: 15px;
    line-height: 150%;
}

#columnMain table.tbarticle th {
    background-color: #174A7E;
    margin: 0px;
    padding: 5px;
    text-align: center;
    font-weight: bold;
    vertical-align: middle;
    color: #FFF;
}

#columnMain table.tbarticle td {
    padding: 15px;
    background-color: #FFF;
    vertical-align: middle;
    border: 1px solid #EFEFEF;
}

#columnMain table.tbarticle td.tbt {
    background: #EDF5F6;
}

#columnMain .columnList {
    font-size: 16px;
    color: #5e5854;
}


/* #columnMain .columnList .head_special{position: relative;padding: 15px;border-top: 3px solid #ffffff;background-repeat: no-repeat;background-color: #fff;-webkit-box-shadow: rgba(0, 0, 0, 0.18) 0 1px 2px 0;box-shadow: rgba(0, 0, 0, 0.18) 0 1px 2px 0;} */

#columnMain .columnList h2.title {
    font-size: 26px;
    font-weight: bold;
    color: #073E0D;
}

#columnMain .columnList h3.subTitle {
    font-size: 17px;
    padding: 0.25em 0.5em;
    margin: 30px 0 0;
    background: transparent;
    border-bottom: solid 1px #b5b5b5;
    border-left: solid 5px #FF7E16;
}

#columnMain .columnList ul.contentsList {
    padding: 0px 10px 10px 10px;
    font-size: 10px;
    line-height: 150%;
    list-style: none;
}

#columnMain .columnList ul.contentsList a {
    padding: 0px 5px 0px 0px;
    font-size: 16px;
    line-height: 150%;
}

#columnMain .columnList ul.contentsList li {
    background-repeat: no-repeat;
    background-position: left center;
    padding: 10px 0px 10px 5px;
}

#columnMain .columnList ul.contentsList li a {
    color: #3579d4;
    text-decoration: underline;
}

#columnMain .columnList ul.contentsList li {
    background: url("../../common/img/ico_column.png") left/*top*/
    no-repeat;
    background-size: auto 20px;
    padding-left: 30px;
    margin-right: 5px;
}


/*#columnMain .columnList ul.contentsList li :before {font-family: "Font Awesome 5 Free";content: "\f0a4";color: #addc30;font-weight: 900;margin-right:5px}*/

#columnMain .columnList .contentsTextBox {
    padding: 10px 0;
    line-height: 140%;
}

#columnMain .columnList .contentsTextBox p {
    padding: 0 0 5px 0;
}

#columnMain .columnList .contentsTextBox img {
    padding: 10px;
}

#columnMain .RankingList {
    margin-bottom: 20px;
    padding: 10px 0;
    border: 1px solid #dfd8ef;
    border-radius: 0 0 6px 6px;
    background: #ffffdf;
}

#columnMain .marker {
    font-weight: 600;
    background: linear-gradient(transparent 50%, #ff6 50%);
}

#columnMain a.textlink {
    color: #4AA8DD;
}

#columnMain a.bold {
    font-size: 120%;
    font-weight: bold;
}


/* Footer pages --------------------------------------- */

.FooterContentsWrapper {
    margin: 0px;
}

.FooterContents {
    margin: 5px auto 20px auto;
    width: 1000px;
    display: table;
}

.FinfoBox h3 {
    font-size: 20px;
    font-weight: bold;
    margin: 0 0 20px;
    padding: 10px 0px;
}

.FinfoBox .infoTextBox h4 {
    font-size: 16px;
    font-weight: bold;
    border-left: 5px solid #FF7E16;
    padding-left: 10px
}

.FinfoBox .infoTextBox p {
    padding-left: 10px;
    font-size: 14px;
    margin: 5px 0 40px;
}

.FinfoBox .companytable {
    vertical-align: middle;
    border: 1px solid #333;
    border-bottom: 0px solid #333;
    margin-bottom: 40px;
}

.FinfoBox .companytd {
    width: 150px;
    height: 40px;
    text-align: center;
    vertical-align: middle;
    background: #e9e9e9;
    border-right: 1px solid #333;
    border-bottom: 1px solid #333;
}

.FinfoBox .companytdright {
    width: 600px;
    vertical-align: middle;
    border-bottom: 1px solid #333;
}


/* TOP3Ranking --------------------------------------- */

section.top-rank {
    width: 1000px;
    margin: 0px auto;
    margin-bottom: 2rem;
}

section.top-rank h3 img {
    width: 1000px;
    margin-top: 15px;
    margin-bottom: 5px;
}

section.top-rank ol {
    display: flex;
    justify-content: space-between;
    margin: 5px;
}

section.top-rank ol li {
    width: 33%;
    text-align: center;
    position: relative;
    list-style: none;
}

section.top-rank ol li a {
    font-weight: bold;
    font-size: 2.5vw;
    color: #000;
}

.topgroup {
    border-radius: 0.5rem;
    -webkit-box-shadow: 0 2px 8px 0 rgb(2 13 110 / 15%);
    box-shadow: 0 2px 8px 0 rgb(2 13 110 / 15%);
    margin-right: 7px;
    margin-left: 7px;
    margin-top: -10px;
    padding: 8px;
    padding-bottom: 17px;
}

.topgroup p {
    font-size: 15px;
    font-weight: normal;
    color: #144160;
}

.top3_logo {
    height: 62px;
    padding: 4px 0 0;
    border-bottom: 1px solid #ccc;
    margin-bottom: 11px;
}

.btn_top3 {
    border-radius: 15px;
    color: #FFF;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    padding: 4px 20px 3px;
    font-size: 14px;
    letter-spacing: 1px;
    background: #EA3B2D;
}

.word_top3 {
    height: 3.4rem;
}

.topmenu_link p {
    color: #3c62be;
}


/*20220427追加*/

#searchForm.t-lp {
    width: 1000px;
    margin: 15px auto 0;
}


/* button-animation --------------------------------------- */

#ranking .linkBox a.gradationType02 {
    position: relative;
    top: -4px;
    display: block;
    font-size: 15px;
    font-weight: bold;
    color: #fff;
    letter-spacing: 1px;
    text-align: center;
    text-decoration: none;
    background: #F96582;
    background: linear-gradient(60deg, #ff7855, #ff39a0);
    box-sizing: border-box;
    box-shadow: 0 4px 0 0 rgb(237 183 197 / 50%);
    animation: btn-action 1s ease 0s infinite;
    padding: 12px 20px 10px 20px;
}

@keyframes btn-action {
    0% {
        top: -4px;
        box-shadow: 0 4px 0 0 rgba(237, 183, 197, 0.5);
    }
    50% {
        top: 0;
        box-shadow: 0 0 0 0 rgba(237, 183, 197, 0.5);
    }
}

#ranking .linkBox a.gradationType02:after {
    content: '';
    display: block;
    width: 12px;
    height: 18px;
    background: url(../../common/img/ico_arrow.png);
    background-size: contain;
    vertical-align: middle;
    position: absolute;
    right: 20px;
    top: 14px;
}

a.btnType01 {
    letter-spacing: 1px;
}

.btn_top3 {
    position: relative;
    top: -4px;
    background: linear-gradient(60deg, #ff7855, #ff39a0);
    box-shadow: 0 4px 0 0 rgb(237 183 197 / 50%);
    animation: btn-action 1s ease 0s infinite;
}

#featureInner .linkBox a.gradationType02 {
    position: relative;
    top: -4px;
    display: block;
    font-size: 15px;
    font-weight: bold;
    color: #fff;
    letter-spacing: 1px;
    text-align: center;
    text-decoration: none;
    background: #F96582;
    background: linear-gradient(60deg, #ff7855, #ff39a0);
    border-radius: 20px;
    box-sizing: border-box;
    box-shadow: 0 4px 0 0 rgb(237 183 197 / 50%);
    animation: btn-action 1s ease 0s infinite;
    padding: 11px 5px 10px;
}

#featureInner .linkBox a.gradationType02:after {
    display: block;
    width: 100%;
    height: 100%;
    background: url("../../common/img/ico_arrow.png") right 5px center no-repeat;
    background-size: 9px 15px;
    padding-top: 0;
    top: 0;
}

section.top-rank {
    width: 1000px;
    margin: 0px auto;
    margin-bottom: 2rem;
}


/* resultLists ------------------------------------------------ */

#resultLists .list {
    width: 100%;
    margin: 0px 0px 40px 0px;
    padding: 0px;
}

#resultLists .listMainImg {
    width: 670px;
    margin: 0px auto;
    position: relative;
}

#resultLists .listMainImg figure img {
    width: 670px;
}

#resultLists .listMainImg #monthTextBox {
    font-size: 21px;
    line-height: 24px;
    font-weight: normal;
    position: absolute;
    bottom: 10px;
    right: 10px;
    text-align: center;
    padding: 5px;
    color: #FFF;
    background: #FB343D;
}

#resultLists .listMainImg #monthTextBox {
    font-weight: normal;
}

#resultLists .listOutline {
    padding: 10px 0px;
}

#resultLists .listOutline em {
    font-style: normal;
    font-weight: bold;
    color: #000;
    border-bottom: 1px dashed #FB343D;
}

#resultLists .list h2 {
    display: flex;
    flex-wrap: wrap;
    font-size: 24px;
    line-height: 32px;
    font-weight: bold;
}

#resultLists .list .itemData {
    margin-top: 20px;
    padding-bottom: 20px;
}

#resultLists .list #resultLists .list00 .itemNameBox a {
    color: #FFF;
}

#resultLists .list #resultLists .list01 .itemNameBox a {
    color: #DBB400;
}

#resultLists .list #resultLists .list02 .itemNameBox a {
    color: #D3D3D3;
}

#resultLists .list #resultLists .list03 .itemNameBox a {
    color: #E6BEAB;
}

#resultLists .list .itemData {
    border: 1px solid #19197D;
}

#resultLists .list .itemData .itemNameBox {
    background: #19197D;
    display: flex;
    align-items: center;
    padding: 10px 10px 15px 10px;
}

#resultLists .list .itemData .itemNameBox h3 {
    font-size: 24px;
    line-height: 36px;
    font-weight: bold;
}

#resultLists .list .itemData .itemNameBox i {
    padding-right: 10px;
}

#resultLists .list .itemData .itemNameBox i img {
    width: 60px;
}

#resultLists .list .appealTit {
    display: block;
    margin: 20px 0px 0px 0px;
    padding: 0px 30px;
    font-size: 21px;
    line-height: 28px;
    font-weight: bold;
}

#resultLists .list .ratingBoxWrap {
    border: 1px solid #19197D;
    text-align: center;
    margin: 10px 0px 0px 0px;
}

#resultLists .list .ratingBoxWrap h4 {
    color: #FFF;
    font-size: 18px;
    padding: 5px;
    background: #19197D;
}

#resultLists .list .ratingBox {
    padding: 5px;
}

#resultLists .list .ratingBox .rate:before {
    color: #999;
}

#resultLists .list .ratingBox .rate:after {
    color: #DBB400;
    overflow: hidden;
    white-space: nowrap;
}

#resultLists .list .ratingBox .ratingNum {
    color: #DBB400;
}

#resultLists .list .itemDataInner {
    padding: 20px 30px;
    display: flex;
}

#resultLists .list .itemDataInner .imgBox {
    width: 210px;
    margin-right: 20px;
}

#resultLists .list .itemDataInner .imgBox figure {
    width: 210px;
}

#resultLists .list .itemDataInner .imgBox img {
    width: 100%;
}

#resultLists .list .pointBox {
    width: 100%;
    position: relative;
    padding-bottom: 20px;
}

#resultLists .list .pointBox ul {
    margin-top: 10px;
    width: 100%;
}

#resultLists .list .pointBox li {
    font-size: 16px;
    line-height: 24px;
    font-weight: bold;
    padding: 0px 0px 5px 30px;
    background: url(../../common/img/v2_ico_check.png) no-repeat;
    background-size: 24px 24px;
}

#resultLists .list .pointBox li.link {
    position: absolute;
    bottom: 0px;
    right: 0px;
    background: none;
    padding: 0px;
}

#resultLists .list .pointBox li.link a.btnDetails {
    color: #19197D;
    display: inline-block;
    padding: 5px 10px;
    border-radius: 0px;
    text-align: center;
    font-size: 14px;
    line-height: 18px;
    background: #FFF;
    margin: 0px;
    border: 1px solid #19197D;
}

#resultLists .list .specTable {
    padding: 0px 30px;
}

#resultLists .list .specTable table {
    border-collapse: collapse;
    width: 100%;
    border-top: 1px solid #D9D9D9;
    border-bottom: 1px solid #D9D9D9;
}

#resultLists .list .specTable th {
    white-space: nowrap;
    padding: 5px;
    background: #D9D9D9;
    text-align: center;
    border-right: 1px solid #FFF;
}

#resultLists .list .specTable th:first-child {
    border-left: 1px solid #D9D9D9;
}

#resultLists .list .specTable th:last-child {
    border-right: 1px solid #D9D9D9;
}

#resultLists .list .specTable td {
    padding: 5px;
    background: #FFF;
    border-right: 1px solid #D9D9D9;
    text-align: center;
}

#resultLists .list .specTable td:first-child {
    border-left: 1px solid #D9D9D9;
}

#resultLists .list .specialtyBox {
    display: flex;
    align-items: center;
    border: 1px solid #F3F3F3;
    padding: 0px;
    margin: 10px 30px;
    background: #F3F3F3;
}

#resultLists .list .specialtyBox h4 {
    width: 120px;
    font-weight: normal;
    font-size: 16px;
    padding: 5px 10px;
    color: #333;
    text-align: center;
}

#resultLists .list .specialtyBox ul {
    display: flex;
    flex-wrap: wrap;
    background: #FFF;
    padding: 5px;
}

#resultLists .list .specialtyBox ul li {
    background: #E1E1E1;
    border: 1px solid #F3F3F3;
    color: #747474;
    padding: 0px 10px;
    border-radius: 0px;
    margin: 5px 0px 5px 5px;
}

#resultLists .list .specialtyBox ul li.on {
    background: #EDEDF5;
    border: 1px solid #EDEDF5;
    color: #19197D;
}

#resultLists .list .osusumePoint {
    padding: 20px;
    background: #F3F3F3;
    margin: 10px 30px;
    border-radius: 0px;
}

#resultLists .list .osusumePoint .osusumeTit {
    margin: 0px auto 10px auto;
    display: block;
    color: #0A0A0A;
    font-weight: bold;
    font-size: 18px;
    line-height: 24px;
}

#resultLists .list .osusumePoint em {
    color: #FB343D;
    font-style: normal;
}

#resultLists .list .linkBox2 ul {
    margin: 20px 0px 10px 0px;
    display: flex;
    justify-content: space-between;
}

#resultLists .list .linkBox2 li:first-child {
    width: 23%;
    padding-right: 10px;
}

#resultLists .list .linkBox2 li:last-child {
    width: 77%;
}

#resultLists .list .linkBox2 a.btnType01 {
    color: #FF7E16;
    display: block;
    padding: 10px 10px;
    border-radius: 40px;
    text-align: center;
    font-size: 16px;
    line-height: 18px;
    background: #FCF1CE;
    margin: 0px;
    width: 100%;
    border: 1px solid #FF7E16;
}

#resultLists .list .linkBox2 a.gradationType02 {
    color: #FFF;
    display: block;
    padding: 10px 20px;
    border-radius: 0px;
    text-align: center;
    font-size: 18px;
    line-height: 24px;
    position: relative;
    margin: 0px;
    width: 100%;
}

#resultLists .list .linkBox2 a:hover {
    text-decoration: none;
    opacity: 0.8;
}

#resultLists .list .linkBox2 a.btnDetails {
    color: #19197D;
    display: inline-block;
    padding: 10px;
    border-radius: 0px;
    text-align: center;
    font-size: 18px;
    line-height: 24px;
    background: #FFF;
    margin: 0px;
    border: 1px solid #19197D;
}

#resultLists .list .linkBox2 {
    padding: 0px 30px;
}

#resultLists .list .itemNameBox a {
    color: #FFF;
}

#resultLists .sortBox {
    width: 100%;
}

#resultLists .sortBox ul {
    display: flex;
    width: 100%;
}

#resultLists .sortBox li {
    margin: 0px 2px;
    background: #FFE9D7;
    border-radius: 10px;
    padding: 5px;
    font-size: 12px;
    text-align: center;
    color: #FF7E16;
    width: 25%;
    line-height: 14px;
}

#resultLists .sortBox li span {
    display: block;
}

#resultLists .sortBox li:first-child {
    margin: 0px 2px 0px 0px;
}

#resultLists .sortBox li:last-child {
    margin: 0px 0px 0px 2px;
}

#resultLists .sortBox .sort {
    cursor: pointer;
}


/*20220620追加*/

.add-a-brackets .btn_top3:before,
.add-a-brackets .gradationType02:before,
.add-a-brackets.gradationType02:before,
.add-a-brackets .btnType02 span:before,
.add-a-brackets.btnType02 span:before {
    content: "【"
}

.add-a-brackets .submit .gradationType02:before {
    display: none;
}

#ranking .linkBox a.gradationType02.add-a-brackets:after,
#featureInner .linkBox a.add-a-brackets:after,
a.btnType02.add-a-brackets span,
.add-a-brackets a.btnType02 span,
.add-a-brackets #ranking .linkBox a.gradationType02:after,
.add-a-brackets .btn_top3:after {
    content: '】';
    display: inline;
    width: auto;
    height: auto;
    background: none;
    background-size: contain;
    vertical-align: middle;
    position: relative;
    right: 0;
    top: 0;
}





.linkBox a.gradationType02b {
    display: block;
    position: relative;
    background:#ff5722 !important;
    box-shadow: 0 3px 0 0 rgba(217, 80, 80, 1) !important;
    border-radius: 5px !important;
    font-weight: bold;
    font-size: 18px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    overflow: hidden;
    padding: 15px 20px;
    margin: 0 auto;
}

.linkBox a.gradationType02b:hover {
    text-decoration: none;
    color: #fff;
    box-shadow: none;
    transform: translateY(3px);
    background-color: #ff5722;
}

.linkBox a.gradationType02b::before {
    position: absolute;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #fff;
    transition: 0.2s;
    animation: official 6s ease-in-out infinite;
}
.linkBox a.gradationType02b:after {
    display: none !important;
    width: 100%;
    height: 100%;
    background: none;
    padding-top: 0;
    top: 0;
}
.linkBox a.btnType01b {
    background-color: #fff;
    border: none;
    outline: solid 1px #333;
    outline-offset: -1px;
    color: #333;
    display: block;
    font-size: 14px;
    text-align: center;
    text-decoration: none;
    padding: 16px 20px;
    border-radius: 5px;
}

.linkBox a.btnType01b:hover {
    border: none;
    outline: solid 1px #ff0057;
    outline-offset: -1px;
}



.btn_top3b {
    background-color: #ff5722;
    box-shadow: 0 3px 0 0 rgba(217, 80, 80, 1);
    border-radius: 5px;
    color: #FFF;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    padding: 4px 20px 3px;
    font-size: 14px;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
}

.btn_top3b:before {
    position: absolute;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    width: 10px;
    height: 100%;
    background-color: #fff;
    transition: 0.2s;
    animation: official 6s ease-in-out infinite;
}

.btn_top3b:hover {
    text-decoration: none;
    color: #fff;
    box-shadow: none;
    transform: translateY(3px);
    background-color: #ff5722;
}

.serachResultTable .linkBox a.gradationType02b{
font-size: 15px;
}

@keyframes btn-action {
    0% {
        top: -4px;
        box-shadow: 0 4px 0 0 rgba(237, 183, 197, 0.5);
    }

    50% {
        top: 0;
        box-shadow: 0 0 0 0 rgba(237, 183, 197, 0.5);
    }
}

@keyframes official {
    0% {
        transform: scale(0) rotate(45deg);
        opacity: 0;
    }

    80% {
        transform: scale(0) rotate(45deg);
        opacity: 0.5;
    }

    81% {
        transform: scale(4) rotate(45deg);
        opacity: 1;
    }

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