@charset "UTF-8";

/*

    Yone Website

    Copyright (C) よね/Yone

    No modification or reproduction of any kind is permitted.
    改変や複製を一切禁じます。

*/

h2 {
    font-size: 1.2em;
}

#main {
    padding: 2em 10%;
}

#pageTitle {
    padding: 0.5em;
    text-align: center;
    font-size: 1.5em;
}

#note {
    text-align: center;
    font-size: 1.2em;
}

#note a {
    color: #40c080ff;
}

#typeList {
    padding: 4em 0;
}

.sectionTitle {
    display: flex;
    font-size: 1.2em;
}

.sectionTitle::before {
    height: auto;
    width: 4px;
    margin-right: 0.7em;
    background-color: #808080ff;
    content: "";
}

#typeList>ul {
    list-style: none;
}

#typeList>ul>li {
    width: calc(100% - 2em);
    max-width: calc(2em + 24em + 2em);
    margin: 4em auto;
    box-shadow: 0 0 8px 8px #00000020;
    border-radius: 2rem;
    padding: 1em;
    transition: all 0.2s;
    cursor: pointer;
    user-select: none;
}

#typeList>ul>li>a {
    display: block;
    width: 100%;
    height: 100%;
    color: initial;
    text-decoration: none;
}

#typeList>ul>li:hover {
    box-shadow: 0 0 8px 4px #00000020;
}

#typeList .payment-logo {
    display: block;
    width: 80%;
    margin: 0 auto;
    max-width: 24em;
}

#typeList>ul>li>a>span {
    display: block;
    margin-top: 0.5em;
    text-align: center;
    font-size: 1.5em;
}

#typeList>ul>li>a>span::after {
    display: block;
    height: 2px;
    width: 20%;
    margin: 0.5em auto 0 auto;
    background-color: #808080ff;
    content: "";
}

#path {
    margin-top: 1em;
}

#note {
    margin-top: 1em;
}

#howto {
    padding: 2em 0;
}

#howto li {
    margin-top: 0.5em;
}

.qrcode {
    display: block;
    width: 16em;
}

#bank {
    padding: 2em 0;
}

#bank>ul {
    list-style: none;
    padding: 1em 0;
}

#bank>ul>li {
    margin-top: 0.5em;
}

#bank>ul>li>span {
    display: block;
    width: auto;
    margin: 0.2em;
    padding: 0.2em;
    background: #80808040;
    font-size: 1.3em;
}