@charset "UTF-8";

/* 最新情報 */
.sec-topics {

    .content-box {
        .tp-list{
            margin-top: 5rem;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-column-gap: 3.2rem;
            grid-row-gap: 3.2rem;

            @media screen and (max-width: 767px) {
              grid-template-columns: 1fr;
            }

            .tp-item{
                border-radius: 1rem;
                border: 3px solid #5FBAAA;
                overflow: hidden;
                transition: all 0.3s ease;

                &.auto-expanded {
                    .title-box {
                        opacity: 0.7;
                        
                        &::before, &::after {
                            opacity: 0.5;
                        }
                    }
                }
            
                .title-box{
                    color: #fff;
                    font-size: 2.4rem;
                    font-weight: bold;
                    background-color: #5FBAAA;
                    padding: 2.6rem;
                    position: relative;
                    transition: all 0.3s ease;

                    @media screen and (max-width: 767px) {
                      font-size: 1.6rem;
                      line-height: 1.5;
                      padding-right: 4rem;
                    }

                    &.expandable {
                        cursor: pointer;

                        &::before, &::after {
                            content: '';
                            position: absolute;
                            right: 2.6rem;
                            top: 50%;
                            width: 2px;
                            height: 20px;
                            background: #fff;
                            transition: all 0.3s ease;
                        }

                        &::before {
                            transform: translateY(-50%);
                        }
                        
                        &::after {
                            transform: translateY(-50%) rotate(90deg);
                        }

                        &.expanded {
                            &::before {
                                opacity: 0 !important;
                                transform: translateY(-50%) rotate(0deg) !important;
                            }
                        }
                    }
                
                }
                .text-box{
                    padding: 3rem 3.5rem;
                    background-color: #fff;
                    line-height: 1.8;
                    min-height: 30rem;
                    max-height: 30rem;
                    overflow: hidden;
                    position: relative;
                    transition: max-height 0.3s ease, padding 0.3s ease;

                    &.has-overflow {
                        padding-bottom: 5rem;
                        
                        &::after {
                            content: '...';
                            position: absolute;
                            bottom: 3rem;
                            right: 3.5rem;
                            background: linear-gradient(to right, transparent, #fff 20%, #fff);
                            color: #666;
                            font-size: 1.6rem;
                            padding-left: 2rem;
                            opacity: 1;
                            transition: opacity 0.2s ease 0.1s;
                            z-index: 1;
                        }
                        
                        &::before {
                            content: '';
                            position: absolute;
                            bottom: 0;
                            left: 0;
                            right: 0;
                            height: 5rem;
                            background: linear-gradient(to bottom, transparent, #fff 40%);
                            pointer-events: none;
                            opacity: 1;
                            transition: opacity 0.2s ease 0.1s;
                            z-index: 1;
                        }
                    }

                    &.expanded {
                        max-height: 200rem;
                        padding-bottom: 3rem;

                        &::after {
                            opacity: 0;
                            transition: opacity 0.15s ease;
                        }
                        
                        &::before {
                            opacity: 0;
                            transition: opacity 0.15s ease;
                        }
                    }

                    & b {
                        font-size: 1.8rem;
                        color: #5FBAAA;
                        margin-bottom: 1.6rem;
                    }

                    & p {
                        margin-bottom: 2rem;
                    }

                    & a {
                        text-decoration: underline;
                        position: relative;

                                &[target="_blank"]::after {
                                    position: absolute;
                                    content: '';
                                    top: 5px;
                                    right: -3rem;
                                    width: 2.5rem;
                                    height: 2.5rem;
                                    background-size: contain;
                                    background-repeat: no-repeat;
                                    background-image: url(../../../common/img/icon_external_arrow.svg);
                                    display: none;

                                    @media screen and (max-width: 767px) {
                                      width: 2rem;
                                      height: 2rem;
                                      top: 20%;
                                      right: -2rem;
                                    }

                                }
                            }
                    }

                    & ul {
                        margin-bottom: 1.6rem;

                        & li {

                            &::marker {
                                content: '・' !important;
                            }

                            & a {
                                text-decoration: underline;
                            }
                        }
                    }
                
                }
            }
        }
    }

/* 加入証明書の発行・証券番号について */
.sec-issue {

    .content-box {
        & p:first-child {
            margin-bottom: 4rem;
        }
        .buttons-box {
            display: flex;
            justify-content: center;

            & a {
              width: 38rem;
              height: 7rem;
              border-radius: 60px;
              @media screen and (max-width: 767px) {
                          width: 100%;
                          line-height: 1.6;
                          height: 5rem;
                          border-radius: 30px;
                        
                      }
            }
            @media screen and (max-width: 767px) {
              flex-direction: column;

            }

            &:nth-child(2) {
                gap: 2.7rem;
                margin-bottom: 5rem;
            }

            &:last-child {
                flex-direction: column;
                gap: 2rem;
                align-items: center;

                @media screen and (max-width: 767px) {
                  align-items: flex-start;
                }

                & p {
                    margin: 0;
                }

                & div {
                    @media screen and (max-width: 767px) {
                        width: 100%;
                    }

                    & a {
                        width: 38rem;
                        height: 7rem;
                        border-radius: 60px;
                        line-height: 1.6;
    
                        @media screen and (max-width: 767px) {
                            width: 100%;
                          
                        }
                    }
                }

            }

        }
    }
}

/* 学生生活における事故に関する統計分析情報 */
.sec-statistics {

    & a[target="_blank"] {
        color: var(--primary-color);
        text-decoration: underline;
        position: relative;

                                &[target="_blank"]::after {
                                    position: absolute;
                                    content: '';
                                    top: 0;
                                    right: -3rem;
                                    width: 2.5rem;
                                    height: 2.5rem;
                                    background-size: contain;
                                    background-repeat: no-repeat;
                                    background-image: url(../../../common/img/icon_external_arrow.svg);

                                    @media screen and (max-width: 767px) {
                                      width: 2rem;
                                      height: 2rem;
                                      top: 40%;
                                      right: -2rem;
                                    }

                                }
    }

    .content-box {
        .stt-list{
            display: flex;
            gap: 3.5rem;
            margin: 5rem 0;

            @media screen and (max-width: 767px) {
              flex-direction: column;
              gap: 5rem;
            }

            .stt-item{
                flex: 1;
                display: flex;
                flex-direction: column;
                gap: 2rem;
            
                .item-img-box{
                    border: 2px solid #5FBAAA;
                    border-radius: 2rem;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    padding: 3rem 0;
                
                }
                .item-text-box{
                    line-height: 1.6;
                    font-size: 1.6rem;
                    display: flex;
                    flex-direction: column;
                    flex: 1;

                    @media screen and (max-width: 767px) {
                      
                    }
                
                    .top-text{
                        font-weight: bold;
                        margin-bottom: 1.4rem;
                        flex: 0 0 10rem;

                        @media screen and (max-width: 767px) {
                          flex: 0 0 auto;
                        }
                    
                    }
                    .mid-text{
                        margin-bottom: 3rem;
                        flex: 1;
                        margin-top: auto;
                    }
                }
                .item-button-box{
                    align-self: center;
                    margin-top: auto;
                
                    .common-elip-button{
                        border: 1px solid #5FBAAA;
                        width: 30rem;
                        height: 5rem;
                        text-decoration: none;

                        &[target="_blank"]::after {
                            display: none;
                        }
                    
                        .btn-text{
                            color: #5FBAAA;
                        
                        }
                        .btn-icon{
                            stroke: #5FBAAA;
                            fill: #5FBAAA;
                        
                        }
                    }
                }
            }
        }

    }
}

/* お問合せ */
.sec-contact {
    padding-bottom: 9rem;

    .content-box {
        .contact-list{
            margin-top: 6rem;
            display: flex;
            flex-direction: column;
            gap: 7rem;

            @media screen and (max-width: 767px) {
              gap: 4rem;
              margin-top: 4rem;
            }

            .contact-item{
            
                .title{
                    margin-bottom: 4rem;

                    @media screen and (max-width: 767px) {
                      margin-bottom: 2rem;
                    }
                }

                .detail-table{

                    & td a {
                        color: var(--primary-color);
                        text-decoration: underline;
                    }

                    & th, & td {
                        @media screen and (max-width: 767px) {
                            width: 100% !important;
                            display: block !important;
                        }
                    }

                    & th {
                        @media screen and (max-width: 767px) {
                            padding: 1rem 2rem;
                        }
                    }
                
                }
            }
        }
    }
}


.common-blue-title {
    @media screen and (max-width: 767px) {
      border-radius: 0 !important;
    }
}