* {
font-family: "Yu Gothic",Meiryo,"Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;
} ul.tab {
background: White;
box-shadow: 0 0 5px rgba(0,0,0,.1);
display: flex;
flex-wrap: wrap;
justify-content: space-around;
overflow: hidden;
padding: 0 0 20px;
}
ul.tab.tab-botom {
padding-top: 2rem;
}
.tablist {
display: flex;
width: 32%;
align-items: center;
color: Gray;
cursor: pointer;
font-weight: bold;
order: -1;
padding: 0px 10px;
position: relative;
text-align: center;
transition: cubic-bezier(0.4, 0, 0.2, 1) .2s;
user-select: none;
white-space: nowrap;
-webkit-tap-highlight-color: transparent;
font-size: 14px;
}
.tablist a {
width: 100%;
display: inherit;
text-decoration: none;
color: grey;
align-items: end;
}
.tablist:hover {
background: rgba(0, 191, 255,.1);
}
.tablist.active {
color: DeepSkyBlue;
background: rgba(0, 191, 255,.1);
}
.tablist::after {
background: #1967d2;
bottom: 0;
content: '';
display: block;
height: 3px;
left: 0;
opacity: 0;
pointer-events: none;
position: absolute;
transform: translateX(100%);
transition: cubic-bezier(0.4, 0, 0.2, 1) .2s 80ms;
width: 100%;
z-index: 1;
}
.tablist img {
width: 40px;
}
.tablist.active::after {
transform: translateX(-100%);
}
.tablist.active::after {
opacity: 1;
transform: translateX(0);
}
.tabcontents-list {
transition: transform .3s 80ms, opacity .3s 80ms;
width: 100%;
}
.tabcontents-list {
height: auto;
opacity: 1;
order: 1;
pointer-events:auto;
transform: translateX(0);
}
.tab-switch {
display: none;
} .tablist.clumn3{
display: flex;
flex-direction: column;
align-items: center;
color: #1967d2;
cursor: pointer;
font-size: 16px;
font-weight: 400;
order: -1;
margin: 0 2px 4px 0;
padding: 2px 2px 0 2px;
position: relative;
text-align: center;
transition: cubic-bezier(.4,0,.2,1) 0.2s;
user-select: none;
white-space: nowrap;
-webkit-tap-highlight-color: transparent;
flex-direction: column;
justify-content: flex-end;
text-decoration: none;
line-height: 1.7;
}
.tablist.clumn3 img {
width: 75px;
height: 75px;
object-fit: cover;
border-radius: 50%;
border: solid 1px #ddd;
} .tablist.clumn5 {
width: 18%;
flex-direction: column;
font-size: 14px;
margin-bottom: 4px;
align-items: center;
color: #1967d2;
cursor: pointer;
font-weight: inherit;
order: -1;
margin: 0 2px 4px 0;
padding: 2px 2px 0 2px;
position: relative;
text-align: center;
transition: cubic-bezier(.4,0,.2,1) 0.2s;
user-select: none;
white-space: nowrap;
-webkit-tap-highlight-color: transparent;
justify-content: flex-end;
text-decoration: none;
line-height: 1.7;
}
.tablist.clumn5 img {
width: 50px;
height: 50px;
object-fit: cover;
border-radius: 50%;
border: solid 1px #ddd;
} body {
background: WhiteSmoke;
font-family: sans-serif;
margin: 10px;
} .tabcontents {
width: 100%;
}
.tab-container {
width: 100%;
} * {
box-sizing: border-box;
}
.tab-container {
box-shadow: 0 0 5px rgba(0,0,0,.1);
overflow: hidden;
position: relative;
box-shadow: none;
overflow: visible;
}
.tabcontents-list {
left:0;
position: -webkit-sticky;
position: sticky;
}
.tab-wrap::before {
content: '';
height: 0;
order: 1;
width: 100%;
} body {
background: WhiteSmoke;
font-family: sans-serif;
margin: 10px;
} ul.menu_rank {
margin-top: 12px;
padding: 0;
border-bottom: solid 1px #969696;
}
.li_menu_rank {
list-style: none;
border-top: solid 1px #969696;
}
.a_menu_rank {
position: relative;
display: block;
color: #222;
text-decoration: none;
height: 100%;
padding: 12px;
padding-left: 6px;
display: flex;
align-items: center;
}
.a_menu_rank img {
height: 50px;
width: 50px;
object-fit: contain;
margin-right: 12px;
}
.a_menu_rank::after {
content: '→';
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
} ul.group_rank {
padding: 0;
}
ul.group_rank li {
list-style: none;
}
.h2_rank {
display: block;
background: #f3f3f3;
color: #1a1a1a;
position: relative;
background: #f3f3f3;
color: #1a1a1a;
font-size: 20px;
font-weight: 700;
line-height: 27px;
   margin-bottom: 16px;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
}
.h2_rank::before {
border-top: 10px solid #f3f3f3;
content: '';
position: absolute;
border-top: 10px solid #f3f3f3;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
bottom: -10px;
left: 30px;
}
.h2_rank::after {
border-top: 10px solid #f3f3f3;
content: '';
position: absolute;
border-top: 10px solid #f3f3f3;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
bottom: -10px;
left: 30px;
border-radius: 2px;
}
.wrap_return_item {
display: flex;
}
.list-group-item {
border-bottom: solid 1px #eee;
padding-top: 10px;
padding-bottom: 10px;
}
.img_return {
width: 125px;
height: 125px;
object-fit: cover;
}
.rank_no {
display: inline-block;
position: absolute;
padding: 0 0.5em;
color: #ffffff;
font-weight: bold;
}
.rank1 {
background-color: #b78c00;
}
.rank2 {
background-color: #557088;
}
.rank3 {
background-color: #bc7421;
}
.rank4 {
background-color: #959595;
}
.imgwrap_return_item {
position: relative;
min-width: 125px;
}
ul.group_rank .link_box {
position: relative;
display: block;
width: 100%;
height: 125px;
text-decoration: none;
}
span.name_return_item {
display: block;
font-size: 14px;
font-weight: 700;
line-height: 18px;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
color: #1967d2;
letter-spacing: .5px;
}
.txtwrap_return_item {
flex-grow: 1;
line-height: 1.3;
padding-left: 7px;
}
ul.group_rank  .txtwrap_return_item .link_box {
height: 150px;
color: initial;
}
ul.group_rank .d-inline-flex {
position: relative;
line-height: 1;
margin-bottom: 8px;
}
.recommend_count {
font-size: 12px;
}
.txtwrap_return_item .recommend_count .fa {
color: #ff9000;
} .wrap_price {
position: absolute;
bottom: 0;
right: 0;
text-align: right;
}
.font_12 {
font-size: 12px;
}
.font_return {
font-size: 20px;
font-weight: 700;
color: #e60033;
}
.font_price {
font-size: 20px;
line-height: 20px;
letter-spacing: .3px;
font-weight: 700;
color: #e60033;
}            @media screen and (max-width: 767px) {
.postid-17246 {
margin: 0;
}
.imgwrap_return_item {
width: 30%;
}
.txtwrap_return_item {
width: 70%;
}
} .source_left_blogcard {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #bf0000;
font-size: 10px;
color: #bf0000;
margin-top: 2px;
text-align: center;
border-radius: 2px;
}
ul.group_rank	.txt_right {
display: block;
margin-bottom:10px;
}
.txt_gray {
font-size: 12px;
color: #333;
font-weight: 500;
} ul.tab-price {
background: White;
box-shadow: 0 0 5px rgba(0,0,0,.1);
display: flex;
flex-wrap: wrap;
justify-content: space-around;
overflow: hidden;
padding: 15px 0;
}
.tablist.clumn2 {
display: flex;
flex-direction: row;
width: 45%;
}
.tablist.clumn2 a {
position: relative;
display: block;
font-size: 16px;
color: #1967d2;
border-bottom: dashed 1px #1967d2;
font-weight: 500;
}
.tab-price .fa.fa-angle-right {
position: absolute;
right: 4px;
top: 50%;
transform: translateY(-50%);
} h2.page-title {
background-color: transparent;
background: none;
margin: 3.33em 0 32px 0;
padding: 0;
color: #333;
box-shadow: none;
text-shadow: none;
width: 100%;
border-radius: inherit!important;
line-height: 1.4;
font-size: 1em;
}
p {
margin-bottom: 1em;
}
.is-style-information-box {
--cocoon-box-padding: 20px 20px 20px 72px;
padding: 20px 20px 20px 72px;
border-radius: 4px;
position: relative;
display: block;
}
.is-style-information-box::before {
content: '\f05a';
color: #87cefa;
border-right: 1px solid #bde4fc;
}
.is-style-information-box::before {
font-family: "FontAwesome";
font-size: 34px;
position: absolute;
padding-right: 0.15em;
line-height: 1em;
top: 50%;
margin-top: -0.5em;
left: 10px;
width: 44px;
text-align: center;
}
@media screen and (max-width: 480px) {
.is-style-information-box {
padding: 28px 6px 6px;
}
.is-style-information-box::before {
padding: 0;
top: 0.7em;
left: 50%;
margin-left: -0.5em;
font-size: 18px;
border: none;
width: auto;
}
}
.is-style-information-box {
border-radius: 4px;
position: relative;
display: block;
margin-bottom: 1em;
}
.is-style-information-box {
background: #f3fafe;
border: 1px solid #bde4fc;
text-align: center;
}
.is-style-information-box::before {
font-family: "FontAwesome";
font-weight: 900;
position: absolute;
content: '\f05a';
color: #87cefa;
margin-top: -0.5em;
line-height: 1em;
}
.fz-14px {
font-size: 14px;
line-height: 1.8;
}
.faq {
line-height: 24px;
}
.faq-question {
margin-bottom: 1.8em;
align-items: center;
}
.faq-item {
display: flex;
}
.blank-box {
padding: 1.2em 1em;
border-radius: 4px;
border-style: solid;
border-width: 3px;
}
.faq-wrap {
--cocoon-custom-question-color: #b7282e;
--cocoon-custom-answer-color: #007bbb;
--cocoon-custom-border-color: transparent;
--cocoon-custom-background-color: transparent;
--cocoon-custom-text-color: #333;
border-color: var(--cocoon-custom-border-color);
background-color: var(--cocoon-custom-background-color);
color: var(--cocoon-custom-text-color);
}
.faq-question-label {
color: var(--cocoon-custom-question-color);
}
.faq-answer-label {
color: var(--cocoon-custom-answer-color);
}
.faq-item-label {
font-size: 24px;
margin-right: 0.6em;
}
.faq-question-content {
font-weight: 700;
}
.faq-item-content {
flex: 1 1 auto;
width: calc(60%);
}