@charset "utf-8";
/* =============================================================
 高校留学プログラム 2026 リニューアル用スタイル（.hs26 名前空間）
 使用ページ:
   /support/high-school   … MTページ site37 / 14340
   /high-school/program   … MTページ site54 / 13823
 両ページとも MT の page-header カスタムフィールドから <link> で読み込む。
 （/high-school/program は support.css を読み込まないため共通ファイルとして分離）
============================================================= */
.hs26,.hs26 *{box-sizing:border-box;}
.hs26{color:#484848;}
.hs26 p{line-height:1.7;}
.hs26_sec{margin: 0 2% 30px;}
.hs26_doc .hs26_sec{margin-left:0;margin-right:0;}
.hs26_h2{margin:0 0 14px;padding: 10px 0;color: #0075b5;border-radius:4px;font-size: 18px;font-weight:bold;line-height:1.4;text-align: center;}
.hs26_h3{margin:0 0 8px;color:#0075b5;font-size:16px;font-weight:bold;line-height:1.5;}
.hs26_note{margin:10px 0 0;font-size:12px;color:#666;line-height:1.7;}

/* メインメッセージ */
.hs26_lead{border:3px solid #0075b5;border-radius:4px;background:#fffce7;padding:16px 14px;}
.hs26_lead p.hs26_lead_ttl{margin:0 0 10px;color:#0075b5;font-size: 18px;font-weight:bold;line-height:1.4;text-align:center;}
.hs26_lead p{margin:0 0 8px;font-size:14px;}
.hs26_lead p:last-child{margin-bottom:0;}

/* 料金発生タイミング（3ステップ） */
.hs26_steps{display:flex;flex-direction:column;gap:12px;}
.hs26_step{border:2px solid #cfd8dc;border-radius:6px;background:#fff;padding:14px;}
.hs26_step.is_paid{border-color:#e5006a;background:#fff7fa;}
.hs26_step_no{display:inline-block;margin:0 6px 6px 0;font-size:12px;font-weight:bold;color:#0075b5;letter-spacing:.08em;vertical-align:middle;}
.hs26_step.is_paid .hs26_step_no{color:#e5006a;}
.hs26_step_ttl{margin:2px 0 10px;font-size:16px;font-weight:bold;line-height:1.4;}
.hs26_step ul{margin:0;padding:0;list-style:none;}
.hs26_step li{position:relative;padding:0 0 0 14px;margin:0 0 4px;font-size: 14px;line-height:1.6;}
.hs26_step li:before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:#0075b5;}
.hs26_step.is_paid li:before{background:#e5006a;}
.hs26_step_note{margin:10px 0 0;font-size:12px;color:#666;line-height:1.6;}

/* バッジ */
.hs26_tag{display:inline-block;margin:0 0 0 4px;padding:2px 7px;border-radius:3px;font-size:11px;font-weight:bold;line-height:1.6;vertical-align:middle;white-space:nowrap;}
.hs26_tag_free{background:#3ca51e;color:#fff;}
.hs26_tag_paid{background:#e5006a;color:#fff;}
.hs26_tag_option{background:#e5ab18;color:#fff;}
.hs26_tag_want{background:#fff;color:#0075b5;border:1px solid #0075b5;}
.hs26_tag_plan{background:#fff;color:#e5006a;border:1px solid #e5006a;}

/* 料金カード */
.hs26_plans{display:flex;flex-direction:column;gap:14px;}
.hs26_plan{border:3px solid #0075b5;border-radius:6px;background:#fff;overflow:hidden;display:flex;flex-direction:column;}
.hs26_plan_head{background:#0075b5;color:#fff;padding:10px 12px;text-align:center;}
.hs26_plan_label{display:block;font-size:12px;font-weight:bold;}
.hs26_plan_name{display:block;font-size:17px;font-weight:bold;line-height:1.4;}
.hs26_plan_price{background:#fffce7;text-align:center;padding:16px 10px;border-bottom:1px dashed #ccc;}
.hs26_plan_price .num{font-size:30px;font-weight:bold;color:#000;line-height:1.1;}
.hs26_plan_price .tax{font-size:13px;font-weight:normal;margin-left:4px;}
.hs26_plan_cond{display:block;margin:8px 0 0;font-size:13px;font-weight:bold;color:#0075b5;line-height:1.5;}
.hs26_plan_body{padding:14px 12px;font-size:13px;flex:1 1 auto;}
.hs26_plan_body p{margin:0 0 8px;font-size:13px;}
.hs26_plan_body p:last-child{margin-bottom:0;}

/* 料金表示上の重要事項 */
.hs26_pricenote{margin:14px 0 0;border:1px solid #e5006a;border-radius:4px;background:#fff7fa;padding:12px 14px;font-size:13px;}
.hs26_pricenote p{margin:0;font-size:13px;font-weight:bold;color:#e5006a;}
.hs26_pricenote ul{margin:6px 0 0;padding:0;list-style:none;}
.hs26_pricenote li{position:relative;padding:0 0 0 14px;margin:0 0 4px;font-size:13px;line-height:1.6;}
.hs26_pricenote li:before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:#e5006a;}

/* 表 */
.hs26_tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.hs26_table{width:100%;min-width:300px;border-collapse:collapse;background:#fff;font-size:14px;}
.hs26_table th,.hs26_table td{border:1px solid #ccc;padding:10px 12px;text-align:left;line-height:1.5;}
.hs26_table thead th{background:#0075b5;color:#fff;font-weight:bold;}
.hs26_table tbody th{background:#f3f8fb;width:45%;font-weight:bold;}

/* 支払い方法 */
.hs26_pays{display:flex;flex-direction:column;gap:12px;}
.hs26_pay{border:2px solid #0075b5;border-radius:6px;background:#fff;padding:14px;}
.hs26_pay_ttl{margin: 0 0 8px !important;color:#0075b5;font-size: 15px !important;font-weight:bold;line-height: 1.4;}
.hs26_pay p{margin:0;font-size:13px;}

/* カード（概要・オプション） */
.hs26_cards{display:flex;flex-direction:column;gap:12px;}
.hs26_card{border:1px solid #cfd8dc;border-left:4px solid #0075b5;border-radius:4px;background:#fff;padding:14px;}
.hs26_card.is_option{border-left-color:#e5ab18;}
.hs26_card_ttl {
    margin: 0 0 6px !important;
    font-size: 15px !important;
    font-weight: bold;
    color: #0075b5;
    line-height: 1.5;
}
.hs26_card.is_option .hs26_card_ttl{color:#b98600;}
.hs26_card p{margin:0;font-size:13px;}

/* FAQ */
.hs26_faq{border-top:1px solid #ddd;}
.hs26_faq details{border-bottom:1px solid #ddd;background:#fff;}
.hs26_faq summary{position:relative;display:block;list-style:none;cursor:pointer;padding:14px 40px 14px 36px;font-size:14px;font-weight:bold;line-height:1.5;}
.hs26_faq summary::-webkit-details-marker{display:none;}
.hs26_faq summary:before{content:"Q";position:absolute;left:8px;top:13px;width:20px;height:20px;border-radius:50%;background:#0075b5;color:#fff;font-size:12px;font-weight:bold;text-align:center;line-height:20px;}
.hs26_faq summary:after{content:"";position:absolute;right:16px;top:19px;width:8px;height:8px;border-right:2px solid #0075b5;border-bottom:2px solid #0075b5;transform:rotate(45deg);}
.hs26_faq details[open] summary:after{top:23px;transform:rotate(-135deg);}
.hs26_faq_a{position:relative;margin:0;padding: 16px 14px 16px 36px;font-size:14px;background:#f7fafc;}
.hs26_faq_a:before{content:"A";position:absolute;left:8px;top: 16px;width:20px;height:20px;border-radius:50%;background:#e5006a;color:#fff;font-size:12px;font-weight:bold;text-align:center;line-height:20px;}

/* CTA（ヘッダー「留学相談」ボタンと同デザイン） */
.hs26_cta{border:3px solid #FF8B03;border-radius:6px;background:#fff8ee;padding:18px 14px;text-align:center;}
.hs26_cta_ttl{margin:0 0 10px !important;font-size:18px !important;font-weight:bold;color:#484848;line-height:1.4;}
.hs26_cta p{margin:0 0 14px;font-size:14px;text-align:left;}
.hs26 a.hs26_btn,.hs26 a.hs26_btn:link,.hs26 a.hs26_btn:visited,.hs26 a.hs26_btn:hover,.hs26 a.hs26_btn:active{display:inline-block;position:relative;max-width:100%;padding:16px 22px;border:1px solid #EB7F00;border-radius:4px;background:#FF8B03;box-shadow:0 3px 0 #d77602;color:#fff !important;font-size:17px;font-weight:bold;line-height:1.3;text-decoration:none !important;}
.hs26 a.hs26_btn:hover{border:1px solid #ff8b03;box-shadow:0 3px 0 #ff8b03;top:1px;}
.hs26_btn_free{display:inline-block;margin:-3px 0 0 8px;padding:3px 6px;border-radius:2px;background:#fff;color:#FF8B03;font-size:14px;line-height:1;vertical-align:middle;}
.hs26_cta_sub{margin: 12px 0 0 !important;font-size:13px;color:#666;text-align:center;}

/* 注意事項 */
.hs26_notes_ttl{margin:0 0 8px;font-size:15px;font-weight:bold;color:#484848;}
.hs26_notes ol{counter-reset:hs26note;margin:0;padding:0;list-style:none;font-size:13px;}
.hs26_notes li{position:relative;margin:0 0 6px;padding:0 0 0 2.4em;line-height:1.7;list-style:none;}
.hs26_notes li:before{counter-increment:hs26note;content:"*" counter(hs26note);position:absolute;left:0;top:0;color:#0075b5;font-weight:bold;}
.hs26_notes li:last-child{margin-bottom:0;}

/* アンカーリンク時に見出しがヘッダーへ隠れないように */
.hs26_doc h5[id]{scroll-margin-top:90px;}

/* 「成功する留学」の高校留学サポートの特徴 の見出し */
.hs26 h3.doc_h2_blue{background-color:#0075b5;border-color:#0075b5;padding:5px;}

/* サポート内容の詳細（flowデザイン）内のカードは画像の回り込みを解除 */
.flow_detail_box .hs26_sec{clear:both;}

/* サポート項目一覧内のバッジ位置調整 */
.support_program_box li a .hs26_tag{margin-left:4px;}

@media print, screen and (min-width:768px){
  .hs26_sec {
        margin: 0 0 60px;
    }
  .hs26_h2{font-size: 26px;padding:12px 18px;}
  .hs26_lead{padding:24px;}
  .hs26_lead p.hs26_lead_ttl{font-size:26px;}
  .hs26_steps{flex-direction:row;align-items:stretch;}
  .hs26_step{flex:1 1 0;}
  .hs26_plans{flex-direction:row;align-items:stretch;margin-bottom: 20px;}
  .hs26_plan{flex:1 1 0;}
  .hs26_plan_price .num{font-size:38px;}
  .hs26_pays{flex-direction:row;align-items:stretch;}
  .hs26_pay{flex:1 1 0;}
  .hs26_cards{flex-direction:row;flex-wrap:wrap;}
  .hs26_cards .hs26_card{width:calc((100% - 24px)/3);}
  .hs26_cards.col2 .hs26_card{width:calc((100% - 12px)/2);}
  .hs26_cta{padding:26px;}
  .hs26_cta_ttl{font-size: 22px !important;}
  .hs26_cta p{text-align:center;}
  .hs26 a.hs26_btn,.hs26 a.hs26_btn:link,.hs26 a.hs26_btn:visited,.hs26 a.hs26_btn:hover,.hs26 a.hs26_btn:active{font-size: 22px;}
  .hs26_btn_free{font-size:17px;}
}