@charset "utf-8";
/* ============================================================
   TTC DX TYPE-B / common.css
   共通パーツ（ヘッダー／フッター／ボタン／汎用）
   ============================================================ */

/*------------------------------------
デザイントークン
------------------------------------*/
:root{
  --c-primary   : #163B86;    /* ボタン・枠線のメインカラー */
  --c-primary-2 : #2156C2;
  --c-primary-3 : #4C8BE8;
  --c-blue-soft : #E4EEF8;
  --c-blue-tint : #F3F8FD;
  --c-ink       : #19253B;
  --c-ink-sub   : #5C6B82;
  --c-line      : #D8E1EC;
  --c-white     : #ffffff;
  --c-footer    : #015AAA;    /* フッター背景（ボタン色と区別） */
  --c-cta-bg    : #1E78C7;    /* Contactセクション（フッターより少し明るい青） */
  --c-icon      : #4C8BE8;    /* 装飾アイコン用（ボタンと誤認されないライトブルー） */

  --c-placeholder-1 : #E5E7EB;
  --c-placeholder-2 : #D1D5DB;

  --shadow-sm   : 0 2px 8px rgba(22,59,134,.06);
  --shadow-md   : 0 8px 28px rgba(22,59,134,.10);

  --radius-sm   : 6px;
  --radius-md   : 8px;
  --radius-lg   : 12px;
  --radius-xl   : 16px;

  --container   : 1200px;
  --gutter      : clamp(20px,4vw,48px);
}

/*------------------------------------
リセット & ベース
------------------------------------*/
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Noto Sans JP','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
  font-weight:400;
  color:var(--c-ink);
  line-height:1.8;
  background:var(--c-white);
  -webkit-font-smoothing:antialiased;
}

/*------------------------------------
Twenty Twenty-One インラインCSSの打ち消し
親テーマが #twenty-twentyone-style-inline-css として出力する
font-family:sans-serif を、html を頭に付けて詳細度で上書き
------------------------------------*/
html body,
html input,html textarea,html button,html .button,html .faux-button,
html .wp-block-button__link,html .wp-block-file__button,
html .has-drop-cap:not(:focus)::first-letter,
html .entry-content,
html .entry-content p,html .entry-content ol,html .entry-content ul,
html .entry-content dl,html .entry-content dt,html .entry-content cite,
html .entry-content figcaption,html .wp-caption-text,
html .comment-content,
html .comment-content p,html .comment-content ol,html .comment-content ul,
html .comment-content dl,html .comment-content dt,html .comment-content cite,
html .comment-content figcaption,
html .widget_text,
html .widget_text p,html .widget_text ol,html .widget_text ul,
html .widget_text dl,html .widget_text dt,
html .widget-content .rssSummary,
html .widget-content cite,html .widget-content figcaption,
html .widget-content .wp-caption-text{
  font-family:'Noto Sans JP','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
}

img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;transition:opacity .2s ease;}
a:hover{opacity:.7;}
h1,h2,h3,h4,h5{margin:0;line-height:1.4;font-weight:700;}
p{margin:0;}
ul{padding:0;margin:0;list-style:none;}
.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter);}

/*------------------------------------
統合型セクション見出し
例：Support ／ サポート
英語を主役に、日本語はスラッシュの後ろに小さく
------------------------------------*/
.section__heading{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:14px;
  line-height:1;
}
.section__heading .en{
  font-family:'Outfit',sans-serif;
  font-weight:800;
  font-size:clamp(26px,3.6vw,42px); /* v4: 英語見出しを80%に縮小 */
  color:var(--c-primary);
  letter-spacing:-.01em;
  line-height:1.05;
}
.section__heading .slash{
  font-family:'Outfit',sans-serif;
  font-weight:400;
  font-size:clamp(20px,2.4vw,28px);
  color:var(--c-primary-3);
  opacity:.7;
}
.section__heading .jp{
  font-size:13px;
  font-weight:600;
  color:var(--c-primary-2);
  letter-spacing:.04em;
}

/*------------------------------------
グレープレースホルダー
------------------------------------*/
.img-gray{
  width:100%;height:100%;min-height:120px;
  background:linear-gradient(135deg,var(--c-placeholder-1),var(--c-placeholder-2));
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.img-gray::before{
  /* v4: 中央に「Image」テキストでプレースホルダーであることを明示 */
  content:"Image";
  font-family:'Outfit',sans-serif;
  font-weight:600;
  font-size:14px;
  letter-spacing:.14em;
  color:rgba(255,255,255,.95);
  background:rgba(0,0,0,.22);
  padding:6px 18px;border-radius:4px;
  text-transform:uppercase;
}

/*------------------------------------
サイトヘッダー（fixed化 ※FV背景と重ねるため）
------------------------------------*/
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(180%) blur(8px);
  display:flex;align-items:center;justify-content:space-between;
  padding:14px clamp(20px,4vw,40px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease,box-shadow .25s ease;
}
.site-header.is-scrolled{
  border-bottom-color:var(--c-line);
  box-shadow:var(--shadow-sm);
}
.site-header__logo img{height:56px;width:auto;}
.site-header__nav-main{display:flex;align-items:center;gap:30px;}
.site-header__nav-main a{font-size:15.5px;font-weight:600;color:var(--c-ink);letter-spacing:.02em;} /* v4: PCナビ文字サイズ拡大 14→15.5px */
.site-header__nav-main a:hover{color:var(--c-primary-2);opacity:1;}
.site-header__right{display:flex;align-items:center;gap:14px;}
.header-cta{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--c-primary);
  color:var(--c-white)!important;
  padding:12px 22px;
  border-radius:6px;
  font-weight:600;font-size:14px;
  transition:background .2s ease,transform .2s ease;
}
.header-cta span{color:var(--c-white);}
.header-cta:hover{background:var(--c-primary-2);opacity:1;transform:translateY(-1px);}
.hamburger{
  display:none;width:42px;height:42px;background:transparent;border:0;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;cursor:pointer;
}
.hamburger span{display:block;width:22px;height:2px;background:var(--c-ink);}
@media screen and (max-width:960px){
  .site-header__nav-main{
    position:fixed;top:64px;left:0;right:0;
    display:flex;flex-direction:column;gap:0;
    background:var(--c-white);padding:16px 0;
    border-top:1px solid var(--c-line);
    transform:translateY(-110%);
    visibility:hidden;opacity:0;
    transition:transform .3s ease,opacity .25s ease,visibility .3s ease;
  }
  .site-header__nav-main.is-open{
    transform:translateY(0);
    visibility:visible;opacity:1;
  }
  .site-header__nav-main a{padding:14px 24px;width:100%;border-bottom:1px solid var(--c-line);}
  .header-cta{padding:10px 16px;font-size:13px;}
  .hamburger{display:flex;}
}

@media screen and (max-width:520px){
  /* スマホ版：ロゴ画像が広がり .site-header__right を押し出すのを防ぐため横幅を制限 */
  .site-header__logo img{max-width:120px;height:auto;}
}

/*------------------------------------
セクションベース
------------------------------------*/
.section{padding:clamp(64px,9vw,120px) 0;}
.section--soft{background:var(--c-blue-soft);}
.section--tint{background:var(--c-blue-tint);}

.section__head{margin-bottom:48px;text-align:left;}
.section__title{
  font-size:clamp(22px,3vw,32px);
  font-weight:700;
  color:var(--c-ink);
  margin-top:6px;
  letter-spacing:.01em;
  line-height:1.5;
}
.section__subtitle{
  margin-top:14px;color:var(--c-ink-sub);
  font-size:15px;line-height:1.9;max-width:760px;
}

/*------------------------------------
ページヘッダー（サブページFV 背景画像つき）
------------------------------------*/
.page-hero{
  position:relative;
  min-height:clamp(280px,36vw,420px);
  overflow:hidden;
  display:flex;align-items:center;
  padding:clamp(60px,8vw,100px) 0;
  margin-top:68px; /* fixed header分 */
}
.page-hero::before{
  content:"";
  position:absolute;inset:0;z-index:0;
  background:linear-gradient(135deg,var(--c-placeholder-1),var(--c-placeholder-2));
}
.page-hero::after{
  content:"";
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(255,255,255,.85) 0%,rgba(255,255,255,.55) 50%,rgba(255,255,255,.1) 100%);
}
.page-hero > .container{
  position:relative;z-index:2;
  width:100%;max-width:820px;  /* 全ページ共通：ヒーロー内のコンテナを820pxで固定（中身依存の可変を防ぐ） */
}
.page-hero .section__heading{margin-bottom:18px;}
.page-hero .section__heading .en{color:var(--c-primary);}
.page-hero__title{
  font-size:clamp(22px,3vw,32px);
  font-weight:700;color:var(--c-ink);letter-spacing:.02em;
  line-height:1.5;
}
.page-hero__lead{
  margin-top:18px;color:var(--c-ink);font-size:15px;max-width:680px;line-height:2;
}
.page-hero__gull{display:none;}

/* page-hero のコンパクト版：
   下層セクションを早く見せたいページ（送信完了画面・single記事など）でFVの高さを縮める。
   元は contact.css 内に閉じていたが、共通修飾子として common.css に移管。 */
.page-hero.page-hero--compact{
  min-height:0;
  padding:clamp(28px,4vw,48px) 0 clamp(24px,3.5vw,40px);
}
.page-hero.page-hero--compact .section__heading{
  margin-bottom:10px;
}

.breadcrumb{
  font-size:12px;color:var(--c-ink-sub);margin-bottom:18px;
}
.breadcrumb a{color:var(--c-primary-2);}
.breadcrumb span{margin:0 4px;}

/*------------------------------------
ボタン類（角丸6px／矢印は文字と同色）
------------------------------------*/
.btn-primary,.btn-outline,.btn-link{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:600;font-size:15px;
  padding:14px 26px;border-radius:6px;
  transition:transform .2s ease,background .2s ease,color .2s ease;
}
.btn-primary{background:var(--c-primary);color:var(--c-white);}
.btn-primary:hover{background:var(--c-primary-2);opacity:1;transform:translateY(-2px);}
.btn-primary span,
.btn-primary .arrow{color:var(--c-white);font-weight:700;}

.btn-outline{
  background:transparent;color:var(--c-white);
  border:1.5px solid rgba(255,255,255,.7);
}
.btn-outline:hover{background:rgba(255,255,255,.12);opacity:1;}
.btn-outline span,
.btn-outline .arrow{color:var(--c-white);font-weight:700;}

.btn-link{
  padding:0;background:transparent;color:var(--c-primary-2);
  border-radius:0;
}
.btn-link:hover{opacity:1;color:var(--c-primary);}
.btn-link .arrow,
.btn-link span{color:var(--c-primary-2);font-weight:700;}

.round-arrow{
  /* v4: ボタンと誤認しないよう装飾色（--c-icon）に */
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  background:var(--c-icon);color:var(--c-white);
  font-size:16px;font-weight:700;
  transition:transform .2s ease,background .2s ease;
}
.round-arrow:hover{background:var(--c-primary-2);transform:translateX(4px);opacity:1;}

/*------------------------------------
カード（汎用）
------------------------------------*/
.card{
  background:var(--c-white);
  border-radius:var(--radius-lg);
  padding:28px;
  box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;
  transition:transform .25s ease,box-shadow .25s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.card__icon{
  width:46px;height:46px;
  display:flex;align-items:center;justify-content:center;
  background:var(--c-blue-soft);color:var(--c-primary);
  border-radius:8px;margin-bottom:18px;
}
.card__icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.card__title{font-size:17px;font-weight:700;color:var(--c-ink);margin-bottom:8px;}
.card__desc{font-size:13.5px;color:var(--c-ink-sub);line-height:1.8;flex:1;}
.card__foot{margin-top:18px;display:flex;justify-content:flex-end;}

/*------------------------------------
CTA Final（フッター手前・なみなみ装飾なし・青グラデ）
------------------------------------*/
.cta-final{
  /* v4: フッター #015AAA に合わせ、少し薄いブルーに */
  background:linear-gradient(180deg,#3291DC 0%,var(--c-cta-bg) 100%);
  padding:clamp(60px,8vw,100px) 0;
}
.cta-final__card{
  background:var(--c-white);
  border-radius:var(--radius-xl);
  padding:clamp(36px,5vw,56px);
  display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;
  box-shadow:var(--shadow-md);
}
.cta-final__card .section__heading .en{color:var(--c-primary);}
.cta-final__title{
  font-size:clamp(20px,2.4vw,26px);font-weight:700;margin-top:8px;color:var(--c-ink);line-height:1.5;
}
.cta-final__sub{margin-top:10px;color:var(--c-ink-sub);font-size:14px;}
.cta-final__desc{margin-top:14px;color:var(--c-ink-sub);font-size:14px;line-height:1.9;}
.cta-final__actions{margin-top:24px;display:flex;flex-wrap:wrap;gap:12px;}
.cta-final__actions .btn-primary{background:var(--c-primary);color:var(--c-white);}
.cta-final__actions .btn-primary:hover{background:var(--c-primary-2);}
.cta-final__actions .btn-primary span,
.cta-final__actions .btn-primary .arrow{color:var(--c-white);}
.cta-final__actions .btn-outline{
  background:transparent;color:var(--c-primary);
  border:1.5px solid rgba(22,59,134,.35);
}
.cta-final__actions .btn-outline span,
.cta-final__actions .btn-outline .arrow{color:var(--c-primary);}
.cta-final__actions .btn-outline:hover{background:rgba(22,59,134,.05);}
@media screen and (max-width:820px){
  .cta-final__card{grid-template-columns:1fr;gap:20px;padding:32px 24px;}
}

/*------------------------------------
サイトフッター（黄色排除・青系統一）
------------------------------------*/
.site-footer{
  background:var(--c-footer);
  color:rgba(255,255,255,.82);
  padding:60px 0 28px;
  font-size:13px;line-height:1.9;
}
.footer__inner{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:40px;
  margin-bottom:40px;
}
.footer__brand img{width:200px;height:auto;margin-bottom:18px;filter:brightness(0) invert(1);}
.footer__brand p{font-size:12.5px;color:rgba(255,255,255,.72);max-width:320px;line-height:1.9;}
.footer__tag{
  margin-top:18px;font-size:18px;font-weight:700;color:var(--c-white);letter-spacing:.02em;
  line-height:1.6;
}
.footer__nav h5{
  font-family:'Outfit',sans-serif;font-weight:700;font-size:12px;
  color:var(--c-white);
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px;
  opacity:.9;
}
.footer__nav ul li{margin-bottom:8px;}
.footer__nav ul a{color:rgba(255,255,255,.82);font-size:13px;}
.footer__nav ul a:hover{color:var(--c-white);opacity:1;}
.footer__bottom{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
  border-top:1px solid rgba(255,255,255,.14);
  padding-top:22px;
  font-size:11.5px;color:rgba(255,255,255,.6);
}
.footer__bottom a{color:rgba(255,255,255,.8);margin-left:16px;}
@media screen and (max-width:820px){
  .footer__inner{grid-template-columns:1fr 1fr;gap:28px;}
}
@media screen and (max-width:520px){
  .footer__inner{grid-template-columns:1fr;gap:24px;}
  .footer__brand img{width:156px;}
}

/*------------------------------------
フェードアップアニメーション
------------------------------------*/
.fade-up{opacity:0;transform:translateY(24px);transition:all .8s ease;}
.fade-up.is-visible{opacity:1;transform:translateY(0);}

/*------------------------------------
装飾要素の非表示（カモメ・波）
------------------------------------*/
.gull,.hero__gulls,.page-hero__gull,.hero__wave{display:none!important;}

/*------------------------------------
PC版（768px以上）で中央揃えにするユーティリティ
- .section__subtitle 等のテキスト要素：text-align:center
- ボタンを内包するコンテナ（.error-404__actions 等）：flex/inline要素も中央寄せ
- .section__subtitle 等は max-width が指定されているため、margin:auto で中央配置
------------------------------------*/
@media screen and (min-width:768px){
  .is-pc-center{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
  }
  .is-pc-center.error-404__actions{
    display:flex;
    justify-content:center;
  }
}