@import "../js/nav/styles.css";
@media only screen and (max-width:730px){
#device { display:block;}
#device p.pc_btn { display:none;}
#device p.sp_btn {display:block; }
}

@media only screen and (max-width:700px){

body { min-width:450px; font-size:100%;}
#header { display:none;}
#content{ width:100%;}
#footer { width:100%;}

#wrapper { background:#FFF; border-top:none; overflow:hidden;}
#base { width:auto; margin:0 !important;}

.pc { display:none;}
.sm { display:block;}

#device p.pc_btn { display:block !important;}
#device p.sp_btn { display:none !important;}

/*====================================================================================================
  HEADER
====================================================================================================*/

#header {}

/*====================================================================================================
  CONTENT
====================================================================================================*/

#content {}

/*====================================================================================================
  FOOTER
====================================================================================================*/
#footer { }

/* LOGO */
#footer .logo { margin-bottom: 30px;}

/* NAV */
#footer .f_nav { display: none;}

/* SNS */
#footer ul.sns {}

/* ADDRESS */
#footer .add {}

/* COPYRIGHT */
#footer .copy {}

/*====================================================================================================
  DEVICE
====================================================================================================*/


/*====================================================================================================
  PAGE
====================================================================================================*/
#page { position: fixed; bottom:20px; right: 20px; z-index: 9999;}


/*====================================================================================================
  TOP PAGE
====================================================================================================*/
/* common/css/top.css */


/*====================================================================================================
  SUB PAGE
====================================================================================================*/

#subpage {  width:90%; border: 5px solid #000;}
#koshien_title {width: 90%; font-size: 4vw;}

/* TITLE */
h2.sb_tit { padding-bottom:7%;}
h2.tit_koushien {font-size:35px; line-height:110%;}
h2.tit_mansai {font-size:28px; line-height:110%;}
h2.tit_daikaigi {font-size:45px; line-height:110%;}
h2.tit_spot {font-size:38px; line-height:110%;}


/* PAN */
.pan { display:none;}

/* MENU LIST */
#subpage .list {}
#subpage .list p {}


/* MIDASHI */
#subpage h2 { margin:20px 2%; font-size:120%;}

/* COMMON */
#subpage .comment { margin:0 2% 20px;}

/* PHOTO */
#subpage .photo-l,
#subpage .photo-r,
#subpage .photo-c { clear:both; float:none; text-align:center; margin:0 1%; width:98%;}
#subpage .photo-l img,
#subpage .photo-r img,
#subpage .photo-c img { width:100%; height:auto;}
#subpage .photo-l2 { float:none; width:100% !important;}
#subpage .photo-r2 { float:none; width:100% !important;}
#subpage .photo-l2 p { float:left; width:48%; margin:1%;}
#subpage .photo-r2 p { float:left; width:48%; margin:1%;}
#subpage .photo-c2 p { float:left; width:48%; margin:1%;}
#subpage .photo-l2 img,
#subpage .photo-r2 img,
#subpage .photo-c2 img { width:100%; height:auto;}
#subpage .photo-ls { max-width:50%;}
#subpage .photo-rs { max-width:50%;}
#subpage .caption {}

/* PHOTO BOX */
#subpage ul.photo_box { clear:none !important; float:none !important; margin:2%; width:96% !important; text-align:center;}
#subpage ul.g1 li,
#subpage ul.g2 li,
#subpage ul.g3 li,
#subpage ul.g4 li,
#subpage ul.g5 li{ margin:15px 0; width:100%; text-align:center;}
#subpage ul.g1 li.photo img,
#subpage ul.g2 li.photo img,
#subpage ul.g3 li.photo img,
#subpage ul.g4 li.photo img,
#subpage ul.g5 li.photo img { width:100% !important; height:auto !important;}


/* LIST */
#subpage ul {}
#subpage ul li {}
#subpage ol {}
#subpage ol li {}


/* HYOU */
#subpage table {}
#subpage table th,
#subpage table td {
	table-layout:auto !important;
	display:block !important;
	padding:5px 5% !important;
	width:90% !important;
	height:auto !important;
	text-align:left;
	font-weight:normal;
}

/* LINK */
#subpage .icon-pdf,
#subpage .icon-word,
#subpage .icon-excel,
#subpage .icon-link {}


/*---------------------------------------------------------------------------
  BOX
---------------------------------------------------------------------------*/

/* BOX1 */
#subpage .box1 {margin:0 2% 20px;}
#subpage .box1:after { display:none;}

/* BOX2 */
#subpage .box2 {margin:0 2% 20px;}
#subpage .box2:after { display:none;}
#subpage .box2 h3 { margin:10px 0; font-size:120%;}

/* BOX3 */
#subpage .box3 {margin:0 2% 20px;}
#subpage .box3:after { display:none;}

/* BOX4 */
#subpage .box4 {}
#subpage .box4:after { display:none;}
#subpage .box4 .box { float:none; width:96%; margin:0 2% 20px;}
#subpage .box4 p { padding:10px 0 0 !important; }
#subpage .box4 .bo a {font-size:100%;}


/*====================================================================================================
  SUB COMMON
====================================================================================================*/

/* SB LOGO*/
#subpage .maincome { padding:5%; text-align: center;}
#subpage .maincome .sblogo { margin-bottom:5%;}
#subpage .maincome .come { text-align: left;}
#subpage .maincome .come b { font-size:110%;}

/* DOT BOX */
#subpage .dot_box { position: relative; margin: 0 5%; padding:5% 0;}
#subpage .dot_box .come_l,
#subpage .dot_box .come_r { position: static; float:none; width:96% !important; margin:1% 1% 5%; padding:0;}
#subpage .dot_box .come1,
#subpage .dot_box .come2 { padding:0 0 5%;}

/* BG BOX */
#subpage .bg_box { position: relative; margin-top:10%; padding: 5%; background: url(../img/bg5.jpg);}
#subpage .bg_box .come { text-align: left;}


/*====================================================================================================
  MANGA KOUSHIEN
====================================================================================================*/
#koushien { padding:7% 0;}
#koushien .maincome { padding-bottom:100px;}
#koushien .maincome .sblogo img { width: 100%; max-width: 340px; height: auto;}

/* FUKIDASHI */
#koushien .fuki1,
#koushien .fuki2,
#koushien .fuki3 { position:static !important;}

/* SCHEDULE */
#koushien .schedule { padding:0;}
#koushien .schedule .dot_box:before{ display: none;}
#koushien .schedule .dot_box .come_l { float:none; margin:0 1% 5%; width:98%;}
#koushien .schedule .dot_box .come_r { float:none; margin:0 1% 5%; width:98%;}

/* FUKIDASHI */
#koushien .box { clear: both; margin: 0 1%; padding:80px 0;}

/*====================================================================================================
  KOCHI MANGA FESTIVAL - MANSAI -
====================================================================================================*/
#mansai { padding:7% 0;}
#mansai .maincome .sblogo img { width: 100%; max-width: 340px; height: auto;}

/* FUKIDASHI */
#mansai .fuki1,
#mansai .fuki2,
#mansai .fuki3 { position:static !important;}

/* BGBOX */
#mansai .bg_box .come:before,
#mansai .bg_box .come:after { display: none;}


/*====================================================================================================
  MANGAKA DAIKAIGI
====================================================================================================*/
#daikaigi { padding:7% 0;}

/* FUKIDASHI */
#daikaigi .fuki1,
#daikaigi .fuki2,
#daikaigi .fuki3,
#daikaigi .fuki4,
#daikaigi .fuki5,
#daikaigi .fuki6 { position:static !important;}

/* BGBOX */
#daikaigi .bg_box .come:before,
#daikaigi .bg_box .come:after { display: none;}

#daikaigi .fuki5:before,
#daikaigi .fuki5:after{ display: none;}

/*====================================================================================================
  TOURIST SPOT
====================================================================================================*/
#spot {
	padding:7% 0;
	background:#E9E9E9 url(../img/bg4_sb.jpg) no-repeat top center;
	background-size: 100% auto;
}

/* AREA */
#spot .area { position: relative; margin:5%; height:auto;}
#spot .area .mid {
	position:static;
	margin-bottom: 20px;
	font-size:30px;
	text-align: center;
}
#spot .area .mid br { display: none;}
#spot .area .map {}
#spot .area .map img { width:100%; height: auto;}
#spot .area .come { position:static; width:100%;}


/* TAB */
#spot ul#tab {
	margin:auto;
	padding:0;
	width:240px;
	height:55px;
	list-style: none;
	border: none;
}
#spot ul#tab li {
	cursor: pointer;
	float: left;
	position: relative;
	top:0;
	margin: 0;
	padding:17px 0;
	width:80px;
	height:55px;
	font-size:15px;
	line-height: 100%;
	transition: all 0.3s;
}
#spot #tab li:nth-child(1) { background: url(../../spot/img/tab1_sm.png) no-repeat; background-size:100% auto;}
#spot #tab li:nth-child(2) { background: url(../../spot/img/tab2_sm.png) no-repeat; background-size:100% auto;}
#spot #tab li:nth-child(3) { background: url(../../spot/img/tab3_sm.png) no-repeat; background-size:100% auto;}
#spot .disnon { display: none;}
#spot .content_area { padding: 5%;	border-top:5px solid #000;}
#spot .content_area:after { /*float_clear*/ display:block; clear:both; content:"";}

/* LIST */
#spot .box { float:none; margin:0; padding:5%; width:100%; border-bottom: 1px dotted #555;}
#spot .box h3 { padding:20px 0 0;}
#spot .box .come { padding:0;}


}