@charset "UTF-8";
/* CSS Document */

html{
	margin-top: 0px!important;
}

body.page-template-page-hiyori{
	background: #fff;
	font: '秀英明朝 M JIS2004', serif;
}

.veilsh{
	 position: relative;
  width: 100%;
}

.veilsh img{
	  width: 100%;
}

.site-branding,#masthead,#site-navigation,#page-site-header,#top-bar,#custom-header-image{
	display: none!important;
}

.wrap{
	max-width: 1200px;
	margin: 0 auto;
}

p{
	font-family: '秀英明朝 M JIS2004', serif;
	letter-spacing: 1px;
	margin-bottom: 20px;
	font-size: 16px;
	color:#777777;
}

a{
	transition: 0.5s;
	color: #f39800
}

a:hover{
	opacity: 0.8;
}

ul{
	width:70%;
	margin:0 auto;
	padding: 0;
}



li{
list-style: none;
	letter-spacing: 1px;
	color:#505050;
}

strong{
	color: #777; 
}

/* 画面外にいる状態 */
.fadein {
	opacity : 0.1;
	transform : translate(0, 50px);
	transition : all 800ms;
	}

/* 画面内に入った状態 */
.fadein.scrollin {
	opacity : 1;
	transform : translate(0, 0);
	}


.flex{
	display: flex;
	justify-content: space-between;
	vertical-align: middle;
	margin-bottom: 30px;
}

.flex div{
	width:48%;
}


.spacer {
  width: 100%;
}

h2{
	text-align: center;
	color:#777777;
	font-size: 36px;
	font-family: 'Noto Serif JP', serif;
	line-height: 36px;
	letter-spacing: 3px;
	margin:0 0 40px 0;
	vertical-align: middle
}



h2:after{
 content: '';/*何も入れない*/
background: url(../images/h2_hiyori.png) no-repeat;
	  display: inline-block;
  vertical-align: middle;
	margin-left: 40px;
	width:65px;
	height: 50px;
}


h3{
	color:#777777;
	font-weight: bold;
	border-bottom: 1px solid #777777;
	font-family: fot-tsukuaoldmin-pr6n, serif;
}

h4{
	font-family: fot-tsukuaoldmin-pr6n, serif;
	color:#4f5050;
	font-size: 30px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 40px;
}

h5{
	font-size:24px;
	font-weight: bold;
	margin-bottom: 20px;
	font-family: fot-tsukuaoldmin-pr6n, serif;
}

section{
	padding: 100px 0;

}

.small{
	margin-left: 30px;
	font-size:18px;
	vertical-align: middle

}

.line_middle{
	vertical-align: middle
}

.txtC{
	text-align: center;
}

.txtR{
	text-align: right;
}

.title{
	color:#f39800;
	font-size: 16px;
}


#title{
	width: 50%;
	margin:0 auto;
}

/* Loading背景画面設定　*/
#splash {
/*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  background:rgba(255,255,255,1);
  text-align:center;
  color:#fff;
}

/* Loading画像中央配置　*/
#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/
#splash_logo img {
  width:260px;
}

/* fadeUpをするアイコンの動き */
.fadeUp{
animation-name: fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

.sns{
	font-size: 30px;
}

#news,#cast,#directer{
	background: #fffbf3;
}

.thumb {
    width: 55px;
    height: 55px;
    float: left;
    margin: 0 20px 0 0;
    background: #fff center;
    background-size: cover;
	border-radius: 10px;
}

#news li{
	margin-bottom: 30px;
}

li{
margin-bottom: 15px;
}

footer .logo{
	width: 50%;
	margin:20px auto;
}


/*==================================================
アコーディオンのためのcss
===================================*/



/*アコーディオン全体*/
.accordion-area{
    list-style: none;
    width: 96%;
    max-width: 900px;
    margin:0 auto;
}

.accordion-area li{
    margin: 10px 0;
	display: flex;
	justify-content: flex-start;
}

.n_text{
	width:100%;
	
}

.accordion-area section {
  border: 1px solid #ccc;
}

/*アコーディオンタイトル*/
.ntitle {
    position: relative;/*+マークの位置基準とするためrelative指定*/
    cursor: pointer;
    font-size:1rem;
    font-weight: normal;
    padding: 1% 3% 1% 50px;
    transition: all .5s ease;
}

/*アイコンの＋と×*/
.ntitle::before,
.ntitle::after{
    position: absolute;
    content:'';
    width: 15px;
    height: 2px;
    background-color: #333;
    
}
.ntitle::before{
    top:48%;
    left: 15px;
    transform: rotate(0deg);
    
}
.ntitle::after{    
    top:48%;
    left: 15px;
    transform: rotate(90deg);

}
/*　closeというクラスがついたら形状変化　*/
.ntitle.close::before{
  transform: rotate(45deg);
}

.ntitle.close::after{
  transform: rotate(-45deg);
}

/*アコーディオンで現れるエリア*/
.box {
    display: none;/*はじめは非表示*/
  margin:0 3% 3% 3%;
    padding: 1%;
}

/*========= レイアウトのためのCSS ===============*/
.sns a{
	color: #f39800;
}

.para{
  display: flex;
  height: 50%;
  padding: 20%;
  justify-content: center;
  align-items: center;

  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.img_bg_01{
  background-image: url(../images/hiyor_pra.jpg);
}

.flex50{
	display: flex;
	justify-content:flex-start;
	margin:30px 0;
}

.flex50_2{
	display: flex;
	justify-content:flex-start;
	align-items: center;
}


.pic50{
	width:50%;
}

.pic30{
	width:30%;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.pic30 img{
	margin-bottom: 30px;
}

.pic50 img{
	margin-bottom: 30px;
}

.text1{
	width:25%;
	margin:0 auto;
}

.text1 p{
	font-size: 20px;
}

.text2{
	width:45%;
	margin:0 auto;
}

.text5{
	width:65%;
	margin:0 auto;
}

.flex_logo{
	display: flex;
	align-items:center;
	justify-content: space-between;
	text-align: center;
}

.flex_logo div{
	width:30%;
	margin-bottom: 30px;
	text-align: center;
}

.mb50{
	margin-bottom: 50px;
}

.text3{
	width:50%;
	text-align: center;
}

.text3 p{
	font-size: 20px;
}

.text4{
	width:48%;
	margin:0 0 0 2%;
}

.wrap70{
	width:70%;
	margin:0 auto;
}

#story p{
	text-align: center;
}


#respond input[type="text"], #respond input[type="email"], #respond input[type="url"], .wpcf7 input,#respond textarea, textarea {
  background-color: #fffbf3;
	border:1px solid #fac256;
}

.wpcf7-form p{
	color:#777;
}

.wpcf7 .ajax-loader{
	display: block!important;
}

.backtotop{
	background: #f39800;
}


input[type="submit"], .wpcf7 input[type="submit"]{
	background-color: #f39800;
    border-color: #f39800;
}


footer{
	padding: 35px 0 0 0;
}


footer p{
	margin:0;
}

footer .sns{
	padding-bottom: 50px;
}

.mb15{
	margin-bottom: 15px
}


.ft_copy{
	padding: 0 0 10px 0;
	text-align: center;
	font-size: 12px;
}

/*========= ページネーションCSS ===============*/

.pagination {
  font-size:1em;
	display: flex!important;
	justify-content: space-between;
	align-items: center;
}


.menu{
	background: rgba(255,255,255,0.7);
	width: 100%;
	z-index: 200;
	position: fixed;
}

.nav-menu li{
	margin-bottom: 0;
}



.nav-menu a {
  display:block;
  color:#777;
  padding:15px;
  font-weight: bold;
  font-family: 'Noto Serif JP', serif;	
}


/* ハンバーガーアイコン */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 25px;
  height: 20px;
  cursor: pointer;
  position:fixed;
  top: 25px;
  right: 20px;
  z-index: 1100;
}
.hamburger span {
  height: 3px;
  background: #333;
  border-radius: 2px;
  transition: 0.3s;
   text-shadow: 0px 1px 1px rgba(255, 255, 255, 1);	
}

/* ハンバーガー開閉時のアニメーション */
.hamburger.open span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.hamburger.open span:nth-child(2) {
  opacity: 0;
}
.hamburger.open span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -7px);
}

/* ナビゲーションの表示切替 */
.nav-menu {
  display: flex;
 justify-content: space-between;
}
@media (max-width: 768px) {
  .nav-menu {
    display: none;
    flex-direction: column;
    background: white;
    position: absolute;
    top: 70px;
    right: 20px;
    padding: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    z-index: 1000;
  }
  .nav-menu.active {
    display: flex;
  }
  .hamburger {
    display: flex;
  }
}

/*for SP*/
@media only screen and (max-width: 767px) {
	.veils header{
		background-position: 50%;
	}
	
	p{
	padding: 0 3%;
	}
	
	h2{
		font-size: 20px;
		padding: 0 3%;
	}
	
	h2::after{
		margin-left: 5px;
		background-size: 30px 30px
	}
	
	h2::before{
		margin-right: 5px;
		background-size: 30px 30px
	}
	
	h2 .small{
		font-size: 12px;
		margin-left: 10px;
		letter-spacing: 0.5px;
	}
	
	h3{
		font-size: 18px;
		padding: 0 3%;
	}
	
	h4{
		font-size: 16px;
	}
	
	h5{
		font-size: 16px;
	}
	
	#title{
		width: 80%;
	}
	
	
	.text1 p{
		font-size: 16px;
	}
	
	.text3 p{
		font-size: 16px;
	}
	
	iframe{
		width:100%;
	}
	
	.wrap{
		padding: 0 3%;
	}
	
	.flex{
		display: block;
	}
	
	.flex div{
		width:100%;
	}
	
	.n_text{
	width:80%;
	
}
	
	.para{
		display: block;
		background-size: contain;
		background-attachment: scroll;
		margin-bottom: 50px;
	}
	
	.flex50,.flex50_2{
		display: block;
	}
	
	.pic50,.pic30,.text1,.text2,.flex50_2,.text3,.text5{
		width:100%;
	}
	
	.pic50 img{
		width:100%;
	}
	
	.pic30 img{
		width: 100%;
	}
	
	.text2{
		font-size: 14px;
	}
	
	#kyouryoku .txtC{
		width:50%;
		margin:0 auto;
	}
	
	.flex_logo .wrap{
		padding:0 5%;
	}
	
	.flex_logo div{
	width:20%;	
	}
	
	.text4{
		width:100%;
		margin:0;
	}
	
	.wrap70{
		width:90%;
		margin:0 auto;
	}
	
	footer .txtC{
		width:60%;
		margin:0 auto;
	}
	
}