/*
Theme Name: ItsukiNatsume - SEIJINSHIKI
Theme URI:
Description:
Version: 1.0
Author: 
Author URI:
*/


body {
	font-family: "Zen Kaku Gothic Antique","ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", Osaka, "ＭＳ Ｐゴシック", "MS PGothic";
	color:#222;
	font-size:16px;
	line-height:1.75;
	letter-spacing:0.03em;
  	font-weight: 400;
  	font-style: normal;
	background: #000;
}
a {
	color: #222;
	text-decoration: none;
	transition: 0.3s ease-out;
}
a:hover {
	color:#FFD936;
}

::selection{background-color:#FFD936; color: #FFF;}
::-moz-selection{background-color:#FFD936; color: #FFF;}

body , header , footer{
	min-width:1280px;
	max-width: 1920px;
	margin: auto;
}

@media screen and (max-width:640px) {
	body{font-size: 14px;}
	body,header,footer{min-width: 400px;}
}





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

	モーション　＊　文字が１文字ずつ出る

============================================================================*/
.eachTextAnime span{opacity: 0;}
.eachTextAnime.appeartext span{ animation:text_anime_on 2s ease-out forwards; }
@keyframes text_anime_on {
	0% {opacity:0;}
	100% {opacity:1;}
}





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

	モーション　＊　wowオリジナル　fadeInUpMin

============================================================================*/
.fadeInUpMin {
    animation-name: fadeInUpMin;
}
@keyframes fadeInUpMin {
    from { opacity: 0; transform: translate3d(0, 10%, 0);}
    to { opacity: 1; transform: none;}
}



#loftloader-wrapper {
	min-width: 400px !important;
}
#loftloader-wrapper .loader-section.section-fade {
	min-width: 400px !important;
}





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

	#mainvisual

============================================================================*/
#mainvisual {
	width: 100%;
  	height: 100vh;
  	display: flex;
}
#mainvisual figure {
	width: 85%;
	height: inherit;
}
#mainvisual figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media(max-width:1450px) {
	#mainvisual figure {
		width: 100%;
	}
}
@media(max-width:640px) {
	#mainvisual {
		height: 400px;
	}
}
@media(max-width:570px) {
	#mainvisual {
		height: 350px;
	}
}
@media(max-width:570px) {
	#mainvisual {
		height: 270px;
	}
}



#nav {
	width: 15%;
	height: inherit;
	background: url("images/bg01.png") no-repeat top left, #000;
	background-size: 330px auto , auto;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}
#nav li a {
    position: relative;
    display: inline-block;
    padding: 7px 0;
    color: #ddd;
    font-family: "Quantico", sans-serif;
    font-size:15px;
    transition: color 0.3s ease;
}
#nav li a:hover {
	color: #FFD936;
	font-family: "Quantico", sans-serif;
}
#nav li a::after {
    position: absolute;
    content: "";
    bottom: 2px;
    left: 0;
    width: 100%;
    height: 1px;
    background: #FFD936;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease;
}
#nav li:first-of-type {
	width: 55%;
	margin: 0 auto 45px;
}
@media(max-width:1450px) {
	#nav {display: none;}
}



#nav li a:hover::after {
  transform: scaleX(1);
}
#nav li:first-of-type img {
	width: 100%;
}







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

	 タイトル

==================================================================*/
h2.dack {
	position: relative;
	padding-top: 65px;
	margin-bottom: 50px;
	font-size: 24px;
    font-family: "Quantico", sans-serif;
	color: #9a7a1d;
	text-align: center;
	letter-spacing: 2px;
}
h2.dack::before {
	position: absolute; content: "";
	top: 0;
	left: 0; right: 0; margin: auto;
	background-image: url(images/h2_dark.png);
	background-size: 60px 47px;
	width: 60px; height: 47px;
}



h2.light {
	position: relative;
	padding-top: 65px;
	margin-bottom: 50px;
	font-size: 24px;
    font-family: "Quantico", sans-serif;
	color: #FFF;
	text-align: center;
	letter-spacing: 2px;
}
h2.light::before {
	position: absolute; content: "";
	top: 0;
	left: 0; right: 0; margin: auto;
	background-image: url(images/h2_light.png);
	background-size: 60px 47px;
	width: 60px; height: 47px;
}






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

		#topics　＊　お知らせ

==================================================================*/
#topics {
	padding: 100px 0 120px;
	background: url("images/img01.png") top right no-repeat, url("images/img02.png") bottom left no-repeat, url("images/bg02.jpg") center;
	background-size: 274px auto, 478px auto, auto;
}
#topics ul {
	width: 90%;
	max-width: 1200px;
	margin: auto;
	box-sizing: border-box;
	padding: 0 100px;
	height: 250px;
	overflow: auto;
}
#topics li {
	display: flex;
	margin-bottom: 50px;
}
#topics .date {
	width: 17%;
	color: #bfae42;
	font-family: "Quantico", sans-serif;
}
#topics dl {
	width: 83%;
	color: #FFF;
}
#topics dl dt {
	margin-bottom: 20px;
	font-family: "Shippori Mincho", serif;
	font-size: 17px;
}
#topics dl dd {
	font-size: 15px;
	line-height: 2.2;
}
@media(max-width:640px) {
	#topics {
		padding: 60px 0 80px;
	}
	#topics ul {
		padding: 0;
		height: 150px;
	}
	#topics li {
		display: block;
	}
	#topics .date {
		width: 90%;
	}
	#topics dl {
		width: 90%;
	}
	#topics dl dt {
		font-size: 16px;
	}
}


/* simplebar用 */
.simplebar-track {
	background: #000;
	border-radius: 10px;
}
.simplebar-track .simplebar-scrollbar.simplebar-visible::before {
	opacity: 0.8;
}
.simplebar-track .simplebar-scrollbar::before {
	background: #bfae42;
}






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

		#introduction　＊　成人式概要

==================================================================*/
#introduction {
	position: relative;
	padding: 120px 0 120px;
	background: url("images/img03.png") top left no-repeat, url("images/img04.png") bottom right no-repeat, url("images/bg03.jpg") center;
	text-align: center;
}
#introduction::before {
	position: absolute; content: "";
	background: url("images/img05.png") top center no-repeat;
	width: 100%; height: 25px;
	top: 0; left: 0;
}
#introduction::after {
	position: absolute; content: "";
	background: url("images/img06.png") top center no-repeat;
	width: 100%; height: 25px;
	bottom: 0; left: 0;
}
#introduction img {
	margin-bottom: 60px;
}
#introduction p {
	font-family: "Shippori Mincho", serif;
	font-size: 17px;
	line-height: 2.4;
	margin-bottom: 20px;
}
#introduction p b {
	color: #623e00;
}
@media(max-width:640px) {
	#introduction {
		padding: 80px 0 80px;
		background: url("images/img03.png") top left no-repeat, url("images/img04.png") bottom right -100px no-repeat, url("images/bg03.jpg") center;
		background-size: 400px auto , 500px auto , auto;
	}
	#introduction img {
		margin-bottom: 40px;
		width: 200px;
	}
	#introduction .text {
		width: 90%;
		margin: auto;
	}
	#introduction p {
		font-size: 15px;
		line-height: 2.2;
	}
}









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

		#ticket　＊　チケット

==================================================================*/
#ticket {
	position: relative;
	padding: 120px 0 120px;
	background: #000;
}
@media(max-width:640px) {
	#ticket {
		padding: 80px 0 30px;
	}
}



/*------------------------------ youtube ------------------------------*/
.youtube {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto 80px;
}
.youtube iframe {
  	display: block;
  	width: 100%;
  	aspect-ratio: 16 / 9;
  	height: auto;
  	border: none;
}



/*------------------------------ TICKET / SCHEDULE ------------------------------*/
#ticket ul {
	width: 90%;
	max-width: 1250px;
	margin: auto;
	display: flex;
	justify-content: space-between;
}
#ticket ul li {
	position: relative;
	width: 49%;
	max-width: 580px;
}
#ticket ul li figure img {
	width: 100%;
}
#ticket .ticket_box {
	color: #FFF;
	padding: 40px 7% 45px;
}
#ticket .ticket_box h3 {
	font-family: "Shippori Mincho", serif;
	font-size: 21px;
	font-weight: 400;
	text-align: center;
	margin-bottom: 35px;
	opacity: .9;
}
#ticket .ticket_box dl {
	display: flex;
	align-items: flex-start;
	margin-bottom: 15px;
}
#ticket .ticket_box dt {
	position: relative;
	top: -2px;
	width: 23%;
	box-sizing: border-box;
	border: 1px solid #7d6316;
	color: #9a7a1d;
	text-align: center;
	padding: 9px 0 10px;
	line-height: 1;
}
#ticket .ticket_box dd {
	width: 77%;
	box-sizing: border-box;
	padding-left: 30px;
	line-height: 2;
	opacity: .8;
}
@media(max-width:640px) {
	#ticket ul {
		display: block;
	}
	#ticket ul li {
		width: 100%;
		margin-bottom: 60px;
	}
	#ticket .ticket_box {
		padding: 40px 5% 45px;
	}
	#ticket .ticket_box h3 {
		font-size: 20px;
		margin-bottom: 35px;
	}
	#ticket .ticket_box dt {
		width: 25%;
	}
	#ticket .ticket_box dd {
		width: 75%;
		padding-left: 20px;
	}
}




#ticket .btn {
	margin-top: 35px;
}
#ticket .btn a {
	position: relative;
	display: block;
	width: 100%;
	padding: 20px 0 22px;
	border-radius: 40px;
	line-height: 1;
	background: #7f6317;
	color: #FFF;
	text-align: center;
	font-family: "Shippori Mincho", serif;
	font-size: 17px;
	overflow: hidden;
}
#ticket .btn a em {
	position: relative;
	z-index: 1;
}
#ticket .btn a::after {
	position: absolute; content: "";
	background: url("images/img08.png");
	background-size: 7px 12px;
	width: 7px; height: 12px;
	left: 120px; margin-top: 3px;
	transition: 0.3s ease-out;
}
#ticket .btn a:hover::after {
  left: 130px;
}
#ticket .btn a::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: #574104;
  transition: left 0.4s ease;
}
#ticket .btn a:hover::before {
  left: 0;
}
@media(max-width:640px) {
	#ticket .btn a::after { display: none;	}
}





#ticket ul li:first-of-type::after {
	position: absolute; content: "";
	background: url("images/img09.png");
	background-size: 100px;
	width: 100px; height: 100px;
	left: -5px; top: -5px;
}
#ticket ul li:last-of-type::after {
	position: absolute; content: "";
	background: url("images/img10.png");
	background-size: 100px;
	width: 100px; height: 100px;
	left: -5px; top: -5px;
}


#ticket ul li:first-of-type .ticket_box { background: #2d0202;}
#ticket ul li:last-of-type .ticket_box { background: #001d38;}






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

		#character　＊　キャラクタースライダー

==================================================================*/
#character {
	padding: 120px 0 50px;
	box-sizing: border-box;
	background: url("images/bg05.jpg") center no-repeat;
	background-size: cover;
}
#character h2 {
	margin-bottom: 5px;
}
@media(max-width:640px) {
	#character {
		padding: 80px 0 70px;
	}
	#character h2 {
		margin-bottom: 50px;
	}
}


/*------------------------------ スライダー ------------------------------*/
#character .slider {
    width:100%;
    margin:0 auto 30px;
}
#character .slider .slick-slide {
	transform: scale(0.8);
	transition: all .5s;
}
#character .slider .slick-slide.slick-center{
	transform: scale(1);
}
#character .slider li {
	position: relative;
	width: 90%;
    max-width: 1200px;
	display: flex !important;
	align-items: center;
	justify-content: center;
}
@media screen and (max-width:640px) {
	#character .slider li {
		display: block!important;
		text-align: center;
	}
}



.slider li::before {
	position: absolute; content: "";
	background: url("images/bg01.png") no-repeat top left, url("images/bg04.png") no-repeat bottom right, url("images/bg06.png");
	background-size: 330px auto, 385px auto, 4px;
	box-sizing: border-box;
	border: 1px solid #000;
	width: 100%; height: 490px;
}
.slider li figure {
	position: relative;
	z-index: 1;
}
.slider li figure img {
	text-align: center;
	margin: auto;
}
.slider li .inner {
	position: relative;
	z-index: 1;
	color: #FFF;
	text-align: center;
	font-family: "Shippori Mincho", serif;
}
.slider li .inner em {
	font-family: "Quantico", sans-serif;
	font-size: 12px;
	color: #8c8c8c;
	letter-spacing: 3px;
}
.slider li .inner p:first-of-type {
	font-size: 34px;
}
.slider li .inner p:first-of-type span {
	font-size: 20px;
}
.slider li .inner p:last-of-type {
	font-size: 22px;
	color: #fce741;
}
.slider li .inner p:last-of-type span {
	font-size: 18px;
	margin-right: 10px;
}
.slider li .text {
	margin-top: 20px;
	line-height: 2.2;
}
@media screen and (max-width:640px) {
	.slider li::before {
		display: none;
	}
	.slider li figure {
		margin: auto;
		width: 300px;
	}
	.slider li figure img {
		text-align: center;
		margin: auto;
		max-height: 320px;
	}
	.slider li .inner p:first-of-type {
		font-size: 30px;
	}
	.slider li .inner p:first-of-type span {
		font-size: 19px;
	}
}





/*戻る、次へ矢印の位置*/
.slick-prev, .slick-next { display: none !important;}
/*ドットナビゲーションの設定*/
.slick-dots {
    text-align:center;
	margin:20px 0 0 0;
	display: flex;
	justify-content: center;
}
#character .slick-dots li {
    display:inline-block !important;
	margin:0 10px !important;
	width: 10px !important;
	height: 10px;
	background: #FFD936;
	border-radius: 100%;
}
.slick-dots li::before {
    display:none;
}
.slick-dots button {
    display:block;
	margin: 50px 5px 0;
    width:10px;
    height:10px;
	background: #FFD936;
	opacity: 0.5;
	border: none;
    outline: none;
    cursor: pointer;
	color: transparent;
}
.slick-dots .slick-active button{
	opacity: 1;
}
@media screen and (max-width:640px) {
.slick-dots {
	bottom: -50px !important;
}

}




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

		#cast-staff　＊　キャスト・スタッフ

==================================================================*/
#cast-staff  {
	padding: 100px 0 100px;
	background: url("images/img11.png") top left no-repeat, url("images/img12.png") top right no-repeat, url("images/bg02.jpg") center;
	background-size: 540px auto, 539px auto, auto;
}
#cast-staff .inner {
	width: 90%;
	max-width: 1280px;
	margin: 0 auto 60px;
	text-align: center;
	font-family: "Shippori Mincho", serif;
}
#cast-staff em {
	display: block;
	margin-top: 30px;
	color: #FFF;
	font-size: 20px;
}
#cast-staff p {
	color: #fce741;
	font-size: 26px;
}
#cast-staff ul {
	max-width: 1120px;
	margin: auto;
	display: flex;
	justify-content: space-between;
}
#cast-staff ul.cast-list {
	flex-wrap: wrap;
}
#cast-staff ul.cast-list li {
	margin-bottom: 55px;
}
#cast-staff ul.staff-list li em {
	margin-top: 0;
}
@media(max-width:640px) {
	#cast-staff  {
		padding: 90px 0 10px;
	}
	#cast-staff .inner {
		margin: 0 auto 60px;
	}
	#cast-staff em {
		margin-top: 10px;
		font-size: 15px;
	}
	#cast-staff p {
		font-size: 19px;
	}
	#cast-staff ul.cast-list li {
		width: 48%;
		margin-bottom: 40px;
	}
	#cast-staff ul.staff-list {
		flex-wrap: wrap;
	}
	#cast-staff ul.staff-list li {
		width: 48%;
		margin-bottom: 50px;
	}
}





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

		#contact　＊　お問い合わせ

==================================================================*/
#contact {
	position: relative;
	padding: 120px 0 20px;
	background: url("images/img13.png") no-repeat top center, url("images/bg03.jpg") center;
}
#contact .inner {
	width: 90%;
	max-width: 1080px;
	margin: 0 auto 60px;
}
#contact .inner .note {
	font-size: 14px;
	line-height: 2;
}
@media(max-width:640px) {
}



.inquiry {
	width:100%;
	margin-bottom:40px;
	border-bottom:solid 1px #8f8f8f;
}
.inquiry th{
	width:25%;
	padding:20px 30px;
	border-top:solid 1px #8f8f8f;
	font-family: "Shippori Mincho", serif;
	font-size: 18px;
}
.inquiry td{
	padding: 20px 30px;
	border-top:solid 1px #8f8f8f;
}
.inquiry td input{
	width: 100%;
	padding:15px 20px;
    box-sizing: border-box;
	border: 1px solid #FFF;
	border-radius: 5px;
	background: rgba(255,255,255,.7);
}
.inquiry td textarea{
	width:100%;
	padding:15px 20px;
    box-sizing: border-box;
	border: 1px solid #FFF;
	border-radius: 5px;
	background: rgba(255,255,255,.7);
}
@media(max-width:640px) {
	.inquiry th,.inquiry td {
		display:block;
		width:100%;
		box-sizing:border-box;
	}
	.inquiry th {
		padding: 10px 0;
	}
	.inquiry td {
		padding: 0 0 20px;
		border-top: 0;
	}
}




/*------------------------------ 送信ボタン ------------------------------*/
/* 送信ボタンのデザイン */
.wpcf7-submit{
   display: block;
   margin:10px auto;
   padding:1em 0;
   width:80%;
   background:#7f6317;
   color:#fff;
   font-size:18px;
	font-family: "Shippori Mincho", serif;
   border-radius:4px;
	border-radius: 50px;
   border: none;
	margin-top: 30px;
}

/* 送信ボタンマウスホバー時 */
.wpcf7-submit:hover{
   opacity: 0.8;
   transition: 0.3s;
}

/* フォーム上部に表示されるエラーメッセージを非表示 */
.screen-reader-response {
    display: none;
}

/* フォーム内エラーメッセージを赤色に指定 */
.wpcf7-not-valid-tip {
    color: #e92323;
}