@charset "UTF-8";


html, body, div, span, object, iframe, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; vertical-align: baseline; background: transparent; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
nav ul { list-style: none; }
li { list-style-type: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
a { margin: 0; padding: 0; vertical-align: baseline; background: transparent; }
a img { border: none; } ins { text-decoration: none; } mark { font-style: italic; font-weight: bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { cursor: help; }
table { border-collapse: collapse; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; } hr { display: block; height: 1px; border: 0; margin: 1em 0; padding: 0; }
input, select { vertical-align: middle; }
h1,h2,h3,h4,h5,h6 {
font-weight: bold;
}:root {
--color-text: #333;
--color-muted: #666;
--color-date: #999;
--color-buy: #FFB257;
--color-sell: #85C1E9;
--color-toshi: #4CBC8D;
--color-tag-border: #DDDDDD;
--color-tag-bg: #FFFFFF;
--color-view-all-hover: #FFFFFF;
--color-view-all-hover-bg: #333333;
--color-tag-hover: #D9D9D9;
--color-border-muted: #D9D9D9;
--spacing-sm: 8px;
--spacing-md: 16px;
--spacing-lg: 24px;
--max-width: 900px;
--spacing-xl: 40px;
--spacing-2xl: 64px;
--detail-text-size: 32px;
} * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #fff;
font-family: sans-serif;
color: var(--color-text);
}
a {
text-decoration: none;
color: inherit;
}
.sp {
display: none;
} .flex {
display: flex;
align-items: center;
}
.grid-3 {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--spacing-lg) var(--spacing-sm);
}
.thumbnail img {
width: 100%;
} .page-sell .header-list li:nth-child(1) {
color: var(--color-sell);
}
.page-buy .header-list li:nth-child(2) {
color: var(--color-buy);
}
.page-toshi .header-list li:nth-child(3) {
color: var(--color-toshi);
} .header-list {
display: flex;
width: 100%;
list-style: none;
margin: 0;
padding: 0;
}
.header-list li a {
display: block;
}
.header-list li {
position: relative;
flex: 1;
text-align: center;
padding: var(--spacing-sm) 0;
color: #333;
cursor: pointer;
}
.header-list li::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background-color: var(--color-border-muted);
}
.header-list li::after {
content: "";
position: absolute;
bottom: 1px;
left: 42.5%;
width: 15%;
height: 4px;
background-color: transparent;
}
.header-list li:nth-child(1)::after {
background-color: var(--color-sell);
}
.header-list li:nth-child(2)::after {
background-color: var(--color-buy);
}
.header-list li:nth-child(3)::after {
background-color: var(--color-toshi);
}
.header-list li:nth-child(1):hover {
color: var(--color-sell);
}
.header-list li:nth-child(2):hover {
color: var(--color-buy);
}
.header-list li:nth-child(3):hover {
color: var(--color-toshi);
} .header {
padding: var(--spacing-md);
}
.media-block,
.logo-block,
.search-section,
.header-list {
display: flex;
align-items: center;
}
.media-block {
max-width: var(--max-width);
justify-content: space-between;
margin: 10px auto var(--spacing-lg);
}
.media-description {
font-size: 0.75rem;
font-weight: bold;
}
.media-link {
display: block;
font-size: 0.875rem;
padding: 6px 16px;
border: 1px solid #000;
border-radius: 20px;
cursor: pointer;
}
.media-link:hover {
background-color: var(--color-view-all-hover-bg);
color: var(--color-view-all-hover);
}
.logo-block {
justify-content: center;
margin-bottom: 30px;
position: relative;
}
.header-logo {
max-width: 900px;
margin: 0 auto;
}
.header-logo img {
display: block;
width: 470px;
margin: 0 auto;
}
.rogo-item {
margin-left: var(--spacing-sm);
}
.rogo-item img {
height: 20px;
margin-top: 40px;
}
.search-section {
justify-content: center;
gap: 40px;
padding-bottom: 10px;
max-width: 900px;
margin: 80px auto 0;
}
.header-list {
gap: 80px;
list-style: none;
}
.header-list .selected {
position: relative;
font-weight: bold;
cursor: pointer;
}
.header-list .selected:hover::after {
opacity: 1;
}
.search-box {
border-left: 1px solid #D9D9D9;
}
.search-box img {
width: 24px;
height: 24px;
cursor: pointer;
margin-left: var(--spacing-md);
} .search-modal {
display: none; position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
z-index: 1000;
justify-content: center;
align-items: center;
} .search-modal.active {
display: flex;
}
.search-modal-wrapper {
position: relative;
top: 25%;
} .search-modal__content {
background: #f9f9f9;
padding: 2rem 4rem 2rem 2rem;
border-radius: 8px;
position: relative;
width: 70%;
height: 30%;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
} .search-modal__close {
position: absolute;
top: 2rem;
right: 2rem;
display: block;
width: 40px;
height: 40px;
background-color: #aaa;
color: #fff;
text-align: center;
border-radius: 999px;
padding-bottom: 3px;
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
} .search-modal__title {
margin-top: 0;
margin-bottom: 2rem;
font-size: 1.25rem;
text-align: center;
} .search-modal__input-wrapper {
display: flex;
align-items: center;
width: 80%;
margin: 0 auto;
}
.search-modal__input {
flex: 1;
padding: 0.75rem 1rem;
border: 1px solid #ccc;
border-radius: 999px;
font-size: 1rem;
outline: none;
background-color: #fff;
}
.search-modal__submit {
background: none;
border: none;
margin-left: -3rem;
cursor: pointer;
}
.search-modal__submit img {
width: 1.5rem;
height: 1.5rem;
} .section {
display: flex;
margin-bottom: var(--spacing-lg);
max-width: var(--max-width);
margin: 0 auto;
}
.section_link {
max-width: var(--max-width);
margin: 80px auto 0;
display: flex;
overflow: hidden;
background-color: #fff;
transition: transform 0.3s ease;
}
.section_link:hover {
transform: translateY(-5px);
}
.article-card {
margin-left: var(--spacing-lg);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.section_label {
color: var(--color-sell);
font-size: 1rem;
}
.section-title {
font-size: 1.5rem;
font-weight: bold;
letter-spacing: 0.2rem;
margin: var(--spacing-sm) 0;
}
.section-link:hover .section {
background-color: #f9f9f9;
cursor: pointer;
}
.section-header{
font-size: 1.25rem;
font-weight: bold;
} .page-top .detail-sub-title {
font-size: 1.5rem;
border: none;
padding: 0;
}  .article-list {
margin: 36px auto 64px;
padding: 0;
list-style: none;
max-width: var(--max-width);
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 28px 18px;
}
.first-list-wrapper > .article-list > li:first-child {
grid-column: 1 / -1;
}
.first-list-wrapper > .article-list > li:first-child {
display: flex;
align-items: flex-start;
gap: var(--spacing-lg);
}
.first-list-wrapper > .article-list > li:first-child > a {
width: 70%;
}
.first-list-wrapper > .article-list > li:first-child > .first-list > a > .article-title {
font-size: 1.4rem;
}
.first-list-wrapper > .article-list > li:first-child > a .article-title {
font-size: 1.5rem;
}
.first-list {
display: flex;
flex-direction: column;
gap: inherit;
}
.article-thumbnail {
width: 200px;
}
.article-thumbnail img {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
}
.article-item {
overflow: hidden;
background-color: #fff;
transition: transform 0.3s ease;
}
.article-item:hover {
transform: translateY(-5px);
}
.article-meta {
display: flex;
justify-content: space-between;
font-size: 0.875rem;
color: var(--color-muted);
margin: var(--spacing-sm) 0;
}
.label {
font-weight: bold;
}
.label_buy  { color: var(--color-buy);  }
.label_sell { color: var(--color-sell); }
.label_toshi{ color: var(--color-toshi);}
.date { color: var(--color-date); }
.article-title {
font-size: 1rem;
font-weight: bold;
line-height: 1.4;
color: var(--color-text);
margin-bottom: var(--spacing-md);
} .tag-list {
display: flex;
flex-wrap: wrap;
margin-bottom: 5px;
}
.tag-label {
display: inline-block;
font-size: 0.65rem;
padding: 4px 8px;
border: 1px solid var(--color-tag-border);
border-radius: 4px;
background-color: var(--color-tag-bg);
color: var(--color-text);
margin-right: 6px;
margin-bottom: 6px;
} .content-wrapper {
display: flex;
gap: var(--spacing-lg);
max-width: var(--max-width);
margin: 0 auto;
} .main-content {
flex: 2;
display: flex;
flex-direction: column;
} .sidebar {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--spacing-xl);
margin-top: 40px;
} .new-articles {
background-color: #fff;
}
.new-articles .section-header {
font-size: 1.25rem;
}
.new-articles .article-list {
display: grid;
grid-template-columns: 1fr;
gap: 10px 28px;
list-style: none;
margin-top: 30px;
margin-bottom: 40px;
}
.new-articles .article-item {
display: flex;
align-items: center;
gap: var(--spacing-md);
}
.article-thumbnail {
width: 160px;
}
.article-textarea {
width: 60%;
}
.new-articles .article-list a {
display: block;
}
.article-textarea {
width: 50%;
}
.new-articles .view-all {
text-align: center;
margin-top: var(--spacing-md);
margin-bottom: var(--spacing-2xl);
}
.view-all .btn-secondary {
background-color: var(--color-view-all-hover);
padding: var(--spacing-sm) var(--spacing-md);
border: 2px solid var(--color-text);
color: var(--color-text);
text-decoration: none;
border-radius: 20px;
font-size: 0.875rem;
width: 280px;
}
.view-all .btn-secondary:hover {
background-color: var(--color-view-all-hover-bg);
color: var(--color-view-all-hover);
}  .service-area {
background-color: #FAFAFA;
padding: 40px 24px 14px;
}
.service-logo {
width: 224px;
margin: 0 auto 36px;
}
.service-logo img{
width: 100%;
}
.service-area p {
font-size: 14px;
line-height: 2;
letter-spacing: 2px;
margin-bottom: 18px;
}
.related-services .section-header {
font-size: 1.25rem;
margin-bottom: var(--spacing-md);
margin-top: var(--spacing-xl);
}
.related-services .service-card {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
}
.service-buttons {
display: flex;
gap: var(--spacing-md);
justify-content: center;
}
.service-buttons-satei {
background-color: #E4F4FF;
}
.service-buttons-search {
background-color: #FFEED9;
}
.service-buttons-area {
text-align: center;
flex: 0 1 50%;
padding: 12px;
}
.service-buttons-title {
margin: 18px 0 14px;
font-size: 14px;
font-weight: bold;
}
.btn {
display: block;
margin: 0 auto;
padding: 10px 0;
border-radius: 4px;
color: #FFF;
box-shadow: 0px 4px 4px 0 rgba(0,0,0,0.25);
}
.btn-search {
background-color:  var(--color-buy);
}
.btn-satei {
background-color:  var(--color-sell);
} .profile-widget {
background-color: #FFFEF4;
padding: 24px 32px;
}
.widget-title {
font-size: 1.25rem;
margin-bottom: 18px;
font-weight: bold;
}
.widget-logo img {
display: block;
width: 188px;
margin: 0 auto;
}
.profile-widget p {
font-size: 0.9rem;
line-height: 2;
}
.widget-card a {
display: block;
display: flex;
align-items: center;
gap: 8px;
overflow: hidden;
background-color: #fff;
transition: transform 0.3s ease;
}
.widget-card a:hover {
transform: translateY(-5px);
}
.widget-number {
font-size: 16px;
font-weight: bold;
}
.widget-text {
font-size: 12px;
line-height: 1.8;
width: 158px;
}
.widget-img {
width: 96px;
}
.widget-img img {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
} .popular-list {
list-style: none;
padding: 0;
margin: 0;
}
.popular-list li {
margin-bottom: var(--spacing-md);
} .search-widget input {
width: 100%;
padding: 8px 16px 8px 40px;
font-size: 0.875rem;
border: 1px solid #000;
border-radius: 20px;
background: url(//column.kaitry.com/wp-content/themes/KAITRY/img/icon_search.png) no-repeat var(--spacing-md) center;
background-size: 16px 16px;
} .tag-widget .tag-list {
display: flex;
flex-wrap: wrap;
}
.tag-widget .tag-label:hover {
background-color: var(--color-tag-hover);
cursor: default;
}
.single_column .tag-label:hover {
background-color: var(--color-tag-hover);
cursor: default;
} .footer {
background-color: #FFFEF4;
position: relative;
padding: 60px 16px 20px;
margin-top: 100px;
}
.footer-container {
max-width: 900px;
margin: 0 auto;
position: relative;
}
.logo-kaitry {
width: 471px;
} .to-top {
position: absolute;
top: -110px;
right: 0;
width: 103px;
height: 103px;
background-color: #FFFFFF;
border-radius: 50%;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center; 
text-decoration: none;
color: #333333;
font-size: 12px;
}
.to-top p {
font-size: 15px;
font-weight: bold;
margin: 0;
line-height: 1.5; 
} .footer-brand {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
margin-bottom: 78px;
max-width: 900px;
}
.footer-brand img {
display: block;
height: auto;
width: 100%;
}
.logo-service {
width: 471px;
}
.logo-pptc {
width: 227px;
} .footer-nav {
margin-bottom: 18px;
border-bottom: 1px solid #DDDDDD;
}
.footer-nav ul {
display: flex;
justify-content: center;
flex-wrap: wrap;
list-style: none;
margin-bottom: 56px;
padding: 0;
}
.footer-nav li {
position: relative;
padding: 0 20px;
font-size: 14px;
}
.footer-nav li + li {
border-left: 2px solid #DDDDDD;
}
.footer-nav a {
color: #333333;
text-decoration: none;
display: block;
} .footer-copy {
text-align: center;
font-size: 12px;
color: #333333;
padding-top: 16px;
} .copy-area {
display: flex;
max-width: 800px;
justify-content: space-between;
margin :0 auto;
}
.footer-social {
display: flex;
justify-content: center;
gap: 16px;
}
.footer-social img {
width: 50px;
height: 50px;
display: block;
}
.footer-social-sp.sp {
display: none;
} .drawer-overlay {
display: none;
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: #fff;
z-index: 1000;
overflow-y: auto;
transition: opacity 0.3s ease;
} .drawer-overlay.open {
display: block;
opacity: 1;
}
.hamburger.sp,.drawer-overlay.sp {
display: none;
} .not-found {
max-width: 900px;
margin: 0 auto;
}
.not-found-title {
font-size: 150px;
text-align: center;
margin-top: 50px;
color: #666;
}
.not-found-sub-title {
font-size: 50px;
text-align: center;
color: #666;
}
.not-found-text {
margin-top: 20px;
text-align: center;
color: #666;
}
.not-found-back-top {
width: 200px;
margin: 70px auto 0;
padding: 15px;
border-radius: 10px;
text-align: center;
background-color: #333;
color: #fff;
} @media (max-width: 760px) { .pc {
display: none;
}
.sp {
display: block;
}
:root {
--font-size-s: 10px;
--font-size-ms: 12px;
--font-size-mm: 14px;
--font-size-ml: 16px;
--font-size-l: 20px;
}
.header {
padding: 30px 0 16px;
}
.hanburger-container {
width: 90%;
display: flex;
justify-content: space-between;
margin: 0 auto;
}
.tag-label {
font-size: var(--font-size-s);
padding: 5px 12px;
border-radius: 2px;
margin-right: 6px;
margin-bottom: 6px;
} .header-sp { display: block; }
.header-pc { display: none; } .hamburger {
display: flex;
width: 24px;
flex-direction: column;
justify-content: space-between;
}
.hamburger.sp {
display: flex;
flex-direction: column;
align-items: center;
width: 24px;
padding: 0;
background: none;
border: none;
cursor: pointer;
} .hamburger.sp span {
display: block;
width: 100%;
height: 3px;
background-color: var(--color-text);
border-radius: 3px;
} .hamburger.sp span:not(:last-child) {
margin-bottom: 6px;
}
.drawer-overlay.sp {
display: block;
}
.drawer-overlay {
display: block;
opacity: 0;
pointer-events: none;
}
.drawer-overlay.open {
opacity: 1;
pointer-events: auto;
} .drawer {
padding: 50px;
}
.drawer-list li + li {
border-top: 1px solid var(--color-border-muted);
}
.drawer-close {
position: absolute;
top: 25px;
right: 20px;
width: 32px;
height: 32px;
background-color: var(--color-muted);
border: none;
border-radius: 50%;
cursor: pointer; display: flex;
align-items: center;
justify-content: center;
} .drawer-close .close-line {
position: absolute;
width: 16px; height: 2px; background-color: #fff; top: 50%;
left: 50%;
transform-origin: center;
} .drawer-close .close-line:first-child {
transform: translate(-50%, -50%) rotate(45deg);
}
.drawer-close .close-line:last-child {
transform: translate(-50%, -50%) rotate(-45deg);
} .drawer-nav .drawer-title {
font-size: 0.875rem;
color: var(--color-tag-border);
margin-bottom: var(--spacing-sm);
padding-bottom: var(--spacing-sm);
border-bottom: 1px solid var(--color-border-muted);
}
.drawer-list {
list-style: none;
padding: 0;
margin: var(--spacing-md) 0;
}
.drawer-list li {
border-bottom: 1px solid var(--color-border-muted);
padding: 10px 0;
}
.drawer-list li:last-child {
border-bottom: none;
}
.drawer-list li a {
display: block;
font-size: var(--font-size-l);
color: #000;
font-weight: bold;
text-decoration: none;
}
.sidebar {
margin-top: 0;
} .drawer-search {
margin: 50px 0;
}
.drawer-search label {
display: block;
font-size: var(--font-size-ml);
font-weight: bold;
color: var(--color-text);
margin-bottom: 20px;
}
.drawer-search input {
width: 100%;
padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm) 40px;
font-size: 0.875rem;
border: 1px solid var(--color-border-muted);
border-radius: 20px;
background: url(//column.kaitry.com/wp-content/themes/KAITRY/img/icon_search.png) no-repeat var(--spacing-md) center;
background-size: 16px 16px;
} .drawer-tags h3 {
font-size: var(--font-size-ml);
color: var(--color-text);
margin-bottom: var(--spacing-sm);
font-weight: bold;
}
.drawer-tags .tag-list {
display: flex;
flex-wrap: wrap;
gap: 0;
} .logo-sp {
width: 100%;
text-align: center;
padding-bottom: 10px;
}
.header {
position: sticky;
top: 0;
left: 0;
width: 100%;
background-color: #fff;
z-index: 1000;
}
.header-sp,.header-pc {
position: inherit;
}
.content-wrapper {
margin-top: 80px;
}
.header-sp  {
box-shadow: 0px 4px 4px 0 rgba(0, 0, 0, 0.25);
}
.logo-sp img {
width: 50%;
margin-top: 10px;
}
.first-list-wrapper > .article-list > li:first-child > .first-list > a > .article-title{
font-size: 1rem;
}
.first-list-wrapper > .article-list a > .article-title {
font-size: 1rem;
}
.first-list-wrapper > .article-list > li:first-child {
display: block;
}
.first-list-wrapper > .article-list > li:first-child > a .article-title {
font-size: 0.8rem;
line-height: 1.4;
margin-bottom: var(--spacing-md);
}
.first-list{
display: block;
}
.section_link {
width: 90%;
margin: 0 auto; 
display: block;
}
.section_label {
font-size: var(--font-size-mm);
margin-top: 12px;
}
.section-title {
font-size: var(--font-size-l);
}
.article-list {
margin: 24px auto 84px;
width: 90%;
}
.article-card {
margin: 0;
}
.detail-sub-title {
width: 90%;
margin: 0 auto;
}
.new-articles .section-header,.feature-widget .widget-title,.interview-widget .widget-title,.popular-widget .widget-title  {
width: 90%;
margin: 0 auto 24px;
}
.content-wrapper,.service-buttons {
display: block;
}
.service-buttons-area {
width: 100%;
padding-bottom: 16px;
margin-bottom: 8px;
}
.service-area p {
margin-bottom: 32px;
}
.service-buttons-title {
font-size: var(--font-size-ml);
padding: 18px 0 7px;
margin: 0;
}
.service-text {
font-size: var(--font-size-ms);
width: 251px;
margin: 0 auto 16px;
}
.new-articles .article-item {
display: block;
}
.article-thumbnail {
width: 100%;
}
.article-textarea {
width: 100%;
}
.new-articles .article-list {
margin-top: 30px;
}
.new-articles .view-all {
margin-bottom: 0px;
}
.main-content {
gap: 77px;
}
.related-services {
width: 90%;
margin: 0 auto 77px;
}
.profile-widget {
width: 90%;
margin: 0 auto;
padding: 24px 32px 40px;
}
.widget-text {
width: 65%;
}
.widget-card a {
width: 90%;
margin: 0 auto;
}
.search-widget,.tag-widget {
width: 90%;
margin: 0 auto;
} .not-found-title {
font-size: 6rem;
}
.not-found-sub-title {
font-size: 2rem;
}
.not-found-text {
width: 90%;
margin: 20px auto 0;
}
.not-found-back-top {
margin-top: 40px;
}
.footer-brand {
margin-bottom: 35px;
}
.footer-brand img {
width: 239px;
margin: 0 auto;
}
.footer-nav {
margin-bottom: 30px;
}
.footer-nav ul {
display: block;
margin-bottom: 20px;
}
.footer-nav li {
font-size: var(--font-size-mm);
}
.footer-nav li + li {
border: none;
}
.footer-nav li a {
font-size: var(--font-size-mm);
padding: 6px 0;
}
.footer {
padding: 60px 50px 20px;
}
.footer-social-sp a {
display: block;
}
.footer-social-sp.sp  {
display: flex;
width: 100%;
align-items: center;
justify-content: flex-start;
margin-left: 20px;
margin-bottom: 30px;
}
.sp-logo-area img {
display: block;
width: 140px;
margin: 0 auto;
}
.sp-logo-area {
display: flex;
}
.copy-area {
display: block;
}
.sp-logo-area .logo_kaitry,.sp-logo-area .logo_pptc {
text-align: center;
}
.footer-copy {
padding-bottom: 45px;
}
}  .section-heading {
display: flex;
align-items: center;
font-size: 1.25rem;
margin: var(--spacing-lg) 0;
color: var(--color-text);
}
.section-heading::before {
content: "";
display: block;
width: 4px;
height: 1em;
margin-right: var(--spacing-sm);
background-color: var(--color-sell);
}
.section-heading::after {
content: "";
display: block;
flex: 1;
height: 1px;
margin-left: var(--spacing-sm);
background-color: var(--color-border-muted);
}
.section-heading.heading-sell::before {
background-color: var(--color-sell);
}
.section-heading.heading-buy::before {
background-color: var(--color-buy);
}
.section-heading.heading-toshi::before {
background-color: var(--color-toshi);
}
.article-list.buy-article-list,.article-list.sell-article-list,.article-list.toshi-article-list  {
margin-top: 24px;
} .breadcrumb ol {
display: flex;
flex-wrap: wrap;
list-style: none;
padding: 0;
margin: 0;
font-size: 12px;
color: #777777;
max-width: 900px;
margin: 50px auto 0;
}
.breadcrumb ol li + li {
margin-left: 8px;
position: relative;
}
.breadcrumb ol li:not(:last-of-type)::after{
content: ">";         
margin: 1rem;
color: #777777;
}
.breadcrumb a {
color: inherit;
text-decoration: none;
}
.breadcrumb a:hover {
text-decoration: underline;
}
.detail-title {
font-size: 32px;
max-width: 900px;
margin: 38px auto 0;
}
.detail-title.sell-title {
color: var(--color-sell);
}
.detail-title.buy-title {
color: var(--color-buy);
}
.detail-title.toshi-title {
color: var(--color-toshi);
}
@media (max-width: 760px) {
.detail-title {
width: 90%;
margin-top: 20px;
}
.breadcrumb ol {
width: 90%;
margin-top: 35px;
line-height: 2.5;
}
.section-heading {
width: 90%;
margin: var(--spacing-lg) auto;
}
} .detail-title.list-all-title {
margin-top: 36px;
font-size: 28px;
font-weight: bold;
}
.detail-sub-title {
max-width: 900px;
margin: 40px auto 0;
font-size: 1.25rem;
border-bottom: 1px solid #bbb;
padding-bottom: 8px;
}
.detail-sub-title span {
font-size: 0.9rem;
vertical-align: top;
padding-left: 5px;
color: #888;
}
.new-articles .list-all {
margin-top: 32px;
}
.pagination ul {
display: flex;
list-style: none;
padding: 0;
margin: var(--spacing-md) 0;
font-size: 0.875rem; color: #777777;
gap: var(--spacing-sm); justify-content: center;
}
.pagination .page-item a,
.pagination .page-item span {
display: block;
width: 32px; height: 32px;
line-height: 32px; text-align: center;
border: 1px solid #DDDDDD;
border-radius: 16px;
text-decoration: none;
color: inherit;
}
.pagination .page-item a:hover {
background-color: var(--color-border-muted);
color: #fff;
} .pagination .page-item.active span {
background-color: var(--color-text);
color: #fff;
border-color: var(--color-text);
font-weight: bold;
} .pagination .page-item.prev a,
.pagination .page-item.next a {
width: auto;
padding: 0 8px;
font-size: 2rem; line-height: 32px;
border: 0;
}
.pagination .page-item.next a {
margin-left: 22px;
}
.pagination .page-item.prev a {
margin-right: 22px;
}
.pagination .page-item.prev a:hover,
.pagination .page-item.next a:hover {
background-color: #fff;
color: #777777;
} .pagination .page-item.ellipsis span {
border: none;
color: #999999;
cursor: default;
}
@media (max-width: 760px) {
.content-wrapper.all-content-wrapper-sp {
margin-top: 16px;
}
} .content-wrapper.detail-wrapper {
gap: 50px;
}
.article-list.detail-article-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
margin: 10px 0 0;
}
.new-articles .detail-article-list .article-item a {
display: block;
}
.article-detail-thumbnail {
width: 100%;
margin-top: 25px;
}
.article-detail-thumbnail img {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
}
.detail-article-title {
font-size: var(--detail-text-size);
}
.thumbnail-text {
margin-top: 24px;
}
.table-of-contents {
border: 1px solid var(--color-border-muted);
border-radius: 4px;
padding: 25px;
margin: 50px 0 var(--spacing-lg);
}
.table-of-contents .toc-title {
font-size: 1rem;
font-weight: bold;
position: relative;
top: -44px;
background-color: #fff;
padding: 10px;
display: inline-block;
}
.table-of-contents .toc-list {
position: relative;
top: -15px;
padding: 0 0 0 35px;
margin: 0;
}
.table-of-contents .toc-list li {
list-style: disc;
margin-bottom: var(--spacing-sm);
line-height: 1.6;
position: relative;
}
.toc-sub-title {
position: relative;
padding-left: 15px;
top: -20px;
}
.table-sub-contents {
margin-top: 20px;
}
.detail-heading.section-heading::after {
height: 0;
}
.heading-m {
margin-top: 50px;
}
.detail-profile-img img {
width: 150px;
height: 150px;
border-radius: 999px;
margin-bottom: 24px;
}
.detail-profile-img {
margin-bottom: 10px;
}
.table-profile-container {
position: relative;
align-items: center;
top: -20px;
}
.table-profile-name {
display: flex;
gap: 10px;
align-items: center;
font-size: 24px;
font-weight: bold;
position: absolute;
top: 50px;
left: 175px;
}
.table-profile-name p {
margin-top: 10px;
font-size: 14px;
}
.table-profile-post{
position: absolute;
top: 90px;
left: 175px;
}
.toc-articles {
font-size: 1.25rem;
font-weight: bold;
margin-top: 80px;
}
.qst-title,.qst-text {
font-size: 14px;
}
.table-qst-contents {
margin-top: 0;
}
.share-img-widget {
display: flex;
gap: 10px;
justify-content: center;
}
.share-img {
width: 50px;
}
.share-img img {
width: 45px;
}
.share-title {
text-align: center;
margin-bottom: 24px;
font-size: 20px;
font-weight: bold;
} .tag-page,.search-page .main-content {
margin-top: 48px;
}
.tag-page,.search-page .widget-title {
margin-bottom: 12px;
font-weight: bold;
}
.tag-page .tag-widget {
margin-bottom: 48px;
margin-top: 24px;
}
.tag-page .tag-widget,.search-page .tag-widget{
padding: 20px;
background-color: #FAFAFA;
border-radius: 5px;
}
.tag-header {
font-weight: bold;
font-size: 1.25rem;
margin-bottom: 16px;
}
.tag-page .related-services,.search-page .related-services {
margin-top: 84px;
}
.tag-page .article-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px 20px;
max-width: var(--max-width);
margin: 0 auto;
}
@media (max-width: 760px) {
.article-list.detail-article-list {
display: block;
width: 100%;
}
.section-heading::before {
height: 2em;
width: 6px;
margin-right: 12px;
}
.section-heading.detail-heading {
margin: 50px 0 15px;
}
.content-wrapper.detail-wrapper {
margin-top: 10px;
}
.detail-wrapper .main-content{
gap: 0;
}
.tag-header {
width: 90%;
margin: 0 auto 16px;
}
.table-profile-name {
font-size: 1.1rem;
width: 100px;
padding-bottom: 4px;
gap: 5px;
}
.table-profile-post {
top: 80px;
}
} .search-section-title {
font-weight: bold;
font-size: 1.25rem;
margin-bottom: 16px;
}
.search-page .tag-widget {
margin-top: 48px;
}
.search-page .search-widget {
margin-top: 24px;
}
.search-page .search-widget {
width: 100%;
}
.search-page .widget-title {
font-size: 1rem;
font-weight: bold;
}
.search-page .article-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px 20px;
max-width: var(--max-width);
margin: 0 auto;
}
@media (max-width: 760px) {
.search-result {
width: 90%;
margin: 0 auto;
}
.search-page .search-widget {
width: 90%;
margin: 40px auto;
}
.search-page .article-list {
margin: 0 auto;
width: 100%;
}
}