@charset "UTF-8";


/* ==============================================================
  リセット
============================================================== */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	font-weight:normal;
	vertical-align:baseline;
	background:transparent;
}

*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

article, aside, details, figcaption, figure,
footer, header, menu, nav, section {
	display:block;
}

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;
}


/* ==============================================================
  html要素
============================================================== */
html{
	font-size:62.5%; /* 10px */
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

body {
	font-family: -apple-system, Segoe UI, Helvetica Neue, Hiragino Kaku Gothic ProN, "メイリオ", meiryo, sans-serif;
	word-wrap: break-word;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-kerning: normal;
	font-kerning: normal;
}

a {
	color: #337ab7;
	text-decoration: underline;
	cursor: pointer;
}

a:hover, a:focus {
	color: #23527c;
	text-decoration: none;
}

input, textarea {
	border-radius: 2px;
	border: solid 1px #ddd;
	box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
	padding: 0.2em;
	font-size: 0.9em;
	
	tab-size: 4;
	-moz-tab-size: 4;
}

textarea {
	resize: none;
}

input:focus,
textarea:focus {
	border-color: #83B6C2;
	box-shadow: 2px 2px 4px rgba(143,183,222,0.6),-2px -2px 4px rgba(143,183,222,0.6),inset 0 1px 2px rgba(0,0,0,0.1);
	outline: none;
}

select {
	border: 1px solid #ddd;
	font-size: 0.9em;
}

input[type=checkbox], input[type=radio] {
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	margin-right: 0.1em;
}

input[type="search"] {
  -webkit-appearance: none;
}

input[type="search"]:focus {
  outline-offset: -2px;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration  {
  -webkit-appearance: none;
}



/* ==============================================================
  単一クラス
============================================================== */

/* スマホ時非表示 */
@media (max-width:767px) {
	.pcOnly {
		display: none;
	}
}

/* 等角 */
.tt {
	font-family: monospace,"Courier New",Consolas;
}

/* 注目・警告要素 */
.warn {
	color: #dd4848;
}
/* 弱要素 */
.light,
.light:hover {
	color: #929292;
}
/* 小さい要素 */
.small {
	font-size: 0.8em
}

/* リストマーク */
.mark {
	margin-left: 1.4em;
}
ul.mark > li {
	list-style-type: disc;
}
ol.mark > li {
	list-style-type: decimal;
}

/* エラー */
.error,
.errors {
	color: #dd4848;
	margin-bottom: 1em;
}
.error:before,
.errors > .head:before {
	content: "\f071";
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	padding-right: 0.3em;
}
.errors > ul {
	margin-left: 0.15em;
}
.errors > ul > li:before {
	content: "\f00c";
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	padding-right: 0.2em;
}

/* エラー小 (部分的に表示) */
.error.mini  {
	margin-bottom: 0;
}
.error.mini:before {
	content: "\f056";
	padding-right: 0.2em;
}

/* 送信完了 */
.success {
	background-color: #ecf8d0;
	padding: 1em;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
/* 固定 */
.success.fix {
	position: static;
}


/* 1桁 */
.input1 {
	width: 1.8em;
}

/* 2桁(時分秒の数字等) */
.input2 {
	width: 2.5em;
}

/* 3桁(フォントサイズの数字等) */
.input3 {
	width: 4em;
}
/* 5桁 */
.input5 {
	width: 5em;
}

/* 6桁の数字(#分のスペースを含む) */
.input6col {
	width: 7em;
	background:url(../img/common/hashtag.svg) 3% 50% no-repeat;
	background-size: 0.7em;
	padding-left: 1em;
}
/* 6文字程度 */
.input6 {
	width: 7em;
}
/* 8文字程度 */
.input8 {
	width: 9em;
}
/* 12文字程度 */
.input12 {
	width: 13em;
}
/* 16文字程度 */
.input16 {
	width: 15em;
}
/* 20文字程度 */
.input20 {
	width: 21em;
}
/* 30文字程度 */
.input30 {
	width: 31em;
}
/* URL欄 */
.inputUrl {
	width: 18em;
}
/* メール欄 */
.inputMail {
	width: 16em;
}
/* 日付入力欄 */
.inputCal {
	width: 8em;
	background:url(../img/common/calendar-alt.svg) 95% 50% no-repeat;
	background-size: 0.8em;
}

/* 時分秒の数字 UP,DOWN */
.inputNumBox {
	line-height: 1;
	font-size: 0.8em;
}
.inputNumBox > a {
	font-family: 'Font Awesome 5 Free';
	font-weight: 400;
	display: block;
	
	color: #aaa;
	text-decoration: none;
	margin-right: 1px;
}
.inputNumBox > a:nth-child(1)::before {
	content: "\f151";
}
.inputNumBox > a:nth-child(2)::before {
	content: "\f150";
}

@media (max-width:767px) {
	input[type=file],
	.inputMail,
	.inputUrl,
	.input16,
	.input20,
	.input30 {
		width: 100%;
	}
}



/* 設定名のリスト */
.point::before {
	content: "\f111";
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	font-size: 0.8em;
	color: #e6262c;
	margin-right: 0.2em;
}



/* table1 (縦テーブル) */
.table1 {

}
.table1 > tbody > tr > th,
.table1 > tbody > tr > td {
	vertical-align: middle;
	padding: 0.5em;
	border: solid 1px #ddd;
}
.table1 > tbody > tr > th {
	background-color: #f4f4f4;
	text-align: left;
	font-weight: normal;
	white-space: nowrap;
}
.table1 > tbody > tr > td {
	background-color: #fff;
}
.table1 > tbody > tr > td > div > .flex > *:not(:last-child) {
	margin-right: 0.5em;
}
.table1 > tbody > tr > td > ul.mark.small {
	line-height: 1.4;
}
.table1 .group:not(:last-child) {
	margin-bottom: 0.8em;
}
.table1 > caption {
	text-align: left;
	color: #398ec7;
	font-weight: bold;
}





@media (max-width:767px) {
	.table1 {
		width: 100%;
	}
	.table1 > tbody > tr > th,
	.table1 > tbody > tr > td {
		display: block;
		border: none;
	}
	.table1 > tbody > tr:not(:last-child) > td {
		padding-bottom: 1em;
	}
	.table1 {
		border: solid 1px #ddd;
	}
}


/* table2 (横テーブル) */
.table2 > tbody > tr > th,
.table2 > tbody > tr > td {
	vertical-align: middle;
	padding: 0.3em 0.5em;
	border: solid 1px #ddd;
}
.table2 > tbody > tr > th {
	background-color: #f4f4f4;
	text-align: left;
	font-weight: normal;
}
.table2 > tbody > tr > td {
	background-color: #fff;
}
/* table2 操舵室等 */
.table2 > tbody > tr > td.NoPadding {
	padding: 0;
	margin: 0;
}
/* table2 アクセス解析 */
.table2 .graph {
	width: 300px;
}
.table2 .pv {
	height: 12px;
	background-color: #398ec7;
	border: 1px solid #398ec7;
}
.table2 .uv {
	float: left;
	height: 10px;
	background-color: #85ceff;
}


/* table3 (枠線なし WOX公式テンプレート等で使用) */
.table3 > tbody > tr > th,
.table3 > tbody > tr > td {
	text-align: left;
	vertical-align: middle;
	border-bottom:1px solid #eee;
	padding: 0.5em;
}
.table3 > tbody > tr > td.top {
	border-bottom: none;
	padding-bottom: 0;
}
.table3 > tbody > tr > td.under {
	padding-top: 0.5em;
}


/* table4 (枠線なし 特商などで使用) */
.table4 > tbody > tr > th,
.table4 > tbody > tr > td {
	text-align: left;
	vertical-align: middle;
	padding: 0.5em;
}
.table4 > tbody > tr:not(:last-child) > th,
.table4 > tbody > tr:not(:last-child) > td {
	border-bottom: 1px solid #eee;
	margin-bottom: 1.6em;
}

@media (max-width:767px) {
	.table4 {
		width: 100%;
	}
	.table4 > tbody > tr > th,
	.table4 > tbody > tr > td {
		display: block;
	}
	.table4 > tbody > tr > th {
		border-left: solid 4px #ddd;
		padding: 0.2em 0.5em;
	}
	.table4 > tbody > tr:not(:last-child) > th,
	.table4 > tbody > tr:not(:last-child) > td {
		border-bottom: none;
		margin-bottom: 0;
	}
	.table4 > tbody > tr:not(:last-child) > td {
		margin-bottom: 1.4em;
		padding: 0.5em 0.5em 1.4em 0.5em;
		border-bottom: 1px solid #eee;
	}
}



/* scroll for overflow-x */
.scrollWrap {
	width: 100%;
	overflow-y: hidden;
	overflow-x: auto;
	-ms-overflow-style: -ms-autohiding-scrollbar;
	-webkit-overflow-scrolling: touch;
}
.scrollWrap::-webkit-scrollbar{
	display: none;
}
/* 内部の要素を折返し禁止することで横幅を可変させない */
.scrollWrap > .scroll,
.scrollWrap > .scroll * {
	white-space: nowrap;
}


/* pager */
.pager {
	margin-top: 0.6em;
}
.pager > a:nth-child(n+2) {
	margin-left: 1.4em;
}

/* ボタン */
.button {
	padding: 0.4em 0.8em;
	display: block;
	color: #fff;
	border: 0;
  border-radius: 5px;
	text-decoration: none;
	background-color: #337ab7;
	text-align: center;
	cursor: pointer;
	font-size: 1em;
}
.button:hover {
	opacity: 0.9;
	filter: alpha(opacity=90);
	-ms-filter: "alpha(opacity=90)";
}
.button:active {
  -ms-transform: translateY(1px);
  -webkit-transform: translateY(1px);
  transform: translateY(1px);
	opacity: 1;
	filter: alpha(opacity=100);
	-ms-filter: "alpha(opacity=100)";
}

/* インライン */
.button.inline {
	display: inline;
}

/* 大 */
.button.L {
	padding: 0.8em 1.4em;
}

/* ブロック */
.button.block {
	display: block;
	margin-top: 0.5em;
}
.button.L.block {
	margin-top: 1em;
}
.button.L.block.top {	/* 上部配置用 */
	margin-top: 0;
	margin-bottom: 1em;
}

/* 検索 */
.button.inline.search::before {
	content: "\f002";
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	margin-right: 0.2em;
}
.srhCol {
	background-color: #fef53a;
}


/* 登録 */
.button.register {
	padding: 0.76em;
	letter-spacing: 0.1em;
	background-color: #ec575a;
  box-shadow:0 4px 0 #d64c4f;
	font-size: 1.3em;
}
.button.register:hover,
a.button:hover {
	color: #fff;
}
.button.register:active {
  -ms-transform: translateY(4px);
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  box-shadow: none;
}



/* tooltip */
.clickToolTip.help::before {
	content: "\f059";
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
}
a.clickToolTip.help {
	text-decoration: none;
	margin: 0 0.4em;
}
.clickToolTip.help > span {
	display: none;
}

.toolTip {
	visibility: hidden;
	word-break: break-all;
	font-size: 0.8em;
	margin: 0;
	padding: 10px;
	width: 250px;	/* 初期値は $elem.outerWidth() の兼ね合いから必要.. */
	background-color: #fffccc;
	border-radius: 5px;
	position: absolute;
	box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.24);
	z-index: 198;
}
.toolTip .button.block {
	margin-top: 0.5em;
}
.toolTip.gray {
	background-color: #fbfbfb;
}



/* モーダル */
.modalOverlay {
	z-index: 197;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 120%;
	overflow: auto;
	background-color: rgba(0,0,0,0);
	display: none;
	/* その他はjs内で動的に追加 */
}
.modalClose {
	position: absolute;
	top:-12px; right:-12px; width:25px; height:25px; line-height:21px; border-radius:50%;
	border:solid 2px #eee;
	background-color: #000;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
}
.modalClose > div {
	font-size:12px; color:#eee;
}





/* ドロップダウンメニュー */
.clickDropDownMenu,
.clickToolTip:hover,
.clickToolTip:focus {
	cursor: pointer;
	text-decoration: none;
}
.dropDownMenu {
	visibility: hidden;
	margin: 0;
	background-color: #fff;
	position: absolute;
	z-index: 199;
}
.dropDownMenu.typeA {
	width: 250px;
	border-radius: 5px;
	box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.24);
}
.dropDownMenu.typeB {
	width:260px;
	border-radius: 5px;
	box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.24);
}
.dropDownMenu.typeB > div:first-child,
.dropDownMenu.typeB > ul:first-child > li:first-child > a {
	border-radius: 5px 5px 0 0;
}
/*
.dropDownMenu.typeB > ul:last-child > li:last-child > a {
	border-radius: 0 0 5px 5px;
}
*/
.dropDownMenu.typeB > ul:nth-last-child(2) > li:last-child > a {
	border-radius: 0 0 5px 5px;
}
.dropDownMenu.typeB > ul.dummy {
	position: absolute;
	visibility: hidden;
	height: 2em;
}



/* media query */
@media (max-width:767px) {

	.dropDownMenu.typeA {
		left: 0;
		margin-left: 0;
		width: 100%;
	}
	.dropDownMenu.typeB {
		left: 20px;
		margin-left: 0;
		width: calc(100% - 40px);
	}
	
	/* サービス一覧 */
	#header > nav.service > ul.dropDownMenu.typeA {
		left: 20px;
		margin-left: 0;
		width: calc(100% - 40px);
	}
	#header > nav.service > ul.dropDownMenu.typeA > li {
		width: 100%;
	}
	#header > nav.service > ul.dropDownMenu.typeA > li > a.web,
	#header > nav.service > ul.dropDownMenu.typeA > li > a.analyzer {
		border-top-left-radius : 5px;
		border-top-right-radius : 5px;
	}
	#header > nav.service > ul.dropDownMenu.typeA > li > a.blog {
		border-top-right-radius : 0px;
		padding-top: 10px;
	}
	#header > nav.service > ul.dropDownMenu.typeA > li > a.counter {
		border-top-right-radius : 0px;
		padding-top: 10px;
	}
}




/* ローディングインジケータ */
.loadingIndicator {
	width: 72px;
	height: 72px;
	border-radius: 8px;
	background: rgba(0,0,0,0.25) url(../img/common/loading.svg) center center no-repeat;
}


/* flex */
.flex {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
.flex.right {
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
}
.flex.between {
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}
.flex.center {
  -webkit-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;

  -webkit-align-items: center;
  -ms-align-items: center;
  align-items: center;
}
.flex.middle {
  -webkit-align-items: center;
  -ms-align-items: center;
  align-items: center;
}


/* img */
.pict img, img.pict {
	border: 1px solid #ddd;
}
.pict a img:hover {
	opacity: 0.8;
	filter: alpha(opacity=80);
	-ms-filter: "alpha(opacity=80)";
}










/* ==============================================================
  xxxxxxxxxxxx
============================================================== */


/* ==============================================================
  xxxxxxxxxxxx
============================================================== */


/* ==============================================================
  xxxxxxxxxxxx
============================================================== */


/* ==============================================================
  xxxxxxxxxxxx
============================================================== */


/* ==============================================================
  xxxxxxxxxxxx
============================================================== */