/*
 * 外国人材の受け入れ支援（/service/global/）だけで読む。inc/global.php が読み込む。
 * 正本は Claude Design「外国人材の受け入れ支援ページ」（PC版）。色・書体は base.css の :root と同じ値。
 * 900px 以下は1カラムに落とす（数字の帯は縦並び、費用カードは縦積み）。
 */

/* ---------------------------------------------------------------- 共通 */
.gl .gl-ico{width:52px;height:52px;stroke:var(--navy);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.gl .gl-ico .f{fill:var(--navy-tint);stroke:var(--navy)}
.gl .gl-ico .r{stroke:var(--red)}
.gl .gl-note{font-size:13.5px;color:var(--muted);line-height:1.6}
.gl .gl-num{font-family:var(--en);font-weight:800;color:var(--navy);white-space:nowrap}
.gl h3{font-size:19px;font-weight:700;line-height:1.5}
.gl-card{border:2px solid var(--navy-line);border-radius:20px;background:#fff;box-shadow:0 4px 0 var(--navy-line);padding:24px;display:flex;flex-direction:column;gap:10px}
.gl-card p{font-size:15.5px;color:var(--text);line-height:1.8}

/* ---------------------------------------------------------------- 見出し */
.gl-hero{padding-top:8px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:44px;align-items:center}
.gl-hero-t{display:flex;flex-direction:column;gap:14px}
.gl-hero .phead{padding-block:0}
.gl-reg{display:flex;align-items:center;gap:14px;padding:12px 18px;border:2px solid var(--navy-line);border-radius:18px;font-size:15px;line-height:1.6}
.gl-reg .gl-ico{width:40px;height:40px}
.gl-reg b{font-size:16px}
.gl-btns{display:flex;gap:12px;flex-wrap:wrap}
.gl-fig{margin:0;display:flex;flex-direction:column;gap:8px}
.gl-fig img{width:100%;height:auto;border-radius:18px;display:block}
.gl-fig figcaption{font-size:13.5px;color:var(--muted);line-height:1.6}

/* ---------------------------------------------------------------- 数字の帯 */
.gl-band{background:var(--navy-deep);color:#fff;margin-top:48px}
.gl-band .wrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.gl-band p{padding:22px 24px;text-align:center;line-height:1.2}
.gl-band p + p{border-left:1px solid #2a4478}
.gl-band span{display:block;font-size:14px;color:#dde4f1;margin-bottom:4px;line-height:1.6}
.gl-band b{font-family:var(--en);font-weight:800;font-size:34px}
.gl-band small{font-family:var(--jp);font-size:16px;font-weight:700;margin-left:2px}

/* ---------------------------------------------------------------- 理由 */
/* カード4枚のあとに詳細（全幅）。スマホ（1列）では詳細がそのカードのすぐ下に来るよう、HTML はカード→詳細の順 */
.gl-reasons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.gl-rcard{display:flex;flex-direction:column;align-items:flex-start;gap:10px;text-align:left;padding:22px;border-radius:20px;cursor:pointer;font-family:inherit;color:var(--ink);min-height:180px;width:100%;box-sizing:border-box;background:#fff;border:2px solid var(--navy-line);box-shadow:0 4px 0 var(--navy-line)}
.gl-rcard > b{font-size:18px;line-height:1.5}
.gl-rcard .gl-more{margin-top:auto;font-size:14px;font-weight:700;color:var(--navy)}
.gl-rcard:hover{border-color:var(--navy)}
.gl-rcard:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.gl-rcard[aria-expanded="true"]{background:var(--navy-tint);border-color:var(--navy);box-shadow:0 4px 0 var(--navy)}
.gl-rdetail{grid-column:1 / -1;order:1;background:var(--navy-tint);border-radius:20px;padding:24px 28px;display:flex;flex-direction:column;gap:8px}
.gl-rdetail[hidden]{display:none}
.gl-rtitle{font-size:18px}
.gl-rphoto{margin:4px 0 6px;display:grid;grid-template-columns:420px minmax(0,1fr);gap:18px;align-items:center}
.gl-rphoto > picture{display:block} /* extra.css の display:contents だと <source> が1マス取る */
.gl-rphoto img{width:100%;height:auto;border-radius:16px;display:block}
.gl-rphoto figcaption{font-size:15px;color:var(--text);line-height:1.7}
.gl-rphoto figcaption b{display:block;font-size:16px;color:var(--ink)}
.gl-rdetail .gl-pts{padding:0}
.gl .gl-hint{margin-top:10px}
.gl-reasons:not(.js) + .gl-hint{display:none}

/* 開閉（費用の内訳・6校・詳しく知りたい方へ） */
.gl-accs{display:flex;flex-direction:column;gap:12px}
.gl-acc{border:2px solid var(--navy-line);border-radius:18px;background:#fff;overflow:hidden}
.gl-acc summary{min-height:68px;display:flex;align-items:center;gap:16px;padding:14px 24px;cursor:pointer;list-style:none;color:var(--ink)}
.gl-acc summary::-webkit-details-marker{display:none}
.gl-acc summary:focus-visible{outline:3px solid var(--navy);outline-offset:-3px}
.gl-acc summary > b{flex-grow:1;font-size:18px;line-height:1.5}
.gl-acc summary small{display:block;font-size:14px;font-weight:500;color:var(--muted)}
.gl-acc .gl-no{font-family:var(--en);font-weight:800;font-size:24px;color:var(--navy);width:36px;flex-shrink:0}
.gl-acc .gl-open{font-size:15px;font-weight:700;color:var(--navy);white-space:nowrap}
.gl-acc[open] .gl-open{font-size:0}
.gl-acc[open] .gl-open::after{content:"閉じる";font-size:15px}
.gl-pts{list-style:none;margin:0;padding:4px 24px 24px 76px;display:flex;flex-direction:column;gap:10px}
.gl-pts li{display:flex;gap:10px;font-size:15.5px;color:var(--text);line-height:1.7}
.gl-pts li::before{content:"・";color:var(--navy);font-weight:700}
.gl-accb{padding:4px 24px 24px;display:flex;flex-direction:column;gap:10px}
.gl-accb > p{font-size:15.5px;color:var(--text)}

/* ---------------------------------------------------------------- 流れ */
.gl-flowbox{background:var(--navy-tint);border-radius:24px;padding:28px;display:flex;flex-direction:column;gap:16px}
.gl-flowbox > p{font-size:15px;color:var(--text)}
.gl-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.gl-steps li{display:flex;flex-direction:column;gap:6px;padding:20px 18px;background:#fff;border-radius:18px;box-shadow:0 4px 0 var(--navy-line)}
.gl-steps .n{font-family:var(--en);font-weight:800;font-size:28px;color:var(--navy);line-height:1}
.gl-steps b{font-size:16.5px;line-height:1.5}
.gl-steps li > span:last-child{font-size:14px;color:var(--text);line-height:1.7}

/* ---------------------------------------------------------------- 費用 */
.gl-cost{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.gl-price{align-items:flex-start}
.gl .gl-price h3{font-size:16px;color:var(--muted)}
.gl-price .gl-big{font-size:36px;line-height:1.2}
.gl-price .gl-big small{font-size:17px}
.gl-costmore{margin-top:14px}
.gl-accb.gl-costb{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:28px;align-items:start}
.gl .gl-costb h3{font-size:16px}
.gl-costb .gl-note{margin-top:8px}
.gl-costside{display:flex;flex-direction:column;gap:14px}
.gl-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:10px 0;border-bottom:1px solid var(--line);font-size:16px;line-height:1.6}
.gl-row.gl-last{border-bottom:0}
.gl-row b{white-space:nowrap}
.gl-row small{display:block;font-size:13.5px;color:var(--muted);line-height:1.6}
.gl-big{font-size:34px}
.gl-big small{display:inline;font-family:var(--jp);font-size:16px;font-weight:700;color:var(--navy)}
.gl-tip{background:var(--soft);border-radius:14px;padding:14px 16px;font-size:14.5px;line-height:1.7}

/* ---------------------------------------------------------------- パートナー */
.gl-partner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:stretch}
.gl-person{flex-direction:row;gap:22px;align-items:center}
.gl-person img{width:150px;height:150px;border-radius:50%;object-fit:cover;display:block;flex-shrink:0}
.gl-person > div{display:flex;flex-direction:column;gap:6px}
.gl-person h3{font-size:22px}
.gl-schoolacc{margin-top:16px}
.gl-schools{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.gl-schools li{background:var(--soft);border-radius:16px;padding:14px 18px;display:flex;flex-direction:column;gap:2px}
.gl-schools b{font-size:15.5px;line-height:1.5}
.gl-schools i{font-style:normal;font-size:13px;font-weight:700;color:var(--navy)}
.gl-schools span{font-size:13.5px;color:var(--text);line-height:1.6}

/* ---------------------------------------------------------------- 詳しく */
/* 10の支援：PCは2列（左に01〜05、右に06〜10）。HTMLは01〜10の順なので、スマホではそのまま縦に並ぶ */
.gl-ten{list-style:none;margin:0;padding:4px 24px 24px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(5,auto);grid-auto-flow:column;column-gap:40px}
.gl-ten li{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line)}
.gl-ten .n{font-family:var(--en);font-weight:800;font-size:17px;color:var(--navy);width:26px;flex-shrink:0;line-height:1.7}
.gl-ten b{display:block;font-size:16px;line-height:1.6}
.gl-ten div span{display:block;font-size:14px;color:var(--muted);line-height:1.6}
.gl-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.gl-chips li{display:inline-flex;align-items:center;min-height:34px;padding:4px 14px;border-radius:17px;background:var(--navy-tint);font-size:14.5px;font-weight:500}
.gl-accb > .gl-warn{font-size:15px;color:var(--red-text);font-weight:700}
.gl-accb.gl-subsidy{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.gl-subsidy > div{background:var(--soft);border-radius:16px;padding:18px 20px;display:flex;flex-direction:column;gap:8px}
.gl-subsidy b{font-size:16.5px}
.gl-subsidy span{font-size:14.5px;color:var(--text);line-height:1.7}
.gl-subsidy .gl-note{grid-column:1 / -1}
.gl-accb > .gl-free{font-size:16px;font-weight:700;color:var(--navy)}
.gl-tblwrap{overflow-x:auto}
.gl-tbl{width:100%;border-collapse:collapse;font-size:15px;line-height:1.6;border-top:2px solid var(--navy)}
.gl-tbl th,.gl-tbl td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.gl-tbl th{background:var(--navy-tint);font-weight:700}
.gl-qa{padding:10px 0;border-bottom:1px solid var(--line)}
.gl-qa:last-child{border-bottom:0}
.gl .gl-qa h3{font-size:16px;color:var(--navy);line-height:1.6}
.gl-qa p{font-size:15px;color:var(--text);line-height:1.6}

/* ---------------------------------------------------------------- SNS・関連サイト */
.gl-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.gl-links a{display:flex;align-items:center;gap:14px;padding:16px 20px;border:2px solid var(--navy-line);border-radius:16px;text-decoration:none;color:var(--ink);background:#fff}
.gl-links a:hover{border-color:var(--navy)}
.gl .gl-links .gl-ico{width:36px;height:36px}
.gl-links span{display:flex;flex-direction:column;min-width:0}
.gl-links b{font-size:16px;color:var(--navy);line-height:1.5}
.gl-links small{font-size:13.5px;color:var(--muted);line-height:1.6}
/* Instagram の最新投稿（Smash Balloon）。枚数はショートコードでも指定しているが、念のためスマホは3件に切る */
.gl-igfeed{margin-top:16px}
.gl-igfeed #sb_instagram{padding:0 !important}
.gl-igfeed #sb_instagram .sbi_photo{border-radius:14px;overflow:hidden}

/* ---------------------------------------------------------------- 相談フォーム */
.gl-contact{padding-bottom:72px}
.gl-formbox{background:var(--navy-tint);border-radius:24px;padding:36px 40px;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:32px;align-items:start}
.gl-form{display:flex;flex-direction:column;gap:16px}
.gl-fhead{display:flex;flex-direction:column;gap:4px}
.gl-fhead h2{font-family:var(--head);font-size:28px;font-weight:700;margin:0}
.gl-fhead h2::before{display:none}
.gl-fhead p{font-size:15.5px;color:var(--text)}
.gl-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.gl-opt summary{display:flex;align-items:center;min-height:44px;cursor:pointer;list-style:none;font-size:15.5px;font-weight:700;color:var(--navy)}
.gl-opt summary::-webkit-details-marker{display:none}
.gl-opt summary:focus-visible{outline:3px solid var(--navy);outline-offset:2px;border-radius:6px}
.gl-opt[open] summary{margin-bottom:6px}
.gl-optb{display:flex;flex-direction:column;gap:14px}
.gl-fld{display:flex;flex-direction:column;gap:6px;border:0;margin:0;padding:0;min-width:0}
.gl-fld > label,.gl-fld > legend{font-size:15px;font-weight:700;padding:0}
.gl-fld > legend{margin-bottom:6px}
.gl-fld label small,.gl-req{font-size:12px;font-weight:700;color:#fff;background:var(--red-text);border-radius:4px;padding:1px 6px;margin-left:6px}
.gl-fld input,.gl-fld select,.gl-fld textarea{font-family:inherit;font-size:16px;min-height:48px;padding:10px 14px;border:2px solid var(--navy-line);border-radius:12px;background:#fff;color:var(--ink);box-sizing:border-box;width:100%}
.gl-fld textarea{min-height:110px;resize:vertical}
.gl-fld input:focus,.gl-fld select:focus,.gl-fld textarea:focus{outline:3px solid var(--navy);outline-offset:0;border-color:var(--navy)}
.gl-fld [aria-invalid="true"]{border-color:var(--red-text)}
.gl-rad{display:flex;gap:18px;flex-wrap:wrap;font-size:15.5px}
.gl-rad label{display:flex;align-items:center;gap:8px;min-height:44px;font-weight:500}
.gl-rad input{width:20px;height:20px;margin:0;accent-color:var(--navy)}
.gl-form .btn{border:0;font-family:inherit;cursor:pointer}
.gl-form .btn[disabled]{opacity:.6;cursor:wait}
.gl-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.gl-err{background:#fff;border:2px solid var(--red-text);border-radius:14px;padding:12px 16px;font-size:15px;font-weight:700;color:var(--red-text)}
.gl-done{background:#fff;border:2px solid var(--navy);border-radius:14px;padding:16px 20px;font-size:16px;font-weight:700;color:var(--navy)}
.gl-side{display:flex;flex-direction:column;gap:14px;padding-top:56px}
.gl-tel{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;align-items:center;padding:18px 20px;background:var(--navy);color:#fff;border-radius:18px;text-decoration:none;box-shadow:0 4px 0 var(--navy-deep)}
.gl-tel:hover{color:#fff;background:var(--navy-deep)}
.gl .gl-tel .gl-ico{width:40px;height:40px;stroke:#fff;grid-row:1 / span 3}
.gl-tel b{font-size:15px;color:#dde4f1}
.gl-tel .gl-num{font-size:30px;line-height:1.2;color:#fff}
.gl-tel small{font-size:13.5px;color:#dde4f1}

/* ---------------------------------------------------------------- スマホ・タブレット */
@media (max-width:900px){
  .gl-hero,.gl-partner,.gl-formbox,.gl-accb.gl-costb{grid-template-columns:minmax(0,1fr)}
  .gl-hero{gap:24px}
  .gl-reasons{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gl-rphoto{grid-template-columns:minmax(0,1fr)}
  .gl-links{grid-template-columns:minmax(0,1fr)}
  .gl-steps{grid-template-columns:minmax(0,1fr)}
  .gl-schools{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gl-ten{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-flow:row}
  .gl-accb.gl-subsidy{grid-template-columns:minmax(0,1fr)}
  .gl-side{padding-top:0}
  .gl-formbox{padding:28px 20px}
}
@media (max-width:600px){
  .gl-band .wrap{grid-template-columns:minmax(0,1fr)}
  .gl-band p{padding:16px 8px}
  .gl-band p + p{border-left:0;border-top:1px solid #2a4478}
  .gl-reasons,.gl-cost,.gl-schools,.gl-grid3{grid-template-columns:minmax(0,1fr)}
  .gl-rcard{min-height:0;flex-direction:row;flex-wrap:wrap;align-items:center;padding:16px 18px}
  .gl .gl-rcard .gl-ico{width:40px;height:40px}
  .gl-rcard > b{flex:1 1 0;min-width:0;font-size:17px}
  .gl-rcard .gl-more{margin-top:0;flex-basis:100%;padding-left:54px}
  .gl-rdetail{order:0;padding:18px 18px}
  .gl-price .gl-big{font-size:30px}
  .gl-igfeed #sb_instagram .sbi_item:nth-child(n+4){display:none !important}
  .gl-btns .btn{flex:1 1 100%}
  .gl-acc summary{padding:12px 16px;gap:12px}
  .gl-acc summary > b{font-size:16.5px}
  .gl-pts{padding:4px 16px 20px 16px}
  .gl-accb,.gl-ten{padding:4px 16px 20px}
  .gl-person{flex-direction:column;align-items:flex-start}
  .gl-person img{width:120px;height:120px}
  .gl-row{font-size:15px}
  .gl-tel .gl-num{font-size:26px}
}