/*
Theme Name: Lightning Child Sample
Theme URI:
Template: lightning
Description:
Author:
Tags:
Version: 0.6.1
*/

.entry-title--post-type--page,
h2:where(:not(.wp-block-post-title)) {
    border-top: none;
    border-bottom: none;
}

/* 例：固定ページ ID=12 のみ .container の最大幅を解除して全幅に */
.page-id-12 .container,
.page-id-12 .container-sm,
.page-id-12 .container-md,
.page-id-12 .container-lg,
.page-id-12 .container-xl{
  max-width: none;   /* 幅制限を外す */
  width: 100%;
}

.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl {
	padding-left: 0;
	padding-right: 0;
}

.service-block{
  background: linear-gradient(
    180deg,
    #E3ECFA 0%,   /* = ほんの少し濃い水色 */
    #CFE0F7 100%  /* = 低彩度の青 */
  ) !important;
}


.wp-container-core-group-is-layout-fdeda089.blog-block {
	align-items: center;
}

.site-header {
	padding-left: 20px;
	padding-right: 20px;
}

@media (max-width:768px){
	.site-header {
	padding-left: 20px;
	padding-right: 20px;
}
}

.site-header-container {
	max-width: 100%;
	width: 100%;
	justify-content: center;
}
:root{
  /* 色・影・角丸（必要に応じてここだけ変えれば全体が整う） */
  --brand: #2C7BE5;             /* メインカラー */
  --brand-2: #00C2A8;           /* サブアクセント */
  --ink: #0F172A;               /* 文字色(濃) */
  --muted: #667085;             /* 文字色(弱) */
  --bg-soft: #F6F8FB;           /* セクションの薄グレー */
  --radius: 12px;               /* 角丸 */
  --shadow-sm: 0 4px 14px rgba(0,0,0,.08);
  --shadow-md: 0 10px 30px rgba(0,0,0,.10);
  --container-max: 1090px;
  --gutter-sp: 20px;            /* 〜767px */
  --gutter-pc: 25px;            /* 768px〜 */
  /* “安っぽく見えない”青〜青灰の淡色 */
  --bg-blue-50:   #F6FAFF; /* ほぼ白。ほんのり青 */
  --bg-blue-75:   #EFF5FC; /* 薄い青 */
  --bg-blue-100:  #E9F0FA; /* 低彩度の青 */
  --bg-bluegray-50:  #F3F6FA; /* 青みがかったグレー（落ち着く） */
  --bg-bluegray-100: #E9EEF6; /* 少しだけ濃いめ */
}

/* インナー幅（共通） */
.common-container{
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter-sp);
}
@media (min-width:768px){
  .common-container{ padding-inline: var(--gutter-pc); }
}

/* セクションの上下余白（使い回し用） */
.c-section--alt{ background: var(--bg-soft); }

/* テキストのベース */
body{ color: var(--ink); }
.u-muted{ color: var(--muted); }


.button a {
	display: inline-block;
	max-width: 400px;
	width: 100%;
}

.main-section--col--two {
	width: 100%;
}

@media (max-width:768px){
.flex-box {
	flex-direction: column;
}
}

.flex-child-box {
	max-width:100%;
	width: 100%;
}

@media (max-width:768px){
.flex-child-box {
	max-width: 100%;
}
}

h4:where(:not(.wp-block-post-title)) {
	width: 100%;
}

/* ================================================
   ヒーローセクション（トップ画像部分）の改善
   ================================================ */
.wp-block-cover {
    position: relative;
    border-radius: 0;
    overflow: hidden;
}

/* オーバーレイのグラデーション強化 */
.wp-block-cover .wp-block-cover__background {
    background: linear-gradient(135deg, 
        rgba(41, 128, 185, 0.85) 0%, 
        rgba(142, 68, 173, 0.85) 100%) !important;
}

/* メインタイトルのスタイリング */
.wp-block-cover__inner-container p.has-large-font-size {
    font-size: clamp(2rem, 5vw, 3.5rem) !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    text-shadow: 2px 4px 8px rgba(0,0,0,0.3);
    margin-bottom: 1rem !important;
    animation: fadeInDown 1s ease-out;
    letter-spacing: 0.05em;
}

/* サブタイトル（キャッチコピー）のスタイリング */
.wp-block-cover__inner-container p:not(.has-large-font-size) {
    font-size: 1.2rem !important;
    color: rgba(255, 255, 255, 0.95) !important;
    text-shadow: 1px 2px 4px rgba(0,0,0,0.3);
    animation: fadeInUp 1s ease-out 0.3s both;
    line-height: 1.8;
    max-width: 600px;
    margin: 0 auto;
}

/* ================================================
   ブログカード部分の改善
   ================================================ */
.wp-block-post-template {
    gap: 30px !important;
    padding: 0 15px;
}

/* 各ブログカード */
.blog-block {
    background: #ffffff !important;
    border-radius: 15px !important;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: 1px solid rgba(0,0,0,0.05);
}

.blog-block:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 12px 35px rgba(0,0,0,0.15) !important;
}

/* サムネイル画像のエフェクト */
.wp-block-post-featured-image img {
    transition: transform 0.5s ease !important;
    border-radius: 15px 15px 0 0 !important;
}

.blog-block:hover .wp-block-post-featured-image img {
    transform: scale(1.05) !important;
}

/* 日付のスタイリング */
.wp-block-post-date {
    color: #7f8c8d !important;
    font-size: 0.85rem !important;
    padding: 15px 20px 5px !important;
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* 記事タイトル */
.wp-block-post-title {
    padding: 0 20px 20px !important;
    margin: 0 !important;
    font-size: 1.1rem !important;
}

.wp-block-post-title a {
    color: #2c3e50;
    text-decoration: none !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    transition: color 0.3s ease !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ================================================
   サービス説明セクション（1つ目）
   ================================================ */
.service-block:first-of-type {
    background: #F6F8FB !important;
    padding: 100px 0 !important;
    margin: 60px calc(50% - 50vw) !important;
    width: 100vw !important;
    position: relative;
    overflow: hidden;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* サービス説明の装飾的な背景要素 - 波形 */
.service-block:first-of-type::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: 
        radial-gradient(ellipse 800px 300px at 20% 40%, rgba(102, 126, 234, 0.05) 0%, transparent 40%),
        radial-gradient(ellipse 600px 400px at 80% 60%, rgba(52, 152, 219, 0.04) 0%, transparent 40%),
        radial-gradient(ellipse 1000px 300px at 50% 90%, rgba(142, 68, 173, 0.03) 0%, transparent 40%);
    opacity: 0.8;
}

/* サービス説明のアクセントライン */
.service-block:first-of-type::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        #667eea 20%, 
        #764ba2 50%, 
        #3498db 80%, 
        transparent 100%);
}

/* サービス説明の内部コンテンツコンテナ */
.service-block:first-of-type > * {
    max-width: 1000px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

/* サービス説明の見出し（会社紹介と統一） */
.service-block:first-of-type h2 {
    color: #2c3e50 !important;
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    text-align: center;
    margin-bottom: 50px !important;
    position: relative;
    display: inline-block;
    width: 100%;
}

.service-block:first-of-type h2::before,
.service-block:first-of-type h2::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 100px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #667eea);
}

.service-block:first-of-type h2::before {
    left: 50%;
    margin-left: -180px;
}

.service-block:first-of-type h2::after {
    right: 50%;
    margin-right: -180px;
    background: linear-gradient(90deg, #667eea, transparent);
}

/* サービス説明のテキストエリア */
.service-block:first-of-type p {
    color: #4a5568 !important;
    line-height: 2.2 !important;
    font-size: 1.1rem !important;
    max-width: 800px;
    margin: 0 auto !important;
    position: relative;
    padding: 40px;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.9) 0%, 
        rgba(255, 255, 255, 0.7) 100%);
    border-radius: 20px;
    box-shadow: 
        0 10px 40px rgba(102, 126, 234, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.8);
}

/* サービス説明のテキストエリアの装飾 */
.service-block:first-of-type p::before {
    content: '💡';
    position: absolute;
    top: -20px;
    left: 40px;
    font-size: 2rem;
    background: #F6F8FB;
    padding: 0 10px;
}

/* ================================================
   会社紹介セクション（2つ目）
   ================================================ */
.service-block:last-of-type {
    background: linear-gradient(135deg, #F6F2FF 0%, #EDEBFE 100%) !important;
    margin: 0 calc(50% - 50vw) 0 !important;
    width: 100vw !important;
    position: relative;
    overflow: hidden;
    border-radius: 0 !important;
    box-shadow: none !important;
    border-top: 1px solid rgba(0,0,0,0.05);
}

/* 会社紹介の幾何学的な背景パターン */
.service-block:last-of-type::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(45deg, rgba(255,255,255,0.1) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255,255,255,0.1) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.1) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.1) 75%);
    background-size: 50px 50px;
    background-position: 0 0, 0 25px, 25px -25px, -25px 0px;
    opacity: 0.3;
}

/* 会社紹介の内部コンテンツコンテナ */
.service-block > * {
    max-width: 1000px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

/* サービス説明・会社紹介の見出し */
.service-block h2 {
    color: #2c3e50 !important;
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    text-align: center;
    margin-bottom: 50px !important;
    display: flex;
	align-items: center;
	justify-content: center;
    width: 100%;
}

.service-block h2::before,
.service-block h2::after {
    content: '';
    width: 100px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #3498db);
}

.service-block h2::before {
    margin-right: 20px;
}

.service-block h2::after {
    margin-left: 20px;
    background: linear-gradient(90deg, #3498db, transparent);
}

/* サービス説明・会社紹介のテキスト */
.service-block p {
    color: #4a5568 !important;
    line-height: 1.9 !important;
    font-size: 1.05rem !important;
}

/* ================================================
   申し込みボタンセクションの背景
   ================================================ */
/* ボタンセクションの背景設定 */
.button-bg {
    padding: 120px 0 !important;
    width: 100vw !important;
    position: relative;
}

/* 背景画像の上に半透明オーバーレイ */
.button-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(41, 128, 185, 0.85) 0%, 
        rgba(142, 68, 173, 0.8) 100%);
    z-index: 0;
}

.button-bg::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("https://second-opinion.ayanon35.com/wp-content/uploads/2025/08/AdobeStock_510851992_Preview-5.jpeg");
  background-attachment: fixed;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.4; /* ここで背景を薄くする */
}

/* ボタンコンテナのz-index調整 */
.vk_button > * {
    position: relative;
    z-index: 1;
}

/* 申し込みボタン本体（既存のデザインを維持） */
.vk_button_link {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border: none !important;
    padding: 18px 50px !important;
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    border-radius: 50px !important;
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4) !important;
    transition: all 0.3s ease !important;
    display: inline-block;
    position: relative;
    overflow: hidden;
    color: #ffffff !important;
    z-index: 2;
}

.vk_button_link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.5s ease;
}

.vk_button_link:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 15px 40px rgba(102, 126, 234, 0.5) !important;
    color: #ffffff !important;
}

.vk_button_link:hover::before {
    left: 100%;
}

/* ================================================
   アニメーション定義
   ================================================ */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ================================================
   スペーサーの調整
   ================================================ */
.wp-block-spacer {
    height: 60px !important;
}

/* ================================================
   レスポンシブ対応（モバイル）
   ================================================ */
@media (max-width: 768px) {
    /* ヒーローセクションのモバイル対応 */
    .wp-block-cover__inner-container p.has-large-font-size {
        font-size: 1.8rem !important;
    }
    
    .wp-block-cover__inner-container p:not(.has-large-font-size) {
        font-size: 1rem !important;
        padding: 0 20px;
    }
    
    /* ブログカードのモバイル対応 */
    .wp-block-post-template {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    /* サービスブロックのモバイル対応 */
    .service-block:first-of-type,
    .service-block:last-of-type {
        padding: 0 0 !important;
        margin: 0 calc(50% - 50vw) !important;
    }
    
    .service-block:first-of-type h2,
    .service-block:last-of-type h2 {
        font-size: 1.8rem !important;
    }
    
    .service-block:first-of-type h2::before,
    .service-block:first-of-type h2::after,
    .service-block:last-of-type h2::before,
    .service-block:last-of-type h2::after {
        display: none;
    }
    
    .service-block:first-of-type p {
        padding: 25px;
        margin: 0 15px !important;
    }
    
    .service-block:first-of-type p::before {
        top: -15px;
        left: 25px;
        font-size: 1.5rem;
    }
    
    .service-block:last-of-type p {
        padding: 20px;
    }
    
    /* ボタンのモバイル対応 */
    .vk_button_link {
        padding: 15px 40px !important;
        font-size: 1rem !important;
    }
    
    /* スペーサーのモバイル対応 */
    .wp-block-spacer {
        height: 40px !important;
    }
}

/* ================================================
   追加の改善効果
   ================================================ */
/* スクロールアニメーション用クラス */
.service-block,
.blog-block {
    opacity: 0;
    animation: fadeIn 0.8s ease-out forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

/* 全体的な背景 */
.site-body {
    background: linear-gradient(180deg, #f5f7fa 0%, #ffffff 100%);
    min-height: 100vh;
}

/* カード全体を“リンクの当たり判定”に拡張する基本 */
.c-card{
  position: relative;                 /* 擬似要素の基準にする */
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform .2s, box-shadow .2s;
}
.c-card:hover{ transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,.10); }

/* 重要：タイトルのリンクを“伸ばす” */
.c-card .c-card__stretched-link{
  position: static;                   /* 自身は通常フローのまま */
  z-index: 1;
}
.c-card .c-card__stretched-link::after{
  content: "";
  position: absolute;                 /* カード全体へ拡張 */
  inset: 0;                           /* 上下左右ぜんぶ */
  z-index: 2;                         /* 上にかぶせてクリックを拾う */
}

/* 見た目：カーソルとフォーカス（アクセシビリティ） */
.c-card{ cursor: pointer; }
.c-card .c-card__stretched-link:focus-visible{
  outline: 3px solid rgba(44,123,229,.5);
  outline-offset: 3px;
}

/* 幅管理（既出の共通インナーを利用） */
.common-container{ max-width:1090px; margin-inline:auto; padding-inline:20px; }
@media (min-width:768px){ .common-container{ padding-inline:25px; } }

/* 記事ヘッダー */
.p-article__head{ text-align:center; }
.p-article__date{ color:#667085; font-size:.9rem; margin:0 0 .5rem; }
.p-article__title{ margin:0; line-height:1.25; }

/* アイキャッチを額縁風に */
.c-frame{ border-radius:12px; box-shadow:0 0 0 1px #E6E9EF, 0 10px 30px rgba(0,0,0,.08); overflow:hidden; }
.p-article__thumb{ margin-top: 20px; }
.p-article__thumb img{ width:100%; height:auto; display:block; }

/* 本文（読みやすく） */
.p-article__body{ padding-block: clamp(12px, 2vw, 28px); background:#fff; }
.p-article__content :where(p, h2, h3, h4, ul, ol, blockquote){ margin-block: 1.2em; }
.p-article__content img{ border-radius:8px; }
.p-article__content h2{ font-size: clamp(1.25rem, 2.2vw, 1.6rem); border-left:4px solid #2C7BE5; padding-left:.6em; }
.p-article__content h3{ font-size: clamp(1.1rem, 1.8vw, 1.3rem); }

/* カテゴリ・タグ */
.p-article__footer{ display:flex; gap:12px; flex-wrap:wrap; margin-top: 24px; }
.p-article__cats a, .p-article__tags a{
  display:inline-block; padding:.3em .6em; border:1px solid #E4E7EC; border-radius:999px; font-size:.85rem;
}

/* 前後ナビ */
.p-article__pn{ display:flex; justify-content:space-between; gap:12px; margin-top: clamp(24px, 4vw, 40px); }
.p-article__pn a{ text-decoration:none; color:#111; background:#F6F8FB; padding:.6em .9em; border-radius:8px; }
.p-article__pn a:hover{ background:#e9eef6; }


/* ==============================
   Archive Head（見出し帯）
   ============================== */
.p-archive-head{
  padding-block: clamp(24px, 4vw, 56px);
  text-align: center;
}
.p-archive-head__title{
  margin: 0;
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  line-height: 1.25;
}
.p-archive-head__desc{
  margin-top: .75rem;
  color: #667085;
  font-size: .95rem;
}

/* ==============================
   Cards Grid（3列レスポンシブ）
   ============================== */
.p-cards-grid{
  /* ulのリセット */
  list-style: none;
  padding: 0;
  margin: 0;

  display: grid;
  gap: clamp(16px, 3vw, 28px);
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 768px){
  .p-cards-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px){
  .p-cards-grid{
    grid-template-columns: repeat(3, 1fr);
  }
}
.p-cards-grid__item{
  /* grid子要素は特に不要だが、将来の余白調整のためフックに */
}

/* ==============================
   Card（全体リンク）
   ============================== */
.c-card{
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
  text-decoration: none;         /* aでも下線を消しておく */
  color: inherit;
  overflow: hidden;              /* 角丸を画像にも適用 */
  transition: transform .2s, box-shadow .2s;
}
.c-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0,0,0,.12);
}

.c-card:hover .wp-block-post-title a {
	color: var(--vk-color-text-link-hover);
}

/* サムネ：16:9 を維持してトリミング */
.c-card__thumb{
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #f2f4f7;          /* 画像無しのときの背景 */
}
.c-card__thumb img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* 本文部分 */
.c-card__body{
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px 18px;
  flex: 1;                      /* 高さがバラつく時でもボタン等が下へ寄る拡張余地 */
}
.c-card__meta{
  font-size: .85rem;
  color: #667085;
}
.c-card__title{
  font-size: clamp(1rem, 1.6vw, 1.05rem);
  line-height: 1.4;
  margin: 0;
}

/* ==============================
   Pagination（the_posts_pagination）
   ============================== */
/* WordPress標準クラス：.page-numbers / .current / .prev / .next / .dots をターゲット */
.p-archive-pager{
  display: flex;
  justify-content: center;
  margin-top: clamp(24px, 4vw, 40px);
}
.p-archive-pager .nav-links{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.p-archive-pager .page-numbers{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  background: #F6F8FB;
  color: #111;
  text-decoration: none;
  font-size: .95rem;
  transition: background-color .2s, color .2s, box-shadow .2s;
  box-shadow: 0 1px 0 rgba(0,0,0,.03) inset;
}
.p-archive-pager .page-numbers:hover{
  background: #e9eef6;
}
.p-archive-pager .page-numbers.current{
  background: #2C7BE5;
  color: #fff;
  box-shadow: none;
}
.p-archive-pager .page-numbers.prev,
.p-archive-pager .page-numbers.next{
  padding: 0 14px;              /* 矢印テキストは少し広め */
}
.p-archive-pager .page-numbers.dots{
  background: transparent;
  box-shadow: none;
  min-width: auto;
  padding: 0 6px;
}

/* ==============================
   小さなユーティリティ
   ============================== */
.u-muted{ color:#667085; }



/* ちょいだけトーンを落として白文字の読みやすさ優先 */
body:not(.home) .page-header,
body:not(.home) .vk_page_header,
body:not(.home) .ltg-page-header,
body:not(.home) .vk_pageHeader{
  background:
    linear-gradient(180deg, rgba(5,25,60,.14), rgba(5,25,60,.14)),
    linear-gradient(135deg, #D6E6FB 0%, #C2D6F4 100%) !important;
  color:#fff !important;
  border:none !important;
}