

.qa .st-PageContent
{
    max-width: 1000px;
    margin: 0 auto;
}
@media screen and (min-width: 1025px)
{
    .qa .st-PageContent
    {
        padding: 160px 0 130px;
    }
}
@media screen and (min-width: 769px) and (max-width: 1024px)
{
    .qa .st-PageContent
    {
        padding: 80px 15px 120px;
    }
}
@media screen and (max-width: 768px)
{
    .qa .st-PageContent{
        padding: 40px 16px 80px;
    }
}
.faq-Links ul
{
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
}
.faq-Links ul li
{
    position: relative;

    display: flex;

    width: calc((100% - 18px) / 2);

    border: 1px solid #231815;

    justify-content: center;
    align-items: center;
}
@media screen and (max-width: 768px)
{
    .faq-Links ul li
    {
        width: calc((100% - 6px) / 2);

        border: 1px solid #231815;
    }
}
.faq-Links ul li a
{
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.4;
    display: flex;
    justify-content: center;
    align-items: center;
    letter-spacing: .12em;
    line-height: 1;
    width: 100%;
    height: 100%;
    padding: 32px 35px;
    color: #000;
    text-align: center;
}
@media screen and (max-width: 768px)
{
    .faq-Links ul li a
    {
        font-size: 1.1rem;
        padding: 18px 16px 26px;
    }
}
/* @media screen and (max-width: 374px)
{
    .faq-Links ul li a
    {
        padding: 9px 0 9px 15px;
    }
} */
.faq-Links ul li a:hover
{
    background-color: #f2f2f2;
}
.faq-Links ul li::before
{
    position: absolute;
    top: 50%;
    right: 32px;
    transform: translate(0, -50%);
    width: 15px;
    height: 15px;
    content: '';
    background-image: url('https://www.ptcgic-cr.com/2024/wp-content/themes/pokeigp/assets/images/common/ic_arrow2_bottom.svg');
    background-repeat: no-repeat;
    background-size: contain;
}
@media screen and (max-width: 768px)
{
    .faq-Links ul li::before
    {
        top: auto;
        bottom: 8px;
        transform: translate(-50%, 0);
        left: 50%;
        width: 7px;
        height: 7px;
    }
}
.faq-Links ul li:nth-last-child(-n+4)
{
    margin-top: 16px;
}
@media screen and (max-width: 768px)
{
    .faq-Links ul li:nth-last-child(-n+4)
    {
        margin-top: 11px;
    }
}
.faq-Links ul li:nth-child(even)
{
    margin-left: 16px;
}
@media screen and (max-width: 768px)
{
    .faq-Links ul li:nth-child(even)
    {
        margin-left: 5px;
    }
}

.faq-Heading {
    font-size: 3rem;
    font-weight: 700;
    letter-spacing: .12em;
    line-height: 1;
    text-align: center;
    color: #000;
    margin: 169px auto 0;
}
@media screen and (max-width: 768px)
{
    .faq-Heading {
        font-size: 1.5rem;
        margin: 60px auto 0;

    }
}

.faq-Heading:first-child {
    margin: 152px auto 0;
}
@media screen and (max-width: 768px)
{
    .faq-Heading:first-child
    {
        margin:  62px auto 0;
    }
}

.faq-List_Wrapper
{
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 2;

    margin-top: 40px;
}
@media screen and (max-width: 768px)
{
    .faq-List_Wrapper
    {
        font-size: 1.4rem;
        line-height: 1.4;

        margin-top: 23px;
    }
}
.faq-List:not(:first-child)
{
    margin-top: 40px;
}
@media screen and (max-width: 768px)
{
    .faq-List:not(:first-child)
    {
        margin-top: 24px;
    }
}

/* 閉じた時の高さ = タイトル部分の高さ で計算するので、borderを使うとその分ずれることに注意 */
.faq-List {
    overflow: hidden;
    height: var(--acc-height--closed, auto);
    transition: height .3s;
}
.faq-List.is-opened{
    height: var(--acc-height--opened, auto);
}

.faq-List + .faq-List {
    margin-top: 23px;
}

/* display:list-item 以外にしてデフォルトの三角アイコンを非表示にする */
.faq-List_Summary {
	display: block;
	padding: 17px 87px 17px 111px;
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.7;
    letter-spacing: .06em;
    color: #fff;
    text-align: left;
	background: #005499;
	/* cursor: pointer; */
    position: relative;
}
@media screen and (max-width: 768px)
{
    .faq-List_Summary {
        font-size: 1.1rem;
        padding: 10px 32px 10px 50px;
    }
}

/* Safariで表示されるデフォルトの三角形アイコンを削除 */
.faq-List_Summary::-webkit-details-marker {
  display: none;
}

.faq-List_Summary::before,
.faq-List_Summary::after {
    /* content: ""; */
    content: none;
    position: absolute;
    transform: translateY(-50%);
    display: inline-block;
    background-color: #fff;
    transition: transform .2s;
}
.faq-List_Summary::before {
    top: 50%;
    right: 25px;
    width: 25px;
    height: 2px;
}
@media screen and (max-width: 768px)
{
    .faq-List_Summary::before {
        top: 50%;
        right: 13px;
        width: 12px;
        height: 1px;
    }
}
.faq-List_Summary::after {
    top: 50%;
    right: 37px;
    width: 2px;
    height: 25px;
}
@media screen and (max-width: 768px)
{
    .faq-List_Summary::after {
        top: 50%;
        transform: translateY(-50%);
        right: 1.7em;
        width: 1px;
        height: 12px;
    }
}
.faq-List_Summary > img {
    position: absolute;
    left: 37px;
    top: 50%;
    transform: translateY(-50%);
}
@media screen and (max-width: 768px)
{
    .faq-List_Summary > img {
        width: 14px;
        height: 37px;
        left: 19px;
    }
}

.faq-List[open] > .faq-List_Summary::after{
    transform: translateY(-50%) rotate(90deg);
}

.faq-List_Content {
    padding: 55px 87px 39px 111px;
    background-color: #D9E7FF;
    position: relative;
}
@media screen and (max-width: 768px)
{
    .faq-List_Content
    {
        padding: 25px 32px 20px 50px;
    }
}
.faq-List_Content > img {
    position: absolute;
    left: 37px;
    top: 55%;
    transform: translateY(-50%);
}
@media screen and (max-width: 768px)
{
    .faq-List_Content > img {
        width: 14px;
        height: 37px;
        left: 19px;
        top: 34px;
    }
}

.faq-List_Content > p {
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 2;
    color: #000;
}
@media screen and (max-width: 768px)
{
    .faq-List_Content > p {
        font-size: 1.1rem;
        line-height: 1.61;
    }
}
.faq-List_Content .note {
    display: block;
    font-size: 1.3rem;
    font-weight: 400;
    margin-top: 2em;
}
@media screen and (max-width: 768px)
{
    .faq-List_Content .note {
        font-size: 1rem;
        line-height: 1.61;
        margin-top: 0;
    }
}
.faq-List_Content p + ul.note li {
    text-indent: -1em;
}
.faq-List_Content p + ul.note {
    margin-top: 2em;
}
.faq-List .note li::before {
    /* ※ */
    content: ' \203B';
    font-size: 1.4rem;
    line-height: 1.7;
    position: relative;
    left: -0.5em;
}
@media screen and (max-width: 768px)
{
    .faq-List .note li::before {
        font-size: 1.1rem;
        line-height: 1.61;
    }
}

.faq-List_Content a {
    color: #2E87C0;
    text-decoration: underline;
}
@media (hover: hover) and (pointer: fine) {
    .faq-List_Content a:hover {
        text-decoration: none;
    }
}
@media screen and (max-width: 768px)
{
    footer {
        margin-top: -140px;
    }
}
