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

/*-------------------
製品ページ　受発注コラムページ
/asp/column/0000.asp
-------------------*/



/*-----------------
 *基本部分
-----------------*/
.contents {
	width: 90%;
	max-width: 64em;
	margin: auto;
	text-align: left;
}
#contents-wrap {
	margin: 0 auto;
}
#sec-column{
	padding-top: 8em;
}


/* タブレット横サイズ 1024px(16×64em)~ mdサイズ */
@media screen and (min-width:64em) {
	#sec-column{
		padding-top: 11em;
	}
	#sec-column .contents_left {
		width: 90%;
		max-width: 37.25em;
		margin: auto;
		float: left;
	}
	#sec-column .cnv_tx {
		font-size: 1.5em;
	}
}
/* ノートPC以上のサイズ 1200px(16×75em)~ lgサイズ */
@media screen and (min-width:75em) {
	#sec-column .contents_left {
		width: 90%;
		max-width: 42.75em;
	}
}


h1,h2,h3{
	line-height: 1.3;
	font-weight: bold;
}
h2,h3{
	margin-bottom: 20px;
}
h1 {
	font-size: 1.5em;
	margin-bottom: 10px;
}
h2 {
	font-size: 1.25em;
	padding-bottom: 3px;
	border-bottom: 3px solid #3399cc;
}
h3 {
	font-size: 1em;
	border: 1px solid #3399cc;
	padding: 8px 16px;
}

/* div.text直後にh2があったら上に余白60px設定 */
div.text + h2{ margin-top: 60px;}
/* div.text直後にh3があったら上に余白40px設定 */
div.text + h3{ margin-top: 40px;}

div.text a{
	color: #2684E2;
	text-decoration: underline;
}
div.bg-gray{
	border: 1px solid #ccc;
	background-color: #f6f6f6;
	padding: 20px;
	margin-bottom: 20px;
}


/* タブレット横サイズ 1024px(16×64em)~ mdサイズ */
@media screen and (min-width:64em) {
	h1{
		font-size: 2em;
	}
	div.text a:hover{
		opacity: 0.8;
	}
}




/*-----------------
 *パーツ
-----------------*/
span.main-img{
	display: block;
	width: 100%; 
    margin: 0 auto 20px;
}
span.contents-img{
	display: block;
	width: 100%;
	margin: 0 auto;
}
span.main-img img, span.contents-img img{
	width: 100%;
}

.contents_left div.text span{
	display: block;
	margin-bottom: 20px;
	line-height: 1.75;
}
.contents_left div.text span:last-child{
	margin-bottom: 0;
}
span.date,span.tx-right{
	font-size: 0.875em;
	display: block;
	text-align: right;
}
span.date{ margin-bottom: 20px;}
span.tx-right{ color: #666;}
span.bold-tx{ font-weight: bold;}
span.mini-tx{ font-size: 14px;}

.contents_left div.text span span.bold-tx,
.contents_left div.text span span.mini-tx{
	display: inline;
}
.contents_left div.text span.mb6{
	margin-bottom: 6px;
}


/* ul */
div.text ul{
	margin-bottom: 20px;
}
div.text ul:last-child{
	margin-bottom: 0;
}
div.text ul li{
	line-height: 1.5;
	margin-bottom: 10px;
}
div.text ul li:last-child{
	margin-bottom: 0;
}

/* dl */
div.text dl dt{
	font-weight: bold;
	margin-bottom: 10px;
	line-height: 1.3;
}
div.text dl dd{
	font-size: 14px;
	margin-bottom: 10px;
	padding-left:1em;
	text-indent:-1em;
	line-height: 1.3;
}
div.text dl dd + dt{
	padding-top: 10px;
}

/* bg-gray */
div.bg-gray ul{
	margin-bottom: 0;
}
div.bg-gray span:last-child{
	margin-bottom: 0;
}

/* ul直後、dl直後のspanにはmargin-top20設定 */
div.text ul + span{
	margin-top: 20px;
}
div.text dl + span{
	margin-top: 20px;
}




/* テーブル */
table.table-yoko01,table.table-tate01{
	width: 100%;
	margin-bottom: 20px;
}
table.table-yoko01,table.table-yoko01 td,table.table-yoko01 th,table.table-tate01,table.table-tate01 td,table.table-tate01 th{
	border: 1px solid #ddd;
	border-collapse: collapse;
    padding: 8px;
    line-height: 1.3;
	vertical-align: middle;
	font-size: 0.875em;
}
table.table-yoko01 th,table.table-tate01 th{
	font-weight: bold;
	background-color: #f6f6f6;
}
table.table-tate01 th{
	width: 20%;
}
.contents_left div.text table span{
	margin-bottom: 10px;
	line-height: 1.5;
}
.contents_left div.text table td span:last-child{
	margin-bottom: 0;
}






/*-----------------
 *コンバージョンエリア
-----------------*/
#sec-column .cnv_area {
	padding: 3.5em 0 0 0;
	margin: 0 auto 4.5em; 
    text-align: center;	
}
#sec-column .cnv_btn {
	margin: 1.5em auto 0;
}
#sec-column .cnv_tx {
	font-size: 1.1em;
	line-height: 1.4;
    font-weight: bold;	
}

/* タブレット横サイズ 1024px(16×64em)~ mdサイズ */
@media screen and (min-width:64em) {
	#sec-column .cnv_btn {
		margin: 2em auto 0;
	}
	#sec-column .cnv_tx {
		font-size: 1.25em;
	}
}


/*-----------------
 *incファイル　右カラム ※用語集と同じ
/asp/include/yougo_sidenavi.html
-----------------*/
#sec-yougo_sidenavi .contents_right .hotword {
	margin-bottom: 3.5em;
    text-align: left;
}
#sec-yougo_sidenavi .contents_right .hotword h4 {
	background: #333;
	color: #fff;
	position: relative;
	padding: 0.75em 0 0.75em 2.75em;
	margin-bottom: 1em;
}
#sec-yougo_sidenavi .contents_right .hotword h4::before {
	content: url("/web/jp/asp/yougo/images/yougo_attention.svg");
	position: absolute;
	top:6px;
	left: 12px;
	width: 1.5em;
    height: 1.5em;
}
#sec-yougo_sidenavi .contents_right .hotword p {
	line-height: 1.6;
	margin: 0 auto 1.5em;
	width: 92%;
}
#sec-yougo_sidenavi .contents_right .hotword ul {
	width: 92%;
    margin: 0 auto;
}
#sec-yougo_sidenavi .contents_right .hotword li {
	display: inline-block;
    background: #fff;
    border: solid 1px #2684e2;
	color: #2684e2;
	text-align: center;
	font-size: 0.95em;
    width: 47%;
    margin-bottom: 6px;
}
#sec-yougo_sidenavi .contents_right .hotword li:hover { 
	background: #f5f7f7;
}
#sec-yougo_sidenavi .contents_right .hotword li a {
	padding: 5%;
    display: inline-block;
    width: 90%;
	color: #2684e2;
}
#sec-yougo_sidenavi .contents_right .bnr_link {
	text-align: center;
}
#sec-yougo_sidenavi .contents_right .bnr_link li {
	width: 92%;
	margin-bottom: 1em;
	display: inline-block;
}
#sec-yougo_sidenavi .contents_right .bnr_link li:last-child {
	margin-bottom: 5em;
}
#sec-yougo_sidenavi .contents_right .bnr_link li img {
	width: 100%;
}
#sec-yougo_sidenavi .contents_right .bnr_link li:hover {
	opacity: 0.85;
}

/* タブレット縦サイズ 768px(16×48em)~ smサイズ */
@media screen and (min-width:48em) {
	#sec-yougo_sidenavi .contents_right .bnr_link li {
		width: 43.5%;
		padding-right: 1em;
	}
	#sec-yougo_sidenavi .contents_right .hotword li {
		width: 48%;
	}
}
/* タブレット横サイズ 1024px(16×64em)~ mdサイズ */
@media screen and (min-width:64em) {
	#sec-yougo_sidenavi .contents_right {
		width: 100%;
		max-width: 16.25em;
		margin: auto;
		text-align: center;
		float: right;
		position: relative;
	}
	#sec-yougo_sidenavi .contents_right .hotword p {
		line-height: 1.6;
		margin-bottom: 1.5em;
		width: 100%;
	}
	#sec-yougo_sidenavi .contents_right .hotword li a {
		padding: 6%;
		width: 88%;
	}

	#sec-yougo_sidenavi .contents_right .hotword ul {
		width: 100%;
	}
	#sec-yougo_sidenavi .contents_right .bnr_link li {
		width: 100%;
		padding: 0;
	}
}