*/
.block { margin:0; padding:0; }
.fl { float:left; }
.fr { float:right; }
.ft { clear: both; }
/* カラム落ち防止 レイアウト崩れ対応 */
.inner { overflow: hidden; }
.ofa { overflow: auto; }
/* 画像 左右の切り替え */
.lImg img { float:left; padding:.5em .5em .5em 0em; }
.rImg img { float:right; padding:.5em 0em .5em .5em; }
/* 余白 */
.padding5 {padding: 5px;}
.padding10 {padding: 10px;}
.padding20 {padding: 20px;}
.paddingl10 {padding-left:10px;}
.paddingr10 {padding-right:10px;}
.paddingt10 {padding-top:10px;}
.paddingl5 {padding-left:5px;}
.paddingr5 {padding-right:5px;}
.paddingtb10 {padding: 10px 0;}
.paddingtb20 {padding: 20px 0;}
.paddingb10 {padding-bottom:10px;}
.margin5 {margin: 5px;}
.margin10 {margin: 10px;}
.margint10 {margin-top: 10px;}
.marginb10 {margin-bottom: 10px;}
.margintb10 {margin: 10px 0;}
.margintb15 {margin: 15px 0;}
.margintb20 {margin: 20px 0;}
.margintb2 {margin: 2px 0;}
.marginl10 {margin-left:10px;}
.marginr10 {margin-right:10px;}
.marginl5 {margin-left:5px;}
.marginr5 {margin-right:5px;}
/* clearfix の代用 */
/* ■使い方
*/
div.hr { clear:both; }
div.hr hr { display:none; }
/* text-align */
.tal {text-align:left;}
.tac {text-align:center;}
.tar {text-align:right;}
/* line-height */
.lh150 { line-height:1.5; }
/*======== 2-1 : div#container ========*/
#container {
width: 750px;
margin: 0 auto;
text-align: left;
}
/*======== 2-2 : div#header ========*/
#header {
margin: 0 auto;
width: 750px;
height: 149px;
background: #fff url("../images/header.jpg") no-repeat;
position: relative;
font-size: 75%;
}
#header h1{
display: block;
width: 180px;
height: 49px;
position: absolute;
top: 35px;
}
#header h1 span{
display: block;
color: #0081C7;
margin: 5px 0 0 10px;
}
#header ul.language{
width: 170px;
height: 30px;
top: 0;
right: 0;
position: absolute;
overflow: hidden;
}
#header ul.language li,#header ul.language li a{
float: left;
width: 82px;
height: 21px;
text-align: center;
color: #999;
}
#header ul.language li.jp{
margin-left: 5px;
}
#header ul.language li.current {
background: url(../images/languageCurrent.jpg) top left no-repeat;
padding-top: 2px;
color: #fff;
}
#header ul.language li a{
background: url(../images/languageOut.jpg) top left no-repeat;
padding-top: 2px;
text-decoration: none;
}
#header ul.language li a:hover{
height: 30px;
background: url(../images/languageHover.jpg) top left no-repeat;
padding-top: 11px;
color: #ff6600;
}
#header address {
position: absolute;
color: #999;
text-align: right;
margin-right: 3px;
line-height: 1.3;
bottom: 50px;
right: 0;
}
#header address span {
color: #666;
display: block;
padding-top: 5px;
}
#header ul.menu, #header ul.emenu {
width: 750px;
position: absolute;
top: 109px;
}
#header ul.menu li, #header ul.menu li a, #header ul.emenu li, #header ul.emenu li a {
display: block;
float: left;
width: 107px;
height: 40px;
text-indent: -9999px;
overflow: hidden;
}
#header ul.menu li.products, #header ul.menu li.products a {
width: 108px;
}
#header ul.emenu li, #header ul.emenu li a {
width: 150px;
}
#header ul.menu li.top a {
background: url(../images/menuTopOut.jpg) no-repeat;
}
#header ul.menu li.top a:hover {
background: url(../images/menuTopHover.jpg) no-repeat;
}
#header ul.menu li.top a:active {
background: url(../images/menuTopActive.jpg) no-repeat;
}
#header ul.menu li.info a {
background: url(../images/menuInfoOut.jpg) no-repeat;
}
#header ul.menu li.info a:hover {
background: url(../images/menuInfoHover.jpg) no-repeat;
}
#header ul.menu li.info a:active {
background: url(../images/menuInfoActive.jpg) no-repeat;
}
#header ul.menu li.products a {
background: url(../images/menuProductsOut.jpg) no-repeat;
}
#header ul.menu li.products a:hover {
background: url(../images/menuProductsHover.jpg) no-repeat;
}
#header ul.menu li.products a:active {
background: url(../images/menuProductsActive.jpg) no-repeat;
}
#header ul.menu li.service a {
background: url(../images/menuServiceOut.jpg) no-repeat;
}
#header ul.menu li.service a:hover {
background: url(../images/menuServiceHover.jpg) no-repeat;
}
#header ul.menu li.service a:active {
background: url(../images/menuServiceActive.jpg) no-repeat;
}
#header ul.menu li.movie a {
background: url(../images/menuMovieOut.jpg) no-repeat;
}
#header ul.menu li.movie a:hover {
background: url(../images/menuMovieHover.jpg) no-repeat;
}
#header ul.menu li.movie a:active {
background: url(../images/menuMovieActive.jpg) no-repeat;
}
#header ul.menu li.company a {
background: url(../images/menuCompanyOut.jpg) no-repeat;
}
#header ul.menu li.company a:hover {
background: url(../images/menuCompanyHover.jpg) no-repeat;
}
#header ul.menu li.company a:active {
background: url(../images/menuCompanyActive.jpg) no-repeat;
}
#header ul.menu li.inquiry a {
background: url(../images/menuInquiryOut.jpg) no-repeat;
}
#header ul.menu li.inquiry a:hover {
background: url(../images/menuInquiryHover.jpg) no-repeat;
}
#header ul.menu li.inquiry a:active {
background: url(../images/menuInquiryActive.jpg) no-repeat;
}
/* English */
#header ul.emenu li.top a {
background: url(../images/emenuTopOut.jpg) no-repeat;
}
#header ul.emenu li.top a:hover {
background: url(../images/emenuTopHover.jpg) no-repeat;
}
#header ul.emenu li.top a:active {
background: url(../images/emenuTopActive.jpg) no-repeat;
}
#header ul.emenu li.info a {
background: url(../images/emenuInfoOut.jpg) no-repeat;
}
#header ul.emenu li.info a:hover {
background: url(../images/emenuInfoHover.jpg) no-repeat;
}
#header ul.emenu li.info a:active {
background: url(../images/emenuInfoActive.jpg) no-repeat;
}
#header ul.emenu li.products a {
background: url(../images/emenuProductsOut.jpg) no-repeat;
}
#header ul.emenu li.products a:hover {
background: url(../images/emenuProductsHover.jpg) no-repeat;
}
#header ul.emenu li.products a:active {
background: url(../images/emenuProductsActive.jpg) no-repeat;
}
#header ul.emenu li.movie a {
background: url(../images/emenuMovieOut.jpg) no-repeat;
}
#header ul.emenu li.movie a:hover {
background: url(../images/emenuMovieHover.jpg) no-repeat;
}
#header ul.emenu li.movie a:active {
background: url(../images/emenuMovieActive.jpg) no-repeat;
}
#header ul.emenu li.company, #header ul.emenu li.company a {
width: 150px;
}
#header ul.emenu li.company a {
background: url(../images/emenuCompanyOut.jpg) no-repeat;
}
#header ul.emenu li.company a:hover {
background: url(../images/emenuCompanyHover.jpg) no-repeat;
}
#header ul.emenu li.company a:active {
background: url(../images/emenuCompanyActive.jpg) no-repeat;
}
/*======== 2-3 : div#main ========*/
#main {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
font-size: 75%;
width: 748px;
}
#main:after {
content: "";
display: block;
clear: both;
}
*html #main {
width: 100%;
}
*html #main {
width: 748px;
}
#main h2 {
height: 25px;
background: url("../images/h2bg.jpg") no-repeat;
font-weight: bold;
font-size: 120%;
color: #0081C7;
clear: both;
}
#main h2 span{
display: block;
padding: 4px 0 0 10px;
}
#main h3 {
height: 25px;
background: url("../images/h3bg.jpg") repeat-x;
font-weight: bold;
font-size: 120%;
color: #666;
clear: both;
}
#main h3 span{
display: block;
padding: 4px 0 0 7px;
}
#main .date {
display: block;
text-align: right;
color: #999;
}
#main p {
clear: both;
padding: 10px 0;
line-height: 1.5;
}
#main .profile {
padding: 5px;
border: 1px solid #CFEBFF;
background: #F4FBFF;
margin-bottom: 20px;
line-height: 1.5;
}
#main .profile_fff {
border: none;
background: #fff;
}
#main .profile strong {
margin-bottom: 5px;
display: block;
padding-bottom: 2px;
border-bottom: 1px solid #fff;
color: #666;
}
#main .profile em {
font-weight: bold;
margin-bottom: 5px;
}
#main .profile .profile_img {
width: 120px;
}
#main .profile .profile_txt {
width: 565px;
}
#main .profile li {
margin-bottom: 10px;
}
#main .imgL, #main .imgR {
line-height: 1.5;
margin: 10px 0;
}
#main .imgL p, #main .imgR p {
clear: none;
}
#main .imgL img {
float: left;
margin: 5px 5px 0;
}
#main .imgR img {
float: right;
margin: 5px 5px 0;
}
#main table.imgLR {
line-height: 1.5;
font-size: 100%;
}
#main table.imgLR td {
vertical-align: top;
}
#main table.imgLR img {
margin: 5px;
}
#main ul.topicpath {
font-size: 90%;
margin-left: 10px;
}
#main ul.topicpath li {
float: left;
padding: 5px 20px 5px 0;
color: #666;
background: url(../images/topic.jpg) right top no-repeat;
}
#main ul.topicpath li a {
color: #666;
}
#main ul.topicpath li a:hover {
color: #ff6600;
}
#main ul.topicpath li.current {
font-weight: bold;
background: none;
}
#main dl.info , #main #right dl, #main #left dl {
clear: both;
margin: 0 0 10px 10px;
}
#main #left dl {
margin: 0 0 0 5px;
width: 400px;
position: relative;
}
#main #right dl {
width: 295px;
height: 225px;
overflow: auto;
}
#main #right dl.dlMedia {
height: 240px;
}
#main dl.info dt, #main #right dl dt, #main #left dl dt {
color: #007CC4;
float: left;
margin-top: 5px;
margin-right: 10px;
}
#main #left dl dt {
clear: both;
width: 150px;
margin: 5px 5px 5px 0;
line-height: 50px;
}
#main #left dl dt img {
margin-right: 5px;
}
#main #left dl dt span {
color: #007CC4;
height: 50px;
line-height: 50px;
vertical-align: middle;
zoom: 1;
}
#main dl.info dd, #main #right dl dd {
border-bottom:1px dotted #ccc;
margin: 5px 5px 2px 0;
padding-left:6.2em;
font-size: 95%;
color: #999;
padding-bottom: 8px;
}
#main #left dl dd {
height:60px;
line-height:60px;
}
#main dl.info dd a, #main #right dl dd a {
font-size: 110%;
display: block;
}
/* イベントレポート改修用 */
table.eventR {
clear: both;
font-size: 100%;
margin: 5px;
}
table.eventR td {
font-size: 100%;
padding: 5px;
vertical-align: middle;
}
table.eventR td span {
color: #007CC4;
}
#main table.deco, #main table.deco_l {
font-size: 100%;
border: 1px solid #ccc;
border-collapse: separate;
border-spacing: 3px;
margin: 15px auto;
text-align: center;
line-height: 140%;
}
#main table.deco_l {
margin: 5px 0;
text-align: left;
}
#main table.deco th, #main table.deco_l th {
font-weight: bold;
background: #EAF8FC;
padding: 10px 5px;
width: 150px;
color: #666;
}
#main table.deco td, #main table.deco_l td {
background: #f5f5f5;
padding: 5px;
}
#main table.deco ol, #main table.deco_l ol {
margin-left: 20px;
list-style-type: decimal;
}
#main table.deco li, #main table.deco_l li {
margin: 7px 0;
}
#main table.deco textarea {
width: 300px;
}
#main .service_img {
width: 185px;
margin-bottom: 10px;
}
#main .service_img p {
padding-top: 5px;
}
#main .service_txt {
width: 540px;
}
#main .service_txt p {
padding-top: 0;
}
#main .products_e .fl {
margin-right: 3px;
}
#main .products_e .fl p {
padding-top: 5px;
}
#main span.cl007 {
color: #007CC4;
}
/* 動画ライブラリー */
.pager {
clear: both;
padding: 10px 0;
}
.pager .number {
float: right;
padding: 10px 0;
text-align: center;
width: 500px;
}
.pager .number a {
border: 1px solid #999;
color: #666;
margin-right: 5px;
padding: 3px 7px;
text-decoration: none;
}
.pager .number a:hover {
background: #0081C7;
border: 1px solid #0081C7;
color: #fff;
}
.pager .number span.current {
background: #0081C7;
border: 1px solid #0081C7;
color: #fff;
margin-right: 5px;
padding: 3px 7px;
text-decoration: none;
}
.pager .number span.prev, .pager .number span.next {
color: #999;
margin-right: 10px;
}
.pager .number span.next {
margin-right: 0;
margin-left: 10px;
}
.pager .sort {
color: #666;
float: right;
padding: 10px 0;
text-align: center;
width: 135px;
}
.movieContent {
float: left;
width: 520px;
margin-top:15px;
}
.movieContent dl {
margin-left: 10px;
}
.movieContent dt {
clear: both;
float: left;
width: 160px;
height: 125px;
}
.movieContent dd {
float: right;
height: 125px;
width: 335px;
}
.movieContent dd span {
color: #0081C7;
margin-right: 10px;
}
#main .movieContent dd p {
clear: none;
}
.movieCat {
float: right;
width: 200px;
margin-top:15px;
}
.movieCat .inner {
margin-right: 10px;
margin-bottom: 10px;
}
.movieCat h3 {
border-right: 1px solid #ddd;
border-top: 1px solid #ddd;
border-left: 1px solid #ddd;
}
.movieCat ul {
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
border-left: 1px solid #ddd;
overflow: hidden;
_zoom: 1;
}
.movieCat ul li {
background: url(../images/bg_movieCat_li.gif) left center no-repeat;
border-top: 1px dotted #ccc;
overflow: hidden;
margin-top: -1px;
}
.movieCat ul li a {
display: block;
padding: 7px 5px 7px 15px;
zoom: 1;
}
/* 動画テンプレート */
table.tempTable {
font-size: 100%;
line-height: 1.6;
margin-bottom: 10px;
}
table.tempTable th {
font-size: 100%;
text-align: center;
}
#main table.tempTable th p {
text-align: center;
padding: 5px 0;
}
table.tempTable td {
font-size: 100%;
padding: 3px 10px;
vertical-align: top;
}
/*======== 2-4 : div#footer ========*/
#footer {
clear: both;
width: 750px;
height: 100px;
background: url("../images/footer.jpg") left top no-repeat;
text-align: center;
position: relative;
}
#footer ul {
clear: left;
position: relative;
left: 50%;
text-align: center;
margin-top: 15px;
float: left;
}
#footer ul li {
padding: 0 7px;
float: left;
border-left: 1px solid #999;
font-size: 75%;
position: relative;
right: 50%;
}
#footer ul li a {
color: #666;
}
#footer ul li a:hover {
color: #ff6600;
}
#footer ul li.first {
border-left: none;
}
#footer address {
font-size: 75%;
color: #999;
top: 47px;
left: 260px;
position: absolute;
}
/*======== 2-5 : トップページ ========*/
#main .topimg a img {
margin: 0 3px;
border: 6px solid #eee;
}
#main .topimg a:hover img {
margin: 0 3px;
border: 6px solid #FFB755;
}
#main .bnimg a img, #main .bnimg a:hover img {
border: none;
}
#main #left {
float: left;
width: 420px;
border-right: 1px solid #eee;
}
#main #left h2 {
}
#main #left h2.event {
width: 345px;
float: left;
}
/* 一覧表示用CSS */
#main #left span.more, #main #left span.more a, #main #right span.more, #main #right span.more a {
display: block;
float:left;
width: 70px;
height: 25px;
background: url("../images/h2bg.jpg") right top no-repeat;
font-size: 85%;
text-align: center;
}
#main #right span.more, #main #right span.more a {
width: 85px;
background: url("../images/h3bg.jpg") repeat-x;
}
#main #left span.more a, #main #right span.more a {
background: url("../images/arrow.jpg") left 9px no-repeat;
font-size: 100%;
color: #999;
text-decoration: none;
padding-top: 5px;
}
#main #left span.more a:hover, #main #right span.more a:hover {
color: #ff6600;
background: url("../images/arrowHover.jpg") left 9px no-repeat;
}
#main #left h3 {
}
#main #left .box {
float: left;
width: 195px;
color: #666;
margin: 5px 0 5px 5px;
position: relative;
}
#main #left .box img {
float: left;
width: 70px;
margin-right: 5px;
}
#main #left .box p {
margin: 0;
clear: none;
position: absolute;
bottom: -13px;
right: 0;
}
#main #left .box strong {
display: block;
font-weight: bold;
margin: 0;
color: #333;
font-size: 100%;
}
#main #left strong {
display: block;
margin: 7px 0 0 5px;
font-weight: bold;
font-size: 120%;
color: #007CC4;
}
#main #left ul{
margin: 5px 0 15px 30px;
list-style-type: disc;
}
#main #left ul li{
margin: 5px 0;
}
/* 動画ライブラリー */
#left table.movieTable {
font-size: 100%;
width: 100%;
}
#left table.movieTable td {
color: #999;
font-size: 100%;
line-height: 1.6;
text-align: center;
vertical-align: top;
width: 50%;
}
#main #left table.movieTable td strong {
font-size: 100%;
}
#main #right {
float: right;
width: 325px;
}
#main #right h3 {
float: left;
width: 220px;
}
/*======== 2-6 : お問い合わせ ========*/
#main table.inquiry {
width: 500px;
}
#main table.deco td.error{
background: #fff;
}
#main .privacy {
border: 1px solid #ccc;
margin: 0 auto;
text-align: center;
}
#main .privacy p, .privacy p {
color: #666;
line-height: 1.3;
padding: 0 10px;
margin: 5px 0 10px 0;
font-size: 75%;
}
#main .inquirySubmit, #main .inquirySubmitDecision, #main .inquirySubmitReturn {
display: block;
width: 300px;
height: 65px;
background: url(../images/inquiry.jpg) no-repeat;
text-indent: -9999px;
cursor: pointer;
border: 0;
margin: 15px auto 5px auto;
}
#main .submitb {
padding-left: 185px;
}
#main .inquirySubmitDecision, #main .inquirySubmitReturn {
width: 165px;
height: 55px;
background: url(../images/inquirySubmit.jpg) no-repeat;
margin: 5px 5px 5px 5px;
float: left;
}
#main .inquirySubmitReturn {
background: url(../images/inquiryReturn.jpg) no-repeat;
}
#main .thanks {
padding: 50px 0;
}
#main .red_s {
color: #cc0000;
}
/*======== 2-7 : エラーページ ========*/
#error {
font-size: 75%;
position: absolute;
width: 600px;
height: 320px;
left: 50%;
top: 50%;
margin-left: -300px;
margin-top: -170px;
}
#error .errorDetail {
margin-top: 10px;
padding: 10px;
background: #F4FBFF url(../images/error.jpg) right bottom no-repeat;
border: 1px solid #CFEBFF;
}
#error .errorDetail h1 {
font-size: 250%;
font-weight: bold;
}
#error .errorDetail p {
margin: 10px 0;
line-height: 1.4;
}
#error .errorDetail p span {
display: block;
color: #999;
}
/* new clearfix */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */