@charset "utf-8";

/* -----------------------------------------------------------------
INDEX CSS
LAST UPDATE:
--------------------------------------------------------------------*/

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


/* ▼▼▼ index font-size/line-height ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼ */
h2{ font-size:30px; line-height: 1.3;}
h3{ font-size:20px;  line-height: 1.3;}
.ribon,.ribon02{ font-size:18px; line-height: 1.3}
#area1 h3{ font-size:24px !important; line-height: 2 !important;}
#area3 dl.caption-list dd span{ font-size:18px; line-height: 1.3}
#area4 ul li {font-size:15px;  line-height: 1.6;}
#area6 .mice_R ul{ font-size:15px; line-height: 1.6;}
#area6 p.mice{ font-size:20px;  line-height: 1.3}
#area6 p.mice2{ font-size:18px;  line-height: 1.5}
#footer{ font-size:13px;}

@media screen and (min-width:960px) and (max-width:1279px) {
    #area2 ul li{line-height: 1.7}
    #area3 dl.caption-list dd{line-height: 1.6}
    #area3 dl.caption-list dd span{ font-size:17px; line-height: 1.3}
}

@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;}
    #area1 h3{ font-size:19px !important; line-height: 1.6 !important;}
    #area3 dl.caption-list dd{line-height: 1.6}
    dl.introduction_sp dd { line-height: 1.6}
    #area6 p.mice{ font-size:18px;  line-height: 1.3}
    #area6 p.mice2{ font-size:16px;  line-height: 1.5}
}

@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;}
    #area1 h3{ font-size:19px !important; line-height: 1.6 !important;}
    #area3 dl.caption-list dd{line-height: 1.6}
    dl.introduction_sp dd { line-height: 1.6}
    #area6 p.mice{ font-size:18px;  line-height: 1.3}
    #area6 p.mice2{ font-size:16px;  line-height: 1.5}
}

@media screen and (max-width:479px) { 
    body{font-size:15px; line-height:1.8;}
    h2{ font-size:20px; line-height: 1.3;}
    h3{ font-size:16px;  line-height: 1.3;}
    .ribon,.ribon02{ font-size:14px; line-height: 1.3}
    #area1 h3{ font-size:15px !important; line-height: 1.6 !important;}
    #area3 dl.caption-list dd{font-size:14px; line-height: 1.6}
    #area3 dl.caption-list dd span{ font-size:14px; line-height: 1.3}
    dl.introduction_sp dd { font-size:14px;line-height: 1.6}
    #area6 p.mice{ font-size:15px;  line-height: 1.3}
    #area6 p.mice2{ font-size:15px;  line-height: 1.5}
    #area6 .mice_R ul{ font-size:14px;}
}
/* ▲▲▲ index font-size/line-height ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ */

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

/* ▼▼▼ #topimg ▼▼▼ */
#topimg{ background:none; margin-top:15px;}
#topimg img{width:100%;}

/* ▼▼▼ index #contents ▼▼▼ */
#contents_top{width:100%; min-width:1280px;}

/* ▼▼▼ index #mainArea ▼▼▼ */
#mainArea{width:100%; margin:0 auto; padding-bottom:50px;}

/* ▼▼▼ index #column ▼▼▼ */
#column{width:100%; margin:0 auto; padding:35px 0 0 0; background-color: #fff; height: 450px;}
#column02{width:100%; margin:0 auto; padding:35px 0 0 0; background-color: #f2f2f2; height: 660px;}
#column03{width:100%; margin:0 auto; padding:35px 0 0 0; background-color: #fff; height: 700px;}
#column04{width:100%; margin:0 auto; padding:35px 0 0 0; background-color: #ff900a; height: 700px;}
#column05{width:100%; margin:0 auto; padding:35px 0 0 0; background-color: #fff;}
#column06{width:100%; margin:0 auto; padding:35px 0 0 0; background-color: #ff900a; height: 720px;}
#column07{width:100%; margin:0 auto; padding:35px 0 0 0; background-color: #fff;}

/* ▼▼▼ index #area ▼▼▼ */
#area1,#area2,#area3,#area5,#area6,#area7{width:1280px; text-align: center; margin:0 auto;} 
#area4{width:980px; text-align: center; margin:0 auto;}

/* ▼▼▼ index h2 ▼▼▼ */
h2{color:rgb(0, 0, 0); font-family: 'Roboto', sans-serif; font-weight: 700; }

/* ▼▼▼ index .ribon ▼▼▼ */
#area1 p.ribon,#area2 p.ribon,#area3 p.ribon,#area5 p.ribon,#area7 p.ribon{color:#f74e0b; font-weight: 700;}
#area4 p.ribon02,#area6 p.ribon02{ color:#fff; font-weight:bold;}

/* ▼▼▼ index h4 ▼▼▼ */
h4{ color: #FFFFFF; background-color: #333333;	padding: 10px; margin: 0px;  text-align: center;color:#fff;font-weight:bold;}


/* ▼▼▼ index #area1(コンベンションサポート) ▼▼▼ */
#area1 .area1L{float:left; margin-top:35px; text-align: left; width: 875px;}
#area1 .area1L h3{color:rgb(85, 85, 85); font-weight: 700; margin-bottom:20px;}
#area1 .area1R{float:right; margin-top:30px; width: 380px; height:280px; overflow: hidden;}

/* ▼▼▼ index #area2(運営のプロセス) ▼▼▼ */
#area2 .process{float:left; margin-top:35px; margin-bottom:15px; text-align: center; width: 382px; height:300px;  background-color:#fff; border-radius: 10px; padding:15px 0;}
#area2 .process_arrow{float:left; margin:35px 7px; position:relative; text-align: center; width: 50px; height:250px; padding:15px 0;}
#area2 .process_arrow img{position: absolute; top:0; right:0; bottom:0; left:0; margin:auto;}
#area2 .process h3{color:rgb(255, 255, 255); font-weight: 700; padding:7px 0; margin:0 10px; background-color:#f74e0b; border-radius: 20px;}
#area2 .process ul{text-align: left;color:rgb(0, 0, 0); padding:15px 20px 0 20px;}

/* ▼▼▼ index  #area3(サービス紹介) ▼▼▼ */
dl.caption-list{float: left; width: 600px; margin:25px 10px 0 10px; border:solid 1px #ccc; padding:7px; border-radius: 5px;}
dl.caption-list dt {float : left;}
dl.caption-list dd span{font-weight: bold; color:#f74e0b;}
dl.caption-list dd { height : 150px;  margin-left : 160px; text-align: left;}
dl.caption-list dd.Double { height : 150px;  margin-left : 160px; text-align: left;}
dl.caption-list img {  vertical-align : bottom; border-radius: 5px;}

/* ▼▼▼ index  #area4(実績紹介) ▼▼▼ */
#area4 .introduction{float:left; margin-top:35px; text-align: center; width: 320px; height:200px;}
#area4 .introduction h3{color:rgb(0, 0, 0); font-weight: 700; padding:0 15px;}
#area4 .introduction ul{text-align: left; color:rgb(0, 0, 0); padding:15px 15px 0 15px;}
#area4 .area1R{float:right; margin-top:35px; width: 400px; height:350px; overflow: hidden;}
/* --- 画像 --- */
.hexagon { position: relative; display: inline-block; margin: 0; width: 264px; height: 304px; overflow: hidden;}
.hexagon img {position: absolute; top: 0; left: 0;}
.hexagon img.mask { z-index: 100;}
.hexagon img.sky { height: 300px; width: auto;}
dl.introduction_sp{display: none !important;}

/* ▼▼▼ index  #area5(お知らせ) ▼▼▼ */
#area5 dl.Info {overflow: hidden; zoom: 1; text-align: left; margin:25px 0 50px 0;}
#area5 dl.Info dt {margin-bottom: 5px; padding-bottom: 5px; padding-left:15px; width: 150px; float: left; clear: both; font-weight: bold;}
#area5 dl.Info dd {margin-bottom: 5px; padding: 0 0 5px 0; border-bottom: 2px dotted #999;}

/* ▼▼▼ index  #area6(北九州グローバルMICE推進協議会) ▼▼▼ */
#area6 p.mice{font-weight:bold; margin-top:35px;} 
#area6 .mice_L{float:left; width:780px; text-align: left; margin-top:40px; color:rgb(0, 0, 0); } 
#area6 .mice_L p.mice2{font-weight:bold; color:rgb(0, 0, 0);} 
#area6 .mice_L ul{margin-top:25px;} 
#area6 .mice_R{float:right; margin-top:40px; margin-left:25px; width:390px; background-color: #fff; height: 500px; border-radius: 10px;/*角の丸み*/ } 
#area6 .mice_R h3{width:360px; margin: 10px 0 7px 15px; color:#fff; font-weight: 700; padding:7px 0; background-color: #f74e0b; border-radius: 5px;/*角の丸み*/ }
#area6 .mice_R ul{ text-align: left; padding:10px 25px;}
#area6 .mice_R ul li{ text-align: left; line-height: 1.45; margin-bottom: 0.35em;}

/* ▼▼▼ index もっと詳しく▼▼▼ */
.btnMore{margin-top:35px;}
.btnMore a{padding: 0.42em 1.3em; color: #f74e0b; background: #FFF; border: solid 2px #f74e0b; border-radius: 20px;}
.btnMore:hover{	-ms-filter:"alpha( opacity=70 )"; filter:alpha( opacity=70 ); opacity:0.7; }
.btnMore a:hover{ -ms-filter:"alpha( opacity=70 )";	filter:alpha( opacity=70 );	opacity:0.7; text-decoration: none; color: #f74e0b; }

/* ▼▼▼ index .contactBox ▼▼▼ */
.contactBox{clear:both; border:4px solid #cccccc; width: 900px; display: block; margin:0 auto;}
.contactBox p{background-color: #FFF; padding:10px 0;}

/* ------------------------------------------------------------------------------------------------------------------------
    960px〜1279px：小型PC
------------------------------------------------------------------------------------------------------------------------ */
@media screen and (min-width:960px) and (max-width:1279px) {

    /* ▼▼▼ #topimg ▼▼▼ */
    #topimg{margin-top:10px;}

    /* ▼▼▼ index #contents ▼▼▼ */
    #contents_top{width:100%; min-width:960px;}

    /* ▼▼▼ index #mainArea ▼▼▼ */
    #mainArea{width:100%; margin:0 auto; padding-bottom:50px;}

    /* ▼▼▼ index #column ▼▼▼ */
    #column{height: 520px;}
    #column02{height: 660px;}
    #column03{height: 700px;}
    #column04{height: 700px;}
    #column06{height: 750px;}

    /* ▼▼▼ index #area ▼▼▼ */
    #area1,#area2,#area3,#area5,#area6,#area7{width:960px;} 
    #area4{width:960px;}

    /* ▼▼▼ index #area1(コンベンションサポート) ▼▼▼ */ 
    #area1 .area1L{width: 580px;}
    #area1 .area1R{width: 361px; height:266px;}

    /* ▼▼▼ index #area2(運営のプロセス) ▼▼▼ */
    #area2 .process{width: 277px; height:330px;}
    #area2 .process ul{text-align: left;color:rgb(0, 0, 0); padding:10px;}
    
    /* ▼▼▼ index  #area3(サービス紹介) ▼▼▼ */
    dl.caption-list{width: 440px;}

    /* ▼▼▼ index  #area4(実績紹介) ▼▼▼ */
    #area4 .introduction{width: 312px;}
    dl.introduction_sp{display: none !important;}

    /* ▼▼▼ index  #area5(お知らせ) ▼▼▼ */
    #area5 dl.Info dt {padding-left:25px; width: 130px;}

    /* ▼▼▼ index  #area6(北九州グローバルMICE推進協議会) ▼▼▼ */
    #area6 .mice_L{width:570px; margin-top:50px;} 
    #area6 .mice_R{width:365px;  height: 490px;} 
    #area6 .mice_R h3{width:340px;}
    #area6 .mice_R ul{ text-align: left; padding:10px 20px;}
}

/* ------------------------------------------------------------------------------------------------------------------------
    600px〜959px：タブレット
------------------------------------------------------------------------------------------------------------------------ */
@media screen and (min-width:600px) and (max-width:959px) {

    /* ▼▼▼ #topimg ▼▼▼ */
    #topimg{margin-top:10px;}

    /* ▼▼▼ index #contents ▼▼▼ */
    #contents_top{width:100%; min-width:600px;}

    /* ▼▼▼ index #mainArea ▼▼▼ */
    #mainArea{width:100%; margin:0 auto; padding-bottom:50px;}

    /* ▼▼▼ index #column ▼▼▼ */
    #column{width:98%; padding:3% 1% 0 1%; height:auto; min-height:480px;}
    #column02{width:98%; padding:3% 1% 5% 1%; height:auto;}
    #column03{width:98%; padding:3% 1% 5% 1%; height: auto;}
    #column04{width:98%; padding:3% 1% 5% 1%; height: auto;}
    #column05{width:98%; padding:3% 1% 5% 1%; }
    #column06{width:98%; padding:3% 1% 5% 1%; height: auto;}
    #column07{width:98%; padding:3% 1% 5% 1%; }

    /* ▼▼▼ index #area ▼▼▼ */
    #area1,#area2,#area3,#area5,#area6,#area7{width:100%; text-align: center; margin:0 auto;} 
    #area4{width:100%; text-align: center; margin:0 auto;} 

    /* ▼▼▼ index #area1(コンベンションサポート) ▼▼▼ */
    #area1 .area1L{float:none; margin-top:25px; width: 94%; padding:0 3%;}
    #area1 h3{color:rgb(85, 85, 85); font-weight: 700; margin-top:35px;}
    #area1 .area1R{float:none; display: none !important;}

    /* ▼▼▼ index #area2(運営のプロセス) ▼▼▼ */
    #area2 p.ribon{margin-bottom:35px;}
    #area2 .process{float:none; margin:15px auto; width: 94%; height:auto;}
    #area2 .process_arrow{float:none; margin:0; position:relative; text-align: center; width: 95%; height:auto; padding:5px 0;}
    #area2 .process_arrow img{position: absolute; top:0; right:50%; bottom:0; left:50%; margin:0;}
    #area2 .process h3{color:rgb(255, 255, 255); font-weight: 700; padding:7px 0; margin:0 10px; background-color:#f74e0b; border-radius: 20px;}
    #area2 .process ul{text-align: left; color:rgb(0, 0, 0); padding:15px 20px 0 20px;}

    /* ▼▼▼ index  #area3(サービス紹介) ▼▼▼ */
    #area3 p.ribon{margin-bottom:35px;}
    dl.caption-list{float: none; width: 94%; margin:15px auto;}
    dl.caption-list dt {float : left;}
    dl.caption-list dd { height : 100px;  margin-left : 110px;}
    dl.caption-list dd.Double { height : 100px;  margin-left : 110px;}
    dl.caption-list img {  width:100px; height:100px;}

    /* ▼▼▼ index  #area4(実績紹介) ▼▼▼ */
    #area4 .introduction{display: none !important;}
        /* --- sp --- */
        dl.introduction_sp{display: block !important;  width: 94%; margin:15px auto; border:solid 1px rgb(255, 255, 255); padding:7px; border-radius: 5px;}
        dl.introduction_sp dt {float : left;}
        dl.introduction_sp dd span{font-weight: bold; color:#000000;}
        dl.introduction_sp dd { height : 100px;  margin-left : 110px; text-align: left;}
        dl.introduction_sp img { width:100px; height:100px; vertical-align : bottom; border-radius: 5px;}

    /* ▼▼▼ index  #area5(お知らせ) ▼▼▼ */
    #area5 p.ribon{margin-bottom:35px;} 
    #area5 dl.Info {width:94%; overflow: hidden; zoom: 1; text-align: left; margin:25px auto;}
    #area5 dl.Info dt {margin-bottom: 0px; padding-bottom: 0px; padding-left:0px; width: 150px; float:none; clear: both; font-weight: bold;}
    #area5 dl.Info dd {margin-bottom: 5px; padding: 0 0 5px 0; border-bottom: 2px dotted #999;}


    /* ▼▼▼ index  #area6(北九州グローバルMICE推進協議会) ▼▼▼ */
    #area6 p.mice{font-weight:bold; margin-top:35px;margin-bottom: 20px;} 
    #area6 .mice_L{float:none; width:94%; text-align: left; margin:0 auto; color:rgb(0, 0, 0); } 
    #area6 .mice_L p.mice2{font-weight:bold; color:rgb(0, 0, 0);} 
    #area6 .mice_L ul{margin-top:15px;} 
    #area6 .mice_R{float:none; width:90%; margin:25px auto; background-color: #fff; height: auto; overflow: auto;  padding-top: 10px;} 
    #area6 .mice_R h3{width:94%; margin:0 auto; color:#fff; font-weight: 400; padding:7px 0; background-color: #f74e0b; border-radius: 5px;/*角の丸み*/ }
    #area6 .mice_R ul{ text-align: left; padding:15px;}
    #area6 .mice_R ul li{padding-left: 12px; line-height: 1.65;margin-bottom: 0.5em;}
    #area6 .mice_R ul li:last-child{padding-bottom: 20px;}

    /* ▼▼▼ index もっと詳しく▼▼▼ */
    .btnMore{margin-top:20px;}
    .btnMore a{padding: 0.5em 1.3em;}

    /* ▼▼▼ index .contactBox ▼▼▼ */
    .contactBox{width: 94%; }
    .contactBox img{width: 100%;}

}


/* ------------------------------------------------------------------------------------------------------------------------
    480px〜599px：SP横
------------------------------------------------------------------------------------------------------------------------ */
@media screen and (min-width:480px) and (max-width:599px) { 

    h2{padding-top:25px;}

    /* ▼▼▼ #topimg ▼▼▼ */
    #topimg{ background:none; margin-top:0;}

    /* ▼▼▼ index #contents ▼▼▼ */
    #contents_top{width:100%; min-width:480px;}

    /* ▼▼▼ index #mainArea ▼▼▼ */
    #mainArea{width:100%; margin:0 auto; padding-bottom:50px;}
    
    /* ▼▼▼ index #column ▼▼▼ */
    #column{width:92%;  padding:3% 4% 0 4%; height:auto; min-height:450px;}
    #column02{width:92%;  padding:3% 4% 5% 4%; height:auto;}
    #column03{width:92%;  padding:3% 4% 5% 4%; height: auto;}
    #column04{width:92%;  padding:3% 4% 5% 4%; height: auto;}
    #column05{width:92%;  padding:3% 4% 5% 4%; }
    #column06{width:92%;  padding:3% 4% 5% 4%; height: auto;}
    #column07{width:92%;  padding:3% 4% 5% 4%; }
    
    /* ▼▼▼ index #area ▼▼▼ */
    #area1,#area2,#area3,#area5,#area6,#area7{width:100%; text-align: center; margin:0 auto;} 
    #area4{width:100%; text-align: center; margin:0 auto;}
    
    /* ▼▼▼ index #area1(コンベンションサポート) ▼▼▼ */
    #area1 .area1L{float:none; margin-top:25px; width: 94%; padding:0 3%;}
    #area1 h3{color:rgb(85, 85, 85); font-weight: 700; margin-top:35px;}
    #area1 .area1R{float:none; display: none !important;}  
 
    
    /* ▼▼▼ index #area2(運営のプロセス) ▼▼▼ */
    #area2 p.ribon{margin-bottom:35px;}
    #area2 .process{float:none; margin:15px auto; width: 100%; height:auto;}
    #area2 .process_arrow{float:none; margin:0; position:relative; text-align: center; width: 95%; height:auto; padding:5px 0;z-index:1;}
    #area2 .process_arrow img{position: absolute; top:0; right:50%; bottom:0; left:50%; margin:0;}
    #area2 .process h3{color:rgb(255, 255, 255); font-weight: 700; padding:7px 0; margin:0 10px; background-color:#f74e0b; border-radius: 20px;}
    #area2 .process ul{text-align: left; color:rgb(0, 0, 0); padding:15px 20px 0 20px;}
    
    /* ▼▼▼ index  #area3(サービス紹介) ▼▼▼ */
    #area3 p.ribon{margin-bottom:35px;}
    dl.caption-list{float: none; width: 98%; margin:15px auto;}
    dl.caption-list dt {float : left;}
    dl.caption-list dd { height : 130px;  margin-left : 145px;}
    dl.caption-list dd.Double { height : 130px;  margin-left : 145px;}
    dl.caption-list img {  width:130px; height:130px;}
    
    /* ▼▼▼ index  #area4(実績紹介) ▼▼▼ */
    #area4 .introduction{display: none !important;}
        /* --- sp --- */
        dl.introduction_sp{display: block !important;  width: 98%; margin:15px auto; border:solid 1px rgb(255, 255, 255); padding:7px; border-radius: 5px;}
        dl.introduction_sp dt {float : left;}
        dl.introduction_sp dd span{font-weight: bold; color:#000000;}
        dl.introduction_sp dd { height : 100px;  margin-left : 110px; text-align: left;}
        dl.introduction_sp img { width:100px; height:100px; vertical-align : bottom; border-radius: 5px;}
    

    /* ▼▼▼ index  #area5(お知らせ) ▼▼▼ */
    #area5 p.ribon{margin-bottom:35px;} 
    #area5 dl.Info {width:100%; overflow: hidden; zoom: 1; text-align: left; margin:25px 0 50px 0;}
    #area5 dl.Info dt {margin-bottom: 0px; padding-bottom: 0px; padding-left:0px; width: 150px; float:none; clear: both; font-weight: bold;}
    #area5 dl.Info dd {margin-bottom: 5px; padding: 0 0 5px 0; border-bottom: 2px dotted #999;}

    
    /* ▼▼▼ index  #area6(北九州グローバルMICE推進協議会) ▼▼▼ */
    #area6 p.mice{text-align: left; font-weight:bold; margin-top:35px;margin-bottom: 20px;} 
    #area6 h2 img{width:80%;} 
        #area6 .mice_L{float:none; width:100%; text-align: left; margin:0 auto; color:rgb(0, 0, 0); } 
        #area6 .mice_L p.mice2{font-weight:bold; color:rgb(0, 0, 0);} 
        #area6 .mice_L ul{margin-top:15px;} 
        #area6 .mice_R{float:none; width:100%; margin:25px auto; background-color: #fff; height: auto; overflow: auto;  padding-top: 10px;} 
        #area6 .mice_R h3{width:94%; margin:0 auto; color:#fff; font-weight: 400; padding:7px 0; background-color: #f74e0b; border-radius: 5px;/*角の丸み*/ }
        #area6 .mice_R ul{ text-align: left; padding:15px;}
        /* #area6 .mice_R ul li{float: left; padding-left: 12px;} */
        #area6 .mice_R ul li:last-child{padding-bottom: 20px;}
    
    /* ▼▼▼ index もっと詳しく▼▼▼ */
    .btnMore{margin-top:15px;}
    .btnMore a{ padding: 0.42em 1.3em;}
    
    /* ▼▼▼ index .contactBox ▼▼▼ */
    .contactBox{width: 100%; }
    .contactBox img{width: 100%;}
}

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

    h2{padding-top:25px;}

    /* ▼▼▼ #topimg ▼▼▼ */
    #topimg{margin-top:0;}

    /* ▼▼▼ index #contents ▼▼▼ */
    #contents_top{min-width:300px;}
    
    /* ▼▼▼ index #column ▼▼▼ */
    #column{width:92%; padding:3% 4% 0 4%; height:auto; min-height:480px;}
    #column02{width:92%; padding:3% 4% 5% 4%; height:auto;}
    #column03{width:92%; padding:3% 4% 5% 4%; height: auto;}
    #column04{width:92%; padding:3% 4% 5% 4%; height: auto;}
    #column05{width:92%; padding:3% 4% 5% 4%; }
    #column06{width:92%; padding:3% 4% 5% 4%; height: auto;}
    #column07{width:92%; padding:3% 4% 5% 4%; }
    
    /* ▼▼▼ index #area ▼▼▼ */
    #area1,#area2,#area3,#area5,#area6,#area7{width:100%; text-align: center; margin:0 auto;} 
    #area4{width:100%; text-align: center; margin:0 auto;}
    
    /* ▼▼▼ index #area1(コンベンションサポート) ▼▼▼ */ 
    #area1 h3{text-align: left; color:rgb(85, 85, 85); font-weight: 700; margin-top:15px;}
    #area1 .area1L{float:none; margin-top:15px; width: 100%;}
    #area1 .area1R{float:none; display: none !important;}
    #area1 .area1R img{display: none !important;}   

    /* ▼▼▼ index #area2(運営のプロセス) ▼▼▼ */
    #area2 p.ribon{margin-bottom:15px;}
    #area2 .process{float:none; margin:10px auto; width: 100%; height:auto;}
    #area2 .process_arrow{float:none; margin:0; position:relative; text-align: center; width: 95%; height:auto; padding:5px 0; z-index:1;}
    #area2 .process_arrow img{position: absolute; top:0; right:50%; bottom:0; left:50%; margin:0; }
    #area2 .process h3{color:rgb(255, 255, 255); font-weight: 700; padding:7px 0; margin:0 10px; background-color:#f74e0b; border-radius: 20px;}
    #area2 .process ul{text-align: left; color:rgb(0, 0, 0); padding:15px 20px 0 20px;}
    
    /* ▼▼▼ index  #area3(サービス紹介) ▼▼▼ */
    #area3 p.ribon{margin-bottom:15px;}
    dl.caption-list{float: none; width: 96%; margin:15px auto;}
    dl.caption-list dt {float : left; padding-top:15px;}
    dl.caption-list dd { height : 130px;  margin-left : 110px;}
    dl.caption-list dd.Double { height : 175px;  margin-left : 110px;}
    dl.caption-list img { width:100px; height:100px;}
    
    /* ▼▼▼ index  #area4(実績紹介) ▼▼▼ */
    #area4 .introduction{display: none !important;}
    #area4 p.ribon02{margin-bottom:-15px;}  
        /* --- sp --- */
        dl.introduction_sp{display: block !important;  width: 96%; margin:15px auto; border:solid 1px rgb(255, 255, 255); padding:7px; border-radius: 5px;}
        dl.introduction_sp dt {float : left;  padding-top:15px;}
        dl.introduction_sp dd span{font-weight: bold; color:#000000;}
        dl.introduction_sp dd { height : 130px;  margin-left : 110px; text-align: left;}
        dl.introduction_sp img { width:100px; height:100px; vertical-align : bottom; border-radius: 5px;}
    
    /* ▼▼▼ index  #area5(お知らせ) ▼▼▼ */
    #area5 p.ribon{margin-bottom:-15px;}    
    #area5 dl.Info {width:100%; overflow: hidden; zoom: 1; text-align: left; margin:25px 0 50px 0;}
    #area5 dl.Info dt {margin-bottom: 0px; padding-bottom: 0px; padding-left:0px; width: 150px; float:none; clear: both; font-weight: bold;}
    #area5 dl.Info dd {margin-bottom: 5px; padding: 0 0 5px 0; border-bottom: 2px dotted #999;}
    
    /* ▼▼▼ index  #area6(北九州グローバルMICE推進協議会) ▼▼▼ */
    #area6 p.mice{text-align: left; font-weight:bold; margin-top:35px;margin-bottom: 20px;} 
    #area6 h2 img{width:90%;} 
    #area6 .mice_L{float:none; width:100%; text-align: left; margin:0 auto; color:rgb(0, 0, 0); } 
    #area6 .mice_L p.mice2{font-weight:bold; color:rgb(0, 0, 0);} 
    #area6 .mice_L ul{margin-top:15px;} 
    #area6 .mice_R{float:none; width:100%; margin:25px auto; background-color: #fff; height: auto; overflow: auto;  padding-top: 10px;} 
    #area6 .mice_R h3{width:94%; margin:0 auto; color:#fff; font-weight: 400; padding:7px 0; background-color: #f74e0b; border-radius: 5px;/*角の丸み*/ }
    #area6 .mice_R ul{ text-align: left; padding:15px 5px;}
    #area6 .mice_R ul li{float: left; padding-left: 10px;line-height: 1.65;margin-bottom: 0.5em;}
    #area6 .mice_R ul li:last-child{padding-bottom: 20px;}

    #area7 p.ribon{margin-bottom:-15px;}
    
    /* ▼▼▼ index もっと詳しく▼▼▼ */
    .btnMore{margin-top:15px;margin-bottom:25px;}
    .btnMore a{ padding: 0.6em 1.3em;}
    
    /* ▼▼▼ index .contactBox ▼▼▼ */
    .contactBox{width: 97%; margin-top:-15px;}
    .contactBox img{width: 100%;}
}