/* common.css — shared header, mobile menu, TOP button and footer for every page. Single source of truth: page CSS (styles.css / index.css) must not restyle these parts. */ .site-header,.mobile-menu,#footer,.back-to-top{font-family:var(--sans);font-size:16px;line-height:1.9;-webkit-font-smoothing:antialiased} @media(max-width:680px){.site-header,.mobile-menu,#footer,.back-to-top{font-size:15px;line-height:1.85}} body.menu-open{overflow:hidden} .site-header{position:absolute;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;height:88px;padding:0 42px;color:#344f60;background:rgba(255,255,255,.82);border-bottom:1px solid transparent;backdrop-filter:blur(18px);box-sizing:border-box} .logo{display:flex;align-items:center;gap:12px;font-size:max(12px,15px);font-weight:700;line-height:1.45;letter-spacing:.04em;transition:opacity .32s ease,transform .45s cubic-bezier(.22,1,.36,1)} .logo:hover{opacity:.72;transform:translateY(-2px)} .logo-drop{width:25px;height:31px;background:var(--accent);border-radius:55% 45% 55% 45% / 65% 45% 55% 35%;transform:rotate(45deg)} .desktop-nav{display:flex;gap:22px;font-size:max(12px,14px);font-weight:500;letter-spacing:.04em} .desktop-nav a{position:relative;padding:8px 0;transition:color .32s ease,transform .45s cubic-bezier(.22,1,.36,1)} .desktop-nav a::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.22,1,.36,1)} .desktop-nav a:hover,.desktop-nav a[aria-current="page"]{color:var(--accent)} .desktop-nav a:hover{transform:translateY(-2px)} .desktop-nav a:hover::after,.desktop-nav a[aria-current="page"]::after{transform:scaleX(1)} .menu-button{display:none;align-items:center;justify-content:center;gap:12px;padding:10px 0;color:#3f657f;background:transparent;border:0;font-family:var(--latin);font-size:max(12px,14px);letter-spacing:.16em;line-height:1;cursor:pointer;transition:color .3s} .menu-button:hover{color:var(--accent)} .menu-button i{display:block;width:32px;height:12px;flex:0 0 32px;background:linear-gradient(currentColor,currentColor) 0 1px/100% 1.5px no-repeat,linear-gradient(currentColor,currentColor) 0 9px/100% 1.5px no-repeat;transition:background-position .35s cubic-bezier(.22,1,.36,1)} .menu-button:hover i{background-position:4px 1px,-4px 9px} .mobile-menu{position:fixed;inset:0;z-index:80;display:grid;grid-template-columns:1fr 1fr;align-items:start;box-sizing:border-box;padding:clamp(92px,9vh,132px) 9vw 7vw;color:#fff;background:var(--accent);visibility:hidden;clip-path:circle(0 at calc(100% - 54px) 44px);transition:clip-path .72s cubic-bezier(.72,0,.16,1),visibility 0s .72s} .mobile-menu.is-open{visibility:visible;clip-path:circle(150% at calc(100% - 54px) 44px);transition:clip-path .8s cubic-bezier(.2,.8,.2,1),visibility 0s} .menu-close{position:absolute;top:28px;right:32px;padding:10px 0;color:#fff;background:transparent;border:0;cursor:pointer;transition:opacity .3s} .menu-close:hover{opacity:.72} .menu-kicker{margin:0;font-family:var(--serif);font-size:max(12px,clamp(34px,5vw,76px));line-height:1.2} .mobile-menu nav{display:grid;align-self:start} .mobile-menu nav a{display:grid;grid-template-columns:50px 1fr;align-items:center;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.25)} .mobile-menu nav small{font-family:var(--latin);opacity:.62} .mobile-menu nav span{font-size:max(12px,clamp(20px,3vw,36px));transition:transform .3s,opacity .3s} .mobile-menu nav a:hover span{opacity:.72;transform:translateX(10px)} .menu-kicker,.mobile-menu nav a,.menu-close{opacity:0;transform:translateY(20px);transition:opacity .42s ease,transform .56s cubic-bezier(.2,.8,.2,1)} .mobile-menu.is-open .menu-kicker,.mobile-menu.is-open nav a,.mobile-menu.is-open .menu-close{opacity:1;transform:none} .mobile-menu.is-open nav a:nth-child(2){transition-delay:.05s} .mobile-menu.is-open nav a:nth-child(3){transition-delay:.1s} .mobile-menu.is-open nav a:nth-child(4){transition-delay:.15s} .mobile-menu.is-open nav a:nth-child(5){transition-delay:.2s} .mobile-menu.is-open nav a:nth-child(6){transition-delay:.25s} .back-to-top::before{content:"";position:absolute;inset:-2px;z-index:0;background:#fff;clip-path:polygon(0 0,0 0,0 100%,0 100%);transition:clip-path .52s cubic-bezier(.22,1,.36,1)} .back-to-top span,.back-to-top i{position:relative;z-index:1} .back-to-top:hover::before{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)} .back-to-top{position:fixed;right:24px;bottom:24px;z-index:60;display:flex;align-items:center;justify-content:center;gap:11px;width:112px;height:48px;overflow:hidden;color:var(--accent);background:#fff;border:1.5px solid var(--accent);border-radius:999px;box-shadow:0 8px 24px rgba(38,59,68,.12);opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .3s,visibility .3s,transform .3s,color .38s ease,box-shadow .38s ease} .back-to-top::before{background:var(--accent)} .back-to-top.is-visible{opacity:1;visibility:visible;transform:none} .back-to-top:hover{color:#fff;box-shadow:0 12px 32px rgba(48,91,126,.22);transform:none} .back-to-top:hover i{transform:rotate(45deg)} .back-to-top span{font-family:var(--latin);font-size:max(12px,9px);letter-spacing:.14em} .back-to-top i{font-style:normal;font-size:max(12px,16px);line-height:1;transition:transform .42s cubic-bezier(.22,1,.36,1)} footer{padding:48px 7vw 24px;color:#fff;background:var(--accent)} .footer-info{display:grid;grid-template-columns:1.2fr 1fr auto;align-items:center;gap:36px;padding:0 0 34px} .footer-info h3{margin:0;font-size:max(12px,15px);font-weight:700;line-height:1.7} .footer-info p{margin:0;color:rgba(255,255,255,.76);font-size:max(12px,12px);line-height:1.8} .footer-info nav{display:flex;gap:22px;font-size:max(12px,12px);white-space:nowrap} .footer-info nav a{position:relative;width:max-content;padding-bottom:3px} .footer-info nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:#fff;transform:scaleX(0);transform-origin:right;transition:transform .45s cubic-bezier(.22,1,.36,1)} .footer-info nav a:hover::after{transform:scaleX(1);transform-origin:left} .footer-bottom{display:flex;justify-content:space-between;gap:30px;padding-top:18px;color:rgba(255,255,255,.76);border-top:1px solid rgba(255,255,255,.22);font-family:var(--latin);font-size:max(12px,10px);letter-spacing:.12em} @media(max-width:1180px){.desktop-nav{display:none} .menu-button{display:flex} .footer-info{grid-template-columns:1fr 1fr} .footer-info nav{grid-column:1/-1;flex-wrap:wrap}} @media(max-width:680px){.site-header{height:72px;padding:0 20px} .logo{font-size:max(12px,13px)} .logo-drop{width:21px;height:25px} .mobile-menu{grid-template-columns:1fr;padding:78px 24px 34px} .menu-kicker{display:none} .mobile-menu nav a{padding:14px 0} .mobile-menu nav span{font-size:max(12px,23px)} .back-to-top{right:14px;bottom:14px;width:96px;height:44px} footer{padding:48px 22px 22px} .footer-info{grid-template-columns:1fr;gap:16px;padding-bottom:28px} .footer-info nav{grid-column:auto;gap:8px 18px} .footer-bottom{align-items:flex-start;flex-direction:column;gap:10px;line-height:1.7}} @media(prefers-reduced-motion:reduce){.mobile-menu,.mobile-menu nav a,.menu-close,.back-to-top,.back-to-top::before,.back-to-top i{transition:none}} /* Footer legal row: privacy link beside the copyright */ .footer-legal{display:flex;align-items:center;flex-wrap:wrap;gap:6px 24px} .footer-legal a{position:relative;padding-bottom:2px;color:inherit;font-family:var(--sans);font-size:12px;letter-spacing:.04em;text-decoration:none} .footer-legal a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s cubic-bezier(.22,1,.36,1)} .footer-legal a:hover::after{transform:scaleX(1);transform-origin:left} @media(max-width:680px){.footer-legal{flex-direction:column;align-items:flex-start;gap:8px}} @media(prefers-reduced-motion:reduce){.footer-legal a::after,.footer-info nav a::after,.desktop-nav a,.desktop-nav a::after,.logo{transition:none}} .footer-info p span{white-space:nowrap} .footer-info h3{text-wrap:balance} /* Mobile menu: small index numbers before each page name */ .mobile-menu nav a{grid-template-columns:56px 1fr;align-items:baseline} .mobile-menu nav small{display:block;font-family:var(--latin);font-size:12px;font-weight:500;letter-spacing:.16em;line-height:1;opacity:.72;font-variant-numeric:tabular-nums} @media(max-width:680px){.mobile-menu nav a{grid-template-columns:40px 1fr}} /* Footer: name on the left; address and menu share one right-hand column, left-aligned */ @media(min-width:681px){ .footer-info{grid-template-columns:minmax(11em,1fr) minmax(0,auto);grid-template-areas:"name addr" "name nav";column-gap:56px;row-gap:12px;align-items:center} .footer-info h3{grid-area:name;align-self:center} .footer-info p{grid-area:addr;justify-self:start;text-align:left} .footer-info nav{grid-area:nav;justify-self:start;justify-content:flex-start;flex-wrap:wrap;row-gap:6px;white-space:nowrap} } @media(min-width:681px){ .footer-bottom{flex-wrap:wrap;row-gap:10px} .footer-bottom span,.footer-legal a,.footer-legal small{white-space:nowrap} .footer-legal{margin-left:auto} } /* 商品カード：外部サイト（メーカー）への移動案内。矢印・下地色なし、太字＋黄色3pxマーカー */ .external-note{display:block;margin:22px 0 0;color:#172d3c;font-family:"Noto Sans JP",sans-serif;font-size:max(12px,16px);font-weight:700;line-height:1.85;letter-spacing:.02em} .external-note>span{background:linear-gradient(transparent calc(100% - 3px),#FEF898 0);-webkit-box-decoration-break:clone;box-decoration-break:clone} .external-note--catalog{margin:0 0 26px} /* 見出し下の案内は見出しの幅に合わせ、右側の説明文の幅を狭めない */ .external-note:not(.external-note--catalog){width:0;min-width:100%;box-sizing:border-box} @media(max-width:680px){main .external-note,main p.external-note{margin-top:16px;font-size:16px!important;line-height:1.8}.external-note--catalog{margin:0 0 20px}} /* 活動報告：記事ページ（第37回総会・学習会） */ .meeting-photo-layout{display:grid;grid-template-columns:2.18fr 1fr;gap:22px;max-width:1080px;margin:0 auto 72px} .meeting-photo-layout figure{margin:0} .meeting-photo-layout img{display:block;width:100%;height:auto;aspect-ratio:870/493;object-fit:cover;filter:saturate(.8) contrast(.97)} .meeting-photo-layout .meeting-photo-portrait img{aspect-ratio:408/506;object-position:center 30%} .meeting-photo-layout figcaption{margin-top:9px;color:#7891a2;font-size:max(12px,12px);line-height:1.6} .report-detail .article-body h3{margin:2.6em 0 1em;padding-top:1.4em;border-top:1px solid rgba(53,75,85,.18);color:#172d3c;font-family:"Noto Serif JP",serif;font-size:max(12px,clamp(20px,2vw,24px));font-weight:500;line-height:1.55;letter-spacing:.01em} .report-detail .article-body .text-link{color:#2e6f9e;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em} .report-detail .article-body .text-link:hover{text-decoration-thickness:2px} .report-detail-back{max-width:760px;margin:64px auto 0} @media(max-width:680px){.meeting-photo-layout{grid-template-columns:1fr;gap:24px;margin-bottom:48px} .meeting-photo-layout .meeting-photo-portrait{max-width:300px} .report-detail-back{margin-top:48px}} /* TOPボタン：フッターに重ならないよう、フッターの上で止める（--btt-lift は app.js / index.js が設定） */ .back-to-top{bottom:calc(24px + var(--btt-lift,0px))} @media(max-width:680px){.back-to-top{bottom:calc(14px + var(--btt-lift,0px))}} /* 記事末尾の