@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; } .single-post{ width:100%; overflow: hidden; padding:0 var(--space-s); } .single-post .single-post-content p{ line-height: var(--line-height-l); padding-bottom: var(--space-m); } .single-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; } @media screen and (min-width: 768px) { .single-post-container{ padding:var(--space-m); } } .single-post-header{ padding:0 0 var(--space-s) 0; } .single-post-header a{ text-decoration: none; color: var(--color-on-surface); } .single-post-header .single-post-thumbnail{ width:100%; aspect-ratio: 4/3; overflow: hidden; } .single-post-header .single-post-thumbnail img{ width:100%; height:100%; object-fit: cover; border-radius: var(--radius); box-shadow: var(--box-shadow); } @media screen and (min-width: 768px) { .single-post-header .single-post-thumbnail{ aspect-ratio: 16/9; padding:0 var(--space-xs); } } .single-post-header .single-post-meta-container{ display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap:var(--space-xs); padding:var(--space-m) 0 0 var(--space-xs); } .single-post-header .single-post-meta-container .single-post-category{ border: 1px solid var(--color-border); padding: 0 var(--space-xs); font-size:var(--font-size-xs); } .single-post-header .single-post-meta-container .single-post-date{ font-size:var(--font-size-xs); } .single-post-header h1{ font-size: var(--font-size-l); font-weight: var(--font-weight-bold); padding:var(--space-s) var(--space-xs) 0 var(--space-xs); } .single-post-header .single-post-author{ position:relative; display: flex; flex-direction: row; justify-content: flex-end; align-items: center; padding:var(--space-m) var(--space-s) 0 0; } .single-post-header .single-post-author .single-post-author-avatar{ aspect-ratio: 1/1; height:1.5rem; } .single-post-header .single-post-author .single-post-author-avatar img{ object-fit: cover; width: 100%; height:100%; border-radius: 50%; } .single-post-header .single-post-author .single-post-author-name{ position:relative; padding-left: 0.5rem; font-size: var(--font-size-m); letter-spacing: var(--letter-spacing-s); } .single-post-header .single-post-author .single-post-author-name::before{ position:absolute; display:block; content:"writer↓"; letter-spacing:0.12em; font-size:var(--font-size-l); color:var(--color-on-surface); font-family:var(--font-family-secondary); transform: rotate(-10deg); left:-3.4rem; top:-2.2rem; } @media screen and (min-width: 768px) { .single-post{ max-width: var(--max-width_pc_content); margin: 0 auto; } } .toc-container{ display: flex; flex-direction: column; justify-content: center; margin:var(--space-m) auto; gap:var(--space-m); background-color: var(--color-on-surface); color: var(--color-surface); padding: var(--space-m); border-radius: var(--radius); } .toc-header{ font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); font-family: var(--font-family-secondary); letter-spacing: var(--letter-spacing-m); line-height: 1; } .toc-content{ display: flex; flex-direction: column; justify-content: center; } .toc-text{ display: block; font-size: var(--font-size-m); font-weight: var(--font-weight-bold); padding-bottom: var(--space-s); } .toc-text::after{ content: ""; border:0.5px solid var(--color-border); display:block; } .toc-text a{ display: block; text-decoration: none; color: var(--color-surface); padding-bottom: var(--space-xs); transition: transform 0.3s ease-in-out; } .toc-text a:hover{ transform: translate(0.2rem, -0.1rem); } @media screen and (min-width: 768px) { .toc-container{ max-width:500px; } } .single-post-content{ max-width:100%; margin: 0 auto; padding: var(--space-xs); } .single-post-content ul:not(.toc-content ul, .yyi-rinker-contents ul){ padding:0 0 var(--space-m) var(--space-m); list-style: disc; } ul.wp-block-list, ol.wp-block-list{ margin:0; } .swell-block-capbox{ padding:var(--space-m) var(--space-s) 0 var(--space-s); background-color: var(--color-on-surface); color: var(--color-surface); border-radius: var(--radius); box-shadow: var(--box-shadow); margin:0 0 var(--space-m) 0; } .swell-block-capbox .cap_box_ttl{ font-size: var(--font-size-l); font-weight: var(--font-weight-bold); padding:0 0 var(--space-s) 0; line-height:1; } .single-post-content .concept-box1, .single-post-content .concept-box2, .single-post-content .concept-box3, .single-post-content .concept-box4{ padding:var(--space-m) var(--space-s) 0 var(--space-s); background-color: var(--color-on-surface); color: var(--color-surface); border-radius: var(--radius); box-shadow: var(--box-shadow); margin:0 0 var(--space-m) 0; } @media screen and (min-width: 768px) { .single-post-content{ max-width: var(--max-width_pc_content); } } .wp-block-embed.is-type-video{ display: flex; justify-content: center; align-items: center; } .single-post-tags{ font-size: 0.9rem; font-weight: 500; padding: 1rem; } .single-post-tags .single-post-tag-item a{ text-decoration: none; color: var(--color-on-surface); padding: 0.1rem 0.25rem; } .single-post-tags .single-post-tag-item{ display: flex; flex-wrap: wrap; flex-direction: row; justify-content: flex-start; align-items: center; } .author-info-box{ display: flex; padding: var(--space-l) var(--space-m) var(--space-m) var(--space-m); margin:var(--space-s) var(--space-xs); box-shadow: var(--box-shadow); border-radius: var(--radius); background-color: var(--color-on-surface); color: var(--color-surface); } @media screen and (min-width: 768px) { .author-info-box{ max-width:500px; margin:var(--space-s) auto; } } .author-info-box .author-info-container{ display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap:var(--space-s); } .author-info-box .author-info-container .author-meta-container{ position:relative; display: flex; flex-direction: row; justify-content: center; align-items: center; width:100%; gap:var(--space-xs); } .author-info-box .author-avater{ position:relative; aspect-ratio: 1/1; height:2rem; } .author-info-box .author-avater img{ object-fit: cover; width: 100%; height:100%; border-radius: 50%; } .author-info-box .author-avater::before{ position:absolute; display:block; content:"writer↓"; letter-spacing:0.12em; font-size:var(--font-size-l); color:var(--color-surface); font-family:var(--font-family-secondary); transform: rotate(-10deg); left:-2.6rem; top:-2.2rem; } .author-info-box .author-info-container .author-meta-container .author-name{ font-size: var(--font-size-m); font-weight: var(--font-weight-bold); } .author-info-box .author-info-container .author-bio{ font-size: var(--font-size-s); } .related-posts{ margin:var(--space-s) 0; } .related-posts .related-post-title{ font-size: var(--font-size-l); font-weight: var(--font-weight-bold); padding:0 0 var(--space-s) var(--space-xs); } .related-posts .related-post-list{ display: grid; grid-template-columns: repeat(1, 1fr); gap: var(--space-m); padding: var(--space-xs); } .related-posts .related-post-list .related-post-item{ display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap:var(--space-xs); padding:0 0 var(--space-xs) 0; transition: transform 0.3s ease-in-out, rotate 0.3s ease-in-out; } .related-posts .related-post-list .related-post-item:hover{ transform: translate(0, -4px); rotate: 2deg; } .related-posts .related-post-list .related-post-item .related-post-thumbnail{ width:100%; } .related-posts .related-post-list .related-post-item .related-post-thumbnail img{ aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius); width: 100%; height:100%; } .related-posts .related-post-list .related-post-item .related-post-item-title{ font-size: var(--font-size-m); font-weight: var(--font-weight-bold); display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 3; line-clamp: 3; text-overflow: ellipsis; line-height:var(--line-height-s); } .related-posts .related-post-list .related-post-item .related-post-item-title a{ text-decoration: none; color: var(--color-on-surface); } @media screen and (min-width: 768px) { .related-posts .related-post-list{ grid-template-columns: repeat(2, 1fr); gap: 1rem; } } .chat-bubble { display: flex; align-items: flex-start; padding: 0 0 var(--space-m) 0; flex-direction: row; } .chat-face-container { display: flex; flex-direction: column; align-items: center; margin-right: 1em; } .chat-face { width: 3rem; height: 3rem; border-radius: 50%; } .chat-name { font-size:var(--font-size-s); font-weight: bold; margin-bottom: 0.5em; } .chat-content { flex:1; padding: 1em; border-radius: var(--radius); background-color: var(--color-surface); position: relative; border:1px solid var(--color-border); } .chat-content::before { content: '＼'; color:var(--color-border); position: absolute; display: block; width: 1rem; height: 1rem; left: -4vw; top: var(--size_8_sp); transform: rotate(-20deg); } .chat-bubble.maru .chat-face { border-radius: 50%; } .chat-bubble.none .chat-content { background-color: transparent; } @media screen and (min-width: 800px) { .chat-bubble { display: flex; align-items: flex-start; margin: 1em 1em; flex-direction: row; } .chat-face-container { display: flex; flex-direction: column; align-items: center; margin-right: 1em; } .chat-face { width: 3rem; height: 3rem; border-radius: 50%; } .chat-name { font-size:var(--font-size-s); font-weight: bold; margin-bottom: 0.5em; } .chat-content { flex:1; padding: 1em; border-radius: var(--radius); background-color: var(--color-surface); position: relative; border:1px solid var(--color-border); } .chat-content::before { content: '＼'; color:var(--color-border); position: absolute; display: block; width: 1rem; height: 1rem; left: -1vw; top: var(--size_8_pc); transform: rotate(-20deg); } .chat-bubble.maru .chat-face { border-radius: 50%; } .chat-bubble.none .chat-content { background-color: transparent; } } div.yyi-rinker-contents{ border-radius: var(--radius); border:none; box-shadow:var(--box-shadow); padding:var(--space-m) var(--space-xs) var(--space-xs) var(--space-xs); max-width:500px; margin:0 auto var(--space-m) auto; } div.yyi-rinker-contents div.yyi-rinker-title a{ } .yyi-rinker-box{ display:flex; flex-direction: column; align-items: flex-start; } .yyi-rinker-image{ width:100%!important; height:auto; } .yyi-rinker-image img{ width:100%!important; height:auto!important; object-fit: cover; } .yyi-rinker-info{ width:100%!important; padding:0!important; display:flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; } .yyi-rinker-title{ font-size:var(--size_14_sp); } div.yyi-rinker-contents div.yyi-rinker-detail{ padding:var(--size_4_sp) 0; } .custom-box { border-top: var(--size_07_sp) solid var(--color_darkgrey); border-bottom: var(--size_07_sp) solid var(--color_darkgrey); padding: var(--size_16_sp) 0; width:80%; margin:var(--size_16_sp) auto 0; } .custom-box-title { text-align:center; font-size: var(--size_16_sp); font-weight: bold; } .custom-box-content { font-size: var(--size_14_sp); } @media screen and (min-width: 800px) { .custom-box { border-top: var(--size_07_pc) solid var(--color_darkgrey); border-bottom: var(--size_07_pc) solid var(--color_darkgrey); padding: var(--size_16_pc) 0; width:80%; margin:var(--size_16_pc) auto 0; } .custom-box-title { text-align:center; font-size: var(--size_16_pc); font-weight: bold; } .custom-box-content { font-size: var(--size_14_pc); } }