@charset "utf-8";

/* -----------------------------------------------------------------
convention CSS
LAST UPDATE:
--------------------------------------------------------------------*/

/*====================
PCを基本設計にする
 - 1280px〜：大型PC
 - 960px〜1279px：小型PC
 - 600px〜959px：タブレット
 - 480px〜599px：スマートフォン横
 - 〜479px：スマートフォン縦
====================*/ 

/* ▼▼▼ convention font-size/line-height ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼ */
h2{ font-size:30px; line-height: 1.3;}
h3{ font-size:20px;  line-height: 1.3;}
.section h3{ font-size:20px;  line-height: 1.3;}
ul.s_item li { font-size:18px; }
ul.s_item_Contents li { font-size:15px; line-height: 1.8;}
p.per{line-height: 3;}
#footer{ font-size:13px;}

@media screen and (min-width:600px) and (max-width:959px) {
    h2{ font-size:24px; line-height: 1.3;}
    h3{ font-size:18px;  line-height: 1.3;}
    .section h3{ font-size:18px;  line-height: 1.3;}
    ul.s_item li { font-size:16px; }
    ul.s_item_Contents li { font-size:15px; line-height: 1.8;}
    p.per{line-height: 3;}
}

@media screen and (min-width:480px) and (max-width:599px) { 
    h2{ font-size:24px; line-height: 1.3;}
    h3{ font-size:18px;  line-height: 1.3;}
    .section h3{ font-size:18px;  line-height: 1.3;}
    ul.s_item li { font-size:16px; }
    ul.s_item_Contents li { font-size:15px; line-height: 1.8;}
    p.per{line-height: 3;}
}

@media screen and (max-width:479px) { 
    body{font-size:15px; line-height:1.8;}
    h2{ font-size:19px; line-height: 1.3;}
    h2 span{ font-size:16px; line-height: 1.3;}
    h3{ font-size:16px;  line-height: 1.5;}
    .section h3{ font-size:16px;  line-height: 1.3;}
    ul.s_item li { font-size:16px; }
    ul.s_item_Contents li { font-size:15px; line-height: 1.8;}
    p.per{line-height: 1.5;}

	#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} 
}
/* ▲▲▲ convention font-size/line-height ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ */

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

/* ▼▼▼ h3 ▼▼▼ */
.section h3{ font-weight:bold; color:#fff; display:block; margin-top:25px; padding:11px 16px; background: #f74e0b; border-radius: 4px;}

/* ▼▼▼ 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;}

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

.s_item{margin:0 !important;}
.s_item li{ text-indent:-1em; margin:0 0 0 1em; font-weight:bold;}
.s_item_Contents{margin:0 !important;}
.s_item_Contents li{ text-indent:-1em; margin:0 0 0 1em;}

p.per{font-weight:bold; margin:25px 15px; color:rgb(206, 0, 0)}

/* ▼▼▼ otherbox ▼▼▼ */
.otherbox{ border-radius:2px; border:1px solid #ddd; background:#f6f6f6; padding:4px; }
.otherbox dl{ background:#fff; margin:0; padding:15px 20px;}
.otherbox dl dt{ padding:0 0 5px 0; border-bottom:2px solid #dedede; font-weight:bold; color:#f74e0b;}
.otherbox dl ul li{ padding:3px 0 3px 0 ; border:none;}

/* ------------------------------------------------------------------------------------------------------------------------
    〜479px：スマートフォン縦
------------------------------------------------------------------------------------------------------------------------*/ 
@media screen and (max-width:479px) { 

    /* ▼▼▼ COL2 ▼▼▼ */
    .col2Wrap{ width:100%; overflow:hidden;}
    .col2Wrap .col2L{ float:none; width:100%; 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:none; width:100%; 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:none; width:100%; 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:none; width:100%; 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;}

    .col2Wrap .col3-1,
    .col2Wrap .col3-2,
    .col2Wrap .col3-3{ float:none; width:100%;}

    .col2Wrap .col3-2,
    .col2Wrap .col3-3{margin-top:20px;}

    .s_imt20{margin-top:20px !important;}
}
/* ------------------------------------------------------------------------------------------------------------------------
    タブレット(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; }    
}