@charset "UTF-8";

/*Base*/

#column {
  padding: 0 0 80px;
}

#column .ttlwrap {
  color: #fff;
}

.date{display: block;margin:0 auto;color:#565555;}

@media screen and (min-width: 961px) {
  #column .ttlwrap {
    background: url("../../column/img/stageshow_ttlbg.jpg") no-repeat center;
    height: 500px;
  }

  #column .ttlwrap .inner {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
    height: 100%;
    padding-left: 65px;
    position: relative;
    left: 50%;
    margin-left: -245px;
  }

  #column .ttlwrap .txtwrap {
    width: 750px;
  }

}
@media screen and (min-width: 961px) {
  .clm_wrapper {
    margin: 0 auto;
}
  .clm_container{
		width:100%;
		padding:40px;
		box-sizing: border-box;
		margin-bottom:20px;
		background: #fff;
	}
	.date{width:1140px;}
	
	.clm_box{
		margin-top:30px;
		line-height: 2.06;
		font-size:140%;
	}
	}

.clm_box img{width:70%;margin:20px auto;}
.clm_wrapper{width:clamp(380px, 98%, 1140px);}


@media screen and (max-width: 960px) {
	
	.clm_wrapper {
    margin: 0 auto;
}
  .clm_container{
		width:100%;
		padding:20px;
		box-sizing: border-box;
		margin-bottom:20px;
		background: #fff;
	}
	.clm_box{
		margin-top:30px;
		line-height: 2.06;
		font-size:100%;
	}
	.clm_box img{width:100%;margin:20px auto;}
	
}

.clm_sttl{background: #00a9bd;padding:10px 10px 10px 20px;font-size:110%;margin:15px auto;font-weight: bold;color:#fff;}

.clm_emp{
	font-weight: bold;
	margin:10px auto;
	font-size:110%;
  padding: 4px 16px 4px 12px;
  position: relative;
  color: #03839E;
  border-left: 4px solid #00D1E9;}

.clm_emp::after {
  content: "";
  position: absolute;
  left: -4px;
  top: 0;
  width: 4px;
  height: 50%;
  background-color: #00a9bd;
}

/*.clm_sttl {
  position: relative;
  padding: 0.5em;
  background: #00a9bd;
  color: white;
  margin-left:-3em;
font-weight: bold;
}

.clm_sttl::before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 15px transparent;
  border-right: solid 20px rgb(149, 158, 155);
}*/

#column .ttlwrap .tempttlwrap {
  border-bottom: 1px solid #fff;
  padding-bottom: 20px;
  margin-bottom: 40px;
}



#column .ttlwrap .pickup ul.clm_link li p {
  font-size: 18px;
  line-height: 1.4em;
  margin-top: 10px;
}

@media screen and (max-width: 960px) {
  #column {
    padding: 0 0 40px;
  }

  #column .ttlwrap .tempttlwrap {
    background: url("../../column/img/stageshow_ttlbgsp.jpg") no-repeat left top/100% 100%;
    border-bottom: none;
    padding: 42.7% 0 0;
    margin-bottom: 0;
    position: relative;
  }

  #column .ttlwrap .tempttlwrap .tempttlbox {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-direction: column;
    flex-direction: column;
    padding: 0 5% 0 /*3*/7.3%;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }

  #column .ttlwrap .tempttlwrap .tempttl2 {font-size:clamp(18px,100%,28px);
    /*text-align: left;*/
  }

  #column .ttlwrap .tempttlwrap small {
    margin: 10px 0 0;
  }


  #column .ttlwrap .pickup ul.clm_link {
    display: block;
    padding: 0 20px;
  }

 #column .ttlwrap .pickup ul.clm_link li {
    width: auto;
  }

  #column .ttlwrap .pickup ul.clm_link li:not(:last-child) {
    margin: 0 0 25px;
  }
}
#column .tempttl {
  text-align: center;
  margin-bottom: 50px;
}

@media screen and (max-width: 960px) {
  #column .tempttl {
    font-size: 24px;
    margin-bottom: 30px;
  }
}

#column .program {
  background-color: #ffffc5;
  padding: 20px 0 35px;
}

#column .program .tempttl {
  color: #0068d2;
  line-height: 1.6;
}

#column .program2 ul {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0 -30px -30px 0;
}

#column .program2 li {
  background-color: #fff;
  width: 360px;
  margin: 0 30px 30px 0;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
}

#column .program2 li figure img {
  width: 100%;
  height: auto;
}

#column .program2 li .txtbox {
  padding: 20px;
}

#column .program2 li .list_ttl img {
  width: auto;
  height: 15px;
  margin-bottom: 10px;
}

#column .program2 li .list_ttl .txt {
  display: block;
  font-weight: bold;
  color: #0068d2;
  font-size: 20px;
  line-height: 1.4em;
}

#column .program2 li p {
  height: 85px;
  line-height: 1.7em;
  margin-top: 5px;
}

#column .program2 li .tempbtn {
  width: auto;
 background:#ff6c00;
}

@media screen and (max-width: 960px) {
  #column .program2 ul {
    margin: 0 0 -20px;
  }

  #column .program2 li {
    width: 100%;
    margin: 0 0 20px;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
  }

  #column .program2 li .txtbox {
    padding: 18px 15px 15px;
  }

  #column .program2 li .list_ttl img {
    height: 14px;
  }

  #column .program2 li p {
    height: auto;
    margin: 5px 0 10px;
  }
}
#column .event {
  background-color: #00a9bd;
  padding: 95px 0 110px;
}

#column .event .wrapper section:not(:last-child) {
  margin-bottom: 60px;
}

#column .event .ttl {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  color: #fff;
  font-weight: bold;
  font-size: 20px;
  line-height: 1em;
  margin-bottom: 20px;
}

#column .event .ttl img {
  width: auto;
  height: 28px;
  margin-right: 25px;
}

#column .event li {
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
}

#column .event li:not(:last-child) {
  margin-bottom: 15px;
}

#column .event li a {
  display: -webkit-flex;
  display: flex;
  background-color: #fff;
}

#column .event li figure {
  width: 360px;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
}

#column .event li figure img {
  width: 100%;
  height: auto;
}

#column .event li .txtbox {
  padding: 15px 30px;
}

#column .event li .list_ttl {
  font-weight: bold;
  color: #0068d2;
  font-size: 20px;
  line-height: 1.4em;
}

#column .event li .description {
  margin-top: 8px;
}

#column .event li .period {
  border-left: 1px solid #ddd;
  padding-left: 10px;
  margin-top: 12px;
  line-height: 1.4em;
}

@media screen and (max-width: 960px) {
  #column .event {
    padding: 45px 0 55px;
  }

  #column .event .wrapper {
    padding: 0 20px;
  }

  #column .event .wrapper section:not(:last-child) {
    margin-bottom: 40px;
  }

  #column .event .ttl {
    display: block;
    text-align: center;
    font-size: 15px;
  }

  #column .event .ttl img {
    height: 17px;
    margin: 0 auto 8px;
  }

  #column .event .ttl .txt {
    display: block;
  }

 #column .event li {
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
  }

  #column .event li a {
    display: block;
  }

  #column .event li figure {
    width: auto;
  }

  #column .event li .txtbox {
    padding: 15px;
  }
}
.remodal-overlay {
  background-color: #fff;
}


.clm_list ul li{list-style-type:disc;list-style-position: inside;text-indent:-1em; padding-left:1em;}
.clm_box p{  margin-top: 1em; margin-bottom: 1em;}

.dtlbox{border:1px solid #ddd;width:100%;padding:1em;margin-bottom:2em;}
.emp{font-weight:bold;}
.clm_box .movie{margin:0 auto;width:clamp(336px,100%,750px);aspect-ratio: 16 / 9;}
.clm_box .movie iframe{  width: 100%;  height: 100%;}
.btn_box{width:570px;margin:20px auto;text-align: center;}
.btn_box span{font-weight: bold;font-size: clamp(12px, 1.5vw, 20px); }

.clm_btn{
  background-color: #E4921B;
  width:100%;
  height: auto;
  padding: clamp(17px, 17px, 20px);
  text-align: center;
  font-weight: bold;
  font-size: clamp(14px, 1.5vw, 20px);
  line-height: 1.3em;
  text-decoration: none!important;
  color:#fff!important;
  border-radius:20px;
  display:block;
  box-sizing: border-box;
}




/* 共通（PC基準） */
dl.edi_box {
  display: flex;
  border: 1px solid #ccc;
  padding: 10px;
  width: 80%;
  margin:0 auto;
}

dt.calogo {
  width: 100px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

dd.edi_dtl {
  margin: 0;
  padding-left: 20px;
}

.clm_index{width: 80%;margin:20px auto;border: 1px solid #ccc;padding: 20px;}
.clm_index a{text-decoration: underline;color:rgba(46,82,252,1.00);}
p a{text-decoration: underline;color:rgba(46,82,252,1.00)!important;}

@media screen and (max-width: 768px) {
  dl.edi_box {
    flex-direction: column; /* 縦並び */
    width: 100%;
  }

  dt.calogo {
    width: 100%;
    justify-content: center; /* ロゴ中央 */
    margin-bottom: 10px;
  }

  dd.edi_dtl {
    padding-left: 0;
  }
	.calogo img{width:20%!important;}
	
  dd.edi_dtl span {
    display: block;      /* インライン要素をブロック化 */
    text-align: center;  /* 中央寄せ */
  }
  .clm_index{width: 100%;}
}


.edi_box{/*display: -webkit-flex;display: flex;-webkit-align-items: center;*/}
.edi_box .calogo{}
.calogo img{width:100%;margin:0;
  max-width: 100%;
  height: auto;
}
.edi_dtl{font-size:80%;}
@media screen and (max-width: 960px){.btn_box{width:95%;}.clm_btn{padding:15px;font-size:13px;}}


/*html {
  scroll-behavior: smooth;
}

@media (max-width: 960px) {
  [id] {
    scroll-margin-top: 84px;
  }
}

@media (min-width: 961px) {
  [id] {
    scroll-margin-top: 112px;  実際のheader高さに調整 
  }
}
.anchor-adjust {
  display: block;
  height: 120px;  headerの最大高さ
  margin-top: -120px;
  visibility: hidden;
}*/

.clm_index{line-height: 1.6;}
.center{text-align: center;}
.li_indent{padding-left:20px;}

@media screen and (max-width: 960px) {
  .clm_prev{
    width:40%!important;
    height: auto;
    padding: 14px 25px;
    font-size: 15px;
	margin-right:10px;
	}
  .clm_next {
    width:40%!important;
    height: auto;
    padding: 14px 25px;
    font-size: 15px;
	margin-left:10px;
	}
  .clm_prevd{
    width:40%!important;
    height: auto;
    padding: 14px 25px;
    font-size: 15px;
	margin-right:10px;
	}
  .clm_nextd {
    width:40%!important;
    height: auto;
    padding: 14px 25px;
    font-size: 15px;
	margin-left:10px;
	}	
}
	
.clm_prev,.clm_next {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  background-color: #0068d2;
  width: 470px;
  height: 50px;
  padding-left: 10px;
  text-align: center;
  font-weight: bold;
  color: #fff;
  font-size: 20px;
  line-height: 1.3em;
  margin: 0 auto;
}

.clm_prevd,.clm_nextd {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  width: 480px;
  height: 70px;
  padding: 30px 10px 30px 25px;
  text-align: center;
  color: #fff;
  font-size: 13px;
  line-height: 1.3em;
  margin: 0 auto;
	
}

	.clm_prev{background: #0068d2 url("../img/arrow_05.png") no-repeat left 15px center/7px auto;}
	.clm_next{background: #0068d2 url("../img/arrow_06.png") no-repeat right 15px center/7px auto;}
	.clm_prevd{background: #fff url("../img/arrow_11.png") no-repeat left 15px center/7px auto;border:#555555 1px solid;color:#555555;text-aligh:right;margin-right:10px;}
	.clm_nextd{background: #fff url("../img/arrow_09.png") no-repeat right 15px center/7px auto;border:#555555 1px solid;color:#555555;text-aligh:left;}

#clm_link{
	display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
	width:100%;
	border-top:3px dotted #B8B8B8;
	padding-top:30px;
}
.clm_prevd span{display:block;padding:10px;border-right:1px solid #555555;margin-right:10px;}
.clm_nextd span {display:block;padding:10px;border-left:1px solid #555555;margin-left:10px;}

@media screen and (max-width: 960px){
	#clm_link{display:block;width:100%;margin:10px auto;text-align: center;}
	.clm_prevd {width:100%!important;display: inline-flex;align-items: center;
  justify-content: center;padding:0 25px;height:70px;margin:10px auto;}
	.clm_nextd {width:100%!important;display: inline-flex;
  align-items: center;
  justify-content: center;padding:0 25px;height:70px;margin:10px auto;}
.clm_prevd span,.clm_nextd span {display:none;}
}
