@charset "utf-8";
/* =========================================================
   teppay モーダル（加盟店さま向けサービス / 注意事項）
   PCを基準、SP(<=780px)で縦積みに上書き
   ========================================================= */

/* ---- オーバーレイ ---- */
.modal{position:fixed;inset:0;z-index:1000;display:none;}
.modal.is-open{display:flex;align-items:center;justify-content:center;padding:24px;}
.modal__scrim{
	position:absolute;inset:0;background:rgba(16,38,38,.45);
	-webkit-backdrop-filter:saturate(120%) blur(1px);backdrop-filter:saturate(120%) blur(1px);
}
.modal__card{
	position:relative;z-index:1;
	width:92%;max-width:880px;
	max-height:90vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
	background:#fff;border-radius:28px;
	padding:48px 56px 40px;box-sizing:border-box;
	box-shadow:0 18px 50px rgba(0,0,0,.18);
	animation:modalpop .26s ease;
}
@keyframes modalpop{from{opacity:0;transform:translateY(12px) scale(.99);}to{opacity:1;transform:none;}}
body.is-modal-open{overflow:hidden;}

/* ---- 見出し ---- */
.modal__ttl{margin:0 0 30px;color:#1ab4ae;font-weight:bold;text-align:center;font-size:34px;line-height:1.45;letter-spacing:.5px;}
.modal__ttl--left{text-align:left;font-size:26px;line-height:1.5;margin-bottom:16px;}
.modal__hr{border:0;border-top:1px solid #cfd6d8;margin:0 0 20px;}
.modal__label{margin:0 0 16px;text-align:center;color:#2f3b4a;font-size:18px;font-weight:500;}

/* ---- ボタン共通 ---- */
.mbtn{
	display:flex;align-items:center;justify-content:space-between;gap:12px;
	width:100%;box-sizing:border-box;padding:18px 24px;border-radius:14px;
	font-family:inherit;font-size:17px;font-weight:bold;line-height:1.35;
	text-decoration:none;text-align:left;cursor:pointer;
	transition:opacity .2s,background-color .2s,color .2s;
}
.mbtn:hover{opacity:.85;}
.mbtn__ico{flex:none;width:24px;height:24px;display:flex;align-items:center;justify-content:center;}
.mbtn__ico svg{width:100%;height:100%;display:block;}
.mbtn--dl{background:#fff;color:#1ab4ae;border:2px solid #1ab4ae;}
.mbtn--fill{background:#1ab4ae;color:#fff;border:2px solid #1ab4ae;}
.mbtn--close{background:#ececec;color:#2f3b4a;border:2px solid #ececec;}
.mbtn--ghost{background:#fff;color:#2f3b4a;border:2px solid #e0e3e6;}

/* ---- サービスモーダル：2カラム（PC） ---- */
.modal__cols{display:flex;justify-content:center;gap:40px;align-items:flex-start;}
.modal__col{flex:1 1 0;min-width:0;max-width:368px;}
.modal__list{display:flex;flex-direction:column;gap:14px;}
.mbtn--close{max-width:368px;margin:34px auto 0;}

/* ---- 注意事項モーダル ---- */
.modal__body{color:#2f3b4a;font-size:16px;line-height:1.95;}
.modal__body p{margin:0 0 1.1em;}
.modal__body p:last-child{margin-bottom:0;}
.modal__actions{display:flex;flex-direction:row-reverse;justify-content:center;gap:20px;margin-top:30px;}
.modal__actions .mbtn{flex:none;width:auto;justify-content:center;position:relative;min-width:280px;padding:20px 28px;font-size:18px;}
.modal__actions .mbtn--ghost{min-width:210px;}
.modal__actions .mbtn .mbtn__ico{position:absolute;right:22px;width:20px;height:20px;}

/* =========================================================
   SP (<=780px)：縦積みに上書き
   ========================================================= */
@media screen and (max-width:780px){
	.modal.is-open{padding:16px 0;}
	.modal__card{width:90%;max-width:460px;border-radius:24px;padding:34px 20px 26px;}
	.modal__ttl{font-size:6.6vw;margin-bottom:5vw;}
	.modal__ttl--left{font-size:5.4vw;}
	.modal__label{font-size:4.4vw;}
	.mbtn{padding:4.4vw 5vw;font-size:4.2vw;border-radius:12px;}
	.mbtn__ico{width:6vw;height:6vw;}

	/* サービス：縦積み */
	.modal__cols{display:block;}
	.modal__col{max-width:none;}
	.modal__col + .modal__col{margin-top:5vw;}
	.mbtn--close{max-width:none;margin:4vw 0 0;}

	/* 注意事項：縦積み（申込みに進む→戻る） */
	.modal__body{font-size:3.8vw;}
	.modal__actions{flex-direction:column;gap:14px;margin-top:6vw;}
	.modal__actions .mbtn{min-width:0;width:100%;font-size:4.6vw;padding:4.8vw 5vw;}
	.modal__actions .mbtn--ghost{min-width:0;}
	.modal__actions .mbtn .mbtn__ico{width:5vw;height:5vw;right:5vw;}
}