@charset "utf-8";
/*
modal Style

	Common Set
	Etc Style

※ベースは/static/css/modal.cssに記載

*/

@media (min-width: 767px) and (max-width:992px) {
    .container{
        width:720px;
    }
    .col-md-4 {
        -ms-flex: 0 0 33.2%;
        flex: 0 0 33.2;
        max-width: 33.2%;
    }
    .col-md-6 {
        -ms-flex: 0 0 49.8%;
        flex: 0 0 49.8%;
        max-width: 49.8%;
    }
}
@media screen and (max-width: 767px) {
    /* モーダルのbootstrapのバージョンが異なるため調整 */
    #megrip-content .btn-group-vertical>.btn-group:after,
    #megrip-content .btn-group-vertical>.btn-group:before,
    #megrip-content .btn-toolbar:after,
    #megrip-content .btn-toolbar:before,
    #megrip-content .clearfix:after,
    #megrip-content .clearfix:before,
    #megrip-content .container-fluid:after,
    #megrip-content .container-fluid:before,
    #megrip-content .container:after, 
    #megrip-content .container:before,
    #megrip-content .dl-horizontal dd:after, 
    #megrip-content .dl-horizontal dd:before, 
    #megrip-content .form-horizontal .form-group:after, 
    #megrip-content .form-horizontal .form-group:before, 
    #megrip-content .modal-footer:after, 
    #megrip-content .modal-footer:before, 
    #megrip-content .modal-header:after, 
    #megrip-content .modal-header:before, 
    #megrip-content .nav:after, 
    #megrip-content .nav:before, 
    #megrip-content .navbar-collapse:after, 
    #megrip-content .navbar-collapse:before, 
    #megrip-content .navbar-header:after, 
    #megrip-content .navbar-header:before, 
    #megrip-content .navbar:after, 
    #megrip-content .navbar:before, 
    #megrip-content .pager:after, 
    #megrip-content .pager:before, 
    #megrip-content .panel-body:after, 
    #megrip-content .panel-body:before, 
    #megrip-content .row:after, 
    #megrip-content .row:before {
        content: none;
    }
	body{
		min-width:auto;
    }
    .modal.in .modal-dialog {
        margin: 10px;
    }
}

 /* ======================================
       Common Set
========================================= */
.modal-open .off-modal{ display:none; }
.on-modal{ display:none; }
.modal-open .on-modal{ display:block; }

.modal-content {
    border: none;
}

.modal-header{
	color:#fff;
	background:#f53d7e;
}
.modal-header .close {
    position: absolute;
    right: 15px;
    margin: 0;
    padding: 0;
}
.modal-header .close > span,
.modal-header .close > span:hover {
    margin: 0;
    padding: 8px 10px;
	background:#fff;
	color:#f53d7e;
    font-family: 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro';
    font-weight: 700;
    line-height: 1;
	opacity:1.0;
}
.modal-header .close > span{
	color:#f53d7e;
	background:#fff;
}
.modal-footer .btn,
.modal-footer .btn:active {
	background:#f53d7e;
    border-color:#f53d7e;
    color: #fff;
    outline: none;
    box-shadow: none;
}
.on-modal {
    width: 100%;
}

 /* ======================================
       Etc Style
========================================= */
.modal-title{
    width: 100%;
    padding: 8px 3em 8px 0;
	font-size:16px;
	font-weight:bold;
	line-height: 1.4;
    text-align: left;
}
.modal-list-departure li a{
	position:relative;
	display:block;
	padding:15px;
	color:#000;font-weight: bold;
	font-size:16px;
	text-decoration:none;
	line-height: 1.2;
}
.modal-list-departure li {
    border: 1px solid #dbdbdb;
    border-top: none;
    text-align: left;
}
.modal-list-departure li:first-child {
    border-top: 1px solid #dbdbdb;
}
.modal-list-departure a:before{
	position:absolute;
	top:50%;
	right:10px;
	margin-top:-0.6em;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #f53d7e;
    content: "\f105";
}
.modal-list-departure a:hover {
    background: #feebf2;
}

/* 注意喚起 */
.modal-attention-box{
	margin:30px auto;
	padding:15px;
	text-align:center;
	border:3px double #e00000;
}
.modal-attention-box:first-child{
	margin-top:0;
}
.modal-attention-box p{
	font-size:14px;
	font-weight:bold;
}
.modal-attention-box p em{
	color:#e00000;
}
.modal-attention-box p:last-child{
	margin-bottom:0;
}
.modal-attention-p{
	font-size:12px!important;
}

@media (max-width: 767px) {
	/* 注意喚起 */
	.modal-attention-box{
		margin:15px auto;
		padding:10px 5px;
	}
	.modal-attention-box p{
		font-size:12px;
	}
}