@charset "UTF-8";

body{
	font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	font-size: 12px;
	line-height: 1.75;
}

/* clearfix
---------------------------------------------------- */
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.clearfix {
	min-height: 1px;
}
* html .clearfix {
	height: 1px;
	/*\*//*/
	height: auto;
	overflow: hidden;
	/**/
}

/* リンク
---------------------------------------------------- */
a{
	text-decoration: none;
	/* firefox用 */
	overflow: hidden;
	outline: none;
}
a:hover{
	text-decoration: none;
}

/* 共通
---------------------------------------------------- */
img{
	vertical-align: bottom;
}

#genre-select-sp,
#search #sp-banner{
	display: none;
}

.mb10{
	margin-bottom: 10px;
}

.mb15{
	margin-bottom: 15px;
}

.mb20{
	margin-bottom: 20px;
}

.mb25{
	margin-bottom: 25px;
}

.mb30{
	margin-bottom: 30px;
}

.mb35{
	margin-bottom: 35px;
}

.mb40{
	margin-bottom: 40px;
}

.mb50{
	margin-bottom: 50px;
}

.wrap{
	width: 950px;
	margin: 0 auto;
}

.breadcrumb{
	display: flex;
	font-size: 11px;
	margin-top: 15px;
	margin-bottom: 30px;
}

.breadcrumb li:before{
	content: '>';
	margin: 0 5px;
	color: #8AC8C0;
	font-size: 10px;
}

.breadcrumb li:first-child:before{
	content: none;
}

.breadcrumb a{
	color: #000;
}

.title{
	width: 876px;
	height: 104px;
	text-align: center;
	box-sizing: border-box;
	padding: 10px 0 0 0;
	margin: 0 auto 85px auto;
	font-size: 27px;
	font-family: "トーキング", Talking;
	font-weight: normal;
	background: url(../img/title-bg.png) no-repeat;
}

.title span{
	margin: 0 0 0 -77px;
}

/* ヘッダー
---------------------------------------------------- */
header{
	background: #ECF0F6;
	min-width: 960px;
}

header .logo img{
	width: 202px;
	height: auto;
}

header div.wrap{
	display: flex;
	justify-content: space-between;
}

header div.wrap ul{
	display: flex;
}

header div.wrap li{
	margin: 0 0 0 12px;
}

header div.wrap li:first-child{
	margin-left: 0;
}

header .logo,
header div.wrap li{
	line-height: 125px;
}

header img{
	vertical-align: middle;
}

/* TOP
---------------------------------------------------- */
#top-map{
	position: relative;
	height: 550px;
	min-width: 960px;
}

#top-map h1{
	position: absolute;
	top: 26px;
	left: 50%;
	margin: 0 0 0 -475px;
	z-index: 1;
	display: inline;
}

#top-map p{
	margin: 0 0 10px 0;
}

#top-google-map{
	position: absolute;
	width: 100%;
	height: 550px;
}

#genre-select{
	position: relative;
	margin: -25px auto 45px auto;
	background: #8AC8C0;
	border-radius: 10px;
}

#genre-select:before{
	content: url(../img/genre-bg1.png);
	position: absolute;
	top: -18px;
	left: 22px;
	width: 908px;
	height: 32px;
}

#genre-select:after{
	content: url(../img/genre-bg2.png);
	position: absolute;
	bottom: 0;
	left: 54px;
	width: 155px;
	height: 140px;
}

#genre-select p{
	margin: 0 0 5px 0;
}

#genre-select .inner{
	padding: 10px 0 0 268px;
}

#genre-select ul{
	display: flex;
	flex-wrap: wrap;
	width: 540px;
	font-weight: bold;
}

#genre-select li{
	width: 25%;
	margin: 0 0 19px 0;
}

#genre-select label{
	position: relative;
	font-size: 14px;
}

#genre-select label img{
	vertical-align: middle;
	width: 20px;
	height: auto;
}

#genre-select input[type="checkbox"]{
	background: none;
	border: none;
	border-radius: 0;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

#genre-select input[type="checkbox"] + span {
  display: inline-block;
  padding: 0 0 0 30px;
}

#genre-select input[type="checkbox"] + span::before,
#genre-select input[type="checkbox"] + span::after {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  content: '';
  box-sizing: border-box;
}

#genre-select input[type="checkbox"] + span::before {
  z-index: 0;
  background-color: #fff;
  width: 22px;
  height: 22px;
  border: 2px #000 solid;
  border-radius: 5px;
}

#genre-select input[type="checkbox"] + span::after {
  z-index: 1;
  margin: 5px 8px;
  width: 6px;
  height: 9px;
}

#genre-select input[type="checkbox"]:checked + span::before {
  background-color: #000;
}

#genre-select input[type="checkbox"]:checked + span::after {
	border: 2px solid #fff;
	border-width: 0 2px 2px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

#top-banner{
	display: flex;
	justify-content: space-between;
	margin-bottom: 32px;
}

#top-about{
	background: url(../img/about.png) no-repeat;
	box-sizing: border-box;
	padding: 0 0 0 225px;
	margin-bottom: 50px;
	min-height: 144px;
	font-size: 13px;
}

.map-popup img{
	width: 200px;
	height: auto;
}

.map-popup p:first-child{
	background: #000;
	color: #fff;
	margin: 0 0 5px 0;
	font-size: 14px;
	padding: 5px 10px;
}

.gm-style-iw{
	background: url(../img/arrow.png) no-repeat right 10px top 50%;
	background-size: 30px auto;
	padding-right: 20px;
}

/* スポットリスト
---------------------------------------------------- */
.spot-list{
	position: relative;
	background: #ECF0F6 url(../img/line.png) repeat-x 50% 100%;
	padding-bottom: 70px;
	min-width: 960px;
}

.spot-list .list{
	display: flex;
	flex-wrap: wrap;
}

.spot-list .list a{
	color: #000;
}

.spot-list .list > li{
	width: 215px;
	margin: 0 0 30px 30px;
}

.spot-list .list > li:nth-child(4n+1){
	margin-left: 0;
}

.spot-list .list li p:first-child{
	margin-bottom: 5px;
}

.spot-list .list li p:first-child{
	overflow: hidden;
	width: 205px;
	height: 205px;
	position: relative;
	border: 5px solid #666;
	background: #fff;
}

.spot-list .list li p:first-child img {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%;
	height: auto;
}

.spot-list .genre{
	display: flex;
	flex-wrap: wrap;
}

.spot-list .genre li{
	margin: 0 5px 5px 0;
}

.spot-list .genre li img{
	width: 20px;
	height: auto;
}

.spot-list .list h3{
	font-size: 16px;
}

.enjoy{
	position: absolute;
	left: 50%;
	bottom: -13px;
	margin: 0 0 0 -181px;
}

.page-top{
	position: absolute;
	width: 950px;
	left: 50%;
	bottom: 3px;
	text-align: right;
	margin: 0 0 0 -475px;
}

.page-top img{
	width: 52px;
	height: 74px;
}

/* スポンサー
---------------------------------------------------- */
#sponsor{
	background: #8AC8C0;
	padding: 30px 0;
	min-width: 960px;
}

#sponsor ul{
	padding: 20px 0 15px 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

#sponsor li{
	margin: 0 15px 15px 15px;
}

/* フッター
---------------------------------------------------- */
footer{
	background: #000;
	color: #fff;
	padding: 30px 0;
	min-width: 960px;
}

footer div.wrap{
	display: flex;
}

footer div.wrap > ul,
footer div.wrap > p{
	flex: 1;
}

footer div.wrap > ul{
	display: flex;
}

footer div.wrap > ul li{
	margin: 0 20px 0 0;
}

footer div.wrap > p:nth-of-type(1){
	text-align: center;
	font-size: 10px;
}

footer div.wrap > p:nth-of-type(2){
	text-align: right;
}

footer a{
	text-decoration: underline;
	color: #fff;
}

/* 検索
---------------------------------------------------- */
#search{
	font-size: 14px;
	padding: 3% 5% 3% 5%;
	min-width: 680px;
}

#search h2{
	text-align: center;
	font-weight: normal;
	margin: 0 0 15px 0;
}

#search .area{
	display: flex;
	justify-content: space-between;
	position: relative;
}

#search .area,
#search .genre{
	margin: 0 0 25px 0;
	padding: 0 0 25px 0;
	background: url(../img/dot.png) repeat-x 0 100%;
}

#search .area .map{
	position: absolute;
	right: 0;
	bottom: 25px;
	width: 48%;
}

#search .area .map img{
	width: 100%;
	height: auto;
}

#search .area > div{
	width: 48%;
}

#search .area a,
#search .genre a{
	display: block;
	background: #fff;
	border: 2px solid #000;
	border-radius: 6px;
	/*line-height: 46px;*/
	padding: 12px 5px;
	text-align: center;
	font-weight: bold;
	color: #000;
	transition: all  0.3s ease;
}

#search .area a:hover,
#search .genre a:hover{
	background: #ffff00;
}

#search .area > div p,
#search .area > div li{
	margin: 0 0 20px 0;
}

#search .area > div li{
	float: left;
	width: 48%;
	margin: 0 0 20px 4%;
}

#search .area> div li:nth-child(2n+1){
	margin-left: 0;
}

#search .genre li{
	float: left;
	width: 15%;
	margin: 0 0 20px 2%;
}

#search .genre li:nth-child(6n+1){
	margin-left: 0;
}

#search .free-word{
	text-align: center;
}

#search .free-word form{
	width: 100%;
}

#search .free-word input[type="text"]{
	line-height: 33px;
	border: 1px solid #000;
	width: 60%;
	padding: 0 25px;
	box-sizing: border-box;
}

#search .free-word input[type="submit"]{
	background: #000;
	color: #fff;
	border: none;
	outlin: none;
	-webkit-appearance: none;
	height: 33px;
	font-size: 12px;
	padding: 0 30px;
	border-radius: 4px;
}

/* 詳細
---------------------------------------------------- */
.detail{
	margin-bottom: 80px;
}

.detail .title-area{
	display: flex;
	justify-content: space-between;
	background: #000;
	padding: 14px 20px;
	color: #fff;
	margin-bottom: 38px;
}

.detail .title-area h1{
	font-size: 26px;
	line-height: 1;
}

.detail .title-area ul{
	display: flex;
	align-items: center;
}

.detail .title-area li:first-child{
	margin: 0 18px 0 0;
}

.detail .contents{
	display: flex;
	justify-content: space-between;
}

.detail .manga{
	width: 460px;
}

.detail .summary{
	width: 460px;
	font-size: 12px;
}

.detail .summary a{
	color: #009688;
}

.detail .manga p:first-child{
	border: 5px solid #666;
	margin: 0 0 20px 0;
}

.detail .manga p:first-child img,
.detail .summary img{
	width: 100%;
	height: auto;
}

.detail .gallery a{
	display: none;
}

.detail .gallery a:first-child{
	display: block;
	line-height: 55px;
	text-align: center;
	color: #fff;
	border-radius: 6px;
	background: #000;
	font-size: 16px;
}

.detail .summary .genre{
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 5px 0;
}

.detail .summary .genre li{
	margin: 0 5px 0 0;
}

.detail .summary .genre li img{
	width: 20px;
	height: auto;
}

.detail #google-map{
	width: 100%;
	height: 325px;
}

/* キャラマンガ
---------------------------------------------------- */
.chara-manga{
	position: relative;
	background: #ECF0F6 url(../img/line.png) repeat-x 50% 100%;
	padding-bottom: 70px;
	min-width: 960px;
}

.chara-manga .list{
	display: flex;
	flex-wrap: wrap;
}

.chara-manga .list a{
	color: #000;
}

.chara-manga .list > li{
	width: 215px;
	margin: 0 0 30px 30px;
}

.chara-manga .list > li:nth-child(4n+1){
	margin-left: 0;
}

.chara-manga .list li p:first-child{
	margin-bottom: 5px;
}

.chara-manga .list li p:first-child{
	overflow: hidden;
	width: 205px;
	height: 205px;
	position: relative;
	border: 5px solid #666;
	background: #fff;
}

.chara-manga .list li p:first-child img {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%;
	height: auto;
}

.chara-manga .genre{
	display: flex;
	flex-wrap: wrap;
}

.chara-manga .genre li{
	margin: 0 5px 5px 0;
}

.chara-manga .genre li img{
	width: 20px;
	height: auto;
}

.chara-manga .list h3{
	font-size: 16px;
}

.chara-manga .list .manga_more{
	display: block;
	line-height: 45px;
	text-align: center;
	color: #fff;
	border-radius: 6px;
	background: #000;
	font-size: 16px;
	margin-top: 5px;
}

/* 掲載希望
---------------------------------------------------- */
.keisai img{
	max-width: 950px;
	margin-bottom: 30px;
}

.keisai h3{
	font-size: 2em;
	margin-bottom: 10px;
}

.keisai h4{
	font-size: 1.8em;
	margin-bottom: 8px;
	/*margin-top: 30px;*/
}

.keisai p{
	font-size: 1.2em;
	margin-bottom: 8px;
}

.keisai p span{
	font-size: 0.8em;
	margin-bottom: 8px;
	color: red;
	margin-left: 5px;
}

.keisai_request a{
	display: block;
	line-height: 60px;
	text-align: center;
	color: #fff;
	border-radius: 6px;
	background: #000;
	font-size: 16px;
	margin-top: 5px;
	margin-bottom: 50px;
}