@charset "UTF-8";
:root{ 
--border: rgba(0,0,0,.12);
--brand-blue: #1D6CF0;
--brand-red: #F62837;
}
/* ヘッダー骨子 */
.site-header{
  position: sticky; top: 0; z-index: 100;
  background: #fff;
  transition: box-shadow .25s ease, background-color .25s ease;
}
/* ヘッダーだけ左右ガターを外す（PC/SP共通） */
.site-header .container{
  padding-inline: 0;
}

/* 上段 */
.header-top{
  display: grid;
  grid-template-columns: auto 1fr auto; /* ロゴ / 余白 / 右側リンク群 */
  align-items: center;
  gap: var(--s4);
  padding-block: 4px;
}

.logo{ display: inline-flex; align-items: center; }
@media (min-width:1025px){
  .logo{
    margin-left: 20px;
    margin-top: 20px;	  
  }
}

/* 上段リンク群 */
.header-links{
  display: flex; align-items: center; flex-wrap: wrap;
  gap: clamp(10px,1.2vw,20px);
  justify-self: end;        
  margin-left: auto;
  justify-content: flex-end;
}
.header-links a{ font-size: 14px; color: #F62837; transition: color .2s ease, opacity .2s ease; }
.header-links a:hover{ color: var(--brand-blue); }

/* SNSアイコン */
.header-links .ico img{ width: 20px; height: 20px; display: block; opacity: .82; }
.header-links .ico img:hover{ opacity: 1; }

/* 検索ボタン */
.search-btn{
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: #fff;
  padding: 0;
  color:#111;
transform: translateX(-4px);
border: none;
}
.search-btn img{ width: 20px; height: 20px; display: block; }

/* 言語切替ボタン */
.lang-switch a { 
  color: #555; text-decoration:none; 
  margin-left: 6px; 
}
.lang-switch a.active { 
  font-weight: bold; color:#000; 
}

/*外部ブラウザアイコン_公式ブログ*/
a.ext {
  position: relative;
  text-decoration: none;
  color: #F62837; /* ← 赤文字を固定 */
  transition: color 0.3s ease;
}

a.ext::after {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: 0.3em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23F62837' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") no-repeat center/contain;
  vertical-align: middle;
  transition: background 0.3s ease;
}

a.ext:hover {
  color: #1D6CF0; /* ← hover時は青文字 */
}

a.ext:hover::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%231D6CF0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") no-repeat center/contain;
}

/*外部ブラウザアイコン_ニュース*/
.ext-link {
  color: #000;
  text-decoration: underline;
  text-underline-offset: 4px; /* 下線を少し下げる */
  text-decoration-color: #F62837; /* 赤い下線 */
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  transition: text-decoration-color 0.2s ease, color 0.2s ease;
}

.ext-link:hover {
  color: #1D6CF0;                /* テキスト色を青に */
  text-decoration-color: #1D6CF0; /* 下線も青に */
}

.ext-icon {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
  pointer-events: none; /* hoverの下線影響を防止 */
}

/* お問い合わせ（青ボタン） */
.btn--sm{ padding:8px 12px; font-size: 14px; }
.btn--lg{ padding:14px 18px; font-size: 16px; }
.btn--blue{
  background: var(--brand-blue); color:#fff; border-color: transparent;
  border-radius: 10px; font-weight:700;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.btn--blue:hover{ transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.12); background:#1452b8; }

/* ========== 下段（グローバルナビ） ========== */
.header-bottom{ 
	border-top: none;
}

.gnav{
  display: flex; gap: clamp(14px, 2.4vw, 40px);
  padding-block: 8px; 
  overflow: auto hidden;
  justify-content: flex-end;
  font-size: 14px; font-weight: 400; letter-spacing: .02em;
}

@media (min-width: 769px){
  :root{
    --w-search: 36px;
    --w-lang: 56px;       /* ENボタンの実測 */
    --gap-actions: 12px;  /* ENと検索の間隔 */
    --header-actions-w: calc(var(--w-lang) + var(--gap-actions) + var(--w-search));
  }
  .gnav{ padding-right: var(--header-actions-w); }
}

/* メガ全体を .gnav の“真下”に出す */
.mega-wrap{
  position:absolute;
  left:0; right:0;
  top: calc(100% + 10px);   /* gnavの下に少し隙間 */
  z-index: 90;
}

/* パネル本体 */
.mega{
  display:none;
  background:#fff;
  border-radius:14px;
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
  padding: 20px;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.mega.is-open{
  display:block;
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
}

/* 中身のレイアウト */
.mega-grid{
  display:grid;
  gap: 14px 24px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
.mega a{
  font-size: 14px;
  font-weight: 400;
  color:#222;
  padding: 10px 12px;
  border-radius:10px;
}
.mega a:hover{
  background:#f3f6fb;
  color: var(--brand-blue);
}

/* SPは使わない（ドロワー優先） */
@media (max-width: 768px){
  .mega-wrap{ display:none; }
}
/* 下段ナビ */
.gnav a {
  position: relative;
  padding: 6px 0;
  text-decoration: none;
  color: #000;
  font-weight: 400;
  transition: color .25s ease;
}

/* 下線アニメーション */
.gnav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 2px;
  background: #F62837;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .25s ease;
}

/* ホバー時：赤文字＋下線アニメ */
.gnav a:hover {
  color: #F62837;   /* 赤文字 */
}
.gnav a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.gnav {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.site-header,
.site-header > * {
  margin: 0 !important;
  padding: 0 !important;
}

.site-header .container {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 変更推奨：ガターを固定値から変数に */
:root{ --gutter: 32px; }
.container{
  width: min(100% - var(--gutter), var(--container));
  margin-inline: auto;
}

.header-bottom {
  padding-top: 0 !important;
  margin-top: 0 !important;
  border-top: none !important; 
  line-height: 1 !important;
}

.site-header .header-inner{
  display:flex;
  align-items:center;              
  justify-content: space-between;
  gap: 24px;
  padding: 16px 16px;
}

@media (min-width:1025px){
  .logo{ margin-top:0 !important; }
}
@media (min-width:1025px){
  .gnav{
    flex:1 1 auto;
    justify-content:flex-start !important;
    gap:28px;
    padding-right:0 !important; 
    align-items:center;             
  }
  .gnav a{
    font-size:14px;
    line-height:1;               
    padding:4px 0;
	display: flex; 
  }
}
.header-links{ margin-left:auto; }
.header-links,
.gnav{
  height: 36px;
  align-items: center;
}

.gnav a{
  display: flex;
  align-items: center;
  line-height: 1;
  padding: 0 8px;                 
  font-size: 14px;
}
.site-header .header-inner{
  padding-block: 6px;              
}
.site-header .gnav a {
  font-size: 14px;
color:#393939;
}
.header-bottom__inner{
  position: relative;      
  left: 0 !important;     
  display: flex;           
  align-items: center;
}
.gnav{
  margin-left: auto;       
  justify-content: flex-end !important;
}
.header-bottom__inner{ padding-right: var(--gutter); }
:root{ --header-row-h: 44px; }  /* 好みで 40〜48 に調整 */

.site-header .header-top{
  min-height: var(--header-row-h) !important;
  padding-block: 0 !important;
  align-items: center !important;     /* gridでもOK */
}

.site-header .header-bottom__inner{
  left: 0 !important;                  /* 位置固定の打ち消し */
  min-height: var(--header-row-h) !important;
  display: flex !important;
  align-items: center !important;
  /* 右に寄せたいなら */
  /* padding-right: var(--gutter); */
}

.site-header .header-links,
.site-header .gnav{
  height: var(--header-row-h) !important;
  display: flex !important;
  align-items: center !important;
}

.site-header .header-links a:not(.btn),
.site-header .gnav a{
  line-height: 1 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.site-header .gnav{
  margin-left: auto !important;
  justify-content: flex-end !important;
  padding: 0 !important;
  margin: 0 !important;
}

@media (min-width: 1281px){ .header-bottom__inner{ left: 0 !important; } }
@media (max-width: 1280px){ .header-bottom__inner{ left: 0 !important; } }
.header-bottom__inner{ left: 0 !important; }

@charset "UTF-8";
.hamburger{
  display:none; width:44px; height:40px;
  border:1px solid var(--border); border-radius:10px; background:#fff;
  gap:5px; justify-content:center; align-items:center;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  position: relative; overflow:hidden;
}
.hamburger span{
  width:20px; height:2px; background:#111; display:block;
  transition: transform .25s ease, opacity .2s ease;
}
.hamburger span:nth-child(1){ transform-origin:left center; }
.hamburger span:nth-child(3){ transform-origin:left center; }
.hamburger[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 769px){
  .hamburger,
  .hamburger[aria-expanded="true"]{
    display: none !important;
  }
}

/* SP(<=768px)では表示 */
@media (max-width: 768px){
  .hamburger{
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
  }
}

/* ドロワー（SPメニュー） */
.drawer[hidden]{ display:none; }
.drawer{ position:fixed; inset:0; }
.drawer__scrim{ position:absolute; inset:0; background:rgba(0,0,0,.3); opacity:0; transition:opacity .25s ease; }
.drawer__panel{
  position:absolute; inset:0 0 0 auto;
 	width: 100%;
  max-width: 100%;
  background:#fff; transform:translateX(100%); transition:transform .3s ease;
  display:flex; flex-direction:column; box-shadow: -24px 0 60px rgba(0,0,0,.14);
	  height: 100vh;               /* 画面の高さに固定 */
  overflow-y: auto;             /* 縦スクロール可能にする */
  -webkit-overflow-scrolling: touch; /* iOSでスムーズスクロール */
}
.drawer.is-open .drawer__scrim{ opacity:1; }
.drawer.is-open .drawer__panel{ transform:translateX(0); }
.drawer__head{ display:flex; align-items:center; justify-content:space-between; padding:16px; border-bottom:1px solid var(--border); }
.drawer__close{ color: #000 !important; background:transparent; border:0; font-size:28px; line-height:1; padding:8px; }
.drawer__sns{ display:flex; align-items:center; gap:14px; padding:16px; flex-wrap:wrap; }
.drawer__sns .ext{ color:#5b6777; }
.drawer__sns .ico img{ width:24px; height:24px; }
.drawer__sns .spacer{ flex:1 0 12px; }
.drawer__cta{ margin: 8px 16px 16px; display:flex; align-items:center; justify-content:center; }

/* アコーディオン（ドロワー内） */
.accordion{ padding: 4px 8px 24px; }
.acc__hd{
  width:100%; text-align:left; color: #000 !important; background:#fff; border:0; border-top:1px solid var(--border);
  padding:18px 16px; font-weight:700; position:relative;font-size: 16px;
}
.acc__hd::after{ content:"+"; position:absolute; right:16px; top:50%; transform:translateY(-50%); color: var(--brand-red); font-weight:900; }
.acc__hd[aria-expanded="true"]::after{ content:"−"; }
.acc__panel{ display:none; padding: 0 16px 12px; }
.acc__panel a{ display:block; padding:10px 0; border-bottom:1px dashed rgba(0,0,0,.08); color:#3e4652; }
.acc__panel a:hover{ color: var(--brand-blue); }
.acc__link{ display:block; padding:18px 16px; border-top:1px solid var(--border); font-weight:700; }

/* 共通 */
a{ text-decoration: none; }

/* ===== Responsive ===== */
/* 1180px以下：ハンバーガー表示、ナビ非表示 */
@media (max-width: 1180px){
  .header-links{ display: none; }
  .gnav{ display: none; }
  .mega-wrap{ display: none; }          /* メガメニューも隠すなら */
  .hamburger{
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
  }
  /* 右オフセットを戻したい場合 */
  .header-bottom__inner{ left: 0; }
  /* 細かい調整（任意） */
  .gnav{ gap: clamp(12px, 2vw, 28px); }
}

/* 1181px以上：デスクトップ表示（ハンバーガー非表示） */
@media (min-width: 1181px){
  .hamburger,
  .hamburger[aria-expanded="true"]{
    display: none !important;
  }
  .gnav{ display: flex; } /* 念のため明示 */
}

/* スマホ以下のレイアウトだけ残す（表示切替は上で統一） */
@media (max-width: 768px){
  .header-top{ grid-template-columns: auto 1fr auto; }
  /* ここでは .gnav / .hamburger の display は触らない */
}

@media (prefers-reduced-motion: reduce){
  .drawer__scrim, .drawer__panel{ transition:none; }
}

.ico{ display:inline-block; width:22px; height:22px; background-size:contain; background-repeat:no-repeat; }
.ico.instagram{ background-image:url('../img/icon/ico_instagram.svg'); }
.ico.x{         background-image:url('../img/icon/ico_x.svg'); }
.ico.facebook{  background-image:url('../img/icon/ico_facebook.svg'); }

/* ハンバーガーの並びを縦にする */
.hamburger{
  display: inline-flex;            /* 既存の display を維持しつつ */
  flex-direction: column;          /* ← 縦積み */
  justify-content: center;
  align-items: center;
  gap: 6px;                        /* 線の間隔 */
}

/* 線の見た目（必要なら幅だけ合わせる） */
.hamburger span{
  width: 22px;                     /* お好みで 18〜24px */
  height: 2px;
  background: #111;
  display: block;
  transition: transform .25s ease, opacity .2s ease;
}

/* 開いた時は“X”にするため、すき間を詰める */
.hamburger[aria-expanded="true"]{ gap: 0; }
.hamburger[aria-expanded="true"] span:nth-child(1){
  transform: translateY(6px) rotate(45deg);
}
.hamburger[aria-expanded="true"] span:nth-child(2){
  opacity: 0;
}
.hamburger[aria-expanded="true"] span:nth-child(3){
  transform: translateY(-6px) rotate(-45deg);
}

/* ========== Buttons (clean) ========== */
/* ボタン共通 */
.btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius:8px;
  font-weight:600; font-size:14px; line-height:1.4;
  color:#fff; text-decoration:none;
  transition:background .25s ease;
}
.header-links a.btn{ color:#fff !important; }

/* 相談したい（ブルー） */
.btn--consult{ background:#1D6CF0; }
.btn--consult:hover{ background:#1556c0; }

/* 働きたい（オレンジ） */
.btn--work{ background:#FF8144; }
.btn--work:hover{ background:#e86e32; }

/*ボタン内のアイコン画像*/
.btn img.btn-icoimg{
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;    
  filter: invert(1) brightness(1.15) contrast(1.05);

  &.-origin{
    filter: none;
  }
}

/* ドロワー内のボタン */
.drawer .btn {
  width: 33%;              
  min-width: 120px;        
  margin: 8px auto;
  display: flex;
  justify-content: center;
}

/* ボタン2つ並べる用のラッパー */
.drawer__actions {
  display: flex;
  justify-content: center;   /* 真ん中に揃える */
  gap: 12px;                 /* ボタンの間隔 */
  margin: 16px 0;
}

.drawer__actions .btn {
  flex: 0 0 40%;
  min-width: 120px;
}

@media (max-width: 1180px){
  .site-header .header-links,
  .site-header .gnav,
  .site-header .mega-wrap{ display: none !important; }
  .site-header .hamburger{ display: inline-flex !important; }
}
@media (min-width: 1181px){
  .site-header .header-links{ display: flex !important; }
  .site-header .gnav{ display: flex !important; }
  .site-header .mega-wrap{ display: block !important; }
  .site-header .hamburger{ display: none !important; }
}

/* === Hamburger / Drawer 影と境界線を消す（SPのみ） === */
@media (max-width: 1180px){
  /* ボーダー変数ごと無効化（ヘッダー内だけ） */
  .site-header { --border: transparent !important; }

  /* 影を消す */
  .hamburger{ box-shadow: none !important; border: none !important; }
  .drawer__panel{ box-shadow: none !important; }
  .drawer__scrim{ background: rgba(0,0,0,0.3); } /* スクリーンは残す場合。不要なら 0 に */

  /* 線を消す */
  .drawer__head{ border-bottom: none !important; }
  .acc__hd{ border-top: none !important; }
  .acc__panel a{ border-bottom: none !important; }
  .acc__link{ border-top: none !important; }
}