/* Services テンプレート（services.php）専用。functions.php から該当ページのみ読み込む */

.services-page {
max-width:720px;
margin:100px auto 80px auto; /* ヘッダーナビが position:absolute のため上を空ける（.ttl_cat と同じ 100px） */
padding:0 16px;
line-height:1.9;
}

.services-page h1 {
font-size:26px;
font-weight:bold;
margin:0 0 1.2em 0;
padding-bottom:12px;
border-bottom:1px solid #343434;
}

.services-page h2 {
font-size:21px;
margin:2.2em 0 0.8em 0;
}

.services-page h3 {
font-size:17px;
font-weight:bold;
margin:1.8em 0 0.6em 0;
}

.services-page p,
.services-page ul,
.services-page ol {
margin:0 0 1.2em 0;
}

.services-page ul li {
list-style:disc;
margin-left:22px;
}

/* テーマ既存色を踏襲（common.css: #ebebeb / hover #7E416B）。本文中のリンクと分かるよう下線のみ付ける */
.services-page a:link,
.services-page a:visited {
color:#ebebeb;
text-decoration:underline;
}

.services-page a:hover {
color:#7E416B;
}

.services-page table {
width:100%;
border-collapse:collapse;
margin:0 0 1.5em 0;
}

.services-page th,
.services-page td {
border:1px solid #343434;
padding:8px 12px;
text-align:left;
vertical-align:top;
}

.services-page th {
background:#2a2a2a;
font-weight:bold;
}

.services-page input[type=text],
.services-page input[type=email],
.services-page input[type=tel],
.services-page textarea,
.services-page select {
width:100%;
box-sizing:border-box;
padding:8px;
border:1px solid #444;
background:#262626;
margin:4px 0 12px 0;
}

.services-page input[type=submit],
.services-page button {
padding:10px 28px;
border:1px solid #7E416B;
background:#7E416B;
color:#ebebeb;
cursor:pointer;
}

/* Services Child テンプレート（services-child.php）用。2026-10-11 追記 */

.services-child ol li {
list-style:decimal;
margin-left:22px;
}

.services-page .services-table {
overflow-x:auto;
-webkit-overflow-scrolling:touch;
margin:0 0 1.5em 0;
}

.services-page .services-table table {
min-width:560px;
margin:0;
}

.services-page .services-table tbody th {
white-space:nowrap;
}

.services-page .services-faq dt {
font-weight:bold;
margin:1.2em 0 0.3em 0;
}

.services-page .services-faq dd {
margin:0 0 0 1em;
}

.services-page .services-video video {
display:block;
width:100%;
max-width:360px;
aspect-ratio:9 / 16;
margin:0 auto 1.5em auto;
background:#000;
}

.services-page .services-try {
display:flex;
flex-wrap:wrap;
align-items:center;
gap:24px;
margin:0 0 1.5em 0;
}

.services-page .services-try-target {
flex:1 1 300px;
min-width:0;
max-width:100%;
height:auto;
}

.services-page .services-try-qr img {
display:block;
width:180px;
height:180px;
background:#fff;
}

/* 子ページのフォーム配色。select は色指定が無く UA 既定の黒文字が #262626 地に乗って読めなかった。
   input/textarea は style.css の color:#ababab !important を上書きするため !important が要る。2026-10-12 追記 */
.services-child input[type=text],
.services-child input[type=email],
.services-child input[type=tel],
.services-child textarea,
.services-child select {
color:#ebebeb !important;
background-color:#262626;
color-scheme:dark;
}

.services-child select option {
color:#ebebeb;
background-color:#1e1e1e;
}

/* style.css が input/textarea の outline を消しているため、フォーカス位置が分かるよう枠線を出す */
.services-child input[type=text]:focus,
.services-child input[type=email]:focus,
.services-child input[type=tel]:focus,
.services-child textarea:focus,
.services-child select:focus {
outline:2px solid #ebebeb;
outline-offset:1px;
border-color:#7E416B;
}