@charset "utf-8";

/* Base Start */

* {
	box-sizing:border-box;
  margin:0;
  padding:0;
}

article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,textarea {
	display:block;
}

img {
  border:0;
  vertical-align:top;
}

em,address {
	font-style:normal;
}

body {
	color:#000;
	font-family:"Shippori Mincho B1",'小塚明朝 Pro','Kozuka Mincho Pro',"游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;
	font-size:100%;
	text-align:center;
	letter-spacing:1px;
}

.alphabet {
	font-family:"DM Serif Text",'小塚明朝 Pro','Kozuka Mincho Pro',"游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;
}

a {
	color:#09c;
	outline:none;
	text-decoration:none;
	transition:all .3s ease;
}

a:hover {
	text-decoration:underline;
}

#anc-wrapper {
	padding-bottom:100px;
	width:100%;
	overflow:hidden;
}

/* Base End */

/* Clearfix Start */

.clearfix::after {
	content:"";
	display:block;
	clear:both;
}

/* Clearfix End */

/* Header Start */

.upper {
	z-index:10;
	position:fixed;
	left:0;
	top:0;
	background-size:auto auto;
	background-color:rgba(153,0,0,.74);
	background-image:repeating-linear-gradient(0deg,transparent,transparent 1px,rgba(153,0,0,1) 1px,rgba(153,0,0,1) 3px);
	width:100%;
	transition:.5s ease;
}

#header {
	display:flex;
	align-items:center;
	padding:0 24px;
	width:100%;
	height:103px;
	transition:.5s ease;
}

#header b {
	display:inline-block;
	margin-right:20px;
	width:auto;
	height:46px;
}

#header strong {
	display:inline-block;
	margin-right:auto;
	width:auto;
	height:71px;
}

#header strong img,
#header b img {
	width:auto;
	height:100%;
}

#header em {
	display:block;
	margin-left:;
	width:200px;
	height:71px;
}

#header em a {
	display:flex;
	justify-content:center;
	align-items:center;
	background-color:#ccc;
	border-radius:8px;
	color:#000;
	width:100%;
	height:100%;
	line-height:16px;
	font-size:16px;
	text-decoration:none;
}

#header em a span {
	position:relative;
	display:inline-block;
	padding:0 20px;
}

#header em a span::before {
	position:absolute;
	left:0;
	top:calc(50% - 5px);
	display:block;
	border-top:1px solid #000;
	border-right:1px solid #000;
	width:10px;
	height:10px;
	transform:rotate(45deg);
	content:"";
}

#header em a:hover {
	opacity:.8;
}

#nav-toggle {
	z-index:10001;
	display:none;
	background-color:#fff;
	border:2px solid transparent;
	width:37px;
	height:37px;
	cursor:pointer;
}

#nav-toggle div {
	position:relative;
	width:27px;
	height:17px;
}

#nav-toggle div span {
	position:absolute;
	left:0;
	display:block;
	width:100%;
	height:3px;
	transition:.35s ease-in-out;
}

#nav-toggle div span:nth-child(1) {
	top:0;
	background-color:#f00;
}

#nav-toggle div span:nth-child(2) {
	top:7px;
	background-color:#0f0;
}

#nav-toggle div span:nth-child(3) {
	top:14px;
	background-color:#00f;
}

.sp-navi {
	z-index:10000;
	position:absolute;
	left:0;
	bottom:100%;
	display:block;
	padding:110px 0 50px 30px;
	background-color:rgba(255,255,255,.98);
	width:100%;
	height:auto;
	max-height:100vh;
	transition:.5s ease-in-out;
	line-height:100%;
	text-align:left;
	overflow-y:auto;
}

.sp-navi p {
	padding:0 30px 30px 0;
	font-size:20px;
}

.sp-navi p span {
	display:block;
	text-align:right;
}

.sp-navi ul {
	list-style-type:none;
}

.sp-navi ul li {
	padding:0 30px 30px 0;
}

.sp-navi ul li a {
	display:inline-block;
}

.sp-navi ul li a big {
	position:relative;
	display:inline-block;
	padding-left:20px;
	font-size:18px;
}

.sp-navi ul li a big::before {
	position:absolute;
	left:0;
	top:calc(50% - 4px);
	display:block;
	border-top:1px solid #000;
	border-right:1px solid #000;
	width:8px;
	height:8px;
	transform:rotate(45deg);
	content:"";
}

.sp-navi ul li a small {
	padding-left:5px;
	font-family:"DM Serif Text",'小塚明朝 Pro','Kozuka Mincho Pro',"游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;
	font-size:12px;
}

.sp-navi ul li>ul {
	display:flex;
	flex-flow:row wrap;
	margin-top:5px;
	padding:20px 0 0 20px;
	background-color:rgba(204,204,204,.2);
	border-radius:10px;
}

.sp-navi ul li>ul>li {
	padding:0 20px 20px 0;
	font-size:16px;
}

.sp-navi ul li>ul>li a span {
	position:relative;
	display:inline-block;
	padding-left:16px;
}

.sp-navi ul li>ul>li a span::before {
	position:absolute;
	left:0;
	top:calc(50% - 3px);
	display:block;
	border-top:1px solid #000;
	border-right:1px solid #000;
	width:6px;
	height:6px;
	transform:rotate(45deg);
	content:"";
}

.sp-navi a {
	color:#000;
	text-decoration:none;
}

.pc-navi {
	border-top:1px solid rgba(255,255,255,.2);
	width:100%;
	transition:.5s ease;
}

.pc-navi>ul {
	display:flex;
	list-style-type:none;
	width:100%;
	height:70px;
}

.pc-navi>ul>li {
	width:calc((100% - 4px) / 5);
	height:100%;
}

.pc-navi>ul>li+li {
	position:relative;
	margin-left:1px;
}

.pc-navi>ul>li+li::after {
	position:absolute;
	left:-1px;
	top:calc(50% - 22px);
	display:block;
	background-color:rgba(255,255,255,.2);
	width:1px;
	height:44px;
	content:"";
}

.pc-navi>ul>li>a {
	display:flex;
	justify-content:center;
	align-items:center;
	color:#fff;
	width:100%;
	height:100%;
	text-decoration:none;
}

.pc-navi>ul>li>a span {
	display:inline-block;
}

.pc-navi>ul>li>a span small {
	display:block;
	padding:0 0 4px 1px;
	font-family:"DM Serif Text",'小塚明朝 Pro','Kozuka Mincho Pro',"游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;
	font-size:14px;
	letter-spacing:1px;
}

.pc-navi>ul>li>a span big {
	display:block;
	font-size:16px;
}

.pc-navi>ul>li>a:hover span small,
.pc-navi>ul>li.current>a span small,
.pc-navi>ul>li.current>a:hover span small {
	font-size:15px;
	font-weight:800;
}

.pc-navi>ul>li>a:hover span big,
.pc-navi>ul>li.current>a span big,
.pc-navi>ul>li.current>a:hover span big {
	font-size:17px;
	font-weight:800;
}

.pull-down {
	position:relative;
}

.pull-down>ul {
	z-index:999;
	position:absolute;
	left:0;
	top:100%;
	display:none;
	padding:0;
	border-left:1px solid #ccc;
	width:100%;
	list-style-type:none;
	white-space:normal;
	text-align:center;
}

.pull-down>ul>li {
	height:0;
	opacity:0;
	overflow:hidden;
	width:100%;
	border-bottom:1px solid #ccc;
	border-right:1px solid #ccc;
}

.pull-down>ul.cs {
	width:calc(200% + 1px);
}

.pull-down>ul.cs>li {
	width:calc(100% / 4);
}

.pull-down>ul>li>a {
	display:block;
	padding:16px;
	background-color:#eee;
	color:#000;
	text-decoration:none;
	line-height:150%;
	font-size:15px;
}

.pull-down>ul>li>a:hover {
	color:#999;
}

.pull-down:hover>ul {
	display:flex;
	flex-flow:row wrap;
}

.pull-down:hover>ul>li {
	height:auto;
	opacity:1;
	overflow:visible;
}

.is-ani #header {
	height:80px;
}

.is-ani #header strong,
.is-ani #header em {
	height:60px;
}

.is-ani .pc-navi>ul {
	height:40px;
}

.is-ani .pc-navi>ul>li>a span small {
	display:none;
}

.is-ani .pc-navi>ul>li+li::after {
	top:calc(50% - 12px);
	height:24px;
}

@media only screen and (max-width : 1249px) {
	.upper {
		z-index:99999;
		position:fixed;
		left:0;
		top:0;
	}
	
	#header {
		padding:0 20px 0 15px;
		height:80px;
	}
	
	#header strong {
		height:60px;
	}
	
	#header em,
	#header b,
	.pc-navi {
		display:none;
	}
	
	#nav-toggle {
		display:flex;
		justify-content:center;
		align-items:center;
	}
	
	.open #nav-toggle {
		z-index:100000;
		border-color:#0f0;
	}
	
	.open #nav-toggle div span:nth-child(1) {
		top:7px;
		transform:rotate(315deg);
	}
	
	.open #nav-toggle div span:nth-child(2) {
		width:0;
		left:50%;
	}
	
	.open #nav-toggle div span:nth-child(3) {
		top:7px;
		transform:rotate(-315deg);
	}
	
	.open .sp-navi {
		transform:translateY(calc(100% - 1px));
	}
}

@media only screen and (max-width : 767px) {
	.sp-navi {
		padding:100px 0 30px 20px;
	}
	
	.sp-navi p,
	.sp-navi ul li {
		padding:0 20px 20px 0;
	}
}

.mv {
	display:flex;
	justify-content:center;
	align-items:center;
	margin-top:173px;
	background-color:rgba(204,204,204,.2);
	color:#000;
	width:100%;
	height:300px;
}

.mv h1 {
	padding:0 10px;
}

.mv h1 big {
	display:block;
	padding-left:3px;
	font-size:calc(.75em + .4vw);
	font-weight:400;
	letter-spacing:3px;
}

.mv h1 small {
	display:block;
	padding:10px 0 0 2px;
	font-size:calc(.5em + .2vw);
	font-weight:400;
	letter-spacing:2px;
}

.mv h1 big span,
.mv h1 small span {
	display:inline-block;
}

@media only screen and (max-width : 1249px) {
	.mv {
		margin-top:80px;
		height:240px;
	}
}

@media screen and (min-width : 768px) and (max-width : 1249px) {
	
}

@media only screen and (max-width : 767px) {
	
}

/* Header End */

/* Main Start */

#contents {
	padding:0 40px 40px 40px;
}

.top-contents {
	padding-top:40px !important;
}

.topic-path {
	padding:8px 0 11px;
	text-align:left;
}

.topic-path p {
	color:#000;
	list-style-type:none;
	line-height:150%;
	font-size:14px;
}

.topic-path p span a {
	color:#000;
	text-decoration:none;
}

.topic-path p span a:hover {
	text-decoration:underline;
}

.topic-path p span a::after {
	display:inline-block;
	margin:-3px 5px 0;
	content:">";
}

.container {
	display:flex;
}

main {
	flex-grow:1;
	text-align:left;
}

main h2 {
	padding:8px;
	background-size:auto auto;
	background-color:rgba(0,153,0,.74);
	background-image:repeating-linear-gradient(0deg,transparent,transparent 1px,rgba(0,153,0,1) 1px,rgba(0,153,0,1) 3px);
	border-radius:12px;
	color:#fff;
}

main h2 span {
	position:relative;
	display:block;
	padding:0 12px 0 20px;
}

main h2 span::before {
	position:absolute;
	left:0;
	top:0;
	display:block;
	background-color:#fff;
	border-radius:4px;
	width:8px;
	height:100%;
	content:"";
}

main h2 span big {
	display:block;
	line-height:1.3125em;
	font-size:32px;
	font-weight:800;
}

main h2 span small {
	display:block;
	line-height:1.625em;
	font-size:16px;
	font-weight:800;
}

main h2 span big>span,
main h2 span small>span {
	display:inline-block;
	padding:0;
}

main h2 span big>span::before,
main h2 span small>span::before {
	display:none;
}

main p {
	margin-bottom:-7px;
	padding-top:33px;
	line-height:187.5%;
	font-size:16px;
}

main p em {
	display:block;
	padding-left:1em;
	text-indent:-1em;
}

main p span {
	display:inline-block;
}

.main-ad {
	position:relative;
	margin-top:40px;
	padding:29px 10px 10px;
	border:1px solid rgba(204,204,204,.6);
}

.main-ad::before {
	position:absolute;
	left:0;
	top:0;
	padding:2px 10px 3px;
	background-color:rgba(204,204,204,.8);
	border-radius:0 0 6px 0;
	line-height:100%;
	font-size:14px;
	content:"Ad";
}

aside {
	flex-shrink:0;
	margin-left:40px;
	width:320px;
	text-align:left;
}

aside h2::after {
	display:block;
	background-size:auto auto;
	background-color:rgba(0,153,0,.74);
	background-image:repeating-linear-gradient(0deg,transparent,transparent 1px,rgba(0,153,0,1) 1px,rgba(0,153,0,1) 3px);
	border-radius:4px;
	height:8px;
	content:"";
}

aside h2 span {
	display:block;
	padding:0 8px 8px;
	line-height:1.625em;
	font-size:16px;
	font-weight:800;
}

.more {
	display:block;
}

.more a {
	position:relative;
	display:inline-block;
	padding-right:28px;
	line-height:14px;
	font-size:14px;
	letter-spacing:2px;
}

.more a::after {
	position:absolute;
	right:0;
	top:calc(50% - 13px);
	display:block;
	box-sizing:border-box;
	border-top:1px solid #000;
	border-right:1px solid #000;
	width:22px;
	height:22px;
	transform:rotate(45deg);
	content:"";
}

.main-h2 {
	line-height:0;
	font-size:0;
}

.main-h2 small {
	display:block;
	box-sizing:border-box;
	padding:0 0 6px 1px;
	color:#8e7f66;
	line-height:100%;
	font-family:'小塚ゴシック Pro','Kozuka Gothic Pro',"游ゴシック体",YuGothic,"YuGothic M","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS P Gothic",sans-serif;
	font-size:16px;
	letter-spacing:1px;
}

.main-h2 big {
	display:block;
	box-sizing:border-box;
	padding-left:2px;
	color:#333;
	line-height:196%;
	font-size:27px;
	letter-spacing:2px;
}

.detail-button {
	display:block;
}

.detail-button a {
	position:relative;
	display:-webkit-flex;
	display:flex;
	-webkit-justify-content:center;
	justify-content:center;
	-webkit-align-items:center;
	align-items:center;
	box-sizing:border-box;
	color:#3d3933;
	border:1px solid #3d3933;
	width:206px;
	height:42px;
	line-height:100%;
	font-size:13px;
	text-decoration:none;
}

.detail-button a:hover {
	background-color:#3d3933;
	color:#fff;
}

.detail-button a::after {
	position:absolute;
	right:12px;
	top:calc(50% - 5px);
	display:block;
	box-sizing:border-box;
	border-top:1px solid #000;
	border-right:1px solid #000;
	width:10px;
	height:10px;
	transform:rotate(45deg);
	content:"";
}

.detail-button a:hover::after {
	border-color:#fff;
}

.multi-dir-top {
	padding-top:68px;
}

.lnavi {
	margin-top:72px;	
	padding:16px 0;
	background-color:rgba(237,234,230,.35);
}

.lnavi-inner {
	line-height:200%;
	font-size:16px;
}

.lnavi-inner ul {
	display:-webkit-flex;
	display:flex;
	-webkit-flex-flow:row wrap;
	flex-flow:row wrap;
	-webkit-justify-content:center;
	justify-content:center;
	list-style-type:none;
}

.lnavi-inner ul li {
	padding:0 8px;
}

.lnavi-inner ul li:not(:last-child) {
	position:relative;
	padding:0 9px 0 8px;
}

.lnavi-inner ul li:not(:last-child)::after {
	position:absolute;
	right:0;
	top:calc(50% - 10px);
	display:block;
	background-color:#000;
	width:1px;
	height:20px;
	content:"";
}

.lnavi-inner ul li a {
	color:#000;
	text-decoration:none;
}

.lnavi-inner ul li a:hover,
.lnavi-inner ul li.current a,
.lnavi-inner ul li.current a:hover {
	color:#8d7f66;
}

@media only screen and (max-width : 1249px) {
	.container {
		flex-direction:column;
	}
	
	main,
	aside {
		width:100%;
	}
	
	aside {
		margin-left:0;
	}
	
	
}

@media screen and (min-width : 768px) and (max-width : 1249px) {
	#contents {
		padding:0 30px 30px 30px;
	}
	
	.top-contents {
		padding-top:30px !important;
	}
	
	main h2 span big {
		font-size:28px;
	}
	
	main h2 span small {
		font-size:15px;
	}
	
	main p {
		padding-top:23px;
	}
	
	.main-ad {
		margin-top:30px;
	}
	
	aside {
		padding-top:31px;
	}
	
	
}

@media only screen and (max-width : 767px) {
	#contents {
		padding:0 20px 20px 20px;
	}
	
	.top-contents {
		padding-top:20px !important;
	}
	
	main h2 span big {
		font-size:24px;
	}
	
	main h2 span small {
		font-size:14px;
	}
	
	main p {
		padding-top:13px;
	}
	
	.main-ad {
		margin-top:20px;
	}
	
	aside {
		padding-top:19px;
	}
	
	
}

/* Main End */

/* Footer Start */

#footer {
	padding-bottom:24px;
	background-size:auto auto;
	background-color:rgba(0,0,153,.74);
	background-image:repeating-linear-gradient(0deg,transparent,transparent 1px,rgba(0,0,153,1) 1px,rgba(0,0,153,1) 3px);
	color:#fff;
}

#footer div {
	position:relative;
	margin:0 auto;
	width:48px;
	height:30px;
}

#footer div p {
	position:absolute;
	left:0;
	bottom:0;
}

#footer ul {
	display:flex;
	flex-flow:row wrap;
	justify-content:center;
	padding:16px 0;
	list-style-type:none;
}

#footer ul li {
	padding:8px;
	line-height:100%;
	font-size:16px;
}

#footer ul li+li {
	position:relative;
	margin-left:1px;
}

#footer ul li+li::before {
	position:absolute;
	left:-1px;
	top:calc(50% - 7px);
	display:block;
	background-color:#fff;
	width:1px;
	height:14px;
	content:"";
}

#footer ul li a,
#footer small a {
	color:#fff;
	text-decoration:none;
}

#footer ul li a:hover,
#footer small a:hover {
	text-decoration:underline;
}

#footer small {
	display:block;
	line-height:100%;
	font-size:14px;
}

.page-bottom {
	position:fixed;
	left:0;
	bottom:0;
	padding:20px 20px 10px;
	background-color:rgba(204,204,204,.3);
	width:100%;
	height:100px;
}

.page-bottom::before {
	position:absolute;
	left:0;
	top:0;
	padding:2px 10px 3px;
	background-color:rgba(204,204,204,.8);
	border-radius:0 0 6px 0;
	line-height:100%;
	font-size:14px;
	content:"Ad";
}

@media only screen and (max-width : 1249px) {
	
}

@media screen and (min-width : 768px) and (max-width : 1249px) {
	#footer {
		padding-bottom:36px;
	}
	
	#footer ul {
		padding:18px 0;
	}
}

@media only screen and (max-width : 767px) {
	#footer {
		padding-bottom:24px;
	}
	
	#footer ul {
		padding:12px 0;
	}
}

/* Footer End */

/* Top Page (index.html) Start */




@media only screen and (max-width : 1249px) {
	
}

@media screen and (min-width : 768px) and (max-width : 1249px) {
	
}

@media only screen and (max-width : 767px) {
	
}

/* Top Page (index.html) End */

/* Parts Start */

.ind8col {
	display:flex;
	flex-flow:row wrap;
	padding-top:38px;
	list-style-type:none;
}

.ind8col li {
	margin:2px 1px 0;
	border-radius:10px;
	width:calc((100% - 16px) / 8);
	height:50px;
}

.ind8col li a {
	display:flex;
	justify-content:center;
	align-items:center;
	color:#000;
	width:100%;
	height:100%;
	line-height:100%;
	font-size:16px;
	font-weight:800;
	text-decoration:none;
	text-shadow:0px 0px 5px rgba(136,136,136,.9),0px 0px 5px rgba(136,136,136,.8),0px 0px 5px rgba(136,136,136,.7),0px 0px 10px rgba(136,136,136,.7);
	/*-webkit-text-stroke:1px #888;
	text-stroke:1px #888;*/
}

.ind8col li a:hover {
	text-shadow:0px 0px 5px rgba(255,255,255,.9),0px 0px 5px rgba(255,255,255,.8),0px 0px 5px rgba(255,255,255,.7),0px 0px 10px rgba(255,255,255,.7);
	/*-webkit-text-stroke:1px #fff;
	text-stroke:1px #fff;*/
}

.genre-top {
	display:flex;
	flex-flow:row wrap;
	margin-top:38px;
	list-style-type:none;
}

.genre-top li {
	position:relative;
	margin:2px  1px 0;
	padding-top:calc((100% - 8px) / 4);
	width:calc((100% - 8px) / 4);
	height:0;
}

.genre-top li a {
	position:absolute;
	left:0;
	top:0;
	display:flex;
	justify-content:center;
	align-items:center;
	color:#000;
	border:3px solid rgba(204,204,204,1);
	border-radius:10px;
	width:100% !important;
	height:100% !important;
	text-decoration:none;
}

.genre-top li a em {
	display:inline-block;
	line-height:150%;
	font-size:20px;
	text-align:center;
}

.genre-top li a em span {
	display:block;
}

.genre-top li a:hover {
	border-color:rgba(204,204,204,.4);
}











.middle-index {
	margin-top:40px;
	border-top:1px solid rgba(204,204,204,.8);
	text-align:left;
}

.middle-index details {
	border-bottom:1px solid rgba(204,204,204,.8);
	height:33px;
	transition:.5s;
}

.middle-index details summary {
	position:relative;
	display:flex;
	align-items:center;
	padding:0 27px 0 10px;
	width:100%;
	height:32px;
	line-height:100%;
	font-size:16px;
	list-style:none;
	cursor:pointer;
}

.middle-index details summary::-webkit-details-marker {
	display:none;
}

.middle-index details summary::after {
	position:absolute;
	right:10px;
	top:calc(50% - 5px);
	display:block;
	background:url(../common_images/arrow.png) no-repeat;
	background-size:17px 10px;
	width:17px;
	height:10px;
	transition:.5s;
	content:"";
}

.middle-index details[open] {
	height:1098px;
}

.middle-index details[open] summary::after,
.middle-index summary details[open] summary::after {
	transform:rotate(180deg);
}

.middle-index details ul {
	display:flex;
	flex-flow:row wrap;
	margin-top:10px;
	list-style-type:none;
}

.middle-index details ul li {
	margin:2px 1px 0;
	width:calc((100% - 14px) / 7);
	height:26px;
}

.middle-index details ul li a {
	display:flex;
	justify-content:center;
	align-items:center;
	color:#000;
	border:2px solid rgba(204,204,204,1);
	width:100%;
	height:100%;
	line-height:100%;
	font-size:14px;
	text-decoration:none;
	white-space:nowrap;
}

.middle-index details ul li a:hover {
	border-color:rgba(204,204,204,.4);
}

@media only screen and (max-width : 1249px) {
	
}

@media screen and (min-width : 768px) and (max-width : 1249px) {
	.ind8col {
		padding-top:28px;
	}
	
	.ind8col li a {
		font-size:15px;
	}
	
	.genre-top {
		margin-top:28px;
	}
	
	.genre-top li a em {
		font-size:17px;
	}
	
	.middle-index {
		margin-top:30px;
	}
	
	.middle-index details ul li {
		width:calc((100% - 10px) / 5);
	}
	
	.middle-index details[open] {
		height:1518px;
	}
	
	
}

@media only screen and (max-width : 767px) {
	.ind8col {
		padding-top:18px;
	}
	
	.ind8col li {
		width:calc((100% - 8px) / 4);
	}
	
	.ind8col li a {
		font-size:14px;
	}
	
	.genre-top {
		margin-top:18px;
	}
	
	.genre-top li {
		padding-top:calc((100% - 4px) / 2);
		width:calc((100% - 4px) / 2);
	}
	
	.genre-top li a em {
		font-size:15px;
	}
	
	.middle-index {
		margin-top:20px;
	}
	
	.middle-index details ul li {
		width:calc((100% - 4px) / 2);
	}
	
	.middle-index details[open] {
		height:3646px;
	}
	
	
}

/* Parts End */

/* Contact (about/contact/index.html) Start */

.form {
	padding-top:68px;
}

.form h3 {
	padding:116px 0 80px 0;
	color:#8c7f66;
	line-height:100%;
	font-size:34px;
}

.form p {
	padding:60px 0;
	line-height:200%;
	font-size:18px;
	text-align:left;
}

.form ul {
	display:-webkit-flex;
	display:flex;
	-webkit-flex-flow:row wrap;
	flex-flow:row wrap;
	-webkit-justify-content:space-between;
	justify-content:space-between;
	margin:0 auto;
	max-width:1000px;
	list-style-type:none;
	text-align:left;
}

.form ul li {
	padding-bottom:44px;
	width:465px;
}

.form ul li.long-field {
	width:100%;
}

.form ul li dl dt {
	padding-bottom:16px;
	line-height:19px;
	font-size:16px;
}

.form ul li dl dt::before {
	display:inline;
	content:"●";
}

.nece::after {
	display:inline-block;
	margin:-8px 0 0 18px;
	padding:4px 12px 2px;
	background-color:#f8c16f;
	color:#000;
	line-height:13px;
	font-family:'小塚ゴシック Pro','Kozuka Gothic Pro',"游ゴシック体",YuGothic,"YuGothic M","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS P Gothic",sans-serif;
	font-size:13px;
	content:"必須"
}

.form ul li dl dd {
	line-height:19px;
	font-size:16px;
}

.form ul li dl dd input[type="text"],
.form ul li dl dd textarea,
.form ul li dl dd select {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	padding:8px;
	background-color:transparent;
	border:3px solid #f8c16f;
	width:100%;
	font-family:'小塚明朝 Pro','Kozuka Mincho Pro',"游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;
	line-height:20px;
	font-size:16px;
}

label {
	vertical-align:middle;
	padding:0 0 0 12px;
	cursor:pointer;
}

.form ul li dl dd ol {
	list-style-type:none;
}

.form ul li dl dd ol>li {
	padding:0;
	width:auto;
	line-height:200%;
	font-size:17px;
}

.form ul li em {
	display:block;
}

.form ul li em button {
	position:relative;
	display:-webkit-flex;
	display:flex;
	-webkit-justify-content:center;
	justify-content:center;
	-webkit-align-items:center;
	align-items:center;
	box-sizing:border-box;
	margin:0 auto;
	border:0;
	background-color:#8f8067;
	border-radius:8px;
	color:#fff;
	width:240px;
	height:77px;
	line-height:21px;
	font-family:'小塚明朝 Pro','Kozuka Mincho Pro',"游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;
	font-size:21px;
	cursor:pointer;
}

.form ul li em button:hover {
	opacity:.8;
}

.form ul li em button::before {
	position:absolute;
	left:40px;
	top:calc(50% - 5px);
	display:none;
	box-sizing:border-box;
	border-top:1px solid #fff;
	border-right:1px solid #fff;
	width:10px;
	height:10px;
	transform:rotate(45deg);
	content:"";
}

.privacy {
	padding:0 0 160px 0;
}

.privacy h3 {
	padding:128px 0 96px 0;
	color:#8c7f66;
	line-height:100%;
	font-size:34px;
}

.privacy p {
	line-height:200%;
	font-size:18px;
	text-align:left;
}

.privacy h4 {
	padding:108px 0 64px 0;
	line-height:100%;
	font-size:27px;
}

@media only screen and (max-width : 1249px) {
	.form ul li {
		width:100%;
	}
}

@media screen and (min-width : 768px) and (max-width : 1249px) {
	.form {
		padding-top:51px;
	}
	
	.form h3 {
		padding:0 0 60px 0;
		font-size:28px;
	}
	
	.form p {
		padding:45px 0;
		font-size:17px;
	}
	
	.form ul li {
		padding-bottom:33px;
	}
	
	.form ul li dl dt {
		padding-bottom:12px;
	}
	
	.privacy {
		padding:135px 0 120px 0;
	}
	
	.privacy h3 {
		padding:96px 0 72px 0;
		font-size:28px;
	}
	
	.privacy p {
		font-size:17px;
	}
	
	.privacy h4 {
		padding:81px 0 48px 0;
		font-size:23px;
	}
}

@media only screen and (max-width : 767px) {
	.form {
		padding-top:34px;
	}
	
	.form h3 {
		padding:58px 0 40px 0;
		font-size:21px;
	}
	
	.form p {
		padding:30px 0;
		font-size:16px;
	}
	
	.form ul li {
		padding-bottom:33px;
	}
	
	.form ul li dl dt {
		padding-bottom:12px;
	}
	
	.privacy {
		padding:90px 0 80px 0;
	}
	
	.privacy h3 {
		padding:64px 0 48px 0;
		font-size:21px;
	}
	
	.privacy p {
		font-size:16px;
	}
	
	.privacy h4 {
		padding:54px 0 32px 0;
		font-size:18px;
	}
}

/* Contact (contact/index.html) End */