@charset "utf-8";

/*=====================================================
COMMON-LAYOUT
======================================================*/

div.container {
	position: relative;
	display: flex;
	justify-content: space-between;
}
div.container.detail {
	flex-direction: row-reverse;
}



.smenu_wrap {
	position: relative;
	width: 25%;
}
.smenu {
	position: absolute;
	top:0;
	left:0;
	width: 100%;
}
.smenu li {
	font-size: 16px;
	line-height: 1.3;
	background: url("../images/common/dot.png") bottom left repeat-x;
	/*border-bottom: dotted 1px #000;*/
}
.smenu li a {
	display: block;
	width: 100%;
	height: 100%;
	padding: 15px 10px;
	position: relative;
	overflow: hidden;
	/*transition:all 0.2s linear;*/
}
.smenu li a:before {
	content: "";
	display: block;
	position: absolute;
	top:0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 0;
	height: 100%;
	background: rgba(58,33,96,0.1);
	/*transform: translateX(-100%);*/
	transition:all 0.3s ease-in-out;
	z-index: -1;
}
/*.smenu li a.cr,.smenu li a:hover {
	color: #fff;
}*/
.smenu li.active a:before,.smenu li a.cr:before,.smenu li a:hover:before {
	width: 100%;
}



.contents {
	width: 71.875%;
	margin: 0 0 0 auto;
	overflow: hidden;
}
.mbtn{
	width: 100%;
}

.mbtn li.comb_right {
	margin-bottom: 35px;
	width: 100%;
	height: 36.8vw;
	max-height: 360px;
}
.mbtn li:last-child {
	margin-bottom: 0;
}
.mbtn li a {
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
}
.mbtn li a .bg img{
	position: absolute;
	display: block;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 100%;
	height: auto;
}
.mbtn li a .bg {
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	z-index: 1;
}
.mbtn li a .txt {
	position: absolute;
	top:60%;
	left:5%;
	width: 90%;
	transform: translateY(-50%);
	color: #fff;
	font-size: 36px;
	text-align: center;
	opacity: 0;
	z-index: 3;
	transition:0.3s all ease-in-out;
}
.mbtn li a .bg:before {
	content: "";
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.6);
	opacity: 0;
	transition:0.3s all ease-in-out;
	z-index: 2;
}
.mbtn li a:after {
	content: "";
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	border: solid 0px rgba(255,255,255,0.7);
	box-sizing: border-box;
	transition:0.3s all ease-in-out;
	z-index: 3;
}
.mbtn li a .bg img {
	transform: scale(1);
	transition:0.3s all ease-in-out;
}

.mbtn li.active a .txt,
.mbtn li a:hover .txt {
	top:50%;
	opacity: 1;
}
.mbtn li.active a .bg:before,
.mbtn li a:hover .bg:before {
	opacity: 1;
}
.mbtn li.active a:after,
.mbtn li a:hover:after {
	border: solid 8px rgba(255,255,255,0.7);
}
.mbtn li.active a .bg img,
.mbtn li a:hover .bg img {
	transform: scale(1.1);
}



/*詳細ページ*/

div#s_main_wrap {
	position: relative;
	max-width: 940px;
	margin:0 auto 50px;
}

ul.s_main {
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
}

ul.s_main li {
	top:0;
	left:0;
	right:0;
	bottom:0;
	width:100%;
	position: absolute;
	display: none;
	height: 100%;
	overflow: hidden;
	/*opacity:0;
	transition:1s all ease-in-out 0s;*/
}

ul.s_main li:first-child {
	position: relative;
}

ul.s_main li.active{
	/*opacity:1;*/
}
ul.s_main li a img{
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 100%;
	height: auto;
}

.slideprev{
	position: absolute;
	top:46%;
	left:10px;
	width:45px;
	cursor: pointer;
	z-index:9;
	opacity: 1;
	transition:0.3s all ease-in-out 0s;
}
.slidenext{
	position: absolute;
	top:46%;
	right: 10px;
	width:45px;
	cursor: pointer;
	z-index:9;
	opacity:1;
	transition:0.3s all ease-in-out 0s;
}

.slideprev:hover{
	opacity: 0.6;
}

.slidenext:hover{
	opacity: 0.6;
}

ul.s_thum {
	display: none;
}

h3 {
	font-size: 36px;
}
h3 span {
	font-size: 24px;
	display: block;
}

.dtl {
	border-top: dotted 1px #000;
}
.dtl li {
	border-bottom: dotted 1px #000;
	font-size: 16px;
	padding: 10px 0;
}

.kakomi {
	background: #fff;
	padding: 15px;
}


.no {
	max-width: 1280px;
	margin: 0 auto 50px;
	padding: 0 10px;
	box-sizing: content-box;
}
.no ul {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
.no ul li {
	width: 1.5em;
	height: 1.5em;
	margin: 5px;
	font-size: 18px;
	line-height: 1;
	
}

.no ul li a {
	display: block;
	width: 100%;
	height: 100%;
	background: #ccc;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #000;
	position: relative;
}

.no ul li a hr {
	background: #000;
}
.no ul li a hr:first-child {
	display: block;
	border: none;
	position: absolute;
	bottom:40%;
	left: 10%;
	width: 80%;
	height: 1px;
}
.no ul li.prev a hr:nth-child(2) {
	display: block;
	border: none;
	position: absolute;
	bottom:40%;
	left: 10%;
	width: 40%;
	height: 1px;
 	transform:rotate(-45deg);
	transform-origin:left bottom;
}
.no ul li.next a hr:nth-child(2) {
	display: block;
	border: none;
	position: absolute;
	bottom:40%;
	right: 10%;
	width: 40%;
	height: 1px;
 	transform:rotate(45deg);
	transform-origin:right bottom;
}


.no ul li a.ac,
.no ul li a:hover {
	background: #000;
	color: #fff;
}
.no ul li a.ac hr,
.no ul li a:hover hr {
	background: #fff;
}



@media screen and (max-width: 1280px){
	
	.smenu li {
		font-size: 1.25vw;
	}
	.mbtn li a .txt {
		font-size: 2.8vw;
	}
	
	
	

}


@media screen and (max-width: 767px){
	
	div.container {
		display: block;
	}
	.smenu_wrap {
		width: 100%;
	}
	.smenu {
		position: static;
		width: 100%;
		margin-top: 30px;
		border-top: dotted 1px #000;
	}
	.smenu li {
		width: 100%;

		font-size: 14px;
		line-height: 1.3;
		text-align: center;
		border-bottom: dotted 1px #000;
	}
	.smenu li a {
		padding: 5px 10px;
	}

	.contents {
		width: 100%;
		margin: 0 auto;
	}

	.mbtn li {
		margin-bottom: 20px;
	}
	.mbtn li a .txt {
		font-size: 4vw;
		top:50%;
		opacity: 1;
	}
	.mbtn li a .bg:before {
		opacity: 0.4;
	}
	.mbtn li a:after {
		border: solid 6px rgba(255,255,255,0.7);
	}
	.mbtn li a .bg img {
		transform: scale(1.1);
	}
	
	div#s_main_wrap {
		margin:0 auto 20px;
	}
	
	h3 {
		font-size: 5.5vw;
	}
	h3 span {
		font-size: 3.5vw;
	}
	
.dtl li {
	font-size: 13px;
}
	
	.slideprev{
		width:25px;
	}
	.slidenext{
		width:25px;
	}
	
}


@media screen and (max-width: 600px){

	
}