body {
	font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}

#header {
  background-color: #4d4398;
  background-image: radial-gradient(closest-side, transparent 98%, #9e3d3f 99%),
radial-gradient(closest-side, transparent 98%, #9e3d3f 99%);
  background-size:44px 44px;
  background-position:0 0, 22px 22px;
}

#header h1 {
  font-family: 'Shippori Mincho B1', serif;
	padding-top: 10px;
	padding-bottom: 10px;
}

h1 a {
	color: #fff;
	font-size: 1.75em;
	font-weight: bold;
	text-decoration: none;
}

h1 a:hover {
	color: #fff;
}

#contents {
	padding-top: 30px;
}

#main {
	padding-right: 40px;
}

#main form {
	margin-top: 30px;
	margin-left: 70px;
	width: 500px;
}

form {
  box-sizing: border-box;
  position: relative;
  border: 1px solid #4d4d4d;
  display: block;
  overflow: hidden;
}

form input[type="text"]{
  border: none;
  height: 2.75em;
	padding-left: 10px;
	font-size: 1.0em;
}

form input[type="text"]:focus {
  outline: 0;
}

button {
  cursor: pointer;
  border: none;
  background-color:#4d4d4d;
  height: 100%;
  position: absolute;
  right: -2px;
}

button .material-icons {
  color: #fff;
  font-size: 2.0em;
  width: 1.5em;
}

#info {
  margin-top: 60px;
}

h2 {
	font-size: 1.25em;
	font-weight: bold;
	border-left: 15px solid #4d4398;
	padding-left: 5px;
}

#info h2 {
 font-size: 1.125em;
}

#koushin {
	overflow-y: scroll;
	font-size: 0.875em;
  margin-top: 10px;
	padding-right: 5px;
  height: 150px;
}

.date {
	color: #4d4398;
	font-weight: bold;
}

 h3 {
	color: #fff;
	font-weight: bold;
	font-size: 1.125em;
	background-color: #4d4d4d;
	padding-left: 0.6em;
	padding-top: 0.35em;
	padding-bottom: 0.35em;
}

#contents1 {
	margin-top: 60px;
}

table,th,td {
	border: none;
}

table {
	width: 640px;
}

th {
	color: #fff;
	font-size: 1.125em;
	font-weight: bold;
	background-color: #4d4398;
	border: 1px solid #4d4398;
	padding-left: 10px;
	padding-top: 6px;
	padding-bottom: 6px;
}

td {
	background-color: #f2f2f2;
	border: 1px solid #4d4398;
	line-height: 2.5em;
}

.blank {
	background-color: #fff;
}

td a {
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
}

td a:hover {
	color: #fff;
	font-weight: normal;
	background-color: #e68a8e;
}

#contents1 td {
	width: 50%;
}

#contents2 {
	margin-top: 60px;
	margin-bottom: 100px;
}

#sns {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 20px;
}

#twitter,
#facebook,
#hatena,
#pocket,
#line {
	width: 19%;
	background-color: #4d4d4d;
	text-align: center;
	font-size: 0.875em;
	color: #fff;
	text-decoration: none;
	padding: 10px 0 10px 0;
	border: solid 1px #4d4d4d;
}

#twitter:hover {
  background-color: #fff;
	border: solid 1px #1da1f2;
	color: #1da1f2;
	font-weight: normal;
}

#facebook:hover {
	background-color: #fff;
	border: solid 1px #3b5998;
	color: #3b5998;
	font-weight: normal;
}

#hatena:hover {
	background-color: #fff;
	border: solid 1px #2c6ebd;
	color: #2c6ebd;
	font-weight: normal;
}

#pocket:hover {
	background-color: #fff;
	border: solid 1px #ee4056;
	color: #ee4056;
	font-weight: normal;
}

#line:hover {
	background-color: #fff;
	border: solid 1px #06c755;
	color: #06c755;
	font-weight: normal;
}

#menu {
	margin-bottom: 40px;
}

#menu h3 {
	font-weight: bold;
	border-left: 15px solid #4d4398;
	margin-top: 35px;
	margin-bottom: 10px;
	padding-top: 0px;
	padding-left: 5px;
	padding-bottom: 0px;
	background-color: inherit;
	color: inherit;
	font-size: 1.0em;
}

ul {
	padding-left: 20px;
}

li {
	line-height: 2.5em;
}

#menu2 {
	display: flex;
	flex-wrap: wrap;
	width: 220px;
}

#menu2 li {
	width: 33.3%;
}

#promotion {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 25px;
	/*margin-bottom: 20px;*/
}

#cm {
	width: 15%;
	font-size: 0.75em;
	font-weight: bold;
	color: #9e3d3f;
	text-align: right;
}

#bluesky,
#linestamp {
	width: 40%;
	background-color: #4d4d4d;
	text-align: center;
	font-size: 0.65em;
	color: #fff;
	text-decoration: none;
	padding: 10px 0 10px 0;
	border: solid 1px #4d4d4d;
}

#bluesky:hover {
	background-color: #e5ffff;
	  border: solid 1px #00acf0;
	  color: #00acf0;
  }

  #linestamp:hover {
	background-color: #e5fff2;
	border: solid 1px #06c755;
	color: #06c755;
}

#affiliates {
	text-align: center;
	margin-top: 25px;
}

#to_top a {
	display: inline-block;
	position: fixed;
	right: 15px;
	bottom: 15px;
  width: 20px;
  height: 20px;
	padding: 0.4em 0.4em;
	text-decoration: none;
	font-size: 1.5em;
	font-weight: bold;
	background-color: #4d4d4d;
  transform: rotate(45deg);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.50);
}

#to_top a span {
  transform: rotate(-45deg);
  position: absolute;
  right: 3.5px;
  bottom: 3px;
	color: #fff;
  font-size: 1.5em;
}

#to_top a:hover {
	opacity: 0.8;
	box-shadow: 0 0 3px rgba(250, 250, 250, 0.50);
}

#to_top {
	text-align: right;
}

a:hover {
	color: #9e3d3f;
	font-weight: bold;
}

#footer_menu {
	margin-bottom: 15px;
}

#copyright {
	background-color: #4d4398;
	padding-top: 10px;
	padding-bottom: 10px;
}

#footer_menu ul {
  display: flex;
	flex-wrap: wrap;
	padding-left: 0px;
}

#footer_menu li {
	width: 25%;
}

#footer_menu a {
	color: #4d4398;
	font-size: 0.875em;
}

#footer_menu a:hover {
	color: #9e3d3f;
}

#copyright p {
	color: #fff;
	font-size: 0.875em;
}

#top h2 {
	margin-bottom: 15px;
}

sup {
	color: #4d4398;
	font-weight: bold;
}

em {
	color: #4d4398;
}

#memo {
	position: relative;
	background-color: #f2f2f2;
	margin-top: 30px;
	padding: 15px;
	border-bottom: 1px solid #dcdcdc;
}

#memo:after {
  content: "";
  position:absolute;
  top:0;
  right:0;
  width:0;
  height:0;
  border-style: solid;
	border-color: transparent #fff #dcdcdc transparent;
  border-width: 0 22px 22px 0;
}

#memo h3 {
  color: #4d4398;
	font-size: 1.0em;
	font-weight: bold;
	margin-bottom: 10px;
	background-color: inherit;
	padding: 0px;
}

#memo span {
	color: #fff;
	background-color: #4d4398;
	padding: 0.25em;
}

#sakuin {
	margin-top: 50px;
	margin-bottom: 50px;
}

label {
	position: relative;
	display: block;
	cursor: pointer;
	color: #fff;
	font-size: 1.125em;
	font-weight: bold;
	background-color: #4d4398;
	padding-left: 0.6em;
	padding-top: 0.35em;
	padding-bottom: 0.35em;
	overflow: hidden;
}

label:before {
  background-color: #bbbcde;
	content: '';
	display: block;
	position: absolute;
	bottom: -30px;
  left: 40px;
	width: 800px;
	height: 100px;
}

label:after {
	content: '';
  width: 8px;
  height: 8px;
  border: 0;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(135deg);
  position: absolute;
  top: 50%;
  right: 20px;
  margin-top: -6px;
}

label:hover {
	background-color: #9e3d3f;
}

label:hover:before {
    background-color: #4d4398;
}

.toggle:checked + label {
   background-color: #9e3d3f;
}

.toggle:checked + label:before {
   background-color: #4d4398;
}

.toggle:checked + label:after {
	transform: rotate(-45deg);
	top: 55%;
}

#sakuin input {
	display: none;
}

#sakuin ul {
	margin-top: 10px;
	display: flex;
	flex-wrap: wrap;
}

#sakuin li {
	width: 33.3%;
	height: 0;
	padding: 0;
	overflow: hidden;
	opacity: 0;
	transition: 0.5s;
	line-height: normal;
}

#label01:checked ~ #midashi01 li,
#label02:checked ~ #midashi02 li,
#label03:checked ~ #midashi03 li,
#label04:checked ~ #midashi04 li,
#label05:checked ~ #midashi05 li,
#label06:checked ~ #midashi06 li,
#label07:checked ~ #midashi07 li,
#label08:checked ~ #midashi08 li,
#label09:checked ~ #midashi09 li,
#label10:checked ~ #midashi10 li {
    padding: 10px 0;
    height: auto;
    opacity: 1;
}

#jinmei {
	margin-top: 50px;
	margin-bottom: 50px;
}

#jinmei h3 {
	display: block;
	position: relative;
	color: #fff;
	font-size: 1.125em;
	font-weight: bold;
	background-color: #4d4398;
	padding-left: 0.6em;
	padding-top: 0.35em;
	padding-bottom: 0.35em;
	overflow: hidden;
}

#jinmei h3:before {
  background-color: #bbbcde;
	content: '';
	display: block;
	position: absolute;
	bottom: -30px;
  left: 40px;
	width: 800px;
	height: 100px;
}

#jinmei ul {
	margin-top: 10px;
	display: flex;
	flex-wrap: wrap;
}

#jinmei li {
	width: 33.3%;
}

.breadcrumb {
	display: flex;
	font-size: 0.875em;
	margin-bottom: 20px;
}

.breadcrumb li {
	padding-right: 5px;
}

.breadcrumb li a:hover {
	text-decoration: underline #4d4d4d;
}

#yomi {
	font-size: 0.875em;
}

#tsusho li {
	color: #4d4398;
	font-size: 1.125em;
	font-weight: bold;
	line-height: 1.5em;
}

.yomi2 {
	color: #4d4398;
	font-size: 0.875em;
}

.comment {
	font-size: 0.875em;
	padding-left: 20px;
}

#sakuhin {
	margin-top: 50px;
	margin-bottom: 50px;
}

#sakuhin p {
	padding-left: 20px;
}

h4 {
	font-weight: bold;
	border-left: 15px solid #4d4398;
	border-bottom: 1px solid #4d4398;
	margin-top: 20px;
	margin-bottom: 10px;
	padding-left: 5px;
}

h5 {
	font-weight: bold;
	color: #9e3d3f;
	padding-left: 20px;
}

#new {
    color: #9e3d3f;
}

.details {
	border-left: solid 5px #e68a8e;
	border-bottom: solid 1px #dcdcdc;
	padding: 10px 10px 10px 0;
	margin: 0px 0 10px 20px;
	background-color: #f2f2f2;
}

.another_characters {
	color: #4d4398;
	font-weight: bold;
	position: relative;
	display: inline-block;
}

.another_characters::after {
	position: absolute;
	content: "";
	width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 8px;
  border-color: transparent transparent transparent #4d4398;
  position: absolute;
  top: 50%;
  left: 100px;
  margin-top: -7px;
}

#about {
	margin-bottom: 30px;
}

#about h3 {
	margin-top: 25px;
	padding-top: 0.15em;
	padding-bottom: 0.15em;
	margin-right: 0px;
}

#about h4 {
	margin-right: 0px;
}

#about p {
	margin-top: 10px;
	line-height: 1.75em;
}

#about #memo {
	margin-top: 10px;
	line-height: 1.75em;
	padding-top: 20px;
	margin-right: auto;
}

#about li {
	line-height: 1.75em;
	list-style-type: disc;
}

hr {
 margin: 20px 0;
}

#link {
	display: block;
	width: 250px;
	background-color: #f2f2f2;
	border: solid 1px #4d4398;
	border-radius: 3px;
	padding: 12px;
	margin: 10px 0 50px 0;
	text-decoration: none;
	text-align: center;
	transition: 0.3s;
	position: relative;
}

#link::before {
	content:"";
	position: absolute;
	top: 0px;
	left: -280px;
	height: 100%;
	width: 274px;
	background : #e68a8e;
	opacity: 0.3;
	transition: .4s;
}

#link:hover::before {
	left:0;
}

#link span {
	color: #4d4398;
	font-weight: bold;
  padding-right: 15px;
	position: relative;
}

#link span::after {
	content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  transform: rotate(45deg);
  border-top: 2px solid #4d4398;
  border-right: 2px solid #4d4398;
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  transition: 0.3s;
}

.img {
	width: 99.25%;
	height: 99.25%;
	border: 1px solid #dcdcdc;
}

.note ol {
	position: relative;
  margin:0 0 50px 0;
	padding:0
}

.note li {
  list-style-position:outside;
  margin:0;
  padding-left:1.5em
}

.count {
	position: absolute;
  left:0;
  margin:0;
	color: #9e3d3f;
	font-weight: bold;
	font-size: 1.125em;
}

.number {
	color: #9e3d3f;
	font-weight: bold;
	font-size: 1.125em;
}

/*result.php*/
dt a {
	color: #4d4398;
	font-weight: bold;
}

dd {
	padding-bottom: 5px;
}

.paging_up {
	padding-top: 30px;
	font-size: 0.875em;
}

.paging_bottom {
	padding-bottom: 30px;
	font-size: 0.875em;
}

.search_word {
	font-weight: bold;
}
/*result.phpココまで*/

p {
	line-height: 2.0em;
}

* {
	color: #4d4d4d;
}


@media screen and (max-width:640px) {
  h1 a {
		font-size: 1.75em;
	}

  #top p {
		margin-right: 0;
        }

	#main form {
		margin-left: auto;
		width: 100%;
	}

	#info {
		margin-top: 15%;
		margin-right: 0;
		padding-bottom: 0;
	}

	table {
		width: 100%;
	}

  ul {
		padding-left: 0px;
	}

	#about ul {
		padding-left: 20px;
	}

	h5 {
		padding-left: 0;
	}

	.details {
		margin-right: 0;
		margin-left: 0;
	}

	.details p {
		margin-left: 15px;
	}

	#menu {
    margin-top: 20%;
		margin-bottom: 10%;
	}

	#menu1, #menu2 {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
	}

	#menu1 li {
		width: 50%;
	}

	#menu2 li {
		width: 20%;
	}

	#footer_menu li {
		width: 50%;
	}

	#memo, #sakuin {
		margin-right: 0px;
	}

  #sakuin {
	  margin-bottom: 0px;
	}

	#sakuin li, #jinmei li {
		width: 50%;
	}

  #jinmei {
		margin-right: 0px;
	}

	h3, h4, #about {
		margin-right: 0px;
	}

	#sakuhin p {
		padding-left: 0px;
	}
}

@media screen and (min-width:641px) and (max-width:1024px) {
	#top p {
                margin-right: 0;
        }

  #main form {
		margin-left: auto;
		width: 100%;
	}

	table {
 		width: 100%;
 	}

  #menu {
		margin-top: 15%;
	}

	#menu1, #menu2 {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
	}

	#menu1 li {
		width: 33.3%;
	}

	#menu2 li {
		width: 20%;
	}

	#memo, #sakuin, .details {
		margin-right: 0;
	}

	#jinmei {
		margin-right: 0px;
	}

	#sakuhin h3, h4 {
		margin-right: 0px;
	}
}