@charset "UTF-8";
html {
    height: 100%;
}
body {
    color: #333;
    background-color: #EBE8F6;
    margin: 0;
	font-size: 0.9em;
    font-family: "Noto Sans Japanese", 'Arial', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', YuGothic, 'Yu Gothic', 'メイリオ', Meiryo, 'ＭＳ ゴシック', sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
h1, h2, p {
    margin: 0;
    padding: 0;
}

h2,h4,h6{
	border-bottom: 1px solid #ced4da;
	padding-bottom: 1em;
	margin-bottom: 1em;
}
@media screen and (max-width:767px) {
h2,h4{
	padding-bottom: 0.5em;
	margin-bottom: 0.5em;
}
}

ul {
    list-style: none;
    padding: 0;
}
.clearfix {
    display: block;
}
.clearfix:after {
    content: ".";
    display: block;
    height: 0px;
    clear: both;
    visibility: hidden;
}
/**************Bootstrap上書き**************/
.container {
    max-width: 1000px;
}
.alert-info, .btn-info {
    background-color: #63d8f1;
}
.alert-success, .btn-success {
    background-color: #a1e82c;
}
.alert-warning, .btn-warning {
    background-color: #ffbc67;
}
.btn {
    white-space: normal;
}

@media screen and (max-width:767px) {
.btn {
    margin: 0 0 1em 0;
}
}
.form {
    display: inline-block;
}
.pagination {
    font-size: 0.8em;
}
/**************▲Bootstrap上書き▲**************/


input[type="checkbox"]:checked + label {
    background-color: rgba(255, 246, 127, 0.7);
    border-radius: 5px;
}
input[type="submit"], input.btn {
    background: linear-gradient(#39cff7, #0693dd);
    border: 0;
    color: #fff;
    padding: 10px 20px;
    border-radius: 10px;
    cursor: pointer;
}
input[type="submit"]:hover, input.btn:hover {
    background: rgba(6, 147, 221, 0.5);
}
input[type="submit"]:active, input.btn:active {
    background-color: #0572ab;
    box-shadow: inset 0px 0px 2px #0572ab;
}
/**************ヘッダー**************/
.headerArea {
    background-color: #fff;
}
.logoclm {
    padding: 1.5em;
}
.mainArea {
    background-color: #fff;
    padding: 3em;
    margin: 3em 0;
    border-radius: 10px;
	line-height: 1.8em;
}
@media screen and (max-width:767px){
.mainArea {
	padding: 1.5em;
    margin: 2em 0;
}
	}
/*ヘッダーカラー*/
.color_bar {
    background-color: #5C33AE;
    height: 0.7em;
}
/*アイコン付ボタン*/
ul.icon_btn {
    display: flex;
    flex-flow: row;
    padding: 6px;
    list-style-type: none;
    justify-content: center;
    align-items: center;
    margin: 0;
}
ul.icon_btn li {
    word-wrap: break-word;
}
/*共通ボタン*/
.btnArea {
    margin: 4em 0 0 0;
}
@media screen and (min-width:567px) {
	.btnArea>div.submit {
	    order: 2;
	}
	.btnArea>div.back {
	    order: 1;
	}
}
@media screen and (max-width:767px) {
#header #logo img {
    width: 100%;
    margin-bottom: 30px;
}
}
#header .setsumei {
    display: inline-block;
    background-color: #eaf6fd;
    vertical-align: top;
    width: 100%;
    height: 100%;
    background-color: #fff;
}
#header .setsumei h3 {/*市からのお知らせヘッダー*/
    min-height: 40px;
    background: #f5f5f5;
    font-size: 1em;
    position: relative;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    padding: 10px;
    border-left: 1px solid #eee;
    border-top: 1px solid #eee;
    border-right: 2px solid #eee;
	margin: 0;
}
#header .setsumei h3::before {/*市からのお知らせヘッダーアイコン*/
    content: "\f14a";
    font-family: FontAwesome;
    color: #5C33AE;
    margin: 0 0.5em 0 0;
}
#header .setsumei .content_box_bg {/*市からのお知らせbg*/
    background: #fff;
    border-radius: 0 0 10px 10px;
    padding: 10px;
    border-left: 1px solid #eee;
    border-top: 1px solid #eee;
    border-right: 2px solid #eee;
    border-bottom: 2px solid #eee;
}
/**************TOPページQRコードエリア**************/

.mail_bar > div {
    display: inline-block;
}
.mail_bar .mail_txt {
    /*color: #fff;*/
    font-weight: bold;
    font-size: 1.1em;
}
.mail_bar .qr {
    width: 100%;
    border-radius: 10px;
    text-align: center;
    border: 1px solid #eee;
    padding: 1em;
}
@media screen and (max-width:767px) {
	.mail_bar .qr {
	    display: none;
	}
}
.mail_bar .qr img {
    border-radius: 10px;
}
.mail_bar .qr p {
    font-weight: normal;
    font-size: 0.9em;
    color: #333;
    text-align: left;
}
.mail_bar .mail_link {
    font-size: 1.4em;
    ord-break: normal;
}
.mail_bar .mail_link::before {
    content: "\f0e0";
    font-family: FontAwesome;
    color: #5C33AE;
    margin: 0 0.5em 0 0;
}

/**************利用規約**************/

.ruleArea{
	list-style-type: circle;
	list-style-position: outside;
}
.ruleArea li.listStyleNone {
	list-style-type: none;
}


.form-error {
    width: 100%;
    margin-top: .25rem;
    font-size: 80%;
    color: #dc3545;
}
#registForm h4, #registConfirm h4 {
    font-weight: bold;
}
#registForm i.fa, #registConfirm i.fa {
    margin-right: 10px;
}
div.description {
    color: #757575;
    font-size: 80%;
}
div.headerDescription {
    color: #757575;
    margin-bottom: 1em;
}
div.headerDescription:before {
    font-family: FontAwesome;
    content: '\f05a';
    margin-right: 0.5em;
}
.requiredIcon:after {
	content: '必須';
	margin-left: 10px;
	font-size: 60%;
	color: #ffffff;
	background-color: #fb655e;
	padding: 1px 5px;
	border-radius: 5px;
	font-weight: normal;
}
/**************Footer**************/
.footerArea {
    width: 100%;
    text-align: center;
    margin-top: auto;
}

/**************履歴ページ**************/
.mainArea.listLeftArea {
    float: left;
    width: 70%;
}
.mainArea.listRightArea {
    float: right;
    width: 25%;
}
@media screen and (max-width:767px) {
    .mainArea.listLeftArea {
        width: 100%;
    }
    .mainArea.listRightArea {
        width: 100%;
    }
    li.page-item>a {
        padding: .5rem 1.25rem
    }
    li.page-item.page-first>a,
    li.page-item.page-prev>a, 
    li.page-item.page-next>a,
    li.page-item.page-last>a {
        font-size: 0; /* 元の文字を消す */
    }
    li.page-item.active>a {
        font-size: 15px;
    }
    li.page-item>a:before {
        font-family: FontAwesome;
        font-size: 15px;
    }
    li.page-item.page-first>a:before {
        content: '\f100';
    }
    li.page-item.page-prev>a:before {
        content: '\f104';
    }
    li.page-item.page-next>a:before {
        content: '\f105';
    }
    li.page-item.page-last>a:before {
        content: '\f101';
    }
    li.page-item.non-active {
        display: none;
    }
}
span.detailUserHistoryDate {
    font-size: 70%;
    color: #757575;
    font-weight: normal;
}
.break-word {
    word-wrap: break-word;
}
/* utility
--------------------------------------------------*/
/* layout */
.fl {
    float: left;
}
.fr {
    float: right;
}
.clear {
    clear: both;
}
.ar {
    text-align: right;
}
.ac {
    text-align: center;
}
.al {
    text-align: left;
}
/* margin-top */
.mt00 {
    margin-top: 0px;
}
.mt05 {
    margin-top: 5px;
}
.mt10 {
    margin-top: 10px;
}
.mt15 {
    margin-top: 15px;
}
.mt20 {
    margin-top: 20px;
}
.mt25 {
    margin-top: 25px;
}
.mt30 {
    margin-top: 30px;
}
.mt35 {
    margin-top: 35px;
}
.mt40 {
    margin-top: 40px;
}
.mt45 {
    margin-top: 45px;
}
.mt50 {
    margin-top: 50px;
}
.mt55 {
    margin-top: 55px;
}
.mt60 {
    margin-top: 60px;
}
.mt65 {
    margin-top: 65px;
}
.mt70 {
    margin-top: 70px;
}
.mt75 {
    margin-top: 75px;
}
.mt80 {
    margin-top: 80px;
}
.mt85 {
    margin-top: 85px;
}
.mt90 {
    margin-top: 90px;
}
.mt95 {
    margin-top: 95px;
}
.mt100 {
    margin-top: 100px;
}
/* margin-right */
.mr00 {
    margin-right: 0px;
}
.mr05 {
    margin-right: 5px;
}
.mr10 {
    margin-right: 10px;
}
.mr15 {
    margin-right: 15px;
}
.mr20 {
    margin-right: 20px;
}
.mr25 {
    margin-right: 25px;
}
.mr30 {
    margin-right: 30px;
}
.mr35 {
    margin-right: 35px;
}
.mr40 {
    margin-right: 40px;
}
.mr45 {
    margin-right: 45px;
}
.mr50 {
    margin-right: 50px;
}
.mr55 {
    margin-right: 55px;
}
.mr60 {
    margin-right: 60px;
}
.mr65 {
    margin-right: 65px;
}
.mr70 {
    margin-right: 70px;
}
.mr75 {
    margin-right: 75px;
}
.mr80 {
    margin-right: 80px;
}
.mr85 {
    margin-right: 85px;
}
.mr90 {
    margin-right: 90px;
}
.mr95 {
    margin-right: 95px;
}
.mr100 {
    margin-right: 100px;
}
/* margin-bottom */
.mb00 {
    margin-bottom: 0px;
}
.mb05 {
    margin-bottom: 5px;
}
.mb10 {
    margin-bottom: 10px;
}
.mb15 {
    margin-bottom: 15px;
}
.mb20 {
    margin-bottom: 20px;
}
.mb25 {
    margin-bottom: 25px;
}
.mb30 {
    margin-bottom: 30px;
}
.mb35 {
    margin-bottom: 35px;
}
.mb40 {
    margin-bottom: 40px;
}
.mb45 {
    margin-bottom: 45px;
}
.mb50 {
    margin-bottom: 50px;
}
.mb55 {
    margin-bottom: 55px;
}
.mb60 {
    margin-bottom: 60px;
}
.mb65 {
    margin-bottom: 65px;
}
.mb70 {
    margin-bottom: 70px;
}
.mb75 {
    margin-bottom: 75px;
}
.mb80 {
    margin-bottom: 80px;
}
.mb85 {
    margin-bottom: 85px;
}
.mb90 {
    margin-bottom: 90px;
}
.mb95 {
    margin-bottom: 95px;
}
.mb100 {
    margin-bottom: 100px;
}
/* margin-left */
.ml00 {
    margin-left: 0px;
}
.ml05 {
    margin-left: 5px;
}
.ml10 {
    margin-left: 10px;
}
.ml15 {
    margin-left: 15px;
}
.ml20 {
    margin-left: 20px;
}
.ml25 {
    margin-left: 25px;
}
.ml30 {
    margin-left: 30px;
}
.ml35 {
    margin-left: 35px;
}
.ml40 {
    margin-left: 40px;
}
.ml45 {
    margin-left: 45px;
}
.ml50 {
    margin-left: 50px;
}
.ml55 {
    margin-left: 55px;
}
.ml60 {
    margin-left: 60px;
}
.ml65 {
    margin-left: 65px;
}
.ml70 {
    margin-left: 70px;
}
.ml75 {
    margin-left: 75px;
}
.ml80 {
    margin-left: 80px;
}
.ml85 {
    margin-left: 85px;
}
.ml90 {
    margin-left: 90px;
}
.ml95 {
    margin-left: 95px;
}
.ml100 {
    margin-left: 100px;
}
/* padding-top */
.pt00 {
    padding-top: 0px;
}
.pt05 {
    padding-top: 5px;
}
.pt10 {
    padding-top: 10px;
}
.pt15 {
    padding-top: 15px;
}
.pt20 {
    padding-top: 20px;
}
.pt25 {
    padding-top: 25px;
}
.pt30 {
    padding-top: 30px;
}
.pt35 {
    padding-top: 35px;
}
.pt40 {
    padding-top: 40px;
}
.pt45 {
    padding-top: 45px;
}
.pt50 {
    padding-top: 50px;
}
.pt55 {
    padding-top: 55px;
}
.pt60 {
    padding-top: 60px;
}
.pt65 {
    padding-top: 65px;
}
.pt70 {
    padding-top: 70px;
}
.pt75 {
    padding-top: 75px;
}
.pt80 {
    padding-top: 80px;
}
.pt85 {
    padding-top: 85px;
}
.pt90 {
    padding-top: 90px;
}
.pt95 {
    padding-top: 95px;
}
.pt100 {
    padding-top: 100px;
}
/* padding-right */
.pr00 {
    padding-right: 0px;
}
.pr05 {
    padding-right: 5px;
}
.pr10 {
    padding-right: 10px;
}
.pr15 {
    padding-right: 15px;
}
.pr20 {
    padding-right: 20px;
}
.pr25 {
    padding-right: 25px;
}
.pr30 {
    padding-right: 30px;
}
.pr35 {
    padding-right: 35px;
}
.pr40 {
    padding-right: 40px;
}
.pr45 {
    padding-right: 45px;
}
.pr50 {
    padding-right: 50px;
}
.pr55 {
    padding-right: 55px;
}
.pr60 {
    padding-right: 60px;
}
.pr65 {
    padding-right: 65px;
}
.pr70 {
    padding-right: 70px;
}
.pr75 {
    padding-right: 75px;
}
.pr80 {
    padding-right: 80px;
}
.pr85 {
    padding-right: 85px;
}
.pr90 {
    padding-right: 90px;
}
.pr95 {
    padding-right: 95px;
}
.pr100 {
    padding-right: 100px;
}
/* padding-bottom */
.pb00 {
    padding-bottom: 0px;
}
.pb05 {
    padding-bottom: 5px;
}
.pb10 {
    padding-bottom: 10px;
}
.pb15 {
    padding-bottom: 15px;
}
.pb20 {
    padding-bottom: 20px;
}
.pb25 {
    padding-bottom: 25px;
}
.pb30 {
    padding-bottom: 30px;
}
.pb35 {
    padding-bottom: 35px;
}
.pb40 {
    padding-bottom: 40px;
}
.pb45 {
    padding-bottom: 45px;
}
.pb50 {
    padding-bottom: 50px;
}
.pb55 {
    padding-bottom: 55px;
}
.pb60 {
    padding-bottom: 60px;
}
.pb65 {
    padding-bottom: 65px;
}
.pb70 {
    padding-bottom: 70px;
}
.pb75 {
    padding-bottom: 75px;
}
.pb80 {
    padding-bottom: 80px;
}
.pb85 {
    padding-bottom: 85px;
}
.pb90 {
    padding-bottom: 90px;
}
.pb95 {
    padding-bottom: 95px;
}
.pb100 {
    padding-bottom: 100px;
}
/* padding-left */
.pl00 {
    padding-left: 0px;
}
.pl05 {
    padding-left: 5px;
}
.pl10 {
    padding-left: 10px;
}
.pl15 {
    padding-left: 15px;
}
.pl20 {
    padding-left: 20px;
}
.pl25 {
    padding-left: 25px;
}
.pl30 {
    padding-left: 30px;
}
.pl35 {
    padding-left: 35px;
}
.pl40 {
    padding-left: 40px;
}
.pl45 {
    padding-left: 45px;
}
.pl50 {
    padding-left: 50px;
}
.pl55 {
    padding-left: 55px;
}
.pl60 {
    padding-left: 60px;
}
.pl65 {
    padding-left: 65px;
}
.pl70 {
    padding-left: 70px;
}
.pl75 {
    padding-left: 75px;
}
.pl80 {
    padding-left: 80px;
}
.pl85 {
    padding-left: 85px;
}
.pl90 {
    padding-left: 90px;
}
.pl95 {
    padding-left: 95px;
}
.pl100 {
    padding-left: 100px;
}
/* padding */
.p00 {
    padding: 0px;
}
.p05 {
    padding: 5px;
}
.p10 {
    padding: 10px;
}
.p15 {
    padding: 15px;
}
.p20 {
    padding: 20px;
}
.p25 {
    padding: 25px;
}
.p30 {
    padding: 30px;
}
.p35 {
    padding: 35px;
}
.p40 {
    padding: 40px;
}
.p45 {
    padding: 45px;
}
.p50 {
    padding: 50px;
}
.p55 {
    padding: 55px;
}
.p60 {
    padding: 60px;
}
.p65 {
    padding: 65px;
}
.p70 {
    padding: 70px;
}
.p75 {
    padding: 75px;
}
.p80 {
    padding: 80px;
}
.p85 {
    padding: 85px;
}
.p90 {
    padding: 90px;
}
.p95 {
    padding: 95px;
}
.p100 {
    padding: 100px;
}
h1#logo > img {
	padding-top: 6px;
	padding-bottom: 5px;
}