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

/*100 200 300 400 500 700 900*/
@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

@import url("btn.css");
@import url("nav.css");

html {
	margin-top: 59px;
}
body {
	font-family: 'Noto Sans Japanese', sans-serif;
	font-weight: 300;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 300;
}

p {
	line-height: 1.5em;
	padding: 0px;
	margin: 15px 0px;
}

strong {
	font-weight: 500;
}

a:hover img {
	opacity: 0.7;
}


/* carousel */
.carousel {
	background: url(../images/carouselBack.png) center 0 no-repeat;
	background-size: cover;
}
.carousel-item a:hover img {
	opacity: 1.0;
}


/*　footer　*/
footer {
	background-color: #343a40;
	color: #fff;
	font-size: 0.85em;
}
footer  .container {
	padding-top: 50px;
	padding-bottom: 50px;
	margin-top: 30px;
}

@media (max-width: 767.98px) {
	footer .contact {
	padding-left: 20px;
	}
}

footer .logo .logobox {
	margin-bottom: 15px;
}
footer .logo img {
	width: 160px;
}

footer .contents {
	text-align: right;
}
@media (max-width: 767.98px) {
	footer .contents {
	padding-right: 20px;
	}
}

footer .contents a:link {
	color: #fff;
}
footer .contents a:visited {
	color: #fff;
}

footer .contents .copy {
	font-size: 0.85em;
}


/* 各見出し */
.category {
}
@media (max-width: 575.98px) {
	.category {
		padding-left: 0px;
		padding-right: 0px;
		margin-right: 0px;
		margin-left: 0px;
	}
}

@media (max-width: 575.98px) {
	.category .row {
		padding: 0px;
		margin: 0px;
	}
	.category .category-in {
		padding: 0px;
	}
}

.category .category-in p {
	background-color: #FFEA00;
	padding: 5px 20px;
	font-size: 22px;
	font-weight: 500;
}


/* パンくずリスト */
.pan {
}
.pan .breadcrumb {
	margin-bottom: 0px;
	font-size: 0.75em;
	background-color: #fff;
}


/* 挨拶 */
#aisatsu {
	margin-top: 15px;
}

#aisatsu .image {
	padding-top: 15px;
	padding-bottom: 15px;
}

#aisatsu .message {
	
}



/* 作品一覧 */
#list {
}

#list .comicbox {
	margin-bottom: 15px;
}

#list .comiccolor {
	background-color: #F7F8F8;
}

#list .comicbox .comicimg {
	padding: 0px 0px 0px 15px;
}
@media (min-width: 576px) {
	#list .comicbox .comicimg {
	padding: 0px 0px 0px 15px;
	}
}
@media (min-width: 768px) {
	#list .comicbox .comicimg {
		padding: 20px 35px;
	}
}
@media (min-width: 992px) {
	#list .comicbox .comicimg {
		padding: 22px 37px;
	}
}
@media (min-width: 1200px) {
	#list .comicbox .comicimg {
		padding: 30px 45px;
	}
}

#list .comicbox .comicdata {
	padding: 15px 30px 15px 15px;
}
@media (min-width: 576px) {
	#list .comicbox .comicdata {
	padding: 15px 30px 15px 15px;
}
}
@media (min-width: 768px) {
	#list .comicbox .comicdata {
	padding: 0px 30px 15px;
}
}
@media (min-width: 992px) {
	#list .comicbox .comicdata {
	padding: 0px 30px 15px;
}
}
@media (min-width: 1200px) {
	#list .comicbox .comicdata {
	padding: 0px 35px 15px;
}
}

#list .comicbox .comictitle {
	color: #966B26;

}
#list .comicbox .comicauthor {
	font-size: 0.9em;

}

#list .comicbox .comictext {
  width: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
	font-size: 0.8em;
}


/* 電子書籍配信サイト */
#comicsite {
}

#comicsite .comicsitebox {
	background-color: #F7F8F8;
	padding: 15px;
}

#comicsite .comicsitebox .sitename {
	color: #966B26;
	font-weight: 500;
}
#comicsite .comicsitebox .sitetext {
	font-size: 0.85em;
}


/* 作品詳細 */
#detail {
	margin-top: 15px;
}

@media (max-width: 575.98px) {
	#detail .container {
		padding: 0px;
	}
}

@media (max-width: 575.98px) {
	#detail .row {
		padding: 0px;
		margin: 0px;
	}
}

@media (max-width: 575.98px) {
	#detail .comicimage {
		padding: 0px;
	}
}

@media (max-width: 575.98px) {
	#detail .comicdata {
		padding: 0px;
	}
}

#detail .comictitle {
	font-size: 24px;
	font-weight: 500;
}
@media (max-width: 575.98px) {
	#detail .comictitle {
		margin-top: 0px;
		font-size: 22px;
		background-color: #FFEA00;
		padding: 5px 20px;
	}
}

#detail .comictext {
	text-align: justify;
	font-size: 15px;
}
@media (max-width: 575.98px) {
	#detail .comictext {
		padding-right: 15px;
		padding-left: 15px;
	}
}

#detail .item {
	font-weight: 500;
	font-size: 15px;
}
@media (max-width: 575.98px) {
	#detail .item {
		background-color: #AACF52;
		color: #fff;
		padding: 5px 20px;
		font-size: 14px;
	}
}

#detail .itemtext {
	text-align: justify;
	font-size: 15px;
}
@media (max-width: 575.98px) {
	#detail .itemtext {
		padding-right: 15px;
		padding-left: 15px;
	}
}

#detail .itembanner {
}
@media (max-width: 575.98px) {
	#detail .itembanner {
		padding-right: 15px;
		padding-left: 15px;
	}
}

#detail .itembanner img.banner {
	border: 1px solid #dedede;
	margin-bottom: 15px;
}