/* 発酵LabCoo — Ameba Ownd「belle」テーマの見た目を再現（2026/6/8 アーカイブより） */
html{font-size:62.5%;-webkit-text-size-adjust:100%}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:#fff;color:#111;font-family:"Helvetica neue",Arial,Roboto,"Droid Sans","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif;font-size:1.4rem;line-height:1.8;word-wrap:break-word}
h1,h2,h3,h4,p,ul,ol{margin:0}
a{color:#b38d19;text-decoration:none}
a:visited{color:#d9c68c}
a:hover{color:#e8dcba}
img{max-width:100%;height:auto;vertical-align:top;border:0}
.u-font{font-family:Verdana,Geneva,sans-serif}

/* ---------- header ---------- */
.header{position:relative;z-index:2}
.header__inner{position:relative;padding-bottom:60px;border-color:#e6e6e6}
.site-icon{text-align:center;padding:40px 0}
.home .site-icon{padding:60px 0}
.site-icon img{width:200px;height:auto}  /* ロゴ（トップ以外） */
.site-icon a{display:inline-block}
.home .site-icon img{width:320px;height:auto}  /* トップページのロゴ */
.global-nav{position:absolute;bottom:0;left:0;width:100%;height:60px;text-align:center;white-space:nowrap}
.global-nav__list{list-style:none;margin:0;padding:0 20px;overflow-x:auto;white-space:nowrap}
.global-nav__item{display:inline-block;padding:10px 0;margin:0 18px;font-size:1.4rem;position:relative}
.global-nav__item>a{display:inline-block;height:40px;line-height:40px;color:#111;font-family:Verdana,Geneva,sans-serif}
.global-nav__item>a:visited{color:#111}
.global-nav__item:hover>a,.global-nav__item--active>a{opacity:.6}
.global-nav__item--active>a{position:relative;cursor:default}
.global-nav__item--active>a::after{content:"";position:absolute;bottom:0;left:0;width:100%;border-bottom:1px solid #111}
.header__icon{display:none}
.nav-overlay{display:none}

/* ---------- keyvisual ---------- */
.keyvisual__image{position:relative;overflow:hidden;background:#eee 50% 50%/cover no-repeat}
.keyvisual__image::after{content:"";display:block;padding-top:43.4%}

/* ---------- main ---------- */
.page__main{max-width:720px;margin:0 auto;padding:80px 11% 50px;box-sizing:content-box}
.grid{padding:20px 0;margin:0 -20px}
.grid::after{content:"";display:table;clear:both}
.page__main>.grid:first-child{padding-top:0}
.page__main>.grid:last-child{padding-bottom:0}
.col{float:left;padding:0 20px}
.col1-1{width:100%}.col1-2{width:50%}.col1-3{width:33.333%}
.col>*{margin-top:40px}
.col>:first-child{margin-top:0}

/* titles */
.heading-lv1{text-align:center}
.heading-lv1__text{font-size:2.4rem;line-height:1.6;font-weight:700;font-family:Verdana,Geneva,sans-serif}
.heading-lv2{text-align:center}
.heading-lv2__text{font-size:1.6rem;font-weight:400;border-top:1px solid #e6e6e6;font-family:Verdana,Geneva,sans-serif;line-height:1.8}
.heading-lv2__text span{display:inline-block;border-top:3px solid #111;margin-top:-1px;padding-top:10px}

/* text block */
.txt{font-size:1.4rem;line-height:1.8}
.txt h1{font-size:2.8rem;line-height:1.6;font-weight:700}
.txt h2{font-size:2.2rem;line-height:1.6;font-weight:700;margin-top:1.4em}
.txt h2:first-child{margin-top:0}
.txt h3{font-size:1.8rem;line-height:1.6;font-weight:700}
.txt ul,.txt ol{padding-left:1.5em}
.txt b,.txt strong{font-weight:700}

/* image block */
.img{text-align:center}
.img--left{text-align:left}.img--right{text-align:right}
.img--fit img{width:100%}
.img a{display:block}
.img--half img{width:50%}  /* Instagramマーク */

/* html block */
.block-html{text-align:center}

/* map */
.map iframe{width:100%;height:300px;border:0;display:block}

/* divider */
.divider{border:0;border-top:1px solid #e6e6e6;margin:0}

/* quote (OGP card) */
.ogp{border:1px solid #e6e6e6}
.ogp a{display:flex;color:#111}
.ogp a:visited{color:#111}
.ogp__img{flex:0 0 33%;background:#f5f5f5 50% 50%/cover no-repeat;min-height:120px}
.ogp__body{flex:1;padding:15px 20px;min-width:0}
.ogp__title{font-weight:700;font-size:1.4rem}
.ogp__text{font-size:1.2rem;color:#585858;margin-top:5px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ogp__site{font-size:1.2rem;color:#888;margin-top:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* blog list (grid) */
.blog-list{margin:0 -20px}
.blog-list::after{content:"";display:table;clear:both}
.blog-item{float:left;width:33.3333%;padding:0 20px;margin-top:40px}
.blog-item:nth-child(-n+3){margin-top:0}
.blog-item:nth-child(3n+1){clear:both}
.blog-item__img{margin-bottom:16px;position:relative;overflow:hidden;background:#f5f5f5}
.blog-item__img::after{content:"";display:block;padding-top:100%}
.blog-item__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.blog-body__date{font-size:1.2rem;display:block;color:#888}
.blog-body__title{margin-top:5px;font-size:1.4rem;font-weight:400;color:#111}
.blog-body__text{font-size:1.2rem;margin-top:7px;color:#585858}

/* ---------- footer ---------- */
.shop-footer{text-align:center;padding:5px 0}
.shop-footer a{font-size:1rem;color:rgba(17,17,17,.5);margin:0 8px}
.footer__inner{text-align:center;font-size:1.2rem;border-top:1px solid #e6e6e6;padding:0 10px 20px}
.footer__copyright{margin-top:20px;padding:0 20px}
.footer__copyright small{color:#888;font-size:1.2rem;font-family:Verdana,Geneva,sans-serif}

/* ---------- 801–1200px ---------- */
@media only screen and (min-width:801px) and (max-width:1200px){
  .blog-item{width:50%}
  .blog-item:nth-child(-n+3){margin-top:40px}
  .blog-item:nth-child(-n+2){margin-top:0}
  .blog-item:nth-child(3n+1){clear:none}
  .blog-item:nth-child(2n+1){clear:both}
}

/* ---------- mobile ---------- */
@media only screen and (max-width:800px){
  .header__inner{border-top:1px solid #eee;margin-top:40px;padding-bottom:0}
  .site-icon,.home .site-icon{position:absolute;top:-42px;width:100%;padding:8px 60px;z-index:1}
  .site-icon img{width:auto;height:24px}
  .header__icon{display:inline-block;position:absolute;top:-37px;left:20px;height:30px;width:30px;padding:0;border:0;background:none;cursor:pointer;z-index:101;color:#111;font-size:22px;line-height:30px}
  /* トップページのロゴ：スマホではメニューバーの下に中央配置 */
  .home .header__inner{padding-top:0}
  .home .site-icon{position:static;padding:24px 0}
  .home .site-icon img{width:240px;max-width:100%;height:auto}
  .global-nav{position:static;height:auto}
  .global-nav__list{position:fixed;top:0;left:-230px;width:230px;height:100%;padding:0;background:#fff;border-right:1px solid #eee;overflow-y:auto;transition:left .1s ease-in;z-index:110;white-space:normal}
  .nav-open .header{z-index:120}
  .nav-open .global-nav__list{left:0}
  .nav-open .nav-overlay{display:block;position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:105}
  .global-nav__item{display:block;margin:0;padding:0;width:100%;border-bottom:1px solid #eee}
  .global-nav__item>a{display:block;height:50px;line-height:50px;padding:0 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .global-nav__item--active>a::after{display:none}
  .keyvisual__image::after{padding-top:50%}
  .page__main{padding:30px 20px 70px}
  .grid{padding:15px 0;margin:0}
  .col{float:none;width:100%;padding:0}
  .col>*{margin-top:30px}
  .col+.col{margin-top:30px}
  .blog-list{margin:0}
  .blog-item,.blog-item:nth-child(n){float:none;width:100%;padding:0;margin-top:30px;clear:none}
  .blog-item:first-child{margin-top:0}
  .blog-item__img{margin-bottom:15px}
  .ogp__img{flex-basis:30%}
}