/*
Theme Name: HANK
Theme URI: http://localhost/hank/
Author: 合同会社HANK
Description: 合同会社HANK（HANK訪問看護ステーション／HANK相談支援ステーション）のオリジナルテーマ。静的HTML版 v62 をWordPress化したものです。
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: hank
*/

/* 実際のスタイルは assets/styles.css を参照しています（functions.php で読み込み） */

/* ------------------------------------------------------------------ *
 * WordPress 化にともなう追加スタイル
 * （元の main.css には手を入れず、ここに追記しています）
 * ------------------------------------------------------------------ */

/* 管理バー表示時に固定ヘッダーが隠れないように */
body.admin-bar .site-header{top:32px}
@media screen and (max-width:782px){body.admin-bar .site-header{top:46px}}

/* ブログ一覧：サムネイルをリンクで囲んだ分の調整 */
.blog-page-items article>a{display:block}
.blog-page-items article>a>img{width:100%;height:220px;object-fit:cover}
.blog-page-items h3 a{color:inherit}
.blog-page-items h3 a:hover{color:var(--blue)}
.blog-page-layout aside p{margin:0 0 8px}
.blog-page-layout aside p a:hover{color:var(--blue)}

/* トップページのブログ最新記事 */
.front-blog-items{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:38px}
.front-blog-items article{grid-template-columns:1fr}
.front-blog-items article>a>img{height:190px}
.front-blog-items article>div{padding:20px}
.front-blog-items h3{font-size:17px;line-height:1.6}

/* トップページのお知らせ（複数件） */
.news .news-item+.news-item{margin-top:14px;padding-top:14px;border-top:1px dashed rgba(40,47,98,.25)}
.news .news-item:hover span{color:var(--blue)}

/* ページャー */
.hank-pagination{margin-top:36px}
.hank-pagination .nav-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.hank-pagination .page-numbers{display:grid;place-items:center;min-width:42px;height:42px;padding:0 12px;border:1px solid var(--blue);color:var(--blue);background:#fff}
.hank-pagination .page-numbers.current,.hank-pagination .page-numbers:hover{color:#fff;background:var(--blue)}
.hank-pagination .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* 記事ページ */
.blog-single{background:#fffaf1}
.hank-article{padding:40px;border-top:4px solid var(--blue);background:#fff}
.hank-article-meta{display:flex;align-items:center;gap:14px;margin:0;color:#59656a}
.hank-article-meta span{display:inline-block;padding:4px 14px;border:1px solid var(--blue);color:var(--blue);font-size:13px}
.hank-article-title{margin:14px 0 26px;color:var(--navy);font-size:30px;line-height:1.5}
.hank-article-thumb{margin-bottom:28px}
.hank-article-thumb img{width:100%;height:auto}
.hank-article-body{color:#3c474c;line-height:2}
.hank-article-body h2{margin:38px 0 16px;padding-left:14px;border-left:5px solid var(--blue);color:var(--navy);font-size:23px}
.hank-article-body h3{margin:30px 0 12px;color:var(--navy);font-size:19px}
.hank-article-body img{height:auto;margin:20px 0}
.hank-article-body a{color:var(--blue);text-decoration:underline}
.hank-article-body ul,.hank-article-body ol{padding-left:1.4em}
.hank-article-body blockquote{margin:24px 0;padding:18px 22px;border-left:4px solid var(--light-blue);background:#f7fcfe}
.hank-article-nav{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;margin-top:30px}
.hank-article-nav a{color:var(--navy);font-weight:700}
.hank-article-nav a:hover{color:var(--blue)}

@media(max-width:767px){
  .front-blog-items{grid-template-columns:1fr}
  .hank-article{padding:26px 20px}
  .hank-article-title{font-size:23px}
}

/* ------------------------------------------------------------------ *
 * Contact Form 7（元デザインの .proposal-form に合わせる）
 * ------------------------------------------------------------------ */
.wpcf7 .screen-reader-response{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.proposal-form .wpcf7-form-control-wrap{display:block}
.proposal-form .wpcf7-not-valid-tip{margin-top:6px;color:#c0392b;font-size:13px}
.proposal-form .wpcf7-not-valid{border-color:#d05f5f}
.proposal-form .wpcf7-spinner{display:block;margin:10px auto 0}
.proposal-form input.proposal-submit{justify-self:center;width:auto;min-width:280px;padding:16px 25px;border:0;border-radius:5px;color:#fff;background:var(--blue);font:inherit;font-weight:700;cursor:pointer;transition:background .2s}
.proposal-form input.proposal-submit:hover{background:#1d8aad}
@media(max-width:767px){.proposal-form input.proposal-submit{width:100%;min-width:0}}
.proposal-form .wpcf7-response-output{margin:4px 0 0!important;padding:14px 16px!important;border-width:1px!important;border-radius:6px;text-align:center;font-size:15px}
.wpcf7 form.sent .wpcf7-response-output{border-color:var(--blue)!important;background:#f0fafd;color:#14657f}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output{border-color:#d05f5f!important;background:#fdf3f3;color:#a93b3b}

/* Smash Balloon のフィードを置いたときの余白 */
.instagram .sb_instagram_header{margin-bottom:18px}

/* ------------------------------------------------------------------ *
 * ページ上部のスライドショー（会社概要）
 * v116 では上部バナーが <img> になったので、画像を重ねて切り替える
 * ------------------------------------------------------------------ */
.hank-hero-slide{opacity:0;transition:opacity 1.4s ease}
/* 1枚目が高さを決め、2枚目以降は重ねる */
.hank-hero-slide+.hank-hero-slide{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}
.hank-hero-slide.is-active{opacity:1}

/* 前後ボタン */
.subpage-hero>.hank-hero-nav{grid-row:1/-1;grid-column:1/-1}
.hank-hero-nav{position:absolute;top:50%;z-index:3;display:grid;place-items:center;width:44px;height:44px;padding:0;transform:translateY(-50%);border:1px solid rgba(255,255,255,.7);border-radius:50%;background:rgba(3,62,80,.35);cursor:pointer;transition:background .2s,border-color .2s}
.hank-hero-nav:hover{background:rgba(3,62,80,.6);border-color:#fff}
.hank-hero-nav:focus-visible{outline:2px solid #fff;outline-offset:3px}
.hank-hero-prev{left:18px}
.hank-hero-next{right:18px}
.hank-hero-nav span{display:block;width:11px;height:11px;border-top:2px solid #fff;border-right:2px solid #fff}
.hank-hero-prev span{transform:translateX(2px) rotate(-135deg)}
.hank-hero-next span{transform:translateX(-2px) rotate(45deg)}

/* 何枚目かを示すボタン */
.subpage-hero>.hank-hero-dots{position:absolute;left:0;right:0;bottom:16px;grid-row:1/-1;grid-column:1/-1;place-self:stretch;z-index:3;display:flex;align-items:flex-end;justify-content:center;gap:9px}
.hank-hero-dot{width:10px;height:10px;padding:0;border:1px solid rgba(255,255,255,.85);border-radius:50%;background:transparent;cursor:pointer;transition:background .2s}
.hank-hero-dot.is-active{background:#fff}
.hank-hero-dot:hover{background:rgba(255,255,255,.6)}
.hank-hero-dot:focus-visible{outline:2px solid #fff;outline-offset:3px}

@media(max-width:767px){
  .hank-hero-nav{width:36px;height:36px}
  .hank-hero-prev{left:8px}
  .hank-hero-next{right:8px}
  .subpage-hero>.hank-hero-dots{bottom:12px}
}
@media(prefers-reduced-motion:reduce){.hank-hero-slide{transition:none}}

/* ------------------------------------------------------------------ *
 * 採用情報：募集職種カードの写真
 * 元画像が 570×443（約1.29:1）なのに枠が高さ260px固定で、
 * 上下が4割ほど切れていたため、元画像の比率に合わせる
 * ------------------------------------------------------------------ */
.open-positions-item-img img{height:auto;aspect-ratio:570/443}

/* Contact Form 7 の同意チェックを、元デザインの .privacy-consent-label に合わせる */
.privacy-consent .wpcf7-form-control-wrap,
.privacy-consent .wpcf7-acceptance,
.privacy-consent .wpcf7-list-item{display:block;margin:0}
.privacy-consent .wpcf7-list-item label{display:flex;align-items:flex-start;gap:12px;padding:18px;border-radius:8px;background:#f0f9fc;cursor:pointer}
.privacy-consent .wpcf7-list-item input[type="checkbox"]{width:20px;height:20px;flex:0 0 20px;margin:4px 0 0;padding:0;border-radius:3px;accent-color:#269fc0}
.privacy-consent .wpcf7-list-item-label{line-height:1.8}
.privacy-consent .wpcf7-not-valid-tip{margin-top:8px}