/* =========================================================
/ski/compare/ 専用CSS 完成版
すべて .cmp-page 配下に限定し、他ページへの影響を防ぎます。
========================================================= */

/* =========================================================
01. PAGE BASE
========================================================= */
.cmp-page {
--cmp-base:#26333a;
--cmp-bg:#f5f6f5;
--cmp-line:#dce1e2;
--cmp-text:#20272b;
--cmp-sub:#5d666b;
--cmp-bus:#3d77ad;
--cmp-jr:#287a5b;
--cmp-stay:#a15d4e;
--cmp-buson:#3b9da2;
color:var(--cmp-text);
background:#fff;
font-size:16px;
}

.cmp-page,
.cmp-page * {
box-sizing:border-box;
}

.cmp-page button {
font:inherit;
}

.cmp-page .cmp-container {
width:min(1180px,calc(100% - 48px));
margin:0 auto;
}

.cmp-page .cmp-eyebrow {
display:block;
margin:0 0 10px;
color:#566168;
font-size:13px;
line-height:1.4;
font-weight:700;
letter-spacing:.16em;
}

.cmp-page .sp-only {
display:none;
}

/* =========================================================
02. HERO
比較ページらしく、PC/SPとも中央配置で固定。
========================================================= */
.cmp-page .cmp-hero {
position:relative;
display:flex;
align-items:center;
min-height:440px;
overflow:hidden;
background:#dfe5e7;
}

.cmp-page .cmp-hero__image {
position:absolute;
inset:0;
width:100%;
height:100%;
background-image:linear-gradient(rgba(18,28,34,.52),rgba(18,28,34,.52)),url("../../img/ski/compare/img_1920x800_001.webp");
background-position:center 45%;
background-repeat:no-repeat;
background-size:cover;
}

.cmp-page .cmp-hero .cmp-container {
position:relative;
z-index:1;
}

.cmp-page .cmp-hero__inner {
position:relative;
z-index:1;
display:block;
width:100%;
max-width:900px;
margin:0 auto;
padding:74px 24px;
color:#fff;
text-align:center;
}

.cmp-page .cmp-hero .cmp-eyebrow {
margin:0 0 10px;
color:#fff;
font-size:13px;
text-align:center;
}

.cmp-page .cmp-hero h2 {
width:100%;
max-width:none;
margin:0;
color:#fff;
font-size:38px;
line-height:1.45;
font-weight:700;
letter-spacing:.02em;
text-align:center;
}

.cmp-page .cmp-hero p {
width:100%;
max-width:760px;
margin:20px auto 0;
color:#fff;
font-size:17px;
line-height:1.9;
font-weight:500;
text-align:center;
}

.cmp-page .cmp-hero__button {
display:inline-flex;
align-items:center;
justify-content:center;
gap:11px;
width:auto;
margin:28px auto 0;
padding:15px 22px;
border-radius:7px;
background:#fff;
color:var(--cmp-base);
font-size:15px;
line-height:1;
font-weight:700;
text-decoration:none;
}

/* =========================================================
03. COMMON SECTION / HEADING
========================================================= */
.cmp-page .cmp-section {
padding:76px 0 82px;
}

.cmp-page .cmp-heading {
max-width:850px;
margin:0 auto 36px;
text-align:center;
}

.cmp-page .cmp-heading h2 {
margin:0;
font-size:32px;
line-height:1.45;
font-weight:700;
letter-spacing:.02em;
}

.cmp-page .cmp-heading p {
margin:13px 0 0;
color:var(--cmp-sub);
font-size:16px;
line-height:1.8;
}

/* =========================================================
04. COMPARE
ページの主役。HERO直下に配置。
========================================================= */
.cmp-page .cmp-section--compare {
padding:80px 0 84px;
background:var(--cmp-bg);
}

.cmp-page .cmp-heading--compare {
max-width:900px;
margin:0 auto 36px;
text-align:center;
}

.cmp-page .cmp-heading--compare .cmp-eyebrow {
margin:0 0 12px;
color:#4f5c62;
font-size:13px;
text-align:center;
}

.cmp-page .cmp-heading--compare h2 {
margin:0;
font-size:36px;
line-height:1.4;
font-weight:700;
letter-spacing:.02em;
text-align:center;
}

.cmp-page .cmp-heading--compare p {
margin:14px 0 0;
color:var(--cmp-sub);
font-size:16px;
line-height:1.8;
font-weight:500;
text-align:center;
}

.cmp-page .cmp-table-hint {
display:none;
}

/* =========================================================
05. COMPARE TABLE
PC：比較項目140px＋残り4列を完全均等割り。
========================================================= */
.cmp-page .cmp-table-wrap {
display:block;
width:100%;
max-width:none;
margin:0;
overflow:hidden;
border:1px solid #d4dadb;
border-radius:13px;
background:#fff;
box-shadow:0 4px 16px rgba(25,35,40,.05);
}

.cmp-page .cmp-table {
display:table;
width:100% !important;
min-width:100% !important;
max-width:none !important;
margin:0 !important;
border:0;
border-spacing:0;
border-collapse:collapse;
table-layout:fixed;
}

.cmp-page .cmp-table col.cmp-table__label-col {
width:140px;
}

.cmp-page .cmp-table col:not(.cmp-table__label-col) {
width:auto;
}

.cmp-page .cmp-table th,
.cmp-page .cmp-table td {
box-sizing:border-box;
height:auto;
padding:18px 14px;
border-right:1px solid var(--cmp-line);
border-bottom:1px solid var(--cmp-line);
font-size:14px;
line-height:1.6;
text-align:center;
vertical-align:middle;
}

.cmp-page .cmp-table tr > *:last-child {
border-right:0;
}

.cmp-page .cmp-table tbody tr:last-child > * {
border-bottom:0;
}

.cmp-page .cmp-table thead th {
height:82px;
padding:14px 10px;
color:#fff;
font-size:15px;
line-height:1.5;
font-weight:700;
}

.cmp-page .cmp-table thead th:first-child {
background:var(--cmp-base);
}

.cmp-page .cmp-table thead th > i {
display:block;
margin:0 0 6px;
font-size:18px;
}

.cmp-page .cmp-table thead th > span {
display:block;
}

.cmp-page .cmp-table .cmp-col-bus {
background:var(--cmp-bus);
}

.cmp-page .cmp-table .cmp-col-jr {
background:var(--cmp-jr);
}

.cmp-page .cmp-table .cmp-col-stay {
background:var(--cmp-stay);
}

.cmp-page .cmp-table .cmp-col-buson {
background:var(--cmp-buson);
}

.cmp-page .cmp-table__buson {
display:flex !important;
align-items:center;
justify-content:center;
gap:4px;
margin:0 0 6px;
}

.cmp-page .cmp-table__buson i {
margin:0 !important;
font-size:18px;
}

.cmp-page .cmp-table__buson i:last-child {
font-size:12px;
}

.cmp-page .cmp-table tbody th {
background:#f0f2f2;
font-weight:700;
}

.cmp-page .cmp-table tbody td {
background:#fff;
font-weight:500;
}

.cmp-page .cmp-circle {
font-size:18px;
font-weight:700;
}

.cmp-page .cmp-table__recommend th,
.cmp-page .cmp-table__recommend td {
background:#fafafa;
font-weight:700;
}

.cmp-page .cmp-note {
margin:13px 0 0;
color:#727b7f;
font-size:12px;
line-height:1.7;
}

/* =========================================================
06. CHOICE GUIDE
比較後、重視したい条件から4タイプを選ぶ。
========================================================= */
.cmp-page .cmp-section--guide {
padding:76px 0 82px;
background:#fff;
}

.cmp-page .cmp-guide-grid {
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:16px;
width:100%;
}

.cmp-page .cmp-guide-card {
--type-color:var(--cmp-base);
appearance:none;
-webkit-appearance:none;
position:relative;
display:flex;
flex-direction:column;
align-items:center;
width:100%;
min-width:0;
min-height:300px;
margin:0;
padding:28px 20px 22px;
border:1px solid #dfe3e4;
border-top:4px solid var(--type-color);
border-radius:10px;
outline:0;
background:#fff;
box-shadow:none;
color:var(--cmp-text);
font-family:inherit;
font-size:inherit;
line-height:inherit;
text-align:center;
cursor:pointer;
transition:transform .2s ease,box-shadow .2s ease;
}

.cmp-page .cmp-guide-card:hover {
transform:translateY(-3px);
box-shadow:0 8px 24px rgba(25,35,40,.10);
}

.cmp-page .cmp-guide-card--bus {
--type-color:var(--cmp-bus);
}

.cmp-page .cmp-guide-card--jr {
--type-color:var(--cmp-jr);
}

.cmp-page .cmp-guide-card--stay {
--type-color:var(--cmp-stay);
}

.cmp-page .cmp-guide-card--buson {
--type-color:var(--cmp-buson);
}

.cmp-page .cmp-guide-card__icon {
display:flex;
align-items:center;
justify-content:center;
gap:4px;
flex:0 0 auto;
width:58px;
height:58px;
margin:0 0 17px;
border-radius:50%;
background:var(--type-color);
color:#fff;
font-size:23px;
line-height:1;
}

.cmp-page .cmp-guide-card__icon i {
margin:0;
}

.cmp-page .cmp-guide-card__icon--buson i:last-child {
font-size:14px;
}

.cmp-page .cmp-guide-card__body {
display:flex;
flex:1 1 auto;
flex-direction:column;
align-items:center;
width:100%;
min-width:0;
}

.cmp-page .cmp-guide-card__body small {
display:block;
margin:0;
color:var(--cmp-sub);
font-size:13px;
line-height:1.55;
font-weight:700;
}

.cmp-page .cmp-guide-card__body strong {
display:block;
margin:5px 0 0;
color:var(--type-color);
font-size:21px;
line-height:1.45;
font-weight:700;
}

.cmp-page .cmp-guide-card__body > span {
display:block;
margin:10px 0 0;
color:var(--cmp-sub);
font-size:14px;
line-height:1.7;
font-weight:400;
}

.cmp-page .cmp-guide-card__body em {
display:flex;
align-items:center;
justify-content:center;
gap:7px;
margin:auto 0 0;
padding:18px 0 0;
color:var(--type-color);
font-size:13px;
line-height:1.5;
font-weight:700;
font-style:normal;
}

.cmp-page .cmp-guide-card__body em i {
font-size:11px;
}


/* =========================================================
07. SEARCH
index.php の実HTML構造と1対1で対応
.cmp-search
  .cmp-search__head
    .cmp-search__step
  .cmp-search-start
    .cmp-search-start__label
    .cmp-search-start__grid
========================================================= */
.cmp-page .cmp-search {
padding:80px 0 88px;
scroll-margin-top:20px;
background:#eef1f1;
}

/* 検索セクション見出し */
.cmp-page .cmp-search__head {
max-width:850px;
margin:0 auto 38px;
text-align:center;
}

.cmp-page .cmp-search__step {
display:block;
margin:0 0 12px;
color:#566168;
font-size:13px;
line-height:1.4;
font-weight:700;
letter-spacing:.16em;
text-align:center;
}

.cmp-page .cmp-search__head h2 {
margin:0;
color:#20272b;
font-size:32px;
line-height:1.45;
font-weight:700;
letter-spacing:.02em;
text-align:center;
}

.cmp-page .cmp-search__head p {
max-width:720px;
margin:14px auto 0;
color:#5d666b;
font-size:16px;
line-height:1.8;
font-weight:500;
text-align:center;
}

/* 4タイプ選択パネル */
.cmp-page .cmp-search-start {
max-width:1040px;
margin:0 auto;
padding:28px;
border:1px solid #d9dede;
border-radius:14px;
background:#fff;
box-shadow:0 6px 22px rgba(25,35,40,.07);
}

.cmp-page .cmp-search-start[hidden] {
display:none !important;
}



/* 検索タイプ選択の見出し＋補足説明
   補足は非操作要素としてカード化しない */
.cmp-page .cmp-search-start__head {
margin:0 0 20px;
}

.cmp-page .cmp-search-start__label {
margin:0;
color:#20272b;
font-size:18px;
line-height:1.5;
font-weight:700;
text-align:left;
}

.cmp-page .cmp-search-start__description {
position:relative;
margin:6px 0 0;
padding-left:18px;
color:#667176;
font-size:13px;
line-height:1.7;
font-weight:400;
}

.cmp-page .cmp-search-start__description::before {
content:"";
position:absolute;
top:.65em;
left:2px;
width:6px;
height:6px;
border-radius:50%;
background:#aab2b5;
}

.cmp-page .cmp-search-start__grid {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
}

.cmp-page .cmp-search-start__button {
--type-color:var(--cmp-base);
appearance:none;
-webkit-appearance:none;
display:grid;
grid-template-columns:48px 1fr 18px;
align-items:center;
gap:13px;
width:100%;
min-height:92px;
padding:15px 17px;
border:2px solid #e0e4e4;
border-radius:9px;
background:#fff;
color:var(--cmp-text);
text-align:left;
cursor:pointer;
transition:border-color .2s,background .2s,transform .2s;
}

.cmp-page .cmp-search-start__button--bus {
--type-color:var(--cmp-bus);
}

.cmp-page .cmp-search-start__button--jr {
--type-color:var(--cmp-jr);
}

.cmp-page .cmp-search-start__button--stay {
--type-color:var(--cmp-stay);
}

.cmp-page .cmp-search-start__button--buson {
--type-color:var(--cmp-buson);
}

.cmp-page .cmp-search-start__button:hover {
border-color:var(--type-color);
background:#fafcfc;
transform:translateY(-1px);
}

.cmp-page .cmp-search-start__button > i:first-child,
.cmp-page .cmp-search-start__buson {
display:flex;
align-items:center;
justify-content:center;
gap:3px;
width:48px;
height:48px;
border-radius:50%;
background:var(--type-color);
color:#fff;
font-size:19px;
}

.cmp-page .cmp-search-start__buson i:last-child {
font-size:12px;
}

.cmp-page .cmp-search-start__button strong {
display:block;
font-size:16px;
line-height:1.45;
font-weight:700;
}

.cmp-page .cmp-search-start__button small {
display:block;
margin-top:3px;
color:#697277;
font-size:12px;
line-height:1.5;
}

.cmp-page .cmp-search-start__button > i:last-child {
color:var(--type-color);
font-size:12px;
}

/* 検索セクションSP */
@media (max-width:767px) {

.cmp-page .cmp-search {
padding:54px 0 62px;
}

.cmp-page .cmp-search__head {
margin:0 0 28px;
text-align:left;
}

.cmp-page .cmp-search__step {
margin-bottom:9px;
font-size:11px;
text-align:left;
}

.cmp-page .cmp-search__head h2 {
font-size:24px;
line-height:1.5;
text-align:left;
}

.cmp-page .cmp-search__head p {
margin:10px 0 0;
font-size:14px;
line-height:1.75;
text-align:left;
}

.cmp-page .cmp-search-start {
padding:18px 14px;
}

.cmp-page .cmp-search-start__head {
margin-bottom:16px;
}

.cmp-page .cmp-search-start__label {
font-size:15px;
}

.cmp-page .cmp-search-start__description {
margin-top:5px;
padding-left:15px;
font-size:11px;
line-height:1.65;
}

.cmp-page .cmp-search-start__description::before {
width:5px;
height:5px;
}



.cmp-page .cmp-search-start__grid {
grid-template-columns:1fr;
gap:9px;
}

.cmp-page .cmp-search-start__button {
min-height:78px;
padding:12px 13px;
}

}

/* =========================================================
08. CONDITION PANEL
========================================================= */
.cmp-page .cmp-condition-panel {
--type-color:var(--cmp-base);
max-width:960px;
margin:0 auto;
padding:30px;
border:1px solid #d9dede;
border-top:5px solid var(--type-color);
border-radius:13px;
background:#fff;
box-shadow:0 6px 22px rgba(25,35,40,.07);
}

.cmp-page .cmp-condition-panel[hidden] {
display:none !important;
}

.cmp-page .cmp-condition-panel--bus {
--type-color:var(--cmp-bus);
}

.cmp-page .cmp-condition-panel--jr {
--type-color:var(--cmp-jr);
}

.cmp-page .cmp-condition-panel--stay {
--type-color:var(--cmp-stay);
}

.cmp-page .cmp-condition-panel--buson {
--type-color:var(--cmp-buson);
}

.cmp-page .cmp-condition-panel__head {
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding-bottom:20px;
border-bottom:1px solid #e3e7e7;
}

.cmp-page .cmp-condition-panel__title {
display:flex;
align-items:center;
gap:14px;
}

.cmp-page .cmp-condition-panel__title > i,
.cmp-page .cmp-condition-panel__buson {
display:flex;
align-items:center;
justify-content:center;
gap:3px;
width:50px;
height:50px;
border-radius:50%;
background:var(--type-color);
color:#fff;
font-size:20px;
}

.cmp-page .cmp-condition-panel__buson i:last-child {
font-size:13px;
}

.cmp-page .cmp-condition-panel__title small {
display:block;
color:var(--type-color);
font-size:11px;
font-weight:700;
letter-spacing:.1em;
}

.cmp-page .cmp-condition-panel__title strong {
display:block;
margin-top:2px;
font-size:23px;
line-height:1.4;
font-weight:700;
}

.cmp-page .cmp-change-type {
padding:9px 13px;
border:1px solid #cbd2d3;
border-radius:6px;
background:#fff;
color:#596267;
font-size:12px;
font-weight:700;
cursor:pointer;
}

.cmp-page .cmp-condition-panel__lead {
margin:22px 0;
color:var(--cmp-sub);
font-size:15px;
line-height:1.8;
}

.cmp-page .cmp-condition-group {
margin-top:24px;
}

.cmp-page .cmp-condition-group h3 {
margin:0 0 10px;
font-size:17px;
font-weight:700;
}

.cmp-page .cmp-action-grid {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
}

.cmp-page .cmp-action-grid--single {
grid-template-columns:minmax(0,620px);
justify-content:center;
}

.cmp-page .cmp-action {
appearance:none;
-webkit-appearance:none;
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
width:100%;
min-height:94px;
padding:17px 18px;
border:2px solid #e1e5e5;
border-radius:9px;
background:#fff;
color:var(--cmp-text);
text-align:left;
cursor:pointer;
transition:border-color .2s,background .2s;
}

.cmp-page .cmp-action:hover {
border-color:var(--type-color);
background:#fafcfc;
}

.cmp-page .cmp-action > span {
display:grid;
grid-template-columns:34px 1fr;
align-items:center;
column-gap:10px;
flex:1;
}

.cmp-page .cmp-action > span > i {
grid-row:1 / 3;
color:var(--type-color);
font-size:21px;
text-align:center;
}

.cmp-page .cmp-action strong {
font-size:16px;
line-height:1.45;
font-weight:700;
}

.cmp-page .cmp-action small {
margin-top:4px;
color:#697277;
font-size:12px;
line-height:1.5;
}

.cmp-page .cmp-action > i {
color:var(--type-color);
font-size:13px;
}

.cmp-page .cmp-more-link {
display:flex;
align-items:center;
justify-content:center;
gap:8px;
width:max-content;
max-width:100%;
margin:25px auto 0;
color:var(--type-color);
font-size:13px;
font-weight:700;
text-decoration:none;
}

/* =========================================================
10. SP
========================================================= */
@media (max-width:767px) {

.cmp-page {
font-size:15px;
}

.cmp-page .cmp-container {
width:calc(100% - 30px);
}

.cmp-page .sp-only {
display:block;
}

.cmp-page .pc-only {
display:none;
}

/* HERO */
.cmp-page .cmp-hero {
min-height:390px;
}

.cmp-page .cmp-hero__image {
background-position:center;
}

.cmp-page .cmp-hero__inner {
max-width:none;
padding:54px 0;
text-align:center;
}

.cmp-page .cmp-hero .cmp-eyebrow {
font-size:11px;
text-align:center;
}

.cmp-page .cmp-hero h1 {
font-size:28px;
line-height:1.5;
text-align:center;
}

.cmp-page .cmp-hero p {
margin-top:15px;
font-size:14px;
line-height:1.8;
text-align:center;
}

.cmp-page .cmp-hero__button {
margin-top:23px;
padding:14px 17px;
font-size:13px;
}

/* 共通見出し */
.cmp-page .cmp-section {
padding:50px 0 56px;
}

.cmp-page .cmp-heading {
margin:0 0 24px;
text-align:left;
}

.cmp-page .cmp-heading h2 {
font-size:24px;
text-align:left;
}

.cmp-page .cmp-heading p {
margin-top:9px;
font-size:14px;
text-align:left;
}

.cmp-page .cmp-eyebrow {
font-size:11px;
}

/* 比較 */
.cmp-page .cmp-section--compare {
padding:52px 0 58px;
}

.cmp-page .cmp-heading--compare {
margin-bottom:24px;
text-align:left;
}

.cmp-page .cmp-heading--compare .cmp-eyebrow {
font-size:11px;
text-align:left;
}

.cmp-page .cmp-heading--compare h2 {
font-size:25px;
line-height:1.45;
text-align:left;
}

.cmp-page .cmp-heading--compare p {
margin-top:10px;
font-size:14px;
line-height:1.75;
text-align:left;
}

.cmp-page .cmp-table-hint {
display:block;
margin:0 0 9px;
color:#667176;
font-size:11px;
font-weight:700;
}

.cmp-page .cmp-table-wrap {
width:calc(100% + 15px);
overflow-x:auto;
border-radius:10px 0 0 10px;
-webkit-overflow-scrolling:touch;
}

.cmp-page .cmp-table {
width:780px !important;
min-width:780px !important;
max-width:none !important;
}

.cmp-page .cmp-table col.cmp-table__label-col {
width:112px;
}

.cmp-page .cmp-table th,
.cmp-page .cmp-table td {
padding:13px 9px;
font-size:12px;
}

.cmp-page .cmp-table thead th {
height:70px;
font-size:12px;
}

.cmp-page .cmp-note {
font-size:10px;
}

/* CHOICE GUIDE */
.cmp-page .cmp-section--guide {
padding:50px 0 56px;
}

.cmp-page .cmp-guide-grid {
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
}

.cmp-page .cmp-guide-card {
min-height:275px;
padding:23px 13px 17px;
}

.cmp-page .cmp-guide-card__icon {
width:50px;
height:50px;
margin-bottom:14px;
font-size:20px;
}

.cmp-page .cmp-guide-card__body small {
font-size:11px;
}

.cmp-page .cmp-guide-card__body strong {
font-size:17px;
}

.cmp-page .cmp-guide-card__body > span {
font-size:12px;
line-height:1.65;
}

.cmp-page .cmp-guide-card__body em {
font-size:11px;
}

/* =========================================================
11. SMALL SP
========================================================= */
@media (max-width:374px) {

.cmp-page .cmp-guide-grid {
grid-template-columns:1fr;
}

.cmp-page .cmp-guide-card {
min-height:230px;
}

}