/*
Theme Name: Twenty Twelve - child
Template: twentytwelve
*/
/* =Notes
--------------------------------------------------------------
This stylesheet uses rem values with a pixel fallback. The rem
values (and line heights) are calculated using two variables:
$rembase: 14;
$line-height: 24;
---------- Examples
* Use a pixel value with a rem fallback for font-size, padding, margins, etc.
padding: 5px 0;
padding: 0.357142857rem 0; (5 / $rembase)
* Set a font-size and then set a line-height based on the font-size
font-size: 16px
font-size: 1.142857143rem; (16 / $rembase)
line-height: 1.5; ($line-height / 16)
---------- Vertical spacing
Vertical spacing between most elements should use 24px or 48px
to maintain vertical rhythm:
.my-new-div {
margin: 24px 0;
margin: 1.714285714rem 0; ( 24 / $rembase )
}
---------- Further reading
http://snook.ca/archives/html_and_css/font-size-with-rem
http://blog.typekit.com/2011/11/09/type-study-sizing-the-legible-letter/
/* =Reset
-------------------------------------------------------------- */
/* Webフォント読み込み */
@import url(https://fonts.googleapis.com/css?family=Cinzel:900|Archivo+Black);
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-size: 100%;
vertical-align: baseline;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption,
th,
td {
font-weight: normal;
text-align: left;
}
h1,
h2,
h3,
h4,
h5,
h6 {
clear: both;
}
html {
overflow-y: scroll;
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
scroll-behavior: smooth; /*スムーズにスクロール 2022/04/12add*/
}
a:focus {
outline: thin dotted;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
display: block;
}
audio,
canvas,
video {
display: inline-block;
}
audio:not([controls]) {
display: none;
}
del {
color: #333;
}
ins {
background: #fff9c0;
text-decoration: none;
}
hr {
background-color: #ccc;
border: 0;
height: 1px;
margin: 10px;/**
margin-bottom: 1.714285714rem;**/
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
small {
font-size: smaller;
}
img {
border: 0;
-ms-interpolation-mode: bicubic;
}
/* Clearing floats */
.clear:after,
.wrapper:after,
.format-status .entry-header:after {
clear: both;
}
.clear:before,
.clear:after,
.wrapper:before,
.wrapper:after,
.format-status .entry-header:before,
.format-status .entry-header:after {
display: table;
content: "";
}
/* =Repeatable patterns
-------------------------------------------------------------- */
/* Small headers */
.archive-title,
.page-title,
/**ウィジェットのタイトル**/
.widget-title{
font-size: 14px;
/* color:#000000;色の指定 */
line-height: 1.1 ; /* 見出しの高さ */
position: relative;
padding: .75em 1em .75em 2.5em;/**2.5emが、左からの文字位置**/
}
.widget-title::after {/**左アクセントを入れる**/
position: absolute;
top: .5em;
left: 1em;/**左からの位置**/
content: '';
width: 8px;/**アクセント幅**/
height: -webkit-calc(100% - 1em);
height: calc(100% - 1em);
background-color: #c13832;
border-radius: 0px;/**角丸める default:4px**/
}
.entry-content th,
.comment-content th {
font-size: 11px;
font-size: 0.785714286rem;
line-height: 2.181818182;
font-weight: bold;
text-transform: uppercase;
color: #636363;
}
/* Shared Post Format styling */
article.format-quote footer.entry-meta,
article.format-link footer.entry-meta,
article.format-status footer.entry-meta {
font-size: 11px;
font-size: 0.785714286rem;
line-height: 2.181818182;
}
/* Form fields, general styles first */
button,
input,
select,
textarea {
border: 1px solid #ccc;
border-radius: 3px;
font-family: inherit;
padding: 6px;
padding: 0.428571429rem;
}
button,
input {
line-height: normal;
}
textarea {
font-size: 100%;
overflow: auto;
vertical-align: top;
}
/* Reset non-text input types */
input[type="checkbox"],
input[type="radio"],
input[type="file"],
input[type="hidden"],
input[type="image"],
input[type="color"] {
border: 0;
border-radius: 0;
padding: 0;
}
/* Buttons */
.menu-toggle,
/*input[type="submit"],*/
input[type="submit"] { /* お問合せ 送信ボタン*/
font-size: 100%;
padding-right: 100px;
padding: 0.2em 0.4em;
background: #28982c;
/* background: #DBC967; */
color: #ffffff;
border-radius: 4px;
width: 50%;
height:50px;
cursor: pointer;
font-weight: bold;
box-shadow: 0 4px 0px rgba(0,0,0,0.3);
}
input[type="button"],
input[type="reset"],
article.post-password-required input[type=submit],
.bypostauthor cite span {
padding: 6px 10px;
padding: 0.428571429rem 0.714285714rem;
font-size: 11px;
font-size: 0.785714286rem;
line-height: 1.428571429;
font-weight: normal;
color: #7c7c7c;
background-color: #e6e6e6;
background-repeat: repeat-x;
background-image: -moz-linear-gradient(top, #f4f4f4, #e6e6e6);
background-image: -ms-linear-gradient(top, #f4f4f4, #e6e6e6);
background-image: -webkit-linear-gradient(top, #f4f4f4, #e6e6e6);
background-image: -o-linear-gradient(top, #f4f4f4, #e6e6e6);
background-image: linear-gradient(top, #f4f4f4, #e6e6e6);
border: 1px solid #d2d2d2;
border-radius: 3px;
box-shadow: 0 1px 2px rgba(64, 64, 64, 0.1);
}
.menu-toggle,
button,
/*input[type="submit"],*/
input[type="button"],
input[type="reset"] {
cursor: pointer;
}
button[disabled],
input[disabled] {
cursor: default;
}
.menu-toggle:hover,
.menu-toggle:focus,
button:hover,
/*input[type="submit"]:hover,*/
input[type="submit"]:hover { /* お問合せ 送信ボタン マウスオーバー時*/
font-size: 100%;
padding-right: 100px;
padding: 0.2em 0.4em;
background: #ebe9e3;
color: #4d4e53;
border-radius: 4px;
width: 50%;
height:50px;
cursor: pointer;
box-shadow: 0 4px 0px rgba(0,0,0,0.3);
}
input[type="button"]:hover,
input[type="reset"]:hover,
article.post-password-required input[type=submit]:hover {
color: #5e5e5e;
background-color: #ebebeb;
background-repeat: repeat-x;
background-image: -moz-linear-gradient(top, #f9f9f9, #ebebeb);
background-image: -ms-linear-gradient(top, #f9f9f9, #ebebeb);
background-image: -webkit-linear-gradient(top, #f9f9f9, #ebebeb);
background-image: -o-linear-gradient(top, #f9f9f9, #ebebeb);
background-image: linear-gradient(top, #f9f9f9, #ebebeb);
}
.menu-toggle:active,
.menu-toggle.toggled-on,
button:active,
/*input[type="submit"]:active,*/
/* お問合せ 送信ボタン アクティブ時 効いていない
input[type="submit"]:active {
font-size: 100%;
padding-right: 100px;
padding: 0.2em 0.4em;
background: #ebe9e3;
color: #4d4e53;
border-radius: 4px;
width: 50%;
height:50px;
cursor: pointer;
box-shadow: 0 0 1px rgba(181, 235, 178, 1);
border: 5px solid #DBC967;
}
*/
input[type="button"]:active,
input[type="reset"]:active {
color: #757575;
background-color: #e1e1e1;
background-repeat: repeat-x;
background-image: -moz-linear-gradient(top, #ebebeb, #e1e1e1);
background-image: -ms-linear-gradient(top, #ebebeb, #e1e1e1);
background-image: -webkit-linear-gradient(top, #ebebeb, #e1e1e1);
background-image: -o-linear-gradient(top, #ebebeb, #e1e1e1);
background-image: linear-gradient(top, #ebebeb, #e1e1e1);
box-shadow: inset 0 0 8px 2px #c6c6c6, 0 1px 0 0 #f4f4f4;
border-color: transparent;
}
.bypostauthor cite span {
color: #fff;
background-color: #21759b;
background-image: none;
border: 1px solid #1f6f93;
border-radius: 2px;
box-shadow: none;
padding: 0;
}
/* Responsive images */
.entry-content img,
.comment-content img,
.widget img {
max-width: 100%; /* Fluid images for posts, comments, and widgets */
image-rendering: -webkit-optimize-contrast; /* 2022/4/12ぼやける件対処 */
}
img[class*="align"],
img[class*="wp-image-"],
img[class*="attachment-"] {
height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */
}
img.size-full,
img.size-large,
img.header-image,
img.wp-post-image {
max-width: 100%;
height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */
}
/* Make sure videos and embeds fit their containers */
embed,
iframe,
object,
video {
max-width: 100%;
}
.entry-content .twitter-tweet-rendered {
max-width: 100% !important; /* Override the Twitter embed fixed width */
}
/* Images */
.alignleft {
float: left;
}
.alignright {
float: right;
}
.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.entry-content img,
.comment-content img,
.widget img,
img.header-image,
.author-avatar img,
img.wp-post-image {
/* Add fancy borders to all WordPress-added images but not things like badges and icons and the like */
/* border-radius: 3px;*/
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
image-rendering: -webkit-optimize-contrast; /* 2022/4/12ぼやける件対処 */
}
.wp-caption {
max-width: 100%; /* Keep wide captions from overflowing their container. */
padding: 4px;
}
.wp-caption .wp-caption-text,
.gallery-caption,
.entry-caption {
font-style: italic;
font-size: 12px;
font-size: 0.857142857rem;
line-height: 2;
color: #757575;
}
img.wp-smiley,
.rsswidget img {
border: 0;
border-radius: 0;
box-shadow: none;
margin-bottom: 0;
margin-top: 0;
padding: 0;
}
.entry-content dl.gallery-item {
margin: 0;
}
.gallery-item a,
.gallery-caption {
width: 90%;
}
.gallery-item a {
display: block;
}
.gallery-caption a {
display: inline;
}
.gallery-columns-1 .gallery-item a {
max-width: 100%;
width: auto;
}
.gallery .gallery-icon img {
height: auto;
max-width: 90%;
padding: 5%;
}
.gallery-columns-1 .gallery-icon img {
padding: 3%;
}
/* Navigation */
.site-content nav {
clear: both;
line-height: 2;
overflow: hidden;
}
#nav-above {
padding: 24px 0;
padding: 1.714285714rem 0;
}
#nav-above {
display: none;
}
.paged #nav-above {
display: block;
}
.nav-previous,
.previous-image {
float: left;
width: 50%;
}
.nav-next,
.next-image {
float: right;
text-align: right;
width: 50%;
}
.nav-single + .comments-area,
#comment-nav-above {
margin: 48px 0;
margin: 3.428571429rem 0;
}
/* Author profiles */
.author .archive-header {
margin-bottom: 10px;/**
margin-bottom: 1.714285714rem;**/
}
.author-info {
border-top: 1px solid #ededed;
margin: 24px 0;
margin: 1.714285714rem 0;
padding-top: 24px;
padding-top: 1.714285714rem;
overflow: hidden;
}
.author-description p {
color: #757575;
font-size: 13px;
font-size: 0.928571429rem;
line-height: 1.846153846;
}
.author.archive .author-info {
border-top: 0;
margin: 0 0 48px;
margin: 0 0 3.428571429rem;
}
.author.archive .author-avatar {
margin-top: 0;
}
/* =Basic structure
-------------------------------------------------------------- */
/* Body, links, basics */
html {
font-size: 87.5%;
}
body { /* 全体のフォント指定？ */
font-size: 14px;
font-size: 1rem;
/*font-family: Helvetica, Arial, sans-serif;*/
font-family:'メイリオ',Arial,Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',sans-serif;/* フォント:追加部分 */
text-rendering: optimizeLegibility;
color: #333333; /* default: #444 →少し濃いめ#333333 ※2020.02 検討中 */
}
body.custom-font-enabled {
font-family: "Open Sans", Helvetica, Arial, sans-serif;
}
a {
outline: none;
color: #0044CC; /* リンクの色ずっと#21759bだった */
}
a:hover {
color: #0f3647;
}
/* Assistive text */
.assistive-text,
.site .screen-reader-text {
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
overflow: hidden;
height: 1px;
width: 1px;
}
.main-navigation .assistive-text:focus,
.site .screen-reader-text:hover,
.site .screen-reader-text:active,
.site .screen-reader-text:focus {
background: #fff;
border: 2px solid #333;
border-radius: 3px;
clip: auto !important;
color: #000;
display: block;
font-size: 14px; /* -- 12px→14px 2020.02.14 update 変わってない様子-- */
height: auto;
padding: 12px;
position: absolute;
top: 5px;
left: 5px;
width: auto;
z-index: 100000; /* Above WP toolbar */
}
/* Page structure */
.site {
padding: 0 5px 0px; /**ページ全体左右余白（現在：余白5px）**/
/**padding: 01.714285714 0.857142857rem;**/
background-color: #fff; /**ページ余白部分の背景色（デフォルト：白#ffffff、現在薄い赤グレー#F1F0F0→これで余白っぽくなくなる）**/
}
.site-content {
margin: /**24px**/5px 0 0;/**コンテンツ余白（現在5px）**/
/**margin: 1.714285714 0 0;**/
}
.widget-area {
margin: 3px 3px 3px 3px;/**ウィジェット余白→上右下左（default:24px）**/
/**margin: 1.714285714 0 0;**/
}
/* Header */
.site-header {
background-color:#FFFFFF; /*薄い赤グレー：#F1F0F0*/
padding: /**24px**/5px 0; /**ヘッダー部全体の上下の余白**/
/**padding: 1.714285714 0.857142857rem 0;**/
}
.site-header h1,
.site-header h2 {
text-align: center;
margin-bottom: 8px;
}
.site-header h1 a,
.site-header h2 a {
color: #515151;
display: inline-block;
text-decoration: none;
}
.site-header h1 a:hover,
.site-header h2 a:hover {
color: #21759b;
}
.site-header h1 {/**サイトタイトル (600pxより小さい時のフォントサイズ)**/
margin: 0;
font-size: 14px;
/**font-size: 1.714285714rem;**/
/*line-height: 2.000;*/
}
.site-header h1 img {/**サイトタイトルの画像imgとテキストを、中央揃えに**/
vertical-align:middle;
}
.site-header h2 {/** キャッチフレーズ mobile**/
margin: 0 0 1em 0;
font-weight: normal;
font-size: 12px;
line-height: 1.1; /** 1.846153846; **/
color: #333333; /* old:#757575 2021.08.24update */
}
.header-image {
margin-top: 0px;
}
/* Navigation Menu(Gナビ) */
.main-navigation {
margin-top: 5px;
text-align: center;
background: #c13832; /*Gナビ背景色 #c13832：くすんだ赤*/
}
.main-navigation li {
margin-top: 5px;
font-size: 13px; /* -- 12px→13px 2020.02.14 update-- */
/*font-size: 0.857142857rem;*/
line-height: 1.42857143;
/**line-height: 20px;25px;**/
font-weight:bold;
/* padding-left: 5px;
text-align: center;
vertical-align: middle;
*/
}
/** の次に来るに対してだけ、「border-left」で、メニューに区切り線
.main-navigation li+ li {
border-left: 1px solid #FFFFFF;
}
**/
.main-navigation a {
color: #5e5e5e;
}
.main-navigation a:hover ,/**親メニュー文字色（マウスが載ったとき）※600pxより小さい時で、効いてない様子**/
.main-navigation a:focus {
color: #21759b; /**親メニュー文字色（フォーカスを得たとき）※600pxより小さい時で、効いてない様子**/
}
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
display: none;
}
.main-navigation ul.nav-menu.toggled-on,
.menu-toggle {
display: inline-block;
}
/* Banner */
section[role="banner"] {
margin-bottom: 10px;/**
margin-bottom: 3.428571429rem;**/
}
/* Sidebar */
.widget-area .widget { /**サイドバー ウィジェット**/
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
margin-bottom: 10px;/**48px; ウィジェット間の下部空白
margin-bottom: 3.428571429rem;**/
word-wrap: break-word;
}
.widget-area .widget h2{ /**ウィジェットのH2**/
font-size: 18px; /* 14px→16pxに変更 2020.01.06 16→18pxに 2020.04.03 */
line-height: 1.1 ; /* 見出しの高さ */
position: relative;
padding: .75em 1em .75em 1.0em;/**2.5emが、左からの文字位置 2.5em→1.0emに変更 2020.04.03**/
}
.widget-area .widget h2::after {/**左アクセントを入れる**/
position: absolute;
top: .5em;
left: 0.1em;/**左からの位置 1em→0.1emに変更 2020.04.03**/
content: '';
width: 8px;/**アクセント幅**/
height: -webkit-calc(100% - 1em);
height: calc(100% - 1em);
background-color: #c13832;
border-radius: 0px;/**角丸める default:4px**/
}
.widget-area .widget h3 {/**ウィジェットのH3 カテゴリ一覧の見出し用 **/
font-size: 18px; /* 14px→18pxに変更 2020.01.06 */
/* color:#000000;色の指定 */
line-height: 1.1 ; /* 見出しの高さ */
position: relative;
padding: .75em 1em .75em 1.0em;/**1.8emが、左からの文字位置**/
margin: 0 ;
}
.widget-area .widget h3::after {
position: absolute;
top: .5em;
left: 0.1em;/**左からの位置**/
content: '';
width: 8px;/**アクセント幅**/
height: -webkit-calc(100% - 1em);
height: calc(100% - 1em);
background-color: #c13832;
border-radius: 0px;/**角丸める default:4px**/
}
.widget-area .widget p,
/**.widget-area .widget li,**/
.widget-area .widget li {/**ウィジェットのカテゴリリスト （日付表示の文字列に効く）**/
margin-left: 10px;
font-size: 12px; /* 以前は9pxで大丈夫だったが、なぜかウィジェットのカテゴリ一覧本文の文字が小さいため、12pxに変更 2018/01/25*/
line-height: 1.5em; /* 2018/01/25 フォント大きくした↑のにともなって追記*/
}
.widget-area .widget li a {/**ウィジェットのカテゴリリスト アンカー文字（カテゴリ一覧のタイトルに効く）**/
margin-left: 0px;
font-size: 12px;
color: #4d4e53;
}
.widget-area .widget li a:visited {
color: #4d4e53;
}
.widget-area .widget .textwidget {
font-size: 12px;/**ウィジェットのテキストのフォントサイズ
font-size: 0.928571429rem;**/
line-height: 1.846153846;
margin-left: 0; /* ウィジェットで右寄りになるのを防ぐため but 効いてない*/
clear: both; /* 効いてない */
}
.widget-area .widget .textwidget img { /* 左に余白ができるのを直す */
clear: both;
}
.widget-area .widget p {
margin-bottom: 5px; /**24px;
margin-bottom: 1.714285714rem;**/
}
.widget-area .textwidget ul {
list-style: none; /* default: list-style: disc outside; */
margin: 0 0 24px;
margin: 0 0 1.714285714rem;
}
.widget-area .textwidget li {
margin-left: 0px;/*
margin-left: 2.571428571rem;*/
}
.widget-area .widget a { /**ウィジェットのリンク （『＞＞What's New! を詳しく見る』の箇所に効く）**/
color: #0044CC; /* old #343539 */
font-size: 12px;
margin-left: 0px; /* 左端余白 */
font-weight: bold;
text-decoration: none;
}
.widget-area .widget a:hover {/**ウィジェットのリンク （『＞＞What's New! を詳しく見る』の箇所に効く）**/
color: #0044CC; /* old #32bbc1 */
}
.widget-area .widget a:hover img{/**ウィジェットのリンク 画像の場合、マウスオーバーで半透明に**/
background-color:#FFF;
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
.widget-area .widget a:visited {
color: #0044CC; /* #32bbc1 */
}
.widget-area #s {
width: 53.66666666666%; /* define a width to avoid dropping a wider submit button */
}
/* Footer（フッタ） */
footer[role="contentinfo"] {
background-color: #1c1f21; /*背景色(フッタ下部) before → 濃いグレー#4d4e53*/
color: #ffffff; /*フォント 白*/
border-top: 1px solid #ededed;
clear: both;
font-size: 12px;
font-size: 0.857142857rem;
line-height: 2;
max-width: 960px;
max-width: 68.571428571rem;
margin-top: 0px;/**24px;
margin-top: 1.714285714rem;**/
margin-left: auto;
margin-right: auto;
padding: 0px;/**24px 0;
padding: 1.714285714rem 0;**/
vertical-align:middle;
text-align:center;
}
footer[role="contentinfo"] a {/* リンク色の設定 */
color: #ffffff; /*フォント 白*/
}
footer[role="contentinfo"] a:hover {/* マウスオーバー時の色 */
color: #555;
}
/* =Main content and comment content
-------------------------------------------------------------- */
.entry-meta {
clear: both;
}
.entry-header {
margin-bottom: 5px;/**14px;固定ページ h1 の下スペース**/
/**margin-bottom: 1rem;**/
}
.entry-header img.wp-post-image {
margin: 5px;
/**margin-bottom: 0.5rem;**/
display: block; /**アイキャッチ画像を中央に**/
margin-left: auto;
margin-right: auto;
}
/**記事見出し**/
.entry-header .entry-title {
font-size: 21px;
/**font-size: 1.428571429rem;**/
line-height: 1.8;
font-weight: bold;
/*border-bottom: 1px solid #333;*/
background-repeat: no-repeat; /* 繰り返し無し */
background-position: left center;
padding: 0 0 0 20px ;
border-left: 10px solid #4d4e53; /*左ライン*/
background-color: #e2e2e4; /*背景 old:#d7d3c8 2021.07.16update*/
border-bottom: 0px solid #4d4e53;/**下線**/
color: #4d4e53;/**文字色**/
}
.entry-header .entry-title a { /**記事見出しがリンクだったとき**/
color: #4d4e53;/**文字色**/
text-decoration: none;
}
.entry-header .entry-format {
margin-top: 5px;/**24px;
margin-top: 1.714285714rem;**/
font-weight: normal;
}
.entry-header .comments-link {
display: none; /**『コメントをどうぞ』リンクは、非表示**/
/*
margin-top: 24px;
margin-top: 1.714285714rem;
font-size: 13px;
font-size: 0.928571429rem;
line-height: 1.846153846;
color: #757575;
*/
}
.comments-link a,
.entry-meta a {
color: #757575;
}
.comments-link a:hover,
.entry-meta a:hover {
color: #21759b;
}
article.sticky .featured-post {
border-top: 4px double #ededed;
border-bottom: 4px double #ededed;
color: #757575;
font-size: 13px;
font-size: 0.928571429rem;
line-height: 3.692307692;
margin-bottom: 5px;/**
margin-bottom: 1.714285714rem;**/
text-align: center;
}
.entry-content,
.entry-summary,
.mu_register {
line-height: 1.714285714;
}
.entry-content h1,
.comment-content h1,
.entry-content h2,
.comment-content h2,
.entry-content h3,
.comment-content h3,
.entry-content h4,
.comment-content h4,
.entry-content h5,
.comment-content h5,
.entry-content h6,
.comment-content h6 {
margin: 24px 0;
margin: 1.714285714rem 0;
line-height: 1.714285714;
}
/**見出しH1**/
.entry-content h1{
font-size: 21px;
line-height: 1.5 ; /* 見出しの高さ */
position: relative;
padding: .20em 0 .25em .50em;
border-left: 10px solid #c13832;
border-bottom: 1px solid #c13832;/**下線**/
}
.entry-content h1::after {/**左アクセントを入れる**/
position: absolute;
top: .5em;
left: .5em;
content: '';
width: 10px;/**アクセント幅**/
height: -webkit-calc(100% - 1em);
height: calc(100% - 1em);
/* background-color: #c13832; */
border-radius: 0px;/**角丸める default:4px**/
}
.comment-content h1 {
font-size: 21px;
font-size: 1.5rem;
line-height: 1.5;
}
/**見出しH2**/
.entry-content h2{
font-size: 18px;
/* color:#000000;色の指定 */
line-height: 1.1 ; /* 見出しの高さ */
position: relative;
padding: .75em 1em .75em 1.8em;/**1.8emが、左からの文字位置**/
/* margin: 0 ; これで、余白なくなる？ */
background-color: #F4F4F4; /*背景色 2022.08.04update*/
}
.entry-content h2::after {/**左アクセントを入れる**/
position: absolute;
top: .5em;
left: 0.6em;/**左からの位置**/
content: '';
width: 8px;/**アクセント幅**/
height: -webkit-calc(100% - 1em);
height: calc(100% - 1em);
background-color: #c13832;
border-radius: 0px;/**角丸める default:4px**/
}
.comment-content h2,
.mu_register h2 {
font-size: 18px;
font-size: 1.285714286rem;
line-height: 1.6;
}
/**見出しH3**/
.entry-content h3{
font-size: 16px;
/* color:#000000;色の指定 */
line-height: 1.1 ; /* 見出しの高さ */
position: relative;
padding: .75em 1em .75em 2.5em;/**2.5emが、左からの文字位置**/
margin: 0 ; /* これで、余白なくなる？ */
}
.entry-content h3::after {/**左アクセントを入れる**/
position: absolute;
top: .5em;
left: 1.2em;/**左からの位置**/
content: '';
width: 7px;/**アクセント幅**/
height: -webkit-calc(100% - 1em);
height: calc(100% - 1em);
background-color: #c13832;
border-radius: 0px;/**角丸める default:4px**/
}
.comment-content h3 {
font-size: 16px;
font-size: 1.142857143rem;
line-height: 1.846153846;
}
/**.entry-content h4,**/
.entry-content h4 { /* カテゴリ一覧の見出し用 */
font-size: 14px;
/* color:#000000;色の指定 */
line-height: 1.1 ; /* 見出しの高さ */
position: relative;
padding: .75em 1em .75em 1.0em;/**1.8emが、左からの文字位置**/
margin: 0 ; /* これで、余白なくなる？ */
}
.entry-content h4::after {
position: absolute;
top: .5em;
left: 0.1em;/**左からの位置**/
content: '';
width: 8px;/**アクセント幅**/
height: -webkit-calc(100% - 1em);
height: calc(100% - 1em);
background-color: #c13832;
border-radius: 0px;/**角丸める default:4px**/
}
.comment-content h4 {
font-size: 14px;
font-size: 1rem;
line-height: 1.846153846;
}
.entry-content h5{
font-size: 14px;
color:#FFFFFF; /* 文字色 */
line-height: 1.0 ; /* 見出しの高さ */
position: relative;
padding: .75em 1em .75em 2.8em;/**2.8emが、左からの文字位置**/
background-color: #4d4e53;
margin: 0 ; /* これで、余白なくなる？ */
}
.entry-content h5::after {/**左アクセントを入れる**/
position: absolute;
top: .5em;
left: 1.2em;/**左からの位置**/
content: '';
width: 7px;/**アクセント幅**/
height: -webkit-calc(100% - 1em);
height: calc(100% - 1em);
background-color: #d7d3c8;
border-radius: 0px;/**角丸める default:4px**/
}
.comment-content h5 {
font-size: 18px;/**
font-size: 0.928571429rem;**/
line-height: 1.846153846;
}
/**見出しH6 （２色の下線ライン）**/
/**.entry-content h6,**/
.entry-content h6 {
position: relative;
border-bottom: 3px solid #ccc;
font-size: 1.25em; /* 1.25倍サイズ */
text-align: center;/* 中央揃え */
width: 75%;
margin: 1em auto;
}
.entry-content h6::after {
position: absolute;
bottom: -3px;
left: 0;
z-index: 2;
content: '';
width: 20%;
height: 3px;
background-color: #3274c1; /* old: #3498db*/
}
.comment-content h6 {
font-size: 12px;
font-size: 0.857142857rem;
line-height: 1.846153846;
}
/**クラス追加(line2color:２色の下線)**/
.entry-content line2color {
position: relative;
padding-bottom: .5em;
border-bottom: 4px solid #ccc;
font-weight: bold;
}
.entry-content line2color::after {
position: absolute;
bottom: -4px;
left: 0;
z-index: 2;
content: '';
width: 20%;
height: 4px;
background-color: #3274c1; /**先頭のラインの色 #3498db**/
}
/**クラス追加(example:例文章用)**/
.entry-content example {
font-size: 9px;
margin-left: 20px;
color: #c13832;
}
/**クラス追加(circle_top：先頭に○マーク)**/
.entry-content circle_top {
position: relative;
padding: .75em 1em .75em 2em;
border: 0px solid #ccc;
border-top: 0px solid #3498db;
/**background: -webkit-linear-gradient(top, #fff 0%, #f0f0f0 100%);**/
/**background: linear-gradient(to bottom, #fff 0%, #f0f0f0 100%);**/
/**box-shadow: 0 -1px 0 rgba(255, 255, 255, 1) inset;**/
font-weight: bold;
}
.entry-content circle_top::after {
position: absolute;
top: 0.8em;
left: .6em;
z-index: 2;
content: '';
width: 10px;
height: 10px;
border: 3px solid #c13832;/**○の色**/
border-radius: 100%
}
/**クラス追加(explain：補足行付き) ※現在、未使用**/
.entry-content explain {
padding-bottom: .5em;
border-bottom: 0px solid #ccc;
font-size: 19px;
font-family: 'Cinzel','メイリオ';/**Webフォント使う? Times New Roman**/
font-weight: bold;
color: #6b6964; /* */
}
.entry-content explain span {/**spanで囲む：補足行**/
display: block;
margin-bottom: .2em;
color: #444; /* */
font-size: .6em;
font-weight: normal;
}
/**クラス追加(skyisthelimit：補足行付き Sky is the limit用)**/
.entry-content skyisthelimit {
padding-bottom: .5em;
border-bottom: 0px solid #ccc;
font-family: Cinzel;/**Webフォント使う? Times New Roman**/
font-size: 36px;
font-weight: bold;
color: #3274c1; /**メインの赤に合うターコイズブルー#32bbc1**/
/**text-shadow: 1px 1px 1px #999999; 影**/
}
.entry-content skyisthelimit span {/**spanで囲む：補足行**/
display: block;
margin-bottom: .2em;
color: #4d4e53; /* #aaa */
font-size: .3em;
font-family: メイリオ;
font-weight: normal;
}
.entry-content p,
.entry-summary p,
.comment-content p,
.mu_register p {
margin: 0 0 5px; /* pのbottomマージンなくす */
/* margin: 0 0 1.714285714rem; */
line-height: 1.714285714;
}
.entry-content a {
color: #0044CC; /* 固定ページのリンクに効く 2016年～#32bbc1*/
}
.entry-content a:visited {
color: #0044CC; /* 固定ページのリンクに効く*/
}
.entry-content a:hover {
color: #0044CC; /* 固定ページのリンクに効く*/
}
.comment-content a:visited {
color: #0044CC; /* 固定ページのリンクに効く*/
}
.entry-content .more-link {
white-space: nowrap;
}
.entry-content ol,
.comment-content ol,
.entry-content ul,
.comment-content ul,
.mu_register ul {
margin: 0 0 24px;
margin: 0 0 0; /* default:0 0 1.714285714rem; 下余白なしに変更*/
/* line-height: 1.714285714;*/
line-height: 1.3;
}
.entry-content ul ul,
.comment-content ul ul,
.entry-content ol ol,
.comment-content ol ol,
.entry-content ul ol,
.comment-content ul ol,
.entry-content ol ul,
.comment-content ol ul {
margin-bottom: 0;
}
.entry-content ul,
.comment-content ul,
.mu_register ul {
list-style: disc outside;
}
.entry-content ol,
.comment-content ol {
list-style: decimal outside;
}
.entry-content li,
.comment-content li,
.mu_register li {
margin: 0 0 0 36px;
margin: 0 0 0 2.571428571rem;
}
.entry-content blockquote,
.comment-content blockquote {
margin-bottom: 5px;/**
margin-bottom: 1.714285714rem;**/
padding: 24px;
padding: 1.714285714rem;
font-style: italic;
}
.entry-content blockquote p:last-child,
.comment-content blockquote p:last-child {
margin-bottom: 0;
}
.entry-content code,
.comment-content code {
font-family: Consolas, Monaco, Lucida Console, monospace;
font-size: 12px;
font-size: 0.857142857rem;
line-height: 2;
}
.entry-content pre,
.comment-content pre {
border: 1px solid #ededed;
color: #666;
font-family: Consolas, Monaco, Lucida Console, monospace;
font-size: 12px;
font-size: 0.857142857rem;
line-height: 1.714285714;
margin: 24px 0;
margin: 1.714285714rem 0;
overflow: auto;
padding: 24px;
padding: 1.714285714rem;
}
.entry-content pre code,
.comment-content pre code {
display: block;
}
.entry-content abbr,
.comment-content abbr,
.entry-content dfn,
.comment-content dfn,
.entry-content acronym,
.comment-content acronym {
border-bottom: 1px dotted #666;
cursor: help;
}
.entry-content address,
.comment-content address {
display: block;
line-height: 1.714285714;
margin: 0 0 24px;
margin: 0 0 1.714285714rem;
}
img.alignleft,
.wp-caption.alignleft {
margin: 3.5px 3.5px 3.5px 0;
margin: 0.25rem 0.25rem 0.25rem 0;
}
img.alignright,
.wp-caption.alignright {
margin: 3.5px 3.5px 3.5px 0;
margin: 0.25rem 0.25rem 0.25rem 0;
}
img.aligncenter,
.wp-caption.aligncenter {
clear: both;
margin-top: 3.5px;
margin-top: 0.25rem;
margin-bottom: 3.5px;
margin-bottom: 0.25rem;
}
.entry-content embed,
.entry-content iframe,
.entry-content object,
.entry-content video {
margin-bottom: 5px;/**
margin-bottom: 1.714285714rem;**/
}
.entry-content dl,
.comment-content dl {
margin: 0 24px;
margin: 0 1.714285714rem;
}
.entry-content dt,
.comment-content dt {
font-weight: bold;
line-height: 1.714285714;
}
.entry-content dd,
.comment-content dd {
line-height: 1.7;
/* line-height: 1.714285714;*/
margin-bottom: 5px;/**
margin-bottom: 1.714285714rem;**/
}
.entry-content table,
.comment-content table {
border-bottom: 1px solid #ededed;
color: #333333; /* body と合わせる 元→#444*/
font-size: 12px;
font-size: 0.857142857rem;
line-height: 2;
margin: 0 0 24px;
margin: 0 0 1.714285714rem;
width: 100%;
}
.entry-content table caption,
.comment-content table caption {
font-size: 16px;
font-size: 1.142857143rem;
margin: 24px 0;
margin: 1.714285714rem 0;
}
.entry-content td,
.comment-content td {
border-top: 1px solid #ededed;
padding: 6px 10px 6px 0;
}
.site-content article {
border-bottom: 4px double #ededed;
margin-bottom: 5px;/**
margin-bottom: 1rem;**/
padding-bottom: 5px;/**
padding-bottom: 1rem;**/
word-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
.page-links {
clear: both;
line-height: 1.714285714;
}
footer.entry-meta {
margin-top: 14px;
margin-top: 1rem;
font-size: 13px;
font-size: 0.928571429rem;
line-height: 1.846153846;
color: #757575;
}
.single-author .entry-meta .by-author {
display: none;
}
.mu_register h2 {
color: #757575;
font-weight: normal;
}
/* =Archives
-------------------------------------------------------------- */
.archive-header,
.page-header {
margin-bottom: 5px;/**
margin-bottom: 3.428571429rem;**/
padding-bottom: 22px;
padding-bottom: 1.571428571rem;
border-bottom: 1px solid #ededed;
}
.archive-meta {
color: #757575;
font-size: 12px;
font-size: 0.857142857rem;
line-height: 2;
margin-top: 10px;/**
margin-top: 1.571428571rem;**/
}
/* =Single audio/video attachment view
-------------------------------------------------------------- */
.attachment .entry-content .mejs-audio {
max-width: 400px;
}
.attachment .entry-content .mejs-container {
margin-bottom: 10px;
}
/* =Single image attachment view
-------------------------------------------------------------- */
.article.attachment {
overflow: hidden;
}
.image-attachment div.attachment {
text-align: center;
}
.image-attachment div.attachment p {
text-align: center;
}
.image-attachment div.attachment img {
display: block;
height: auto;
margin: 0 auto;
max-width: 100%;
}
.image-attachment .entry-caption {
margin-top: 8px;
margin-top: 0.571428571rem;
}
/* =Aside post format
-------------------------------------------------------------- */
article.format-aside h1 {
margin-bottom: 5px;/**
margin-bottom: 1.714285714rem;**/
}
article.format-aside h1 a {
text-decoration: none;
color: #4d525a;
}
article.format-aside h1 a:hover {
color: #2e3542;
}
article.format-aside .aside {
padding: 24px 24px 0;
padding: 1.714285714rem;
background: #d2e0f9;
border-left: 22px solid #a8bfe8;
}
article.format-aside p {
font-size: 13px;
font-size: 0.928571429rem;
line-height: 1.846153846;
color: #4a5466;
}
article.format-aside blockquote:last-child,
article.format-aside p:last-child {
margin-bottom: 0;
}
/* =Post formats
-------------------------------------------------------------- */
/* Image posts */
article.format-image footer h1 {
font-size: 13px;
font-size: 0.928571429rem;
line-height: 1.846153846;
font-weight: normal;
}
article.format-image footer h2 {
font-size: 11px;
font-size: 0.785714286rem;
line-height: 2.181818182;
}
article.format-image footer a h2 {
font-weight: normal;
}
/* Link posts */
article.format-link header {
padding: 0 10px;
padding: 0 0.714285714rem;
float: right;
font-size: 11px;
font-size: 0.785714286rem;
line-height: 2.181818182;
font-weight: bold;
font-style: italic;
text-transform: uppercase;
color: #848484;
background-color: #ebebeb;
border-radius: 3px;
}
article.format-link .entry-content {
max-width: 80%;
float: left;
}
article.format-link .entry-content a {
font-size: 22px;
font-size: 1.571428571rem;
line-height: 1.090909091;
text-decoration: none;
}
/* Quote posts */
article.format-quote .entry-content p {
margin: 0;
/* padding-bottom: 24px; */
padding-bottom: 0px; /**段落後の余白？**/
/* padding-bottom: 1.714285714rem; */
}
article.format-quote .entry-content blockquote {
display: block;
padding: 0 3px 3px 10px;/**投稿記事の余白？
padding: 1.714285714rem 1.714285714rem 0;**/
font-size: 15px;
font-size: 1.071428571rem;
line-height: 1.6;
font-style: normal;
color: #6a6a6a;
background: #efefef;
}
/* Status posts */
.format-status .entry-header {
margin-bottom: 5px;/**
margin-bottom: 1.714285714rem;**/
}
.format-status .entry-header header {
display: inline-block;
}
.format-status .entry-header h1 {
font-size: 15px;
font-size: 1.071428571rem;
font-weight: normal;
line-height: 1.6;
margin: 0;
}
.format-status .entry-header h2 {
font-size: 12px;
font-size: 0.857142857rem;
font-weight: normal;
line-height: 2;
margin: 0;
}
.format-status .entry-header header a {
color: #757575;
}
.format-status .entry-header header a:hover {
color: #21759b;
}
.format-status .entry-header img {
float: left;
margin-right: 21px;
margin-right: 1.5rem;
}
/* =Comments
-------------------------------------------------------------- */
.comments-title {
margin-bottom: 10px;/**
margin-bottom: 3.428571429rem;**/
font-size: 16px;
font-size: 1.142857143rem;
line-height: 1.5;
font-weight: normal;
}
.comments-area article {
margin: 24px 0;
margin: 1.714285714rem 0;
}
.comments-area article header {
margin: 0 0 48px;
margin: 0 0 3.428571429rem;
overflow: hidden;
position: relative;
}
.comments-area article header img {
float: left;
padding: 0;
line-height: 0;
}
.comments-area article header cite,
.comments-area article header time {
display: block;
margin-left: 85px;
margin-left: 6.071428571rem;
}
.comments-area article header cite {
font-style: normal;
font-size: 15px;
font-size: 1.071428571rem;
line-height: 1.42857143;
}
.comments-area cite b {
font-weight: normal;
}
.comments-area article header time {
line-height: 1.714285714;
text-decoration: none;
font-size: 12px;
font-size: 0.857142857rem;
color: #5e5e5e;
}
.comments-area article header a {
text-decoration: none;
color: #5e5e5e;
}
.comments-area article header a:hover {
color: #21759b;
}
.comments-area article header cite a {
color: #444;
}
.comments-area article header cite a:hover {
text-decoration: underline;
}
.comments-area article header h4 {
position: absolute;
top: 0;
right: 0;
padding: 6px 12px;
padding: 0.428571429rem 0.857142857rem;
font-size: 12px;
font-size: 0.857142857rem;
font-weight: normal;
color: #fff;
background-color: #0088d0;
background-repeat: repeat-x;
background-image: -moz-linear-gradient(top, #009cee, #0088d0);
background-image: -ms-linear-gradient(top, #009cee, #0088d0);
background-image: -webkit-linear-gradient(top, #009cee, #0088d0);
background-image: -o-linear-gradient(top, #009cee, #0088d0);
background-image: linear-gradient(top, #009cee, #0088d0);
border-radius: 3px;
border: 1px solid #007cbd;
}
.comments-area .bypostauthor cite span {
position: absolute;
margin-left: 5px;
margin-left: 0.357142857rem;
padding: 2px 5px;
padding: 0.142857143rem 0.357142857rem;
font-size: 10px;
font-size: 0.714285714rem;
}
.comments-area .bypostauthor cite b {
font-weight: bold;
}
a.comment-reply-link,
a.comment-edit-link {
color: #686868;
font-size: 13px;
font-size: 0.928571429rem;
line-height: 1.846153846;
}
a.comment-reply-link:hover,
a.comment-edit-link:hover {
color: #21759b;
}
.commentlist .pingback {
line-height: 1.714285714;
margin-bottom: 5px;/**
margin-bottom: 1.714285714rem;**/
}
/* Comment form */
#respond {
margin-top: 10px;/**
margin-top: 3.428571429rem;**/
}
#respond h3#reply-title {
font-size: 16px;
font-size: 1.142857143rem;
line-height: 1.5;
}
#respond h3#reply-title #cancel-comment-reply-link {
margin-left: 10px;
margin-left: 0.714285714rem;
font-weight: normal;
font-size: 12px;
font-size: 0.857142857rem;
}
#respond form {
margin: 24px 0;
margin: 1.714285714rem 0;
}
#respond form p {
margin: 11px 0;
margin: 0.785714286rem 0;
}
#respond form p.logged-in-as {
margin-bottom: 5px;/**
margin-bottom: 1.714285714rem;**/
}
#respond form label {
display: block;
line-height: 1.714285714;
}
#respond form input[type="text"],
#respond form textarea {
-moz-box-sizing: border-box;
box-sizing: border-box;
font-size: 12px;
font-size: 0.857142857rem;
line-height: 1.714285714;
padding: 10px;
padding: 0.714285714rem;
width: 100%;
}
#respond form p.form-allowed-tags {
margin: 0;
font-size: 12px;
font-size: 0.857142857rem;
line-height: 2;
color: #5e5e5e;
}
.required {
color: red;
}
/* =Front page template
-------------------------------------------------------------- */
.entry-page-image {
margin-bottom: 5px;/**
margin-bottom: 1rem;**/
}
.template-front-page .site-content article {
border: 0;
margin-bottom: 0;
}
.template-front-page .widget-area {
clear: both;
float: none;
width: auto;
padding-top: 24px;
padding-top: 1.714285714rem;
border-top: 1px solid #ededed;
}
.template-front-page .widget-area .widget li {
margin: 0;/* default: 8px 0 0; */
margin: 0.571428571rem 0 0;
font-size: 13px;/* フロントページのカテゴリ一覧のフォントサイズ
font-size: 0.928571429rem;*/
line-height: 1.714285714;
list-style-type: none; /* カテゴリ一覧のリストマークをなくす default：square*/
list-style-position: inside;
}
.template-front-page .widget-area .widget li a {
color: #444; /* カテゴリ一覧のタイトルカラー 以前は、#757575 →2018.01.05に、ボディ色と合わせて変更*/
font-size: 15px; /* カテゴリ一覧のタイトルに効く */
text-decoration: none;
}
.template-front-page .widget-area .widget li a:hover {
color: #21759b;
}
.template-front-page .widget-area .widget_text img {
/* フロントページ テキストウィジェット imgの設定をコメントアウトしてみる
float: left;
margin: 8px 24px 8px 0;
margin: 0.571428571rem 1.714285714rem 0.571428571rem 0;
*/
}
/* =Widgets
-------------------------------------------------------------- */
.widget-area .widget ul ul {
margin-left: 12px;
margin-left: 0.857142857rem;
}
.widget_rss li {
margin: 12px 0;
margin: 0.857142857rem 0;
}
.widget_recent_entries .post-date,
.widget_rss .rss-date {
color: #aaa;
font-size: 11px;
font-size: 0.785714286rem;
margin-left: 12px;
margin-left: 0.857142857rem;
}
#wp-calendar {
margin: 0;
width: 100%;
font-size: 13px;
font-size: 0.928571429rem;
line-height: 1.846153846;
color: #686868;
}
#wp-calendar th,
#wp-calendar td,
#wp-calendar caption {
text-align: left;
}
#wp-calendar #next {
padding-right: 24px;
padding-right: 1.714285714rem;
text-align: right;
}
.widget_search label {
display: block;
font-size: 13px;
font-size: 0.928571429rem;
line-height: 1.846153846;
}
.widget_twitter li {
list-style-type: none;
}
.widget_twitter .timesince {
display: block;
text-align: right;
}
/* =Plugins
----------------------------------------------- */
img#wpstats {
display: block;
margin: 0 auto 24px;
margin: 0 auto 1.714285714rem;
}
/* @media を使うとき 小さい画面サイズの場合をまず記述 */
/* TOPページのタイトルは表示しない（タイトルはSEOのために入力） */
.page-id-129 h1.entry-title{
display:none;
}
/* TOPページの 製品一例 */
.top-productlineup {
display: -webkit-flex; /* Safari */
display: flex;
-webkit-flex-wrap: wrap; /* Safari */
flex-wrap: wrap;
justify-content: space-around;
-webkit-align-items: center; /* Safari */
align-items: center;
text-align: center;
}
/* TOPページの 製品一覧リンク Flex大枠のサイズ追加（SP用）※余白を調整するため add 2020.03.26 */
.top-productlineup {
width: 340px;
height: 300px;
margin: 0 auto;
}
.top-productlineup img {
outline: 1px solid #ccc;
/*box-shadow: none; 影なし */
}
/* TOPページの 製品一例 の新しいものに三角NEWタグ(PC用：50px) add 2020.03.26 */
.top-productlineup_new {
position: relative;
}
.top-productlineup_new:before {
position: absolute;
content: "";
left: 0;
top: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 50px 50px 0 0;
border-color: #ffd700 transparent transparent transparent;
}
.top-productlineup_new:after {
position: absolute;
content: "NEW";
transform: rotate(315deg);
display: block;
font-size: 11px;
font-weight: bold;
white-space: pre;
color: #fff;
top: 12px;
left: 4px;
text-align: center;
z-index: 2;
line-height: 1.2;
}
/* TOPページの もっと知ってほしいから。４リンクボタン。 */
.top-4link{
display: -webkit-flex; /* Safari */
display: flex;
-webkit-flex-direction: column; /* Safari */
flex-direction: column;
-webkit-flex-wrap: wrap; /* Safari */
flex-wrap: wrap;
justify-content: space-around;
-webkit-align-items: center; /* Safari */
align-items: center;
text-align: center;
}
.top-4link a {
padding: 0 3px; /* スマホ表示時の余白調整 上下は効かない*/
}
.top-4link img {
width: 40%; /* 画像サイズを小さく*/
}
/* TOPページの もっと知ってほしいから。４リンクボタン。【サイドバー表示用】 */
.top-4link-widget{
display: -webkit-flex; /* Safari */
display: flex;
-webkit-flex-direction: column; /* Safari */
flex-direction: column;
-webkit-flex-wrap: wrap; /* Safari */
flex-wrap: wrap;
justify-content: space-around;
-webkit-align-items: center; /* Safari */
align-items: center;
text-align: center;
}
.top-4link-widget a {
padding: 0 3px; /* ウィジェットのリンクボタン間に余白を設けるため 上下は効かない*/
}
/* 製品一覧ページ */
.productlistpage_outerflame { /* flex外枠 */
display: -webkit-flex; /* Safari */
display: flex;
-webkit-flex-direction: column; /* Safari */
flex-direction: column; /* mobile時は、縦表示 */
-webkit-flex-wrap: wrap; /* Safari */
flex-wrap: wrap;
-webkit-justify-content: space-around; /* Safari */
justify-content: space-around; /* 現在は、最初と最後は端にspace-between。 等間隔：space-around */
-webkit-align-items: center; /* Safari */
align-items: center; /* mobile時は、中央揃え */
}
.productlistpage_innerflame { /* 製品ごとのdiv枠 */
width: 300px;/* mobile時は、小さく */
min-height: 300px;
outline: 1px solid #ccc;
margin: 0 0 50px 0; /* 下余白 */
padding: 0 0 10px 0;
position: relative; /* リボン風タグをつけるために必要 */
}
.productlistpage_innerflame_none { /* dammy用*/
display: none; /* mobileの時は空白divは、表示しない */
}
/* 製品一覧ページ NEW 縦リボン風*/
.ribbon12 {
display: inline-block;
position: absolute;
top: 0;
right: 10px;
margin: 0;
padding: 5px 0; /* リボンの高さ調節 */
z-index: 2;
width: 40px;
text-align: center;
font-size: 14px;
color: white;
background: #ffd700;/* 色は検討中 オレンジ：#ff785b テーマ赤：#c13832 深緋こきひ：#c9171e 【タグの青に合わせた色①オレンジ#db7734、②赤ピンク#db3445、③黄土色#dbcb34】2020.02.20update*/
}
.ribbon12:after{
content: '';
position: absolute;
left: 0;
top: 100%;
height: 0;
width: 0;
border-left: 20px solid #ffd700; /* old：#dbcb34 2020.02.20update */
border-right: 20px solid #ffd700; /* old：#dbcb34 2020.02.20update */
border-bottom: 5px solid transparent;
}
/* ↑ end 製品一覧ページ NEW 縦リボン風 ↑end */
.productlistpage_innerflame a.blocklink { /* 製品ごとのdiv枠 の中にあるblocklink タグ */
display: block; /* 全体をリンクブロックにする */
color: #333333; /* bodyと揃える */
}
.productlistpage_innerflame a.blocklink:visited { /* 訪問済 */
color: #333333; /* bodyと揃える */
}
.productlistpage_innerflame p.product_tag{ /* タグ ★※現在使ってない →リストを使うことに*/
margin: 0;
padding: 0 5px 0 0;
text-align: right;
min-height: 30px;
}
/* ----タグ（ul）のデザイン----- */
ul.product_tag {
margin: 0;
padding: 0 5px 0 0;
list-style: none;
text-align: right;
min-height: 55px;/* 高さを合わせる */
}
ul.product_tag li {
display: inline-block;
margin: 0 0 .3em 1em;
padding: 0;
position: relative;
height: 20px;
line-height: 20px;
padding: 0 1em;
background-color: #034AA6; /* タグの背景色（濃いブルー） 旧：#3498db */
border-radius: 0 3px 3px 0;
color: #fff;
font-size: 11px;
text-decoration: none;
-webkit-transition: .2s;
transition: .2s;
}
ul.product_tag li::before {
position: absolute;
top: 0;
left: -10px;
content: '';
width: 0;
height: 0;
border-color: transparent #034AA6 transparent transparent; /* タグの背景色（濃いブルー） 旧：#3498db */
border-style: solid;
border-width: 10px 10px 10px 0;
-webkit-transition: .2s;
transition: .2s;
}
ul.product_tag li::after {
position: absolute;
top: 50%;
left: 0;
z-index: 2;
display: block;
content: '';
width: 6px;
height: 6px;
margin-top: -3px;
background-color: #fff;
border-radius: 100%;
}
ul.product_tag li span {
display: block;
max-width: 100px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
/* ---- end タグのデザイン end ---- */
.productlistpage_innerflame p.productname_text{ /* 製品名 */
margin: 0;
padding: 0 10px 0 10px;
font-size: 1.5em;
font-weight: bold;
line-height: 1.2em;
min-height: 2.3em; /* 高さを合わせる */
}
.productlistpage_innerflame hr.productname_line { /* ライン */
width: 95%;
border-top: 1px solid #8c8b8b;
border-bottom: 1px solid #fff;
margin: 0 auto 5px;
text-align: center;
}
.productlistpage_innerflame p.productname_explain{ /* 製品説明文 */
margin: 0;
padding: 5px 10px 15px 10px;
font-size: 0.85em;
line-height: 1.75em;
}
/* --- end 製品一覧ページ end ----------------------------- */
/* CPUボードパーツキット ページ (mobile)----------- */
.div_flexshop { /* flex外枠 */
display: -webkit-flex; /* Safari */
display: flex;
-webkit-flex-direction: column; /* Safari */
flex-direction: column; /* mobile時は、縦表示 */
-webkit-flex-wrap: wrap; /* Safari */
flex-wrap: wrap;
}
.div_shopimgblock { /* 商品左側（画像） */
margin: 0 0 20px 0; /* mobile時下の余白 */
}
.div_shopCTA { /* 商品右側（価格、送料、など） */
margin: 0 0 0 0px; /* mobile時は余白なし */
outline: solid 1px #cbd0d3; /* mobile時のみ、枠線で囲む */
padding: 2em 3em;
}
.shop_shohin_title { /* 見出しデザイン「型番」「価格」「送料」など */
/* color: #D35034; */
font-size: 1.0rem;
font-weight: bold;
}
.shop_shohinsetumei_title { /* 見出しデザイン「商品説明」 */
color: #D35034;
font-size: 1.2rem;
font-weight: bold;
}
.CTA_phone { /* 電話番号の強調 下に余白*/
color: #D35034; /* オレンジ */
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 0.5em;
}
/* -------end CPUボードパーツキット ページ end -----------------------------*/
/* WooDiL 製品ページ */
/* WooDiL セット内容 テーブル */
table.woodil_table_set {
width: 100%;
font-size: 14px;
border-collapse: collapse; /* 隣接する境界線を結合して（重ねて）表示する （初期値） */
border: 1px solid #dddcd6; /* 枠線 */
margin: 0;
padding: 0;
}
/* 列ごとに デザイン設定 */
table.woodil_table_set tr td:nth-of-type(1) {
width: 11em;
font-weight: bold;
}
table.woodil_table_set tr td:nth-of-type(2) {
}
table.woodil_table_set tr td:nth-of-type(3) {
width: 4em;
text-align: center;
}
table.woodil_table_set tr td:nth-of-type(4) {
width: 7em;
text-align: center;
}
table.woodil_table_set th { /* TH 上部見出し */
background: #dddcd6;
color: #333333; /* bodyと合わせる */
font-weight: bold;
font-size: 12px;
text-align: center;
vertical-align: middle;
border: 1px solid #dddcd6; /* 枠線 */
}
table.woodil_table_set td { /* TD */
border: 1px solid #dddcd6; /* 枠線 */
padding: 1em;
line-height: 1.5em;
vertical-align: middle;
}
table.woodil_table_set tr.stripe { /* 奇数行に薄い色 */
background: #f7f6f4;
}
/* --- end WooDiL 製品ページ end -------------------------- */
/* 事例紹介 一覧ページ */
.case_dl {
outline: 1px solid #ccc;
/* width: 90%;*/
margin: 0; /* 上下余白 ★効いてない？*/
padding: 10px;
color: #333333; /* bodyと揃える */
min-height: 150px;
}
.case_dt {
font-size: 1.5em;
line-height: 1.3em !important;
font-family: 'Roboto', sans-serif; /**Webフォント**/
margin: 0 0 1em 0 !important;
}
.case_dd {
font-size: 0.9em;
line-height: 1.3em;
}
.caselistimg { /* 事例一覧の画像用 */
width: 350px;
margin: 1em 0 0 0.5em !important;
}
.caselisttext { /* 事例一覧のtext用 */
width: 300px;
line-height: 1.7em;
margin: 1em 1em 1em 1.3em !important;
}
/* --- end 事例紹介 一覧ページ end -------------------------- */
/* 事例紹介ページ for mobile*/
.casestudy_flex { /* flex外枠 */
display: -webkit-flex; /* Safari */
display: flex;
-webkit-flex-direction: column; /* Safari */
flex-direction: column; /* mobile時は、縦表示 */
-webkit-flex-wrap: wrap; /* Safari */
flex-wrap: wrap;
-webkit-justify-content: space-around; /* Safari */
justify-content: space-around; /* 現在は、最初と最後は端にspace-between。 等間隔：space-around */
-webkit-align-items: center; /* Safari */
align-items: center; /* mobile時は、中央揃え */
}
/* PC用の画像は表示しない */
.casestudy_forpc {
display: none !important;
}
.casestudy_title{ /* タイトルコピー */
margin: 0 0 15px 0; /* 下のみ余白 */
}
.casestudy_companynameproductname{ /* 導入企業、、導入時期、製品名 */
margin: 0 auto 20px; /* mobileの時中央揃え */
}
.casestudy_content{ /* 事例内容テキスト */
width: 85%;
background: #f6f6f7;
margin: 15px 10px;
padding: 20px 18px;
font-size: 1.2em; /* font 概要：1.2em、データリストタイトル：1em、データリストデータ：0.9em */
line-height: 1.4em;
}
.casestudy_content dl {
margin: 0 1em;
}
.casestudy_content dt {
font-size: 1em;
}
.casestudy_content dd {
font-size: 0.9em;
line-height: 1.3em;
}
.casestudy_content ul {
margin: 5px 0;
}
/* --- end 事例紹介ページ end -------------------------- */
/* 技術者紹介ページを一新 20180622 */
.staffpage_timetable { /* divでスクロールする（縦のみ） */
width: 90%;
height: 400px;
overflow-y:scroll; /* 縦だけ */
outline: solid 1px #cbd0d3; /* 薄いグレー */
margin: 0 auto;
}
/* --- end 技術者紹介ページ 20180622 end -------------------------- */
.staff-layout { /* 技術者ページレイアウト用 */
display: -webkit-flex; /* Safari */
display: flex;
-webkit-flex-direction: column; /* Safari */
flex-direction: column; /* row-reverse; で右から左 column で上から下*/
width:100%;
justify-content: space-between;
background-color:#fff;
}
.staff-explain{ /* 600pxより大きい時は35％、小さい時は100％ */
width: 100%;
margin: 0px;
padding: 0px;
background: #fff;
font-size: 13px;
text-align: left;
}
/* PC用のロゴ・社名は表示しない（ヘッダ） */
.header-title-forpc{
display: none;
}
/* mobile用のロゴ・社名 表示する際 下余白追加 （ヘッダ）*/
.header-title-formobile{
margin-bottom: 3px;
}
/* PC用のロゴ・社名は表示しない（フッタ） */
.footer-title-forpc{
display: none;
}
/* モバイル時、「ページトップへ」は表示しない（フッタ） */
.f-pagetop {
display: none;
}
/* mobile用のロゴ・社名 表示する際 余白なし（フッタ） */
.footer-title-formobile{
margin: 0 0 0 0;
}
/* PC用の電話番号、問合せボタンは表示しない TOP画像も追加 2019.0809*/
.tel-forpc{
display: none;
}
.contact-forpc{
display: none;
}
.topimg-forpc{
display: none;
}
/* スマホ用のTOP画像のサイズ設定 */
.topimg-formobile{
max-width: 100%;
height: auto;
}
/* PC用のフロントページ見出し、PC用の製品リンクボタンは表示しない */
.front-title-forpc{
display: none;
}
/* 受賞暦 トロフィー一覧 */
.award-trophy {
display: -webkit-flex; /* Safari */
display: flex;
-webkit-flex-direction: column; /* Safari */
flex-direction: column;
justify-content: space-around;
-webkit-justify-content: center; /* Safari */
justify-content: center;
}
/* 相撲ロボット 画像レイアウト用 */
.sumorobot-img {
display: -webkit-flex; /* Safari */
display: flex;
-webkit-flex-direction: column; /* Safari */
flex-direction: column;
justify-content: space-around;
-webkit-justify-content: center; /* Safari */
justify-content: center;
}
/* 提供できるモノ・コトページ */
/* ps部分（お客様に喜ばれている、Linux）のdiv枠を、Flexに */
.provide-ps {
display: -webkit-flex; /* Safari */
display: flex;
-webkit-flex-direction: column; /* Safari */
flex-direction: column; /* row-reverse;で右から左 、column で上から下*/
}
/* ---------- 採用ページ2 NEW 2021.11.30-------------- */
/* -- CSSでタブ切り替え風 （960px以下）-- */
.tabmenu2{
position: relative;
width: 90%;
height: 450px; /* ↓div height と合わせる必要あり */
font-size: 0;
}
.tabmenu2 div{
position: absolute;
top: 80px; /* 2列表示 */
left: 0;
display: block;
margin: 4px 0 0;
padding: 10px;
width: 100%;
height: 340px; /* ↑tabmenu2 height と合わせる必要あり */
border: 1px solid #c13832;
-webkit-border-radius: 6px 6px 6px 6px;
border-radius: 6px 6px 6px 6px;
font-size: 14px;
overflow: auto; /* スクロール表示(縦スクロールのみ表示) */
}
.tabmenu2 div img{
margin: 0 auto;
padding: 0;
}
.tabmenu2 div.onerow { /* 1列表示 を上書き（mobile） */
top: 40px; /* 1列表示 */
}
.tabmenu2 div.text_employee { /* 社員を知る用タブ を上書き（mobile） */
top: 78px; /* 社員を知る用タブ表示 */
}
.tabmenu2 input[type="radio"]{
display: none;
}
.tabmenu2 input[type="radio"] + span{
position: relative;
z-index: 20;
display: inline-block;
margin: 4px 4px 0 0;
padding: 4px 5px 0;
min-width: 70px; /* mobile用のタブ幅 */
-webkit-border-radius: 6px 6px 6px 6px;
border-radius: 6px 6px 6px 6px;
background: #ddd;
color: #000;
text-align: center;
font-size: 11px;
font-style: normal;
font-weight: bold;
line-height: 30px; /* この高さと、divのトップを合わせる必要あり */
cursor: pointer;
}
/* 社員を知る用 タブ２行目 */
.tabmenu2 input[type="radio"] + span.tab_employee{
min-width: 100%; /* タブ幅 mobile時は幅いっぱい*/
line-height: 15px; /* この高さと、divのトップを合わせる必要あり 細め */
}
.tabmenu2 span strong { /* 社員を知る タブ2行目 */
font-size: 8px;
font-weight: normal;
}
.tabmenu2 input[type="radio"]:checked + span{
background: #c13832;
color: #fff;
}
.tabmenu2 input[type="radio"] + span ~ div{
display: none;
}
.tabmenu2 input[type="radio"]:checked + span ~ div{
display: block;
}
/* --end CSSでタブ切り替え風 end-- */
/* 採用ページ 社員を知る データリスト */
dl.recruitment_engineer dt{
padding: .5em .75em;
background-color: #f6f6f6;
border: 3px double #ccc;
}
dl.recruitment_engineer dd{
line-height: 1.5em;
margin: 0 0 1.0em 0; /* 下余白 */
}
/* キャッチコピー */
.recruitment_engineer_copy {
text-shadow: 2px 2px 4px #ebedee; /*影*/
}
p.engineer_timetable { /* 社員タイムテーブル タイトル部分 */
background: #d6dadc;
/* border-bottom: 0.75px solid #000;*/
/* border-left: 3px solid #000;*/
font-size: 1.2em;
/* line-height: 1.0em;*/
padding: 0 0 0 10px;
margin: 0 0 0 0;
font-weight: bold;
}
/* end ------ 採用ページ2 NEW 2021.11.30 end ---- */
/* 採用ページ */
/* -- CSSでタブ切り替え風 （960px以下）-- */
.tabmenu{
position: relative;
width: 90%;
height: 450px; /* ↓span height と合わせる必要あり */
font-size: 0;
}
.tabmenu span{
position: absolute;
top: 80px; /* 2列表示 */
left: 0;
display: block;
margin: 4px 0 0;
padding: 10px;
width: 100%;
height: 340px; /* ↑tabmenu height と合わせる必要あり */
border: 1px solid #c13832;
-webkit-border-radius: 6px 6px 6px 6px;
border-radius: 6px 6px 6px 6px;
font-size: 14px;
overflow: auto; /* スクロール表示(縦スクロールのみ表示) */
}
.tabmenu span img{
margin: 0 auto;
padding: 0;
}
.tabmenu span.onerow { /* 1列表示 を上書き（mobile） */
top: 40px; /* 1列表示 */
}
.tabmenu span.text_employee { /* 社員を知る用タブ を上書き（mobile） */
top: 78px; /* 社員を知る用タブ表示 */
}
.tabmenu input[type="radio"]{
display: none;
}
.tabmenu input[type="radio"] + em{
position: relative;
z-index: 20;
display: inline-block;
margin: 4px 4px 0 0;
padding: 4px 5px 0;
min-width: 70px; /* mobile用のタブ幅 */
-webkit-border-radius: 6px 6px 6px 6px;
border-radius: 6px 6px 6px 6px;
background: #ddd;
color: #000;
text-align: center;
font-size: 11px;
font-style: normal;
font-weight: bold;
line-height: 30px; /* この高さと、spanのトップを合わせる必要あり */
cursor: pointer;
}
/* 社員を知る用 タブ２行目 */
.tabmenu input[type="radio"] + em.tab_employee{
min-width: 100%; /* タブ幅 mobile時は幅いっぱい*/
line-height: 15px; /* この高さと、spanのトップを合わせる必要あり 細め */
}
.tabmenu em strong { /* 社員を知る タブ2行目 */
font-size: 8px;
font-weight: normal;
}
.tabmenu input[type="radio"]:checked + em{
background: #c13832;
color: #fff;
}
.tabmenu input[type="radio"] + em ~ span{
display: none;
}
.tabmenu input[type="radio"]:checked + em ~ span{
display: block;
}
/* --end CSSでタブ切り替え風 end-- */
/* 採用ページ 社員を知る データリスト */
dl.recruitment_engineer dt{
padding: .5em .75em;
background-color: #f6f6f6;
border: 3px double #ccc;
}
dl.recruitment_engineer dd{
line-height: 1.5em;
margin: 0 0 1.0em 0; /* 下余白 */
}
/* キャッチコピー */
.recruitment_engineer_copy {
text-shadow: 2px 2px 4px #ebedee; /*影*/
}
p.engineer_timetable { /* 社員タイムテーブル タイトル部分 */
background: #d6dadc;
/* border-bottom: 0.75px solid #000;*/
/* border-left: 3px solid #000;*/
font-size: 1.2em;
/* line-height: 1.0em;*/
padding: 0 0 0 10px;
margin: 0 0 0 0;
font-weight: bold;
}
/* ---------- スクロール枠 2021.12.03-------------- */
.scrollbox {
width: 90%; /* 横幅 */
height: 300px; /* 縦幅を300pxに指定 */
border: 1px solid #c13832; /* ボーダー */
border-radius: 6px 6px 6px 6px; /* 角丸 */
overflow-y: scroll; /* 縦方向にスクロール可能にする */
padding: 2em 1em;
}
/* ポラロイド風 ------------------------*/
.polaroid {
width: 150px; /* imgと合わせます */
position: relative;
padding: 8px;
padding-bottom: 70px; /* コメント余白サイズ 65px→70pxに変更2020.01.24 */
border: 1px solid #ccc;
-webkit-box-shadow: 3px 3px 3px #ccc;
-moz-box-shadow: 3px 3px 3px #ccc;
box-shadow: 3px 3px 3px #ccc;
/* IE */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=135,strength=3,enabled=true)";
filter: progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=135,strength=3,enabled=true); /* IE5.5+ */
background: #fff;
}
.polaroid img {
width: 150px; /* .polaroidと合わせます */
}
.polaroid div { /* pからdivに変更 2021.10.19 */
position: absolute;
height: 4.5em;
line-height: 1.2em;
bottom: 70px; /* 70pxに変更2020.01.24 */
font-size: 0.5em; /* 小さく設定★ */
color: #666;
}
/* ↑end ポラロイド風 ↑end ------------------------*/
/* ポラロイド風 (TEXTなし)------------------------*/
.polaroid_notext {
width: 250px; /* imgと合わせます */
padding: 8px;
padding-bottom: 8px; /* コメント余白サイズ */
border: 1px solid #ccc;
-webkit-box-shadow: 3px 3px 3px #ccc;
-moz-box-shadow: 3px 3px 3px #ccc;
box-shadow: 3px 3px 3px #ccc;
/* IE */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=135,strength=3,enabled=true)";
filter: progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=135,strength=3,enabled=true); /* IE5.5+ */
background: #fff;
}
.polaroid_notext img {
width: 250px; /* .polaroid_notext と合わせます */
}
/* ↑end ポラロイド風 (TEXTなし)↑end ------------------------*/
/* フッタ */
.footer-upper-div { /* フッタ（上部） ★あとで消す？ ●タイプに変更できたら*/
color: #1c1f21; /*ほぼ黒*/
background-color: #fff;
margin: 0;
}
.pagetop_circle { /* ▲TOP */
position: relative;
width: 50px;
height: 50px;
background: #bdc4c7; /* グレー */
color: #fff;
font-weight: bold;
border-radius: 50%;
text-align: right;
margin-left: auto; /* 右寄せ */
margin-right: 2em; /* 右余白 */
}
.pagetop_circle p { /* ▲部分 １行目*/
position: absolute;
top: 50%;
left: 0;
width: 50px;/*上のwidthと合わせる*/
text-align: center;
-ms-transform: translateY(-50%);
-webkit-transform : translateY(-50%);
transform : translateY(-50%);
font-size: 1.2em;
}
.pagetop_circle p span{ /* TOP部分 ２行目*/
font-size: 0.8em;
}
/* フッタ（コンテンツの部分：背景薄めブロック） */
.footer-content-div {
color: #fff; /* 文字 before → #4d4e53*/
background-color: #5b656b; /* before → #d7d3c8 */
margin: 0;
}
.footer-content-div a {
color: #fff !important; /*リンク文字色 before → #4d4e53*/
}
.footer-content-div a:hover {/* マウスオーバー時の色 */
color: #444 !important;
}
/* ---------------------------------------------------------- */
.f_footercontent { /* フッタコンテンツ 外枠Flex */
display: -webkit-flex; /* Safari */
display: flex;
-webkit-flex-direction: column; /* Safari */
flex-direction: column; /* row-reverse;で右から左 、column で上から下*/
-webkit-justify-content: center; /* Safari */
justify-content: center; /* space-aroundで、等間隔 */
-webkit-align-items: center; /* Safari */
align-items: center;
padding: 20px 0 0 0;
}
.f_rogo { /* ロゴ */
padding: 0 0 10px 0;
}
.f_name_tel { /* 社名、Tel */
font-size: 1.5em;
line-height: 1.0em;
padding: 0 0 10px 0;
}
.f_explain { /* 会社説明文 */
line-height: 1.8em;
padding: 0 0 10px 0;
}
.f_ssl { /* SSL シール */
padding-top: 20px; /* mobileの時、SSLアイコンの上に余白とる */
line-height: 1.2em;
}
.f-linkmenu { /* フッタのメニュ */
display: -webkit-flex; /* Safari */
display: flex;
-webkit-flex-direction: column; /* Safari */
flex-direction: column;
-webkit-align-items: flex-end; /* Safari */
align-items: flex-end;
list-style-type: none;
padding: 20px 10px 0 0; /* mobile：メニューの右余白とる */
font-weight: bold;
}
.f-linkmenu span { /* メニューリンクのリストマーク部分 */
color: #c13832;
padding-right: 3px;
font-weight: bold;
}
/* 共通のレスポンシブ対応 （表示・非表示ブレイクポイント＝600px） */
.standard_display_forpc{ /* pc用画像は表示しない */
display: none;
}
/* 共通のFlex対応２ （縦・横表示ブレイクポイント＝960px） */
.standard-flexbox-left2 {
display: -webkit-flex; /* Safari */
display: flex;
-webkit-flex-direction: column; /* Safari */
flex-direction: column; /* mobile時は、縦表示 */
}
/* 横並びにするための FlexBox ➁ 中央揃え用（縦・横表示ブレイクポイント＝960px） */
.standard-flexbox-center {
display: -webkit-flex; /* Safari */
display: flex;
-webkit-flex-direction: column; /* Safari */
flex-direction: column; /* mobile時は、縦表示 */
-webkit-justify-content: center; /* Safari （中央）*/
justify-content: center;
}
/* =Media queries
-------------------------------------------------------------- */
/* Does the same thing as ,
* but in the future W3C standard way. -ms- prefix is required for IE10+ to
* render responsive styling in Windows 8 "snapped" views; IE10+ does not honor
* the meta tag. See https://core.trac.wordpress.org/ticket/25888.
*/
@-ms-viewport {
width: device-width;
}
@viewport {
width: device-width;
}
/* Minimum width of 480 pixels. (新規追加 480pxより大きい時)*/
@media screen and (min-width: 480px) {
/* PC用のロゴ・社名を表示する（ヘッダ） */
.header-title-forpc{
display: inline;
margin-top: 15px;
margin-bottom: 0px;
}
/* PC用のロゴ・社名を表示する（フッタ） */
.footer-title-forpc{
display: inline;
}
/* PC用の「ページトップへ」を表示する（フッタ） */
.f-pagetop { /* ページの先頭へ戻る pタグで実装 */
display: block;
color: #1c1f21; /*ほぼ黒*/
background-color: #000;
padding: 0 10px 0 0;
margin: 0 0 0 auto;
width: 12em;
font-weight: bold;
border-radius: 10px 10px 0 0; /* 角丸める */
}
/* PC用の電話番号、問合せボタンを表示する TOP画像も追加 2019.08.09 */
.tel-forpc{
display: inline;
}
.contact-forpc{
display: inline;
}
.topimg-forpc{
display: inline;
}
img.cta_hover:hover { /* ボタンマウスオーバー時に、透過 + 1.1倍大きく 問い合わせボタンに利用*/
opacity: 0.6;
transition-duration: 0.3s;
transform: scale(1.1);
}
/* スマホ用のロゴ・社名を非表示（ヘッダ） */
.header-title-formobile{
display: none;
}
/* スマホ用のロゴ・社名を非表示（フッタ） */
.footer-title-formobile{
display: none;
}
/* TOP画像、スマホ用の電話番号、問合せボタン非表示 */
.topimg-formobile{
display: none;
}
.tel-formobile{
display: none;
}
.contact-formobile{
display: none;
}
/* TOPページの 製品一覧リンク Flex大枠のサイズ追加（PC用）※余白を調整するため add 2020.03.26 */
.top-productlineup {
width: 920px;
height: 330px;
}
/* TOPページの もっと知ってほしいから。４リンクボタン。 */
.top-4link{
display: -webkit-flex; /* Safari */
display: flex;
-webkit-flex-direction: row; /* Safari */
flex-direction: row;
justify-content: space-around;
-webkit-align-items: center; /* Safari */
align-items: center;
text-align: center;
padding: 0 20px;
}
.top-4link a {
padding: 0 20px; /* PC表示時の余白調整 上下は効かない*/
}
.top-4link img {
width: 180px; /* 画像サイズ戻す*/
height: 180px; /* 画像サイズ戻す*/
}
/* ポラロイド風 --（480pxより大きい時、コメント文字を大きく）----------------------*/
.polaroid div {
position: absolute;
height: 40px;
line-height: 1.6em; /* ★font-sizeと合わせる */
bottom: 25px; /* 8px→25pxに変更2020.01.24 */
font-size: 0.8em; /* 1emよりは少し小さく★line-heightとも合わせる */
color: #666;
}
/* ↑end ポラロイド風 ↑end ------------------------*/
/* 事例紹介ページ */
.casestudy_flex { /* flex外枠 */
-webkit-flex-direction: row; /* Safari */
flex-direction: row;/* PC表示の時は、横並び */
-webkit-align-items: flex-start; /* Safari */
align-items: flex-start;
}
.casestudy_number { /* #01,#02・・・ */
width: 170px;
}
.casestudy_title{ /* タイトルコピー */
width: 660px;
margin: 0 0 0 0; /* 480pxより大きいとき(PC)、余白なし */
padding: 0 0 0 0;
}
.casestudy_companynameproductname{ /* 導入企業、、導入時期、製品名 */
width: 170px;
margin: 0 0 30px 0;
}
/* PC用画像を表示、スマホ用の画像非表示 */
.casestudy_forpc{
display: inline !important;
}
.casestudy_formobile{
display: none !important;
}
.casestudy_content{ /* 事例内容テキスト */
width: 600px;
min-height: 110px;
background: #f6f6f7;
margin: 10px 0 30px 10px;
padding: 20px 30px;
}
.casestudy_content dl {
margin: 0 1.5em;
}
/* --- end 事例紹介ページ end -------------------------- */
.f-linkmenu { /* フッタのメニュ */
display: -webkit-flex; /* Safari */
display: flex;
-webkit-flex-direction: row; /* Safari */
flex-direction: row;
justify-content: space-around;
list-style-type: none;
font-weight: bold;
}
}
/* Minimum width of 600 pixels. (600pxより大きい時)*/
@media screen and (min-width: 600px) {
.author-avatar {
float: left;
margin-top: 8px;
margin-top: 0.571428571rem;
}
.author-description {
float: right;
width: 80%;
}
.site {
margin: 0 auto;
max-width: 960px;
max-width: 68.571428571rem;
overflow: hidden;
}
.site-content {
float: left;
width: 65.15%; /**コンテンツ領域の幅 default:65.104166667%**/
}
body.template-front-page .site-content,
body.attachment .site-content,
body.full-width .site-content {
width: 100%;
}
.widget-area {
float: right;
width: 33%; /**サイドバー領域の幅 default:26.041666667% 全体で91.14%**/
background: #FFF; /**サイドバーの背景 #ccc→＃FFF 2018/02/15変更**/
}
.site-header h1 { /**600pxより大きい時、サイトタイトルを大きく**/
font-size: 30px;/**
font-size: 1.857142857rem;**/
line-height: 1.1; /**default: 1.846153846**/
margin-bottom: 0;
text-align: left;
}
.site-header h2 { /* キャッチフレーズ （600pxより大きい時）*/
text-align: left;
font-size: 13px;
margin-left: 6.0em;
margin-top: 0em;
}
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
border-bottom: 1px solid #ededed;
border-top: 1px solid #ededed;
display: inline-block !important;
text-align: left;
width: 100%;
}
.main-navigation ul {
margin: 0;
padding-left: 10px;/* メニュー文字の左端からの距離 */
padding-left: 0.714285714rem;
position: relative;
text-indent: 0;
color: #ffffff; /**親メニュー文字色**/
}
.main-navigation li a,
.main-navigation li {
display: inline-block;
text-decoration: none;
color: #FFF !important; /* 2021.08.24update */
}
.main-navigation li a { /**メニュー(PC表示の時)**/
border-bottom: 0;
color: #ffffff; /**親メニュー文字色 default:#6a6a6a**/
line-height: 2.2;/**3.692307692;**/
text-transform: uppercase;
white-space: nowrap;
padding-left: 15px; /* 「ホーム」の左に余白をとる */
}
.main-navigation li a:hover {
color: #c4c4c8;/**親メニュー文字色（マウスが載ったとき）**/
}
.main-navigation li a:focus {
color: #c4c4c8;/**親メニュー文字色（フォーカスを得たとき）**/
}
.main-navigation li a:active {
color: #ffffff !important;/**親メニュー文字色（クリック中）※効いてない**/
}
.main-navigation li {
margin: 0 65px 0 0;/* メニュー文字間の距離 右側余白のみ設定 */
/**margin: 0 40px 0 0;
margin: 0 2.857142857rem 0 0;**/
position: relative;
}
.main-navigation li ul {
margin: 0;
padding: 0;
position: absolute;
top: 100%;
z-index: 1;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
}
.main-navigation li ul ul {
top: 0;
left: 100%;
}
.main-navigation ul li:hover > ul,
.main-navigation ul li:focus > ul,
.main-navigation .focus > ul {
border-left: 0;
clip: inherit;
overflow: inherit;
height: inherit;
width: inherit;
}
.main-navigation li ul li a {
background: #e3e3e3;/**入れ子メニュー(２階層目)背景色**/
color: #444 !important;
border-bottom: 1px solid #ededed;
display: block;
font-size: 12px; /** 11px→12px 2020.02.14 update **/
/* font-size: 0.785714286rem; */
line-height: 2;/**2.181818182;**/
padding: 5px 10px;/**上下、左右 ここで子階層メニュー表示ずれてる？→違う**/
/*padding: 0.571428571rem 0.714285714rem;*/
width: 180px;
width: 12.85714286rem;
white-space: normal;
}
.main-navigation li ul li a:hover,
.main-navigation li ul li a:focus {/**子メニュー文字色（フォーカスを得たとき）**/
background: #fafafa;
color: #6a6a6a;
}
/* 2020.04.17 現在選択のページ メニュー名の色を変更しない */
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a {
}
.menu-toggle {
display: none;
}
.entry-header .entry-title {
font-size: 22px;
font-size: 1.571428571rem;
}
#respond form input[type="text"] {
width: 46.333333333%;
}
#respond form textarea.blog-textarea {
width: 79.666666667%;
}
.template-front-page .site-content,
.template-front-page article {
overflow: hidden;
}
.template-front-page.has-post-thumbnail article {
float: left;
width: 47.916666667%;
}
.entry-page-image {
float: right;
margin-bottom: 0;
width: 47.916666667%;
}
.template-front-page .widget-area .widget,
.template-front-page.two-sidebars .widget-area .front-widgets { /**フロントページのサイドバー領域(左)**/
float: left;
width: 50%;/**54%→50％ update 2020.04.03;**/
margin: 5px 0 5px ;
/**margin-bottom: 1.714285714rem;**/
}
.template-front-page .widget-area .widget:nth-child(odd) {
clear: right;
}
.template-front-page .widget-area .widget:nth-child(even),
.template-front-page.two-sidebars .widget-area .front-widgets + .front-widgets {/**フロントページのサイドバー領域(右)**/
float: right;
width: 43%;/**39.0625%;**/
margin: 5px 0 5px;/**
margin: 0 0 1.714285714rem;**/
}
.template-front-page.two-sidebars .widget,
.template-front-page.two-sidebars .widget:nth-child(even) {
float: none;
width: auto;
}
.commentlist .children {
margin-left: 48px;
margin-left: 3.428571429rem;
}
/* PC用のフロントページ見出し、PC用の製品リンクボタン を表示する */
.front-title-forpc {
display: inline;
}
/* mobile用のフロントページ見出しを表示しない */
.front-title-formobile {
display: none;
}
.staff-layout { /* 技術者ページレイアウト用 */
display: -webkit-flex; /* Safari */
display: flex;
-webkit-flex-direction: row; /* Safari */
flex-direction: row; /* row-reverse; で右から左 */
width:100%;
text-align: center;
margin: 0px auto;
justify-content: space-between;
background-color: #fff;
-webkit-align-items: center; /* Safari */
align-items: center;
}
.staff-explain{ /* 600pxより大きい時は40％、小さい時は100％ */
width: 40%;
margin: 0px;
padding: 0px;
background: #fff;
text-align: left;
font-size: 13px;
}
/* 提供できるモノ・コトページ */
/* ps部分（お客様に喜ばれている、Linux）のdiv枠を、Flexに */
.provide-ps {
display: -webkit-flex; /* Safari */
display: flex;
-webkit-flex-direction: row; /* Safari */
flex-direction: row; /* row-reverse;で右から左 、column で上から下*/
-webkit-justify-content: space-between; /* Safari */
justify-content: space-between;
}
/* フッタ */
.f-copyright1{ /* 600pxより大きい時は一行で表示 （2つのdivをinlineで表示）*/
display: inline;
text-align: center;
margin: 0px auto;
}
.f-copyright2{ /* 600pxより大きい時は一行で表示（2つのdivをinlineで表示） */
display: inline;
text-align: center;
margin: 0px auto;
}
/* 共通のレスポンシブ対応 （表示・非表示ブレイクポイント＝600px） ※divで使う*/
.standard_display_forpc{ /* pc用画像を表示する */
display: block;
}
.standard_display_formobile{ /* mobile用画像は表示しない */
display: none;
}
}
/* Minimum width of 960 pixels. (960pxより大きい時)*/
@media screen and (min-width: 960px) {
body {
background-color: #ebedee !important; /* 左右余白ができた時の背景色？効いてない・・どこ？ 以前#e6e6e6 */
}
body .site { /**ページ上下余白**/
padding: 0 30px; /* old：0 40px →2020.0417 0 30px にupdate */
/* padding: 0 2.857142857rem; */
margin-top: 0px; /**48px;
margin-top: 3.428571429rem;**/
margin-bottom: 0px; /**48px;
margin-bottom: 3.428571429rem;**/
/* box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3); 両端の影をつけない*/
}
body.custom-background-empty {
background-color: #fff;
}
body.custom-background-empty .site,
body.custom-background-white .site {
padding: 0;
margin-top: 0;
margin-bottom: 0;
box-shadow: none;
}
/* 受賞暦 トロフィー一覧 */
.award-trophy {
display: -webkit-flex; /* Safari */
display: flex;
-webkit-flex-direction: row; /* Safari */
flex-direction: row;
justify-content: space-around; /* space-between */
-webkit-flex-wrap: wrap; /* Safari */
flex-wrap: wrap;
-webkit-align-content: space-around; /* Safari */
align-content: space-around; /* flexアイテムの全ての行の周りに等間隔 */
height: 900px; /* PC表示の場合のみ、高さ指定 */
}
/* 相撲ロボット 画像レイアウト用 */
.sumorobot-img {
display: -webkit-flex; /* Safari */
display: flex;
-webkit-flex-direction: row; /* Safari */
flex-direction: row;
justify-content: space-around; /* space-between */
-webkit-flex-wrap: wrap; /* Safari */
flex-wrap: wrap;
-webkit-align-content: space-around; /* Safari */
align-content: space-around; /* flexアイテムの全ての行の周りに等間隔 */
height: 780px; /*PC表示の場合のみ、高さ指定 */
}
/* 製品一覧ページ */
.productlistpage_outerflame { /* flex外枠 */
-webkit-flex-direction: row; /* Safari */
flex-direction: row;/* PC表示の時は、横並び */
}
.productlistpage_innerflame { /* 製品ごとのdiv枠 */
width: 380px;/* PC表示の時は、大きく */
min-height: 380px;
margin: 0 0 50px 0; /* 下余白 */
padding: 0;/* PC表示の時は、なし*/
}
/* 製品一覧 960pxより大きいときだけ、ダミー空白divを表示 */
.productlistpage_innerflame_none { /* dammy用*/
display: block;
width: 380px;
min-height: 380px;
outline: 0px;
margin: 0 0 50px 0;
position: relative; /* リボン風タグをつけるために必要 */
}
/* CPUボードパーツキット ページ （PC）*/
.div_flexshop { /* flex外枠 */
-webkit-flex-direction: row; /* Safari */
flex-direction: row;/* PC表示の時は、横並び */
-webkit-flex-wrap: wrap; /* Safari */
flex-wrap: wrap;
}
.div_shopimgblock { /* 商品左側（画像） */
margin: 0; /* PCの時は余白なし */
}
.div_shopCTA { /* 商品右側（価格、送料、など） */
margin: 0 0 0 10px; /* PC表示の時は、左余白 */
outline: solid 0px #cbd0d3; /* アウトライン消す */
padding: 0;
}
/* -------end CPUボードパーツキット ページ （PC）end -----------------------------*/
/* 採用ページ */
/* -- CSSでタブ切り替え風 （960px以上）-- */
.tabmenu{
position: relative;
width: 95%;
height: 600px; /* ↓span height と合わせる必要あり */
font-size: 0;
}
.tabmenu span{
position: absolute;
top: 30px;
left: 0;
display: block;
margin: 4px 0 0;
padding: 10px;
width: 100%;
height: 490px; /* ↑tabmenu height と合わせる必要あり */
border: 1px solid #c13832;
-webkit-border-radius: 0 6px 6px 6px;
border-radius: 0 6px 6px 6px;
font-size: 14px;
overflow: auto; /* スクロール表示(縦スクロールのみ表示) */
}
.tabmenu span.onerow { /* 1列表示（960pxより大きい時用）を上書き */
top: 30px; /* 1列で、吹き出し表示 */
}
.tabmenu span.text_employee{ /* 社員を知る用タブの、テキスト部分枠線（960pxより大きい時用）を上書き */
top: 41px; /* 社員を知る用タブに合わせて、吹き出し表示 */
}
.tabmenu input[type="radio"]{
display: none;
}
.tabmenu input[type="radio"] + em{
position: relative;
z-index: 100;
display: inline-block;
margin: 0 4px 0 0;
padding: 4px 5px 0;
min-width: 60px; /* mobile用のタブ幅 */
-webkit-border-radius: 6px 6px 0 0;
border-radius: 6px 6px 0 0;
background: #ddd;
color: #000;
text-align: center;
font-size: 12px;
font-style: normal;
font-weight: bold;
line-height: 30px; /* この高さと、spanのトップを合わせる必要あり */
cursor: pointer;
}
/* 社員を知る用 タブ２行目 */
.tabmenu input[type="radio"] + em.tab_employee{
min-width: 130px; /* タブ幅 おおきめ*/
line-height: 20px; /* この高さと、spanのトップを合わせる必要あり */
}
.tabmenu em strong { /* 社員を知る タブ2行目 */
font-size: 0.95em;
font-weight: normal;
}
.tabmenu input[type="radio"]:checked + em{
background: #c13832;
color: #fff;
}
.tabmenu input[type="radio"]:checked + em::after {
position: absolute;
left: 50%;
display: block;
margin-left: -9px;
border: 9px solid transparent;
border-top: 9px solid #c13832;
content: "";
}
.tabmenu input[type="radio"] + em ~ span{
display: none;
}
.tabmenu input[type="radio"]:checked + em ~ span{
display: block;
}
/* --end CSSでタブ切り替え風 end-- */
/* フッタ PC表示のとき breakpoint=960pxより大きいとき*/
.f_footercontent { /* フッタコンテンツ 外枠Flex */
display: -webkit-flex; /* Safari */
display: flex;
-webkit-flex-direction: row; /* Safari */
flex-direction: row; /* PCの時は、横並び */
-webkit-align-items: flex-start; /* Safari */
align-items: flex-start; /* PCの時は、上揃え */
padding: 20px 0 20px 20px;
}
.f_rogo { /* ロゴ */
margin: 0;
padding: 0;
}
.f_name_tel { /* 社名、Tel */
font-size: 1.5em;
line-height: 1.3em;
text-align: left;
padding: 0 10px 0 5px;
}
.f_explain { /* 会社説明文 */
font-size: 1em;
padding: 15px 25px 15px 15px;
line-height: 1.8em;
text-align: left;
}
.f_ssl { /* SSL シール */
line-height: 1.2em;
padding: 15px 30px 0 100px;
}
/* 共通のFlex対応２ （縦・横表示ブレイクポイント＝960px） */
.standard-flexbox-left2 {
-webkit-flex-direction: row; /* Safari */
flex-direction: row;/* PC表示の時は、横並び */
}
/* 横並びにするための FlexBox ➁ 中央揃え用 （縦・横表示ブレイクポイント＝960px） */
.standard-flexbox-center {
-webkit-flex-direction: row; /* Safari */
flex-direction: row;/* PC表示の時は、横並び */
}
}
/* ↑end @media 960pxより大きい時 ↑end */
/* =Print
----------------------------------------------- */
@media print {
body {
background: none !important;
color: #000;
font-size: 10pt;
}
footer a[rel=bookmark]:link:after,
footer a[rel=bookmark]:visited:after {
content: " [" attr(href) "] "; /* Show URLs */
}
a {
text-decoration: none;
}
.entry-content img,
.comment-content img,
.author-avatar img,
img.wp-post-image {
border-radius: 0;
box-shadow: none;
}
.site {
clear: both !important;
display: block !important;
float: none !important;
max-width: 100%;
position: relative !important;
}
.site-header {
margin-bottom: 5px;/**72px;
margin-bottom: 5.142857143rem;**/
text-align: left;
}
.site-header h1 {
font-size: 21pt;
line-height: 1;
text-align: left;
}
.site-header h2 {
color: #000;
font-size: 10pt;
text-align: left;
}
.site-header h1 a,
.site-header h2 a {
color: #000;
}
.author-avatar,
#colophon,
#respond,
.commentlist .comment-edit-link,
.commentlist .reply,
.entry-header .comments-link,
.entry-meta .edit-link a,
.page-link,
.site-content nav,
.widget-area,
img.header-image,
.main-navigation {
display: none;
}
.wrapper {
border-top: none;
box-shadow: none;
}
.site-content {
margin: 0;
width: auto;
}
.entry-header .entry-title,
.entry-title {
font-size: 21pt;
}
footer.entry-meta,
footer.entry-meta a {
color: #444;
font-size: 10pt;
}
.author-description {
float: none;
width: auto;
}
/* Comments */
.commentlist > li.comment {
background: none;
position: relative;
width: auto;
}
.commentlist .avatar {
height: 39px;
left: 2.2em;
top: 2.2em;
width: 39px;
}
.comments-area article header cite,
.comments-area article header time {
margin-left: 50px;
margin-left: 3.57142857rem;
}
}
/* 問い合わせ フォーム */
/* テーブル */
table.contact {
margin: 0 auto;
border-collapse: separate;
border-spacing: 0px 5px;
font-size: 12px;
}
table.contact th { /* th 左列：見出し */
background: #dddcd6;
vertical-align: middle;
text-align: left;
width: 35%;
overflow: visible;
position: relative;
color: #333333; /* bodyと合わせる */
font-weight: bold;
font-size: 12px;
}
table.contact th:after { /* th 吹き出し */
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(136, 183, 213, 0);
border-left-color: #dddcd6; /**矢印**/
border-width: 10px;
margin-top: -10px;
}
table.contact td {/* td 右列：入力欄 */
padding-left: 21px; /* 表のデータ側の左端余白 */
vertical-align: middle; /* 上下中央揃え */
}
/* 入力欄*/
.wpcf7 input[name="your-name"],
.wpcf7 input[name="your-company"],
.wpcf7 input[name="your-email"],
.wpcf7 input[name="your-subject"] ,
.wpcf7 input[name="your-tel"] {
width: 85%;
height: 20px !important;
}
.wpcf7 textarea[name="your-message"] {
width: 85%;
height: 150px !important;
}
/* end 入力欄 end */
/* end 問い合わせ フォーム end */
/* 問い合わせ 「必須」 赤タグ */
table.contact div.contact-required {
display: inline-block;
font-size: 10px; /* フォントサイズを10pxに */
color: #fff; /* フォントカラーを赤に */
background-color:#c13832;
font-weight: bold; /* フォントの太さを通常に normal*/
height: 1.7em;
margin: 5px auto;
padding-left: 5px;
padding-right: 5px;
}
table.contact div.contact-required p {
line-height: 1.7em; /* 上記と数値をあわせる必要あり 中央揃えのため*/
}
/* 問い合わせ メール送信の説明文用 */
.wpcf7 form.wpcf7-form span.explain {
font-size: 11px; /* フォントサイズを11pxに */
color: #c13832; /* フォントカラーを赤に */
font-weight: normal; /* フォントの太さを通常に */
}
/**リンクボタンレイアウト用テーブル**/
table.linkbutton, td, th {
/**border: 1px #2b2b2b solid;**/
padding: 10px 10px; /***上下、左右*/
}
/**パンくずリスト**/
.breadcrumbs{
margin: 0 0 0 2%;
margin-top: 5px;
font-size: 11px;
}
/* リスト：マージンなくした */
/* パーティクルカウンタページ */
ul.li_nomargin{
margin: 0;
}
/**リスト：製品一覧用 先頭マーク数字 ※優劣がないので、ulタグを使うこととする**/
ul.li_product{
list-style-type:decimal;
font-size: 14px;
font-family: 'Archivo Black', sans-serif;
}
ul.li_product li {/* 製品一覧 タイトル 下余白 */
margin-bottom: 5px;
font-weight: bold;
}
/**リンクをブロック化**/
.block-link a {
display: block;
background: #FFFFFF; /**背景：グレーベージュに戻すとき→#f3f1ee**/
width: 95%; /* 100%にすると、右端が切れる */
border: 2px solid #d7d3c8; /* list毎の線 */
padding: 5px;
list-style-type: none;
text-decoration: none;
text-align: center;
margin: 0 auto; /* ブロックを中央揃え */
}
.block-link ul {
margin: 0;
padding: 15px 10px;
}
.block-link li {
list-style-type: none;/**リストマーカー種類**/
font-weight: bold;
color: #FFFFFF;
margin: 5px; /* list毎の間隔 */
padding: 15px 10px;
}
.block-link li a {
color: #444 !important; /**反映されないので、!important 旧Color：#4d4e53 **/
}
.block-link a:hover { /**マウスオーバー時、ボックスを半透明に**/
background-color:#FFF;
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
/**↑end リンクをブロック化↑end **/
/* フロントページ Appliciate[30年以上に感謝] 創業32th用 */
.div-32th {
text-align: center;
}
.div-32th p {
text-align: center;
font-family: 'Archivo Black', sans-serif;/* Webfont [Archivo+Black] 太めWIDE文字 */
font-size: 1.2em;
line-height: 1.5em ; /* pタグの高さ */
}
/* ↓start Flexbox フロントページ [もっと知ってほしいから] 伝えたいこと×６ブロック ↓start ------------------------------------------------------------*/
.introduction-flexbox { /* Flex */
display: -webkit-flex; /* Safari */
display: flex;
-webkit-align-items: flex-start; /* Safari */
align-items: flex-start;/* centerと検討 */
-webkit-justify-content: space-around; /* Safari */
justify-content: space-around;
}
.introduction-flexbox div {
/* outline: 2px solid #ccc; test */
}
/* 親パネル 画像 ★NEW Classに変更！*/
.flexitem_forpickup_img {
/*width: 25%;*/
/*margin: 0 0 0 10; 画像の左側に余白入れたい */
padding: 0 10; /* 左右が10 */
}
/* 親パネル テキスト ★NEW Classに変更！*/
.flexitem_forpickup_text {
width: 60%;
margin: 0;
padding: 0 20px 0 10px; /* firstletter左側に10px、スペース空ける */
font-weight: bold; /* 太字 */
line-height: 0.8em; /* 行間を狭く*/
}
/* 親パネル アイコン ★NEW Classに変更！*/
.flexitem_forpickup_icon {
width: 10%;
margin: 0 0 0 0;
padding: 12px 0 0 0;/* 上だけ余白で、縦中央に寄せる */
text-align: center; /* ★検討中 左寄せと */
line-height: 1.2em; /* 行間 */
}
/* Open/Close を囲むSPAN */
.flexitem_forpickup_openclose {
display:block;
line-height: 1em; /* 行間を狭く */
padding: 0 0 0 0;
}
/* 子要素div内 もFlex -----------------------------------------*/
.introduction-flexbox2 { /* Flex */
display: -webkit-flex; /* Safari */
display: flex;
-webkit-flex-direction: column; /* Safari */
flex-direction: column; /* 縦ならびにしておく */
-webkit-align-items: center; /* Safari */
align-items: center;
-webkit-justify-content: space-around; /* Safari */
justify-content: space-around;
}
/* 子パネル 画像 ★NEW Classに変更！*/
.flexitem_forpickup_img2 {
width: 70%;
margin: 0;
padding: 0 10; /* 左右が10 */
text-align: center;
}
/* 子パネル テキスト ★NEW Classに変更！*/
.flexitem_forpickup_text2 {
width: 80%;
margin: 0;
padding: 0 0 0 10; /* firstletter左側にのみ、スペース空ける */
text-align: left; /* 効いていない？ */
line-height: 0.8em; /* 行間を狭く ★効いてない？*/
}
/* パネルの子要素Div内、リンクボタン */
.standard-panel_link {
display: inline-block;
background-color:#dddcd6; /* 絹鼠 きぬねず*/
font-size: 13px;
font-weight: bold;
color: #444; /* Body*/
width: 85%;
height: 16px;
margin: 0px auto; /* 中央揃え ならない*/
text-align: center;
vertical-align: top middle;/* text-bottom baseline*/
padding: 5px 5px;
}
.standard-panel_link p {
line-height: 16px; /* 上記heightと数値をあわせる必要あり 中央揃えのため*/
}
/* 子要素divの */
div#standard-panel_child a:hover { /**マウスオーバー時、ボックスを半透明に**/
background-color:#FFF;
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
/* ------- end フロントページ [もっと知ってほしいから] 伝えたいこと×６ブロック end -----------------------*/
/* 見出し用LOOKUP,AWARD、INFOなど ※DIVの後に、Pタグ必要*/
.for-heading_l { /* LOOKUP*/
display: inline-block;
background-color:#17568F; /* ターコイズ old:#32bbc1*/
font-size: 13px;
font-weight: bold;
color: #FFFFFF !important;
width: 120px;
height: 16px;
margin: 0px auto 5px;/* 上 左右 下 */
text-align: center;
vertical-align: top middle;/* text-bottom baseline*/
padding: 5px 5px;
}
.for-heading_l p {
line-height: 16px; /* 上記と数値をあわせる必要あり 中央揃えのため*/
}
.for-heading_a { /* AWARD*/
display: inline-block;
background-color:#c13832; /* old:#a5524e */
font-size: 13px;
font-weight: bold;
color: #FFFFFF !important;
width: 100px;
height: 16px;
margin: 0px auto 5px;/* 上 左右 下 */
text-align: center;
vertical-align: top middle;/* text-bottom baseline*/
padding: 5px 5px;
}
.for-heading_a p {
line-height: 16px; /* 上記と数値をあわせる必要あり 中央揃えのため*/
}
.for-heading_i { /* INFO*/
display: inline-block;
background-color:#bfce2b;
font-size: 13px;
font-weight: bold;
color: #FFFFFF !important;
width: 100px;
height: 16px;
margin: 0px auto 5px;/* 上 左右 下 */
text-align: center;
vertical-align: top middle;/* text-bottom baseline*/
padding: 5px 5px;
}
.for-heading_i p {
line-height: 16px; /* 上記と数値をあわせる必要あり 中央揃えのため*/
}
.for-heading_s { /* SPOTLIGHT*/
display: inline-block;
background-color:#c13832;
font-size: 13px;
font-weight: bold;
color: #FFFFFF !important;
width: 115px;
height: 16px;
margin: 0px auto 5px;/* 上 左右 下 */
text-align: center;
vertical-align: top middle;/* text-bottom baseline*/
padding: 5px 5px;
}
.for-heading_s p {
line-height: 16px; /* 上記と数値をあわせる必要あり 中央揃えのため*/
}
.for-heading_hp1 { /* 色々な見出し用に20181002追加 HP基調カラーのグレーベージュ 【産総研実績ページ】*/
display: inline-block;
background-color:#96938c;
font-size: 13px;
font-weight: bold;
color: #FFFFFF !important;
width: 120px;
height: 16px;
margin: 0px auto 5px;/* 上 左右 下 */
text-align: center;
vertical-align: top middle;/* text-bottom baseline*/
padding: 5px 5px;
}
.for-heading_s p {
line-height: 16px; /* 上記と数値をあわせる必要あり 中央揃えのため*/
}
/* ↑end 見出し用LOOKUP,AWARD、INFOなど ※DIVの後に、Pタグ必要 ↑end */
/* リンクを、ボタン風にするクラス ------------------------------------ */
.for-heading_g { /* Glossary 用語集 */
display: inline-block;
background-color:#e9db71; /* レモンイエローは#fff156 どちらが良いか検討中*/
font-size: 0.8em;
font-weight: bold;
color: #4d4e53; /* 濃い目グレー */
width: 200px; /* 長め？ */
height: 13px;
margin: 10px auto;
text-align: center;
vertical-align: top middle;/* text-bottom baseline*/
padding: 5px 5px;
}
.for-heading_g p {
line-height: 13px; /* 上記と数値をあわせる必要あり 中央揃えのため*/
}
.btn_recrutement_link { /* 採用情報ページ リンクボタン */
display: inline-block;
background-color:#e9db71; /* レモンイエローは#fff156 どちらが良いか検討中*/
font-size: 0.9em;
font-weight: bold;
color: #4d4e53; /* 濃い目グレー */
width: 270px; /* 長め */
height: 18px; /* 大きめ */
margin: 10px auto;
text-align: center;
vertical-align: top middle;/* text-bottom baseline*/
padding: 5px 5px;
}
.btn_recrutement_link p {
line-height: 18px; /* 上記と数値をあわせる必要あり 中央揃えのため*/
}
/* ↑end リンクを、ボタン風にする ↑end ------------------------------------ */
.div-translucent a:hover { /**マウスオーバー時、ボックスを半透明に**/
background-color:#FFF;
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
.div-translucent img:hover { /**マウスオーバー時、画像を半透明に 2020.06.03**/
filter: opacity(70%);
cursor: pointer;
}
/* 最初の１文字Design. LOOKUP,AWARD、INFOなど */
/* LOOK UP! */
p.firstletter_l , p.firstletter_l_2{
margin: 0 0 5px 0;
padding: 0 0 0 0;
/* line-height: 2em; 上手くできない */
}
.firstletter_l::first-letter { /* 背景色なし・色つき文字 */
font-size: 3em;
color: #17568F;
font-weight: bold;
float: left;
/* background: #98dde0; */
width: 3em !important; /* 効かない? */
text-align: center; /* 効かない */
padding: 0 10;/* 効かない */
margin: 0 0.1em 0 0;
line-height: 1.1em; /* ★高さを調整中 */
}
.firstletter_l_2::first-letter { /* 背景色＋白抜き */
font-size: 2.3em;
color: #fff;
font-weight: bold;
float: left;
background: #17568F;
margin: 0 0.1em 0 0;
line-height: 1.3em;
}
/* AWARD */
.firstletter_a::first-letter { /* 背景色なし・色つき文字 */
font-size: 3em;
color: #c13832;
font-weight: bold;
float: left;
/* background: #ecc3d7; */
margin: 0 0.1em 0 0;
line-height: 1.1em;
}
.firstletter_a_2::first-letter { /* 背景色＋白抜き */
font-size: 2.3em;
color: #fff;
font-weight: bold;
float: left;
background: #c13832;
margin: 0 0.1em 0 0;
line-height: 1.3em;
}
/* INFO */
p.firstletter_i , p.firstletter_i_2{
margin: 0 0 5px 0;
padding: 0 0 0 0;
/* line-height: 2em; 上手くできない */
}
.firstletter_i::first-letter { /* 背景色なし・色つき文字 */
font-size: 3em;
color: #bfce2b;
font-weight: bold;
float: left;
/* background: #ecc3d7; */
margin: 0 0.1em 0 0;
line-height: 1.1em;
}
.firstletter_i_2::first-letter { /* 背景色＋白抜き */
font-size: 2.3em;
color: #fff;
font-weight: bold;
float: left;
background: #bfce2b;
margin: 0 0.1em 0 0;
line-height: 1.3em; /* ★高さを調整中 */
/* vertical-align: center; ★pタグなので効かない。。縦方向の位置揃えができない */
}
/* SPOTLIGHT */
p.firstletter_s , p.firstletter_s_2{
margin: 0 0 5px 0;
padding: 0 0 0 0;
/* line-height: 2em; 上手くできない */
}
.firstletter_s::first-letter { /* 背景色なし・色つき文字 */
font-size: 3em;
color: #c13832;
font-weight: bold;
float: left;
/* background: #ecc3d7; */
margin: 0 0.1em 0 0;
line-height: 1.1em;
}
.firstletter_s_2::first-letter { /* 背景色＋白抜き */
font-size: 2.3em;
color: #fff;
font-weight: bold;
float: left;
background: #c13832;
margin: 0 0.1em 0 0;
line-height: 1.3em;
}
/* end ↑ 最初の１文字Design. LOOKUP,AWARD、INFOなど end ↑ */
.sitemap ul { /* サイトマップ用 */
margin-left: 20px !important;
}
.staff-block p { /* 技術者画像と説明を横並びにする用 */
display: inline-block !important;
vertical-align: top !important;
line-height: 50px;
font-size: 9px;
font-weight: bold;
}
.main-product { /* FlexBox 製品一例用*/
display: -webkit-flex; /* Safari */
display: flex;
-webkit-flex-direction: row; /* Safari */
flex-direction: row; /* row-reverse; で右から左 */
width:100%;
margin: 0 ;
justify-content: space-between; /* 最初と最後のアイテムは端に、残りは等間隔で配置されます。*/
background-color: #ccc;
}
/* 擬似要素で画像にワンポイント */
.points > div {
display: inline-block;
width: 200px;
margin-right: 15px;
vertical-align: top;
}
.points p {
margin: 1em 0;
}
/* 共通 */
.points .image {
position: relative;
}
/* ⑦⑧⑨⑩triangle */
.point-triangle {
position: relative;
}
.point-triangle:after {
position: absolute;
content: " ";
height: 0;
width: 0;
}
.point-triangle span {
position: absolute;
content: " ";
font-size: 13px; /* spanの文字サイズ*/
font-weight: normal;
color: #000;
z-index:100;
}
/* ⑨triangle-lt */
.point-triangle-lt:after {
top: 0;
left: 0;
border-bottom:5em solid transparent;/* 5emがラベルサイズ*/
border-left:5em solid #fff156;/* 5emがラベルサイズ 背景色*/
}
.point-triangle-lt span {
top: .9em;/* spanの文字位置*/
left: .3em;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
}
/* ⑨triangle-lt2 色を変えたtypeを追加*/
.point-triangle-lt2:after {
top: 0;
left: 0;
border-bottom:5em solid transparent;/* 5emがラベルサイズ*/
border-left:5em solid #c13832;/* 5emがラベルサイズ 背景色*/
}
.point-triangle-lt2 span {
top: 1.2em;/* spanの文字位置*/
left: .1em;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
color: #fff;
}
/* ↑end 擬似要素で画像にワンポイント ↑end*/
.keieirinen { /*経営理念の文言*/
font-size: 26px;
font-weight: bold;
color: #000;
/* font-family: KaiTi; */
font-family: Sawarabi Mincho;
}
/* リンクボタン風（製品紹介一覧のページへ） ※DIVの後に、Pタグ必要*/
.for-productlink {
display: inline-block;
background-color:#343539;
font-size: 13px;
font-weight: normal;
color: #FFFFFF !important;
width: 150px;
height: 16px;
margin: 10px auto;
text-align: center;
vertical-align: top middle;/* text-bottom baseline*/
padding: 5px 5px;
}
.for-productlink p {
line-height: 16px; /* 上記と数値をあわせる必要あり 中央揃えのため*/
}
/* リンクボタン風（いろんなリンクに。） ※DIVの後に、Pタグ必要*/
/* パターン1 */
.for-anylink {
display: inline-block;
background-color:#343539; /* 濃いほとんど黒*/
font-size: 13px;
font-weight: normal;
color: #FFFFFF !important;
width: 220px;
height: 16px;
margin: 10px auto;
text-align: center;
vertical-align: top middle;/* text-bottom baseline*/
padding: 5px 5px;
}
.for-anylink p {
line-height: 16px; /* 上記と数値をあわせる必要あり 中央揃えのため*/
}
/* パターン2 */
.for-anylink2 {
display: inline-block;
background-color:#dddcd6; /* 絹鼠 きぬねず*/
font-size: 13px;
font-weight: normal;
color: #333333; /* グレー*/
width: 220px;
height: 16px;
margin: 10px auto;
text-align: center;
vertical-align: top middle;/* text-bottom baseline*/
padding: 5px 5px;
}
.for-anylink2 p {
line-height: 16px; /* 上記heightと数値をあわせる必要あり 中央揃えのため*/
}
/* リボン風装飾 */
.ribon{
font-weight:bold;
font-family:'Helvetica', 'sans-serif';
position:relative;
display:block;
width:240px;
height:144px;
margin:40px;
overflow:visible;
}
.ribon:before,
.ribon:after{
display:block;
position:absolute;
left:-10px;
}
.ribon:before{
content:"";
border:6px solid transparent;
border-top-color:#842622;
border-right-color:#842622;
top:32px;
}
.ribon:after{
content:"マイクロマウス（全国）";
background:#c13832;/* メインの背景色 */
color:#fff;
padding:0 24px;
height:24px;
line-height:24px;
top:8px;
z-index:10;
}
/* ↑ リボン風装飾 end ↑ */
/* リボン風装飾２ */
.ribon-2{
font-weight:bold;
font-family:'Helvetica', 'sans-serif';
position:relative;
display:block;
width:240px;
height:144px;
margin:40px;
overflow:visible;
}
.ribon-2:before,
.ribon-2:after{
display:block;
position:absolute;
left:-10px;
}
.ribon-2:before{
content:"";
border:6px solid transparent;
border-top-color:#3274c1;
border-right-color:#3274c1;
top:32px;
}
.ribon-2:after{
content:"マイクロマウス（地区）";
background:#538ed3;/* メインの背景色 */
color:#fff;
padding:0 24px;
height:24px;
line-height:24px;
top:8px;
z-index:10;
}
/* ↑ リボン風装飾２ end ↑ */
/* リボン風装飾３ */
.ribon-3{
font-weight:bold;
font-family:'Helvetica', 'sans-serif';
position:relative;
display:block;
width:240px;
height:144px;
margin:40px;
overflow:visible;
}
.ribon-3:before,
.ribon-3:after{
display:block;
position:absolute;
left:-10px;
}
.ribon-3:before{
content:"";
border:6px solid transparent;
border-top-color:#D6D984;
border-right-color:#D6D984;
top:32px;
}
.ribon-3:after{
content:"OTHER";
background:#DDDF97; /* メインの背景色 */
color:#fff;
padding:0 24px;
height:24px;
line-height:24px;
top:8px;
z-index:10;
}
/* ↑ リボン風装飾３ end ↑ */
/* 全体 リンクの下線を消す */
a {
text-decoration: none;
}
/* プライバシーポリシー 縦列合わせの為 */
.praivacypolicy {
display: -webkit-flex; /* Safari */
display: flex;
-webkit-flex-direction: row; /* Safari */
flex-direction: row;
}
.praivacypolicy-left {
width: 25%;
}
.praivacypolicy-right {
width: 50%;
}
/* 沿革 */
.history img ,a {
margin: 0 auto;
padding: 0;
}
.historycircle_l { /* 左軸の説明 */
display:inline-block;
position: relative;
width: 100px;
height: 100px;
background: #bdc4c7; /* グレー */
color: #fff;
font-weight: bold;
border-radius: 50%;
text-align: center;
}
.historycircle_l p { /* 左軸の説明 text部分 縦センタリングする*/
position: absolute;
top: 50%;
left: 0;
width: 100px;/*上のwidthと合わせる*/
text-align: center;
-ms-transform: translateY(-50%);
-webkit-transform : translateY(-50%);
transform : translateY(-50%);
font-size: 1.2em;
}
.historycircle_l p span{ /* 左軸の説明 ２行目 */
font-size: 0.7em;
}
.historycircle_r { /* 右軸の説明 */
display:inline-block;
position: relative;
width: 100px;
height: 100px;
background: #A02c2c; /* くすんだ赤 */
color: #fff;
font-weight: bold;
border-radius: 50%;
text-align: center;
margin-left: 30px; /* ２つの円の間を空ける */
}
.historycircle_r p { /* 右軸の説明 text部分 縦センタリングする*/
position: absolute;
top: 50%;
left: 0;
width: 100px;/*上のwidthと合わせる*/
text-align: center;
-ms-transform: translateY(-50%);
-webkit-transform : translateY(-50%);
transform : translateY(-50%);
font-size: 1.2em;
}
.historycircle_r p span { /* 右軸の説明 ２行目 */
font-size: 0.7em;
}
/* 代表者挨拶ページ */
ol.president_developmentlist {
/* line-height: 2.2em;*/
}
.president_developmentlist li {
font-weight: bold;
padding-bottom: 1.5em;
}
/* 製品詳細ページ */
/* 開発年数 */
.product_developmentyear {
font-weight: bold;
text-align: right;
background: #3274c1; /* 背景：くすんだブルー */
color: #fff;
padding: 5px 15px 3px 0px;
margin: 0 0 20px 0;
}
/* 説明TEXT */
.product_explaintext {
background-color: #f7f6f4; /* 薄めグレーベージュ */
text-align: left;
/* width: 87%; */
padding: 20px 20px 20px 20px;
line-height: 1.3em;
}
/* 先頭がチェックマーク のリスト */
ul.list_checkmark {
list-style-type: none;
margin-top: 10px 10px 20px 10px;
margin-left: 2em;/* マーカーを1文字寄せた分、ULにマージンを設定*/
font-weight: bold;
}
ul.list_checkmark li {
padding-left: 10px; /* 左余白 */
}
ul.list_checkmark li:before {
font-family: FontAwesome;
content: '\f058'; /* アイコンのunicode */
margin-left:-2em; /* 1文字分、左に寄せる */
font-weight: bold;
}
/* 採用情報 ※DIVの後に、Pタグ必要 */
.contact-recruitment { /* 採用 お問い合わせ ボタン */
background: #DBC967; /* お問い合わせの送信ボタンと合わせている */
color: #ffffff;
font-size: 14px;
font-weight: bold;
width: 220px;
height: 25px;
margin: 10px auto;
text-align: center;
vertical-align: top middle;/* text-bottom baseline*/
padding: 5px 5px;
}
.contact-recruitment p {
line-height: 25px; /* 上記と数値をあわせる必要あり 中央揃えのため*/
}
.contact-recruitment a:hover { /**マウスオーバー時、ボックスを半透明に**/
background-color:#FFF;
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
/* Web管理人コメント部分 クラス */
.webadministrator_comment {
line-height: 0.95em;
}
/* 主体的の説明 テキストに背景色 */
.text_subjective { /* 主体的 */
background-color: #f6e1e0;
margin: 0 2px;
padding: 0 2px; /* 左右に余白 */
}
.text_voluntary { /* 自主的 */
background-color: #eeefcd;
margin: 0 2px;
padding: 0 2px; /* 左右に余白 */
}
.text_active { /* 能動的 */
background-color: #f5af99;
margin: 0 2px;
padding: 0 2px; /* 左右に余白 */
}
.text_passive { /* 受動的 */
background-color: #98dde0;
margin: 0 2px;
padding: 0 2px; /* 左右に余白 */
}
.text_jihastu { /* 自発的 */
background-color: #d2eac2;
margin: 0 2px;
padding: 0 2px; /* 左右に余白 */
}
/* --end 採用情報 end-------------------------------------------------------- */
/* -- 用語解説 マイクロマウスページ -------------------------------------------------------- */
.mouse_message{ /* 4.JSDxmouse 社長と井谷さんよりメッセージの顔写真 */
width: 80%; /* 下のメッセージと揃えるため */
padding: 0 1em 0 1em; /* 下のメッセージと揃えるため */
margin: 1em auto!important; /* 下のメッセージと揃えるため */
}
/* --↑end 用語解説 マイクロマウスページ ↑end -------------------------------------------------------- */
/* 提供できるモノ・コトページ */
.embedded-example { /* 組み込みシステムの例 のリストを横並びに */
display: -webkit-flex; /* Safari */
display: flex;
-webkit-flex-wrap: wrap; /* Safari */
flex-wrap: wrap;
-webkit-align-content: flex-start; /* Safari */
align-content: flex-start; /* 複数行のFlexboxを揃える */
}
.developmentlist-frame { /* 過去の開発一覧表用(外枠) div */
padding: 2em;
background-color: #fff;
border: 4px double #ddd;
}
.developmentlist-content1 { /* 過去の開発一覧表用(検査装置、自動制御装置) div */
padding: 10px 10px;
background-color: #f7f6f4;
border: 0px solid #c13832;
margin-bottom: 15px; /*上側のコンテンツにだけ設定。→間を空けるため。 */
}
.developmentlist-content2 { /* 過去の開発一覧表用(補助金) div */
padding: 10px 10px;
background-color: #fbfbf4;
border: 0px solid #e49b98;
}
.developmentlist li{
font-weight:bold;/* 太字に */
}
.developmentlist li img{ /* list用 画像とテキストの高さを揃える*/
vertical-align: middle;
}
.inthecase-jsd { /* JSDアイコンの大きさを指定 */
-webkit-flex-shrink: 0; /* Safari */
flex-shrink: 0; /* 圧縮率 0はオリジナルを縮小しない*/
margin-left: 15px;
}
.inthecase-jsd2 { /* JSD解決例 テキスト幅（右側）を指定 2020.01.20追加 */
width: 300px;
line-height: 1.7em;
}
/* Provideページ内で、大きい文字 【20pxに統一】 */
.provide-font20 { /* フォント 大 */
font-size: 20px;
}
/* dl(データリスト)を横並び FlexBox 用語解説ページ */
.flexbox_glossary_fordl dl, dt, dd {
box-sizing: border-box;
border: 1px none #ccc; /* 共通のborderを定義。ただし、border-styleをnoneにし、初期状態では非表示にする */
}
.flexbox_glossary_fordl dt, dd {
margin: 0;
border-top-style: solid; /* 上のborderを表示 */
padding: 10px;
}
.flexbox_glossary_fordl dl {
/*
* Flexible Boxを有効化
*/
display: -ms-flex; /* IE用 */
display: -webkit-flex; /* Webkit用 */
display: flex; /* ベンダープレフィックス無し。ベンダープレフィックス付プロパティを上書きするため、一番後に書く */
/*
* はみ出そうな時の折り返しを有効化
*/
-ms-flex-wrap: wrap; /* IE用 */
-webkit-flex-wrap: wrap; /* Webkit用 */
flex-wrap: wrap; /* ベンダープレフィックス無し。ベンダープレフィックス付きプロパティを上書きするため、一番後に書く */
border-style: none solid solid; /* 上を除く、全てのborderを表示 */
}
.flexbox_glossary_fordl dt {
width: 30%; /* 幅を指定 */
background: #eee; /* dt要素のための背景色を指定 */
}
.flexbox_glossary_fordl dd {
width: 70%; /* 幅を指定 */
border-left-style: solid; /* 左のborderを表示 */
}
/* ↑end 横並びにするための FlexBox標準化 ↑end */
/* ---------------------------------------------------------- */
/* dl(データリスト)を横並び FlexBox BalanScoreページ 価格表示用の表 2022.08追加*/
.flexbox_price_fordl dl, dt, dd {
box-sizing: border-box;
border: 1px none #ccc; /* 共通のborderを定義。ただし、border-styleをnoneにし、初期状態では非表示にする */
}
.flexbox_price_fordl dt, dd {
margin: 0;
border-top-style: solid; /* 上のborderを表示 */
padding: 10px;
}
.flexbox_price_fordl dl {
/*
* Flexible Boxを有効化
*/
display: -ms-flex; /* IE用 */
display: -webkit-flex; /* Webkit用 */
display: flex; /* ベンダープレフィックス無し。ベンダープレフィックス付プロパティを上書きするため、一番後に書く */
/*
* はみ出そうな時の折り返しを有効化
*/
-ms-flex-wrap: wrap; /* IE用 */
-webkit-flex-wrap: wrap; /* Webkit用 */
flex-wrap: wrap; /* ベンダープレフィックス無し。ベンダープレフィックス付きプロパティを上書きするため、一番後に書く */
border-style: none solid solid; /* 上を除く、全てのborderを表示 */
}
.flexbox_price_fordl dt {
width: 50%; /* 幅を指定 */
background: #eee; /* dt要素のための背景色を指定 */
}
.flexbox_price_fordl dd {
width: 50%; /* 幅を指定 */
border-left-style: solid; /* 左のborderを表示 */
vertical-align: middle; /*（追記）上下中央揃え*/
}
/* ↑end 横並びにするための FlexBox標準化 ↑end */
/* 用語説明ページ ------------------------------------------------------------------------------------------- */
/* 学生さん */
.flexbox_glossaryboy {/*外枠*/
display: -webkit-flex; /* Safari */
display: flex;
-webkit-justify-content: center; /* Safari （中央）*/
justify-content: center;
-webkit-align-items: center; /* Safari (垂直の中央揃え)*/
align-items: center; margin: 0;
width: 90%;
}
.flexbox_glossarygirl {/*外枠 女子の場合だけ、Width90%ブロックを右寄せにする*/
margin-left: auto;
}
.flexitem_glossaryboy1 {/* 学生さん画像（Flexitem1） */
width: 20%;
margin: 0;
/* outline: 1px solid #ccc; test */
}
.flexitem_glossaryboy2 {/* 学生さんコメント（Flexitem2） 吹き出しにする */
width: 80%;
background-color: #fff;
margin: 0;
padding: 0px;
}
/* 学生用吹き出し(glossaryboy_balloon)--------------------------*/
.glossaryboy_balloon {
position: relative;
background: #f1f7ec;
border: 0px solid #e3efd9;
min-height: 70px; /* 高さの最小値を指定 */
padding: 25px;
/*↓角丸める*/
border-radius: 10px; /* CSS3草案 */
-webkit-border-radius: 10px; /* Safari,Google Chrome用 */
-moz-border-radius: 10px; /* Firefox用 */
}
.glossaryboy_balloon:after, .glossaryboy_balloon:before {
right: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.glossaryboy_balloon:after {
border-color: rgba(241, 247, 236, 0);
border-right-color: #f1f7ec;
border-width: 20px;
margin-top: -20px;
}
.glossaryboy_balloon:before {
border-color: rgba(227, 239, 217, 0);
border-right-color: #e3efd9;
border-width: 23px;
margin-top: -23px;
}
.glossaryboy_balloon div{/*テキスト部分*/
padding: 0 20px; /*左右に余白*/
}
.glossaryboy_balloon p{/*くくりの”部分のpタグ*/
margin: 0;
padding: 0;
text-align: right;/* 右端 */
}
/* ↑end 学生用吹き出し(glossaryboy_balloon)↑end --------------------------*/
/* 学生用吹き出し２(glossarygirl_balloon)--------------------------*/
.glossarygirl_balloon {
position: relative;
background: #fff9f2; /* ①背景色 */
border: 0px solid #f5daab; /* ★吹き出しの線が上手く表示されないため非表示 */
min-height: 70px; /* 高さの最小値を指定 */
padding: 25px;
/*↓角丸める*/
border-radius: 10px; /* CSS3草案 */
-webkit-border-radius: 10px; /* Safari,Google Chrome用 */
-moz-border-radius: 10px; /* Firefox用 */
}
.glossarygirl_balloon:after, .glossaryboy_balloon:before {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.glossarygirl_balloon:after {
border-color: rgba(240, 240, 240, 0);
border-left-color: #fff9f2; /* ①背景色 */
border-width: 20px;
margin-top: -20px;
}
.glossarygirl_balloon:before {
border-color: rgba(245, 218, 171, 0);
border-left-color: #f5daab;
border-width: 23px;
margin-top: -23px;
}
.glossarygirl_balloon div{/*テキスト部分*/
padding: 0 20px; /*左右に余白*/
}
.glossarygirl_balloon p{/*くくりの”部分のpタグ*/
margin: 0;
padding: 0;
text-align: right;/* 右端 */
}
/* ↑end 学生用吹き出し２(glossarygirl_balloon)↑end --------------------------*/
/* CAN利用一例の、マークとテキスト ※塗布検査ページでも緑と青を利用2020.0207 ----------------------------------*/
/* mark */
.mark_exampleofcan_car { /* 自動車：水色 */
color: #32bbc1;
font-weight: bold;
}
.mark_exampleofcan_industry { /* 産業：黄緑 */
color: #5C9734;
font-weight: bold;
}
.mark_exampleofcan_publicvehicle { /* 公共乗り物：オレンジ */
color: #f18b6a;
font-weight: bold;
}
.mark_exampleofcan_aviation { /* 航空：青*/
color: #3274c1;
font-weight: bold;
}
.mark_exampleofcan_medical { /* 医療：ピンク */
color: #d4605b;
font-weight: bold;
}
/* text */
.text_exampleofcan_car { /* 自動車 */
background-color: #98dde0;
font-weight: bold;
}
.text_exampleofcan_industry { /* 産業 */
background-color: #d2eac2;
font-weight: bold;
}
.text_exampleofcan_publicvehicle { /* 公共乗り物 */
background-color: #f5af99;
font-weight: bold;
}
.text_exampleofcan_aviation { /* 航空 */
background-color: #c7daf0;
font-weight: bold;
}
.text_exampleofcan_medical { /* 医療 */
background-color: #f6e1e0;
font-weight: bold;
}
/* ↑end CAN利用一例の、マークとテキスト ↑end --------------------------*/
/* CAN 開発された経緯の枠デザイン */
.storyofcan {
width: 80%;
border: 4px double #ddd;
margin: 0;
padding: 2em;
}
/* --↑end 用語説明ページ end↑ ------------------------------------------------------------------------------- */
/* 【投稿用ページ】 アイキャッチ非表示設定 */
.postid-3542 .entry-header img.wp-post-image { /* JSD32周年の投稿記事 */
display: none !important;
background: #ad3d25;
color: #fff;
}
/* ログスキャナページ */
.logsccaner_japan { /* 日本製 画像の幅を固定 */
width: 240px;
}
/* ================= 標準化クラス ================ */
/* 引用 */
blockquote {
position: relative;
padding: 10px 15px 10px 60px;
box-sizing: border-box;
font-style: italic;
background: #f5f5f5;
color: #777777;
border-left: 4px solid #e09b98;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14);
}
blockquote:before{
display: inline-block;
position: absolute;
top: 15px;
left: 15px;
vertical-align: middle;
content: "\f10d";
font-family: FontAwesome;
color: #e09b98; /* color */
font-size: 30px;
line-height: 1;
font-weight: 900;
}
blockquote p {
padding: 0;
margin: 5px 0px 7px 30px!important;
line-height: 1.7;
}
blockquote cite {
display: block;
text-align: right;
color: #888888;
font-size: 0.9em;
}
/* 目次用*/
.mokuji {
border: 4px double #ddd;
width: 50%;
padding: 2em;
margin: 2em auto;
}
.mokuji p {
font-size: 1.2em;
font-weight: bold;
text-align: center;
margin: 0;
padding: 0;
}
/* ----目次２（アコーディオンで展開）----*/
.mokuji_2 {
margin: 0em auto;
padding: 2em;
max-width: 400px;/*最大幅*/
}
.mokuji_2 label {
display: block;
margin: 1.5px 0;
padding : 11px 12px;
font-size: 1.2em;
font-weight: bold;
border: 4px double #ddd;
cursor :pointer;
transition: all 0.2s;
text-align: center;
}
/*アイコンを表示*/
.mokuji_2 label:before {
content: '\f054';
font-family: 'FontAwesome';
padding-right: 8px;
}
/*ラベルホバー時*/
.mokuji_2 label:hover {
background :#efefef;
}
/*チェックは隠す*/
.mokuji_2 input {
display: none;
}
/*中身を非表示にしておく*/
.mokuji_2 .accshow {
height: 0;
padding: 0;
overflow: hidden;
opacity: 0;
transition: 0.2s;
}
/*クリックで中身表示*/
.cssacc:checked + .accshow {
height: auto;
padding: 1.0em 1.5em;
border-bottom : double 4px #ddd;
border-right : double 4px #ddd;
border-left : double 4px #ddd;
opacity: 1;
}
.mokuji_2 .accshow p {
margin: 15px 10px}
/*アイコンを入れ替える ？なぜか効かない*/
.cssacc:checked + label:before {
content: '\f078';
}
/*ボーダー（下）を消す*/
.cssacc:checked + label {
border-top : double 4px #ddd;
border-right : double 4px #ddd;
border-left : double 4px #ddd;
border-bottom : dotted 4px #ddd;
}
/* --end↑ 目次２ ↑end-- */
a.btn_gotocontact { /* ボタンVer1 ★テーマ赤色 */
display: inline-block;
margin-top: .5rem;
border: 0 solid #ad3d25;
padding: 0.675rem 1.75rem;
background: #d83d3d; /* ボタン色（テーマ赤） 旧：#D35034、#c13832、#d35953 */
color: #fff!important;
font-size: .875rem;
font-weight: bold;
font-family: 'FontAwesome', 'Meiryo', 'Hiragino Kaku Gothic Pro', sans-serif;
cursor: pointer;
transition: background-color 300ms ease-out;
box-shadow: 0 4px 0px rgba(0,0,0,0.3); /* CTAに影追加2019.10.28 */
border-radius:4px;
}
a.btn_gotocontact:hover {
background: #ad3d25;
color: #fff;
transform: translate3d(0, 5px, 0); /*Y軸に5px移動 2022/04/12add*/
box-shadow: none; /*影削除 2022/04/12add*/
}
a.btn_gotocontact2 { /* CTAボタンVer2 ★緑色 */
display: inline-block;
margin-top: .5rem;
border: 0 solid #ad3d25;
padding: 0.8rem 2.5rem; /* old →padding: 0.675rem 1.75rem */
background: #28982c;
color: #fff!important;
font-size: 1.1em; /* old→ .875rem */
font-weight: bold;
font-family: 'FontAwesome', 'Meiryo', 'Hiragino Kaku Gothic Pro', sans-serif;
cursor: pointer;
transition: background-color 300ms ease-out;
box-shadow: 0 4px 0px rgba(0,0,0,0.3); /* CTAに影追加2019.10.28 */
border-radius:4px;
}
a.btn_gotocontact2:hover {
background: #144D16;
color: #fff;
transform: translate3d(0, 5px, 0); /*Y軸に5px移動 2022/04/12add*/
box-shadow: none; /*影削除 2022/04/12add*/
}
a.btn_gotocontact3 { /* CTAボタンVer3 ★小さめ、色: */
display: inline-block;
margin-top: .2rem;
margin-bottom: .6rem;
border: 0 solid #ad3d25;
padding: 0.2rem 1.75rem;
background: #28982c;
color: #fff!important;
font-size: .875rem;
font-family: 'FontAwesome', 'Meiryo', 'Hiragino Kaku Gothic Pro', sans-serif;
cursor: pointer;
transition: background-color 300ms ease-out;
}
a.btn_gotocontact3:hover {
background: #144D16;
color: #fff;
}
a.btn_gotocontact4 { /* CTAボタンVer4 ★黄緑色 採用専門のCTAで利用 */
display: inline-block;
margin-top: .5rem;
border: 0 solid #ad3d25; /* 利用してない */
padding: 0.675rem 1.75rem;
background: #669828; /* ボタン色 */
color: #fff!important;
font-size: 1.1em; /* old→ .875rem */
font-weight: bold;
font-family: 'FontAwesome', 'Meiryo', 'Hiragino Kaku Gothic Pro', sans-serif;
cursor: pointer;
transition: background-color 300ms ease-out;
box-shadow: 0 4px 0px rgba(0,0,0,0.3); /* CTAに影追加2019.10.28 */
border-radius:4px;
}
a.btn_gotocontact4:hover {
background: #42631A;
color: #fff;
}
ul.standard_attention { /* 注意書き用リスト */
list-style-type: none;
font-size: 0.85em;
margin: 10px 0 10px 0; /* 上下にマージン */
}
ul.standard_attention li {
line-height: 1.2em;
}
/* リスト（先頭＞マーク）※用語解説一覧ページで使用 */
ul.list_chevron {
list-style-type: none;
font-size: 1.3em; /* 文字大きめ */
margin: 5px 0 5px 0; /* 上下にマージン */
position: relative;
}
ul.list_chevron li {
padding: 0.5em 0 0.2em 1em;/*左端からテキストまで*/
line-height: 1.0em;
font-weight: bold;
}
ul.list_chevron li:before {/*疑似要素*/
font-family: FontAwesome;
content: "\f054";/*アイコンの種類 ＞ fa-chevron-right*/
position: absolute;
left: 1.5em; /*左端からのアイコンまで*/
color: #228b22; /*アイコン色*/
}
ul.list_chevron li:nth-child(even){
background:#f7f6f4;/*偶数行 背景色 グレーベージュ*/
}
ul.list_chevron a:hover {
color: #d6dadc!important;/*カーソルオーバ時、文字を薄く*/
}
ul.list_chevron a:visited {
color: #444; /*フォントの色を変えない*/
}
/* リスト（先頭緑チェックマーク）※マイクロマウス用語解説ページ、AI用語解説ページ IoT用語解説 クラウド用語解説 など多数で使用 */
ul.list_greencheck {
list-style-type: none;
position: relative;
}
ul.list_greencheck li {
padding: 0.5em 0 0.2em 1em;/*左端からテキストまで*/
line-height: 1.5em;
font-weight: bold;
}
ul.list_greencheck li:before {/*疑似要素*/
font-family: FontAwesome;
content: "\f058";/*アイコンの種類*/
position: absolute;
font-size: 1.2em;
left: 1.5em; /*左端からのアイコンまで*/
color: #228b22; /*アイコン色→ 緑*/
}
/* -----↑endリスト（先頭緑チェックマーク） ↑end -----*/
/* リスト（先頭緑チェックマーク）２ ※上のものから派生（アイコンまでのインデントなし、フォント大きめ） ※提供できるもの・ことページ改善時追加 2020.01.20 */
ul.list_greencheck2 {
list-style-type: none;
position: relative;
margin: 0;
}
ul.list_greencheck2 li {
padding: 0.5em 0 0.2em 1em;/*左端からテキストまで*/
line-height: 1.5em;
font-weight: bold;
font-size: 1.1em;/*フォントサイズ おおきめ*/
margin: 0.5em;
}
ul.list_greencheck2 li:before {/*疑似要素*/
font-family: FontAwesome;
content: "\f058";/*アイコンの種類*/
position: absolute;
font-size: 1.3em;
left: 0; /*左端からのアイコンまで→0に変更*/
color: #228b22; /*アイコン色→ 緑*/
}
/* -----↑endリスト（先頭緑チェックマーク）２ ↑end -----*/
/* リスト（先頭緑チェックマーク３）※上のものから派生（アイコンまでのインデントなし、フォントウェイト：ノーマル） ※開発コンサルページ追加 2020.10.12 */
ul.list_greencheck3 {
list-style-type: none;
position: relative;
}
ul.list_greencheck3 li {
padding: 0.5em 0 0.2em 0em;/*左端からテキストまで→0に変更*/
line-height: 1.5em;
}
ul.list_greencheck3 li:before {/*疑似要素*/
font-family: FontAwesome;
content: "\f058";/*アイコンの種類*/
position: absolute;
font-size: 1.2em;
left: 0.5em; /*左端からのアイコンまで→0.5に変更*/
color: #228b22; /*アイコン色→ 緑*/
}
/* -----↑endリスト（先頭緑チェックマーク） ↑end -----*/
/* リスト（円数字）2022.07.13 ※BalanScoreで利用*/
ol.list_rednum {
counter-reset:number; /*数字をリセット*/
list-style-type: none!important; /*数字を一旦消す*/
padding: 0.3em 0.8em;
}
ol.list_rednum li {
border-bottom: dashed 1px orange;
position: relative;
padding: 0.5em 0.5em 0.5em 30px;
line-height: 1.5em;
font-size: 16px;
}
ol.list_rednum li:before{
/* 以下数字をつける */
position: absolute;
counter-increment: number;
content: counter(number);
/*数字のデザイン変える*/
display:inline-block;
background: #ffb107;
color: white;
font-family: 'Avenir','Arial Black','Arial',sans-serif;
font-weight:bold;
font-size: 15px;
border-radius: 50%;
left: 0;
width: 25px;
height: 25px;
line-height: 25px;
text-align: center;
/*以下 上下中央寄せのため*/
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
ol.list_rednum li:last-of-type {
border-bottom: none; /*最後のliの線だけ消す*/
}
/* -----↑endリスト（円数字） ↑end -----*/
/* -----↑endリスト（円数字） ↑end -----*/
/* 先頭がチェックマーク風 データリスト ※イオンカウンタページ、マイクロマウス用語解説ページで使用 */
dl.checkmark_fordl { /* データリスト ※枠線は今は表示しないことにした */
/*border: 4px double #ddd;*/
padding: 0.5em 1em 0.5em 2.3em;
position: relative;
}
dl.checkmark_fordl dt { /* データリスト タイトル→チェックマーク */
line-height: 1.5;
padding: 0.5em 0 0.2em 1.5em;
font-size: 1.3em; /* 文字大きめ */
}
dl.checkmark_fordl dt:before {/*疑似要素*/
font-family: FontAwesome;
content: "\f058";/*アイコンの種類*/
position: absolute;
left: 1.5em; /*左端からのアイコンまで*/
color: #228b22; /*アイコン色*/
}
dl.checkmark_fordl dd { /* データ部分 */
line-height: 1.6;
}
/* -----↑end 先頭がチェックマーク風 データリスト ↑end -----*/
/* 先頭がチェックマーク風 データリスト ※投稿（開発コンサル）ページで使用 */
dl.faq { /* データリスト */
padding: 0.5em 1em 0.5em 2.3em;
position: relative;
}
dl.faq dt { /* データリスト タイトル→Q.マーク */
line-height: 1.5;
padding: 0.5em 0 0.2em 1.5em;
font-size: 1.3em; /* 文字大きめ */
}
dl.faq dt:before {/*疑似要素*/
/* font-family: FontAwesome; */
content: "Q.";/*アイコンの種類*/
position: absolute;
left: 1.5em; /*左端からのアイコンまで*/
color: #228b22; /*アイコン色*/
}
dl.faq dd { /* データ部分 */
line-height: 1.6;
}
/* -----↑end 先頭がチェックマーク風 データリスト ↑end -----*/
/* リスト 通常リストに、項目間の余白を追記 */
ul.list_circle_2 li {
margin: 0 0 0.9em 2.571428571rem; /* 余白 */
}
/* リスト 先頭マーク＝円形(カラー変更可) */
/* 現在、イオンカウンタ詳細ページ、研磨加工検査装置詳細ページ、マイクロマウス用語解説、用語解説（親） 用語解説IoT で利用中*/
ul.list_circle_1 {
margin: 0!important; /* 余白防止 */
padding: 0!important;
}
ul.list_circle_1 li {
list-style-type: none!important;/*ポチ消す*/
position: relative;
margin: 0 0 0 1em; /* 余白防止 */
line-height: 1.7em;
}
ul.list_circle_1 li::after {
display: block;
content: '';
position: absolute;
top: .5em;
left: -1em;
width: 6px;
height: 6px;
background-color: #228b22; /* 円マークの色 【緑】*/
border-radius: 100%;
}
/* div用 画像とテキストを中央揃えに flexを使って */
.div_verticalalignmiddle {
display: flex;
align-items: center;
margin: 0;
}
.indent-h1 { /* 左インデント用（H1直後用） */
width: 95%;
margin: 0 0 0 15px;
}
.indent-h2 { /* 左インデント用（H2直後用） */
width: 95%;
margin: 0 10px 0 20px;
}
.indent-h3 { /* 左インデント用（H3直後用） */
width: 85%;
margin: 0 0 0 30px;
}
.indent-narrow50 { /* 幅調整50%*/
width: 50%;
margin: 0 auto;
}
.indent-narrow60 { /* 幅調整60%*/
width: 60%;
margin: 0 auto;
}
.indent-narrow70 { /* 幅調整70%*/
width: 70%;
margin: 0 auto;
}
.indent-narrow80 { /* 幅調整80% */
width: 80%;
margin: 0 auto;
}
.indent-narrow85 { /* 幅調整85% */
width: 85%;
margin: 0 auto;
}
.indent-narrow90 { /* 幅調整90% */
width: 90%;
margin: 0 auto;
}
.indent-narrow95 { /* 幅調整95% */
width: 95%;
margin: 0 auto;
}
.page-font-s { /* フォント 小さめ */
font-size: 11px;
line-height: 1.3em; /* div で使ったときのみ有効 */
}
.page-font-ss { /* フォント 極小 */
font-size: 9px;
}
.page-font-b { /* font太字 */
font-weight: bold;
}
.page_linenarrow_12 { /* 行間を狭くしたいとき */
line-height: 1.2em;
}
.product_headertext { /* 商品詳細ページ 説明テキスト(大きい文字用) */
font-size: 1.1em;
line-height: 1.7em;
margin: 0 0.5em;
}
.page-font-05 { /* フォント 0.5倍 */
font-size: 0.5em;
}
.page-font-06 { /* フォント 0.6倍 */
font-size: 0.6em;
}
.page-font-07 { /* フォント 0.7倍 */
font-size: 0.7em;
}
.page-font-08 { /* フォント 0.8倍 */
font-size: 0.8em;
}
.page-font-085 { /* フォント 0.85倍 */
font-size: 0.85em;
}
.page-font-08_lineheight15 { /* フォント 0.8倍 ※行間小さめで利用したい時*/
font-size: 0.8em;
line-height: 1.5em;
}
.page-font-09 { /* フォント 0.9倍 */
font-size: 0.9em;
}
.page-font-11 { /* フォント 1.1倍 */
font-size: 1.1em;
}
.page-font-12 { /* フォント 1.2倍 */
font-size: 1.2em;
}
.page-font-13 { /* フォント 1.3倍 */
font-size: 1.3em;
}
.page-font-14 { /* フォント 1.4倍 */
font-size: 1.4em;
}
.page-font-15 { /* フォント 1.5倍 */
font-size: 1.5em;
}
.page-font-16 { /* フォント 1.6倍 */
font-size: 1.6em;
}
.page-font-17 { /* フォント 1.7倍 */
font-size: 1.7em;
}
.page-font-18 { /* フォント 1.8倍 */
font-size: 1.8em;
}
.page-font-19 { /* フォント 1.9倍 */
font-size: 1.9em;
}
.page-font-double { /* フォント ２倍 */
font-size: 2em;
}
.page-font-web-roboto { /* Webフォント ROBOTO */
font-family: 'Roboto', sans-serif;
}
.page-font-yellowgold {/* 金色っぽい黄色のテキスト */
color: #e6b422; /* 金色っぽい黄色 （製品一覧ページ）*/
}
.page-font-kakiiro {/* 柿色のテキスト */
color: #ed6d3d; /* 柿色 */
}
.page-font-konai {/* 紺藍のテキスト */
color: #4a488e; /* 紺藍 */
}
.page-font-turquoise {/* ターコイズのテキスト */
color: #32bbc1; /* ターコイズ */
}
.page-font-blue {/* 青のテキスト */
color: #3274c1; /* 青 */
}
.page-font-themered {/* 赤色のテキスト */
color: #c13832; /* テーマ色の赤色*/
}
.page-font-grayout {/* 薄いグレーアウト用のテキスト */
color: #babcbe;
}
.page-webfont-ArchivoBlack {/* Webfont [Archivo+Black] 太めWIDE文字 */
font-family: 'Archivo Black', sans-serif;
font-size: 1.2em;
}
/* ------ textの背景色 ------ */
.page_bkcolor_red { /* 背景＜赤＞ */
background-color: #d7847e;
font-weight: bold;
}
.page_bkcolor_yellow { /* 背景＜黄＞ */
background-color: #f8e133;
font-weight: bold;
}
.page_bkcolor_green { /* 背景＜緑＞ */
background-color: #85beab;
font-weight: bold;
}
/* ------ end textの背景色 end ------ */
/* ------ div幅指定 ------ */
.div-w-200 { /* div幅を指定したい時 */
width: 200px;
}
.div-w-300 { /* div幅を指定したい時 */
width: 300px;
}
.div-w-350 { /* div幅を指定したい時 */
width: 350px;
}
.div-back-color1 { /* 背景色１ */
background-color: #f7f6f4; /* 薄めグレーベージュ */
text-align: left;
width: 87%;
padding: 10px 10px 10px 10px;
}
.div-back-color1_2 { /* 背景色１ widthを95%に変更*/
background-color: #f7f6f4; /* 薄めグレーベージュ */
text-align: left;
width: 95%;
padding: 10px 10px 10px 10px;
}
.div-back-color1_3 { /* 背景色１ 中央に 2022.07追加*/
background-color: #f9f8f7; /* 薄めグレーベージュ */
text-align: left;
width: 95%;
padding: 1.5em 1em 1.5em 1em;
margin: 0 auto;
}
.div-back-color2 { /* 背景色２ 薄いオレンジ 中央に 2022.07追加*/
background-color: #fffbf1; /* 薄めオレンジ */
text-align: left;
width: 95%;
padding: 1.5em 1em 1.5em 1em;
margin: 0 auto;
}
.div_backwhite { /* 背景白 */
background-color: #fff; /* 背景白 */
text-align: left;
width: 80%;
padding: 1.5em 1em 1.5em 1em;
margin: 0 auto;
}
.div_backwhite2 { /* 背景白 余白狭めwidth90%→できるだけコンテンツを大きく表示するため 2019.04.11*/
background-color: #fff; /* 背景白 */
text-align: left;
width: 90%;
padding: 1.5em 0.5em 1em 0.5em;
margin: 0 auto;
}
/* 普通の下線 */
.uline {
border-bottom: solid 3px #444; /* bodyと同じ色 */
}
.uline_bold {
border-bottom: solid 3px #444; /* bodyと同じ色 */
font-weight: bold;
}
/* アンダーライン */
.font-underline-red {
border-bottom: 2px solid #ff3333; /* 赤 */
display: inline-block; /* 文字からの余白調整のため必要。ただし、複数行はできない */
line-height: 1.1; /* 文字からの離れ具合*/
}
/* 注釈用（※）スタイル 連番 */
div.com_list_num {
text-indent: -2em;
margin-left: 2em;
counter-increment: calc-ex9;
font-size: 0.8em;
line-height: 1.7em;
margin-bottom: 0.5em; /* リスト間に少し間を空けるため */
}
div.com_list_num:before {
content: '\203B'counter(calc-ex9);
display: inline-block;
width: 2em;
text-indent: 0;
}
/* -------------------------------- */
/* 注釈用（※）スタイル 連番なし */
div.com_list {
text-indent: -1em;
margin-left: 1em;
font-size: 0.8em;
line-height: 1.7em;
margin-bottom: 0.5em; /* リスト間に少し間を空けるため */
}
div.com_list:before {
content: '※';
}
/* -------------------------------- */
/* 注釈用（※印なし）テキスト小サイズ、行間小さめ、 */
div.com_list_none {
font-size: 0.8em;
line-height: 1.7em;
margin-bottom: 0.5em; /* リスト間に少し間を空けるため */
}
/* -------------------------------- */
/* リストのマーク強制的に削除*/
.ul_nomark {
list-style: none!important;
}
.ul_nomark li {
line-height: 1.5em;
}
/* サブヘッドライン用 ※事例紹介#01WooDiLページで利用*/
.uline_subheadline {
text-decoration: underline;
/* border-bottom: solid 3px #444; bodyと同じ色 */
font-weight: bold;
font-size: 1.2em;
text-align: left;
margin: 0.4em 0; /* 上下余白 */
}
/* マーカーっぽいライン */
.uline-yellow { /* 黄色 */
background: linear-gradient(transparent 65%, #fcf8ba 65%);
padding: 0 5px; /* 左右に余白 */
}
.uline-red { /* 赤色 */
background: linear-gradient(transparent 60%, #f4d6d5 30%); /* メインカラーの薄い赤→#e49b98 濃いピンク→ #ff99ff*/
padding: 0 1px; /* 左右に余白 */
}
.uline-red2 { /* 赤色2(細いアンダーライン) */
background: linear-gradient(transparent 90%, #e49b98 10%); /* メインカラーの薄い赤→#e49b98 濃いピンク→ #ff99ff*/
padding: 0 2px; /* 左右に余白 */
}
.uline-blue { /* 青色 */
background: linear-gradient(transparent 60%, #b6f0fc 60%);
}
.uline-gray { /* グレー */
background: linear-gradient(transparent 60%, #e2e2e4 60%);
padding: 0 2px; /* 左右に余白 */
}
.sectionline { /* 点線ライン 区切り線として 会社概要ページ、用語解説ページ（麥田社長が考える「組み込みシステムと姿勢」）で使用 */
width: 100%;
border-top: 1px dotted #c13832; /* 赤ドット線 */
margin-top: 0.5em;
margin-bottom: 0.5em;
}
.sectionline-2 { /* 点線ライン 上下囲みライン FAQで使用 */
padding: 10px;
width: 75%;
border-top: 1px dotted #ccc;
border-bottom: 1px dotted #ccc;
}
/* 背景に色 */
.font-backcolor-red { /* 赤系 */
background-color: #f4d6d5;
}
.font-backcolor-turquoise { /* ターコイズ系 */
background-color: #c1eaec;
}
.font-backcolor-yellow { /* 黄色系 */
background-color: #eeefcd;
}
/* 画像の影を取る */
.post img.border-less {
box-shadow: none;
}
.page img.border-less {
box-shadow: none;
}
/* ↑end 画像の影を取る↑end */
/* 吹き出し（下三角）１ */
.arrow_box { /* 提供できるモノコトページで使用 */
position: relative;
background: #fff;
border: 3px solid #d7d3c8;
padding: 2em;
}
.arrow_box:after, .arrow_box:before {
top: 100%;
left: 20%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(245, 245, 245, 0);
border-top-color: #fff;
border-width: 50px;
margin-left: -50px;
}
.arrow_box:before {
border-color: rgba(194, 225, 245, 0);
border-top-color: #d7d3c8;
border-width: 54px;
margin-left: -54px;
}
.arrow_box img {
vertical-align:middle; /*画像とテキストの高さを揃える*/
}
.arrow_box div, arrow_box p { /* JSDアイコンとテキストをTOPで揃えて横並びにする */
display:inline-block;
vertical-align:top;
line-height:1.7em; /*2020.01.20 update*/
}
/* end↑ 吹き出し（下三角）１end↑ */
/* 背景つき枠 */
.frame_1 { /* 提供できるモノコトページで使用 */
position: relative;
background: #fff;
border: 3px solid #d7d3c8; /* グレーベージュ */
padding: 2em;
}
/* end↑ 背景つき枠end↑ */
/* doubleの囲み枠 （中央揃え） */
.frame-double {
border: 4px double #ddd;
margin: 1em 1.2em;
padding: 2em;
text-align: center;
}
.frame-double p { /*２重枠内、本文の部分*/
text-align: left;
margin: 0;
font-size: 12px; /*font 小さめ*/
line-height: 1.3em;
}
/* doubleの囲み枠2 （中央揃え：左右の余白少なめ） */
.frame-double2 {
border: 4px double #ddd;
margin: 1em 1.2em;
padding: 1em 0.3em;
text-align: center;
}
.frame-double2 p { /*２重枠内、本文の部分*/
text-align: left;
margin: 0;
font-size: 12px; /*font 小さめ*/
line-height: 1.3em;
}
/* doubleの囲み枠 （左揃え） */
.frame-double_left {
border: 4px double #ddd;
margin: 2em 1.2em;
padding: 2em;
text-align: left;
}
/* doubleの囲み枠_オレンジ （中央揃え）2022.07追加 */
.frame-double_orange {
border: 4px solid #ffb700;
margin: 1em 1.2em;
padding: 2em;
text-align: center;
background-color: #fffbf1 !important;
}
/* 補足情報 */
.frame-information,
.frame-question,
.frame-bookmark{
background-color: #F4F3EB;
padding: 15px 20px 15px 50px; /*上下左右の調整*/
border-radius: 4px;
position: relative;
display: block;
margin-top: 1em;
margin-bottom: 1em;
}
.frame-information::before,
.frame-question::before,
.frame-bookmark::before{
font-family: "FontAwesome";
font-size: 35px;
position: absolute;
top: 0px;
left: 10px;
color: #F4E59A;
}
.frame-information::before{
content: '\f05a';
}
.frame-question::before{
content: '\f059';
}
.frame-bookmark::before{
content: '\f02e';
}
/* 囲み枠 ＋アイコン ※現在使ってない*/
.frame-double-icon {
background-color: #eee;
border: 1px solid #ccc;
position: relative;
padding: 1em 1em 1em 3.5em;
}
.frame-double-icon::after {
position: absolute;
top: 3px;
left: 10px;
font-family: FontAwesome;
content: '\f05a'; /* \f06a→!、f05a→i、 */
color: #bbb;
font-size: 250%;
}
/* end↑ 囲み枠 ＋アイコン end↑ */
/* 吹き出し○数字リスト */
.defaultlist
,.defaultlist li{
padding:0px;
margin:0px;
}
.defaultlist li{
list-style-type:none !important;
list-style-image:none !important;
margin: 5px 0px 5px 0px !important;
}
.list8{
counter-reset:li;
margin-left:20px !important;
}
.list8 li{
position:relative;
display: block;
padding:8px 0px 8px 40px;
/* font-size: 18px; */
/* font-weight: bold; */
}
li.list8-count:after{
counter-increment: li;
content: counter(li);
color: #c13832;
position: absolute;
left: -16px;
top: 2px;
background: #F9F9F9;
height: 30px;
width: 30px;
line-height: 32px;
border: 2px solid #c13832;
text-align: center;
font-weight: bold;
border-radius: 30px;
}
li.list8-count:before{
content:'';
display:block;
position:absolute;
box-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset;
top:11px;
left:15px;
height:0;
width:0;
border-top: 8px solid transparent;
border-right: 7px solid transparent;
border-bottom: 8px solid transparent;
border-left: 13px solid #c13832;
}
/* ↑end 吹き出し○数字リスト↑end */
/* タグ風リスト */
.list7 li{
position:relative;
display: block;
padding: 5px 0px 5px 30px;
background: #ccc;
color: #444;
border-radius:15px 0px 0px 15px;
font-size: 18px;
font-weight: bold;
}
.list7 li:after{
content:'';
display:block;
position:absolute;
width:14px;
height: 14px;
top:10px; /* ○の位置 */
left:8px; /* ○の位置 */
background: #fff;
border-radius: 10px;
}
/* ↑end タグ風リスト↑end */
/* 横並びにするための FlexBox標準化 */
/* 【➀ 左詰め用】*/
/* 使っているページ → 1.提供できるモノ・コトページ。問題点リストのJSDマークとテキストのレイアウトのため。 */
.standard-flexbox-left {
display: -webkit-flex; /* Safari */
display: flex;
}
.standard-flexbox-left div{
margin: 10px 10px; /* 左右の余白 */
}
/* 【➁ 中央揃え用】*/
/* 使っているページ → 1.投稿【ロボット相撲】の画像レイアウト。 2.レーザ検査装置(平面) 3.イオンカウンタ（親）のバナー */
.standard-flexbox-center {
display: -webkit-flex; /* Safari */
display: flex;
}
.standard-flexbox-center div{
margin: 10px 10px; /* 左右の余白 */
}
/* 【③ 両端用（最初と最後のアイテムは端に、残りは均等に）】*/
/* 使っているページ → 1.用語解説：しきい値 */
.standard-flexbox-bothends {
display: -webkit-flex; /* Safari */
display: flex;
-webkit-justify-content: space-between; /* Safari*/
justify-content: space-between;
}
.standard-flexbox-bothends div{
margin: 0; /* 左右の余白 */
}
/* 【④ 両端用（最初と最後のアイテムは端に、残りは均等に＆縦位置が中央）】*/
/* 使っているページ → 投稿：岡田さん就任 */
.standard-flexbox-bothends2 {
display: -webkit-flex; /* Safari */
display: flex;
-webkit-justify-content: space-between; /* Safari*/
justify-content: space-between;
-webkit-align-items: center; /* Safari */
align-items: center; /* 縦位置が中央 */
}
.standard-flexbox-bothends div{
margin: 0; /* 左右の余白 */
}
/* NEW! タグ風 */
/* newtagは使ってないかも ★ */
.newtag {
background: #fff156;
color: #000;
font-size: 12px;
font-family: 'Berlin Sans FB';
font-weight: bold;
}
/* レスポンシブ対応テーブル 標準化(600pxが境界) */
/* 1.会社概要、2.イオンカウンタ仕様、3.採用情報の応募要項と待遇 4.高速雲台 5.採用情報の会社概要(JSDとは) 6.研磨加工検査装置 7.用語解説（マイクロマウス）*/
table.standard-table{
margin: 0 auto;
border-collapse: separate;
border-spacing: 0px 2px;
font-size: 14px;
}
table.standard-table td {
padding-top: 10px; /* 表のデータ側の上部余白 */
padding-bottom: 5px; /* 表のデータ側の下部余白 */
padding-left: 21px; /* 表のデータ側の左端余白 */
vertical-align: middle;
}
table.standard-table th { /**TH 左列見出し**/
background: #dddcd6;
vertical-align: middle;
text-align: left;
width: 100px;
overflow: visible;
position: relative;
color: #4d4e53; /**文字色 old：#999894 見やすさアップのため**/
font-weight: bold;
font-size: 14px;
}
table.standard-table th:after { /**TH 吹き出し**/
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(136, 183, 213, 0);
border-left-color: #dddcd6; /**矢印**/
border-width: 10px;
margin-top: -10px;
}
/**↑endレスポンシブ対応テーブル 標準化 end↑**/
/* 見出しが上部のテーブル 2020.0706 add （※【用語解説】基板ページ２列で利用）*/
/* 吹き出しなし、レスポンシブ対応なし*/
table.standard-table2{
margin: 0 auto;
border-collapse: separate;
border-spacing: 0px 2px;
font-size: 14px;
}
table.standard-table2 td {
padding-top: 10px; /* 表のデータ側の上部余白 */
padding-bottom: 5px; /* 表のデータ側の下部余白 */
padding-left: 21px; /* 表のデータ側の左端余白 */
vertical-align: middle;
}
table.standard-table2 th { /**TH 左列見出し**/
background: #dddcd6;
vertical-align: middle;
text-align: center;
width: 50%;
overflow: visible;
position: relative;
color: #4d4e53; /**文字色 old：#999894 見やすさアップのため**/
font-weight: bold;
font-size: 14px;
}
table.standard-table2 th {
border: solid 1px #fff; /* 線の種類 太さ 色 */
}
table.standard-table2 td {
border: solid 1px #dddcd6; /* 線の種類 太さ 色 */
}
/**↑end 見出しが上部のテーブル end↑**/
/* パネル 開閉用 ★*/
.standard-panel label {
background: #f7f6f4;
color: #444; /* bodyのフォントカラーと揃える */
display: block;
border: 2px solid #d7d3c8;
cursor: pointer;
width: 90%;
margin: 0 auto;
padding: 5px 0 0 0;
}
.standard-panel label:hover { /* 半透明 */
background-color:#FFF;
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
input[type="checkbox"].on-off{
display: none;
}
.standard-panel div {
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
/* outline: 2px solid #ccc; test */
}
input[type="checkbox"].on-off + div {
display: none;
}
input[type="checkbox"].on-off:checked + div {
display: block;
}
/* ↑end パネル 開閉用 ↑end */
/* パネル 開閉 子要素div */
/* ★new classに作りかえる*/
.standard-panel_child {
width: 80%;
margin: 0 auto;
padding: 15px;
}
div#standard-panel_child {
width: 80%;
margin: 0 auto;
padding: 15px;
}
/* テキストを中央揃え */
.text_center{
text-align: center;
}
/* テキストを右端揃え */
.text_right{
text-align: right;
}
/* テキストを左揃え */
.text_left{
text-align: left;
}
/* 「▽ 画像をクリックすると、拡大表示できます」テキスト用 */
.explain_for_clickimg{
font-size: 11px;
margin-left: 40px; /* 余白40px */
}
.explain_for_clickimg2{
font-size: 11px;
text-align: center; /* 中央揃え用 */
}
/* AWFontを使った ポイントマーク用（30px,普通グレー） */
.style_for_pointmark {
font-size: 30px;
color: #6b6964;
}
/* ================= end 標準化 end ================ */
/* FAQ List 2022.07追加------------------------------ */
.qa-list dl {
position: relative;
margin: 30px 0 0;
/* cursor: pointer; */
border: 1px solid #DDD;
}
.qa-list dl:first-child {
margin-top: 0;
}
/* .qa-list dl::after {
position: absolute;
top: 27px;
right: 26px;
display: block;
width: 7px;
height: 7px;
margin: auto;
content: '';
transform: rotate(135deg);
border-top: 2px solid #000;
border-right: 2px solid #000;
}
*/
.qa-list .open::after {
transform: rotate(-45deg);
}
.qa-list dl dt {
position: relative;
margin: 0;
padding: 20px 20px 20px 60px;
font-weight: bold;
background: #e6e7e8;
}
.qa-list dl dt::before {
font-size: 22px;
line-height: 1;
position: absolute;
top: 20px;
left: 20px;
display: block;
content: 'Q.';
color: #ed6d3d; /* #3285bf */
}
.qa-list dl dd::before {
font-size: 22px;
line-height: 1;
position: absolute;
left: 20px;
display: block;
content: 'A.';
font-weight: bold;
color: #7c8a94; /* #3285bf */
}
.qa-list dl dd {
position: relative;
margin: 0;
padding: 20px 20px 20px 60px;
}
.qa-list dl dd p {
margin: 30px 0 0;
}
.qa-list dl dd p:first-child{
margin-top: 0;
}
.qa-list dd p {
font-size: 0.9em;
}
.test { /* 確認用のクラス */
outline: 1px solid #000;
color: #4d4e53;
background-color: #d7d3c8;
margin: 0;
}
/* 新規追加 600pxまでのサイズの場合→モバイル用)*/
@media only screen and (max-width: 600px) {
/* 問い合わせテーブル */
table.contact {
border-collapse: collapse; /* 隣接する境界線を結合して（重ねて）表示する （初期値） */
}
/* 上下に配置 */
table.contact td, table.contact th {
display: block;
width: 98% !important;
border: 1px solid #dddcd6; /* 縦レイアウトの場合のみ、枠線 */
padding-left: 8px; /* 左端余白 */
}
table.contact th:after { /* th 吹き出し →リセット */
content:none;
}
/* 問合せフォーム 入力欄*/
.wpcf7 input[name="your-name"],
.wpcf7 input[name="your-email"],
.wpcf7 input[name="your-subject"] ,
.wpcf7 input[name="your-tel"] {
width:90% !important;
}
.wpcf7 textarea[name="your-message"] {
width: 90%;
}
/* レスポンシブ対応テーブル 標準化(600pxが境界) */
/* 1.会社概要、2.イオンカウンタ仕様、3.採用情報の応募要項と待遇 4.高速雲台*/
table.standard-table {
border-collapse: collapse; /* 隣接する境界線を結合して（重ねて）表示する （初期値） */
}
table.standard-table td, table.standard-table th {
display: block;
width: 90% !important;
border: 1px solid #dddcd6; /* 縦レイアウトの場合のみ、枠線 */
padding-left: 8px; /* 左端余白 */
}
table.standard-table th:after { /* th 吹き出し →リセット */
content:none;
}
/**↑endレスポンシブ対応テーブル 標準化 end↑**/
/* WooDiL セット内容 テーブル 600pxより小さいとき*/
table.woodil_table_set, table.woodil_table_set thead {
width: 600px; /* スクロールさせるために、100%ではなく幅を固定しておく */
}
.table_scroll{
overflow: auto; /*tableをスクロールさせる*/
white-space: nowrap; /*tableのセル内にある文字の折り返しを禁止*/
margin: 0;
padding: 0;
}
.table_scroll::-webkit-scrollbar{ /*tableにスクロールバーを追加*/
height: 5px;
}
.table_scroll::-webkit-scrollbar-track{ /*tableにスクロールバーを追加*/
background: #F1F1F1;
}
.table_scroll::-webkit-scrollbar-thumb { /*tableにスクロールバーを追加*/
background: #BCBCBC;
}
/* --- end WooDiL セット内容 テーブル end -------------------------- */
}
/* ---end 600pxまでのサイズの場合→モバイル用 end ------------------------------------ */
/*フォント色を濃くするためのCSS ★あとで消す*/
table.standard-table_saiyo{
margin: 0 auto;
border-collapse: separate;
border-spacing: 0px 2px;
font-size: 14px;
}
table.standard-table_saiyo td {
padding-top: 10px; /* 表のデータ側の上部余白 */
padding-bottom: 5px; /* 表のデータ側の下部余白 */
padding-left: 21px; /* 表のデータ側の左端余白 */
vertical-align: middle;
color: #000; /**文字色**/
}
table.standard-table_saiyo th { /**TH 左列見出し**/
background: #dddcd6;
vertical-align: middle;
text-align: left;
width: 100px;
overflow: visible;
position: relative;
color: #000; /**文字色**/
font-weight: bold;
font-size: 14px;
}
table.standard-table_saiyo th:after { /**TH 吹き出し**/
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(136, 183, 213, 0);
border-left-color: #dddcd6; /**矢印**/
border-width: 10px;
margin-top: -10px;
}