/* 本文の背景の模様＝メインの色をマスクで切り抜いてうすく敷く（白いカード・色付きの区切りの上には出ない） */
.has-pat main{position:relative;isolation:isolate}
.has-pat main::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-color:var(--main);
  -webkit-mask-repeat:repeat;mask-repeat:repeat;-webkit-mask-size:var(--pat-size,80px);mask-size:var(--pat-size,80px);
  -webkit-mask-image:var(--pat);mask-image:var(--pat)}
.pat-light main::before{opacity:.05}
.pat-normal main::before{opacity:.09}
.pat-strong main::before{opacity:.15}
/* 模様を敷いたページでは、カードの部品の地の色（.sec.alt）を透かす＝模様が見える（v2.1） */
body.has-pat .sec.alt{background:transparent}
/* 暗い色の帯（ヘッダー）のテーマ＝スマホのメニューの三本線とメニューを白い字にする（v2.6） */
@media (max-width:768px){
  body:is(.theme-izakaya,.theme-ramen,.theme-realestate,.theme-auto,.theme-fishery,.theme-tech,.theme-fitness,.theme-pixel) .navbtn span,
  body:is(.theme-izakaya,.theme-ramen,.theme-realestate,.theme-auto,.theme-fishery,.theme-tech,.theme-fitness,.theme-pixel) .navbtn span::before,
  body:is(.theme-izakaya,.theme-ramen,.theme-realestate,.theme-auto,.theme-fishery,.theme-tech,.theme-fitness,.theme-pixel) .navbtn span::after{background:#fff}
  body:is(.theme-izakaya,.theme-ramen,.theme-realestate,.theme-auto,.theme-fishery,.theme-tech,.theme-fitness,.theme-pixel) .nav{background:var(--main);border-bottom-color:var(--accent)}
  body:is(.theme-izakaya,.theme-ramen,.theme-realestate,.theme-auto,.theme-fishery,.theme-tech,.theme-fitness,.theme-pixel) .nav a{border-bottom-color:rgba(255,255,255,.15)}
}
/* 見出しのバナー画像（v2.2）＝写真の上にうすい影を重ねて、字を白で読ませる。テーマの色帯より強く効かせる */
body .page-head.has-img{position:relative;background-color:#333;background-size:cover;background-position:center;color:#fff;padding:72px 0;border:0;border-radius:0}
body .page-head.has-img::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.15))}
body .page-head.has-img .wrap{position:relative}
body .page-head.has-img h1{color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.45);font-size:2rem}
@media (max-width:640px){body .page-head.has-img{padding:48px 0}body .page-head.has-img h1{font-size:1.5rem}}

.pat-paw{--pat-size:90px;--pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cg transform='translate(18 20) rotate(-20)'%3E%3Cellipse cx='0' cy='6' rx='7' ry='6'/%3E%3Ccircle cx='-8' cy='-4' r='3'/%3E%3Ccircle cx='-3' cy='-9.5' r='3'/%3E%3Ccircle cx='3' cy='-9.5' r='3'/%3E%3Ccircle cx='8' cy='-4' r='3'/%3E%3C/g%3E%3Cg transform='translate(58 58) rotate(25)'%3E%3Cellipse cx='0' cy='6' rx='7' ry='6'/%3E%3Ccircle cx='-8' cy='-4' r='3'/%3E%3Ccircle cx='-3' cy='-9.5' r='3'/%3E%3Ccircle cx='3' cy='-9.5' r='3'/%3E%3Ccircle cx='8' cy='-4' r='3'/%3E%3C/g%3E%3C/svg%3E")}
.pat-dots{--pat-size:28px;--pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='5' cy='5' r='2.5'/%3E%3Ccircle cx='15' cy='15' r='2.5'/%3E%3C/svg%3E")}
.pat-stripe{--pat-size:24px;--pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M-5 5L5 -5M0 20L20 0M15 25L25 15' stroke='black' stroke-width='4'/%3E%3C/svg%3E")}
.pat-check{--pat-size:40px;--pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect width='20' height='20'/%3E%3Crect x='20' y='20' width='20' height='20'/%3E%3C/svg%3E")}
.pat-leaf{--pat-size:90px;--pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cellipse cx='20' cy='20' rx='11' ry='5' transform='rotate(-35 20 20)'/%3E%3Cellipse cx='60' cy='60' rx='11' ry='5' transform='rotate(35 60 60)'/%3E%3C/svg%3E")}
.pat-star{--pat-size:70px;--pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cpolygon points='20,8 23,17 32,17 25,23 28,32 20,26 12,32 15,23 8,17 17,17'/%3E%3Cpolygon points='60,48 62,54 68,54 63,58 65,64 60,60 55,64 57,58 52,54 58,54'/%3E%3C/svg%3E")}
.pat-heart{--pat-size:70px;--pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cpath d='M20 30C8 22 8 12 14 11C17 10 20 13 20 15C20 13 23 10 26 11C32 12 32 22 20 30Z'/%3E%3Cpath d='M60 70C48 62 48 52 54 51C57 50 60 53 60 55C60 53 63 50 66 51C72 52 72 62 60 70Z'/%3E%3C/svg%3E")}
.pat-wave{--pat-size:60px;--pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20'%3E%3Cg fill='none' stroke='black' stroke-width='1.5'%3E%3Ccircle cx='20' cy='20' r='18'/%3E%3Ccircle cx='20' cy='20' r='12'/%3E%3Ccircle cx='20' cy='20' r='6'/%3E%3Ccircle cx='0' cy='10' r='18'/%3E%3Ccircle cx='40' cy='10' r='18'/%3E%3C/g%3E%3C/svg%3E")}
.pat-tooth{--pat-size:80px;--pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cpath d='M12 12C16 8 20 12 22 12C24 12 28 8 32 12C35 16 32 24 31 30C30 34 27 34 26 30L24 24L20 24L18 30C17 34 14 34 13 30C12 24 9 16 12 12Z'/%3E%3Cpath d='M52 52C56 48 60 52 62 52C64 52 68 48 72 52C75 56 72 64 71 70C70 74 67 74 66 70L64 64L60 64L58 70C57 74 54 74 53 70C52 64 49 56 52 52Z'/%3E%3C/svg%3E")}
.pat-cross{--pat-size:60px;--pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cpath d='M16 8h8v8h8v8h-8v8h-8v-8h-8v-8h8z'/%3E%3Cpath d='M56 48h8v8h8v8h-8v8h-8v-8h-8v-8h8z'/%3E%3C/svg%3E")}
.pat-house{--pat-size:80px;--pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cpath d='M20 6L34 18H30V32H24V24H16V32H10V18H6Z'/%3E%3Cpath d='M60 46L74 58H70V72H64V64H56V72H50V58H46Z'/%3E%3C/svg%3E")}
.pat-rice{--pat-size:60px;--pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cellipse cx='15' cy='15' rx='3.5' ry='6' transform='rotate(-25 15 15)'/%3E%3Cellipse cx='45' cy='22' rx='3.5' ry='6' transform='rotate(30 45 22)'/%3E%3Cellipse cx='28' cy='46' rx='3.5' ry='6' transform='rotate(-60 28 46)'/%3E%3C/svg%3E")}