@charset "utf-8";

/* -----------------------------------------------
  common modules
----------------------------------------------- */
html {
    height: 100%;
}

body {
    height: 100%;
}
/*------------------------------------------------
background pc
------------------------------------------------*/

/* show only pc,tb or sp */
@media screen and (min-width: 769px) {
	#Cont .only-sp {
		display: none !important;
	}
}
@media screen and (max-width: 640px) {
	#body_inner #Main{
		margin-bottom:68px;
	}
}
@media screen and (max-width: 768px) {


	#Cont .only-pc {
		display: none !important;
	}
	#Cont .only-sp {
		display: block;
	}
	#Cont img.only-sp {
		display: inline-block;
	}
}


/* -----------------------------------------------
  contents
----------------------------------------------- */
#Main_inner {
	background-color: #c01b21;
	padding-bottom: 0;
	position: relative;
	line-height:1;
}

#Cont {
	width: auto;
}
#Cont .bgRed {
	background: rgb(125,19,24);
	background: linear-gradient(90deg, rgba(125,19,24,1) 0%, rgba(159,16,23,1) 50%, rgba(125,19,24,1) 100%);
	position: relative;
}
#Cont *{
	outline: none;
}
#Cont a {
	outline: none;
}
#Cont img {
	width: 100%;
	height:auto;
	vertical-align: top;
	border: 0;
}
#Cont .imgCover {
    width: 100% !important;
    height: 100% !important;
    position: absolute;
    left: 0;
    top:0;
    z-index: 3;
}
#Cont .txtMask {
	display: none;
}
#Cont .snsArea {
	position: relative;
}
#Cont .snsArea ul{
	width:120px;
	position:fixed;
	bottom:16px;
	z-index: 100;
}
#Cont .snsArea li{
	display:inline-block;
	width:47px;
	margin-left:10px;
}
#Cont .snsArea a{
	display:block;
}
@media screen and (min-width: 769px) {
	#Cont .ContWidth {
		max-width: 960px;
		margin: 0 auto;
	}
}

@media screen and (max-width: 960px) {
	/* #Cont .ContWidth {
		margin: 0 3%;
	} */
}
#Cont .ContWidth02 {
	box-sizing: border-box;
	margin: 0 auto;
	position: relative;
}
#Cont .khNav {
	box-sizing: border-box;
	background: #a30f15;
	background: -moz-linear-gradient(left, #a30f15 0%, #b71219 50%, #a30f15 100%);
	background: -webkit-linear-gradient(left, #a30f15 0%,#b71219 50%,#a30f15 100%);
	background: linear-gradient(to right, #a30f15 0%,#b71219 50%,#a30f15 100%);
	width: 100%;
	padding-top: 14px;
}
#Cont .khNav .logo {
	width: 100px;
	height: 46px;

}

#Cont .khNav .khMenu li.new{
	position: relative;
}
#Cont .khNav .khMenu li.new::before{
	content:"";display:block;
	position: absolute;
	background-size: contain;
}



.mfp-bg {
	opacity: 0.6;
}
.mfp-close {
	height: 50px;
	line-height: 50px;
	font-size: 50px;
	font-family: sans-serif;
}
.mfp-iframe-holder .mfp-close {
	top: -50px;
}
.mfp-inline-holder .mfp-close {
	top: -50px;
}

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

	#Cont .ContWidth02 {
		max-width: 960px;
	}
	#pcKhNav .ContWidth{
		padding-top:2px;
		display: flex;
		flex-wrap: nowrap;
		justify-content :space-between;
		align-items:center;
	}

	/* khNav */
	#Cont .pckhNavArea {
		height: 0; /* fixing height for scroll */
		overflow: visible;
		position: relative;
	}

	#Cont .pckhNavArea .khNav{
		position: absolute;
		padding-left:2%;
		padding-right:2%;
		z-index: 10;
		height: 74px;
		top:0;
	}

	#Cont .khNav:after {
		content:".";display:block;height:0px;clear:both;visibility:hidden;
	}


	#Cont .khNav .khMenu {
		width: 70.833%;
		display: flex;
		flex-wrap: nowrap;
		justify-content :space-between;
		align-items: center;
	}

	#Cont .khNav .khMenu li {
		position: relative;

	}
	#Cont .khNav .khMenu li a{
		display: block;
	}
	#Cont .khNav .khMenu li.new::before{
		position: absolute;content:'';display: block;
		top:0;left:0;right:0;margin:-18px auto 0;
		height:16px;width:100px;
		background-size: contain;

	}
	#Cont .khNav .khMenu li.navThankful {
		width: 13.5%;
	}
	#Cont .khNav .khMenu li.navCampaign {
		width: 15.128%;
	}
	#Cont .khNav .khMenu li.navInterview {
		width: 13.375%;
	}
	#Cont .khNav .khMenu li.navStatement {
		width: 12.692%;
	}
	#Cont .khNav .khMenu li.navStatement.new {

	}
	#Cont .khNav .khMenu li.navQuality {
		width: calc(176/680*100%);
	}
	#Cont .khNav .khMenu li.navTvcm {
		width: calc(181/680*100%);
	}
	#Cont .khNav .khMenu li.navSpecial {
		width: 11.375%;
	}
	#Cont .khNav .khMenu li.navCelebrate {
		width: calc(223/680*100%);
	}
	#Cont .khNav .khMenu li.navBlank {
		width: 13.128%;
	}



}



#Cont .khNav.fixed {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
}

/* -------------------------------------------------------------------------
  sp -h
------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {


	/* khNav */
	#Cont .spkhNavArea {
		padding-bottom:11%;
		width:100%;
	}
	#Cont .khNav {
		box-sizing: border-box;
		padding-top: 0;
		position: relative;
		z-index: 50;
	}
	.spNaviWrap{
		margin-top: 11%;
		height:0;
		position: relative;
	}
	#Cont #spKhNav{
		position: absolute;
		top:0;
	}
	#Cont #spKhNav.fixed {
    	position: fixed;

	}
	#Cont .khNav .ContWidth:after {
		content:".";display:block;height:0px;clear:both;visibility:hidden;
	}
	#Cont .khNav .logo {
		position: absolute;
		top:0;left:0;
		width: 20%;
		height: auto;
		padding: 1% 0;
		margin-left:2.75%;
	}
	#Cont .khNav .khMenu {
		width: 100%;
		float: none;
		background: #8d0a10;
		background: -moz-linear-gradient(left, #8d0a10 0%, #a71017 50%, #8d0a10 100%);
		background: -webkit-linear-gradient(left, #8d0a10 0%,#a71017 50%,#8d0a10 100%);
		background: linear-gradient(to right, #8d0a10 0%,#a71017 50%,#8d0a10 100%);
		position: absolute;
		left: 0;
		top:0;
		display: none;
	}
	#Cont .khNav .khMenuBtn {
		position: absolute;
		top:30%;
		width: 16%;
		right:2.75%;
		height: auto;
		/* float: right; */
		padding: 0 5% 0 2%;
		background-size: 15% auto;
		cursor: pointer;
		/* margin: 3.5% 2.75% 0 0; */
	}
	#Cont .khNav .khMenu{
		/* display: flex;
		flex-wrap: wrap; */

	}
	#Cont .khNav .khMenu li {
		display: inline-block;
		margin-left: 0;
		padding-top: 0;
		width:50%;
		position: relative;
		padding-bottom:15%;

	}
	#Cont .khNav .khMenu li a {
		position: absolute;
		display: block;
		padding: 8% 0 8% 0;
		background-size: 6% auto;
		width:83%;
		left:0;right:0;top:0;bottom:0;
		margin:auto;
		border-bottom: solid 1px #b4343a;

	}

	/*
	#Cont .khNav .khMenu li.navCampaign,
	#Cont .khNav .khMenu li.navInterview,
	#Cont .khNav .khMenu li.navStatement,
	#Cont .khNav .khMenu li.navQuality,
	#Cont .khNav .khMenu li.navSpecial,
	#Cont .khNav .khMenu li.navTvcm {
		width: auto;
	}
*/


	#Cont .khNav .khMenu li.navThankful img{
		width: 60%;
	}
	#Cont .khNav .khMenu li.navStatement img{
		width: 60%;
	}
		#Cont .khNav .khMenu li.navQuality img{
		width: 84.5%;
	}
	#Cont .khNav .khMenu li.navSpecial img {
		width:53.5%;
	}
	#Cont .khNav .khMenu li.navInterview img{
		width: 65.5%;
	}
	#Cont .khNav .khMenu li.navCampaign img {
		width: 66%;
	}
	#Cont .khNav .khMenu li.navTvcm img {
		width: 82%
	}
	#Cont .khNav .khMenu li.navCelebrate img {
		width: 65%
	}
	#Cont .khNav .khMenu li.navCampaign a,
	#Cont .khNav .khMenu li.navCelebrate a{
		border-style:none;
	}
	#Cont .khNav .khMenu li.new a{
		padding: 14.5% 0 6.3%;
	}

	#Cont .khNav .khMenu li.navCelebrate a{
		padding-top:6%;
	}
	#Cont .khNav .khMenu li.navCelebrate img.w{
		display: none;
	}
	#Cont .khNav .khMenu li.new::before{
		background-size: 100%;
		top:18%;left:10%;
		height:50%;width: 30%;
		pointer-events: none;
	}
}


/* -------------------------------------------------------------------------
  sp
------------------------------------------------------------------------- */
@media screen and (max-width: 480px) {

	#Cont .khNav .khMenuBtn {
		background-size: 15% auto;

	}
	#Cont .khNav .khMenu {
		/* display: none; */
	}
	#Cont .khNav .khMenu li {
		display: block;
		width:100%;

	}
	#Cont .khNav .khMenu li a {
		padding: 4% 0 4% 3%;
		background-size: 3% auto;
		width:auto;

	}
	#Cont .khNav .khMenu li.navCampaign a{
		border-bottom: solid 1px #b4343a;
	}
	#Cont .khNav .khMenu li.navThankful,
	#Cont .khNav .khMenu li.navCampaign,
	#Cont .khNav .khMenu li.navInterview,
	#Cont .khNav .khMenu li.navStatement,
	#Cont .khNav .khMenu li.navQuality,
	#Cont .khNav .khMenu li.navSpecial,
	#Cont .khNav .khMenu li.navTvcm,
	#Cont .khNav .khMenu li.navCelebrate  {
		width: auto;
	}
	#Cont .khNav .khMenu li.navThankful img{
		width: 25%;
	}
	#Cont .khNav .khMenu li.navCampaign img {
		width: 28%;
	}
	#Cont .khNav .khMenu li.navInterview img{
		width: 26.125%;
	}
	#Cont .khNav .khMenu li.navStatement img{
		width: 25%;
	}
	#Cont .khNav .khMenu li.navQuality img{
		width: 47.125%;
	}
	#Cont .khNav .khMenu li.navTvcm img {
		width: 50%
	}
	#Cont .khNav .khMenu li.navSpecial img {
		width: 22.5%;
	}
	#Cont .khNav .khMenu li.navCelebrate img {
		width: 59%;
	}
	#Cont .khNav .khMenu li.navCelebrate a{
		padding-top:5%;
	}
	#Cont .khNav .khMenu li.navCelebrate img.w{
		display: block;
	}
	#Cont .khNav .khMenu li.navCelebrate img.h{
		display: none;
	}
	#Cont .khNav .khMenu li.new a{	padding:6.5% 0 2.5% 3% !important;}

	#Cont .khNav .khMenu li.new::before{
		top:14%;left:3%;
		height:30%;width: 16%;
	}
}



.contentsMenu{
	width:100%;
}
.contentsMenu.head{
	position: absolute;
	top:0;
	height: 0;
	overflow: hidden;
}
.contentsMenu.fixed{
	position: fixed;
	top:0;
	z-index:102;
	height: auto;

}
.contentsMenu .menuTitle{
	position: relative;
	z-index:5;
	background-color: #a91017;
	transition: margin 0.5s;

	margin-top:-10%;
}
.contentsMenu.fixed .menuTitle{
	margin-top:0;
}

.contentsMenu.view{
	/* overflow: scroll;
	height: 100vh; */

}
.contentsMenu .menuWrap{
	width: 100%;
	height: 0;
	overflow: hidden;
	margin-top:0;
	transition: opacity 0.8s;
	tansition-timing-function:linear;

}
.contentsMenu.view .menuWrap{
	margin-top:0;
	height: auto;
	background-color: rgba(172,0,8,0.9);
	overflow-y: auto;
	height: calc(100vh);
	/* height: -webkit-fill-available; */
}
.contentsMenu #viewMenu{

}
.contentsMenu #viewMenu ul{
	/* overflow: hidden; */
	opacity: 0;
	transition: all 1.5s;
}
.contentsMenu.view #viewMenu ul{
	opacity: 1;
}
.contentsMenu li{
	position: relative;
}
.contentsMenu li a{
	display: block;
}
.contentsMenu li a::after{
	content: '';
	display: block;position: absolute;left:0;top:0;
	width: 100%;height: 100%;
	background:url(../images/img_cover.png) no-repeat left top;
	background-size: cover;
}
.contentsMenu li img.cast{
	position: absolute;left:0;top:0;
	opacity: 0;
	transition: opacity 2s;
}
.contentsMenu li img.cast.show{
	opacity: 1;
}
@media screen and (min-width: 769px) {
	.contentsMenu .menuTitle .title{
		cursor: pointer;
		opacity: 1;
		transition: opacity 0.5s;
	}
	.contentsMenu .menuTitle .title:hover{
		opacity: 0.6;
	}
	.contentsMenu .inner {
		width: 100%;
		max-width: 960px;
		margin: auto;
		position: relative;
	}
	.contentsMenu .menuTitle .inner{
		width:100%;height: 74px;max-width: 960px;
		margin:auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
	}
	.contentsMenu .logo a{
		display: block;
		width:106px;
	}
	.contentsMenu h2{
		width:290px;
		margin:0 auto 0;
		padding-top:60px;
	}
	.contentsMenu.view .menuWrap{
		height:auto;
	}
	.contentsMenu #viewMenu{
		display: flex;
		/* flex-direction: column;  */
		justify-content: center;
		align-items: center;
		height: calc(100vh - 74px);
	}
	.contentsMenu ul{
		display: flex;
		flex-wrap: wrap;
		padding:80px 0 80px 0;
	}
	.contentsMenu li{
		width:calc(313/960*100%);
		margin-right:calc(10/960*100%);
		margin-bottom: calc(10/960*100%);
	}
	.contentsMenu li:nth-child(3n){
		margin-right: 0;
	}


	.contentsMenu li.top{
		width:100%;
		margin:4% 0 0 0;
	}
	.contentsMenu.bottom ul{
		padding-top:8.333%;
	}
}

@media screen and (max-width: 768px) {
	.contentsMenu #viewMenu{
		padding:8% 0;
	}
	.contentsMenu .menuTitle .inner{
		width:100%;
		margin:auto;
		/* display: flex;
		flex-wrap: wrap; */
		justify-content: space-between;
		align-items: center;
	}
	.contentsMenu .inner{
		width:100%;
	}
	.contentsMenu .logo{
		padding:1.875% 0 1.875% 2.5%;
	}
	.contentsMenu .logo a{
		display: block;
		width:calc(142/640*100%);
	}
	.contentsMenu .title{
		position: absolute;
		right:0;
		top:0;bottom:0;
		width:calc(133/640*100%);
		padding:4.5% 2.5% 4.5% 0;
	}
	.contentsMenu h2{
		width:calc(293/640*100%);
		margin:0 auto 0;
		padding-top:60px;
	}
	.contentsMenu ul{
		width:calc(471/640*100%);
		margin:0 auto 0;
		padding-bottom: 9.375%;
	}
	.contentsMenu li{
		margin-bottom:4.24%;
	}
	.contentsMenu li:last-child{
		margin-bottom: 0;
	}
	.head.contentsMenu li:last-child{
		margin-bottom:110px;
	}
	.contentsMenu li a{
		display: block;
	}
	.contentsMenu.bottom ul{
		padding-top:9.375%;
	}
}