/*
Theme Name: satokohey-new
Description: Claude Design の新しいデザイン（本当のダウンロード/）を書き写したテーマ。
Version: 0.1.0
Requires PHP: 8.3
*/

/* デザインの <helmet> の共通スタイル（全ページ分をまとめたもの） */
:root { --kb: 30s; }
html { background: #03060d; }
body { margin: 0; background: #03060d; color: #f2f5fb; -webkit-font-smoothing: antialiased; }
a { color: #f2f5fb; text-decoration: none; }
a:hover { color: #ffffff; }
p, h1, h2, h3, h4 { margin: 0; }
::selection { background: rgba(207,220,242,.3); }
@keyframes kb { 0% { transform: scale(1.02) translate3d(0,0,0); } 100% { transform: scale(1.14) translate3d(-1.6%,-1.2%,0); } }
@keyframes kb2 { 0% { transform: scale(1.14) translate3d(1.4%,1%,0); } 100% { transform: scale(1.02) translate3d(0,0,0); } }
@keyframes sheen { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }
@keyframes glint0 { 0% { clip-path: polygon(-106% 0, -10% 0, -34% 100%, -130% 100%); } 91%, 100% { clip-path: polygon(134% 0, 230% 0, 206% 100%, 110% 100%); } }
@keyframes glint1 { 0% { clip-path: polygon(-92% 0, -24% 0, -48% 100%, -116% 100%); } 91%, 100% { clip-path: polygon(148% 0, 216% 0, 192% 100%, 124% 100%); } }
@keyframes glint2 { 0% { clip-path: polygon(-80% 0, -36% 0, -60% 100%, -104% 100%); } 91%, 100% { clip-path: polygon(160% 0, 204% 0, 180% 100%, 136% 100%); } }
@keyframes glint3 { 0% { clip-path: polygon(-70% 0, -46% 0, -70% 100%, -94% 100%); } 91%, 100% { clip-path: polygon(170% 0, 194% 0, 170% 100%, 146% 100%); } }
@keyframes rise { 0% { opacity: 0; transform: translateY(26px); filter: blur(8px); } 100% { opacity: 1; transform: none; filter: blur(0); } }
@keyframes sweepX { 0% { transform: translateX(-120%); } 100% { transform: translateX(460%); } }
@keyframes tick { 0% { transform: translateY(-8px); opacity: 0; } 40%,60% { opacity: 1; } 100% { transform: translateY(10px); opacity: 0; } }
@keyframes breathe { 0%,100% { opacity: .35; } 50% { opacity: .7; } }

/* ブログのページ番号（デザインのホバーの動き） */
.sk-pg-num:hover { background: rgba(255,255,255,.1) !important; color: #ffffff !important; transform: translateY(-2px) !important; }
.sk-pg-step:hover { background: #ffffff !important; color: #03060d !important; transform: translateY(-2px) !important; }

/* お問い合わせフォーム（Contact Form 7）を、デザインの入力欄・ボタンの見た目にする */
.wpcf7 .wpcf7-form-control-wrap { display: block; }
.sk-cf-input { width: 100%; box-sizing: border-box; padding: 14px 18px; border-radius: 14px; border: 1px solid rgba(207,220,242,.2); background: rgba(255,255,255,.035); color: #f2f5fb; font: inherit; font-size: 15px; font-weight: 300; letter-spacing: .04em; outline: none; transition: border-color .4s, background .4s, box-shadow .4s; }
.sk-cf-input:focus { border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.06); box-shadow: 0 0 30px -10px rgba(170,200,255,.6); }
.sk-cf-select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.sk-cf-select option { background: #0b1426; }
.sk-cf-textarea { resize: vertical; line-height: 1.9; }
.sk-cf-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.sk-cf-pills .wpcf7-list-item { margin: 0; }
.sk-cf-pills label { display: block; cursor: pointer; }
.sk-cf-pills input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.sk-cf-pills .wpcf7-list-item-label { display: block; padding: 11px 20px; border-radius: 999px; border: 1px solid rgba(207,220,242,.28); background: rgba(3,6,13,.25); color: #dde3ee; font-size: 13.5px; font-weight: 300; letter-spacing: .06em; transition: background .4s, color .4s, border-color .4s, transform .4s cubic-bezier(.2,.8,.2,1); }
.sk-cf-pills label:hover .wpcf7-list-item-label { transform: translateY(-2px); border-color: rgba(255,255,255,.6); }
.sk-cf-pills input:checked + .wpcf7-list-item-label { background: #ffffff; color: #03060d; border-color: #ffffff; }
.sk-cf-pills input:focus-visible + .wpcf7-list-item-label { border-color: rgba(255,255,255,.7); }
.sk-cf-submit { padding: 16px 56px; border-radius: 999px; border: 1px solid rgba(255,255,255,.55); background: rgba(3,6,13,.35); color: #ffffff; font: inherit; font-size: 14px; letter-spacing: .2em; cursor: pointer; transition: background .5s, color .5s, transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s; }
.sk-cf-submit:hover { background: #ffffff; color: #03060d; transform: translateY(-2px); box-shadow: 0 0 40px -6px rgba(190,215,255,.8); }
.wpcf7 .wpcf7-spinner { display: none; }
/* 送信後の表示と、記入もれの表示（今のサイトの文章を、デザインの文字の見た目で出す） */
.wpcf7 form .wpcf7-response-output { position: relative; margin: 0; padding: 14px 18px; border-radius: 14px; border: 1px solid rgba(207,220,242,.28); color: #e6ebf4; font-size: 14px; letter-spacing: .06em; line-height: 1.9; text-align: center; }
.wpcf7 form.init .wpcf7-response-output, .wpcf7 form.resetting .wpcf7-response-output, .wpcf7 form.submitting .wpcf7-response-output { display: none; }
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.aborted .wpcf7-response-output, .wpcf7 form.spam .wpcf7-response-output { border-color: rgba(207,220,242,.28); }
.wpcf7 form.sent .wpcf7-response-output { border-color: rgba(255,255,255,.7); }
.wpcf7-not-valid-tip { display: block; margin-top: 8px; font-size: 12px; letter-spacing: .06em; color: #cfdcf2; }
.sk-cf-input.wpcf7-not-valid { border-color: rgba(255,255,255,.7); }

/* 公開後の追加①: ブログの検索の欄（分類ボタンの帯の右端。形は分類ボタン、ふちの光り方はお問い合わせの入力欄にそろえる） */
.sk-search { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.sk-search-input { width: 200px; max-width: 52vw; box-sizing: border-box; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(207,220,242,.2); background: rgba(255,255,255,.035); color: #f2f5fb; font: inherit; font-size: 12px; font-weight: 300; letter-spacing: .06em; outline: none; transition: border-color .4s, background .4s, box-shadow .4s; -webkit-appearance: none; appearance: none; }
.sk-search-input::placeholder { color: #8a95aa; }
.sk-search-input:focus { border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.06); box-shadow: 0 0 30px -10px rgba(170,200,255,.6); }
.sk-search-button { padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(207,220,242,.3); background: transparent; color: #e6ebf4; font: inherit; font-size: 12px; letter-spacing: .06em; cursor: pointer; transition: background .4s, color .4s, transform .4s cubic-bezier(.2,.8,.2,1); }
.sk-search-button:hover { background: #ffffff; color: #03060d; transform: translateY(-1px); }
@media (max-width: 600px) { .sk-search { margin-left: 0; width: 100%; } .sk-search-input { flex: 1; width: auto; max-width: none; } }