@charset "utf-8";
html {
    margin: 0;
}
img {
    width: 100%;
}
a:hover {
    filter: brightness(0.8);
    transition: .5s;
}
button:hover {
    filter: brightness(0.8);
    transition: .5s;
}

#first-view {
    background-image: url("/img/customer/main.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
@media screen and (max-width: 480px) {
    #first-view nav img {
        max-width: 180px;
    }
}
.background-view {
    background-image:url('/img/customer/background.png');
    background-repeat: repeat-y;
    padding: 2rem 1rem;
}
.brown-back {
    background: linear-gradient(0.25turn, #290708, #62251A, #290708, #873412, #290708);
    text-align: center;
    min-height: 125px;
    position: relative;
}
.brown-back img {
    width: 100%;
    max-width: 270px;
    margin: 1rem;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.9);;
}
.container {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    padding: 0;
}
header nav img {
    max-width: 210px;
    box-shadow: 3px 5px 10px #000;
}
footer nav {
    font-family: 'Yu Mincho Demibold', serif;
    background: #000;
}
footer nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

@media screen and (min-width:768px) {
    footer nav ul li:nth-of-type(2) {
        border-left: 1px solid #fff;
        border-right: 1px solid #fff;
    }
    footer nav ul li:nth-of-type(4) {
        border-left: 1px solid #fff;
    }
    footer nav a {
        padding: 0 3rem;
    }
}

footer nav a {
    color: #fff;
    font-weight: bold;
    font-size: 1.1rem;
    text-decoration: none;
}

#about,
#faq,
#offer-system,
.white-background {
    margin: 0 auto;
    padding: 1rem;
    width: auto;
    max-width: 830px;
}
#about,
#faq,
#offer-system {
    border: 10px solid;
    border-image: linear-gradient(0.25turn, #9D5D26, #F1D668, #9D5D26, #F1D668, #9D5D26);
    background: #fff;
    border-image-slice: 1;
}
.white-background {
    font-family: 'BIZ UDPMincho', 'Yu Mincho Demibold', serif;
}
#about h2,
#faq h2,
#offer-system h2 {
    padding: .75rem;
    background: linear-gradient(0.5turn, #DB0010, #7B0001);
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
    font-family: system-ui, Arial, Helvetica, sans-serif; /* このフォントでダメなら文字の画像を貰う */
}
#about h2 span,
#faq h2 span,
#offer-system h2 span {
    background: linear-gradient(#FFEE00 20%, orange 40%, #FFEE00 60%, #fff 10%, #F39F29 90%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
#about p,
#faq p,
#agreement p,
#privacy p {
    font-weight: bold;
    font-family: 'BIZ UDPMincho', 'Yu Mincho Demibold', serif;
    margin-bottom: 0;
}
@media screen and (min-width: 480px) {
    #register-guide img {
        max-width: 60%;
    }
    #chairman-message img {
        max-width: 85%;
    }
}
#election-number .card {
    /* margin: 10px;
    width: calc(50% - 20px); */
    border: 3px solid #9D831F;
    background-color: #fff;
    font-size: 1.75em;
    color: #000;
    border-radius: 0;
}

#faq h3 {
    margin-top: 1rem;
    padding: .5rem;
    font-size: 1.2rem;
    font-weight: bold;
    background: #F8C17C;
}

#offer-system .d-table {
    width: 100%;
    font-weight: bold;
}
#offer-system .d-table-cell {
    padding: .5rem;
    border-image: linear-gradient(0.25turn, #9D5D26, #F1D668, #9D5D26);
    border-top: 4px solid;
    border-right: 4px solid;
    border-image-slice: 1;
}
#offer-system .d-table-cell:nth-of-type(1) {
    border-left: 4px solid;
}
#offer-system .d-table-row:last-of-type .d-table-cell {
    border-bottom: 4px solid;
}

#agreement {
    font-family: 'Yu Mincho Demibold', serif; /* このフォントでダメなら文字の画像を貰う */
}
#tradelaw h2,
#funds-settlementlaw h2,
#agreement h2,
#privacy h2 {
    font-family: 'Yu Mincho Demibold', serif; /* このフォントでダメなら文字の画像を貰う */
    font-weight: bold;
    border-top: 5px solid #603813;
    border-bottom: 5px solid #603813;
    color: #603813;
}
#tradelaw .row,
#funds-settlementlaw .row {
    padding: 1rem 0;
    border-top: 1px solid #000;
    --bs-gutter-x: 0; /* 0にしないとborderがはみ出る */
}
#tradelaw .row:last-of-type,
#funds-settlementlaw .row:last-of-type {
    margin-bottom: 2rem;
    border-bottom: 1px solid #000;
    --bs-gutter-x: 0; /* 0にしないとborderがはみ出る */
}
#tradelaw h3,
#funds-settlementlaw h3 {
    color: #603813;
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: -1px;
    margin-bottom: 0;
}
#tradelaw .row div,
#funds-settlementlaw .row div {
    font-weight: bold;
}
#agreement h3 {
    background: #603813;
    color: #fff;
    padding: .5rem 1rem;
    font-size: 1rem;
    font-weight: bold;
}
#agreement p {
    padding: 0 .5rem .5rem;
}

#customer-card {
    width: 100%;
    max-width: 480px;
    background: linear-gradient(0.25turn, #000, #304689, #000, #304689, #000, #000, #304689);
    position: absolute;
    top: -50px;
    right: 0;
    left: 0;
    margin: auto;
    border-radius: 10px;
    box-shadow: 2px 2px 10px #000,
                -2px -2px 10px #000;
}

#customer-card a {
    display: block;
    border: 1px solid #000;
    text-decoration: none;
}
#customer-card a:hover {
    filter: brightness(0.9);
    transition: .5s;
}


#pre-check,
#pre-register,
#register,
#registerd,
#complete,
#forgot-password,
#reset-password {
     width:100%;
     max-width:480px;
     margin:0 auto;
}
#mailbox table tbody tr {
    cursor: pointer;
}
#mailbox table tbody tr:hover {
    background: rgba(0, 0, 0, .1);
}