のマーカーが table 内では邪魔になるため解除 */
padding: 0;
color: var(--coral);
}
.p-article__body table a{
color: var(--coral);
text-decoration: underline;
text-underline-offset: 3px;
}
/* Mobile: 横スクロールを優先しつつセル内文字は折り返さない */
@media (max-width: 720px){
.p-article__table-wrap{
margin: 1.4em -4px; /* コンテナ余白を少し相殺してテーブルを広く */
border-radius: 12px;
}
.p-article__body table{
width: max-content;
min-width: 100%;
font-size: 12.5px;
}
.p-article__body table th,
.p-article__body table td{
padding: 10px 14px;
white-space: nowrap;
}
.p-article__body table thead th{
font-size: 12px;
}
}
/* Callout --------------------------------------------------- */
.c-callout{
margin: 1.6em 0;
padding: 16px 20px;
border-radius: var(--radius);
background: var(--sage-soft);
border-left: 4px solid var(--sage);
font-size: 13.5px;
line-height: 1.85;
}
.c-callout p{ margin: 0 }
.c-callout__title{
font-family: var(--font-jp);
font-weight: 700;
font-size: 13px;
margin-bottom: 6px !important;
color: var(--ink);
}
.c-callout--tip{ background: var(--yellow-soft); border-left-color: #E0B45A }
.c-callout--warn{ background: var(--coral-soft); border-left-color: var(--coral) }
.c-callout--info{ background: #E2EEF7; border-left-color: #5B97C2 }
/* Pull quote ------------------------------------------------ */
.c-pullquote{
margin: 1.8em 0;
padding: 22px 26px 22px 50px;
background: #fff;
border: 1px solid var(--rule);
border-radius: var(--radius);
position: relative;
font-family: var(--font-jp);
font-weight: 500;
font-size: 16px;
line-height: 1.85;
color: var(--ink);
}
.c-pullquote::before{
content: "\201C";
position: absolute;
left: 14px; top: 0;
font-family: Georgia, serif;
font-size: 60px;
color: var(--coral);
line-height: 1;
}
.c-pullquote p{ margin: 0 }
/* Figure ---------------------------------------------------- */
.c-figure{
margin: 1.8em 0;
text-align: center;
}
.c-figure img{
width: 100%; height: auto;
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
}
.c-figure figcaption{
margin-top: 8px;
font-size: 11.5px;
color: var(--muted);
}
/* Table ----------------------------------------------------- */
.c-table-wrap{
margin: 1.8em 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: var(--radius);
background: #fff;
box-shadow: var(--shadow-sm);
}
.c-table{
width: 100%;
border-collapse: collapse;
font-size: 13px;
line-height: 1.7;
font-family: var(--font-jp);
}
.c-table__caption{
padding: 12px 16px;
text-align: left;
font-weight: 700;
font-size: 12.5px;
color: var(--ink-2);
background: var(--bg-soft);
border-bottom: 1px solid var(--rule);
}
.c-table th,
.c-table td{
padding: 12px 14px;
border-bottom: 1px solid var(--rule);
vertical-align: top;
text-align: left;
}
.c-table thead th{
background: var(--bg-soft);
font-weight: 700;
font-size: 12.5px;
color: var(--ink);
}
.c-table tbody th{
background: #FFFCF8;
font-weight: 700;
white-space: nowrap;
color: var(--coral);
font-family: var(--font-num);
}
.c-table tbody tr:last-child th,
.c-table tbody tr:last-child td{ border-bottom: 0 }
/* Embed (responsive 16:9) ---------------------------------- */
.c-embed{ margin: 1.8em 0 }
.c-embed__inner{
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-sm);
background: #000;
}
.c-embed__inner iframe{
position: absolute; inset: 0;
width: 100%; height: 100%;
border: 0;
}
.c-embed__caption{
margin-top: 8px !important;
font-size: 11.5px;
color: var(--muted);
text-align: center;
}
/* Inline article card -------------------------------------- */
.c-inline-card{
margin: 1.8em 0;
padding: 14px 16px;
background: var(--bg-soft);
border-radius: var(--radius);
border: 1px dashed var(--coral-2);
}
.c-inline-card__label{
display: inline-block;
font-family: var(--font-jp);
font-weight: 700;
font-size: 11px;
color: var(--coral);
background: #fff;
padding: 3px 10px;
border-radius: 999px;
margin-bottom: 10px !important;
}
.c-inline-card__link{
display: flex; gap: 14px; align-items: center;
}
.c-inline-card__link img{
width: 100px; height: 75px;
object-fit: cover;
border-radius: 8px;
flex-shrink: 0;
}
.c-inline-card__body{ flex: 1; min-width: 0 }
.c-inline-card__title{
margin: 6px 0 0 !important;
font-family: var(--font-jp);
font-weight: 700;
font-size: 13.5px;
line-height: 1.55;
color: var(--ink);
text-decoration: none !important;
}
.c-inline-card__link:hover .c-inline-card__title{ color: var(--coral) }
/* Product / affiliate card --------------------------------- */
.c-product{
display: flex; gap: 16px;
margin: 1.8em 0;
padding: 18px;
background: #fff;
border: 1px solid var(--rule);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
}
.c-product__img{
flex-shrink: 0;
width: 120px; height: 120px;
border-radius: 10px;
overflow: hidden;
background: var(--bg-soft);
}
.c-product__img img{ width: 100%; height: 100%; object-fit: cover }
.c-product__body{ flex: 1; min-width: 0 }
.c-product__cat{
display: inline-block;
font-family: var(--font-jp);
font-weight: 700;
font-size: 10.5px;
color: var(--coral);
background: var(--coral-soft);
padding: 2px 10px;
border-radius: 999px;
margin: 0 !important;
}
.c-product__name{
font-family: var(--font-jp);
font-weight: 700;
font-size: 15px;
margin: 8px 0 6px !important;
color: var(--ink);
}
.c-product__desc{
font-size: 12.5px;
color: var(--ink-2);
line-height: 1.75;
margin: 0 0 10px !important;
}
.c-product__actions{
display: flex; align-items: center; gap: 12px;
flex-wrap: wrap;
}
.c-product__link{
display: inline-flex; align-items: center;
background: var(--coral);
color: #fff !important;
padding: 8px 18px;
border-radius: 999px;
font-family: var(--font-jp);
font-weight: 700;
font-size: 12px;
text-decoration: none !important;
box-shadow: 0 4px 10px rgba(240,138,112,.25);
}
.c-product__link:hover{ background: #e87b62 }
.c-product__note{
font-size: 10.5px;
color: var(--muted);
}
/* FAQ ------------------------------------------------------- */
.c-faq{
margin: 1.6em 0;
display: flex; flex-direction: column;
gap: 10px;
}
.c-faq__item{
background: #fff;
border: 1px solid var(--rule);
border-radius: var(--radius);
overflow: hidden;
}
.c-faq__q{
display: flex; align-items: flex-start; gap: 10px;
padding: 14px 18px;
cursor: pointer;
list-style: none;
font-family: var(--font-jp);
font-weight: 700;
font-size: 14px;
color: var(--ink);
position: relative;
}
.c-faq__q::-webkit-details-marker{ display: none }
.c-faq__q span{
color: var(--coral);
font-family: var(--font-num);
font-weight: 700;
flex-shrink: 0;
}
.c-faq__q::after{
content: "＋";
position: absolute;
right: 18px; top: 50%;
transform: translateY(-50%);
color: var(--coral);
font-family: var(--font-num);
font-size: 18px;
font-weight: 700;
transition: transform .2s ease;
}
.c-faq__item[open] .c-faq__q::after{ content: "−"; transform: translateY(-50%) }
.c-faq__a{
padding: 0 18px 16px 36px;
font-size: 13.5px;
line-height: 1.85;
color: var(--ink-2);
}
.c-faq__a p{ margin: 0 }
/* In-article (multi-page) pagination ----------------------- */
.c-page-pagination{
margin: 2em 0 0 !important;
padding: 18px 20px;
background: var(--bg-soft);
border-radius: var(--radius);
text-align: center;
}
.c-page-pagination__label{
margin: 0 0 12px !important;
font-size: 12px;
color: var(--muted);
font-family: var(--font-jp);
}
.c-page-pagination__list{
display: inline-flex; gap: 8px;
margin: 0 0 14px;
padding: 0;
}
.c-page-pagination__list li{ list-style: none }
.c-page-pagination__list a,
.c-page-pagination__list span{
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px;
border-radius: 50%;
background: #fff;
border: 1px solid var(--rule);
font-family: var(--font-num);
font-weight: 700;
font-size: 13px;
color: var(--ink-2);
text-decoration: none !important;
}
.c-page-pagination__list a:hover{ border-color: var(--coral); color: var(--coral) }
.c-page-pagination__list .is-current span{
background: var(--coral);
color: #fff;
border-color: var(--coral);
}
.c-page-pagination__next{
display: inline-flex; align-items: center; gap: 6px;
background: var(--coral);
color: #fff !important;
padding: 9px 22px;
border-radius: 999px;
font-family: var(--font-jp);
font-weight: 700;
font-size: 12.5px;
text-decoration: none !important;
box-shadow: 0 4px 10px rgba(240,138,112,.25);
}
.c-page-pagination__next:hover{ background: #e87b62 }
/* Article footer (tags, references, supervisor, author) ---- */
.p-article__footer{
margin-top: 36px;
padding-top: 24px;
border-top: 1px dashed var(--rule);
}
.p-article__tags{
display: flex; flex-wrap: wrap; align-items: center;
gap: 8px 12px;
margin-bottom: 18px;
}
.p-article__tags-label{
font-family: var(--font-jp);
font-weight: 700;
font-size: 12px;
color: var(--muted);
}
.c-tag-list{
display: flex; flex-wrap: wrap; gap: 6px;
padding: 0;
}
.c-tag-list li{ list-style: none }
.c-tag-list a{
display: inline-block;
padding: 5px 12px;
background: #fff;
border: 1px solid var(--rule);
border-radius: 999px;
font-size: 11.5px;
color: var(--ink-2);
font-family: var(--font-jp);
transition: color .15s ease, border-color .15s ease;
}
.c-tag-list a:hover{ color: var(--coral); border-color: var(--coral) }
.p-article__updated{
margin: 18px 0;
padding: 10px 14px;
font-size: 11.5px;
color: var(--muted);
background: var(--bg-soft);
border-radius: 8px;
}
.p-article__disclaimer{
margin: 20px 0;
padding: 14px 18px;
background: #FFF8F2;
border: 1px solid var(--coral-soft);
border-radius: var(--radius);
font-size: 12px;
color: var(--ink-2);
line-height: 1.85;
}
.p-article__disclaimer p{ margin: 0 }
/* References ------------------------------------------------ */
.p-reference{
margin: 26px 0;
padding: 18px 20px;
background: #fff;
border: 1px solid var(--rule);
border-radius: var(--radius);
}
.p-reference__title{
font-family: var(--font-jp);
font-weight: 700;
font-size: 14px;
margin: 0 0 10px;
color: var(--ink);
}
.p-reference__list{
margin: 0;
padding-left: 1.4em;
font-size: 12px;
line-height: 1.85;
color: var(--ink-2);
list-style: decimal;
}
.p-reference__list li{ margin: .3em 0 }
.p-reference__list a{
color: var(--coral);
text-decoration: underline;
word-break: break-all;
}
/* Supervisor / Author boxes (shared shape) ----------------- */
.p-supervisor,
.p-author-box{
margin: 22px 0;
padding: 20px;
border-radius: var(--radius);
background: linear-gradient(180deg, #FFF6EE 0%, #fff 100%);
border: 1px solid var(--rule);
}
.p-supervisor__label,
.p-author-box__role{
display: inline-block;
font-family: var(--font-jp);
font-weight: 700;
font-size: 11px;
color: var(--coral);
background: var(--coral-soft);
padding: 3px 12px;
border-radius: 999px;
margin: 0 0 12px;
}
.p-supervisor__body,
.p-author-box{
display: flex; gap: 16px; align-items: flex-start;
}
.p-author-box__avatar,
.p-supervisor__avatar{
width: 64px; height: 64px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.p-supervisor__info,
.p-author-box__body{ flex: 1; min-width: 0 }
.p-supervisor__name,
.p-author-box__name{
font-family: var(--font-jp);
font-weight: 700;
font-size: 15px;
color: var(--ink);
margin: 0 0 2px;
}
.p-supervisor__role{
font-size: 11.5px; color: var(--muted);
margin: 0 0 6px;
font-family: var(--font-jp);
}
.p-supervisor__bio,
.p-author-box__bio{
font-size: 12.5px;
line-height: 1.85;
color: var(--ink-2);
margin: 0 0 8px;
}
.p-author-box__socials{
display: flex; gap: 10px;
color: var(--ink-2);
}
.p-author-box__socials a{
width: 28px; height: 28px;
border-radius: 50%;
border: 1px solid var(--rule);
display: grid; place-items: center;
}
.p-author-box__socials a:hover{ color: var(--coral); border-color: var(--coral) }
/* Prev / Next ---------------------------------------------- */
.c-prev-next{
display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
margin: 30px 0;
}
.c-prev-next__item{
display: flex; flex-direction: column; gap: 6px;
padding: 14px 18px;
background: #fff;
border: 1px solid var(--rule);
border-radius: var(--radius);
text-decoration: none;
transition: transform .15s ease, border-color .2s ease;
}
.c-prev-next__item:hover{
border-color: var(--coral);
transform: translateY(-2px);
box-shadow: var(--shadow-sm);
}
.c-prev-next__item--next{ text-align: right }
.c-prev-next__label{
font-size: 11px;
color: var(--coral);
font-family: var(--font-jp);
font-weight: 700;
}
.c-prev-next__title{
font-family: var(--font-jp);
font-weight: 700;
font-size: 13px;
line-height: 1.55;
color: var(--ink);
}
/* Related articles section --------------------------------- */
.p-related{
margin: 40px 0 30px;
padding-top: 28px;
border-top: 1px solid var(--rule);
}
/* Comments placeholder ------------------------------------- */
.p-comments{
margin: 36px 0 0;
padding-top: 28px;
border-top: 1px solid var(--rule);
}
.p-comments__placeholder{
margin-top: 14px;
padding: 24px;
text-align: center;
background: var(--bg-soft);
border-radius: var(--radius);
font-size: 12.5px;
color: var(--ink-2);
}
.p-comments__placeholder a{ color: var(--coral); text-decoration: underline }
/* Pagination (archive style) ------------------------------- */
.c-pagination{
margin: 30px 0;
padding: 24px 20px;
background: #fff;
border: 1px solid var(--rule);
border-radius: var(--radius);
text-align: center;
}
.c-pagination__label{
margin: 0 0 14px;
font-size: 12px;
color: var(--muted);
font-family: var(--font-jp);
}
.c-pagination__list{
display: inline-flex; flex-wrap: wrap; justify-content: center;
gap: 6px;
padding: 0;
}
.c-pagination__list li{ list-style: none }
.c-pagination__num,
.c-pagination__arrow{
display: inline-flex; align-items: center; justify-content: center;
min-width: 36px; height: 36px;
padding: 0 10px;
border-radius: 999px;
background: var(--bg-soft);
font-family: var(--font-num);
font-weight: 700;
font-size: 13px;
color: var(--ink-2);
text-decoration: none !important;
border: 1px solid transparent;
transition: background .2s ease, color .2s ease;
}
.c-pagination__num:hover,
.c-pagination__arrow:hover{
background: var(--coral-soft);
color: var(--coral);
}
.c-pagination__num.is-current{
background: var(--coral);
color: #fff;
}
.c-pagination__ellipsis{
display: inline-flex; align-items: center; justify-content: center;
min-width: 24px; height: 36px;
color: var(--muted);
}
/* Mobile floating share/save FAB --------------------------- */
.c-share-fab{
position: fixed;
left: 50%;
bottom: 16px;
transform: translateX(-50%);
display: none;
gap: 8px;
padding: 8px;
background: rgba(255, 255, 255, .96);
backdrop-filter: blur(8px);
border: 1px solid var(--rule);
border-radius: 999px;
box-shadow: var(--shadow-md);
z-index: 40;
}
.c-share-fab__btn{
display: inline-flex; flex-direction: column; align-items: center;
justify-content: center;
gap: 2px;
padding: 6px 12px;
border-radius: 999px;
background: transparent;
color: var(--ink-2);
font-family: var(--font-jp);
font-weight: 700;
font-size: 10px;
text-decoration: none;
}
.c-share-fab__btn:active{ background: var(--bg-soft) }
.c-share-fab__btn[aria-pressed="true"]{ color: var(--coral) }
/* Toast ----------------------------------------------------- */
.c-toast{
position: fixed;
left: 50%;
bottom: 80px;
transform: translate(-50%, 12px);
background: var(--ink);
color: #fff;
padding: 10px 18px;
border-radius: 999px;
font-family: var(--font-jp);
font-weight: 700;
font-size: 12.5px;
opacity: 0;
pointer-events: none;
transition: opacity .25s ease, transform .25s ease;
z-index: 60;
box-shadow: var(--shadow-md);
}
.c-toast.is-visible{
opacity: 1;
transform: translate(-50%, 0);
}
/* Tag cloud (sidebar) -------------------------------------- */
.c-tag-cloud{
display: flex; flex-wrap: wrap; gap: 6px;
padding: 0;
}
.c-tag-cloud li{ list-style: none }
.c-tag-cloud a{
display: inline-block;
font-size: 11px;
padding: 4px 10px;
background: var(--bg-soft);
border-radius: 999px;
color: var(--ink-2);
font-family: var(--font-jp);
}
.c-tag-cloud a:hover{ background: var(--coral-soft); color: var(--coral) }
/* Responsive ----------------------------------------------- */
@media (max-width: 1080px){
.p-article__layout{ grid-template-columns: 1fr 260px; gap: 28px }
.p-article__title{ font-size: 28px }
}
@media (max-width: 920px){
.p-article__layout{ grid-template-columns: 1fr; gap: 36px }
.p-article__body{ max-width: 100%; font-size: 14.5px }
.p-article__title{ font-size: 24px }
.p-article__body h2{ font-size: 19px }
.p-article__body h3{ font-size: 16px }
}
@media (max-width: 720px){
.p-article{ padding: 4px 0 40px }
.c-breadcrumb{ font-size: 11px }
.c-breadcrumb__list [aria-current="page"]{ max-width: 60vw }
.p-article__title{ font-size: 21px }
.p-article__lead{ font-size: 13.5px; padding-left: 12px }
.p-article__body{ font-size: 14px; line-height: 1.9 }
.p-article__body h2{ font-size: 18px; padding: 10px 0 10px 14px }
.p-article__body h3{ font-size: 15px }
.p-article__bylines{ flex-direction: column; gap: 12px }
.c-byline + .c-byline{ padding-left: 0; padding-top: 12px; border-left: 0; border-top: 1px dashed var(--rule) }
.c-share{ gap: 6px }
.c-share__btn{ padding: 6px 10px; font-size: 11px }
.c-share__btn span{ display: none }
.c-share__btn--copy span,
.c-share__btn--save span{ display: none }
.c-toc{ padding: 14px 16px }
.c-callout{ padding: 14px 16px; font-size: 13px }
.c-pullquote{ padding: 18px 18px 18px 42px; font-size: 14.5px }
.c-pullquote::before{ font-size: 48px; left: 10px }
.c-table{ font-size: 12px }
.c-table th, .c-table td{ padding: 10px 12px }
.c-product{ flex-direction: column; padding: 14px }
.c-product__img{ width: 100%; height: 180px }
.c-inline-card__link{ flex-direction: column; align-items: flex-start; gap: 10px }
.c-inline-card__link img{ width: 100%; height: 160px }
.p-supervisor__body,
.p-author-box{ flex-direction: column; gap: 12px; align-items: flex-start }
.p-author-box__avatar, .p-supervisor__avatar{ width: 56px; height: 56px }
.c-prev-next{ grid-template-columns: 1fr }
.c-prev-next__item--next{ text-align: left }
.c-page-pagination{ padding: 16px }
.c-pagination{ padding: 18px 12px }
.c-pagination__num, .c-pagination__arrow{ min-width: 32px; height: 32px; font-size: 12px }
/* Mobile FAB */
.c-share-fab{ display: inline-flex }
/* 既存の to-top と被るので非表示に */
.site-footer .to-top{ display: none }
}
@media (max-width: 480px){
.p-article__title{ font-size: 19px; line-height: 1.5 }
.p-article__body h2{ font-size: 17px }
.c-share__label{ display: none }
.c-share-fab__btn{ padding: 6px 10px }
.c-share-fab__btn span{ font-size: 9.5px }
}
/* ============================================================
FAQ / About — shared page hero, sections, CTA
============================================================ */
/* Page hero (shared) ---------------------------------------- */
.p-page-hero{
position: relative;
padding: 50px 0 56px;
text-align: center;
overflow: hidden;
}
.p-page-hero--faq{ background: linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 100%) }
.p-page-hero--about{ background: linear-gradient(180deg, #FFF1E2 0%, var(--bg) 100%) }
.p-page-hero__inner{ position: relative; z-index: 2 }
.p-page-hero__deco{
position: absolute;
pointer-events: none;
user-select: none;
z-index: 1;
}
.p-page-hero__deco--1{ width: 110px; left: 4%; top: 20%; opacity: .55; transform: rotate(-8deg) }
.p-page-hero__deco--2{ width: 70px; right: 8%; top: 14%; opacity: .7 }
.p-page-hero__deco--3{ width: 90px; right: 5%; bottom: -10px; opacity: .55 }
.p-page-hero__tag{
display: inline-block;
margin: 0 0 12px;
padding: 4px 14px;
background: #fff;
color: var(--coral);
border-radius: 999px;
font-family: var(--font-num);
font-weight: 700;
font-size: 11.5px;
letter-spacing: .12em;
box-shadow: var(--shadow-sm);
}
.p-page-hero__title{
margin: 0 0 18px;
font-family: var(--font-jp);
font-weight: 900;
font-size: 36px;
line-height: 1.4;
color: var(--ink);
letter-spacing: .01em;
}
.p-page-hero__lead{
max-width: 640px;
margin: 0 auto;
font-size: 14px;
line-height: 2;
color: var(--ink-2);
}
/* Section heading (shared) ---------------------------------- */
.p-section-head{
text-align: center;
margin-bottom: 32px;
}
.p-section-tag{
display: inline-block;
margin: 0 0 10px;
padding: 3px 14px;
background: var(--coral-soft);
color: var(--coral);
border-radius: 999px;
font-family: var(--font-num);
font-weight: 700;
font-size: 10.5px;
letter-spacing: .14em;
}
.p-section-title{
margin: 0 0 12px;
font-family: var(--font-jp);
font-weight: 900;
font-size: 26px;
line-height: 1.5;
color: var(--ink);
}
.p-section-desc{
max-width: 640px;
margin: 0 auto;
font-size: 13px;
line-height: 1.95;
color: var(--ink-2);
}
/* CTA (shared) ---------------------------------------------- */
.p-cta{ padding: 50px 0 60px }
.p-cta__inner{
position: relative;
background: linear-gradient(135deg, var(--coral-soft) 0%, var(--yellow-soft) 100%);
border-radius: var(--radius-lg);
padding: 40px 32px;
text-align: center;
overflow: hidden;
}
.p-cta__deco{
position: absolute;
right: 24px; bottom: 14px;
width: 90px;
opacity: .65;
pointer-events: none;
}
.p-cta__title{
margin: 0 0 10px;
font-family: var(--font-jp);
font-weight: 900;
font-size: 22px;
line-height: 1.55;
color: var(--ink);
}
.p-cta__lead{
max-width: 540px;
margin: 0 auto 22px;
font-size: 13px;
line-height: 1.95;
color: var(--ink-2);
}
.p-cta__actions{
display: flex; flex-wrap: wrap; justify-content: center;
gap: 10px;
}
/* ============================================================
FAQ Page
============================================================ */
.p-faq{ padding: 14px 0 0 }
.p-faq-toc{
margin: 0 auto 36px;
padding: 22px;
background: #fff;
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
text-align: center;
}
.p-faq-toc__label{
margin: 0 0 14px;
font-family: var(--font-jp);
font-weight: 700;
font-size: 12.5px;
color: var(--muted);
letter-spacing: .04em;
}
.p-faq-toc__list{
display: flex; flex-wrap: wrap; justify-content: center;
gap: 8px;
padding: 0;
}
.p-faq-toc__list li{ list-style: none }
.p-faq-toc__list a{
display: inline-block;
padding: 7px 16px;
background: var(--bg-soft);
border-radius: 999px;
font-family: var(--font-jp);
font-weight: 700;
font-size: 12px;
color: var(--ink-2);
transition: background .2s ease, color .2s ease;
}
.p-faq-toc__list a:hover{ background: var(--coral); color: #fff }
.p-faq-section{
margin: 0 0 44px;
scroll-margin-top: 24px;
}
.p-faq-section__head{
margin: 0 0 18px;
padding: 18px 22px;
background: linear-gradient(90deg, var(--coral-soft) 0%, transparent 90%);
border-left: 6px solid var(--coral);
border-radius: 6px;
}
.p-faq-section__no{
display: inline-block;
font-family: var(--font-num);
font-weight: 700;
font-size: 12px;
color: var(--coral);
letter-spacing: .1em;
margin-bottom: 4px;
}
.p-faq-section__title{
margin: 0 0 6px;
font-family: var(--font-jp);
font-weight: 900;
font-size: 20px;
line-height: 1.5;
color: var(--ink);
}
.p-faq-section__desc{
margin: 0;
font-size: 12.5px;
line-height: 1.85;
color: var(--ink-2);
}
/* FAQ items reuse .c-faq from article styles, with adjustments */
.p-faq-section .c-faq__a{
font-size: 13.5px;
line-height: 1.95;
}
.p-faq-section .c-faq__a p + p,
.p-faq-section .c-faq__a p + ul,
.p-faq-section .c-faq__a ul + p{ margin-top: 8px }
.p-faq-section .c-faq__a ul{
margin: 0;
padding-left: 1.4em;
list-style: disc;
}
.p-faq-section .c-faq__a ul li{ margin: .25em 0 }
.p-faq-section .c-faq__a ul li::marker{ color: var(--coral) }
.p-faq-section .c-faq__a a{
color: var(--coral);
text-decoration: underline;
text-underline-offset: 3px;
}
.p-faq-section .c-faq__a strong{
font-weight: 700;
background: linear-gradient(transparent 70%, var(--yellow-soft) 70%);
padding: 0 .1em;
}
/* ============================================================
About Page
============================================================ */
.p-mission,
.p-policy,
.p-strength,
.p-team,
.p-supervisors,
.p-timeline{ padding: 50px 0 }
.p-mission__head{
text-align: center;
margin-bottom: 36px;
}
.p-mission__list{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
padding: 0;
counter-reset: mission;
}
.p-mission__item{
list-style: none;
position: relative;
padding: 28px 24px 26px;
background: #fff;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
border: 1px solid var(--rule);
}
.p-mission__no{
display: inline-block;
font-family: var(--font-num);
font-weight: 700;
font-size: 28px;
color: var(--coral);
line-height: 1;
margin-bottom: 12px;
}
.p-mission__heading{
margin: 0 0 10px;
font-family: var(--font-jp);
font-weight: 700;
font-size: 17px;
color: var(--ink);
line-height: 1.55;
}
.p-mission__body{
margin: 0;
font-size: 13px;
line-height: 1.95;
color: var(--ink-2);
}
/* Policy ---------------------------------------------------- */
.p-policy{ background: var(--bg-soft) }
.p-policy__grid{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.p-policy__card{
padding: 22px 20px;
background: #fff;
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
text-align: center;
}
.p-policy__icon{
width: 52px; height: 52px;
margin: 0 auto 12px;
background: var(--bg-soft);
border-radius: 50%;
display: grid; place-items: center;
}
.p-policy__heading{
margin: 0 0 8px;
font-family: var(--font-jp);
font-weight: 700;
font-size: 15px;
color: var(--ink);
line-height: 1.55;
}
.p-policy__body{
margin: 0;
font-size: 12px;
line-height: 1.9;
color: var(--ink-2);
}
/* Strength -------------------------------------------------- */
.p-strength__grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.p-strength__card{
position: relative;
padding: 32px 24px 26px;
border-radius: var(--radius-lg);
background: linear-gradient(180deg, #FFF6EE 0%, #fff 100%);
border: 1px solid var(--rule);
box-shadow: var(--shadow-sm);
}
.p-strength__num{
position: absolute;
right: 22px; top: 22px;
margin: 0;
font-family: var(--font-num);
font-weight: 700;
font-size: 32px;
color: var(--coral-2);
opacity: .8;
line-height: 1;
}
.p-strength__heading{
margin: 0 0 12px;
font-family: var(--font-jp);
font-weight: 700;
font-size: 17px;
line-height: 1.6;
color: var(--ink);
}
.p-strength__body{
margin: 0;
font-size: 12.5px;
line-height: 1.95;
color: var(--ink-2);
}
/* Team ------------------------------------------------------ */
.p-team__grid{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.p-team__card{
padding: 22px 20px;
background: #fff;
border-radius: var(--radius);
text-align: center;
box-shadow: var(--shadow-sm);
transition: transform .2s ease, box-shadow .2s ease;
}
.p-team__card:hover{
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.p-team__avatar{
width: 96px; height: 96px;
border-radius: 50%;
object-fit: cover;
margin: 0 auto 14px;
display: block;
border: 4px solid #fff;
box-shadow: var(--shadow-sm);
}
.p-team__role{
margin: 0 0 4px;
font-family: var(--font-num);
font-weight: 700;
font-size: 10.5px;
color: var(--coral);
letter-spacing: .08em;
}
.p-team__name{
margin: 0 0 10px;
font-family: var(--font-jp);
font-weight: 700;
font-size: 15px;
color: var(--ink);
}
.p-team__bio{
margin: 0;
font-size: 11.5px;
line-height: 1.9;
color: var(--ink-2);
text-align: left;
}
/* Supervisors ----------------------------------------------- */
.p-supervisors{ background: var(--bg-soft) }
.p-supervisors__grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.p-supervisors__card{
padding: 24px 22px;
background: #fff;
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
border: 1px solid var(--rule);
}
.p-supervisors__avatar{
width: 80px; height: 80px;
border-radius: 50%;
object-fit: cover;
margin: 0 0 12px;
display: block;
border: 3px solid var(--coral-soft);
}
.p-supervisors__field{
display: inline-block;
margin: 0 0 6px;
padding: 3px 10px;
background: var(--sage-soft);
color: #3f7e8b;
border-radius: 999px;
font-family: var(--font-jp);
font-weight: 700;
font-size: 10.5px;
}
.p-supervisors__name{
margin: 0 0 10px;
font-family: var(--font-jp);
font-weight: 700;
font-size: 16px;
color: var(--ink);
}
.p-supervisors__bio{
margin: 0;
font-size: 12px;
line-height: 1.9;
color: var(--ink-2);
}
.p-supervisors__note{
max-width: 640px;
margin: 22px auto 0;
text-align: center;
font-size: 11px;
color: var(--muted);
}
/* Timeline -------------------------------------------------- */
.p-timeline__list{
position: relative;
max-width: 720px;
margin: 0 auto;
padding: 0 0 0 24px;
}
.p-timeline__list::before{
content: "";
position: absolute;
left: 6px; top: 8px; bottom: 8px;
width: 2px;
background: var(--coral-soft);
border-radius: 2px;
}
.p-timeline__item{
position: relative;
list-style: none;
padding: 0 0 24px 16px;
}
.p-timeline__item::before{
content: "";
position: absolute;
left: -24px; top: 6px;
width: 14px; height: 14px;
background: var(--coral);
border: 3px solid #fff;
border-radius: 50%;
box-shadow: 0 0 0 1px var(--coral-soft);
}
.p-timeline__item--upcoming::before{
background: #fff;
border-color: var(--coral);
box-shadow: 0 0 0 1px var(--coral-soft);
}
.p-timeline__date{
display: inline-block;
margin-bottom: 4px;
font-family: var(--font-num);
font-weight: 700;
font-size: 12px;
color: var(--coral);
letter-spacing: .04em;
}
.p-timeline__heading{
margin: 0 0 6px;
font-family: var(--font-jp);
font-weight: 700;
font-size: 15px;
color: var(--ink);
}
.p-timeline__body{
margin: 0;
font-size: 12.5px;
line-height: 1.9;
color: var(--ink-2);
}
/* Responsive — FAQ / About --------------------------------- */
@media (max-width: 1080px){
.p-policy__grid{ grid-template-columns: repeat(2, 1fr) }
.p-team__grid{ grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 920px){
.p-page-hero{ padding: 40px 0 44px }
.p-page-hero__title{ font-size: 30px }
.p-page-hero__deco--1{ width: 80px; opacity: .4 }
.p-page-hero__deco--2{ width: 56px }
.p-page-hero__deco--3{ width: 70px }
.p-section-title{ font-size: 22px }
.p-mission__list{ grid-template-columns: 1fr; gap: 14px }
.p-strength__grid{ grid-template-columns: 1fr; gap: 14px }
.p-supervisors__grid{ grid-template-columns: 1fr; gap: 14px }
.p-team__grid{ grid-template-columns: repeat(2, 1fr); gap: 14px }
}
@media (max-width: 720px){
.p-page-hero{ padding: 32px 0 36px }
.p-page-hero__title{ font-size: 24px; line-height: 1.45 }
.p-page-hero__lead{ font-size: 13px }
.p-page-hero__deco--1{ display: none }
.p-section-title{ font-size: 19px }
.p-section-desc{ font-size: 12.5px }
.p-faq-toc{ padding: 16px }
.p-faq-toc__list{ gap: 6px }
.p-faq-toc__list a{ padding: 6px 12px; font-size: 11.5px }
.p-faq-section{ margin-bottom: 32px }
.p-faq-section__head{ padding: 14px 16px }
.p-faq-section__title{ font-size: 17px }
.p-mission,
.p-policy,
.p-strength,
.p-team,
.p-supervisors,
.p-timeline{ padding: 36px 0 }
.p-policy__grid{ grid-template-columns: 1fr }
.p-team__grid{ grid-template-columns: 1fr }
.p-cta{ padding: 30px 0 40px }
.p-cta__inner{ padding: 28px 20px }
.p-cta__title{ font-size: 18px }
.p-cta__deco{ width: 64px; right: 10px; bottom: 8px; opacity: .5 }
.p-timeline__list{ padding-left: 18px }
.p-timeline__item{ padding-left: 12px }
.p-timeline__item::before{ left: -18px }
}
@media (max-width: 480px){
.p-page-hero__title{ font-size: 20px }
.p-section-title{ font-size: 17px }
.p-faq-section__title{ font-size: 15.5px }
.p-cta__actions .btn,
.p-cta__actions .ghost-btn{ width: 100%; justify-content: center }
}
/* ============================================================
Feature page
============================================================ */
.p-page-hero--feature{ background: linear-gradient(180deg, var(--yellow-soft) 0%, var(--bg) 100%) }
.p-page-hero--contact{ background: linear-gradient(180deg, var(--coral-soft) 0%, var(--bg) 100%) }
.p-page-hero--legal{ background: linear-gradient(180deg, #F4ECE0 0%, var(--bg) 100%) }
.p-page-hero--sitemap{ background: linear-gradient(180deg, var(--sage-soft) 0%, var(--bg) 100%) }
/* Pickup feature ------------------------------------------- */
.p-feature-pickup{ padding: 16px 0 36px }
.p-feature-pickup__card{
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 0;
background: #fff;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-md);
border: 1px solid var(--rule);
}
.p-feature-pickup__media{
position: relative;
overflow: hidden;
min-height: 320px;
}
.p-feature-pickup__media img{
width: 100%; height: 100%;
object-fit: cover;
}
.p-feature-pickup__badge{
position: absolute;
top: 18px; left: 18px;
background: var(--coral);
color: #fff;
font-family: var(--font-num);
font-weight: 700;
font-size: 11px;
letter-spacing: .14em;
padding: 5px 14px;
border-radius: 999px;
box-shadow: 0 4px 10px rgba(240,138,112,.3);
}
.p-feature-pickup__body{
padding: 32px 34px;
display: flex; flex-direction: column;
}
.p-feature-pickup__season{
display: inline-block;
font-family: var(--font-jp);
font-weight: 700;
font-size: 11.5px;
color: var(--coral);
background: var(--coral-soft);
padding: 3px 12px;
border-radius: 999px;
margin-bottom: 12px;
align-self: flex-start;
}
.p-feature-pickup__title{
margin: 0 0 14px;
font-family: var(--font-jp);
font-weight: 900;
font-size: 24px;
line-height: 1.5;
color: var(--ink);
}
.p-feature-pickup__desc{
margin: 0 0 16px;
font-size: 13px;
line-height: 1.95;
color: var(--ink-2);
}
.p-feature-pickup__list{
margin: 0 0 18px;
padding: 0;
border-top: 1px dashed var(--rule);
}
.p-feature-pickup__list li{
list-style: none;
border-bottom: 1px dashed var(--rule);
padding: 8px 0 8px 22px;
position: relative;
font-size: 12.5px;
font-family: var(--font-jp);
}
.p-feature-pickup__list li::before{
content: "";
position: absolute;
left: 4px; top: 50%;
width: 8px; height: 8px;
background: var(--coral);
border-radius: 50%;
transform: translateY(-50%);
}
.p-feature-pickup__list a{
color: var(--ink-2);
transition: color .15s ease;
}
.p-feature-pickup__list a:hover{ color: var(--coral) }
.p-feature-pickup__count{
margin: 10px 0 0;
font-size: 11px;
color: var(--muted);
font-family: var(--font-num);
}
/* Feature grid --------------------------------------------- */
.p-feature{ padding: 36px 0 60px }
.p-feature__grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
.p-feature__card{
display: flex; flex-direction: column;
background: #fff;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: transform .2s ease, box-shadow .2s ease;
}
.p-feature__card:hover{
transform: translateY(-3px);
box-shadow: var(--shadow-md);
}
.p-feature__media{
position: relative;
aspect-ratio: 16/10;
overflow: hidden;
}
.p-feature__media img{
width: 100%; height: 100%;
object-fit: cover;
transition: transform .4s ease;
}
.p-feature__card:hover .p-feature__media img{ transform: scale(1.04) }
.p-feature__count{
position: absolute;
bottom: 12px; right: 12px;
background: rgba(255,255,255,.92);
color: var(--ink);
font-family: var(--font-num);
font-weight: 700;
font-size: 11px;
padding: 4px 10px;
border-radius: 999px;
}
.p-feature__body{
padding: 18px 20px 20px;
display: flex; flex-direction: column;
flex: 1;
}
.p-feature__season{
display: inline-block;
font-family: var(--font-jp);
font-weight: 700;
font-size: 10.5px;
color: var(--coral);
margin-bottom: 6px;
letter-spacing: .04em;
}
.p-feature__title{
margin: 0 0 8px;
font-family: var(--font-jp);
font-weight: 700;
font-size: 16px;
line-height: 1.55;
color: var(--ink);
}
.p-feature__desc{
margin: 0 0 14px;
font-size: 12px;
line-height: 1.85;
color: var(--ink-2);
}
.p-feature__more{
margin-top: auto;
align-self: flex-start;
display: inline-flex; align-items: center; gap: 4px;
font-family: var(--font-jp);
font-weight: 700;
font-size: 12px;
color: var(--coral);
}
.p-feature__more span{ font-size: 16px; line-height: 1 }
/* ============================================================
Contact form
============================================================ */
.p-form-section{ padding: 24px 0 60px }
.p-form-section__inner{
max-width: 760px;
margin: 0 auto;
}
.p-form-notice{
margin: 0 0 28px;
}
.p-form-notice ul{
margin: 8px 0 0;
padding-left: 1.4em;
list-style: disc;
}
.p-form-notice ul li{ margin: .35em 0 }
.p-form-notice ul li::marker{ color: var(--coral) }
.p-form-notice a{ color: var(--coral); text-decoration: underline }
/* form */
.p-form{
background: #fff;
border-radius: var(--radius-lg);
padding: 32px;
box-shadow: var(--shadow-sm);
border: 1px solid var(--rule);
}
.p-form__row{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
margin-bottom: 18px;
}
.p-form__group{ margin-bottom: 18px }
.p-form__row .p-form__group{ margin-bottom: 0 }
.p-form__label{
display: block;
margin-bottom: 8px;
font-family: var(--font-jp);
font-weight: 700;
font-size: 13px;
color: var(--ink);
}
.p-form__required{
display: inline-block;
margin-left: 6px;
padding: 1px 8px;
font-family: var(--font-jp);
font-weight: 700;
font-size: 10px;
color: #fff;
background: var(--coral);
border-radius: 4px;
vertical-align: 1px;
}
.p-form__input,
.p-form__textarea,
.p-form__select{
width: 100%;
padding: 11px 14px;
background: var(--bg-soft);
border: 1.5px solid var(--rule);
border-radius: 10px;
font-size: 14px;
font-family: var(--font-jp-body);
color: var(--ink);
outline: none;
transition: border-color .15s ease, background .15s ease;
}
.p-form__input:focus,
.p-form__textarea:focus,
.p-form__select:focus{
border-color: var(--coral);
background: #fff;
}
.p-form__textarea{
min-height: 180px;
resize: vertical;
line-height: 1.85;
}
.p-form__select{
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 12px;
padding-right: 38px;
}
.p-form__help{
margin: 6px 0 0;
font-size: 11px;
color: var(--muted);
}
/* Radio (custom) */
.p-form__radio-group{
display: flex; flex-direction: column;
gap: 8px;
}
.p-form__radio{
display: flex; align-items: flex-start; gap: 10px;
padding: 10px 14px;
background: var(--bg-soft);
border-radius: 10px;
cursor: pointer;
transition: background .15s ease;
}
.p-form__radio:hover{ background: #fff }
.p-form__radio input{
position: absolute;
opacity: 0;
pointer-events: none;
}
.p-form__radio-mark{
flex-shrink: 0;
width: 18px; height: 18px;
border: 2px solid var(--coral-2);
border-radius: 50%;
background: #fff;
margin-top: 2px;
position: relative;
transition: border-color .15s ease;
}
.p-form__radio input:checked + .p-form__radio-mark{
border-color: var(--coral);
}
.p-form__radio input:checked + .p-form__radio-mark::after{
content: "";
position: absolute;
inset: 3px;
border-radius: 50%;
background: var(--coral);
}
.p-form__radio:has(input:checked){ background: var(--coral-soft) }
.p-form__radio-text{
font-family: var(--font-jp);
font-weight: 500;
font-size: 13px;
color: var(--ink);
line-height: 1.5;
}
/* Checkbox (custom) */
.p-form__checkbox{
display: flex; align-items: flex-start; gap: 10px;
cursor: pointer;
padding: 8px 0;
}
.p-form__checkbox input{
position: absolute;
opacity: 0;
pointer-events: none;
}
.p-form__checkbox-mark{
flex-shrink: 0;
width: 20px; height: 20px;
border: 2px solid var(--coral-2);
border-radius: 5px;
background: #fff;
margin-top: 2px;
position: relative;
transition: border-color .15s ease, background .15s ease;
}
.p-form__checkbox input:checked + .p-form__checkbox-mark{
background: var(--coral);
border-color: var(--coral);
}
.p-form__checkbox input:checked + .p-form__checkbox-mark::after{
content: "";
position: absolute;
left: 5px; top: 1px;
width: 6px; height: 11px;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(45deg);
}
.p-form__checkbox-text{
font-family: var(--font-jp);
font-size: 12.5px;
color: var(--ink-2);
line-height: 1.7;
}
.p-form__checkbox-text a{ color: var(--coral); text-decoration: underline }
.p-form__actions{
margin-top: 28px;
text-align: center;
}
.p-form__actions .btn{ min-width: 240px; justify-content: center }
.p-form__action-note{
margin: 10px 0 0;
font-size: 11px;
color: var(--muted);
}
/* Form success message */
.p-form-success{
background: #fff;
border-radius: var(--radius-lg);
padding: 48px 32px;
text-align: center;
border: 1px solid var(--sage-soft);
box-shadow: var(--shadow-sm);
}
.p-form-success__icon{
margin-bottom: 18px;
}
.p-form-success__title{
margin: 0 0 12px;
font-family: var(--font-jp);
font-weight: 900;
font-size: 22px;
color: var(--ink);
}
.p-form-success__lead{
margin: 0 0 24px;
font-size: 13.5px;
line-height: 1.95;
color: var(--ink-2);
}
/* ============================================================
Company info section（about ページ末尾の運営者情報）
============================================================ */
.p-company{ padding: 24px 0 60px }
.p-company__inner{
max-width: 760px;
margin: 0 auto;
background: #fff;
border-radius: var(--radius-lg);
padding: 28px 32px;
box-shadow: var(--shadow-sm);
border: 1px solid var(--rule);
}
.p-company__table{ margin: 0 }
.p-company__table a{ color: var(--coral); text-decoration: underline }
@media (max-width: 720px){
.p-company__inner{ padding: 18px 18px }
.p-company__table th{ width: auto; white-space: normal }
}
/* ============================================================
Contact Form 7 — 既存 .p-form デザインに合わせる
.p-form-cf7 ラッパ内（page-contact.php）に限定
============================================================ */
.p-form-cf7 .wpcf7{ margin: 0 }
/* CF7 を編集者本文と並べた時の上部余白 */
.p-form-cf7 > p:empty{ display: none }
/* フォーム本体のカード化 */
.p-form-cf7 .wpcf7-form{
background: #fff;
border-radius: var(--radius-lg);
padding: 32px;
box-shadow: var(--shadow-sm);
border: 1px solid var(--rule);
}
/* 各項目（CF7 は