@charset "UTF-8"; :root { --color-black: rgba(0, 0, 0, 1); --color-white: rgba(255, 255, 255, 1); --color-gray: rgba(240, 240, 240, 1); --color-bdr: rgba(0, 0, 0, 1); } :root { --fs-12: 3.08vw; --fs-12-14: 3.08vw; --fs-15-14: 3.85vw; --fs-15-18: 3.85vw; --fs-15-24: 3.85vw; --fs-16-18: 4.1vw; --fs-20-24: 5.13vw; --fs-24-42: 6.15vw; } @media all and (min-width: 1023px) { :root { --fs-12: 0.86vw; --fs-12-14: 1.01vw; --fs-15-14: 1.01vw; --fs-15-18: 1.29vw; --fs-15-24: 1.72vw; --fs-16-18: 1.29vw; --fs-20-24: 1.72vw; --fs-24-42: 3.02vw; } } :root { --r-5: 1.28vw; --logo-width: 19.23vw; --header-height: 22.31vw; --btn-read-width: 15.9vw; --btn-read-height: 10.26vw; --footer-btn-height: 23.08vw; --accordion-head-height: 14.62vw; --grid1: calc((100vw - var(--scrollbar)) / 13); --space-d6-d8: calc(var(--grid1) / 6); --space-d8: calc(var(--grid1) / 8); --space-d4: calc(var(--grid1) / 4); --space-d2: calc(var(--grid1) / 2); --space-1-3: calc(var(--grid1) * 0.33); --space-2-d3: calc(var(--grid1) * 0.66); --space-3-4: calc(var(--grid1) * 0.75); --space1: var(--grid1); --space1-3: calc(var(--grid1) / 3 * 4); --space1-5: calc(var(--grid1) * 1.5); --space2: calc(var(--grid1) * 2); --space2-5: calc(var(--grid1) * 2.5); --space3: calc(var(--grid1) * 3); --space3-5: calc(var(--grid1) * 3.5); --space4: calc(var(--grid1) * 4); --space4-5: calc(var(--grid1) * 4.5); --space5: calc(var(--grid1) * 5); --space5-5: calc(var(--grid1) * 5.5); --space6: calc(var(--grid1) * 6); --space7: calc(var(--grid1) * 7); --space8: calc(var(--grid1) * 8); --space9: calc(var(--grid1) * 9); --space10: calc(var(--grid1) * 10); --space11: calc(var(--grid1) * 11); --space11-5: calc(var(--grid1) * 11.5); --space12: calc(var(--grid1) * 12); --space13: calc(var(--grid1) * 13); --space14: calc(var(--grid1) * 14); --space15: calc(var(--grid1) * 15); } @media all and (min-width: 1024px) { :root { --logo-width: 5.39vw; --r-5: 5px; --logo-width: 5.39vw; --header-height: 8.84vw; --btn-read-width: 7.97vw; --btn-read-height: 3.59vw; --footer-btn-height: 6.9vw; --accordion-head-height: 6.03vw; --grid1: calc( (100vw - var(--scrollbar) )/29 ); } } /*** The new CSS reset - version 1.11.2 (last updated 15.11.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } html { font-size: 3.125vw; } body { font-size: 14px; font-size: 1.4rem; } /* Small Devices, Tablets */ @media all and (min-width: 768px) { html { font-size: 62.5%; } body { font-size: 14px; font-size: 1.4rem; } } /* PC */ :root { --vh: 100vh; } body { overflow-x: hidden; overflow-y: visible; } body { color: #000; font-family: "TsukuAOldMinPr6-R", YuMincho, "游明朝", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳＰ明朝", "MS PMincho", sans-serif; font-feature-settings: "pkna"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overscroll-behavior-y: none; touch-action: manipulation; overflow-wrap: anywhere; word-break: normal; line-break: strict; line-height: 1.8; letter-spacing: 0.03em; } a { color: #000; text-decoration: none; text-decoration-thickness: 1px; } li { list-style: none; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } .textbox { text-box: trim-both cap alphabetic; } img { width: 100%; vertical-align: top; height: auto; } .c-icon { position: relative; display: block; } .c-icon svg { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; } #myknowtebook header { width: 100%; position: relative; z-index: 2; } #myknowtebook header .header_inner { height: var(--header-height); display: flex; align-items: center; } #myknowtebook header h1 { width: var(--logo-width); position: absolute; left: var(--space1); line-height: 1; aspect-ratio: 75/27; } #myknowtebook header h1 a { display: block; } #myknowtebook .c-btn_fixed { position: fixed; right: var(--space1); top: 2.87vw; z-index: 2; } #myknowtebook .c-btn_fixed a { background: var(--color-black); display: block; width: 100%; border-radius: var(--r-5); } #myknowtebook .c-btn_fixed a .inr { width: var(--btn-read-width); height: var(--btn-read-height); display: flex; align-items: center; justify-content: center; } #myknowtebook .c-btn_fixed a .inr span.txt { color: var(--color-white); font-size: var(--fs-16-18); } #myknowtebook footer .footer_inner { width: calc(100% - var(--space2)); margin-inline: auto; padding: var(--space2) 0 0 0; } #myknowtebook footer .c-links { width: 100%; } #myknowtebook footer .c-links ul { width: 100%; display: flex; flex-flow: column; row-gap: calc(var(--space1) / 2); } #myknowtebook footer .c-links ul li { width: 100%; } #myknowtebook footer .c-links ul li a { width: 100%; display: block; border-radius: var(--r-5); height: var(--footer-btn-height); } #myknowtebook footer .c-links ul li a .inr { height: var(--footer-btn-height); width: 100%; display: flex; align-items: center; justify-content: center; } #myknowtebook footer .c-links ul li a span.txt { font-size: var(--fs-20-24); } #myknowtebook footer .c-links ul li a.u-black { background: var(--color-black); } #myknowtebook footer .c-links ul li a.u-black span.txt { color: var(--color-white); } #myknowtebook footer .c-links ul li a:has(.c-img) { border: 1px solid rgba(0, 0, 0, 0.1); } #myknowtebook footer .c-links ul li a:has(.c-img) span.c-img { width: 33.33vw; aspect-ratio: 130/17; display: block; line-height: 1; } #myknowtebook footer .c-external_links { margin-top: calc(var(--space1) / 4); } #myknowtebook footer .c-external_links ul li .inr { display: flex; align-items: center; column-gap: 1.54vw; } #myknowtebook footer .c-external_links ul li .inr span.txt { font-size: var(--fs-12-14); } #myknowtebook footer .c-external_links ul li .inr span.c-icon { width: 2.05vw; height: 2.05vw; } #myknowtebook footer .copy { padding: var(--space2) 0 var(--space1) 0; } #myknowtebook footer .copy p { font-family: "HelveticaNowDisplay-Regular"; font-size: var(--fs-12); } @media all and (min-width: 1024px) { #myknowtebook header { width: 58.62%; position: absolute; left: 41.38%; } #myknowtebook header h1 { left: var(--space3); } #myknowtebook .c-btn_fixed { right: 6.47vw; top: 2.87vw; } #myknowtebook footer .footer_inner { width: calc(100% - var(--space6)); } #myknowtebook footer .c-links ul li a:has(.c-img) span.c-img { width: 15.09vw; } #myknowtebook footer .c-external_links ul { display: flex; align-items: center; column-gap: 1.72vw; } #myknowtebook footer .c-external_links ul li .inr { column-gap: 0.43vw; } #myknowtebook footer .c-external_links ul li .inr span.c-icon { width: 0.57vw; height: 0.57vw; } }