/* ==========================================================================
   layout.cssここから
   ========================================================================== */

/*ページ全体
***********************************************************/
html,
body {
	overflow-x: hidden;
}

#wrapper {
}

.container {
	text-align: center;
	clear: both;
	background: url(/img/mahoroba-emaki/bg2.png) center -2200px repeat-y,
		url(/img/mahoroba-emaki/bg1.png);
}

h2 {
	padding: 100px 0 0;
	font-size: 64px;
	letter-spacing: 4px;
	color: #000;
	line-height: 1.1;
	font-family: "Pathway Gothic One";
}

h3 {
	padding: 10px 0 20px;
	letter-spacing: 4px;
	color: #a38f6d;
	font-size: 16px;
	font-weight: bold;
}

hr.midashiLine {
	border-style: solid;
	background: #a38f6d;
	border-width: 0px 0px 0px 0px;
	height: 3px;
	width: 80px;
	display: block;
}

hr + p {
	padding: 70px 0 0;
}

p {
	padding: 28px 0 0;
}

/*ヘッダー共通
***********************************************************/
#header {
	background: #7a7367;
	box-sizing: border-box;
	display: -webkit-flex;
	display: flex;
	justify-content: space-between;
	flex-wrap: no-wrap;
	align-items: stretch;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 70px;
	z-index: 10;
}

h1 {
}

h1 img {
	width: 265px;
}

#header ul {
}

#header ul li a {
	color: #fff;
	text-decoration: none;
}

#header ul li {
	padding: 5px 40px;
	border-left: 1px solid #968f83;
	display: inline-block;
	font-size: 16px;
	background: url(/img/mahoroba-emaki/obj_blank.png) no-repeat right 18px top
		0;
	background-size: 10px auto;
	font-family: "Pathway Gothic One";
}

#header ul li:first-child {
	font-size: 14px;
}

/*メイン
***********************************************************/
.masthead {
	position: relative;
}

.masthead-video {
	z-index: 0;
	width: 100%;
}

.play {
	margin: 0 auto;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	left: 0;
	right: 0;
	display: block;
	width: 107px;
	height: 107px;
	z-index: 2;
}

a.play:hover img {
	opacity: 0.8;
}

.skip {
	margin: 0 auto;
	position: absolute;
	bottom: 20px;
	right: 20px;
	width: 26px;
}

/*ABOUT
***********************************************************/
.about {
	background: url(/img/mahoroba-emaki/bg_about.png) center top -20px no-repeat;
	background-size: 130% auto;
}

.loopSliderWrap {
	top: 0;
	left: 0;
	height: 300px;
	overflow: hidden;
	position: absolute;
}

.loopSlider {
	margin: 100px auto 0;
	width: 100%;
	height: 300px;
	text-align: left;
	position: relative;
	overflow: hidden;
}

.loopSlider ul {
	height: 300px;
	float: left;
	overflow: hidden;
}

.loopSlider ul li {
	width: 300px;
	height: 300px;
	float: left;
	display: inline;
	overflow: hidden;
}

/*EMAKI
***********************************************************/
.emaki {
	padding: 0;
}

.makimono {
	margin: 20px 0 0 150px;
	padding: 0;
	width: calc(100% - 150px);
	height: 618px;
	display: block;
	box-sizing: border-box;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

#emaki_body {
	width: 100%;
	height: 618px;
	display: block;
	box-sizing: border-box;
	z-index: 10;
	border: none; /* 追加で指定 */
	display: block; /* 追加で指定 */
}

/*MAP
***********************************************************/
.map {
	padding: 0 0 140px;
}

.map h2 {
	padding: 60px 0 0;
}

.map iframe {
	margin: 90px auto 0;
	max-width: 1200px;
}

ul.mapList {
	margin: 20px auto 0;
	max-width: 1200px;
}

ul.mapList li {
	margin: 16px 0 0;
	padding: 10px 40px 10px 60px;
	display: inline-block;
}

ul.mapList li.mapList01 {
	background: url(/img/mahoroba-emaki/bg_pin01.png) no-repeat left center;
	background-size: 43px auto;
}

ul.mapList li.mapList02 {
	background: url(/img/mahoroba-emaki/bg_pin02.png) no-repeat left center;
	background-size: 43px auto;
}

ul.mapList li.mapList03 {
	background: url(/img/mahoroba-emaki/bg_pin03.png) no-repeat left center;
	background-size: 43px auto;
}

ul.mapList li.mapList04 {
	background: url(/img/mahoroba-emaki/bg_pin04.png) no-repeat left center;
	background-size: 43px auto;
}

ul.mapList li.mapList05 {
	background: url(/img/mahoroba-emaki/bg_pin05.png) no-repeat left center;
	background-size: 43px auto;
}

ul.mapList li.mapList06 {
	background: url(/img/mahoroba-emaki/bg_pin06.png) no-repeat left center;
	background-size: 43px auto;
}

ul.mapList li.mapList07 {
	background: url(/img/mahoroba-emaki/bg_pin07.png) no-repeat left center;
	background-size: 43px auto;
}

/*LINK
***********************************************************/
.link {
	padding: 0 0 120px;
	background: url(/img/mahoroba-emaki/bg_link.jpg) center no-repeat;
	background-size: 100% auto;
	position: relative;
}

.link h2 {
	color: #fff;
}

.linkBox {
	margin: 70px auto 0;
	max-width: 1224px;
	box-sizing: border-box;
	display: -webkit-flex;
	display: flex;
	justify-content: space-between;
	flex-wrap: no-wrap;
	align-items: stretch;
	flex-direction: row-reverse;
}

.fb {
	display: block;
	background: #000;
	width: 340px;
	height: 448px;
}

.linkBannerBox {
	max-width: 825px;
}

.linkBannerBoxInner {
	box-sizing: border-box;
	display: -webkit-flex;
	display: flex;
	justify-content: space-between;
	flex-wrap: no-wrap;
	align-items: stretch;
}

.linkBanner {
	padding: 0 0 30px;
	width: 255px;
	color: #fff;
	font-size: 14px;
}

.linkBanner:nth-child(2) {
	padding: 0 20px;
}

.linkBanner img {
	padding: 0 0 8px;
	display: block;
}

.linkBanner a {
	color: #fff;
}

.link a img:hover {
	opacity: 0.8;
}

.pagetop {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 176px;
}

/*footer
***********************************************************/
.footer {
	padding: 60px 0;
	background: #7a7367;
	color: #fff;
	text-align: center;
	font-size: 14px;
	letter-spacing: 3px;
}

/*ModalMenu
***********************************************************/
.modalMenu {
	position: fixed;
	display: table;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	min-width: 100%;
	min-height: 100%;
	background: rgba(255, 255, 255, 1);
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
	visibility: hidden;
	opacity: 0;
	z-index: 1000;
}

.modalMenu ul {
	display: table-cell;
	vertical-align: middle;
}

.modalMenu li {
	line-height: 140px;
	margin: 0 auto;
	text-align: center;
	font-size: 4vw;
	letter-spacing: 2px;
	color: #7a7367;
}

.modalMenu li a {
	padding: 0 5%;
	display: block;
	color: #7a7367;
	text-decoration: none;
}

/* 開閉用ボタンがクリックされた時のスタイル */
.open .modalMenu {
	cursor: url(https://www.town.takahata.yamagata.jp/section/takahata.top/common/images/cross.svg),
		auto;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
	visibility: visible;
	opacity: 1;
}

/*全体（1240px以下、スマホや小さいタブレット）
***********************************************************/
@media screen and (max-width: 1240px) {
	.link {
		padding: 0 0 120px;
		background: url(/img/mahoroba-emaki/bg_link.jpg) center no-repeat;
		background-size: auto 100%;
	}
	.linkBox {
		display: block;
	}
	.linkBannerBoxInner {
	}
	.linkBannerBox {
		margin: 0 auto;
		padding: 0 10%;
		text-align: center;
		max-width: 825px;
	}
	.linkBannerBoxInner {
	}
	.fb {
		margin: 10% auto 0;
		text-align: center;
	}
}

/*全体（899px以下、スマホや小さいタブレット）
***********************************************************/
@media screen and (max-width: 800px) {
	h2 {
		font-size: 14vw;
		letter-spacing: 4px;
		line-height: 1;
	}

	/*menu*/
	#header {
		position: absolute;
	}
	header ul {
		display: none;
	}
	.menu-btn {
		position: absolute;
		top: 0;
		right: 0;
		z-index: 10000;
	}
	#menu {
		position: absolute;
		width: 80px;
		height: 70px;
		top: 0;
		right: 0;
		z-index: 99999;
		background: #7a7367;
	}
	#menu a {
		padding: 18px 19px;
		width: 80px;
		height: 70px;
		display: block;
		box-sizing: border-box;
	}
	.menu-trigger,
	.menu-trigger span {
		display: inline-block;
		transition: all 0.4s;
		box-sizing: border-box;
	}
	.menu-trigger {
		position: relative;
		width: 42px;
		height: 34px;
		display: block;
	}
	.menu-trigger span {
		position: absolute;
		left: 0;
		width: 100%;
		height: 2px;
		background: #fff;
	}
	.menu-trigger span:nth-of-type(1) {
		top: 0;
	}
	.menu-trigger span:nth-of-type(2) {
		top: 15px;
	}
	.menu-trigger span:nth-of-type(3) {
		bottom: 0;
	}
	.menu-trigger.active span:nth-of-type(1) {
		-webkit-transform: translateY(15px) rotate(-45deg);
		transform: translateY(15px) rotate(-45deg);
	}
	.menu-trigger.active span:nth-of-type(2) {
		opacity: 0 !important;
	}
	.menu-trigger.active span:nth-of-type(3) {
		-webkit-transform: translateY(-15px) rotate(45deg);
		transform: translateY(-15px) rotate(45deg);
	}

	/*about*/
	.about p {
		padding: 28px 10% 0;
	}
	.loopSliderWrap {
		height: 140px;
	}
	.loopSlider {
		height: 140px;
	}
	.loopSlider ul {
		height: 140px;
	}
	.loopSlider ul li {
		width: 140px;
		height: 140px;
	}

	/*emaki*/
	.makimono {
		padding: 89px 0 0 0;
		background: url(/img/mahoroba-emaki/bg_emaki.png) top right no-repeat;
		background-size: auto 803px;
	}
	.emaki p {
		padding: 28px 10% 0;
	}
	.footer {
		padding: 10% 10%;
	}
	span.br:before {
		content: "\A";
		white-space: pre;
	}

	/*map*/
	ul.mapList {
		margin: 20px 10% 0;
		text-align: left;
	}
	ul.mapList li {
		margin: 16px 0 0;
		padding: 10px 0 10px 60px;
		box-sizing: border-box;
		width: 90%;
	}
}

/* ==========================================================================
   layout.cssここまで
   ========================================================================== */

/* ==========================================================================
   custom.cssここから
   ========================================================================== */
*:focus {
	outline: none !important;
}
.masthead iframe {
	position: absolute;
	top: 110px;
	right: 10px;
	width: 200px;
	height: 30px;
	z-index: 3000;
	opacity: 0.9;
}

.map {
	/* padding: 0 0 45px; */
	padding: 0;
}
ul.mapList {
	margin: 0 auto 80px;
	max-width: 1200px;
}
.map {
	/* margin: 80px 0 60px; */
	margin: 80px 0 0;
}

.spot {
	cursor: pointer;
}

a,
a:visited,
a:active,
a:hover,
a:focus {
	text-decoration: none;
}
.play {
	width: 400px;
	text-align: center;
}
.play p {
	margin: 0 auto;
	margin-bottom: 1em;
	font-size: 1.8em;
	font-weight: 600;
	color: #fff;
	/* text-shadow:2px 2px 6px #666; */
}
.play p span {
	margin-top: 1em;
	display: block;
}
.play img {
	width: 107px;
}
/* ==========================================================================
   custom.cssここまで
   ========================================================================== */

/* ==========================================================================
   emaki.cssここから
   ========================================================================== */
.makimono,
.makimono h2 {
	font-family: "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E",
		"ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif !important;
	overflow-y: hidden;
}

.makimono .box {
	top: 46px;
	height: 524px;
	line-height: 1.8;
	position: absolute;
}

/*INDEX*/

.makimono .index {
	top: 46px;
	width: 1100px;
	line-height: 1.8;
	position: absolute;
	left: 62px;
}

.makimono .indexBox {
	margin: 0 0 0 20px;
	width: 260px;
	height: 252px;
	border: solid #a38f6d 1px;
	float: left;
	box-sizing: border-box;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-o-border-radius: 4px;
	-ms-border-radius: 4px;
	position: relative;
}

.makimono .indexBox01 {
	margin: 0;
}

.makimono .indexBox05 {
	margin: 20px 0 0;
}

.makimono .indexBox06,
.makimono .indexBox07 {
	margin: 20px 0 0 20px;
}

.makimono .emakiNo {
	position: absolute;
	top: 0;
	left: 0;
	width: 64px;
	z-index: 1000;
}

.makimono .emakiIllust {
	width: 260px;
}

.makimono .indexBox a {
	text-decoration: none !important;
	color: #333;
	font-size: 16px;
}

.makimono .indexBox a:hover img {
	opacity: 1 !important;
}

.makimono .indexBox a p {
	margin: 0 14px;
	background: url(/img/mahoroba-emaki/emaki/bg_emaki_arrow.png) no-repeat
		right center;
	background-size: 18px auto;
}

/*contents*/
.makimono #wrap01 {
	left: 1240px;
	width: 2184px;
}

.makimono #wrap02 {
	left: 3504px;
	width: 1864px;
}

.makimono #wrap03 {
	left: 5448px;
	width: 1864px;
}

.makimono #wrap04 {
	left: 7392px;
	width: 1864px;
}

.makimono #wrap05 {
	left: 9336px;
	width: 1864px;
}

.makimono #wrap06 {
	left: 11280px;
	width: 2184px;
}

.makimono #wrap07 {
	left: 13544px;
	width: 2184px;
}

.makimono .box h2 {
	padding: 80px 10px 0;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	font-size: 32px;
	letter-spacing: 6px;
	float: left;
	line-height: 1.8;
}

.makimono #wrap01 h2 {
	background: url(/img/mahoroba-emaki/emaki/obj_emakititle01.png) center top
		no-repeat;
	background-size: 65px auto;
	color: #a80207;
}
.makimono #wrap01 table tr th {
	color: #a80207;
}
.makimono #wrap02 h2 {
	background: url(/img/mahoroba-emaki/emaki/obj_emakititle02.png) center top
		no-repeat;
	background-size: 65px auto;
	color: #7b427d;
}
.makimono #wrap02 table tr th {
	color: #7b427d;
}
.makimono #wrap03 h2 {
	background: url(/img/mahoroba-emaki/emaki/obj_emakititle03.png) center top
		no-repeat;
	background-size: 65px auto;
	color: #374f86;
}
.makimono #wrap03 table tr th {
	color: #374f86;
}
.makimono #wrap04 h2 {
	background: url(/img/mahoroba-emaki/emaki/obj_emakititle04.png) center top
		no-repeat;
	background-size: 65px auto;
	color: #3c7c80;
}
.makimono #wrap04 table tr th {
	color: #3c7c80;
}
.makimono #wrap05 h2 {
	background: url(/img/mahoroba-emaki/emaki/obj_emakititle05.png) center top
		no-repeat;
	background-size: 65px auto;
	color: #44613e;
}
.makimono #wrap05 table tr th {
	color: #44613e;
}
.makimono #wrap06 h2 {
	background: url(/img/mahoroba-emaki/emaki/obj_emakititle06.png) center top
		no-repeat;
	background-size: 65px auto;
	color: #797242;
}
.makimono #wrap06 table tr th {
	color: #797242;
}
.makimono #wrap07 h2 {
	background: url(/img/mahoroba-emaki/emaki/obj_emakititle07.png) center top
		no-repeat;
	background-size: 65px auto;
	color: #6e583f;
}
.makimono #wrap07 table tr th {
	color: #6e583f;
}

.makimono .box h2 span {
}

.makimono .box h2 span:last-child {
}

.makimono .illust {
	padding: 0 20px 0;
	float: left;
	width: 714px;
	z-index: 500;
}

.makimono .txtBox {
	padding: 0 0 0 20px;
	float: left;
	width: 300px;
	height: 524px;
}

.makimono .txtBox p {
	padding: 20px 0 0;
}
.makimono .txtBox p:first-child {
	padding: 0;
}

.makimono .detailBox {
	padding: 0 0 0 60px;
	width: 650px;
	float: left;
}

.makimono .detailBox table {
	margin: 0 0 50px;
	border-collapse: collapse;
	width: 650px;
	font-family: "Roboto", "游ゴシック", "Yu Gothic", YuGothic,
		"Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ",
		Meiryo, "ＭＳ ゴシック", sans-serif;
}

.makimono .detailBox table tr {
	border-bottom: 1px solid #d5c6b4;
	font-size: 16px;
	line-height: 1.4;
}

.makimono .detailBox table tr:first-child {
	border-top: 1px solid #d5c6b4;
}

.makimono .detailBox table tr th {
	padding: 10px 0 10px 14px;
	width: 60px;
}

.makimono .detailBox table tr td {
	padding: 10px 14px 10px 14px;
}

.makimono .detailMovie iframe {
	width: 323px;
	height: 182px;
	float: left;
}

.makimono p.backBt {
	float: right;
	color: #a38f6d;
	text-align: center;
	font-size: 14px;
}

.makimono p.backBt a {
	padding: 12px 0;
	width: 200px;
	color: #a38f6d;
	text-decoration: none;
	display: block;
	font-family: "Roboto", "游ゴシック", "Yu Gothic", YuGothic,
		"Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ",
		Meiryo, "ＭＳ ゴシック", sans-serif;
	background: url(/img/mahoroba-emaki/emaki/bg_back_arrow.png) no-repeat #000;
	background-size: 18px auto;
	background-position: left 13px center;

	color: #fff;
	background-image: url(/img/mahoroba-emaki/emaki/bg_back_arrow_w.png);
}

/*全体（899px以下、スマホや小さいタブレット）
***********************************************************/

@media screen and (max-width: 800px) {
	.makimono .index {
		left: 50px;
	}
}
/* ==========================================================================
   emaki.cssここまで
   ========================================================================== */

/* ==========================================================================
   paralax.cssここから
   ========================================================================== */
#emaki_body {
	width: 15800px;
	position: relative;
}

#emaki_containar {
	width: 1920px;
}

/* ------------------------------
   .scrollPanel
------------------------------ */
.makimono .scroll {
	top: 0;
	left: 0;
	text-align: left;
	position: absolute;
	/*position: fixed;*/
}

.makimono #wrap {
	overflow: hidden;
	top: 0px;
	width: 15800px;
	z-index: 300;
}

.makimono #horizon {
	width: 11000px;
	z-index: 200;
	opacity: 1;
}

.makimono #middle {
	width: 5000px;
	z-index: 100;
	opacity: 0.6;
}

.makimono .backBtn a {
	z-index: 500;
}
/* ==========================================================================
   paralax.cssここまで
   ========================================================================== */

/* ==========================================================================
   追記ここから
   ========================================================================== */
/* --------------------------------------------------------------------------
   ヘッダー
   -------------------------------------------------------------------------- */
#header {
	z-index: 11;
}
/* --------------------------------------------------------------------------
   ファーストビュー
   -------------------------------------------------------------------------- */
.masthead {
	margin-top: 70px;
}
.masthead a {
	text-decoration: none;
}
.video-container {
	width: 100%; /* 画面幅いっぱい */
}

.video-container iframe {
	width: 100%;
	aspect-ratio: 16 / 9; /* 560:315 と同じ比率 */
	height: auto;
	position: static;
	opacity: 1;
}

/* --------------------------------------------------------------------------
   見出し
   -------------------------------------------------------------------------- */
.site-index-mahoroba-emaki h2 {
	font-family: "Pathway Gothic One" !important;
}
.site-index-mahoroba-emaki h3 {
	color: #776850;
	font-family: "Roboto", "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif !important;
}

/* --------------------------------------------------------------------------
   絵巻
   -------------------------------------------------------------------------- */
.makimono .indexBox a p {
	padding: 0;
}
.site-index-mahoroba-emaki .makimono h2 {
	    font-family: "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif !important;
}

/* --------------------------------------------------------------------------
   MAP
   -------------------------------------------------------------------------- */
.map iframe {
	max-width: none;
}
.map-container {
	width: 100%; /* 親要素に合わせて横幅いっぱい */
	max-width: 1200px;
	margin: 0 auto;
	overflow: hidden;
	border-top: 2px solid #444;
}

.map-container iframe {
	width: 100%;
	aspect-ratio: 4 / 5; /* ここで比率を指定 */
	height: auto;
	margin-top: -70px;
}

/* --------------------------------------------------------------------------
   今見て欲しい”高畠”のリンク集
   -------------------------------------------------------------------------- */
.linkBannerBox {
	max-width: none;
	margin: 0 auto;
}





@media all and (min-width:801px){
	.makimono_sp, .sp_menu {
		display: none !important;
	}

}
@media all and (max-width:800px){
	.pc_menu ,.play, .skip, .makimono {
		display: none !important;
	}


	/* /sp/layout.css */
	/*ページ全体
	***********************************************************/
	html, body {
		overflow-x: hidden;
	}

	#wrapper {

	}

	.container {
		text-align: center;
		clear: both;
	}

	h2 {
		padding: 100px 0 0;
		font-size: 3em;
		letter-spacing: 4px;
		color: #000;
		line-height: 1.0;
		font-family: "Pathway Gothic One";
	}

	h3 {
		padding: 10px 0 20px;
		letter-spacing: 4px;
		color: #a38f6d;
		font-size: 16px;
		font-weight: bold;
	}

	hr.midashiLine {
		border-style: solid;
		background: #a38f6d;
		border-width: 0px 0px 0px 0px;
		height: 3px;
		width: 80px;
		display: block;
	}

	p {
		padding: 28px 0 0;
	}

	th, td {
		word-break: break-all;
	}

	/*ヘッダー共通
	***********************************************************/
	#header {
		background: #7a7367;
		box-sizing: border-box;
		display: -webkit-flex;
		display: flex;
		flex-wrap: no-wrap;
		align-items: stretch;
		align-items: center;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 70px;
		z-index: 100;
	}

	h1 {
		margin-right: 80px;
		max-width: 265px;
		height: 70px;
		background: #fff;
	}

	h1 img {
		width: 100%;
	}

	#header ul {
		display: none;
	}

	#header ul li a {
		color: #fff;
		text-decoration: none;
	}

	#header ul li {
		padding: 5px 40px;
		border-left: 1px solid #968f83;
		display: inline-block;
		font-size: 16px;
		background: url(/common/images/obj_blank.png) no-repeat right 18px top 0;
		background-size: 10px auto;
		font-family: "Pathway Gothic One";
	}

	#header ul li:first-child {
		font-size: 14px;
	}

	.menu-btn {
		position: fixed;
		top: 0;
		right: 0;
		z-index: 100000;
	}

	#menu {
		width: 80px;
		height: 70px;
		z-index: 99999;
		background: #7a7367;
	}

	#menu a {
		padding: 18px 19px;
		width: 80px;
		height: 70px;
		display: block;
		box-sizing: border-box;
	}

	.menu-trigger, .menu-trigger span {
		display: inline-block;
		transition: all .4s;
		box-sizing: border-box;
	}

	.menu-trigger {
		position: relative;
		width: 42px;
		height: 34px;
		display: block;
	}

	.menu-trigger span {
		position: absolute;
		left: 0;
		width: 100%;
		height: 2px;
		background: #fff;
	}

	.menu-trigger span:nth-of-type(1) {
		top: 0;
	}

	.menu-trigger span:nth-of-type(2) {
		top: 15px;
	}

	.menu-trigger span:nth-of-type(3) {
		bottom: 0;
	}

	.menu-trigger.active span:nth-of-type(1) {
		-webkit-transform: translateY(15px) rotate(-45deg);
		transform: translateY(15px) rotate(-45deg);
	}

	.menu-trigger.active span:nth-of-type(2) {
		opacity: 0 !important;
	}

	.menu-trigger.active span:nth-of-type(3) {
		-webkit-transform: translateY(-15px) rotate(45deg);
		transform: translateY(-15px) rotate(45deg);
	}

	/*メイン
	***********************************************************/
	.masthead-video {
		position: relative;
		padding-bottom: 56.25%;
		margin-top: 70px;
		height: 0;
		overflow: hidden;
	}

	.masthead-video video {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.masthead-video img {
		z-index: 1;
	}

	.play {
		margin: 0 auto;
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		z-index: 2;
		text-align: center;
	}

	.mvBt {
		margin: 40px auto 16px;
		width: 80px;
	}

	.skip {
		margin: 0 auto;
		position: absolute;
		bottom: 3%;
		right: 3%;
		width: 5%;
	}

	/*ABOUT
	***********************************************************/
	.about {
		clear: both;
	}
	.about h2 {
		margin: 50px 0 0;
		padding: 50px 0 0;
	}

	.about p {
		padding: 28px 10% 0;
	}

	.loopSliderWrap {
		top: 0;
		left: 0;
		height: 140px;
		overflow: hidden;
		position: absolute;
	}

	.loopSlider {
		margin: 100px auto 0;
		width: 100%;
		height: 140px;
		text-align: left;
		position: relative;
		overflow: hidden;
	}

	.loopSlider ul {
		height: 140px;
		float: left;
		overflow: hidden;
	}

	.loopSlider ul li {
		width: 140px;
		height: 140px;
		float: left;
		display: inline;
		overflow: hidden;
	}

	/*EMAKI
	***********************************************************/
	.emaki h2 {
		margin: 50px 0 0;
		padding: 50px 0 0;
	}
	.emaki p {
		padding: 28px 10% 0;
	}

	.makimono_sp {
		margin: 40px 0 0;
		width: 100%;
		display: block;
		box-sizing: border-box;
	}

	.makimonoInner {
		padding: 0 8% 0;
	}

	/*TAB*/
	.makimonoTab {
		padding: 0;
		overflow: hidden;
	}

	.makimonoTab li {
		margin: 10px 0 0;
		padding: 6px 0 6px 36px;
		width: 100%;
		border-radius: 4px;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		-o-border-radius: 4px;
		-ms-border-radius: 4px;
		color: #a38f6d;
		border: 2px solid #a38f6d;
		display: block;
		text-align: left;
		box-sizing: border-box;
		fon-size: 14px;
		letter-spacing: 0;
	}

	.makimonoTab li a {
		color: #a38f6d;
		text-decoration: none;
		display: block;
	}


	.makimonoTab li.makimonoSelect {
		background-color: #a38f6d;
		color: #fff;
	}

	.makimonoContent li {
		padding: 70px 0 20px;
	}

	.hide {
		display: none;
	}

	.makimonoContent h2 {
		margin: 14px 0 0;
		padding: 20px 0;
		font-family: "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif !important;
		font-size: 1.4em;
		letter-spacing: 1px;
	}

	img.makimonoIllust {
		padding: 14px 0;
	}

	.txtBox p {
		padding: 16px 0 0;
		font-family: "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝",
			"MS PMincho", "MS 明朝", serif;
	}

	.txtBox p:first-child {
		padding: 0;
	}
	
	/*
	.makimono_sp .detailMovie iframe {
		width: 260px;
		height: 146px;
	}
	*/

	.detailMovie {
		padding: 50px 0 0;
	}

	.makimonoContent table {
		margin: 50px 0 0;
		border-collapse: collapse;
		font-size: 14px;
	}

	.makimonoContent table tr {
		border-bottom: 1px solid #d5c6b4;
		font-size: 14px;
		line-height: 1.4;
	}

	.makimonoContent table tr:first-child {
		border-top: 1px solid #d5c6b4;
	}

	.makimonoContent table tr th {
		padding: 10px 0 10px 14px;
		width: 65px;
		text-align: center;
	}

	.makimonoContent table tr td {
		padding: 10px 14px 10px 14px;
		text-align: left;
	}

	p.backBt {
		margin: 0;
		padding: 0;
		color: #a38f6d;
		text-align: center;
	}

	p.backBt a {
		margin: 40px auto 0;
		padding: 12px 0;
		width: 200px;
		color: #fff;
		text-decoration: none;
		display: block;
		font-family: "Roboto", "游ゴシック", "Yu Gothic", YuGothic,
			"Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ",
			Meiryo, "ＭＳ ゴシック", sans-serif;
		background-size: 18px auto;
		background-position: left 13px center;
		background-color: #000;
	}

	/*wrap01*/
	#makimonoWrap01 h2 {
		border-top: 3px solid #a80207;
		border-bottom: 3px solid #a80207;
		color: #a80207;
	}

	/*wrap02*/
	#makimonoWrap02 h2 {
		border-top: 3px solid #7b427d;
		border-bottom: 3px solid #7b427d;
		color: #7b427d;
	}

	/*wrap03*/
	#makimonoWrap03 h2 {
		border-top: 3px solid #374f86;
		border-bottom: 3px solid #374f86;
		color: #374f86;
	}

	/*wrap04*/
	#makimonoWrap04 h2 {
		border-top: 3px solid #3c7c80;
		border-bottom: 3px solid #3c7c80;
		color: #3c7c80;
	}

	/*wrap05*/
	#makimonoWrap05 h2 {
		border-top: 3px solid #44613e;
		border-bottom: 3px solid #44613e;
		color: #44613e;
	}

	/*wrap06*/
	#makimonoWrap06 h2 {
		border-top: 3px solid #797242;
		border-bottom: 3px solid #797242;
		color: #797242;
	}

	/*wrap07*/
	#makimonoWrap07 h2 {
		border-top: 3px solid #6e583f;
		border-bottom: 3px solid #6e583f;
		color: #6e583f;
	}

	/*MAP
	***********************************************************/
	.map {
	}

	.map h2 {
		padding: 40px 0 0;
	}

	.map p {
		padding: 28px 10% 0;
	}

	.map iframe {
		margin: -70px auto 0;
		width: 100%;
		height: 500px;
	}
	.map-container iframe {
		aspect-ratio: 3 / 5;
	}

	ul.mapList {
		margin: 20px 10% 10%;
		text-align: left;
	}

	ul.mapList li {
		margin: 0;
		padding: 10px 0 10px 60px;
		box-sizing: border-box;
		width: 90%;
		display: inline-block;
	}

	/*LINK
	***********************************************************/
	.link {
		padding: 0 0 120px;
		background-size: auto 100%;
		position: relative;
	}

	.link h2 {
		color: #fff;
	}

	.linkBox {
		margin: 70px auto 0;
		max-width: 1224px;
		box-sizing: border-box;
		display: block;
	}

	.fb {
		margin: 10% auto 0;
		text-align: center;
		display: block;
		background: #000;
		width: 340px;
		height: 448px;
	}

	.linkBannerBox {
		margin: 0 auto;
		padding: 0 10%;
		text-align: center;
		max-width: 825px;
	}

	.linkBannerBoxInner {
		box-sizing: border-box;
		display: -webkit-flex;
		display: flex;
		justify-content: space-between;
		flex-wrap: no-wrap;
		align-items: stretch;
	}

	.linkBanner {
		padding: 0 0 30px;
		width: 255px;
		color: #fff;
		font-size: 14px;
	}

	.linkBanner:nth-child(2) {
		padding: 0 20px;
	}

	.linkBanner img {
		padding: 0 0 8px;
		display: block;
	}

	.linkBanner a {
		color: #fff;
	}

	.link a img:hover {
		opacity: 0.8;
	}

	.pagetop {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 176px;
	}

	.fb {
		max-width: 100%;
		margin: 0 auto;
	}

	/*footer
	***********************************************************/
	.footer {
		padding: 10% 10%;
		background: #7a7367;
		color: #fff;
		text-align: center;
		font-size: 14px;
		letter-spacing: 3px;
	}

	/*ModalMenu
	***********************************************************/
	.modalMenu {
		position: fixed;
		display: table;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		min-width: 100%;
		min-height: 100%;
		background: rgba(255, 255, 255, 1);
		-webkit-transition: all .5s;
		transition: all .5s;
		visibility: hidden;
		opacity: 0;
		z-index: 1000;
	}

	.modalMenu ul {
		display: table-cell;
		vertical-align: middle;
	}

	.modalMenu li {
		line-height: 80px;
		margin: 0 auto;
		text-align: center;
		font-size: 1.5em;
		letter-spacing: 2px;
		color: #7a7367;
	}

	.modalMenu li a {
		padding: 0 5%;
		display: block;
		color: #7a7367;
		text-decoration: none;
	}

	/* 開閉用ボタンがクリックされた時のスタイル */
	.open .modalMenu {
		cursor: url(../images/cross.svg), auto;
		-webkit-transition: all .5s;
		transition: all .5s;
		visibility: visible;
		opacity: 1;
	}
	/* FB like btn */
	iframe.sp_like {
		margin-top: 30px;
	}



}