/*PC版全項目共通 */
 /*全項目共通 */
 
        html {
          font-family: "Zen Antique Soft", serif; 
        }
       .pop{
           font-family:  "Iansui", cursive;
           font-weight: 700;
        }
        body {
           font-family:"Zen Antique Soft", serif; 
           background-color: #f7efff;
        }
        .container{
           width: 75%;
           max-width: 1120px;
           margin: 0 auto;
           position: relative;
        }
        .flex{
           display: flex;
           justify-content: space-between;
           flex-wrap: wrap;
           align-items: center;
        }
        .contents{
           background-color: rgb(206, 206, 206);
        }
        .text {
           font-size: clamp(12px, 2vw, 16px);
           line-height: 2;
           letter-spacing: -0.08em;
        }
        .title {
           font-size: clamp(18px, 2.5vw, 22px);
           font-weight: 700;
           color: #8b008b;
           margin-bottom: 40px;
        }
        .font-sawarabi{
            font-family: "sawarabi Gothic", sans-serif;
        }
        .heading{
           font-family:  'Dancing Script', cursive;
           font-size: clamp(80px, 2.5vw, 120px);
           font-weight: 700;
           color: #8b008b;
           opacity: 0.1;
           position: absolute;
           top:0;
           right:0;
           transform: translateY(-40%);
           z-index: -1;
        }
        .shibahama-frame {
           border: 1.5px solid #bcbace;
           padding: 16px;
           margin: 20px 0 30px;
           width: 100%;
           box-sizing: border-box;
        }
        .br-sp {
           display: none;/* スマホでのみ改行を有効にするタグはPCで非表示に */
        }
        .br-pc {
           display: block; /* PC版では改行を有効にする */
        }
      
      
      
      
/* ヘッダー*/ 
        html {
  scroll-behavior: smooth;
}
        header{
           padding: 27px 0;
        }
        .logo {
           font-family: "Zen Antique Soft", serif;
           font-size:  clamp(12px, 2vw, 18px);
           font-weight: 900;
           
        }
        .logo span{
           color: #8b008b;
        }
        .container .header_menu {
           flex-direction: row;
           justify-content: flex-end;
           line-height: 20px;
           padding-inline-start: 0;
           flex-wrap: wrap;
           gap: 12px;
        }
        .header_menu li {
           font-size: clamp(11px, 2vw, 14px);
           letter-spacing: -0.08em;
        }
        .header_menu li a {
           transition: .3s;
        }
        /* 奇数番目と偶数番目の項目に色を交互に設定 */
        .header_menu li:nth-child(odd) a {
           color: #000;
        }
       
        .header_menu li:nth-child(even) a {
           color: #8b008b;
        }
         /* ホバー時の色をすべて薄紫色に統一 */
        .header_menu li a:hover {
           color: #8b008b; /* ホバー時にすべてこの色に変わる */
           opacity: 0.5;
        }
        
         
    
/* メイン */
        #hero{
           background-image: url(../images/sunandsky.jpg);
           height: 600px;
           border-radius: 30px;
           display: flex;
           align-items: center;
           margin-bottom: 90px;
           overflow: hidden;
        }
        #hero::before {
           content: '';
           width: 100%;
           height: 100%;
           background-color: #202020;
           position: absolute;
           top:0;
           left: 0;
           opacity: .2;
           z-index: 1;
        }
        .hero_inner{
           z-index: 2;
           color: #fffff0;
           width: 100%;
           text-align: center;
        } 
        .hero_inner p {
           font-size: 35px;
           font-weight: 500;
           font-family: "Kiwi Maru", serif;
           margin-bottom: 15px;
        }
        .hero_inner h1 {
           font-family: "Zen Antique Soft", serif;
           font-size: 70px;
           font-weight: 700;
           margin-bottom: 30px;
        }


        /* 私たち */
        #私たち {
           margin-bottom: 120px;
        }
        #私たち h3 {
           font-size: clamp(12px, 2vw, 16px);/* 私たちハマノ芸能舎 */
           font-weight: 700;
           margin-bottom: 8px;
        }
        #私たち h4 {
           font-size: clamp(14px, 2vw, 18px);/* 演劇・オペラへの出演 */
           font-weight: 700;
           margin-bottom: 8px;
        }
        #私たち .text {
           font-size: clamp(11px, 2vw, 14px);/* 参加者は */
           line-height: 2;
           padding: 0 15px;
        }
          /* お知らせ */ 

         /* お知らせ */ 

         .お知らせ_inner {
           display: flex;
           background-color: #e5f2ff;
           padding: 20px 10px 20px 30px;
           gap: 0;
         }

         .お知らせ_inner .image-container-sp {
           display: flex;
           flex: 5;
         }

         .column-left {
           flex: 2.5;
           width: 100%; /* image-container-sp 内での幅 */
         }

         .column-middle {
           flex: 2.5;
           width: 100%; /* image-container-sp 内での幅 */
         }

         .column-right {
           flex: 3;
           padding-left: 10px;
         }

        /* 共通の画像スタイル */
        .image-full-width {
            max-width: 100%;
            height: auto;
        }
        #私たち .お知らせ h1{
           font-size: clamp(14px, 2vw, 18px);/* 参加者・近日 */
           font-weight: 700;
           font-family: "Sawarabi Gothic", sans-serif;
           margin-bottom: 15px;
        } 
        #私たち .お知らせ h3{
           font-size: clamp(8px, 2vw, 16px);/* 新国立劇場オペラ「 */
           font-family: "Sawarabi Gothic", sans-serif;
           font-weight: 500;
           margin-bottom: 15px;
        }
        #私たち .text3 {
           font-size: clamp(10px, 2vw, 14px);/* ハマノ芸能舎より */
           line-height: 1.3;
        }
        #私たち .お知らせ a {
           display: inline-block; /* インラインブロック要素として、テキストと同じ行に並べる */
           font-size: clamp(10px, 2vw, 14px);
           font-weight: 700;
           color: #942343;
           white-space: nowrap; /* テキストの折り返しを防ぐ */
           transition: .3s;
        }
        .お知らせ a:hover {
           color: #8b008b; /* ホバー時にすべてこの色に変わる */
           opacity: 0.5;
        }
        /* 点滅アニメーションの定義 */
        @keyframes blink {
            0% { opacity: 1; } /* 最初は不透明 */
            50% { opacity: 0; } /* 50%の時点で完全に透明 */
            100% { opacity: 1; } /* 最後に再び不透明 */
        }
        .blink {
            animation: blink 1s infinite; /* アニメーション名, 速度, 無限ループ */
            color: #942343;
            font-weight: 700;
        }
        #私たち h5{
           font-family: "Iansui", cursive;
           font-size: clamp(13px, 2vw, 17px);/* 足あと */
           font-weight: 700;
           margin-bottom: 10px;
        }
        #私たち h1{
           font-size: clamp(10px, 2vw, 16px);/* オペラ出演 */
           font-weight: 700;
           padding: 2% 0 1%;
        }
        #私たち h6{
           font-size: clamp(11px, 2vw, 14px);/* 新国立劇場 */
           padding: 1.5% 0 0.5%;
           font-family: "Sawarabi Gothic", sans-serif;
        }
         #私たち .text2 {
           font-size: clamp(11px, 2vw, 13px);/* 「アイーダ」 */
           line-height: 1.6; 
        }
        #私たち .opera-flex {
             justify-content: flex-start;  
             flex-wrap: nowrap;
             align-items:flex-start;
             gap: 20%;
         }
         .column-1{
           width: 43%;
           margin-bottom: 15px;
        }
        .column-1.image-with-caption {
           position: relative; 
           text-align: center;
           width:25%; 
        }
        .column-1.image-with-caption img {
           display: block; /* 必要に応じて */
           max-width: 100%;
           height: auto;
           object-fit: contain;
           margin: 0 auto; /* 必要に応じて */
           border-radius: 20px;
        }
        .column-2{
           width: 48%;
           margin-bottom: 30px;
           font-size: clamp(11px, 2vw, 13px);/* 「アイーダ」*/
        }
        .column-2.image-with-caption {
           position: relative; 
           text-align: center; 
        }
        .column-2.image-with-caption img {
           display: block; /* 必要に応じて */
           max-width: 100%;
           object-fit: contain;
           margin: 0 auto; /* 必要に応じて */
           border-radius: 20px;
        }
        .caption {
           position: absolute; /* 親要素 .image-with-caption を基準に配置する */
           bottom: -20px; /* 画像の下に配置する。値は調整してください */
           left: 50%; /* 左端から50%の位置に配置 */
           transform: translateX(-50%); /* 要素の幅の半分だけ左にずらし、中央揃えにする */
           font-size: clamp(9px, 2vw, 11px); /* フォントサイズを調整 */
           margin-top: 5px; /* 画像との間隔 */
           white-space: nowrap; /* 必要に応じて */
           background-color: transparent; /* 背景色を透明にする */
           padding: 0; /* パディングを削除 */
           border-radius: 20px; /* 角丸を削除 */
        }

        /* 演技教授～レッスン */

        #演技教授～レッスン {
           margin-bottom: 120px;
        }

        #演技教授～レッスン h3 {
            font-size:  clamp(15px, 2vw, 20px);/* あなた好みのレシピで */
           font-weight: 700;
           margin-bottom: 10px;
        }
        #演技教授～レッスン a {
           background-color:#bc64a4;
           display: inline-block; /* インラインブロック要素として、テキストと同じ行に並べる */
           font-size: 16px;
           font-weight: 700;
           color: #ffffff;
           padding: 10px 30px; /* リンクのサイズを調整 */
           border-radius: 50px; /* 角を丸くする */
           text-decoration: none; /* 下線を削除 */
           white-space: nowrap; /* テキストの折り返しを防ぐ */
           transition: .3s;
        }
        #演技教授～レッスン a:hover {
           opacity: 0.8;
        }
        p.text a {
           margin-left: 15px; /* こちらも好きな余白サイズを設定 */
         }


  
  /* 俳優 */ 

        #俳優 {
           margin-bottom: 60px;
        }
        #俳優_inner {
           margin-bottom: 20px;
           position: relative;
        }
        .俳優_inner.flex {
            display: flex;
            /* 新規追加: 要素間に30pxのスペースを設ける */
            gap: 30px; 
            /* 必要に応じて、横並びを維持するためにflex-wrapを無効化するか、PC版では無効化されていることを確認 */
            /* flex-wrap: nowrap; */ 
            /* もし他に設定がない場合、以下のようになっているはずです */
            align-items: flex-start;
            margin-bottom: 20px; /* 既存の設定に合わせて追加 */
        }
        .column-40{
           width: 40%;
           margin-bottom: 80px;
        }
        .column-41{
           width: 40%;
        }
        
        .column-55{
           width: 55%;
           margin: 0 0 55px;
        }
        .column-56{
           width: 55%;
           margin: 0;
        }
        
        
        .image-full-width {
           width: 65%;/* プロフィール写真のサイズ */
        }
         #俳優 h3{
            font-size: clamp(15px, 2vw, 20px);/* 代表・浜野をはじめ */
           font-weight: 700;
           margin-bottom:20px;
        } 
        #俳優 h1{
           font-size: clamp(13px, 2vw, 18px);/* hamano motohiko */
           font-weight: 700;
           margin-bottom: 20px;
        } 
        #俳優 img {
           border-radius: 20px;
           margin-left: 50px;
           display: flex;
           flex-direction: column;
           align-items: center; /* これを追加または確認 */
        }
        #俳優 h4{
           font-size: clamp(10px, 2vw, 14px);/* 俳優・演出家 */
           font-weight: 500;
           margin-bottom: 15px;
        }
        #俳優 .text3 {
           font-size: clamp(10px, 2vw, 14px);/* 日本大学芸術 */
           line-height: 1.3;
        }

 /* 参加者セクションの全体設定 */
        #俳優 .参加者.container {
            margin-top: 50px;
            margin-bottom: 0px;
            margin-left: auto;
            margin-right: auto;
            text-align: center;
            width: 100%;
            max-width: 1200px;
        }

        /* 参加者のカードを並べるコンテナ（flexbox） */
        #俳優 .参加者_inner.flex {
            display: flex;
            justify-content: center;
            align-items: flex-start;
            gap: 50px;
            margin-bottom: 60px;
            flex-wrap: wrap;
        }
       

        /* 個々の参加者カードのスタイル */
        #俳優 .actor1, #俳優 .actor2, #俳優 .actor3 {
            display: flex;
            flex-direction: column;
            align-items: center;
            flex: 1 1 170px;
            min-width: 170px;
            max-width: 250px;
            min-height: 400px;
         }
         #俳優 .miyata, .dummy {
            display: flex;
            flex-direction: column;
            align-items: center;
            flex: 1 1 170px;
            min-width: 170px;
            max-width: 250px;
        }
        .参加者img.dummy-img {
           /* 他の画像と同じ外枠のスタイルを継承 */
           border-radius: 20px;
           margin: 20px 0 10px 0;
           
           /* 💡 ポイント: サイズを確保しつつ透明にする */
           width: 100%;
           /* 高さはアスペクト比(ここでは1:1.2と仮定)で確保 */
           padding-top: 125%; /* width: 100% に対し、高さ120%のスペースを確保する例 */
           height: 0; /* padding-topで高さを確保するため、heightは0 */
           background-color: transparent; /* 背景色を透明にして何も見えないようにする */
           border: none; /* 念のため枠線もないことを確認 */
       }

        /* プロフィール画像のスタイル */
        #俳優 .参加者img {
            width: 100%;
            height: auto;
            object-fit: cover;
            border-radius: 10px;
        }

        #俳優 .actor1 .参加者img, #俳優 .actor2 .参加者img, #俳優 .actor3 .参加者img, #俳優 .actor4 .参加者img/*, #俳優 .actor5 .参加者img, #俳優 .actor6 .参加者img*/ {
            border-radius: 20px;
            margin: 20px 0 10px 0;
        }

        /* SNSアイコンのコンテナ */
        #俳優 .参加者icons {
            display: flex;
            justify-content: center;
            gap: 15px;
            align-items: center;
        }

        #俳優 .参加者icons a:hover img {
            color: #8b008b;
            opacity: 0.5;
        }

        #俳優 .参加者icons img {
            margin: 0;
            padding: 0;
            width: 35px;
            height: auto;
        }

        /* 足あと */
        #俳優 .asiato {
            margin: 20px;
            font-family: "Iansui", cursive;
            color: #800000;
            font-size: clamp(18px, 3vw, 22px);
            font-weight: 700;
        }

        /* 各見出しとテキストのスタイル */
        #俳優 .参加者 h3 {
            margin: 0;
            margin-bottom: 10px;
            font-size: clamp(18px, 3vw, 24px);
            text-align: center;
        }

        #俳優 .参加者 h1 {
            width: 100%;
            margin: 0;
            margin-bottom: 10px;
            font-size: clamp(16px, 1.5vw, 20px);
            font-weight: 700;
            text-align: center;
        }

        #俳優 .参加者 h5 {
            width: 100%;
            margin: 0;
            margin-bottom: 10px;
            font-size: clamp(12px, 1.5vw, 16px);
            font-weight: 700;
            text-align: center;
        }

        #俳優 .参加者 .参加者info {
            width: 100%;
            margin-bottom: 10px;
            font-size: clamp(11px, 1vw, 14px);
            text-align: center;
            line-height: 1.3;
        } 
        
        
/* 芝浜社中 */

        #芝浜社中 {
           margin-bottom: 120px;
        }
        #芝浜社中 h1 {
            font-size: clamp(15px, 2vw, 20px);/* 芝浜社中は、 */
           font-weight: 700;
           margin-bottom: 10px;
        }
        #芝浜社中 h4{
           font-family: "Iansui", cursive;
           font-size: clamp(13px, 2vw, 17px);/* 社中の足あと */
           font-weight: 700;
           margin-bottom: 20px;
        }
        #芝浜社中 .text4 {
           font-size: clamp(10px, 2vw, 14px);/* 2018年～ */
            line-height: 1.5;
           
        }
        .main-title {
           display: block;
           font-size: clamp(14px, 2vw, 18px); /* 「入門・小五郎三郎助」のサイズ */
           font-weight: bold;
           margin-bottom: 5px;
        }
        .sub-title1, .sub-title2 {
           display: block;
           font-size: clamp(11px, 2vw, 15px); 
           font-weight: bold;
           margin-bottom: 10px;
        }
        .staff {
           display: block;
           font-size: clamp(12px, 2vw, 16px);
           margin-bottom: 10px;
        }
         #芝浜社中 .text2 {
           display: flex; /* 子要素を横並びにする */
           justify-content: flex-end; /* 子要素を右端に配置 */
           align-items: center; /* 垂直方向の中央揃え */
           font-size: clamp(12px, 2vw, 18px);/* あなたの町へも */
           gap: 5px;
         }
         #芝浜社中 a{
            background-color: #bc64a4; /* 背景色 */
            display: inline-block; /* インラインブロック要素に設定 */
            font-size: 16px; /* フォントサイズ */
            font-weight: 700; /* フォントの太さ */
            color: #ffffff; /* フォント色 */
            padding: 10px 30px; /* パディング（ボタンのサイズ） */
            border-radius: 50px; /* 角を丸くする */
            text-decoration: none; /* 下線をなくす */
            white-space: nowrap; /* テキストの折り返しを防ぐ */
            transition: 0.3s; /* ホバー時の変化を滑らかにする */
            line-height: 2;
        }
         #芝浜社中 a:hover {
            opacity: 0.8; /* ホバー時の透明度 */
         }



/* ギャラリー */ 
        .column-a{
           background-image: url(../images/hizennsai.jpg);
           background-position: center;
           background-size: cover;
           width:24%;
           height:270px;
           border-radius: 20px;
           margin-bottom: 120px;
           position: relative; 
        }
        .column-a::after {
           content: "函館「碑前祭」"; 
           display: block; 
           position: absolute; /* 親要素(.column-a)を基準に配置 */
           bottom: -20px; /* 画像の下から30pxの位置に表示 */
           left: 0;
           width: 100%; 
           text-align: center; /* 中央揃え */
           color: #333;
           font-size: 12px; 
        }
        .column-b{
           background-image: url(../images/saburousukematsuri.jpg);
           background-position: center;
           background-size: cover;
           width:24%;
           height:270px;
           border-radius: 20px;
           margin-bottom: 120px;
           position: relative; 
        }
        .column-b::after {
           content: "浦賀「中島三郎助生誕祭」"; /* ここに表示したい文字を記述 */
           display: block; /* ブロック要素として表示 */
           position: absolute; /* 親要素(.column-a)を基準に配置 */
           bottom: -20px; /* 画像の下から30pxの位置に表示 */
           left: 0;
           width: 100%; /* 親要素の幅いっぱいに広げる */
           text-align: center; /* 中央揃え */
           color: #333; /* 文字色 */
           font-size: 12px; /* 文字サイズ */
        }
        .column-c{
           background-image: url(../images/hakodate.jpg);
           background-position: center;
           background-size: cover;
           width:24%;
           height:270px;
           border-radius: 20px;
           margin-bottom: 120px;
           position: relative; 
        }
        .column-c::after {
           content: "函館「箱館五稜郭祭」"; /* ここに表示したい文字を記述 */
           display: block; /* ブロック要素として表示 */
           position: absolute; /* 親要素(.column-a)を基準に配置 */
           bottom: -20px; /* 画像の下から30pxの位置に表示 */
           left: 0;
           width: 100%; /* 親要素の幅いっぱいに広げる */
           text-align: center; /* 中央揃え */
           color: #333; /* 文字色 */
           font-size: 12px; /* 文字サイズ */
         }
        .column-d{
           background-image: url(../images/kannrinmaru2.jpg);
           background-position: center;
           background-size: cover;
           width:24%;
           height:270px;
           border-radius: 20px;
           margin-bottom: 120px;
           position: relative; 
        }
        .column-d::after {
           content: "浦賀「咸臨丸フェスティバル」"; /* ここに表示したい文字を記述 */
           display: block; /* ブロック要素として表示 */
           position: absolute; /* 親要素(.column-a)を基準に配置 */
           bottom: -20px; /* 画像の下から30pxの位置に表示 */
           left: 0;
           width: 100%; /* 親要素の幅いっぱいに広げる */
           text-align: center; /* 中央揃え */
           color: #333; /* 文字色 */
           font-size: 12px; /* 写真の説明文 */
         }



/* 劇作・演出 */
        #劇作・演出{
           margin-bottom: 120px;
        }
        #劇作・演出 h3 {
            font-size: clamp(15px, 2vw, 20px);/* 台本かきます、 */
           font-weight: 700;
           margin-bottom: 10px;
        }
        #劇作・演出 .text {
           font-size: clamp(12px, 2vw, 16px);/* 想いえがく */
           display: flex; /* PC版ではテキストとボタンを横並びにする */
           align-items: center; /* 垂直方向の中央揃え */
           gap: 10px; /* テキストとボタンの間の余白 */
           flex-wrap: wrap; /* テキストの折り返しを防ぐ */
        }
        #劇作・演出 .br-sp {
           display: none;  /* PC版ではスマホ用の改行を非表示にする */
        }
        #劇作・演出 .text-and-button {
           display: flex; /* 矢印とボタンを横並びにする */
           align-items: center;
           gap: 10px;
        }
        #劇作・演出 a {
           background-color: #bc64a4; /* 紫色の背景 */
           display: inline-block; /* ボタンとして扱う */
           font-size: 16px;
           font-weight: 700;
           color: #ffffff; /* 白い文字 */
           padding: 10px 30px; /* パディングでボタンのサイズを調整 */
           border-radius: 50px; /* 角を丸くする */
           text-decoration: none;
           white-space: nowrap;
           transition: .3s;
        }
        #劇作・演出 a:hover {
        opacity: 0.8; /* ホバー時に少し透明にする */
        }


/* 団体概要 */
        #団体概要 {
           margin-bottom: 120px;
        }
        #団体概要 dl {
           max-width: 900px;
           margin-left: auto;
           display: flex;
           flex-wrap: wrap;
        }
        #団体概要 dt {
           width: 50%;
           padding: 30px 0;
           font-size: 14px;
           font-weight: 500;
           text-align: left;
           border-bottom: solid 1px #8b008b;
        }
        #団体概要 dd {
           font-size: 14px;
           width: 50%;
           padding: 30px 0;
           text-align: left;
           border-bottom: solid 1px #8b008b;
        } 



/* お問合せ・ご依頼 */
        #お問合せ・ご依頼 {
           margin-bottom: 120px;
        }

        #お問合せ・ご依頼 .text {
           font-size: clamp(15px, 2vw, 20px);/* もろもろ、 */
           font-weight: 700;
           display: flex;
           align-items: center;
           gap: 10px;
           flex-wrap: nowrap;
        }

        #お問合せ・ご依頼 .text-and-button {
           display: flex;
           align-items: center;
           gap: 50px;
        }
        #お問合せ・ご依頼 a {
           background-color: #bc64a4;
           display: inline-block;
           font-size: 16px;
           font-weight: 700;
           color: #ffffff;
           padding: 10px 30px;
           border-radius: 50px;
           text-decoration: none;
           white-space: nowrap;
           transition: .3s;
        }
        #お問合せ・ご依頼 a:hover {
           opacity: 0.8;
        }



/* 芸能舎提灯 */
        .geinousyatyouchin {
           max-width: 10%;
           object-fit: contain;
           border-radius: 100px;
           margin-bottom:120px;
        }
        .column-z {
           display: flex;
           justify-content: center; /* 子要素を水平方向に中央寄せ */
           align-items: center; /* 子要素を垂直方向に中央寄せ（もし必要なら） */
        }



/* フッター */
        footer{
           text-align: center;
           margin: 90px 0;
           font-family: "Zen Antique Soft", serif;
        }
        .copyright{
           font-size:12px;
           margin-top: 20px;
        }
        
        
        

/* 中間サイズ版 */
@media only screen and (min-width: 769px) and (max-width: 812px) {



   /* ヘッダー*/ 
             header{
             padding: 27px 0;
             }
             .logo {
                font-size: clamp(10px, 4.5vw, 22px);
                font-family: "Noto Serif JP", serif;
                font-weight: 900;
                margin-bottom: 20px;
             }
             .container .header_menu {
                flex-direction: row;
                justify-content: center;
                line-height: 20px;
                padding-inline-start: 30px; 
                gap: clamp(5px, 2.5vw, 15px);
             }
             .header_menu li a{
                margin: 5px 0px;
                font-size: clamp(9px, 3.5vw, 15px);
             }
             
             .kaigyou {
                width: auto;
             }


  /* お知らせ */
             .お知らせ_inner {
                flex-direction: column;
                gap: 20px;
                padding: 20px;
              }
              #私たち .お知らせ_inner img {
                  border-radius: 0px; /* ここを追加 */
              }

              .お知らせ_inner .image-container-sp {
                display: flex;
                flex-direction: row;
                gap: 10px;
                justify-content: center;
                margin-bottom: 20px;
                width: 100%;
              }

              .image-container-sp .column-left,
              .image-container-sp .column-middle {
                flex: 1;
                width: 50%;
              }

             .column-right {
                flex: none;
                width: 100%;
                padding-left: 0;
              }
               #私たち .text3 {
               font-size: clamp(11px, 4.5vw, 15px);/* ハマノ芸能舎より */
             }
               #私たち .お知らせ h3{
                font-size: clamp(10px, 4.5vw, 18px);/* 新国立劇場オペラ「 */
                margin-bottom: 0px;
             }
                #私たち .お知らせ h1{
                 font-size: clamp(11px, 4.5vw, 20px);/* 参加者・近日 */
                 font-weight: 600;
                 margin-bottom: 0px;
              }
              #私たち .お知らせ a {
                font-size: clamp(10px, 4.5vw, 15px); /* clamp()関数に修正 */
              }
              #私たち h5{
                 font-size: clamp(14px, 4vw, 20px);/* 足あと */
                 margin-bottom: 15px;
             }
              #私たち .sp-hide {
                display: none;
             }
             .column-1{
                width: 100%;
                margin-bottom: 15px;
             }
             .column-1.image-with-caption {
                position: relative; 
                text-align: center;
                width:55%; 
             }
             .column-1.image-with-caption img {
                display: block; /* 必要に応じて */
                max-width: 100%;
                height: auto;
                object-fit: contain;
                margin: 0 auto; /* 必要に応じて */
                border-radius: 20px;
             }
             .column-2 {
                font-size: clamp(12px, 3.5vw, 16px);
                width: 100%;
                margin-bottom: 15px;
             }
             #私たち img {
                max-width: 100%;
                object-fit: contain;
                border-radius: 10px;
                
             }
            
             /* 写真下の説明 */
             .image-with-caption {
                width: 100%;
                margin-bottom: 30px;
             }
             #私たち .image-with-caption img {
                width: 80%; 
                height: auto;
                border-radius: 10px;
                margin-bottom: 5px;
              }
             .caption {
                bottom: -20px;
                font-size: clamp(11px, 3.5vw, 13px);/* 写真の下の説明文 */
                border-radius: 20px; 
             }

              /* スマートフォン版での画像コンテナの調整 */
              .image-container-sp {
                  display: flex; /* 画像を横並びにするためのFlexboxコンテナ */
                  gap: 10px; /* 画像間の間隔 */
                  justify-content: center; /* 中央揃え */
                  margin-bottom: 20px; /* 画像とテキストの間の余白 */
              }

              /* 個々の画像の幅を調整 */
              .image-container-sp img {
                  width: 100%; /* 2枚の画像が横に並ぶように幅を調整 */
                  height: auto;
              }

              /* テキスト部分のパディングをリセット */
              .column-right {
                  padding-left: 0;
              }


        

             #俳優 {
                margin-bottom: 15px;
             }
             #俳優 h3 {
                font-size: clamp(12px, 4.5vw, 18px);/* 代表・浜野をはじめ */
                margin-bottom: 10px;
             }
             #俳優 h1 {
                font-size: clamp(12px, 4.5vw, 18px);/* 浜野基彦 */
                margin-bottom: 10px;
                text-align: center;
             }
             #俳優 h4 {
                font-size: clamp(11px, 4.5vw, 15px);/* 俳優 福岡県出身 */
                margin-bottom: 10px;
             }
             #俳優 .text3 {
                font-size: clamp(11px, 4.5vw, 15px);/* 日本大学芸術 */
             }
              #俳優 img {
                display: block; /* インライン要素からブロック要素に変更 */
                margin: 30px auto 15px; /* 左右の余白を自動で設定し中央に配置 */
             }
             .column-40,
             .column-41 {
                width: 100%;
                margin-bottom: 10px;
                margin-top: 0;
             }
             .column-55,
             .column-56 {
                width: 100%;
                margin: 0 0 10px;
             }
             .members {
               margin:20px 0 0 ; 
             }
              
              .image-full-width {
                 width: 40%;/* プロフィール写真のサイズ */
              }
             #俳優  a:hover {
                color: #8b008b; /* ホバー時にすべてこの色に変わる */
                opacity: 0.5;
             }
             #俳優 .text3 img {
                border-radius: 0px;
                width: 10%; /* アイコンの幅を指定 */
                height: 10% ; /* アイコンの高さを指定 */
                margin-right: 0px; /* ここでマイナスの値を指定して距離を詰めます */
              }
             #俳優 .miyata{
                 display: flex;
                 flex-direction: column;
                 align-items: center;
                 flex: 0 auto;
                 width: 100%;
                 max-width: 300px;
                 min-height: 100px;
                 min-width: unset;
                 padding-top: 30px;
               }
               #俳優 .dummy{
                   display: none; 
               }
               #俳優 .miyata .参加者img.dummy-img {
                   display: none; 
               }
                /* ギャラリー */
             .column-a,
             .column-b,
             .column-c,
             .column-d {
                align-items: center;
                justify-content: center;
                width: 70%;
                height: 220px;
                margin: 20px auto;
                border-radius: 10px;
             }
             .column-a::after,
             .column-b::after,
             .column-c::after,
             .column-d::after {
                font-size: clamp(9px, 3.5vw, 12px);/* 写真の下の説明文 */
                bottom: -20px;
             }
   /* 劇作・演出 */
             #劇作・演出 {
                margin-top: 60px;
                margin-bottom: 60px;
             }

       }

/* スマホ版 */
@media only screen and (max-width: 768px) {

     /* スマホ版全体共通*/
     
               html {
                     font-family: "Noto Serif JP", serif;
                     font-weight: 600; 
             }
               .pop{
                    font-family:  "Iansui", cursive;
                    font-weight: 700;
             }
             body {
                    font-family: "Noto Serif JP", serif; 
                    font-weight:600;
                    background-color: #f7efff;
             }
              .title {
                     font-size: clamp(11px, 4.5vw, 20px);
                     margin-bottom: 20px;
             }
              .text {
                     line-height: 1.5;
                     font-size: clamp(13px, 4vw, 16px);
                     letter-spacing: -0.08em;
              }
              .container{
                     width: 90%;
                     max-width: 1120px;
                     margin: 0 auto;
                     position: relative;
              }
              .heading {
                     font-size: 40px;
                     font-weight: 350;
                     transform: translateY(-40%);
              }
              .flex {
                     flex-direction: column;
                     align-items: center;
              }
              .br-pc {
                      display: none;/* PC版でのみ改行を有効にするタグはスマホで非表示に */
              }
              .br-sp {
                      display: block; /* スマホでは改行を有効にする */
               }
              .shibahama-frame {
                      border: 1.5px solid #bcbace;
                      padding: 16px;
                      margin: 20px 0;
                      width: 100%;
                      box-sizing: border-box;
               }


     /* ヘッダー*/ 
             header{
             padding: 27px 0;
             }
             .logo {
                font-size: clamp(10px, 4.5vw, 22px);
                font-family: "Noto Serif JP", serif;
                font-weight: 900;
                margin-bottom: 10px;
             }
             .container .header_menu {
                flex-direction: row;
                justify-content: flex-end;
                line-height: 20px;
                padding-inline-start: 0; /* ul要素のデフォルトのパディングをリセット */
                flex-wrap: wrap; /* アイテムの折り返しを許可 */ 
                gap: clamp(5px, 2.5vw, 15px);
             }
             .header_menu li a{
                margin: 5px 0px;
                font-size: clamp(9px, 3.5vw, 15px);
             }
             
             .kaigyou {
                width: auto;
             }



     /* メイン */
             #hero {
                background-image: url(../images/sunandsky2.jpg);
                background-position: center;
                background-size: cover;
                max-width: 100%;
                height: 230px;
                border-radius: 10px;
                margin-bottom: 30px;
             }
             .hero_inner {
                padding-top: 50px; /* この数値を大きくすると、文字が下に移動します */
             }
             .hero_inner p {
                font-size: clamp(12px, 5vw, 18px);
                font-weight: 700;
                margin-bottom: 12px;
             }
             .hero_inner h1 {
                font-size: clamp(15px, 7vw, 36px);
                font-family: "Noto Serif JP", serif;
                font-weight: 900;
                margin-bottom: 30px;
             }
             
             
      
    




     /* 私たち */
             #私たち {
                margin-bottom: 60px;
             }
            
             #私たち h3 {
                font-size: clamp(10px, 4vw, 18px);/* ハマノ芸能舎は */
             }

             #私たち h4 {
                font-size: clamp(11px, 4.5vw, 20px);/* 演劇・オペラへの～ */
             }
            
            #私たち .text {
                     line-height: 1.7;
                     font-size: clamp(11px, 3.7vw, 16px); /* 参加者は */
                     padding: 0 5px;
              }
              
             #私たち h1 {
                font-size: clamp(16px, 4vw, 24px);/* オペラ出演 */
                padding-bottom: 15px;
             }
             #私たち h6 {
                font-size: clamp(12px, 3.5vw, 16px);/* 新国立劇場 */
             }
             #私たち .text2 {
                font-size: clamp(12px, 3.5vw, 16px);/* 「アイーダ」 */
             }
             #私たち .sp-hide {
                display: none;
             }
             .column-1{
                width: 100%;
                margin-bottom: 15px;
             }
             .column-1.image-with-caption {
                position: relative; 
                text-align: center;
                width:60%; 
             }
             .column-1.image-with-caption img {
                display: block; /* 必要に応じて */
                max-width: 100%;
                height: auto;
                object-fit: contain;
                margin: 0 auto; /* 必要に応じて */
                border-radius: 20px;
             }
             .column-2 {
                font-size: clamp(12px, 3.5vw, 16px);
                width: 100%;
                margin-bottom: 15px;
             }
             #私たち img {
                max-width: 100%;
                object-fit: contain;
                border-radius: 10px;
                
             }
            
             /* 写真下の説明 */
             .image-with-caption {
                width: 100%;
                margin-bottom: 30px;
             }
             #私たち .image-with-caption img {
                width: 100%; 
                height: auto;
                border-radius: 10px;
                margin-bottom: 5px;
              }
             .caption {
                bottom: -20px;
                font-size: clamp(11px, 3.5vw, 13px);/* 写真の下の説明文 */
                border-radius: 20px; 
             }
     /* お知らせ */
             .お知らせ_inner {
                flex-direction: column;
                gap: 20px;
                padding: 20px;
              }
              #私たち .お知らせ_inner img {
                  border-radius: 0px; /* ここを追加 */
              }

              .お知らせ_inner .image-container-sp {
                display: flex;
                flex-direction: row;
                gap: 10px;
                justify-content: center;
                margin-bottom: 20px;
                width: 100%;
              }

              .image-container-sp .column-left,
              .image-container-sp .column-middle {
                flex: 1;
                width: 50%;
              }

             .column-right {
                flex: none;
                width: 100%;
                padding-left: 0;
              }
               #私たち .text3 {
               font-size: clamp(11px, 4.5vw, 15px);/* ハマノ芸能舎より */
             }
               #私たち .お知らせ h3{
                font-size: clamp(10px, 4.5vw, 18px);/* 新国立劇場オペラ「 */
                margin-bottom: 0px;
             }
                #私たち .お知らせ h1{
                 font-size: clamp(11px, 4.5vw, 20px);/* 参加者・近日 */
                 font-weight: 600;
                 margin-bottom: 0px;
              }
              #私たち .お知らせ a {
                font-size: clamp(10px, 4.5vw, 15px); /* clamp()関数に修正 */
              }
              #私たち h5{
                 font-size: clamp(14px, 4vw, 20px);/* 足あと */
                 margin-bottom: 15px;
             }

              /* スマートフォン版での画像コンテナの調整 */
              .image-container-sp {
                  display: flex; /* 画像を横並びにするためのFlexboxコンテナ */
                  gap: 10px; /* 画像間の間隔 */
                  justify-content: center; /* 中央揃え */
                  margin-bottom: 20px; /* 画像とテキストの間の余白 */
              }

              /* 個々の画像の幅を調整 */
              .image-container-sp img {
                  width: 100%; /* 2枚の画像が横に並ぶように幅を調整 */
                  height: auto;
              }

              /* テキスト部分のパディングをリセット */
              .column-right {
                  padding-left: 0;
              }


     /* 演技教授～レッスン */
             #演技教授～レッスン {
                margin-bottom: 60px;
             }
             #演技教授～レッスン h3 {
                font-size: clamp(10px, 4.5vw, 18px);/* あなた好みのレシピ */
             }
             #演技教授～レッスン .text {
                     line-height: 1.7;
                     font-size: clamp(11px, 4vw, 16px);
                     letter-spacing: -0.08em;
              }
             #演技教授～レッスン a {
                font-size: clamp(8px, 2.5vw, 10px);/* 「こちらへ」 */
                font-family: "Kiwi Maru", serif;
                padding: 4px 7px;
                border-radius: 100px;
             }



          /* 俳優 */
     
             #俳優 {
                margin-bottom: 15px;
             }
             #俳優 h3 {
                font-size: clamp(12px, 4.5vw, 18px);/* 代表・浜野をはじめ */
                margin-bottom: 10px;
             }
             #俳優 h1 {
                font-size: clamp(12px, 4.5vw, 18px);/* 浜野基彦 */
                margin-bottom: 10px;
                text-align: center;
             }
             #俳優 h4 {
                font-size: clamp(11px, 4.5vw, 15px);/* 俳優 福岡県出身 */
                margin-bottom: 10px;
             }
             #俳優 .text3 {
                font-size: clamp(11px, 4.5vw, 15px);/* 日本大学芸術 */
             }
              #俳優 img {
                display: block; /* インライン要素からブロック要素に変更 */
                margin: 30px auto 15px; /* 左右の余白を自動で設定し中央に配置 */
             }
             .column-40,
             .column-41 {
                width: 100%;
                margin-bottom: 10px;
                margin-top: 0;
             }
             .column-55,
             .column-56 {
                width: 100%;
                margin: 0 0 10px;
             }
             .members {
               margin:20px 0 0 ; 
             }
              
              .image-full-width {
                 width: 40%;/* プロフィール写真のサイズ */
              }
             #俳優  a:hover {
                color: #8b008b; /* ホバー時にすべてこの色に変わる */
                opacity: 0.5;
             }
             #俳優 .text3 img {
                border-radius: 0px;
                width: 10%; /* アイコンの幅を指定 */
                height: 10% ; /* アイコンの高さを指定 */
                margin-right: 0px; /* ここでマイナスの値を指定して距離を詰めます */
              }
             
             .参加者_inner.flex {
                 flex-direction: row; /* 横並びにするために追加 */
                 gap: 10px;
                 margin-bottom: 30px;
             }
               #俳優 .actor1, #俳優 .actor2, #俳優 .actor3 {
                 display: flex;
                 flex-direction: column;
                 align-items: center;
                 flex: 0 auto;
                 width: 100%;
                 max-width: 300px;
                 min-height: 100px;
                 min-width: unset;
             }

              #俳優 .miyata{
                 display: flex;
                 flex-direction: column;
                 align-items: center;
                 flex: 0 auto;
                 width: 100%;
                 max-width: 300px;
                 min-height: 100px;
                 min-width: unset;
                 padding-top: 30px;
               }
               #俳優 .dummy{
                   display: none; 
               }
               #俳優 .miyata .参加者img.dummy-img {
                   display: none; 
               }
               #俳優 .参加者 h3 {  /* これまでの参加者*/
                  font-size: clamp(28px, 4.5vw, 32px);
               }
               #俳優 .asiato {   /* 足あと */
                  font-size: clamp(18px, 4.5vw, 26px);
                 
              }
                #俳優 .参加者 h1 {  /* ゆりあ */
                  font-size: clamp(13px, 4.5vw, 18px);
               }
              #俳優 .参加者 h5 {  /* 近日出演 */
                  margin-bottom: 10px;
                  font-size: clamp(15px, 4.8vw, 20px);
               }

              #俳優 .参加者 .参加者info {  /* 新国立劇場オペラ */
                  font-size: clamp(11px, 4.5vw, 15px);
                  line-height: 1.5;
              }
               #俳優 .参加者icons img {
                  width:40px;
                  height: auto;
              }  


     /* 芝浜社中 */
             /* 各行を独立したブロックとして扱い、左寄せにする */
             .text-line {
                display: block;
                text-align: left;
                padding-left: 0; /* 左の余白をリセット */
             }
             .indent-sp {
                display: block;
                margin-left: 0; /* 左マージンをリセット */
                margin-right: 0; /* 右マージンをリセット */
                max-width: none;
                text-align: left; /* ← ここを修正 */
             }
             .indent-sp2 {
                display: block;
                text-align: right;
                margin: 0 0 0 auto;
                max-width: fit-content;
             }
             /* その他のスタイル */
             #芝浜社中 {
                margin-bottom: 20px;
             }
             #芝浜社中 h1 {
               font-size: clamp(10px, 4.5vw, 18px);/* 芝浜社中は～ */
             }
              #芝浜社中 .text {
                font-size: clamp(11px, 4vw, 17px);/* 作・演出・出演、すべてが */
                display: block;
             }
             #芝浜社中 h4 {
                font-size: clamp(10px, 4vw, 18px);/* 社中の足あと */
                margin-bottom: 15px;
             }
             .main-title {
                font-size: clamp(12px, 4.5vw, 16px);/* 「入門・～」 */
                margin-bottom: 1px;
             }
             .sub-title1 {
                font-size: clamp(11px, 3.5vw, 15px);/* ～桂小五郎が中島 */
                font-weight: 700;
                letter-spacing: -0.07em;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
             }
             .sub-title1-line1 {
                width: auto;
                margin-top: 8px;
                text-align: left; 
             }
             .sub-title1-line2 {
                text-align: center;
                margin-left: 30px;
             }
             .sub-title2 {
                font-size: clamp(11px, 3.5vw, 14px);/* 中島三郎助とつむぐ */
                font-weight: 700;
                display: flex;
                flex-direction: column;
                margin-bottom: 10px;
                
             }
             .sub-title2-line1 {
                width: clamp(10px,100vw,200px);
                margin-top: 8px;
             }
             .sub-title2-line2 {
                text-align: center;
                width: clamp(100px, 75vw, 300px)
             }
             .staff {
                font-size: clamp(12px, 4.5vw, 15px);/* 作演出～出演～ */
                text-align: left;
                margin-bottom: 20px;
             }
             #芝浜社中 .text4{
                font-size: clamp(11px, 4.5vw, 15px);/* 2018～ */
                line-height: 17px;
             }
             #芝浜社中 img {
                border-radius: 10px;
                max-width: 100%;
                object-fit: contain;
             }
             #芝浜社中 a {
                font-size: clamp(8px, 2.5vw, 10px);/* 「こちらへ」 */
                padding: 5px 8px;
                border-radius: 100px;
             }
             #芝浜社中 .text2 {
                font-size: clamp(10px, 4.5vw, 18px);/* あなたの町へも */
                display: block;
             }
              /* スマホ版では矢印とボタンを別の行に配置 */
             #芝浜社中 .text-and-button {
                display: flex; /* これを追加して、⇒とボタンを横並びに */
                justify-content: flex-end; /* 中央寄せにする場合 */
                align-items: center; /* 垂直方向の中央揃え */
                gap: 5px; /* ⇒とボタンの間に余白を追加 */
                margin-top: 10px;
             }



     /* ギャラリー */
             .column-a,
             .column-b,
             .column-c,
             .column-d {
                width: 80%;
                height: 180px;
                margin: 5%;
                border-radius: 10px;
             }
             .column-a::after,
             .column-b::after,
             .column-c::after,
             .column-d::after {
                font-size: clamp(9px, 3.5vw, 12px);/* 写真の下の説明文 */
                bottom: -20px;
             }



     /* 劇作・演出 */
             #劇作・演出 {
                margin-top: 60px;
                margin-bottom: 60px;
             }
             #劇作・演出 h3 {
                font-size: clamp(10px, 4.5vw, 18px);/* 台本かきます */
                font-weight: 700;
                margin-bottom: 10px;
             }
             #劇作・演出 a {
                font-size: clamp(8px, 2.5vw, 10px);/* 「こちらへ」 */
                padding: 4px 7px;
                border-radius: 100px;
             }
             #劇作・演出 .text {
                font-size: clamp(10px, 4vw, 17px);/* 想いえがく～ */
                display: block;
             }



     /* 団体概要スタイル */
             #団体概要 {
                margin-bottom: 60px;
             }
             #団体概要 dl {
                flex-direction: row;
             }
             #団体概要 dt {
                width: 35%;
                padding: 12px 0;
                font-size: 11px;
                font-weight: 500;
                text-align: center;
                border-bottom: solid .5px #8b008b;
             }
             #団体概要 dd {
                font-size: 11px;
                width: 65%;
                padding: 12px 0;
                text-align: center;
                border-bottom: solid .5px #8b008b;
             }



     /* お問合せ・ご依頼 */
             #お問合せ・ご依頼 {
                margin-top: 60px;
                margin-bottom: 60px;
             }
             #お問合せ・ご依頼 a {
                font-size: clamp(8px, 2.5vw, 10px);/* 「こちらへ」 */
                padding: 4px 7px;
                border-radius: 100px;
             }
             #お問合せ・ご依頼 .text {
               font-size: clamp(10px, 4.5vw, 18px);/* もろもろ、 */
              display: block;
               text-align: center;
             }
             /* スマホ版では矢印とボタンを別の行に配置 */
             #お問合せ・ご依頼 .text-and-button {
                display: flex; /* これを追加して、⇒とボタンを横並びに */
                justify-content: center; /* 中央寄せにする場合 */
                align-items: center; /* 垂直方向の中央揃え */
                gap: 5px; /* ⇒とボタンの間に余白を追加 */
                margin-top: 10px;
             }



     /* 芸能舎提灯 */
             .geinousyatyouchin {
                max-width: 25%; /* スマホ版では画像を少し大きくする */
                margin-bottom: 60px;
             }
             }



     /* フッター */
             footer {
                font-size: 11px;
                margin: 10px 0;
             }
             .copyright {
                font-size: 10.5px;
                margin-top: 10px
             }
            
      }