@charset"utf-8";

.section--recruit{
    margin: 5px 4.2% 50px 6.4%;
}
.accordion {
    max-width: 500px;
    margin: 20px auto 0;
}

/* クリックするヘッダー部分 */
.accordion-title {
    background-color:var(--primary-darkbrown);
    color:var(--primary-white);
    padding: 5px 10px;
    font-weight: 700;
    font-size: 1.8rem;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    list-style: none; /* デフォルトの三角形を消す（Chrome/Firefox） */
}

/* Safari用のデフォルト三角形消し */
.accordion-title::-webkit-details-marker {
    display: none;
}

/* 右側の「∨」矢印をCSSで自作 */
.accordion-title::after {
    content: "";
    position: absolute;
    right: 20px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--primary-white);
    border-bottom: 2px solid var(--primary-white);
    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.5s; /* 開閉時のアニメーション */
}

/* アコーディオンが開いているとき（open属性があるとき）の矢印の向き */
.accordion[open] .accordion-title::after {
    transform: translateY(-30%) rotate(-135deg);
}

/* 中身の余白 */
.accordion-content {
    padding: 20px 2.6%;
}

/* 説明リスト（dl）のスタイル */
.info-list dt {
    font-weight:700;
    margin-top: 20px;
    padding-bottom: 8px;
}
.info-list dt:first-child {
    margin-top: 0;
}

.info-list dd {
    padding-bottom: 15px;
    line-height: 1.6;
    border-bottom: 1px solid var(--primary-darkbrown);
}

/* 箇条書き（ul）の調整 */
.sub-title {
    margin-top: 25px;
}
.li__small{
    font-size: 1.5rem;
}
.note{
    padding-left: 20px;
    font-size: 1.5rem;
}

.recruit__accordion{
    padding-bottom: 50px;
}

/* PC表示 */
@media screen and (min-width:769px) {
    .section--recruit{
        margin: 100px 12.2% 100px 12.7%;
}
    .accordion {
        max-width: 1080px;
        margin: 36px auto 0;
}
    .accordion:first-of-type{
        margin-top:100px ;
    }
    .accordion-title{
        font-size: 2.4rem;
        padding: 10px 20px;
        border-radius: 10px;
    }

/* 説明リスト（dl）のスタイル */
    .info-list dt {
        font-size: 2.4rem;
        padding-bottom: 15px;
}
    .info-list dd {
        padding-bottom: 20px;
        font-size: 2rem;
    }

/* 箇条書き（ul）の調整 */
    .li__small{
        font-size: 2rem;
}
    .note{
        font-size: 2rem;
}
    .recruit__accordion{
    padding-bottom: 100px;
}
}