/*ポップアップ用・member/request/flow用css*/

main{
    width: 100%;
    max-width: 660px;
    padding: 2rem;
    margin: 0 auto;
}

main.flow-contents{
    max-width: 800px;
}

h2{
    color: #fff;
    background-color: #0062b1;
    font-size: 2.2rem;
    padding: 10px 20px;
    margin-bottom: 20px;
}

.child h2{
    background-color: #e88db0;
}

.life h2{
    background-color: #5d97f1;
}

.flow h2{
    background-color: #0062b1;
}

h3{
    font-size: 2rem;
    padding: 0 5px;
    margin-bottom: 20px;
    border-left: 5px #0062b1 solid;
    border-bottom: 2px #0062b1 solid;
}

h4{
    color: #0062b1;
    font-size: 1.8rem;
    margin-bottom: 5px;
}

h5{
    font-size: 1.6rem;
}

.faq p, .rule-net p{
    margin-bottom: 1rem;
    font-size: 1.4rem;
}

.policy p{
    font-size: 1.4rem;
}

.child p, .life p, .kokuchi ol p{
    margin-bottom: 0;
}

.number-paragraph{
    text-indent: -2rem;
    margin-left: 2rem;
}

.rule-number{
    margin-right: 1rem;
}

p.declaration{
    margin-bottom: 40px;
}

.brackets-number-paragraph{
    text-indent: -4.2rem;
    margin-left: 4.2rem;
}

.policy-number{
    margin-right: 0.5rem;
}

.lower-paragraph{
    margin-left: 4.2rem;
}

.katakana-list .lower-text{
    display: block;
    text-indent: 0;
    margin-left: 3rem;
}

ol{
    margin-left: 30px;
    font-weight: bold;
    margin-bottom: 20px;
}

.child ol{
    color: #e88db0;
    margin-bottom: 0;
}

.life ol{
    color: #5d97f1;
}

.kokuchi ol, .rule-net ol, .policy ol{
    font-weight: normal;
    font-size: 1.4rem;
}

li{
    padding: 10px 0;
}

.kokuchi li{
    padding: 2px 0;
}

.child ul li {
    margin-left: 30px;
    color: #e88db0;
    font-weight: bold;
    list-style: disc;
}

.rule-net ol{
    counter-reset: number;
    padding: 0;
    margin: 0 0 1rem 2rem;
}

.rule-net ol li{
    list-style: none;
    counter-increment: number;
    position: relative;
    padding: 0 0 0 4rem;
}

.rule-net ol li::before{
    content: "（" counter(number, decimal) "）";
    position: absolute;
    left: 0;
    top: 0;
    width: 2rem;
}

.policy ol{
    counter-reset: number;
    padding: 0;
    margin: 0 0 0 4.2rem;
}

.katakana-list{
    text-indent: -2.7rem;
    margin-left: 2.7rem;
}

.katakana-list span{
    margin-right: 1rem;
}

.policy ol li{
    list-style: none;
    counter-increment: number;
    position: relative;
    padding: 0;
}

dl{
    width: 100%;
    margin: 20px 0;
}

dd{
    margin-bottom: 1rem;
    margin-left: 3rem;
}

.explanation{
    color: #000;
    font-size: 1.4rem;
    font-weight: normal;
}

.contact{
    color: #005693;
    font-weight: bold;
    margin-bottom: 20px;
}

.contact div{
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 2rem;
    white-space: nowrap;
}

.details{
    display: flex;
    gap: 1rem;
    color: #333;
    font-size: 1.4rem;
    font-weight: normal;
}

button{
    display: block;
    width: 15rem;
    padding: 10px;
    margin: 0 auto;
    color: #fff;
    font-weight: bold;
    border: none;
    border-radius: 50px;
    cursor: pointer;
}

button{
    background-color: #0062b1;
}

.child-button{
    background-color: #e88db0;
}

.life-button{
    background-color: #5d97f1;
}

.kokuchi-button{
    margin-top: 20px;
}

button:hover{
    filter: brightness(1.1);
}

.note{
    display: block;
    text-indent: -1.3rem;
    padding-left: 1.3rem;
}

p.kokuchi-text{
    font-size: 1.4rem;
    margin-bottom: 0;
}

p.life-color{
    color: #5d97f1;
}

.red{
    color: #f00;
}

.faq section, .rule-net section, .policy section{
    margin-bottom: 40px;
}

.toc{
    margin-bottom: 40px;
    font-weight: bold;
}

.toc ul{
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 10px;
}

.toc li{
    padding: 0;
}

.toc a{
    display: inline-block;
    width: 100%;
    padding: 10px 40px 10px 20px;
    color: #0062b1;
    border: 2px #0062b1 solid;
    border-radius: 10px;
    text-decoration: none;
    position: relative;
}

.toc a:after{
    position: absolute;
    top: 50%;
    right: 2rem;
    width: 1rem;
    height: 1rem;
    transform: translateY(-50%) rotate(45deg);
    border-right: 2px solid currentColor;
    border-top: 2px solid currentColor;
    content: "";
}

.date-block{
    margin-bottom: 40px;
}

.rule-date{
    display: grid;
    grid-template-columns: 6.6rem 3.3rem auto 6.6rem;
    gap: 0;
    justify-content: end;
    text-align: right;
}

.rule-date{
    margin-bottom: 0;
}

a{
    color: #0062b1;
    text-decoration: underline;
}

.bottom-gap{
    margin-bottom: 1rem;
}

.flow-list-box{
    margin: 20px;
}

.flow-list-box:last-child{
    margin-bottom: 0;
}

.flow ul li{
    text-indent: -1rem;
    padding: 0 0 0 2rem;
}

.flow ul li::before {
    display: inline-block;
    content: "◇";
    margin-right: 5px;
}

footer{
    margin-top: auto;
}

.mt-1rem{
    margin-top: 1rem;
}

.sms-dl dt{
    padding: 0 5px;
    margin-bottom: 20px;
    border-left: 5px #0062b1 solid;
    border-bottom: 2px #0062b1 solid;
}

@media screen and (max-width: 960px){
    .details{
        flex-direction: column;
        gap: 0;
    }

    .toc ul{
        font-size: 1.4rem;
    }
}