@charset "UTF-8";

/*アコーディオン全体*/
.accordion-area{
    list-style: none;
    width: 96%;
    max-width: 900px;
    margin: 0 auto;
    padding: 0;
}

.accordion-area section {
    border: 1px solid #ccc;
}   
.accordion-box {
    display: block;
    list-style: none;
    padding-left: 3%;
    margin-bottom: 10px;
}
.accordion-test {
    pointer-events: none;
    text-align: center;
}


/*イメージ画像について*/
.other-item div{
    width: 100%;
    height: 325px;
}
.other-item-header {
    margin: 0px;
}


.other-img01 {
    background: url('./../img/IDphoto_top_02.jpg')center/cover no-repeat;
}
.other-img02 {
    background: url('./../img/auditionphoto_top_02.jpg')center/cover no-repeat;
}
.other-img03 {
    background: url('./../img/profilephoto_top_02.jpg')center/cover no-repeat;
}
.other-img04 {
    background: url('./../img/matchmakingphoto_top_02.jpg')center/cover no-repeat;
}
.other-img05 {
    background: url('./../img/SNSphoto_top_02.jpg')center/cover no-repeat;
}
.other-img06 {
    background: url('./../img/endoflifephoto_top_02.jpg')center/cover no-repeat;
}

/* Flexboxについて */
/* Flexコンテナ（親要素）の記述 */
.other-container {
    display: flex;
    justify-content: space-around;
    flex-flow: row wrap;
}

/* Flexアイテム（子要素）の記述 */
.other-item {
    flex: 0 1 33%;
}
.accordion-box a {
    text-align: center;
    margin-bottom: 20px;
}


@media screen and (max-width:768px) {
.other-container {
    flex-wrap: nowrap;
    flex-direction: column;
}
.other-item-header {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
}
.accordion-test {
    flex: 0 1 59%
}
.accordion-box {
    flex: 2;
}

 /*スマホ時のアコーディオンメニュー(画面サイズが768px以下に適用)*/
    .other-item {
        margin: 2% 0;
    }
    /*イメージ画像について*/
    .other-item div {
        width: 28%;
        max-height: 30vW;
        margin: 2%;
    
    }
    .other-img01 {
        background: url('./../img/IDphoto_top_sp.jpg')center/cover no-repeat;
    }
    .other-img02 {
        background: url('./../img/auditionphoto_top_sp.jpg')center/cover no-repeat;
    }
    .other-img03 {
        background: url('./../img/profilephoto_top_sp.jpg')center/cover no-repeat;
    }
    .other-img04 {
        background: url('./../img/matchmakingphoto_top_sp.jpg')center/cover no-repeat;
    }
    .other-img05 {
        background: url('./../img/SNSphoto_top_sp.jpg')center/cover no-repeat;
    }
    .other-img06 {
        background: url('./../img/endoflifephoto_top_sp.jpg')center/cover no-repeat;
    }


    /*アコーディオンタイトル*/
    .accordion-test {
        position: relative;
        /*+マークの一基準とするためのrelative指定*/
        cursor: pointer;
        font-size: 1.2rem;
        font-weight: normal;
        padding: 3%;
        transition: all .5s ease;
        pointer-events: all;
        
    }

    /*アイコンの+と×*/
    .accordion-test::before,
    .accordion-test::after {
        position: absolute;
        content: '';
        width: 10px;
        height: 2px;
        background-color: #333;   
    }
    .accordion-test::before {
        top: 48%;
        right: -15px;
        transform: rotate(0deg);
    }
    .accordion-test::after {
        top: 48%;
        right: -15px;
        transform: rotate(90deg);
    }

    /* closeというクラスがついたら形状変化 */
    .accordion-test.close::before {
        transform: rotate(45deg);
    }
    .accordion-test.close::after {
        transform: rotate(-45deg);
    }

    /* アコーディオンで現れるエリア */
    .accordion-box {
        display: none;/*はじめは非表示*/
        background:  #f3f3f3;
        margin: 0 2% 2% 2%;
        padding: 3%;
    }
    .accordion-box p {
        text-align: center;
    }
    /* h3(タイトル)にかかっているfloatの初期値を打ち消す */
    .other-item h3 {
        float: none;
    }
}
/*スマホ時のアコーディオンメニューについてここまで*/






/*比較表について*/
.table-wrap {
    overflow: auto;
    max-width: 80vw;
    height: 500px;
    margin: 0 auto 5%;
    
}
.table-wrap table {
    border-spacing: 0;
}
.table-wrap td {
    white-space: nowrap;
    border-right: 1px solid #5f5352;
    border-bottom: 1px solid #5f5352;
    background: #FFF;
    padding: 0 10px 0 5px;
}
.table-wrap th {
    width: 300px;
    height: 20vh;
    white-space: nowrap;
    border-right: 1px solid #5f5352;
    border-bottom: 1px solid #5f5352;
    background: #f9f8f7;
    position: sticky;
    top: 0;
    left: 0;
    text-align: center;
    padding: 5px;
}

.table-wrap tr:first-child, th{
    border-top: 1px solid #5f5352;
    
}
.table-wrap th:first-child{
    border-left: 1px solid #5f5352;
}
.table-wrap tr:first-child, .table-wrap th:first-child{
    z-index: 1;
}
.table-wrap th.fixed01 {
    z-index: 2;
}
.fixed02 {
    font-size: 1.9rem;
    line-height: 0.9;
}
.fixed02 span {
    font-size: 1.3rem; 
}
.comparisonchart {
    text-align: center;
    text-decoration: none;
    margin: 65px auto;

}
.comparisonchart a {
    display: inline;
    color: #565656;
    padding: 1.5rem 5em;
    border: solid 1px #ddd;
    background: #fff;
}
.comparisonchart a:hover {
    opacity: 50%;
    text-decoration: none;
}


 /*比較表について(画面サイズが768px以下に適用)*/
@media screen and (max-width:768px) {
.table-wrap {
    height: 550px;
}
.table-wrap td {
    padding: 0 4px 0 2px;
}
.table-wrap th {
    width: 10px;
    height: 14vh;
}
.fixed02 {
    font-size: 1.4rem;
    line-height: 1.3;
}
.fixed02 span {
    font-size: 1.1rem; 
}
.table-wrap td {
    font-size: 1rem;
}


}


.other-font {
    font-family: "Noto Sans JP", "游ゴシック Medium", "Yu Gothic Medium",    "游ゴシック体", YuGothic, "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    letter-spacing: 0.1em;
    line-height: 2;
}