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

/*header*/
input,select,textarea {
	width:100%;
	margin:0 auto;
	padding: 0 2px;
	box-sizing: border-box;
}
input,select {
	height:40px;
}

#header {
	width: 100%;
	height: 50px;
	z-index: 1001;
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.3);
}

#panel-btn{
	display: inline-block;
	float:left;
	position: relative;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: transparent;
	border: 1px #fff solid;
	box-sizing: border-box;
	margin: 5px;
	opacity: 0.75;
}
#panel-btn:hover {
	background: transparent;
}
#panel-btn-icon{
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 1px;
	margin: -1px 0 0 -9px;
	background: #fff;
	transition: .2s;
}
#panel-btn-icon:before, #panel-btn-icon:after{
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 18px;
	height: 1px;
	background: #fff;
	transition: .3s;
}
#panel-btn-icon:before{
	margin-top: -8px;
}
#panel-btn-icon:after{
	margin-top: 6px;
}
#panel-btn .close{
	background: transparent;
}
#panel-btn .close:before, #panel-btn .close:after{
	margin-top: 0;
}
#panel-btn .close:before{
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}
#panel-btn .close:after{
	transform: rotate(-135deg);
	-webkit-transform: rotate(-135deg);
}
#panel {
	display:none;
	background-color:#fff;
	height:280px;
	border-bottom: 2px #000 solid;
}

#header h1 a {
	background-position: left top;
	background-size:contain;
	background-image: url(images/title-white.png);
	height:50px;
	width:140px;
	left:55px;
	opacity: 0.75;
}
#gnav {
	margin-left:0;
	height:200px;
	overflow:hidden;
}
#gnav li {
	width: 25%;
}
#gnav li a {
	width:80px;
	margin: auto;
}
#gnav .visit a {
	background-image:url(http://www.koredeiinoda.net/wp-content/themes/koredeiinoda_template/images/header/2x-gnavhover.png);
	background-size:70px;
}
#gnav .presentbtn {
	background-image:url(http://www.koredeiinoda.net/wp-content/themes/koredeiinoda_template/images/header/2x-btn-present.png);
	background-size:70px;
}
#gnav .sheeehbtn {
	background-image:url(http://www.koredeiinoda.net/wp-content/themes/koredeiinoda_template/images/header/2x-btn-sheee.png);
	background-size:70px;
}
#gnav li.moretsubtn a {
	background-image:url(http://www.koredeiinoda.net/wp-content/themes/koredeiinoda_template/images/header/2x-moretsu-hover.png);
	background-size:70px;
}
#gnav .moretsubtn {
	background-image:url(http://www.koredeiinoda.net/wp-content/themes/koredeiinoda_template/images/header/2x-btn-moretsu.png);
	background-size:70px;
}
#gnav .anniv80thbtn {
	background-image:url(http://www.koredeiinoda.net/wp-content/themes/koredeiinoda_template/images/header/2x-btn-anniv80th.png);
	background-size:70px;
}
#gnav .manga {
	background-image:url(http://www.koredeiinoda.net/wp-content/themes/koredeiinoda_template/images/header/2x-btn-manga.png);
	background-size:70px;
}
#gnav .news {
	background-image:url(http://www.koredeiinoda.net/wp-content/themes/koredeiinoda_template/images/header/2x-btn-news.png);
	background-size:70px;
}
#gnav .game {
	background-image:url(http://www.koredeiinoda.net/wp-content/themes/koredeiinoda_template/images/header/2x-btn-game.png);
	background-size:70px;
}
#gnav .prof {
	background-image:url(http://www.koredeiinoda.net/wp-content/themes/koredeiinoda_template/images/header/2x-btn-profile.png);
	background-size:70px;
}
#gnav .kanren {
	background-image:url(http://www.koredeiinoda.net/wp-content/themes/koredeiinoda_template/images/header/2x-btn-kanren.png);
	background-size:70px;
}
#gnav .bakasen {
	background-image:url(http://www.koredeiinoda.net/wp-content/themes/koredeiinoda_template/images/header/2x-btn-bakasen.png);
	background-size:70px;
}
/*SLOTたまねぎたまちゃん*/
#gnav li.slottamachan a {
	background-image:url(http://www.koredeiinoda.net/wp-content/themes/koredeiinoda_template/images/header/2x-slottamachan-hover.png);
	background-size:70px;
}
#gnav .slottamachan {
	background-image:url(http://www.koredeiinoda.net/wp-content/themes/koredeiinoda_template/images/header/2x-btn-slottamachan.gif);
	background-size:70px;
}

/*検索フォーム*/
#sidebar form {
	margin:inherit;
}
#srch {
	position:relative;
	top:auto;
	left:auto;
	width:94%;
	height:40px;
	margin-top:20px;
	margin-bottom:20px;
	margin-left:auto;
	margin-right:auto;
}
#skeyword {
	width:87.5%;
	height: 40px;
	margin: 0;
	padding: 0 2px;
	box-sizing: border-box;
}
#btnsrch {
	position: absolute;
	right:0;
	left:auto;
	background-color: #b7b6b6;
	background-image:url(http://www.koredeiinoda.net/wp-content/themes/koredeiinoda_template/images/header/2x-btn-srch2.png);
	background-size:28px auto;
	background-position: 50% 50%;
	width: 12.5%;
	max-width: 40px;
	height: 40px;
}
#btnsrch:hover {
	background-position: 50% 50%;
}
#tbtn, #header .nav, #plist, #footer_r {
	display:none;
}
@media (min-width: 768px) {
	#panel,
	#gnav {
		height: auto;
	}
	#gnav {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	#gnav li {
		width: 100px;
	}
	#srch {
		width: 400px;
	}
}


/*footer*/
#footer {
	padding-top:0;
	margin-top:0;
	border-top: none;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 30px;
	z-index: 999;
	background-color: rgba(0,0,0,0.3);
}
#footer .nav {
	display: none;
}
#footer_l p {
	height: 30px;
	line-height: 30px;
}
#footer_l p a {
	color: #fff;
	opacity: 0.75;
}
#footer_l p a:hover {
    color: #fff;
	opacity: 1;
}
a.fujiopro {
	display:inline-block;
	padding-left: 15px;
	vertical-align: middle;
	background-position: center -22px;
}
.copy {
	color: #fff;
	opacity: 0.75;
}
#toTop {
	bottom:2em;
}

/*--------------------------------*/
/* bam-museum */
/*--------------------------------*/
body {
	overflow: hidden;
}

#maincontents {
	width: 100%;
}

#bam-museum {
	width: 100%;
	height: 100vh;
	background-color: #fff;
	box-sizing:border-box;
	margin:auto;
	position:relative;
}
#bam-museum.z1 { background-color: #003333; }
#bam-museum.z2 { background-color: #4d3704; }
#bam-museum.z3 { background-color: #591009; }
#bam-museum.z4 { background-color: #c4c2bb; }

/*PhotoSwipe*/
#ps-z1 .pswp__bg { background-color: #0e7a2d; }
#ps-z2 .pswp__bg { background-color: #9e7a02; }
#ps-z3 .pswp__bg { background-color: #591009; }
#ps-z4 .pswp__bg { background-color: #c4c2bb; }

/*leaflet*/
.leaflet-control-container .leaflet-top.leaflet-left {
	top: 50px;
}
.leaflet-bar a, .leaflet-bar a:hover {
	background-color: transparent;
	border-bottom: 1px solid rgba(0,0,0,0.3);
	color: white;
	opacity: 0.75;
}
.leaflet-bar a.leaflet-disabled {
	background-color: transparent;
	color: #bbb;
}
.leaflet-container .leaflet-control-attribution {
	background: transparent;
}

.bam-navbtn {
	border: 2px solid rgba(0,0,0,0.2);
	border-radius: 4px;
	background-color: #fff;
	display: block;
	width: 40px;
	height: 40px;
	position: fixed;
	z-index: 1001;
}
.bam-navbtn:hover {
	background-color: #eee;
}
.bam-navbtn-inner {
	position: relative;
	width: 40px;
	height: 40px;
}
.backbtn.bam-navbtn,
.closebtn.bam-navbtn {
	top: 3px;
    right: 3px;
    border: none;
    background-color: transparent;
}
.prevbtn.bam-navbtn,
.nextbtn.bam-navbtn {
	top: 50%;
	margin-top: -20px;
	border: none;
	background-color: transparent;
	border-radius: 50%;
}
.prevbtn {
	left: 10px;
}
.nextbtn {
	right: 10px;
}
.prevbtn, .nextbtn {
	opacity: 0.6;
}
.prevbtn:hover, .nextbtn:hover {
	opacity: 1;
}
.backbtn .bam-navbtn-inner::after,
.prevbtn .bam-navbtn-inner::after,
.nextbtn .bam-navbtn-inner::after {
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	position: absolute;
	top: 12px;
	left: 12px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(45deg);
	opacity: 0.75;
}
.prevbtn .bam-navbtn-inner::after,
.nextbtn .bam-navbtn-inner::after {
	width: 24px;
	height: 24px;
	top: 6px;
	left: 8px;
	border-left: 2px solid #000;
	border-bottom: 2px solid #000;
}
.nextbtn .bam-navbtn-inner::after {
	transform: rotate(225deg);
}
.closebtn .bam-navbtn-inner::before,
.closebtn .bam-navbtn-inner::after {
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 64%;
	height: 8%;
	margin: -6% 0 0 -32%;
	background: #000;
}
.closebtn .bam-navbtn-inner::before {
	transform: rotate(-45deg);
}
.closebtn .bam-navbtn-inner::after {
	transform: rotate(45deg);
}
.caption-panel {
	position: fixed;
	z-index: 1000;
	bottom: 60px;
	right: 30px;
	text-shadow: 1px 1px 1px #fff;
}
.cap-title {
	font-size: 18px;
	text-align: center;
	margin-bottom: 0.25em;
	font-weight: bold;
}
.cap-text {
	font-size: 15px;
	text-align: center;
}
#js-cap {
	padding: 1em;
	background-color: rgba(255,255,255,0.9);
	border: 1px #ccc solid;
	bottom: -60px;
	opacity: 0;
	transition: 0.4s;
}
#js-cap.active {
	opacity: 1;
	bottom: 60px;
}

@media (max-width: 767px) {
	#tbtn, #header .nav, #plist, #footer_r {
		display: none;
	}
	#footer {
		position: relative;
	}
	#bam-museum {
		height: 100vh;
		width: 100vw;
	}
	.leaflet-container .leaflet-control-zoom {
		margin-left: 4px;
		margin-top: 4px;
	}
	.leaflet-bar-part {
		border-bottom:none;
	}
	.bam-navbtn {
		border: 2px solid rgba(0,0,0,0.2);
		border-radius: 2px;
		width: 30px;
		height: 30px;
	}
	.backbtn.bam-navbtn,
	.closebtn.bam-navbtn {
		top: 4px;
		right: 4px;
	}
	.prevbtn {
		left: 4px;
	}
	.nextbtn {
		right: 6px;
	}
	.prevbtn, .nextbtn {
		opacity: 0.3;
		width: 50px;
		height: 50px;
	}
	.prevbtn .bam-navbtn,
	.nextbtn .bam-navbtn {
		margin-top: -25px;
	}
	.prevbtn .bam-navbtn-inner,
	.nextbtn .bam-navbtn-inner {
		width: 50px;
		height: 50px;
	}
	.prevbtn .bam-navbtn-inner::after,
	.nextbtn .bam-navbtn-inner::after {
		width: 18px;
		height: 18px;
		top: 15px;
		left: 26px;
	}
	.prevbtn .bam-navbtn-inner::after {
		left: 4px;
	}
	.backbtn .bam-navbtn-inner::after {
		width: 10px;
		height: 10px;
		top: 14px;
		left: 7px;
		border-left: 2px solid #fff;
		border-bottom: 2px solid #fff;
		opacity: 0.75;
	}
	.closebtn .bam-navbtn-inner::before, .closebtn .bam-navbtn-inner::after {
		width: 50%;
		height: 8%;
		margin: -14% 0 0 -37%;
	}
	.caption-panel {
		bottom: 16px;
		right: 0;
		width: 100vw;
		padding: 0 1em;
		box-sizing: border-box;
	}
	.cap-title {
		font-size: 14px;
		text-align: left;
		margin-bottom: 0.25em;
	}
	.cap-text {
		font-size: 14px;
		text-align: left;
	}
	#js-cap.active {
		display: none;
	}

}
/** 
 * iPad with portrait orientation.
 */
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait){
	#bam-museum {
		width:100%;
		height: 820px; /*1024x80%*/
	}
}

/** 
 * iPad with landscape orientation.
 */
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape){
	#bam-museum {
		width:100%;
		height: 614px; /*768x80%*/
	}
}

/**
 * iPhone 5
 * You can also target devices with aspect ratio.
 */
@media screen and (device-aspect-ratio: 40/71) {
	#bam-museum {
		width:100%;
		height: 400px; /*500x80%*/
	}
}

/*for link of character kensaku*/
.mypopup .leaflet-popup-content-wrapper {
	width:32px;
	height:22px;
	background:url(images/chara/mypopup.png) 0 0 no-repeat;
	box-shadow: none;
	padding: 0;
	-webkit-border-radius:0;
	border-radius:0;
	text-indent:-9999px;
}
.mypopup-r .leaflet-popup-content-wrapper {
	width:32px;
	height:22px;
	background:url(images/chara/mypopup-r.png) 0 0 no-repeat;
	box-shadow: none;
	padding: 0;
	-webkit-border-radius:0;
	border-radius:0;
	text-indent:-9999px;
}
.mypopup-t .leaflet-popup-content-wrapper {
	width:22px;
	height:32px;
	background:url(images/chara/mypopup-t.png) 0 0 no-repeat;
	box-shadow: none;
	padding: 0;
	-webkit-border-radius:0;
	border-radius:0;
	text-indent:-9999px;
}
.mypopup .leaflet-popup-tip-container,
.mypopup-r .leaflet-popup-tip-container,
.mypopup-t .leaflet-popup-tip-container {
	display:none;
}

/*for sheee contest winner*/
.sheee .leaflet-popup-content-wrapper {
	width:160px;
	height:45px;
}
.sh1 .leaflet-popup-content-wrapper { background-image: url(images/sheeepopup_yurip.png); }
.sh2 .leaflet-popup-content-wrapper { background-image: url(images/sheeepopup_mgmg.png); }
.sh3 .leaflet-popup-content-wrapper { background-image: url(images/sheeepopup_dora.png); }