@charset "UTF-8";

/* ------------------------------------------------------
   基本設定
------------------------------------------------------ */



body {
	margin: 0;
	padding: 0;
	background-color: #fff; /* 背景色を設定 */
	overflow-x: hidden; /* 横スクロールを隠す */
	background-image: url('../img/bg.png'); /* イラストのパスを指定 */
	background-size: cover; /* 背景画像を全体に広げる */
	background-position: bottom; /* 画像を下部に配置 */
	background-repeat: no-repeat; /* 画像の繰り返しを無効化 */

  }

  #container {
	position: relative;
	max-width: 960px; /* コンテナの最大幅を設定 */
	margin: 0 auto; /* 水平方向に中央寄せ */
	overflow: hidden; /* 子要素がはみ出した部分を隠す */
  }


  main {
	position: relative;
	max-width: 960px;
	margin: 0 auto;
	overflow: hidden;
	border-radius: 10px;
	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
	border: 2px solid #000;
  }
  
a {
	color: #b21d1d;
}
.hidden {
	position: absolute;
	top: -9999px;
	left: -9999px;
}
.cg {
	pointer-events: none;
}

/*========= レイアウトのためのCSS ===============*/




ul{
  margin:0;
  padding: 0;
  list-style: none;
}

a:hover,
a:active{
  text-decoration: none;
}




/* sticky-footer
---------------------- */
/* html, body { height: 100%;} */
body > #global-footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}


#global-footer {
	padding: calc(var(--v-space) / 2) 1em;
	color: #fff;
	text-align: center;
	background: #00335e;
}

body {
	background-attachment: fixed;
  }
  
  footer {
	background-attachment: fixed;
  }


/* footer
---------------------- */
.colophon {
	margin-top: 0;
	font-size: var(--12px);
}
.colophon strong {
	padding-left: .5em;
	font-size: max(1rem, min(.909rem + .45vw, 1.25rem)); /* 16px20px */
	font-weight: bold;
	line-height: 2;
}
.colophon a {
	color: #fff;
}
.copyright {
	margin: 0;
	padding: 2em 0 0;
	font-size: var(--14px);
	text-align: center;
}

/* breadcrumb
---------------------- */
.breadcrumb {
	padding: 1em 1.5em;
	background: #13246d;
	font-size: .8rem;
}
.breadcrumb-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.breadcrumb-list li + li::before {
	content: "/";
	padding: 0 .3em;
	color: #ddd;
}
.breadcrumb-item {
	color: #fff;
	line-height: 1.2;
}
.breadcrumb-item a {
	color: #fff;
}
@media (max-width: 768px) {
	.breadcrumb {
		font-size: var(--12px);
	}
	.breadcrumb-item span {
		display: none;
	}
}
@media (min-width: 769px) {
	.breadcrumb {
		padding: 1em 4%;
	}
	.breadcrumb-list {
		margin: auto;
		max-width: 1200px;
	}
}


/* ------------------------------------------------------
   ヘッダー hero
------------------------------------------------------ */



/* ------------------------------------------------------
   コンテンツ
------------------------------------------------------ */
main section {
	padding: 1rem 0;
}

.i-container {
	margin: 4% auto;
	padding:2rem;
}

@media (min-width: 769px) {
	.i-container {
		max-width: 1200px;
	}
}
@media (min-width: 1300px) {
	.i-container {
		margin: auto;
	}
}

.c-title {
	position: relative;
	font-size: 2.2rem;
	text-align: center;
	border-bottom: 5px solid #13246d;
	padding-bottom: 1rem;
}


@media (max-width: 768px) {

	.c-title {
		font-size: 1.8rem;
	}

	.i-container {
		margin: 0 auto;
		padding:1rem;
	}
	
	.intro {
		margin: 0 auto;
	}

	main {
		position: relative;
		max-width: 90%;
		margin: 0 auto;
		overflow: hidden;
		border-radius: 10px;
		box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
		border: 2px solid #000;
	}

	main section {
		padding: 0;
	}
	
}


.c-title::after {
	content: '';
	position: absolute;
	bottom: -5px;
	left: 50%;
	transform: translateX(-50%);
	width: 70px;
	height: 5px;
	background-color: #b21d1d;
}
.br {
	display: inline-block;
}
.small {
	font-size: 65%;
}



.introduction {
	background: #fff url(../img/bg.jpg) center center / cover no-repeat;
	width: 100%;
	padding-top:20px;
	padding-bottom:0px;
}







/* 予告動画
---------------------- */
.promotion {
padding: 2% 4%;
width:100%;
}
/*@media (min-width: 769px) {
	.promotion {
		margin: auto;
		max-width: 800px;
	}
}
*/
.youtube-video {
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.youtube-video iframe {
	width: 100%;
	height: 100%;
}

@supports not (aspect-ratio: 16 / 9) {
	.youtube-video {
		position: relative;
		padding-top: 100%;
	}
	.youtube-video iframe {
		position: absolute;
		top: 0;
		right: 0;
		object-fit: cover;
	}
}


/* 概要 intro
---------------------- */
.intro-content {
	display: flex;
	flex-direction: column;
	align-items: center; /* 中央寄せを追加 */
	padding: 4% 4%;
}
.intro-img {
	margin-top: 3em;
}

.intro-text ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.intro-text li:first-child {
	margin-bottom: 2em;
}

.shizuoka,
.kagoshima {
	line-height: 2;
}

.shizuoka span,
.kagoshima span {
	font-size: 1.6rem;
	line-height: 1.6;
}

.shizuoka span {
	color: #1a24a7;
}

.kagoshima span {
	color: #a01f2a;
}

@media (min-width: 769px) {
	.intro {
		padding-top: 0;
	}
	.intro-content {
		padding: 0 4% 4%;
	}

}

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

	h4 {
		font-size:1rem;
		margin:1rem auto;
		padding-bottom: 0.3em;
	}

	.shizuoka span,
	.kagoshima span {
		font-size: 1.2rem;
		line-height: 1;
	}
}


/* 通常のスタイル */
.intro-content {
    /* 通常のスタイルのプロパティ */
}

/* スマートフォン向けのスタイル */
@media only screen and (max-width: 768px) {
    .intro-content {
        /* スマートフォン向けのスタイルのプロパティ */
        white-space: nowrap; /* 改行を無効化 */
    }
}



@media (min-width: 801px) {
	.intro-content {
		flex-direction: row;
		margin-top: 4%;
	}
	.intro-text {
		flex: 1.5;
		margin-right: 1.5em;
		min-width: 20em;
		max-width: 29em;
	}
	.intro-text p:first-child {
		margin-top: 0;
	}
	.intro-img {
		flex: 1;
		margin-top: 0;
	}
}









/* 出演者 cast
---------------------- */
.cast-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
}
.castlist-wrap {
	padding: 2em 1em;
	width: calc(100% /2);
	text-align: center;
}
.cast-img {
	margin: auto;
	max-width: 260px;
}
.cast-img img {
	margin: auto;
}

/*===*/

.cast-name {
	margin-top: .7em;
	color: var(--main-color);
	font-weight: bold;
	font-size: 1.4rem;
}

.cast-meta {
	margin-top: .5em;
	margin-bottom: 1em;
	font-size: 1.2rem;
	line-height: 1.6;
}


/*.cast-list div:first-child > .cast-desc {
	max-width: 18em;
}*/

@media (max-width: 768px) {
	.castlist-wrap {
		width: calc(100% / 2);
	}
/*	.cast-list div:first-child {
		flex-basis: 100%;
	}
	.cast-list div:first-child > dt,
	.cast-list div:first-child > dd {
		margin-left: auto;
		margin-right: auto;
		width: calc(50% - 1em);
	}
*/
	.cast-img {
		max-width: 150px;
	}
	.cast-meta {
		margin-bottom: .5em;
	}
	.cast-desc {
		padding: 0;
/*		max-width: 10em;*/
	}
/*	.cast-list div:first-child > .cast-desc {
		max-width: 16em;
	}
*/
}
@media (max-width: 480px) {
	.castlist-wrap {
		width: calc(100%);
	}
}


/*======================================================*/

header {
    position: relative;
    z-index: 100;
}



.program-title {
    position: absolute;
    top:50%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
}

/*========================================================*/

hr {
    height: 6px;
    background-color: #f2f2f2;
    width: 90%;
    border: none;
    margin: 2rem auto;
    border-radius: 20px;
}


h4 {
	font-size:1.4rem;
	margin:1rem auto;
	padding-bottom: 0.3em;
}

/*===============================*/

/*==================================================
スライダーのためのcss
===================================*/


.slider {
    position: relative;
    width:100%;
    margin:0 auto 2rem;
	padding: 2rem 0;
    z-index: 100;
	background-color: #fff;
	background-image: url('../img/bg_01.png');
	background-repeat: no-repeat;
	background-position: center top;
	background-attachment: fixed;
}



.slider img {
    width:60vw;/*スライダー内の画像を60vwにしてレスポンシブ化*/
    height:auto;
	border-radius: 10px;
	border:3px solid #000;
}

.slider .slick-slide {
  transform: scale(0.8);/*左右の画像のサイズを80%に*/
  transition: all .5s;/*拡大や透過のアニメーションを0.5秒で行う*/
  opacity: 0.5;/*透過50%*/
}

.slider .slick-slide.slick-center{
  transform: scale(1);/*中央の画像のサイズだけ等倍に*/
  opacity: 1;/*透過なし*/
}


/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #666;/*矢印の色*/
    border-right: 2px solid #666;/*矢印の色*/
    height: 15px;
    width: 15px;
}

.slick-prev {/*戻る矢印の位置と形状*/
    left: 1.5%;
    transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
    right: 1.5%;
    transform: rotate(45deg);
}


/*===================================*/
.gaiyou {
	border: 2px solid #b21d1d; /* 外側のボーダー */
	width: 100%;
	margin: 1rem auto;
	padding: 1rem;
	border-radius: 10px;
	background-color: #fff4f3;
  }


.gaiyou p{
	font-weight: bold;
    font-size: 1.2em;
    text-align: left;
    line-height: 2;
}

.keisen {
	text-decoration-line:underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 6px;
	text-decoration-style: dashed;
  }


.kagoshima {
    font-size: 1.4em;
	color: #1a24a7;
}

.shizuoka{
    font-size: 1.4em;
	color: #b21d1d;
}

.atarimae {
    font-size: 1.4em;
	color: #ff4800;
}

/*=======================*/

h3 {
	font-size: 1.6rem;
	text-align: center;
	padding: 1rem 0;
	margin: 1rem auto;
	color: #7a0f33;
}


/*=======================*/
/* 基本スタイル */
.intro-content {
    display: flex; /* 横並びにする */
    flex-wrap: wrap; /* 折り返し可能にする */
    justify-content: space-between; /* 要素間のスペースを均等に配置 */
}
/* intro-textのスタイル */
.intro-left_01 {
    width: 45%; /* 横幅45% */
    margin-right: 1rem;
}

.intro-right_01  {
    width: 45%; /* 横幅45% */
    margin-left: 1rem;
}

.intro-left_02 {
    width: 45%; /* 横幅45% */
    margin-right: 1rem;
}

.intro-right_02  {
    width: 45%; /* 横幅45% */
    margin-left: 1rem;
}


.intro-content img {
	width: 100%;
	border-radius: 10px;
}

/* スマートフォン向けの調整 */
@media (max-width: 768px) {
    .intro-content {
        flex-direction: column; /* 縦並びにする */
        align-items: center; /* 中央寄せ */
    }

    .intro-left_01,
    .intro-right_01,
	.intro-left_02,
    .intro-right_02 {
        width: 100%; /* 横幅100% */
		margin: 0 auto;
        order: initial; /* 初期化 */
    }

/* intro-textのスタイル */
.intro-left_01 {
    order: 1; /* 表示順序を逆転 */
}

.intro-right_01  {
    order: 2; /* 表示順序を逆転 */
}

.intro-left_02 {
    order: 2; /* 表示順序を逆転 */
}

.intro-right_02  {
    order: 1; /* 表示順序を逆転 */
}


}



.bordering01 {
	position: relative;
    padding-left: 60px;
    font-weight: 700;
	font-size: 1.8rem;
}


.bordering01::after {
    position: absolute;
    top: 50%;
    left: 0px;
    transform: translateY(-50%);
    content: '';
    width: 30px;
    height: 10px;
    background-color: #b21d1d;
}



/*==[セクションの背景]=================================*/

section {
	background-repeat: no-repeat;
	background-position: right bottom; /* 画像を右下に固定 */
	background-attachment: fixed; /* 画像を固定 */
	background-color: #fff;
  }

.intro {
	background-image: url('../img/bg_01.png');
  }
  
 .about {
	background-image: url('../img/bg_02.png');
  }
  
 .cast {
	background-image: url('../img/bg_03.png');
  }

  /*=----------------------------------------------=*/
  .slick-dots {
	display: none !important;
  }


  .comment_box {
	text-align: left;
    background-color: #fff4f3;
    padding: 10px;
    margin: 0 auto;
    border-radius: 10px;
    border: 1px solid #fad5d1;
    height: 100px;
  }

  .comment_box span {
	border-bottom: 2px solid #13246d;
	font-size: 1.2rem;
	font-weight: 700;
	color: #13246d;
  } 


  @media (max-width: 768px) {
  .comment_box {
	text-align: left;
    background-color: #fff4f3;
    padding: 10px;
    margin: 0 auto;
    border-radius: 10px;
    border: 1px solid #fad5d1;
    height: auto;
  }

  .comment_box span {
	border-bottom: 2px solid #13246d;
	font-size: 1.2rem;
	font-weight: 700;
	color: #13246d;
  } 
}