@charset "utf-8"; *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg*, symbol*)) { all: unset; display: revert } *, *::before, *::after { box-sizing: border-box } html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none } a, button { cursor: revert } div, p, ol:not(.wp-block-list), ul:not(.wp-block-list), menu, summary { list-style: none; padding: 0; margin: 0; } iframe, img { max-inline-size: 100%; max-block-size: 100% } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; padding: 0; margin: 0; margin-block-start: 0; margin-block-end: 0; } body { margin: 0; padding: 0; } table { border-collapse: collapse } input, textarea { -webkit-user-select: auto; user-select: auto; } textarea { white-space: revert } meter { -webkit-appearance: revert; appearance: revert } :where(pre) { all: revert; box-sizing: border-box } ::placeholder { color: unset } :where([hidden]) { display: none } :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; line-break:auto; -webkit-user-select: auto; user-select: auto; } :where([draggable="true"]) { -webkit-user-drag: element } :where(dialog:modal) { all: revert; box-sizing: border-box } :root{ --color-primary: #000; --color-on-primary: #fff; --color-secondary: #f5f5f5; --color-on-secondary: #000; --color-tertiary: #ccc; --color-background: #ddd; --color-on-background: #000; --color-surface: #eee; --color-on-surface: #1E2022; --color-border: #ccc; --color-text: #333; --color-link:#00afcc; --color-yellow:#fdcd19; --color-blue:#00afcc; --color-border: #ccc; --color-quote: #f5f5f5; --color-on-quote: #000; --color-quote-decoration: #ccc; --color-gradient-secondary: linear-gradient(90deg, #f58529, #dd2a7b, #8134af, #515bd4); --color-gradient-black: linear-gradient(90deg, #000000, #000000); --color-gradient-simple-blue: linear-gradient(90deg, #00afcc, #00afcc); --color-gradient-blue: linear-gradient( 135deg, #fdcd19 0%, #f3dc4a 10%, #6cc3b3 40%, #3aa7d4 70%, #0092d0 85%, #00afcc 100% ); --color-gradient-primary: linear-gradient( 135deg, #f58529 0%, #feda77 25%, #dd2a7b 50%, #8134af 75%, #515bd4 100% ); --max-width_pc: 1200px; --max-width_display:1400px; --max-width_pc_content: 700px; --button-width: 250px; --radius: 10px; --radius-big: 20px; --radius-round: 50%; --space-xxs: 0.25rem; --space-xs: 0.5rem; --space-s: 1rem; --space-m: 2rem; --space-l: 3rem; --space-xl: 4rem; --font-family-primary: 'Zen_Kaku_Gothic_New', sans-serif; --font-family-secondary: 'Caveat', sans-serif; --font-size-xxs: 0.5rem; --font-size-xs: 0.70rem; --font-size-s: 0.75rem; --font-size-m: 1rem; --font-size-l: 1.4rem; --font-size-xl: 1.8rem; --font-size-2xl: 2.4rem; --font-size-3xl: 3.6rem; --letter-spacing-s: 0.05em; --letter-spacing-m: 0.1em; --letter-spacing-l: 0.15em; --letter-spacing-xl: 0.25em; --line-height-s: 1.4; --line-height-m: 1.7; --line-height-l: 1.9; --line-height-xl: 2.2; --line-height-2xl: 2.4; --line-height-3xl: 2.6; --font-weight-thin: 100; --font-weight-normal: 400; --font-weight-bold: 700; --font-weight-black: 900; --box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; --box-shadow-hover:0 15px 30px -5px rgb(0 0 0 / 15%), 0 0 5px rgb(0 0 0 / 10%); } [data-theme="dark"] { --color-primary: #000; --color-on-primary: #fff; --color-secondary: #f5f5f5; --color-on-secondary: #000; --color-tertiary: #ccc; --color-background: #ddd; --color-on-background: #000; --color-surface: #23282f; --color-on-surface: #DDDDDD; --color-border: #ccc; --color-text: #333; --color-link:#00afcc; } @font-face { font-family: 'Zen_Kaku_Gothic_New'; src: url('../../fonts/Zen_Kaku_Gothic_New/ZenKakuGothicNew-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Zen_Kaku_Gothic_New'; src: url('../../fonts/Zen_Kaku_Gothic_New/ZenKakuGothicNew-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Zen_Kaku_Gothic_New'; src: url('../../fonts/Zen_Kaku_Gothic_New/ZenKakuGothicNew-Black.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: "Caveat"; src: url("../../fonts/caveat/caveat-v18-latin-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; } @font-face { font-family: "Caveat"; src: url("../../fonts/caveat/caveat-v18-latin-700.woff2") format("woff2"); font-weight: 700; font-style: normal; } html { font-size: min(16px, 4vw); scroll-behavior: smooth; overflow-y: scroll; } html.no-scroll-behavior { scroll-behavior: auto; } html::-webkit-scrollbar-track { background: var(--color-secondary); } html::-webkit-scrollbar-thumb { background-color: var(--color-on-secondary); border-radius: 6px; border: 3px solid var(--color-secondary); } html { scrollbar-width: thin; scrollbar-color: var(--color-on-secondary) var(--color-secondary); } body { font-family: var(--font-family-primary); font-size: var(--font-size-m); line-height: var(--line-height-l); letter-spacing: var(--letter-spacing-s); color: var(--color-on-background); background-color: var(--color-background); opacity: 0; transition: opacity 0.5s ease-in,background-color 0.4s ease, color 0.4s ease; } body.is-ready { opacity: 1; } #background{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } p{ padding-bottom: var(--space-s); } h2{ font-size: var(--font-size-xl); padding: var(--space-s) 0; font-weight: var(--font-weight-black); letter-spacing: var(--letter-spacing-m); line-height: var(--line-height-s); } h3{ font-size: var(--font-size-l); padding: var(--space-m) 0; font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-m); text-decoration: underline; text-underline-offset: 6px; } h4{ font-size: var(--font-size-m); padding: var(--space-s) 0; font-weight: var(--font-weight-bold); } h5{ font-size: var(--font-size-m); padding: var(--space-s) 0; font-weight: var(--font-weight-bold); } h6{ font-size: var(--font-size-m); padding: var(--space-s) 0; font-weight: var(--font-weight-bold); } a { cursor: pointer; color: var(--color-link); } div.yyi-rinker-contents div.yyi-rinker-title{ line-height: var(--line-height-s); } div.yyi-rinker-contents div.yyi-rinker-title a{ font-size: var(--font-size-s); } header{ position:relative; } .header-menu{ position: fixed; top: 1.6rem; right: 0; display:flex; justify-content: flex-end; gap: var(--space-xs); width:100%; margin:0 auto; z-index: 101; } .header-menu-inner{ display:flex; justify-content: flex-end; gap: var(--space-xs); width:100%; max-width: var(--max-width_display); padding:0 var(--space-xs); margin:0 auto; } .sr-only{ display: none; } .header-logo{ width:min(300px, 54vw); } .header-logo a{ text-decoration: none; color: var(--color-on-background); display: flex; justify-content: space-between; align-items: center; } .header-logo img{ width:100%; } .header-container{ display: flex; justify-content: space-between; align-items: center; padding:var(--space-m) var(--space-xs); max-width: var(--max-width_display); margin:0 auto; } .header-nav-btn{ display: block; width:min(30px, 6vw); height:min(50px, 10vw); position: relative; cursor: pointer; z-index:999; } .header-nav-btn span{ position: absolute; display: block; width: 100%; height: min(2px, 0.4vw); background-color: var(--color-on-background); transition: transform 0.3s ease, top 0.3s ease, bottom 0.3s ease, opacity 0.3s ease; } .logo.draw path { fill: none; stroke: var(--color-primary); stroke-width: 0.4; } .theme-toggle-button, .open-footer-button, .open-filter-button { height:2.4rem; width:2.4rem; background-color:var(--color-surface); color: var(--color-on-surface); border: 1px solid var(--color-border); border-radius: 50%; cursor: pointer; display:flex; align-items: center; justify-content: center; box-shadow:var(--box-shadow); transition: transform 0.3s ease-in-out,background-color 0.4s ease, color 0.4s ease; } .theme-toggle-button:hover, .open-footer-button:hover, .open-filter-button:hover{ transform: scale(1.1); } .theme-toggle-button svg, .open-footer-button svg, .open-filter-button svg { line-height: 1; width: 1.4rem; height: 1.4rem; fill: currentColor; } .theme-toggle-button path, .open-footer-button line{ stroke: currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:2px; } .footer-container{ display: flex; flex-direction: column; justify-content: center; padding: var(--space-m); background-color: var(--color-surface); color: var(--color-on-surface); transition: background-color 0.4s ease, color 0.4s ease; } footer .footer-menu ul{ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-s); } .footer-menu ul a{ text-decoration: none; color: var(--color-on-surface); font-size:var(--font-size-s); } .footer-copyright{ text-align: center; font-size:var(--font-size-xs); padding: var(--space-s) 0 0 0; } .footer-copyright a{ color: var(--color-on-surface); text-decoration: none; } .simple-btn{ margin: var(--space-m) auto 0 auto; padding: var(--space-xs) var(--space-s); background-color: var(--color-primary); color: var(--color-on-primary); font-weight: var(--font-weight-bold); max-width: var(--button-width); } .simple-btn a{ color: var(--color-on-primary); text-decoration: none; font-size: var(--font-size-m); } .simple-btn:hover{ opacity: 0.8; } .simple-btn:active{ opacity: 0.6; } .simple-btn:visited{ opacity: 0.6; } .articles-list{ display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: var(--space-s); } .articles-list a{ text-decoration: none; color: var(--color-on-background); cursor: pointer; } .article-list-item{ position: relative; display: flex; flex-direction: column; justify-content: flex-start; background-color: var(--color-surface); color: var(--color-on-surface); border-radius: var(--radius); height: 100%; transition: transform 0.5s ease-out, background-image 0.5s ease-out, background-color 0.4s ease, color 0.4s ease; box-shadow: var(--box-shadow); z-index:1; } .article-list-item .article-list-link{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; } .article-list-content{ position: relative; z-index: 1; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: var(--space-xs); padding:var(--space-m); } .article-list-thumbnail{ aspect-ratio: 4/3; width: 100%; box-shadow: var(--box-shadow); border-radius: var(--radius); overflow: hidden; } .article-list-thumbnail a img{ object-fit: cover; width: 100%; height:100%; transition: transform 0.3s ease-out; transform: scale(1); } .article-list-item:hover{ transform: translate(0, -10px); } .article-list-item:hover .article-list-thumbnail a img{ transform: scale(1.1); } h2.article-list-title { font-size: var(--font-size-m); font-weight: var(--font-weight-bold); padding: 0; } .article-list-meta-container{ display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: var(--space-xs); padding:var(--space-xs) 0 0 0; } .article-list-meta-container .article-list-category{ position: relative; background:var(--color-on-surface); padding: 0 var(--space-xs); font-size: var(--font-size-xs); color: var(--color-surface); transition: opacity 0.5s ease-out; } .article-list-meta-container .article-list-category a{ text-decoration: none; color: var(--color-surface); } .article-list-meta-container .article-list-date{ font-size: var(--font-size-xs); } .article-author-container{ display: flex; flex-direction: row; justify-content: flex-end; align-items: center; padding:var(--space-xs) var(--space-s) 0 0; } .article-author-container .author-avatar{ aspect-ratio: 1/1; height:var(--space-m); } .article-author-container .author-avatar img{ object-fit: cover; width: 100%; height:100%; border-radius: 50%; } .article-author-container .author-name{ padding: 0 0 0 var(--space-xs); font-size: var(--font-size-m); } @media screen and (min-width: 768px) and (max-width: 1024px) { .articles-list{ display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-s); padding: var(--space-s) var(--space-s) var(--space-m) var(--space-s); } } @media screen and (min-width: 1025px) { .articles-list{ display: grid; grid-template-columns: repeat(3, 1fr); padding: var(--space-s); margin: 0 auto; } } .pagination { display: flex; padding: 0; margin: 0 auto var(--space-s) auto; justify-content: center; align-items: center; } .page-numbers { display: inline-block; padding: 0.3rem 0.6rem; margin: 0 var(--space-xs); font-size: var(--font-size-m); color: var(--color-text); text-decoration: none; transition: background-color 0.3s; } .page-numbers:hover { background-color: var(--color-secondary); } .page-numbers.current { background-color: var(--color-primary); color: var(--color-on-primary); font-weight: bold; } .page-numbers.dots { color: var(--color-on-secondary); } .page-numbers.dots:hover{ background-color: inherit; } .next.page-numbers, .prev.page-numbers { background-color: none; color: var(--color-on-secondary); padding: 0; font-size: var(--font-size-m); padding: 0 var(--space-xs); } .next.page-numbers:hover, .prev.page-numbers:hover { background-color: inherit; } .sns-list-share{ display: flex; flex-direction: row; justify-content: center; align-items: center; gap: var(--space-s); font-size: var(--font-size-xl); } .sns-list-share li{ transition: transform 0.3s ease-out; } .sns-list-share li a{ text-decoration: none; color: var(--color-on-surface); } .sns-list-share li:hover{ transform: scale(1.2); } .breadcrumbs-container{ padding: 0 0 0 var(--space-s); font-size: var(--font-size-s); font-weight: var(--font-weight-bold); } .breadcrumbs{ padding: var(--space-s) var(--space-xs); } .breadcrumbs::-webkit-scrollbar { display: none; } .breadcrumbs a, .breadcrumbs .current{ color: var(--color-on-background); padding:0 var(--space-xs); } @media screen and (min-width: 768px) { .breadcrumbs-container{ padding:0 var(--space-s); max-width: var(--max-width_pc_content); margin: 0 auto; } } .searchform div { display: flex; width: 100%; margin-bottom: var(--space-s); } .searchform input[type="text"] { border: 1px solid var(--color-tertiary); padding: var(--space-xs); height: 2.5rem; flex: 0 1 80%; } .searchform input[type="submit"] { font-size: var(--font-size-m); border: none; background-color: var(--color-primary); color: var(--color-on-primary); padding: var(--space-xs); height: 2.5rem; flex: 0 1 20%; } .wp-block-quote, .wp-block-pullquote{ background-color: var(--color-quote); color: var(--color-on-quote); padding: var(--space-m) var(--space-s) var(--space-s) var(--space-s); margin:0 auto var(--space-m) auto; width: 100%; position: relative; line-height: 1.5; font-style: italic; text-align: left; font-size:var(--font-size-m); border-radius: var(--radius); } .wp-block-quote::before, .wp-block-pullquote::before{ content: "‘‘"; color: var(--color-quote-decoration); font-size: 6rem; position: absolute; top: -0.5em; left: 0; } .wp-block-quote cite, .wp-block-pullquote cite{ display:flex; justify-content: flex-end; font-style: italic; font-size: var(--font-size-s); } .wp-block-quote cite a, .wp-block-pullquote cite a{ color: var(--color-link); font-size: var(--font-size-s); } .wp-block-image{ margin: 1rem 1rem 2rem 1rem; } ul.wp-block-list, ol.wp-block-list{ margin-block-start: 0; margin-block-end: 0; margin-inline-start: 0; margin-inline-end: 0; padding-inline-start: 0; margin: 0 0 1rem 1.5rem; } .page-title h1{ font-size:var(--font-size-2xl); font-weight: var(--font-weight-bold); padding:0 var(--space-s); text-align: center; } .page-title::after{ content: ''; display: block; width: 100%; height: 1px; background-color: var(--color-on-surface); margin: var(--space-s) 0 0 0; } .page-post-container{ width:100%; overflow: hidden; border-radius: var(--radius-big); margin:var(--space-s) 0; background:var(--color-surface); color:var(--color-on-surface); padding:var(--space-m) var(--space-s); transition: opacity 0.5s ease-in,background-color 0.4s ease, color 0.4s ease; } .page-content { padding:1rem; } @media screen and (min-width: 768px) { .page-post{ max-width: var(--max-width_pc_content); margin: 0 auto; } }