体験レッスンはこちら
色: #b03928 はフォームCSSの --gjj-accent（必須バッジ・ボタンhover）と同じ赤。
hover は少し暗い赤（#8f2d1f）。
外部リンクアイコン（a[href^="http"]::after）はこのボタンにも付く。
============================================================= */
.btn_trial {
margin-bottom: 36px;
}
.btn_trial .wp-block-button {
width: 100%;
max-width: 360px;
}
.btn_trial .wp-block-button__link {
display: block;
width: 100%;
padding: 22px 24px;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.1em;
line-height: 1.6;
text-align: center;
text-decoration: none;
color: #ffffff;
background: #b03928;
border: 1px solid #b03928;
border-radius: 100px;
outline: 3px solid #ffffff;
outline-offset: -4px;
-webkit-transition: 0.4s;
transition: 0.4s;
}
.btn_trial .wp-block-button__link:hover,
.btn_trial .wp-block-button__link:focus-visible {
color: #ffffff;
background: #8f2d1f;
border-color: #8f2d1f;
}
@media (max-width: 767px) {
.btn_trial .wp-block-button {
max-width: 100%;
}
.btn_trial .wp-block-button__link {
padding: 20px;
}
}
/* === 体験レッスンボタン ここまで === */
/* === 製品ラインナップ（[gj_items]）の列数 ここから === */
/* PC（1024px〜）5カラムは PHP 側（columns=5）。ここでは
1023px 以下：3カラム（PC用に埋めた空カラムは非表示）／781px 以下：2カラム。
コアのカラムは 782px 未満で 1 カラム積み（!important）なので、同じ !important で上書き。 */
@media (max-width: 1023px) {
.wp-block-columns.gj-lineup:not(.is-not-stacked-on-mobile) {
-webkit-flex-wrap: wrap !important;
-ms-flex-wrap: wrap !important;
flex-wrap: wrap !important;
gap: 20px 16px !important;
}
.wp-block-columns.gj-lineup:not(.is-not-stacked-on-mobile) > .wp-block-column {
-webkit-box-flex: 0 !important;
-webkit-flex-grow: 0 !important;
-ms-flex-positive: 0 !important;
flex-grow: 0 !important;
-webkit-flex-basis: calc((100% - 32px) / 3) !important;
-ms-flex-preferred-size: calc((100% - 32px) / 3) !important;
flex-basis: calc((100% - 32px) / 3) !important; /* 3カラム */
}
.wp-block-columns.gj-lineup > .wp-block-column:empty {
display: none; /* PC用に埋めた空カラムは出さない */
}
}
@media (max-width: 781px) {
.wp-block-columns.gj-lineup:not(.is-not-stacked-on-mobile) > .wp-block-column {
-webkit-flex-basis: calc((100% - 16px) / 2) !important;
-ms-flex-preferred-size: calc((100% - 16px) / 2) !important;
flex-basis: calc((100% - 16px) / 2) !important; /* 2カラム */
}
}
/* === 製品ラインナップの列数 ここまで === */
/* ==================================================
1.全体
================================================== */
body {
background-color: #FCFBF8;
}
@media print, screen and (max-width: 639px) {
table.is-stacked-on-mobile tr th {
border-bottom-width: 0 !important;
}
}
@media print, screen and (max-width: 639px) {
table tr:not(:last-child) td {
border-bottom-width: 0 !important;
}
}
.c-entry-summary__figure > img {
-o-object-fit: contain !important;
object-fit: contain !important;
}
.wp-block-separator {
border: none;
border-top: 1px solid var(--accent-color);
width: 25%;
}
/* ==================================================
3.ヘッダー・フッター
================================================== */
/* ヘッダー
---------------------------------------- */
header.l-header {
font-family: serif;
}
[id=drawer-nav].c-drawer--overall .c-drawer__inner {
height: 100%;
}
@media print, screen and (max-width: 1113px) {
.p-global-nav .c-navbar__item > a {
padding-left: 0.6rem;
padding-right: 0.6rem;
}
}
/* フッター
---------------------------------------- */
.l-footer {
background-color: #000;
color: #fff;
}
.l-footer a {
/* 下線は常に引いておき色だけ透明に。ホバーで色を乗せてふわっと表示する
（text-decoration 自体はアニメーションできないが、色なら可能） */
text-decoration: underline;
-webkit-text-decoration-color: transparent;
text-decoration-color: transparent;
text-decoration-thickness: 1px;
text-underline-offset: 4px;
font-size: 14px;
font-weight: bold;
-webkit-transition: -webkit-text-decoration-color 0.3s ease;
transition: -webkit-text-decoration-color 0.3s ease;
transition: text-decoration-color 0.3s ease;
transition: text-decoration-color 0.3s ease, -webkit-text-decoration-color 0.3s ease;
}
.l-footer a:hover {
-webkit-text-decoration-color: currentColor;
text-decoration-color: currentColor;
}
.l-footer .menu_child a {
font-size: 12px;
font-weight: normal;
color: #fcfcfc;
}
.l-footer {
/* .menu_child の li 同士の間だけ余白を空ける（先頭の .menu_child には付かない） */
}
.l-footer .widget_nav_menu ul > li.menu_child + li.menu_child {
margin-top: 2px;
}
.l-footer--default .c-copyright {
display: none;
}
.l-footer--default .l-footer-widget-area {
padding-bottom: 10px;
}
@media print, screen and (max-width: 639px) {
p.has-text-align-right.has-sm-text-alt-color.has-text-color.has-link-color.wp-elements-aa6464f29e6a1452a471d4f631549aa8.wp-block-paragraph {
text-align: center;
}
}
/* ==================================================
4.トップページ
================================================== */
.home .c-section:first-child {
padding-top: 0;
}
.top_mv_section .smb-section-with-bgimage__bgimage {
background-color: transparent !important;
}
@media screen and (min-width: 1300px) {
.top_mv_section.smb-section--full {
--smb-section--min-height: calc(100vw * 1194 / 2560) !important;
}
}
.c-eventList__figure .c-eventList__img, .c-eventList__figure img {
-o-object-fit: contain !important;
object-fit: contain !important;
}
@media print, screen and (max-width: 639px) {
.c-entries {
--entries--item-width: 100%;
}
}
/* お知らせ：カテゴリー（term）をタイトルの下に表示する。
カテゴリーは __meta > .c-meta > li.c-meta__item--categories と入れ子で、
タイトル（__header の中）とは兄弟ではないため order が効かない。
そこで display:contents で中間の箱を解除し、日付・タイトル・カテゴリーを
すべて __body 直下の flex アイテムにしてから order で並び替える。 */
.home .c-entry-summary__body {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.home {
/* 中間の箱（__meta と .c-meta）を解除して子を __body 直下に上げる */
}
.home .c-entry-summary__meta,
.home .c-entry-summary__meta > .c-meta {
display: contents;
}
.home .c-meta__item--published {
-webkit-box-ordinal-group: 2;
-webkit-order: 1;
-ms-flex-order: 1;
order: 1;
}
.home { /* 日付 */ }
.home .c-meta__item--categories {
-webkit-box-ordinal-group: 3;
-webkit-order: 2;
-ms-flex-order: 2;
order: 2;
}
.home { /* カテゴリー */ }
.home .c-entry-summary__header {
-webkit-box-ordinal-group: 4;
-webkit-order: 3;
-ms-flex-order: 3;
order: 3;
}
.home { /* タイトル */
/* 画像に重ねて表示されるカテゴリーは隠す（同じ内容が2つ出力されているため） */
}
.home .c-entry-summary__figure > .c-entry-summary__term {
display: none;
}
.home {
/* .c-entry-summary__term はテーマ側で position:absolute（画像に重ねる指定）に
なっていて通常フローから外れるため、meta 内の方は static に戻して
タイトルの下に流し込む */
}
.home .c-meta__item--categories {
display: block;
margin-top: 0;
}
.home .c-meta__item--categories > .c-entry-summary__term {
position: static;
display: inline-block;
background-color: transparent;
color: var(--accent-color);
}
.home h3.c-entry-summary__title {
font-size: 1rem;
margin-top: 0px;
}
.top_news .c-meta {
display: -webkit-box !important;
display: -webkit-flex !important;
display: -ms-flexbox !important;
display: flex !important;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}
.top_news :is(.c-entries--text, .c-entries--text2) .c-entries__item > a {
padding-top: 8px;
padding-bottom: 8px;
}
/* トップページ レッスン一覧の4カラム：スマホでは2列2段にする。
WordPress コアが max-width:781px で
.wp-block-columns > .wp-block-column { flex-basis:100% !important }
を当てて1列に積むため、同等以上の詳細度＋!important で上書きする。
※ ブレークポイントはコアの積み上がり位置（781px）に合わせている */
@media (max-width: 781px) {
.column_top_lesson {
--lesson-gap: 1.2em;
gap: var(--lesson-gap);
}
.column_top_lesson.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
-webkit-flex-basis: calc((100% - var(--lesson-gap)) / 2) !important;
-ms-flex-preferred-size: calc((100% - var(--lesson-gap)) / 2) !important;
flex-basis: calc((100% - var(--lesson-gap)) / 2) !important;
-webkit-box-flex: 0;
-webkit-flex-grow: 0;
-ms-flex-positive: 0;
flex-grow: 0;
}
}
.column_top_lesson .wp-block-column {
max-width: 300px;
}
.wp-block-columns.column_top_lesson {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
/* 教室紹介の円：段の数に関係なく「3列のときの1列分」の幅にそろえる
（下段が2つでも上段の3つと同じ大きさにする） */
@media (min-width: 782px) {
.wp-block-columns.column_top_lesson {
--lesson-gap: 2em;
gap: var(--lesson-gap);
}
.wp-block-columns.column_top_lesson > .wp-block-column {
-webkit-box-flex: 0 !important;
-webkit-flex: 0 0 calc((100% - var(--lesson-gap) * 2) / 3) !important;
-ms-flex: 0 0 calc((100% - var(--lesson-gap) * 2) / 3) !important;
flex: 0 0 calc((100% - var(--lesson-gap) * 2) / 3) !important;
}
}
@media (min-width: 640px) {
.top_campaign .c-entries-carousel .spider__slide {
max-width: 100%;
}
}
.top_campaign {
/* スライダー全体は幅70%・中央寄せ */
width: 70%;
margin-left: auto;
margin-right: auto;
}
@media print, screen and (max-width: 639px) {
.top_campaign {
width: 100%; /* スマホは全幅 */
}
}
.top_campaign {
/* サムネイル枠を横5：縦2 にし、画像を枠いっぱいに敷く（下の余白をなくす） */
}
.top_campaign .c-entry-summary__figure {
aspect-ratio: 5/2 !important;
height: auto !important;
padding-top: 0 !important; /* 旧 padding 方式の比率指定があれば打ち消す */
}
.top_campaign .c-entry-summary__figure img {
display: block;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.top_campaign .c-meta__item--categories {
display: none !important;
}
.top_campaign .c-entry-summary__term {
display: none;
}
.top_campaign .c-entry-summary__title {
display: none;
}
.top_campaign .spider__arrow[data-direction=next]:before {
border-right: 1px solid #D9BF35;
border-top: 1px solid #D9BF35;
width: 1.2rem;
height: 1.2rem;
}
.top_campaign .spider__arrow[data-direction=prev]:before {
border-bottom: 1px solid #D9BF35;
border-left: 1px solid #D9BF35;
width: 1.2rem;
height: 1.2rem;
}
.top_campaign .spider > .spider__arrow {
right: -5%;
}
@media print, screen and (max-width: 639px) {
.top_campaign .spider > .spider__arrow {
display: none;
}
}
.top_campaign .spider__arrow[data-direction=prev] {
left: -5%;
}
.top_campaign .spider__dots {
gap: 10px;
margin-top: 0px;
}
.top_campaign .spider__dots:not([data-thumbnails=true]) .spider__dot {
height: 7px;
width: 7px;
}
/* ==================================================
5.下層ページ
================================================== */
/* 投稿者と更新日時を非表示 */
.c-meta__item--author {
display: none !important;
}
/* 全国ハープ教室 アーカイブ リード文（H1 の下） */
.harp-archive-lead {
max-width: 1080px;
margin: 0 auto 32px;
font-size: 16px;
line-height: 1.9;
letter-spacing: 0.04em;
color: #1a1a1a;
text-align: center;
}
/* ハープ人名辞典 カテゴリー横並び
---------------------------------------- */
.post-categories-list {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
gap: 8px 10px;
margin: 32px auto;
padding: 0;
list-style: none;
}
@media print, screen and (max-width: 639px) {
.post-categories-list {
gap: 6px 8px;
margin-bottom: 24px;
}
}
.post-categories-list__item {
margin: 0;
}
.post-categories-list__item a {
display: block;
padding: 6px 18px;
border: 1px solid #d1d1d1;
border-radius: 999px;
color: #333;
font-size: 15px;
line-height: 1.4;
text-decoration: none;
-webkit-transition: background-color 0.2s, border-color 0.2s, color 0.2s;
transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.post-categories-list__item a:hover {
border-color: #333;
}
@media print, screen and (max-width: 639px) {
.post-categories-list__item a {
padding: 5px 14px;
font-size: 13px;
}
}
.post-categories-list__item.is-current a {
background-color: #333;
border-color: #333;
color: #fff;
}
/* 講師紹介（instructors）アーカイブ カテゴリー別一覧
---------------------------------------- */
/* 標準の一覧・ページャーは隠して独自レイアウトを表示 */
.post-type-archive-instructors .c-entries,
.post-type-archive-instructors .c-pagination,
.harp-school-archive .c-entries,
.harp-school-archive .c-pagination {
display: none;
}
.instructors-archive {
max-width: 1080px;
margin: 8px auto 0;
}
.instructors-group {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
gap: 40px;
padding: 38px 4px;
border-bottom: 1px solid #e7e2d8;
}
.instructors-group:first-child {
border-top: 1px solid #e7e2d8;
}
@media print, screen and (max-width: 1023px) {
.instructors-group {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
gap: 16px;
padding: 28px 2px;
}
}
.instructors-group__label {
position: relative;
-webkit-box-flex: 0;
-webkit-flex: 0 0 180px;
-ms-flex: 0 0 180px;
flex: 0 0 180px;
margin: 0;
padding-left: 18px;
color: #1a1a1a;
font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGS明朝E", "MS PMincho", serif;
font-size: 18px;
font-weight: 500;
letter-spacing: 0.08em;
line-height: 1.7;
/* 見出し左の細いゴールドの縦罫 */
}
.instructors-group__label::before {
content: "";
position: absolute;
left: 0;
top: 0.35em;
width: 2px;
height: 1em;
background: #9c7c4d;
}
@media print, screen and (max-width: 1023px) {
.instructors-group__label {
padding-left: 15px;
font-size: 17px;
-webkit-box-flex: 0;
-webkit-flex: 0 0 10px;
-ms-flex: 0 0 10px;
flex: 0 0 10px;
}
}
.instructors-group__list {
-webkit-box-flex: 1;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 18px 26px;
margin: 0;
padding: 0;
list-style: none;
}
@media print, screen and (max-width: 1027px) {
.instructors-group__list {
grid-template-columns: repeat(4, 1fr);
}
}
@media print, screen and (max-width: 1023px) {
.instructors-group__list {
grid-template-columns: repeat(3, 1fr);
gap: 16px 20px;
}
}
@media print, screen and (max-width: 639px) {
.instructors-group__list {
grid-template-columns: repeat(2, 1fr);
gap: 14px 16px;
}
}
.instructors-group__item {
margin: 0;
}
.instructors-group__link {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
gap: 8px;
color: #333;
font-size: 15px;
letter-spacing: 0.04em;
line-height: 1.5;
text-decoration: none;
-webkit-transition: color 0.25s ease;
transition: color 0.25s ease;
/* 名前：ホバーで下線がスッと伸びる上品なアンダーライン */
}
.instructors-group__link .instructors-group__name {
background-image: -webkit-gradient(linear, left top, left bottom, from(currentColor), to(currentColor));
background-image: -webkit-linear-gradient(currentColor, currentColor);
background-image: linear-gradient(currentColor, currentColor);
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 0 1px;
padding-bottom: 2px;
-webkit-transition: background-size 0.3s ease;
transition: background-size 0.3s ease;
}
.instructors-group__link {
/* ゴールドの細い円＋再生マーク */
}
.instructors-group__link::after {
content: "";
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 16px;
height: 16px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='none' stroke='%239c7c4d' stroke-width='0.9'/%3E%3Cpath d='M6.7 5.5 L10.8 8 L6.7 10.5 Z' fill='%239c7c4d'/%3E%3C/svg%3E") no-repeat center/contain;
-webkit-transition: -webkit-transform 0.25s ease;
transition: -webkit-transform 0.25s ease;
transition: transform 0.25s ease;
transition: transform 0.25s ease, -webkit-transform 0.25s ease;
}
.instructors-group__link:hover {
color: #9c7c4d;
}
.instructors-group__link:hover .instructors-group__name {
background-size: 100% 1px;
}
.instructors-group__link:hover::after {
-webkit-transform: scale(1.12);
transform: scale(1.12);
}
/* 全国ハープ教室 アーカイブ（地方 → 都道府県）
---------------------------------------- */
/* 地方インデックス（アコーディオン） */
.harp-area-nav {
max-width: 1080px;
margin: 4px auto 48px;
border-top: 1px solid #e7e2d8;
}
.harp-area-nav__item {
border-bottom: 1px solid #e7e2d8;
}
.harp-area-nav__summary {
position: relative;
list-style: none;
cursor: pointer;
padding: 17px 46px 17px 6px;
color: #1a1a1a;
font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGS明朝E", "MS PMincho", serif;
font-size: 16px;
letter-spacing: 0.08em;
-webkit-transition: color 0.2s ease;
transition: color 0.2s ease;
}
.harp-area-nav__summary::-webkit-details-marker {
display: none;
}
.harp-area-nav__summary {
/* シェブロン */
}
.harp-area-nav__summary::after {
content: "";
position: absolute;
top: 50%;
right: 16px;
width: 8px;
height: 8px;
margin-top: -6px;
border-right: 1px solid #9c7c4d;
border-bottom: 1px solid #9c7c4d;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: -webkit-transform 0.3s ease;
transition: -webkit-transform 0.3s ease;
transition: transform 0.3s ease;
transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}
.harp-area-nav__summary:hover {
color: #9c7c4d;
}
.harp-area-nav__item[open] > .harp-area-nav__summary::after {
margin-top: -2px;
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.harp-area-nav__body {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 12px 26px;
padding: 2px 6px 20px;
}
.harp-area-nav__body a {
color: #555;
font-size: 14px;
letter-spacing: 0.04em;
text-decoration: none;
-webkit-transition: color 0.2s ease;
transition: color 0.2s ease;
}
.harp-area-nav__body a:hover {
color: #9c7c4d;
}
.harp-area-nav__empty {
color: #c4c0b6;
font-size: 14px;
letter-spacing: 0.04em;
}
/* 地方見出し */
.harp-region {
margin-top: 56px;
}
.harp-region:first-child {
margin-top: 32px;
}
.harp-region__title {
margin: 0 0 4px;
text-align: center;
color: #1a1a1a;
font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGS明朝E", "MS PMincho", serif;
font-size: 22px;
font-weight: 500;
letter-spacing: 0.14em;
}
.harp-region__title::after {
content: "";
display: block;
width: 40px;
height: 2px;
margin: 16px auto 8px;
background: #9c7c4d;
}
@media print, screen and (max-width: 639px) {
.harp-region__title {
font-size: 19px;
}
}
.single-harpclassroom .smb-box:not(.box_contact) > .smb-box__background {
background-color: #ffffff;
border: 1px solid var(--accent-color);
}
/* アンカー移動時にヘッダーへ潜り込まないように */
.harp-pref {
scroll-margin-top: 100px;
}
.post-type-archive-event .c-entries {
--entries--item-width: 100%;
}
/* お問い合わせフォーム */
.cf7_math {
margin-top: 1rem;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.single-instructors .smb-box__background {
background-color: #ffffff;
border: 1px solid var(--accent-color);
}
/* 講師紹介 / 全国ハープ教室 アーカイブ：サムネイル付きカード表示
見出しを上に出し、正方形（1:1）のサムネイルを名前の上に表示する
サムネイルは最大 300px の可変幅。列は minmax(0,1fr) で
カラムが 300px 未満まで縮めるようにし、狭い画面でも右がはみ出さないようにする
---------------------------------------- */
.instructors-group {
display: block;
}
.instructors-group__label {
margin: 0 0 22px;
}
.instructors-group__list {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 36px 26px;
}
@media print, screen and (max-width: 1023px) {
.instructors-group__list {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 28px 20px;
}
}
@media print, screen and (max-width: 639px) {
.instructors-group__list {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px 16px;
}
}
.instructors-group__item {
min-width: 0;
}
.instructors-group__link {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
gap: 12px;
width: 100%;
min-width: 0;
max-width: 300px;
margin-left: auto;
margin-right: auto;
text-align: center;
/* ▷ アイコンは名前の横（&__caption）へ移したので元の位置は消す */
}
.instructors-group__link::after {
display: none;
}
.instructors-group__link:hover .instructors-group__thumb img {
-webkit-transform: scale(1.04);
transform: scale(1.04);
}
.instructors-group__link:hover .instructors-group__caption::after {
-webkit-transform: scale(1.12);
transform: scale(1.12);
}
.instructors-group__thumb {
display: block;
width: 100%;
max-width: 300px;
aspect-ratio: 1/1;
overflow: hidden;
background: #f2efe9;
}
.instructors-group__thumb img {
display: block;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center top;
object-position: center top;
-webkit-transition: -webkit-transform 0.4s ease;
transition: -webkit-transform 0.4s ease;
transition: transform 0.4s ease;
transition: transform 0.4s ease, -webkit-transform 0.4s ease;
}
.instructors-group__caption {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
gap: 8px;
max-width: 100%;
}
.instructors-group__caption .instructors-group__name {
min-width: 0;
overflow-wrap: anywhere;
}
.instructors-group__caption::after {
content: "";
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 16px;
height: 16px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='none' stroke='%239c7c4d' stroke-width='0.9'/%3E%3Cpath d='M6.7 5.5 L10.8 8 L6.7 10.5 Z' fill='%239c7c4d'/%3E%3C/svg%3E") no-repeat center/contain;
-webkit-transition: -webkit-transform 0.25s ease;
transition: -webkit-transform 0.25s ease;
transition: transform 0.25s ease;
transition: transform 0.25s ease, -webkit-transform 0.25s ease;
}
/* =============================================================
銀座十字屋 商品カード（リンク付き画像）の大きさをそろえる
2026-09-11
目的:
/selection/aoyamaharp/、/selection/accessory/、/selection/sansolyre/
などで、商品へリンクしている画像の縦横比・寸法がバラバラなため、
カードの高さがそろわず行が乱れる。これをCSSだけで整える。
入れ方:
[外観 > カスタマイズ > 追加CSS] に貼付
（または temporary_style/ginzajujiya-temporary.css の末尾に追記）
当たる範囲:
リンク先が /selection_item/（楽器CPT）か shop.ginzajujiya.com/view/item/
（オンラインショップ）の画像だけ。本文中の説明写真には当たらない。
ブロック側の編集は不要。
============================================================= */
/* -------------------------------------------------------------
1. 画像を正方形の枠にそろえる（基本）
------------------------------------------------------------- */
.c-entry__body .wp-block-image a[href*="/selection_item/"],
.c-entry__body .wp-block-image a[href*="shop.ginzajujiya.com/view/item/"],
.p-entry-content .wp-block-image a[href*="/selection_item/"],
.p-entry-content .wp-block-image a[href*="shop.ginzajujiya.com/view/item/"] {
display: block;
}
.c-entry__body .wp-block-image a[href*="/selection_item/"] > img,
.c-entry__body .wp-block-image a[href*="shop.ginzajujiya.com/view/item/"] > img,
.p-entry-content .wp-block-image a[href*="/selection_item/"] > img,
.p-entry-content .wp-block-image a[href*="shop.ginzajujiya.com/view/item/"] > img {
display: block;
width: 100%; /* 小さい画像も枠いっぱいに広げる */
height: auto;
aspect-ratio: 1/1; /* 枠の形。3 / 4 にすると縦長のカードになる */
-o-object-fit: contain;
object-fit: contain; /* 商品が切れないよう全体を収める */
-o-object-position: center;
object-position: center;
}
/* スマホでカードが1列に積まれたとき、画像が大きくなりすぎないようにする */
@media (max-width: 640px) {
.c-entry__body .wp-block-image a[href*="/selection_item/"] > img,
.c-entry__body .wp-block-image a[href*="shop.ginzajujiya.com/view/item/"] > img,
.p-entry-content .wp-block-image a[href*="/selection_item/"] > img,
.p-entry-content .wp-block-image a[href*="shop.ginzajujiya.com/view/item/"] > img {
max-width: 320px;
margin-left: auto;
margin-right: auto;
}
}
/* -------------------------------------------------------------
2. 商品名の行数がちがっても価格の行をそろえる（任意）
:has() を使用。対応ブラウザなら効き、非対応でも 1. までは効く。
------------------------------------------------------------- */
.c-entry__body .wp-block-columns:has(.wp-block-image a[href*="/selection_item/"]) > .wp-block-column,
.c-entry__body .wp-block-columns:has(.wp-block-image a[href*="shop.ginzajujiya.com/view/item/"]) > .wp-block-column,
.p-entry-content .wp-block-columns:has(.wp-block-image a[href*="/selection_item/"]) > .wp-block-column,
.p-entry-content .wp-block-columns:has(.wp-block-image a[href*="shop.ginzajujiya.com/view/item/"]) > .wp-block-column {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.c-entry__body .wp-block-columns:has(.wp-block-image a[href*="/selection_item/"]) > .wp-block-column > p:last-child,
.c-entry__body .wp-block-columns:has(.wp-block-image a[href*="shop.ginzajujiya.com/view/item/"]) > .wp-block-column > p:last-child,
.p-entry-content .wp-block-columns:has(.wp-block-image a[href*="/selection_item/"]) > .wp-block-column > p:last-child,
.p-entry-content .wp-block-columns:has(.wp-block-image a[href*="shop.ginzajujiya.com/view/item/"]) > .wp-block-column > p:last-child {
margin-top: auto; /* 価格を各カードの下端にそろえる */
margin-bottom: 0;
}
/* -------------------------------------------------------------
3. ページ別の微調整（必要なときだけ使う）
------------------------------------------------------------- */
/* アクセサリー・関連グッズ（post=2008）は縦長(3:4)の商品写真が多い。
正方形より縦長の枠のほうが余白が減る場合はこちらを有効にする。 */
/*
.page-id-2008 .c-entry__body .wp-block-image a[href*="shop.ginzajujiya.com/view/item/"] > img {
aspect-ratio: 3 / 4;
}
*/
/* 三創ライアー（post=36）は商品写真の背景色がグレー・白・濃色と
まちまちのため、枠に地色を敷くと逆に継ぎ目が目立つ。
背景は敷かない（初期値のまま）。 */
/* 楽器アーカイブ ブランド絞り込みナビ
/selection_item/ ・ /selection_item_maker/{slug}/
---------------------------------------- */
.post-type-archive-selection_item .c-entry-summary__figure, .tax-selection_item_maker .c-entry-summary__figure {
background-color: #fff;
}
.gj-maker-nav {
max-width: 1080px;
margin: 0 auto 44px;
}
@media print, screen and (max-width: 1023px) {
.gj-maker-nav {
margin-bottom: 32px;
}
}
.gj-maker-nav__label {
margin: 0 0 12px;
color: #8b8b8b;
font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGS明朝E", "MS PMincho", serif;
font-size: 13px;
letter-spacing: 0.12em;
line-height: 1.4;
}
.gj-maker-nav__list {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
@media print, screen and (max-width: 639px) {
.gj-maker-nav__list {
gap: 8px;
-webkit-box-pack: left;
-webkit-justify-content: left;
-ms-flex-pack: left;
justify-content: left;
}
}
.gj-maker-nav__item {
margin: 0;
}
.gj-maker-nav__link {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
gap: 8px;
padding: 9px 18px;
border: 1px solid #e7e2d8;
border-radius: 999px;
background-color: #fff;
color: #333;
font-size: 14px;
letter-spacing: 0.04em;
line-height: 1.4;
text-decoration: none;
white-space: nowrap;
-webkit-transition: border-color 0.25s ease, color 0.25s ease, background-color 0.25s ease;
transition: border-color 0.25s ease, color 0.25s ease, background-color 0.25s ease;
}
@media print, screen and (max-width: 639px) {
.gj-maker-nav__link {
padding: 8px 14px;
font-size: 13px;
}
}
.gj-maker-nav__link:hover, .gj-maker-nav__link:focus-visible {
border-color: #9c7c4d;
color: #9c7c4d;
}
.gj-maker-nav__link {
/* 件数。数字がそろうよう等幅の数字にする */
}
.gj-maker-nav__link .gj-maker-nav__count {
color: #a6a098;
font-size: 11px;
font-variant-numeric: tabular-nums;
letter-spacing: 0;
-webkit-transition: color 0.25s ease;
transition: color 0.25s ease;
}
.gj-maker-nav__link:hover .gj-maker-nav__count, .gj-maker-nav__link:focus-visible .gj-maker-nav__count {
color: #9c7c4d;
}
.gj-maker-nav__link {
/* 現在地 */
}
.gj-maker-nav__link.is-current {
border-color: #9c7c4d;
background-color: #9c7c4d;
color: #fff;
}
.gj-maker-nav__link.is-current .gj-maker-nav__count {
color: rgba(255, 255, 255, 0.72);
}
.gj-maker-nav__link.is-current:hover, .gj-maker-nav__link.is-current:focus-visible {
border-color: #9c7c4d;
color: #fff;
}
.gj-maker-nav__link.is-current:hover .gj-maker-nav__count, .gj-maker-nav__link.is-current:focus-visible .gj-maker-nav__count {
color: rgba(255, 255, 255, 0.72);
}
/* === 楽器一覧の列数（/selection_item/ とブランド別一覧） ここから === */
/* PC（1024px〜）5カラム／タブレット（640〜1023px）3カラム／スマホ（〜639px）2カラム
対象：/selection_item/（post-type-archive）と /selection_item_maker/〜/（ブランド別） */
.post-type-archive-selection_item .c-entries--rich-media,
.tax-selection_item_maker .c-entries--rich-media {
--entries--item-width: 50%; /* スマホ：2カラム */
--entries--gap: 20px;
}
@media (min-width: 640px) {
.post-type-archive-selection_item .c-entries--rich-media,
.tax-selection_item_maker .c-entries--rich-media {
--entries--item-width: 33.3333%; /* タブレット：3カラム */
}
}
@media (min-width: 1024px) {
.post-type-archive-selection_item .c-entries--rich-media,
.tax-selection_item_maker .c-entries--rich-media {
--entries--item-width: 20%; /* PC：5カラム */
--entries--gap: 24px;
}
/* 5カラムは1枚が細くなるので、タイトルを少し小さく */
.post-type-archive-selection_item .c-entries--rich-media .c-entry-summary__title,
.tax-selection_item_maker .c-entries--rich-media .c-entry-summary__title {
font-size: 15px;
line-height: 1.5;
}
}
/* === 楽器一覧の列数 ここまで === */
/* 一覧の商品名を、ブランドページの製品ラインナップ（p.has-small-font-size・太字）と同じ見た目に */
.post-type-archive-selection_item .c-entries--rich-media .c-entry-summary__title,
.tax-selection_item_maker .c-entries--rich-media .c-entry-summary__title {
font-family: inherit;
font-size: var(--wp--preset--font-size--small, 13px);
font-weight: 700;
line-height: 1.5;
letter-spacing: normal;
color: var(--accent-color);
}/*# sourceMappingURL=style.css.map */