body{margin:0;background:#f5f7f7}
.experience{min-height:auto}
.ex-study-main{max-width:720px;margin:0 auto;padding:16px}
.ex-reading{border:0 !important;box-shadow:none !important;background:transparent !important;padding:0 !important}
.gl-section{border:0 !important;box-shadow:none !important;padding:22px 0 !important;margin:0 !important}
h1{font-size:26px;line-height:1.4;margin:8px 0}
h2{font-size:20px;margin:0 0 10px}
.gl-body{font-size:16px;line-height:1.9}
.lead{font-size:15px;color:#4d6a6e;line-height:1.8}
.pre{font-size:14px;color:#4d6a6e;border-top:1px solid #dfe5e5;border-bottom:1px solid #dfe5e5;padding:8px 0;margin:10px 0 0}
.scene{border-left:3px solid #173d44;padding:2px 0 2px 12px;margin:14px 0;font-size:16px;line-height:1.8}
.scene b{display:block}
.sample{border-top:1px solid #cfd8d8;border-bottom:1px solid #cfd8d8;padding:12px 0;font-size:16px;line-height:1.9;margin:8px 0;white-space:pre-line}
.mail{background:#fff;padding:12px 14px;font-size:15px;line-height:1.8;white-space:pre-line;margin:8px 0}
.mail small{display:block;color:#4d6a6e;margin-bottom:4px}
.ex-speaker{width:56px;flex:0 0 56px;margin:0}
.ex-speaker figcaption{text-align:center;font-size:11px;margin-top:3px}
.ex-portrait img{width:100%;display:block}
.ex-speech-bubble{flex:1;border:0 !important;box-shadow:none !important}
.ex-speech-bubble::before,.ex-speech-bubble::after{display:none !important}
.fl-spoken p{font-size:16px;line-height:1.8;margin:0}
.quality-table{background:transparent !important;border:0 !important;padding:0 !important;margin:10px 0 !important}
.quality-table table{width:100%;border-collapse:collapse;font-size:15px}
.quality-table th,.quality-table td{border:0;border-bottom:1px solid #dfe5e5;padding:8px 6px;text-align:left;vertical-align:top}
.quality-table thead th{border-bottom:2px solid #173d44}
.meaning{font-size:15px;margin:8px 0 0;padding-left:1.2em;line-height:1.8}
.meaning li{margin:3px 0}
.practice-link{border:0 !important;box-shadow:none !important;background:#eef4f3;padding:14px;margin:10px 0}
.practice-link h3{margin:0 0 8px;font-size:15px}
.practice-prompt{white-space:pre-line;font-size:15px;line-height:1.8;background:#fff;padding:10px 12px;margin:0 0 10px}
.practice-link-actions{display:flex;gap:8px;flex-wrap:wrap}
.ex-button{font-size:15px;padding:10px 14px}
.compare{display:grid;gap:10px;margin:10px 0}
.compare div{padding:10px 12px;background:#fff;font-size:15px;line-height:1.8}
.compare .ng{border-left:3px solid #b3261e}
.compare .ok{border-left:3px solid #2e7d32}
.compare small{display:block;color:#4d6a6e;font-size:12px}
del{color:#b3261e}
.gl-draft textarea{width:100%;box-sizing:border-box;font-size:15px;padding:10px;border:1px solid #cfd8d8;margin-top:6px}
.gl-checks{border:0;padding:0;margin:12px 0}
.gl-checks legend{font-size:15px;font-weight:700;padding:0;margin-bottom:6px}
.gl-checks label{display:flex;gap:8px;align-items:flex-start;font-size:15px;line-height:1.7;margin:6px 0}
.ex-choice{display:block;width:100%;text-align:left;margin:6px 0;padding:10px 12px;border:1px solid #cfd8d8;background:#fff;border-radius:2px;font-size:15px;line-height:1.7}
.ending{font-size:15px;color:#4d6a6e;margin-top:8px}
@media(max-width:600px){.ex-study-main{padding:12px 16px}h1{font-size:23px}}

  .practice-link{background:transparent !important;padding:0 !important;margin:10px 0 !important;border:0 !important;box-shadow:none !important}
  .practice-link h3{margin:0 0 8px;padding:0;font-size:16px}
  .practice-prompt{background:#eef4f3;border:0 !important;border-left:0 !important;padding:12px 14px;margin:0 0 10px}
  .practice-link-actions{padding:0}

/* 10/13 志水：「やること：」のような文中ラベルはNG。札付きの囲いとモックUIでメリハリを出す */
.box{position:relative;border:2px solid #173d44;border-radius:4px;padding:14px 14px 10px;margin:22px 0 14px;background:#fff}
.box>.tag{position:absolute;top:-13px;left:12px;background:#173d44;color:#fff;font-size:12px;font-weight:700;padding:3px 10px;border-radius:3px;letter-spacing:.04em}
.box.todo{border-color:#2e7d6b}.box.todo>.tag{background:#2e7d6b}
.box.check{border-color:#b8860b}.box.check>.tag{background:#b8860b}
.box.quiz{border-color:#6b5b95}.box.quiz>.tag{background:#6b5b95}
.box.take{border-color:#173d44;background:#eef4f3}
.box p,.box li{font-size:15px;line-height:1.8;margin:4px 0}
.box ul{margin:4px 0 0;padding-left:1.2em}
.box .gl-checks{margin:4px 0 0}.box .gl-checks legend{display:none}
.box .ex-choice{margin:8px 0}
/* ChatGPTの入力画面のモック */
.chat-ui{border:1px solid #d9dede;border-radius:14px;background:#fff;margin:12px 0;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.chat-ui .chat-top{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid #eceff0;font-size:12px;color:#555}
.chat-ui .chat-top i{width:18px;height:18px;border-radius:50%;background:#10a37f;display:inline-block}
.chat-ui .chat-body{padding:12px 14px;font-size:15px;line-height:1.8;white-space:pre-line}
.chat-ui .chat-attach{margin:10px 0 0}
.chat-ui .chat-bottom{display:flex;justify-content:space-between;align-items:center;padding:8px 12px 10px;gap:8px}
.chat-ui .chat-bottom .send{width:34px;height:34px;border-radius:50%;background:#111;color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;flex:0 0 34px}
.chat-ui .ex-button{font-size:14px;padding:8px 12px}
/* メール画面のモック */
.mail-ui{border:1px solid #e3e6e6;border-radius:8px;background:#fafbfb;font-size:14px;line-height:1.75}
.mail-ui .mail-head{padding:8px 12px;border-bottom:1px solid #e3e6e6;color:#555;font-size:12px}
.mail-ui .mail-head b{display:block;color:#222;font-size:14px;margin-top:2px}
.mail-ui .mail-text{padding:10px 12px;white-space:pre-line}
/* メモ帳のモック */
.memo-ui{background:#fff9db;border:1px solid #eadf9a;border-radius:8px;padding:10px 12px 10px 14px;font-size:15px;line-height:2;white-space:pre-line;background-image:repeating-linear-gradient(transparent 0 29px,#efe6b0 29px 30px)}
.memo-ui .memo-head{font-size:12px;color:#8a7a2a;margin-bottom:2px}
.compare div{border:1px solid #e3e6e6;border-radius:6px}

.ex-choice.chosen.right{border-color:#2e7d32;background:#eef7ee}
.ex-choice.chosen.wrong{border-color:#b3261e;background:#fbeeee}
.quiz-fb{display:none;margin-top:10px;padding:10px 12px;background:#f5f7f7;font-size:15px;line-height:1.8}
