@charset "utf-8";

/* -----------------------------------------------------------------
perfomance CSS
LAST UPDATE:
--------------------------------------------------------------------*/

/*====================
PCを基本設計にする
 - 1280px〜：大型PC
 - 960px〜1279px：小型PC
 - 600px〜959px：タブレット
 - 480px〜599px：スマートフォン横
 - 〜479px：スマートフォン縦
====================*/ 
/* ▼▼▼ --- perfomance font-size/line-height ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼ */
h2{ font-size:30px; line-height: 1.3;}
.pfm dt h3{ font-size:20px;  line-height: 1.3;}
.pfm dl ul li{ font-size:15px;  line-height: 1.8;}
#footer{ font-size:13px;}

@media screen and (min-width:600px) and (max-width:959px) {
	h2{ font-size:24px; line-height: 1.3;}
	.pfm dt h3{ font-size:18px;  line-height: 1.3;}
}

@media screen and (min-width:480px) and (max-width:599px) { 
	h2{ font-size:24px; line-height: 1.3;}
	.pfm dt h3{ font-size:18px;  line-height: 1.3;}
}

@media screen and (max-width:479px) { 
    body{font-size:15px; line-height:1.8;}
	h2{ font-size:20px; line-height: 1.3;}
	.pfm dt h3{ font-size:16px;  line-height: 1.3;}
	
	#area_mice .ribon{font-size:15px; line-height: 1.3}
	#area_mice p.mice{font-size:15px; line-height: 1.3} 
	#area_mice p.mice2{font-size:15px; line-height: 1.3} 
}
/* ▲▲▲ --- perfomance font-size/line-height ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ */

/* ------------------------------------------------------------------------------------------------------------------------
    1280px〜：大型PC 
------------------------------------------------------------------------------------------------------------------------ */

/*---------------------------------
 per
-----------------------------------*/
.per{ font-weight:bold; color:#fff; display:block; padding:11px 16px; background: #f74e0b; border-radius: 4px;}
.per .bgDeviceTtlcap{ float:right; margin-right:10px;} 

/*---------------------------------
 COL2
-----------------------------------*/
.col2Wrap{ width:100%; overflow:hidden;}
.col2Wrap .col2L{ float:left; width:50%; padding:0 10px 0 0;box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; -webkit-box-sizing:border-box;}
.col2Wrap .col2R{ float:right; width:50%; padding:0 0 0 10px;box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; -webkit-box-sizing:border-box;}
.col2Wrap .col2L02{ float:left; width:50%; padding:0 8px 0 0;box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; -webkit-box-sizing:border-box;}
.col2Wrap .col2R02{ float:right; width:50%; padding:0 0 0 8px;box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; -webkit-box-sizing:border-box;}

.col2Wrap img{ vertical-align:bottom;}
.indent15{ padding:0 15px; width:100%;box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; -webkit-box-sizing:border-box;}

.indent2em{ text-indent:-2em; padding-left:2em;}

.indent15HalfL{ padding:0 0 0 15px; width:100%;box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; -webkit-box-sizing:border-box;}


.col2Wrap .col3-1,
.col2Wrap .col3-2,
.col2Wrap .col3-3{ float:left; width:50%;}

.sDetail{ margin:10px 0 0 0 !important;}
.sDetail .col2R p{ margin:10px 0 0 0 !important;}

.ittl{font-weight:bold; color:#f74e0b; background:url(../img/icon_ttl_02.gif) no-repeat 0 0.4em; padding:4px 0 0 25px; margin:15px 0 0; }

.iContents{ padding:0 15px; width:100%;box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; -webkit-box-sizing:border-box;}

.iscale{ display:inline-block; border:1px solid #dddddd; border-radius:2px; padding:7px 20px; }

/*---------------------------------
loopslider
-----------------------------------*/
#loopslider {
	margin: 0 auto;
	width: 900px;
	height: 130px;
	text-align: left;
	position: relative;
	overflow: hidden;
}

#loopslider ul {
	height: 130px;
	float: left;
	display: inline;
	overflow: hidden;
}
#loopslider ul li {
	width: 180px;
	height: 130px;
	float: left;
	display: inline;
	overflow: hidden;
}

#loopslider ul:after {
	content: ".";
	height: 0;
	clear: both;
	display: block;
	visibility: hidden;
}

#loopslider ul {
	display: inline-block;
	overflow: hidden;
}

@media screen and (min-width:960px) and (max-width:1279px) {
	#loopslider {width: 670px;}
}

@media screen and (max-width:959px) {
	#loopslider {width: 100%;}
}

/*pfm*/
.pfm{ border-radius:2px; border:1px solid #ddd; background:#f6f6f6; padding:4px; }
.pfm dl{ background:#fff; margin:0; padding:15px 20px;}
.pfm dt h3{ padding:0 0 5px 0 !important;; border-bottom:2px solid #dedede!important;; font-weight:bold; color:#f74e0b !important; background:none !important;}
.pfm dl ul li{ padding:3px 0 3px 0 ; border:none;}
/* ------------------------------------------------------------------------------------------------------------------------
    タブレット(959以下)で下段に表示
------------------------------------------------------------------------------------------------------------------------ */
@media screen and (min-width:600px) and (max-width:959px) {
	/* ▼▼▼ #area_mice(北九州グローバルMICE推進協議会) ▼▼▼ */
	#area_mice{margin-top:35px; padding:25px; background-color: #f2f2f2; border-radius: 10px; text-align: left;} 
	#area_mice h2 img{width:70%; margin:0;}
	#area_mice .ribon{font-weight:bold; margin:25px 10px; color:#000;}
	#area_mice p.mice{font-weight:bold; margin:25px 10px;} 
	#area_mice p.mice2{ font-weight:bold; color:rgb(0, 0, 0);margin:25px 10px;} 
	#area_mice ul{ margin:25px 10px;} 
	#area_mice .mice_dantai{margin:25px 10px; background-color: #fff; height: auto; overflow: auto;  padding-top: 10px;} 
	#area_mice .mice_dantai h3{ margin:0 15px; padding:5px 0 5px 15px;color:#fff; font-weight: 700;  background-color: #f74e0b; border-radius: 5px;}
	#area_mice .mice_dantai ul{margin:10px 15px;  text-align: left;}
	#area_mice .mice_dantai ul li{float: none;}
	#area_mice .mice_dantai ul li:last-child{padding-bottom: 20px;}
	
	/* ▼▼▼ .contactBox ▼▼▼ */
	.contactBox{clear:both; border:4px solid #cccccc; width:99%; display: block; margin:25px auto; }
	.contactBox p{background-color: #FFF; padding:10px 0;}
	.contactBox h4{ color: #FFFFFF; background-color: #333333;	padding: 10px; margin: 0px;  text-align: center; color:#fff;font-weight:bold;}
	.contactBox img{width:100%; }
}

@media screen and (max-width:599px) {
	/* ▼▼▼ #area_mice(北九州グローバルMICE推進協議会) ▼▼▼ */
	#area_mice{margin-top:35px; padding:5px; background-color: #f2f2f2; border-radius: 10px; text-align: left;} 
	#area_mice h2 img{width:90%; margin:15px 0 3px 0;}
	#area_mice .ribon{font-weight:bold; margin:5px; color:#000;}
	#area_mice p.mice{font-weight:bold; margin:25px 5px;} 
	#area_mice p.mice2{ font-weight:normal; color:rgb(0, 0, 0);margin:15px 5px;} 
	#area_mice ul{ margin:15px 5px;} 
	#area_mice .mice_dantai{margin:15px 5px; background-color: #fff; height: auto; overflow: auto;  padding-top: 10px;} 
	#area_mice .mice_dantai h3{ margin:0 10px; padding:5px 0 5px 15px;color:#fff; font-weight: 700;  background-color: #f74e0b; border-radius: 5px;}
	#area_mice .mice_dantai ul{margin:10px;  text-align: left;}
	#area_mice .mice_dantai ul li{float: none;}
	#area_mice .mice_dantai ul li:last-child{padding-bottom: 20px;}

	/* ▼▼▼ .contactBox ▼▼▼ */
	.contactBox{clear:both; border:4px solid #cccccc; width:98%; display: block; margin:25px auto; }
	.contactBox p{background-color: #FFF; padding:10px 0;}
	.contactBox h4{ color: #FFFFFF; background-color: #333333;	padding: 10px; margin: 0px;  text-align: center; color:#fff;font-weight:bold;}
	.contactBox img{width:100%; }
}
	
@media screen and (min-width:960px) {
	#area_mice,.contactBox{ display: none !important; }    
}