/*
Theme Name: Sakura Technologies V5.3
Description: 櫻テクノロジーズ専用。ロゴ・ヘッダー・トップページ・各固定ページ・フッター・レスポンシブデザインを統合した完成版テーマ。
Version: 5.3.0
Requires at least: 6.5
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: sakura-technologies-v5-3
*/

:root{
  --sakura:#d9879a;
  --sakura-deep:#c66f85;
  --sakura-light:#fff5f7;
  --ink:#263238;
  --muted:#6f7b82;
  --line:#eadfe2;
  --white:#fff;
  --shadow:0 12px 32px rgba(38,50,56,.07);
}

*{box-sizing:border-box}
body{margin:0}
a{text-underline-offset:3px}
.sakura-logo img{width:320px;max-width:34vw;height:auto;display:block}
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(12px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);gap:56px;align-items:center}
.hero-copy h1{max-width:760px}
.hero-note{font-size:1.04rem}
.section-pad{padding:72px 24px}
.section-kicker{letter-spacing:.14em;font-weight:700;font-size:.76rem;color:var(--sakura-deep);margin-bottom:12px}
.section-title{margin-top:0;margin-bottom:18px}
.muted{color:var(--muted)}
.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.card{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:28px;box-shadow:var(--shadow)}
.card h3{margin-top:8px}
.service-card{border-top:3px solid var(--sakura)}
.pill-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.pill{background:#fff;border:1px solid var(--line);border-radius:999px;padding:14px 16px;text-align:center;font-weight:700}
.profile-box{display:grid;grid-template-columns:180px minmax(0,1fr);gap:36px;align-items:start}
.profile-mark{width:150px;height:150px;border-radius:50%;background:var(--sakura-light);display:grid;place-items:center;font-size:3.3rem}
.contact-box{border-radius:24px;background:var(--sakura-light);padding:48px}
.tech-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.tech-box{border:1px solid var(--line);border-radius:16px;padding:22px;background:#fff}
.page-hero{background:var(--sakura-light);padding:56px 24px}
.page-body{padding:64px 24px 84px}
.page-body h2{margin-top:42px}
.clean-list{padding-left:1.2em}
.footer-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:36px}
.footer-links a{color:#fff}
@media(max-width:980px){
  .sakura-logo img{width:260px;max-width:50vw}
  .hero-grid{grid-template-columns:1fr;gap:28px}
  .card-grid{grid-template-columns:1fr}
  .pill-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .profile-box{grid-template-columns:1fr}
  .tech-grid{grid-template-columns:1fr}
}
@media(max-width:720px){
  .sakura-logo img{width:220px;max-width:70vw}
  .section-pad{padding:54px 20px}
  .page-hero{padding:44px 20px}
  .page-body{padding:48px 20px 64px}
  .pill-grid{grid-template-columns:1fr}
  .contact-box{padding:34px 22px}
  .footer-grid{grid-template-columns:1fr}
}


/* Contact Form 7 */
.sakura-contact-form{
  max-width:760px;
  margin:0 auto;
}
.sakura-contact-form label{
  display:block;
  font-weight:700;
  margin:0 0 22px;
}
.sakura-contact-form input[type="text"],
.sakura-contact-form input[type="email"],
.sakura-contact-form input[type="tel"],
.sakura-contact-form select,
.sakura-contact-form textarea{
  width:100%;
  margin-top:8px;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  color:var(--ink);
  font:inherit;
}
.sakura-contact-form textarea{min-height:180px;resize:vertical}
.sakura-contact-form input:focus,
.sakura-contact-form select:focus,
.sakura-contact-form textarea:focus{
  outline:none;
  border-color:var(--sakura);
  box-shadow:0 0 0 3px rgba(217,135,154,.12);
}
.sakura-contact-form .required,
.sakura-contact-form .optional{
  display:inline-block;
  margin-left:8px;
  padding:2px 8px;
  border-radius:999px;
  font-size:.72rem;
  line-height:1.5;
}
.sakura-contact-form .required{background:#f8dce3;color:#a64f66}
.sakura-contact-form .optional{background:#eef1f3;color:#657178}
.sakura-contact-form .privacy-consent{
  margin:24px 0;
  padding:16px 18px;
  border-radius:12px;
  background:var(--sakura-light);
}
.sakura-contact-form input[type="submit"]{
  appearance:none;
  border:0;
  border-radius:999px;
  padding:14px 28px;
  background:var(--sakura);
  color:#fff;
  font:inherit;
  font-weight:700;
  cursor:pointer;
}
.sakura-contact-form input[type="submit"]:hover{background:var(--sakura-deep)}
.wpcf7 form .wpcf7-response-output{
  margin:24px 0 0;
  border-radius:12px;
  padding:14px 16px;
}

/* V5: skills / overview */
.skill-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:28px}
.skill-group{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px;box-shadow:var(--shadow)}
.skill-group h3{margin-top:0;margin-bottom:18px}
.skill-tags{display:flex;flex-wrap:wrap;gap:10px}
.skill-tag{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:8px 13px;background:var(--sakura-light);font-weight:600;font-size:.92rem}
.overview-table{width:100%;border-collapse:collapse;margin:24px 0 44px}
.overview-table th,.overview-table td{padding:16px 18px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.overview-table th{width:180px;background:var(--sakura-light)}
@media(max-width:720px){
 .skill-groups{grid-template-columns:1fr}
 .overview-table th,.overview-table td{display:block;width:100%}
 .overview-table th{border-bottom:0;padding-bottom:6px}
 .overview-table td{padding-top:6px}
}


/* V5.2: mobile header/navigation alignment */
.site-header > .wp-block-group,
.site-header .wp-block-group{
  align-items:center;
}
.site-header .wp-block-navigation{
  margin-left:auto;
  flex-shrink:0;
}
.site-header .wp-block-navigation__responsive-container-open{
  margin-left:auto;
  padding:8px;
  line-height:1;
}
.site-header .wp-block-navigation__responsive-container-content{
  align-items:flex-start;
}
@media (max-width: 900px){
  .site-header{
    padding-left:14px !important;
    padding-right:14px !important;
  }
  .site-header > .wp-block-group,
  .site-header .wp-block-group{
    width:100%;
    display:flex;
    flex-wrap:nowrap !important;
    justify-content:space-between;
    align-items:center;
    gap:12px;
  }
  .site-header .sakura-logo{
    margin:0;
    flex:1 1 auto;
    min-width:0;
  }
  .site-header .sakura-logo img{
    width:220px;
    max-width:68vw;
    height:auto;
  }
  .site-header .wp-block-navigation{
    flex:0 0 auto;
    margin-left:auto !important;
  }
}
@media (max-width: 480px){
  .site-header{
    padding-top:6px !important;
    padding-bottom:6px !important;
  }
  .site-header .sakura-logo img{
    width:185px;
    max-width:66vw;
  }
  .site-header .wp-block-navigation__responsive-container-open{
    padding:6px;
  }
}

/* V5.2: Column */
.column-intro{
  max-width:760px;
}
.column-grid .wp-block-post-template{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
  margin:34px 0 0;
  padding:0;
}
.column-grid .wp-block-post{
  list-style:none;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  padding:26px;
  box-shadow:var(--shadow);
}
.column-grid .wp-block-post-title{
  margin-top:10px;
  margin-bottom:12px;
  font-size:1.2rem;
}
.column-grid .wp-block-post-title a{
  color:var(--ink);
  text-decoration:none;
}
.column-grid .wp-block-post-date{
  color:var(--muted);
  font-size:.82rem;
}
.column-grid .wp-block-post-excerpt{
  color:var(--muted);
  font-size:.95rem;
}
.column-grid .wp-block-query-pagination{
  margin-top:36px;
}
.single-column-meta{
  color:var(--muted);
  font-size:.9rem;
  margin-bottom:28px;
}
@media(max-width:900px){
  .column-grid .wp-block-post-template{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:640px){
  .column-grid .wp-block-post-template{
    grid-template-columns:1fr;
  }
}


/* V5.3: iPhone / mobile navigation hard reset */
@media (max-width: 900px){
  .site-header{
    position:relative;
    overflow:visible;
  }

  .site-header .wp-block-navigation__responsive-container-open{
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    margin-left:auto !important;
    padding:0 !important;
    border-radius:10px;
  }

  .site-header .wp-block-navigation__responsive-container{
    width:100vw !important;
    max-width:100vw !important;
    min-height:100dvh !important;
    left:0 !important;
    right:0 !important;
    top:0 !important;
    bottom:0 !important;
    padding:0 !important;
    background:#fff !important;
    overflow-y:auto !important;
  }

  .site-header .wp-block-navigation__responsive-container.is-menu-open{
    display:block !important;
  }

  .site-header .wp-block-navigation__responsive-container-close{
    position:absolute !important;
    top:18px !important;
    right:18px !important;
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 !important;
    padding:0 !important;
    z-index:3;
  }

  .site-header .wp-block-navigation__responsive-container-content{
    width:100% !important;
    min-height:100dvh !important;
    padding:88px 28px 36px !important;
    display:block !important;
  }

  .site-header .wp-block-navigation__container{
    width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    gap:0 !important;
  }

  .site-header .wp-block-navigation-item{
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    border-bottom:1px solid var(--line);
  }

  .site-header .wp-block-navigation-item__content{
    width:100% !important;
    display:block !important;
    padding:18px 2px !important;
    text-align:left !important;
    font-size:1.05rem !important;
    font-weight:700 !important;
    color:var(--ink) !important;
  }

  .site-header .wp-block-navigation__responsive-container-content .wp-block-navigation-item{
    align-items:stretch !important;
  }

  .site-header .wp-block-navigation__responsive-container-content .wp-block-navigation__container{
    justify-content:flex-start !important;
  }

  .hero-grid.section-pad{
    padding-top:52px !important;
    padding-bottom:52px !important;
  }

  .hero-copy h1{
    font-size:clamp(2rem,10vw,3rem) !important;
    line-height:1.35 !important;
    word-break:keep-all;
  }

  .hero-note{
    font-size:1rem !important;
    line-height:1.85 !important;
  }
}

@media (max-width: 480px){
  .site-header .sakura-logo img{
    width:175px !important;
    max-width:64vw !important;
  }

  .hero-grid.section-pad{
    padding-left:20px !important;
    padding-right:20px !important;
  }

  .hero-copy h1{
    font-size:clamp(1.9rem,9.2vw,2.6rem) !important;
  }

  .wp-block-button__link{
    font-size:1rem !important;
    padding:13px 22px !important;
  }
}