由来 */
}
.p-guide__fig-img.p-guide__fig-img.p-guide__fig-img {
width: 100%;
border-radius: var(--r-sm);
}
.p-guide {
/* 370箇所 / guide の ![]()
由来 */
}
.p-guide__p-2937bf.p-guide__p-2937bf.p-guide__p-2937bf {
margin-bottom: clamp(4px, 3.3px + 0.19vw, 6px);
}
.p-guide {
/* 2箇所 / guide の 由来 */
}
.p-guide__th-088cf0.p-guide__th-088cf0.p-guide__th-088cf0 {
width: clamp(84px, 71.32px + 3.38vw, 120px);
}
.p-guide {
/* 1箇所 / guide の
由来 */
}
.p-review-thanks {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--r);
padding: clamp(22px, 17.07px + 1.31vw, 36px) clamp(14px, 10.48px + 0.94vw, 24px);
text-align: center;
margin-top: clamp(14px, 10.48px + 0.94vw, 24px);
}
.p-review-thanks__heading {
font-size: clamp(17px, 15.94px + 0.28vw, 20px);
font-weight: 800;
margin: clamp(9px, 7.24px + 0.47vw, 14px) 0 clamp(7px, 5.94px + 0.28vw, 10px);
}
.p-review-thanks__text {
font-size: clamp(13px, 12.65px + 0.09vw, 14px);
line-height: 2;
color: var(--ink-2);
margin-bottom: clamp(13px, 9.83px + 0.85vw, 22px);
}
/* ---- 申込ページのバッジ（受付終了などの控えめ表示）---- */
.p-column {
padding: clamp(16px, 12.48px + 0.94vw, 26px) 0 clamp(48px, 36.73px + 3vw, 80px);
}
.p-column__title {
font-size: clamp(23px, 3.6vw, 31px);
font-weight: 800;
line-height: 1.6;
color: var(--ink);
margin: clamp(8px, 6.59px + 0.38vw, 12px) 0;
}
.p-column__meta {
display: flex;
gap: clamp(10px, 7.89px + 0.56vw, 16px);
font-size: 12.5px;
color: var(--ink-3);
flex-wrap: wrap;
}
.p-column__meta-item {
display: inline-flex;
align-items: center;
gap: 5px;
}
.p-column__meta-ico {
width: 14px;
height: 14px;
color: var(--brand);
}
.p-column__meta-author {
display: flex;
align-items: center;
gap: 6px;
}
.p-column__meta-author-img {
flex-shrink: 0;
width: 22px;
height: 22px;
border-radius: 999px;
object-fit: cover;
background: var(--brand-050);
}
.p-column {
/* ロゴを出すとき。切り抜くと読めなくなるので、丸くせず横長のまま入れる */
}
.p-column__meta-author-img--logo {
width: auto;
height: 15px;
border-radius: 0;
object-fit: contain;
background: none;
}
.p-column__related-heading {
font-size: clamp(17px, 15.94px + 0.28vw, 20px);
font-weight: 800;
border-bottom: 2px solid var(--line);
padding-bottom: clamp(6px, 4.59px + 0.38vw, 10px);
margin-bottom: clamp(12px, 9.18px + 0.75vw, 20px);
}
/* ---- ツアー詳細 ---- */
/* ============================================================
56. 法人・企業向けページ (business/)
------------------------------------------------------------
.p-bwhy = 選ばれる理由の3カラムカード
.p-bflow = ご利用の流れのステップタイムライン(PC横/スマホ縦)
.p-bseg = 目的別ソリューション(教育機関/企業の2カラム)
.p-wp-band = ホワイトペーパー資料請求バンド
============================================================ */
.p-bwhy {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(13px, 9.83px + 0.85vw, 22px);
}
.p-bwhy__card {
position: relative;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--r);
box-shadow: var(--sh-sm);
padding: clamp(18px, 13.77px + 1.13vw, 30px) clamp(16px, 12.48px + 0.94vw, 26px) clamp(16px, 12.48px + 0.94vw, 26px);
overflow: hidden;
}
.p-bwhy__no {
position: absolute;
top: clamp(10px, 8.59px + 0.38vw, 14px);
right: clamp(13px, 11.24px + 0.47vw, 18px);
font-family: var(--font-en);
font-size: clamp(29px, 27.24px + 0.47vw, 34px);
font-weight: 800;
color: var(--brand-050);
letter-spacing: 0.02em;
line-height: 1;
user-select: none;
}
.p-bwhy__card .p-bwhy__card-heading {
font-size: clamp(14px, 13.12px + 0.23vw, 16.5px);
font-weight: 800;
line-height: 1.6;
color: var(--ink);
margin-bottom: clamp(6px, 4.59px + 0.38vw, 10px);
}
.p-bwhy__card .p-bwhy__card-text {
font-size: clamp(11px, 10.12px + 0.23vw, 13.5px);
line-height: 1.95;
color: var(--ink-2);
}
@media screen and (max-width: 860px) {
.p-bwhy {
grid-template-columns: 1fr;
}
.p-bwhy__card .p-bwhy__card-heading br {
display: none;
}
}
.p-bflow {
list-style: none;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
counter-reset: none;
padding: 0;
margin: 0;
}
.p-bflow__body .p-bflow__body-text, .p-bflow__body p {
font-size: 12.5px;
line-height: 1.9;
color: var(--ink-2);
text-align: left;
}
@media screen and (max-width: 760px) {
.p-bflow {
grid-template-columns: 1fr;
gap: 0;
}
.p-bflow__body {
padding-top: clamp(6px, 2.1px + 1.04vw, 10px);
}
}
.p-bseg {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(13px, 9.83px + 0.85vw, 22px);
}
.p-bseg__card {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--r);
box-shadow: var(--sh-sm);
padding: clamp(17px, 13.13px + 1.03vw, 28px) clamp(16px, 12.48px + 0.94vw, 26px);
}
.p-bseg__head {
display: flex;
align-items: center;
gap: clamp(10px, 7.89px + 0.56vw, 16px);
margin-bottom: clamp(9px, 7.24px + 0.47vw, 14px);
}
.p-bseg__ico {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: clamp(39px, 33.01px + 1.6vw, 56px);
height: clamp(39px, 33.01px + 1.6vw, 56px);
border-radius: clamp(12px, 10.59px + 0.38vw, 16px);
background: var(--brand-050);
color: var(--brand);
}
.p-bseg__ico .c-ico {
width: clamp(21px, 18.54px + 0.66vw, 28px);
height: clamp(21px, 18.54px + 0.66vw, 28px);
}
.p-bseg__tag {
display: inline-block;
font-size: 11.5px;
font-weight: 800;
letter-spacing: 0.05em;
color: var(--brand-ink);
margin-bottom: 4px;
}
.p-bseg__card .p-bseg__card-heading {
font-size: clamp(14px, 12.94px + 0.28vw, 17px);
font-weight: 800;
color: var(--ink);
line-height: 1.5;
}
.p-bseg__lead {
font-size: clamp(11px, 10.12px + 0.23vw, 13.5px);
line-height: 1.95;
color: var(--ink-2);
margin-bottom: clamp(9px, 7.24px + 0.47vw, 14px);
}
.p-bseg__card .c-check-list {
margin-bottom: clamp(12px, 9.18px + 0.75vw, 20px);
}
.p-bseg__card .c-btn {
margin-top: auto;
align-self: flex-start;
}
@media screen and (max-width: 860px) {
.p-bseg {
grid-template-columns: 1fr;
}
}
.p-wp-band {
display: flex;
align-items: center;
gap: clamp(12px, 9.18px + 0.75vw, 20px);
margin-top: clamp(16px, 12.48px + 0.94vw, 26px);
background: var(--navy);
border-radius: var(--r);
padding: clamp(16px, 12.48px + 0.94vw, 26px) clamp(17px, 13.13px + 1.03vw, 28px);
color: #fff;
flex-wrap: wrap;
position: relative;
isolation: isolate;
overflow: hidden;
}
.p-wp-band::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: rgba(11, 28, 43, 0.82);
}
.p-wp-band__bg {
position: absolute;
inset: 0;
z-index: -2;
line-height: 0;
}
.p-wp-band__bg-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.p-wp-band__body {
flex: 1;
min-width: clamp(168px, 142.65px + 6.76vw, 240px);
}
.p-wp-band__body .p-wp-band__body-strong, .p-wp-band__body-strong {
display: block;
font-size: clamp(13px, 12.3px + 0.19vw, 15px);
font-weight: 800;
line-height: 1.6;
margin-bottom: clamp(4px, 3.3px + 0.19vw, 6px);
}
.p-wp-band__body .p-wp-band__body-text {
font-size: 12.5px;
line-height: 1.85;
color: rgba(255, 255, 255, 0.78);
}
.p-wp-band .c-btn {
flex-shrink: 0;
}
/* ============================================================
節ごとの見せ方
・提供サービス10件は c-service-index（罫線の索引）
・選ばれる理由は紺の帯に置き、カード面にしない（下記）
・駐在員のプライベート旅行は枠なしの2カラムにする（--plain）
============================================================ */
/* ---- 紺の帯に置いた「選ばれる理由」 ---- */
.c-section--navy .p-bwhy__card {
background: transparent;
border: none;
border-left: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 0;
box-shadow: none;
padding: clamp(6px, 4.59px + 0.38vw, 10px) clamp(16px, 12.48px + 0.94vw, 26px) clamp(6px, 4.59px + 0.38vw, 10px);
}
.c-section--navy .p-bwhy__card:first-child {
border-left: none;
padding-left: 0;
}
.c-section--navy .p-bwhy__no {
position: static;
display: block;
color: rgba(255, 255, 255, 0.34);
font-size: clamp(26px, 23.89px + 0.56vw, 32px);
margin-bottom: clamp(6px, 4.59px + 0.38vw, 10px);
}
.c-section--navy .p-bwhy__card .p-bwhy__card-heading {
color: #fff;
}
.c-section--navy .p-bwhy__card .p-bwhy__card-text {
color: #dbe8f2;
}
@media screen and (max-width: 860px) {
.c-section--navy .p-bwhy__card {
border-left: none;
border-top: 1px solid rgba(255, 255, 255, 0.22);
padding: clamp(14px, 9.71px + 1.14vw, 20px) 0;
}
.c-section--navy .p-bwhy__card:first-child {
border-top: none;
padding-top: 0;
}
}
/* ---- 枠を持たないカード（駐在員のプライベート旅行） ---- */
.p-biz__grid--plain {
gap: clamp(20px, 12.96px + 1.88vw, 40px);
}
.p-biz__card--plain {
background: transparent;
border: none;
border-top: 1px solid var(--line); /* 区切りの細線 */
border-radius: 0;
box-shadow: none;
padding: clamp(14px, 11.18px + 0.75vw, 22px) 0 0;
}
.p-biz__card--plain .c-btn--ghost {
min-width: 0;
}
.p-biz {
/* 日本語の字面は行の箱より下に寄るので、矢印を字面の中心に合わせて下げる */
}
.p-biz__card--plain .c-btn--ghost .c-arrow {
translate: 0 0.0625rem;
}
.p-biz__dest-list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: clamp(6px, 5.3px + 0.19vw, 8px);
list-style: none;
padding: 0;
margin: 0;
}
.p-biz__dest {
font-size: clamp(12.5px, 11.97px + 0.14vw, 14px);
font-weight: 700;
line-height: 1.5;
color: var(--ink);
background: var(--brand-050);
border-radius: 999px;
padding: clamp(5px, 4.3px + 0.19vw, 7px) clamp(12px, 10.59px + 0.38vw, 16px);
}
.p-biz__dest-etc {
font-size: clamp(12.5px, 11.97px + 0.14vw, 14px);
color: var(--ink-2);
padding-left: clamp(2px, 1.3px + 0.19vw, 4px);
}
.p-biz__voice {
background: var(--brand-050);
border-radius: var(--r);
padding: clamp(14px, 11.89px + 0.56vw, 20px) clamp(16px, 13.18px + 0.75vw, 24px);
margin-bottom: clamp(12px, 10.59px + 0.38vw, 16px);
}
.p-biz__voice-quote {
margin: 0;
}
.p-biz__voice .p-biz__flow-text {
margin-bottom: clamp(6px, 5.3px + 0.19vw, 8px);
}
.p-biz__voice .p-biz__flow-strong {
margin-bottom: 0;
color: var(--brand-ink);
}
/* ============================================================
英語版の法人ページ（静的英語版 business/index.html の並び）で足した部品
============================================================ */
/* 選ばれる理由: 英語版は4点＋数字 */
.p-bwhy--col4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media screen and (max-width: 1000px) {
.p-bwhy--col4 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media screen and (max-width: 760px) {
.p-bwhy--col4 {
grid-template-columns: 1fr;
}
}
.p-bwhy__stat {
display: flex;
align-items: baseline;
gap: 8px;
margin-top: clamp(10px, 8.59px + 0.38vw, 14px);
padding-top: clamp(10px, 8.59px + 0.38vw, 14px);
/* 紺の写真帯（c-section--navy）の上なので、線と文字は白の透過 */
border-top: 1px solid rgba(255, 255, 255, 0.25);
}
.p-bwhy__stat-num {
flex-shrink: 0;
font-size: clamp(24px, 21.89px + 0.56vw, 30px);
font-weight: 700;
line-height: 1;
color: #fff;
}
.p-bwhy__stat-note {
font-size: clamp(11.5px, 11.15px + 0.09vw, 12.5px);
line-height: 1.6;
color: rgba(255, 255, 255, 0.8);
}
.p-bcosts,
.p-bcase,
.p-bcontact {
margin-top: clamp(18px, 14.48px + 0.94vw, 28px);
}
/* 幹事向け10ステップ: 5列×2段 */
.p-bsteps {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media screen and (max-width: 1000px) {
.p-bsteps {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media screen and (max-width: 620px) {
.p-bsteps {
grid-template-columns: 1fr;
}
}
/* 旅行会社向けの案内（ページ冒頭の帯） */
.p-b2b-note {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: clamp(6px, 4.59px + 0.38vw, 10px);
}
.p-b2b-note__text {
font-size: clamp(13px, 12.47px + 0.14vw, 14.5px);
line-height: 1.9;
color: var(--ink-2);
}
/* 団体で下がる費用: 数字4つ */
.p-bstats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(10px, 7.89px + 0.56vw, 16px);
}
.p-bstats__item {
display: flex;
flex-direction: column;
gap: 4px;
padding: clamp(14px, 11.89px + 0.56vw, 20px);
background: var(--brand-050);
border-radius: var(--r);
text-align: center;
}
.p-bstats__label {
font-size: clamp(11.5px, 11.15px + 0.09vw, 12.5px);
font-weight: 700;
color: var(--ink-2);
}
.p-bstats__num {
font-size: clamp(26px, 23.18px + 0.75vw, 34px);
font-weight: 700;
line-height: 1.15;
color: var(--brand-ink);
}
.p-bstats__note {
font-size: clamp(11.5px, 11.15px + 0.09vw, 12.5px);
line-height: 1.6;
color: var(--ink-3);
}
@media screen and (max-width: 860px) {
.p-bstats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* 比較表: 記号は中央、IACE の列を淡く塗る */
.p-bcompare .p-bcompare__cell {
text-align: center;
font-size: clamp(14px, 13.3px + 0.19vw, 16px);
color: var(--ink-3);
}
.p-bcompare__iace {
background: var(--brand-050);
}
.p-bcompare__ok {
width: 20px;
height: 20px;
color: var(--brand);
vertical-align: middle;
}
/* 補足の囲み（4ステップの下・サービスの下） */
.p-b2b__point {
margin-top: clamp(18px, 14.48px + 0.94vw, 28px);
}
.p-b2b__point .c-info-box__heading {
display: flex;
align-items: center;
gap: 0.375rem;
}
.p-b2b__point .c-info-box__heading .c-ico {
width: 16px;
height: 16px;
color: var(--brand);
}
/* 年表の下の数字3つ */
.p-bstats--col3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media screen and (max-width: 760px) {
.p-bstats--col3 {
grid-template-columns: 1fr;
}
}
.p-b2b__stats {
margin-top: clamp(22px, 17.77px + 1.13vw, 34px);
}
/* サービスカードの丸アイコン */
.p-b2b__ico {
display: grid;
place-items: center;
width: clamp(38px, 35.18px + 0.75vw, 46px);
height: clamp(38px, 35.18px + 0.75vw, 46px);
margin-bottom: clamp(6px, 4.59px + 0.38vw, 10px);
border-radius: 50%;
background: var(--brand-050);
color: var(--brand);
}
.p-b2b__ico .c-ico {
width: clamp(18px, 16.59px + 0.38vw, 22px);
height: clamp(18px, 16.59px + 0.38vw, 22px);
}
/* 文中のリンク（参考ページ・締めの下段） */
.p-b2b__ref {
font-weight: 700;
color: var(--brand-ink);
text-decoration: underline;
text-underline-offset: 3px;
transition: color 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (hover: hover) {
.p-b2b__ref:hover {
color: var(--brand);
}
}
/* 相談の締め */
.p-b2b__cta {
display: flex;
flex-direction: column;
gap: clamp(10px, 8.59px + 0.38vw, 14px);
padding: clamp(20px, 15.77px + 1.13vw, 32px);
}
.p-b2b__cta-heading {
font-size: clamp(19px, 17.24px + 0.47vw, 24px);
font-weight: 700;
line-height: 1.4;
color: var(--ink);
}
.p-b2b__cta-acts {
display: flex;
flex-wrap: wrap;
gap: clamp(8px, 6.59px + 0.38vw, 12px);
margin-top: clamp(4px, 2.59px + 0.38vw, 8px);
}
.p-b2b__cta-links {
font-size: clamp(12.5px, 12.15px + 0.09vw, 13.5px);
color: var(--ink-3);
}
/* ---- ヒーロー下の使い方ヒント・目次・節 ---- */
.p-tickets__hint {
display: block;
margin-top: clamp(8px, 6.59px + 0.38vw, 12px);
font-size: clamp(12.5px, 11.97px + 0.14vw, 14px);
opacity: 0.9;
}
.p-tickets__nav {
margin-bottom: clamp(20px, 15.77px + 1.13vw, 32px);
}
.p-tickets__sec {
scroll-margin-top: calc(var(--header-stick, 90px) + 14px);
}
.p-tickets__sec + .p-tickets__sec {
margin-top: clamp(36px, 28.96px + 1.88vw, 56px);
}
.p-tickets__lead {
margin: clamp(-6px, -4.59px + -0.38vw, -10px) 0 clamp(14px, 11.89px + 0.56vw, 20px);
font-size: clamp(13px, 12.47px + 0.14vw, 14.5px);
line-height: 1.9;
color: var(--ink-2);
}
/* ---- チケットカード ---- */
.p-tkt-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(10px, 7.89px + 0.56vw, 16px);
}
@media screen and (max-width: 1000px) {
.p-tkt-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media screen and (max-width: 760px) {
.p-tkt-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media screen and (max-width: 520px) {
.p-tkt-grid {
grid-template-columns: 1fr;
}
}
.p-tkt-card {
display: flex;
flex-direction: column;
overflow: hidden;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--r);
transition: border-color 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.p-tkt-card.is-picked {
border-color: var(--brand);
box-shadow: 0 0 0 2px var(--brand-050);
}
.p-tkt-card__link {
display: flex;
flex-direction: column;
height: 100%;
color: var(--ink);
transition: background 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (hover: hover) {
.p-tkt-card__link:hover {
background: var(--brand-050);
color: var(--ink);
}
}
.p-tkt-card__media {
position: relative;
display: block;
aspect-ratio: 3/2;
overflow: hidden;
background: var(--bg-3);
}
.p-tkt-card__img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.p-tkt-card {
/* 写真が無いチケットは共通イラスト。切り抜かずに収める */
}
.p-tkt-card__img--illust {
object-fit: contain;
padding: 12%;
}
.p-tkt-card__area {
position: absolute;
left: 8px;
bottom: 8px;
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.1875rem 0.5rem;
border-radius: 999px;
background: rgba(16, 40, 64, 0.78);
color: #fff;
font-size: 0.6875rem;
font-weight: 700;
}
.p-tkt-card__area .c-ico {
width: 12px;
height: 12px;
}
.p-tkt-card__body {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 0.25rem;
padding: clamp(10px, 8.59px + 0.38vw, 14px) clamp(12px, 10.59px + 0.38vw, 16px) clamp(12px, 10.59px + 0.38vw, 16px);
}
.p-tkt-card__en {
font-size: 0.6875rem;
letter-spacing: 0.04em;
color: var(--ink-3);
}
.p-tkt-card__title {
font-size: clamp(14px, 13.47px + 0.14vw, 15.5px);
font-weight: 700;
line-height: 1.45;
}
.p-tkt-card__text {
font-size: clamp(12px, 11.65px + 0.09vw, 13px);
line-height: 1.75;
color: var(--ink-2);
}
.p-tkt-card__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
margin-top: auto;
padding-top: clamp(8px, 6.59px + 0.38vw, 12px);
}
.p-tkt-card__id {
font-size: 0.65625rem;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--ink-3);
}
.p-tkt-card__go {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-size: 0.78125rem;
font-weight: 700;
color: var(--brand-ink);
}
.p-tkt-card__go .c-ico {
width: 14px;
height: 14px;
}
.p-tkt-card {
/* 「Add to enquiry」。選んだら塗りに変える */
}
.p-tkt-card__add {
display: inline-flex;
align-items: center;
gap: 0.3125rem;
padding: 0.375rem 0.6875rem;
border: 1.5px solid var(--brand);
border-radius: 999px;
background: #fff;
color: var(--brand-ink);
font-size: 0.75rem;
font-weight: 700;
cursor: pointer;
transition: background 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (hover: hover) {
.p-tkt-card__add:hover {
background: var(--brand-050);
}
}
.p-tkt-card__add[aria-pressed=true] {
background: var(--brand);
color: #fff;
}
.p-tkt-card__add-ico {
display: inline-grid;
place-items: center;
width: 14px;
height: 14px;
font-size: 0.9375rem;
line-height: 1;
}
.p-tkt-card__add-ico .c-ico {
width: 14px;
height: 14px;
}
.p-tkt-card__add-ico--check, .p-tkt-card__add[aria-pressed=true] .p-tkt-card__add-ico--plus {
display: none;
}
.p-tkt-card__add[aria-pressed=true] .p-tkt-card__add-ico--check {
display: inline-grid;
}
/* 追従バーがページ最下部（フッター）を隠さないよう、バーの高さぶん下に余白を取る */
.p-tickets {
padding-bottom: 4rem;
}
/* ---- 問い合わせフォーム ---- */
.p-tk-ask__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
gap: clamp(18px, 11.66px + 1.69vw, 36px);
align-items: start;
}
@media screen and (max-width: 860px) {
.p-tk-ask__grid {
grid-template-columns: 1fr;
}
}
.p-tk-ask__side {
display: flex;
flex-direction: column;
gap: clamp(10px, 8.59px + 0.38vw, 14px);
}
.p-tk-ask__title {
font-size: clamp(16px, 14.94px + 0.28vw, 19px);
font-weight: 700;
line-height: 1.5;
}
.p-tk-ask__text,
.p-tk-ask__alt {
font-size: clamp(13px, 12.65px + 0.09vw, 14px);
line-height: 1.9;
color: var(--ink-2);
}
.p-tk-picked {
display: flex;
flex-direction: column;
gap: 0.375rem;
}
.p-tk-picked__item {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.4375rem 0.625rem;
border-radius: var(--r-sm, 8px);
background: var(--brand-050);
font-size: 0.8125rem;
}
.p-tk-picked__id {
flex-shrink: 0;
font-size: 0.65625rem;
font-weight: 700;
color: var(--ink-3);
}
.p-tk-picked__name {
flex: 1 1 auto;
font-weight: 700;
}
.p-tk-picked__rm {
flex-shrink: 0;
width: 24px;
height: 24px;
border: 0;
border-radius: 50%;
background: #fff;
color: var(--ink-2);
font-size: 0.9375rem;
line-height: 1;
cursor: pointer;
transition: background 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (hover: hover) {
.p-tk-picked__rm:hover {
background: var(--line);
}
}
.p-tk-picked__empty {
font-size: 0.78125rem;
line-height: 1.8;
color: var(--ink-3);
}
/* ---- 追従バー（1枚でも追加すると出る） ---- */
.p-tk-bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 80;
background: #fff;
border-top: 1px solid var(--line);
box-shadow: 0 -6px 20px rgba(16, 40, 64, 0.1);
}
.p-tk-bar[hidden] {
display: none;
}
.p-tk-bar__in {
display: flex;
align-items: center;
gap: clamp(10px, 7.89px + 0.56vw, 16px);
padding-top: 0.625rem;
padding-bottom: 0.625rem;
}
.p-tk-bar__count {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.8125rem;
font-weight: 700;
}
.p-tk-bar__count .c-ico {
width: 18px;
height: 18px;
color: var(--brand);
}
.p-tk-bar__num {
font-size: 1rem;
color: var(--brand-ink);
}
.p-tk-bar__names {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 0.78125rem;
color: var(--ink-3);
}
@media screen and (max-width: 620px) {
.p-tk-bar__names {
display: none;
}
.p-tk-bar__in {
justify-content: space-between;
}
}
/* ---- 追加・削除の通知（バーのすぐ上） ---- */
.p-tk-toast {
position: fixed;
left: 50%;
bottom: 76px;
z-index: 90;
display: flex;
align-items: center;
gap: 0.5rem;
max-width: min(92vw, 520px);
padding: 0.625rem 1rem;
border-radius: 999px;
background: var(--navy, #102840);
color: #fff;
font-size: 0.8125rem;
line-height: 1.5;
opacity: 0;
pointer-events: none;
transform: translateX(-50%);
transition: opacity 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.p-tk-toast.is-on {
opacity: 1;
}
.p-tk-toast .c-ico {
flex-shrink: 0;
width: 16px;
height: 16px;
}
.p-transport-page {
/* 節の中央寄せボタン（表・カード列の下に置く） */
}
.p-transport-page__more-btn {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: clamp(8px, 6.59px + 0.38vw, 12px);
margin: clamp(18px, 14.48px + 0.94vw, 28px) 0 0;
}
.p-transport-page {
/* 空港アクセスの下の「ほかの移動手段」4枚。ボタンとの間を空ける */
}
.p-transport-page__more {
margin-top: clamp(20px, 16.48px + 0.94vw, 30px);
}
.p-transport-page {
/* アイコン → 本文 → 矢印 の横並び。サムネの代わりに丸アイコンを置く */
}
.p-transport-page__more-card {
align-items: center;
padding-left: clamp(12px, 9.89px + 0.56vw, 18px);
}
.p-transport-page__more-ico, .p-transport-page__case-ico {
display: grid;
place-items: center;
flex: 0 0 auto;
width: clamp(38px, 35.18px + 0.75vw, 46px);
height: clamp(38px, 35.18px + 0.75vw, 46px);
border-radius: 50%;
background: var(--brand-050);
color: var(--brand);
}
.p-transport-page__more-ico .c-ico, .p-transport-page__case-ico .c-ico {
width: clamp(18px, 16.59px + 0.38vw, 22px);
height: clamp(18px, 16.59px + 0.38vw, 22px);
}
.p-transport-page__case-ico {
margin-bottom: clamp(6px, 4.59px + 0.38vw, 10px);
}
.p-transport-page__more-body {
flex: 1 1 auto;
color: var(--ink-2);
}
.p-transport-page__more-go {
flex: 0 0 auto;
padding-right: clamp(12px, 9.89px + 0.56vw, 18px);
color: var(--brand);
}
.p-transport-page__more-go .c-ico {
width: clamp(14px, 13.3px + 0.19vw, 16px);
height: clamp(14px, 13.3px + 0.19vw, 16px);
}
.p-transport-page {
/* 表の中で折り返させたくない短いセル（日数・空港名） */
}
.p-transport-page__nowrap {
white-space: nowrap;
}
.p-transport-page {
/* 表の下の注意（アイコン + 本文） */
}
.p-transport-page__note {
margin-top: clamp(14px, 11.89px + 0.56vw, 20px);
background: #fff;
}
.p-transport-page__note-text {
display: flex;
align-items: flex-start;
gap: clamp(8px, 7.3px + 0.19vw, 10px);
font-size: clamp(12.5px, 11.97px + 0.14vw, 14px);
line-height: 1.85;
color: var(--ink-2);
}
.p-transport-page__note-text .c-ico {
flex: 0 0 auto;
width: 18px;
height: 18px;
margin-top: 0.2em;
color: var(--brand);
}
.p-transport-page__note-body {
min-width: 0;
}
.p-transport-page {
/* 商品カードの下の小さな注記 */
}
.p-transport-page__form-note {
margin: clamp(12px, 10.59px + 0.38vw, 16px) 0 0;
font-size: clamp(12px, 11.65px + 0.09vw, 13px);
color: var(--ink-3);
line-height: 1.8;
}
/* ---- 地域パス: オンラインで買える4種（券面の帯 + 商品名・価格・購入ボタン） ---- */
.p-transport-pass {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(12px, 9.89px + 0.56vw, 18px);
margin: 0;
padding: 0;
list-style: none;
}
.p-transport-pass__item {
display: flex;
flex-direction: column;
overflow: hidden;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--r-sm);
box-shadow: var(--sh-xs);
}
.p-transport-pass {
/* 券面: 紺のベタ塗り。種別・日数・対象を英字で載せる */
}
.p-transport-pass__visual {
display: flex;
flex-direction: column;
gap: clamp(2px, 1.3px + 0.19vw, 4px);
padding: clamp(14px, 12.59px + 0.38vw, 18px) clamp(14px, 12.59px + 0.38vw, 18px) clamp(12px, 10.59px + 0.38vw, 16px);
background: var(--navy);
color: #fff;
}
.p-transport-pass__type {
font-family: var(--font-en);
font-size: clamp(10px, 9.65px + 0.09vw, 11px);
font-weight: 700;
letter-spacing: 0.12em;
opacity: 0.8;
}
.p-transport-pass__days {
font-family: var(--font-en);
font-size: clamp(28px, 25.18px + 0.75vw, 36px);
font-weight: 700;
line-height: 1.1;
}
.p-transport-pass__days-unit {
margin-left: 0.25em;
font-size: clamp(11px, 10.3px + 0.19vw, 13px);
letter-spacing: 0.08em;
}
.p-transport-pass__who {
font-size: clamp(11px, 10.47px + 0.14vw, 12.5px);
line-height: 1.5;
}
.p-transport-pass__body {
display: flex;
flex: 1 1 auto;
flex-direction: column;
gap: clamp(6px, 4.59px + 0.38vw, 10px);
padding: clamp(12px, 10.59px + 0.38vw, 16px) clamp(14px, 12.59px + 0.38vw, 18px) clamp(14px, 12.59px + 0.38vw, 18px);
}
.p-transport-pass__name {
font-size: clamp(13px, 12.47px + 0.14vw, 14.5px);
font-weight: 700;
line-height: 1.5;
color: var(--ink);
}
.p-transport-pass__price {
margin-top: auto;
font-family: var(--font-en);
font-size: clamp(18px, 16.59px + 0.38vw, 22px);
font-weight: 700;
color: var(--brand-ink);
}
.p-transport-pass__btn {
justify-content: center;
width: 100%;
}
@media screen and (max-width: 860px) {
.p-transport-pass {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media screen and (max-width: 520px) {
.p-transport-pass {
grid-template-columns: 1fr;
}
}
/* ---------- 数字の帯（ヒーロー直下の3枚） ---------- */
.p-trb-facts {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(10px, 7.89px + 0.56vw, 16px);
}
.p-trb-facts__item {
display: flex;
flex-direction: column;
gap: 0.25rem;
padding: clamp(14px, 11.89px + 0.56vw, 20px) clamp(14px, 11.18px + 0.75vw, 22px);
background: var(--brand-050);
border-radius: var(--r);
}
.p-trb-facts__label {
font-size: clamp(11.5px, 11.15px + 0.09vw, 12.5px);
font-weight: 700;
color: var(--ink-2);
}
.p-trb-facts__value {
font-family: var(--font-en);
font-size: clamp(26px, 23.18px + 0.75vw, 34px);
font-weight: 700;
line-height: 1.15;
color: var(--brand-ink);
}
.p-trb-facts {
/* 数字の前の「from ¥」「about ¥」 */
}
.p-trb-facts__unit {
font-size: clamp(13px, 12.3px + 0.19vw, 15px);
font-weight: 700;
margin-right: 0.125rem;
}
.p-trb-facts {
/* 数字ではなく言葉で出す枚（Prepaid in Canadian dollars など） */
}
.p-trb-facts__value--text {
font-family: var(--font-sans);
font-size: clamp(16px, 14.94px + 0.28vw, 19px);
line-height: 1.4;
}
.p-trb-facts__note {
font-size: clamp(11.5px, 11.15px + 0.09vw, 12.5px);
line-height: 1.6;
color: var(--ink-3);
}
.p-trb-facts {
/* 本文の途中に置くとき（レンタカーの3つの利点） */
}
.p-trb-facts--mid {
margin-top: clamp(20px, 16.48px + 0.94vw, 30px);
}
@media screen and (max-width: 760px) {
.p-trb-facts {
grid-template-columns: 1fr;
}
}
/* ---------- カードの見出しに添える丸アイコン ---------- */
.p-trb-ico {
display: inline-flex;
align-items: center;
justify-content: center;
width: clamp(34px, 31.89px + 0.56vw, 40px);
height: clamp(34px, 31.89px + 0.56vw, 40px);
margin-bottom: clamp(6px, 4.94px + 0.28vw, 9px);
border-radius: 50%;
background: var(--brand-050);
color: var(--brand-ink);
}
.p-trb-ico .c-ico {
width: clamp(17px, 15.94px + 0.28vw, 20px);
height: clamp(17px, 15.94px + 0.28vw, 20px);
}
/* ---------- 空港シャトルの料金表 ---------- */
.p-trb-rate {
/* 4列の金額が詰まらないよう、狭い画面では横スクロールに回す */
min-width: 38.75rem;
}
.p-trb-rate .p-trb-rate__sub {
display: block;
font-size: clamp(10.5px, 10.15px + 0.09vw, 11.5px);
font-weight: 500;
opacity: 0.85;
}
.p-trb-rate .p-trb-rate__en {
display: block;
font-size: clamp(10.5px, 10.15px + 0.09vw, 11.5px);
font-weight: 500;
color: var(--ink-3);
}
.p-trb-rate .p-trb-rate__num {
text-align: right;
white-space: nowrap;
}
.p-trb-rate .p-trb-rate__na {
font-family: var(--font-sans);
font-size: clamp(11.5px, 11.15px + 0.09vw, 12.5px);
font-weight: 500;
color: var(--ink-mute);
}
/* ---------- 1つの c-section に並べる小節（東京 / 大阪の料金表） ---------- */
.p-trb-block + .p-trb-block,
.p-trb-facts + .p-trb-block {
margin-top: clamp(36px, 28.96px + 1.88vw, 56px);
}
/* ---------- 補足の囲み（表の読み方・IDP の注意） ---------- */
.p-trb-note {
margin-top: clamp(18px, 14.48px + 0.94vw, 28px);
}
.p-trb-note__text {
font-size: clamp(13px, 12.47px + 0.14vw, 14.5px);
line-height: 1.9;
color: var(--ink-2);
}
.p-trb-note {
/* 原稿で太字の語（IDP の条件・チャイルドシート・赤信号） */
}
.p-trb-note__strong {
font-weight: 700;
color: var(--ink);
}
/* ---------- 高速バス: 昼行 / 夜行の2枚（c-plan-card を写真なしで使う） ---------- */
.p-trb-vs__card--pick {
border-color: var(--brand);
box-shadow: 0 0 0 1px var(--brand);
}
.p-trb-vs__tag {
align-self: flex-start;
font-size: 0.71875rem;
font-weight: 700;
letter-spacing: 0.04em;
color: #fff;
background: var(--navy);
border-radius: 999px;
padding: 0.25rem clamp(9px, 7.94px + 0.28vw, 12px);
}
/* ---------- 高速バス: 人気路線のカード ---------- */
.p-trb-routes {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(10px, 7.89px + 0.56vw, 16px);
}
.p-trb-routes__item {
display: flex;
flex-direction: column;
gap: clamp(4px, 3.3px + 0.19vw, 6px);
padding: clamp(14px, 11.89px + 0.56vw, 20px) clamp(14px, 11.89px + 0.56vw, 20px);
background: #fff;
border: 1px solid var(--line);
border-radius: var(--r-sm);
box-shadow: var(--sh-xs);
}
.p-trb-routes__en {
font-family: var(--font-en);
font-size: clamp(10.5px, 10.15px + 0.09vw, 11.5px);
letter-spacing: 0.12em;
color: var(--ink-3);
}
.p-trb-routes__title {
font-size: clamp(15px, 14.3px + 0.19vw, 17px);
font-weight: 800;
line-height: 1.45;
color: var(--ink);
}
.p-trb-routes__price {
font-size: clamp(13.5px, 12.97px + 0.14vw, 15px);
font-weight: 700;
color: var(--accent-ink);
}
.p-trb-routes__text {
font-size: clamp(12.5px, 12.15px + 0.09vw, 13.5px);
line-height: 1.8;
color: var(--ink-2);
}
.p-trb-routes__tag {
display: inline-flex;
align-items: center;
gap: 0.3125rem;
align-self: flex-start;
margin-top: auto;
padding: 0.1875rem clamp(8px, 7.3px + 0.19vw, 10px);
border-radius: 999px;
background: var(--bg-2);
font-size: clamp(11px, 10.65px + 0.09vw, 12px);
font-weight: 700;
color: var(--ink-2);
}
.p-trb-routes__tag .c-ico {
width: 13px;
height: 13px;
color: var(--brand);
}
@media screen and (max-width: 860px) {
.p-trb-routes {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media screen and (max-width: 620px) {
.p-trb-routes {
grid-template-columns: 1fr;
}
}
/* ---------- 高速バス: 乗る前のルール（c-point-list--boxed を2列に） ---------- */
.p-trb-points {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media screen and (max-width: 760px) {
.p-trb-points {
grid-template-columns: 1fr;
}
}
/* ---------- 提携サイトへのボタン＋但し書き ---------- */
.p-trb-book {
margin-top: clamp(20px, 17.18px + 0.75vw, 28px);
text-align: center;
}
.p-trb-book__note {
max-width: 38.75rem;
margin: clamp(8px, 6.59px + 0.38vw, 12px) auto 0;
font-size: clamp(11.5px, 11.15px + 0.09vw, 12.5px);
line-height: 1.7;
color: var(--ink-3);
}
/* ---------- 専用車送迎: ツアーカードの下の案内とボタン ---------- */
.p-trb-transfer__notice {
margin-top: clamp(18px, 15.89px + 0.56vw, 24px);
}
.p-trb-transfer__acts {
margin-top: clamp(16px, 14.59px + 0.38vw, 20px);
}
/* ---- よくわかるガイド（原稿は inc/jrpass-guide.php）----
開閉の枠は c-accordion。中身の体裁だけここで持つ。 */
.p-jrpass-guide {
margin-top: clamp(12px, 9.89px + 0.56vw, 18px);
}
.p-jrpass-guide__text {
font-size: clamp(12px, 11.47px + 0.14vw, 13.5px);
line-height: 1.95;
color: var(--ink-2);
}
.p-jrpass-guide__text + .p-jrpass-guide__text {
margin-top: clamp(7px, 5.59px + 0.38vw, 11px);
}
.p-jrpass-guide__list {
margin: clamp(7px, 5.59px + 0.38vw, 11px) 0 0;
padding-left: 1.2em;
list-style: disc;
font-size: clamp(12px, 11.47px + 0.14vw, 13.5px);
line-height: 1.95;
color: var(--ink-2);
}
.p-jrpass-guide__item + .p-jrpass-guide__item {
margin-top: 4px;
}
.p-jrpass-guide__note {
font-size: clamp(11px, 10.47px + 0.14vw, 12.5px);
color: var(--ink-3);
}
.p-jrpass-guide {
/* 表・注記は共用部品。前の要素との間合いだけ足す */
}
.p-jrpass-guide .c-table-wrap {
margin-top: clamp(9px, 7.24px + 0.47vw, 14px);
}
/* ============================================================
英語化で足した部品: 診断（.p-jrq）・購入ゲート（.p-jrp-gate）・商品カード（.p-jrp-card）
動きは main.js の「JRパス」の節（data-jrp-* / data-jrq-* を見る）
============================================================ */
/* ---- ページ内の間合い ---- */
.p-jrp__nav {
margin-bottom: clamp(20px, 17.18px + 0.75vw, 28px);
}
.p-jrp__warn {
margin-bottom: clamp(20px, 17.18px + 0.75vw, 28px);
}
.p-jrp__warn a {
color: inherit;
text-decoration: underline;
text-underline-offset: 2px;
}
.p-jrp__group {
display: flex;
align-items: center;
gap: 0.5rem;
margin: clamp(28px, 23.77px + 1.13vw, 40px) 0 clamp(12px, 10.59px + 0.38vw, 16px);
font-size: clamp(16px, 14.94px + 0.28vw, 19px);
font-weight: 700;
color: var(--ink);
}
.p-jrp__group .c-ico {
width: clamp(18px, 16.59px + 0.38vw, 22px);
height: clamp(18px, 16.59px + 0.38vw, 22px);
color: var(--brand);
flex: 0 0 auto;
}
.p-jrp__notice {
margin-top: clamp(14px, 11.89px + 0.56vw, 20px);
}
.p-jrp__price {
min-width: 32.5rem;
}
/* ---- ① 3問診断 ---- */
.p-jrq {
background: var(--brand-050);
border: 1px solid var(--brand-100);
border-radius: var(--r);
padding: clamp(16px, 12.48px + 0.94vw, 26px) clamp(14px, 9.07px + 1.31vw, 28px);
}
.p-jrq__title {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: clamp(10px, 8.59px + 0.38vw, 14px);
font-size: clamp(16px, 14.94px + 0.28vw, 19px);
font-weight: 700;
color: var(--brand-ink);
}
.p-jrq__title .c-ico {
width: clamp(18px, 16.59px + 0.38vw, 22px);
height: clamp(18px, 16.59px + 0.38vw, 22px);
flex: 0 0 auto;
}
.p-jrq__q + .p-jrq__q {
margin-top: clamp(10px, 8.59px + 0.38vw, 14px);
}
.p-jrq__label {
margin-bottom: 0.375rem;
font-size: clamp(13px, 12.47px + 0.14vw, 14.5px);
font-weight: 700;
color: var(--ink);
}
.p-jrq__chip {
cursor: pointer;
white-space: normal;
text-align: left;
}
.p-jrq__chip[aria-pressed=true] {
background: var(--brand);
border-color: var(--brand);
color: #fff;
}
@media (hover: hover) {
.p-jrq__chip:hover {
border-color: var(--brand);
}
}
.p-jrq__result {
margin-top: clamp(12px, 10.59px + 0.38vw, 16px);
padding-top: clamp(10px, 8.59px + 0.38vw, 14px);
border-top: 1px dashed var(--brand-100);
font-size: clamp(13px, 12.47px + 0.14vw, 14.5px);
line-height: 1.85;
color: var(--ink-2);
}
.p-jrq__strong {
color: var(--ink);
font-weight: 700;
}
/* ---- ② 購入ゲート ---- */
.p-jrp-gate {
margin-top: clamp(20px, 17.18px + 0.75vw, 28px);
background: #fff;
border: 1px solid var(--line-strong);
border-radius: var(--r);
padding: clamp(18px, 14.48px + 0.94vw, 28px) clamp(14px, 9.07px + 1.31vw, 28px);
scroll-margin-top: calc(var(--header-h, 64px) + 16px);
}
.p-jrp-gate__en {
font-family: var(--font-en);
font-size: clamp(11px, 10.65px + 0.09vw, 12px);
font-weight: 600;
letter-spacing: 0.12em;
color: var(--brand);
}
.p-jrp-gate__title {
margin-top: 0.125rem;
font-size: clamp(18px, 16.59px + 0.38vw, 22px);
font-weight: 700;
color: var(--ink);
}
.p-jrp-gate__product {
margin-top: clamp(8px, 6.59px + 0.38vw, 12px);
padding: clamp(8px, 7.3px + 0.19vw, 10px) clamp(10px, 8.59px + 0.38vw, 14px);
background: var(--bg-2);
border-radius: var(--r-sm);
font-size: clamp(13px, 12.47px + 0.14vw, 14.5px);
line-height: 1.7;
color: var(--ink-2);
}
.p-jrp-gate__product-strong {
color: var(--ink);
font-weight: 700;
}
.p-jrp-gate__lead {
margin-top: clamp(10px, 8.59px + 0.38vw, 14px);
font-size: clamp(12.5px, 11.97px + 0.14vw, 14px);
line-height: 1.8;
color: var(--ink-2);
}
.p-jrp-gate__checks {
margin-top: clamp(8px, 6.59px + 0.38vw, 12px);
}
.p-jrp-gate__check-strong {
color: var(--ink);
font-weight: 700;
}
.p-jrp-gate__check-note {
display: block;
color: var(--ink-3);
}
.p-jrp-gate {
/* 進み具合。JS が data-done（0〜4）を書き換える。インライン style は使わない */
}
.p-jrp-gate__progress {
height: 6px;
margin-top: clamp(12px, 10.59px + 0.38vw, 16px);
background: var(--bg-3);
border-radius: 999px;
overflow: hidden;
}
.p-jrp-gate__bar {
display: block;
width: 0;
height: 100%;
background: var(--brand);
border-radius: inherit;
transition: width 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.p-jrp-gate__progress[data-done="1"] .p-jrp-gate__bar {
width: 25%;
}
.p-jrp-gate__progress[data-done="2"] .p-jrp-gate__bar {
width: 50%;
}
.p-jrp-gate__progress[data-done="3"] .p-jrp-gate__bar {
width: 75%;
}
.p-jrp-gate__progress[data-done="4"] .p-jrp-gate__bar {
width: 100%;
}
.p-jrp-gate__status {
min-height: 1.7em;
margin-top: 0.5rem;
font-size: clamp(12.5px, 12.15px + 0.09vw, 13.5px);
font-weight: 600;
color: var(--brand-ink);
}
.p-jrp-gate__foot {
margin-top: clamp(10px, 8.59px + 0.38vw, 14px);
}
.p-jrp-gate {
/* 条件がそろうまで押せない見た目（クリックは main.js が止める） */
}
.p-jrp-gate__buy.is-disabled {
opacity: 0.45;
cursor: not-allowed;
}
.p-jrp-gate__note {
margin-top: clamp(8px, 6.59px + 0.38vw, 12px);
font-size: clamp(11.5px, 11.15px + 0.09vw, 12.5px);
color: var(--ink-3);
}
/* ---- ③ 商品カード ---- */
.p-jrp-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(10px, 7.18px + 0.75vw, 18px);
}
@media screen and (max-width: 860px) {
.p-jrp-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media screen and (max-width: 520px) {
.p-jrp-grid {
grid-template-columns: minmax(0, 1fr);
}
}
.p-jrp-card {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--r);
overflow: hidden;
}
.p-jrp-card.is-picked {
border-color: var(--brand);
box-shadow: 0 0 0 2px var(--brand);
}
.p-jrp-card {
/* 券面風のアイキャッチ（分類ごとにベタ色） */
}
.p-jrp-card__visual {
display: flex;
flex-direction: column;
gap: 0.125rem;
padding: clamp(12px, 10.59px + 0.38vw, 16px) clamp(14px, 12.59px + 0.38vw, 18px);
color: #fff;
background: var(--navy);
}
.p-jrp-card__visual--green {
background: #2f6b4f;
}
.p-jrp-card__visual--area {
background: var(--brand);
}
.p-jrp-card__visual--sim {
background: var(--ink-2);
}
.p-jrp-card__type {
font-family: var(--font-en);
font-size: clamp(10px, 9.65px + 0.09vw, 11px);
font-weight: 600;
letter-spacing: 0.1em;
opacity: 0.85;
}
.p-jrp-card__days {
font-family: var(--font-en);
font-size: clamp(28px, 25.18px + 0.75vw, 36px);
font-weight: 700;
line-height: 1.1;
}
.p-jrp-card__days-unit {
margin-left: 0.25rem;
font-size: clamp(11px, 10.3px + 0.19vw, 13px);
letter-spacing: 0.08em;
}
.p-jrp-card__who {
font-size: clamp(12px, 11.65px + 0.09vw, 13px);
}
.p-jrp-card__body {
display: flex;
flex-direction: column;
flex: 1 1 auto;
gap: 0.375rem;
padding: clamp(12px, 10.59px + 0.38vw, 16px) clamp(14px, 12.59px + 0.38vw, 18px);
}
.p-jrp-card__name {
font-size: clamp(13px, 12.47px + 0.14vw, 14.5px);
font-weight: 700;
line-height: 1.5;
color: var(--ink);
}
.p-jrp-card__price {
margin-top: auto;
font-family: var(--font-en);
font-size: clamp(18px, 16.59px + 0.38vw, 22px);
font-weight: 700;
color: var(--ink);
}
.p-jrp-card__btn {
align-self: flex-start;
}
/* ---- 一覧: カードが2枚の節は2列にする（p-svc-grid は3列が既定） ---- */
.p-svc-grid.p-sup-index__grid--col2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media screen and (max-width: 860px) {
.p-svc-grid.p-sup-index__grid--col2 {
grid-template-columns: minmax(0, 1fr);
}
}
/* ---- 数字カード（静的版 fact-cards）。ラベル → 大きな数字 → 補足 ---- */
.p-sup-facts {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(10px, 7.89px + 0.56vw, 16px);
margin: 0;
padding: 0;
list-style: none;
}
.p-sup-facts--col3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.p-sup-facts {
/* 表の下に続けて置くとき */
}
.p-sup-facts--after {
margin-top: clamp(16px, 13.18px + 0.75vw, 24px);
}
.p-sup-facts__item {
display: flex;
flex-direction: column;
gap: clamp(3px, 1.94px + 0.28vw, 6px);
padding: clamp(14px, 11.18px + 0.75vw, 22px) clamp(14px, 11.89px + 0.56vw, 20px);
background: #fff;
border: 1px solid var(--line);
border-radius: var(--r-sm);
box-shadow: var(--sh-xs);
}
.p-sup-facts__label {
font-size: clamp(11px, 10.47px + 0.14vw, 12.5px);
font-weight: 700;
color: var(--ink-3);
letter-spacing: 0.02em;
}
.p-sup-facts__num {
font-family: var(--font-en);
font-size: clamp(24px, 21.18px + 0.75vw, 32px);
font-weight: 800;
line-height: 1.15;
color: var(--navy);
}
.p-sup-facts {
/* 「Before discharge」のような文字の値は一段小さく、本文の書体で */
}
.p-sup-facts__num--text {
font-family: inherit;
font-size: clamp(17px, 15.59px + 0.38vw, 21px);
line-height: 1.35;
}
.p-sup-facts__unit {
font-size: 0.55em;
font-weight: 700;
margin-inline: 0.08em;
}
.p-sup-facts__note {
font-size: clamp(11.5px, 10.97px + 0.14vw, 13px);
line-height: 1.7;
color: var(--ink-2);
}
@media screen and (max-width: 860px) {
.p-sup-facts {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media screen and (max-width: 520px) {
.p-sup-facts,
.p-sup-facts--col3 {
grid-template-columns: minmax(0, 1fr);
}
}
/* ---- 節の中の本文・小さな注記・関連ページ ---- */
.p-sup-text {
max-width: clamp(560px, 468.45px + 24.41vw, 820px);
margin: clamp(16px, 12.48px + 0.94vw, 26px) auto 0;
font-size: clamp(13px, 12.3px + 0.19vw, 15px);
line-height: 1.95;
color: var(--ink-2);
}
.p-sup-small {
margin-top: clamp(8px, 6.59px + 0.38vw, 12px);
font-size: 0.75rem;
line-height: 1.7;
color: var(--ink-3);
}
.p-sup-related {
margin-top: clamp(16px, 13.18px + 0.75vw, 24px);
font-size: 0.78125rem;
line-height: 1.8;
color: var(--ink-3);
}
.p-sup-strong {
font-family: var(--font-en);
font-weight: 800;
color: var(--ink);
}
/* カード列などを前の要素から離す */
.p-sup-after {
margin-top: clamp(16px, 13.18px + 0.75vw, 24px);
}
/* ---- 提携先への購入・見積りボタン ---- */
.p-sup-buy {
margin-top: clamp(20px, 15.77px + 1.13vw, 32px);
text-align: center;
}
.p-sup-buy__note {
margin-top: clamp(6px, 4.94px + 0.28vw, 9px);
font-size: 0.75rem;
line-height: 1.7;
color: var(--ink-3);
}
/* ---- 囲み（c-info-box）・1行の案内 ---- */
.p-sup-box {
margin-top: clamp(16px, 13.18px + 0.75vw, 24px);
}
.p-sup-box__text {
font-size: clamp(12.5px, 11.97px + 0.14vw, 14px);
line-height: 1.85;
color: var(--ink-2);
}
/* 注意点を2列に敷き詰めるとき（c-info-grid）。上の余白はグリッドの gap に任せる */
.p-sup-boxes {
margin-top: clamp(14px, 11.18px + 0.75vw, 22px);
}
.p-sup-boxes .p-sup-box {
margin-top: 0;
}
.p-sup-notice {
display: flex;
align-items: flex-start;
gap: clamp(8px, 7.3px + 0.19vw, 10px);
margin-top: clamp(16px, 13.18px + 0.75vw, 24px);
font-size: clamp(12.5px, 11.97px + 0.14vw, 14px);
line-height: 1.8;
color: var(--ink-2);
}
.p-sup-notice .c-ico {
flex-shrink: 0;
width: 18px;
height: 18px;
margin-top: 0.2em;
color: var(--brand);
}
.p-sup-notice__tel {
font-family: var(--font-en);
font-weight: 700;
white-space: nowrap;
}
/* ---- アイコンつきカード（c-merit-card の縦積み） ---- */
.p-sup-cards {
margin-top: clamp(14px, 11.18px + 0.75vw, 22px);
}
.p-sup-cards__body {
display: flex;
flex-direction: column;
}
.p-sup-cards__text {
display: block;
color: var(--ink-2);
}
.p-sup-ico {
display: grid;
place-items: center;
width: clamp(36px, 33.18px + 0.75vw, 44px);
height: clamp(36px, 33.18px + 0.75vw, 44px);
margin-bottom: clamp(8px, 6.59px + 0.38vw, 12px);
border-radius: var(--r-sm);
background: var(--brand-050);
color: var(--brand-ink);
}
.p-sup-ico .c-ico {
width: clamp(18px, 16.59px + 0.38vw, 22px);
height: clamp(18px, 16.59px + 0.38vw, 22px);
}
/* カードの下に添える要点（静的版 point-card__fig） */
.p-sup-fig {
display: flex;
align-items: flex-start;
gap: clamp(8px, 7.3px + 0.19vw, 10px);
margin-top: clamp(10px, 8.59px + 0.38vw, 14px);
padding: clamp(10px, 8.94px + 0.28vw, 13px) clamp(11px, 9.94px + 0.28vw, 14px);
border-radius: var(--r-sm);
background: var(--bg-2);
}
.p-sup-fig .c-ico {
flex-shrink: 0;
width: 18px;
height: 18px;
margin-top: 0.2em;
color: var(--brand);
}
.p-sup-fig__title {
display: block;
font-size: clamp(12.5px, 11.97px + 0.14vw, 14px);
font-weight: 700;
line-height: 1.5;
color: var(--ink);
}
.p-sup-fig__text {
display: block;
font-size: clamp(11px, 10.47px + 0.14vw, 12.5px);
line-height: 1.65;
color: var(--ink-3);
}
/* ---- 番号つきの横並び（c-step-row）の列数違い ---- */
.c-step-row.p-sup-steps--col2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(16px, 10.37px + 1.5vw, 32px);
}
.c-step-row.p-sup-steps--col5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media screen and (max-width: 860px) {
.c-step-row.p-sup-steps--col5 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media screen and (max-width: 760px) {
.c-step-row.p-sup-steps--col2,
.c-step-row.p-sup-steps--col5 {
grid-template-columns: minmax(0, 1fr);
}
}
/* 縦の手順（p-itinerary）を見出しの下に置くときの間 */
.p-sup-flow {
margin-top: clamp(14px, 11.18px + 0.75vw, 22px);
}
/* ---- 表 ---- */
.p-sup-table {
margin-top: clamp(4px, 2.59px + 0.38vw, 8px);
}
/* ---- チェックつきの箇条書き（静的版 tick-list） ---- */
.p-sup-ticks {
display: grid;
gap: clamp(5px, 4.3px + 0.19vw, 7px);
margin: 0;
padding: 0;
list-style: none;
}
.p-sup-ticks__item {
display: flex;
align-items: flex-start;
gap: clamp(6px, 5.3px + 0.19vw, 8px);
font-size: clamp(12.5px, 11.97px + 0.14vw, 14px);
line-height: 1.75;
color: var(--ink-2);
}
.p-sup-ticks__item .c-ico {
flex-shrink: 0;
width: 15px;
height: 15px;
margin-top: 0.3em;
color: var(--brand);
}
/* ---- 2択の比較（静的版 vs-grid）。左がおすすめ側 ---- */
.p-sup-vs {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: stretch;
gap: clamp(10px, 7.18px + 0.75vw, 18px);
margin-top: clamp(14px, 11.18px + 0.75vw, 22px);
}
.p-sup-vs__mid {
align-self: center;
font-family: var(--font-en);
font-style: italic;
font-weight: 800;
font-size: clamp(16px, 13.89px + 0.56vw, 22px);
color: var(--ink-3);
}
.p-sup-vs__card--pick {
border: 2px solid var(--brand);
}
.p-sup-vs__tag {
align-self: flex-start;
padding: 0.25rem clamp(9px, 7.94px + 0.28vw, 12px);
border-radius: 999px;
background: var(--brand);
color: #fff;
font-size: 0.71875rem;
font-weight: 700;
letter-spacing: 0.02em;
}
.p-sup-vs__lead {
font-size: clamp(13px, 12.3px + 0.19vw, 15px);
font-weight: 700;
color: var(--ink-3);
}
.p-sup-vs__lead--pick {
font-family: var(--font-en);
font-size: clamp(17px, 15.59px + 0.38vw, 21px);
font-weight: 800;
color: var(--navy);
}
@media screen and (max-width: 760px) {
.p-sup-vs {
grid-template-columns: minmax(0, 1fr);
}
.p-sup-vs__mid {
justify-self: center;
}
}
/* ---- 締めの相談CTA（p-svc-cta）の要点と支店案内リンク ---- */
.p-sup-cta {
margin-top: 0;
}
.p-sup-cta__points {
margin-top: clamp(8px, 6.59px + 0.38vw, 12px);
}
.p-sup-cta__sub {
display: inline-flex;
align-items: center;
gap: clamp(4px, 3.3px + 0.19vw, 6px);
font-size: 0.78125rem;
font-weight: 700;
color: var(--brand-ink);
}
.p-sup-cta__sub .c-ico {
width: 14px;
height: 14px;
}
/* ============================================================
はじめての日本（page-first-trip.php）
============================================================ */
/* ---- ヒーロー ---- */
.p-ft-hero {
/* PC では2行目の途中の改行を消し、タブレット幅だけ折る。
スマホ幅は2行目が1行に収まらず「to know」だけが取り残されるので、折らずに流す */
}
.p-ft-hero__br {
display: none;
}
@media screen and (min-width: 521px) and (max-width: 760px) {
.p-ft-hero__br {
display: inline;
}
}
/* ---- 要点・ボタン・数字の帯 ---- */
.p-ft-intro__top {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: clamp(12px, 9.89px + 0.56vw, 18px) clamp(18px, 13.07px + 1.31vw, 32px);
}
.p-ft-intro__points {
display: flex;
flex-wrap: wrap;
gap: clamp(6px, 4.59px + 0.38vw, 10px) clamp(12px, 8.48px + 0.94vw, 22px);
list-style: none;
margin: 0;
padding: 0;
flex: 1 1 100%;
}
.p-ft-intro__point {
display: inline-flex;
align-items: center;
gap: clamp(5px, 4.3px + 0.19vw, 7px);
font-size: clamp(13px, 12.3px + 0.19vw, 15px);
font-weight: 700;
color: var(--ink);
}
.p-ft-intro__point .c-ico {
width: clamp(16px, 14.94px + 0.28vw, 19px);
height: clamp(16px, 14.94px + 0.28vw, 19px);
color: var(--brand);
flex-shrink: 0;
}
.p-ft-intro__actions {
display: flex;
flex-wrap: wrap;
gap: clamp(8px, 6.59px + 0.38vw, 12px);
}
.p-ft-intro__meta {
display: flex;
flex-wrap: wrap;
gap: clamp(6px, 4.59px + 0.38vw, 10px) clamp(14px, 11.89px + 0.56vw, 20px);
font-size: clamp(11.5px, 10.97px + 0.14vw, 13px);
color: var(--ink-3);
}
.p-ft-intro__meta-item {
display: inline-flex;
align-items: center;
gap: clamp(4px, 3.3px + 0.19vw, 6px);
}
.p-ft-intro__meta-item .c-ico {
width: 0.9375rem;
height: 0.9375rem;
color: var(--ink-3);
}
.p-ft-band {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(8px, 5.89px + 0.56vw, 14px);
margin: clamp(20px, 15.77px + 1.13vw, 32px) 0 0;
padding: 0;
list-style: none;
}
.p-ft-band__item {
display: flex;
align-items: center;
gap: clamp(8px, 6.59px + 0.38vw, 12px);
padding: clamp(12px, 9.89px + 0.56vw, 18px) clamp(12px, 9.18px + 0.75vw, 20px);
background: #fff;
border: 1px solid var(--line);
border-radius: var(--r);
}
.p-ft-band__num {
flex-shrink: 0;
font-family: var(--font-en);
font-size: clamp(24px, 20.48px + 0.94vw, 34px);
font-weight: 800;
line-height: 1;
color: var(--brand-ink);
}
.p-ft-band__label {
font-size: clamp(11px, 10.47px + 0.14vw, 12.5px);
line-height: 1.45;
color: var(--ink-2);
}
@media screen and (max-width: 860px) {
.p-ft-band {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* ---- 本文の2カラム（静的版どおり目次サイドを左に置く） ---- */
@media screen and (min-width: 1001px) {
.p-ft-layout {
grid-template-columns: clamp(230px, 215.92px + 3.76vw, 270px) minmax(0, 1fr);
}
/* 目次・相談・関連記事をまとめて追従させる。画面より長いときはサイドの中でスクロール */
.p-ft-side {
position: sticky;
top: calc(var(--header-stick) + 1.25rem);
align-self: start;
max-height: calc(100vh - var(--header-stick) - 2.5rem);
overflow-y: auto;
}
}
.p-ft-side__nav {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--r);
padding: clamp(12px, 9.89px + 0.56vw, 18px) clamp(12px, 9.89px + 0.56vw, 18px) clamp(8px, 6.59px + 0.38vw, 12px);
}
.p-ft-toc {
counter-reset: ft-toc;
list-style: none;
margin: 0;
padding: 0;
}
.p-ft-toc__item {
counter-increment: ft-toc;
border-bottom: 1px solid var(--line);
}
.p-ft-toc__item:last-child {
border-bottom: none;
}
.p-ft-toc__link {
display: flex;
gap: clamp(7px, 5.94px + 0.28vw, 10px);
padding: clamp(6px, 5.3px + 0.19vw, 8px) 0.125rem;
font-size: clamp(12px, 11.47px + 0.14vw, 13.5px);
font-weight: 600;
color: var(--ink-2);
transition: color 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.p-ft-toc__link::before {
content: counter(ft-toc, decimal-leading-zero);
font-family: var(--font-en);
font-weight: 700;
color: var(--brand);
}
@media (hover: hover) {
.p-ft-toc__link:hover {
color: var(--brand-ink);
}
}
/* ---- 各節 ---- */
.p-ft-sec {
scroll-margin-top: calc(var(--header-stick) + 1.25rem);
}
.p-ft-sec + .p-ft-sec {
margin-top: clamp(44px, 34.14px + 2.63vw, 72px);
padding-top: clamp(36px, 28.96px + 1.88vw, 56px);
border-top: 1px solid var(--line);
}
.p-ft-sec__head {
display: flex;
align-items: flex-start;
gap: clamp(10px, 7.18px + 0.75vw, 18px);
}
.p-ft-sec__no {
flex-shrink: 0;
font-family: var(--font-en);
font-style: italic;
font-weight: 800;
font-size: clamp(30px, 24.37px + 1.5vw, 46px);
line-height: 1;
color: var(--sky-200);
letter-spacing: -0.02em;
}
.p-ft-sec .p-ft-sec__sec-head {
margin-bottom: clamp(16px, 13.18px + 0.75vw, 24px);
}
/* 原稿の太字 */
.p-ft-em {
font-weight: 700;
color: var(--ink);
}
/* 補足の囲み（c-info-box） */
.p-ft-note {
margin-top: clamp(16px, 13.18px + 0.75vw, 24px);
}
.p-ft-note--top {
margin: 0 0 clamp(16px, 13.18px + 0.75vw, 24px);
}
.p-ft-note__text {
font-size: clamp(12.5px, 11.97px + 0.14vw, 14px);
line-height: 1.85;
color: var(--ink-2);
}
/* アイコン付きカード */
.p-ft-cards {
margin-top: clamp(14px, 11.89px + 0.56vw, 20px);
}
.p-ft-cards:first-child {
margin-top: 0;
}
.p-ft-ico {
display: flex;
align-items: center;
justify-content: center;
width: clamp(36px, 33.18px + 0.75vw, 44px);
height: clamp(36px, 33.18px + 0.75vw, 44px);
margin-bottom: clamp(8px, 6.59px + 0.38vw, 12px);
border-radius: 999px;
background: var(--brand-050);
color: var(--brand-ink);
}
.p-ft-ico .c-ico {
width: clamp(18px, 16.59px + 0.38vw, 22px);
height: clamp(18px, 16.59px + 0.38vw, 22px);
}
/* 01 手順 */
.p-ft-steps {
margin-top: 0;
}
/* 02 季節の気温 */
.p-ft-seasons__temp {
display: block;
margin-bottom: clamp(4px, 3.3px + 0.19vw, 6px);
font-family: var(--font-en);
font-size: clamp(13px, 12.3px + 0.19vw, 15px);
font-weight: 700;
color: var(--brand-ink);
}
/* 03 フライトの数字タイル */
.p-ft-facts {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(8px, 5.89px + 0.56vw, 14px);
margin: 0;
padding: 0;
list-style: none;
}
.p-ft-facts__item {
display: flex;
flex-direction: column;
gap: clamp(3px, 2.3px + 0.19vw, 5px);
padding: clamp(12px, 9.89px + 0.56vw, 18px) clamp(13px, 10.54px + 0.66vw, 20px);
background: var(--bg-2);
border-radius: var(--r);
}
.p-ft-facts__label {
font-size: clamp(11px, 10.47px + 0.14vw, 12.5px);
font-weight: 700;
color: var(--ink-3);
}
.p-ft-facts__value {
font-family: var(--font-en);
font-size: clamp(28px, 24.48px + 0.94vw, 38px);
font-weight: 800;
line-height: 1.1;
color: var(--navy);
}
.p-ft-facts__item--text .p-ft-facts__value {
font-size: clamp(17px, 15.59px + 0.38vw, 21px);
line-height: 1.4;
}
.p-ft-facts__unit {
font-size: clamp(13px, 12.3px + 0.19vw, 15px);
font-weight: 700;
}
.p-ft-facts__note {
font-size: clamp(11.5px, 10.97px + 0.14vw, 13px);
color: var(--ink-2);
}
@media screen and (max-width: 760px) {
.p-ft-facts {
grid-template-columns: 1fr;
}
}
/* 03 羽田と成田 */
.p-ft-vs {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center;
gap: clamp(8px, 5.18px + 0.75vw, 16px);
margin-top: clamp(14px, 11.89px + 0.56vw, 20px);
}
.p-ft-vs__card {
height: 100%;
padding: clamp(14px, 11.18px + 0.75vw, 22px) clamp(14px, 11.18px + 0.75vw, 22px);
background: #fff;
border: 1px solid var(--line);
border-radius: var(--r);
}
.p-ft-vs__card--pick {
border: 2px solid var(--brand);
}
.p-ft-vs__tag {
display: inline-block;
margin-bottom: clamp(6px, 4.94px + 0.28vw, 9px);
padding: 0.125rem clamp(8px, 6.94px + 0.28vw, 11px);
border-radius: 999px;
background: var(--brand);
color: #fff;
font-size: clamp(10.5px, 9.97px + 0.14vw, 12px);
font-weight: 700;
}
.p-ft-vs__title {
font-size: clamp(16px, 14.94px + 0.28vw, 19px);
font-weight: 800;
color: var(--ink);
}
.p-ft-vs__lead {
margin: clamp(3px, 2.3px + 0.19vw, 5px) 0 clamp(8px, 6.59px + 0.38vw, 12px);
font-family: var(--font-en);
font-size: clamp(13px, 12.3px + 0.19vw, 15px);
font-weight: 700;
color: var(--brand-ink);
}
.p-ft-vs__list {
display: grid;
gap: clamp(4px, 3.3px + 0.19vw, 6px);
list-style: none;
margin: 0;
padding: 0;
}
.p-ft-vs__item {
display: flex;
gap: clamp(5px, 4.3px + 0.19vw, 7px);
font-size: clamp(12px, 11.47px + 0.14vw, 13.5px);
line-height: 1.7;
color: var(--ink-2);
}
.p-ft-vs__item .c-ico {
flex-shrink: 0;
width: 1rem;
height: 1rem;
margin-top: 0.3em;
color: var(--brand);
}
.p-ft-vs__mid {
font-family: var(--font-en);
font-style: italic;
font-weight: 800;
font-size: clamp(16px, 14.59px + 0.38vw, 20px);
color: var(--ink-3);
}
@media screen and (max-width: 760px) {
.p-ft-vs {
grid-template-columns: 1fr;
}
.p-ft-vs__mid {
justify-self: center;
}
}
/* 04 お金の番号カード */
.p-ft-num {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(10px, 7.89px + 0.56vw, 16px);
margin: 0;
padding: 0;
list-style: none;
}
.p-ft-num__item {
padding: clamp(14px, 11.89px + 0.56vw, 20px) clamp(14px, 11.89px + 0.56vw, 20px);
background: var(--bg-2);
border-radius: var(--r);
}
.p-ft-num__no {
display: inline-flex;
align-items: center;
justify-content: center;
width: clamp(26px, 24.59px + 0.38vw, 30px);
height: clamp(26px, 24.59px + 0.38vw, 30px);
border-radius: 999px;
background: var(--navy);
color: #fff;
font-family: var(--font-en);
font-size: clamp(12px, 11.3px + 0.19vw, 14px);
font-weight: 700;
}
.p-ft-num__title {
margin: clamp(8px, 7.3px + 0.19vw, 10px) 0 clamp(4px, 3.3px + 0.19vw, 6px);
font-size: clamp(13.5px, 12.8px + 0.19vw, 15.5px);
font-weight: 700;
line-height: 1.45;
color: var(--ink);
}
.p-ft-num__text {
font-size: clamp(12px, 11.47px + 0.14vw, 13.5px);
line-height: 1.85;
color: var(--ink-2);
}
@media screen and (max-width: 860px) {
.p-ft-num {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media screen and (max-width: 620px) {
.p-ft-num {
grid-template-columns: 1fr;
}
}
/* 05・08 要点リスト（c-point-list --col3 の行間を本文向けに） */
.p-ft-points .c-point-list__note {
line-height: 1.85;
}
/* 07 宿の料金表 */
.p-ft-stay .p-ft-stay__price {
white-space: nowrap;
color: var(--brand-ink);
}
.p-ft-stay .p-ft-stay__row--pick .c-fare-table__row-head {
background: var(--brand-050);
color: var(--brand-ink);
}
/* 09 マナーの番号リスト */
.p-ft-rules {
counter-reset: ft-rule;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 clamp(18px, 12.37px + 1.5vw, 34px);
margin: 0;
padding: 0;
list-style: none;
}
.p-ft-rules__item {
counter-increment: ft-rule;
position: relative;
padding: clamp(11px, 9.59px + 0.38vw, 15px) 0 clamp(11px, 9.59px + 0.38vw, 15px) clamp(34px, 30.48px + 0.94vw, 44px);
border-bottom: 1px solid var(--line);
}
.p-ft-rules__item::before {
content: counter(ft-rule);
position: absolute;
left: 0;
top: clamp(10px, 8.59px + 0.38vw, 14px);
display: flex;
align-items: center;
justify-content: center;
width: clamp(24px, 21.89px + 0.56vw, 30px);
height: clamp(24px, 21.89px + 0.56vw, 30px);
border: 2px solid var(--brand);
border-radius: 999px;
font-family: var(--font-en);
font-size: clamp(12px, 11.3px + 0.19vw, 14px);
font-weight: 700;
color: var(--brand-ink);
}
.p-ft-rules__title {
display: block;
font-size: clamp(13.5px, 12.8px + 0.19vw, 15.5px);
font-weight: 700;
line-height: 1.5;
color: var(--ink);
}
.p-ft-rules__text {
margin-top: 0.125rem;
font-size: clamp(12px, 11.47px + 0.14vw, 13.5px);
line-height: 1.8;
color: var(--ink-3);
}
@media screen and (max-width: 760px) {
.p-ft-rules {
grid-template-columns: 1fr;
}
}
/* 10 緊急番号 */
.p-ft-emg {
display: grid;
grid-template-columns: 1fr 1fr 2fr;
gap: clamp(8px, 5.89px + 0.56vw, 14px);
margin: 0 0 clamp(14px, 11.89px + 0.56vw, 20px);
padding: 0;
list-style: none;
}
.p-ft-emg__item {
display: flex;
flex-direction: column;
justify-content: center;
gap: clamp(2px, 1.3px + 0.19vw, 4px);
padding: clamp(12px, 9.89px + 0.56vw, 18px) clamp(13px, 10.54px + 0.66vw, 20px);
background: var(--navy);
border-radius: var(--r);
color: #fff;
}
.p-ft-emg__item--info {
background: var(--brand-050);
color: var(--navy);
}
.p-ft-emg__num {
font-family: var(--font-en);
font-size: clamp(26px, 22.48px + 0.94vw, 36px);
font-weight: 800;
line-height: 1.1;
}
.p-ft-emg__item--info .p-ft-emg__num {
font-size: clamp(20px, 17.89px + 0.56vw, 26px);
}
.p-ft-emg__label {
font-size: clamp(11.5px, 10.97px + 0.14vw, 13px);
font-weight: 700;
}
@media screen and (max-width: 760px) {
.p-ft-emg {
grid-template-columns: 1fr 1fr;
}
.p-ft-emg__item--info {
grid-column: 1/-1;
}
}
/* 11 7日間の日程（p-itinerary に写真を添える） */
.p-ft-days__item {
display: grid;
grid-template-columns: minmax(0, 1fr) clamp(120px, 91.83px + 7.51vw, 200px);
gap: clamp(12px, 9.18px + 0.75vw, 20px);
align-items: start;
}
.p-ft-days__body {
min-width: 0;
}
.p-ft-days__stay {
display: inline-flex;
align-items: center;
gap: clamp(4px, 3.3px + 0.19vw, 6px);
margin-top: clamp(4px, 3.3px + 0.19vw, 6px);
font-size: clamp(11.5px, 11.15px + 0.09vw, 12.5px);
font-weight: 700;
color: var(--ink-3);
}
.p-ft-days__stay .c-ico {
width: 0.9375rem;
height: 0.9375rem;
color: var(--brand);
}
.p-ft-days__media {
display: block;
aspect-ratio: 3/2;
overflow: hidden;
border-radius: var(--r-sm);
}
.p-ft-days__img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
@media screen and (max-width: 620px) {
.p-ft-days__item {
grid-template-columns: 1fr;
}
.p-ft-days__media {
max-width: clamp(240px, 211.83px + 7.51vw, 320px);
}
}
/* 本文エディタの追記 */
.p-ft-article {
margin-top: clamp(36px, 28.96px + 1.88vw, 56px);
}
/* 締めの相談 */
.p-ft-cta {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: clamp(14px, 9.77px + 1.13vw, 26px);
margin-top: clamp(40px, 32.96px + 1.88vw, 60px);
padding: clamp(18px, 13.77px + 1.13vw, 30px) clamp(16px, 11.07px + 1.31vw, 30px);
background: var(--brand-050);
border-color: var(--brand-100);
}
.p-ft-cta__ico {
display: flex;
align-items: center;
justify-content: center;
width: clamp(48px, 43.77px + 1.13vw, 60px);
height: clamp(48px, 43.77px + 1.13vw, 60px);
border-radius: 999px;
background: #fff;
color: var(--brand-ink);
}
.p-ft-cta__ico .c-ico {
width: clamp(24px, 21.89px + 0.56vw, 30px);
height: clamp(24px, 21.89px + 0.56vw, 30px);
}
.p-ft-cta__title {
font-size: clamp(16px, 14.59px + 0.38vw, 20px);
font-weight: 800;
color: var(--navy);
}
.p-ft-cta__text {
margin-top: clamp(4px, 3.3px + 0.19vw, 6px);
font-size: clamp(12.5px, 11.97px + 0.14vw, 14px);
color: var(--ink-2);
}
.p-ft-cta__points {
display: flex;
flex-wrap: wrap;
gap: clamp(4px, 3.3px + 0.19vw, 6px) clamp(12px, 9.89px + 0.56vw, 18px);
margin: clamp(8px, 6.59px + 0.38vw, 12px) 0 0;
padding: 0;
list-style: none;
}
.p-ft-cta__point {
display: inline-flex;
align-items: center;
gap: clamp(4px, 3.3px + 0.19vw, 6px);
font-size: clamp(11.5px, 10.97px + 0.14vw, 13px);
font-weight: 700;
color: var(--ink);
}
.p-ft-cta__point .c-ico {
width: 1rem;
height: 1rem;
color: var(--brand);
}
.p-ft-cta__actions {
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(8px, 6.59px + 0.38vw, 12px);
}
.p-ft-cta__sub {
display: inline-flex;
align-items: center;
gap: clamp(4px, 3.3px + 0.19vw, 6px);
font-size: clamp(12px, 11.47px + 0.14vw, 13.5px);
font-weight: 700;
color: var(--brand-ink);
transition: color 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.p-ft-cta__sub .c-ico {
width: 0.875rem;
height: 0.875rem;
}
@media (hover: hover) {
.p-ft-cta__sub:hover {
color: var(--navy);
}
}
@media screen and (max-width: 860px) {
.p-ft-cta {
grid-template-columns: auto minmax(0, 1fr);
}
.p-ft-cta__actions {
grid-column: 1/-1;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
}
@media screen and (max-width: 620px) {
.p-ft-cta {
grid-template-columns: 1fr;
}
.p-ft-cta__ico {
display: none;
}
}
/* ============================================================
規約3ページ（page-legal.php）
============================================================ */
.p-legal__notice {
margin: clamp(16px, 13.18px + 0.75vw, 24px) 0;
}
.p-legal {
/* 下書きの注意（静的版の notice--warn）。注意色は黄系のベタ */
}
.p-legal__notice--warn {
margin-top: 0;
background: var(--gold-050);
border-color: var(--gold-100);
color: var(--ink);
}
.p-legal__em {
font-weight: 700;
}
.p-legal .p-legal__heading:first-child {
margin-top: 0;
}
.p-legal__table {
margin: 0 0 1.5em;
}
.p-legal .p-legal__num {
text-align: right;
white-space: nowrap;
}
/* ---- ページ全体・ヒーロー下のヒント・節 ---- */
.p-baseball {
/* 追従バーがフッターを隠さないよう、バーの高さぶん下に余白を取る */
padding-bottom: 4rem;
}
.p-baseball__hint {
display: block;
margin-top: clamp(8px, 6.59px + 0.38vw, 12px);
font-size: clamp(12.5px, 11.97px + 0.14vw, 14px);
opacity: 0.9;
}
.p-baseball__sec {
scroll-margin-top: calc(var(--header-stick, 90px) + 14px);
}
.p-baseball__sec + .p-baseball__sec {
margin-top: clamp(36px, 28.96px + 1.88vw, 56px);
}
.p-baseball__lead {
margin: clamp(-6px, -4.59px + -0.38vw, -10px) 0 clamp(14px, 11.89px + 0.56vw, 20px);
font-size: clamp(13px, 12.47px + 0.14vw, 14.5px);
line-height: 1.9;
color: var(--ink-2);
}
/* ---- 球団の選択（リーグごとに 6 球団） ---- */
.p-bb-league + .p-bb-league {
margin-top: clamp(14px, 11.89px + 0.56vw, 20px);
}
.p-bb-league__name {
display: block;
margin-bottom: 0.5rem;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--ink-3);
}
.p-bb-league__teams {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: clamp(6px, 4.59px + 0.38vw, 10px);
}
@media screen and (max-width: 860px) {
.p-bb-league__teams {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media screen and (max-width: 520px) {
.p-bb-league__teams {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.p-bb-team {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
padding: clamp(10px, 8.59px + 0.38vw, 14px) 0.5rem;
border: 1.5px solid var(--line);
border-radius: var(--r);
background: #fff;
color: var(--ink);
text-align: center;
cursor: pointer;
transition: border-color 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (hover: hover) {
.p-bb-team:hover {
border-color: var(--brand);
}
}
.p-bb-team.is-on {
border-color: var(--brand);
background: var(--brand-050);
}
.p-bb-team__logo {
display: block;
width: clamp(44px, 39.77px + 1.13vw, 56px);
height: clamp(44px, 39.77px + 1.13vw, 56px);
}
.p-bb-team__img {
display: block;
width: 100%;
height: 100%;
}
.p-bb-team__name {
font-size: clamp(11.5px, 11.15px + 0.09vw, 12.5px);
font-weight: 700;
line-height: 1.35;
}
.p-bb-team__state {
font-size: 0.6875rem;
font-weight: 700;
color: var(--brand-ink);
}
.p-bb-team {
/* チケットの無い球団は押せるが控えめに見せる */
}
.p-bb-team--none .p-bb-team__logo {
opacity: 0.45;
}
.p-bb-team--none .p-bb-team__state {
color: var(--ink-3);
}
/* ---- 球団のパネル ---- */
.p-bb-panel {
scroll-margin-top: calc(var(--header-stick, 90px) + 14px);
}
.p-bb-panel[hidden] {
display: none;
}
.p-bb-panel__head {
display: flex;
align-items: center;
gap: clamp(10px, 7.89px + 0.56vw, 16px);
margin-bottom: clamp(14px, 11.89px + 0.56vw, 20px);
padding-bottom: clamp(12px, 10.59px + 0.38vw, 16px);
border-bottom: 1px solid var(--line);
}
.p-bb-panel__logo {
flex-shrink: 0;
width: clamp(48px, 42.37px + 1.5vw, 64px);
height: clamp(48px, 42.37px + 1.5vw, 64px);
}
.p-bb-panel__info {
flex: 1 1 auto;
min-width: 0;
}
.p-bb-panel__title {
font-size: clamp(17px, 15.59px + 0.38vw, 21px);
font-weight: 700;
line-height: 1.4;
}
.p-bb-panel__stadium {
display: flex;
align-items: center;
gap: 0.25rem;
margin-top: 0.125rem;
font-size: clamp(12px, 11.65px + 0.09vw, 13px);
color: var(--ink-2);
}
.p-bb-panel__stadium .c-ico {
flex-shrink: 0;
width: 14px;
height: 14px;
color: var(--brand);
}
.p-bb-panel__count {
flex-shrink: 0;
padding: 0.25rem 0.625rem;
border-radius: 999px;
background: var(--bg-3);
font-size: 0.71875rem;
font-weight: 700;
color: var(--ink-2);
}
@media screen and (max-width: 620px) {
.p-bb-panel__head {
flex-wrap: wrap;
}
.p-bb-panel__count {
order: 3;
}
}
/* ---- チケット（上の帯 / 写真・本文・料金の半券 / 試合日程） ---- */
.p-bb-tkt {
overflow: hidden;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--r);
transition: border-color 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.p-bb-tkt + .p-bb-tkt {
margin-top: clamp(16px, 13.18px + 0.75vw, 24px);
}
.p-bb-tkt.is-picked {
border-color: var(--brand);
box-shadow: 0 0 0 2px var(--brand-050);
}
.p-bb-tkt__strip {
display: flex;
flex-wrap: wrap;
gap: 0.25rem clamp(14px, 9.07px + 1.31vw, 28px);
padding: clamp(8px, 7.3px + 0.19vw, 10px) clamp(12px, 9.89px + 0.56vw, 18px);
background: var(--navy);
color: #fff;
}
.p-bb-tkt__cell {
display: flex;
flex-direction: column;
min-width: 0;
}
.p-bb-tkt__cell--id {
margin-left: auto;
}
.p-bb-tkt__cell-label {
font-size: 0.625rem;
letter-spacing: 0.08em;
opacity: 0.7;
}
.p-bb-tkt__cell-value {
font-size: clamp(12.5px, 11.97px + 0.14vw, 14px);
font-weight: 700;
}
.p-bb-tkt__main {
display: grid;
grid-template-columns: clamp(180px, 158.87px + 5.63vw, 240px) minmax(0, 1fr) clamp(180px, 165.92px + 3.76vw, 220px);
}
.p-bb-tkt__media {
position: relative;
background: var(--bg-3);
}
.p-bb-tkt__img {
display: block;
width: 100%;
height: 100%;
min-height: 160px;
object-fit: cover;
}
.p-bb-tkt {
/* 写真が無いチケットは共通イラスト。切り抜かずに収める */
}
.p-bb-tkt__img--illust {
object-fit: contain;
padding: 14%;
}
.p-bb-tkt__soldout {
position: absolute;
left: 8px;
top: 8px;
padding: 0.1875rem 0.625rem;
border-radius: 999px;
background: var(--maple);
color: #fff;
font-size: 0.6875rem;
font-weight: 700;
}
.p-bb-tkt__body {
display: flex;
flex-direction: column;
gap: 0.375rem;
padding: clamp(12px, 9.89px + 0.56vw, 18px);
}
.p-bb-tkt__title {
font-size: clamp(15px, 14.3px + 0.19vw, 17px);
font-weight: 700;
line-height: 1.5;
}
.p-bb-tkt__sub {
font-size: clamp(12.5px, 12.15px + 0.09vw, 13.5px);
font-weight: 700;
color: var(--brand-ink);
}
.p-bb-tkt__text {
font-size: clamp(12.5px, 12.15px + 0.09vw, 13.5px);
line-height: 1.8;
color: var(--ink-2);
}
.p-bb-tkt__notes {
display: flex;
flex-direction: column;
gap: 0.125rem;
padding-left: 1.2em;
list-style: disc;
}
.p-bb-tkt__note {
font-size: 0.75rem;
line-height: 1.7;
color: var(--ink-3);
}
.p-bb-tkt {
/* 料金の半券（点線で切り離し線に見立てる） */
}
.p-bb-tkt__stub {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: clamp(12px, 9.89px + 0.56vw, 18px);
border-left: 1.5px dashed var(--line-strong, var(--line));
background: var(--bg-2);
}
.p-bb-tkt__pp {
font-size: 0.6875rem;
color: var(--ink-3);
}
.p-bb-tkt__wait {
font-size: 0.71875rem;
line-height: 1.7;
color: var(--maple-dark, var(--maple));
}
.p-bb-tkt {
/* 「Add to enquiry」。選んだら塗りに変える */
}
.p-bb-tkt__add {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.3125rem;
margin-top: auto;
padding: 0.5rem 0.75rem;
border: 1.5px solid var(--brand);
border-radius: 999px;
background: #fff;
color: var(--brand-ink);
font-size: 0.78125rem;
font-weight: 700;
cursor: pointer;
transition: background 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (hover: hover) {
.p-bb-tkt__add:hover {
background: var(--brand-050);
}
}
.p-bb-tkt__add[aria-pressed=true] {
background: var(--brand);
color: #fff;
}
.p-bb-tkt__add-ico {
display: inline-grid;
place-items: center;
width: 14px;
height: 14px;
font-size: 0.9375rem;
line-height: 1;
}
.p-bb-tkt__add-ico .c-ico {
width: 14px;
height: 14px;
}
.p-bb-tkt__add-ico--check, .p-bb-tkt__add[aria-pressed=true] .p-bb-tkt__add-ico--plus {
display: none;
}
.p-bb-tkt__add[aria-pressed=true] .p-bb-tkt__add-ico--check {
display: inline-grid;
}
@media screen and (max-width: 860px) {
.p-bb-tkt__main {
grid-template-columns: clamp(160px, 138.87px + 5.63vw, 220px) minmax(0, 1fr);
}
.p-bb-tkt__stub {
grid-column: 1/-1;
border-left: 0;
border-top: 1.5px dashed var(--line-strong, var(--line));
}
}
@media screen and (max-width: 620px) {
.p-bb-tkt__main {
grid-template-columns: 1fr;
}
.p-bb-tkt__img {
aspect-ratio: 3/2;
height: auto;
}
}
/* ---- 料金 ---- */
.p-bb-price {
display: flex;
flex-direction: column;
gap: 0.125rem;
}
.p-bb-price__label {
font-size: 0.71875rem;
line-height: 1.5;
color: var(--ink-2);
}
.p-bb-price__amount {
display: flex;
align-items: baseline;
gap: 0.25rem;
}
.p-bb-price__from, .p-bb-price__cur {
font-size: 0.71875rem;
font-weight: 700;
color: var(--ink-3);
}
.p-bb-price__num {
font-size: clamp(22px, 20.59px + 0.38vw, 26px);
font-weight: 700;
line-height: 1.1;
color: var(--ink);
}
/* ---- 試合日程（月タブ・カード） ---- */
.p-bb-dates {
padding: clamp(12px, 9.89px + 0.56vw, 18px);
border-top: 1px solid var(--line);
}
.p-bb-dates__title {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.25rem 0.5rem;
margin-bottom: 0.625rem;
}
.p-bb-dates__title .c-ico {
width: 16px;
height: 16px;
color: var(--brand);
}
.p-bb-dates__heading {
font-size: clamp(13.5px, 13.15px + 0.09vw, 14.5px);
font-weight: 700;
}
.p-bb-dates__hint {
font-size: 0.71875rem;
color: var(--ink-3);
}
.p-bb-months {
display: flex;
gap: 0.375rem;
margin-bottom: 0.75rem;
overflow-x: auto;
}
.p-bb-months__tab {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 0.3125rem;
padding: 0.375rem 0.75rem;
border: 1px solid var(--line);
border-radius: 999px;
background: #fff;
color: var(--ink);
font-size: 0.78125rem;
font-weight: 700;
cursor: pointer;
transition: border-color 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (hover: hover) {
.p-bb-months__tab:hover {
border-color: var(--brand);
}
}
.p-bb-months__tab[aria-selected=true] {
border-color: var(--brand);
background: var(--brand);
color: #fff;
}
.p-bb-months__tab--empty {
color: var(--ink-3);
}
.p-bb-months__num {
display: inline-grid;
place-items: center;
min-width: 18px;
height: 18px;
padding: 0 0.3125rem;
border-radius: 999px;
background: var(--brand-050);
color: var(--brand-ink);
font-size: 0.65625rem;
}
.p-bb-month[hidden] {
display: none;
}
.p-bb-series + .p-bb-series {
margin-top: 0.75rem;
}
.p-bb-series__head {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.375rem;
margin-bottom: 0.5rem;
font-size: 0.78125rem;
}
.p-bb-series__logo {
width: 22px;
height: 22px;
}
.p-bb-series__team {
font-weight: 700;
}
.p-bb-series__vs {
font-size: 0.6875rem;
color: var(--ink-3);
}
.p-bb-series__games {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
gap: 0.375rem;
}
.p-bb-game {
display: grid;
grid-template-columns: auto 1fr;
grid-template-areas: "date time" "date pick";
align-items: center;
gap: 0.125rem 0.5rem;
padding: 0.5rem 0.625rem;
border: 1.5px solid var(--line);
border-radius: var(--r-sm, 8px);
background: #fff;
color: var(--ink);
text-align: left;
cursor: pointer;
transition: border-color 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (hover: hover) {
.p-bb-game:hover {
border-color: var(--brand);
}
}
.p-bb-game[aria-pressed=true] {
border-color: var(--brand);
background: var(--brand-050);
}
.p-bb-game__date {
grid-area: date;
display: flex;
flex-direction: column;
align-items: center;
min-width: 34px;
line-height: 1.1;
}
.p-bb-game__date--sun {
color: var(--maple);
}
.p-bb-game__date--sat {
color: var(--sky-deep, var(--brand));
}
.p-bb-game__day {
font-size: 1.125rem;
font-weight: 700;
}
.p-bb-game__dow {
font-size: 0.65625rem;
font-weight: 700;
}
.p-bb-game__time {
grid-area: time;
font-size: 0.8125rem;
font-weight: 700;
}
.p-bb-game__pick {
grid-area: pick;
display: inline-flex;
align-items: center;
gap: 0.1875rem;
font-size: 0.6875rem;
font-weight: 700;
color: var(--brand-ink);
}
.p-bb-game__pick-ico {
display: inline-grid;
place-items: center;
width: 12px;
height: 12px;
font-size: 0.8125rem;
line-height: 1;
}
.p-bb-game__pick-ico .c-ico {
width: 12px;
height: 12px;
}
.p-bb-game__pick-ico--check, .p-bb-game[aria-pressed=true] .p-bb-game__pick-ico--plus {
display: none;
}
.p-bb-game[aria-pressed=true] .p-bb-game__pick-ico--check {
display: inline-grid;
}
/* ---- 「この月は販売なし」・チケットの無い球団 ---- */
.p-bb-none {
display: flex;
align-items: flex-start;
gap: 0.5rem;
padding: 0.75rem 0.875rem;
border-radius: var(--r-sm, 8px);
background: var(--bg-2);
font-size: 0.78125rem;
line-height: 1.8;
color: var(--ink-2);
}
.p-bb-none .c-ico {
flex-shrink: 0;
width: 16px;
height: 16px;
margin-top: 0.25rem;
color: var(--ink-3);
}
.p-bb-empty {
display: flex;
align-items: flex-start;
gap: clamp(10px, 7.89px + 0.56vw, 16px);
padding: clamp(16px, 13.18px + 0.75vw, 24px);
border: 1px dashed var(--line-strong, var(--line));
border-radius: var(--r);
background: var(--bg-2);
}
.p-bb-empty > .c-ico {
flex-shrink: 0;
width: clamp(24px, 21.89px + 0.56vw, 30px);
height: clamp(24px, 21.89px + 0.56vw, 30px);
color: var(--brand);
}
.p-bb-empty__body {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.p-bb-empty__title {
font-size: clamp(14.5px, 13.97px + 0.14vw, 16px);
font-weight: 700;
}
.p-bb-empty__text {
font-size: clamp(12.5px, 12.15px + 0.09vw, 13.5px);
line-height: 1.8;
color: var(--ink-2);
}
/* 年で絞り込むチップ列。
ラベルは .c-chip-row__label（トップの「人気の目的地」用。PCで19pxまで大きくなる）を
使わない。ここは本文の上に置く補助なので、静的版と同じく小さく灰色で止める。
いま見ている年のチップは .is-current で塗る（テーマ共通の書き方）。 */
.p-news-years {
/* ラベルとチップを2段に積む（.c-chip-row の横一列を上書き）。
チップは __list の中で折り返す */
display: block;
overflow: visible;
margin-bottom: clamp(20px, 15.07px + 1.31vw, 34px);
}
.p-news-years__label {
margin-bottom: clamp(14px, 11.89px + 0.56vw, 20px);
display: inline-flex;
align-items: center;
gap: 6px;
flex: 0 0 auto;
/* 静的版は12px。チップに対して小さすぎたので1.3倍にした */
font-size: 15.6px;
font-weight: 600;
line-height: 1;
color: var(--ink-2);
}
.p-news-years__label .c-ico {
width: 18px;
height: 18px;
color: var(--brand);
flex: 0 0 auto;
}
.p-news-years .c-chip {
padding: 7px 16px;
font-size: 13px;
letter-spacing: 0.03em;
}
.p-news-years .c-chip.is-current {
background: var(--brand);
border-color: var(--brand);
color: #fff;
}
/* 年見出しには共通の水色バーを出さない。年ごとの区切りは
すぐ下の一覧の罫線が担っていて、線が二重になる */
.p-news-year .c-sec-head .c-sec-head__heading {
padding-bottom: 0;
}
.p-news-year .c-sec-head .c-sec-head__heading::after {
content: none;
}
.p-news-year + .p-news-year {
margin-top: clamp(28px, 20.96px + 1.88vw, 48px);
}
.p-news-list {
margin: 0;
padding: 0;
list-style: none;
border-top: 1px solid var(--line);
}
.p-news-list__item {
border-bottom: 1px solid var(--line);
}
.p-news-list__link {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: clamp(8px, 5.18px + 0.75vw, 16px);
padding: clamp(12px, 9.89px + 0.56vw, 18px) clamp(4px, 2.59px + 0.38vw, 8px);
color: var(--ink);
}
@media (hover: hover) {
.p-news-list__link:hover {
background: var(--brand-050);
color: var(--brand-ink);
}
}
.p-news-list__date {
flex: 0 0 auto;
min-width: clamp(74px, 68.37px + 1.5vw, 90px);
font-family: var(--font-en);
font-size: clamp(11.5px, 10.97px + 0.14vw, 13px);
letter-spacing: 0.04em;
color: var(--ink-3);
}
.p-news-list__title {
flex: 1 1 clamp(200px, 157.75px + 11.27vw, 320px);
font-size: clamp(12.5px, 11.8px + 0.19vw, 14.5px);
font-weight: 600;
line-height: 1.6;
/* SPはラベルが短いと題名が同じ行に入り、行ごとに並びが変わる。必ず次の行へ送る */
}
@media screen and (max-width: 620px) {
.p-news-list__title {
flex-basis: 100%;
}
}
.p-first-trip {
/* ---- ① リード ---- */
}
.p-first-trip__lead {
font-size: clamp(14px, 13.12px + 0.23vw, 16.5px);
line-height: 2.1;
color: var(--ink-2);
}
.p-first-trip__lead-strong {
font-weight: 800;
color: var(--ink);
}
.p-first-trip {
/* ---- ② ご不安4つ。白カード＋上辺の色帯、淡色の丸にアイコン、英字ラベル。
色は項目ごとに --wc（線・文字）/ --wc-bg（丸・ラベルの地）で切り替える ---- */
}
.p-first-trip__worries {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(14px, 9.77px + 1.13vw, 26px) clamp(14px, 10.48px + 0.94vw, 24px);
margin: 0;
padding: 0;
list-style: none;
}
.p-first-trip__worry {
--wc:var(--navy-700);
--wc-bg:#edf2f8;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
column-gap: clamp(14px, 10.48px + 0.94vw, 24px);
align-items: center;
padding: clamp(18px, 14.48px + 0.94vw, 28px) clamp(16px, 11.77px + 1.13vw, 28px);
background: var(--bg);
border-top: clamp(4px, 3.65px + 0.09vw, 5px) solid color-mix(in srgb, var(--wc) 55%, #fff); /* 上辺の線は項目色を白で薄めて使う */
box-shadow: 0 6px 20px rgba(14, 34, 51, 0.07);
}
.p-first-trip__worry--orange {
--wc:var(--accent);
--wc-bg:var(--accent-050);
}
.p-first-trip__worry--teal {
--wc:#16968a;
--wc-bg:#e4f4f2;
}
.p-first-trip__worry--sky {
--wc:var(--sky-ink);
--wc-bg:var(--sky-050);
}
.p-first-trip__worry-icon-wrap {
display: grid;
place-items: center;
width: clamp(52px, 44.96px + 1.88vw, 72px);
height: clamp(52px, 44.96px + 1.88vw, 72px);
border-radius: 999px;
background: var(--wc-bg);
}
.p-first-trip__worry-icon {
width: clamp(24px, 21.18px + 0.75vw, 32px);
height: clamp(24px, 21.18px + 0.75vw, 32px);
color: var(--wc);
}
.p-first-trip__worry-body {
display: grid;
justify-items: start;
gap: clamp(6px, 4.59px + 0.38vw, 10px);
min-width: 0;
}
.p-first-trip__worry-label {
padding: clamp(4px, 3.65px + 0.09vw, 5px) clamp(9px, 8.3px + 0.19vw, 11px);
border-radius: clamp(6px, 5.3px + 0.19vw, 8px);
background: var(--wc-bg);
color: var(--wc);
font-family: var(--font-en);
font-size: clamp(10.5px, 9.97px + 0.14vw, 12px);
font-weight: 700;
letter-spacing: 0.14em;
line-height: 1.2;
}
.p-first-trip__worry-text {
font-size: clamp(14px, 12.94px + 0.28vw, 17px);
font-weight: 700;
line-height: 1.7;
color: var(--ink);
}
.p-first-trip__answer {
margin-top: clamp(20px, 15.77px + 1.13vw, 32px);
text-align: center;
font-size: clamp(17px, 14.89px + 0.56vw, 23px);
font-weight: 800;
line-height: 1.6;
color: var(--navy);
}
.p-first-trip {
/* ---- ③ 比較表の見出しセルの補足 ---- */
}
.p-first-trip__vs-sub {
display: block;
margin-top: clamp(1px, 0.65px + 0.09vw, 2px);
font-size: clamp(10px, 9.47px + 0.14vw, 11.5px);
font-weight: 500;
}
.p-first-trip__punch {
margin-top: clamp(26px, 21.07px + 1.31vw, 40px);
text-align: center;
font-size: clamp(16px, 14.24px + 0.47vw, 21px);
font-weight: 700;
line-height: 1.6;
color: var(--ink);
}
.p-first-trip__punch-em {
color: var(--accent);
font-weight: 800;
}
.p-first-trip {
/* ---- ⑧ 支店の電話 ---- */
}
.p-first-trip__offices {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(10px, 7.18px + 0.75vw, 18px);
}
.p-first-trip__office {
display: grid;
justify-items: center;
gap: clamp(4px, 3.3px + 0.19vw, 6px);
padding: clamp(18px, 13.77px + 1.13vw, 30px) clamp(16px, 13.18px + 0.75vw, 24px);
background: var(--bg);
border-radius: var(--r);
box-shadow: var(--sh);
text-align: center;
}
.p-first-trip__office-name {
font-size: clamp(13px, 12.3px + 0.19vw, 15px);
font-weight: 700;
color: var(--ink-2);
}
.p-first-trip__office-tel {
display: inline-flex;
align-items: center;
gap: clamp(6px, 4.94px + 0.28vw, 9px);
font-family: var(--font-en);
font-size: clamp(22px, 19.18px + 0.75vw, 30px);
font-weight: 800;
/* 行の高さを字面に合わせ、アイコンの丸と数字の上下中央を揃える */
line-height: 1;
color: var(--navy);
/* 電話アイコンは番号と同じ濃紺の正円に白抜き。
要素は増やさず、svg 自体に背景・角丸・内側の余白を付ける（box-sizing:border-box なので幅＝直径） */
}
.p-first-trip__office-tel .c-ico {
width: clamp(32px, 28.48px + 0.94vw, 42px);
height: clamp(32px, 28.48px + 0.94vw, 42px);
padding: clamp(8px, 7.3px + 0.19vw, 10px);
border-radius: 999px;
background: var(--navy);
color: #fff;
vertical-align: middle;
/* 数字の字面は文字枠の中心より少し下にある（実測1.6px）ので、丸もその分だけ下げて見た目の中央に合わせる */
position: relative;
top: 0.05em;
/* svg は既定で枠の外を切り取る。padding で描画枠が縮んだぶん、受話器の線の端が見切れていた */
overflow: visible;
}
.p-first-trip__office-note {
font-size: clamp(11.5px, 10.97px + 0.14vw, 13px);
color: var(--ink-3);
}
.p-first-trip__offices-note {
grid-column: 1/-1;
margin-top: clamp(4px, 2.59px + 0.38vw, 8px);
text-align: center;
font-size: clamp(12.5px, 11.97px + 0.14vw, 14px);
line-height: 1.9;
color: rgba(255, 255, 255, 0.88); /* 紺のオーバーレイに直接乗る */
}
.p-first-trip {
/* 「から。」の後の改行はSPだけ */
}
.p-first-trip__offices-br {
display: none;
}
.p-first-trip__offices-link {
color: #fff;
text-decoration: underline;
text-underline-offset: 0.2em;
}
@media screen and (max-width: 760px) {
.p-first-trip__worries, .p-first-trip__offices {
grid-template-columns: 1fr;
}
.p-first-trip__offices-br {
display: inline;
}
}
/* ============================================================
59. 支店アクセスページ (company/access-vancouver.html)
============================================================ */
.p-access__lead {
font-size: clamp(13px, 12.3px + 0.19vw, 15px);
line-height: 2.1;
color: var(--ink-2);
text-align: center;
margin-bottom: clamp(5px, 3.94px + 0.28vw, 8px);
}
.p-access__note {
font-size: 12.5px;
color: var(--ink-3);
text-align: center;
margin-bottom: clamp(17px, 13.13px + 1.03vw, 28px);
}
.p-access-info {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--r);
padding: clamp(13px, 9.83px + 0.85vw, 22px) clamp(14px, 10.48px + 0.94vw, 24px);
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(12px, 9.18px + 0.75vw, 20px);
flex-wrap: wrap;
}
.p-access-info .p-access-info__dl, .p-access-info dl {
display: grid;
gap: clamp(6px, 4.59px + 0.38vw, 10px);
margin: 0;
}
.p-access-info dl > div {
display: flex;
align-items: baseline;
gap: clamp(6px, 4.59px + 0.38vw, 10px);
}
.p-access-info .p-access-info__term, .p-access-info dt {
display: inline-flex;
align-items: center;
gap: clamp(4px, 3.3px + 0.19vw, 6px);
flex-shrink: 0;
width: clamp(67px, 56.79px + 2.72vw, 96px);
font-size: 12px;
font-weight: 700;
color: var(--ink-3);
}
.p-access-info dt .c-ico {
width: 14px;
height: 14px;
color: var(--brand);
}
.p-access-info .p-access-info__desc, .p-access-info dd {
margin: 0;
font-size: clamp(11px, 10.12px + 0.23vw, 13.5px);
color: var(--ink);
line-height: 1.7;
}
.p-access-info dd a {
color: var(--brand-ink);
font-weight: 700;
}
.p-access-steps {
list-style: none;
margin: clamp(16px, 12.48px + 0.94vw, 26px) 0 0;
padding: 0;
position: relative;
}
.p-access-steps::before {
content: "";
position: absolute;
left: clamp(13px, 10.89px + 0.56vw, 19px);
top: clamp(7px, 5.94px + 0.28vw, 10px);
bottom: clamp(7px, 5.94px + 0.28vw, 10px);
width: 2px;
background: var(--line-2);
}
.p-access-step {
position: relative;
padding: 0 0 clamp(20px, 15.07px + 1.31vw, 34px) clamp(36px, 27.55px + 2.25vw, 60px);
}
.p-access-step:last-child {
padding-bottom: 0;
}
.p-access-step__head {
display: flex;
align-items: center;
gap: clamp(9px, 7.94px + 0.28vw, 12px);
margin-bottom: clamp(5px, 3.94px + 0.28vw, 8px);
}
.p-access-step__no {
position: absolute;
left: 0;
display: flex;
align-items: center;
justify-content: center;
width: clamp(30px, 26.48px + 0.94vw, 40px);
height: clamp(30px, 26.48px + 0.94vw, 40px);
border-radius: 999px;
background: var(--brand);
color: #fff;
font-family: var(--font-en);
font-size: clamp(14px, 12.94px + 0.28vw, 17px);
font-weight: 800;
box-shadow: 0 6px 16px rgba(10, 158, 203, 0.3);
}
.p-access-step__head .p-access-step__head-heading, .p-access-step__head h3 {
font-size: clamp(14px, 13.3px + 0.19vw, 16px);
font-weight: 800;
color: var(--ink);
line-height: 1.6;
}
.p-access-step .p-access-step__text, .p-access-step p {
font-size: clamp(11px, 10.12px + 0.23vw, 13.5px);
line-height: 1.95;
color: var(--ink-2);
}
.p-access-step .p-access-step__figure, .p-access-step figure {
margin: clamp(9px, 7.24px + 0.47vw, 14px) 0 0;
}
.p-access-step figure .p-access-step__figure-img, .p-access-step figure img {
width: 100%;
max-width: clamp(392px, 332.85px + 15.77vw, 560px);
height: auto;
border-radius: var(--r-sm);
border: 1px solid var(--line);
display: block;
}
.p-access-step__pair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(9px, 7.24px + 0.47vw, 14px);
max-width: clamp(532px, 451.72px + 21.41vw, 760px);
}
.p-access-step__pair .p-access-step__pair-figure, .p-access-step__pair figure {
margin: clamp(9px, 7.24px + 0.47vw, 14px) 0 0;
}
@media screen and (max-width: 620px) {
.p-access-step__pair {
grid-template-columns: 1fr;
}
}
.p-access-cta {
margin-top: clamp(24px, 18.37px + 1.5vw, 40px);
border-top: 1px solid var(--line);
padding-top: clamp(17px, 13.13px + 1.03vw, 28px);
text-align: center;
}
.p-access-cta .p-access-cta__text, .p-access-cta p {
font-size: clamp(11px, 10.12px + 0.23vw, 13.5px);
color: var(--ink-2);
margin-bottom: clamp(9px, 7.24px + 0.47vw, 14px);
}
.p-access-cta__row {
display: flex;
justify-content: center;
gap: clamp(9px, 7.24px + 0.47vw, 14px);
flex-wrap: wrap;
}
/* ---- 地図（静的英語版は基本情報の下に埋め込み地図を置く）---- */
.p-access-info__map {
flex: 1 1 100%;
aspect-ratio: 16/9;
overflow: hidden;
border-radius: var(--r-sm, 8px);
background: var(--bg-3);
}
.p-access-info__map-frame {
display: block;
width: 100%;
height: 100%;
border: 0;
}
/* ---- 写真のキャプション（静的英語版の原稿） ---- */
.p-access-step__caption {
margin-top: 6px;
font-size: clamp(11.5px, 11.15px + 0.09vw, 12.5px);
line-height: 1.7;
color: var(--ink-3);
}
/* 縦長の写真1枚の手順（2枚並びと同じくらいの大きさにそろえる） */
.p-access-step__figure--portrait {
max-width: clamp(260px, 231.83px + 7.51vw, 340px);
}
/* ---- 予約・問い合わせ・もう一方の支店（3列） ---- */
.p-access__cta-tel {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 8px;
font-weight: 700;
font-size: clamp(15px, 14.3px + 0.19vw, 17px);
color: var(--brand-ink);
}
.p-access__cta-tel .c-ico {
width: 16px;
height: 16px;
}
.p-access__cta-btn {
/* 本文と同じ行に並ばないよう、ボタンだけで1行を取る（幅は中身なり） */
display: flex;
width: fit-content;
margin-top: clamp(10px, 8.59px + 0.38vw, 14px);
}
/* ============================================================
93. お問い合わせページの再構成v2
FV = dfplus.io型の左右分割。左に案内(よくある内容+電話)、右にフォーム。
その下に LINE(電話列なし) → ご来店 → よくある質問。
FAQへの離脱導線はFVに置かない(離脱防止)。
============================================================ */
/* ---- FV: 全幅リード + 左右分割 ---- */
/* リードは2列の上に全幅で敷く */
.p-contact-lead {
font-size: clamp(13px, 12.12px + 0.23vw, 15.5px);
line-height: 2.1;
color: var(--ink-2);
text-align: center;
max-width: clamp(588px, 499.27px + 23.66vw, 840px);
margin: 0 auto clamp(20px, 15.07px + 1.31vw, 34px);
}
.p-contact-fv {
display: grid;
grid-template-columns: 1fr 1.15fr;
gap: clamp(26px, 19.66px + 1.69vw, 44px);
align-items: start;
max-width: clamp(784px, 665.69px + 31.55vw, 1120px);
margin-inline: auto;
}
.p-contact-fv__info .p-contact-fv__info-heading, .p-contact-fv__info h3 {
font-size: clamp(14px, 13.12px + 0.23vw, 16.5px);
font-weight: 800;
color: var(--ink);
/* 節見出し(c-sec-head)と同じ、短い水色のバーを下に敷く */
position: relative;
padding-bottom: clamp(8px, 6.59px + 0.38vw, 12px);
margin: 0 0 clamp(11px, 9.24px + 0.47vw, 16px);
}
.p-contact-fv__info .p-contact-fv__info-heading::after, .p-contact-fv__info h3::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: clamp(34px, 30.48px + 0.94vw, 44px);
height: 3px;
border-radius: 3px;
background: var(--sky-200);
}
.p-contact-fv__info .p-contact-fv__info-heading:not(:first-child), .p-contact-fv__info h3:not(:first-child) {
margin-top: clamp(26px, 20.37px + 1.5vw, 42px);
}
.p-contact-fv__hours {
font-size: 12.5px;
color: var(--ink-3);
line-height: 2;
margin-top: clamp(10px, 7.89px + 0.56vw, 16px);
}
.p-contact-fv {
/* ただいまの現地時間(時刻は main.js の data-clock が入れる) */
}
.p-contact-fv__clock {
font-family: var(--font-en);
color: var(--ink);
font-variant-numeric: tabular-nums;
}
.p-contact-fv__clock-ico {
width: 14px;
height: 14px;
margin-right: 4px;
vertical-align: -2px;
}
.p-contact-fv__note {
font-size: 12px;
color: var(--ink-3);
line-height: 1.9;
margin-top: clamp(10px, 7.89px + 0.56vw, 16px);
}
.p-contact-fv__note-strong {
display: block;
font-weight: 700;
color: var(--ink-2);
}
.p-contact-fv__tel-label {
display: block;
}
.p-contact-fv {
/* ---- 右カラム: フォームのカード ---- */
}
.p-contact-fv__form {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--r);
box-shadow: var(--sh-sm);
padding: clamp(18px, 13.77px + 1.13vw, 30px) clamp(16px, 11.77px + 1.13vw, 28px);
}
.p-contact-fv {
/* CF7 は .wpcf7 > form と1段深くなるので、フォーム本体側に項目の間隔を持たせる */
}
.p-contact-fv__form .wpcf7-form, .p-contact-fv__form form {
display: grid;
gap: clamp(12px, 9.89px + 0.56vw, 18px);
}
.p-contact-fv__form .p-booking-trust {
margin-top: clamp(14px, 11.18px + 0.75vw, 22px);
}
.p-contact-fv__submit {
justify-self: center;
width: auto;
min-width: clamp(232px, 208.06px + 6.38vw, 300px);
margin-top: clamp(4px, 2.59px + 0.38vw, 8px);
box-shadow: none; /* オレンジのグロー影は使わない(page-build.md) */
}
@media screen and (max-width: 860px) {
.p-contact-fv {
grid-template-columns: 1fr;
gap: clamp(20px, 13.12px + 1.83vw, 30px);
}
.p-contact-lead {
margin-bottom: clamp(17px, 10.81px + 1.65vw, 26px);
text-align: left;
}
}
/* ---- LINEブロックの1列版(電話列はFVにあるため撤去) ---- */
.p-line-consult__grid--single {
grid-template-columns: 1fr;
max-width: clamp(322px, 273.41px + 12.96vw, 460px);
margin-inline: auto;
}
/* ---- FAQ導線(ページ下部のみで使用) ---- */
.p-faq-first {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(6px, 4.59px + 0.38vw, 10px) clamp(11px, 8.54px + 0.66vw, 18px);
flex-wrap: wrap;
margin: clamp(20px, 15.07px + 1.31vw, 34px) auto 0;
max-width: clamp(448px, 380.39px + 18.03vw, 640px);
font-size: clamp(11px, 10.12px + 0.23vw, 13.5px);
color: var(--ink-2);
}
.p-faq-first .c-btn {
flex-shrink: 0;
}
/* ---- ご来店: 支店カード(写真つき) ---- */
.p-visit-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(11px, 8.54px + 0.66vw, 18px);
}
.p-visit-card {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--r);
overflow: hidden;
display: flex;
flex-direction: column;
}
.p-visit-card__photo {
aspect-ratio: 16/9;
background: var(--bg-2);
}
.p-visit-card__photo .p-visit-card__photo-img, .p-visit-card__photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.p-visit-card__body {
padding: clamp(13px, 9.83px + 0.85vw, 22px) clamp(14px, 10.48px + 0.94vw, 24px) clamp(14px, 10.48px + 0.94vw, 24px);
display: flex;
flex-direction: column;
flex: 1;
}
.p-visit-card .p-visit-card__heading {
font-size: clamp(14px, 13.3px + 0.19vw, 16px);
font-weight: 800;
color: var(--ink);
margin-bottom: clamp(9px, 7.94px + 0.28vw, 12px);
display: flex;
align-items: center;
gap: clamp(5px, 3.94px + 0.28vw, 8px);
}
.p-visit-card .p-visit-card__heading .c-ico {
width: 17px;
height: 17px;
color: var(--brand);
}
.p-visit-card .p-visit-card__dl, .p-visit-card dl {
display: grid;
grid-template-columns: 64px 1fr;
gap: 4px clamp(9px, 7.94px + 0.28vw, 12px);
font-size: clamp(11px, 10.3px + 0.19vw, 13px);
line-height: 1.8;
margin-bottom: clamp(10px, 7.89px + 0.56vw, 16px);
}
.p-visit-card .p-visit-card__term, .p-visit-card dt {
color: var(--ink-3);
font-weight: 600;
}
.p-visit-card .p-visit-card__desc, .p-visit-card dd {
color: var(--ink-2);
}
.p-visit-card {
/* 実在スタッフの顔を並べて「誰が応対するか」を見せる(対面の安心感) */
}
.p-visit-card__staff {
margin-bottom: clamp(10px, 7.89px + 0.56vw, 16px);
}
.p-visit-card__stafflabel {
display: block;
font-size: 12px;
color: var(--ink-3);
margin-bottom: clamp(5px, 3.94px + 0.28vw, 8px);
}
.p-visit-card__faces {
display: flex;
gap: 0;
}
.p-visit-card__faces .p-visit-card__faces-img, .p-visit-card__faces img {
width: clamp(33px, 29.13px + 1.03vw, 44px);
height: clamp(33px, 29.13px + 1.03vw, 44px);
border-radius: 999px;
object-fit: cover;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(14, 34, 51, 0.16);
}
.p-visit-card__faces img + img {
margin-left: -10px;
}
.p-visit-card__acts {
margin-top: auto;
display: flex;
gap: clamp(5px, 3.94px + 0.28vw, 8px);
flex-wrap: wrap;
}
@media screen and (max-width: 760px) {
.p-visit-grid {
grid-template-columns: 1fr;
}
}
/* ---- 同意チェック（プライバシーポリシー）---- */
/* .c-field label{display:block}（フォーム共通）の方が詳細度が高く、チェックボックスが文言の上に浮いていたので .c-field 配下でも flex にする */
.c-field .c-consent,
.c-consent {
display: flex;
align-items: flex-start;
gap: clamp(7px, 5.94px + 0.28vw, 10px);
font-size: clamp(12px, 11.47px + 0.14vw, 13.5px);
line-height: 1.8;
color: var(--ink-2);
cursor: pointer;
}
.c-field .c-consent__input,
.c-consent__input {
width: 18px;
height: 18px;
margin-top: 3px;
flex-shrink: 0;
accent-color: var(--brand);
}
.c-field .c-consent__note,
.c-consent__note {
display: block;
margin-top: 4px;
padding-left: clamp(25px, 23.94px + 0.28vw, 28px);
font-size: clamp(10.5px, 9.97px + 0.14vw, 12px);
color: var(--ink-3);
line-height: 1.8;
}
/* CF7 の acceptance も同じ見え方にそろえる（ラベルはベンダー生成なのでタグ指定にしている） */
.c-field--consent .wpcf7-acceptance .wpcf7-list-item {
margin: 0;
}
.c-field--consent .wpcf7-acceptance .wpcf7-list-item label {
display: flex;
align-items: flex-start;
gap: clamp(7px, 5.94px + 0.28vw, 10px);
font-size: clamp(12px, 11.47px + 0.14vw, 13.5px);
line-height: 1.8;
color: var(--ink-2);
cursor: pointer;
}
.c-field--consent .wpcf7-acceptance .wpcf7-list-item input {
width: 18px;
height: 18px;
margin-top: 3px;
flex-shrink: 0;
accent-color: var(--brand);
}
@media screen and (max-width: 620px) {
.p-contact-fv__submit {
width: 100%;
}
}
/* ---- よくあるお問い合わせ内容 ----
英字の小さな番号 + 行間で読ませる。採番の見せ方はテーマの .p-scene-list に合わせている。 */
.p-contact-topics {
counter-reset: cttopic;
display: grid;
gap: 0;
margin: 0;
padding: 0;
list-style: none;
}
.p-contact-topics__item {
counter-increment: cttopic;
display: grid;
grid-template-columns: clamp(24px, 21.18px + 0.75vw, 32px) minmax(0, 1fr);
align-items: baseline;
gap: clamp(6px, 4.59px + 0.38vw, 10px);
padding: clamp(9px, 7.59px + 0.38vw, 13px) 0;
font-size: clamp(12px, 11.3px + 0.19vw, 14px);
line-height: 1.75;
color: var(--ink-2);
}
.p-contact-topics {
/* 行の間にだけ区切りを入れる（先頭の上・末尾の下には引かない） */
}
.p-contact-topics__item + .p-contact-topics__item {
border-top: 1px solid var(--line);
}
.p-contact-topics__item::before {
content: counter(cttopic, decimal-leading-zero);
font-family: var(--font-en);
font-weight: 800;
font-size: clamp(11px, 10.47px + 0.14vw, 12.5px);
letter-spacing: 0.1em;
color: var(--brand);
}
/* ---- お電話 ----
支店名＋現地時間（左）と番号（右）の2列。番号は英字フォントで大きく取り、日本からの番号は副の行に落とす。 */
.p-contact-tel {
border: 1px solid var(--line);
border-radius: var(--r-sm);
background: #fff;
}
.p-contact-tel__row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: clamp(9px, 6.54px + 0.66vw, 16px);
padding: clamp(11px, 9.24px + 0.47vw, 16px) clamp(12px, 9.89px + 0.56vw, 18px);
}
.p-contact-tel__row + .p-contact-tel__row {
border-top: 1px solid var(--line);
}
.p-contact-tel__place {
display: grid;
gap: 2px;
}
.p-contact-tel__name {
font-size: clamp(11.5px, 10.97px + 0.14vw, 13px);
font-weight: 700;
color: var(--ink);
}
.p-contact-tel__clock {
font-size: clamp(10.5px, 10.15px + 0.09vw, 11.5px);
color: var(--ink-3);
}
.p-contact-tel__clock-time {
font-family: var(--font-en);
font-weight: 700;
color: var(--ink-2);
}
.p-contact-tel__nums {
text-align: right;
margin: 0;
}
.p-contact-tel__main {
display: block;
font-family: var(--font-en);
font-size: clamp(17px, 15.59px + 0.38vw, 21px);
font-weight: 800;
letter-spacing: 0.01em;
color: var(--ink);
}
@media (hover: hover) {
.p-contact-tel__main:hover {
color: var(--brand-ink);
}
}
.p-contact-tel__sub {
display: block;
margin-top: 2px;
font-size: clamp(10.5px, 9.97px + 0.14vw, 12px);
color: var(--ink-3);
}
.p-contact-tel__sub-link {
font-family: var(--font-en);
font-weight: 700;
color: var(--ink-2);
}
@media (hover: hover) {
.p-contact-tel__sub-link:hover {
color: var(--brand-ink);
}
}
@media screen and (max-width: 520px) {
.p-contact-tel__row {
grid-template-columns: 1fr;
}
.p-contact-tel__nums {
text-align: left;
}
}
/* ============================================================
42. デバイス対応強化 (iPhone / Android / iPad)
============================================================ */
/* iOS: 横向き回転時の自動文字拡大を防止 */
html {
-webkit-text-size-adjust: 100%;
}
/* タップハイライトを抑えめに(Android Chrome) */
a, button {
-webkit-tap-highlight-color: rgba(10, 158, 203, 0.14);
}
/* iOS: 16px未満の入力欄はフォーカス時に画面が自動ズームされるため、モバイルでは16pxに */
@media screen and (max-width: 760px) {
.c-field .c-field__input, .c-field .c-field__select, .c-field .c-field__textarea, .c-field input, .c-field select, .c-field textarea, .p-rv-sort select, .p-search-box .p-search-box__input, .p-footer-search .p-footer-search__input {
font-size: 16px;
}
}
/* iPad縦(641〜900px): 口コミ・サービスカードを2列で活かす */
@media screen and (min-width: 621px) and (max-width: 860px) {
.c-review-grid {
grid-template-columns: 1fr 1fr;
max-width: none;
}
.p-svc-grid {
grid-template-columns: 1fr 1fr;
}
}
/* iPad横〜小型ノート(1001〜1180px): ツアー2カラムのサイドバーを最適幅に */
@media screen and (min-width: 1001px) and (max-width: 1180px) {
.p-tour-layout {
grid-template-columns: minmax(0, 1fr) 316px;
gap: 28px;
}
}
/* 小型スマホ(iPhone SE / 小型Android 380px以下): 余白と主要要素を微調整 */
@media screen and (max-width: 520px) {
.l-container {
padding-inline: 16px;
}
.c-btn--primary:not(.c-btn--small), .c-btn--brand:not(.c-btn--small) {
padding: 13px 22px;
font-size: 14.5px;
}
.p-tq-body {
padding: 20px 16px 22px;
}
.p-tour-header__meta {
gap: 8px 10px;
}
.p-seat-detail__price .p-seat-detail__price-strong, .p-seat-detail__price-strong {
font-size: 29px;
}
.p-hotel-block__head, .p-hotel-block__body {
padding-left: 16px;
padding-right: 16px;
}
}
/* 上部ユーティリティバー: 極小幅ではリンクを折り返して見切れ防止 */
@media screen and (max-width: 520px) {
.l-utility-bar__right {
flex-wrap: wrap;
justify-content: flex-end;
gap: 5px clamp(6px, -21.27px + 7.27vw, 10px);
padding: 3px 0;
}
.c-field-row {
grid-template-columns: 1fr;
}
}
/* iPad縦など中間幅でツアーカードグリッドが1列に落ちないよう補完 */
@media screen and (min-width: 621px) and (max-width: 860px) {
.p-tour-grid {
grid-template-columns: 1fr 1fr;
}
}
/* 横長画面のドロワー(スマホ横向き): 上下の余白を詰めてメニューを見やすく */
@media screen and (max-width: 1080px) and (max-height: 500px) {
.l-global-nav {
padding-top: 64px;
}
.l-global-nav > .l-global-nav__list > .l-global-nav__list-item > .l-global-nav__link {
padding: 11px 6px;
font-size: 15px;
}
}
/* ============================================================
72. スマホ専用の表示切替
方針: PCデザインは変えず、スマホだけ
①.p-hswipe=カード列を横スワイプ化 ②[data-sp-acc]=カード群をアコーディオン化
③支店カードの地図を非表示(「大きな地図で見る」リンクは残る)
============================================================ */
@media screen and (max-width: 620px) {
/* ① 横スワイプ列(.p-tour-grid/.c-post-grid/.c-review-grid に付与して使う) */
/* カード1枚を画面中央に置き、左右に次のカードをチラ見せする(センタースライダー)。
左右のpaddingで先頭・末尾も中央に来る。カード幅は grid-auto-columns:100%
＝ paddingを引いた内側の幅なので、余白は下の $peek だけで決まる。 */
/* 左右の余白が広く「右に変な隙間」に見えたので、
はみ出し量はSPのコンテナ余白(16px)に合わせ、チラ見せの余白を詰めた */
.p-hswipe {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 100%;
grid-template-columns: none;
gap: 12px;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
margin-inline: -16px;
padding: 4px 24px clamp(10px, 1.51px + 2.26vw, 16px);
}
.p-hswipe::-webkit-scrollbar {
display: none;
}
.p-hswipe > * {
scroll-snap-align: center;
min-width: 0;
}
.p-hswipe {
/* PC用の列数(u-grid-N)が同居していると、後に読む utility が勝って
先頭2列が潰れ、クローンのカードが縦長になる。横スワイプ中は列数を無効にする */
}
.p-hswipe.u-grid-2, .p-hswipe.u-grid-3 {
grid-template-columns: none;
}
.p-hswipe .c-tour-card__img .c-tour-card__img-img {
aspect-ratio: 3/2;
height: auto;
}
/* カード列のドット(main.js が .p-hswipe の直後に差し込む。PCでは削除される) */
.c-hswipe-dots {
display: flex;
justify-content: center;
gap: 0;
margin-top: clamp(4px, -1.66px + 1.51vw, 8px);
}
/* ボタン自体を 24px 角にしてタップ領域を確保し、見た目の点(8px)は ::before で描く */
.c-hswipe-dots__item {
position: relative;
width: 24px;
height: 24px;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
transition: width 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.c-hswipe-dots__item::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
translate: -50% -50%;
width: 8px;
height: 8px;
border-radius: 999px;
/* --line-2 だと地に沈んで見えないので、インクの透過にする */
background: rgba(21, 36, 47, 0.22);
transition: background 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), width 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.c-hswipe-dots__item.is-current {
width: 38px;
}
.c-hswipe-dots__item.is-current::before {
width: 22px;
background: var(--brand);
}
/* ② アコーディオン(コンテナに data-sp-acc、開閉はmain.jsが .is-open を付け外し) */
[data-sp-acc] > * {
position: relative;
cursor: pointer;
}
[data-sp-acc] > *::after {
content: "";
position: absolute;
top: clamp(18px, 6.68px + 3.02vw, 26px);
right: clamp(14px, 5.51px + 2.26vw, 20px);
width: 8px;
height: 8px;
border-right: 2px solid var(--ink-3);
border-bottom: 2px solid var(--ink-3);
transform: rotate(45deg);
transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
[data-sp-acc] > .is-open::after {
transform: rotate(-135deg);
}
/* 法人ページ サービスカード: アイコン+タイトルの行に圧縮、本文はタップで展開 */
#services [data-sp-acc] {
gap: clamp(6px, 0.34px + 1.51vw, 10px);
}
/* 会社案内 スタッフ紹介: 顔+名前の行、紹介文はタップで展開 */
[data-sp-acc] > .p-guide-profile {
display: flex;
align-items: center;
gap: clamp(9px, 1.92px + 1.89vw, 14px);
padding: clamp(9px, 1.92px + 1.89vw, 14px) clamp(27px, 5.77px + 5.66vw, 42px) clamp(9px, 1.92px + 1.89vw, 14px) clamp(10px, 1.51px + 2.26vw, 16px);
}
[data-sp-acc] > .p-guide-profile .p-guide-profile__avatar {
width: clamp(36px, 13.36px + 6.04vw, 52px);
height: clamp(36px, 13.36px + 6.04vw, 52px);
flex-shrink: 0;
}
[data-sp-acc] > .p-guide-profile > .p-guide-profile__body {
min-width: 0;
}
[data-sp-acc] > .p-guide-profile > .p-guide-profile__body .p-guide-profile__text {
margin-top: clamp(5px, 0.75px + 1.13vw, 8px);
}
[data-sp-acc] > .p-guide-profile:not(.is-open) > .p-guide-profile__body .p-guide-profile__text {
display: none;
}
[data-sp-acc] > .p-guide-profile::after {
top: 50%;
margin-top: -6px;
}
[data-sp-acc] > .p-guide-profile.is-open {
align-items: flex-start;
}
[data-sp-acc] > .p-guide-profile.is-open::after {
top: clamp(18px, 6.68px + 3.02vw, 26px);
margin-top: 0;
}
/* FAQ用語集: 語義はタップで展開(検索中はfaq-filter.jsが自動で開く) */
.p-gloss-list[data-sp-acc] > .p-gloss-item:not(.is-open) .p-gloss-item__desc {
display: none;
}
.p-gloss-list[data-sp-acc] > .p-gloss-item::after {
top: clamp(15px, 5.09px + 2.64vw, 22px);
}
/* ③ 支店カードの埋め込み地図(縦600px超)はスマホでは出さない */
.p-office-card__map {
display: none;
}
}
/* ============================================================
94. スマホの追加UI
[A] ドロワー内の言語切替(EN) … スマホではユーティリティバーが
窮屈なため、ハンバーガーメニューの中に置く
[B] ツアー個別: 予約フォームのモーダル(ボトムシート)表示
[C] FAQ: 右下追従の「カテゴリー」ボタン + モーダル展開
============================================================ */
/* ---- [A] ドロワー内のEN切替 ---- */
.p-lang-switch--drawer {
display: none;
}
@media screen and (max-width: 1080px) {
.p-lang-switch--drawer {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(5px, 3.4px + 0.43vw, 8px);
margin-top: clamp(8px, 5.87px + 0.57vw, 12px);
padding: clamp(8px, 5.87px + 0.57vw, 12px);
font-size: clamp(12px, 10.94px + 0.28vw, 14px);
font-weight: 700;
color: var(--ink-2);
border: 1px solid var(--line);
border-radius: clamp(9px, 7.4px + 0.43vw, 12px);
}
.p-lang-switch--drawer .c-ico {
width: 16px;
height: 16px;
color: var(--brand);
}
}
/* ---- [B] 予約フォームのモーダル ----
画面中央に浮かぶダイアログにする。
長いフォームなのでパネル自身をスクロールさせ、見出し行は sticky で残す。 */
.p-bkm {
position: fixed;
inset: 0;
z-index: 1300;
display: grid;
place-items: center;
padding: clamp(12px, 9.89px + 0.56vw, 18px);
opacity: 0;
visibility: hidden;
transition: opacity 0.22s, visibility 0.22s;
}
.p-bkm.is-open {
opacity: 1;
visibility: visible;
}
.p-bkm__backdrop {
position: absolute;
inset: 0;
background: rgba(14, 34, 51, 0.55);
}
.p-bkm__panel {
position: relative;
width: min(28.75rem, 100%);
max-height: 88svh;
overflow-y: auto;
background: var(--bg-2);
border-radius: clamp(14px, 12.59px + 0.38vw, 18px);
padding: 0 clamp(10px, 8.59px + 0.38vw, 14px) clamp(12px, 9.89px + 0.56vw, 18px);
box-shadow: 0 30px 80px rgba(8, 22, 36, 0.42);
transform: translateY(12px) scale(0.975);
transition: transform 0.26s;
/* 開いた直後にフォーカスを移すが枠は出さない */
}
.p-bkm__panel:focus {
outline: none;
}
.p-bkm.is-open .p-bkm__panel {
transform: none;
}
.p-bkm__head {
position: sticky;
top: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
background: var(--bg-2);
margin: 0 calc(-1 * clamp(10px, 8.59px + 0.38vw, 14px)) clamp(8px, 6.59px + 0.38vw, 12px);
padding: clamp(11px, 9.59px + 0.38vw, 15px) clamp(12px, 10.59px + 0.38vw, 16px) clamp(9px, 7.94px + 0.28vw, 12px);
border-bottom: 1px solid var(--line);
border-radius: clamp(14px, 12.59px + 0.38vw, 18px) clamp(14px, 12.59px + 0.38vw, 18px) 0 0;
}
.p-bkm__head-strong {
font-weight: 700;
font-size: clamp(13px, 12.3px + 0.19vw, 15px);
color: var(--ink);
}
.p-bkm__close {
width: clamp(30px, 28.59px + 0.38vw, 34px);
height: clamp(30px, 28.59px + 0.38vw, 34px);
border-radius: 999px;
background: #fff;
border: 1px solid var(--line);
display: grid;
place-items: center;
cursor: pointer;
}
.p-bkm__close .c-ico {
width: 1.125rem;
height: 1.125rem;
}
.p-bkm {
/* モーダル内では booking-box の飾りを少し落ち着かせる */
}
.p-bkm .p-booking-box {
box-shadow: none;
margin: 0;
}
@media (prefers-reduced-motion: reduce) {
.p-bkm__panel {
transform: none;
transition: none;
}
}
/* ---- [B-2] 入力内容の一時保存メッセージ ----
復元したときだけ出す(main.js initBookingDraft)。個人情報を端末に置くので、
保存している事実と消す手段(クリア)を必ず同じ場所に示す。 */
.p-bk-draft-note {
display: flex;
align-items: center;
gap: clamp(8px, 7.3px + 0.19vw, 10px);
flex-wrap: wrap;
margin: 0 0 clamp(10px, 8.59px + 0.38vw, 14px);
padding: clamp(8px, 7.3px + 0.19vw, 10px) clamp(10px, 9.3px + 0.19vw, 12px);
border-radius: clamp(8px, 7.3px + 0.19vw, 10px);
background: var(--brand-050);
border: 1px solid var(--brand-100);
font-size: 0.78125rem;
line-height: 1.7;
color: var(--brand-ink);
}
.p-bk-draft-note__clear {
margin-left: auto;
flex-shrink: 0;
padding: clamp(4px, 3.65px + 0.09vw, 5px) clamp(9px, 8.3px + 0.19vw, 11px);
border-radius: 999px;
border: 1px solid var(--line);
background: #fff;
color: var(--ink-2);
font-size: 0.75rem;
font-weight: 700;
font-family: inherit;
cursor: pointer;
}
@media (hover: hover) {
.p-bk-draft-note__clear:hover {
background: var(--brand-050);
color: var(--brand-ink);
}
}
/* ---- [C] FAQのカテゴリーFAB + シート ---- */
.p-faqcat-fab {
display: none;
}
@media screen and (max-width: 1080px) {
.p-faqcat-fab {
position: fixed;
right: clamp(11px, 8.34px + 0.71vw, 16px);
bottom: clamp(64px, 49.11px + 3.97vw, 92px);
z-index: 941;
width: clamp(41px, 31.96px + 2.41vw, 58px);
height: clamp(41px, 31.96px + 2.41vw, 58px);
border-radius: 999px;
background: var(--navy);
color: #fff;
display: grid;
place-items: center;
gap: 1px;
border: none;
cursor: pointer;
box-shadow: 0 10px 28px rgba(14, 34, 51, 0.35);
}
.p-faqcat-fab .c-ico {
width: clamp(15px, 12.34px + 0.71vw, 20px);
height: clamp(15px, 12.34px + 0.71vw, 20px);
}
.p-faqcat-fab .p-faqcat-fab__note, .p-faqcat-fab__note {
font-size: 9px;
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1;
}
/* 相談FAB(bottom:20)の上に積むため、トップへ戻るはさらに上へ */
body.has-faqcat .c-back-to-top {
bottom: clamp(115px, 88.94px + 6.95vw, 164px);
}
/* ツアー総合入口(/tours/)は一回り大きく(58px・アイコン24px)。tour.js ③ が付ける */
.p-faqcat-fab--tours {
width: 3.625rem;
height: 3.625rem;
}
.p-faqcat-fab--tours .c-ico {
width: 1.5rem;
height: 1.5rem;
}
/* 大きくしたボタンの上端(下から 64+58px)にかぶらないよう、トップへ戻るをさらに上へ */
body.has-tours-cat .c-back-to-top {
bottom: clamp(132px, 114.98px + 4.54vw, 164px);
}
}
.p-faqcat-sheet {
position: fixed;
inset: 0;
z-index: 1250;
background: rgba(14, 34, 51, 0.5);
opacity: 0;
visibility: hidden;
transition: 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.p-faqcat-sheet.is-open {
opacity: 1;
visibility: visible;
}
.p-faqcat-sheet__panel {
position: absolute;
left: 0;
right: 0;
bottom: 0;
background: #fff;
border-radius: clamp(14px, 12.59px + 0.38vw, 18px) clamp(14px, 12.59px + 0.38vw, 18px) 0 0;
padding: clamp(12px, 9.18px + 0.75vw, 20px) clamp(13px, 9.83px + 0.85vw, 22px) clamp(18px, 13.77px + 1.13vw, 30px);
max-height: 72vh;
overflow-y: auto;
transform: translateY(100%);
transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.p-faqcat-sheet.is-open .p-faqcat-sheet__panel {
transform: none;
}
.p-faqcat-sheet__head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: clamp(9px, 7.94px + 0.28vw, 12px);
font-weight: 700;
}
.p-faqcat-sheet__close {
width: clamp(26px, 23.18px + 0.75vw, 34px);
height: clamp(26px, 23.18px + 0.75vw, 34px);
border-radius: 999px;
background: var(--bg-2);
border: none;
display: grid;
place-items: center;
cursor: pointer;
}
.p-faqcat-sheet__close .c-ico {
width: clamp(15px, 13.24px + 0.47vw, 20px);
height: clamp(15px, 13.24px + 0.47vw, 20px);
}
.p-faqcat-sheet__list {
display: grid;
gap: 4px;
}
.p-faqcat-sheet__list a {
display: flex;
align-items: center;
gap: clamp(6px, 4.59px + 0.38vw, 10px);
padding: clamp(7px, 5.59px + 0.38vw, 11px) clamp(4px, 3.3px + 0.19vw, 6px);
font-size: clamp(12px, 11.3px + 0.19vw, 14px);
font-weight: 600;
color: var(--ink);
border-bottom: 1px solid var(--line-2);
}
.p-faqcat-sheet__list a .c-ico {
width: 16px;
height: 16px;
color: var(--brand);
}
.p-faqcat-sheet {
/* 現在地（ツアー総合入口 /tours/ で tour.js ③ が付ける） */
}
.p-faqcat-sheet__list a.is-current {
background: var(--brand);
border-color: var(--brand);
color: #fff;
}
.p-faqcat-sheet__list a.is-current .c-ico {
color: #fff;
}
.p-faqcat-sheet__list a.is-current .c-chip-n {
background: rgba(255, 255, 255, 0.25);
color: #fff;
}
/* ============================================================
汎用ユーティリティ
============================================================ */
.u-w-full.u-w-full.u-w-full {
width: 100%;
}
.u-en-bold.u-en-bold.u-en-bold {
font-family: var(--font-en);
font-weight: 700;
}
.u-mt-26.u-mt-26.u-mt-26 {
margin-top: clamp(16px, 12.48px + 0.94vw, 26px);
}
.u-mt-44.u-mt-44.u-mt-44 {
margin-top: clamp(26px, 19.66px + 1.69vw, 44px);
}
.u-mb-14.u-mb-14.u-mb-14 {
margin-bottom: clamp(9px, 7.24px + 0.47vw, 14px);
}
.u-mb-24.u-mb-24.u-mb-24 {
margin-bottom: clamp(14px, 10.48px + 0.94vw, 24px);
}
.u-note.u-note.u-note {
font-size: clamp(11px, 10.3px + 0.19vw, 13px);
color: var(--ink-3);
}
.u-accent-ink.u-accent-ink.u-accent-ink {
font-weight: 700;
color: var(--accent-ink);
}
.u-navy.u-navy.u-navy {
font-weight: 700;
color: var(--navy-800);
}
.u-center-mt16.u-center-mt16.u-center-mt16 {
text-align: center;
margin-top: clamp(10px, 7.89px + 0.56vw, 16px);
}
.u-fs-18.u-fs-18.u-fs-18 {
font-size: clamp(15px, 13.94px + 0.28vw, 18px);
}
.u-navy-head.u-navy-head.u-navy-head {
font-weight: 700;
display: block;
color: var(--navy-800);
margin-bottom: clamp(4px, 3.3px + 0.19vw, 6px);
}
.u-soft-mb6.u-soft-mb6.u-soft-mb6 {
color: var(--ink-soft);
margin-bottom: clamp(4px, 3.3px + 0.19vw, 6px);
}
.u-soft-mb8.u-soft-mb8.u-soft-mb8 {
color: var(--ink-soft);
margin-bottom: clamp(5px, 3.94px + 0.28vw, 8px);
}
.u-mute-sm.u-mute-sm.u-mute-sm {
font-size: 12px;
color: var(--ink-mute);
}
.u-mt-14.u-mt-14.u-mt-14 {
margin-top: clamp(9px, 7.24px + 0.47vw, 14px);
}
.u-mt-30.u-mt-30.u-mt-30 {
margin-top: clamp(18px, 13.77px + 1.13vw, 30px);
}
.u-mb-10.u-mb-10.u-mb-10 {
margin-bottom: clamp(6px, 4.59px + 0.38vw, 10px);
}
.u-mb-26.u-mb-26.u-mb-26 {
margin-bottom: clamp(16px, 12.48px + 0.94vw, 26px);
}
.u-bold.u-bold.u-bold {
font-weight: 700;
}
.u-brand-link.u-brand-link.u-brand-link {
color: var(--brand-ink);
font-weight: 700;
}
.u-maple.u-maple.u-maple {
color: var(--maple);
}
.u-mt-48.u-mt-48.u-mt-48 {
margin-top: clamp(29px, 22.31px + 1.78vw, 48px);
}
/* ============================================================
テンプレート用の追加分
値は既存ユーティリティに
合わせて fluid() 化している。
============================================================ */
.u-ink2 {
color: var(--ink-2);
}
.u-center {
text-align: center;
}
.u-center-mt32 {
text-align: center;
margin-top: clamp(20px, 15.77px + 1.13vw, 32px);
}
.u-mx-auto {
margin-inline: auto;
}
.u-self-auto {
align-self: auto;
}
.u-flat {
border: none;
box-shadow: none;
}
.u-grid-2 {
grid-template-columns: repeat(2, 1fr);
}
.u-actions-center {
display: flex;
gap: clamp(8px, 6.59px + 0.38vw, 12px);
justify-content: center;
flex-wrap: wrap;
}
/* 余白 */
.u-mt-34 {
margin-top: clamp(20px, 15.07px + 1.31vw, 34px);
}
.u-mt-56 {
margin-top: clamp(34px, 26.25px + 2.07vw, 56px);
}
.u-mb-18 {
margin-bottom: clamp(11px, 8.54px + 0.66vw, 18px);
}
.u-mb-22 {
margin-bottom: clamp(13px, 9.83px + 0.85vw, 22px);
}
.u-mb-28 {
margin-bottom: clamp(17px, 13.13px + 1.03vw, 28px);
}
.u-mb-32 {
margin-bottom: clamp(20px, 15.77px + 1.13vw, 32px);
}
.u-mb-52 {
margin-bottom: clamp(31px, 23.61px + 1.97vw, 52px);
}
.u-mb-56 {
margin-bottom: clamp(34px, 26.25px + 2.07vw, 56px);
}
.u-my-18 {
margin: clamp(11px, 8.54px + 0.66vw, 18px) 0;
}
.u-pt-0 {
padding-top: 0;
}
.u-pb-0 {
padding-bottom: 0;
}
.u-pt-30 {
padding-top: clamp(18px, 13.77px + 1.13vw, 30px);
}
/* 幅 */
.u-w-150 {
width: clamp(105px, 89.15px + 4.23vw, 150px);
}
.u-mw-560 {
max-width: 560px;
}
.u-mw-640 {
max-width: 640px;
}
.u-mw-760 {
max-width: 760px;
}
.u-mw-860 {
max-width: 860px;
}
/* 注記 */
.u-note-14 {
font-size: clamp(12px, 11.47px + 0.14vw, 13.5px);
color: var(--ink-2);
}
.u-note-mt8 {
font-size: 12px;
color: var(--ink-3);
margin-top: clamp(5px, 3.94px + 0.28vw, 8px);
}
.u-note-mt14 {
font-size: 12.5px;
color: var(--ink-3);
margin-top: clamp(9px, 7.24px + 0.47vw, 14px);
}
.u-note-mt16 {
font-size: 12px;
color: var(--ink-3);
margin-top: clamp(10px, 7.89px + 0.56vw, 16px);
}
/* アイコンの symbol 定義を入れる入れ物。描画させないが display:none だと
Safariで |