/* PH 語学学校 見積もり窓 共通ファイル v202611115（生成元: _work/ph_quote。直接編集しない） */
/* PH 見積もり窓（サイトの配色に合わせる：紺 #1f3e9b / 枠・ヘッダー #0075c2 / アクセント #0075c2 / CTA #ff8b03（.link_btn と同じ）） */
.phq{box-sizing:border-box;border:2px solid #0075c2;border-radius:6px;background:#fff;font-size:14px;line-height:1.6;color:#333;}
.phq *{box-sizing:border-box;}
.phq-head{background:#0075c2;color:#fff;padding:10px 14px;}
.phq-title{margin:0;font-size:16px;font-weight:bold;}
.phq-school{margin:2px 0 0;font-size:12px;opacity:.9;}
.phq-body{padding:12px 14px 14px;}
.phq-field{display:block;margin:0 0 10px;}
.phq-field span{display:block;font-size:12px;font-weight:bold;color:#1f3e9b;margin-bottom:3px;}
.phq-field select{width:100%;padding:7px 28px 7px 8px;border:1px solid #bbb;border-radius:4px;font-size:14px;color:#333;cursor:pointer;-webkit-appearance:none;appearance:none;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230075c2' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 10px center;}
.phq-field select:focus{outline:2px solid #0075c2;outline-offset:1px;}
.phq-row{display:flex;gap:8px;}
.phq-row .phq-field{flex:1;min-width:0;}
.phq-hint{margin:-6px 0 10px;font-size:11px;color:#777;}
.phq-result{border-top:1px dashed #ccc;margin-top:4px;padding-top:10px;}
.phq-period{margin:0 0 6px;font-size:13px;font-weight:bold;}
.phq-lines{width:100%;border-collapse:collapse;font-size:13px;}
.phq-lines th{font-weight:normal;text-align:left;padding:4px 6px 4px 0;vertical-align:top;}
.phq-lines td{text-align:right;white-space:nowrap;padding:4px 0;vertical-align:top;}
.phq-lines small{display:inline-block;margin-left:4px;padding:0 4px;border-radius:3px;background:#fff3cd;color:#8a6d00;font-size:10px;}
.phq-lines tr+tr th,.phq-lines tr+tr td{border-top:1px solid #f0f0f0;}
.phq-discount th,.phq-discount td{color:#d0393e;}
.phq-surcharge th,.phq-surcharge td{color:#8a6d00;}
.phq-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:8px;padding:8px 10px;background:#eef6fc;border-radius:4px;}
.phq-total span{font-size:13px;font-weight:bold;color:#1f3e9b;}
.phq-total strong{font-size:22px;color:#1f3e9b;}
.phq-jpy{margin:4px 0 0;text-align:right;font-size:13px;font-weight:bold;}
.phq-local{margin-top:10px;padding:8px 10px;border:1px solid #e3e3e3;border-radius:4px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;}
.phq-local span{font-size:12px;font-weight:bold;}
.phq-local strong{font-size:15px;}
.phq-local small{flex-basis:100%;font-size:11px;color:#777;margin-top:2px;}
.phq-warn{margin:10px 0 0;padding:8px 10px 8px 26px;background:#fffaf0;border-radius:4px;font-size:12px;color:#7a5a00;}
.phq-warn li{margin:2px 0;list-style:disc;}
.phq-fine{margin:8px 0 0;font-size:11px;color:#888;}
.phq-err{margin:0;padding:10px;background:#fdecec;color:#b02a2f;border-radius:4px;font-size:13px;}
.phq-actions{margin-top:12px;position:relative;}
/* ボタン上のラベル（ボタンの上辺にまたがる。矢印なし） */
.phq-balloon i{margin-right:2px;font-size:13px;}   /* Font Awesome 5（サイト共通で読み込み済み）の電球 */
.phq-balloon{position:relative;z-index:2;display:table;margin:0 auto -13px;padding:3px 14px;border:2px solid #ff8b03;border-radius:20px;background:#fff;color:#f77b21;font-size:12px;font-weight:bold;line-height:1.5;white-space:nowrap;}
/* ボタンはサイト共通の .link_btn a（common.css）に合わせる：#ff8b03・下影 3px・角丸 4px、hover で 1px 沈む */
.phq-btn{display:block;width:100%;margin:0 0 8px;padding:18px 14px;border:0;border-radius:4px;font-size:15px;font-weight:bold;cursor:pointer;line-height:1.4;position:relative;text-align:center;}
.phq-btn-req{background:#ff8b03;color:#fff;box-shadow:0 3px 0 #d77602;}
.phq-btn-req:hover{box-shadow:0 3px 0 #ff8b03;top:1px;}
.phq-note{margin:2px 0 0;font-size:11px;color:#777;}
/* 入学日カレンダー */
.phq-datefield{position:relative;}
.phq-date{display:block;width:100%;padding:7px 28px 7px 8px;border:1px solid #bbb;border-radius:4px;font-size:14px;color:#333;text-align:left;cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Crect x='1' y='2.5' width='12' height='10.5' rx='1.5' fill='none' stroke='%230075c2' stroke-width='1.5'/%3E%3Cpath d='M1 6h12M4 1v3M10 1v3' stroke='%230075c2' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 8px center;}
.phq-date:focus{outline:2px solid #0075c2;outline-offset:1px;}
.phq-cal{position:absolute;left:0;right:0;top:100%;z-index:20;margin-top:4px;padding:8px;background:#fff;border:1px solid #0075c2;border-radius:6px;box-shadow:0 4px 14px rgba(0,0,0,.18);}
.phq-cal[hidden]{display:none;}
.phq-cal-head span{margin:0;font-size:14px;}
.phq-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;font-weight:bold;color:#1f3e9b;}
.phq-cal-nav{width:32px;height:32px;border:0;border-radius:4px;background:#eef6fc;color:#1f3e9b;font-size:18px;line-height:1;cursor:pointer;}
.phq-cal-nav:disabled{opacity:.3;cursor:default;}
.phq-cal-grid{width:100%;border-collapse:collapse;table-layout:fixed;text-align:center;font-size:13px;}
.phq-cal-grid th{padding:2px 0;font-weight:normal;font-size:11px;color:#777;}
.phq-cal-grid th:first-child{color:#d0393e;}
.phq-cal-grid td{padding:2px;}
.phq-cal-grid td span{display:block;margin:0;padding:5px 0;font-size:13px;font-weight:normal;color:#c8c8c8;}
.phq-cal-grid td button{display:block;width:100%;padding:5px 0;border:1px solid #0075c2;border-radius:4px;background:#fff;color:#1f3e9b;font-weight:bold;font-size:13px;cursor:pointer;}
.phq-cal-grid td button:hover{background:#eef6fc;}
.phq-cal-grid td button.is-on{background:#0075c2;color:#fff;}

/* 学校ページ：左メニューを外し、右に見積もり窓（試作） */
@media screen and (min-width:890px){
  body.phq-on #left-navi_country{display:none;}
  body.phq-on #layout_com{width:1200px;display:flex;align-items:flex-start;}
  body.phq-on #layout_com::before,body.phq-on #layout_com::after{display:none;}
  body.phq-on #layout_com > #main{float:none;flex:0 0 780px;}
  body.phq-on .phq-aside{flex:0 0 376px;margin-left:auto;margin-bottom:60px;position:sticky;top:84px;max-height:calc(100vh - 96px);overflow:auto;}
  /* ヘッダー・パンくず・フッターも本文と同じ 1200px に */
  body.phq-on .top_header_link,body.phq-on .header_wrap,body.phq-on .st_navigation,body.phq-on .st_navi_hoverList ul,body.phq-on .st_navi_schoolList .st_navi_head,body.phq-on .header_bnr_area_pc,body.phq-on #Breadcrumb,body.phq-on .st_footer_wrap,body.phq-on .st_footer_company > div{width:1200px;}
  body.phq-on header.st_headerArea.fixed{box-sizing:border-box;} /* 固定ヘッダーが左右paddingの分10pxずれるのを直す */
  body.phq-on .phq-inline,body.phq-on .phq-bar{display:none;}
}
@media screen and (max-width:889px){
  body.phq-on .phq-aside{display:none;}
  body.phq-on .phq-inline{margin:20px 0 30px;}
  /* 下部の固定バー（airbnb 風）：左に金額・期間・入学日、右に白抜きボタン。サイト共通の下部ボタン（#floating_Btn）の上に出す */
  body.phq-on .phq-bar{position:fixed;left:0;right:0;bottom:0;z-index:998;display:flex;align-items:center;justify-content:space-between;gap:12px;box-sizing:border-box;padding:10px 16px;background:#eef6fc;border-top:1px solid #d9e8f3;box-shadow:0 -2px 8px rgba(0,0,0,.08);transition:opacity .2s,visibility .2s;}
  body.phq-on .phq-bar.is-hidden{opacity:0;visibility:hidden;pointer-events:none;}
  body.phq-on .phq-bar-price{flex:1 1 auto;min-width:0;margin:0;color:#222;line-height:1.3;}
  body.phq-on .phq-bar-price strong{display:block;font-size:21px;font-weight:bold;letter-spacing:.02em;text-decoration:underline;text-underline-offset:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  body.phq-on .phq-bar-price span{display:block;margin-top:2px;font-size:12px;color:#555;white-space:nowrap;}
  body.phq-on .phq-bar-btn{flex:0 0 auto;margin:0;padding:12px 16px;border:2px solid #0075c2;border-radius:30px;background:#fff;color:#0075c2 !important;text-align:center;font-weight:bold;font-size:14px;font-family:inherit;line-height:1.3;text-decoration:none !important;cursor:pointer;-webkit-appearance:none;}
  body.phq-on .phq-bar-btn:active{background:#eaf4fb;}
  /* 見積もり窓ページでは「ページトップへ」ボタンを出さない（下部バーと重なるため） */
  body.phq-on #floating_Btn .pagetopBtn{display:none !important;}
}
.phq-msg{margin:8px 0 0;padding:8px 10px;background:#eef6fc;border-radius:4px;font-size:12px;color:#1f3e9b;}
#phq-sim{scroll-margin-top:80px;}
/* 下部ボタン → モーダル（airbnb 風）。タブレットは中央のダイアログ、スマホ（640px以下）は全画面 */
.phq-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100000;display:none;}
.phq-modal.is-open{display:block;}
.phq-modal-bg{position:absolute;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.5);}
.phq-modal-panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;width:calc(100% - 32px);max-width:480px;max-height:calc(100% - 48px);overflow:hidden;border-radius:12px;background:#fff;box-shadow:0 10px 40px rgba(0,0,0,.3);}
.phq-modal-scroll{flex:1 1 auto;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;}
.phq-modal-panel .phq{border:0;border-radius:0;}
.phq-modal-panel .phq-head{padding-right:52px;}
.phq-modal-close{position:absolute;top:8px;right:8px;z-index:3;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.22);color:#fff;font-size:26px;line-height:36px;text-align:center;cursor:pointer;}
.phq-modal-close:hover{background:rgba(255,255,255,.35);}
/* 送信ボタンは下に固定（スクロールしても見える） */
.phq-modal-panel .phq-actions{position:sticky;bottom:0;margin:12px -14px 0;padding:14px 14px 10px;padding-bottom:calc(10px + env(safe-area-inset-bottom));background:#fff;box-shadow:0 -8px 12px -6px rgba(0,0,0,.12);}
body.phq-modal-open{overflow:hidden;}
@media screen and (max-width:640px){
  .phq-modal-panel{left:0;top:0;transform:none;width:100%;max-width:none;height:100%;max-height:none;border-radius:0;}
}
/* 送信ボタン → /counsel/quote.php をモーダル内の iframe で開く（embed=1 でヘッダー無しの表示）。見積もり窓のモーダルより手前 */
.phq-modal--form{z-index:100001;}
.phq-modal--form .phq-modal-panel{max-width:720px;height:calc(100% - 48px);}
.phq-modal--form .phq-modal-head{flex:0 0 auto;margin:0;padding:12px 52px 12px 16px;background:#0075c2;color:#fff;font-size:16px;font-weight:bold;line-height:1.4;}
.phq-modal--form iframe{flex:1 1 auto;display:block;width:100%;min-height:0;border:0;background:#fff;}
body.phq-form-open{overflow:hidden;}
@media screen and (max-width:640px){
  .phq-modal--form .phq-modal-panel{height:100%;}
}