@charset "UTF-8";

@media screen and (max-width: 1023px){ } @media screen and (max-width: 834px){ } @media screen and (max-width: 480px){ } @import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500&family=Noto+Sans+JP:wght@300;400;500&family=Shippori+Mincho:wght@400;500&display=swap"); :root {
--color-dark:    #2a2825;
--color-mid:     #6b6863;
--color-accent:  #c9a89f;
--color-light:   #e8e4dd;
--color-cream:   #f3f0ec;
--color-white:   #ffffff;
--color-line:    #06c755;
--font-en:       'Cormorant Garamond', serif;
--font-jp:       'Noto Sans JP', sans-serif;
--font-mincho:   'Shippori Mincho', serif;
} .loulou-page * { box-sizing: border-box; margin: 0; padding: 0; }
.loulou-page { font-family: var(--font-jp); color: var(--color-dark); }
.hero {
position: relative; width: 100%; min-height: 90vh;
background: var(--color-cream);
display: flex; align-items: center; justify-content: center;
overflow: hidden; padding: 80px 40px;
}
.hero::before {
content: ''; position: absolute; inset: 0;
background-image: url();
background-size: cover; background-position: center; opacity: 0.35;
}
.hero-inner { position: relative; z-index: 1; text-align: center; max-width: 700px; }
.hero-label { font-family: var(--font-en); font-size: 16px; letter-spacing: 0.3em; color: var(--color-accent); margin-bottom: 24px; text-transform: uppercase; }
.hero-title { font-family: var(--font-mincho); font-size: clamp(32px, 5vw, 56px); font-weight: 400; line-height: 1.6; color: var(--color-dark); margin-bottom: 20px; }
.hero-sub { font-size: 16px; letter-spacing: 0.2em; color: var(--color-mid); margin-bottom: 40px; }
.hero-btn { display: inline-block; padding: 14px 40px; border: 1px solid var(--color-dark); font-family: var(--font-en); font-size: 16px; letter-spacing: 0.2em; color: var(--color-dark); text-decoration: none; transition: all 0.3s; }
.hero-btn:hover { background: var(--color-dark); color: var(--color-white); }
.furusato { background: var(--color-dark); color: var(--color-white); padding: 60px 40px; text-align: center; }
.furusato-label { font-family: var(--font-en); font-size: 17px; letter-spacing: 0.4em; color: var(--color-accent); margin-bottom: 16px; text-transform: uppercase; }
.furusato-title { font-family: var(--font-en); font-size: clamp(24px, 3vw, 36px); font-weight: 300; letter-spacing: 0.15em; margin-bottom: 20px; }
.furusato-text { font-size: 16px; line-height: 2; color: rgba(255,255,255,0.7); max-width: 500px; margin: 0 auto 28px; }
.furusato-link { font-family: var(--font-en); font-size: 15px; letter-spacing: 0.2em; color: var(--color-accent); text-decoration: none; }
.furusato-link:hover { opacity: 0.7; }
.shop { padding: 100px 40px; background: var(--color-white); }
.section-header { text-align: center; margin-bottom: 60px; }
.section-label { font-family: var(--font-en); font-size: 17px; letter-spacing: 0.4em; color: var(--color-accent); margin-bottom: 12px; text-transform: uppercase; }
.section-title { font-family: var(--font-en); font-size: clamp(28px, 3vw, 40px); font-weight: 300; letter-spacing: 0.1em; color: var(--color-dark); }
.shop-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; max-width: 1100px; margin: 0 auto; }
@media (max-width: 768px) { .shop-grid { grid-template-columns: 1fr; } }
.shop-card { position: relative; aspect-ratio: 4/3; background: var(--color-light); overflow: hidden; cursor: pointer; }
.shop-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.shop-card:hover .shop-card-img { transform: scale(1.04); }
.shop-card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(42,40,37,0.7) 0%, transparent 60%); display: flex; flex-direction: column; justify-content: flex-end; padding: 32px; }
.shop-card-num { font-family: var(--font-en); font-size: 17px; letter-spacing: 0.3em; color: var(--color-accent); margin-bottom: 8px; }
.shop-card-title-en { font-family: var(--font-en); font-size: 24px; font-weight: 300; color: var(--color-white); margin-bottom: 4px; }
.shop-card-title-jp { font-size: 15px; color: rgba(255,255,255,0.7); margin-bottom: 4px; }
.shop-card-desc { font-size: 17px; color: rgba(255,255,255,0.6); line-height: 1.6; }
.shop-all { text-align: center; margin-top: 48px; }
.shop-all a { font-family: var(--font-en); font-size: 15px; letter-spacing: 0.3em; color: var(--color-dark); text-decoration: none; border-bottom: 1px solid var(--color-accent); padding-bottom: 4px; }
.features { background: var(--color-cream); padding: 100px 40px; }
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; max-width: 900px; margin: 0 auto; }
@media (max-width: 768px) { .features-grid { grid-template-columns: 1fr; gap: 32px; } }
.feature-item { text-align: center; }
.feature-num { font-family: var(--font-en); font-size: 48px; font-weight: 300; color: var(--color-accent); line-height: 1; margin-bottom: 16px; }
.feature-title { font-size: 16px; font-weight: 500; color: var(--color-dark); margin-bottom: 8px; line-height: 1.6; }
.feature-sub { font-size: 17px; color: var(--color-mid); line-height: 1.8; }
.howto { background: var(--color-white); padding: 100px 40px; }
.howto-steps { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 900px; margin: 0 auto; position: relative; }
.howto-steps::before { content: ''; position: absolute; top: 28px; left: 16%; right: 16%; height: 1px; background: var(--color-light); }
@media (max-width: 768px) { .howto-steps { grid-template-columns: 1fr; } .howto-steps::before { display: none; } }
.howto-step { text-align: center; padding: 0 20px; position: relative; }
.howto-step-num { width: 56px; height: 56px; border: 1px solid var(--color-accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-en); font-size: 17px; color: var(--color-accent); margin: 0 auto 24px; background: var(--color-white); position: relative; z-index: 1; }
.howto-step-title { font-size: 17px; font-weight: 500; color: var(--color-dark); margin-bottom: 12px; }
.howto-step-desc { font-size: 15px; color: var(--color-mid); line-height: 1.8; }
.howto-cta { text-align: center; margin-top: 56px; }
.btn-line { display: inline-flex; align-items: center; gap: 10px; padding: 16px 40px; background: var(--color-line); color: var(--color-white); text-decoration: none; font-size: 17px; font-weight: 500; border-radius: 4px; transition: opacity 0.3s; }
.btn-line:hover { opacity: 0.85; }
.voice { background: var(--color-cream); padding: 100px 40px; }
.voice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1000px; margin: 0 auto; }
@media (max-width: 768px) { .voice-grid { grid-template-columns: 1fr; } }
.voice-card { background: var(--color-white); padding: 36px 32px; }
.voice-mark { font-family: var(--font-en); font-size: 40px; color: var(--color-accent); line-height: 1; margin-bottom: 16px; opacity: 0.5; }
.voice-text { font-family: var(--font-mincho); font-size: 16px; line-height: 2; color: var(--color-dark); margin-bottom: 20px; }
.voice-author { font-size: 17px; color: var(--color-mid); letter-spacing: 0.05em; }
.contact { background: var(--color-dark); color: var(--color-white); padding: 100px 40px; text-align: center; }
.contact-label { font-family: var(--font-en); font-size: 17px; letter-spacing: 0.4em; color: var(--color-accent); margin-bottom: 24px; text-transform: uppercase; }
.contact-title { font-family: var(--font-mincho); font-size: clamp(24px, 3vw, 36px); font-weight: 400; line-height: 1.6; margin-bottom: 16px; }
.contact-sub { font-size: 16px; color: rgba(255,255,255,0.6); margin-bottom: 40px; }
.divider { text-align: center; padding: 20px 0 0; font-family: var(--font-en); font-size: 17px; letter-spacing: 0.4em; color: var(--color-accent); } .loulou-header-logo img {
width: 70px !important;
height: 70px !important;
} .loulou-header {
background: #ebe6e2 !important;
} .loulou-header-logo {
flex-shrink: 0;
} @media (max-width: 768px) {
.loulou-header-logo img {
width: 70px !important;
height: 70px !important;
}
.loulou-header-ig-label { display: none; }
}  .sidebar-menu-content {
background-color: #f3f0ec !important;
} .sidebar-menu-close {
color: #2a2825 !important;
background: transparent !important;
} .navi-menu-content {
background-color: #f3f0ec !important;
} .menu-mobile li,
.navi-menu-content li {
background-color: transparent !important;
border-bottom: 1px solid #e8e4dd !important;
box-shadow: none !important;
} .menu-mobile li a,
.navi-menu-content li a {
color: #2a2825 !important;
font-family: 'Cormorant Garamond', Georgia, serif !important;
letter-spacing: .12em !important;
font-size: 14px !important;
padding: 14px 20px !important;
text-transform: uppercase;
background: transparent !important;
}  .widget,
#sidebar .widget,
.sidebar-menu-content .widget {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 0 24px !important;
} .widgettitle,
.widget-title,
h2.widgettitle,
h3.widgettitle,
.widget .widgettitle,
.widget .widget-title,
#sidebar .widgettitle,
#sidebar .widget-title,
.sidebar .widgettitle,
.sidebar .widget-title,
.sidebar-menu-content .widgettitle,
.sidebar-menu-content .widget-title {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
color: #2a2825 !important;
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-size: 11px !important;
letter-spacing: .2em !important;
text-transform: uppercase !important;
border: none !important;
border-bottom: 1px solid #e8e4dd !important;
padding: 0 0 10px !important;
margin-bottom: 16px !important;
border-radius: 0 !important;
} .search-form,
.widget_search .search-form {
display: flex !important;
}
input[type="search"].search-field,
.widget_search input[type="search"],
.search-form input[type="search"] {
border: 1px solid #e8e4dd !important;
border-right: none !important;
background: #faf7f4 !important;
border-radius: 0 !important;
color: #2a2825 !important;
font-size: 13px !important;
padding: 8px 12px !important;
outline: none !important;
box-shadow: none !important;
flex: 1 !important;
height: auto !important;
}
button.search-submit,
input[type="submit"].search-submit,
.search-form input[type="submit"],
.widget_search input[type="submit"],
.search-form button[type="submit"] {
background: #2a2825 !important;
background-color: #2a2825 !important;
background-image: none !important;
color: #f3f0ec !important;
border: none !important;
border-radius: 0 !important;
font-family: 'Cormorant Garamond', Georgia, serif !important;
letter-spacing: .15em !important;
font-size: 11px !important;
padding: 8px 14px !important;
min-width: auto !important;
width: auto !important;
cursor: pointer !important;
-webkit-appearance: none !important;
} .widget_recent_entries ul,
.widget_recent_comments ul,
.widget ul {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
.widget_recent_entries ul li,
.widget_recent_comments ul li {
border: none !important;
border-bottom: 1px solid #e8e4dd !important;
padding: 10px 0 !important;
font-size: 13px !important;
line-height: 1.6 !important;
background: transparent !important;
box-shadow: none !important;
}
.widget_recent_entries ul li a {
color: #2a2825 !important;
text-decoration: none !important;
}
.widget_recent_entries ul li a:hover {
color: #c9a89f !important;
}
.widget_recent_comments ul li {
color: #6b6863 !important;
} #navi-footer-in {
text-align: center;
padding: 20px 0;
}
#navi-footer-in .footer-menu li {
display: inline-block;
margin: 0 12px;
}
#navi-footer-in .footer-menu li a {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 11px;
letter-spacing: .15em;
color: #6b6863;
text-decoration: none;
text-transform: uppercase;
} .shop-card .shop-card-overlay::after{content:"\008A73\007D30\00306F\003053\003061\003089\000020\002192";align-self:flex-start;margin-top:18px;padding:8px 20px;border:1px solid rgba(255,255,255,.85);border-radius:2px;color:#fff;font-family:"Shippori Mincho",serif;font-size:12px;letter-spacing:.08em;line-height:1;transition:background .25s ease,color .25s ease;}
.shop-card:hover .shop-card-overlay::after{background:rgba(255,255,255,.95);color:#3a3a3a;}   body:has(.loulou-article-page) #header-container {
display: none !important;
}
body:has(.loulou-article-page) #footer {
display: none !important;
}
body:has(.loulou-article-page) #sidebar {
display: none !important;
}
body:has(.loulou-article-page) .article-header {
display: none !important;
}
body:has(.loulou-article-page) .date-tags {
display: none !important;
}
body:has(.loulou-article-page) .sns-share {
display: none !important;
}
body:has(.loulou-article-page) .sns-follow {
display: none !important;
}
body:has(.loulou-article-page) .article-footer {
display: none !important;
}
body:has(.loulou-article-page) #breadcrumb {
display: none !important;
}
body:has(.loulou-article-page) .related-entry-heading {
display: none !important;
}
body:has(.loulou-article-page) .related-list {
display: none !important;
}
body:has(.loulou-article-page) #related-entry {
display: none !important;
}
body:has(.loulou-article-page) .pager-post-navi {
display: none !important;
}
body:has(.loulou-article-page) .toc {
display: none !important;
}
body:has(.loulou-article-page) #toc {
display: none !important;
}
body:has(.loulou-article-page) .toc-title {
display: none !important;
}
body:has(.loulou-article-page) .toc-content {
display: none !important;
}
body:has(.loulou-article-page) .toc-list {
display: none !important;
}
body:has(.loulou-article-page) .entry-content .toc {
display: none !important;
}
body:has(.loulou-article-page) .ez-toc-container {
display: none !important;
}
body:has(.loulou-article-page) .ez-toc-title-container {
display: none !important;
}
body:has(.loulou-article-page) .ez-toc-list {
display: none !important;
}
body:has(.loulou-article-page) #main {
width: 100% !important;
max-width: 100% !important;
float: none !important;
padding: 0 !important;
background: transparent !important;
}
body:has(.loulou-article-page) #content {
margin: 0 !important;
padding: 0 !important;
}
body:has(.loulou-article-page) #content-in {
padding: 0 !important;
max-width: 100% !important;
}
body:has(.loulou-article-page) .entry-content {
padding: 0 !important;
margin: 0 !important;
max-width: 100% !important;
}
body:has(.loulou-article-page) {
background: #f3f0ec !important;
}
body:has(.loulou-article-page) #container {
background: #f3f0ec !important;
} .loulou-article-page {
--loulou-brown: #4f392f;
--loulou-brown-deep: #3f2d24;
--loulou-beige: #f5efe7;
--loulou-cream: #fcf8f3;
--loulou-line: #dfd1c3;
--loulou-text: #44352d;
--loulou-muted: #8a776b;
--loulou-white: #ffffff;
background: var(--loulou-beige);
color: var(--loulou-text);
font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
line-height: 1.9;
}
.loulou-article-page *,
.loulou-article-page *::before,
.loulou-article-page *::after {
box-sizing: border-box;
}
.loulou-article-page h1,
.loulou-article-page h2,
.loulou-article-page h3,
.loulou-article-page p,
.loulou-article-page li,
.loulou-article-page a,
.loulou-article-page div,
.loulou-article-page span,
.loulou-article-page nav {
font-family: inherit;
}
.loulou-article-page a {
color: inherit;
text-decoration: none;
}
.loulou-article-shell {
min-height: 100%;
background: var(--loulou-beige);
}
.loulou-article-header {
max-width: 1120px;
margin: 0 auto;
padding: 28px 24px 18px;
}
.loulou-article-brand {
text-align: center;
letter-spacing: 0.22em;
font-size: 0.8rem;
color: var(--loulou-muted);
margin-bottom: 18px;
}
.loulou-article-nav {
display: flex;
justify-content: center;
gap: 26px;
flex-wrap: wrap;
font-size: 0.76rem;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.loulou-article-nav a {
color: var(--loulou-brown);
}
.loulou-article-hero {
background: linear-gradient(180deg, var(--loulou-brown) 0%, var(--loulou-brown-deep) 100%);
color: var(--loulou-white);
padding: 86px 24px 92px;
text-align: center;
}
.loulou-article-hero-inner {
max-width: 880px;
margin: 0 auto;
}
.loulou-article-eyebrow {
display: inline-block;
font-size: 0.72rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.78);
margin-bottom: 22px;
}
.loulou-article-title {
margin: 0;
font-size: clamp(1.7rem, 3vw, 2.7rem);
line-height: 1.55;
font-weight: 500;
letter-spacing: 0.04em;
}
.loulou-article-lead {
max-width: 780px;
margin: 24px auto 0;
color: rgba(255, 255, 255, 0.82);
font-size: 0.98rem;
}
.loulou-article-main {
padding: 52px 24px 88px;
}
.loulou-article-container {
max-width: 820px;
margin: 0 auto;
}
.loulou-article-card {
background: rgba(252, 248, 243, 0.82);
border: 1px solid rgba(223, 209, 195, 0.86);
padding: 42px 38px;
}
.loulou-article-body p,
.loulou-faq-box p,
.loulou-summary-box p,
.loulou-cta-box p {
margin: 0 0 1.45em;
font-size: 1.04rem;
line-height: 2.05;
}
.loulou-article-body h2,
.loulou-faq-box h3,
.loulou-summary-box h3,
.loulou-cta-box h3 {
color: var(--loulou-brown);
} .loulou-article-page h2,
.loulou-article-page h3 {
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 0 !important;
text-align: left !important;
position: static !important;
overflow: visible !important;
list-style: none !important;
font-weight: 600 !important;
}
.loulou-article-page h2::before,
.loulou-article-page h2::after,
.loulou-article-page h3::before,
.loulou-article-page h3::after {
content: none !important;
display: none !important;
}
.loulou-article-body h2 {
margin: 3.4rem 0 1.4rem;
font-size: 1.48rem;
line-height: 1.65;
letter-spacing: 0.04em;
padding-bottom: 0.55rem !important;
border-bottom: 1px solid rgba(79, 57, 47, 0.3) !important;
}
.loulou-article-body h3 {
margin: 2.2rem 0 0.9rem;
font-size: 1.1rem;
line-height: 1.75;
letter-spacing: 0.03em;
}
.loulou-faq-box h3 {
margin: 2.1rem 0 0.95rem;
padding-top: 1rem !important;
border-top: 1px solid rgba(79, 57, 47, 0.12) !important;
font-size: 1.08rem;
line-height: 1.75;
letter-spacing: 0.03em;
font-weight: 700 !important;
}
.loulou-faq-box h3:first-of-type {
margin-top: 0.2rem;
padding-top: 0 !important;
border-top: 0 !important;
}
.loulou-faq-box p {
margin-bottom: 1.8em;
}
.loulou-article-body li,
.loulou-faq-box li,
.loulou-summary-box li,
.loulou-cta-box li {
font-size: 1rem;
line-height: 2;
}
.loulou-point-box {
margin: 0 0 2.1rem;
padding: 1.15rem 1.2rem 1rem;
background: linear-gradient(180deg, #f9f0e8 0%, #fcf6ef 100%);
border: 1px solid rgba(165, 135, 116, 0.22);
border-radius: 10px;
}
.loulou-point-box-title {
margin-bottom: 0.8rem;
color: var(--loulou-brown);
font-size: 1rem;
line-height: 1.7;
font-weight: 700;
letter-spacing: 0.03em;
}
.loulou-point-box ul {
margin: 0;
padding-left: 1.15rem;
}
.loulou-point-box li {
margin-bottom: 0.45em;
font-size: 1rem;
line-height: 1.9;
}
.loulou-cta-box p:last-child,
.loulou-summary-box p:last-child,
.loulou-faq-box p:last-child,
.loulou-article-body p:last-child {
margin-bottom: 0;
}
.loulou-article-body ul,
.loulou-faq-box ul,
.loulou-summary-box ul,
.loulou-cta-box ul {
margin: 0 0 1.4em;
padding-left: 1.2em;
}
.loulou-article-body li,
.loulou-faq-box li,
.loulou-summary-box li,
.loulou-cta-box li {
margin-bottom: 0.55em;
}
.loulou-article-section {
margin-top: 34px;
background: var(--loulou-white);
border: 1px solid rgba(223, 209, 195, 0.95);
padding: 30px 28px;
}
.loulou-section-label {
font-size: 0.68rem;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--loulou-muted);
margin-bottom: 12px;
}
.loulou-box-title {
margin: 0 0 18px;
font-size: 1.35rem;
line-height: 1.6;
color: var(--loulou-brown);
}
.loulou-cta-box .loulou-box-title {
font-size: 1.48rem;
}
.loulou-faq-box .loulou-box-title {
font-size: 1.42rem;
}
@media (max-width: 768px) {
.loulou-article-header {
padding: 22px 18px 14px;
}
.loulou-article-nav {
gap: 14px;
font-size: 0.7rem;
letter-spacing: 0.14em;
}
.loulou-article-hero {
padding: 64px 18px 72px;
}
.loulou-article-main {
padding: 32px 16px 60px;
}
.loulou-article-card {
padding: 28px 20px;
}
.loulou-article-section {
padding: 24px 20px;
}
.loulou-point-box {
padding: 1rem 1rem 0.9rem;
}
}