/******************************************************************************* kentarokakizaki.com — custom overrides reset.css / plugins.css / style.css are kept as shipped (the only change to style.css is the removed Google Fonts @import, which now lives in ). All site-specific styling belongs in this file. *******************************************************************************/ /*------ Typography (Japanese) ------------------------------------------------*/ body, input, textarea, button, select { font-family: "Jost", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif; } h1, h2, h3, h4, h5, h6 { font-family: "Jost", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif; } p { line-height: 1.9; } .subtitle { font-family: "Jost", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif; font-style: normal; font-size: 1.15em; line-height: 1.8; } .vis-port-info .grid-item span { font-family: "Jost", "Noto Sans JP", sans-serif; font-style: normal; } /*------ Text logo (replaces logo.png) ----------------------------------------*/ .logo-holder { height: auto; top: 22px; text-align: left; } .logo-holder a, .logo-holder .text-logo { display: block; text-decoration: none; color: #000; } .logo-main { display: block; font-family: "Jost", sans-serif; font-weight: 500; font-size: 19px; line-height: 1.1; letter-spacing: .22em; text-transform: uppercase; color: #000; white-space: nowrap; } .logo-sub { display: block; margin-top: 4px; font-family: "Jost", "Noto Sans JP", sans-serif; font-weight: 400; font-size: 11px; line-height: 1.1; letter-spacing: .34em; color: #777; } .site-logo { font-size: 19px; font-weight: 500; line-height: 1.1; text-transform: none; margin: 0; } /*------ Header / navigation --------------------------------------------------*/ .nav-holder nav li a { letter-spacing: .12em; } /* the share button was removed: give the mobile nav button its space back */ @media only screen and (max-width: 540px) { .nav-button-holder { right: 20px; } .logo-holder { top: 16px; } .logo-main { font-size: 15px; letter-spacing: .16em; } .logo-sub { font-size: 10px; letter-spacing: .24em; } } /*------ Backgrounds (kept out of inline style attributes) --------------------*/ .bg-hero-1 { background-image: url(../images/hero/hero-1.webp); } .bg-hero-2 { background-image: url(../images/hero/hero-2.webp); } .bg-hero-3 { background-image: url(../images/hero/hero-3.webp); } .bg-hero-4 { background-image: url(../images/hero/hero-4.webp); } .bg-hero-5 { background-image: url(../images/hero/hero-5.webp); } .bg-profile { background-image: url(../images/works/sp-081.1600.webp); } /*------ Home slider ----------------------------------------------------------*/ .slide-title h1 { font-size: 3.1em; font-weight: 500; letter-spacing: .08em; text-transform: none; color: #fff; } .slide-title h3 { font-size: 2.2em; font-weight: 500; letter-spacing: .06em; color: #fff; } .slide-title .subtitle { letter-spacing: .3em; text-transform: uppercase; font-size: 1em; opacity: .9; } .slide-title .hero-lead { color: #fff; font-size: 1.05em; line-height: 1.9; text-align: center; padding-top: 14px; opacity: .92; } .slide-title h4 a { letter-spacing: .24em; } @media only screen and (max-width: 1064px) { .slide-title h1 { font-size: 2.1em; } .slide-title h3 { font-size: 1.6em; } } @media only screen and (max-width: 540px) { .slide-title h1 { font-size: 1.55em; } .slide-title h3 { font-size: 1.3em; } .slide-title .hero-lead { font-size: .95em; } } /*------ Works grid -----------------------------------------------------------*/ .page-head { padding: 0 20px; } .page-head h1 { font-size: 2.6em; font-weight: 500; letter-spacing: .3em; color: #000; } .page-head .separator { background: rgba(0, 0, 0, .35); } .page-head .subtitle { color: #444; font-size: 1.05em; } .gallery-items .box-item a { background: #ececec; } /* the theme darkens thumbnails hard on hover — keep the photo readable */ .grid-item-holder:hover .overlay { opacity: .22 !important; } .gallery-item img { display: block; } .inline-filters a.gallery-filter { letter-spacing: .12em; } /* the theme strikes through the ACTIVE filter, which reads as "disabled" */ .inline-filters a.gallery-filter-active { text-decoration: none; font-weight: 600; border-bottom: 1px solid #000; padding-bottom: 3px; } /* lightGallery ships a spinner gif we do not deploy — kill the 404 request */ .lg-outer .lg-item { background-image: none; } /* lightGallery falls back to the img alt text for its caption. The alt text is an accessibility description, not a picture title — keep it out of the visible UI. */ .lg-sub-html { display: none; } /*------ Profile / contact ----------------------------------------------------*/ /* text sits on a photo background: darken it enough to stay readable */ .overlay.dark-overlay { opacity: .58; } .custom-inner h1, .custom-inner h2 { color: #fff; font-size: 2.4em; font-weight: 500; letter-spacing: .12em; text-transform: none; } .custom-inner .subtitle { color: #fff; } .custom-inner p { color: #fff; text-align: left; } .info-block { float: left; width: 100%; margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .25); color: #fff; text-align: left; } .info-block dl { margin: 0; } .info-block dt { float: left; clear: left; width: 92px; padding: 6px 0; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; /* opacity .75 on white text over a photo fell short of 4.5:1 */ opacity: 1; color: rgba(255, 255, 255, .88); } .info-block dd { margin: 0 0 0 92px; padding: 6px 0; font-size: 15px; line-height: 1.8; } .info-block a { color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .4); } .info-block a:hover { border-bottom-color: #fff; } .contact-lead { color: #fff; font-size: 1.15em !important; line-height: 1.9; } /*------ Pages whose content can outgrow the viewport -------------------------*/ /* .full-height pins .content to height:100%, so anything taller than the viewport overflows without extending the scroll height and ends up hidden behind the fixed 90px footer. Let those pages grow and scroll instead. (top:50% + translateY(-50%) still centres short content: when the box grows to fit its own content the two offsets cancel out.) Applied to contact and profile — the two pages with a text block that wraps on narrow screens. */ .content.full-height.scroll-page { height: auto; min-height: 100%; padding-bottom: 90px; } /*------ Contact form ---------------------------------------------------------*/ /* the form is far taller than the theme's centred contact block, so this page runs in normal flow. The photo behind it is .fixed-wrap (position:fixed) and stays put while the form scrolls over it. */ .contact-inner { top: 0; transform: none; padding: 150px 0 0; } .kk-form { float: left; width: 100%; margin-top: 30px; text-align: left; } .kk-form-note { margin: 0 0 18px; font-size: 13px !important; color: rgba(255, 255, 255, .8) !important; } .kk-field { margin-bottom: 20px; } .kk-form label { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 500; letter-spacing: .14em; color: rgba(255, 255, 255, .92); } .kk-req { color: #e6c05a; } .kk-optional { letter-spacing: .06em; color: rgba(255, 255, 255, .7); } .kk-form input[type="text"], .kk-form input[type="email"], .kk-form input[type="tel"], .kk-form textarea { display: block; width: 100%; padding: 12px 15px; background: rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .32); border-radius: 3px; color: #fff; font-size: 15px; line-height: 1.7; -webkit-appearance: none; appearance: none; transition: background .2s ease, border-color .2s ease; } .kk-form textarea { min-height: 170px; resize: vertical; } .kk-form input::placeholder, .kk-form textarea::placeholder { color: rgba(255, 255, 255, .45); } .kk-form input:hover, .kk-form textarea:hover { border-color: rgba(255, 255, 255, .5); } .kk-form input:focus, .kk-form textarea:focus { background: rgba(0, 0, 0, .62); border-color: rgba(255, 255, 255, .7); outline: 2px solid #c9a227; outline-offset: 1px; } /* honeypot: off-screen rather than display:none — bots that skip hidden fields still fill this one, and screen readers skip it via aria-hidden. */ .kk-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } .cf-turnstile { margin: 6px 0 22px; min-height: 65px; } .kk-submit { display: inline-block; padding: 17px 46px; background: #000; border: 1px solid #000; border-radius: 2px; color: #fff; font-size: .95em; font-weight: 600; letter-spacing: .2em; line-height: 1; cursor: pointer; -webkit-appearance: none; appearance: none; transition: background .25s ease, color .25s ease; } .kk-submit:hover:not(:disabled) { background: #fff; color: #000; } .kk-submit:focus-visible { outline: 2px solid #c9a227; outline-offset: 3px; } .kk-submit:disabled { opacity: .55; cursor: default; } .custom-inner .kk-status { min-height: 1.7em; margin: 16px 0 0; font-size: 14px !important; line-height: 1.8; } .custom-inner .kk-status.is-ok { color: #a8e6b8; } .custom-inner .kk-status.is-error { color: #ffbdb0; } .custom-inner .kk-status.is-pending { color: rgba(255, 255, 255, .8); } .custom-inner .kk-noscript { margin-top: 16px; font-size: 14px !important; color: #ffd9a0 !important; } /* visible to screen readers only */ .vis-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media only screen and (max-width: 1064px) { .contact-inner { padding-bottom: 0; } } @media only screen and (max-width: 540px) { .custom-inner h1, .custom-inner h2 { font-size: 1.6em; } .info-block dt { width: 76px; } .info-block dd { margin-left: 76px; } .kk-submit { width: 100%; padding: 17px 20px; } } /*------ 404 ------------------------------------------------------------------*/ .custom-inner.error-page h1 { font-size: 9em; line-height: 1; color: #fff; } .custom-inner.error-page h3 { color: #fff; font-size: 1.4em; font-weight: 400; line-height: 1.8; padding-top: 10px; } /*------ Footer ---------------------------------------------------------------*/ /* the footer contact links (mail / tel) were removed 2026-07-27 — the copyright line is all that is left, so the theme's