@charset "UTF-8";

body{
	font-family: ArialMT, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3";
	font-size: 14px;
	line-height: 1.5;
	-webkit-text-size-adjust: none;
	color: #4b4b4b;
}

/* clearfix
---------------------------------------------------- */
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}

/* リンク
---------------------------------------------------- */
a{
	text-decoration: none;
}

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

.mb10{
	margin-bottom: 10px !important;
}

#genre-select{
	display: none;
}

.wrap{
	margin-left: 16px;
	margin-right: 16px;
}

.breadcrumb{
	display: flex;
	font-size: 11px;
	margin-top: 10px;
	margin-bottom: 10px;
	overflow-x: scroll;
	white-space: nowrap;
}

.breadcrumb::-webkit-scrollbar {
	/*height: 10px;*/
}

.breadcrumb::-webkit-scrollbar-track {
	background-color: #FFF;
}

.breadcrumb::-webkit-scrollbar-thumb {
	background-color: rgba( 238, 238, 238, 0.8);
}

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

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

.breadcrumb a{
	color: #000;
}

.title{
	text-align: center;
	margin: 0 0 25px 0;
	font-weight: normal;
	color: #000;
	font-family: "トーキング", Talking;
	line-height: 13px;
}

.title span{
	background: url(../img/sp/title-bg1.png) no-repeat 0 50%, url(../img/sp/title-bg2.png) no-repeat 100% 50%;
	background-size: 13px 13px, 13px 13px;
	padding: 0 20px;
}

/* ヘッダー
---------------------------------------------------- */
header{
	background: #ECF0F6;
	height: 60px;
}

header .logo{
	padding: 12px 0 0 0;
}

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

header ul{
	display: none;
}

/* TOP
---------------------------------------------------- */
#top-map #top-google-map{
	display: none;
}

#top-map{
	position: relative;
	height: 0;
	padding: 88.75% 0 0 0;
	background: url(../img/sp/h1-bg.png) no-repeat;
	background-size: contain;
}

#top-map h1{
	position: absolute;
	top: 10px;
	left: 10px;
}

#top-map h1 img{
	width: 143px;
	height: auto;
}

#genre-select .inner p{
	display: none;
}

#genre-select-sp{
	background: url(../img/sp/genre-select-bg.png) no-repeat 0 15px;
	background-size: 41px 112px;
	padding: 15px 0 15px 57px;
	box-sizing: border-box;
	min-height: 112px;
}

/*#genre-select-sp ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}*/

#genre-select-sp li{
	float: left;
	width: 30%;
	margin: 0 0 11px 5%;
}

#genre-select-sp li:nth-child(3n+1){
	margin-left: 0;
}

#genre-select-sp li a{
	display: block;
	line-height: 48px;
	border-radius: 3px;
	color: #fff;
	text-align: center;
}

#genre-select-sp li:nth-child(1) a{
	background: #FC521F;
	border-bottom: 1px solid #CA461E;
}

#genre-select-sp li:nth-child(2) a{
	background: #FEC624;
	border-bottom: 1px solid #D2A527;
}

#genre-select-sp li:nth-child(3) a{
	background: #24D55C;
	border-bottom: 1px solid #439D4F;
}

#genre-select-sp li:nth-child(4) a{
	background: #2140F9;
	border-bottom: 1px solid #25448D;
}

#genre-select-sp li:nth-child(5) a{
	background: #BCAAFB;
	border-bottom: 1px solid #9A8FB4;
}

#genre-select-sp li:nth-child(6) a{
	background: #128412;
	border-bottom: 1px solid #1A6E30;
}

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

#top-banner li{
	width: 31.6%;
}

#top-banner li img{
	width: 100%;
	height: auto;
}

#top-about{
	background: url(../img/sp/about-bg.png) no-repeat 50% 0;
	background-size: 185px 14px;
	padding: 25px 0 0 0;
	margin-bottom: 15px;
}

/* スポットリスト
---------------------------------------------------- */
.spot-list{
	position: relative;
	background: #ECF0F6 url(../img/sp/line.png) repeat-x 50% 100%;
	background-size: 100% auto;
	padding: 25px 0 50px 0;
}

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

.spot-list h2 img{
	width: 110px;
	height: 13px;
}

.spot-list li a{
	display: flex;
}

.spot-list .list > li{
	margin: 0 0 25px 0;
}

.spot-list li div{
	flex: 1;
}


.spot-list .list li p:first-child{
	overflow: hidden;
	width: 108px;
	height: 108px;
	position: relative;
	border: 3px solid #666;
	background: #fff;
	margin: 0 15px 0 0;
}

.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;
}

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

.enjoy img{
	width: 182px;
	height: auto;
}

.page-top{
	position: absolute;
	right: 16px;
	bottom: 4px;
}

.page-top img{
	width: 41px;
	height: 59px;
}

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

#sponsor li{
	margin: 0 0 12px 0;
	text-align: center;
}

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

footer a{
	color: #fff;
}

footer div.wrap{
	display: flex;
	flex-wrap: wrap;
}

footer div.wrap > p:nth-of-type(2){
	order: 1;
	width: 100%;
	text-align: center;
	font-size: 12px;
}

footer div.wrap > p:nth-of-type(2) a{
	text-decoration: underline;
}

footer div.wrap > ul{
	order: 2;
	text-align: center;
	margin: 18px auto;
}

footer div.wrap > ul li{
	display: inline-block;
}

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

footer div.wrap > ul li:last-child{
	margin: 0;
}

footer div.wrap > ul li:first-child img{
	width: 18px;
	height: auto;
}

footer div.wrap > ul li:nth-child(2) img{
	width: 22px;
	height: auto;
}

footer div.wrap > ul li:nth-child(3) img{
	width: 19px;
	height: auto;
}

footer div.wrap > p:nth-of-type(1){
	order: 3;
	width: 100%;
	text-align: center;
	font-size: 11px;
}

/* 検索
---------------------------------------------------- */
#search{
	padding-bottom: 130px;
}

#search .inner{
	padding: 16px 0 0 0;
	background: url(../img/dot.png) repeat-x;
	background-size: 4px 2px;
}

#search .area{
	padding: 0 16px 16px 16px;
	margin: 0 0 16px 0;
	background: url(../img/dot.png) repeat-x 0 100%;
	background-size: 4px 2px;
}

#search #sp-banner{
	display: flex;
	justify-content: space-between;
	padding: 16px;
}

#search #sp-banner li{
	width: 31.6%;
}

#search #sp-banner li img{
	width: 100%;
	height: auto;
}

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

#search #tottori,
#search #shimane{
	display: flex;
	flex-wrap: wrap;
	margin: 12px 0 20px 0;
}

#search #shimane{
	margin-bottom: 0;
}

#search .area .map{
	display: none;
}

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

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

#search .area a,
#search .genre a{
	display: block;
	background: #fff;
	border: 2px solid #000;
	border-radius: 6px;
	line-height: 1.2em;
	padding: 18px 0;
	text-align: center;
	font-weight: bold;
	color: #000;
}

#search .genre li{
	float: left;
	width: 30.6%;
	margin: 0 0 12px 4%;
}

#search .genre{
	padding: 0 16px 16px 16px;
	margin: 0 0 16px 0;
	background: url(../img/dot.png) repeat-x 0 100%;
	background-size: 4px 2px;
}

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

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

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

#search .free-word input[type="text"]{
	line-height: 40px;
	border: 1px solid #000;
	width: 70%;
	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: 40px;
	font-size: 12px;
	padding: 0 20px;
	border-radius: 4px;
}

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

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

.detail .title-area h1{
	font-size: 15px;
	margin: 0 15px 0 0;
	font-weight: normal;
}

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

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

.detail .title-area li:first-child img{
	width: 22px;
	height: auto;
	vertical-align: middle;
}

.detail .title-area li:nth-child(2) img{
	width: 24px;
	height: auto;
	vertical-align: middle;
}

.detail .contents{
	display: flex;
	flex-direction: column-reverse;
	flex-wrap: wrap;
}

.detail .manga{
	width: 100%;
}

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

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

.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 .manga p:first-child{
	border: 3px solid #666;
	margin: 0 0 13px 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: 50px;
	text-align: center;
	color: #fff;
	border-radius: 6px;
	background: #000;
	font-size: 12px;
}

/* キャラマンガ
---------------------------------------------------- */
.chara-manga{
	position: relative;
	background: #ECF0F6 url(../img/sp/line.png) repeat-x 50% 100%;
	background-size: 100% auto;
	padding: 25px 0 50px 0;
}

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

.chara-manga h2 img{
	width: 110px;
	height: 13px;
}

.chara-manga li a{
	/*display: flex;*/
}

.chara-manga .list > li{
	margin: 0 0 25px 0;
}

.chara-manga li div{
	flex: 1;
}


.chara-manga .list li p:first-child{
	overflow: hidden;
	width: 100%;
	height: 150px;
	position: relative;
	border: 3px solid #666;
	background: #fff;
	margin: 0 15px 8px 0;
}

.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 .manga_more{
	display: block;
	line-height: 45px;
	text-align: center;
	color: #fff;
	border-radius: 6px;
	background: #000;
	font-size: 12px;
	margin-top: 10px;
}

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

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

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

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

.keisai p span{
	font-size: 0.7em;
	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: 14px;
	margin-top: 5px;
	margin-bottom: 50px;
}