*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

@font-face {
    font-family: 'Noto Sans CJK JP';
    src: url(../fonts/NotoSansCJKjp-Regular.otf) format('oft');
    font-weight: normal;
}

@font-face {
    font-family: 'Noto Sans CJK JP';
    src: url(../fonts/NotoSansCJKjp-Bold.otf) format('oft');
    font-weight: bold;
}

html{
    height: 100%;
}

body{
    font-size: 14px;
    font-family: Noto Sans CJK JP,'ヒラギノ角ゴ Pro W3',Hiragino Kaku Gothic Pro,'メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif!important;
    display: flex;
    flex-direction: column;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    height: 100%;
    color: #333;
}

main{
    flex: 1;
    padding-top: 45px;
}

main.application{
    padding-top: 0;
}

img{
    max-width: 100%;
    vertical-align: middle;
}

.container{
    width: 90%;
    margin: auto;
}

.main-contents{
    padding-top: 20px;
    padding-bottom: 20px;
}

.application .main-contents{
    padding-top: 75px;
}

.application.top .main-contents{
    padding-top: 20px;
}

.main-contents.btm-fixed{
    padding-bottom: 100px;
}

h1{
    font-size: 1.25em;
    margin-bottom: 20px;
}

h1.small{
    font-size: 1.05em;
}

a{
    color: #00008B;
    text-decoration: none;
}

.bold{
    font-weight: bold;
}

.red{
    color: #FF0000;
}

.center{
    text-align: center;
}

.underline{
    text-decoration: underline;
}

.mgt10{
    margin-top: 10px;
}

.btn{
    background-color: #008070;
    color: #fff;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    border: none;
    border-radius: 7px;
    width: 100%;
    display: block;
    font-weight: bold;
    font-size: 1.3em;
    padding: 0 5px;
    border: 2px solid #008070;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 44px;
    white-space: nowrap;
}

.btn.back{
    background-color: #fff;
    border-color: #008070;
    color: #008070;
}

.btn.white{
    background-color: #fff;
    border-color: #008070;
    color: #008070;
}

.btn.cancel{
    letter-spacing: -3px;
    padding-right: 10px;
    padding-left: 7px;
}

.btn:disabled{
    background-color: #EDEDED;
    color: #888888;
    border-color: #EDEDED;
}

.btn-area.fixed{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 15px;
    box-shadow: 0px -3px 10px #999;
    background-color: #fff;
}

.btn-area .col2{
    display: flex;
}

.btn-area .col2 span{
    width: 100%;
}

.btn-area .col2 span:first-child{
    margin-right: 20px;
    width: 120px;
}

.btn-area .col2.half-width span:first-child{
    width: 100%;
}

.lead{
    margin-bottom: 20px;
}

.lead ul{
    list-style: none;
    margin-top: 10px;
}

.input-text-wrap{
    position: relative;
    display: block;
}

.input-text{
    -webkit-appearance: none;
    appearance: none;
    border: none;
    border-bottom: 1px solid #888;
    width: 100%;
    padding: 7px 0;
    font-size: 1em;
    outline: none;
    border-radius: 0;
}

.input-text.font-large{
    font-size: 1.2em;
}

.input-text:disabled{
    background: unset;
    border-bottom: 1px dashed #888;
    color: #333;
    opacity: 1;
}

.input-text-wrap .input-text{
    padding-right: 30px;
}

.input-text-wrap .input-text.error{
    border-color: #FF0000;
}

.input-text.auto{
    width: auto;
}

.input-text:focus{
    border-color: #008070;
}

.input-text-wrap .input-right {
    position: absolute;
    top: 46%;
    right: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    cursor: pointer;
}

.input-text-wrap .input-clear{
    height: 20px;
}

.input-text-wrap .pass-view{
    height: 20px;
}

.input-textarea{
    -webkit-appearance: none;
    appearance: none;
    border: none;
    border: 1px solid #888;
    width: 100%;
    padding: 10px;
    font-size: 1em;
    outline: none;
    resize: vertical;
    border-radius: 10px;
}

.input-textarea:focus{
    border-color: #008070;
}

::placeholder {
    color: #D1D1D1;
    font-weight: normal;
}

.select-btn span{
    border: 2px solid #008070;
    border-radius: 6px;
    color: #008070;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    line-height: 40px;
    padding: 0 5px;
    text-align: center;
    font-size: 1.3em;
}

.select-btn input{
    display: none;
}

.select-btn input:checked ~ span{
    background-color: #008070;
    color: #fff;
}

.select-wrap{
    position: relative;
    display: block;
}

.select-wrap::after{
    content: "";
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid #888888;
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

.select-wrap select{
    border: none;
    border-bottom: 1px solid #888888;
    -webkit-appearance: none;
    appearance: none;
    padding: 7px 0;
    padding-right: 15px;
    font-size: 1em;
    outline: none;
    width: 100%;
    color: #D1D1D1;
    background: unset;
}

/* ヘッダー */

header{
    position: fixed;
    width: 100%;
    z-index: 99;
}

.head-wrap{
    padding: 12px;
    text-align: center;
    position: relative;
    background-color: #008070;
    color: #fff;
}

.head-wrap .back{
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

.head-wrap .back a{
    color: #fff;
    font-size: 0.8em;
}

.head-wrap .site-name{
    font-weight: bold;
    font-size: 1.05em;
}

.head-wrap .navi-btn-wrap{
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    display: flex;
}

.navi-btn {
    width: 18px;
    position: relative;
    cursor: pointer;
    display: inline-block;
    z-index: 1;
    height: 14px;
}

.navi-btn span {
    position: absolute;
    display: block;
    width: 18px;
    height: 2px;
    background: #fff;
    border-radius: 5px;
    transition: all .3s;
}

.navi-btn span:nth-of-type(2) {
    top: 7px;
    opacity: 1;
    transition: all .3s;
}

.navi-btn span:last-of-type {
    top: 14px;
}

.navi-btn.close span{
    background-color: #7F7F7F;
    height: 3px;
    width: 22px;
}

.navi-btn.close span:first-of-type {
    transform: rotate(-45deg) translateY(5px) translateX(-5px);
}

.navi-btn.close span:nth-of-type(2) {
    transform: translateX(0);
    opacity: 0;
}

.navi-btn.close span:last-of-type {
    transform: rotate(45deg) translateY(-5px) translateX(-5px);
}

#nav{
    background-color: #F8F8F8;
    padding: 10px;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 999;
    transition: all 0.6s;
    left: -120%;
}

#nav.active{
    left: 0;
}

#nav .navi-btn-wrap{
    display: block;
    margin-left: 6px;
    margin-bottom: 10px;
    margin-top: 5px;
}

#nav ul{
    list-style: none;
}

#nav ul li{
    margin-bottom: 5px;
}

#nav ul li a{
    color: #333;
    font-size: 1.3em;
    font-weight: bold;
    border-bottom: 2px solid #fff;
    display: block;
    padding: 5px;
    letter-spacing: -1px;
    display: flex;
    align-items: center;
}

#nav ul li a::after{
    content: ">";
    color: #00008B;
    margin-left: auto;
    font-weight: normal;
    margin-right: 10px;
}

#nav ul li .other-link::after{
    content: '';
    display: inline-block;
    width: 15px;
    height: 15px;
    background-image: url(../img/icon_link_menu.png);
    background-size: contain;
    vertical-align: middle;
    margin-right: 7px;
}

/* 入力 */

.input-form .col2{
    display: flex;
}

.input-form .col2 dl{
    width: 100%;
}

.input-form .col2 dl:first-child{
    margin-right: 20px;
}

.input-form h2{
    font-size: 1.1em;
    margin-bottom: 20px;
}

.input-form dl{
    margin-bottom: 20px;
}

.input-form dt{
    margin-bottom: 5px;
}

.input-form dd .repletion{
    font-size: 0.8em;
    margin-top: 10px;
}

.input-form dd .repletion .flex{
    display: flex;
}

.input-form dd .repletion .flex .mark{
    flex-shrink: 0;
    -webkit-flex-shrink: 0;
}

.input-form dd .error-msg{
    font-size: 0.8em;
    margin-top: 10px;
    color: #FF0000;
}

.confirm .input-form dd{
    font-weight: bold;
}

.confirm .input-form dd .font-large{
    font-size: 1.2em;
}

.confirm .input-form dd .explanation{
    font-weight: normal;
    margin-bottom: 5px;
}

.confirm .input-form dd .name-confirm{
    display: flex;
    align-items: flex-end;
}

.confirm .input-form dd .name-confirm div{
    min-width: 50%;
}

.confirm .input-form dd .name-confirm div p:first-child{
    margin-bottom: 5px;
}

.confirm .input-form dd .name-confirm span{
    font-weight: normal;
}

.confirm .input-form .birthday-confirm span{
    font-weight: normal;
    margin: 0 20px;
}

.application .confirm .input-form dd{
    padding: 5px 0;
    padding-left: 15px;
}

.auto-code .retransmission{
    text-align: center;
    margin-top: 15px;
}

.auto-code .mail-change{
    text-align: center;
    margin-top: 40px;
}

.input-form dd .relationship {
    display: flex;
    margin: 0 -3px;
    margin-top: 10px;
}

.input-form dd .relationship label{
    width: 100%;
    margin: 0 3px;
}

.input-form dd .relationship .select-btn span{
    font-size: 1em;
}

.input-form dd .sex {
    display: flex;
    margin: 0 -3px;
    margin-top: 10px;
}

.input-form dd .sex label{
    width: 100%;
    margin: 0 3px;
}

.input-form dd .agent{
    margin-top: 10px;
}

.input-form dd .agent p{
    font-size: 0.9em;
    line-height: 2;
}

.input-form dd .agent .select-area{
    display: flex;
    margin: 0 -3px;
    margin-top: 10px;
}

.input-form dd .agent .select-area label{
    width: 100%;
    margin: 0 3px;
}

.input-form dd .notice{
    margin-top: 10px;
}

.input-form dd .notice p{
    font-size: 0.9em;
    line-height: 2;
}

.input-form dd .notice .select-area{
    margin-top: 10px;
}

.input-form dd .notice .select-area label{
    margin-top: 10px;
    display: block;
}

.input-form dd .notice .select-area .select-btn span{
    justify-content: left;
    padding: 0 20px;
}

.input-form dd .notice .note{
    color: #FF0000;
    font-weight: bold;
    margin-top: 10px;
}

.input-form dd .name {
    display: flex;
}

.application .input-form dd .name{
    display: block;
}

.application .input-form dd .name > div:first-child{
    margin-bottom: 10px;
}

.input-form dd .name > span{
    width: 100%;
}

.input-form dd .name > span:first-child{
    margin-right: 20px;
}

.input-form dd .birthday{
    display: flex;
    align-items: flex-end;
}

.input-form dd .birthday span{
    margin: 0 5px;
}

.input-form dd .birthday input{
    padding-right: 5px;
    padding-left: 5px;
}

.input-form dd .birthday .yaer{
    width: 70px;
}

.input-form dd .birthday .month,
.input-form dd .birthday .day{
    width: 50px;
}

.input-form dd .date-select{
    display: flex;
}

.input-form dd .date-select div{
    width: 100%;
}

.input-form dd .date-select label{
    width: 100%;
}

.input-form dd .date-select label:not(:last-child){
    margin-right: 10px;
}

.help-area ul{
    list-style: none;
}

.help-area ul li{
    display: flex;
    margin-bottom: 15px;
    font-size: 0.8em;
}

.help-area ul li img{
    height: 13px;
    margin-top: 2px;
    margin-right: 5px;
}

.input-form .contact-link{
    text-align: center;
}

.input-form .note-list{
    font-size: 0.8em;
    margin-bottom: 20px;
}

.input-form .note-list ul li{
    display: flex;
    margin-bottom: 5px;
}

.input-form .note-list ul li img{
    height: 14px;
    margin-top: 3px;
    margin-right: 5px;
}

.input-form .post-code-area{
    display: flex;
    align-items: flex-end;
    margin-bottom: 10px;
}

.input-form .post-code-area .input-text{
    width: 120px;
}

.input-form .post-code-area .address-search{
    background-color: #fff;
    border-color: #008070;
    color: #008070;
    width: 120px;
    margin-left: 10px;
    height: 40px;
    line-height: 40px;
}

.input-form .link img{
    height: 18px;
    margin-bottom: 4px;
    margin-left: 2px;
}

.input-form.security-change > div:not(:last-child){
    margin-bottom: 30px;
}

.agree-msg{
    font-size: 1.05em;
}

.mail-receive{
    margin-top: 5px;
    font-size: 0.9em;
}

.mail-receive label{
    display: flex;
    align-items: center;
    font-weight: bold;
}

.mail-receive label input{
    margin-right: 5px;
    margin-top: 2px;
}

.registered-link{
    font-size: 0.9em;
    margin-top: 50px;
    text-align: center;
}

.registered-link p::before,
.registered-link p::after{
    content: '----';
    margin: 0 3px;
}

.address-input-area > div{
    margin: 10px 0;
}

.mail-setting h2{
    margin-bottom: 5px;
}

.mail-setting dl dt{
    font-size: 0.9em;
    margin-bottom: 10px;
}

.mail-setting dl dd{
    margin-left: 15px;
}

.mail-setting dl dd label{
    display: inline-flex;
    font-size: 0.9em;
    font-weight: bold;
    align-items: center;
}

.mail-setting dl dd label input{
    margin-right: 10px;
    width: 20px;
    height: 20px;
}

.mail-setting dl dd .repletion{
    margin-top: 5px;
}

/* ログイン */

.auto-display{
    margin-top: 5px;
    font-size: 0.9em;
}

.auto-display label{
    display: flex;
    align-items: center;
}

.auto-display label input{
    margin-right: 5px;
    margin-top: 2px;
}

.pass-forget{
    text-align: right;
    margin-top: 10px;
    margin-right: 10px;
}

.pass-forget a{
    font-size: 0.9em;
}

#login {
    height: 100%;
    position: relative;
}

#login .btn-area{
    margin-top: 25px;
}

#login .link-list{
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    width: 90%;
}

#login .link-list ul{
    list-style: none;
    margin-bottom: 10px;
}

#login .link-list ul li{
    text-align: center;
    padding: 8px 0;
}

#login .link-list ul li .other-link{
    display: inline-flex;
    align-items: center;
}

#login .link-list ul li .other-link::after{
    content: '';
    display: inline-block;
    width: 15px;
    height: 15px;
    background-image: url(../img/icon_link_menu.png);
    background-size: contain;
    vertical-align: middle;
    margin-left: 5px;
}

/* よくあるご質問

.faq-list ul{
    list-style: none;
}

.faq-list ul li{
    padding-bottom: 15px;
    border-bottom: 1px solid #999;
    margin-bottom: 20px;
}

.faq-list ul li .question {
    display: flex;
    padding-right: 5px;
}

.faq-list ul li .question .toggle{
    position: relative;
    width: 8px;
    height: 8px;
    display: inline-block;
    margin-left: auto;
    margin-top: 7px;
}

.faq-list ul li .question .toggle::before{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    content: "";
    height: 100%;
    width: 1px;
    background-color: #333;
}

.faq-list ul li .question .toggle::after{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    content: "";
    height: 1px;
    width: 100%;
    background-color: #333;
}

.faq-list ul li .question.active .toggle::before{
    display: none;
}

.faq-list ul li .answer{
    padding: 10px;
    padding-right: 20px;
    padding-bottom: 0;
    font-weight: bold;
    display: none;
} */

/* マイページ */

.mypage section{
    margin-bottom: 20px;
}

.mypage .mypage-head{
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.mypage .mypage-head .login-time{
    margin-left: auto;
    font-size: 0.7em;
    text-align: center;
    color: #888888;
}

.mypage h2{
    font-size: 1.3em;
    border-bottom: 1px solid #008070;
    padding: 5px 0;
    margin-bottom: 5px;
}

.mypage .contract{
    min-height: 390px;
    margin-bottom: 0;
}

.mypage .contract-list{
    display: flex;
    overflow: scroll;
    padding: 0 7%;
}

.mypage .contract-list::-webkit-scrollbar {
    display: none;
}

.mypage .contract-details h2{
    border-bottom: none;
}

.mypage .contract-contents{
    background-color: #E4FBFC;
    padding: 10px 20px;
    padding-bottom: 20px;
    min-height: 370px;
    min-width: 95%;
    margin-right: 20px;
}

.mypage .contract-contents:last-child{
    margin-right: 0;
}

.mypage .contract-details .contract-contents{
    border-radius: 10px;
}

.mypage .contract-contents h3{
    text-align: center;
    color: #008070;
    font-size: 1.3em;
    margin-bottom: 10px;
}

.mypage .contract-contents-inner p{
    line-height: 1.2;
}

.mypage .contract-details .contract-contents-inner p{
    font-size: 1.1em;
}

.mypage .contract .contract-contents-inner{
    font-size: 0.9em;
}

.mypage .contract .contract-contents-inner > div:not(:last-child){
    margin-bottom: 12px;
}

.mypage .contract-details .contract-contents-inner > div:not(:last-child){
    margin-bottom: 5px;
}

.mypage .contract-contents-inner h4{
    color: #888888;
    font-weight: normal;
    display: flex;
    align-items: center;
}

.mypage .contract-contents-inner .icon-info{
    height: 15px;
    display: inline-block;
    margin-left: 3px;
}

.mypage .contract-contents .point .point-area{
    margin-top: 10px;
}

.mypage .contract .contrack-list-inner{
    padding: 10px 0;
}

.mypage .contract .contrack-tab{
    list-style: none;
    display: flex;
    margin-bottom: 20px;
}

.mypage .contract .contrack-tab li{
    width: 50%;
    text-align: center;
    border-bottom: 3px solid #EDEDED;
    padding-bottom: 5px;
}

.mypage .contract .contrack-tab li.active{
    border-color: #00008B;
}

.mypage .contract .contrack-list-wrap > div{
    display: none;
}

.mypage .contract .subscribed > div{
    margin-bottom: 20px;
    min-height: auto;
}

.mypage .contract .subscribed > div:last-child{
    margin-bottom: 0;
}

.mypage .subscribed .contract-contents{
    margin-right: 0;
}

.mypage .contract .no-contract{
    text-align: center;
}

.mypage .contract .no-contract-msg{
    font-size: 0.9em;
    text-align: center;
    padding: 20px 0;
}

.point .point-area ul{
    list-style: none;
    position: relative;
    text-align: right;
    margin-bottom: 2px;
    margin-right: 5px;
}

.point .point-area ul li{
    white-space: nowrap;
    display: inline-block;
    position: relative;
}

.point .point-area ul li.now{
    position: absolute;
    top: 0;
    left: 40%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    margin-left: 5px;
    color: #008070;
    font-weight: bold;
}

.point .point-area .flag{
    height: 20px;
    display: inline-block;
    position: absolute;
    left: 100%;
    bottom: 0;
}

.point .point-area .bar-graph-wrap {
    position: relative;
    height: 26px;
    border: 1px solid #888888;
    background-color: #fff;
}

.point .point-area .bar-graph-wrap .graph {
    height: 24px;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background: #81CCFF;
    width: 40%;
}

.mypage .contract .contract-btn-area{
    margin-top: 18px;
}

.mypage .contract .contract-contents .contract-btn-area .btn{
    font-size: 1em;
    font-weight: normal;
    height: 40px;
    position: relative;
    line-height: 40px;
}

.mypage .contract .contract-contents .contract-btn-area .btn::after{
    content: "＞";
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

.mypage .contract .contract-contents .contract-btn-area > div:not(:last-child){
    margin-bottom: 8px;
}

.mypage .mypage-news h2{
    margin-bottom: 0;
}

.mypage-news .news-title{
    position: relative;
}

.mypage-news .news-title .list-link{
    position: absolute;
    bottom: 6px;
    right: 0;
}

.mypage-news .news-title .num{
    position: absolute;
    bottom: 10px;
    right: 0;
    font-size: 0.8em;
}

.mypage-news .no-news{
    font-size: 0.9em;
    padding: 10px 0;
}

.mypage-news article{
    border-bottom: 1px solid #888888;
}

.mypage-news article a{
    color: #333;
    padding: 7px 0;
    padding-right: 30px;
    display: block;
    position: relative;
}

.mypage-news article a::after{
    content: ">";
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

.mypage-news article a .date{
    font-size: 0.8em;
    margin-bottom: 3px;
}

.mypage-news article a .important{
    font-size: 0.7em;
    display: inline-block;
    background-color: #008070;
    color: #fff;
    padding: 0 10px;
    line-height: 1.4;
    border-radius: 10px;
    margin-left: 15px;
}

.mypage-news article a .title{
    display: flex;
    margin-top: 3px;
}

.mypage-news article a .title img{
    height: 15px;
    flex-shrink: 0;
    -webkit-flex-shrink: 0;
    margin-top: 4px;
    margin-right: 5px;
}

.mypage .procedure-menu ul{
    list-style: none;
}

.mypage .procedure-menu ul li{
    border-bottom: 1px solid #888888;
}

.mypage .procedure-menu ul li a{
    color: #333;
    padding: 10px 0;
    display: block;
    position: relative;
}

.mypage .procedure-menu ul li a::after{
    content: ">";
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

.mypage .pdf-link ul{
    list-style: none;
    margin-top: 15px;
}

.mypage .pdf-link ul li{
    margin: 5px 0;
}

.mypage .pdf-link ul li a{
    display: flex;
    align-items: center;
}

.mypage .pdf-link ul li a img{
    height: 14px;
    margin-top: 2px;
    margin-left: 5px;
}

#user-info{
    height: 100%;
    position: relative;
    padding-bottom: 75px;
}

.user-menu h2{
    margin-bottom: 0;
}

.user-menu ul{
    list-style: none;
}

.user-menu ul li a{
    border-bottom: 1px solid #888888;
    display: block;
    color: #333;
    padding: 28px 8px;
    position: relative;
}

.user-menu ul li a::after{
    content: ">";
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

.user-menu ul li a h3{
    font-size: 1.1em;
    margin-bottom: 3px;
    margin-top: 8px;
}

.user-menu ul li a .detail{
    color: #888888;
}

.user-menu ul li a img{
    height: 36px;
}

#user-info .btn-area{
    position: absolute;
    bottom: 0;
    padding: 15px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    width: 100%;
    max-width: 900px;
}

#news{
    height: 100%;
    position: relative;
    padding-bottom: 75px;
}

#news .btn-area{
    position: absolute;
    bottom: 0;
    padding: 15px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    width: 100%;
    max-width: 900px;
}

.news-contents {
    margin-top: 10px;
}

.news-contents .date{
    font-size: 0.8em;
    margin-bottom: 3px;
}

.news-contents .important{
    font-size: 0.7em;
    display: inline-block;
    background-color: #008070;
    color: #fff;
    padding: 0 10px;
    line-height: 1.4;
    border-radius: 10px;
    margin-left: 15px;
}

.news-contents .title{
    font-weight: bold;
    margin: 8px 0;
}

.news-contents .contents p{
    margin-bottom: 10px;
}

.news-contents .contents-btn-area{
    margin-top: 20px;
}

#contract{
    height: 100%;
    position: relative;
    padding-bottom: 75px;
}

#contract .btn-area{
    position: absolute;
    bottom: 0;
    padding: 15px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    width: 100%;
    max-width: 900px;
}

/* 住所検索 */

#address-search dl dt{
    font-size: 1.3em;
    font-weight: bold;
}

#address-search dd ul{
    list-style: none;
    margin-top: 20px;
}

#address-search dd ul li{
    margin-bottom: 15px;
}

#address-search dd ul li a{
    color: #333;
    font-weight: bold;
    display: block;
    border-bottom: 1px solid #888888;
    padding: 10px 5px;
    padding-right: 35px;
    position: relative;
}

#address-search dd ul li a::after{
    content: ">";
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    font-weight: normal;
}

#address-search .post-code{
    border-bottom: 1px solid #008070;
}

/* 保険金請求 */

#insurance-claim .point-area{
    border: 1px solid #008070;
    padding: 8px 20px;
    margin-top: 10px;
    margin-bottom: 10px;
}

#insurance-claim .point .point-area .bar-graph-wrap .graph{
    background-color: #008070;
}

#insurance-claim .point .point-area ul li{
    font-size: 0.9em;
}

#insurance-claim .point .point-area ul li.now{
    color: #333;
    font-weight: normal;
}

#insurance-claim .point .point-area ul li.start {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    margin-left: 3px;
}

#insurance-claim .btn-area {
    margin-top: 20px;
}

#insurance-claim .btn-area > div{
    margin-bottom: 25px;
}

.period-of-insurance{
    font-size: 0.8em;
    margin-bottom: 15px;
}

.period-of-insurance .title{
    color: #888888;
}

.period-of-insurance .period{
    color: #504C4C;
    font-weight: bold;
}

.check-list {
    font-size: 1.3em;
    font-weight: bold;
}

.check-list ul{
    list-style: none;
}

.check-list ul li label{
    display: flex;
}

.check-list ul li input{
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    -webkit-flex-shrink: 0;
    margin-top: 7px;
    margin-right: 5px;
}

.check-list .note{
    background-color: #FFFF00;
    color: #FF0000;
    display: inline;
}

.confirm .check-list ul li label{
    cursor: auto;
    pointer-events: none;
}

#past-score{
    height: 100%;
    position: relative;
    padding-bottom: 75px;
}

.app-contents {
    margin-bottom: 20px;
}

.app-contents .note p{
    background-color: #FFFF00;
    color: #FF0000;
    display: inline;
    font-size: 1.3em;
    font-weight: bold;
}

.app-contents > div:not(:last-child){
    margin-bottom: 30px;
}

.app-contents .head-area{
    display: flex;
    margin-bottom: 5px;
}

.app-contents .head-area .num{
    font-size: 1.2em;
}

.app-contents .head-area .edit-btn{
    border: 1px solid #008070;
    display: inline-block;
    color: #008070;
    border-radius: 3px;
    margin-left: auto;
    font-size: 0.8em;
    padding: 2px 10px;
}

.app-contents .detail-area{
    border: 1px solid #888888;
    padding: 10px;
}

.app-contents .detail-area dl:not(:last-child){
    margin-bottom: 10px;
}

.app-contents .detail-area dl dt{
    color: #888;
}

.app-contents .detail-area dl dd{
    font-weight: bold;
    font-size: 1.1em;
    margin-left: 10px;
}

.app-contents .upload-btn-wrap{
    margin-top: 10px;
}

#past-score .btn-area {
    position: absolute;
    bottom: 0;
    padding: 15px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    width: 100%;
    max-width: 900px;
}

.prior-confirm-contents{
    font-weight: bold;
    font-size: 1.3em;
}

.prior-confirm-contents > div{
    margin-bottom: 10px;
}

.prior-confirm-contents ul{
    list-style: none;
}

.prior-confirm-contents .agree{
    margin-top: 30px;
}

.prior-confirm-contents .agree label{
    display: flex;
    align-items: center;
}

.prior-confirm-contents .agree input{
    width: 16px;
    height: 16px;
    margin-top: 4px;
    margin-right: 10px;
}

.upload-contents{
    font-size: 1.3em;
    font-weight: bold;
}

.upload-contents .head-text p{
    margin-bottom: 20px;
}

.upload-contents .upload-box{
    margin-bottom: 30px;
}

.upload-contents .upload-box .img-area{
    text-align: center;
    margin-top: 20px;
}

.upload-contents .upload-box .img-area img{
    width: 70%;
}

.upload-contents .upload-box .expansion-btn-wrap{
    text-align: center;
    margin-top: 15px;
}

.upload-contents .upload-box .expansion-btn{
    display: inline-block;
    border: 2px solid;
    font-size: 1.4em;
    color: #333;
    font-weight: normal;
    border-radius: 10px;
    padding: 5px 30px;
    padding-top: 0;
}

#upload-select{
    height: 100%;
    position: relative;
    padding-bottom: 75px;
}

#upload-select .btn-area{
    position: absolute;
    bottom: 0;
    padding: 15px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    width: 100%;
    max-width: 900px;
}

.shooting-method{
    border: 2px solid #333;
    color: #FF0000;
    font-weight: bold;
    padding: 5px 10px;
}

.shooting-method ul{
    list-style: none;
    margin-top: 10px;
}

.upload-area{
    text-align: center;
    margin-top: 30px;
}

.upload-area h2{
    text-align: left;
    font-size: 1.3em;
    margin-bottom: 10px;
}

.upload-area .img-area{
    margin-bottom: 15px;
}

.upload-area .img-area img{
    width: 70%;
}

.upload-area input{
    display: none;
}

.upload-area .upload{
    color: #008070;
    border-radius: 7px;
    display: inline-block;
    font-weight: bold;
    font-size: 1.3em;
    padding: 0 20px;
    border: 2px solid #008070;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 44px;
    cursor: pointer;
}

.input-form dd .error-msg{
    font-size: 0.9em;
}

/* 申込 */

.application .service-cts{
    text-align: center;
    font-weight: bold;
    line-height: 2;
}

.application .logo-area{
    text-align: center;
}

.application .logo-area{
    margin-top: 10px;
    margin-bottom: 20px;
}

.application .logo-area img{
    width: 55%;
}

.application section{
    margin-bottom: 20px;
}

.application section h2{
    font-size: 1em;
    border-bottom: 1px solid;
    padding-bottom: 5px;
    margin-bottom: 5px;
}

.application .summary .detail{
    padding: 5px;
    line-height: 2;
    font-size: 0.9em;
}

.application .summary .detail table{
    width: 100%;
}

.application .summary .detail table th{
    white-space: nowrap;
    vertical-align: top;
    font-weight: normal;
    text-align: left;
}

.application .summary .detail table td{
    padding-bottom: 5px;
}

.application .flow .detail{
    padding: 5px;
    font-size: 0.9em;
    line-height: 2;
}

.application .flow ol{
    list-style: none;
}

.application .flow ol li:not(:last-child){
    margin-bottom: 20px;
}

.application .flow ol li h3{
    font-size: 1em;
}

.application .notes .detail{
    font-size: 0.9em;
    padding: 5px;
    line-height: 2;
}

.application .notes .detail ul{
    list-style: none;
    margin-top: 10px;
}

.application .notes .detail ul li{
    display: flex;
}

.application .notes .detail ul li .maru{
    flex-shrink: 0;
    -webkit-flex-shrink: 0;
}

.application .notes .strong{
    border: 1px solid;
    font-size: 0.9em;
    padding: 5px;
    margin-top: 5px;
    border-radius: 10px;
    background-color: #DEEBF7;
    margin-bottom: 10px;
}

.application .notes .detail > ul li{
    margin-bottom: 5px;
}

.application .internet .detail{
    font-size: 0.9em;
    line-height: 2;
    padding: 5px;
}

.application .internet .detail ul{
    list-style: none;
}

.application .internet .detail ul li{
    display: flex;
    margin-bottom: 5px;
}

.application .internet .detail ul li .maru{
    flex-shrink: 0;
    -webkit-flex-shrink: 0;
}

.step-area-wrap{
    background-color: #fff;
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
}

.step-area {
    background-color: #D8F0FE;
    margin-top: 30px;
}

.step-area ul {
    list-style: none;
    display: flex;
    width: 90%;
    margin: auto;
    max-width: 980px;
}

.step-area ul li {
    text-align: center;
    position: relative;
    width: 100%;
    margin-top: -20px;
}

.step-area ul li:not(:last-child):after {
    background: #888;
    content: "";
    width: 100%;
    height: 1px;
    position: absolute;
    right: calc(-50%);
    top: 9px;
}

.step-area ul li.entered:after {
    background: #008070;
}

.step-area ul li .maru {
    border-radius: 50%;
    background-color: #888;
    display: inline-block;
    width: 9px;
    height: 9px;
    position: relative;
    z-index: 2;
    margin-bottom: 2px;
}

.step-area ul li.entered .maru {
    background-color: #008070;
}

.step-area ul li.visited .maru {
    background-color: #008070;
    width: 14px;
    height: 14px;
    margin-bottom: 0;
}

.step-area ul li .text {
    font-size: 0.8em;
    display: block;
    line-height: 1.2;
    color: #8F8F8F;
    white-space: nowrap;
    font-size:10px;
    -webkit-transform:scale(0.7);
    -moz-transform:scale(0.7);
    -ms-transform:scale(0.7);
    -o-transform:scale(0.7);
    transform:scale(0.7);
    padding-bottom: 26px;
    position: relative;
}

.step-area ul li.visited .text{
    color: #008070;
    font-weight: bold;
}

.step-area ul li.entered .text{
    color: #008070;
}

.step-area ul li .text span{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

.application .agree .detail{
    line-height: 2;
    font-size: 0.9em;
    padding: 0 5px;
}

.application .agree ul{
    list-style: none;
}

.application .agree ul li{
    display: flex;
}

.application .agree .flex{
    display: flex;
}

.application .agree .detail .mark{
    flex-shrink: 0;
    -webkit-flex-shrink: 0;
}

.application .agree .detail > ul > li{
    margin-bottom: 5px;
}

.input-form .important-subject dd .explanation{
    font-size: 0.9em;
    line-height: 2;
}

.important-subject .document-download{
    margin-top: 15px;
    margin-bottom: 15px;
}

.important-subject .document-download .btn{
    font-size: 0.9em;
}

.important-subject .agree-btn{
    height: 44px;
    display: flex;
    align-items: center;
    border: 2px solid #008070;
    background-color: #008070;
    border-radius: 7px;
    color: #fff;
    padding: 0 10px;
    font-size: 0.9em;
    line-height: 1.2;
    cursor: pointer;
}

.important-subject .agree-btn.disabled{
    background-color: #EDEDED;
    color: #888888;
    border-color: #EDEDED;
}

.important-subject .agree-btn input{
    margin-right: 5px;
}

.application .identification h2{
    font-size: 1.1em;
}

.application .identification .select-area{
    display: flex;
    margin: 0 -5px;
    margin-top: 10px;
}

.application .identification .select-area > div{
    width: 100%;
    text-align: center;
    padding: 0 5px;
}

.application .identification .select-area label span{
    height: 40px;
    font-size: 1em;
    line-height: normal;
}

.application .identification .select-area .my-number{
    font-size: 0.9em;
    line-height: 1.2;
}

.application .identification .select-area .recommend{
    color: #FF0000;
    font-size: 0.8em;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 5px;
    margin-right: 10px;
}

.application .identification .select-area .recommend img{
    height: 14px;
    margin-right: 2px;
}

.application .identification-detail {
    border: 2px solid #888888;
    margin-top: 20px;
    padding: 20px 15px;
}

.application .identification-detail dl:not(:last-child){
    margin-bottom: 5px;
}

.application .identification-detail dt{
    font-weight: bold;
}

.application .identification-detail dd{
    padding: 5px;
}

.application .identification-detail dd .sample-img{
    display: flex;
    margin-left: -10px;
    margin-right: -10px;
    margin-bottom: 10px;
    justify-content: center;
}

.application .identification-detail dd .sample-img div{
    max-width: 60%;
}

.application .identification-detail dd ul{
    list-style: none;
}

.application .identification-detail dd ul li{
    display: flex;
    margin-bottom: 5px;
}

.application .identification-detail dd ul li:last-child{
    margin-bottom: 0;
}

.application .identification-detail dd ul li .num{
    flex-shrink: 0;
    -webkit-flex-shrink: 0;
}

.application .identification .upload-area{
    margin-top: 40px;
}

.application .identification .upload-area label{
    background-color: #008070;
    color: #fff;
    margin-bottom: 20px;
}

.application .identification .note{
    color: #FF0000;
    margin-top: 30px;
    margin-bottom: 20px;
}

.application .identification .note h2{
    text-align: center;
    margin-bottom: 10px;
}

.insurance-contect{
    margin-top: 40px;
}

.insurance-contect h2{
    font-size: 1em;
    margin-bottom: 10px;
}

.insurance-contect .detail table{
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

.insurance-contect .detail table th{
    border: 1px solid;
    font-weight: normal;
    width: 50%;
    padding: 10px;
}

.insurance-contect .detail table td{
    border: 1px solid;
    text-align: center;
    padding: 10px;
    background-color: #FFF2CC;
}

.insurance-contect .contact-info{
    margin-top: 15px;
}

.insurance-contect .contact-info{
    border: 1px solid #00008B;
}

.insurance-contect .contact-info h3{
    background-color: #00008B;
    color: #fff;
    text-align: center;
    font-size: 1em;
    padding: 5px;
}

.insurance-contect .contact-info .inner{
    padding: 10px;
}

.application .used-msg{
    color: #FF0000;
    font-weight: bold;
}

.application .used-msg p{
    margin-bottom: 10px;
}

.application .used-msg p a{
    text-decoration: underline;
}

.application .used.btn-area{
    margin-top: 20px;
}

.application .used.btn-area .btn{
    font-size: 1em;
}

.back-upload-check{
    text-align: center;
    margin-top: 30px;
}

.application-error{
    text-align: center;
}

.application-error .title-area {
    color: #FF0000;
    margin-top: 40px;
}

.application-error .title-area h1{
    margin-bottom: 5px;
    margin-top: 20px;
}

.application-error .title-area p{
    font-size: 1.2em;
}

.application-error .msg-area{
    margin-top: 40px;
    line-height: 1.8;
}

.application-error .msg-area p{
    margin-bottom: 10px;
}

.application-error .link-area{
    margin-top: 60px;
}

/* お問い合わせ */

.contact .lead{
    font-size: 0.8em;
}

.contact h1{
    background-color: #E4FBFC;
    padding: 5px;
    margin-bottom: 15px;
}

.contact h2{
    border-bottom: 1px solid #008070;
    font-size: 1.1em;
    padding-bottom: 5px;
    margin-bottom: 10px;
}

.contact .form-lead{
    font-size: 0.8em;
    margin-bottom: 20px;
}

.contact .upload-area{
    margin-top: 10px;
}

.policy-number-select table{
    width: 100%;
    border-collapse: collapse;
    font-size: 0.7em;
}

.policy-number-select table thead{
    background-color: #E4FBFC
}

.policy-number-select table th{
    padding: 5px;
}

.policy-number-select table td{
    text-align: center;
    padding: 5px;
}

.policy-number-select table td input{
    vertical-align: middle;
}

/* モーダル */

.modal {
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1;
}

.modal__bg {
    background: rgba(0, 0, 0, 0.7);
    height: 100vh;
    position: absolute;
    width: 100%;
}

.modal__content {
    background: #fff;
    border-radius: 5px 5px 0 0;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
}

.modal__inner{
    width: 90%;
    margin: auto;
    padding: 20px 0;
    max-width: 900px;
}

.modal__content .info-msg{
    margin-bottom: 60px;
}

.modal__content .btn-wrap{
    text-align: center;
}

.modal__content .btn-wrap .close{
    width: 70%;
}