@charset "UTF-8";

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
/*
  background-color: #000000;
*/
}

img {
  max-width: 100%;
  vertical-align: middle;
  pointer-events: none;
  /*スマホの長押し抑制*/
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
}

h1 {
  pointer-events: none;
  /*スマホの長押し抑制*/
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
}

figure::before {
  /*display: block;
 position: absolute;
 content: "";
 top: 0;
 bottom: 0;
 z-index: 2;
 width: 100%;
 background: white;
 opacity: 0;*/
}

h1::before {
  display: block;
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 100%;
  background: white;
  opacity: 0;
}

.co-inner {
	margin: 40px auto 80px;
	width: 948px;
	max-width: 100%;
	font-family: 'M PLUS Rounded 1c';
	transform: rotateZ(0.03deg);
/*
	margin: 0 auto 0;
	width: 1080px;
  width: 900px;
  max-width: 90%;
*/
}


.co-inner.mv {
	width: 1080px;
}

.co-inner.mv img{

	margin: 0 auto 0;
	width: 100%;

}

.co-inner h2 { /*	各カテゴリタイトル設定	*/

/*
	color: #441618;
	color: #ffffff;
	color: #A5843F;
*/

	color: #4bc473;
	margin: 0px 0px 0px 0px;
	text-align: left;

	font-size: 24px;

	font-weight: 500;
	font-style: normal;


	letter-spacing: 0.1em;
	line-height: 1em;

/*
	font-size: 32px;
	font-family: "Hina Mincho", "Noto Serif JP","Roboto", sans-serif;
*/

}

.bg-box-01 { /* 背景設定1 */
	background-image: url("../img/bg/tks_bg_p001_v004.png");
/*
	background-image: url("../img/bg/bg_pattern_02.jpg");
	background-image: url("../img/bg/bg-pattern.png");
*/

  background-repeat: repeat;
  background-position: top;
  background-size: auto;
}

.bg-box-02 {
  background-image: url("../img/bg/ototena_bg_p003_v11.jpg");
  background-repeat: repeat;
  background-position: top;
  background-size: auto;

  padding-top: 80px;
/*
  position: relative;
*/
}

.co-inner h3 { /*	イントロダクション内見出し専用	*/

	font-size: 24px;
	line-height: 1.6em;


}




/* 各カテゴリ毎枠装飾 */
.dot-box {
  background: rgb(255 255 255 / 30%);
  padding: 0px 0px 32px 0px;
  border: 2px solid #a7a7a7;

  border-radius: 5px;

  position: relative;

/*
  border: 2px solid #009f39;
  border: 1px solid #441618;
  border: 1px solid #A5843F;

*/

}

.dot-box:before,
.dot-box:after {
  position: absolute;
  content: '';
  width: 6px;
  height: calc(100% + 6px);
  display: inline-block;
  box-sizing: border-box;
}

.dot-box:before { /* 枠四隅にワンポイントの点 */
/*
  border-top: dotted 6px #441618;
  border-bottom: dotted 6px#441618;
  left: -3px;
  top: -3px;
*/
}

.dot-box:after { /* 枠四隅にワンポイントの点 */
/*
  border-top: dotted 6px #A5843F;
  border-bottom: dotted 6px #441618;
  right: -3px;
  top: -3px;
*/
}

.fadein01 {	/*	フェードイン処理メイン	*/
  opacity: 0;
  transform: translateY(0);
  transition: all 1s;
/*debug st*/
  opacity: 1;
/*debug ed*/

}

.fadein02 { /*	フェードイン処理サブ	*/
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s;
  transition-delay: 0.2s;
/*debug st*/
  opacity: 1;
/*debug ed*/
}

.fadein02.no1 {
  transition-delay: 0.2s;
}

.fadein02.no2 {
  transition-delay: 0.3s;
}

.fadein02.no3 {
  transition-delay: 0.4s;
}

.fadein02.no4 {
  transition-delay: 0.5s;
}

.fadein03 {
  opacity: 0;
  transform: translateY(60px);
  transition: all 1s;
}

/*navigation*/
.d-header {	/*	ヘッダー上部グラデーション装飾設定	*/
  background: linear-gradient(to top, transparent, rgb(68 22 24 / 90%));

/*
  background: linear-gradient(to top, transparent, rgb(165 132 63 / 100%));

*/

}

.d-header--inner {
	font-family: "noto Serif JP",sans-serif;
	color: #A5843F;
	font-weight: 200;

	padding-top: 24px;
/*
*/
}

.d-header__logo {
  position: absolute;
}

.navi-pc {
	display: flex;
	flex-wrap: nowrap;

	justify-content: center;

	margin: 0 auto 0;
/*

	justify-content: center;
*/
}

.navi-pc ul {
	display: flex;

	font-size: 14px;
}

/* ナビの縦ライン表示設定 */
.navi-pc li {
	border-right: 1px solid #ffffff;

/*
	border-right: 1px solid #441618;
*/
}

.navi-pc li:last-child {
  border-right: none;
}

.navi-pc li a {
  padding: 0 6px 0 6px;
  border-right: none;

  line-height: 1em;
  font-style: normal;

	color: #ffffff;

/*
  font-weight: 700;
  font-family: "Roboto", sans-serif;
*/
}

/* デスクトップ表示時・モバイルナビ非表示 */
.navi-sp { 
  display: none !important;
}

/*navigation*/

/*Main Visual*/
#mv {
  padding: 72px 0 72px 0;

}

#mv h1 {
  margin: 0 auto 0px;
  position: relative;
  box-shadow: 12px 12px 18px 0px rgba(0, 0, 0, 0.40);
}

.mv img.onlySP {
  display: none !important;
}

.copy h2 {
  width: 1000px;
  margin: 0 auto;
  max-width: 100%;
}
.copy h2.after_active {
  width: 600px;
  margin: 0 auto;
  max-width: 100%;
}

/*Main Visual*/

/*NEWS*/
#news {
/*
	font-family: "Noto Serif JP","Roboto", sans-serif;
	font-weight: 500;
	color: #441618;
	padding-bottom: 64px;
*/
}

.news-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: start;

	width: 860px;
	margin: 8px auto 8px;


/*
	align-items: center;

*/
}

.news_col_001 {
	width: 12%;
	text-align: right;

	padding: 0 15px 0 0 ;

	font-size: 15px;
	color: #535353;
	line-height: 1.6;
/*
	color: #009f39;
	color: #A5843F;
*/
}

.news_col_002 {
	width: 88%;
	text-align: left;
	padding: 0 0 0px 12px ;

	color: #404040;
	font-size: 15px;
	font-weight: 500;

	line-height: 1.6; /* 行間調整 */

/*
	color: #585757;
	color: #009f39;
*/
}


.news_col_011 {
	width: 12%;
	text-align: right;

	padding: 0 15px 0 0 ;

	font-size: 15px;
	color: #535353;
	line-height: 1.6;
/*
	color: #009f39;
	color: #A5843F;
*/
}

.news_col_012 {
	width: 16%;
	text-align: left;
	padding: 0 0 0px 12px ;

	color: #404040;
	font-size: 15px;
	font-weight: 500;

	line-height: 1.6; /* 行間調整 */

/*
	color: #585757;
	color: #009f39;
*/
}

.news_col_013 {
	width: 72%;
	text-align: left;
	padding: 0 0 0px 12px ;

	color: #404040;
	font-size: 15px;
	font-weight: 500;

	line-height: 1.6; /* 行間調整 */

/*
	color: #585757;
	color: #009f39;
*/
}

.news_col_021 {
	width: 14%;
	text-align: left;

	padding: 0 15px 0 0 ;

	font-size: 15px;
	color: #535353;
	line-height: 1.6;
/*
	color: #009f39;
	color: #A5843F;
*/
}

.news_col_022 {
	width: 20%;
	text-align: left;
	padding: 0 0 0 12px ;

	color: #404040;
	font-size: 15px;
	font-weight: 500;

	line-height: 1.6; /* 行間調整 */

/*
	color: #585757;
	color: #009f39;
*/
}

.news_col_023 {
	width: 100%;
	text-align: left;

	margin: 24px 0 0px 0;
	padding: 0 0 0px 16px ;

	color: #404040;
	font-size: 18px;
	font-weight: 500;

	line-height: 1.6; /* 行間調整 */

/*
	color: #585757;
	color: #009f39;
*/
}

.news_col_024 {
	width: 100%;
	text-align: center;

	margin: 16px 0 24px 0;
	padding: 0 0 0px 16px ;

	color: #404040;
	font-size: 18px;
	font-weight: 500;

	line-height: 1.6; /* 行間調整 */

/*
	color: #585757;
	color: #009f39;
*/
}





.news-list li {
	width: 100%;
	font-size: 12px;
	line-height: 1.4;

	margin: 0 12px 4px 8px;

	/*	2行目以降をインデント字下げ x em分	*/
	text-indent: -0.6em;
	padding-left: 0.8em;
}

.news-list li:last-child {
  margin-bottom: 0;
}

.news-list li span {
	font-weight: 700;
	margin-right: 1.4em;

	color: #A5843F;

}

.news-list li a {
  font-weight: normal;
  text-decoration: underline;
}

.news-list li em {
  font-weight: normal;
  font-style: normal;

}

/* ニュース ボタン カテゴリ 確定: 青 */
.news_btn_01 {
	width: 100%;
	line-height: 2em;

	background: #048ABF;
	color: #ffffff;

	padding: 2px 5px 2px 5px;
	margin: 0px auto 3px;

	text-align: center;

	font-size: 12px;
	font-weight: bold;

	transition: all 0.3s;
	border-radius: 2em;

/*　↓確定３色（青1・緑5・紫7）

	background: #048ABF;
	background: #03A63C;
	background: #7A5CCF;

	background: #e0f252;
	background: #03A63C;
	background: #94CEF2;
	background: #4441A6;
	background: #D9043D;


	background: #009f39;

*/
}

/*
.news_btn_01:hover {
	background:#4bc473; transition: all .2s;
}
*/


/* ニュース ボタン カテゴリ */
.news_btn_02 {
	width: 100%;
	line-height: 2em;

	background: #94CEF2;
	color: #ffffff;

	padding: 2px 5px 2px 5px;
	margin: 0px auto 3px;

	text-align: center;

	font-size: .75rem;
	font-weight: bold;

	transition: all 0.3s;
	border-radius: 2em;

/*

	background: #e0f252;
	background: #009f39;

*/
}

/*
.news_btn_02:hover {
	background:#4bc473; transition: all .2s;
}
*/


/* ニュース ボタン カテゴリ */
.news_btn_03 {
	width: 100%;
	line-height: 2em;

	background: #4441A6;
	color: #ffffff;

	padding: 2px 5px 2px 5px;
	margin: 0px auto 3px;

	text-align: center;

	font-size: .75rem;
	font-weight: bold;

	transition: all 0.3s;
	border-radius: 2em;

/*

	background: #e0f252;
	background: #009f39;

*/
}

/*
.news_btn_03:hover {
	background:#4bc473; transition: all .2s;
}
*/


/* ニュース ボタン カテゴリ */
.news_btn_04 {
	width: 100%;
	line-height: 2em;

	background: #D9043D;
	color: #ffffff;

	padding: 2px 5px 2px 5px;
	margin: 0px auto 3px;

	text-align: center;

	font-size: .75rem;
	font-weight: bold;

	transition: all 0.3s;
	border-radius: 2em;

/*

	background: #e0f252;
	background: #009f39;

*/
}

/*
.news_btn_04:hover {
	background:#4bc473; transition: all .2s;
}
*/


/* ニュース ボタン カテゴリ 確定:緑 */
.news_btn_05 {
	width: 100%;
	line-height: 2em;

	background: #03A63C;
	color: #ffffff;

	padding: 2px 5px 2px 5px;
	margin: 0px auto 3px;

	text-align: center;

	font-size: .75rem;
	font-weight: bold;

	transition: all 0.3s;
	border-radius: 2em;

/*

	background: #e0f252;
	background: #009f39;

*/
}

/*
.news_btn_05:hover {
	background:#4bc473; transition: all .2s;
}
*/


/* ニュース ボタン カテゴリ */
.news_btn_06 {
	width: 100%;
	line-height: 2em;

	background: #e0f252;
	color: #000000;

	padding: 2px 5px 2px 5px;
	margin: 0px auto 3px;

	text-align: center;

	font-size: .75rem;
	font-weight: bold;

	transition: all 0.3s;
	border-radius: 2em;

/*

	background: #e0f252;
	background: #009f39;

*/
}

/*
.news_btn_06:hover {
	background:#4bc473; transition: all .2s;
}
*/


/* ニュース ボタン カテゴリ 確定：紫 */
.news_btn_07 {
	width: 100%;
	line-height: 2em;

	background: #7A5CCF;
	color: #ffffff;

	padding: 2px 5px 2px 5px;
	margin: 0px auto 3px;

	text-align: center;

	font-size: .75rem;
	font-weight: bold;

	transition: all 0.3s;
	border-radius: 2em;

/*

	background: #e0f252;
	background: #009f39;

*/
}

/*
.news_btn_07:hover {
	background:#4bc473; transition: all .2s;
}
*/




/*NEWS*/

/*VIDEO*/
#video {
  padding-bottom: 80px;
}

#video .dot-box {
  padding: 50px 100px;
}

.movie-list {
  display: flex;
  justify-content: space-between;
}

.movie-list.only1 {
  justify-content: center;
}

.movie-item {
  flex: 0 0 47%;
  cursor: pointer;
	padding: 0 6px 0 6px;

}

.movie-list.only1 .movie-item {
  flex: 0 0 70%;
}

.movie-item figure p {
  text-align: center;
  font-weight: normal;
}

.movie-item figure img {
  padding-bottom: 0.2em;
}

#video .slide-main {
  margin-bottom: 60px;
}

#video .slide-thum .slick-track {
  transform: unset !important;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 100% !important;

/*
  justify-content: space-between;
*/
}

#video .slick-track:before,
#video .slick-track:after {
  content: none;
}

/* 動画サムネイル　表示幅調整 */
#video .slide-thum .slick-slide {
  color: #ffffff;
  text-align: center;
  border-right: none;
  cursor: pointer;
  flex: 0 0 13%;	/* TRAILER１行に表示するサムネイル数調整 */
}

/*VIDEO*/

/*INTRODUCTION*/
#introduction {
  padding-bottom: 80px;
  position: relative;
  z-index: 10;

}

#introduction h2{ /* イントロダクションタイトル文字色など設定 */
	color: #A5843F;

}

h2.introduction-read{
  font-family: "Hina Mincho", "Noto Serif JP","Roboto", sans-serif;

	text-align: center;

  font-size: 24px;
  color: #441618;
  margin-bottom: 50px;
  letter-spacing: 0.1em;
  line-height: 1.5em;

/*
	text-align: left;
*/

}

h3.introduction-read {

	text-align: center;
	font-size: 32px;
	color: #441618;
	margin-bottom: 40px;
	letter-spacing: 0.1em;
/*
	text-align: left;

*/
}

p.introduction-read {

	text-align: center;
	color: #441618;
	padding: 0 2em 0em;

	font-size: 18px;
	font-weight: 400;
	line-height: 2em;
/*
	text-align: left;

*/

}

.introduction-read:last-child {
  margin-bottom: 0;
}

.introduction-read span {
  letter-spacing: 0;
}

.introduction-read strong {
	font-family: "Hina Mincho", "Sawarabi Mincho","noto Serif JP","Roboto", sans-serif;

/*
  background: linear-gradient(transparent 0%, rgba(88, 223, 243, 1) 0%);
*/
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size 0.5s;
}

.introduction-read strong.on {
	background-size: 100% 100%;
	color: #A5843F;

/*
	color: #441618;
	color: #000000;
	font-weight: 800
	color: #58dff3;
	color: #f5f9ff;
*/
}

h2.introduction-read em {
  padding: 0.2em;
  font-style: italic;
  font-weight: 900;
}

#introduction .dot-box {
  background: rgb(255 255 255 / 80%);
  padding: 50px 16px;
}

/*INTRODUCTION*/

/*STORY*/
#story {
  padding-bottom: 80px;
  position: relative;
  z-index: 10;
}

#story .dot-box {
  background: rgb(255 255 255 / 60%);
  padding: 50px;
}

#story h2 {
  color: #441618;

}

#story .story-list .slick-track {
  transform: unset !important;
  display: flex;
  justify-content: left;
  flex-wrap: wrap;
  width: 100% !important;
  margin-bottom: 65px;
}

#story .story-list .slick-slide { 
  color: #A5843F;
  padding: 0.5em;
  text-align: center;
  border: 1px solid #441618;
	/*	storyメニュー枠線調整など	*/
	border-right: 1px solid #441618;
/*
  border-right: none;
*/
  width: calc(100% / 6) !important;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

#story .story-list .slick-slide small {
  font-size: 0.8em;
  font-weight: 300;
  flex: 0 0 100%;
}

#story .story-list .slick-current {
  background: #ffffff;
  color: #A5843F;
}

#story .story-list .slick-slide:last-child {
  border-right: 1px solid #441618;
}

#story .story-list .slick-slide.active,
#story .story-list .slick-slide.not-active {
  min-height: 4.5em;
}

#story .story-list .slick-slide.not-active {
  pointer-events: none;
  cursor: not-allowed;
}

.story-inner {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.story-inner figure {
  flex: 0 0 50%;
  margin-top: 5px;
/*
	border: solid 1px #441618;
*/
}

.story-inner img {
	border: solid 1px #441618;
	margin: 0 0 8px 0;
}

.story-inner p {
  flex: 0 0 47%;
  font-weight: 400;
  line-height: 2em;
}

/*STORY*/

/*CHARACTER*/
#character {
  padding-bottom: 80px;
  position: relative;
  z-index: 10;
}

#character h2 {
  color: #A5843F;
}

/*CHARACTER*/

/*SPECIAL*/
#special {
  padding-bottom: 80px;
  position: relative;
  z-index: 10;
}

#special h2 {
  color: #A5843F;
  margin-bottom: 10px;
}

#special .special-read {
  color: #A5843F;
  font-size: 15px;
  margin-bottom: 20px;
}

#special .co-inner {
  width: 550px;
  max-width: 92%;
}

#special .dot-box {
  padding: 20px;
}

#special .twitter-tweet {
  margin: 0 auto !important;
}

.r-vakc41 {
  max-width: 100% !important;
}

/*SPECIAL*/

/*STAFF*/
#staff {
  padding-bottom: 80px;
  position: relative;
  z-index: 10;
}

#staff h2 {
  color: #A5843F;
}

#staff .dot-box {
	background: rgb(255 255 255 / 60%);

}

#staff .flex-box {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: start;

	width: 100%;
	max-width: 1080px;

	margin: 24px auto 12px;
	padding: 12px 0px 12px 12px;

/*
	display: flex;
  justify-content: center;
  margin-bottom: 42px;
  align-items: center;

*/

}


#staff .area-l {
	width: 35%;
	text-align: right;
	padding: 0px 32px 0px 0px;
}

#staff .area-l img {
  width: 200px;
}

#staff .area-l p {
  font-weight: bold;
  font-size: 16px;
  color: #000000;

/*
  text-align: right;

*/
}

#staff .area-r {
	width: 65%;
	text-align: left;

	margin: 0 0 28px 0;

}

#staff .area-r p {
  font-weight: bold;
  font-size: 16px;
  color: #000000;
}

#staff .area-r h4 {
  font-weight: normal;
  font-size: 16px;
  color: #000000;
}








/*comment*/
#comment {
  padding-bottom: 80px;
  position: relative;
  z-index: 10;
}

#comment h2 {
  color: #A5843F;
}

#comment .dot-box {
	padding: 24px 0px 24px 12px;
	background: rgb(255 255 255 / 60%);
}


#comment .flex-box {
	display: block;
	flex-wrap: wrap;

	justify-content: center;
	align-items: center;
	text-align: center;

	margin: 16px auto 64px;

/*
	display: flex;
*/
}


/*ORIGINAL*/
#orginal {
  padding-bottom: 80px;
  position: relative;
  z-index: 10;
}

#orginal h2 {
  color: #A5843F;
}

#orginal h3 {
	text-align: center;
	font-size: 24px;
	font-weight: 900;
	color: #A5843F;
	margin: 0px auto 0px;
}

#orginal p {
	text-align: center;
	font-size: 20px;
	font-weight: 700;
	color: #A5843F;
	margin: 0px auto 36px;
}

#orginal .dot-box {
	padding: 24px 12px 24px 12px;
	background: rgb(255 255 255 / 60%);
}

.flex-box {
  display: flex;
  justify-content: center;
  margin-bottom: 45px;
  align-items: center;
}

.flex-box:last-child {
  margin-bottom: 0;
}


/*STAFF*/

/*CAST*/
#cast {
  padding-bottom: 80px;
  position: relative;
  z-index: 10;
}

#cast h2 {
  color: #A5843F;
}

#cast .dot-box {
  padding: 0;
  background: rgb(255 255 255 / 75%);

	margin: 0 0 24px 0;
}

#cast .dot-box .fadein02.inph {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}

#cast .inph .flex-box {
  flex: 0 0 47%;
}

#cast .inph .area-l {
  flex: 0 0 35%;
  margin-right: 20px;
}

#cast .inph .area-r {
  flex: 0 0 65%;
}

.cast-box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

/* キャラクター紹介欄のサイズを調整*/
	text-align: center;
	margin: 0 auto 0;

	width: 70%;
/*
*/

}

.cast-item { /* キャスト１列の数調整 */
  flex: 0 0 48.5%;	/* 1列　2キャストの場合 */

/* ↓1列3キャストの場合 */
/*
  flex: 0 0 31.5%;
  flex: 0 0 48.5%;	
*/
  margin-bottom: 90px;
  position: relative;
}

.cast-item_02 { /* ポップアップない場合はこちらを指定 キャスト１列の数調整 */
  flex: 0 0 31.5%;	/* 1列3キャストの場合 */

/* ↓1列3キャストの場合 */
/*
  flex: 0 0 48.5%;	
*/
  margin-bottom: 90px;
  position: relative;
}

.cast-item_03 { /* 1行位置列版 */
  flex: 0 0 100%;	/* 1列3キャストの場合 */

/* ↓1列3キャストの場合 */
/*
  flex: 0 0 48.5%;	
*/
  margin-bottom: 90px;
  position: relative;
}










.cast-item span::after {
  content: "プロフィール";
	text-align: right;
	background-color : #A5843F;
/*
  background-image: url("../img/item/bt_01_open_v01.png");
  background-position: center;

  background-size: contain;
  background-size: cover;
*/

  width: 88px;
  height: 24px;
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;

/*
  top: 0;
  bottom: 0;

*/

}

.cast-text {
	font-family: "Hina Mincho", "Noto Serif JP","Roboto", sans-serif;
}

.cast-text p {
	text-align: left;

	font-size: 12px;
	font-weight: 500;
	margin: 0.7em auto 0.7em;
	width: 86%;
/*
	padding: 0 12px 0 12px;
*/
}

.cast-text h3 {
	font-size: 24px;
	font-weight: 700;
	color: #A5843F;
	border-bottom: 1px solid #000000;
	width: 88%;
	margin: 0 auto 0;
	padding : 10px 0 0 0;
}

.cast-text h4 {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 0.7em;
}

.popup-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  /* 半透明の背景 */
  z-index: 9999;
  /* ポップアップを最前面に表示 */
}

.cast-detail {	/* キャスト＆コメント 文字装飾・背景設定*/
  background: #ffffff;
  max-width: 900px;
  padding: 64px 48px 64px 48px;
}

.cast-inner {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.cast-inner figure {
  flex: 0 0 40%;
}

.cast-dt-text {
  flex: 0 0 58%;
}

.cast-dt-text span {
	display: block;
	width: 100%;
	text-align: left;
	font-weight: 700;
	font-size: 16px;

	border-bottom: 1px solid #441618;

	margin: 16px auto 0;

/*
	line-height: 1.6;
*/
}

.cast-dt-text small {
	display: block;
	width: 60%;
	text-align: center;
	font-size: 14px;
	border-bottom: 1px solid #441618;

	margin: 16px auto 0;

/*
	line-height: 1.6;
*/
}

.cast-dt-text small:first-child {
  margin-top: 0;
}

.cast-dt-text h3 {
	padding: 6px 18px;
	font-size: 32px;
	color: #A5843F;

	border-bottom: 1px solid #000000;

	position: relative;
	justify-content: space-between;

	text-align: center;

/*
	display: flex;
	background: #dcdcdc;
*/
}

.cast-dt-text h3 span {
  font-size: 14px;
}

.cast-dt-text h4 {
	padding: 0px 25px 12px 25px;
	font-size: 24px;
	position: relative;
	justify-content: space-between;
	text-align: center;
/*
	display: flex;
	align-items: center;
	background: #dcdcdc;
*/

}

.cast-dt-text h4 span {
  font-size: 14px;
}

.cast-dt-text p {
	padding: 8px 12px 8px 12px;
	font-size: 16px;

	line-height: 1.6em;
	font-weight: 500;
/*
	color: #A5843F;
	background: #dcdcdc;
	min-height: 248px;
*/
}

.cast-dt-text p.size-s {
  line-height: 1.85em;
  padding: 15px 25px;
}

.close-popup {
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
  color: #333;
  width: 27px;
  display: block !important;
}

/*CAST*/

/*background motion*/
.moving-photo figure {
  position: absolute;
}

#mvph_01 {
  top: 900px;
  right: 0;
  width: 800px;
  max-width: 50vw;
}

#mvph_02 {
  top: 1100px;
  left: 7%;
  width: 360px;
  max-width: 30vw;
  z-index: 2;
}

#mvph_03 {
  top: 1900px;
  left: 0;
  width: 360px;
  max-width: 30vw;
}

#mvph_04 {
  top: 3400px;
  right: 0%;
  width: 500px;
  max-width: 30vw;
}

#mvph_05 {
  top: 4650px;
  left: 0%;
  width: 390px;
  max-width: 50vw;
}

#mvph_06 {
  top: 5600px;
  right: 2%;
  width: 500px;
  max-width: 50vw;
}

/*music*/
#music {
  padding-bottom: 80px;
  position: relative;
  z-index: 10;
}

#music h2 {
  color: #A5843F;
}

#music h3 {
	text-align: center;
	font-size: 28px;
	font-weight: 900;
	color: #A5843F;
	margin: 0px auto 0px;
}

#music p {
	text-align: center;
	font-size: 20px;
	font-weight: 700;
	color: #A5843F;
	margin: 0px auto 36px;
}

#music .dot-box {
	padding: 24px 0px 24px 12px;
	background: rgb(255 255 255 / 60%);
}




/*topics*/
#topics {
  padding-bottom: 80px;
  position: relative;
  z-index: 10;
}

#topics h2 {
  color: #A5843F;
}

#topics h3 {
	text-align: center;
	font-size: 28px;
	font-weight: 900;
	color: #A5843F;
	margin: 0px auto 0px;
}

#topics p {
	text-align: left;
	font-size: 20px;
	font-weight: 700;
	color: #A5843F;
	width: 90%;
	margin: 0px auto 36px;
}

#topics .dot-box {
	padding: 24px 24px 24px 24px;
	background: rgb(255 255 255 / 60%);
}


/* 注釈　新 */
.notes_101{
	width: 90%;
	margin: 0px auto 0px;
	font-size: 12px;
	font-weight: 500;
}

.notes_101 ul{
	list-style: none;

	/* ２行目インデント*/
	padding-left:1em;
	text-indent:-1em;
}



/*background motion*/

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

  /*navigation*/
  .d-header {
/*
    background: linear-gradient(to top, transparent, rgb(244 243 175 / 100%));
*/
  }

  .d-header__logo {
    position: absolute;
    top: 20px;
    z-index: 30;
  }

/* モバイル表示時・デスクトップナビ非表示 */
  .navi-pc {
    display: none !important;
  }

  .navi-sp {
    display: block !important;
    position: fixed;
    right: 20px;
    top: 20px;
  }

  .btn-trigger {
    position: relative;
    width: 40px;
    height: 30px;
    cursor: pointer;
    z-index: 22;
  }

  .btn-trigger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #000;
    border-radius: 0;
  }

  .btn-trigger,
  .btn-trigger span {
    display: inline-block;
    transition: all .1s;
    box-sizing: border-box;
  }

  .btn-trigger span:nth-of-type(1) {
    top: 0;
  }

  .btn-trigger span:nth-of-type(2) {
    top: 14px;
  }

  .btn-trigger span:nth-of-type(3) {
    bottom: 0;
  }

  .active span {
    background-color: #ffffff;
  }

  .active span:nth-of-type(1) {
    -webkit-transform: translateY(20px) rotate(-45deg);
    transform: translateY(20px) rotate(-45deg);
    top: -10px;
  }

  .active span:nth-of-type(2) {
    left: 50%;
    opacity: 0;
    -webkit-animation: active-btn05-bar02 .3s forwards;
    animation: active-btn05-bar02 .3s forwards;
  }

  .active span:nth-of-type(3) {
    -webkit-transform: translateY(-20px) rotate(45deg);
    transform: translateY(-20px) rotate(45deg);
    bottom: -2px;
  }

/*	モバイルメニュー　カスタマイズ	*/
  .navi-sp nav {
    height: 100%;
    width: 100%;
    background: #e60012; /* スマホメニュー背景色 */


/*
	background-color: rgba(230,0,18,0.8);

    background: #A5843F;
    background: rgba(0, 0, 0, .89);
*/
    position: fixed;
    top: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-y: scroll;
    opacity: 0;
    z-index: -5;
    transition-duration: 0.2s;
    top: 100vh;
    display: none;

  }

  .navi-sp nav.active {
    z-index: 1;
    top: 0;
    display: flex;

    animation-name: fadeIn;
    animation-fill-mode: forwards;
    animation-duration: .2s;

  }


  .navi-sp nav ul {
    flex: 0 0 100%;
  }

  .navi-sp nav li {
    text-align: center;
  }

  .navi-sp nav li a {

	/* SP リンクメニュー基本カラー */
	color: #000000;
	font-size: 6.0vw;
	font-weight: 500;
	line-height: 1.8;
	letter-spacing: 0.1em;
/*

	color: #A5843F;
	color: #ffffff;
    padding: 1.0vh 0;
*/
  }

  /*navigation*/
}





@media screen and (max-width: 812px) {
	.bg-box-02 {

/*
		background-image: url("../img/bg/ototena_bg_p001_v01.jpg");
		background-repeat: no-repeat;
		background-size: cover;
		padding-top: 80px;
		position: relative;
*/
	}

	.dot-box {
	margin: 0px 0px 12px 0px;
	padding: 0px 8px 0px 8px;
	}




/*Main Visual*/
	#mv {
	padding-top: 72px;
	padding-bottom: 80px;
	}

	#mv h1 {
	box-shadow: 8px 8px 12px 0px rgba(0, 0, 0, 0.40);
	margin: 0 auto 12px;
	}

	.co-inner.mv {
	max-width: 100%;
	padding-top: 0;
	}

	.co-inner.mv img{
		width: 100%;
	}


	.co-inner h2 { /*	各カテゴリタイトル設定	*/

		text-align: center;
		font-size: 24px;
		line-height: 1.8em;
		/*
			font-size: 21px;
		*/

	}

	.co-inner h3 { /*	イントロダクション内見出し専用	*/

		font-size: 10px;
/*
		line-height: 1.6em;
*/
	}

	.copy {
	max-width: 92%;
	margin: 0 auto;
	}

	.copy h2 {
	width: 400px;
	max-width: 80%;
	}

  /*Main Visual*/

/*NEWS*/
	.news-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: start;

		margin: 8px auto 16px;
		padding: 0 4px 0 4px;
		width: 100%;

	}

	.news_col_001 {
		width: 100%;
		text-align: center;

		margin: 0px 0 4px 0;
		padding: 0px 0px 0px 0px ;

		font-size: 16px;
		line-height: 1.4;
/*
		color: #A5843F;
*/
	}

	.news_col_002 {
		width: 100%;
		text-align: left;
		padding: 0px 12px 0px 12px ;
		margin: 0px 0px 16px 0px;
		font-size: 12px;
		line-height: 1.6;

	}

	.news_col_011 {
		width: 20%;
		text-align: left;

		margin: 0px 0 4px 0;
		padding: 0px 0px 0px 0px ;

		font-size: 16px;
		line-height: 1.4;
/*
		color: #A5843F;
*/
	}

	.news_col_012 {
		width: 60%;
		text-align: center;

		margin: 0px auto 12px;
		padding: 0px 0px 0px 0px ;

		font-size: 16px;
		line-height: 1.4;
/*
		color: #A5843F;
*/
	}

	.news_col_013 {
		width: 100%;
		text-align: left;
		padding: 0px 12px 0px 12px ;
		margin: 0px 0px 16px 0px;
		font-size: 12px;
		line-height: 1.6;

	}

	.news_col_021 {
		width: 20%;
		text-align: left;

		padding: 0 16px 0 0 ;

		font-size: 16px;
	/*
		color: #009f39;
		color: #A5843F;
		color: #535353;
		line-height: 1.6;
	*/
	}

	.news_col_022 {
		width: 30%;
		text-align: left;
		padding: 0 0 0 16px ;

		color: #404040;
		font-size: 24px;
		font-weight: 500;

		line-height: 1.6; /* 行間調整 */

	/*
		color: #585757;
		color: #009f39;
	*/
	}

	.news_col_023 {
		width: 100%;
		text-align: left;

		margin: 24px auto 0;
		padding: 0 0 0px 16px ;

		color: #404040;
		font-size: 14px;
		font-weight: 500;

		line-height: 1.6; /* 行間調整 */

	/*
		color: #585757;
		color: #009f39;
	*/
	}

	.news_col_024 {
		width: 100%;
		text-align: center;

		margin: 16px 0 24px 0;
		padding: 0 0 0px 16px ;

		color: #404040;
		font-size: 14px;
		font-weight: 500;

		line-height: 1.6; /* 行間調整 */

	/*
		color: #585757;
		color: #009f39;
	*/
	}




	/* ニュース ボタン カテゴリ */

	/* ニュース ボタン カテゴリ 確定: 青 */
	.news_btn_01 {
		width: 100%;
		line-height: 2em;

		padding: 1px 4px 1px 4px;
		margin: 0px 0px 0px 12px;

		text-align: center;

		font-size: 12px;
		font-weight: bold;


/*
		background: #048ABF;
		color: #ffffff;
		transition: all 0.3s;
		border-radius: 2em;
*/
	}

	/*
	.news_btn_01:hover {
		background:#4bc473; transition: all .2s;
	}
	*/


	/* ニュース ボタン カテゴリ 確定:  */
	.news_btn_02 {
		width: 100%;
		line-height: 2em;

		padding: 1px 4px 1px 4px;
		margin: 0px 0px 0px 12px;

		text-align: center;

		font-size: 12px;
		font-weight: bold;


/*
		background: #048ABF;
		color: #ffffff;
		transition: all 0.3s;
		border-radius: 2em;
*/
	}

	/*
	.news_btn_02:hover {
		background:#4bc473; transition: all .2s;
	}
	*/


	/* ニュース ボタン カテゴリ 確定:  */
	.news_btn_03 {
		width: 100%;
		line-height: 2em;

		padding: 1px 4px 1px 4px;
		margin: 0px 0px 0px 12px;

		text-align: center;

		font-size: 12px;
		font-weight: bold;


/*
		background: #048ABF;
		color: #ffffff;
		transition: all 0.3s;
		border-radius: 2em;
*/
	}

	/*
	.news_btn_03:hover {
		background:#4bc473; transition: all .2s;
	}
	*/


	/* ニュース ボタン カテゴリ 確定:  */
	.news_btn_04 {
		width: 100%;
		line-height: 2em;

		padding: 1px 4px 1px 4px;
		margin: 0px 0px 0px 12px;

		text-align: center;

		font-size: 12px;
		font-weight: bold;


/*
		background: #048ABF;
		color: #ffffff;
		transition: all 0.3s;
		border-radius: 2em;
*/
	}

	/*
	.news_btn_04:hover {
		background:#4bc473; transition: all .2s;
	}
	*/


	/* ニュース ボタン カテゴリ 確定: 緑 */
	.news_btn_05 {
		width: 100%;
		line-height: 2em;

		padding: 1px 4px 1px 4px;
		margin: 0px 0px 0px 12px;

		text-align: center;

		font-size: 12px;
		font-weight: bold;


/*
		background: #048ABF;
		color: #ffffff;
		transition: all 0.3s;
		border-radius: 2em;
*/
	}

	/*
	.news_btn_05:hover {
		background:#4bc473; transition: all .2s;
	}
	*/


	/* ニュース ボタン カテゴリ 確定:  */
	.news_btn_06 {
		width: 100%;
		line-height: 2em;

		padding: 1px 4px 1px 4px;
		margin: 0px 0px 0px 12px;

		text-align: center;

		font-size: 12px;
		font-weight: bold;


/*
		background: #048ABF;
		color: #ffffff;
		transition: all 0.3s;
		border-radius: 2em;
*/
	}

	/*
	.news_btn_06:hover {
		background:#4bc473; transition: all .2s;
	}
	*/


	/* ニュース ボタン カテゴリ 確定: 紫 */
	.news_btn_07 {
		width: 100%;
		line-height: 2em;

		padding: 1px 4px 1px 4px;
		margin: 0px 0px 0px 12px;

		text-align: center;

		font-size: 12px;
		font-weight: bold;


/*
		background: #048ABF;
		color: #ffffff;
		transition: all 0.3s;
		border-radius: 2em;
*/
	}

	/*
	.news_btn_07:hover {
		background:#4bc473; transition: all .2s;
	}
	*/




	.news-list ul {
	}


	.news-list li {
		font-size: 12px;
		line-height: 1.4;
		
		margin: 0 0px 0px 0px;
		padding: 0 6px 0  1.6em;
		
		/*	2行目以降をインデント字下げ x em分	*/
		text-indent: -0.8em;
	}


	.news-list li span {

	}

  .news-list li a {
    display: block;
  }

  .news-list li em {
    display: block;
  }

  /*NEWS*/

  /*VIDEO*/
  #video {
    padding-bottom: 80px;
  }

  #video .dot-box {
    padding: 50px 15px;
  }

  #video .slide-main {
    margin-bottom: 44px;
  }

  #video .slick-next {
    bottom: -30px;
    right: -0px;
    width: 20px;
    top: auto;
  }

  #video .slick-prev {
    bottom: -30px;
    left: -0px;
    width: 20px;
    top: auto;
  }

  /*VIDEO*/

  /*INTRODUCTION*/
  #introduction {
    padding-bottom: 80px;
  }

  h2.introduction-read {
    font-size: 18px;
    margin-bottom: 1em;
  }

  p.introduction-read {
    font-size: 13px;
    padding: 0 .8em;
  }

  h3.introduction-read {
    font-size: 6vw;
  }

  #introduction .dot-box {
	margin: 0 auto 0;
	padding: 50px 0px;

/*
	letter-spacing : normal;
	width: 370px;
	padding: 10vw 1.5vw;

*/
  }

  /*INTRODUCTION*/

  /*STORY*/
  #story {
    padding-bottom: 80px;
  }

  #story .dot-box {
    padding: 50px 15px;
  }

  #story .story-list .slick-slide {
    width: calc(100% / 2) !important;
    border-right: 1px solid #441618;
  }

  #story .story-list .slick-track {
    margin-bottom: 30px;
  }

  .story-inner {
    display: block;
  }

  .story-inner figure {
    margin: 0 0 20px;
  }

  /*STORY*/

  /*CHARACTER*/
  #character {
    padding-bottom: 80px;
  }

  #character h2 {
    max-width: 92%;
    margin: 0 auto 20px;
  }

  #character .co-inner {
    width: 900px;
    max-width: 90%;
  }

  .character-link {
    position: relative;
    display: block;
  }

  /*.character-link::after {
		content: "";
		background-image: url("../img/item/cast_open_v01.png");
		background-position: center;
		background-size: contain;
		background-size: cover;
			width: 27px;
		height: 27px;
	  display: inline-block;
		position: absolute;
			bottom: 0;
		right: 0;	
	}
	.modaal-outer-wrapper:has(.character-detail){
		padding: 0;
	}*/
  /*CHARACTER*/

  /*SPECIAL*/
  #special {
    padding-bottom: 80px;
  }

  #special .co-inner {
    width: 92%;
  }

  /*SPECIAL*/

  /*STAFF*/
  #staff {
    padding-bottom: 80px;
  }

	#staff .dot-box {
	padding: 24px 0px 12px 0px;
	background: rgb(255 255 255 / 65%);
	}

  #staff .flex-box {
	flex-wrap: wrap;
		margin: 0px auto 24px;
	}

	#staff .area-l {
		width: 100%;
		padding: 0px 0px 8px 0px;
		text-align: center;
	}

	#staff .area-l p {
		font-size: 14px;

	}

	#staff .area-r {
		width: 100%;
		padding: 0px 0px 24px 0px;
	}

	#staff .area-r h4 {
		text-align: center;
		font-size: 14px;
	}

  /*STAFF*/




  /*comment*/
  #comment {
    padding-bottom: 80px;
  }

  #comment .dot-box {
	padding: 24px 12px 24px 12px;
	background: rgb(255 255 255 / 65%);
  }

  .flex-box {
    flex-wrap: wrap;
    margin-bottom: 30px;
  }

  .area-l {
    margin-right: 0;
    flex: 0 0 100%;
  }

  .area-l p {
    text-align: center;
  }

  .area-r {
    flex: 0 0 100%;
  }

  .area-r h4 {
    text-align: center;
    font-size: 16px;
  }

  /*comment*/




  /*CAST*/
  #cast {
    padding-bottom: 80px;
  }

  #cast .dot-box {
    padding: 0;
  }

  #cast .area-l {
    margin-right: 0;
    flex: 0 0 100%;
    text-align: center;
    margin-bottom: 10px;
  }

  #cast .inph .area-l {
    margin-right: 0;
    flex: 0 0 100%;
    text-align: center;
    margin-bottom: 10px;
  }

  #cast .area-r p {
    text-align: center;
  }

  #cast .dot-box .fadein02.inph {
    display: block;
  }

  .cast-item {	/* ポップアップある場合*/
    flex: 0 0 48%;
    margin-bottom: 40px;
  }

  .cast-item_02 {	/* ポップアップない場合*/
    flex: 0 0 48%;
    margin-bottom: 40px;
  }

	.cast-item_03 { /* 1行位置列版 */
		/* flex: 0 0 100%; */	/* 1列1キャストの場合 */

		margin-bottom: 40px;
	}

  .cast-text p {
    font-size: 10px;
	width: 96%;
  }

  .cast-text h3 {
    font-size: 5.0vw;
    width: 92%;
  }

  .cast-text h4 {
    font-size: 4.2vw;
    width: 95%;
  }

  .cast-inner {
    display: block;
  }

  .cast-inner figure {
    text-align: center;
    margin-bottom: 15px;
  }

  .cast-inner figure img {
    width: 50%;
  }

  .cast-detail {
    padding: 20px;
  }

  .cast-dt-text h3 {
    font-size: 14px;
    display: block;
    text-align: center;
    padding: 0px 6px 0px;
  }

  .cast-dt-text h3 span {
	display: block;
	font-size: 12px;

  }

  .cast-dt-text h4 {
		display: block;
		text-align: center;
		font-size: 24px;
		padding: 0px 6px 8px;
  }

  .cast-dt-text h4 span {
    font-size: 18px;
    display: block;

  }

  .cast-dt-text p {
    padding: 8px;
  }

  .cast-dt-text p.size-s {
    line-height: 1.8em;
    padding: 12px;
  }

  .cast-dt-text small {
	width: 60%;
	margin: 16px auto 0;
  }

  .close-popup {
    width: 40px;
  }

  /*CAST*/

  /*background motion*/
  #mvph_01 {
    top: 700px;
    max-width: 50vw;
  }

  #mvph_02 {
    top: 750px;
    left: 0;
    width: 360px;
    max-width: 40vw;
  }

  #mvph_03 {
    top: 1650px;
    width: 360px;
    max-width: 40vw;
    left: 0;
  }

  #mvph_04 {
    top: 2680px;
    right: 0;
    max-width: 50vw;
  }

  #mvph_05 {
    top: 3400px;
    left: 0;
    max-width: 50vw;
  }

  #mvph_06 {
    top: 4300px;
    right: 0;
    max-width: 50vw;
  }

  /*background motion*/

}




@keyframes active-btn05-bar02 {
  100% {
    height: 0;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

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


/*
		.navi-sp nav li a {
			font-size: 5.5vw;
		}

		.navi-sp nav li a {
			font-size: 5.5vw;
		}
*/

		.mv img.onlyPC {
			display: none !important;
		}

		.mv img.onlySP {
			display: block !important;
		}

	/*ORIGINAL*/
	#orginal {

	}

	#orginal h2 {

	}

	#orginal h3 {
		font-size: 16px;
		margin: 0px auto 0px;
	}

	#orginal p {
		font-size: 12px;
		margin: 0px auto 24px;
	}




	/*MUSIC*/
	#music {

	}

	#music h2 {

	}

	#music h3 {
		font-size: 18px;
		margin: 0px auto 0px;
	}

	#music p {
		font-size: 12px;
		margin: 0px auto 24px;
	}




	/*topics*/
	#topics {

	}

	#topics h2 {

	}

	#topics h3 {
		font-size: 18px;
		margin: 0px auto 0px;
	}

	#topics p {

		font-size: 12px;
		margin: 0px auto 24px;
	}


	/* 注釈　新 */
	.notes_101{
		font-size: 8px;
	}

	.notes_101 ul{
		
	}


/*******/
	.cast-box {

	/* キャラクター紹介欄のサイズを調整 SP*/

		width: 100%;
	}



/****/



}

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

  /*background motion*/
  #mvph_01 {
    top: 900px;
    max-width: 40vw;
  }

  #mvph_02 {}

  #mvph_03 {}

  #mvph_04 {}

  #mvph_05 {}

  #mvph_06 {}

  /*background motion*/
}

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

	#introduction .co-inner {
		max-width: 90%;
	}
	h2.introduction-read {
        font-size: 5.0vw;
        letter-spacing: 0;
	}
	
  /*background motion*/
  #mvph_01 {
    top: 920px;
  }

  #mvph_02 {
    top: 960px;
  }

  #mvph_03 {
    top: 1850px;
  }

  #mvph_04 {
    top: 2660px;
    right: 0;
    max-width: 50vw;
  }

  #mvph_05 {
    top: 3800px;
  }

  #mvph_06 {
    top: 4580px;
  }

  /*background motion*/

}


/* Slider */
.slick-slider {
  position: relative;

  display: block;
  box-sizing: border-box;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  -webkit-touch-callout: none;
  -khtml-user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;

  display: block;
  overflow: hidden;

  margin: 0;
  padding: 0;
}

.slick-list:focus {
  outline: none;
}

.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  top: 0;
  left: 0;

  display: block;
  margin-left: auto;
  margin-right: auto;
}

.slick-track:before,
.slick-track:after {
  display: table;

  content: '';
}

.slick-track:after {
  clear: both;
}

.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  display: none;
  float: left;

  height: 100%;
  min-height: 1px;
}

[dir='rtl'] .slick-slide {
  float: right;
}

.slick-slide img {
  display: block;
}

.slick-slide.slick-loading img {
  display: none;
}

.slick-slide.dragging img {
  pointer-events: none;
}

.slick-initialized .slick-slide {
  display: block;
}

.slick-loading .slick-slide {
  visibility: hidden;
}

.slick-vertical .slick-slide {
  display: block;

  height: auto;

  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}

.slick-prev,
.slick-next {
  background: none;
  border: none;
  padding: 0;
}

.slick-prev {
  position: absolute;
  top: 45%;
  left: -60px;
  width: 45px;
  cursor: pointer;
  z-index: 1;
}

.slick-next {
  position: absolute;
  top: 45%;
  right: -60px;
  width: 45px;
  cursor: pointer;
  z-index: 1;
}

.slick-list:hover .slick-track {
  animation-play-state: paused !important;
}

/*Slider*/

/* lightbox */
body.lb-disable-scrolling {
  overflow: hidden;
}

.lightboxOverlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: black;
  opacity: 0.8;
  display: none;
}

.lightbox {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 10000;
  text-align: center;
  line-height: 0;
  font-weight: normal;
  outline: none;
}

.lightbox .lb-image {
  display: block;
  height: auto;
  max-width: inherit;
  max-height: none;
  border-radius: 3px;

  /* Image border */
  border: 4px solid white;
}

.lightbox a img {
  border: none;
}

.lb-outerContainer {
  position: relative;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  border-radius: 4px;

  /* Background color behind image.
     This is visible during transitions. */
  background-color: white;
}

.lb-outerContainer:after {
  content: "";
  display: table;
  clear: both;
}

.lb-loader {
  position: absolute;
  top: 43%;
  left: 0;
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: 0;
}

.lb-cancel {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  background: url(../images/loading.gif) no-repeat;
}

.lb-nav {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}

.lb-container>.nav {
  left: 0;
}

.lb-nav a {
  outline: none;
  background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
}

.lb-prev,
.lb-next {
  height: 100%;
  cursor: pointer;
  display: block;
}

.lb-nav a.lb-prev {
  width: 34%;
  left: 0;
  float: left;
  background: url(../images/prev.png) left 48% no-repeat;
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}

.lb-nav a.lb-prev:hover {
  opacity: 1;
}

.lb-nav a.lb-next {
  width: 64%;
  right: 0;
  float: right;
  background: url(../images/next.png) right 48% no-repeat;
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}

.lb-nav a.lb-next:hover {
  opacity: 1;
}

.lb-dataContainer {
  margin: 0 auto;
  padding-top: 5px;
  width: 100%;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.lb-dataContainer:after {
  content: "";
  display: table;
  clear: both;
}

.lb-data {
  padding: 0 4px;
  color: #ccc;
}

.lb-data .lb-details {
  width: 85%;
  float: left;
  text-align: left;
  line-height: 1.1em;
}

.lb-data .lb-caption {
  font-size: 13px;
  font-weight: bold;
  line-height: 1em;
}

.lb-data .lb-caption a {
  color: #4ae;
}

.lb-data .lb-number {
  display: block;
  clear: left;
  padding-bottom: 1em;
  font-size: 12px;
  color: #999999;
}

.lb-data .lb-close {
  display: block;
  float: right;
  width: 30px;
  height: 30px;
  background: url(../images/close.png) top right no-repeat;
  text-align: right;
  outline: none;
  opacity: 0.7;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.lb-data .lb-close:hover {
  cursor: pointer;
  opacity: 1;
}

/* lightbox */

/* modaal */
.modaal-noscroll {
  overflow: hidden;
}

.modaal-accessible-hide {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px);
  /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0 !important;
  border: 0 !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden;
}

.modaal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  opacity: 0;
}

.modaal-wrapper {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  overflow: auto;
  opacity: 1;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.modaal-wrapper * {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-backface-visibility: hidden;
}

.modaal-wrapper .modaal-close {
  border: none;
  background: transparent;
  padding: 0;
  -webkit-appearance: none;
  display: none;
}

.modaal-wrapper.modaal-start_none {
  display: none;
  opacity: 1;
}

.modaal-wrapper.modaal-start_fade {
  opacity: 0;
}

.modaal-wrapper *[tabindex="0"] {
  outline: none !important;
}

.modaal-wrapper.modaal-fullscreen {
  overflow: hidden;
}

.modaal-outer-wrapper {
  display: table;
  position: relative;
  width: 100%;
  height: 100%;
}

.modaal-fullscreen .modaal-outer-wrapper {
  display: block;
}

.modaal-inner-wrapper {
  display: table-cell;
  width: 100%;
  height: 100%;
  position: relative;
  vertical-align: middle;
  text-align: center;
  padding: 80px 25px;
}

.modaal-fullscreen .modaal-inner-wrapper {
  padding: 0;
  display: block;
  vertical-align: top;
}

.modaal-container {
  position: relative;
  display: inline-block;
  width: 100%;
  margin: auto;
  text-align: left;
  color: #000;
  max-width: 900px;
  border-radius: 0px;
  background: #ffffff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  cursor: auto;
}

.modaal-container.is_loading {
  height: 100px;
  width: 100px;
  overflow: hidden;
}

.modaal-fullscreen .modaal-container {
  max-width: none;
  height: 100%;
  overflow: auto;
}

.modaal-close {}

.modaal-close:focus,
.modaal-close:hover {
  outline: none;
  background: #ffffff;
}

.modaal-close:focus:before,
.modaal-close:focus:after,
.modaal-close:hover:before,
.modaal-close:hover:after {
  background: #b93d0c;
}

.modaal-close span {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px);
  /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0 !important;
  border: 0 !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden;
}

.modaal-close:before,
.modaal-close:after {
  display: block;
  content: none;
  position: absolute;
  top: 14px;
  left: 23px;
  width: 4px;
  height: 22px;
  border-radius: 4px;
  background: #ffffff;
  -webkit-transition: background 0.2s ease-in-out;
  transition: background 0.2s ease-in-out;
}

.modaal-close:before {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.modaal-close:after {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.modaal-fullscreen .modaal-close {
  background: #afb7bc;
  right: 10px;
  top: 10px;
}

.modaal-content-container {
  padding: 0;
}

.modaal-confirm-wrap {
  padding: 30px 0 0;
  text-align: center;
  font-size: 0;
}

.modaal-confirm-btn {
  font-size: 14px;
  display: inline-block;
  margin: 0 10px;
  vertical-align: middle;
  cursor: pointer;
  border: none;
  background: transparent;
}

.modaal-confirm-btn.modaal-ok {
  padding: 10px 15px;
  color: #ffffff;
  background: #555;
  border-radius: 3px;
  -webkit-transition: background 0.2s ease-in-out;
  transition: background 0.2s ease-in-out;
}

.modaal-confirm-btn.modaal-ok:hover {
  background: #2f2f2f;
}

.modaal-confirm-btn.modaal-cancel {
  text-decoration: underline;
}

.modaal-confirm-btn.modaal-cancel:hover {
  text-decoration: none;
  color: #2f2f2f;
}

.modaal-instagram .modaal-container {
  width: auto;
  background: transparent;
  box-shadow: none !important;
}

.modaal-instagram .modaal-content-container {
  padding: 0;
  background: transparent;
}

.modaal-instagram .modaal-content-container>blockquote {
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
}

.modaal-instagram iframe {
  opacity: 0;
  margin: -6px !important;
  border-radius: 0 !important;
  width: 1000px !important;
  max-width: 800px !important;
  box-shadow: none !important;
  -webkit-animation: instaReveal 1s linear forwards;
  animation: instaReveal 1s linear forwards;
}

.modaal-image .modaal-inner-wrapper {
  padding-left: 140px;
  padding-right: 140px;
}

.modaal-image .modaal-container {
  width: auto;
  max-width: 100%;
}

.modaal-gallery-wrap {
  position: relative;
  color: #ffffff;
}

.modaal-gallery-item {
  display: none;
}

.modaal-gallery-item img {
  display: block;
}

.modaal-gallery-item.is_active {
  display: block;
}

.modaal-gallery-label {
  position: absolute;
  left: 0;
  width: 100%;
  margin: 20px 0 0;
  font-size: 18px;
  text-align: center;
  color: #ffffff;
}

.modaal-gallery-label:focus {
  outline: none;
}

.modaal-gallery-control {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  opacity: 1;
  cursor: pointer;
  color: #ffffff;
  width: 50px;
  height: 50px;
  background: rgba(0, 0, 0, 0);
  border: none;
  border-radius: 100%;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.modaal-gallery-control.is_hidden {
  opacity: 0;
  cursor: default;
}

.modaal-gallery-control:focus,
.modaal-gallery-control:hover {
  outline: none;
  background: #ffffff;
}

.modaal-gallery-control:focus:before,
.modaal-gallery-control:focus:after,
.modaal-gallery-control:hover:before,
.modaal-gallery-control:hover:after {
  background: #afb7bc;
}

.modaal-gallery-control span {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px);
  /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0 !important;
  border: 0 !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden;
}

.modaal-gallery-control:before,
.modaal-gallery-control:after {
  display: block;
  content: " ";
  position: absolute;
  top: 16px;
  left: 25px;
  width: 4px;
  height: 18px;
  border-radius: 4px;
  background: #ffffff;
  -webkit-transition: background 0.2s ease-in-out;
  transition: background 0.2s ease-in-out;
}

.modaal-gallery-control:before {
  margin: -5px 0 0;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.modaal-gallery-control:after {
  margin: 5px 0 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.modaal-gallery-next-inner {
  left: 100%;
  margin-left: 40px;
}

.modaal-gallery-next-outer {
  right: 45px;
}

.modaal-gallery-prev:before,
.modaal-gallery-prev:after {
  left: 22px;
}

.modaal-gallery-prev:before {
  margin: 5px 0 0;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.modaal-gallery-prev:after {
  margin: -5px 0 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.modaal-gallery-prev-inner {
  right: 100%;
  margin-right: 40px;
}

.modaal-gallery-prev-outer {
  left: 45px;
}

.modaal-video-wrap {
  margin: auto 50px;
  position: relative;
}

.modaal-video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  background: #000;
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto;
}

.modaal-video-container iframe,
.modaal-video-container object,
.modaal-video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modaal-iframe .modaal-content {
  width: 100%;
  height: 100%;
}

.modaal-iframe-elem {
  width: 100%;
  height: 100%;
  display: block;
}

.modaal-loading-spinner {
  background: none;
  position: absolute;
  width: 200px;
  height: 200px;
  top: 50%;
  left: 50%;
  margin: -100px 0 0 -100px;
  -webkit-transform: scale(0.25);
  -ms-transform: scale(0.25);
  transform: scale(0.25);
}

.modaal-loading-spinner>div {
  width: 24px;
  height: 24px;
  margin-left: 4px;
  margin-top: 4px;
  position: absolute;
}

.modaal-loading-spinner>div>div {
  width: 100%;
  height: 100%;
  border-radius: 15px;
  background: #ffffff;
}

.modaal-loading-spinner>div:nth-of-type(1)>div {
  -webkit-animation: modaal-loading-spinner 1s linear infinite;
  animation: modaal-loading-spinner 1s linear infinite;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

.modaal-loading-spinner>div:nth-of-type(2)>div,
.modaal-loading-spinner>div:nth-of-type(3)>div {
  -ms-animation: modaal-loading-spinner 1s linear infinite;
  -moz-animation: modaal-loading-spinner 1s linear infinite;
  -webkit-animation: modaal-loading-spinner 1s linear infinite;
  -o-animation: modaal-loading-spinner 1s linear infinite;
}

.modaal-loading-spinner>div:nth-of-type(1) {
  -ms-transform: translate(84px, 84px) rotate(45deg) translate(70px, 0);
  -webkit-transform: translate(84px, 84px) rotate(45deg) translate(70px, 0);
  transform: translate(84px, 84px) rotate(45deg) translate(70px, 0);
}

.modaal-loading-spinner>div:nth-of-type(2)>div {
  -webkit-animation: modaal-loading-spinner 1s linear infinite;
  animation: modaal-loading-spinner 1s linear infinite;
  -webkit-animation-delay: .12s;
  animation-delay: .12s;
}

.modaal-loading-spinner>div:nth-of-type(2) {
  -ms-transform: translate(84px, 84px) rotate(90deg) translate(70px, 0);
  -webkit-transform: translate(84px, 84px) rotate(90deg) translate(70px, 0);
  transform: translate(84px, 84px) rotate(90deg) translate(70px, 0);
}

.modaal-loading-spinner>div:nth-of-type(3)>div {
  -webkit-animation: modaal-loading-spinner 1s linear infinite;
  animation: modaal-loading-spinner 1s linear infinite;
  -webkit-animation-delay: .25s;
  animation-delay: .25s;
}

.modaal-loading-spinner>div:nth-of-type(4)>div,
.modaal-loading-spinner>div:nth-of-type(5)>div {
  -ms-animation: modaal-loading-spinner 1s linear infinite;
  -moz-animation: modaal-loading-spinner 1s linear infinite;
  -webkit-animation: modaal-loading-spinner 1s linear infinite;
  -o-animation: modaal-loading-spinner 1s linear infinite;
}

.modaal-loading-spinner>div:nth-of-type(3) {
  -ms-transform: translate(84px, 84px) rotate(135deg) translate(70px, 0);
  -webkit-transform: translate(84px, 84px) rotate(135deg) translate(70px, 0);
  transform: translate(84px, 84px) rotate(135deg) translate(70px, 0);
}

.modaal-loading-spinner>div:nth-of-type(4)>div {
  -webkit-animation: modaal-loading-spinner 1s linear infinite;
  animation: modaal-loading-spinner 1s linear infinite;
  -webkit-animation-delay: .37s;
  animation-delay: .37s;
}

.modaal-loading-spinner>div:nth-of-type(4) {
  -ms-transform: translate(84px, 84px) rotate(180deg) translate(70px, 0);
  -webkit-transform: translate(84px, 84px) rotate(180deg) translate(70px, 0);
  transform: translate(84px, 84px) rotate(180deg) translate(70px, 0);
}

.modaal-loading-spinner>div:nth-of-type(5)>div {
  -webkit-animation: modaal-loading-spinner 1s linear infinite;
  animation: modaal-loading-spinner 1s linear infinite;
  -webkit-animation-delay: .5s;
  animation-delay: .5s;
}

.modaal-loading-spinner>div:nth-of-type(6)>div,
.modaal-loading-spinner>div:nth-of-type(7)>div {
  -ms-animation: modaal-loading-spinner 1s linear infinite;
  -moz-animation: modaal-loading-spinner 1s linear infinite;
  -webkit-animation: modaal-loading-spinner 1s linear infinite;
  -o-animation: modaal-loading-spinner 1s linear infinite;
}

.modaal-loading-spinner>div:nth-of-type(5) {
  -ms-transform: translate(84px, 84px) rotate(225deg) translate(70px, 0);
  -webkit-transform: translate(84px, 84px) rotate(225deg) translate(70px, 0);
  transform: translate(84px, 84px) rotate(225deg) translate(70px, 0);
}

.modaal-loading-spinner>div:nth-of-type(6)>div {
  -webkit-animation: modaal-loading-spinner 1s linear infinite;
  animation: modaal-loading-spinner 1s linear infinite;
  -webkit-animation-delay: .62s;
  animation-delay: .62s;
}

.modaal-loading-spinner>div:nth-of-type(6) {
  -ms-transform: translate(84px, 84px) rotate(270deg) translate(70px, 0);
  -webkit-transform: translate(84px, 84px) rotate(270deg) translate(70px, 0);
  transform: translate(84px, 84px) rotate(270deg) translate(70px, 0);
}

.modaal-loading-spinner>div:nth-of-type(7)>div {
  -webkit-animation: modaal-loading-spinner 1s linear infinite;
  animation: modaal-loading-spinner 1s linear infinite;
  -webkit-animation-delay: .75s;
  animation-delay: .75s;
}

.modaal-loading-spinner>div:nth-of-type(7) {
  -ms-transform: translate(84px, 84px) rotate(315deg) translate(70px, 0);
  -webkit-transform: translate(84px, 84px) rotate(315deg) translate(70px, 0);
  transform: translate(84px, 84px) rotate(315deg) translate(70px, 0);
}

.modaal-loading-spinner>div:nth-of-type(8)>div {
  -webkit-animation: modaal-loading-spinner 1s linear infinite;
  animation: modaal-loading-spinner 1s linear infinite;
  -webkit-animation-delay: .87s;
  animation-delay: .87s;
}

.modaal-loading-spinner>div:nth-of-type(8) {
  -ms-transform: translate(84px, 84px) rotate(360deg) translate(70px, 0);
  -webkit-transform: translate(84px, 84px) rotate(360deg) translate(70px, 0);
  transform: translate(84px, 84px) rotate(360deg) translate(70px, 0);
}

@media only screen and (min-width: 1400px) {

  .modaal-video-container {
    padding-bottom: 0;
    height: 731px;
  }

}

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

  .modaal-image .modaal-inner-wrapper {
    padding-left: 25px;
    padding-right: 25px;
  }

  .modaal-gallery-control {
    top: auto;
    bottom: 20px;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    background: rgba(0, 0, 0, 0.7);
  }

  .modaal-gallery-control:before,
  .modaal-gallery-control:after {
    background: #ffffff;
  }

  .modaal-gallery-next {
    left: auto;
    right: 20px;
  }

  .modaal-gallery-prev {
    left: 20px;
    right: auto;
  }

}

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

  .modaal-instagram iframe {
    width: 500px !important;
  }

}

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

  .modaal-instagram iframe {
    width: 280px !important;
  }

}
/*
@media screen and (max-height: 1100px) {

  .modaal-instagram iframe {
    width: 700px !important;
  }

}
*/

@media screen and (max-height: 1000px) {

  .modaal-inner-wrapper {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .modaal-instagram iframe {
    width: 600px !important;
  }

}

@media screen and (max-height: 900px) {

  .modaal-instagram iframe {
    width: 500px !important;
  }

  .modaal-video-container {
    max-width: 900px;
    max-height: 510px;
  }

}

@media only screen and (max-height: 820px) {

  .modaal-gallery-label {
    display: none;
  }

}

@keyframes instaReveal {

  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }

}

@-webkit-keyframes instaReveal {

  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }

}

@-webkit-keyframes modaal-loading-spinner {

  0% {
    opacity: 1;
    -ms-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
  }

  100% {
    opacity: .1;
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }

}

@keyframes modaal-loading-spinner {

  0% {
    opacity: 1;
    -ms-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
  }

  100% {
    opacity: .1;
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }

}

/* modaal */