@charset "UTF-8";

/* 共通部分
------------------------------- */
a {
  text-decoration: none;
}

ul,li { /* デコレーションあると左にはみ出るので注意 */
  list-style:none;
  padding-left:0;
}

hr {
  margin-block-start: 0;
}

table {
  text-align: start; /* santizaのcenter打ち消し　*/
  }

.flex_items {
  display: flex;
}
 

/*  試しに無効にしてみる
img {  
  max-width: 100%;
}
*/

/* * { 
  margin: 0px; 
  padding: 0px; 
} */

/* sanitize.cssの指定の打ち消し*/
 /* h1 {
margin: 0;
}  */


.wrapper { 
  width:100%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}





/* ------　文化庁補助マーク　------- */
.bunkahojo {
  display: flex;
  margin-bottom: 1rem;
  margin-top: 0.5rem;
  align-items: center;
  margin-left: 0;
  margin-right: 0;
  text-align: center;
  justify-content:center;
}
.bunkahojo img {
  height: 3rem;
}
.bunkahojo p{
  text-align: left;
  font-size: 0.7rem;
}





@media screen and (max-width:600px) {
  /*スマホ*/
  .hide_phone{  /* スマホで消す */
    display: none;
  }
  .show_phone{  /* スマホで表示 */
    display: block;
  }

  html { /* スムーススクロール　スマホの公演履歴表示用 */
    scroll-behavior: smooth;
  }
}

@media screen and (min-width: 601px) and (max-width: 834px) {
  /*tablet*/
  .hide_tab{ /* デタブレットで消す */
    display: none;
  }
  .show_tab{ /* デタブレットで表示 */
    display: block;
  }

}


@media screen and (min-width:835px) {
  /*pc*/
  .hide_des{ /* デスクトップで消す */
    display: none;
  }
  .show_des{ /* デスクトップで表示 */
    display: block;
  }
  .des_flex {
    display: flex;
  }
}






/* 色指定
------------------------------- */
.nlt_red {color:#ac1b4e;}/* rgba(172, 27, 78, 1.0) */

.nlt_m-red {color:#ce5780;}
.nlt_l-red {color:#dda3b8;}
.nlt_xl-red {color:#eed1db;}
.nlt_xxl-red {color:#f6e8ed;}
.nltblue {color:#00799a;}
.nltbrown {color:#6f332a;}




/* ふぉんと指定
------------------------------- */
body {
    font-family: '游明朝 Medium','游明朝','Yu Mincho',YuMincho,"Hiragino Mincho ProN", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝",serif;
}


/* ふぉんとサイズ */
.fs_big {
  font-size: 3rem;
  line-height: 2rem;
}

.fs_normal {
  font-size: 1rem;
  line-height: 1rem;
}


.small {
  font-size: 0.8rem;
  line-height: 1rem;
}
.ex-small {
  font-size: 0.5rem;
  line-height: 1rem;
}

/* ふぉんとスタイル */
.font_g {
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
}

.font_wr {
  font-weight: lighter;
}

.font_wl {
  font-weight: lighter;
}

.font_wn {
  font-weight: 600;
}

.font_wb {
  font-weight: bolder;
}

.g_Lancelot {
  font-family: 'Lancelot', cursive; 
}


/* ふぉんとそのほか */
.breakall {
  word-break: break-all;
}

.no_br {
  display: inline-block; /* 改行させない */
  }


.text_r {
  text-align: right;
}

.text_l {
  text-align: left;
}

.text_center {
  text-align:center;
}

.text_justy {
  text-align: justify;
}

/* 行中の文字高さセンターに合わせる */
h1 .title_v_center {
  vertical-align: middle;
}

/* 行中の文字高さを下げる */
.vertical_bottom {
  vertical-align:-50%;
}


h1.moji_tsume, .moji_tsume {
  letter-spacing: -4px
}

.moji_tsume2 {
  letter-spacing: -2px
}


.moji_ake5 {
  letter-spacing: 5px
}

.moji_ake10 {
  letter-spacing: 10px
}

.moji_tsume1 {
  letter-spacing: -1px
}


.moji_tsume05 {
  letter-spacing: -0.5px
}

/* 行間の指示 */
.moji_okuri0 {
  line-height:1%;
}

.moji_okuri05 {
  line-height:50%;
}

.moji_okuri1 {
  line-height:1;
}

.moji_okuri2 {
  line-height:2;
}

/* 文中のsmall文字の行間詰めたいが */
.small_line_tume{
  line-height:1;
  margin: 0;      /* 外側の余白を消す */
  padding: 0;

}

.moji_underline {
  text-decoration-line: underline; /* 下線を指定 */
  text-decoration-color: currentColor; /* テキストと同色 */
  text-decoration-style: solid;
}

.moji_W50 {
  display: inline-block;
  transform: scaleX(0.7);
  margin-left:-3%;
  letter-spacing: -0.2em
}
.moji_W40 {
  display: inline-block;
  transform: scaleX(0.6);
  margin-left:-3%;
  letter-spacing: -0.2em
}














/* マージンブロックの指示 */

.mblock0 {
  margin-block-start:0;
  margin-block-end: 0;
}

  /* タイトル下のPはコレ */
.mblock_s0 {
  margin-block-start:0;
}

.mblock_e0 {
  margin-block-end:0;
}

.h1h2titlemblock {
  margin-top: 0;
  margin-bottom: 0
}



/* ----------------------
ページ遷移の時にフェードイン (stage,memberは各css)
------------------------- */

main.aboutnlt, main.sup_cont,main.appear_container,main.audition {
  animation: fadein 3s forwards;
}
@keyframes fadein {
  0% {opacity: 0}
  100% {opacity: 1}
}





/* ーーーhome 詳しくはこちらボタンーーー */
.detail_but {
  position: relative;
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  display: block;
  transition: all  0.3s ease;/*ボタン背景色のイーズ*/
  filter: drop-shadow(3px 3px 1px rgba(0,0,0,0.2));
  font-weight: bolder;
  will-change: transform; /* safari hoverのbug回避　*/
  border:3px solid #ac1b4e; /* 色の設定*/
  color:#ac1b4e; /*色の設定*/
}

/*ボタン内側*/
.detail_but span{
  display: inline-block;
  transition: all .1s;/*アニメーションの設定*/
  position: absolute;
  top:28%;
  left:20%;
  font-size:1.2rem;
  line-height: 1.5;
  text-align: center;
  font-weight: bolder;
  z-index: 30;
  }

.detail_but:hover {
  background-color: #ac1b4e;
  filter: none;
  
  color:#fff; /*色の設定*/
  transform: translate(3px,3px);
  }




/* 　リンク　ギミックボタン　 */

/*=============
a.btn_03　購入　青ボタンblue
=============*/
a.buy_but {
  margin-top: 0.5rem;/* 上の要素との空き */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  position: relative;
  background: #00799a;
  border: 1px solid #00799a;
  border-radius: 10px;
  box-sizing: border-box;
  padding: 0 45px 0 25px;
  color: #fff;
  font-size: 16px;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  transition-duration: 0.3s;
  filter:drop-shadow(2px 2px 2px #aaa);/* mobile用にボタンに影付け */
}
a.buy_but:before {
  content: "";
  width: 8px;
  height: 8px;
  border: 0;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  right: 25px;
  margin-top: -4.5px;
}
a.buy_but:hover {
  background: #fff;
  color: #00799a;
}
a.buy_but:hover:before {
  border-top: 2px solid #00799a;
  border-right: 2px solid #00799a;
}



/*=============
a.btn_03　リンク赤ボタン　NLT_red
=============*/


a.link_but {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 35px;
  position: relative;
  background:#ac1b4e;
  border: 1px solid #ac1b4e;
  border-radius: 10px;
  box-sizing: border-box;
  padding: 0 45px 0 25px;
  color: #fff;
  font-size: 16px;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  transition-duration: 0.3s;
  font-weight: bold;
  filter:drop-shadow(2px 2px 2px #aaa);/* mobile用にボタンに影付け */
}
a.link_but:before {
  content: "";
  width: 8px;
  height: 8px;
  border: 0;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  right: 25px;
  margin-top: -4.5px; /* これで右の矢印上下位置調整 */
}
a.link_but:hover {
  background: #fff;
  color:#ac1b4e;
}
a.link_but:hover:before {
  border-top: 2px solid #ac1b4e;
  border-right: 2px solid #ac1b4e;
}

/* DeskTopのリンクボタン幅の指示*/
@media screen and (min-width:601px) {
  a.link_but { 
    width: 230px;
  }
  a.buy_but { 
    width: 320px;
  }
}








/* コロナテキスト　colona_text */
.colona_text {
  border: solid 1px #454545;
  padding: 0.5rem 1rem;
  text-align: justify;
}







/* ーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーー
全Header指示
ーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーー */



/* ーーーーーーハンバーガーメニューーーーーー　*/

.hb_menu{/*　メニューの表示位置指定は下の方に別途あり　*/
  position: relative;/*ボタン内側の基点となるためrelativeを指定*/
  /*background:#666;*/
  cursor: pointer;
    width: 150px;
    height:150px;
  border-radius: 50%;
  border:3px solid #ccc;
  z-index: 200;
  transition: all  0.3s ease;/*ボタン背景色のイーズ*/
}

.hb_menu:hover{
  background-color: #ac1b4e;
  
}

/*ボタン内側*/
.hb_menu span{
    display: inline-block;
    transition: all .4s;/*アニメーションの設定*/
    position: absolute;
  }

.hb_menu span:nth-of-type(1),
.hb_menu span:nth-of-type(3) {
    height: 2px;/* バーガー線の太さ　*/
  background: #ccc;
    width: 50%;/* バーガー線の幅　*/
    left: 25%;/* バーガー線の外枠からの位置　*/
 }

.hb_menu span:nth-of-type(1) { /*　上の線*/
  top:32%; 
}

.hb_menu span:nth-of-type(2) {/* menu文字　*/
  top:39%;
  left:27%;
  font-size:1.3rem;
  text-transform: uppercase;
  color: #ccc;
  /* font-weight: bolder; */
  
}

.hb_menu span:nth-of-type(3) { /*　下の線 */
  top:68%;
}

/*activeクラスが付与されると線が回転して×になり、Menu表記をしている2つ目の要素が透過して消える*/
.hb_menu.active span:nth-of-type(1) {
    top: 45%;
    left: 25%;
    transform: translateY(6px) rotate(-45deg);
    width: 50%;
}

.hb_menu.active span:nth-of-type(2) {
  opacity: 0;
}

.hb_menu.active span:nth-of-type(3){
    top: 53%;
    left: 26%;
    transform: translateY(-6px) rotate(45deg);
    width: 50%;
}

/* ーーー表示位置の指定ーーー　*/
.hb_menu {
    position: fixed;
    top:1.2rem;
    right:1.5rem;
}

@media screen and (max-width:600px) {
  /*スマホのcssを記述*/

  .hb_menu{
    cursor: pointer;
      width:100px;
      height:100px;
    border-radius: 50%;
    border:3px solid #ccc;
    z-index: 200;
    transition: all  0.3s ease;/*ボタン背景色のイーズ*/
  }
	
  .hb_menu {
    position: fixed;
    top:1rem;
    right:1rem;
  }

  .hb_menu span:nth-of-type(1),
  .hb_menu span:nth-of-type(3) {
      height: 2px;/* バーガー線の太さ　*/
    background: #ccc;
      width: 70%;/* バーガー線の幅　*/
      left: 15%;/* バーガー線の外枠からの位置　*/
   }

   .hb_menu span:nth-of-type(2) {/* menu文字　*/
    top:35%;
    left:15%;
    font-size:1.25rem;
    text-transform: uppercase;
    color: #ccc;
    font-weight: bold; 
    }

    .hb_menu.active span:nth-of-type(1) {
    top: 42%;
    left: 25%;
    transform: translateY(6px) rotate(-45deg);
    width: 50%;
    }


    .hb_menu.active span:nth-of-type(3){
    top: 54%;
    left: 26%;
    transform: translateY(-6px) rotate(45deg);
    width: 50%;
    }
}


/* ーーーーーオーバーレイナヴィゲーションーーーーー */

nav {
  position: fixed;
  display:none;
  top: 0;
  height: 100vh;
  width: 100%;
  z-index:190;
  background: rgba(172, 27, 78, 0.8);
  /* padding-top: 32%; */
 
}

.nav_container {
  /* margin-top: 38%; */
  margin: 50vh auto 0;
	transform: translateY(-48%);

 display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}


.nav_container a {
  color: #000;
  text-align: center; 
  line-height: 4rem;
  height: 4rem;
  /* line-height、height揃えるとセンター */
  width: 49%;
  background-color: rgba(255, 255, 255, 1.0);
  margin: 0.2%;
}

 /* ーーーメニューが奇数の場合の最後二コマ分にーーー */
.nav_container a.last_menu {
  width: 98.5% !important;;

}

a.nav_menu_item {
  
  /* background-color: #ac1b4e; */
  width: 100%;
  /* font-size: 1.2rem;スマホのfontsize*/
  font-size:3vh;
  /* line-height: 2rem;スマホの行間*/
  /* line-height: 5vh; */
  font-weight: lighter;
  text-decoration: none;
  transition: .5s;
}



@media (min-width: 601px) { /* ーーーデスクトップのーーー */
  
  .nav_container a {
    text-align: center; 
    line-height: 4rem;
    height: 4rem;
    /* line-height、height揃えるとセンター */
    width: 35%;
    background-color: rgba(255, 255, 255, 1.0);
    margin: 0.2%;
    transition: .4s;
  }

  /* ーーーメニューが奇数の場合の最後二コマ分にーーー */
  .nav_container a.last_menu {
    width: 70.5% !important;;
  }

a.nav_menu_item {
  font-size: 3vh; /* デスクトップのfontsize*/
  /* line-height: 8vh; デスクトップの行間*/
}

.nav_container a:hover {
  color: #fff;
  background-color:#dda3b8;
}

}

/* オーバーレイナビゲーションのスマホ横向きだけに対応 */
@media screen and (max-width: 1024px) and (orientation: landscape) {
  .nav_container {
    transform: translateY(-50%);
  }
  .nav_container a {
    line-height: 2.5rem;
    height: 2.5rem;
  }
}



/*　ーーーーーサブページの薄型headerのメニューーーーーー　*/

#header {
  overflow: hidden; /* 公演情報、劇団員の左右移動のスクロールバー消している  */
}

.nlt_slogo {
  display: block;
	padding-top:2rem; 
  margin-left: 0rem;
  margin-bottom: 0.5rem;
  width: 18%;
  min-width: 170px;
}

.nlt_slogo img {
  width:100%;
} 

@media screen and (min-width: 601px) and (max-width: 834px) {
  .nlt_slogo img {
    margin-left: 1rem;
    width: 180px;
  }
}

@media screen and (min-width: 835px) and (max-width: 1009px) {
  .nlt_slogo img {
    margin-left: 1rem;
    width: 193px;
  }
}

@media screen and (min-width: 835px)  {
 
}




@media screen and (min-width:1010px) {
  .nlt_slogo img {
    width: 200px;
  }
}


.head_set2{
  position: relative;
  z-index: 5;
  background-color:#fff;
  width: 100vw; /* 背景の白地が左右一杯に広がる*/
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0px 3px 3px 0px #eee;
  height:100px;
}

.head_set2-inner {
  display: flex;
	max-width: 1000px;
  margin: 0 auto;
}

.head_menu2 {
	display: flex;
  z-index:100;
  margin-top: 2.5rem;
  margin-left: 4%;
  font-size: 1rem;
  list-style: none; 
} 

.head_menu2 li {
    margin-right: 36px;
}
.head_menu2 a {
    color: #000;
}
.head_menu2 a:hover {
    color: #ac1b4e;
  transition: all  0.3s ease;/*ボタン背景色のイーズ*/
}

img.head_tw_icon {
	height: 1.5rem;
	width: 1.5rem;
}

img.head_tw_icon:hover {
  opacity: 0.6;
  transition-duration: 0.3s;
}


@media screen and (max-width: 950px){
  
    .head_menu2 { /* 950px以下ヘッダーtextメニューを消す */
      display:none
    }
    .head_menu {
      display:none
    }  
  } 

@media screen and (max-width:600px) {
    /*スマホのcssを記述*/
   
    .nlt_slogo {
      width:50%;
      padding-left: 1rem;
    }
    .head_set2 {
      display: block;
      width: 100%;
      
    }

    .head_set2-inner {
      display: block;
      width: 100%;
    }
    

   
    }




/*　ーーーーーfooterーーーーー */
footer {
  text-align: center;
  /* overflow: hidden; */
}

footer img.home_vlogo {
  height:30vw;
  min-height: 250px;
  max-height:400px;
}

footer b {
  font-size: 1.2rem;
}

footer p {
  text-align: center;
}



.foot_logo img{
   height:3.8rem;
 } 

 

 .footer_box {
 box-shadow: 0px 5px 4px #eee inset;
 background-color: #fff;
 }
 
 #footer {
   padding-top: 3rem;
 }
 
 
 #footer_logo img{
   height:3.8rem;
   margin-left: 2rem;
   margin-bottom: 3rem;
 }
 
 @media screen and (max-width:600px) {
   /*スマホで対応cssを記述*/
   .foot_logo img,#footer2_logo img,#footer1_logo img {
     margin-left: 0rem;
     height: 2.5rem;
   }
   footer p {
     font-size: 0.9rem;
   }

   footer img.home_vlogo {
    width:70%;
    height: auto;
    margin-top: 1rem;
  }
   
 }