@charset "UTF-8";
 body {
   font-family: "メイリオ", Meiryo, Helvetica, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro W3", "ＭＳ Ｐゴシック", sans-serif;
   position:relative;
   color: #f9f9f9;
   position:relative;
   margin: 0;
   text-align: center;
   position:relative;
   }

 *, *::before, *::after {
  box-sizing: border-box;
}

a {
  outline: none;
  color: #fff;
  word-wrap:break-word;
  text-decoration: none;
}

p {
    margin: 0;
    padding: 0;
}

/* h1 {
  font-family: fot-matisse-pron, sans-serif;
  font-style: normal;
  font-weight: bold;
} */

.center{
    text-align:center;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
    display: inline-table;
}
/* Hides from IE-mac \*/

* html .clearfix {
    height: 1%;
}
.clearfix {
    display: block;
}

/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

.back {
  margin: 0 ;
  padding: 0 ;
  font-size: 15px ;
  background-repeat: no-repeat;
  width: 100%;
  text-align: left;
}

.back a {

}

.back::before {
content:"";
display:block;
position:fixed;
top:0;
left:0;
z-index:-1;
width:100%;
height:100vh;
}

main {
  background-color: #eeeeee;
  font-family: "source-han-sans-japanese", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-feature-settings: "palt";
}

main p {
  font-family: "source-han-sans-japanese", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 17px;
  line-height: 1.6em;
}
  
main h1,main h2,main h3,main h4 {
  font-family: "source-han-sans-japanese", sans-serif;
  font-weight: 900;
  font-style: normal;
  line-height: 1.3em;
}

.wrapper {
    padding: 0rem 1rem clamp(2rem, calc(0rem + 8vw), 6rem) 1rem;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

.wrapper_color {
  background-color: #008b4a;
}

.wrapper_maxwidth {
  max-width: 1280px;
  margin: 0rem auto;
}

/* ///////////////////////////////////////////onair部分/////////////////////////////////////////// */

.onair_block_mail_sticky,
.onair_block_mail_sticky * {
    box-sizing: border-box;
}

.onair_block_mail_sticky {
    position: -webkit-sticky;
    position: sticky;
    bottom: -1px;
    z-index: 1000;
    border-top: solid 2px #eeeeee;
        width: 100%;
    max-width: 100%;
}

.onair_block img {
    width: 100%;
    max-width: clamp( 60px, calc( 40px + 5vw ), 100px );
    display: block;
}

.onair_block_mail {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: stretch;
    background-color: #282828;

}

.onair_block {
    display: flex;
    align-items: center; 
    background-color: #282828;
    border-right: solid #eeeeee 2px;
    min-width: 0
}

.onair_block h3 {
    margin-top: 0;
    font-size: clamp( 16px, calc( 13px + 0.75vw ), 22px );
    color: #f9f9f9;
    border-bottom: solid 1px #fff;
    margin-bottom: 0.5rem;
    padding-bottom: 0.3rem;
}

.onair_block p {
    margin: 0;
    font-size: clamp( 12px, calc( 10px + 0.5vw ), 16px );
    color: #c5c5c5;
}

.onair_block_left {
    align-content: center;
}

/* 親要素（枠からはみ出た文字を隠すために overflow: hidden を追加） */
.onair_block_right {
    padding: clamp( 0.5rem, calc( 0.25rem + 1vw ), 1rem );
    /* margin: clamp( 0.5rem, calc( 0.25rem + 1vw ), 1rem ); */
    flex: 1; /* 先ほど追加した幅いっぱいに広げる設定 */
    overflow: hidden; /* ←追加：枠からはみ出したテキストを隠す */
    box-sizing: border-box;
}

.little {
  font-size: clamp( 12px, calc( 10px + 0.5vw ), 16px );
}

/* pタグにアニメーションを設定 */
.onair_block p {
    margin: 0;
    font-size: clamp( 14px, calc( 13px + 0.25vw ), 16px );
    color: #c5c5c5;

    /* ▼追加：右から左へ流すための設定▼ */
    display: inline-block;
    white-space: nowrap; /* テキストを改行させない */
    padding-left: 100%; /* 親要素の幅100%分、右に押し出してからスタートさせる */
    animation: marquee 12s linear infinite; /* 8秒かけて一定速度で無限ループ */
}

/* ▼追加：アニメーションの動き（キーフレーム）を定義▼ */
@keyframes marquee {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(-100%, 0); /* 自身の幅分すべて左へ移動しきる */
    }
}

.mail_block {
    display: flex;
    /* align-items: center;  ← 削除またはコメントアウト */
    background-color: #282828;
    /* border-right: solid #eeeeee 2px; */
    min-width: 0;
}

.mail_block img {
    width: 100%;
    max-width: clamp(60px, calc(40px + 5vw), 100px);
    display: block;
    object-fit: contain; /* 画像の縦横比崩れ防止 */
} 

.mail:hover, .onair_block_right:hover {
    background-color: #008b4a;
}

.mail {
    display: flex;          /* 追加：内部の要素をFlex配置 */
    align-items: center;    /* 追加：内部のテキストを上下中央揃え */
    /* justify-content: center; */
    align-self: stretch;    /* 追加：自身を親の高さ一杯まで伸ばす */
    padding: clamp(0.5rem, calc(0.25rem + 1vw), 1rem);
    flex: 1;
    overflow: hidden;
    box-sizing: border-box;
} 

.mail p {
    margin: 0;
    font-size: clamp(18px, calc(16px + 0.5vw), 22px);
    color: #f9f9f9;
    font-weight: 700;
    /* text-align: center; */
}

.mail a {
    text-decoration: none;
}


/* .mail_block {
    padding: clamp( 0.5rem, calc( 0.25rem + 1vw ), 1rem );
    display: flex;
    align-items: center;
    justify-content: center;
}

.mail_block a {
    text-decoration: none;
    width: 100%;
}

.mail_block:hover,.onair_block_right:hover {
    background-color: #008b4a;
}

.mail_block img {
    vertical-align: middle;
    margin: 0rem 0.3rem 0.3rem 0rem;
    width: 30px;
} */


/* ///////////////////////////////////////////ヘッダー画像/////////////////////////////////////////// */

.top {
  background-color: #f9f9f9;
  background-image: url(../images/back_top.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    overflow: hidden;
}

.top img {
  display: block;
  max-width: 800px;
  width: 100%;
  margin: 0rem auto;
  padding: clamp( 6rem, calc( 9rem + -4vw ), 8rem ) 0rem;
}

/* ///////////////////////////////////////////メール/////////////////////////////////////////// */

/* .back .mail {
  font-family: "source-han-sans-japanese", sans-serif;
  font-style: normal;
  font-weight: 100;
  width: 100%;
  max-width: 100%;
  margin: 0rem auto;
  line-height: 1.8;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all  0.3s ease;
  padding: 1rem;
  background-color: #282828;
}

.mail:hover {
    background-color: #008c46;
    }

.mail img {
  vertical-align: middle;
  margin: 0rem 0.3rem 0.3rem 0rem;
  width: 30px;
}

.mail p {
  font-size: 24px;
  text-align: center;
  color: #f9f9f9;
  font-weight: bold;
}

.mail .mail_icon {
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 2;
} */

.mail_circle_block {
  position: fixed;
  bottom: 10px;   /* 画面下からの距離 */
  right: 10px;    /* 画面右からの距離 */
  z-index: 1000;  /* 他の要素より前面に表示 */
  max-width: clamp( 100px, calc( 75px + 6.25vw ), 150px ); /* 画像の最大幅（任意） */
  height: auto;
}

.mail_circle_block img {
  width: 100%;
  max-width: clamp( 200px, calc( 150px + 12.5vw ), 300px ); /* 画像の最大幅（任意） */

}


/* ///////////////////////////////////////////スライダー/////////////////////////////////////////// */


/* .cs-loop-slider-wrapper {
  width: 100%;
  overflow: hidden;
  padding: clamp(2rem, calc(0rem + 8vw), 6rem) 0 0 0;
}


.cs-loop-slider-track {
  display: flex;
  gap: 1rem; 
  width: max-content;
  animation: cs-loop-scroll 30s linear infinite;
}

.cs-loop-slider-track:hover {
  animation-play-state: paused;
}


.cs-loop-slide {
  width: clamp(200px, calc(60px + 35vw), 480px);
  flex-shrink: 0; 
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  background-color: #ffffff;
}

.cs-loop-slide img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}


@keyframes cs-loop-scroll {
  0% {
    transform: translateX(0);
  }
  100% {

    transform: translateX(calc(-50% - 0.5rem));
  }
} */

.carousel-container {
      width: 100%;
      /* max-width: 1200px; */
      margin: 0 auto;
      padding: clamp(2rem, calc(0rem + 8vw), 6rem) 0;
    }

    .swiper {
      width: 100%;
      padding: 1rem 0;
      overflow: visible;
    }

    .swiper-slide {
      /* 背景色やテキスト設定を削除し、画像の角丸用設定を追加 */
      border-radius: 5px;
      height: 300px; /* 画像が見えやすいように少し高さを出しています */
      overflow: hidden; /* 画像の角を枠線（border-radius）に合わせて丸く切り抜くため */
      
      /* 非アクティブ時の設定 */
      opacity: 0.5;
      transform: scale(0.9);
      transition: transform 0.3s ease, opacity 0.3s ease;
    }

    /* 画像用に追加するCSS */
    .swiper-slide img {
      width: 100%;
      height: 100%;
      object-fit: cover; /* 画像の縦横比を維持したまま枠いっぱいにトリミングして表示 */
      display: block;    /* imgタグ特有の下部にある謎の隙間を消すため */
    }

    /* 中央（アクティブ）のスライド */
    .swiper-slide-active {
      opacity: 1;
      transform: scale(1);
    }


/* ///////////////////////////////////////////概要/////////////////////////////////////////// */

.wording {
  color: #f9f9f9;
  text-align: center;
  width: 100%;
  margin: 0 auto;
  padding: 2rem 1rem;
  background-color: #282828;
  text-align: center;
	display: block;
}

.wording p {
  font-size: clamp( 16px, calc( 15.5px + 0.125vw ), 17px );
    /* margin-bottom: 1rem; */
  line-height: 1.6em;
  text-align: left;
  display: inline-block;
  max-width: 1000px;
}


/* ///////////////////////////////////////////コーナー・SNS/////////////////////////////////////////// */

.segment_block,.sns_block {

}

.segment_block h2,.sns_block h2 {
  font-family: din-2014, sans-serif;
font-weight: 700;
font-style: normal;
  color: #008c46;
  font-size: clamp( 32px, calc( 24px + 2vw ), 48px );
  margin-bottom: clamp( 1.5rem, calc( 1.25rem + 1vw ), 2rem );
  border-bottom: 3px solid #008b4a;
  
}

.segment {
  color: #282828;
  padding-left: clamp( 0.5rem, calc( 0.25rem + 1vw ), 1rem );
  margin-bottom: clamp( 1rem, calc( 0.5rem + 2vw ), 2rem );
}

.segment:last-child {
    margin-bottom: 0rem;
}

.sns {
  color: #282828;
  padding-left: clamp( 0.5rem, calc( 0.25rem + 1vw ), 1rem );
  margin-bottom: clamp( 1rem, calc( 0.5rem + 2vw ), 2rem );
  text-align: center;
}

.segment_oyoshi {
  margin: 1rem 0rem;
}

.segment_oyoshi p,.segment_mukawa p {
  padding-left: 2em!important;
  text-indent: -1em;
}

.change {
  margin-bottom: clamp( 1rem, calc( 0.5rem + 2vw ), 2rem );
}

.segment h3,.sns h3 {
  font-size: clamp( 20px, calc( 18px + 0.5vw ), 24px );
  margin-bottom: 0.5rem;
}

.segment h4 {
  padding-left: clamp( 0.5rem, calc( 0.25rem + 1vw ), 1rem );
  font-size: clamp( 19px, calc( 17.5px + 0.375vw ), 22px );
  margin-bottom: 1rem;
  color: #ff7d05;
}

.segment h5 {
padding-left: clamp(0.5rem, calc(0.25rem + 1vw), 1rem);
    font-size: clamp( 19px, calc( 17.5px + 0.375vw ), 22px );
    color: #00aa78;
    margin-bottom: 0.5rem;
}

.segment .asterisk {
  margin: 1rem 0rem;
  text-align: left;
}

.segment p,.sns p {
  color: #282828;
  padding-left: clamp( 0.5rem, calc( 0.25rem + 1vw ), 1rem );
  font-size: clamp( 16px, calc( 15.5px + 0.125vw ), 17px );
}

.sns img {
  display: block;
  width: 100%;
  max-width: 560px;
  text-align: center;
  margin: 0 auto;
  height: auto;
}

.sns a{
    display: inline-block;
    transition: all .3s ease-in-out;

}

.sns a:hover{
    box-shadow: 0 0 10px rgb(94, 94, 94);
}


/* ///////////////////////////////////////////出演者/////////////////////////////////////////// */

.performers_block {
  margin: 0 auto;
  padding: clamp( 2rem, calc( 1rem + 4vw ), 4rem ) 1rem;
  width: 100%;
  max-width: 1000px;
}

.performers_flex {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  align-items: center;
  justify-content: center;
}

.performers_flex_left {
  width: 100%;
  max-width: 300px;
}

.performers_flex_right {
  width: 100%;
  max-width: 300px;
}

.performers_flex img {
  width: 100%;
  max-width: 300px;
  vertical-align: middle;
}

.performers_flex a{
    display: block;
    transition: all .3s ease-in-out;

}

.performers_flex a:hover{
    box-shadow: 0 0 10px rgb(217 217 217);
}

.asterisk {
  font-size: 14px;
  text-align: center;
}


.pc_br {
  display: block;
}

.sp_br {
  display: none;
}


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

.onair_block_mail_sticky {
    /* top: 60px; */
        bottom: -1px;
}

}

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

/* ///////////////////////////////////////////onair部分/////////////////////////////////////////// */


/* .onair_block_mail {
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: 1fr 1fr;

}

.onair_block {

  border-right: none;
  border-bottom: solid #eeeeee 2px;
} */


.onair_block_mail {
        grid-template-columns: 1fr; /* 1列に変更 */
    }

    .onair_block {
        border-right: none; /* 左右の区切り線を消す */
        border-bottom: solid 1px #eeeeee; /* 代わりに下に線を入れる */
    }

        .mail_block {
        border-bottom: solid 1px #eeeeee; /* 代わりに下に線を入れる */
    }

}


@media screen and (max-width: 460px) {
  
.sp_br {
  display: block;
}

.pc_br {
  display: none;
}

}