@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;700&family=Roboto:wght@400&display=swap');
html{
	font-size: 62.5%;
}
/* BODY
---------------------------------------------------- */
body {
	background:#fff;
	color:#000;
	font-family: 'Noto Sans JP', "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-size: 1.6rem;
	line-height:1.7;
	-webkit-text-size-adjust: none;
	}

/* LINK
---------------------------------------------------- */
a:link		{
	color:#b31d41; 
	text-decoration:none; opacity:0.8;
	-webkit-transition: all 300ms linear;
	-moz-transition: all 300ms linear;
 	transition:         all 300ms linear;
}
a:visited	{ color:#b31d41; 	text-decoration:none;}
a:hover		{ color:#b31d41; text-decoration:none; opacity:1;}
a:active	{ color:#999; 	text-decoration:none; }

p{
	text-align: justify
}
.small{
	font-size:70%;
}
@media screen and (min-width: 769px) {
.forPC{ display:block; }
.forSP{ display:none; }
	
body {
	font-size:16px;
	line-height:1.8;
	}
p{ font-weight:400;}

}

@media screen and (max-width: 768px) {
body {
	font-size:15px;
	line-height:1.7;
	}
p{ font-weight:400;}
.forPC{ display:none; }
.forSP{ display:block; }
}


/*  BG                                 
------------------------------------------- */
#bg{
	position:fixed;
	top:0;
	left:0;
	width:100vw;
	height:115.45vw;
	background:url(../images/common_bg.jpg) center top ;
	background-size:100% auto;
	z-index:-1 !important;
}

@media screen and ( max-width: 640px) {
	#bg{
		position:fixed;
		top:0;
		left:0;
		width:100vw;
		height:200vh;
		background:url(../images/common_bg.jpg) 70% top no-repeat;
		background-size:auto 100% ;
	}
}



/* BASE
----------------------------------------------------- */
#wrapper{
	width:100%;
	z-index:1 !important;
	}
.cateTitle{
	font-family:'Roboto', sans-serif;
	font-weight:300;
	color:#b31d41;
	text-align:center;
	}
.catesubTitle{
	text-align:center;
	font-weight:700 !important;
}
#review .cateTitle{ color:#000;}
@media screen and ( min-width: 769px) {
	#wrapper{
	width:100%;
	}
	#wrapper section{
		width:100%;
		padding:80px 0 80px 0;
		margin-bottom:3px;
	}
	.cateTitle{
	font-size:30px;
	margin-bottom:0px;
	letter-spacing:0.2px;
	}
	.catesubTitle{
		font-size:15px !important;
		margin-top:-10px;
		font-weight:300 !important;;
		margin-bottom:50px;
	}
	#award .catesubTitle{
		color:#999;
		letter-spacing:2px;
	}
}
@media screen and (min-width:861px) {
	.content{
		width:800px;
		margin:0 auto;
	}
}
@media screen and ( max-width: 860px) and (min-width:769px) {
	.content{
		width:92%;
		margin:0 auto;
	}
}
@media screen and (max-width: 768px) {
	#wrapper{
	width:100%;
	
	overflow-x:auto;
	}
	#wrapper section{
		width:100%;
		padding:10vw 0 10vw 0;
		margin-bottom:2px;
	}
	.content{
		width:88%;
		margin:0 auto;
	}
	.cateTitle{
		font-size:18px;
		margin-bottom:0px;
		letter-spacing:0.2px;
	}
	.catesubTitle{
		font-size:14px !important;
		margin-top:-8px;
		font-weight:300 !important;;
		margin-bottom:40px;
	}
	#award .catesubTitle{
		color:#999;
		letter-spacing:2px;
	}
	
}

/* FOOTER
---------------------------------------------------- */
footer{
	background:#232323
	text-align:center;
	
}
@media screen and ( min-width: 769px) {
	footer{
		background:#232323;
		text-align:center;
		padding:60px 0 100px 0;
	}
	footer #footerLogo{
		margin:0 auto;
	}
}
	
@media screen and (max-width: 768px) {

	footer{
		background:#313131;
		text-align:center;

		padding:60px 0 100px 0;
	}
	footer #footerLogo{
		width:135px;
		margin:0 auto;
	}
}
/* LOADING
---------------------------------------------------- */

#loading{
    position: absolute;
    margin:auto;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:34px;
    height:34px;
    display:block;
	}
 
#loader-bg {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: #f9e8f0;
    z-index: 10000 !important;
}

/* MODAL
----------------------------------------------------- */
@media screen and (min-width: 641px)  {
	.modal{
		width:100%;
		height:100%;
		background:#fff;
		padding:30px 30px 60px 30px;
		margin:0 0 60px 0;
	}
	.modal .catesubTitle{ font-weight:700 !important;}
	.modal h1{
		font-size:24px;
		color:#01519a;
		margin-bottom:0px;
		font-weight:700;
		line-height:25px;
		margin-top:0px;
	}
	.modal h1 .small{
		font-size:50%;
		font-weight:700;
	}
	
	.castName{
		font-weight:700;
		color:#000;
		line-height:1.5;
		font-size:22px;
	}
	.castRoma{
		font-weight:300;
		color:#000;
		line-height:1.5;
		font-size:14px;
	}
	.castInfo{
		font-weight:300;
		color:#008085;
		line-height:1.5;
		font-size:16px;
	}
	.modal p{
		margin-bottom:20px;
	}
	.castImg{
		float:right;
		height:auto;
		margin:0 0 15px 15px;
	}
	.modalHeader{
		margin-bottom:20px;
	}
	.modal .txtArea{
		clear:both;
		width:100%;

		padding-bottom:60px;
	}
	#folmo li{ margin-bottom:15px;}
	#folmo h4{
		font-size:16px; font-weight:700 !important; color:#000; line-height:1.2;
		margin-bottom: 5px !important;
	}
	#folmo p{ font-size:13px; font-weight:300 !important; color:#000; line-height:1.2;
		margin-bottom: 9px !important;
	}
	#folmo h5{ font-size:13px; font-weight:700 !important; color:#008085; line-height:1.2;
		margin-bottom: 0px !important;
	}
	
	#comment.modal{
		padding:0 !important;
		position:relative;
	}
	#comHeader{
		width:100%;
		height:380px;
		background:url(../images/comment_ti.jpg) no-repeat;
		background-size:100% auto;
		margin-bottom:30px;
	}
	#comList{
		padding:0px 16% 15% 16%;
		font-family:"ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho",  serif;
		display:none;
	}
	#comTxt{
		width:86%;
		margin:0 7% 20% 7%;
	}
	#comTxt img{
		width:100%;
		max-width:640px;
	}
	#comList p{
		font-weight:700 !important;
		margin-bottom:15px;
		line-height:1.5;
		font-size:130%;
		letter-spacing:0.1px;
	}
	#comList h5{
		font-weight:700 !important;
		color:#c30a3b;
		font-size:140%;
		text-align:right;
		margin-bottom:120px;
		line-height:1.3;
	}
	#comList h5 .small{
		font-family: 'Noto Sans JP', "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
		font-weight:400 !important;
		color:#111;
		font-size:12px;
		text-align:right;
		display:block;
		letter-spacing:1px;
	}
	#comment.modal::after{
		width:750px;
		height:185px;
		background:url(../images/comment_bg.png) bottom center no-repeat;
		background-size:100% auto;
		z-index:10000;
		content:'';
		position:fixed;
		bottom:0;
		left:0;
		right:0;
		margin:0 auto;
	}
}
@media screen and (max-width: 640px)  {
	.modal{
		width:100vw;
		height:100vh;
		background:#fff;
		padding:60px 5% 5% 5%;
		margin:0;
	}

	.modal .catesubTitle{ font-weight:700 !important; margin-top:-5px;}
	.modalHeader{
	}
	
	.modal .modalImg{
		float:right;
		width:100px;
		height:auto;
		margin:0 0 15px 15px;
	}
	.modal .txtArea{
		padding-bottom:60px;
	}
	.castName{
		font-weight:700;
		color:#000;
		line-height:1.5;
		font-size:16px;
		margin-bottom:10px;
		padding-top:25px;
	}
	.castRoma{
		font-weight:300;
		color:#000;
		line-height:1.5;
		font-size:14px;
	}
	.castInfo{
		font-weight:300;
		color:#008085;
		line-height:1.5;
		font-size:12px;
	}
	.modal p{
		margin-bottom:20px;
	}
	.castImg{
		float:right;
		height:auto;
		margin:0 0 15px 15px;
	}
	.modalHeader{
		margin-bottom:20px;
	}
	.modal .txtArea{
		clear:both;
		width:100%;

		padding-bottom:60px;
	}
	#folmo li{ margin-bottom:15px;}
	#folmo h4{
		font-size:14px; font-weight:700 !important; color:#000; line-height:1.2;
		margin-bottom: 5px !important;
	}
	#folmo p{ font-size:12px; font-weight:300 !important; color:#000; line-height:1.2;
		margin-bottom: 9px !important;
	}
	#folmo h5{ font-size:11px; font-weight:700 !important; color:#008085; line-height:1.2;
		margin-bottom: 0px !important;
	}
	#comment.modal{
		padding:0 !important;
	}
	#comHeader{
		width:100%;
		height:62vw;
		background:url(../images/comment_ti.jpg) no-repeat;
		background-size:100% auto;
	}
	#comTxt{
		width:93%;
		margin:0 3% 15% 3%;
	}
	#comList{
		padding:0px 8% 15% 8%;
		font-family:"ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho",  serif;
		display:none;
	}
	#comList p{
		font-weight:700 !important;
		margin-bottom:15px;
		line-height:1.5;
		letter-spacing:0.1px;
		font-size:120%;
	}
	#comList h5{
		font-weight:700 !important;
		color:#c30a3b;
		font-size:125%;
		text-align:right;
		margin-bottom:70px;
		line-height:1.3;
	}
	#comList h5 .small{
		font-family: 'Noto Sans JP', "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
		font-weight:400 !important;
		color:#111;
		font-size:10px;
		text-align:right;
		display:block;
	}
	#comment.modal::after{
		width:100%;
		height:30vw;
		background:url(../images/comment_bg.png) bottom center no-repeat;
		background-size:100% auto;
		z-index:10000;
		content:'';
		position:fixed;
		bottom:-1px;
		left:0;
	}
}



/* pagetop
---------------------------------------------------*/
#pagetopBtn{
	position:fixed;
	bottom:5vw;
	right:5vw;
	opacity:0;
	text-indent:-9999px;
	display:block;
	width:46px;
	height:46px;
	margin:0 auto;
	border-radius: 40px; 
	-webkit-border-radius: 40px;
	-moz-border-radius: 40px; 
	-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かららしい */
	background:rgba(149, 95, 67,0.8);
	overflow:hidden;
	z-index:1000 !important;
	}

	@media screen and (min-width: 768px) {
		#pagetopBtn{
		bottom:30px;
		right:30px;
		}
	}
#pagetopBtn:after{
	position:absolute;
	content:'';
	z-index:999;
	top:20px;
	left:18px;
	width:10px;
	height:10px;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	transition: 0.3s;
	-webkit-transform:rotate(-135deg);
	transform:rotate(-135deg);
	border-bottom:1px solid #fff;
	border-right:1px solid #fff;
	}
#pagetopBtn:hover:after{
	
	}
.scrollPlus #pagetopBtn{
	opacity:1;
	}