html, body {
    overflow: scroll !important; /* スクロールを無効化 */
}
/* 全共通 */
h3{
    font-size: 2.4rem;
    letter-spacing: 0.16rem;
    color: #1a1515;
    font-weight: 400;
}

p{
    font-size: 1.4rem;
    line-height: 2.8rem;
    letter-spacing: 0.16rem;
}
img{
    width: 100%;
}

/* メインビジュアル（パララックス効果） */
#works.parallax {
    background-image: url('./img/mv_pe_pc.webp'); 
}

/* メインビジュアル（パララックス効果） */
.main-txt{
    position: absolute;
    display: block;
    left: 0%;
    right: 0;
    top: 81%;
    color: #fff;
}

.main-txt h1{
    color: #e8e8e8;
    font-size: 3.2rem;
    letter-spacing: 0.12em;
    font-weight: 400;
    margin-bottom: 16px;
}

.main-txt p{
    color: #e8e8e8;
    font-size: 1.4rem;
    letter-spacing: 0.12em;
}

/* .main-txt .under-line {
    width: 16px;
    margin: 10px auto 20px;
    border-bottom: 1px solid #e8e8e8;
} */

/* タブ関連処理 */
.tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.tab_label {
    color: #1a1515;
    font-weight: 300;
    position: relative;
    z-index: 1;
    cursor: pointer;
    margin: 240px 5px 130px; 
    font-size: 1.6em;
    letter-spacing: 0.16rem;
    width: 250px;
    text-align: center;
}


input[name="tab_switch"]:checked + .tab_label {
    font-weight: 400; 
    color: #1a1515;
}

.tab_content {
    flex: 100%;
    display: none;
    overflow: hidden;
}

input[name="tab_switch"] {
    display: none;
}

#tab01:checked ~ #tab01_content,
#tab02:checked ~ #tab02_content {
    display: block;
}

/* 縦線を表示するspan */
.tab-divider {
    width: 1px;
    height: 19px; 
    background-color: #1a1515; 
    margin: 245px 5px 130px;
}


/* 三岸好太郎美術館 */
.content_ttl h3{
    font-size: 2.4rem;
    letter-spacing: 0.16rem;
    color: #1a1515;
    font-weight: 400;
    margin-bottom: 50px;
    text-align: center;
    padding: 0 10%;
    margin-top: 200px;
}

.content_ttl p{
    color: #1a1515;
    margin-bottom: 64px;
    padding: 0 10%;
    text-align: center;
}

.twocoloum {
    display: flex;
    align-items: center;
    margin: 160px auto;
    padding: 0 10%;
  }
  
  .text {
    flex: 1;
    padding-right: 10%;
  }

  .twocoloum.left .text {
    flex: 1;
    padding-right: 0;
    padding-left: 5%;
  }
  
  .image {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .image img {
    max-width: 100%;
    height: auto;
  }

  .imageset{
    position: relative;
    padding: 0 5%;
  }

  .imageset .artworks{
    position: relative;
    color: #aaa6a6;
    bottom: 0;
    left: 0;
    font-size: 1.4em;
    text-align: center;
    margin-top: 10px;
}

  .block{
    margin: 60px auto 60px;
    text-align: center;
  }
  /*　スワイパー */
  .container {
    margin-inline: auto;
    max-width: 500px;
    position: relative;
    margin-bottom: 60px;
  }

  .swiper {
    max-width: 500px;
    padding-bottom: 20px;
  }

  .swiper-slide img {
    height: auto;
    width: 100%;
  }

  .swiper-pagination-bullets.swiper-pagination-horizontal {
    bottom: -1px;
  }

  /* ページネーションのサイズと色 */
.swiper-pagination-bullet {
    background-color: #1a1515;
    height: 5px;
    width: 5px;
  }

  .br-pc {
    display: block;
}

  .br-sp{
    display: none;
  }
  /* 768px以下 */
    @media screen and (max-width: 768px) {
        p{
            font-size: 1.3em !important;
            line-height: 2.4rem !important;
        }
        
        #works.parallax {
            background-image: url('./img/mv_pe_sp.webp'); 
            background-attachment: unset; /* モバイルでは固定しない */
        }

        p{
            font-size: 1.4em;
        }

        .content_ttl h3{
            margin-bottom: 40px;
        }

        .content_ttl p{
            padding: 0 5%;
            margin-bottom: 52px;
        }

        .main-txt{
            top: 75%;
        } 

        .main-txt h1 {
            font-size: 2.2rem;
        }
    
        .main-txt p{
            font-size: 1.4rem;
        }

        .tab_label{
            margin: 150px 5px 40px;
        }

        .content_ttl h3{
            padding: 0 5%;
            font-size: 1.8em;
        }

        .text{
            padding-right: 0;
        }
        
        .twocoloum.left .text{
            padding-left: 0;
        }

        .twocoloum{
            flex-direction: column-reverse;
            margin: 40px auto;
            padding: 0 5%;
        }

        .image img{
            margin-bottom: 20px;
        }

        .imageset .artworks{
            font-size: 1.2em;
        }

        .block{
            margin: 20px auto 40px;
            text-align: left;
        }

        .twocoloum.left{
            flex-direction: column;
        }

        input[name="tab_switch"]:checked + .tab_label {
            font-size: 1.3em;
        }

        /*　スワイパー */
        .container {
            width: 90%;
            margin-bottom: 40px;
        }
        
        .br-pc {
            display: none;
        }
        .br-sp {
            display: block;
        }
    }