@charset "UTF-8";

/* コンテンツ
------------------------------*/
:root {
  --blue : #163f9b;
  --inter: "Inter", sans-serif;
}


.__list.__tab > .__tab-item{
    height: 5.123em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 2px solid #ececec;
    font-size: 1.125em;
    font-weight: 300;
    letter-spacing: 0;
    padding-left: 3.75em;
    margin: 2.5em 0 0;
    color: #111;
    transition: .3s;
}
.__list.__tab .__tab-item > .__border{
    width: 1.25em;
    height: 1.25em;
    position: relative;
    display: flex;
    justify-content: space-between;
    position: absolute;
    left: 1.25em;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    transition: .3s;
}
.__list.__tab .__tab-item > .__border span{
    width: 2px;
    height: 100%;
    background-color:#aaaaaa;
    display: block;
}

.__list.__tab .__tab-item > .__en{
    font-size: .875em;
    font-family:var(--inter);
    font-weight: 300;
    color: #aaaaaa;
    display: block;
    transition: .3s;
}

.__list.__tab > .__tab-item:hover,
.__list.__tab > .__tab-item.is-active{
    background-color: var(--blue);
    color: #FFF;
    border-color: var(--blue);
}
.__list.__tab > .__tab-item:hover > .__border,
.__list.__tab > .__tab-item.is-active > .__border{
    transform: translateY(-50%) rotate(0);
}
.__list.__tab > .__tab-item:hover > .__border span,
.__list.__tab > .__tab-item.is-active > .__border span{
    background-color: #FFF;
}

.__list.__tab > .__tab-item:hover > .__en,
.__list.__tab > .__tab-item.is-active > .__en{
    color: #FFF;
}

.__tab-contents{
    display: none;
}
.__tab-contents.is-active{
    display: block;
}

.__tab-contents > .__subtitle{
    font-size: 1.25em;
    margin-bottom: 2em;
}

.__tab-contents .__item.__faq .__question{
    height: 4.525em;
    font-size: 1.125em;
    background-color: #ececec;
    position: relative;
    padding-left: 5.25em;
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    transition: .3s;
}
.__tab-contents .__item.__faq .__question:hover{
    opacity: .75;
}

.__tab-contents .__item.__faq .__question:before{
    content: '';
    width: 1em;
    height: 2px;
    background-color: #000;
    position: absolute;
    top: 50%;
    right: 1em;
    transform: translateY(-50%);
}
.__tab-contents .__item.__faq .__question:after{
    content: '';
    width: 1em;
    height: 2px;
    background-color: #000;
    position: absolute;
    top: 50%;
    right: 1em;
    transform: translateY(-50%) rotate(90deg);
    transition: .1s;
}

.__tab-contents .__item.__faq .__question span:before{
    content: 'Q';
    font-size: 1.875em;
    font-family:var(--inter);
    position: absolute;
    top: 50%;
    left: 1em;
    transform: translateY(-50%);
}
.__tab-contents .__item.__faq.is-open .__question:after{
    transform: translateY(-50%) rotate(0);
}

.__tab-contents .__item.__faq .__answer{
    padding:0 3.125em 0 5.25em;
    font-size: 1.125em;
    line-height: 2;
    border: 2px solid #ececec;
    position: relative;
    height: 0;
    margin-bottom: 1.25em;
    overflow: hidden;
    transition: .3s;
}
.__tab-contents .__item.__faq.is-open .__answer{
    height: auto;
    padding:1.25em 3.125em 1.56em 5.25em;
}


.__tab-contents .__item.__faq .__answer:before{
    content: 'A';
    font-size: 1.875em;
    line-height: 1;
    color: var(--blue);
    font-family:var(--inter);
    position: absolute;
    top: .75em;
    left: 1em;
}