@charset "UTF-8";

.top-detail {
    padding-bottom: 9rem;
    
    @media screen and (max-width: 767px) {
      padding-bottom: 6rem;
    }

    .detail-table {

        & td {
            line-height: 1.5;

            & p {
                line-height: 1.5;
            }

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

        & th {

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

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

/* アクセス情報 */

.sec-access {

    .content-box {
        
        .map-item{

            display: flex;
            gap: 10rem;

            @media screen and (max-width: 1025px) {
                flex-direction: column;
                align-items: center;
              
            }

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

            .map-box{
                flex: 1;
                display: flex;
                flex-direction: column;
                gap: 2.5rem;

                @media screen and (max-width: 767px) {
                  width: 100%;
                }
                
            
                .map-area{
                    /* 口コミ非表示用 */
                    position: relative;
                    overflow-y: hidden;
                    width: 100%;
                    padding-top: 75%;
                    
                    & iframe {
                        /* 口コミ非表示用 */
                          position: absolute;
                        top: -150px;
                        left: 0;
                        width: 100%;
                        height: calc(100% + (150px * 2));
                    }

                    @media screen and (max-width: 767px) {

                        & iframe {
                            width: 100%;
                        }
                    }
                
                }
                .text-box{
                    font-size: 1.6rem;

                    @media screen and (max-width: 767px) {
                      line-height: 1.8;
                    }

                    & span {
                        color: var(--primary-color);
                        font-size: 2rem;
                        font-weight: bold;
                        display: block;
                        margin-bottom: 1.6rem;

                        @media screen and (max-width: 767px) {
                          font-size: 1.8rem;
                        }
                    }

                    & a {
                        text-decoration: underline;
                        color: var(--primary-color);
                        margin-top: 5px;

                    }
                
                }
            }
        }
        .button-box{
            margin-top: 5rem;
            display: flex;
            justify-content: center;

            & a {
                width: 40rem;
                height: 5rem;
                justify-content: center;
                gap: 1rem;

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

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

        }

    }
}

/* 私たちについて  */

.sec-origin {

    .content-box {

        & p:first-child {
            margin-bottom: 7rem;

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

        .img-box {
            display: flex;
            justify-content: center;

            & img {
                width: 95rem;   

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

/* 私たちのあゆみ */

.sec-history{

}
.content-box{
    display: flex;
    flex-direction: column;
    gap: 2rem;

    .his-row{
        padding-bottom: 2rem;
        line-height: 1;
        border-bottom: 1px solid #e0e0e0;
        display: flex;
        gap: 5rem;
        font-size: 2rem;
        line-height: 1.7;


        @media screen and (max-width: 767px) {
          gap: 0;
          flex-direction: column;
        }
    
        .year{
            color: var(--primary-color);
            font-weight: bold;
            flex: 0 0 19rem;

            @media screen and (max-width: 767px) {
              font-size: 1.6rem;
              flex: 0 0 40%;
            }
        
        }
        .text{

            @media screen and (max-width: 767px) {
              font-size: 1.4rem;
            }
        
        }
    }
}