@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(../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;
    font-size: 16px;
}

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

.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: 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%);
}


/* abtest 210305 --------------------------------------- */

.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: 100%;
    max-width: 750px;
    margin: 0px auto;
    position: relative;
}

#headerInner h1 {
    padding: 10px;
    width: 100%;
    text-align: center
}

#headerInner h1 img {
    width: 150px;
}

#headerInner ul#hMenu {
    display: flex;
    align-items: center;
    position: absolute;
    right: 10px;
    bottom: 10px;
}

#hMenu li {
    padding: 0px 0px 0px 0px;
    text-align: center;
    line-height: 1em;
}

#hMenu li:last-child {
    padding: 0px;
}

#hMenu li i {
    padding: 0px;
    font-size: 32px;
    color: #FFF;
    display: block;
}

#hMenu li span {
    font-size: 12px;
    color: #FFF;
}

#hMenu li a:hover {
    text-decoration: none;
    color: #FFF;
}

#hMenu li a {
    color: #333;
    display: block;
}


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

.scrollBanner {
    display: none;
}

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

.scrollBanner li img {
    height: 30px;
}


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

#mainImg {
    width: 100%;
    max-width: 750px;
    margin: 0px auto;
    position: relative;
}

#mainImg figure img {
    width: 100%;
}

.mainImgBtnBox {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    background: #FFF;
    border-radius: 20px;
    min-width: 300px;
}

.mainImgBtnBox a {
    color: #FFF;
    display: block;
    padding: 10px 30px;
    border-radius: 20px;
    text-align: center;
    font-size: 16px;
    line-height: 18px;
    position: relative;
    margin: 0px auto;
}

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

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

#mainImg #monthTextBox {
    font-size: 10px;
    line-height: 12px;
    font-weight: 900;
    position: absolute;
    top: 11px;
    left: 11px;
    text-align: center;
    padding: 5px;
    color: #000;
}

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


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

.characteristicRankingBox {
    margin: 20px 0px;
    padding: 0px 10px;
}

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

.characteristicRankingBox h2 i {
    margin-right: 5px;
    width: 24px;
}

.characteristicRankingBox h2 img {
    width: 100%;
}

.characteristicRankingBox ul {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 5px 0px 0px 0px;
    padding: 0px;
}

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

.characteristicRankingBox li:nth-child(2n) {
    padding-right: 0px;
}

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

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

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

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


/* abtest 10.7 taro ------------------------------------------------ */

.characteristicRankingBoxb {
    margin: 20px 0px;
    padding: 0px 10px;
}

.characteristicRankingBoxb h2 {
    display: flex;
    font-size: 16px;
    line-height: 21px;
    font-weight: bold;
}

.characteristicRankingBoxb h2 i {
    margin-right: 5px;
    width: 24px;
}

.characteristicRankingBoxb h2 img {
    width: 100%;
}

.characteristicRankingBoxb ul {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0px;
    padding: 10px 0px;
}

.characteristicRankingBoxb li {
    width: 50%;
    padding: 0px 10px 10px 0px;
    position: relative;
}

.characteristicRankingBoxb li:nth-child(2n) {
    padding-right: 0px;
}

.characteristicRankingBoxb li a {
    font-size: 85%;
    line-height: 21px;
    text-align: center;
    display: flex;
    align-items: center;
    width: 100%;
    color: #FFF;
    text-align: left;
    border-radius: 10px;
    padding: 12px 5px 12px 5px;
}

.characteristicRankingBoxb li a i {
    width: 24px;
    margin-right: 5px;
}

.characteristicRankingBoxb li img {
    position: static;
    top: 0px;
    left: 0px;
    right: 0px;
    margin-left: inherit;
    width: 100%;
}


/* absolute -> static */

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


/* --------------------   ここまで   ----------------------- */


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

#contents {
    width: 100%;
    max-width: 750px;
    margin: 5px auto 40px auto;
}


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

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

#fTextBoxInner {
    width: 100%;
    max-width: 750px;
    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: 100%;
    max-width: 750px;
    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: 100%;
    max-width: 750px;
    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: 100%;
    max-width: 750px;
    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: 100%;
    max-width: 750px;
    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: 100%;
    max-width: 750px;
    padding: 5px 0px;
    text-align: center;
    color: #FFF;
    font-size: 12px;
    line-height: 15px;
    margin: 0px auto;
}


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

#localMenu {
    margin: 40px 0px;
    padding: 0px 10px;
}

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

#localMenu h2 i {
    margin-right: 5px;
    width: 24px;
}

#localMenu h2 img {
    width: 100%;
}

#localMenu h2.rankingNav {
    font-size: 16px;
    line-height: 21px;
    font-weight: normal;
    color: #FFF;
    background: #FF7E16;
    padding: 10px;
}

#localMenu h2.rankingNav strong {
    font-size: 21px;
    line-height: 21px;
}

#localMenu ul.rankingList {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0px;
    padding: 10px;
    border: 1px solid #FF7E16;
}

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

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

#localMenu ul.rankingList li a {
    font-size: 14px;
    line-height: 21px;
    text-align: center;
    display: flex;
    align-items: center;
    width: 100%;
    color: #FFF;
    text-align: left;
    border-radius: 10px;
    padding: 12px 5px 12px 5px;
}

#localMenu ul.rankingList li a i {
    width: 24px;
    margin-right: 5px;
}

#localMenu ul.rankingList li a img {
    width: 100%;
}

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

#localMenu ul.rankingList li.twoLines a {
    font-size: 12px;
    line-height: 14px;
    letter-spacing: -0.05em;
    padding: 10px 5px;
}

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

#localMenu .prefTable th {
    padding: 5px;
    font-weight: normal;
    width: 100px;
    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;
}

@media (max-width: 320px) {
    #localMenu ul.rankingList li a {
        font-size: 14px;
        line-height: 21px;
        padding: 14px 5px 14px 5px;
    }
    #localMenu ul.rankingList li.twoLines a {
        font-size: 10px;
        line-height: 14px;
    }
    #localMenu ul.rankingList li a i {
        width: 16px;
        margin-right: 5px;
    }
}


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

#rankingMainImg {
    width: 100%;
    max-width: 750px;
    margin: 0px auto;
    position: relative;
}

#rankingMainImg figure img {
    width: 100%;
}

#rankingMainImg #monthTextBox {
    font-size: 15px;
    line-height: 19px;
    font-weight: bold;
    position: absolute;
    bottom: 5px;
    right: 5px;
    text-align: center;
    padding: 3px;
    color: #FFF;
    background: #FB343D;
}

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

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

#ranking h2 {
    display: flex;
    font-size: 16px;
    line-height: 21px;
    font-weight: bold;
}

#ranking h2 i {
    margin-right: 5px;
    width: 24px;
}

#ranking h2 img {
    width: 100%;
}

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

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

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

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

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

#ranking #ranking01 .itemNameBox {
    background: #FB343D;
}

#ranking #ranking02 .itemNameBox {
    background: #9CABC8;
}

#ranking #ranking03 .itemNameBox {
    background: #009944;
}

#ranking #ranking00 .itemNameBox {
    background: #FF7E16;
}

#ranking .itemData .itemNameBox {
    position: relative;
    padding: 5px 10px 5px 60px;
    display: flex;
    align-items: stretch;
}

#ranking .itemData .itemNameBox h3 {
    font-size: 18px;
    line-height: 21px;
    font-weight: bold;
}

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

#ranking .itemData .itemNameBox i {
    position: absolute;
    top: -5px;
    left: 5px;
    width: 48px;
}

#ranking .itemData .itemNameBox i img {
    width: 48px;
}

#ranking .itemData .itemNameBox .inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#ranking .itemData .itemNameBox .inner .ratingBoxWrap {
    align-self: flex-end;
}

#ranking .itemData .itemNameBox .ratingBox {
    display: flex;
    align-items: center;
}

#ranking .itemData .itemNameBox .ratingBox .ratingNum {
    color: #FFF;
    font-size: 18px;
    margin: 0px 5px;
}

#ranking .itemData .itemNameBox .ratingBox .rate:before {
    color: #999;
}

#ranking .itemData .itemNameBox .ratingBox .rate:after {
    color: #FAD850;
}

#ranking .itemData .itemDataInner {
    display: flex;
    padding: 10px;
    margin-top: 10px;
}

#ranking .itemData .itemDataInner .imgBox {
    width: 120px;
}

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

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

#ranking .itemData .specTable {
    width: 100%;
    padding: 0px 0px 0px 10px;
}

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

#ranking .itemData .specTable th {
    padding: 2px 5px;
    background: #D9D9D9;
    text-align: center;
    border-right: 1px solid #D9D9D9;
    vertical-align: middle;
    color: #333;
    border-bottom: 1px solid #FFF;
    white-space: nowrap;
    font-weight: normal
}

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

#ranking .itemData .specTable td {
    padding: 2px 5px;
    background: #FFF;
    border-right: 1px solid #D9D9D9;
    border-bottom: 1px solid #D9D9D9;
    text-align: left;
    vertical-align: middle;
}

#ranking .itemData .specTable .ratingBox {
    display: flex;
    align-items: center;
}

#ranking .itemData .specTable .rate {
    margin: 0px;
    position: relative;
    display: inline-block;
    width: 60px;
    font-size: 12px;
}

#ranking .itemData .specTable .rate:before,
#searchResultTable .rate:after {
    position: absolute;
    top: -12px;
    left: 0px;
    content: '★★★★★';
    display: inline-block;
}

#ranking .itemData .specTable .rate:before {
    color: #999;
}

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

#ranking .itemData .specTable .rate1:after {
    width: 12px;
}

#ranking .itemData .specTable .rate2:after {
    width: 24px;
}

#ranking .itemData .specTable .rate3:after {
    width: 36px;
}

#ranking .itemData .specTable .rate4:after {
    width: 48px;
}

#ranking .itemData .specTable .rate5:after {
    width: 60px;
}

#ranking .itemData .specTable .ratingBox .ratingNum {
    color: #333;
    font-size: 16px;
    margin: 0px 5px;
}

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

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

#ranking .specialtyBox {
    border: 1px solid #FAD850;
    padding: 0px;
    margin: 10px 10px 20px 10px;
    background: #FAD850;
}

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

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

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

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

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

#ranking .osusumePoint .osusumeTit {
    margin: 10px auto;
    display: block;
    width: 210px;
}

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

#ranking .linkBox li {
    text-align: center;
    padding: 5px 0px;
}

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

#ranking .linkBox a.gradationType02:after {
    content: '';
    display: block;
    width: 6px;
    height: 9px;
    background: url(../img/btn_arrow01.png);
    background-size: contain;
    vertical-align: middle;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

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

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

@media (max-width: 374px) {
    #ranking .itemData .itemDataInner {
        display: block;
        padding: 10px;
        margin-top: 10px;
    }
    #ranking .itemData .itemDataInner .imgBox {
        width: 180px;
        margin: 0px auto 20px auto;
    }
    #ranking .itemData .itemDataInner .imgBox figure {
        width: 180px;
    }
    #ranking .itemData .specTable {
        width: 100%;
        padding: 0px;
    }
}

.kyujin img {
    width: 100%;
}


/* 1016ABtest ------------------------------------------------ */

#ranking .itemData .specTableb {
    width: 100%;
    padding: 0px 0px 0px 0px;
}

#ranking .itemData .specTableb table {
    width: 100%;
    border-collapse: collapse;
    border-top: 1px solid #D9D9D9;
    font-size: 17px;
}

#ranking .itemData .specTableb th {
    padding: 2px 5px;
    background: #D9D9D9;
    text-align: center;
    border-right: 1px solid #D9D9D9;
    vertical-align: middle;
    color: #333;
    border-bottom: 1px solid #FFF;
    white-space: nowrap;
    font-weight: normal;
    height: 35px;
}

#ranking .itemData .specTableb tr:last-child th {
    border-bottom: 1px solid #D9D9D9;
}

#ranking .itemData .specTableb td {
    padding: 2px 5px;
    background: #FFF;
    border-right: 1px solid #D9D9D9;
    border-bottom: 1px solid #D9D9D9;
    text-align: left;
    vertical-align: middle;
}

#ranking .itemData .specTableb .ratingBox {
    display: flex;
    align-items: center;
}

#ranking .itemData .specTableb .rate {
    margin: 0px;
    position: relative;
    display: inline-block;
    width: 60px;
    font-size: 18px;
}

#ranking .itemData .specTableb .rate:before,
#searchResultTable .rate:after {
    position: absolute;
    top: -12px;
    left: 0px;
    content: '★★★★★';
    display: inline-block;
}

#ranking .itemData .specTableb .rate:before {
    color: #999;
}

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

#ranking .itemData .specTableb .rate1:after {
    width: 21px;
}

#ranking .itemData .specTableb .rate2:after {
    width: 36px;
}

#ranking .itemData .specTableb .rate3:after {
    width: 56px;
}

#ranking .itemData .specTableb .rate4:after {
    width: 76px;
}

#ranking .itemData .specTableb .rate5:after {
    width: 90px;
}

#ranking .itemData .specTableb .ratingBox .ratingNum {
    color: #333;
    font-size: 16px;
    margin: 0px 0px 0px 45px;
}

#ranking .itemData .itemDataInnerb {
    ;
    padding: 10px;
    margin-top: 10px;
}

#ranking .itemData .itemDataInnerb .imgBox {
    width: 300px;
    margin: 5px auto;
}

#ranking .itemData .itemDataInnerb .imgBox figure {
    width: 300px;
}

#ranking .itemData .itemDataInnerb .imgBox figure img {
    width: 100%;
}

@media (max-width: 374px) {
    #ranking .itemData .itemDataInnerb {
        display: block;
        padding: 10px;
        margin-top: 10px;
    }
    #ranking .itemData .itemDataInnerb .imgBox {
        width: 180px;
        margin: 0px auto 20px auto;
    }
    #ranking .itemData .itemDataInnerb .imgBox figure {
        width: 180px;
    }
    #ranking .itemData .specTableb {
        width: 100%;
        padding: 0px;
    }
}


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

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

#feature h2 {
    display: flex;
    align-items: middle;
    font-size: 16px;
    line-height: 24px;
    color: #333;
    font-weight: bold;
    background: #FF0;
    padding: 10px;
}

#feature h2 i {
    margin-right: 5px;
    width: 24px;
}

#feature h2 img {
    width: 100%;
}

#feature a:hover {
    text-decoration: none;
}

#feature #featureInner {
    margin-top: 10px;
}

#feature .itemData {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid #FF7E16;
    padding: 10px 30px 20px 10px;
    margin: 0px 0px 10px 0px;
    background: url(../../sp/common/img/ico_link_arrow.png)no-repeat right center;
}

#feature .itemData .imgBox figure {
    width: 140px;
    margin-right: 10px;
}

#feature .itemData .imgBox figure img {
    width: 100%;
}

#feature .itemData .textBox {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#feature .itemData .textBox .inner {
    align-self: flex-start;
}

#feature .itemData .textBox .inner h3 {
    color: #FF7E16;
    font-size: 18px;
    line-height: 21px;
    font-weight: bold;
    margin-bottom: 5px;
}

#feature .itemData .textBox .ratingBox {
    display: flex;
    align-items: center;
}

#feature .itemData .textBox .ratingBox .ratingNum {
    color: #333;
    font-size: 18px;
    margin: 0px 5px;
}

#feature .itemData .textBox .ratingBox .rate:after {
    position: absolute;
    top: -12px;
    left: 0px;
}

#feature .itemData .textBox .ratingBox .rate:before {
    position: absolute;
    top: -12px;
    left: 0px;
}


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

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

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

#searchForm h2 i {
    margin-right: 5px;
    width: 24px;
}

#searchForm h2 img {
    width: 100%;
}

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

#searchTable table td {
    padding: 2px 0px 3px 0px;
    text-align: left;
    vertical-align: middle;
    font-size: 12px;
    line-height: 18px;
    border-bottom: 1px dotted #FF7E16;
}

#searchTable table th {
    text-align: left;
    padding: 3px 10px 2px 0px;
    font-size: 14px;
    line-height: 18px;
    vertical-align: middle;
    white-space: nowrap;
    border-bottom: 1px dotted #FF7E16;
}

#searchTable table tr:last-child th,
#searchTable table tr:last-child td {
    border-bottom: none;
}

#searchTable label {
    font-weight: normal;
}

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

.formParts li {
    padding: 5px;
    margin: 0px;
    vertical-align: top;
    text-align: left;
}

.formParts label {
    width: 100%;
}

.formParts .w25p {
    width: 50%;
}

.formParts .w50p {
    width: 50%;
}

.checkboxInput {
    display: none !important;
}

.checkboxParts {
    cursor: pointer;
    position: relative;
    transition: .2s;
    color: #666;
    border-radius: 15px;
    display: inline-block;
    padding: 5px 15px;
    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 15px;
    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;
}

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

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

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


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

#searchConditionWrap {
    padding: 0px 10px;
}

#searchCondition {
    background: #FFFBD5;
    padding: 10px;
    border-radius: 10px;
    margin: 0px;
}

#searchConditionInner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#searchConditionInner h2 {
    display: flex;
    align-items: center;
    flex;
    font-size: 16px;
    line-height: 16px;
    font-weight: bold;
}

#searchConditionInner i {
    margin-right: 5px;
    width: 16px;
}

#searchConditionInner i img {
    width: 100%;
    vertical-align: middle;
}

#searchCondition li {
    display: inline-block;
    font-size: 14px;
    padding: 0px 10px 0px 0px;
}

#searchCondition h3 {
    font-size: 14px;
    margin: 10px 0px 5px -0.5em;
}

#searchHitCountBox strong {
    font-size: 21px;
    line-height: 16px;
    color: #FF7800;
    padding: 0px 5px;
}

#searchCondition a {
    display: flex;
    align-items: center;
    background: #FFFF91;
    padding: 5px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 16px;
    font-weight: bold;
}

#searchCondition a span {
    padding: 0px 5px;
}

#searchCondition a:hover {
    text-decoration: none;
}

#searchResultTable {
    padding: 10px;
}

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

#searchResultTable table td {
    text-align: center;
    padding: 5px;
    vertical-align: middle;
    font-size: 12px;
    line-height: 16px;
    border-left: 1px solid #FF7800;
    border-bottom: 1px solid #FF7800;
}

#searchResultTable table th {
    text-align: center;
    font-size: 12px;
    line-height: 16px;
    background: #FF7800;
    color: #FFF;
    padding: 5px;
    text-align: center;
    vertical-align: middle;
    border-left: 1px solid #FFF;
    border-bottom: 1px solid #FF7800;
    font-weight: normal;
    white-space: nowrap;
}

#searchResultTable table th:first-child {
    border-left: 1px solid #FF7800;
}

#searchResultTable .rate {
    margin: 0px;
    position: relative;
    display: inline-block;
    width: 60px;
    font-size: 12px;
}

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

#searchResultTable .rate:before {
    color: #999;
}

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

#searchResultTable .rate1:after {
    width: 12px;
}

#searchResultTable .rate2:after {
    width: 24px;
}

#searchResultTable .rate3:after {
    width: 36px;
}

#searchResultTable .rate4:after {
    width: 48px;
}

#searchResultTable .rate5:after {
    width: 60px;
}

#searchResultTable table td .ratingNum {
    font-size: 12px;
    color: #333;
    display: block;
    margin: 0px;
}

#searchResultTable table td figcaption {
    margin-bottom: 5px;
    display: block;
    font-size: 12px;
    font-weight: bold;
}

#searchResultTable table td figure img {
    width: 100%;
    max-width: 96px;
    margin: 0px auto;
}

#searchResultTable table td.siteName figure img {
    max-width: 150px;
}

#searchResultTable table td figure {
    text-align: center;
    margin-bottom: 5px;
}

#searchResultTable .linkBox li {
    margin: 5px 0px;
}

#searchResultTable .linkBox a.gradationType02 {
    color: #FFF;
    display: block;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 18px;
    position: relative;
    margin: 0px auto;
    display: inline-block;
}

#searchResultTable .linkBox a.gradationType02 small {
    font-size: 10px;
}

#searchResultTable .linkBox a.gradationType02 span {
    margin: 0px auto;
    text-align: left;
    display: block;
}

#searchResultTable .linkBox a.btnType01 {
    color: #FF7E16;
    display: inline-block;
    padding: 5px 10px;
    border-radius: 10px;
    text-align: center;
    font-size: 10px;
    line-height: 12px;
    background: #FCF1CE;
    margin: 0px;
    border: 1px solid #FF7E16;
}

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

.sortBox {
    width: 100%;
}

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

.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;
}

.sortBox li span {
    display: block;
}

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

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

.sortBox .sort {
    cursor: pointer;
}

#searchResult {
    width: 100%;
    margin: 0px 0px 20px 0px;
    padding: 0px 10px;
}

#searchResult .itemData {
    margin-top: 10px;
    padding-bottom: 20px;
    border: 1px solid #FF7E16;
}

#searchResult .itemData .itemNameBox {
    position: relative;
    padding: 5px 10px 5px 10px;
    display: flex;
    align-items: stretch;
    background: #FF7E16;
}

#searchResult .itemData .itemNameBox h3 {
    font-size: 18px;
    line-height: 21px;
    font-weight: bold;
}

#searchResult .itemData .itemNameBox a {
    color: #FFF;
}

#searchResult .itemData .itemNameBox .inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#searchResult .itemData .itemNameBox .inner .ratingBoxWrap {
    align-self: flex-end;
}

#searchResult .itemData .itemNameBox .ratingBox {
    display: flex;
    align-items: center;
}

#searchResult .itemData .itemNameBox .ratingBox .ratingNum {
    color: #FFF;
    font-size: 18px;
    margin: 0px 5px;
}

#searchResult .itemData .itemNameBox .ratingBox .rate:before {
    color: #999;
}

#searchResult .itemData .itemNameBox .ratingBox .rate:after {
    color: #FAD850;
}

#searchResult .itemData .itemDataInner {
    ;
    padding: 10px;
    margin-top: 10px;
}

#searchResult .itemData .itemDataInner .imgBox {
    width: 300px;
    margin: 5px auto;
}

#searchResult .itemData .itemDataInner .imgBox figure {
    width: 300px;
}

#searchResult .itemData .itemDataInner .imgBox figure img {
    width: 100%;
}

#searchResult .itemData .specTable {
    width: 100%;
    padding: 0px 0px 0px 0px;
}

#searchResult .itemData .specTable table {
    width: 100%;
    border-collapse: collapse;
    border-top: 1px solid #D9D9D9;
    font-size: 17px;
}

#searchResult .itemData .specTable th {
    padding: 2px 5px;
    background: #D9D9D9;
    text-align: center;
    border-right: 1px solid #D9D9D9;
    vertical-align: middle;
    color: #333;
    border-bottom: 1px solid #FFF;
    white-space: nowrap;
    font-weight: normal;
    height: 35px;
}

#searchResult .itemData .specTable tr:last-child th {
    border-bottom: 1px solid #D9D9D9;
}

#searchResult .itemData .specTable td {
    padding: 2px 5px;
    background: #FFF;
    border-right: 1px solid #D9D9D9;
    border-bottom: 1px solid #D9D9D9;
    text-align: left;
    vertical-align: middle;
}

#searchResult .itemData .specTable .ratingBox {
    display: flex;
    align-items: center;
}

#searchResult .itemData .specTable .rate {
    margin: 0px;
    position: relative;
    display: inline-block;
    width: 60px;
    font-size: 18px;
}

#searchResult .itemData .specTable .rate:before,
#searchResultTable .rate:after {
    position: absolute;
    top: -12px;
    left: 0px;
    content: '★★★★★';
    display: inline-block;
}

#searchResult .itemData .specTable .rate:before {
    color: #999;
}

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

#searchResult .itemData .specTable .rate1:after {
    width: 21px;
}

#searchResult .itemData .specTable .rate2:after {
    width: 36px;
}

#searchResult .itemData .specTable .rate3:after {
    width: 56px;
}

#searchResult .itemData .specTable .rate4:after {
    width: 76px;
}

#searchResult .itemData .specTable .rate5:after {
    width: 90px;
}

#searchResult .itemData .specTable .ratingBox .ratingNum {
    color: #333;
    font-size: 16px;
    margin: 0px 0px 0px 45px;
}

#searchResult .specialtyBox {
    border: 1px solid #FAD850;
    padding: 0px;
    margin: 10px 10px 20px 10px;
    background: #FAD850;
}

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

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

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

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

#searchResult .osusumePoint {
    padding: 10px;
    background: #FFFBD5;
    margin: 10px 10px 15px 10px;
    border-radius: 10px;
}

#searchResult .osusumePoint .osusumeTit {
    margin: 10px auto;
    display: block;
    width: 210px;
}

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

#searchResult .linkBox li {
    text-align: center;
    padding: 5px 0px;
}

#searchResult .linkBox a.gradationType02 {
    color: #FFF;
    display: block;
    padding: 10px 20px;
    border-radius: 20px;
    text-align: center;
    width: 300px;
    font-size: 16px;
    line-height: 18px;
    position: relative;
    margin: 0px auto;
}

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

#searchResult .linkBox a.btnType01 {
    color: #FF7E16;
    display: inline-block;
    padding: 10px 20px;
    border-radius: 20px;
    text-align: center;
    font-size: 12px;
    line-height: 18px;
    background: #FCF1CE;
    margin: 0px;
    border: 1px solid #FF7E16;
}

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

@media (max-width: 374px) {
    #searchResult .itemData .itemDataInner {
        display: block;
        padding: 10px;
        margin-top: 10px;
    }
    #searchResult .itemData .itemDataInner .imgBox {
        width: 180px;
        margin: 0px auto 20px auto;
    }
    #searchResult .itemData .itemDataInner .imgBox figure {
        width: 180px;
    }
    #searchResult .itemData .specTable {
        width: 100%;
        padding: 0px;
    }
}

#searchResult .pointBox ul {
    margin: 10px;
}

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


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

#mainTitImg {
    margin: -10px 0px 0px 0px;
    padding: 10px;
}

#mainTitImg figure {
    width: 100%;
}

#mainTitImg figure img {
    width: 100%;
}


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

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

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

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

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

#jobDataHead .catch em {
    border: none;
}

#jobDataInner {
    padding: 10px;
}

#jobDataInner .specialtyBox ul {
    display: flex;
    flex-wrap: wrap;
    background: #FFF;
    font-size: 12px;
}

#jobDataInner .specialtyBox ul li {
    width: 68px;
    background: #E1E1E1;
    border: 1px solid #999;
    color: #999;
    padding: 0px;
    text-align: center;
    border-radius: 10px;
    margin: 3px 2px 3px 3px;
}

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

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

#jobDataInner .honestDetailsBox .honestDetailsImg {
    width: 100%;
    padding: 0px;
    margin: 0px auto;
}

#jobDataInner .honestDetailsBox .honestDetailsImg img {
    width: 100%;
    margin-bottom: 10px;
}

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

#jobDataInner .jobDataInnerWrap {
    display: block;
    padding: 20px 0px;
}

#jobDataInner .memberAttributesBox {
    margin-bottom: 20px;
}

#jobDataInner .memberAttributesBox #chartDiv {
    padding: 0px;
    width: 300px;
    margin: 0px auto;
}

#jobDataInner .recommendedLayerBox figure {
    padding: 0px;
    width: 300px;
    margin: 0px auto;
    text-align: center;
}

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

#jobDataInner .jobDataInnerWrap h3 i {
    margin-right: 5px;
    width: 24px;
}

#jobDataInner .jobDataInnerWrap h3 img {
    width: 100%;
}

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

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

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

#jobData .linkBox a.gradationType02 {
    color: #FFF;
    display: block;
    padding: 10px 20px;
    border-radius: 20px;
    text-align: center;
    width: 300px;
    font-size: 16px;
    line-height: 18px;
    position: relative;
    margin: 0px auto;
}

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

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


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

#freeHtml {
    margin: 40px 0px;
    padding: 0px 10px;
}

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

#freeHtml h2 i {
    margin-right: 5px;
    width: 24px;
}

#freeHtml h2 img {
    width: 100%;
}

#freeHtml figure {
    width: 100%;
}

#freeHtml figure img {
    width: 100%;
}


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

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

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

#comparison h2 i {
    margin-right: 5px;
    width: 24px;
}

#comparison h2 img {
    width: 100%;
}

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

#comparison table th {
    padding: 5px;
    background: #FFF;
    text-align: center;
    border-right: 1px solid #FF9947;
    vertical-align: middle;
    color: #333;
    border-bottom: 1px solid #FF9947;
    white-space: nowrap;
    font-size: 10px;
}

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

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

#comparison table tr:nth-child(odd) td {
    background: #FFF;
}

#comparison table tr.current td {
    background: #F9D1CD;
    font-size: 10px;
}

#comparison table tr td img {
    width: 24px;
}

#comparison table tr.current td.head {
    background: #FB343D;
    color: #FFF;
}

#comparison table td {
    padding: 5px 0px;
    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 tr td.head {
    background: #FF9947;
    color: #FFF;
    font-weight: bold;
    border-bottom: 1px solid #FFF;
    font-size: 10px;
}

#comparison table tr:last-child td.head {
    border-bottom: 1px solid #FF9947;
}


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

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

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

.kuchikomiBox h3 i {
    margin-right: 5px;
    width: 24px;
}

.kuchikomiBox h3 img {
    width: 100%;
}

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

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

.kuchikomiDataScore {
    margin-right: 10px;
    text-align: center;
    width: 60px;
}

.kuchikomiDataScore img {
    width: 100%;
}

.kuchikomiDataMeta {
    width: 100%;
}

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

.kuchikomiDataMeta dt {
    display: table-cell;
    text-align: center;
    padding: 2px;
    font-weight: normal;
    width: 40px;
    font-size: 12px;
}

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

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

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

.kuchikomiDataMeta .job01 dd {
    background: #EFEFEF;
    font-size: 12px;
}

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

.kuchikomiDataMeta .job02 dd {
    background: #FFEEE1;
    font-size: 12px;
}

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

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

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

.kuchikomiDataText {
    padding-bottom: 10px;
}

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

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

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

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

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

.kuchimomiMoreBtn:hover {
    cursor: pointer;
}

.kuchikomiBox .ratingBox {
    display: block;
}

.kuchikomiBox .rate {
    margin: 0px;
    position: relative;
    display: inline-block;
    width: 60px;
    font-size: 12px;
}

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

.kuchikomiBox .rate:before {
    color: #999;
}

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

.kuchikomiBox .rate1:after {
    width: 12px;
}

.kuchikomiBox .rate2:after {
    width: 24px;
}

.kuchikomiBox .rate3:after {
    width: 36px;
}

.kuchikomiBox .rate4:after {
    width: 48px;
}

.kuchikomiBox .rate5:after {
    width: 60px;
}

.kuchikomiBox .ratingBox .ratingNum {
    color: #333;
    font-size: 12px;
    margin: 0px 5px;
}


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

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

.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 .infotTextBox ul li {
    display: inline-block;
}

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

.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;
}


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

.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 #FF7E16;
    border-bottom: solid 3px #d7d7d7;
}

.columnMain .contentsEntryBody {
    padding: 0 10px
}

.columnMain .contentsEntryBody p img {
    width: 100%;
    height: auto;
}

.columnMain .contentsEntryBody figure img {
    width: 100%;
    height: auto;
}

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

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

.columnMain .entryIndex {
    padding: 0px;
}

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

.columnMain h3.h3Type01 {
    font-size: 20px;
    line-height: 40px;
    border-bottom: 1px solid #cccccc;
    border-left: 7px solid #EF9721;
    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: #d4ac66;
    font-weight: 900;
    margin-right: 10px
}

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

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

.columnMain blockquote {
    position: relative;
    padding: 10px 20px;
    box-sizing: border-box;
    font-style: normal;
    background: #EDF5F6 url(../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;
}

.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(../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(../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(../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-left: 5px;
    /*border-top: 3px solid #d4ac66;*/
    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: 20px;
    font-weight: bold;
    color: #5e5854;
    padding-top: 5px;
}

.columnMain .columnList h3.subTitle {
    font-size: 17px;
    padding: 0.25em 0.5em;
    margin: 20px 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 {
    list-style: none;
    background: url("../../sp/common/img/ico_column.png") no-repeat left 2px top 10px!important;
    padding-left: 30px;
}

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

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

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


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

section.top-rank {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 2rem;
}

section.top-rank h2 img {
    width: 100%;
}

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: 3px;
    padding: 3px;
    padding-bottom: 8px;
    margin-top: -5px;
}

.topgroup_last {
    margin-right: 0px;
}

.topgroup p {
    line-height: 1rem;
    letter-spacing: -0.4px;
    font-size: 10px;
    font-weight: normal;
    color: #144160;
}

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

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

.word_top3 {
    height: 3.4rem;
}

.topmenu_link p {
    color: #3c62be;
}


/*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,
#jobData .linkBox a.gradationType02.add-a-brackets: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;
    line-height:1.4;
}

.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 {
    color: #4285f4;
    cursor: pointer;
    font-size: 14px;
    text-align: center;
    display: block;
    font-weight: 700;
    margin-bottom: 24px;
    text-align: center;
    text-decoration: underline;
}




@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;
    }
}


#ranking .linkBox li {
    padding: 5px 10px;
}