*,
::before,
::after {
box-sizing: border-box; background-repeat: no-repeat; } ::before,
::after {
text-decoration: inherit; vertical-align: inherit; } :where(:root) {
overflow-wrap: break-word; -moz-tab-size: 4; -o-tab-size: 4;
tab-size: 4; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%;
text-size-adjust: 100%; }  :where(body) {
margin: 0;
}    :where(hr) {
color: inherit; height: 0; }   :where(pre) {
font-family: monospace, monospace; font-size: 1em; overflow: auto; }  :where(abbr[title]) {
text-decoration: underline;
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
} :where(b, strong) {
font-weight: bolder;
} :where(code, kbd, samp) {
font-family: monospace, monospace; font-size: 1em; } :where(small) {
font-size: 80%;
}  :where(audio, canvas, iframe, img, svg, video) {
vertical-align: middle;
} :where(iframe) {
border-style: none;
} :where(svg:not([fill])) {
fill: currentColor;
}  :where(table) {
border-collapse: collapse; border-color: currentColor; text-indent: 0; }  :where(button, input, select) {
margin: 0;
} :where(button, [type=button i], [type=reset i], [type=submit i]) {
-webkit-appearance: button;
} :where(fieldset) {
border: 1px solid #a0a0a0;
} :where(progress) {
vertical-align: baseline;
} :where(textarea) {
margin: 0; resize: vertical; } :where([type=search i]) {
-webkit-appearance: textfield; outline-offset: -2px; } ::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
} ::-webkit-input-placeholder {
color: inherit;
opacity: 0.54;
} ::-webkit-search-decoration {
-webkit-appearance: none;
} ::-webkit-file-upload-button {
-webkit-appearance: button; font: inherit; }  :where(dialog) {
background-color: white;
border: solid;
color: black;
height: -moz-fit-content;
height: fit-content;
left: 0;
margin: auto;
padding: 1em;
position: absolute;
right: 0;
width: -moz-fit-content;
width: fit-content;
}
:where(dialog:not([open])) {
display: none;
} :where(details > summary:first-of-type) {
display: list-item;
}  :where([aria-busy=true i]) {
cursor: progress;
} :where([aria-disabled=true i], [disabled]) {
cursor: not-allowed;
} :where([aria-hidden=false i][hidden]) {
display: initial;
}
:where([aria-hidden=false i][hidden]:not(:focus)) {
clip: rect(0, 0, 0, 0);
position: absolute;
}
:where(:root) {
line-height: 1;
overflow-wrap: break-word;
}
@media (prefers-reduced-motion: no-preference) {
:where(html:focus-within) {
scroll-behavior: smooth;
}
}
:where(body) {
font-family: sans-serif;
}
:where(h1, h2, h3, h4, h5, h6) {
margin: 0;
font: inherit;
}
:where(ul, ol) {
margin: 0;
padding-left: 0;
list-style: none;
}
:where(dl, dd) {
margin: 0;
}
:where(p) {
margin: 0;
}
:where(blockquote) {
margin: 0;
}
:where(hr) {
margin: 0;
border: none;
border-top: 1px solid currentColor;
}
:where(pre) {
margin: 0;
}
:where(a) {
color: inherit;
text-decoration: none;
text-underline-offset: 0.1375em;
}
:where(figure) {
max-width: 100%;
margin: 0;
}
:where(img, picture, svg, video) {
max-width: 100%;
height: auto;
}
:where(iframe){
max-width: 100%;
}
:where(table) {
width: 100%;
table-layout: fixed;
}
:where(tbody, thead) {
vertical-align: inherit;
}
:where(th) {
margin: 0;
text-align: inherit;
text-align: -webkit-match-parent;
}
:where(td) {
padding: 0;
}
:where(label) {
display: inline-block;
}
:where(button, input, optgroup, select, textarea) {
font: inherit;
line-height: inherit;
letter-spacing: inherit;
}
:where(button, [role=button], [type=button], [type=reset], [type=submit]):not(:disabled) {
cursor: pointer;
}
:root {
--icon-event: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2216%22%20width%3D%2214%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20opacity%3D%221%22%20fill%3D%22%2303539d%22%20d%3D%22M152%2024c0-13.3-10.7-24-24-24s-24%2010.7-24%2024V64H64C28.7%2064%200%2092.7%200%20128v16%2048V448c0%2035.3%2028.7%2064%2064%2064H384c35.3%200%2064-28.7%2064-64V192%20144%20128c0-35.3-28.7-64-64-64H344V24c0-13.3-10.7-24-24-24s-24%2010.7-24%2024V64H152V24zM48%20192H400V448c0%208.8-7.2%2016-16%2016H64c-8.8%200-16-7.2-16-16V192zm176%2040c-13.3%200-24%2010.7-24%2024v48H152c-13.3%200-24%2010.7-24%2024s10.7%2024%2024%2024h48v48c0%2013.3%2010.7%2024%2024%2024s24-10.7%2024-24V352h48c13.3%200%2024-10.7%2024-24s-10.7-24-24-24H248V256c0-13.3-10.7-24-24-24z%22%2F%3E%3C%2Fsvg%3E');
--icon-clock: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2216%22%20width%3D%2216%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20opacity%3D%221%22%20fill%3D%22%231E3050%22%20d%3D%22M464%20256A208%20208%200%201%201%2048%20256a208%20208%200%201%201%20416%200zM0%20256a256%20256%200%201%200%20512%200A256%20256%200%201%200%200%20256zM232%20120V256c0%208%204%2015.5%2010.7%2020l96%2064c11%207.4%2025.9%204.4%2033.3-6.7s4.4-25.9-6.7-33.3L280%20243.2V120c0-13.3-10.7-24-24-24s-24%2010.7-24%2024z%22%2F%3E%3C%2Fsvg%3E');
--icon-arrow-right: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2216%22%20width%3D%2210%22%20viewBox%3D%220%200%20320%20512%22%3E%3Cpath%20fill%3D%22%233e3e3e%22%20d%3D%22M310.6%20233.4c12.5%2012.5%2012.5%2032.8%200%2045.3l-192%20192c-12.5%2012.5-32.8%2012.5-45.3%200s-12.5-32.8%200-45.3L242.7%20256%2073.4%2086.6c-12.5-12.5-12.5-32.8%200-45.3s32.8-12.5%2045.3%200l192%20192z%22%2F%3E%3C%2Fsvg%3E');
--icon-arrow-left: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%3E%3Cpath%20d%3D%22m11.8%208-5-5-1.5%201.5L8.8%208l-3.5%203.5L6.8%2013z%22%2F%3E%3C%2Fsvg%3E');
--icon-arrow-circle: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%221em%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cstyle%3Esvg%7Bfill%3A%23025baa%7D%3C%2Fstyle%3E%3Cpath%20d%3D%22M0%20256a256%20256%200%201%200%20512%200A256%20256%200%201%200%200%20256zM241%20377c-9.4%209.4-24.6%209.4-33.9%200s-9.4-24.6%200-33.9l87-87-87-87c-9.4-9.4-9.4-24.6%200-33.9s24.6-9.4%2033.9%200L345%20239c9.4%209.4%209.4%2024.6%200%2033.9L241%20377z%22%2F%3E%3C%2Fsvg%3E');
--color-white: #fff;
--color-black: #3E3E3E;
--color-gray: #AAAAAA;
--color-gray-pale: #F5F5F5;
--color-green: #F3F6ED;
--color-green-light: #EDF2E5;
--color-green-light-b: #EEF3EF;
--color-green-light-c: #5A685C;
--color-green-light-d: #C9D3CA;
--color-green-dark: #EBFFF8;
--color-green-dark-b: #58685A;
--color-blue: #03539D;
--color-blue-dark: #002F5A;
--color-blue-dark-b: #02539d;
--color-red: #c02b2b;
--font-sans: 'Noto Sans JP', sans-serif;
--font-en: century-gothic, 'Noto Serif JP', serif;
--font-rale: 'Raleway', sans-serif;
--font-vdl: "vdl-penletter", sans-serif;
--font-kaisei: 'Kaisei Opti', serif;
--font-poppins: "Poppins", serif;
--transition-duration: 0.15s;
--transition-opacity: 0.65;
--z-index-c-loader: 1000;
--z-index-site-wrap-drawerBtn: 550;
--z-index-c-drawer: 500;
--z-index-site-wrap-sideNav: 150;
--z-index-site-header: 100;
--border-radius-small: 4px;
--border-radius: clamp(5px, 0.6060606061vw, 8px);
--border-radius-large: clamp(10px, 1.2121212121vw, 16px);
--box-shadow: 0 2px 4px rgba(0, 0, 0, .06);
--text-shadow: 0 0 6px rgba(0, 0, 0, .7);
--content-width-medium: 92vw;
--content-width-large: 92vw;
--content-width-xlarge: 92vw;
--font-10: 10px;
--font-11: 11px;
--font-12: 11px;
--font-13: 12px;
--font-14: 13px;
--font-15: 13px;
--font-16: 14px;
--font-17: 14px;
--font-18: 15px;
--font-19: 16px;
--font-20: 16px;
--font-21: 17px;
--font-22: 18px;
--font-23: 18px;
--font-24: 19px;
--font-25: 19px;
--font-26: 20px;
--font-27: 21px;
--font-28: 21px;
--font-29: 22px;
--font-30: 23px;
--font-31: 23px;
--font-32: 24px;
--font-33: 24px;
--font-34: 25px;
--font-35: 26px;
--font-36: 26px;
--font-37: 27px;
--font-38: 28px;
--font-39: 28px;
--font-40: 29px;
--leading-xsmall: 1.4;
--leading-small: 1.6;
--leading-medium: 1.8;
}
@media (min-width: 768px) {
:root {
--content-width-medium: clamp(0px, 60.2083333333vw, 1156px);
--content-width-large: clamp(0px, 81.3953488372vw, 1400px);
--content-width-xlarge: clamp(0px, 87.2093023256vw, 1500px);
}
}
@media (min-width: 960px) {
:root {
--font-10: 10px;
--font-11: 11px;
--font-12: 12px;
--font-13: 13px;
--font-14: 14px;
--font-15: 15px;
--font-16: 16px;
--font-17: 17px;
--font-18: 18px;
--font-19: 19px;
--font-20: 20px;
--font-21: 21px;
--font-22: 22px;
--font-23: 23px;
--font-24: 24px;
--font-25: 25px;
--font-26: 26px;
--font-27: 27px;
--font-28: 28px;
--font-29: 29px;
--font-30: 30px;
--font-31: 31px;
--font-32: 32px;
--font-33: 33px;
--font-34: 34px;
--font-35: 35px;
--font-36: 36px;
--font-37: 37px;
--font-38: 38px;
--font-39: 39px;
--font-40: 40px;
}
}
@media (min-width: 1200px) {
:root {
--font-10: calc(10px * 1.2);
--font-11: calc(11px * 1.2);
--font-12: calc(12px * 1.2);
--font-13: calc(13px * 1.2);
--font-14: calc(14px * 1.2);
--font-15: calc(15px * 1.18);
--font-16: calc(16px * 1.18);
--font-17: calc(17px * 1.18);
--font-18: calc(18px * 1.18);
--font-19: calc(19px * 1.18);
--font-20: calc(20px * 1.18);
--font-21: calc(21px * 1.18);
--font-22: calc(22px * 1.18);
--font-23: calc(23px * 1.18);
--font-24: calc(24px * 1.18);
--font-25: calc(25px * 1.18);
--font-26: calc(26px * 1.18);
--font-27: calc(27px * 1.18);
--font-28: calc(28px * 1.18);
--font-29: calc(29px * 1.18);
--font-30: calc(30px * 1.18);
--font-31: calc(31px * 1.18);
--font-32: calc(32px * 1.18);
--font-33: calc(33px * 1.18);
--font-34: calc(34px * 1.18);
--font-35: calc(35px * 1.18);
--font-36: calc(36px * 1.18);
--font-37: calc(37px * 1.18);
--font-38: calc(38px * 1.18);
--font-39: calc(39px * 1.18);
--font-40: calc(40px * 1.18);
}
}
._d-none {
display: none !important;
}
._d-block {
display: block !important;
}
._d-inline-block {
display: inline-block !important;
}
._d-inline {
display: inline !important;
}
._d-flex {
display: flex !important;
}
._d-inline-flex {
display: inline-flex !important;
}
@media (min-width: 560px) {
._d-sm-none {
display: none !important;
}
._d-sm-block {
display: block !important;
}
._d-sm-inline-block {
display: inline-block !important;
}
._d-sm-inline {
display: inline !important;
}
._d-sm-flex {
display: flex !important;
}
._d-sm-inline-flex {
display: inline-flex !important;
}
}
@media (min-width: 768px) {
._d-md-none {
display: none !important;
}
._d-md-block {
display: block !important;
}
._d-md-inline-block {
display: inline-block !important;
}
._d-md-inline {
display: inline !important;
}
._d-md-flex {
display: flex !important;
}
._d-md-inline-flex {
display: inline-flex !important;
}
}
@media (min-width: 960px) {
._d-lg-none {
display: none !important;
}
._d-lg-block {
display: block !important;
}
._d-lg-inline-block {
display: inline-block !important;
}
._d-lg-inline {
display: inline !important;
}
._d-lg-flex {
display: flex !important;
}
._d-lg-inline-flex {
display: inline-flex !important;
}
}
@media (min-width: 1200px) {
._d-xl-none {
display: none !important;
}
._d-xl-block {
display: block !important;
}
._d-xl-inline-block {
display: inline-block !important;
}
._d-xl-inline {
display: inline !important;
}
._d-xl-flex {
display: flex !important;
}
._d-xl-inline-flex {
display: inline-flex !important;
}
}
@media (min-width: 1400px) {
._d-xxl-none {
display: none !important;
}
._d-xxl-block {
display: block !important;
}
._d-xxl-inline-block {
display: inline-block !important;
}
._d-xxl-inline {
display: inline !important;
}
._d-xxl-flex {
display: flex !important;
}
._d-xxl-inline-flex {
display: inline-flex !important;
}
}
body {
background: var(--color-white);
font-family: var(--font-sans);
font-feature-settings: "palt";
font-weight: 400;
letter-spacing: 0.05em;
color: var(--color-black);
}
a,
button,
[type=button],
[type=reset],
[type=submit] {
transition-property: opacity;
transition-duration: var(--transition-duration);
transition-timing-function: ease;
transition: all .4s;
}
body:not(.-is-sp) a:hover,
body:not(.-is-sp) button:hover,
body:not(.-is-sp) [type=button]:hover,
body:not(.-is-sp) [type=reset]:hover,
body:not(.-is-sp) [type=submit]:hover {
opacity: var(--transition-opacity);
} #container{
opacity: 0;
}
body.appear #container{
animation-name:PageAnimeAppear;
animation-duration:1s;
animation-delay: 0.6s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes PageAnimeAppear{
0% {
opacity: 0;
}
100% {
opacity: 1;
}
} main.site-main{
margin-bottom: 130px;
} main.page_main{
margin-bottom: 80px;
}  .fade{
animation-name:fadeAnime;
animation-duration:2s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes fadeAnime{
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fadeTrigger{
opacity: 0;
}
.time01{
animation-delay: 1s;
}
.time02{
animation-delay: 2s;
} .fadeUp {
animation-name:fadeUpAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes fadeUpAnime{
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fadeUpTrigger{
opacity: 0;
} .fadeDown{
animation-name: fadeDownAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeDownAnime{
from {
opacity: 0;
transform: translateY(-50px);
}
to {
opacity: 1;
transform: translateY(0);
}
} .smooth{
animation-name: smoothAnime;
animation-duration: 1s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes smoothAnime{
from {
transform: translate3d(0, 5%, 0) skewY(0);
opacity:0;
}
to {
transform: translate3d(0, 0, 0) skewY(0);
opacity:1;
}
}
.fadeDownTrigger,
.smoothTrigger{
opacity: 0;
} .smooth_left{
animation-name: smoothAnime_left;
animation-duration: 1s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes smoothAnime_left{
from {
transform: translate3d(-15%, 0%, 0) skewY(0);
opacity:0;
}
to {
transform: translateX(0);
opacity:1;
}
}
.smoothTrigger_left{
opacity: 0;
} .smooth_right{
animation-name: smoothAnime_right;
animation-duration: 1s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes smoothAnime_right{
from {
transform: translate3d(15%, 0%, 0) skewY(0);
opacity:0;
}
to {
transform: translateX(0);
opacity:1;
}
}
.smoothTrigger_right{
opacity: 0;
} #g-nav li:nth-of-type(1) {
animation-delay: 0.2s;
}
#g-nav li:nth-of-type(2) {
animation-delay: 0.3s;
}
#g-nav li:nth-of-type(3) {
animation-delay: 0.4s;
}
#g-nav li:nth-of-type(4) {
animation-delay: 0.5s;
}
#g-nav li:nth-of-type(5) {
animation-delay: .6s;
}
#g-nav li:nth-of-type(6) {
animation-delay: .7s;
}
#g-nav li:nth-of-type(7) {
animation-delay: .8s;
}
#g-nav li:nth-of-type(8) {
animation-delay: .9s;
} .slide-in {
overflow: hidden;
display: inline-block;
}
.slide-in_inner {
display: inline-block;
} .leftAnime{
opacity: 0;
}
.slideAnimeLeftRight {
animation-name:slideTextX100;
animation-duration:1s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes slideTextX100 {
from {
transform: translateX(-100%); 
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
.slideAnimeRightLeft {
animation-name:slideTextX-100;
animation-duration:1s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes slideTextX-100 {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
} #loading{
background-color: var(--color-green-light);
position: fixed;
inset: 0;
z-index: 999999;
display: grid;
place-items: center;
} .header{
position: absolute;
z-index: 100;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: clamp(80px, 6.976744186vw, 120px);
padding: 0 clamp(0px, 3.125vw, 60px);
}
@media (max-width:1100px) {
.header{
padding: 0 clamp(0px, 2.7272727273vw, 30px);
}
}
.header > .brand{
flex: 0 0 auto;
}
.header > .brand > a{
display: flex;
align-items: center;
}
.header > .brand > a:hover{
opacity: 1;
}
.header > .brand > a > h1 img{
width: clamp(200px, 15.46875vw, 297px);
}
.header.fixed > .brand > a > h1 img{
width: clamp(200px, 11.4583333333vw, 220px);
transition: all .4s;
}
.header > nav{
flex: 1 1 0%;
display: flex;
justify-content: flex-end;
align-items: center;
gap: clamp(0px, 1.7441860465vw, 30px);
}
@media (max-width:900px) {
.header > nav{
display: none;
}
}
.header > nav > .nav{
display: flex;
align-items: center;
margin-left: clamp(14px, 1.3020833333vw, 25px);
padding: 0;
line-height: 1;
list-style: none;
gap: clamp(14px, 1.8229166667vw, 35px);
font: 700 var(--font-16)/1 var(--font-kaisei);
font-weight: bold;
color: var(--color-white);
letter-spacing: 0;
}
.header > nav > .nav > .nav_li{
display: flex;
margin: 0;
text-shadow: var(--text-shadow);
}
.nav_li.-typeA{
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
line-height: 1.25;
position: relative;
}
.header > nav > .nav > .nav_li > a{
display: flex;
justify-content: center;
text-decoration: none;
color: inherit;
white-space: nowrap;
font-size: var(--font-16);
font-weight: bold;
}
@media (max-width:1100px){
.header > nav > .nav > .nav_li > a{
font-size: var(--font-14);
}
}
.header > nav > .nav > .nav_action > .flx{
display: flex;
gap: clamp(14px, 1.9230769231vw, 23px);
}
.header > nav > .nav > .nav_action > .flx > .wrap{
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
border-left: 1px solid #fff;
padding-left: clamp(14px, 1.9230769231vw, 23px);
}
.header.fixed > nav > .nav > .nav_action > .flx > .wrap{
border-left: 1px solid #6ea1d0;
}
.header.fixed.story > nav > .nav > .nav_action > .flx > .wrap{
border-left: 1px solid #fff;
}
.header > nav > .nav > .nav_action > .flx > .wrap > a{
text-decoration: none;
color: inherit;
white-space: nowrap;
text-align: center;
font-size: var(--font-13);
font-weight: bold;
text-shadow: var(--text-shadow);
}
@media (max-width:1100px) {
.header > nav > .nav > .nav_action > .flx > .wrap > a{
font-size: var(--font-12);
}
}
.header > nav > .nav > .nav_action > .flx > .wrap > a > .nav_li{
margin-top: 5px;
}
.header.fixed > nav > .nav > .nav_action > .flx > .wrap > a > .nav_li{
margin: 0 0 7px;
} #header_fixed{
transition: all .4s;
}
#header_fixed.fixed{
position: fixed;
z-index: 999;
top: 0;
left: 0; background-image: url(//luli-mizube.com/wp-content/themes/luri/assets/img/haikei_header.jpg);
background-repeat: repeat;
width: 100%;
height: 75px;
transition: all .4s;
}
#header_fixed.story{
background: transparent;
}
@media (max-width:900px) {
#header_fixed.fixed{
background: transparent !important;
transition: all .4s;
}
}
@media (max-width:767px) {
.fixed.fade-out-bottom {
opacity: 0;
animation-name: fadeout-bottom;
animation-duration: 2s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
}
@keyframes fadein-bottom {
0% {
opacity: 0;
transform: translateY(0);
}
100% {
opacity: 1;
transform: translateY(20px);
}
}
} #webapp_cover{
display: none;
}
@media (max-width:900px) {
#webapp_cover {
display: block;
position: fixed;
z-index: 9999;
top: 0;
right: 0;
width: 25px;
transform: translateY(-50%) scale(2);
margin-right: 20px;
margin-top: 40px
} 
}
#menu_button {
width: 20px;
overflow: hidden;
}
#menu_checkbox {
display: none;
}
#menu_label {
position: relative;
display: block;
height: 20px;
cursor: pointer;
}
#menu_label:before,
#menu_label:after,
#menu_text_bar {
position: absolute;
left: 0;
width: 100%;
height: 2px;
background-color: #fff;
text-shadow: var(--text-shadow);
}
#menu_label.scrolled:before,
#menu_label.scrolled:after,
#menu_text_bar.scrolled {
background-color: var(--color-black);
}
#menu_label:before,
#menu_label:after {
content: "";
transition: 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55) left;
}
#menu_label:before {
top: 2px;
}
#menu_label:after {
top: 7px;
}
#menu_text_bar {
top: 12px;
}
#menu_text_bar:before {
content: "MENU";
position: absolute;
top: 10px;
right: 0;
left: 0;
color: #fff;
font-size: 5px;
font-weight: bold;
line-height: 3;
font-family: var(--font-kaisei);
text-shadow: var(--text-shadow);
text-align: center;
}
#menu_text_bar.scrolled:before{
color: var(--color-black);
}
#menu_checkbox:checked + #menu_label.active:before {
left: -20px;
}
#menu_checkbox:checked + #menu_label.active:after {
left: 2cm;
}
#menu_checkbox:checked + #menu_label #menu_text_bar:before {
animation: moveUpThenDown 0.8s ease 0.2s forwards,
shakeWhileMovingUp 0.8s ease 0.2s forwards,
shakeWhileMovingDown 0.2s ease 0.8s forwards;
}
@keyframes moveUpThenDown {
0% {
top: 0;
}
50% {
top: -15px;
}
100% {
top: -13px;
}
}
@keyframes shakeWhileMovingUp {
0% {
transform: rotateZ(0);
}
25% {
transform: rotateZ(-10deg);
}
50% {
transform: rotateZ(0deg);
}
75% {
transform: rotateZ(10deg);
}
100% {
transform: rotateZ(0);
}
}
@keyframes shakeWhileMovingDown {
0% {
transform: rotateZ(0);
}
80% {
transform: rotateZ(3deg);
}
90% {
transform: rotateZ(-3deg);
}
100% {
transform: rotateZ(0);
}
} #g-nav.panelactive{
position:fixed;
z-index: 999;
top: 0;
width:100%;
height: 100vh;
}
.circle-bg{
position: fixed;
z-index: 99;
width: 100px;
height: 100px;
border-radius: 50%;
background: #66cfeb;
transform: scale(0);
right:-50px;
top:-50px;
transition: all 1s;
}
.circle-bg.circleactive{
transform: scale(50);
} #g-nav-list{
display: none;
position: fixed;
z-index: 999; 
width: 100%;
height: 100vh;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
#g-nav.panelactive #g-nav-list{
display: block; 
} #g-nav ul {
opacity: 0;
width: 100%;
position: absolute;
z-index: 999;
top:50%;
left:50%;
transform: translate(-50%,-50%);
} #g-nav.panelactive ul {
opacity:1;
}
#g-nav.panelactive ul li{
animation-name:gnaviAnime;
animation-duration:1s;
animation-delay:.4s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes gnaviAnime{
0% {
opacity: 0;
}
100% {
opacity: 1;
}
} #g-nav li{
text-align: center; 
list-style: none;
}
#g-nav li a{
color: #333;
text-decoration: none;
padding:10px;
display: block;
text-transform: uppercase;
letter-spacing: 0.1em;
font-family: var(--font-kaisei);
font-weight: bold;
} .noContent {
margin: 50px 1em 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.noContent {
font-size: var(--font-15);
line-height: var(--leading-medium);
border: 1px solid var(--color-black);
border-radius: 5px;
padding: 20px 1em;
}
.noContent.-connection{
margin-top: clamp(60px, 6.25vw, 120px);
}
.noContent > .text {
text-align: center;
} .hide-area{
display: none;
}
.modaal-close{
right: 55px;
top: 15px;
}
.modaal-close:after, 
.modaal-close:before{
background:#ccc;	
}
.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
background:#666;
}
.modaal-outer-wrapper{
margin: 0 auto; max-width: 100%;
}
@media (max-width:500px) {
.modaal-content-container{
padding: 10px;
}
} #page-top {
position: fixed;
right: 30px;
z-index: 10;
opacity: 0;
transform: translateY(100px);
}
#page-top a{
display: flex;
justify-content:center;
align-items:center;
position: relative;
bottom: 0;
width: 25px;
height: 60px;
color: var(--color-black);
text-transform: uppercase; 
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
white-space: nowrap;
font-size: 12px;
transition:all 0.4s;
}
#page-top a:hover{
opacity: 1;
bottom: 5px;
}
#page-top a::after{
content:"";
position: absolute;
top:0;
right:0;
width: 1px;
height: 60px;
background: var(--color-black);
}
#page-top a::before {
content: "";
position: absolute;
top: 0;
right: -9px;
width: 1px;
height: 30px;
background: var(--color-black);
transform: skewX(31deg);
}
#box23 .-last{
display: none;
}
#scroll{
position: fixed;
left: 15px;
bottom: 20px;
z-index: 10;
animation:
circlemove 2s ease-in-out infinite,
cirlemovehide 2s ease-out infinite;
}
@keyframes circlemove{
0%{
bottom:40px;
}
100%{
bottom:-60px;
}
}
@keyframes cirlemovehide{
0%{
opacity:0
}
50%{
opacity:1;
}
80%{
opacity:0.9;
}
100%{
opacity:0;
}
}
#scroll p{
display: flex;
justify-content:center;
align-items:center;
width: 25px;
height: 60px;
color: var(--color-white);
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
white-space: nowrap;
font-size: 12px;
}
#scroll p::after{
content:"";
position: absolute;
top:0;
right:0;
width: 1px;
height: 60px;
background: var(--color-white);
}
#scroll p::before {
content: "";
position: absolute;
bottom: 0;
right: -9px;
width: 1px;
height: 30px;
background: var(--color-white);
transform: skewX(-30deg);
} #page-top.UpMove{
animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
from {
opacity: 0;
transform: translateY(100px);
}
to {
opacity: 1;
transform: translateY(0);
}
} #page-top.DownMove{
animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 1;
transform: translateY(100px);
}
} .footer_wave{
position: relative;
} .footer_wave > #waveCanvas{
position: absolute;
bottom: 0px;
left: 0;
width: 100%;
z-index: 1;
}
@media (max-width:767px) {
.footer_wave > #waveCanvas{
bottom: -1px;
}
} footer > .footer{ background-image: url(//luli-mizube.com/wp-content/themes/luri/assets/img/haikei_footer.jpg);
background-repeat: repeat;
position: relative;
}
footer > .footer > .content > .brand{
text-align: center;
padding: 30px 1em 0;
}
@media (max-width:767px) {
footer > .footer > .content > .brand{
padding-bottom: 15px;
}
}
footer > .footer > .content > .brand > a:hover{
opacity: 1;
}
footer > .footer > .content > .brand > a > .logo-txt{
font-size: var(--font-13);
color: var(--color-white);
font-weight: bold;
font-family: var(--font-kaisei);
margin-top: 10px;
}
footer > .footer > .menu > .nav{
display: flex;
justify-content: center;
gap:  clamp(16px, 5.2083333333vw, 100px);
margin: 40px 0;
}
@media (max-width:767px) {
footer > .footer > .menu > .nav{
padding: 0 1em;
margin: 20px 0 40px;
}
}
@media (max-width:560px) {
footer > .footer > .menu > .nav{ display: none;
}
}
footer > .footer > .menu > .address > p{
color: var(--color-white);
font-size:  var(--font-16);
line-height: 1.6;
text-align: center;
}
@media (max-width:767px) {
footer > .footer > .menu > .address > p{
font-size: 16px;
}
}
footer > .footer > .menu > .nav > .item > .list{
position: relative;
}
footer > .footer > .menu > .nav > .item > .list > .action{
color: var(--color-white);
font-size: var(--font-16);
font-weight: 500;
line-height: 2.2;
transition: all .4s;
}
@media (max-width:767px) {
footer > .footer > .menu > .nav > .item > .list > .action{
line-height: 2.7;
}
}
@media (max-width:560px) {
footer > .footer > .menu > .nav > .item > .list > .action{
font-size: 16px;
}
}
footer > .footer > .menu > .nav > .item > .list > .action:hover{ }
footer > .footer > .menu > .nav > .item > .list > .action::before{
content: "";
display: inline-block;
box-sizing: border-box;
width: 9px;
height: 9px;
border-style: solid;
border-width: 2px 2px 0 0;
border-color: var(--color-white);
transform: rotate(45deg);
margin-right: 20px;
margin-bottom: 2px;
transition: all .4s;
}
@media (max-width:767px) {
footer > .footer > .menu > .nav > .item > .list > .action::before{
margin-right: 15px;
}
}
footer > .footer > .menu > .nav > .item > .list > .action:hover:before{
transform: rotate(46deg) translateX(3px) translateY(-3px);
border-color: var(--color-white);
transition: all .4s;
}
footer > .footer > .menu > .address{
padding: 0 1em;
}
.menu > .copy{
color: var(--color-white);
text-align: center;
padding: 26px 0;
font-size: 13px;
}
@media (max-width:767px) {
.menu > .copy{
margin-bottom: 4.5em;
}
}
.sp_footer{
display: none;
}
@media (max-width:767px) {
.sp_footer{
display: block;
position: fixed;
display: -webkit-box !important;
display: -ms-flexbox !important;
display: flex !important;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 72px;
z-index: 100000;
align-items: flex-end;
}
.sp_footer-contact {
background-color: var(--color-blue);
width: 50%;
padding: 20px 0;
color: #fff;
text-align: center;
}
.sp_footer-contact > a {
color: #fff;
font-size: var(--font-20);
font-family: var(--font-kaisei);
font-weight: bold;
position: relative;
padding-left: 40px;
}
.sp_footer-contact > a > img {
position: absolute;
width: 55px;
height: auto;
left: -10px;
top: -5px;
}
.sp_footer-tel {
background: var(--color-black);
width: 50%;
padding: 20px 0;
color: #fff;
text-align: center;
}
.sp_footer-tel > a {
color: #fff;
font-size: var(--font-20);
font-family: var(--font-kaisei);
font-weight: bold;
position: relative;
padding-left: 40px;
}
.sp_footer-tel > a > img {
position: absolute;
width: 20px;
height: auto;
left: 5px;
top: 2px;
}
} footer > .footer > .menu > .sns{
margin-bottom: 25px;
padding: 0 1em 0em 4em;
display: flex;
justify-content: center;
align-items: center;
}
footer > .footer > .menu > .sns > .list > .item{
margin-bottom: 25px;
}
footer > .footer > .menu > .sns > .list > .item > a{
position: relative;
color: var(--color-white);
font-family: var(--font-poppins);
font-size: 15px;
}
footer > .footer > .menu > .sns > .list > .item > a > p >span{
font-family: var(--font-sans);
}
footer > .footer > .menu > .sns > .list > .item > a:hover{
opacity: 1;
transition: all .4s;
}
footer > .footer > .menu > .sns > .list > .item.-insta > a::before{
content: "";
position: absolute;
background-image: url(//luli-mizube.com/wp-content/themes/luri/assets/img/sns-instagram-icon.png);
background-size: cover;
top: -5px;
left: -40px;
width: 24px;
height: 24px;
transition: background-image 0.5s ease;
}
footer > .footer > .menu > .sns > .list > .item.-youtube > a::before{
content: "";
position: absolute;
background-image: url(//luli-mizube.com/wp-content/themes/luri/assets/img/sns-youtube-icon.png);
background-size: cover;
top: -2px;
left: -40px;
width: 26px;
height: 18px;
transition: background-image 0.5s ease;
}
@media (min-width: 768px) {
footer > .footer > .menu > .sns > .list > .item.-insta > a:hover::before{
background-image: url(//luli-mizube.com/wp-content/themes/luri/assets/img/sns-instagram-icon-hover.png);
}
footer > .footer > .menu > .sns > .list > .item.-youtube > a:hover::before{
background-image: url(//luli-mizube.com/wp-content/themes/luri/assets/img/sns-youtube-hover-icon.png);
}
}
@media (max-width:560px) {
footer > .footer > .menu > .sns{
margin: 25px 0 20px;
}
} .archive-container > .pagination {
margin-top: clamp(47px, 5.5147058824vw, 75px);
text-align: center;
}
.archive-container > .pagination > .wp-pagenavi > .current{
border: 1px solid var(--color-brown);
color: var(--color-white);
background-color: var(--color-brown);
padding: 5px 8px;
margin-right: 5px;
}
.archive-container > .pagination > .wp-pagenavi > .page{
border: 1px solid var(--color-brown);
color: var(--color-brown);
padding: 5px 8px;
margin-right: 5px;
}
.archive-category {
display: flex;
flex-wrap: wrap;
gap: 0.5em;
font-size: var(--font-13);
line-height: 1.25;
}
.archive-category > li > a {
display: block;
padding: 0.375em 1em;
border: 2px solid var(--color-brown);
color: var(--color-brown);
}
.archive-category > li > a.-current {
background: var(--color-brown);
color: var(--color-white);
}
.c-row.-archive-list ,
.c-row.-single-aside {
--c-row-gutter-x: clamp(36px, 2.3958333333vw, 46px);
--c-row-gutter-y: clamp(40px, 2.6041666667vw, 50px);
}
.c-row {
display: flex;
flex-wrap: wrap; padding: 0;
list-style: none;
}
.c-row.-one > .col {
flex-basis: 33.3333333333%;
max-width: 33.3333333333%;
}
@media (max-width: 768px){
.c-row.-md-three > .col {
flex-basis: 50%;
max-width: 50%;
}
}
@media (max-width: 560px){
.c-row.-sm-two > .col {
flex-basis: 100%;
max-width: 100%;
}
}
.c-row > .col {
flex: 1 1 0%;
display: flex;
flex-direction: column;
padding: calc(var(--c-row-gutter-y, 0) / 2) calc(var(--c-row-gutter-x, 0) / 2);
}
.c-card {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
text-decoration: none;
line-height: 1;
color: inherit;
word-wrap: break-word;
}
a.c-card:hover{
opacity: 1 !important;
}
.c-card > .media {
aspect-ratio: 342/201;
overflow: hidden;
position: relative;
flex: 0 0 auto;
width: 100%;
margin: 0;
border-radius: 25px;
}
.c-card > .media > img {
width: 100%;
height: 100%; object-fit: cover;
transform: scale(1);
transition: .4s ease-in-out;
}
.c-card:hover > .media > img {
transform: scale(1.1);
-webkit-filter: brightness(120%);
filter: brightness(120%);
}
.c-card > .date {
flex: 1 1 0%;
}
.c-card.-archive-list > .date > .title{
margin-top: 0.625em;
font: 600 16px var(--font-sans);
line-height: 1.65;
text-align: justify;
word-break: break-all;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
display: -webkit-box;
-webkit-line-clamp: 2;
}
.c-card:hover.-archive-list > .date > .title{
color: var(--color-blue);
}
.archive_category{
display: flex;
margin-top: 10px;
}
.archive_category > li{
border: 1px solid var(--color-brown);
color: var(--color-brown);
font-size: var(--font-15);
padding: 0.375em 1em;
}
.archive_category > li + li{
margin-left: 5px;
}
.archive_category > li:first-of-type{
display: none;
}
.c-card.-archive-list > .date{
margin-top: 10px;
}
.c-card.-archive-list > .date > .flx{
display: flex;
align-items: center;
gap: 5px;
}
.c-card.-archive-list > .date > .flx > .term{
font-size: 16px;
border: 1px solid var(--color-black);
border-radius: 4px;
padding: 1px 15px 2px;
line-height: 1.5;
transition: .4s ease-in-out;
}
.c-card.-archive-list > .date > .event-date{
font-size: 15px;
color: var(--color-blue);
font-weight: bold;
margin-top: 9px;
}
.c-card.-archive-list > .date > .event-date > .-archive_eventIcon{
margin-right: 8px;
}
.tag {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 1.25em;
font-size: var(--font-10);
}
.tag.-page{
margin-top: 0;
}
.tag > .item{
display: inline-block;
}
.tag > .item > .inner > .link{
background: var(--color-green-light-d);
color: var(--color-green-light-c);
font-size: 12px;
line-height: 18px;
text-decoration: none;
display: inline-block;
padding: 3px 6px 5px 13px;
border-radius: 18px 0 0 18px;
}
.tag > .item > .inner > .link:hover{
opacity: 1;
background-color: var(--color-green-dark-b);
color: var(--color-white);
}  .c-card.-eventCard > .label{
position: absolute;
top: -30px;
right: 0px;
display: flex;
align-items: center;
text-align: center;
justify-content: center;
width: 5em;
height: 5em;
background: url(//luli-mizube.com/wp-content/themes/luri/assets/img/label-off.png)no-repeat center;
border-radius: 50%;
font-size: var(--font-10);
color: var(--color-white); z-index: 1;
line-height: 1.3;
}
.c-card.-eventCard > .label.-on{
background: url(//luli-mizube.com/wp-content/themes/luri/assets/img/label-on.png)no-repeat center;
border: 1px solid var(--color-blue);
color: var(--color-white);
}
.c-card.-eventCard > .label.-report{
background: url(//luli-mizube.com/wp-content/themes/luri/assets/img/label-off.png)no-repeat center;
border: 1px solid var(--color-black);
color: var(--color-white);
}
.c-card.-eventCard > .label.-unnecessary{
background: url(//luli-mizube.com/wp-content/themes/luri/assets/img/label-on.png)no-repeat center;
border: 1px solid var(--color-blue);
color: var(--color-white);
}
@media (max-width:560px) {
.c-card.-eventCard > .label{
font-size: var(--font-13);
}
} .action{
margin-top: clamp(40px, 4.1666666667vw, 80px);
text-align: center;
}
.action.-member{
margin-top: 40px;
padding: 0 1em;
line-height: 1.3;
}
.action.-kanren{
margin-top: clamp(15px, 1.5625vw, 30px);
margin-bottom: 10px;
}
.action > .btn{
position: relative;
text-decoration: none !important;
display: inline-block;
text-align: center;
background: transparent;
border-radius: 10px;
border: 1px solid var(--color-blue);
outline: none;
transition: all 0.2s ease;
}
.action > .btn:hover{
border-color:transparent;	
opacity: 1;
}
.action > .btn > span {
position: relative;
z-index: 2;
display: block;
padding: clamp(15px, 1.09375vw, 21px) clamp(90px, 5.9895833333vw, 115px) clamp(15px, 1.09375vw, 21px) clamp(120px, 7.7083333333vw, 148px);
font-size: var(--font-18);
font-weight: 400;
color: var(--color-blue);
background-color: var(--color-white);
border-radius: 10px;
transition: all 0.3s ease;
}
.pushRight:before {
content: "";
position: absolute;
z-index: 1;
top: 5px;
left: 5px;
width: 100%;
height: 100%;
border-radius: 10px;
background-color: var(--color-blue-dark-b);
}
.pushRight:hover span {
background-color: var(--color-blue-dark-b);
color: #fff;
transform: translate(4px, 4px);
}
.action > .btn > span::before{
content: "";
position: absolute;
top: 51%;
left: 25%;
width: 18px;
background-color: var(--color-blue-dark-b);
aspect-ratio: 1/1;
-webkit-mask: var(--icon-arrow-circle) no-repeat 50% 50%/contain;
mask: var(--icon-arrow-circle) no-repeat 50% 50%/contain;
transform: translateY(-50%);
transition: all .2s;
}
.action > .btn > span:hover:before{
background-color: var(--color-white);
transition: all .2s;
} .site-main > .top_story > .wrap > .content,
.site-main > .top_member > .wrap > .content,
.site-main > .top_instagram > .wrap > .content,
.site-main > .top_blog > .wrap > .content{
text-align: center;
padding-top: clamp(40px, 4.1666666667vw, 80px);
}
.message{
padding: 0 1em;
}
.message > h2{
font-size: 40px;
font-weight: bold;
font-family: var(--font-kaisei);
letter-spacing: 2.5px;
}
.message > p{
font-size: var(--font-16);
font-weight: bold;
font-family: var(--font-sans);
margin-top: 10px;
margin-bottom: clamp(30px, 3.125vw, 60px);
}
.message.inner > p{
margin-bottom: 0;
}
@media (max-width:560px) {
.message > h2{
font-size: 30px;
}
}  .map-cursor{
cursor: pointer;
} .map_txt{
margin-top: 1em;
display: none;
}
@media (max-width:767px) {
.map_txt{
display: block;
}
} .new-badge-wrapper {
position: relative;
display: inline-block;
}
.new-badge-wrapper > .new-badge {
position: absolute;
top: -20px;
left: -17px;
background-color: var(--color-black);
color: var(--color-white);;
font-size: 12px;
font-family: var(--font-kaisei);
font-weight: bold;
padding: 2px 5px 3px;
border-radius: 1px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.06);
}
.new-badge-wrapper.-lower > .new-badge{
top: -25px;
}
.new-badge-wrapper.-sp > .new-badge{
top: 1px;
left: -50px;
padding: 2px 3px 2px 5px;
}
.c-card.-archive-list > .date > .flx > .new-badge{
background-color: var(--color-black);
color: var(--color-white);;
font-size: 12px;
font-family: var(--font-kaisei);
font-weight: bold;
padding: 2px 5px 3px;
border-radius: 1px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.06);
}