@charset "utf-8";

html {
font-size: 62.5%;
overflow: visible !important;
}
@media screen and (min-width: 751px) {}
@media screen and (max-width: 750px) {} body { font: 14px/140% Meiryo, メイリオ, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif !important;
line-height: 1.5 !important;
overflow: visible !important;
transition: none !important;
}
@media screen and (min-width: 751px) {
body {}
}
@media screen and (max-width: 750px) {
body {}
body.active {
position: fixed;
width: 100%;
}
} #wrapper {
position: relative;
}
@media screen and (min-width: 751px) {
#wrapper {}
}
@media screen and (max-width: 750px) {
#wrapper {}
} header {}
header .logo {
height: 40px;
box-sizing: border-box;
}
header .logo a {
padding-left: 1em;
}
header {
max-width: 100vw;
position: sticky;
top: 0;
box-shadow: 0 0 5px rgba(0, 0, 0, .15);
z-index: 100;
background-color: rgba(255, 255, 255, .97);
}
header.fixed .area_tag {
top: 0;
left: 0;
right: 0;
margin: auto;
width: 100%;
box-sizing: border-box;
background: rgba(255, 255, 255, .96);
}
header .gnavi {
position: absolute;
margin: 0;
display: none;
right: 0;
top: 50px;
}
header .gnavi.active {
display: block;
}
@media screen and (min-width: 751px) {
header {}
header .links a {
margin: 0 1em;
}
}
@media screen and (max-width: 750px) {
.cbp-spmenu .menu_list a {
color: #555;
}
} #layer {
display: none;
}
.menu {
position: relative;
align-items: stretch;
display: inline-block;
background: rgba(255, 255, 255, .9);
z-index: 3;
}
.menu .button {
position: relative;
z-index: 1100;
height: 100%;
}
.menu button {
border: 0;
background-color: transparent;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
width: 100%;
height: 100%;
margin: 0 !important;
z-index: 1101;
}
.menu .button .line {
display: inline-block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 100%;
height: 2px;
background-color: #DA172B;
border-radius: 4px;
transition: all .3s;
}
.menu .button .line:first-of-type {
top: -6px;
}
.menu .button .line:last-of-type {
bottom: -6px;
}
header.active .menu .button .line:first-of-type {
top: 0;
bottom: 0;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
header.active .menu .button .line:last-of-type {
top: 0;
bottom: 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
header.active+#layer {
display: block;
z-index: 2;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .3);
}
.-ui-head-action {
border-left: 1px solid #e8e8e8;
height: 40px;
width: 40px;
padding: 10px;
box-sizing: border-box;
}
header .tel {
margin-left: auto;
}
@media screen and (min-width: 751px) {
header .area_tag .wrap {
width: 1200px;
max-width: 100vw;
margin: 0 auto;
align-items: center;
height: 70px;
}
.-ui-head-action {
display: none !important;
}
}
@media screen and (max-width: 750px) {} #main {
width: auto;
float: none;
}
@media screen and (min-width: 751px) {
#main {}
}
@media screen and (max-width: 750px) {
#main {}
} #contents {}
@media screen and (min-width: 751px) {
#contents {}
}
@media screen and (max-width: 750px) {
#contents {}
} @media screen and (min-width: 751px) {
.buy-style-head {
padding: 2em 0 1em 0;
}
.frame {
max-width: 1030px;
margin: 0 auto;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items: flex-start;
padding-top: 20px;
}
.frame .maincontent {
width: 800px;
}
}
@media screen and (max-width: 750px) {} #sidebar a {
line-height: inherit;
}
#sidebar a:hover {
opacity: 1;
text-decoration: underline !important;
} .commonHead {
background-image: url(//jewel-cafe.my/wp-content/themes/new_jewel5745747/rn/img/gold-kaitori/bg_commonIndex.png);
background-repeat: no-repeat;
background-position: center center;
background-size: 100% auto;
min-height: 147px;
font-weight: bold;
margin: 2em 0 0 0;
max-width: 100%;
overflow: hidden;
}
.commonHead .index {
position: relative;
}
.commonHead .logo {
margin-bottom: 1.5em;
}
.commonHead .sub {
margin-bottom: .2em;
}
.commonHead .en {
padding-top: 1em;
}
.commonHead .hs img {
position: absolute;
right: 0;
top: 0;
transform: translate(50%, -100%) rotate(13.5deg);
transform-origin: center bottom;
backface-visibility: hidden;
}
@media screen and (min-width: 751px) {
.commonHead {
background-image: url(//jewel-cafe.my/wp-content/themes/new_jewel5745747/rn/img/gold-kaitori/bg_commonIndex_jp.png);
min-height: 279px;
margin-bottom: 1.5em;
padding-top: 3em;
}
.commonHead .logo img {
width: 140px !important;
}
.commonHead .sub {
font-size: 2.3rem;
}
.commonHead .main {
font-size: 4.3rem;
}
.commonHead .en {
font-size: 1.1rem;
}
}
@media screen and (max-width: 750px) {} .breadcrumbs {
padding: 1em;
padding-bottom: 13px;
background-image: url(//jewel-cafe.my/wp-content/themes/new_jewel5745747/rn/img/bg_breadcrumbs.png);
background-repeat: repeat-x;
background-position: left bottom;
background-size: auto 13px;
}
.breadcrumbs .wrap {
padding-bottom: 1em;
}
.breadcrumbs a {
margin-right: 1em;
}
.breadcrumbs a .ico_arrow:before {
border-width: 1px;
}
@media screen and (min-width: 751px) {
.breadcrumbs .wrap {
width: 1030px;
margin: 0 auto;
}
}
@media screen and (max-width: 750px) {} #sidebar {}
@media screen and (min-width: 751px) {
#sidebar {}
}
@media screen and (max-width: 750px) {
#sidebar {}
} footer {}
footer .red_label {
color: #fff;
background-color: #D01427;
padding: 1em;
}
@media screen and (min-width: 751px) {
footer {
margin-top: 50px;
}
footer .inner {
padding: 70px 0;
color: #fff;
background-color: #DA172B;
}
footer .inner .wrap {
width: 1030px;
margin: 0 auto;
}
footer .inner .index {
font-size: 2rem;
margin-bottom: 1.2em;
}
footer .inner .lists .area_tag {
font-size: 1.5rem;
width: 10em;
margin: .3em 0;
}
footer .inner .lists .prefs li {
display: inline-block;
margin-right: 1.5em;
}
footer .inner .lists .prefs li a {
text-decoration: underline !important;
font-size: 1.3rem;
}
footer .bottom {
background-color: #EFEFEF;
}
footer .bottom a {
color: #444B54;
font-size: 1.3rem;
display: inline-block;
margin-right: 2em;
}
footer .bottom .national img {
width: 23px;
padding-right: .5em;
}
footer .bottom .national a:last-of-type {
margin-right: 0;
}
footer .copyright {
font-size: 1rem;
padding: 20px 0 30px 0;
}
}
@media screen and (max-width: 750px) {
footer {}
} footer .head.links {
box-shadow: 0 3px 3px rgba(0, 0, 0, .05);
}
footer .head.links a {
color: #444B54;
padding: 1em;
border-bottom: 1px solid #d0d0d0;
}
footer .head.links a:last-of-type {
border-bottom: 0;
}
footer .head.links a .ico_arrow:before {
border-color: #717171;
width: 6px;
height: 6px;
}
footer .head.links a .ico {
margin-right: .5em;
}
footer .head.links a .ico img {
width: 25px;
}
@media screen and (min-width: 751px) {}
@media screen and (max-width: 750px) {} footer .scroll_top {
padding: 2em 1.2em;
}
footer .scroll_top a {
display: inline-block;
padding: .5em 3em;
border-radius: 3em;
box-shadow: 0 0 8px rgba(0, 0, 0, .2);
color: #333333;
}
footer .scroll_top a .ico {
margin-right: 1.2em;
}
footer .scroll_top a .ico img {
height: 2em;
width: auto;
}
@media screen and (min-width: 751px) {
footer .scroll_top {
margin-bottom: 20px;
}
footer .scroll_top a {
padding: .7em 4em;
}
}
@media screen and (max-width: 750px) {} footer .middle.links {
border-top: 1px solid #D0D0D0;
border-bottom: 1px solid #D0D0D0;
padding: 3px 0;
}
footer .middle.links table {
border-top: 1px solid #D0D0D0;
border-bottom: 1px solid #D0D0D0;
width: 100%;
}
footer .middle.links table td {
border: 1px solid #D0D0D0;
width: 50%;
}
footer .middle.links table tr td:first-of-type {
border-left: 0;
}
footer .middle.links table tr td:last-of-type {
border-right: 0;
}
footer .middle.links table a {
padding: 1.4em;
} footer .sub {
padding: 1.5em 0;
}
footer .sub .bottom.links {
flex: 1;
}
footer .sub .bottom.links a {
padding: 1em;
border-bottom: 1px solid #d0d0d0;
}
footer .sub .bottom.links a .ico {
margin-right: 1.3em;
} .kriesi .pagination {
text-align: center;
}
.kriesi .pagination a,
.kriesi .pagination span {
border: 1px solid #999;
padding: 3px 4px;
margin: 5px;
font-size: 1.2rem;
}
.kriesi .pagination span {
color: #999;
border: 1px solid #DDD;
}
.kriesi .pagination a:hover {
opacity: 0.6;
} @media screen and (min-width: 751px) {
.sp {
display: none !important;
}
img {}
}
@media screen and (max-width: 750px) {
.pc {
display: none !important;
}
}
@media screen and (max-width: 750px) {
img {
width: 100%;
}
picture img {
opacity: 0;
}
} .blue {
color: #3CF !important;
}
.ease1s * {
-webkit-transition: all ease-in-out .1s;
transition: all ease-in-out .1s;
}
.ease2s * {
-webkit-transition: all ease-in-out .2s;
transition: all ease-in-out .2s;
}
.ease3s * {
-webkit-transition: all ease-in-out .3s;
transition: all ease-in-out .3s;
}
.ease4s * {
-webkit-transition: all ease-in-out .4s;
transition: all ease-in-out .4s;
}
.ease5s * {
-webkit-transition: all ease-in-out .5s;
transition: all ease-in-out .5s;
}
.tac {
text-align: center !important;
}
.tar {
text-align: right !important;
}
.tal {
text-align: left !important;
} .flex {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
}
.flex.-wrap {
flex-wrap: wrap;
}
.flex.-alstretch {
align-items: stretch;
}
.flex.-alstart {
align-items: flex-start;
}
.flex.-jsstart {
justify-content: flex-start;
}
.flex.-jscenter {
justify-content: center;
}
.flex.-fdrreverse {
flex-direction: row-reverse;
}
.flex.-fdcreverse {
flex-direction: column-reverse;
}
.flex.c4>* {
width: 24%;
box-sizing: border-box;
}
.flex.c3>* {
width: 31%;
box-sizing: border-box;
}
.flex.c2>* {
width: 48%;
box-sizing: border-box;
}
@media screen and (min-width: 751px) {}
@media screen and (max-width: 750px) {
.flex.-spcolumn {
flex-direction: column;
}
.flex.-spcolumn>* {
width: 100% !important;
}
}
.ico_arrow {
position: relative;
padding-right: 1em;
margin-right: 12px;
}
.ico_arrow:before {
display: block;
content: "";
width: 4px;
height: 4px;
border-top: 2px solid #333;
border-right: 2px solid #333;
transform: rotateZ(45deg);
position: absolute;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.before:before,
.after:after {
content: "";
display: block;
position: absolute;
}
a,
a:link {
transition: all .3s;
display: block; text-decoration: none !important;
color: inherit;
}
a:hover {
opacity: 0.6;
}
.ff_midashigo {
font-family: 'A-OTF 見出ゴMB31 Pro', MidashiGoPro-MB31, "Noto Sans Japanese" !important;
font-weight: 700;
}
.ff_shingo {
font-family: "A-OTF 新ゴ Pro", A-OTF Shin Go Pro, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Noto Sans Japanese", sans-serif !important;
font-weight: 800;
}
.ff_yugo {
font-family: "游ゴシック体", YuGothic, "游ゴシック", "小塚ゴシック", KozukaGothic, "Yu Gothic", "Noto Sans Japanese", sans-serif !important;
font-weight: 500 !important;
}
.ff_serif {
font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif !important;
}
.visible {
overflow: hidden;
position: relative;
}
.visible img {
width: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.before,
.after {
position: relative;
}
.before:before,
.after:after {
content: "";
display: block;
position: absolute;
}
.fc_red {
color: #DA172B !important;
}
.fc_blue {
color: #0078ff !important;
}
.fw_400 {
font-weight: 400;
}
.fw_700 {
font-weight: 700;
}
.fw_900 {
font-weight: 900;
} .fs_11 {
font-size: 11px;
font-size: 1.1rem;
}
.fs_12 {
font-size: 12px;
font-size: 1.2rem;
}
.fs_13 {
font-size: 13px;
font-size: 1.3rem;
}
.fs_14 {
font-size: 14px;
font-size: 1.4rem;
}
.fs_15 {
font-size: 15px;
font-size: 1.5rem;
}
.fs_16 {
font-size: 16px;
font-size: 1.6rem;
}
.fs_17 {
font-size: 17px;
font-size: 1.7rem;
}
.fs_18 {
font-size: 18px;
font-size: 1.8rem;
}
.fs_19 {
font-size: 19px;
font-size: 1.9rem;
}
.fs_20 {
font-size: 20px;
font-size: 2rem;
}
@media screen and (min-width: 751px) {
.fs_24 {
font-size: 24px;
font-size: 2.4rem;
}
}
@media screen and (max-width: 750px) {
.fs_07 {
font-size: 7px;
font-size: .7rem;
}
.fs_09 {
font-size: 9px;
font-size: .9rem;
}
.fs_10 {
font-size: 10px;
font-size: 1rem;
}
.fs_11 {
font-size: 9px;
font-size: .9rem;
}
.fs_12 {
font-size: 12px;
font-size: 1.2rem;
}
.fs_13 {
font-size: 13px;
font-size: 1.3rem;
}
.fs_14 {
font-size: 14px;
font-size: 1.4rem;
}
.fs_15 {
font-size: 15px;
font-size: 1.5rem;
}
.fs_16 {
font-size: 16px;
font-size: 1.6rem;
}
.fs_17 {
font-size: 17px;
font-size: 1.7rem;
}
.fs_18 {
font-size: 18px;
font-size: 1.8rem;
}
.fs_20 {
font-size: 16px;
font-size: 1.6rem;
}
.fs_21 {
font-size: 21px;
font-size: 2.1rem;
}
.fs_22 {
font-size: 22px;
font-size: 2.2rem;
}
.fs_23 {
font-size: 23px;
font-size: 2.3rem;
}
.fs_24 {
font-size: 18px;
font-size: 1.8rem;
}
.fs_25 {
font-size: 25px;
font-size: 2.5rem;
}
.fs_26 {
font-size: 26px;
font-size: 2.6rem;
}
.fs_28 {
font-size: 22px;
font-size: 2.2rem;
}
}
.ls_15 {
letter-spacing: .15em;
}
.fw_t {
font-weight: 100;
}
.fw_l {
font-weight: 300;
}
.fw_r {
font-weight: 400;
}
.fw_m {
font-weight: 500;
}
.fw_b {
font-weight: 700;
}
.fw_bl {
font-weight: 900;
}
.lh_10 {
line-height: 1;
}
.lh_17 {
line-height: 1.7;
}
.lh_18 {
line-height: 1.8;
}
.lh_20 {
line-height: 2;
}
.lh_22 {
line-height: 2.2;
}
.fss {
font-size: 80%;
} @media screen and (min-width: 751px) {
.inner880 {
width: 880px;
margin: 0 auto;
}
.inner900 {
width: 900px;
margin: 0 auto;
}
.inner920 {
width: 920px;
margin: 0 auto;
}
.inner940 {
width: 940px;
margin: 0 auto;
}
.inner950 {
width: 950px;
margin: 0 auto;
}
.inner960 {
width: 960px;
margin: 0 auto;
}
.inner980 {
width: 980px;
margin: 0 auto;
}
.inner1000 {
width: 1000px;
margin: 0 auto;
}
.inner1030 {
width: 1030px;
margin: 0 auto;
}
.inner1200 {
width: 1200px;
margin: 0 auto;
}
}
@media screen and (max-width: 750px) {
.-cushion {
padding: 6.6vw;
}
.-cushion+.-cushion {
padding-top: 0;
}
}
.anchor {
margin-top: -120px;
padding-top: 120px;
} .seoheader {
margin: auto;
padding-top: 5px
}
.seoheader h1 {
font-size: 0.9rem;
color: #777777;
line-height: 1;
}
@media screen and (min-width: 751px) {
.seoheader {
width: 1180px;
}
}
@media screen and (max-width: 750px) {
.seoheader h1 {
font-size: 0.7rem;
padding-top: 2px;
padding-left: 10px;
}
}
section.results .resizeimg {
object-fit: cover;
height: 100px;
}
@media screen and (min-width: 750px) {
section.results .resizeimg {
height: 200px;
width: 200px;
}
} .compare-wrap img {
width: 100%;
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both
}
@-webkit-keyframes slideDown {
0% {
opacity: 1;
-webkit-transform: translateY(-20px);
transform: translateY(-20px)
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0)
}
}
@keyframes slideDown {
0% {
opacity: 1;
-webkit-transform: translateY(-20px);
transform: translateY(-20px)
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0)
}
}
.slide-down {
-webkit-animation-name: slideDown;
animation-name: slideDown
}
@-webkit-keyframes slideUp {
0% {
-webkit-transform: translateY(20px);
transform: translateY(20px)
}
100% {
-webkit-transform: translateY(0px);
transform: translateY(0px)
}
}
@keyframes slideUp {
0% {
-webkit-transform: translateY(20px);
transform: translateY(20px)
}
100% {
-webkit-transform: translateY(0px);
transform: translateY(0px)
}
}
.slide-up {
-webkit-animation-name: slideUp;
animation-name: slideUp
}
@media screen and (min-width:800px) {
.content-wrap {
overflow: hidden;
position: relative;
margin: 0
}
}
.close-btn,
.more-btn {
display: block;
width: 100%;
padding: 80px 0 0;
position: absolute;
bottom: 0;
left: 0;
text-align: center;
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 60%);
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 60%);
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 60%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=0)
}
.close-btn {
background: 0 0
}
.kaitori-column .slide-up {
height: 450px;
padding-bottom: 0;
overflow: hidden
}
@media screen and (min-width:800px) {
.kaitori-column .slide-up {
height: 650px;
padding-bottom: 0;
overflow: hidden
}
}
.slide-down {
height: auto;
overflow: visible;
padding-bottom: 50px
}
.more-btn p {
position: relative;
display: inline-block;
color: #fff;
cursor: pointer;
background: #de1122;
padding: 5px 20px;
padding: 10px 82px;
border-radius: 50px;
font-weight: 700
}
.more-btn p:before {
border-bottom: 2px solid #fff;
border-right: 2px solid #fff;
content: "";
height: 9px;
position: absolute;
right: 24px;
top: 50%;
transform: translateY(-50%) rotate(-45deg);
width: 9px
}
.more-btn p:hover {
opacity: .6;
transition: all .3s
}
.close-btn {
padding: 0
}
.close-btn p {
background: #aaa
}
.close {
font-size: initial;
top: auto;
right: auto;
}
section.columns {
margin-bottom: 40px;
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both
}
@-webkit-keyframes slideDown {
0% {
opacity: 1;
-webkit-transform: translateY(-20px);
transform: translateY(-20px)
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0)
}
}
@keyframes slideDown {
0% {
opacity: 1;
-webkit-transform: translateY(-20px);
transform: translateY(-20px)
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0)
}
}
.slide-down {
-webkit-animation-name: slideDown;
animation-name: slideDown
}
@-webkit-keyframes slideUp {
0% {
-webkit-transform: translateY(20px);
transform: translateY(20px)
}
100% {
-webkit-transform: translateY(0px);
transform: translateY(0px)
}
}
@keyframes slideUp {
0% {
-webkit-transform: translateY(20px);
transform: translateY(20px)
}
100% {
-webkit-transform: translateY(0px);
transform: translateY(0px)
}
}
.slide-up {
-webkit-animation-name: slideUp;
animation-name: slideUp
}
.content-wrap {
height: 450px;
overflow: hidden;
position: relative;
margin: 0
}
@media screen and (min-width:800px) {
.content-wrap {
height: 650px;
overflow: hidden;
position: relative;
margin: 0
}
}
.close-btn,
.more-btn {
display: block;
width: 100%;
padding: 80px 0 0;
position: absolute;
bottom: 0;
left: 0;
text-align: center;
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 60%);
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 60%);
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 60%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=0)
}
.close-btn {
background: 0 0
}
.slide-up {
height: 450px;
padding-bottom: 0;
overflow: hidden
}
@media screen and (min-width:800px) {
.slide-up {
height: 650px;
padding-bottom: 0;
overflow: hidden
}
}
.slide-down {
height: auto;
overflow: visible;
padding-bottom: 50px
}
.more-btn p {
display: inline-block;
color: #fff;
cursor: pointer;
background: #de1122;
padding: 5px 20px;
padding: 10px 82px;
border-radius: 50px;
font-weight: 700
}
.more-btn p:hover {
opacity: .6;
transition: all .3s
}
.close-btn {
padding: 0
}
.close-btn p {
background: #aaa
}