:root{--swl-pad_lp:2vw;--swl-pad_lp_post:2vw}.lp-content{--article_size:var(--swl-lp_content_width,900px);box-sizing:content-box;margin:0 auto;padding:0 var(--swl-pad_lp)}.lp-content .post_content>h2{margin-left:calc(0px - var(--swl-pad_lp_post));margin-right:calc(0px - var(--swl-pad_lp_post))}.lp-content__title{font-size:2em;margin-top:var(--swl-pad_lp_post);text-align:center}.lp-thumb{margin:0}.lp-thumb__img{display:block;width:100%}.lp-content__inner{margin:0 auto;max-width:calc(var(--swl-lp_content_width, 900px) + var(--swl-pad_lp_post)*2);position:relative}.-style-border .lp-content__inner{box-shadow:0 0 0 1px var(--color_border)}.-style-shadow .lp-content__inner{box-shadow:4px 0 4px -4px var(--swl-color_shadow),-4px 0 4px -4px var(--swl-color_shadow)}.lp-content__postContent{margin-bottom:0;padding:0 var(--swl-pad_lp_post)}.lp-content__postContent:first-child{margin-top:0}.lp-content:not(.-style-no){--swl-pad_lp_post:3vw}.lp-content:not(.-style-no) .lp-content__inner{background:#fff;color:#000}.lp-content:not(.-style-no) .alignfull{left:calc(0px - var(--swl-pad_lp_post));width:calc(100% + var(--swl-pad_lp_post)*2)}.lp-content.-style-no .swell-block-fullWide__inner.l-article{--swl-fw_inner_pad:calc(var(--swl-pad_lp) + var(--swl-pad_lp_post))}.lp-content:not(.-style-no) .swell-block-fullWide__inner.l-article{--swl-fw_inner_pad:var(--swl-pad_lp_post)}.swell-block-fullWide__inner.l-container{--swl-fw_inner_pad:var(--swl-pad_lp_post,0px)}@media (min-width:600px){:root{--swl-pad_lp:16px;--swl-pad_lp_post:16px}.lp-content:not(.-style-no){--swl-pad_lp_post:40px}.lp-content.-style-no .swell-block-fullWide__inner.l-article,.lp-content:not(.-style-no) .swell-block-fullWide__inner.l-article{--swl-fw_inner_pad:0}}@media (min-width:960px){.lp-content:not(.-style-no) .alignwide{left:calc(0px - var(--swl-pad_lp_post)/2);width:calc(100% + var(--swl-pad_lp_post))}}

:root{
--bg:#FAF7F2; /* 生成り */
--text:#3B2F2F; /* 濃いブラウン */
--muted:#6B5B53; /* 補助文字色 */
--beige:#EFE7DA; /* カード背景 */
--beige-2:#F2ECE4; /* セクション区切り */
--olive:#6B8E23; /* CTA & アクセント */
--olive-2:#A3B18A; /* ホバーなど */
--line:#E3D8C8; /* 枠線 */
--shadow: 0 8px 24px rgba(59,47,47,.08);
--radius: 16px;
}
html,body{height:100%;}
body{
margin:0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
color:var(--text); background:var(--bg); line-height:1.7;
}
.container{max-width:1120px; margin:0 auto; padding:0 20px;}
header{
position:sticky; top:0; z-index:20; background:rgba(250,247,242,.9); backdrop-filter: blur(6px);
border-bottom:1px solid var(--line);
}
.brand img {
    height: 50px;
}
.nav{display:flex; align-items:center; justify-content:space-between; height:99px;}
.brand{font-weight:800; letter-spacing:.4px;}
.brand small{font-weight:600; color:var(--muted); font-size:.8rem;}
nav ul{display:flex; gap:20px; list-style:none; padding:0; margin:0;}
nav a{color:var(--text); text-decoration:none; font-weight:600; padding:8px 10px; border-radius:10px;}
nav a:hover{background:var(--beige);}


/* Hero */
.hero{padding:64px 0;}
.hero-wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center;}
.hero h1{font-size:clamp(28px, 3.2vw, 44px); line-height:1.25; margin:.2em 0 .4em;}
.sub{color:var(--muted); font-size:1.04rem;}
.cta{display:flex; gap:12px; margin-top:22px; flex-wrap:wrap;}
.btn{appearance:none; border:0; cursor:pointer; font-weight:700; border-radius:999px; padding:12px 18px; box-shadow: var(--shadow);}
.btn-primary{background:var(--olive); color:#fff;}
.btn-primary:hover{background:#5f7f1f;}
.btn-ghost{background:#fff; color:var(--olive); border:1px solid var(--olive);}
.btn-ghost:hover{background:#fff; border-color:#5f7f1f; color:#5f7f1f;}
.hero-art{background:linear-gradient(180deg, rgba(163,177,138,.18), rgba(239,231,218,.8));
border:1px dashed var(--olive-2); border-radius:var(--radius); aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; color:var(--muted);
}
.hero-art small{display:block; opacity:.8}


/* Features */
.features{padding:56px 0 20px}
.features-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.feature{background:var(--beige); border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
.feature h3{margin:0 0 6px; font-size:1.05rem}


/* Popular articles */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:18px}
.card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
.thumb{background:var(--beige); height:160px; display:flex; align-items:center; justify-content:center; color:var(--muted)}
.card .body{padding:14px}
.card a{display:inline-block; margin-top:6px; color:var(--olive); font-weight:700; text-decoration:none}
.card a:hover{opacity:.9}


/* Article -> Product */
.pair{display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:stretch}
.pair .box{background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden}
.pair .box .top{height:140px; background:var(--beige); display:flex; align-items:center; justify-content:center; color:var(--muted)}
.pair .box .inner{padding:14px}
.pair .arrow{display:flex; align-items:center; justify-content:center; color:var(--olive); font-weight:800}


/* Products */
.products{padding:56px 0}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.prod{background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
.prod .ph{height:200px; background:repeating-linear-gradient(45deg, #efe7da, #efe7da 12px, #f6f0e7 12px, #f6f0e7 24px); display:flex; align-items:center; justify-content:center; color:var(--muted)}
.prod .inner{padding:14px}


/* Fan / Social */
.fan{background:var(--beige-2); padding:44px 0}
.sns{display:flex; gap:12px; flex-wrap:wrap;}
.sns a{display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:#fff; background:var(--olive); padding:10px 14px; border-radius:12px; font-weight:700}


.notice{padding:36px 0}
.note{background:#fff; border:1px solid var(--line); border-left:6px solid var(--olive); border-radius:12px; padding:16px; box-shadow:var(--shadow)}
a.btn.btn-primary {
    background: #17a38b;
}
.postid-2121 section.hero {
    position: relative;
    padding: 0 0 100px 0;
}
.postid-2121 section.hero:before {
    background: url(../../../../assets/img/bint.webp) 0 0 no-repeat;
    background-size: cover;
    padding: 0 0 100px 0;
    backdrop-filter: blur(10px);
    content: "";
    display: block;
    width: 100%;
    height: 590px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
animation:blur 1s ease-in-out forwards;
}
@keyframes blur{
  0%{filter:blur(30px);}
  100%{filter:none;}
}

.postid-2121 .lp-content{margin: 0;padding: 0}
.postid-2121 .lp-content__postContent:first-child{margin: 0;padding: 0}
section.hero .pill, section.hero h1, section.hero .sub {
    color: #fff;
}
article.prod .ph {
    overflow: hidden;
    height: 324px;}
.prod a.btn.btn-primary {
    margin-top: 10px;
    margin-left: auto;
}
section.hero .pill, section.hero h1, section.hero .sub{
    animation: fadeIn 1s ease 1s 1 normal backwards;
    display: block;
}
 
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.thumb {
    overflow: hidden;
}
.postid-2121 .header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: transparent;
    backdrop-filter: blur(6px);
    border-bottom: 0;
    color: #fff;
}
.postid-2121 .header a,.postid-2121 .brand small{color: #fff}
.postid-2121 .hero-wrap {
    margin: 100px auto 50px;
}
.pair .top img {
    width: 100%;
    object-fit: cover;
    height: 100%;
}
.pair .box .top {
    height: 465px;
    overflow: hidden;
}
.pair a.btn.btn-ghost {
    display: block;
    margin: 5px 0 0 auto;
    width: 132px;
    text-align: center;
}
.pair a.btn.btn-primary {
    display: block;
    margin: 5px 0 0 auto;
    width: 170px;
    text-align: center;
}
.section-head h2 {
    font-size: 38px;
    letter-spacing: 0.2rem;
    font-family: "Meiryo";
    margin: 40px 0 0 0;
    line-height: 1;
}
.box.box2 .top a {
    height: 100%;
}
.section-head span.pill {
    text-transform: capitalize;
    font-size: 23px;
    font-family: serif;
    color: #84acad;
    margin-bottom: 40px;
    display: block;
    font-style: italic;
    letter-spacing: 0.1rem;
}
.features {
    padding: 56px 0 80px;
}
footer {
    background: #747070;
    color: #fff;
    padding: 40px 0;
}
footer a{
	color: #fff;
}
.sns a {
    background: #17a38b;}
.section-head .summary {
    text-align: left;
    font-size: 17px;
    line-height: 2.5;
    letter-spacing: 0.1rem;
    margin: 10px 0 53px;
    font-family: serif;
    color: #666;
}
a,img{transition: all .3s;}
.card .thumb img:hover ,.pair img:hover,.prod img:hover{
    transform: scale(1.05);
}

@media screen and (max-width: 1400px) {
.postid-2121 section.hero:before {
    background: url(../../../../assets/img/bint.webp) top right no-repeat;
    background-size: cover;
    padding: 0 0 100px 0;
    backdrop-filter: blur(10px);
    content: "";
    display: block;
    width: 100%;
    height: 590px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
}

@media screen and (max-width: 767px) {
.features-grid {
    display: flex;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    flex-wrap: wrap;
}
article.prod {
    width: 100%;
}
article.prod .ph a {
    width: 100%;
}
article.prod .ph img {
    width: 100%;
}
article.prod .ph {
    overflow: hidden;
    height: 59vw;
}
.postid-2121 section.hero:before{height:505px}
.hero-wrap {
    display: block;
}
.feature {
    width: 100%;
}
.pair .box .top {
    height: 52vw;
}
.cards {
    display: flex;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 18px;
    flex-wrap: wrap;
}
.thumb {
    height: 52vw;
}
.pair {
    display: flex;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: stretch;
    flex-wrap: wrap;
}
.pair .box {
    width: 100%;
}
.grid-3 {
    display: flex;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    flex-wrap: wrap;
}
}

@media screen and (max-width: 600px) {
.postid-2121 section.hero {
    padding: 0 0 0px 0;
}
.section-head h2 {
    font-size: 26px;
    line-height: 1.4;
}
.nav {
    display: flex
;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    flex-wrap: wrap;
}
nav {
    display: block;
    margin-left: auto;
}
}