/* トップページ（PC） */
body{margin:0;background:#FFFFFF}
a{color:#1A1A1A}a:hover{color:#1A1A1A}
a,button,article{transition:color .15s,background-color .15s,box-shadow .15s,border-color .15s}
a[href]:not([style*="background"]):hover{color:#1A1A1A !important;text-decoration:underline !important;text-underline-offset:3px}
a[href][style*="color: rgb(26, 26, 26)"]:hover{color:#1A1A1A !important}
a[style*="background: rgb(255, 225, 0)"]:hover{background:#F5D600 !important}
a[style*="border: 2px solid rgb(26, 26, 26)"]:hover{background:#FFF6C2 !important}
a[style*="background: rgb(17, 17, 17)"]:hover{background:#3A3A3A !important}
a[style*="border: 2px solid rgb(6, 199, 85)"]:hover{background:#EEFBF3 !important}
a[style*="background: rgb(255, 255, 255)"][style*="border-radius: 8px"]:hover,a[style*="border: 1px solid rgb(221, 221, 221)"][style*="border-radius: 8px"]:hover,article:hover{box-shadow:0 4px 14px rgba(0,0,0,0.16) !important}
a[style*="border-radius: 8px"]:hover span[style*="font-weight: 700"],article:hover h3 a{text-decoration:underline;text-underline-offset:3px}
a[style*="background: rgb(238, 243, 236)"]:hover{background:#F2E7A8 !important}
button:not([disabled])[style*="background: transparent"]:hover{color:#1A1A1A !important}
button:not([disabled])[style*="background: rgb(255, 255, 255)"]:hover{background:#F2F2F2 !important}
button[aria-label*="いいね"]:hover{color:#1A1A1A !important}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid #1A1A1A;outline-offset:2px}
.hero{--c:420px;--g:24px;--half:calc(1.5 * var(--c) + var(--g))}
@media (max-width:1023px){.hero{--c:300px}}
@media (max-width:639px){.hero{--c:calc(100vw - 64px);--g:12px;--half:calc(0.5 * var(--c))}}
.slide{transition:box-shadow .2s}
.slide:hover{box-shadow:0 8px 22px rgba(0,0,0,0.22) !important}
.slide img,.slide video{transition:filter .2s}
.slide:hover img,.slide:hover video{filter:brightness(0.88)}
.slide .ph{transition:background-color .2s,border-color .2s}
.slide:hover .ph{background:#F2E7A8 !important;border-color:#1A1A1A !important;border-style:solid !important}
.slide:hover .phLabel{text-decoration:underline;text-underline-offset:4px}
.heroArrow:hover{background:#F2F2F2 !important}

@keyframes chDrawerIn{from{transform:translateX(100%)}to{transform:none}}
@keyframes chSheetIn{from{transform:translateY(100%)}to{transform:none}}
.drawer{animation:chDrawerIn .25s ease}
.sheet{animation:chSheetIn .25s ease}
@media (prefers-reduced-motion: reduce){.drawer,.sheet{animation:none}}
@media (max-width:1023px){.recipeGrid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}.recipeGrid > article{grid-column:auto !important}}
@media (max-width:639px){.recipeGrid{grid-template-columns:minmax(0,1fr) !important}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (min-width:1024px) and (min-height:500px){

}
@media (max-width:1023px){
.body3{grid-template-columns:minmax(0,1fr) !important}
.find{order:2;position:static !important;max-height:none !important;overflow:visible !important}
.slides{grid-template-columns:16px minmax(0,1fr) minmax(0,1fr) 16px !important}
.s3{display:none !important}
.gnav{overflow-x:auto;justify-content:flex-start !important}
.featGrid,.storyGrid{grid-template-columns:minmax(0,1fr) !important}
.footGrid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}
@media (max-width:639px){
.slides{grid-template-columns:16px minmax(0,1fr) 16px !important}
.s2{display:none !important}
.points,.numRow{grid-template-columns:minmax(0,1fr) !important}
.steps{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
.roleRow{grid-template-columns:minmax(0,1fr) !important}
.roleRow svg{transform:rotate(90deg)}
.prodGrid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
.producerGrid{grid-template-columns:minmax(0,1fr) !important}
.joinGrid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
.stepArrow{display:none !important}
}
.tile{position:relative;transition:box-shadow .15s,transform .15s}
.tile:hover{box-shadow:0 6px 18px rgba(0,0,0,0.14);transform:translateY(-2px)}
.tileLink::after{content:"";position:absolute;inset:0;z-index:1}
.tile button{position:relative;z-index:2}
.tile .tileFav{position:absolute !important}