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

/* ==================================================
BASE (RESET)
================================================== */

html { box-sizing: border-box; width: 100%; margin: 0; padding: 0; }
*, *::after, *::before { box-sizing: inherit; }
body { position: relative; width: 100%; margin: 0; padding: 0; text-align: center; }
#allWrap { width: 100%; margin: 0 auto; text-align: center;}

h1, h2, h3, h4, h5, h6, p { font-size: 100%; font-weight: normal; margin: 0; padding: 0; }
ul, ol, dl { margin: 0; padding: 0; vertical-align: baseline; background: transparent; }
ol, li { list-style: none; }
dt, dd { font-weight: inherit; font-style: normal; margin: 0; padding: 0; }
table{ border-collapse: collapse; border-spacing: 0; }
th, td { font-size: inherit; font-weight: normal; font-style: normal; empty-cells: show; }
input, select { vertical-align: middle; }
input, textarea, select { font-family: inherit; font-size: inherit; font-weight: inherit; }
pre { white-space: pre-wrap; }
em, strong, i, b { font-style: normal; font-weight: inherit; }
figure { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}
img { font-size: 0; line-height: 0; border: 0; vertical-align: bottom; }
img, object, embed, video {max-width: 100%;}
/*レスポンシブ対応*/
img, svg { max-width: 100%; height: auto; }
/* ---------- */
a { font-size: inherit; margin: 0; padding: 0; background: transparent; }

/*i { display: inline-block; }*/

/* ==================================================
FONT
================================================== */

html { font-size: 62.5%; }

body,
#allWrap {
/*ゴシック系*/
	/*font-family: "Noto Sans JP", "メイリオ", Meiryo, sans-serif;*/
	font-family: dnp-shuei-gothic-kin-std, "メイリオ", Meiryo, sans-serif;
	
/*明朝系*/
	/*font-family: "Noto Serif JP", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;*/
	/*font-family: dnp-shuei-mincho-pr6n, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;*/
/**/

	font-style: normal;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.8;
	letter-spacing: 0.05em;
	color: #000;
	
	-webkit-font-smoothing: antialiased; /* WebKitブラウザサポート */
	text-rendering: optimizeLegibility; /* Chrome、Safariサポート */
	-moz-osx-font-smoothing: grayscale; /* Firefoxサポート */
	font-feature-settings: 'liga'; /* IEサポート */
	
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%; /* iPhoneの文字サイズバグの回避 */
}

/*
===== Adobe Fonts CSS Sample =====
▼DNP 秀英角ゴシック金 Std
font-family: dnp-shuei-gothic-kin-std,sans-serif;
font-style: normal;
font-weight: 500; ← M
font-weight: 600; ← B

▼DNP 秀英明朝 Pr6N
font-family: dnp-shuei-mincho-pr6n,sans-serif;
font-style: normal;
font-weight: 600; ← B
*/

#allWrap { font-size: 1.6rem; letter-spacing: 0.05em; z-index: 10;}
#allWrap p { line-height: 2; margin-bottom: 1.2em; font-weight: inherit;}

/* ################ ↓↓↓ MEDIAQUERY ↓↓↓ ########## */ @media screen and (max-width: 768px) {
html { font-size: 10px; }
#allWrap p { line-height: 1.6; }
} /* ############## ↑↑↑ MEDIAQUERY ↑↑↑ ########## */


/* ==================================================
LINK
================================================== */

a:link { text-decoration: underline; color: rgba(55,55,55,1); }
a:visited { text-decoration: underline; color: rgba(55,55,55,1); }
a:hover { text-decoration: none; color: rgba(0,0,0,1); }
a:active { text-decoration: none; color: rgba(0,0,0,1); }
a { outline: 0; transition: opacity 0.4s ease-out 0s, color 0.4s ease-out 0s; }
:focus { outline: 0; }


/* マウスオーバーでimgをZOOM
------------------------------ */
a.hoverZoom { position: relative; display: block; overflow: hidden; text-decoration: none; }
a.hoverZoom img {
	width: 1000px; /*親ブロック以上のサイズを指定*/
	max-width: 100%; /*原寸より拡大させない*/
	transition: transform .25s linear 0s;
}
a.hoverZoom:hover img { transform: scale(1.05); }


/* ==================================================
PCの時のみ表示
================================================== */

/* ################ ↓↓↓ MEDIAQUERY ↓↓↓ ########## */ @media screen and (min-width: 769px) {
.spOnly { display: none !important; }
.pcOnly { }
} /* ############## ↑↑↑ MEDIAQUERY ↑↑↑ ########## */

/* ==================================================
SPの時のみ表示
================================================== */

/* ################ ↓↓↓ MEDIAQUERY ↓↓↓ ########## */ @media screen and (max-width: 768px) {
.spOnly { }
.pcOnly { display: none !important; }
} /* ############## ↑↑↑ MEDIAQUERY ↑↑↑ ########## */

/* ==================================================
PAGE BASE
================================================== */

body {
	min-width: 320px;
}

#allWrap {
	min-width: 320px;
	overflow: hidden;
}

/* ==================================================
MENU
================================================== */

/* #hdrNavi
------------------------------ */

#hdrNavi {
	padding: 30px 1% 20px;
}

#hdrNavi::before {
	content: "";
	display: block;
	width: 100%;
	height: 8px;
	background: url(../img/pattern_noise_gold.png) repeat 50% 0;
	position: fixed;
	z-index: 9999;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
}

#hdrNavi ul {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	flex-direction: row;
	margin: 0 auto;
}

/* ############ ↓↓↓ MEDIAQUERY ↓↓↓ ############ */ @media screen and (max-width: 1000px) {
	#hdrNavi ul {
		max-width: 600px;
	}
} /* ############ ↑↑↑ MEDIAQUERY ↑↑↑ ############ */

/* ############ ↓↓↓ MEDIAQUERY ↓↓↓ ############ */ @media screen and (max-width: 900px) {
	#hdrNavi {
		padding: 18px 1% 10px;
	}
} /* ############ ↑↑↑ MEDIAQUERY ↑↑↑ ############ */

/* ############ ↓↓↓ MEDIAQUERY ↓↓↓ ############ */ @media screen and (max-width: 420px) {
	#hdrNavi ul {
		max-width: 320px;
	}
} /* ############ ↑↑↑ MEDIAQUERY ↑↑↑ ############ */

#hdrNavi ul li {
	height: 30px;
	margin: 0 12px 10px;
}

#hdrNavi ul li a {
	width: 100%;
	height: 100%;
	padding: 0 10px;
	display: block;
	position: relative;
}

/* ############ ↓↓↓ MEDIAQUERY ↓↓↓ ############ */ @media screen and (max-width: 900px) {
	#hdrNavi ul li {
		height: 25px;
		margin: 0 8px 10px;
	}
	#hdrNavi ul li a {}
} /* ############ ↑↑↑ MEDIAQUERY ↑↑↑ ############ */

/* ############ ↓↓↓ MEDIAQUERY ↓↓↓ ############ */ @media screen and (max-width: 540px) {
	#hdrNavi ul li {
		margin: 0 5px 10px;
	}
	#hdrNavi ul li a {
		padding: 0 5px;
	}
} /* ############ ↑↑↑ MEDIAQUERY ↑↑↑ ############ */

#hdrNavi ul li a::after {
	content: "";
	position: absolute;
	top: -5px;
	left: calc(50% - 20px);
	z-index: -1;
	display: block;
	width: 30px;
	height: 40px;
	background: url(../img/menu_hover.png) no-repeat 50% 50%;
	background-size: contain;
	transition: all 0.4s ease-out 0s;
	opacity: 0;
}

#hdrNavi ul li a:hover::after {
	opacity: 1;
}

#hdrNavi ul li a img {}

/**/

/* MENU - COMING SOON */

#hdrNavi ul li.comingsoon {}

#hdrNavi ul li.comingsoon a {
	pointer-events: none;
	opacity: 0.2;
}

#hdrNavi ul li.comingsoon a img {}

/* MENU - NEW */

#hdrNavi ul li.new {}

#hdrNavi ul li.new a {
	position: relative;
	padding-right: 20px;
}

#hdrNavi ul li.new a::before {
	content: "NEW";
	display: block;
	position: absolute;
	top: 3px;
	right: -2px;
	z-index: -1;
	background: #b3413c;
	color: #fff;
	border-radius: 3px;
	line-height: 1;
	font-size: 10px;
	padding: 3px 4px 2px 5px;
	transform: rotate(20deg);
}

#hdrNavi ul li.new a img {}

/**/

/* #pageNavi
------------------------------ */

#pageNavi {
	position: fixed;
	z-index: 100;
	top: -270px;
	left: 0;
	width: 100%;
	background: rgba(0, 0, 0, 0.8);
	transition: all 0.8s ease-out 0s;
	height: 60px;
	overflow: hidden;
}

#pageNavi.navOpen {
	height: 260px;
}

#pageNavi.veiw {
	top: 8px;
}

#pageNavi .ttl {
	background: rgba(0, 0, 0, 0.7);
	height: 60px;
	padding: 14px;
	cursor: pointer;
	position: relative;
	z-index: 2;
}

#pageNavi .ttl img {
	display: block;
	margin: 0 auto;
}

#pageNavi .accordion {
	padding: 10px 1% 40px;
	opacity: 0;
	transition: all 0.8s ease-out 0s;
	position: relative;
	z-index: 1;
	height: calc(100% - 60px);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: nowrap;
	flex-direction: row;
}

#pageNavi.navOpen .accordion {
	opacity: 1;
}

#pageNavi ul {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	flex-direction: row;
	margin: 0 auto;
}

#pageNavi ul li {
	height: 30px;
	margin: 0 12px 20px;
}

#pageNavi ul li a {
	width: 100%;
	height: 100%;
	padding: 0 10px;
	display: block;
	position: relative;
}

#pageNavi ul li a::after {
	content: "";
	position: absolute;
	top: -5px;
	left: calc(50% - 20px);
	z-index: -1;
	display: block;
	width: 30px;
	height: 40px;
	background: url(../img/menu_hover.png) no-repeat 50% 50%;
	background-size: contain;
	transition: all 0.4s ease-out 0s;
	opacity: 0;
}

#pageNavi ul li a:hover::after {
	opacity: 1;
}

#pageNavi ul li a img {}

/* MENU - COMING SOON */

#pageNavi ul .comingsoon {}

#pageNavi ul .comingsoon a {
	pointer-events: none;
	opacity: 0.2;
}

#pageNavi ul .comingsoon a img {}

/**/

/* MENU - NEW */

#pageNavi ul li.new {}

#pageNavi ul li.new a {
	position: relative;
	padding-right: 20px;
}

#pageNavi ul li.new a::before {
	content: "NEW";
	display: block;
	position: absolute;
	top: 2px;
	right: -5px;
	z-index: -1;
	background: #b3413c;
	color: #fff;
	border-radius: 3px;
	line-height: 1;
	font-size: 10px;
	padding: 3px 4px 2px 5px;
	transform: rotate(20deg);
}

#pageNavi ul li.new a img {}

/**/

#pageNavi .close {
	display: block;
	width: 115px;
	height: 70px;
	margin: auto;
	padding: 20px;
	transition: all 0.4s ease-out 0s;
	opacity: 0.6;
	cursor: pointer;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}

#pageNavi .close:hover {
	opacity: 0.3;
}

#pageNavi .close img {
	display: block;
}

/* ############ ↓↓↓ MEDIAQUERY ↓↓↓ ############ */ @media screen and (max-width: 1000px) {
	#pageNavi ul {
		max-width: 600px;
	}
} /* ############ ↑↑↑ MEDIAQUERY ↑↑↑ ############ */

/* ############ ↓↓↓ MEDIAQUERY ↓↓↓ ############ */ @media screen and (max-width: 900px) {
	#pageNavi {
		top: -330px;
	}
	#pageNavi.navOpen {
		height: 320px;
	}
} /* ############ ↑↑↑ MEDIAQUERY ↑↑↑ ############ */

/* ############ ↓↓↓ MEDIAQUERY ↓↓↓ ############ */ @media screen and (max-width: 420px) {
	#pageNavi .accordion {
		padding: 10px 1% 60px;
	}
	#pageNavi ul li {
		margin: 0 12px 12px;
	}
} /* ############ ↑↑↑ MEDIAQUERY ↑↑↑ ############ */


/* ページ毎のナビメニュー無効化
------------------------------ */
#pageOmiyage #hdrNavi li:nth-of-type(4) a,
#pageOmiyage #pageNavi li:nth-of-type(4) a,
#pageOtanoshimi #hdrNavi li:nth-of-type(5) a,
#pageOtanoshimi #pageNavi li:nth-of-type(5) a,
#pageReport #hdrNavi li:nth-of-type(6) a,
#pageReport #pageNavi li:nth-of-type(6) a {
	pointer-events:none;
	opacity: 0.4;
}

#pageOmiyage #hdrNavi li:nth-of-type(4) a::after,
#pageOmiyage #pageNavi li:nth-of-type(4) a::after,
#pageOtanoshimi #hdrNavi li:nth-of-type(5) a::after,
#pageOtanoshimi #pageNavi li:nth-of-type(5) a::after,
#pageReport #hdrNavi li:nth-of-type(6) a::after,
#pageReport #pageNavi li:nth-of-type(6) a::after {
	opacity: 0;
}


/* ==================================================
HEADER
================================================== */

#siteHdr {}

#siteHdr .visual {
	position: relative;
}

#siteHdr .visual::after {
	content: "";
	position: absolute;
	z-index: -1;
	top: 30px;
	left: 0;
	width: 100%;
	height: calc(100% - 55px);
	background: url(../img/190130/hdr_poster_bg.png) no-repeat center bottom;
	background-size: cover;
}

#siteHdr .visual img {
	margin: 0 auto;
}

/* ############ ↓↓↓ MEDIAQUERY ↓↓↓ ############ */ @media screen and (max-width: 768px) {
	#siteHdr {}
	#siteHdr .visual {}
	#siteHdr .visual::after {
		display: none;
	}
	#siteHdr .visual img {}
} /* ############ ↑↑↑ MEDIAQUERY ↑↑↑ ############ */

/* ==================================================
PAGE HEADER ※下層ページ用
================================================== */

#pageHdr {
	margin-bottom: 40px;
}

#pageHdr .visual {}

#pageHdr .visual img {}

/* ############ ↓↓↓ MEDIAQUERY ↓↓↓ ############ */ @media screen and (max-width: 768px) {
	#pageHdr {}
	#pageHdr .visual {}
	#pageHdr .visual img {}
} /* ############ ↑↑↑ MEDIAQUERY ↑↑↑ ############ */

/* ==================================================
J-WAVE SNS BUTTON
================================================== */

#snsWrap {
	text-align: center;
	padding: 30px 3% 20px;
}

/* ############ ↓↓↓ MEDIAQUERY ↓↓↓ ############ */ @media screen and (max-width: 900px) {
	#snsWrap {
		padding: 40px 3% 40px;
	}
} /* ############ ↑↑↑ MEDIAQUERY ↑↑↑ ############ */

/* ==================================================
CONTENTS COMMON
================================================== */

main {}

/* ==================================================
CONTENTS - ARCHIVE [BANNER AREA]
================================================== */

/* bnrLottery
------------------------------ */

.bnrLottery {
	margin: 80px auto 120px;
	width: 94%;
}

.bnrLottery a {
	display: block;
	margin: 0 auto;
	max-width: 640px;
	transition: filter 0.4s ease-out 0s, opacity 0.4s ease-out 0s;
}

.bnrLottery a:hover {
	filter: brightness(105%) contrast(110%) saturate(120%);
}

.bnrLottery a img {}

/* credit
------------------------------ */

#cnt_ftrCredit {
	max-width: 1280px;
	padding: 0 40px 120px;
	margin: 0 auto;
}

#cnt_ftrCredit::before {
	content: "";
	display: block;
	width: 100%;
	height: 2px;
	background: #000;
	margin-bottom: 60px;
}

#cnt_ftrCredit ul {
	text-align: left;
	font-size: 1.4rem;
	padding: 0 30px;
}

#cnt_ftrCredit ul li {
	font-weight: 500;
	margin-bottom: 5px;
	line-height: 1.6;
}

#cnt_ftrCredit ul li em {
	font-weight: 600;
}

#cnt_ftrCredit ul li:last-child {}

#cnt_ftrCredit ul li i {
	display: inline-block;
}

/* ############ ↓↓↓ MEDIAQUERY ↓↓↓ ############ */ @media screen and (max-width: 900px) {
	#cnt_ftrCredit {
		padding: 0 15px 120px;
	}
	#cnt_ftrCredit ul {
		font-size: 1.3rem;
		padding: 0 15px;
	}
	#cnt_ftrCredit ul li {
		margin-bottom: 12px;
	}
	#cnt_ftrCredit ul li em {}
	#cnt_ftrCredit ul li:last-child {}
	#cnt_ftrCredit ul li i {}
} /* ############ ↑↑↑ MEDIAQUERY ↑↑↑ ############ */

/* #cnt5
------------------------------ */

#cnt5 {
	width: 94%;
	margin: 0 auto;
	max-width: 1400px;
	z-index: 1;
}

#pageOmiyage #cnt5,
#pageOtanoshimi #cnt5,
#pageReport #cnt5 {
	max-width: 1280px;
	padding: 0 40px;
	width: 100%;
}

/* ############ ↓↓↓ MEDIAQUERY ↓↓↓ ############ */ @media screen and (max-width: 900px) {
	#pageOmiyage #cnt5 {
		padding: 0 15px;
	}
} /* ############ ↑↑↑ MEDIAQUERY ↑↑↑ ############ */

#cnt5 h3 {
	position: relative;
	margin-bottom: 60px;
}

#cnt5 h3::before {
	content: "";
	display: block;
	width: 113px;
	height: 63px;
	background: url(../img/cnt5_obj.png) no-repeat center center;
	background-size: contain;
	position: absolute;
	z-index: 1;
	left: 10px;
	top: -42px;
}

#cnt5 h3::after {
	content: "";
	display: block;
	width: 100%;
	height: 2px;
	background: #000;
	position: absolute;
	z-index: -1;
	top: 50%;
	left: 0;
}

#cnt5 h3 img {}

#cnt5 .bnr {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	flex-direction: row;
	margin-bottom: 60px;
}

#cnt5 .bnr li {
	width: 400px;
	height: 72px;
	margin: 0 25px 50px;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: nowrap;
	flex-direction: row;
}

#cnt5 .bnr li a {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
}

#cnt5 .bnr li a::after {
	content: "";
	display: inline-block;
	width: 100%;
	height: 100%;
	background: #000 url(../img/pattern_slash.png) repeat center center;
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: -1;
	opacity: 0.3;
}

#cnt5 .bnr li a img {
	transition: all 0.4s ease-out 0s;
}

#cnt5 .bnr li a:hover img {
	transform: translate(6px, 6px);
}

/* ############ ↓↓↓ MEDIAQUERY ↓↓↓ ############ */ @media screen and (max-width: 900px) {
	#cnt5 {}
	#cnt5 h3 {}
	#cnt5 h3::before {}
	#cnt5 h3::after {}
	#cnt5 h3 img {}
	#cnt5 .bnr {}
	#cnt5 .bnr li {
		margin-bottom: 30px;
	}
	#cnt5 .bnr li a {}
	#cnt5 .bnr li a::after {}
	#cnt5 .bnr li a img {}
	#cnt5 .bnr li a:hover img {}
} /* ############ ↑↑↑ MEDIAQUERY ↑↑↑ ############ */

/* ############ ↓↓↓ MEDIAQUERY ↓↓↓ ############ */ @media screen and (max-width: 480px) {
	#cnt5 {}
	#cnt5 h3 {}
	#cnt5 h3::before {
		width: 70px;
		top: -31px;
	}
	#cnt5 h3::after {}
	#cnt5 h3 img {}
	#cnt5 .bnr {}
	#cnt5 .bnr li {
		width: 300px;
		height: 54px;
	}
	#cnt5 .bnr li a {}
	#cnt5 .bnr li a::after {}
	#cnt5 .bnr li a img {}
	#cnt5 .bnr li a:hover img {}
} /* ############ ↑↑↑ MEDIAQUERY ↑↑↑ ############ */

.bnrClose {}

.bnrClose ul {}

.bnrClose ul li {
	margin-bottom: 20px;
}

.bnrClose ul li a {
	display: block;
	margin: 0 auto;
	max-width: 720px;
}

.bnrClose ul li a:hover {
	opacity: 0.7;
}

.bnrClose ul li a img {}

/* ==================================================
FOOTER
================================================== */

#ftrWrap {
	margin-top: 120px;
	padding-bottom: 60px;
}

#ftrWrap .inner {
	width: calc(100% - 120px);
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	flex-direction: row;
}

#ftrWrap .pageTop {
	order: 2;
}

#ftrWrap .pageTop a {
	transition: all 0.4s ease-out 0s;
	display: block;
}

#ftrWrap .pageTop a:hover {
	filter: brightness(120%) contrast(80%) saturate(120%);
}

#ftrWrap .homeBtn {
	order: 1;
	width: 220px;
}

#ftrWrap .homeBtn a {
	display: block;
	transition: all 0.4s ease-out 0s;
}

#ftrWrap .homeBtn a:hover {
	opacity: 0.6;
}

#ftrWrap .jwaveLogo {
	order: 3;
	width: 220px;
}

#ftrWrap .jwaveLogo.ver30th {}

#ftrWrap .jwaveLogo img {}

#ftrWrap .copyright {
	order: 4;
	width: 100%;
	text-align: center;
	margin-top: 120px;
}

/* ############ ↓↓↓ MEDIAQUERY ↓↓↓ ############ */ @media screen and (max-width: 900px) {
	#ftrWrap {
		margin-top: 80px;
	}
	#ftrWrap .inner {
		width: 94%;
	}
	#ftrWrap .pageTop {
		order: 1;
		width: 100%;
		margin-bottom: 80px;
	}
	#ftrWrap .pageTop a {
		display: inline-block;
	}
	#ftrWrap .pageTop a:hover {}
	#ftrWrap .homeBtn {
		order: 2;
		width: 160px;
	}
	#ftrWrap .homeBtn a {}
	#ftrWrap .homeBtn a:hover {}
	#ftrWrap .jwaveLogo {
		text-align: right;
		width: 110px;
	}
	#ftrWrap .jwaveLogo.ver30th {}
	#ftrWrap .jwaveLogo img {}
	#ftrWrap .copyright {
		margin-top: 60px;
	}
} /* ############ ↑↑↑ MEDIAQUERY ↑↑↑ ############ */

/* ############ ↓↓↓ MEDIAQUERY ↓↓↓ ############ */ @media screen and (max-width: 480px) {
	#ftrWrap {
		margin-top: 60px;
	}
	#ftrWrap .inner {}
	#ftrWrap .pageTop {
		margin-bottom: 40px;
	}
	#ftrWrap .pageTop a {
		width: 120px;
	}
	#ftrWrap .pageTop a:hover {}
	#ftrWrap .homeBtn {}
	#ftrWrap .homeBtn a {}
	#ftrWrap .homeBtn a:hover {}
	#ftrWrap .jwaveLogo {}
	#ftrWrap .jwaveLogo.ver30th {}
	#ftrWrap .jwaveLogo img {}
	#ftrWrap .copyright {}
} /* ############ ↑↑↑ MEDIAQUERY ↑↑↑ ############ */

/* anchor */

article.area {
	position: relative;
}

article.area .anchor {
	position: absolute;
	top: -75px;
	left: 0;
	z-index: -9999;
	width: 1px;
	opacity: 0;
}

article.area #playguide.anchor {
	top: -100px;
}

#allWrap {
	position: relative;
	z-index: 10;
}

/* bg1
------------------------------ */

#bg1 {
	position: fixed;
	z-index: 4;
	top: 0;
	left: 0;
	width: 100%;
	height: 120vh;
	overflow: hidden;
}

#bg1 .inner {
	position: absolute;
	width: 2000px;
	height: 2000px;
	top: 0;
	left: calc(50% - 1000px);
}

#cvs1 {
	background-color: transparent;
}

/* bg2
------------------------------ */

#bg2 {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 3;
	width: 100%;
	height: 120vh;
	overflow: hidden;
}

#bg2 .inner {
	position: absolute;
	width: 2000px;
	height: 2000px;
	top: 0;
	left: calc(50% - 1000px);
}

#cvs2 {
	background-color: transparent;
}

/* bg3
------------------------------ */

#bg3 {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 100vh;
}

/* bg4
------------------------------ */

#bg4 {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100vh;
	background: url(../img/bg.jpg) no-repeat center center;
	background-size: cover;
}

/* ############ ↓↓↓ MEDIAQUERY ↓↓↓ ############ */ @media screen and (max-width: 900px) {
	#bg4 {
		background: url(../img/bg_sp.jpg) no-repeat left top;
		background-size: cover;
	}
} /* ############ ↑↑↑ MEDIAQUERY ↑↑↑ ############ */


/* ////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ////////////////////////////////////////////////////////////////////////////////////////////////// */


/* ==================================================
OTHERS
================================================== */

.scrollto {/**/}

/* clrfix */
.clrfix::before, .clrfix::after { display: table; content: ''; }
.clrfix::after { clear: both; }

/* 画像コピーガード */
.protectImg,
.nobori li {
	position: relative;
}

.protectImg::after,
.nobori li::after {
	content: "";
	width: 100%;
	height: 100%;
	background: url(../img/blank.gif) repeat left top;
	background-size: 100% 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
}

.video{
  position:relative;
  max-width:100%;
  padding-top:56.25%;
}
.video iframe{
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
}

/* YouTube */
.movieBox {
	position: relative;
	margin: 80px auto 60px;
	width: calc(100% - 40px);
	max-width: 1000px;
	/*! background: #4c3768; */
	padding: 6px;
	border: 10px solid #4c3768;
	border-image: url(../img/pattern_noise_purple.png) 33% / 10px 10px repeat;
}

.movieBox .movie {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 0;
	padding: 0 0 56.25%; /*アスペクト比 16:9の場合の縦幅*/
	/* margin: 0 0 20px; */
}

.movieBox .movie iframe {
	position: absolute;
	top: -1px;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}
/**/


/*

<!-- #################################################################################################### -->
<!-- #################################################################################################### -->
<!-- #################################################################################################### -->
<!-- #################################################################################################### -->
<!-- #################################################################################################### -->
<!-- ##########　HTML コメントアウト記述ルール　######################################################### -->
<!-- #################################################################################################### -->
<!-- #################################################################################################### -->


<!-- ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼ -->
<!-- //////////////////////////////////////////////////////////////////// -->
<!-- ///// メインコンテンツエリア（編集エリア） ///////////////////////// -->
<!-- //////////////////////////////////////////////////////////////////// -->

<!-- //////////////////////////////////////////////////////////////////// -->
<!-- //////////////////////////////////////////////////////////////////// -->
<!-- ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ -->

<!-- ==================== 大ブロックエリア ==================== -->
<!-- ==================== //大ブロックエリア ==================== -->

<!-- ***** 中ブロックエリア *************** -->
<!-- ***** //中ブロックエリア *************** -->

<!-- #ID名 -->
<!-- //#ID名 -->

<!-- .class名 -->
<!-- //.class名 -->

<!-- [memo] -->
<!-- //[memo] -->


<!-- ※※※※※ INCLUDE - HEADER ※※※※※ -->
<!--#include virtual="/common/inc_header.html"-->
<!-- ※※※※※ //INCLUDE - HEADER ※※※※※ -->

<!-- ※※※※※ INCLUDE - FOOTER ※※※※※ -->
<!--#include virtual="/common/inc_footer.html"-->
<!-- ※※※※※ //INCLUDE - FOOTER ※※※※※ -->

<!--
[ id/class Name List ]
wrap > area > (group) > set > box

[ memmo ]
TOPページ → <body id="pageHome">
Newsページ(第2階層) → <body id="pageNews" class="dir2nd">
-->
*/


/* #################################################################################################### */
/* #################################################################################################### */
/* #################################################################################################### */
/* #################################################################################################### */
/* #################################################################################################### */
/* ##########　コメントアウト記述ルール　############################################################## */
/* #################################################################################################### */
/* #################################################################################################### */


/* //////////////////////////////////////////////////////////////////// */
/* ///// ブロック区切り /////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////// */

/* ==================================================
大見出し
================================================== */

/* 中見出し（他、説明など）
------------------------------ */

/* ### 小見出し 1 ### */
/* ### ----- ### */

/* 小見出し 2 */
/* ----- */