/*
Theme Name: saicoro
Theme URI: https://saicorodesign.com
Author: saicoro
Description: あなたの街のデザイン屋さん saicoro のオリジナルテーマ。
Version: 1.0.5
Text Domain: saicoro
*/

:root{--bg:#fffdfb;--surface:#fbf1e4;--ink:#221f1f;--cyan:#3fa9dc;--cyan-deep:#1f7fa8;--pink:#e0397f;--pink-deep:#b81f63;--yellow:#f0c419;--yellow-deep:#8a6d00;--gray:#9a9a9a;--font-head:'M PLUS Rounded 1c',sans-serif;--font-body:'M PLUS Rounded 1c',sans-serif}
body{margin:0}
a{text-decoration:none}
img{max-width:100%;height:auto}

/* 画像の切り抜き表示（WordPressが付けるwidth/height属性に負けないようheight:autoを明示） */
.thumb-4x3{width:100%;height:auto;aspect-ratio:4/3;display:block;object-fit:cover}
.thumb-full{width:100%;height:auto;display:block}
.thumb-placeholder{width:100%;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;background:var(--surface);color:#8a8782;font-size:13px}

/* HERO動画（カスタマイザーで設定した動画ファイル／YouTube等の埋め込み） */
.hero-media{position:relative;z-index:1;width:100%;height:auto;aspect-ratio:4/3;display:block;border-radius:32px;background:#efeeec;object-fit:cover}
.hero-embed{position:relative;z-index:1;width:100%;aspect-ratio:4/3;border-radius:32px;overflow:hidden;background:#efeeec}
.hero-embed iframe,.hero-embed video,.hero-embed object,.hero-embed embed{position:absolute;inset:0;width:100%;height:100%;display:block;border:0}

@keyframes blobWave{0%,100%{transform:translate(0,0) rotate(0deg) scale(1)}50%{transform:translate(10px,-14px) rotate(8deg) scale(1.04)}}

/* ── hover（元のstyle-hover属性をCSSの:hoverに置き換え）
   各要素はHTML側にstyle="background:..."などを直接持っているため、
   そのままでは:hoverが負けてしまう。!important で確実に上書きする。 ── */
.hover-tint,.hover-pink-text,.hover-pink-deep,.hover-card,.hover-white,.hover-pink{transition:background .18s ease,color .18s ease,box-shadow .18s ease}
.hover-tint:hover{background:color-mix(in srgb, var(--ink) 6%, transparent) !important}
.hover-pink-text:hover{color:var(--pink-deep) !important}
.hover-pink-deep:hover{background:var(--pink-deep) !important}
.hover-card:hover{box-shadow:0 10px 26px rgba(34,31,31,.1) !important}
.hover-white:hover{background:#fff !important}
.hover-pink:hover{color:var(--pink) !important}

/* ── レイアウト用クラス（レスポンシブでgrid-template-columnsを切り替えるため、インラインstyleではなくここで定義） ── */
.hero-grid{grid-template-columns:1.05fr 1fr}
.hero-title{font-size:50px}
.about-grid{grid-template-columns:220px minmax(0,600px);justify-content:center}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.svc-feature{grid-template-columns:1fr 1fr}
.svc-feature--reverse>div:first-child{order:2}
.svc-feature--reverse>div:last-child{order:1}
.contact-grid{grid-template-columns:1.3fr 1fr}

.news-row{display:flex;align-items:center;gap:20px;padding:20px 4px;border-bottom:2px solid var(--surface);color:var(--ink)}
.news-row:last-child{border-bottom:none}
.news-date{font-size:13px;color:var(--gray);flex-shrink:0;width:100px}
.news-tag{font-size:10px;padding:4px 12px;border-radius:999px;font-weight:700;flex-shrink:0}
.news-title{font-size:14.5px;font-weight:500;flex:1}

/* ── お問い合わせフォーム（Contact Form 7）を元のデザインに合わせる ── */
.scf-form{display:flex;flex-direction:column;gap:20px}
.scf-field{display:block}
.scf-label{display:block;font-size:12px;font-weight:700;margin-bottom:6px;opacity:.7}
.scf-req{color:var(--pink-deep)}
.scf-form input[type=text],
.scf-form input[type=email],
.scf-form input[type=tel],
.scf-form select,
.scf-form textarea{width:100%;min-height:42px;padding:8px 14px;font:inherit;font-size:14px;color:var(--ink);background:color-mix(in srgb, var(--ink) 6%, #fff);border:2px solid color-mix(in srgb, var(--ink) 12%, transparent);border-radius:12px;box-sizing:border-box}
.scf-form textarea{min-height:120px;resize:vertical}
.scf-form input:focus,
.scf-form select:focus,
.scf-form textarea:focus{outline:none;background:#fff;border-color:var(--cyan)}
.scf-form .wpcf7-form-control-wrap{display:block}
.scf-form input[type=submit]{align-self:flex-start;display:inline-flex;align-items:center;font-family:var(--font-head);font-weight:700;font-size:15px;color:#fff;background:var(--pink);border-radius:999px;padding:14px 30px;border:none;cursor:pointer;box-shadow:0 8px 20px rgba(224,57,127,.32);width:auto;min-height:0}
.scf-form input[type=submit]:hover{background:var(--pink-deep)}
.scf-form .wpcf7-not-valid-tip{font-size:12px;color:var(--pink-deep);margin-top:6px}
.scf-form .wpcf7-response-output{margin:8px 0 0;padding:14px 18px;border-radius:12px;border:2px solid color-mix(in srgb, var(--ink) 12%, transparent);font-size:13.5px;line-height:1.8}
.scf-form .wpcf7-spinner{margin:0 0 0 12px}

/* ── ハンバーガーメニュー ── */
.nav-toggle-input{display:none}
.nav-toggle-btn{display:none;width:40px;height:40px;border-radius:12px;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;margin-left:auto}
.nav-toggle-btn span{position:relative;display:block;width:20px;height:2px;background:var(--ink);border-radius:2px}
.nav-toggle-btn span::before,.nav-toggle-btn span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s,top .2s}
.nav-toggle-btn span::before{top:-6px}
.nav-toggle-btn span::after{top:6px}
.nav-toggle-input:checked~.nav-toggle-btn span{background:transparent}
.nav-toggle-input:checked~.nav-toggle-btn span::before{top:0;transform:rotate(45deg)}
.nav-toggle-input:checked~.nav-toggle-btn span::after{top:0;transform:rotate(-45deg)}
.site-nav{display:flex;gap:8px;margin-left:auto;align-items:center;flex-wrap:wrap}

@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr}
  .hero-title{font-size:38px}
  .about-grid{grid-template-columns:1fr;justify-items:center;text-align:center}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .svc-feature{grid-template-columns:1fr}
  .svc-feature--reverse>div:first-child{order:1}
  .svc-feature--reverse>div:last-child{order:2}
  .contact-grid{grid-template-columns:1fr}
  .nav-toggle-btn{display:flex}
  .site-nav{display:none;width:100%;margin-left:0;flex-direction:column;align-items:stretch;gap:8px;padding-top:14px}
  .nav-toggle-input:checked~.site-nav{display:flex}
  .site-nav a{text-align:center}
}
@media (max-width:600px){
  .news-row{flex-wrap:wrap;gap:8px 12px;padding:16px 4px}
  .news-date{width:auto}
}
@media (max-width:480px){
  .hero-title{font-size:30px}
  .grid-4{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
}