@charset "shift-JIS";

body{
font-family: Arial, Roboto,“Droid Sans”,"游ゴシック","YuGothic",“ヒラギノ角ゴ ProN W3″,“Hiragino Kaku Gothic ProN”,“メイリオ”,Meiryo,,sans-serif;
color: #050210;
margin: 0;
padding: 0;
line-height: 1.6em;	/* 本文の行間 class:storyが基準 */
font-size: 14px;	/* スマホ用フォントサイズ */
-webkit-text-size-adjust : 100% ;
}

@media only screen and (min-width: 865px) {
	body{
		background: #EBF7FF url(./syspic/background.jpg) repeat left;
		font-size: 15px;	/* PCサイト用フォントサイズ　px指定 画面1ピクセル  ptは使用しない */
	}
}





a:link{
color: #003F98;
text-decoration: underline;
}
a:visited{
color: purple;
text-decoration: underline;
}
a:hover{
text-decoration: underline;
/* background-color: #EFF8FF; マウスオーバーでテキストに薄い青背景　しかしIEで写真が動くため削除した 100505 */
}


h1{	/* 約款ページなどid=toptextに含まれないh1に対応 */
font-size: 103%;
font-weight: bold;
color: #334d55;
}

h2 {
font-size: 102%;
font-weight: bold;
color: #006699;
}

h3{
font-size: 101%;
margin:1.5em 0 0.5em 5px;
background-color:#406095;
color:#ffffff;
line-height: 32px;
border-top: 2px solid #6080b5;
border-left: 2px solid #6080b5;
border-bottom: 2px solid #204075;
border-right: 2px solid #204075;
}

h4{
font-size: 100%;
color: #121212;
margin-top: 1em;
margin-right: 1em;
margin-bottom: 0.4em;
padding-left: 10px;
line-height: 32px;
}

h5{
font-size: 100%;
color: #334daa;
padding-left: 20px;
margin-top: 1em;
margin-right: 1em;
margin-bottom: 0.2em;
}

/*********** HyperPosition addition ***********なぜあるか不明　今後調査 */
.h4{
	margin-left:1em;
}

.h5{
	margin-left:1.5em;
}


h6{
font-size: 100%;
color: #339955;
margin: 6px 80px 6px 10px;
padding-left: 25px;
line-height: 24px;
}

em{
text-decoration: none;
font-style: normal;
font-weight: bold;
}

strong{
text-decoration: none;
color: #EA4E01;
font-style: normal;
font-weight: bold;
}

ul{
list-style-type: square;
}

ul ul{
list-style-type: disc;
}

ul ul ul{
list-style-type: none;
}

.nomark{
list-style-type: none;
}

img{
border-style: none;
}

a img{/* 画像のリンク枠を消す */
border-style: none;
}

.maxwidthimg{	/* 横幅いっぱいの図 */
	height: auto;
	max-width:90%;
}

.rightimg,.rightimgspfull{	/* 右寄せ画像 表中などで */
	float:right;
	margin: 6px 20px 0 20px;
	max-width:50%;	/* スマホで画面の幅大半を占めるのを防ぐ */
	height: auto;
}
@media only screen and (max-width: 640px) { 
	.rightimgspfull{	/* 右寄せ画像だが640px以下ではフルサイズ */
		float:none;
		max-width:75%;
	}
}




.borderimg{	/* 枠ありの画像 リンク時に */
border-style: solid;
border-width: thin;
}

.adimg{	/* ml21のアフィリエイト画像 */
	max-width:120px;
}
@media only screen and (max-width: 640px) { 
.adimg{
	max-width:60px;
	}
}



/*■ページ先頭のヘッド部分■*/


#toptext{	/* 全ページの最上位の右上１行テキスト */
position:relative;
left: 15px;
max-width: 830px;	/*基準横幅*/
height:18px;
background: #ffffff;
text-align: right; 
}
@media only screen and (max-width: 864px) {  
	#toptext{
		display:none;
	}
}


#toptext h1{
text-align: right;
margin: 0;
padding: 0 10px 0 0;
color: #868696;
font-size: 12px;
}

#logoarea{
position:relative;
left: 15px;
max-width: 830px;	/*基準横幅*/
height:65px;
background: #ffffff;
overflow:hidden;
}

#mainlogo{
position:relative;
top: 0;
width:30%;
max-width:160px;
height:65px;
background: #ffffff;
}

#sublogo{
position:relative;
top: -65px;
left: 166px;
max-width: 655px;
height:65px;
background: #ffffff;
}

#sslwindow{	/* logoareaの中で利用 */
position:relative;
top: -65px;
margin-left: auto;
width: 350px;
height: 65px;
font-size: 10px;
vertical-align: middle;
background-color: #f2f2f6;
}


@media print, only screen and (max-width: 864px) {  
	#logoarea{
		left: 0;
		height:56px;
	}
	#mainlogo{
		max-width:140px;
	}
	#sslwindow{
		display: none;
	}
}
@media only screen and (max-width: 480px) {
	#logoarea{
		height:51px;
	}
	#mainlogo{
		position:relative;
		top: 0;
	}
}
@media only screen and (max-width: 370px) {
	#logoarea{
		height:38px;
	}
}


#pagecell1{	/* 水平メニューと上部のh2ロゴ*/
position:relative;
top: 0;
left: 15px;
max-width: 830px;
padding-top: 5px;
padding-bottom: 10px;
background-color: #ffffff;
}
@media print, only screen and (max-width: 864px) {
	#pagecell1{
	padding-top: 5px;
	position:relative;
	left: 0;
	right: 0;
	}
}
@media only screen and (max-width: 480px) {
	#pagecell1{
	padding-top: 2px;
	}
}

/*■水平メニュー■*/
#globalNav{
	width: 100%;
	max-width: 830px;
	margin: 0 auto;
	padding: 0;
	color: #000000;
	background-color: #ffffff;
}


/* タブ項目の背景画像指定 */
@media only screen and (min-width: 865px) {
	#menu {
		list-style-type:none;	/* 項目のマークを消す */
		max-width: 830px;
		height:38px;
		background:url(./syspic/menubar.gif) 0 30px no-repeat;
		margin:0;
		padding-left : 10pt;
	}

	/* タブ項目 */
	#menu li{
		display: block;
		float: left;
		width: 20%;
		margin: 0;
		padding: 0;
		height:30px;
		overflow:hidden;	/* 文字がはみ出た場合：非表示 */
		text-align:center;
	}
	#tabmenu1{
		background:url(./syspic/menu1.gif) no-repeat;
	}
	#tabmenu2{
		background:url(./syspic/menu2.gif) no-repeat;
	}
	#tabmenu3{
		background:url(./syspic/menu3.gif) no-repeat;
	}
	#tabmenu4{
		background:url(./syspic/menu4.gif) no-repeat;
	}
	#tabmenu5{
		background:url(./syspic/menu5.gif) no-repeat;
	}
	#tabmenu6{
		background:url(./syspic/menu6.gif) no-repeat;
	}
	#tabmenu7{
		background:url(./syspic/menu7.gif) no-repeat;
	}
	#tabmenu8{
		background:url(./syspic/menu8.gif) no-repeat;
	}

	#menu span{
		visibility:hidden;	/* リンク文字：非表示 */
	}

	/* タブの各項目設定 */
	#menu a {
		display:block;	/* ブロック要素指定 */
		text-decoration:none;	/* 下線無し */
		width:100%;
		height:100%;
		background-position:0 0;	/* 背景位置（通常表示） */
	}

	/* マウスオーバー時、現在表示ページ */
	#menu a:hover{
		background-position:0 -30px;
	}

	#selected a,#selected a:hover{
		background-position:0 -60px;
	}
}
/* 画面サイズが864px以下の場合と印刷時に適用 タイル１列の水平メニュー */
@media print, only screen and (max-width: 864px) {
	#menu {
		width: 100%;
		max-width: 864px;
		margin: 0 auto;
		padding: 0;
	}
	#menu li {
		display: block;
		float: left;
		margin: 0;
		padding: 0;
		width: 20%;
		border-bottom: 1px solid #4baacb;
		}
	#menu li a {
		display: block;
		padding: 18px 0 18px;
		background-color: #2a83a2;
		color: #FFF;
		text-align: center;
		text-decoration: none;
		border-right:1px solid #4baacb;
		font-size: 13pt;
	}
	#menu li:last-child a{
		border: none;
	}
	#menu li a:hover{
		background: #4baacb;
	}
	#toggle {
		display: none;
	}
}

@media only screen and (max-width: 640px) {
	#menu li {
	width: 33.33%;
	}
}



/*■ページタイトル部パンくずリスト■*/

#breadcrumblist{
	font-size: 8pt;
}
@media only screen and (max-width: 864px) {
#breadcrumblist{
	display:none;
	}
}


/*■ページタイトル部(水平メニューの下にあるh2)■*/

#pageName{
position:relative;
top: 10px;
clear: both;
width:100%;
left: 0px;
min-height: 43px;
padding-bottom: 10px;
background-color: #FFFFFF;
}

#pageName h2{
	text-align: center;
	font-weight: bold;
	font-size: 140%;
	line-height : 18px;
	color: #110D5A;
	background: #F1F1FD url(./syspic/h2back2.gif) no-repeat;
	border-top: 2px solid #FB8E0D;
	border-bottom: 1px solid #110D5A;
	padding: 7px 0 2px 30px;
	margin: 2px 25px 0 25px;
	max-width: 100%;
}


@media only screen and (max-width: 640px) {
	#pageName{
		position:relative;
		left: 0;
		padding-bottom: 0px;
		min-height: 32px;
	}
	#pageName h2{
		font-size: 120%;
	}
}

.pagecell2{	/* 垂直メニューと本文を含む下半分全幅領域 (優先順位を考慮し、classにした)*/
position:relative;
top: 0;
margin-left: 15px;	/* 画面左端から灰色までの余白 */
margin-right: 15px;
margin-bottom: 0;
max-width: 830px;
width:100%;
background-color: #ffffff;
border-top: 1px solid #ccd2d2;
float: left;
}
@media only screen and (max-width: 864px) {
	.pagecell2{
		margin-left: 0;
		margin-right: 0;
	}
}



/*■垂直メニュー■*/
#pageNav{
line-height: 0.85rem;	/* 改行に備えて狭め */
float: left;	/* storyを右に配置するため storyブロックにabsoluteを使う方が良かった 将来修正 */
width:142px;	/* PC用時　左メニューの表示幅 薄い灰色部分 */
padding-left: 5px;	/* 左メニュー左の灰色部分 */
background-color: #F1F1F1;
font-size: 10pt;
}
@media only screen and (max-width: 640px) {
	#pageNav{
		width:72px;	/* 左メニューの表示幅 余白は別途 */
		margin-right: 0;
	}
}


.pageBlock1,.pageBlock2,.pageBlock3,.pageBlock4,.pageBlock5{
width:140px;
font-weight: bold; 
margin-top: 14px;
padding-top: 4px;
border-right: 1px solid #eeeeee; 
border-left: 1px solid #999999; 
border-bottom: 1px solid #999999;
}
@media only screen and (max-width: 640px) {
	.pageBlock1,.pageBlock2,.pageBlock3,.pageBlock4,.pageBlock5{
		width:67px;	/* 左メニューの表示幅 余白は別途 */
	}
}



.pageBlock1{
background-color : #8CACCC;
}
.pageBlock2{
background-color : #1CCCDD;
}
.pageBlock3{
background-color : #947CcD;
}
.pageBlock4{
background-color : #6CBC7D;
}
.pageBlock5{
background-color : #BCBCBD;
color : #8F8F8F;
}

.pageBlock1 a:link, .pageBlock1 a:visited,.pageBlock2 a:link,.pageBlock2 a:visited,.pageBlock3 a:link, .pageBlock3 a:visited, .pageBlock4 a:link, .pageBlock4 a:visited, .pageBlock5 a:link, .pageBlock5 a:visited, span.selected{
text-decoration: none;
display: block;
border-bottom: 1px solid #aaaaaa; 
background-image : url(./syspic/hpb_bg02.gif);
font-weight: normal; 
padding: 8px 2px 8px 5px;
color: #21536A;
border-right: 2px solid #aaaaaa;
}

.pageBlock1 a:visited, .pageBlock2 a:visited, .pageBlock3 a:visited, .pageBlock4 a:visited, .pageBlock5 a:visited{
color: purple;
}

.pageBlock1 a:hover, .pageBlock2 a:hover, .pageBlock3 a:hover, .pageBlock4 a:hover, .pageBlock5 a:hover{
color: #FF2F10;
}


span.selected {	/* 表示中ページの垂直メニュー項目　変更分だけ上書き指定 */
background-image : none;
font-weight: bold; 
color: #000000;
border-right: 2px solid #FFFFFF;
background-color : #FFFFff;
}

@media only screen and (max-width: 640px) {
.pageBlock1 a:link, .pageBlock1 a:visited,.pageBlock2 a:link,.pageBlock2 a:visited,.pageBlock3 a:link, .pageBlock3 a:visited, .pageBlock4 a:link, .pageBlock4 a:visited, .pageBlock5 a:link, .pageBlock5 a:visited, span.selected{
		padding: 17px 0 16px 3px;
	}
}

span.l3 {	/* 垂直メニューの└マーク */
font-size: 95%;
}


.story{
margin: 0 10px 0 148px;	/* 左メニュー用スペース leftは変更不可 */
padding-left:8px;	/* 左メニューと本文の間の余白 */
border-left: 1px solid #ccd2d2;
}
@media only screen and (max-width: 640px) {
	.story{
		margin:0 0 0 73px;
	}
}


.story p{
	margin: 10px 0 20px 0;
	padding-left: 0;
	text-indent: 1em;
}
@media only screen and (max-width: 640px) {
	.story p{
		margin: 14px 0 5px 0;
	}
}

.story em{
text-decoration: none;
color: #000000;
font-style: normal;
font-weight: bold;
}

.story strong{
text-decoration: none;
color: #EA4E01;
font-style: normal;
font-weight: bold;
}

#storyordersheet{
	border-top: 1px solid #000000;
	margin: 0 0 0 0;
	max-width: 830px;	/*基準横幅*/
	clear: both; 
}

#storyordersheetbottom{
	margin: 0 0 0 0;
	max-width: 830px;	/*基準横幅*/
	clear: both; 
}
@media only screen and (max-width: 640px) {
	#storyordersheetbottom{	/* オーダーシート最下行のヘアレスキューなど */
		display: none;
	}
}




/*■フッター■*/

#footer{
	margin: 0 0 0 0;
	max-width: 830px;	/*基準横幅*/
	height:20px;
	clear: both; 
	background-color: #d0d0d0;
}
#footer_left{
	float: left;
	width: 50%;
	font-size: 61%;
	background-color: #d0d0d0;
	color: #909090;
}
#footer_left a:hover,#footer_left a:link,#footer_left a:visited  {
	text-decoration: none;
	color: #909090;
	background-color: #d0d0d0;
}
#footer_right{
	float: right;
	text-align: right;
	width: 50%;
	background-color: #d0d0d0;
	font-size: 61%;
	color: #707070;
}
#footer_right a:hover,#footer_right a:link,#footer_right a:visited  {
	text-decoration: none;
	color: #707070;
	background-color: #d0d0d0;
}


#footer2{
max-width: 830px;	/*基準横幅*/
height:25px;
background-color: #ffffff;
clear: both; 
text-align: right;
color: #aaaaaa;
}
#footer2 a:hover,#footer2 a:link,#footer2 a:visited{
color: #aaaaaa;
background-color: #ffffff;
text-decoration: none;
}



/**************** table styles *****************/
th{
padding: 0.2em 0.4em;
border: 1px solid;
empty-cells: show;
background-color: #F0F0F0;
line-height: 1.5em;
}
td{
padding: 0.2em 0.4em;
border: 1px solid;
empty-cells: show;
}

/* トップ画面イメージ写真と履歴  641px以上なら履歴付き　以下なら写真のみ */
@media screen and (min-width: 641px) {
	.table-history {
		border-style: none;
		background-color : #ffffff;

	}
	.toponlypic{
		display: none;
	}
}
@media screen and (max-width: 640px) {
	.table-history {
		display: none;
	}
	.toponlypic{
		border-style: none;
		background-color : #ffffff;
		display: block; margin-left: auto; margin-right: auto;
	}
}
@media print{
	.table-history {
		display: none;
	}
	.toponlypic{
		display: none;
	}
}


/* 注文画面 */
.table-ordersheet {
	margin-left: 0em;
	margin-right: 0em;
	background-color: #ffffff;
	border-color: #80a6ca #80a6ca #80a6ca #80a6ca;
	border-style: solid solid solid solid;
	border-width: 1px 1px 1px 1px;
}

.tableorder-cellssl {
	color: #666666;
	background-color: #f2f2f6;
	border-style: none none none none;
	font-size: 10px;
	line-height: 15px;
	vertical-align: middle;
}

.table-ordersheet th{	/* 注文シートの左側列（見出し 第1列） */
	color: #333333;
	background-color: #e7e7e7;
	border-color: #80a6ca #80a6ca #80a6ca #80a6ca;
	border-style: solid solid solid solid;
	border-width: 0 1px 1px 0;
	line-height: 18pt;
	font-weight:normal;
}

.tableorder-inputfield {	/* 注文シートの入力欄 第2列 */
	color: #000000;
	background-color: #ffffff;
	border-color: #80a6ca #80a6ca #80a6ca #80a6ca;
	border-style: solid solid solid solid;
	border-width: 0 1px 1px 0;
	line-height: 15pt;
	font-size: 10pt;
}
.tableorder-complement {/*	 注文シートの補足 第3列 */
	color: #333333;
	background-color: #f7f7f7;
	border-color: #80a6ca #80a6ca #80a6ca #80a6ca;
	border-style: solid solid solid solid;
	border-width: 0 1px 1px 0;
	line-height: 15pt;
	padding-left: 1.5em;
	width:30%;
}

@media only screen and (max-width: 640px) {
	.table-ordersheet {
	        border:none;
        	margin-bottom: 0;
	}
	.table-ordersheet tr {
	        display:block;
        	margin-bottom: 40px;
	}
	.table-ordersheet th {
        	display:block;
        	width: 96%;
	}
	td.tableorder-inputfield {
	        display:block;
	        width: 96%;
	        border:none;
	}
	td.tableorder-complement {
		display:none;
	}
	.tableorder-inputfield {	/* 注文シートの入力欄 第2列 */
		line-height: 160%; /* スマホからの注文のため文字大きく行間大 */
		font-size: 110%;
	}
}

.orderexample{
	color: #999999;
}

/* 本文表 */
.notablet{
}
@media only screen and (max-width: 864px) {
	.notablet{
		display:none;
	}
}

.nextguidance{ /* 次への矢印位置指定用 */
	margin-left:auto; margin-right:0; text-align:left;
}

.sslsiteseal{	/* サイトシール表示用 */
	border-style: none none none none;
}

.responsibletable1, .standardtable .blogtable{	/* standardtableはスマホでも表を維持。responsible1は表を解除して縦に箇条書き */
	table-layout: auto;
	margin-left: 1em;
	margin-right: 1em;
	background-color: #ffffff;
	border-style: outset;
	border-width: thin;
	width: 85%;	/* 要注意パラメータ　横スクロールが発生しないよう全ページ確認すること */
}

.responsibletable1 th, .responsibletable1 td, .standardtable th, .standardtable td {
	font-size: 95%;
	text-align: left;
	color: #333333;
	border-style: outset;
	border-width: thin;
}

.blogtable th{	/* blogページ用 */
	color: #f8f8f8;
	background-color: #5b7fa2;
	border-color: #80a6ca #80a6ca #80a6ca #80a6ca;
	border-style: solid solid solid solid;
	border-width: 0 1px 1px 0;
	font-size: 90%;
	text-align: left;
}
.blogtable td{
	font-size: 95%;
	text-align: left;
	color: #222222;
	border-color: #80a6ca #80a6ca #80a6ca #80a6ca;
	border-style: solid solid solid solid;
	border-width: 0 1px 1px 0;
}



td.shopname,td.shopname a:link{
	font-weight: bold;
}

th.head {	/* １行２列の表で１列目に使うクラス　濃紺に白地 スマホでも変わらない */
	color: #f8f8f8;
	background-color: #5b7fa2;
	border-color: #80a6ca #80a6ca #80a6ca #80a6ca;
	border-style: solid solid solid solid;
	border-width: 0 1px 1px 0;
	font-size: 90%;
	text-align: left;
}
td.body {	/* １行２列の表で２列目に使うクラス　白地に黒 スマホでも変わらない */
	background-color: #ffffff;
	font-size: 95%;
}

th.nosmartphone {	/* スマホで消える１列目 */
	color: #f8f8f8;
	background-color: #5b7fa2;
	border-color: #80a6ca #80a6ca #80a6ca #80a6ca;
	border-style: solid solid solid solid;
	border-width: 0 1px 1px 0;
}

@media only screen and (max-width: 640px) { /* 640px以下のスマホモード */
	.standardtable{
		margin-left: 1em;
		margin-right: 0.5em;
	}
	.responsibletable1 {
        border:none;
        margin-bottom: 0;
	}
	.responsibletable1 tr {
        display:block;
        margin-bottom: 20px;
	}
	.responsibletable1 th {
        display:block;
        width: 100%;
	}
	.responsibletable1 td {
        display:block;
        width: 96%;
        margin-left: 4%;
        border:none;
	margin-left: 0;
	}
	th.nosmartphone {
		display:none;
	}
	span.smartphone{
		display:block;
	}
	td.width27,td.width35,td.width40,td.width60{
		width:96%;
	}
}
@media only screen and (min-width: 641px) { 
	span.smartphone{
		display:none;	/*表の題目を各項目で表示するため*/
	}
	td.width27{
		width:27%;
	}
	td.width35{
		width:35%;
	}
	td.width40{
		width:40%;
	}
	td.width60{
		width:65%;
	}
}

/* Formのレスポンシブ */

.forminputfullsize {
	max-width:400px; width:100%;
}

input{
    max-width: 100%; /* レスポンシブの場合の対策 */
    box-sizing: border-box; /* [borde-box]で右の飛び出しを回避 */
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
}

textarea{
    max-width: 400px; 
    box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
}

@media only screen and (max-width: 864px) {
	input,textarea{
		font-size: 120%;
	}
}


input.mailsubmitbutton {
	width: 350px; /*送信ボタンの幅を指定*/
	font-size:12pt;
	height:25pt;
}

input.ordersubmitbutton {
	font-size:120%;
	width:400px;
	height:35px;
	margin-top:1em;
	margin-bottom:1em;
}

@media only screen and (max-width: 640px) {  
	input.mailsubmitbutton {
		width: 180px;
	}
	input.ordersubmitbutton {
		width:350px;
		margin-top:0;
	}
}



.interviewQ{
color: #000000;
}
.interviewA{
color: #207722;
font-weight: bold;
margin-top:0.4em;
margin-left:2em;
margin-bottom:2em;
}

p.hhistory {
margin: 15px 0px 0px 6.5em; line-height:17px; text-indent:-5.5em;
}

.nextref {	/* 次ページリンク用クラス */
background: url(./syspic/nextbutton.gif) no-repeat;
padding: 10px 0 0 0;
font-weight: bold;
font-size: 100%;
border-style:none;
}
.nextref a:hover, .orderrefsamesize a:hover{
color: #0088FF;
background-color: transparent;
}

.orderref {	/* 注文ページリンク用クラス */
background: url(./syspic/2orderbutton.gif) no-repeat;
padding: 10px 0 0 0;
font-weight: bold;
font-size: 95%;
border-style:none;
}
.orderref a:hover{
color: #0088FF;
background-color: transparent;
}

.orderrefsamesize {	/* 注文ページリンク（文字大きい）用クラス */
background: url(./syspic/2orderbutton.gif) no-repeat;
padding: 10px 0 0 0;
font-weight: bold;
font-size: 100%;
border-style:none;
}


.price{					/* 価格表示欄 */
background-image:url(./syspic/priceback.gif);
background-position : 20px 0px;
background-repeat: no-repeat;
max-width:560px;
border: none;
margin: 0.2em 0.5em 1em 0.5em; /* 上段落との間隙 */
padding: 4em 0.5em 0 2.5em; /* priceタイトルと本文の間隙 */
font-size: 100%;
color: #FD5911;
font-weight: bold;
}

.pricecomp{				/* 価格表示補足用*/
font-size: 90%;
color: #FD5911;
font-weight: normal;
}

.subtitle{			/* 文中サブタイトル用の緑普通文字 主に表の項目で使用*/
font-size: 100%;
color: #006000;
font-weight: bold;
}

.supplement{			/* 補足情報　小さな文字 */
font-size: 87%;
color: #000000;
}

.complement{				/* 補足情報　各社引用の脚注 */
padding: 0 0 0 0;
margin: 0 2em 0 2em;
font-size: 90%;
color: #858585;
}

.nolinkdisp a:link,.nolinkdisp a:visited,.nolinkdisp a:hover{	/* 本文中でリンクを明示しない */
color:#050210;
text-decoration:none;
background-color: #FFFFFF;
}

.complement a:link,.complement a:hover{
color: #858585;
text-decoration: underline;
}
.complement a:visited{
color: purple;
text-decoration: underline;
}

.complement-noindent{			/* 表中で使う補足情報　小さな文字字下げなし スマホ非表示 */
padding: 0 0 0 0;
margin: 0 0em 0 0em;
font-size: 70%;
color: #959595;
}
@media only screen and (max-width: 640px) { 
	.complement-noindent{
		display:none;
	}
}




.checklist{	/* チェックリスト用の背景付き囲い */
max-width: 600px;
margin: 0 0 0 15px;
padding: 0 1em 0 1em;
background-color: #f9e9fa;
font-size: 95%;
}
p.checklist{
	margin-left:3em;
	text-indent: -2em;
}

.qa{					/* qa欄 */
background-image:url(./syspic/qaback.gif);
background-repeat: no-repeat;
max-width:520px;
border: 1px solid #cccccc;
margin: 3em 2em 3em 80px;
padding: 32px 0.5em 0 0.5em;
font-size: 90%;
color: #888888;
}
@media only screen and (max-width: 864px) {
	.qa{
		margin: 3em 1em 3em 1em;
		line-height: 2em;	/* 本文の行間 */
	}
}

.qaline a:link, .qaline a:visited,.qaline a:hover{
	text-decoration:none;
	line-height: 1.2em;
}





.doubleindent{			/* 強い字下げ */
margin: 0 2em 0 4em;
}

.noindent {			/* 字下げなし */
padding: 0 0 0 0;
margin: 0 -1em 0 -1em;	/* story.pの効果を消すため*/
}

.caption {	/* カタログで使用する写真の説明文(カタログのみで使用) */
color: #004488;
font-size: 100%;
font-weight:normal;
padding: 0 0 0 0;
margin: 0 0 0 -0.5em;	/* story.pの効果を消すため*/
}

.explanation{	/* 表中などで使用する補足的説明文 */
font-weight:normal;
font-size: 93%;
padding: 0 0 0 0;
margin: 0 0 0 -1em;	/* story.pの効果を消すため*/
}

.rule{	/* 約款 */
	font-size: 100%;
}







/* youtubeのresponsible化 */
.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}
 
.video-container iframe,  
.video-container object,  
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


span.b{ font-size: larger; }