/ .breadcrumb_list / .common_title, which carry their own rules in common.css, including the header clearance the old drop-specific main{} had to hand-copy. Only the 1120px title wrapper is page-local, mirroring .first_wrap on /about/consociation/. */ .first_area{ padding:0 16px; .first_wrap{ max-width:1120px; margin:0 auto; } } @media (max-width:1439px) and (min-width:769px){ .first_area{padding:0 1.111vw;} } /* ===== Lead text ===== */ .lead{margin:0 auto 26px;max-width:900px;} .lead p{margin:0 0 1.4em;} .center{text-align:center;} .accent{color:var(--red);} .strong{font-weight:700;} .note{color:var(--slate);font-weight:500;} /* ===== Section heading (centered, gray rules) ===== */ .sec-head{ text-align:center; margin:64px 0 30px; padding:22px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .sec-head h2{ font-family:var(--mincho); color:var(--slate); font-weight:800; font-size:24px; letter-spacing:.14em; margin:0; } .section{max-width:900px;margin:0 auto;} /* ===== Callout: スムストックの3原則 ===== */ .callout{ background:#fff; border:2px solid var(--red); border-radius:6px; padding:30px 36px 34px; margin:40px auto; max-width:720px; } .callout-title{ text-align:center; font-family:var(--mincho); font-weight:800; font-size:23px; color:var(--slate); letter-spacing:.08em; margin:0 0 18px; } .callout ol{ list-style:none; counter-reset:pr; margin:0;padding:0; max-width:460px; margin-inline:auto; } .callout ol li{ counter-increment:pr; font-size:18px; font-weight:700; color:var(--slate); padding:7px 0 7px 2.1em; position:relative; line-height:1.6; } .callout ol li::before{ content:counter(pr)"."; position:absolute;left:0;top:7px; color:var(--red); font-family:var(--mincho); } /* ===== Member blocks ===== */ .member{margin:34px 0;} .member h3{ font-family:var(--mincho); font-size:19px; font-weight:800; color:var(--slate); border-left:5px solid var(--red); padding-left:14px; margin:0 0 14px; letter-spacing:.04em; line-height:1.4; } .member > p{margin:0 0 14px;} .req{ list-style:none; margin:0 0 16px;padding:0; } .req li{ padding:4px 0 4px 1.9em; position:relative; } .req li .num{position:absolute;left:0;top:4px;color:var(--red);font-weight:700;} .recommend{ margin:0; padding:12px 18px; background:#fff; border-left:3px solid var(--red); font-weight:500; color:var(--slate); } /* ===== Contact box ===== */ .contact-box{ background:#fff; border:1px solid #34455e; padding:26px 34px; max-width:620px; margin:24px auto 8px; line-height:2.2; } .contact-box .org{font-weight:700;color:var(--slate);} /* common.css sets a global a{font-size:14px}, which shrank the tel: and mailto: text below the rest of the box -- 事務局電話番号のフォントQ数 (cb260825 D-5). */ .contact-box a{color:var(--blue);font-size:inherit;} /* keep a phone number on one line -- at SP width the box used to split it mid-number once the digits went back up to the box's own size. */ .contact-box a[href^="tel:"], .contact-box .nb{white-space:nowrap;} /* ===== CTA ===== */ .cta-wrap{text-align:center;margin:34px 0 10px;} .cta{ display:inline-block; background:var(--red); color:#fff; text-decoration:none; font-weight:700; font-size:17px; letter-spacing:.06em; padding:15px 56px; border-radius:999px; transition:background .2s; box-shadow:0 4px 12px rgba(220,0,12,.22); } .cta:hover{background:var(--red-dark);} /* ===== Footer ===== */ .footer-inner{ max-width:1140px;margin:0 auto;padding:0 24px; display:flex;flex-wrap:wrap;align-items:center; justify-content:space-between;gap:32px; } .footer-logo img{width:280px;max-width:70vw;} .footer-nav ul{ list-style:none;margin:0;padding:0; display:grid;grid-template-columns:repeat(3,auto); border-left:1px solid var(--line-soft); border-right:1px solid var(--line-soft); } .footer-nav li a{ display:block; padding:.85em 1.4em; text-decoration:none; color:var(--ink); font-weight:700; font-size:14px; line-height:1.4; } .footer-nav li a:hover{color:var(--red);} .copyright{ text-align:center; color:#4a4f56; font-size:12px; padding:44px 16px; margin:0; } /* ===== Responsive ===== */ /* SP: source switches from fixed px to vw (375px design basis: 14px = 3.733vw) */ @media (max-width:768px){ body{font-size:3.733vw;line-height:1.85;} .header-inner{padding:12px 16px;gap:12px;} .brand{gap:12px;} .brand .logo img{height:38px;} .brand .tagline{display:none;} .sec-head h2{font-size:5.07vw;letter-spacing:.08em;} .callout{padding:24px 20px 26px;} .callout-title{font-size:5.07vw;} .callout ol li{font-size:4.27vw;} .member h3{font-size:4.53vw;} .contact-box{padding:20px 20px;} .footer-inner{flex-direction:column;align-items:flex-start;} .footer-nav ul{grid-template-columns:repeat(2,1fr);width:100%;} .footer-nav li a{font-size:3.733vw;} .copyright{font-size:2.667vw;} .cta{padding:14px 40px;width:100%;max-width:340px;font-size:4.27vw;} }