@charset "UTF-8"; /* Skin Name: Flat Skin - Layout Module Author: vicuna.jp - Layout: single, double-l, double, multi, multi2-l, multi2, special1, special2 - Eye catch: eye-h, eye-hb, eye-m, eye-c - Special: multi eye-c set1, multi2 eye-c set2 - Fixed width: f800, f850, f900, f950, f1000 - Other Class: gt, al */ body { margin: 0; position:relative; /*--ie7 z-index対応--*/ text-align: center; /*--ie6 margin:auto:対策-- */ } /*-----トップ黄色ライン-----*/ div#top_border { background-color: #f7bf07; margin:0 10px; height:10px; } div#header, div#content, div#footer { width: 95%; /*(60%~ | 600px~ | 60em~) etc.*/ min-width: 600px; max-width: 1000px; margin-right: auto; margin-left: auto; position: relative; text-align: left; } div#header { background: Transparent url(images/background/body_bg.png) repeat-y; z-index:2; } div#content { background: Transparent url(images/background/body_bg.png) repeat-y; z-index: 1; } div#footer { background: Transparent url(images/background/footer_bg.png) repeat-y; } /*---------------------------------------- Three Column Box -----------------------------------------*/ body.single div#columns { display:block; float:left; width:100%; height:150px; } body.single div#columns div.left_column { display:block; width:272px; padding:8px; float:left; border:1px solid #ccc; margin-left: 10px; } body.single div#columns div.right_column { display:block; width:272px; padding:8px; float:right; border:1px solid #ccc; margin-right:10px; background: Transparent url(images/background/bg.png) repeat-x; } /*======================================== Single Column Layout ┏━━━┓ ┃━━━┃ ┣━┳━┫ ┗━┻━┛ ========================================*/ body.individual div.entry { margin-top: 0; } body.single div#main { margin-left:18px; margin-right:18px; } /* Utilities ---------------*/ body.single div#utilities { background:Transparent url(images/background/top_bottom_bg.png) no-repeat center top; margin-left:18px; margin-right:18px; margin-bottom:15px; padding-top:10px; } body.single div#utilities ul { list-style-image:url(images/arrow.gif); list-style-position:outside; } body.single div#utilities dl { margin: 0; } body.single div#utilities dl.navi { border-right: 1px solid #ccc; float: left; margin-left:27px; margin-right:8px; width: 206px; display: inline; /* for IE6 */ } body.single div#utilities dl.navi dt { background: Transparent url(images/icons/icon_topics.png) no-repeat left; font-size:18px; padding-left:40px; padding-bottom:5px; } body.single div#utilities dl.sidebar1 { border-right: 1px solid #ccc; float: left; margin-right:8px; width: 206px; display: inline; /* for IE6 */ } body.single div#utilities dl.sidebar1 dt { background: Transparent url(images/icons/icon_spec.png) no-repeat left; font-size:18px; padding-left:40px; padding-bottom:5px; } body.single div#utilities dl.navi > *, body.single div#utilities dl.navi dt, body.single div#utilities dl.navi dd { margin-right: 8px; } body.single div#utilities dl.sidebar1 > *, body.single div#utilities dl.sidebar1 dt, body.single div#utilities dl.sidebar1 dd { margin-right: 8px; } body.single div#utilities dl.navi dt, body.single div#utilities dl.others dt, body.single div#utilities dl.sidebar1 dt, body.single div#utilities dl.sidebar2 dt { color:#666; border-bottom:1px solid #666; padding-top:15px; } body.single div#utilities dl.others { float: right; border-right: 1px solid #ccc; vertical-align:top; margin-right:8px; width: 206px; display: inline; /* for IE6 */ } body.single div#utilities dl.others dt { background: Transparent url(images/icons/icon_casestudy.png) no-repeat left; font-size:18px; padding-left:40px; padding-bottom:5px; } body.single div#utilities dl.others > *, body.single div#utilities dl.others dt, body.single div#utilities dl.others dd { margin-right: 8px; } body.single div#utilities dl.sidebar2 { float: right; vertical-align:top; margin-right:27px; width: 206px; display: inline; /* for IE6 */ } body.single div#utilities dl.sidebar2 dt { background: Transparent url(images/icons/icon_gallery.png) no-repeat left; font-size:18px; padding-left:40px; padding-bottom:5px; } body.single div#utilities dl.sidebar2 > *, body.single div#utilities dl.sidebar2 dt, body.single div#utilities dl.sidebar2 dd { margin-right: 8px; } body.single div#utilities dl.banner_area { margin:10px 7px; width:100%; height:100px; display:block; } body.single div#utilities dl.banner_area dt { float:left; display:block; padding:0 0 5px 0; background:none; } body.single div#utilities dl.banner_area dd { float:left; display:block; } body.single div#utilities dl.banner_area ul { list-style-image:none; display:block; margin:0; } body.single div#utilities dl.banner_area ul li { float:left; display:block; } body.single div#utilities dl.banner_area ul li.left_padding { padding-left:30px; } body.single div#utilities ul.thumb li { width: 20%; } /* clearfix */ body.single div#utilities { _height: 1px; min-height: 1px; /*¥*//*/ height: 1px; overflow: hidden; /**/ } body.single div#utilities:after { height: 0; visibility: hidden; content: "."; display: block; clear: both; } /*======================================== Double Column Layout - Sidebar on right ┏━━━┓┏┓ ┃━━━┃┃┃ ┗━━━┛┗┛ ========================================*/ body.double div#main { width: 719px; float: left; margin-left:18px; margin-right: -5px; border-right: 1px solid #eee; } /* Rightwand margin */ body.double div#main > *, body.double div#main p.topicPath, body.double div#main h1, body.double div#main div.entry, body.double div#main p.archives, body.double div#main div.freeSpace { margin-right: 10px; } /* Leftwand margin */ body.double div#utilities > *, body.double div#utilities dl.navi, body.double div#utilities dl.others { margin-left: 20px; width:170px; } /* Utilities ---------------*/ body.double div#utilities { width: 218; float: left; clear: right; } /*======================================== Double Column Layout - Sidebar on left ┏┓┏━━━┓ ┃┃┃━━━┃ ┗┛┗━━━┛ ========================================*/ body.double-l div#main { width: 75%; float: right; margin-left: -1px; border-left: 1px solid #eee; border-bottom: 1px solid #eee; } /* Reftwand margin */ body.double-l div#utilities > *, body.double-l div#utilities dl.navi, body.double-l div#utilities dl.others { margin-right: 15px; } /* Lightwand margin */ body.double-l div#main > *, body.double-l div#main p.topicPath, body.double-l div#main h1, body.double-l div#main div.entry, body.double-l div#main ul.flip, body.double-l div#main div#comment, body.double-l div#main div#trackback, body.double-l div#main p.archives, body.double-l div#main div.freeSpace { margin-left: 20px; } /* Utilities ---------------*/ body.double-l div#utilities { width: 25%; float: right; clear: left; } /*======================================== Multi Column Layout - Wing ! Negative Margin Layout ┏┓┏━━┓┏┓ ┃┃┃━━┃┃┃ ┗┛┗━━┛┗┛ ========================================*/ body.multi div#main { margin-right: -180px; float: left; width: 100%; background-position: 180px 0; /* for body.eye-c */ } body.multi div#main > * { margin-left: 210px; margin-right: 210px; } body.multi div#main p.topicPath, body.multi div#main ul#flip1, body.multi div#main div.entry, body.multi div#main p.archives, body.multi div#main div.freeSpace { margin-left: 210px; margin-right: 210px; } body.multi div#main h1 { margin-left: 180px; margin-right: 180px; } /* Utilities ---------------*/ body.multi div#utilities { float: right; clear: right; width: 180px; } /* dl.navi */ body.multi div#utilities dl.navi { margin: 0; border-right: 1px solid #eee; width: 180px; position: absolute; top: 0; left: 18px; background-color: #fff; } body.multi div#utilities dl.navi > *, body.multi div#utilities dl.navi dt, body.multi div#utilities dl.navi dd { margin-right: 10px; } /* dl.others */ body.multi div#utilities dl.others { margin:0; width:180px; position:absolute; top:0; right:18px; padding: 1px 0 5px; border-left: 1px solid #eee; background-color: #fff; } body.multi div#utilities dl.others > *, body.multi div#utilities dl.others dt, body.multi div#utilities dl.others dd { margin-left: 10px; } /*---3カラム横並びリスト---*/ body.multi div#main div.entry div.list_wrap { width:100%; float:left; display:block; } body.multi div#main div.entry div.list_wrap div.left_box { float:left; display:block; margin-right:10px; width:170px; } body.multi div#main div.entry div.list_wrap div.right_box { float:right; display:block; width:170; } /*======================================== Multi Column Layout - Double sidebar R ┏━━┓┏┓┏┓ ┃━━┃┃┃┃┃ ┗━━┛┗┛┗┛ ========================================*/ body.multi2 div#main { margin-right: -1px; border-right: 1px solid #eee; border-bottom: 1px solid #eee; float: left; width: 55%; } /* Rightwand margin */ body.multi2 div#main > *, body.multi2 div#main p.topicPath, body.multi2 div#main h1, body.multi2 div#main div.entry, body.multi2 div#main ul.flip, body.multi2 div#main div#comment, body.multi2 div#main div#trackback, body.multi2 div#main p.archives, body.multi2 div#main div.freeSpace { margin-right: 20px; } /* Utilities ---------------*/ body.multi2 div#utilities { float: right; clear: right; width: 45%; } /* dl.navi */ body.multi2 div#utilities dl.navi { margin: 0 -1px 0 0; border-right: 1px solid #eee; border-bottom: 1px solid #eee; float: left; width: 50%; } body.multi2 div#utilities dl.navi > *, body.multi2 div#utilities dl.navi dt, body.multi2 div#utilities dl.navi dd { margin-left: 15px; margin-right: 15px; } /* dl.others */ body.multi2 div#utilities dl.others { margin: 0; float: left; clear: right; width: 50%; _width: auto; /* for IE6 */ } body.multi2 div#utilities dl.others > *, body.multi2 div#utilities dl.others dt, body.multi2 div#utilities dl.others dd { margin-left: 15px; } body.multi2 div#utilities dl dd dl { padding: 0.3em 0; } /*======================================== Multi Column Layout - Double sidebar L ┏┓┏┓┏━━┓ ┃┃┃┃┃━━┃ ┗┛┗┛┗━━┛ ========================================*/ body.multi2-l div#main { margin-left: -1px; border-left: 1px solid #eee; border-bottom: 1px solid #eee; float: right; width: 55%; } /* Rightwand margin */ body.multi2-l div#main > *, body.multi2-l div#main p.topicPath, body.multi2-l div#main h1, body.multi2-l div#main div.entry, body.multi2-l div#main ul.flip, body.multi2-l div#main div#comment, body.multi2-l div#main div#trackback, body.multi2-l div#main p.archives, body.multi2-l div#main div.freeSpace { margin-left: 20px; } /* Utilities ---------------*/ body.multi2-l div#utilities { float: left; clear: left; width: 45%; } /* dl.navi */ body.multi2-l div#utilities dl.navi { margin-top: 0; margin-right: -1px; border-right: 1px solid #eee; border-bottom: 1px solid #eee; float: left; width: 50%; } body.multi2-l div#utilities dl.navi > *, body.multi2-l div#utilities dl.navi dt, body.multi2-l div#utilities dl.navi dd { margin-right: 15px; } /* dl.others */ body.multi2-l div#utilities dl.others { margin-top: 0; float: left; width: 50%; clear: right; _width: auto; /* for IE6 */ } body.multi2-l div#utilities dl.others > *, body.multi2-l div#utilities dl.others dt, body.multi2-l div#utilities dl.others dd { margin-left: 15px; margin-right: 15px; } body.multi2-l div#utilities dl dd dl { padding: 0.3em 0; } /*======================================== Eye Catch ========================================*/ /* Header - ---------------*/ body.eye-h div#header { height: 180px; background-image: url(images/eyecatch/image1.png); background-repeat: no-repeat; } body.eye-h div#header p.siteName { margin: 0; position: absolute; top: 55px; left: 30px; } body.eye-h div#header p.description { margin: 0; position: absolute; top: 80px; left: 30px; } body.eye-h ul#globalNavi { margin-bottom: 0; width: 100%; position: absolute; left: 0; bottom: 0; } /* Header Banner - ---------------*/ body.eye-hb div#header { padding-top: 0; } body.eye-hb div#header p.siteName { margin: 0; } body.eye-hb div#header p.siteName a { height: 180px; display: block; text-indent: -9999px; background-image: url(images/eyecatch/image1.png); background-repeat: no-repeat; overflow: auto; } body.eye-hb div#header p.description { display: none; } /* Content - ---------------*/ body.eye-c div#content { padding-top: 180px; background-image: url(images/eyecatch/image1.png); background-repeat: no-repeat; } body.eye-c div#utilities dl.navi { top: auto; } /* Main - ---------------*/ body.eye-m div#main { padding-top: 180px; background-image: url(images/eyecatch/image1.png); background-repeat: no-repeat; } /*======================================== Special Layout set ========================================*/ /* ---------------*/ body.set1 div#utilities dl.navi { top: 0; } body.set1 div#content { background-position: 180px 0; } /* ---------------*/ body.set2 div#utilities { position: absolute; top: 0; right: 0; } /* dl.navi */ body.set2 div#utilities dl.navi { margin: 0 0 0 -1px; border-right: none; border-left: 1px solid #eee; float: right; background-color: #fff; } body.set2 div#utilities dl.navi > *, body.set2 div#utilities dl.navi dt, body.set2 div#utilities dl.navi dd { margin-right: 0!important; } /* dl.others */ body.set2 div#utilities dl.others { margin-top: 180px; float: left; clear: left; } body.set2 div#utilities dl.others > *, body.set2 div#utilities dl.others dt, body.set2 div#utilities dl.others dd { margin-right: 15px!important; } /*======================================== Others ========================================*/ /* Navi on top ---------------*/ body.gt div#header { padding-top: 30px; background-position: left bottom; } body.gt ul#globalNavi { width: 100%; position: absolute; top: 0; left: 0; bottom: auto; } /* No Centering - ---------------*/ body.al div#header, body.al div#content, body.al div#footer { margin-left: 0; margin-right: 0; } /* Fixed 800px - ---------------*/ body.f800 div#header, body.f800 div#content, body.f800 div#footer { width: 800px; } /* Fixed 850px - ---------------*/ body.f850 div#header, body.f850 div#content, body.f850 div#footer { width: 850px; } /* Fixed 900px - ---------------*/ body.f900 div#header, body.f900 div#content, body.f900 div#footer { width: 900px; } /* Fixed 950px - ---------------*/ body.f950 div#header, body.f950 div#content, body.f950 div#footer { width: 950px; } /* Fixed 1000px - ---------------*/ body.f1000 div#header, body.f1000 div#content, body.f1000 div#footer { width: 1000px; }