Styleneat - CSS Organizer.
Return
Download style.css | Copy style.css

 
 
/* CSS Document */
@charset "UTF-8";

 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; }
body { font-family: Verdana,Arial,"メイリオ",Meiryo,"ヒラギノ角ゴPro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック",sans-serif; color: #333;}
h2 { font-family: Verdana,Arial,"メイリオ",Meiryo,"ヒラギノ角ゴPro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック",sans-serif; color: #333;}
ul, ol, dl,dt,dd,div,ol,ul,li { padding: 0; margin: 0; }
h1, h2, h3, h4, h5, h6, p { margin: 0; padding: 0; font-weight: normal; font-size: 90%; line-height:1.4; }
li { list-style-type: none; }
textarea { font-size: 100%; }

a { outline: none; }
img { vertical-align: middle;}
a img { border: 0; }
a:link { text-decoration: underline; color: #0F73BD;}
a:visited { text-decoration: none;}
a:active { text-decoration: none;}
li a:hover,
li a:active { text-decoration: none; }
.in_photo { margin-top:-40px;}

/*==========================================================================
　汎用クラス
============================================================================*/

.font_small { font-size: 10px }
.font_m { font-size: 12px }
.font_l { font-size: 14px }
.font_bold { font-weight: bold; }
.FLNM { float: left; }
.FRNM { float: right; }
.floatR { float: right; margin-left: 30px; margin-bottom: 20px; }
.floatL { float: left; margin-right: 30px; margin-bottom: 20px; }
.clear { clear: both; }

/*margin*/
.marginA { margin: auto; }
.marginB5 { margin-bottom: 5px; }
.marginB10 { margin-bottom: 10px; }
.marginB15 { margin-bottom: 15px; }
.marginB20 { margin-bottom: 20px; }
.marginB30 { margin-bottom: 30px; }
.marginB50 { margin-bottom: 50px; }
.marginB80 { margin-bottom: 80px; }
.marginB100 { margin-bottom: 100px; }
.marginR5 { margin-right: 5px; }
.marginR10 { margin-right: 10px; }
.marginR15 { margin-right: 15px; }
.marginR20 { margin-right: 20px; }
.marginR30 { margin-right: 30px; }
.marginR50 { margin-right: 50px; }
.marginR80 { margin-right: 80px; }
.marginR100 { margin-right: 100px; }
.marginT5 { margin-top: 5px; }
.marginT10 { margin-top: 10px; }
.marginT15 { margin-top: 15px; }
.marginT20 { margin-top: 20px; }
.marginT30 { margin-top: 30px; }
.marginT50 { margin-top: 50px; }
.marginT80 { margin-top: 80px; }
.marginT100 { margin-top: 100px; }
.marginL5 { margin-left: 5px; }
.marginL10 { margin-left: 10px; }
.marginL15 { margin-left: 15px; }
.marginL20 { margin-left: 20px; }
.marginL30 { margin-left: 30px; }
.marginL50 { margin-left: 50px; }
.marginL80 { margin-left: 80px; }
.marginL100 { margin-left: 100px; }

/*padding*/
.paddingB5 { padding-bottom: 5px; }
.paddingB10 { padding-bottom: 10px; }
.paddingB15 { padding-bottom: 15px; }
.paddingB20 { padding-bottom: 20px; }
.paddingB30 { padding-bottom: 30px; }
.paddingB50 { padding-bottom: 50px; }
.paddingB80 { padding-bottom: 80px; }
.paddingB100 { padding-bottom: 100px; }
.paddingR5 { padding-right: 5px; }
.paddingR10 { padding-right: 10px; }
.paddingR15 { padding-right: 15px; }
.paddingR20 { padding-right: 20px; }
.paddingR30 { padding-right: 30px; }
.paddingR50 { padding-right: 50px; }
.paddingR80 { padding-right: 80px; }
.paddingR100 { padding-right: 100px; }
.paddingT5 { padding-top: 5px; }
.paddingT10 { padding-top: 10px; }
.paddingT15 { padding-top: 15px; }
.paddingT20 { padding-top: 20px; }
.paddingT30 { padding-top: 30px; }
.paddingT50 { padding-top: 50px; }
.paddingT80 { padding-top: 80px; }
.paddingT100 { padding-top: 100px; }
.paddingL5 { padding-left: 5px; }
.paddingL10 { padding-left: 10px; }
.paddingL15 { padding-left: 15px; }
.paddingL20 { padding-left: 20px; }
.paddingL30 { padding-left: 30px; }
.paddingL50 { padding-left: 50px; }
.paddingL80 { padding-left: 80px; }
.paddingL100 { padding-left: 100px; }

/*text-align*/
.txtC { text-align: center; }
.txtR { text-align: right; }
.txtL { text-align: left; }

/*画像置換*/
.dkirBox { position: relative; z-index: 3; zoom: 1; /* いらない場合も */ }
.dkir { display: block; text-decoration: none; overflow: hidden; }
dkir:hover { background-position: left bottom; }
.dkir span { position: relative; z-index: -1; /* テクニックの要！ */ }

/*ロールオーバー*/
#headder_nav a:hover,
#side_menu ul li a:hover,
#sub_menu ul li a:hover,
#interview_footer_link a:hover,
#submit_btn:hover {
color:#2d8dd5;
opacity:0.7;
filter:alpha(opacity=70); /* for IE8 */
background:none!important;
zoom:1; /* for IE7 */
display:inline-block; /* for IE8 */
}

/*==========================================================================
　共通CSS
============================================================================*/

body { font-size:160%; width:100%; padding-top:170px; margin-top:-120px; overflow-x:hidden;}
#outer { background-color:#FFF; width:100%; }
.block { width:100%; margin:0 auto 0;}

.content_text h2 { text-align:center; font-size:140%; margin:0 auto 20px; line-height:1.6;}
.content_text p { text-align:center; font-size:100%; margin:0 auto 50px;}

.block_text p.jpn { text-align:center; font-size:120%; margin:0 auto 20px;}
.block_text p { text-align:center; font-size:100%; margin:0 auto 50px;}
h1 { font-size:0px !important;}
.en { font-size:75%; color:#666; padding-top:5px; font-weight:normal;}

/*==========================================================================
　共通部分
============================================================================*/

/*ヘッダー*/
#headder_outer { width:100%; background-color:#FFF; position:fixed; top:0; left:0; z-index:999; padding-top:0px; line-height:0;}
#headder { width:1000px; padding:10px; margin:0 auto 0;}
#headder .block01 { float:left;}
#headder .block02 { float:right;}
#headder .block02 li { float:left; background:url(../img/top_navi_bg.png) repeat-y top left; padding:0 10px;} 

/*メインイメージ*/
#main_image { position:relative; height:700px;}
#main_image .block01 { position:absolute; top:5%; left:43%;}
#main_image .block02 { position:absolute; top:35%; left:30%;}

/*各章見出し*/
.contents_tit { width:100%; background-color:#000; padding:10px 0 20px 0; margin-bottom:100px;}
.contents_tit .tit { margin:0 auto 0; width:95px;}
.contents_tit .yajirushi { margin:0 auto -31px; width:40px;}

/*事業内容*/
#service { background-color:#FFF; padding-bottom:200px;} 
.service_bg_cover { background: url(../img/service_contens_tit_bg01.jpg) no-repeat ; background-position:50% 0;background-attachment: fixed; -webkit-background-size: cover; background-size: cover;  padding-top:300px;}
#service_btn { width:100%; margin:0 auto 100px;}
#service_btn li { width:33%; float:left; background-color:#f2f2f2; margin-right:5px;}
#service_btn li.list01 a { width:100%; display:block; margin:0 auto 0; height:150px;}
#service_btn li.list01 a img { width:78px; margin:20px 0 0 39%;}
#service_btn li.list02 a { width:100%; display:block; margin:0 auto 0; height:150px;}
#service_btn li.list02 a img { width:90px; margin:20px 0 0 39%;}
#service_btn li.list03 a { width:100%; display:block; margin:0 auto 0; height:150px;}
#service_btn li.list03 a img { width:68px; margin:20px 0 0 42%;}
#service_btn li.list03 { margin-right:0px;}
.service_contens { width:500px; margin:0 auto 0px; position:relative; padding-top:120px;}
.service_contens dl { margin-bottom:0;}
.service_contens dt .tit { width:153px; margin:0 auto 20px;}
.service_contens dt p { text-align:center; width:500px; margin:0 auto 0;}
.service_contens dd .left { width:80px; float:left;}
.service_contens dd .right { width:420px; float:right;}
.service_contens dt { margin:0 auto 50px;}
.service_contens dd { background:url(../img/service_bg_dot.png) bottom repeat-x; margin:0 auto 10px; padding-bottom:10px;}
#service_contens_bg01 { position:absolute; top:70%; left:100%; background-image:none;}
#service_contens_bg02 { position:absolute; top:120%; left:-90%;  background-image:none;}
#service_contens_bg03 { position:absolute; top:180%; left:70%;  background-image:none;}
#service_contens_bg04 { position:absolute; top:0%; left:-120%;  background-image:none;}
#service_contens02 .tit { width:172px; margin:0 auto 20px;}
#service_contens02 p { text-align:center; width:500px; margin:0 auto 0;}
#service_contens02 .tit { width:172px; margin:0 auto 20px;}

/*ネットワーク*/
#network { background-color:#FFF; padding-bottom:200px;} 
.network_bg_cover { background: url(../img/service_contens_tit_bg03.jpg) no-repeat ; background-position:50% 0;background-attachment: fixed; -webkit-background-size: cover; background-size: cover;  padding-top:300px;}
#network_locationmap { position:relative; width:834px; margin:0 auto 0;}

/*会社概要*/ 
#company { background-color:#FFF; padding-bottom:200px;} 
.company_bg_cover { background: url(../img/service_contens_tit_bg02.jpg) no-repeat ; background-position:50% 0;background-attachment: fixed; -webkit-background-size: cover; background-size: cover;  padding-top:300px;}
#company table { margin:0 auto 0; width:600px; }
#company table th { width:24%; padding-top:10px; text-align:left; vertical-align:text-top;}
#company table td { width:76%; padding-top:10px;}
#company table .en { font-size:80%; color:#666; padding-top:0; font-weight:normal;}
#company table .bottom_border { border-bottom:#999 1px solid; padding-bottom:5px; }
#company table.map { margin:0 auto 0; width:450px; }
#company_parts { width:100%;}
#company_parts li { width:160px; float:left; border-right:#CCC 1px solid; padding-right:5px; margin-right:10px; min-height:300px;}
#company_parts li .img { width:98px; margin:0 auto 20px;}
#company_parts li.last { border-right: none; padding-right:0px; margin-right:0px;}

/*お問い合わせ*/
#contact { background-color:#FFF; padding-bottom:200px;} 
.contact_bg_cover { background: url(../img/service_contens_tit_bg04.jpg) no-repeat ; background-position:50% 0;background-attachment: fixed; -webkit-background-size: cover; background-size: cover;  padding-top:300px;}

/*メールフォーム*/
#contact h2 { font-size:110%;}
#contact table { margin:20px auto 0; padding:0; width:570px; line-height:1.0; font-size:80%; padding-top:50px; }
#contact table th { padding-bottom:5px; width:180px; padding-left:10px; font-weight:normal; padding-bottom:10px; padding-top:10px; text-align:right; padding-right:10px;}
#contact table td { vertical-align: middle;}
#confbt { width:131px; margin:50px auto 0;}
#form_choice_btn { width:458px; margin:50px auto 50px;}
#bt_check { width: 219px; margin: 80px auto 30px; }
#contact table .en {font-size:90%; color:#666; padding-top:0; font-weight:normal;}
#contact-form span.red { color:#C00;}
#contact-form.send_form td { border-bottom:#333 1px solid; }
#contact-form.send_form


/*19.12.19 tokumimold追加分*/
#tokumimold { background-color:#FFF; padding-bottom:80px;} 
.tokumimold_bg_cover { background-position:50% 0;background-attachment: fixed; -webkit-background-size: cover; background-size: cover;  padding-top:60px;}

/* フレックスボックスの基本設定 等間隔（両端揃え）折返しあり */
[class^="flex-col"] {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

/* コンテンツ下のマージン */
.flex-col2 {margin:0 auto 0px; position:relative; padding-top:120px; width: 80%; max-width: 1280px;}
.flex-child { margin-bottom: 10px; width: calc( (100% - 10px) / 2 );}

.flex-text { margin-bottom: 40px; width: 100%; text-align: center;}
.flex-child img { width: 100%; }

/* レスポンシブ対応 */
/* 575px以下で全て1列 */
@media screen and (max-width: 575px) {
	.flex-col2 .flex-child { width: 100%; }
}

/*Tokumi Mold 設備一覧 */
.equipment h2 {
  width: 80%;
  max-width: 1280px;
  text-align:left;
  font-size:120%;
  margin:0 auto 20px;
  line-height:1.6;
}


.equipment table {
  width: 80%;
  max-width: 1280px;
  border-collapse: collapse;
  margin: 0 auto;
  padding: 0;
  table-layout: fixed;
}

.equipment .category {width: 30%;}
.equipment .manufacturer {width: 30%;}
.equipment .model {width: 25%;}
.equipment .qty {width: 15%;}

.equipment table tr {
  background-color: #fff;
  padding: .35em;
  border-bottom: 1px solid #bbb;
}
.equipment table th,
.equipment table td {
  padding: 1em 10px 1em 1em;
}
.equipment table th {
  font-size: .85em;
}
.equipment table thead tr{
  background-color: #f0f0f0;
}
.equipment .txt{
   text-align: left;
   font-size: .85em;
}