@charset "utf-8";

@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@900&display=swap");
#wrap {
width: 1030px;
margin: 20px auto 0;
}
#wrap.under {
width: 1030px;
margin: 20px auto 0;
}
#main {
width: 800px;
float: left;
}
#mainv {
padding-top: 10px;
width: 100%;
height: 380px;
position: relative;
clear: both;
margin: 0px auto;
background: #e0e0e0;
z-index: 0;
}
#sub {
width: 200px;
float: right;
}
#mainv .top {
margin-left: -718px;
position: absolute;
left: 50%;
z-index: -1;
}
#mainv_btm {
}
#mainv_btm ul {
width: 1030px;
margin: 9px auto;
}
#mainv_btm li {
position: relative;
float: left;
margin-right: 9px;
}
img.m_btn {
width: 510px;
}
#mainv_btm li.last {
margin-right: 0;
}
#mainv_btm .acquisition-2types-box {
display: flex;
display: -webkit-box;
display: -ms-flexbox;
width: 1030px;
margin: 9px auto;
justify-content: space-between;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
}
#mainv_btm .acquisition-2types-box a {
display: flex;
display: -webkit-box;
display: -ms-flexbox;
text-decoration: none;
}
#mainv_btm .acquisition-2types-box a:hover {
opacity: 0.8;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
}
#mainv_btm .acquisition-2types-box .ac-item {
color: #fff;
}
#mainv_btm .acquisition-2types-box .ac-item.store {
background: #cc000d;
padding: 15px 20px;
width: 250px;
}
#mainv_btm .acquisition-2types-box .ac-item.home {
background: #f3a33b;
padding: 15px 20px;
width: 250px;
}
#mainv_btm .acquisition-2types-box .ac-item strong {
font-size: 26px;
line-height: 1.2;
}
#mainv_btm .acquisition-2types-box .ac-item p {
margin-top: 10px;
font-size: 12px;
line-height: 1.6;
}
#pankuzu {
clear: both;
color: #fff;
background: #de1122;
margin: 0 auto;
}
#pankuzu ul {
width: 1030px;
margin: 0 auto;
padding: 5px 0;
}
.bxslider {
margin-top: 10px;
}
.bxslider img {
margin: 0 auto;
display: block;
} #sub .pickup h3 {
display: block;
text-align: center;
padding: 0;
margin: 0;
}
#sub .pickup h4 {
display: block;
text-align: center;
padding: 0;
margin: 0;
}
#sub .pickup h3 img {
border-radius: 5px 5px 0 0;
}
#sub .pickup h4 img {
border-radius: 5px 5px 0 0;
}
#sub .item .pickup_img02 img {
margin-right: 0;
}
#sub .item p img {
float: left;
width: 82px;
margin-right: 5px;
margin-bottom: 13px;
}
#sub .pickup .item {
padding: 10px 15px;
background: #4e4d4b;
border-bottom: 1px solid #6c6a67;
}
#sub .pickup .item span {
display: inline-block;
font-weight: 100;
font-size: 11px;
margin-top: 3px;
background: #e40011;
line-height: 100%;
padding: 5px 5px 3px;
color: #fff;
}
#sub .pickup .item span.ttl {
display: block;
background: none;
font-weight: bold;
font-size: 14px;
padding: 10px 0 0 0;
}
#sub .pickup .item p {
text-align: right;
margin-top: 10px;
}
#sub .pickup .item p.price {
text-align: right;
margin-top: 10px;
color: #e50011;
font-weight: bold;
font-size: 22px;
}
#sub .pickup .btm {
text-align: center;
font-size: 15px;
line-height: 18px;
padding: 10px;
background: #4e4d4b;
color: #fff;
font-weight: bold;
border-radius: 0 0 5px 5px;
margin-bottom: 10px;
}
#sub .pickup .btm span {
font-size: 22px;
}
#sub .tel_wrap {
border-radius: 5px;
padding: 6px;
margin-top: 10px;
background-image: url(//jewel-cafe.my/wp-content/themes/new_jewel5745747/img/common/s_bg.png);
background-repeat: no-repeat;
height: 496px;
}
#sub .line {
margin-top: 70px;
margin-left: 3px;
}
#sub .tel {
padding-top: 8px;
}
#sub .tel p {
text-align: center;
}
#sub .side_list {
margin-top: 10px;
}
#sub .side_list h3 {
display: block;
background: #de1122;
color: #fff;
font-size: 13px;
text-align: center;
border-radius: 5px 5px 0 0;
padding: 7px 0 4px;
margin: 0;
line-height: 170%;
}
#sub .side_list h4 {
display: block;
background: #de1122;
color: #fff;
font-size: 13px;
text-align: center;
border-radius: 5px 5px 0 0;
padding: 7px 0 4px;
margin: 0;
line-height: 170%;
}
#sub .side_ttl_new {
display: block;
background: #de1122;
color: #fff;
font-size: 13px;
text-align: center;
border-radius: 5px 5px 0 0;
margin: 0;
line-height: 1.6;
}
#sub .side_ttl_new .txt1 {
font-size: 1.6rem;
text-align: left;
line-height: 1.4;
border-bottom: 1px solid #fff;
padding: 5px 0 0 5px;
}
#sub .side_list h2 {
display: block;
background: #de1122;
color: #fff;
font-size: 13px;
text-align: center;
margin: 0;
}
#sub .side_list ul {
background: #fff;
border-radius: 0 0 5px 5px;
border-left: 3px solid #de1122;
border-right: 3px solid #de1122;
border-bottom: 3px solid #de1122;
}
#sub .side_list ul li {
background-repeat: no-repeat;
color: #de1122;
display: block;
line-height: 100%;
font-size: 11px;
text-decoration: none;
border-bottom: 1px solid #e4e5e9;
padding: 12px 0px 12px 3px;
}
#sub .side_list ul li a {
background-repeat: no-repeat;
color: #de1122;
display: block;
text-decoration: none;
}
#sub .side_list ul li.no_icon a {
background-repeat: no-repeat;
color: #de1122;
display: block;
text-decoration: none;
}
#sub .side_list ul li a img {
vertical-align: middle;
padding-right: 3px;
}
#sub .side_list ul li a span {
vertical-align: middle;
}
#sub .side_list ul li a:hover {
text-decoration: underline;
}
#sub .side_list02 {
margin-top: 10px;
}
#sub .side_list02 h3 {
display: block;
background: #de1122;
color: #fff;
font-size: 13px;
text-align: center;
border-radius: 5px 5px 0 0;
padding: 7px 0 5px;
margin: 0;
line-height: 170%;
}
#sub .side_list02 h4 {
display: block;
background: #de1122;
color: #fff;
font-size: 13px;
text-align: center;
border-radius: 5px 5px 0 0;
padding: 7px 0 5px;
margin: 0;
line-height: 170%;
}
#sub .side_list02 ul {
background: #fff;
border-radius: 0 0 5px 5px;
}
#sub .side_list02 ul li a {
background-repeat: no-repeat;
background: #eaeaea;
color: #de1122;
display: block;
line-height: 100%;
font-size: 11px;
text-decoration: none;
border-bottom: 1px solid #fff;
padding: 11px 0px 11px 11px;
}
#sub .side_list02 ul li:nth-child(6) a,
#sub .side_list02 ul li:nth-child(7) a,
#sub .side_list02 ul li:nth-child(8) a,
#sub .side_list02 ul li:nth-child(9) a,
#sub .side_list02 ul li:nth-child(10) a,
#sub .side_list02 ul li:nth-child(11) a,
#sub .side_list02 ul li:nth-child(12) a {
pointer-events: none;
}
#sub .side_list02 ul li a img {
vertical-align: middle;
padding-right: 3px;
}
#sub .side_list02 ul li a span {
vertical-align: middle;
}
#sub .side_list02 ul li a:hover {
text-decoration: underline;
}
#sub .side_list_area {
margin-top: 10px;
}
#sub .side_list_area h3 {
display: block;
background: #de1122;
color: #fff;
font-size: 13px;
text-align: center;
border-radius: 5px 5px 0 0;
padding: 7px 0 4px;
margin: 0;
line-height: 170%;
}
#sub .side_list_area h4 {
display: block;
background: #de1122;
color: #fff;
font-size: 13px;
text-align: center;
border-radius: 5px 5px 0 0;
padding: 7px 0 4px;
margin: 0;
line-height: 170%;
}
#sub .side_list_area ul {
background: #eaeaea;
border-radius: 0 0 5px 5px;
padding: 5px 0 10px;
}
#sub .side_list_area ul li.ttl {
font-weight: bold;
}
#sub .side_list_area ul li {
background: #eaeaea;
color: #454545;
display: block;
line-height: 180%;
font-size: 11px;
padding: 5px 5px 0px 12px;
}
#main .rank {
margin-top: 20px;
}
#main .rank div {
border: 2px solid #e8eaea;
width: 246px;
float: left;
padding: 5px;
margin-right: 10px;
}
#main .rank div.end {
margin-right: 0px;
}
#main .rank img {
width: 100%;
}
#main .rank div dl .ic_01 {
background-image: url(//jewel-cafe.my/wp-content/themes/new_jewel5745747/img/kin/kin_kaitori_12.png);
background-repeat: no-repeat;
height: 46px;
color: #de1122;
font-size: 15px;
line-height: 21px;
padding-left: 56px;
padding-top: 13px;
margin-bottom: 0px;
margin-top: 6px;
}
#main .rank div dl .ic_02 {
background-image: url(//jewel-cafe.my/wp-content/themes/new_jewel5745747/img/kin/kin_kaitori_13.png);
background-repeat: no-repeat;
height: 46px;
color: #de1122;
font-size: 15px;
line-height: 21px;
padding-left: 56px;
padding-top: 13px;
margin-bottom: 0px;
margin-top: 6px;
}
#main .rank div dl .ic_03 {
background-image: url(//jewel-cafe.my/wp-content/themes/new_jewel5745747/img/kin/kin_kaitori_14.png);
background-repeat: no-repeat;
height: 46px;
color: #de1122;
font-size: 15px;
line-height: 21px;
padding-left: 56px;
padding-top: 13px;
margin-bottom: 0px;
margin-top: 6px;
}
.page-template-page-shop #main h3 {
text-align: center;
}
.page-template-page-shop #main h3 a,
.page-template-page-shop #main h3 a:link,
.page-template-page-shop #main h3 a:visited {
display: block;
color: #ffffff !important;
text-decoration: none !important;
}
.page-template-page-shop #main h3 a:active,
.page-template-page-shop #main h3 a:hover {
display: block;
color: #ffffff !important;
text-decoration: underline !important;
} .banner_box ul {
background: #eaeaea;
border-radius: 0 0 5px 5px;
padding: 5px 10px;
}
.banner_box {
margin-top: 10px;
margin-bottom: 10px;
}
.banner_box h3 {
margin: 0 0 5px !important;
font-size: 13px !important;
text-align: center !important;
border-radius: 5px 5px 0 0 !important;
padding: 12px 0 9px !important;
color: #fff !important;
background: #de1122 !important;
}
.banner_box ul li {
margin-bottom: 5px;
text-align: center;
border-radius: 5px;
padding: 10px 0;
}
.banner_box ul li.shop_buy {
background: #cd000e;
}
.banner_box ul li.delivery_buy {
background: #f4a43d;
}
.banner_box ul li.trip_buy {
background: #007eb9;
}
.banner_box ul li a img {
border-radius: 5px;
}
.banner_box ul li a {
text-decoration: none;
color: #fff;
display: block;
}
.banner_box ul li a:hover {
filter: alpha(opacity=80);
-moz-opacity: 0.8;
opacity: 0.8;
}
.banner_box ul li strong {
font-size: 17px;
line-height: 1.3;
display: block;
padding-bottom: 2px;
}
.banner_box ul li p {
font-size: 10px;
line-height: 1;
} .wordbanner {
width: 100%;
border-radius: 10px;
background-color: #de1122;
height: 310px;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
box-sizing: border-box;
position: relative;
margin: 10px 0;
}
.wordbannerlink {
text-decoration: none !important;
position: absolute;
width: 100%;
height: 100%;
cursor: pointer;
z-index: 5;
}
.wordbanner .wordcont {
width: 100%;
height: 100%;
border: 2px solid white;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.wordcont .titlecont {
width: 100%;
height: 60px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.wordcont .introtxt {
font-family: "Bebas Neue", cursive;
font-size: 25px;
text-align: center;
color: whitesmoke;
padding: 5px;
}
.wordcont .finaltxt {
font-family: "Bebas Neue", cursive;
font-size: 40px;
text-align: center;
color: whitesmoke;
-webkit-filter: drop-shadow(0px 4px 4px rgb(58, 58, 58));
filter: drop-shadow(0px 4px 4px rgb(58, 58, 58));
}
.titlecont .topcont {
width: 90%;
height: 80%;
border-radius: 30px;
background-color: white;
display: flex;
align-items: center;
justify-content: center;
font-family: "Bebas Neue";
font-size: 20px;
line-height: 1;
}
.titlecont .chara1 {
background-repeat: no-repeat;
background-position: center;
width: 83px;
height: 60px;
background-image: url(//jewel-cafe.my/wp-content/themes/new_jewel5745747/img/keyword/chara.png);
left: -13px;
top: -3px;
position: absolute;
background-size: contain;
animation: charablink 4000ms ease-in-out infinite;
-webkit-filter: drop-shadow(0px 4px 4px rgb(58, 58, 58));
filter: drop-shadow(0px 4px 4px rgb(58, 58, 58));
opacity: 1;
}
.titlecont .chara2 {
background-repeat: no-repeat;
background-position: center;
width: 83px;
height: 60px;
background-image: url(//jewel-cafe.my/wp-content/themes/new_jewel5745747/img/keyword/chara.png);
right: -13px;
top: -3px;
position: absolute;
background-size: contain;
animation: charablink2 4000ms ease-in-out infinite;
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
-webkit-filter: drop-shadow(0px 4px 4px rgb(58, 58, 58));
filter: drop-shadow(0px 4px 4px rgb(58, 58, 58));
opacity: 0;
}
@keyframes charablink {
0% {
opacity: 1;
}
40% {
opacity: 1;
}
50% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes charablink2 {
0% {
opacity: 0;
}
40% {
opacity: 0;
}
50% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
}
} .luckybanner_side {
width: 100%;
height: 310px;
display: flex;
justify-content: center;
align-items: center;
margin: 20px auto;
background-image: url(//jewel-cafe.my/wp-content/themes/new_jewel5745747/img/spinwheel/banner.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
overflow: hidden;
border-radius: 10px;
padding: 5%;
box-sizing: border-box;
}
.textcont_side {
display: flex;
border: 2px solid #da172b;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
color: white;
width: 100%;
height: 101%;
box-sizing: border-box;
position: relative;
padding-top: 30px;
border-radius: 10px;
border-top: none;
}
.wheel_side {
width: 70%;
background-image: url(//jewel-cafe.my/wp-content/themes/new_jewel5745747/img/spinwheel/wheel.png);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
-webkit-filter: drop-shadow(0px 0px 5px rgba(218, 23, 43));
filter: drop-shadow(0px 0px 5px rgba(218, 23, 43));
animation: spin 8000ms linear infinite;
}
.luckybanner_side .topcolumn_side {
position: absolute;
width: 102%;
top: 0;
height: 45px;
display: flex;
background-color: #da172b;
align-items: center;
box-sizing: border-box;
border-radius: 10px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.topcolumn_side .headline_side {
font-size: 12px;
letter-spacing: 1px;
font-family: "Bebas Neue";
padding: 0 3%;
text-align: center;
color: white;
position: absolute;
margin: auto;
line-height: 1.5;
}
.wheel_side::after {
content: "";
display: block;
padding-bottom: 100%;
}
.textcont_side .toptext_side {
font-size: 28px;
font-family: "Lato", sans-serif;
padding: 1% 0;
text-align: center;
color: #ff0076;
line-height: 1;
font-weight: 900;
-webkit-filter: drop-shadow(2px 2px 0px rgb(255 172 171));
filter: drop-shadow(2px 2px 0px rgb(255 172 171));
}
@keyframes spin {
100% {
transform: rotate(360deg);
}
} .column-related-article {
padding: 0 10px;
}
.column-related-article > .ttl {
color: #de1122;
font-size: 18px;
font-weight: 700;
text-align: center;
}
.column-related-article .contents {
flex-wrap: wrap;
}
.jc-sb {
justify-content: space-between;
}
.d-f {
display: flex;
}
article.article-box {
margin-bottom: 20px;
width: 48%;
}
.column-related-article .contents .article-box a {
color: #000;
}
a {
text-decoration: none;
}
a {
background: 0 0;
font-size: 100%;
margin: 0;
padding: 0;
vertical-align: baseline;
}
.column-related-article .contents .article-box a .pic {
margin-bottom: 7px;
}
.column-related-article .contents .article-box a .ttl {
color: #de1122;
font-size: 14px;
margin-bottom: 3px;
line-height: 1.4;
}
.column-related-article .contents .article-box a .ellipsis {
font-size: 12px;
line-height: 1.4;
}
.column-related-article .contents .article-box a .pic img {
-o-object-fit: cover;
height: 90px;
width: 100%;
object-fit: cover;
}
.mb-20 {
margin-bottom: 20px !important;
}
.blog-search-shop {
margin: 30px 0 15px;
padding: 0 10px;
}
h2.ttl-box-red {
background: #de1122;
border-radius: 4px;
color: #fff;
font-size: 14px;
padding: 12px;
display: block;
line-height: 1;
margin: 0 0 10px 0;
font-weight: bold !important;
} @media only screen and (max-width: 600px) {
.column-related-article .contents {
justify-content: space-between;
}
.blog-detail-date {
margin: 10px;
font-size: 12px;
}
.blog-search-shop p {
font-size: 14px;
padding: 0 4px;
}
#wrap.under {
width: 100% !important;
margin: 0 auto;
padding: 0 15px;
}
#wrap.top {
width: 100%;
margin: 13px auto 0;
}
#main {
width: 100%;
}
#mainv {
padding-top: 0;
width: 100%;
position: relative;
clear: both;
margin: 0px auto;
z-index: 0;
}
#sub {
width: 200px;
float: right;
}
#mainv .top {
}
#mainv .top img {
width: 100%;
}
#mainv_btm {
padding: 10px 10px 5px;
}
#mainv_btm img {
width: 100%;
padding-bottom: 5px;
}
#pankuzu {
clear: both;
color: #fff;
background: #de1122;
margin: 0 auto;
}
#pankuzu ul {
width: 1030px;
margin: 0 auto;
padding: 5px 0;
} .luckybanner {
width: 100%;
height: 160px;
display: flex;
justify-content: center;
align-items: center;
margin: 20px auto;
background-image: url(//jewel-cafe.my/wp-content/themes/new_jewel5745747/img/spinwheel/banner.jpg);
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
position: relative;
overflow: hidden;
}
.luckybanner .topcolumn {
position: absolute;
width: 100%;
top: 0;
height: 45px;
display: flex;
background-color: #da172b;
align-items: center;
box-sizing: border-box;
}
.topcolumn .headline { font-size: 12px; color: white; width: 90%;
position: absolute;
left: 0;
right: 0;
margin: auto;
letter-spacing: 1.5px;
}
.textcont {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
width: 100%;
margin-top: 45px;
text-align: center;
margin-right: 24px;
}
.wheel {
width: 35vw;
background-image: url(//jewel-cafe.my/wp-content/themes/new_jewel5745747/img/spinwheel/wheel.png);
background-position: center;
background-repeat: no-repeat;
position: absolute;
background-size: contain;
right: -22vw;
-webkit-filter: drop-shadow(0px 0px 5px rgba(218, 23, 43));
filter: drop-shadow(0px 0px 5px rgba(218, 23, 43));
animation: spin 8000ms linear infinite;
}
.wheel::after {
content: "";
display: block;
padding-bottom: 100%;
}
.textcont .toptext {
font-size: 6.5vw;
font-family: "Noto Sans JP", sans-serif;
line-height: 1;
padding: 1% 0;
color: #ff0076;
letter-spacing: 1px;
font-weight: 900;  }
@keyframes spin {
100% {
transform: rotate(360deg);
}
}
}
@media screen and (min-width: 601px) { article .enent {
margin-bottom: 60px;
}
.column-related-article > .ttl {
font-size: 30px;
}
.column-related-article .contents .article-box {
border-right: 1px solid #000;
margin-bottom: 30px;
margin-right: 3%;
padding-right: 3%;
width: 29%;
}
.column-related-article .contents .article-box a:hover {
display: block;
opacity: 0.8;
}
.column-related-article .contents .article-box a .pic {
margin-bottom: 10px;
}
.column-related-article .contents .article-box a .ttl {
font-size: 16px;
margin-bottom: 5px;
}
.column-related-article .contents .article-box a .ellipsis {
font-size: 14px;
line-height: 1.4;
}
.column-related-article .contents .article-box a .pic img {
height: 150px;
}
.column-related-article .contents .article-box:nth-child(3n) {
border-right: none;
margin-right: 0;
padding-right: 0;
}
.blog-search-shop {
margin: 45px 0 20px;
padding: 0;
}
h2.ttl-box-red {
background: #de1122;
border-radius: 4px;
color: #fff;
display: block;
font-size: 16px;
margin-bottom: 12px;
padding: 12px;
display: block;
font-weight: 600 !important;
} .luckybanner {
width: 100%;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
margin: 20px auto;
background-image: url(//jewel-cafe.my/wp-content/themes/new_jewel5745747/img/spinwheel/banner.jpg);
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
position: relative;
overflow: hidden;
}
.luckybanner .topcolumn {
position: absolute;
width: 100%;
top: 0;
height: 50px;
display: flex;
background-color: #da172b;
align-items: center;
padding: 0 10px;
box-sizing: border-box;
}
.topcolumn .headline {  color: white; position: absolute;
left: 0;
right: 0; letter-spacing: 1.5px;
font-size: 16px;
width: 80%;
justify-content: center;
display: flex;
}
.textcont {
display: flex; flex-direction: column;
justify-content: center;
align-items: center;
color: white;
width: 100%;
margin-top: 15px;
}
.wheel {
width: 40%;
background-image: url(//jewel-cafe.my/wp-content/themes/new_jewel5745747/img/spinwheel/wheel.png);
background-position: center;
background-repeat: no-repeat;
position: absolute;
background-size: contain;
right: -145px;
-webkit-filter: drop-shadow(0px 0px 5px rgba(218, 23, 43));
filter: drop-shadow(0px 0px 5px rgba(218, 23, 43));
animation: spin 8000ms linear infinite;
}
.wheel::after {
content: "";
display: block;
padding-bottom: 100%;
}
.textcont .toptext {
font-size: 58px;
font-family: "Noto Sans JP", sans-serif;
padding: 1% 0;
color: #ff0076;
letter-spacing: 2px;
line-height: 1;
font-weight: 900;  width: 80%;
text-align: center;
display: flex;
align-self: start;
}
}
@media screen and (min-width: 960px) {
.luckybanner .topcolumn {
height: 30px;
}
}
@media screen and (max-width: 960px) {
.topcolumn .headline {
margin: 0 auto;
width: 90%;
}
}