/*
Theme Name: Otogi Imperial Theme
*/

body{
	width: 100%;
	max-width: 1280px;
	padding-top: 0px;
	margin: auto;
	font-family:"メイリオ", "Meiryo", "ヒラギノ角ゴ Pro N W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 16px;
	line-height: 1.8;
	color: #333333;
}

/* Header */
div.HeaderContent{
	display: flow-root;
	padding: 10px 0px;
	margin-bottom: 0;
}

div.HeaderLogoArea{
	display: block;
	width: 35%;
	float: left;
}

div.HeaderLogoArea img{
	
}

div.NaviArea{
	display: block;
	width: 65%;
	float: right;
	text-align: right;
	padding: 5px 0 0 0;
}

ul.Navi{
	display: inline-block;
	list-style: none;
	margin: 0px;
}

ul.Navi li{
	display: inline-block;
	margin: 0px 10px 0px 0px
}

@media screen and (max-width: 649px) {
	ul.Navi{
	padding: 0;
}
}

form.searchform{
	display: table;
	float: right;
	margin: 0 10px 0 0;
}

form.searchform input{
	display: table-cell;
    height: 39px;
	padding: 0 0 0 10px;
    border: 1px solid #333 inset;
    border-radius: 5px;
	margin: 0 5px 0 0;
}

form.searchform button{
	display: table-cell;
    padding: 0;
    border: 0px;
    border-radius: 5px;
    background-color: #333;
    margin: 0;
    vertical-align: bottom;
	
}

@media screen and (max-width: 654px) {
	form.searchform input{ width: 110px; }
	div.HeaderLogoArea img{ width: 100%; }
}

/* Content */

img.BannerImage{
	width:100%;
}


ul.post-categories{
	display: inline-table;
    width: 98%;
    margin: 0;
    padding: 0;   
}

ul.post-categories li{
	display: inline-block;
	width: 45%;
	font-weight: normal;
	text-align: center;
	margin: 5px 0 0 5px;
	padding: 5px;
	border-radius: 20px;
	background-color: #FFF;
	box-shadow: 1px 1px 6px #555 inset;
}

ul.post-categories li:hover{
	box-shadow: 1px 1px 8px #555;
}

ul.post-categories a{
	display: block;
	font-size: 75%;
	color: #333;
	text-decoration: none;
}
	
@media screen and (max-width: 955px) {
	ul.post-categories li{
	width: 60%;
}
	
	ul.post-categories a{
	font-size: 100%;
	}	
	
}
@media screen and (max-width: 840px) {
	ul.post-categories a{
	font-size: 80%;
}	
}



section.ContentArea{
	display: table;
	width: 96%;
	max-width: 1080px;
	margin: 20px auto;
	padding: 10px 0PX;
}

header.IndexContentsHeader{
	display: block;
    height: 85px;
	padding: 15px;
	border-radius: 20px;
	background-color: #FFF;
	box-shadow: 1px 1px 10px #333;
	margin-bottom: 20px;
}

header.IndexContentsHeader:hover{
	
	box-shadow: 1px 1px 10px #333 inset;
}

div.IndexTitleArea{
	margin: auto;
}

h2.SearchTitle{
	width: 100%;
}

@media screen and (max-width: 510px) {
	h2.SearchTitle{
	font-size: 130%;
}
}

h2.IndexTitle{
	display: block;
	height: 85px;
	font-size: 120%;
	margin: 0;
}

h2.IndexTitle a{
	display: block;
	height: 85px;
	color:  #333;
	text-decoration: none;
}

@media screen and (max-width: 1280px) {
	h2.IndexTitle a{
	font-size: 80%;
}
}
@media screen and (max-width: 955px) {
	h2.IndexTitle a{
	font-size: 100%;
	}	
}
@media screen and (max-width: 840px) {
	h2.IndexTitle a{
	font-size: 80%;
}	
}

article.IndexContents{
	display: table-cell;
	float: left;
	width: 28%;
	margin: 0 1.1% 3% 0;
	padding: 15px;
	border-radius: 20px;
	background-color: #333;
	box-shadow: 1px 1px 10px #333;
	
}


@media screen and (max-width: 955px) {
	article.IndexContents{
		width: 45%;
	}	
}

@media screen and (max-width: 840px) {
	article.IndexContents{
		width: 44%;
	}	
}

@media screen and (max-width: 668px) {
	article.IndexContents{
		width: 93%;
	}	
}

@media screen and (max-width: 414px) {
	article.IndexContents{
		width: 91%;
	}	
}

span.IndexCategory{
	padding: 5px;
}

span.TagItem{
	display: inline-block;
	width: 45%;
	font-weight: normal;
	text-align: center;
	padding: 5px;
	border-radius: 20px;
	background-color: #FFF;
	box-shadow: 1px 1px 6px #555 inset;
}

span.TagItem:hover{
	box-shadow: 1px 1px 8px #555;
}

span.TagItem a{
	display: block;
	font-size: 80%;
	color: #333;
	text-decoration: none;
}


/* Single */

h1.SingleTitle{
	font-size: 150%;
    border-left: 15px solid #333;
    padding: 5px 10px;
    margin: 0;
}

h3.SingleSubTitle{
	font-size: 120%;
}

h3.SingleSubTitle::before {
  content: "■";
}

div.SingleContent{
	padding: 2%;
    font-size: 100%;
}

div.SingleCategoryArea{
	width: 50%;
}

div.SingleTagArea{
	width: 49%;
	font-size: 100%;
	margin: 1%;
}
/* Footer */
div.FooterContent{
	display: block;
	padding: 4% 0px;
}

div.FooterContent .FooterWord{
	width: 100%;
	text-align: center;
}

div.LogoArea{
	max-width: 1080px;
	text-align: center;
	margin: 0 auto;
}

div.LogoArea a{
	margin: 10px;
}

div.LogoArea a:hover{
	opacity: 0.6;
}

div.FooterPcAdArea{
	margin: 20px auto;
    text-align: center;
}

@media screen and (max-width: 728px) {
	div.FooterPcAdArea{
	display: none;
}	
}


/*SingleContentArea*/

section.SingleContentArea{
	display: table;
    width: 90%;
	max-width: 960px;
    margin: 0 auto;
    padding: 2%;
    box-shadow: 1px 1px 10px #333;
    border-radius: 20px;
}

@media screen and (max-width: 1080px) {
	section.SingleContentArea{
	width: 90%;
	min-width: 311px;
	padding: 3%;
}	
}

div.SingleSubArea{
	padding: 2%;
    border-radius: 14px;
    box-shadow: 1px 1px 10px #666;
    margin: 0 0 20px 0;
}

label.SingleSubLabel{
	display: block;
	width: 20%;
	text-align: center;
	font-weight: bold;
	padding: 5px;
	border-radius: 10px;
	box-shadow: 1px 1px 5px #666;
	margin: 1% 0;
}

label.SingleSubLabelHalf{
	display: block;
	width: 50%;
	text-align: center;
	font-weight: bold;
	padding: 5px;
	border-radius: 10px;
	box-shadow: 1px 1px 5px #666;
	margin: 20px 0;
}

dl.SingleSubData{}

dl.SingleSubData dt{
	font-weight: bold;
	text-decoration: underline;
	margin: 2% 0 0 1%;
}

dl.SingleSubData dd{
	margin: 1% 0 0 3%;
}

dl.SingleSubData dd.Topeks{
	margin: 0;
}

dl.SingleSubData dd.Topeks h5{
	
		}

@media screen and (max-width: 560px) {
	label.SingleSubLabel{
	width: 30%;
}
}

/* Menu */
section.PageContentArea{
	display: table;
	width: 96%;
	max-width: 1080px;
	margin: 20px auto;
	padding: 10px 0PX;
}

section.PageContentArea img{
	width: 100%;
}

@media screen and (max-width: 1042px) {
	section.PageContentArea{
		width: 90%;
	}
	
	div.AdArea{
	width: 90%;
	}
}

h1.NoDisplay{
	display: none;
}

div.OriginalItemArea{
	width: 30%;
	padding: 10px;
	float: left;
	text-align: center;
}

div.OriginalItemArea a{
	text-decoration: none;
	color: #333;
}

div.OriginalItemArea a:hover{
	opacity: 0.6;
}

div.OriginalItemAreaCenter{
	width: 30%;
	padding: 10px;
	float: left;
	text-align: center;
	margin: 0 2%;
}

div.OriginalItemAreaCenter a{
	text-decoration: none;
	color: #333;
}

div.OriginalItemAreaCenter a:hover{
	opacity: 0.6;
}

@media screen and (max-width: 1042px) {
	div.OriginalItemArea{
		width: 40%;
	}
	div.OriginalItemAreaCenter{
		width: 40%;
	}
}


div.MenuArea{
	display: block;
	width: 65%;
	padding: 15px;
	border-radius: 20px;
	background-color: #333;
	box-shadow: 1px 1px 10px #333;
	margin: 0 auto 30px;
}

div.MenuArea img{
	width: 100%;
}

a.MenuText{
	display: block;
    font-size: 120%;
	color: #333;
	text-decoration: none;
	text-align: center;
    padding: 15px;
    margin: 0 auto;
    border-radius: 20px;
	background-color: #FFF;
    box-shadow: 1px 1px 10px #333;
}

a.MenuText:hover{
	opacity: 0.6;
	text-shadow: 1px 1px 2px #666;
	box-shadow: 1px 1px 10px #333 inset;
}


/* Support */

div.SupportArea{
	width: 65%;
	margin: 0 auto;
}

dl.SupportFoam{
	width: 97%;
}

dl.SupportFoam dt{
	display: block;
	font-weight: bold;
	margin: 0 0 5px 0;
}
dl.SupportFoam dd{
	display: block;
	margin: 0px 0px 20px 0px;
}

dl.SupportFoam input{
	width: 97%;
    border-radius: 10px;
    padding: 10px 20px;
    border: 0px;
    box-shadow: 1px 1px 5px #666;
}

dl.SupportFoam dt.Submit input{
	width: 20%;
	font-weight: bold;
	color: #FFF;
	background-color: #333;
	border: 0px;
}

dl.SupportFoam textarea{
	width: 97%;
    border-radius: 10px;
    padding: 10px 20px;
    border: 0px;
    box-shadow: 1px 1px 5px #666;
}

div.SupportInfo{
	width: 94%;
    padding: 20px;
	border-radius: 20px;
	box-shadow: 1px 1px 5px #666;
}

/* Pagenation */

div.PaginationArea{
	display: block;
	font-size: 150%;
	text-align: center;
	clear: both;
}

div.PaginationArea a{
	color: #333;
	font-weight: bold;
	text-decoration: none;
}

.screen-reader-text{
  display:none;
}

/* AD SETTING */

div.AdArea{
	display: block;
	width: 65%;
	margin: 20px auto;
	}

div.AdArea img{
		width: 100%;
	}

div.AdPc{
	display: block;
	margin: 40px 0 auto;
}

div.AdMb{
	display: none;
}

div.AdMb590{
	display: none;
}

@media screen and (max-width: 757px) {
	div.AdPc{
		display: none;
	}
	div.AdMb{
	display: block;
	margin: 40px 0 auto;
}	
}

@media screen and (max-width: 622px) {
	
	div.AdMb{
	display: none;
}
	
	div.AdMb590{
	display: block;
	margin: 40px 0 auto;
}	
}
div.SingleAdArea{
	display: table;
	width: 100%;
	margin: 20px 0;
}

div.SingleAdArea div.Ad320x50{
	display: table-cell;
	float: left;
	width: 50%;
	min-width: 320px;
	text-align: center;
}
@media screen and (max-width: 757px) {
	div.SingleAdArea div.Ad320x50{
		width: 100%;
	}
}

div.SingleAdArea div.Square300x250{
	display: table-cell;
    float: left;
    width: 50%;
    min-width: 300px;
    text-align: center;
}
@media screen and (max-width: 712px) {
	div.SingleAdArea div.Square300x250{
		width: 100%;
	}
}

div.SingleAdArea div.Ad728x90{
	display: block;
	text-align: center;
}

div.SingleAdArea div.Ad468x60{
	display: none;
}

@media screen and (max-width: 767px) {
	div.SingleAdArea div.Ad728x90{
		display: none;
	}
	
	div.SingleAdArea div.Ad468x60{
	display: block;
	text-align: center;
	}
}

div.AdPcView728x90{
	display: block;
	text-align: center;
}

div.AdPcView516{
	display: block;
	text-align: center;
}

div.AdPcView468x60{
	display: none;
}

div.AdMbView{
	display: none;
}

@media screen and (max-width: 904px) {
	div.AdPcView728x90{
		display: none;
	}
	
	div.AdPcView468x60{
		display: block;
		text-align: center;
	}
}

@media screen and (max-width: 578px) {
	div.AdPcView468x60{
		display: none;
	}
	
	div.AdPcView516{
		display: none;
	}
	
	div.AdMbView{
		display: block;
		text-align: center;
	}
}

div.HeaderAdArea{
	display: table;
    width: 100%;
    max-width: 1015px;
    margin: 0 auto;
}
div.HeaderAdAreaCell468{
	display: table-cell;
	width: 49%;
	float: left;
	padding: 5px;
}

div.HeaderAdAreaCell728{
	display: none;
}

div.HeaderAdAreaCell320{
	display: none;
}

@media screen and (max-width: 999px) {
	div.HeaderAdAreaCell468{
		display: none;
	}
	
	div.HeaderAdAreaCell728{
		display: block;
		text-align: center;
	}
}

@media screen and (max-width: 739px) {
	div.HeaderAdAreaCell468{
		display: block;
		width: 98%;
		text-align: center;
	}
	
	div.HeaderAdAreaCell728{
		display: none;
	}
}

@media screen and (max-width: 485px) {
	div.HeaderAdAreaCell468{
		display: none;
	}
	
	div.HeaderAdAreaCell320{
		display: block;
		width: 98%;
		text-align: center;
	}
}

div.CategoryAdArea{
	display: table;
	width: 100%;
	max-width: 1080px;
}
div.CategoryAdAreaCell468{
	display: table-cell;
	width: 49%;
	float: left;
	padding: 5px;
}

div.CategoryAdAreaCell728{
	display: none;
}

div.CategoryAdAreaCell320{
	display: none;
}

@media screen and (max-width: 1042px) {
	div.CategoryAdAreaCell468{
		display: none;
	}
	
	div.CategoryAdAreaCell728{
		display: block;
		text-align: center;
	}
}

@media screen and (max-width: 791px) {
	div.CategoryAdAreaCell468{
		display: block;
		width: 98%;
		text-align: center;
	}
	
	div.CategoryAdAreaCell728{
		display: none;
	}
}

@media screen and (max-width: 510px) {
	div.CategoryAdAreaCell468{
		display: none;
	}
	
	div.CategoryAdAreaCell320{
		display: block;
		width: 98%;
		text-align: center;
	}
}

div.PickUpAd{
	width: 90%;
	max-width: 960px;
	padding: 2%;
    margin: 30px auto;
	border-radius: 20px;
	box-shadow: 1px 1px 8px #555; 
}

div.PickUpAd h6{
    font-size: 120%;
	padding: 15px;
    margin: 0 0 20px 0;
	border-radius: 20px;
	box-shadow: 1px 1px 8px #555;
}