@charset "utf-8";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
html {
visibility: hidden;
/* opacity: 0;
transition: 3s; */
}
html.wf-active,
html.loading-delay {
visibility: visible;
/* opacity: 1;
transition: 3s; */
}
body {
line-height: 1.5;
font-family: "shippori-mincho", "adobe-garamond-pro", serif;
font-weight: 300;
font-style: normal;
font-weight: 500;
font-weight: 400;
font-size:15px;
}
:root{
--f-mincho:dnp-shuei-nshogomincho-std, sans-serif;
/* font-style: normal; */
--icon-calender: url('data:image/svg+xml;utf8,');
--icon-calender-hover: url('data:image/svg+xml;utf8,');
--icon-mail:url('data:image/svg+xml;utf8,');
--icon-mail-hover:url('data:image/svg+xml;utf8,');
--icon-arrow-right-wh: url('data:image/svg+xml;utf8,');
--icon-arrow-right-red: url('data:image/svg+xml;utf8,');
--icon-arrow-right-bl: url('data:image/svg+xml;utf8,');
--icon-target-blank-bl: url('data:image/svg+xml;utf8,');
--icon-target-blank-wh: url('data:image/svg+xml;utf8,');
--border-bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 238.11 6.18'%3E%3Cpolygon fill='%23231815' points='119.13 0 117.2 3.09 119.13 6.18 121.06 3.09 119.13 0'/%3E%3Cpolygon fill='%23231815' points='124.31 2.05 121.52 3.09 124.31 4.12 238.11 3.08 124.31 2.05'/%3E%3Cpolygon fill='%23231815' points='113.8 4.13 116.59 3.09 113.8 2.05 0 3.1 113.8 4.13'/%3E%3C/svg%3E");
--border-wh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 238.11 6.18'%3E%3Cpolygon fill='%23ffffff' points='119.13 0 117.2 3.09 119.13 6.18 121.06 3.09 119.13 0'/%3E%3Cpolygon fill='%23ffffff' points='124.31 2.05 121.52 3.09 124.31 4.12 238.11 3.08 124.31 2.05'/%3E%3Cpolygon fill='%23ffffff' points='113.8 4.13 116.59 3.09 113.8 2.05 0 3.1 113.8 4.13'/%3E%3C/svg%3E");
}
.shomin{
font-family: dnp-shuei-nshogomincho-std, sans-serif;
font-weight: 700;
/* font-style: normal; */
}
h1,h2,h3,h4,h5{
font-weight: 600;
}
.wrap.on{
overflow:hidden;
}
#wrapper{
position: relative;
}
body{
position: relative;
overflow-x: hidden;
}
body *{
box-sizing: border-box;
color:var(--main-color);
}
ol, ul {
list-style: none;
padding-inline-start: 0px;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
img{
max-width: 100%;
height: auto;
}
a{
text-decoration: none;
color:var(--main-color);
}
a:hover:not(.btn_hov){
opacity: 0.8;
}
input,textarea{
max-width: 100%;
}
@media (min-width: 750px){
body{
font-size: 16px;
}
textarea{
width: 100%;
}
}
@media (max-width: 750px){
a:hover:not(.btn_hov){
opacity: 1;
}
}
/* reset end*/
/* common */
.sec_inner{
/* width:100%;
max-width:1020px; */
width:1020px;
margin:auto;
padding:80px ;
padding-left:80px;
padding-right:80px;
}
.sec_inner.pad_off{
padding:80px;
padding-left:0px;
padding-right:0px;
}
.pad_on{
padding:0;
padding-left:80px;
padding-right:80px;
border-radius: 10px;
}
.btn_hov img:nth-of-type(2){
position: absolute;
opacity:0;
top: 50%;
left: 50%;
-webkit-transition: .2s ease-in-out;
transition: .2s ease-in-out;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.btn_hov:hover img:nth-of-type(2){
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
display: block;
-webkit-transition: .2s ease-in-out;
transition: .2s ease-in-out;
opacity:1;
}
#container{
display:flex;
}
#side{
width:300px;
background: #231F20;
height:100vh;
position: fixed;
left:0;
top:0;
color:#fff;
z-index: 5500;
overflow-y: scroll;
padding: 0;
}
#side::-webkit-scrollbar {
width: 5px;
opacity:0.1;
}
#side::-webkit-scrollbar-thumb {
background-color: #4f4f4f;
border-radius: 10px;
}
#side::-webkit-scrollbar-track-piece{
background: inherit;
}
#side .side_logo img{
margin: 40px auto 20px;
display: block;
}
.nav_side_wrap{
margin-bottom:40px;
margin-top: 30px;
}
#side .nav_side_01{
text-align: center;
font-size:20px;
}
#side .nav_side_01 li{
margin-bottom:20px;
line-height: 1;
letter-spacing: 2px;
}
#side .nav_side_01 li:hover{
color:#D6A215;
}
#side .nav_side_01 span{
font-size:10px;
font-family: "Outfit", sans-serif;
font-weight: 400;
font-style: normal;
}
#side .nav_side_02 li{
font-size:14px;
width: 85%;
margin: 15px auto;
}
#side .nav_side_02 span{
padding-top:3px;
display: block;
font-size:10px;
font-family: "Outfit", sans-serif;
font-weight: 400;
font-style: normal;
}
.btn_side p{
border: solid 1px #fff;
padding: 10px 0;
width: 100%;
text-align: center;
border-radius: 20px;
position: relative;
border: solid 1px #fff;
letter-spacing: 2px;
transition: background-color 0.3s ease;
}
.btn_side p:hover {
border: 1px solid #b28817;
background: #b28817;
}
.btn_side_faq:hover {
opacity: 1 !important;
}
.btn_side.btn_side_reserve p {
background-image: url(/sqex_cafe_shop/images/bg_crystal_btn.webp);
background-color: rgba(100, 84, 13, 0.85);
background-size: cover;
background-position: center;
background-blend-mode: multiply;
}
.btn_side.btn_side_reserve p:hover {
background-color: rgba(161, 161, 161, 0.85);
color: #fff;
border: solid 1px #fff;
}
/* .btn_side p::after {
position: absolute;
content: "";
background: var(--icon-arrow-right-wh);
background-size: contain;
background-repeat: no-repeat;
width: 20px;
height: 20px;
right: 20px;
top: 0px;
bottom: 0;
margin: auto;
}
.btn_side p:hover:after {
background: var(--icon-arrow-right-bl);
mask-image: var(--icon-arrow-right-bl);
mask-repeat: no-repeat;
background-color: #1D1D1D;
}
.btn_side_reserve p::before {
position: absolute;
content: "";
display: inline-block;
background: var(--icon-calender);
mask-image: var(--icon-calender);
background-size: contain;
background-repeat: no-repeat;
background-color: #fff;
width: 20px;
height: 20px;
left: 20px;
top: 0px;
bottom: 0;
margin: auto;
}
.btn_side_reserve p:hover:before {
background: var(--icon-calender-hover);
mask-image: var(--icon-calender-hover);
mask-repeat: no-repeat;
background-color: #E60012;
}
.btn_side_reserve p:hover:after {
background: var(--icon-arrow-right-wh);
mask-image: var(--icon-arrow-right-wh);
mask-repeat: no-repeat;
background: #E60012;
}
.btn_side_contact p::before {
position: absolute;
content: "";
background: var(--icon-mail);
mask-image: var(--icon-mail);
background-size: contain;
background-repeat: no-repeat;
width: 20px;
height: 20px;
left: 20px;
top: 0px;
bottom: 0;
margin: auto;
}
.btn_side_contact p:hover:before {
background: var(--icon-mail-hover);
mask-image: var(--icon-mail-hover);
mask-repeat: no-repeat;
background-color: #1D1D1D;
} */
#gnav_sp{
display: none;
}
.side_common.on{
display: block;
transform: translateY(0vw);
transition: all .5s;
}
#main{
width: calc(100% - 300px);
margin-left: 300px;
min-width:1020px;
background-image: url(/sqex_cafe_shop/images/bg_crystal.webp);
background-size: contain;
}
.bg_crys{
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
/* background-position: center; */
background-position: 160px 38%;
padding-bottom: 40px;
}
.bg_des{
background-size: contain;
}
.bg_wh{
background:#fff;
}
.bg_blo_01{
background:rgba(88,75,52,0.9);
}
.bg_blo_02{
background:rgba(000,000,000,0.4);
}
.btn_01{
position: relative;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
margin: auto;
color:#fff;
}
.btn_01 img{
position: relative;
display: block;
}
.btn_01 p{
background: #000;
width: 600px;
padding: 10px 0;
border: 1px solid #231F20;
border-radius: 10px;
position: relative;
transition: background-color 0.3s ease;
}
.btn_01 p:hover {
border: 1px solid #b28817;
background: #b28817;
}
.btn_01 p::after{
position: absolute;
content: "";
background: var(--icon-arrow-right-wh);
background-size: contain;
background-repeat: no-repeat;
width: 20px;
height: 20px;
right: 5%;
top: 0px;
bottom: 0;
margin: auto;
}
.btn_01[target="_blank"] p::before {
content: "";
position: absolute;
top: 50%;
left: 20px;
transform: translateY(-50%);
display: inline-block;
vertical-align: middle;
width: 16px;
height: 16px;
background: var(--icon-target-blank-wh);
background-size: contain;
background-repeat: no-repeat;
/* mask-image: var(--icon-target-blank-wh); */
margin-right: 7px;
}
.btn_01.res_unpre {
pointer-events: none;
position: relative;
margin-top: 40px;
}
.btn_01.res_unpre p {
background: none;
border: 1px #fff solid;
opacity: 0.8;
}
.btn_01.res_unpre::before {
position: absolute;
content: "Comming Soon";
font-size: 16px;
transform: translate(-50%, -50%);
left: 50%;
bottom: 90%;
}
.div_arrow,.div_arrow_brow{
position: relative;
}
.div_arrow::after,.div_arrow::before{
position: absolute;
content:"";
width: 100%;
height: 15px;
left:0;
}
.div_arrow_brow::after{
position: absolute;
content:"";
width: 100%;
height: 15px;
left:0;
}
.sec_ttl{
text-align: center;
margin-bottom:35px;
}
.ttl_border {
background-repeat: no-repeat;
max-width: 380px;
width: 100%;
height: 10px;
margin: 20px auto 30px;
}
.border_bl {
background-image: var(--border-bl);
}
.border_wh {
background-image: var(--border-wh);
}
.sec_ttl h2{
font-size:24px;
/* font-display:optional; */
}
.sec_ttl p{
font-size:16px;
font-family: "Outfit", sans-serif;
font-style: normal;
font-weight: 300;
letter-spacing: 0.1em;
}
.pc_none{
display: none;
}
.sp_none{
display: block;
}
.list_sns{
text-align: center;
width: 150px;
margin: 0 auto 40px;
display: flex;
align-items: center;
justify-content: center;
column-gap: 20px;
}
.list_sns .lang_ttl{
display: block;
font-family: "Outfit", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 12px;
}
.pc_lang{
padding-bottom: 40px;
}
.tab_lang li{
border-bottom: 1px solid #fff;
padding: 8px 0;
}
@media (max-width: 750px){
.bg_crys{
background: none;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50%;
position: relative;
}
.bg_crys:before{
/* background: url(/paselabo_shop/ff_eorzea/images/bg_crys_sp.webp);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50%; */
position:fixed;
top:0;
left:0;
z-index:-1;
width:100vw;
height:100vh;
-webkit-background-size:cover;
background-size:cover;
content:"";
background-position: center;
}
#gnav_sp{
height: 70px;
width:100%;
background: #1D1D1D;
color:#fff;
position: fixed;
top:0;
left: 0;
display: flex;
justify-content: space-between;
z-index: 2000;
}
.gnav_sp_logo{
display: flex;
justify-content: center;
align-items: center;
padding:5px 0px 0 12px;
}
.gnav_sp_logo img{
height: 100%;
width:100%;
max-height: 60px;
max-width: 200px;
}
.gnav_sp_res{
background: #C12500;
}
.gnav_sp_btns{
display:flex;
}
.gnav_sp_btns a{
width: 60px;
display: flex;
justify-content: center;
position: relative;
align-items: self-end;
padding-bottom: 10px;
font-size:10px;
font-weight: 300;
}
.gnav_sp_btns a::after{
position: absolute;
content:"";
width:30px;
height: 30px;
left: 0;
right: 0;
margin: auto;
background-repeat: no-repeat;
background-size: contain;
}
.gnav_sp_qa::after{
top: 13px;
background: url(/sqex_cafe_shop/images/icon_faq.webp);
}
.gnav_sp_res{
background-image: url(/sqex_cafe_shop/images/bg_crystal_btn.webp);
background-color: rgba(100, 84, 13, 0.85);
background-size: cover;
background-position: center;
background-blend-mode: multiply;
}
.gnav_sp_res::after{
top:11px;
background: url(/sqex_cafe_shop/images/icon_reserve.webp);
}
.gnav_sp_btns .gnav_sp_menu::after{
top: 16px;
background: url(/sqex_cafe_shop/images/ico_menu.svg);
background-size: contain;
background-repeat: no-repeat;
}
.gnav_sp_btns .gnav_sp_menu.on::after{
top: 16px;
background: url(/sqex_cafe_shop/images/ico_cross.svg);
background-size: contain;
background-repeat: no-repeat;
}
.gnav_sp_btns .gnav_sp_lang::after{
top: 11px;
background: url(/sqex_cafe_shop/images/icon_lang.webp);
background-size: contain;
background-repeat: no-repeat;
}
.side_common.on {
display: block;
transform: translateY(0);
transition: all .5s;
margin-top: 70px;
font-weight: 500;
max-height: calc(100vh - 60px);
overflow-y: auto;
}
.side_common{
background: rgb(0 0 0);
transform: translateY(calc(-100% - 70px));
margin-top: 70px;
transition: all .5s;
}
.side_logo{
display: none;
}
.nav_side_wrap{
margin: auto;
justify-content: center;
display: flex;
padding-bottom: 10%;
max-width: 600px;
}
#side {
width: 100%;
height: 0;
overflow: visible;
padding: 0;
}
.side_content{
height:0;
}
.side_content{
height:0;
}
#side .nav_side_01{
text-align: left;
width: 100%;
font-weight: normal;
}
#side .nav_side_01 li{
margin-bottom:0;
}
#side .nav_side_01 li:nth-of-type(even){
background-color: #231F20;
}
#side .nav_side_01 li a{
display: block;
padding: 27px 45px;
font-size: 18px;
position: relative;
}
#side .nav_side_01 li a::after{
position: absolute;
content: "";
background: var(--icon-arrow-right-wh);
background-size: contain;
background-repeat: no-repeat;
width: 20px;
height: 20px;
right: 45px;
top: 0px;
bottom: 0;
margin: auto;
}
#side .nav_side_01 span{
font-weight: 300;
letter-spacing: 0.1em;
font-size: 10px;
}
#side .nav_side_02 span{
display: block;
padding-top: 3px;
}
.nav_side_02 .btn_01 p {
top: -2px;
font-size: 11px;
}
#side .nav_side_02 li{
margin: 15px auto 25px;
}
.list_sns{
justify-content: center;
gap:20px;
}
#main {
width: 100%;
padding-top:70px;
margin-left: 0;
min-width: auto;
}
.sec_inner {
width: 100%;
padding-left: 4%;
padding-right: 4%;
}
.sec_inner{
padding-top: 80px;
padding-bottom: 80px;
}
.sec_inner.pad_off {
width: 91%;
padding-top: 30px;
padding-bottom: 30px;
}
.sec_ttl{
margin-bottom: 20px;
}
.ttl_border {
max-width: 300px;
}
.sec_ttl h2{
font-size:24px;
}
.pad_on {
padding-left: 6%;
padding-right: 6%;
}
.gnav_sp{
display: none;
}
.div_arrow::after,.div_arrow::before{
width: 92%;
height: 15px;
left:0;
right: 0;
margin: auto;
background-size: contain;
background-repeat: no-repeat;
}
.div_arrow_brow::after{
width: 100%;
height: 15px;
left:0;
right: 0;
margin: auto;
background-size: contain;
background-repeat: no-repeat;
}
.pc_none{
display: block;
}
.sp_none{
display: none;
}
}
/* common end */
/* 多言語 */
.stt-lang-select.bl {
display: none;
}
#en .nav_sp .list li a span.nav_sub_ttl,
#ko .nav_sp .list li a span.nav_sub_ttl,
#cn .nav_sp .list li a span.nav_sub_ttl,
#tw .nav_sp .list li a span.nav_sub_ttl {
display: none;
}
#en {
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-variation-settings:
"wdth" 100;
}
#ko {
font-family: "Noto Sans KR", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
}
#cn {
font-family: "Noto Sans SC", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
}
#tw {
font-family: "Noto Sans TC", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
}
.has-sub{
position: relative;
}
.sub {
position: absolute;
display: none;
width: 100%;
z-index: 3;
}
.sub > .item_lang > .a_lang {
color: #fff;
line-height: 1.75;
font-size: 14px;
}
.sub > .item_lang > .a_lang:hover {
opacity: 0.8;
}
.tab_lang {
margin-top: 7px;
width: 230px;
left: calc(50% + 20px);
margin: auto;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
}
header .bg_ct02 .list > li .tab_lang > .item_lang{
margin-bottom: 10px;
}
@media screen and (max-width: 768px) {
.has-sub{
display: none;
}
header .gnav_sp_btns .it.has-sub{
position: static;
}
header .gnav_sp_btns .it a {
color: #fff;
height: 100%;
width: 60px;
}
header .gnav_sp_btns .it {
display: flex;
align-items: self-end;
justify-content: center;
max-width: 60px;
font-size: 10px;
font-weight: bold;
}
.tab_lang{
top: 70px;
background: rgb(0,0,0,0.9);
width: 100%;
margin-top: 0;
right: 0;
left: 0;
transform: unset;
-webkit-transform: unset;
-ms-transform: unset;
}
.sub > .item_lang{
display: flex;
justify-content: center;
align-items: center;
border-top: solid 1px #000;
margin-right: 0;
}
.sub > .item_lang > .a_lang{
padding: 9px;
color: #fff;
width: 100%;
text-align: center;
position: static;
align-items: center;
display: block;
}
.sub > .item_lang > .a_lang::after{
content: none;
}
}
/* bread */
.pc_bread{
display: block;
}
.pc_bread{
overflow: scroll;
}
.pc_bread ul{
white-space: nowrap;
}
.sp_bread{
display: none;
}
.breadcrumbs{
padding: 25px 30px 25px;
font-size: 10px;
line-height: 2;
background: #1c1c1c;
color: #fff;
white-space: nowrap;
overflow-y: auto;
}
.breadcrumbs ul{
display: flex;
}
.breadcrumbs li a{
display: inline-block;
margin-right:20px;
position: relative;
}
.breadcrumbs li a:after{
position: absolute;
content: "";
width: 5px;
height: 5px;
border: 1px solid;
border-color: #fff #fff transparent transparent;
transform: rotate(45deg);
top: 2px;
right: -11px;
bottom: 0;
margin: auto;
}
.breadcrumbs li:last-child a:after{
content:none;
}
.breadcrumbs li:last-child a{
pointer-events: none;
}
.breadcrumbs::-webkit-scrollbar {
display: none;
}
.breadcrumbs {
-ms-overflow-style: none;
scrollbar-width: none;
}
.pc_bread::-webkit-scrollbar{
background: rgba(00,00,00,0);
}
.pc_bread::-webkit-scrollbar-corner {
background: rgba(00,00,00,0);
}
@media (max-width: 750px){
.pc_bread{
display: none;
}
.sp_bread{
display: block;
padding:20px 6% 20px;
overflow: hidden;
background: rgba(226,220,204,0.7);
}
.sp_bread > div{
overflow-x: scroll;
}
.sp_bread ul{
padding-bottom:5px;
white-space: nowrap;
}
.breadcrumbs ul {
display: flex;
width: 100%;
overflow-x: scroll;
white-space: nowrap;
}
}
/* bread end */
/* モーダル */
.modal_res{
position: fixed;
background: rgba(00,00,00,0.9);
height: 90vh;
width:75%;
opacity: 0;
z-index:1000;
visibility: hidden;
transition: 0.5s;
top: 0;
bottom: 0;
left: 0px;
right: 0;
margin: auto;
width: 68%;
left: 310px;
padding:0 2%;
}
.modal_res.on{
visibility: visible;
opacity: 1;
transition: 0.5s;
overflow: scroll;
overflow-x: hidden;
}
.modal_res.on::-webkit-scrollbar-thumb {
background-color: #4f4f4f;
border-radius: 10px;
}
.modal_res.on::-webkit-scrollbar{
background: rgba(00,00,00,0);
width:3px;
}
.modal_res.on::-webkit-scrollbar-corner {
background: rgba(00,00,00,0);
}
.modal_res_close{
z-index: 1400;
top:5%;
right:2%;
width:43px;
height:43px;
position: absolute;
}
.modal_res_close span{
display: none;
}
.modal_res_close::after{
content:"";
position: absolute;
top: 0%;
right: 0%;
width: 100%;
height: 100%;
background: url(/sqex_cafe_shop/images/ico_modal_close.webp);
background-repeat: no-repeat;
}
.modal_res_txt{
color:#fff;
width: fit-content;
margin: 10% auto 50px;
}
.modal_res_txt_ttl{
}
.modal_res_txt p{
margin-bottom:30px;
font-size:16px;
line-height: 1.6;
}
.modal_res_txt ul{
margin-bottom:30px;
font-size:12px;
line-height: 2;
}
.modal_res_txt ul li{
position: relative;
padding-left: 15px;
}
.modal_res_txt ul li:before{
content: "※";
padding-right: 5px;
left: 0;
position: absolute;
}
.modal_res_ul{
display: flex;
position: relative;
width: fit-content;
flex-direction: column;
justify-content: center;
bottom: 0;
top: 0;
margin: auto;
height: auto;
}
.modal_res_ul li{
margin-bottom:35px;
}
.modal_res_ul li:last-child{
margin-bottom:0px;
}
.modal_res_ul .btn_01{
font-size:14px;
}
.modal_res_ul .btn_01 span {
font-size: 10px;
font-family: "Outfit", sans-serif;
font-style: normal;
font-weight: 300;
margin-top: 5px;
display: block;
letter-spacing: 0.14em;
}
.modal_sub_txt{
color: #fff;
text-align: center;
margin-bottom: 10px;
padidng-bottom: 10px;
font-size: 16px;
font-weight: bold;
}
@media (max-width: 750px){
.modal_res{
margin-top: 70px;
width: 100%;
height: 100%;
padding: 5% 9% 0;
}
.modal_res.on {
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: 5% 9% 0;
left: auto;
}
.modal_res.on::-webkit-scrollbar{
display: none;
}
.modal_res.on::-webkit-scrollbar-corner {
display: none;
}
.modal_res_txt {
margin: 0px auto 0px;
font-weight: 500;
}
.modal_res_txt .sec_ttl{
margin: 20px 0;
}
.modal_res_txt p {
font-size:14px;
margin-bottom:15px;
}
.modal_res_txt ul {
font-size: 11px;
margin-bottom: 10px;
}
.modal_res_ul li {
margin-bottom: 15px;
}
.modal_res_ul {
top: auto;
bottom: auto;
right: auto;
left: auto;
height: auto;
margin: 20px auto;
position: relative;
display: block;
width: 100%;
}
.btn_01 p{
top: 0px;
}
.btn_01.res_unpre {
margin-top: 60px;
}
.modal_res_ul .btn_01 span{
display: block;
}
.modal_res_close{
display: inline-block;
position: relative;
color: #fff;
content: "";
font-size: 18px;
top: auto;
left: -15px;
margin: 20px auto 100px;
width: fit-content;
height: auto;
}
.modal_res_close span{
display: inline-block;
color: #fff;
content: "";
}
.modal_res_close::after {
position: absolute;
top: 3px;
right: -30px;
left: auto;
width: 22px;
margin: 0;
background-repeat: no-repeat;
background-size: contain;
}
.modal_res_close {
position: unset;
}
}
/* モーダルend */
/* links */
#links{
}
#links .sec_ttl{
padding-bottom:25px;
margin-bottom: 0px;
}
#links .sec_ttl h2{
font-size:24px;
font-family: var(--f-mincho);
/* font-display:optional; */
}
#links .sec_ttl.div_arrow::before {
content:none;
}
#links .sec_ttl.div_arrow::after{
bottom: 0px;
}
.link_offi{
margin:60px auto 70px;
display: flex;
justify-content: center;
}
.link_txt{
max-width: 430px;
width: fit-content;
padding: 0 0px 0 30px;
text-align: center;
margin: auto 0;
}
.link_txt h3 {
margin-bottom:30px;
}
.link_txt h3 span{
font-size:30px;
font-family: var(--f-mincho);
/* font-display:optional; */
}
.link_txt > p{
margin-bottom:30px;
}
.link_pr{
padding:65px 0 70px;
text-align: center;
}
.link_pr a{
display: block;
width: fit-content;
margin: 0 auto 25px;
text-decoration: underline;
}
.link_pr a:last-child{
margin-bottom:0;
}
.link_pr.div_arrow::before{
top:0;
}
.link_pr.div_arrow::after{
bottom:0;
}
@media (max-width: 750px){
#links .div_arrow::after{
background-size: contain;
background-repeat: no-repeat;
width:100%;
}
#links .sec_inner.pad_off{
padding-top:50px;
padding-bottom: 50px
}
#links .sec_ttl {
padding-bottom: 20px;
}
#links .sec_ttl h2 {
font-size: 18px;
}
.link_txt h3 {
margin-bottom: 20px;
}
.link_offi{
flex-direction: column;
margin: 25px auto 40px
}
.link_offi .btn_01{
display: block;
}
.link_txt{
padding: 0 0px 0 0px
}
.link_txt h3 span{
font-size:6.5vw;
}
.link_txt > p{
margin-bottom: 15px;
font-size: 14px;
}
.link_txt img{
margin-bottom: 5px;
}
.link_pr {
padding: 0px 0 0px;
}
.link_pr.div_arrow::before,.link_pr.div_arrow::after{
content:none;
}
.link_pr img{
width:80%;
}
.link_pr a{
font-size:3.5vw;
margin: 0 auto 10px;
}
}
/* links end*/
/* footer */
footer{
padding:10px 0;
text-align: center;
color:#fff;
font-size:12px;
background: #231F20;
}
footer p{
margin-bottom:20px;
margin-top: 40px;
font-weight: 100;
}
footer p:first-child{
font-family: Oswald;
}
footer p:last-child{
margin-bottom:0px;
}
footer::before,footer::after{
content: "";
width: 100%;
background-repeat: no-repeat;
display: block;
height: 60px;
margin: 0 auto;
background-position-x: center;
}
footer::before{
background-image: url(/sqex_cafe_shop/images/line_footer01.webp);
margin-bottom: 20px;
}
footer::after{
background-image: url(/sqex_cafe_shop/images/line_footer02.webp);
margin-top: 20px;
}
#back-top{
position: fixed;
bottom:20px;
right:20px;
visibility: hidden;
opacity: 0;
transition: .5s;
}
#back-top.on{
visibility: visible;
opacity: 1;
transition: .5s;
z-index: 4000;
}
.privacy{
width: 100%;
margin-top: 50px;
display: block;
}
@media (max-width: 750px){
footer p {
margin-bottom: 10px;
}
footer p:last-child{
margin-bottom: 0px;
}
#back-top {
bottom: 20px;
right: 10px;
}
}
/* footer end*/
/* under_common */
.under_wrap{
}
.under_wrap_cont{
background: #fff;
border-radius: 20px;
}
.under_mgl{
position: relative;
width: fit-content;
margin: 0px auto 0px;
padding:30px 0 25px;
}
.under_mgl::before{
position: absolute;
content:"";
left:-70px;
bottom:25px;
width:58px;
height: 80px;
}
@media (max-width: 750px){
.under_wrap_inner{
width: 91%;
margin: auto;
}
.under_mgl{
margin: 0px auto 0px;
}
}
/* under_common end*/
/* 期間限定店舗用 */
.menu_shop_box {
flex-wrap: wrap;
}
.access_ex,
.menu_shop_ex {
position: relative;
color: #9a74ce;
font-family: noto-sans-cjk-jp, sans-serif;
font-weight: 600;
}
.ac_select > a .access_ex {
position: absolute;
color: #9a74ce;
font-size: 12px;
font-family: noto-sans-cjk-jp, sans-serif;
left: 50%;
top: 8px;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
width: 100%;
}
.ac_shop_ttl .access_ex {
font-size: 22px;
font-weight: bold;
font-family: noto-sans-cjk-jp, sans-serif;
}
.cap_reserve{
font-size: 12px;
margin-left: 20px;
text-align: center;
}
.modal_res .cap_reserve{
color: #fff;
}
@media (max-width: 750px){
.ac_select > a .access_ex {
font-size: 10px;
}
.access_ex:before,
.access_ex:after{
margin-top: 0;
font-size: 10px;
margin: 0 4px;
}
.menu_shop_ex {
font-size: 12px;
}
}
/* 期間限定店舗用 end */
.link_allergy{
text-align: center;
margin: 0 auto;
text-decoration: underline;
}
/* 食事・期限ベース */
.item_li_grid{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap:40px;
}
.item_li_grid li{
display: block;
}
.item_li_grid li img{
display: block;
margin-bottom: 10px;
}
.item_li_grid dt{
display: block;
font-weight: bold;
margin-bottom: 5px;
}
.item_li_grid .item_price{
font-size: 20px;
text-align: right;
margin-bottom: 5px;
font-family: "Noto Sans JP", sans-serif;
& span{
font-size:12px;
font-weight: normal;
}
}
.item_li_grid .item_desc{
font-size:12px;
}
@media (max-width: 750px){
.item_li_grid{
grid-template-columns: 1fr 1fr;
gap:20px;
}
}
/* =========================
Loader
========================= */
.loader {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
background: #231F20;
opacity: 1;
visibility: visible;
transition: opacity 0.8s ease, visibility 0.8s ease;
}
html.loaded .loader {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.logo-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 28px;
}
.logo-mark {
width: 200px;
height: 200px;
max-width: 50vw;
max-height: 50vw;
}
.logo-mark svg {
width: 100%;
height: 100%;
display: block;
}
.logo-mark svg path {
fill: transparent;
stroke: #c30d23;
stroke-width: 0.3;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 350;
stroke-dashoffset: 350;
animation:
drawStroke 4s ease-in-out forwards,
fillIn 4s ease-in-out forwards;
}
/* LOADING text */
.loading-text {
color: #ffffff;
font-size: 13px;
font-weight: 400;
letter-spacing: 0.4em;
padding-left: 0.4em;
display: flex;
align-items: baseline;
}
.loading-text__dots {
display: inline-flex;
gap: 2px;
margin-left: 4px;
}
.loading-text__dots span {
opacity: 0.2;
animation: dotBlink 1.4s ease-in-out infinite;
}
.loading-text__dots span:nth-child(1) {
animation-delay: 0s;
}
.loading-text__dots span:nth-child(2) {
animation-delay: 0.2s;
}
.loading-text__dots span:nth-child(3) {
animation-delay: 0.4s;
}
/* =========================
Main Content
========================= */
.main-content {
opacity: 0;
transform: translateY(12px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
html.loaded .main-content {
opacity: 1;
transform: translateY(0);
}
.hero {
min-height: 100vh;
display: grid;
place-items: center;
padding: 40px 20px;
background:
radial-gradient(circle at top, rgba(195, 13, 35, 0.18), transparent 35%),
#000;
}
.hero-inner {
width: 100%;
max-width: 960px;
text-align: center;
}
.hero-subtitle {
margin-bottom: 16px;
font-size: 12px;
letter-spacing: 0.3em;
color: rgba(255, 255, 255, 0.7);
}
.hero-title {
font-size: clamp(32px, 5vw, 72px);
line-height: 1.1;
font-weight: 700;
letter-spacing: 0.02em;
color: #fff;
}
.hero-description {
margin-top: 20px;
font-size: 15px;
line-height: 1.8;
color: rgba(255, 255, 255, 0.78);
}
/* =========================
Animation
========================= */
@keyframes drawStroke {
0% {
stroke-dashoffset: 350;
}
65% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
@keyframes fillIn {
0%,
65% {
fill: transparent;
}
100% {
fill: #c30d23;
}
}
@keyframes dotBlink {
0%,
100% {
opacity: 0.2;
}
50% {
opacity: 1;
}
}
/* =========================
Accessibility
========================= */
@media (prefers-reduced-motion: reduce) {
.logo-mark svg path {
animation: none;
fill: #c30d23;
stroke-dashoffset: 0;
}
.loading-text__dots span {
animation: none;
opacity: 1;
}
.loader,
.main-content {
transition: none;
}
}