/*
Theme Name: Katsuya Nagamori AI Diagnosis v14
Theme URI: https://katsuya-nagamori.com/
Author: Katsuya Nagamori
Description: 元素材のプロフィール・実績・顔写真表示機構・全20研修教材・教材別Stripe決済設定・SEOを統合したWordPressテーマ。
Version: 14.0.2
Text Domain: katsuya-nagamori-v11
*/

:root{
  --navy:#12365a;
  --blue:#1769d2;
  --teal:#0c7f8f;
  --orange:#e87817;
  --gold:#c99b32;
  --ink:#17263a;
  --muted:#5f6b78;
  --line:#dce4ec;
  --bg:#f5f8fb;
  --white:#fff;
  --shadow:0 10px 30px rgba(18,54,90,.10)
}

*,
*::before,
*::after{
  box-sizing:border-box
}

html{
  scroll-behavior:smooth
}

body{
  margin:0;
  color:var(--ink);
  background:#fff;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
  line-height:1.75;
  overflow-wrap:anywhere
}

a{
  color:inherit
}

img{
  max-width:100%;
  height:auto;
  display:block
}

iframe,
object,
embed{
  max-width:100%
}

.wrap{
  width:min(1180px,calc(100% - 40px));
  margin:auto
}

.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(10px)
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:72px
}

.brand{
  font-weight:800;
  text-decoration:none;
  white-space:nowrap;
  flex:0 0 auto
}

.brand span{
  display:block;
  font-size:.72rem;
  font-weight:600;
  color:var(--muted);
  letter-spacing:.08em
}

/* PC navigation */
.nav{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center
}

.nav a{
  text-decoration:none;
  font-size:.9rem;
  font-weight:700;
  color:#33465b
}

.nav a:hover{
  color:var(--blue)
}

.mobile-menu{
  display:none
}

section{
  padding:84px 0;
  scroll-margin-top:80px
}

.section-alt{
  background:var(--bg)
}

.eyebrow{
  font-weight:800;
  color:var(--blue);
  letter-spacing:.09em;
  text-transform:uppercase;
  font-size:.82rem;
  margin:0 0 10px
}

.section-title{
  font-size:clamp(1.85rem,3vw,2.65rem);
  line-height:1.25;
  margin:0 0 14px;
  letter-spacing:-.03em
}

.section-lead{
  max-width:780px;
  color:var(--muted);
  margin:0 0 34px
}

.hero{
  padding:74px 0 62px;
  background:linear-gradient(135deg,#fff 0%,#eef5fb 100%)
}

.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.52fr) minmax(250px,.48fr);
  gap:32px;
  align-items:center;
  overflow:hidden;
  min-width:0
}

.hero-grid>*{
  min-width:0
}

.hero-grid>div:first-child{
  position:relative;
  z-index:2;
  min-width:0
}

.hero-grid>.profile-photo{
  position:relative;
  z-index:1;
  width:100%;
  max-width:340px;
  justify-self:end
}

.hero h1{
  font-size:clamp(2.05rem,3vw,2.55rem);
  line-height:1.18;
  letter-spacing:-.05em;
  margin:10px 0 22px;
  max-width:100%;
  overflow:visible;
  overflow-wrap:anywhere;
  word-break:auto
}

.hero h1 .nowrap{
  display:block;
  white-space:nowrap
}

.hero-copy{
  font-size:1.08rem;
  max-width:100%;
  color:#405166;
  overflow-wrap:anywhere;
  word-break:auto
}

.actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:28px
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:12px 22px;
  border-radius:10px;
  font-weight:800;
  text-decoration:none;
  border:2px solid transparent;
  transition:.18s
}

.btn-primary{
  background:var(--navy);
  color:#fff
}

.btn-primary:hover{
  background:#0c2b4b;
  transform:translateY(-1px)
}

.btn-outline{
  border-color:var(--navy);
  color:var(--navy);
  background:#fff
}

.profile-photo{
  border-radius:20px;
  overflow:hidden;
  box-shadow:var(--shadow);
  background:#eef3f8;
  aspect-ratio:4/5;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:320px;
  border:1px solid #dbe4ee
}

.profile-photo img{
  width:100%;
  height:100%;
  min-height:320px;
  object-fit:cover;
  object-position:center top;
  display:block
}

.photo-fallback{
  padding:30px;
  text-align:center;
  color:#536273;
  font-weight:700
}

.stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-top:42px
}

.stat{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:22px;
  box-shadow:0 4px 16px rgba(18,54,90,.05)
}

.stat strong{
  display:block;
  font-size:1.9rem;
  color:var(--blue);
  line-height:1.1
}

.stat span{
  font-size:.88rem;
  color:var(--muted)
}

.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:34px;
  align-items:start
}

.card-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
  min-width:0
}

.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:26px;
  box-shadow:0 6px 20px rgba(18,54,90,.06);
  min-width:0
}

.card>*{
  min-width:0
}

.card h3{
  margin:0 0 10px;
  font-size:1.15rem;
  overflow-wrap:anywhere;
  word-break:auto
}

.card p{
  margin:0;
  color:var(--muted)
}

.service-card{
  border-top:6px solid var(--blue)
}

.service-card:nth-child(2){
  border-color:var(--teal)
}

.service-card:nth-child(3){
  border-color:var(--orange)
}

.service-card:nth-child(4){
  border-color:var(--gold)
}

.project-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
  min-width:0
}

.project-card{
  min-height:100%;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:22px
}

.project-card>*{
  min-width:0
}

.project-no{
  font-size:.78rem;
  font-weight:800;
  color:var(--blue);
  letter-spacing:.06em
}

.project-card h3{
  font-size:1.08rem;
  margin:8px 0;
  overflow-wrap:anywhere;
  word-break:auto
}

.project-card p{
  font-size:.92rem;
  color:var(--muted);
  margin:0
}

.flow{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:14px;
  min-width:0
}

.flow-step{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:22px;
  min-height:180px
}

.flow-step b{
  display:flex;
  width:34px;
  height:34px;
  border-radius:50%;
  background:var(--blue);
  color:#fff;
  align-items:center;
  justify-content:center;
  margin-bottom:14px
}

.deliverables{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:26px
}

.tag{
  background:#eaf2fb;
  color:#173f69;
  border-radius:999px;
  padding:7px 13px;
  font-size:.86rem;
  font-weight:700
}

.training-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  min-width:0
}

.training{
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:22px;
  min-height:320px;
  box-shadow:0 5px 18px rgba(18,54,90,.05)
}

.training>*{
  min-width:0
}

.training-num{
  font-size:.76rem;
  font-weight:900;
  color:var(--blue);
  letter-spacing:.08em
}

.training h3{
  font-size:1.06rem;
  line-height:1.45;
  margin:8px 0;
  overflow-wrap:anywhere;
  word-break:auto
}

.audience{
  font-size:.84rem;
  font-weight:700;
  color:#486078;
  margin-bottom:10px
}

.training p{
  font-size:.9rem;
  color:var(--muted);
  margin:0 0 16px
}

.price{
  font-size:1.25rem;
  font-weight:900;
  color:var(--navy);
  margin-top:auto
}

.price small{
  font-size:.72rem;
  color:var(--muted)
}

.training .btn{
  width:100%;
  margin-top:14px;
  font-size:.9rem
}

.training form{
  margin:0
}

.training form .btn{
  border:0;
  cursor:pointer;
  font:inherit
}

.btn-disabled{
  background:#edf1f5;
  color:#667482;
  cursor:not-allowed;
  border-color:#d5dde5
}

.notice{
  background:#fff8e7;
  border:1px solid #efd28a;
  border-radius:12px;
  padding:16px 18px;
  color:#6b531a;
  margin:0 0 24px
}

.price-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  min-width:0
}

.price-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:26px
}

.price-card strong{
  display:block;
  font-size:1.7rem;
  color:var(--navy);
  margin:8px 0
}

.timeline{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:14px;
  min-width:0
}

.timeline .card{
  padding:20px
}

.profile-detail{
  display:grid;
  grid-template-columns:minmax(250px,.38fr) minmax(0,.62fr);
  gap:40px;
  min-width:0
}

.profile-detail>*{
  min-width:0
}

.profile-list{
  margin:0;
  padding-left:1.2em
}

.profile-list li{
  margin:8px 0
}

.contact-box{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:28px
}

.contact-info{
  background:var(--navy);
  color:#fff;
  border-radius:18px;
  padding:30px
}

.contact-info a{
  color:#fff
}

.contact-form{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:30px
}

.field{
  display:grid;
  gap:7px;
  margin-bottom:14px
}

.field input,
.field textarea{
  width:100%;
  padding:12px 13px;
  border:1px solid #cbd6e0;
  border-radius:9px;
  font:inherit
}

.site-footer{
  background:#0c2a48;
  color:#dce8f3;
  padding:38px 0
}

.footer-grid{
  display:flex;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap
}

.legal{
  font-size:.8rem;
  color:#aebfd0
}

.admin-note{
  font-size:.82rem;
  color:#6f7b87;
  margin-top:10px
}

.single-content{
  padding:60px 0
}

.single-content img{
  border-radius:12px
}

/* sample */
.sample-shell{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr);
  gap:28px;
  align-items:start
}

.sample-viewer{
  width:100%;
  height:720px;
  border:1px solid #dbe4ee;
  border-radius:18px;
  background:#fff
}

.sample-info{
  padding:24px;
  border:1px solid #dbe4ee;
  border-radius:18px;
  background:#fff
}

.purchase-note{
  font-size:.9rem;
  color:#526173;
  margin-top:10px
}

.tax-total{
  font-size:.86rem;
  color:#526173;
  margin-top:2px
}

.payment-message{
  border-radius:12px;
  padding:16px 18px;
  margin:0 0 24px;
  font-weight:700
}

.payment-success{
  background:#e9f8ef;
  border:1px solid #7bc99a;
  color:#185c34
}

.payment-info{
  background:#eef5fb;
  border:1px solid #93badb;
  color:#17466d
}

.payment-error{
  background:#fff0f0;
  border:1px solid #dc9696;
  color:#822626
}

/* 1-minute AI training diagnosis */
.ai-diagnosis{
  background:linear-gradient(180deg,#f6f9fc 0%,#ffffff 100%);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)
}

.diagnosis-shell{
  max-width:920px;
  margin:30px auto 0
}

.diagnosis-form{
  display:grid;
  gap:18px
}

.diagnosis-question{
  margin:0;
  padding:20px 22px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  box-shadow:0 6px 18px rgba(18,54,90,.06)
}

.diagnosis-question legend{
  padding:0 6px;
  font-size:1.08rem;
  font-weight:800;
  line-height:1.55
}

.diagnosis-question legend span{
  display:inline-grid;
  place-items:center;
  width:30px;
  height:30px;
  margin-right:8px;
  border-radius:50%;
  background:var(--navy);
  color:#fff;
  font-size:.9rem
}

.diagnosis-question label{
  display:block;
  margin:10px 0 0;
  padding:11px 14px;
  border:1px solid #e5ebf1;
  border-radius:10px;
  cursor:pointer;
  transition:.15s;
  background:#fff
}

.diagnosis-question label:hover{
  border-color:var(--blue);
  background:#f7fbff
}

.diagnosis-question input{
  margin-right:9px;
  transform:scale(1.08)
}

.diagnosis-submit{
  justify-self:start;
  margin-top:4px
}

.diagnosis-note{
  margin:0;
  color:var(--muted);
  font-size:.9rem
}

.diagnosis-result{
  margin-top:24px;
  padding:28px;
  border:2px solid var(--navy);
  border-radius:18px;
  background:#fff;
  box-shadow:var(--shadow);
  scroll-margin-top:90px
}

.diagnosis-result[hidden]{
  display:none
}

.diagnosis-result h3{
  margin:10px 0 8px;
  font-size:1.45rem;
  line-height:1.45
}

.diagnosis-result h4{
  margin:22px 0 10px
}

.diagnosis-badge{
  display:inline-block;
  padding:6px 12px;
  border-radius:999px;
  background:var(--navy);
  color:#fff;
  font-weight:800;
  font-size:.88rem
}

.diagnosis-recommendations{
  display:grid;
  gap:10px
}

.diagnosis-rec{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:12px;
  text-decoration:none;
  background:var(--bg)
}

.diagnosis-rec:hover{
  border-color:var(--blue)
}

.diagnosis-rec span{
  color:var(--muted);
  font-size:.92rem
}

.diagnosis-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:22px
}

.diagnosis-disclaimer{
  margin:16px 0 0;
  color:var(--muted);
  font-size:.82rem
}

/* tablet */
@media(max-width:1100px){
  .hero-grid{
    grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr);
    gap:28px;
    overflow:visible
  }

  .hero h1{
    font-size:clamp(2rem,3.5vw,2.45rem)
  }

  .hero h1 .nowrap{
    white-space:normal
  }
}

@media(max-width:980px){

  /*
   * IMPORTANT:
   * 旧CSSの .nav{display:none} を廃止。
   * スマホ・タブレットでもナビゲーションを必ず表示する。
   */
  .header-inner{
    display:block;
    min-height:0;
    padding-top:10px;
    padding-bottom:8px
  }

  .brand{
    display:block;
    margin-bottom:8px
  }

  .nav{
    display:flex;
    width:100%;
    max-width:100%;
    justify-content:flex-start;
    align-items:center;
    flex-wrap:nowrap;
    gap:8px;
    overflow-x:auto;
    overflow-y:hidden;
    white-space:nowrap;
    padding:4px 0 8px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin
  }

  .nav a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    min-height:38px;
    padding:6px 10px;
    border:1px solid #dce4ec;
    border-radius:8px;
    background:#fff;
    color:#33465b;
    font-size:.82rem;
    font-weight:700;
    line-height:1.2
  }

  .nav a:hover,
  .nav a:focus{
    color:var(--blue);
    border-color:var(--blue);
    background:#f7fbff
  }

  .hero-grid,
  .two-col,
  .profile-detail,
  .contact-box{
    grid-template-columns:1fr
  }

  .hero-grid{
    gap:30px
  }

  .hero-grid>.profile-photo{
    justify-self:start;
    max-width:420px
  }

  .profile-photo{
    max-width:420px
  }

  .stats{
    grid-template-columns:repeat(2,1fr)
  }

  .project-grid{
    grid-template-columns:repeat(2,1fr)
  }

  .flow,
  .timeline{
    grid-template-columns:repeat(2,1fr)
  }

  .training-grid{
    grid-template-columns:repeat(2,1fr)
  }

  .price-grid{
    grid-template-columns:1fr
  }

  .hero h1 .nowrap{
    white-space:normal
  }
}

@media(max-width:900px){
  .sample-shell{
    grid-template-columns:1fr
  }

  .sample-viewer{
    height:560px
  }

  .nowrap{
    white-space:normal
  }
}

@media(max-width:620px){
  .wrap{
    width:min(100% - 24px,1180px)
  }

  section{
    padding:58px 0
  }

  .hero{
    padding:48px 0
  }

  .site-header{
    position:sticky;
    top:0
  }

  .header-inner{
    padding-top:8px;
    padding-bottom:7px
  }

  .brand{
    font-size:.9rem;
    margin-bottom:6px
  }

  .brand span{
    font-size:.66rem
  }

  .nav{
    gap:6px;
    padding-bottom:7px
  }

  .nav a{
    font-size:.76rem;
    padding:6px 9px;
    min-height:35px
  }

  .card-grid,
  .project-grid,
  .training-grid,
  .stats,
  .flow,
  .timeline{
    grid-template-columns:1fr
  }

  .training{
    min-height:0
  }

  .hero h1{
    font-size:2rem;
    line-height:1.25
  }

  .actions .btn{
    width:100%
  }

  .section-title{
    font-size:1.75rem
  }

  .profile-photo{
    max-width:100%
  }

  .profile-photo,
  .profile-photo img{
    min-height:260px
  }

  .sample-viewer{
    height:430px
  }

  .diagnosis-question{
    padding:17px 14px
  }

  .diagnosis-question legend{
    font-size:1rem
  }

  .diagnosis-result{
    padding:20px
  }

  .diagnosis-actions .btn,
  .diagnosis-submit{
    width:100%;
    text-align:center;
    justify-content:center
  }
}

/* Mobile sample PDF fallback */
.sample-mobile-card{display:none}
@media (max-width:620px){
  .sample-viewer{display:none}
  .sample-mobile-card{display:block}
  .sample-mobile-thumb{
    display:flex;
    min-height:230px;
    margin-bottom:14px;
    padding:26px 22px;
    border:1px solid #dbe4ee;
    border-radius:18px;
    background:linear-gradient(145deg,#0b2748 0%,#123f70 62%,#1d73b7 100%);
    color:#fff;
    box-shadow:0 14px 30px rgba(11,39,72,.18);
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    gap:12px;
  }
  .sample-mobile-thumb span{font-size:.72rem;font-weight:800;letter-spacing:.18em;opacity:.82}
  .sample-mobile-thumb strong{font-size:1.45rem;line-height:1.35}
  .sample-mobile-thumb small{font-size:.88rem;opacity:.9}
  .sample-mobile-card .btn{width:100%;justify-content:center;text-align:center}
  .sample-info>a.btn-primary{display:none}
}