@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Serif+JP&display=swap');

/* BODY
---------------------------------------------------- */

body {
	color:#000;
	font-family: 'Noto Serif JP', "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
	overflow-x:hidden;
  	background:#fff  ;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	font-weight:500;
	}

.ryo{
	font-family: ryo-display-plusn, serif;
	font-weight: 700;
	font-style: normal;
}
@media screen and (min-width: 641px) {
.forPC{ display:block; }
.forSP{ display:none; }
}
@media screen and (max-width: 640px) {
.forPC{ display:none; }
.forSP{ display:block; }
}

.txtjustify{
	text-align: justify;
	text-justify: distribute-all-lines;
}
.small{ font-size:80%;}
/* LINK
---------------------------------------------------- */
a:link		{ color:#792c19; 	text-decoration:none; }
a:visited	{ color:#792c19; 	text-decoration:none; }
a:hover		{ color:#c3521f; text-decoration:none;}
a:active	{ color:#ddd; 	text-decoration:none; }

/* EFFECT
---------------------------------------------------- */
.effect {
	transition: .8s !important;
	transition-delay: .5s !important;
	opacity:0;
	margin-top:-30px;
	}

/*　ルビ設定
---------------------------------------------------- */
[data-ruby] {
    position: relative;
}
[data-ruby]::before {
    content: attr(data-ruby);
    position: absolute;
    top: -0.8em;
    left: -10px;
    right: 0;
    margin: auto;
    font-size: 1em;
	transform: scale(0.6);
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	word-break: keep-all;
	letter-spacing:-0.5px;
}
#cast [data-ruby]::before {
    content: attr(data-ruby);
    position: absolute;
    top: -1em;
    left: -14px;
    right: 0;
    margin: auto;
}
/* 以下追加 */
rt {
    display: none;
}


/* CONTENTS
----------------------------------------------------- */
#wrapper{
	width:100%;
	}

/* BASE
----------------------------------------------------- */


/* read more
----------------------------------------------------- */
.readmore{
	border:1px solid rgba(33,28,23,0.80);
	padding:2px 20px 3px 25px;
	letter-spacing:0.5px;
	line-height:0;
	color:rgba(33,28,23,1) !important;
	background:rgba(33,28,23,0); 
	font-size:12px;
	font-family: Georgia, "Times New Roman", Times, "serif";
	position:relative;
	margin-top:5px;
	border-radius: 4px; 
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	 -webkit-transition: all 200ms linear;
	 -moz-transition: all 200ms linear;
 	 transition:         all 200ms linear;
	cursor: pointer;
}
.readmore:hover{
	color:rgba(255,255,255,1) !important;
	background:rgba(33,28,23,1); 
}
.readmore::before{
	position:absolute;
	top:7px;
	left:7px;
	content:'';
	width:5px;
	height:5px;
	
	border-top:1px solid rgba(33,28,23,0.90);
	border-left:1px solid rgba(33,28,23,0.90);
	transform: rotate(-45deg);
	 -webkit-transition: all 200ms linear;
	 -moz-transition: all 200ms linear;
 	 transition:         all 200ms linear;
}	
.readmore:hover::before{
	border-top:1px solid rgba(255,255,255,0.90);
	border-left:1px solid rgba(255,255,255,0.90);
}


/* SNS LINK
----------------------------------------------------- */
#snslink{
	width:78px;
	height:40px;
	position:fixed;
	top:11px;
	right:60px;
	-webkit-transition: 0.1s;
	-moz-transition: 0.1s;
	transition: 0.1s;
	}

#snslink li{
	float:left;
	text-align:center;
	}
#snslink li:last-child{
	margin-left:8px;
	}
#snslink li a{
	-webkit-transition: 0.1s;
	-moz-transition: 0.1s;
	transition: 0.1s;
	width:32px;
	height:32px;
	display:block;
}
#snslink li a:hover{
}

#snslink li a img{
	opacity:1;
	width:100%;
	-webkit-transition: 0.1s;
	-moz-transition: 0.1s;
	transition: 0.1s;
	}
#snslink li a:hover img{
	opacity:0.8;
	}
@media screen and (max-width: 640px)  {
	#snslink{
	width:60px;
	height:40px;
	position:absolute;
	top:10px;
	right:55px;
	}

#snslink li:last-child{
	margin-left:8px;
	}
#snslink li a{
	width:25px;
	height:25px;
}
}


/* SOCIAL BOOKMARK
----------------------------------------------------- */
#socialBookmark{
	width:380px;
    text-align:left;
	margin:8px auto;
	}

#socialBookmark li{
		float:left;
		overflow:hidden;
		height:25px;
	}
	#socialBookmark li#tw {
		width:80px;
        
		}
	#socialBookmark li#fb {
		width:105px;
		}
	#socialBookmark li#line {
		width:85px;
		}
	#socialBookmark li#eigacom {
		width:110px;
		}

@media screen and (max-width: 640px) {
	#socialBookmark{
	width:270px;
    text-align:left;
	margin:8px auto;
	}
	#socialBookmark li#eigacom {
		margin-left:80px;
		}
}



/* LOADING
----------------------------------------------------- */

#loading{
    position: absolute;
    margin:auto;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:100px;
    height:100px;
    display:block;
	
	}
#loading img{
	width:100%;
}
#loader-bg {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background:url("../images/bg.jpg");
    z-index: 10000 !important;
}



/* pagetop
---------------------------------------------------*/
#pagetopBtn{
	position:fixed;
	bottom:20px;
	right:20px;
	opacity:0;
	text-indent:-9999px;
	display:block;
	width:54px;
	height:54px;
	margin:0 auto;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	transition: 0.3s;
	user-select: none; /* CSS3 */
	-moz-user-select: none; /* Firefox */
	-webkit-user-select: none; /* Safari、Chromeなど */
	-ms-user-select: none; /* IE10かららしい */
	overflow:hidden;
	z-index:1000 !important;
	background:#771d74;
	border-radius: 40px; 
	-webkit-border-radius: 40px;
	-moz-border-radius: 40px; 
	}
#pagetopBtn:hover{
	bottom:25px;
	right:20px;
	}
#pagetopBtn:after{
	position:absolute;
	content:'';
	z-index:999;
	top:23px;
	left:22px;
	width:10px;
	height:10px;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	transition: 0.3s;
	-webkit-transform:rotate(-135deg);
	transform:rotate(-135deg);
	border-bottom:2px solid #faf5e9;
	border-right:2px solid #faf5e9;
	}
#pagetopBtn:hover:after{
	
	}
.scrollDown #pagetopBtn{
	opacity:1;
	}



/* EFFECT
---------------------------------------------------*/

.fuwafuwa {

-webkit-animation:fuwafuwa 1s infinite linear alternate;
animation:fuwafuwa 1s infinite linear alternate;

}

@-webkit-keyframes fuwafuwa {
0% { transform: translateY(0) }
  50% { transform: translateY(-5px) }
  100% { transform: translateY(0) }
}

@keyframes fuwafuwa {
0% { transform: translateY(0) }
  50% { transform: translateY(-5px) }
  100% { transform: translateY(0) }
}


/* EFFECT
----------------------------------------------------- */

.effect01{
	-webkit-transition: all 0.5s linear;
	-ms-transition: all 0.5s linear;
	transition: all 0.5s linear;
	transition-delay: .2s !important;
	margin-top:20px;
	opacity:0;
	}
.effect02 {
	-webkit-transition: all 0.5s linear;
	-ms-transition: all 0.5s linear;
	transition: all 0.5s linear;
	transition-delay: .3s !important;
	opacity:0;
	margin-top:20px;
	}
.effect03 {
	-webkit-transition: all 0.8s ease-out;
	-ms-transition: all 0.8s ease-out;
	transition: all 0.8s ease-out;
	transition-delay: .4s !important;
	opacity:0;
	margin-top:20px;
	}

.effect01.anim,
.effect02.anim,
.effect03.anim
{ opacity:1; !important; margin-top:0;}




/* SLIDE SHOW
---------------------------------------------------*/
.slideshow {
position: relative;
width:100%;
height:38.7vW;
max-height:426px;
margin: 0 auto;
background:#fff;
line-height:0;
}
.pic {
position: absolute;
}
.pic img {
width: 100%;
height: auto;
opacity:0;
-moz-animation: imgTrans 24s infinite;
-webkit-animation: imgTrans 24s ease-in infinite;
animation: imgTrans 24s infinite;
}

@media screen and (max-width: 640px) {
	.slideshow {
	position: relative;
	width:100%;
	height:70vW;
	overflow:hidden;
	max-height:426px;
	margin: 0 auto;
	background:#eee;
	line-height:0;
	}
	.pic {
	position: absolute;
	}
	.pic img {
	width: auto ;
	height:70vW;
	margin-left:-33.5vW;
	opacity:0;
	-moz-animation: imgTrans 24s infinite;
	-webkit-animation: imgTrans 24s ease-in infinite;
	animation: imgTrans 24s infinite;
	}
}
.photo1 img {
-moz-animation-delay: 0s;
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.photo2 img {
-moz-animation-delay: 8s;
-webkit-animation-delay: 8s;
animation-delay: 8s;
}
.photo3 img {
-moz-animation-delay: 16s;
-webkit-animation-delay: 16s;
animation-delay: 16s;
}

@-webkit-keyframes imgTrans {
0% { opacity:0; }
23% { opacity:1; }
33% { opacity:1; }
43% { opacity:0; }
100% { opacity:0; }
}
@-moz-keyframes imgTrans {
0% { opacity:0; }
23% { opacity:1; }
33% { opacity:1; }
43% { opacity:0; }
100% { opacity:0; }
}
@keyframes imgTrans {
0% { opacity:0; }
23% { opacity:1; }
33% { opacity:1; }
43% { opacity:0; }
100% { opacity:0; }
}