@charset "utf-8";
/* CSS Document */
/* ----- style.css ----- */
/* BE1 Landing Page (Japanese) 用 css */

/****************************************************
 00. reset
****************************************************/
/* 初期値 リセット */
*,
::before,
::after{
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	}

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, u, 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%;
	vertical-align:baseline;
	}

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

a{
	margin:0;
	padding:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
	text-decoration: none;
}
button{
	margin:0;
	padding:0;
	font-size:100%;
	vertical-align:middle;
	background:transparent;
	text-align: center;
	cursor: pointer;
}

/****************************************************
 01. base
****************************************************/
body{
	max-width:1000px;		/*ページの最大幅*/
	padding:0 auto;		/*  */
	margin:0 auto;		/*コンテンツの表示をページのセンターにする*/
	background-color:white;		/*ページの背景色*/
	font-family:"Avenir","Helvetica Neue","Helvetica","Arial", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro","メイリオ", "Meiryo", "游ゴシック", "Yu Gothic", "ＭＳ Ｐゴシック", sans-serif;		/*フォントタイプの設定*/
	font-size:1.0em;		/*文字サイズの設定*/
	}

/****************************************************
 02. header
****************************************************/
header{
	margin:0 auto;		/*  */
	color:#fff;		/*  */
	}

/* ============================== blue bar ============================== */
header .blue_bar{
	background-color:#0d2ea0;		/*  */
	height:60px;		/*  */
	position:relative;		/*  */
	}

header .blue_bar:after{
	content:"";			/*  */
	display:block;			/*  */
	clear:both;			/*  */
	}

/* ============================== Logo ============================== */
header .blue_bar .left_logo{
	float:left;		/**/
	width:50%;		/**/
	height:60px;		/**/
	}

header .blue_bar .brother_logo{
	display:inline-block;
	width:104px;		/*  */
	height:40px;		/*  */
	position:absolute;		/*  */
	padding-top:10px;		/*  */
	padding-bottom:10px;		/*  */
	padding-left:16px;		/*  */
	}

header .blue_bar .left_logo:after{
	content:"";			/*  */
	display:block;			/*  */
	clear:both;			/*  */
	}

/* ============================== menu ============================== */
header .blue_bar .right_menu{
	float:right;		/**/
	width:50%;		/**/
	height:60px;		/**/
	text-align:right;		/**/
	}

header .blue_bar .right_menu .lang_panel{
	display: inline-block;		/**/
	position:absolute;
	top:18px;
	right:12px;
	float:right;		/**/
	}

header .blue_bar .right_menu .lang_panel span.no-selector{
	font-size:0.8em;		/**/
	padding-right:2.5em;
	}

header .blue_bar .right_menu .lang_panel select{
	display: inline-block;
	width:auto;
	color:#eee;		/*  */
	border:0px solid #999999;		/*  */
	background-color:#0d2ea0;		/*  */
	padding-top:2px;
	padding-right:0px;
	padding-bottom:2px;
	padding-left:0px;
	cursor:pointer;
	}

header .blue_bar .right_menu .lang_panel select::-ms-expand{
	border:0px solid #999999;		/*  */
	background-color:#0d2ea0;		/*  */
	color:#eee;		/*  */
	}

header .blue_bar .right_menu .lang_panel option{
	background-color:#fafafa;		/*  */
	color:#333;		/*  */
	}

header .blue_bar .right_menu:after{
	content: "";			/*  */
	display: block;			/*  */
	clear: both;			/*  */
	}



/****************************************************
 03. contents (main)
****************************************************/
/* ============================== メイン ============================== */
main{
	margin:0 auto;
	font-size:90%;
	}

/* ============================== パンくずリスト ============================== */
main .breadcrumbs{
	display:block;
	margin-top:0px;
	margin-right:0px;
	margin-bottom:0px;
	margin-left:0px;
	padding-top:0px;
	padding-right:2px;
	padding-bottom:0px;
	padding-left:20px;
	font-size:0.85em;
	line-height:2.0em;
	background-image:url(../img/common/icon_home_01.png);
	background-repeat:no-repeat;
	background-size:auto;
	background-position:2px center;
	background-origin:padding-box;
	background-clip:border-box;
	}

main .breadcrumbs ul{
	display:inline-block;
	list-style:none;
	margin-left:3px;
	vertical-align:middle;
	}

main .breadcrumbs li{
	list-style:none;
	float:left;
	vertical-align:middle;
	margin-right:6px;
	padding-right:3px;
	}

main .breadcrumbs li:after{
	content:"";
	display:inline-block;
	vertical-align:middle;
	text-decoration:none;
	width:6px;
	height:6px;
	border-top:1px solid #333;
	border-right:1px solid #333;
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg);
	margin-top:0;
	margin-left:3px;
	}

main .breadcrumbs li:last-child::after{
	padding-right:0;
	border: none;
	}

main .breadcrumbs a{
	color: #1a74ba;
	text-decoration: none;
	}

/* ########## 600px 未満 ########## */
@media screen and (max-width:599px){
	main .breadcrumbs{
		display:block;
		margin-top:0px;
		margin-right:0px;
		margin-bottom:0px;
		margin-left:0px;
		padding-top:0px;
		padding-right:2px;
		padding-bottom:0px;
		padding-left:2px;
		font-size:0.85em;
		line-height:2.0em;
		color: #fff;
		background-image:none;
		background-color: #51536d;
		}

	main .breadcrumbs ul{
		display:inline-block;
		list-style:none;
		margin-left:3px;
		vertical-align:middle;
		}

	main .breadcrumbs li{
		list-style:none;
		float:left;
		vertical-align:middle;
		margin-right:6px;
		padding-right:3px;
		}

	main .breadcrumbs li:last-child{
		display:none;
		}

	main .breadcrumbs li:after{
		content:"";
		display:inline-block;
		vertical-align:middle;
		text-decoration:none;
		width:6px;
		height:6px;
		border-top:1px solid #fff;
		border-right:1px solid #fff;
		-webkit-transform:rotate(45deg);
		transform:rotate(45deg);
		margin-top:0;
		margin-left:3px;
		}

	main .breadcrumbs li:nth-last-child(2)::after{
		display:none;
		}

	main .breadcrumbs a{
		color: #fff;
		text-decoration: none;
		}
	}
/* ↑↑↑↑↑↑↑↑↑↑ 600px 未満 ↑↑↑↑↑↑↑↑↑↑ */

main .breadcrumbs:after{
	content:"";			/*  */
	display:block;			/*  */
	clear:both;			/*  */
	}



/* ============================== コンテナ ============================== */
main .container{
	padding-top:0;
	padding-right:1.0em;
	padding-bottom:1.0em;
	padding-left:1.0em;
	}

/* ----- セクション ブロック -----*/
main .container .be-top-images,
main .container .be-app-info,
main .container .be-app-introduction,
main .container .be-app-use,
main .container .be-app-manual,
main .container .be-app-support,
main .container .be-app-pcrequirements,
main .container .be-japanese-fonts,
main .container .japanese-font-info,
main .container .japanese-font-download,
main .container .japanese-font-installation,
main .container .coreldraw-app-info,
main .container .be-video-instructions{
	margin-top:0.5em;		/*セクション間の間隔（上）*/
	margin-bottom:0.5em;		/*セクション間の間隔（下）*/
	}



/* ----- 見出し -----*/
/* [h1] 太字 */
main .container h1.mod-h1-bold{
	display:block;
	margin:0.5em 0;		/*余白*/
	padding:0.5em 0.25em;		/*余白*/
	text-align: center;
	color:#000000;			/*文字の色*/
	background-color: #eaeff3;		/*背景色*/
	border:none;		/*ボックスの囲み線*/
	font-size:1.4em;		/*文字のサイズ*/
	font-weight:bold;		/*文字の太さ*/
	}


/* [h2] ライン */
main .container h2.mod-h2-line-grn{
	position:relative;		/**/
	margin-top:1.0em;		/*行の余白（前）*/
	margin-bottom:0.5em;		/*行の余白（後）*/
	padding-top:0.5em;
	padding-right:0.5em;
	padding-bottom:0.5em;
	padding-left:1.6em;
	background:#fff;				/*背景色*/
	border:1px solid #CCC;		/*ボックスの囲み線*/
	border-radius:2px;		/*ボックスを角丸にする*/
	font-size:1.1em;		/*文字のサイズ*/
	font-weight:bold;		/*文字の太さ*/
	}
main .container h2.mod-h2-line-grn:after{
	position:absolute;		/**/
	top:50%;		/**/
	left:0.7em;		/**/
	transform:translateY(-50%);		/**/
	content:" ";		/**/
	width:5px;		/**/
	height:25px;		/**/
	background-color:#7fa308;		/**/
	border-radius:4px;		/**/
	}

/* [h3] 下線 ---  */

/* [h3] 途中で下線の色を変える */
main .container h3.mod-h3-line-grn{
	position:relative;		/**/
	margin-top:0.5em;		/*行の余白（前）*/
	margin-bottom:0.25em;		/*行の余白（後）*/
	padding-top:0.5em;		/*余白*/
	padding-right:0.1em;		/*余白*/
	padding-bottom:0.25em;		/*余白*/
	padding-left:0.6em;		/*余白*/
	border-bottom:solid 3px #dedede;		/*下線1*/
	line-height:1.2em;		/*行の高さ*/
	font-size:1.05em;		/*文字のサイズ*/
	font-weight:bold;		/*文字の太さ*/
	}
main .container h3.mod-h3-line-grn:after{
	position:absolute;		/**/
	content:" ";		/**/
	display:block;		/**/
	border-bottom:solid 3px #7fa308;		/*下線2*/
	bottom:-3px;		/**/
	left:0;		/**/
	width:1.5em		/*下線2の長さ*/
	}


/* [h4] ** ---  */


/* [h5] ** ---  */



/* ----- トップ画像 -----*/
/* 画像2点を左右端に配置  */
main .container .edge-lr-images{
	display: flex;		/*  */
	align-items: center;	/* 垂直方向中央揃え */
	justify-content: space-between;	/* 左右端に配置 */
	width: 100%;		/*  */
	}

main .container .edge-image-left{
	margin-left: 1.0em;	/* 左端からの余白 */
	}

main .container .edge-image-right{
	margin-right: 1.0em;	/* 右端からの余白 */
	}

/* 画像2点を左から順に配置  */
main .container .order-lr-images{
	display: flex;
	align-items: center;   /* 垂直方向中央揃え */
	}

main .container .order-image-left{
	margin-left: 1.0em;      /* 左端からの余白 */
	}

main .container .order-image-right{
	margin-left: 2.0em;     /* 1つ目の画像からの余白 */
	}



/* ----- 説明 -----*/
/* [div] */
main .container .mod-box-description,
main .container .mod-box-details{
	padding-top:0.5em;			/*  */
	padding-right:0.5em;			/*  */
	padding-bottom:0.5em;			/*  */
	padding-left:0.5em;			/*  */
	}

main .container .mod-box-text{
	padding-bottom:0.5em;			/*  */
	}


/* ----- 注記 -----*/
/* [div] */
/* タイトルを左側に入れ右側に本文を配置する (枠線なし) */
main .container .mod-box-text .note-item-01{
	position: relative;
	padding-left: 3.0em; /* 見出しラベルの幅＋余白 */
	margin: 1em 0;
	line-height: 1.2;
	}

main .container .mod-box-text .note-item-01::before{
	content: attr(data-title);
	position: absolute;
	left: 0;
	top: 0;
	width: 2.0em;	/* ラベル幅 */
	font-weight: bold;
	color: #555;
	text-align: left;
	white-space: nowrap; /* ラベルを折り返さない */
	}


/* 枠線上左上にタイトルを入れる */
main .container .mod-box-text .note-item-02{
	position: relative;
	margin: 1.5em 0em 1.5em 0em;		/*調整*//*要素の外側の余白（上、右、下、左）*/
	padding: 1.0em 1.0em 0.5em 1.0em;		/*調整*//*要素の内側の余白（上、右、下、左）*/
	border: 1px solid #979797;
	border-radius: 3px;
	}

main .container .mod-box-text .note-item-02::before{
	position: absolute;
	font-size:1.1em;
	background-color: #ffffff;
	color: #555555;
	content: attr(data-title);
	font-weight: bold;
	left: 0.75em;
	padding: 0.25em 0.5em;
	top: -0.9em;
	}





/* [ul/li] 手順説明リスト - 「disc」 */
main .container .mod-box-text ul.list-item-01{
	margin-top:0.5em;		/**/
	margin-right:1.0em;		/**/
	margin-bottom:0.5em;		/**/
	margin-left:2.0em;		/**/
	list-style-type: disc;
	}

main .container .mod-box-text ul.list-item-01 li{
	margin-bottom:0.5em;		/**/
	}



/* [ol/li] 手順説明リスト - 「decimal」 */
main .container .mod-box-text ol.order-item-01{
	margin-top:1.0em;		/**/
	margin-right:1.0em;		/**/
	margin-bottom:0.5em;		/**/
	margin-left:2.0em;		/**/
	}

main .container .mod-box-text  ol.order-item-01 > li{
	margin-bottom:1.5em;		/**/
	list-style-type: decimal;
	}



/* [ol/li] 手順説明リスト - カッコ付き数字*/
main .container .mod-box-text ol.order-item-02{
	list-style: none;
	counter-reset: order-num;
	padding-left: 0;
	}

main .container .mod-box-text ol.order-item-02 > li{
	counter-increment: order-num;
	position: relative;
	margin-bottom: 0.5em;
	padding-left: 2.0em;
	}

main .container .mod-box-text ol.order-item-02 > li::before{
  /* デフォルト：(1) 形式 */
	content: '(' counter(order-num) ')';
	font-weight: normal;
	font-size: 1.0em;
	color: #000000;
	position: absolute;
	left: 0;
	top: 0;
	}

/* ネストしたul, olのインデント調整 */
main .container .mod-box-text ol.order-item-02 > li ol{
	padding-left: 1.5em;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	}



/* [ol/li] 手順説明リスト - カッコ付き小文字ローマ数字 */
main .container .mod-box-text ol.order-item-03{
	list-style: none;
	counter-reset: roman;
	padding-left: 2.0em; /* インデント調整 */
	}

main .container .mod-box-text ol.order-item-03 > li{
	counter-increment: roman;
	position: relative;
	margin-bottom: 0.5em;
	}

/* (i) (ii) (iii) 形式 */
main .container .mod-box-text ol.order-item-03 > li::before{
	content: "(" counter(roman, lower-roman) ")";
	position: absolute;
	left: -2.5em; /* インデントに合わせて調整 */
	width: 2em;
	text-align: right;
	}

/* ネストしたul, olのインデント調整 */
main .container .mod-box-text ol.order-item-03 > li ol{
	padding-left: 1.5em;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	}



/* [ol/li] 手順説明リスト */



/* [div] フローボックス */
main .container .mod-box-details .flow-box{
	position: relative;
	margin: 0.5em 0em 1.0em 0em;		/*調整*//*要素の外側の余白（上、右、下、左）*/
	padding: 1.0em 1.0em 1.0em 1.0em;		/*調整*//*要素の内側の余白（上、右、下、左）*/
	border: 1px solid #979797;
	border-radius: 3px;
	}

main .container .mod-box-details .flow-box-title{
	position: relative;
	margin: 1.5em 0em 1.0em 0em;		/*調整*//*要素の外側の余白（上、右、下、左）*/
	padding: 1.5em 1.0em 1.0em 1.0em;		/*調整*//*要素の内側の余白（上、右、下、左）*/
	border: 1px solid #979797;
	border-radius: 3px;
	}

main .container .mod-box-details .flow-box-title::before{
	position: absolute;
	font-size:1.1em;
	background-color: #ffffff;
	color: #2589d0;
	content: attr(data-title);
	font-weight: bold;
	left: 1em;
	padding: 0.25em 0.5em;
	top: -0.9em;
	}

main .container .mod-box-details .flex-box{
	display: flex;
	flex-wrap: wrap;
	padding: 10px;
	gap: 10px;
	align-items:stretch;
	}

main .container .mod-box-details .flex-box div.flex-item{
	/* （全体の幅 - gapでつけた余白の合計）をカラム数で割る */
	width: calc((100% - 20px) / 3);
	padding: 1.0em 1.0em 1.0em 1.0em;	/*調整*//*要素の内側の余白（上、右、下、左）*/
	border: 2px solid #2589d0;
	border-radius: 3px;
	color: #333;
	}


/* Flexbox : レスポンシブ対応 */
/* ########## 500px 以上 768px 未満 ########## */
@media screen and (min-width:500px) and (max-width:767px){
	main .container .mod-box-details .flex-box div.flex-item{
		/* （全体の幅 - gapでつけた余白の合計）をカラム数で割る */
		width: calc((100% - 10px) / 2);
		}
	}


/* ########## 500px 未満 ########## */
@media screen and (max-width:499px){
	main .container .mod-box-details .flex-box div.flex-item{
		/* （全体の幅 - gapでつけた余白の合計）をカラム数で割る */
		width: calc(100%);
		}
	}

main .container .mod-box-details  .flex-box div.flex-item p.steps-item{
	position:relative;		/*相対位置*/
	line-height:1.2em;		/*行の高さ*/
	padding-left:2.0em;
	margin-bottom:1.0em;
	}

main .container .mod-box-details .flex-box div.flex-item p.steps-item::before{
	display: flex;
	position: absolute;
	justify-content: center;
	align-items: center;
	top: -0.5em;
	left: -0.5em;
	width: 2em;	/* 円を描く */
	height: 2em;	/* 円を描く */
	border-radius: 50%;	/* 円を描く */
	background-color: #2589d0;	/* 円を描く */
	color: #fff;	/* 文字 */
	font-weight: 600;	/* 文字 */
	content: attr(data-number);	/* 文字 */
	text-align:center;	/* 円の中心に文字を配置する */
	line-height: 2em;	/* 円の中心に文字を配置する*/
	}

main .container .mod-box-details  .flex-box div.flex-item img{
	padding: 0.5em 0.1em 0.5em 0.1em;	/*調整*//*要素の内側の余白（上、右、下、左）*/
	width: 100%;
	height: auto;
	}

main .container .mod-box-details .flex-box div.flex-item p.text-left05{
	margin-left:0.5em;		/**/
	margin-bottom:1.5em;		/**/
	}

/* ============================== リンク - ボタン ============================== */
main .container .mod-link-button-01{
	
	}

/* [p] --- */
main .container .mod-link-button-01 p{
	font-size:1.0em;		/**/
	text-align:center;
	margin-bottom:0.5em;
	margin-top:0.25em;
	/*margin-right:1.0em;*/
	margin-left:1.0em;
	max-width:800px;
	}

/* ボタン - [a] リンク */
main .container .mod-link-button-01 a{
	display:block;
	padding-top:0.3em;
	padding-right:0.5em;
	padding-bottom:0.3em;
	padding-left:0.5em;
	color:#0039ae;
	font-weight:normal;
	text-decoration:none;
	line-height:1.5em;		/*行の高さ*/
	border-radius:4px;
	border:1px solid #0039ae;
	background-color:#dbe9f8;
	background-repeat:no-repeat;
	background-size:auto 1.0em;
	background-position:center center;
	position:relative;		/*相対位置*/
	}

main .container .mod-link-button-01 a:hover, 
main .container .mod-link-button-01 a:focus, 
main .container .mod-link-button-01 a:active{
	color:#ffffff;
	background-color:#0039ae;
	}

/* 別ウィンドウで開く アイコン */
main .container .mod-link-button-01 a:after{
	content:"";		/**/
	display:inline-block;		/**/
	vertical-align:middle;		/**/
	width:11px;		/**/
	height:10px;		/**/
	background-image:url(../img/common/icon_blank_001_0039ae.png);
	background-repeat:no-repeat;
	background-size:contain;		/**/
	margin-top:0;		/**/
	margin-right:0;		/**/
	margin-bottom:0.5em;		/**/
	margin-left:0.5em;		/**/
	}

main .container .mod-link-button-01 a:hover:after, 
main .container .mod-link-button-01 a:focus:after, 
main .container .mod-link-button-01 a:active:after{
	background-image:url(../img/common/icon_blank_001_dbe9f8.png);
	}



/* ============================== ページ内のリンク (アンカー指定) ============================== */
/* アンカーリスト 下向き矢印 ﹀ - [a] リンク */
main .container .mod-anchorList1{
	font-size:0.9em;		/*文字のサイズ*/
	line-height:1.0em;		/**/
	margin:1.0em 1.0em;		/*要素の外側の余白（上下、左右）*/
	}

main .container .mod-anchorList1 ul{
	display:inline-block;		/**/
	list-style:none;		/**/
	margin:0;		/**/
	padding:0;		/**/
	margin-left:-10px;		/**/
	margin-bottom:-15px;		/**/
	}

main .container .mod-anchorList1 li{
	float:left;		/**/
	padding-right:15px;		/**/
	border-right:solid 1px #656565;		/**/
	margin:0 0 15px 10px;		/**/
	}

/**/ 
main .container .mod-anchorList1 li:last-child{
	border-right:none;
	}
 /**/

main .container .mod-anchorList1 a{
	color:#1a74ba;		/**/
	text-decoration:none;		/**/
	}

main .container .mod-anchorList1 a:after{
	content:"";		/**/
	display:inline-block;		/**/
	vertical-align:middle;		/**/
	text-decoration:none;		/**/
	width:6px;		/**/
	height:6px;		/**/
	border-top:2px solid #333;		/**/
	border-right:2px solid #333;		/**/
	-webkit-transform:rotate(-225deg);
	transform:rotate(-225deg);		/**/
	margin-top:-.45em;		/**/
	margin-left:10px;		/**/
	}

main .container .mod-anchorList1 a:active,
main .container .mod-anchorList1 a:hover{
	outline-width:0;		/**/
	}
main .container .mod-anchorList1 a:hover, 
main .container .mod-anchorList1 a:focus{
	opacity:0.6;		/**/
	}

main .container .mod-anchorList1 a:hover, 
main .container .mod-anchorList1 a:focus, 
main .container .mod-anchorList1 a:active{
	color:#ba1a31;		/**/
	text-decoration:underline;		/**/
	}


/* ============================== ページ外のリンク (サイト内は相対パスで指定) ============================== */
/* リンクリスト 右向き矢印 〉 - [a] リンク */
main .container .mod-linkList1{
	margin:2em 0 2em 0;		/*要素の外側の余白（上、右、下、左）*/
	}

main .container .mod-linkList1 ul{
	list-style:none;		/**/
	margin:0 1.0em;		/*要素の外側の余白（上下、左右）*/
	padding:0;		/**/
	}

main .container .mod-linkList1 li{
	padding-left:1em;		/**/
	text-indent:-1em;		/**/
	margin-bottom:7px;		/**/
	}

main .container .mod-linkList1 a{
	color:#1a74ba;		/**/
	text-decoration:none;		/**/
	}

main .container .mod-linkList1 a:before{
	content:"";		/**/
	display:inline-block;		/**/
	vertical-align:middle;		/**/
	text-decoration:none;		/**/
	width:6px;		/**/
	height:6px;		/**/
	border-top:2px solid #333;		/**/
	border-right:2px solid #333;		/**/
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg);		/**/
	margin-top:-.25em;		/**/
	margin-right:11px;		/**/
	margin-left:-3px;		/**/
	}

main .container .mod-linkList1 a:hover, 
main .container .mod-linkList1 a:focus{
	opacity:0.6;		/**/
	}

main .container .mod-linkList1 a:hover, 
main .container .mod-linkList1 a:focus, 
main .container .mod-linkList1 a:active{
	color:#ba1a31;		/**/
	text-decoration:underline;		/**/
	}

/* ============================== ページ外のリンク (サイト内は相対パスで指定) ============================== */
/* テキストリンク 別ウィンドウで開く アイコン - [a] リンク */
main .container .mod-text-link-02{
	margin:0.5em 0 2em 0;		/*要素の外側の余白（上、右、下、左）*/
	}

main .container .mod-text-link-02 a{
	color:#1a74ba;		/**/
	text-decoration:none;		/**/
	}

main .container .mod-text-link-02 a:hover, 
main .container .mod-text-link-02 a:focus{
	opacity:0.6;		/**/
	}

main .container .mod-text-link-02 a:hover, 
main .container .mod-text-link-02 a:focus, 
main .container .mod-text-link-02 a:active{
	color:#ba1a31;		/**/
	text-decoration:underline;		/**/
	}

main .container .mod-text-link-02 a:after{
	content:"";		/**/
	display:inline-block;		/**/
	vertical-align:middle;		/**/
	width:11px;		/**/
	height:10px;		/**/
	background-image:url(../img/common/icon_blank_001_1a74ba.png);
	background-repeat:no-repeat;
	background-size:contain;		/**/
	margin-top:0;		/**/
	margin-right:0;		/**/
	margin-bottom:0.5em;		/**/
	margin-left:0.5em;		/**/
	}

main .container .mod-text-link-02 a:hover:after, 
main .container .mod-text-link-02 a:focus:after, 
main .container .mod-text-link-02 a:active:after{
	background-image:url(../img/common/icon_blank_001_ba1a31.png);
	}


/* ============================== ダウンロードリスト ============================== */
main .container .download-list{
	margin-top:0.5em;		/**/
	margin-right:0;		/**/
	margin-bottom:0.5em;		/**/
	margin-left:0;		/**/
	}

main .container .download-list table{
	border-collapse:collapse;
	border-spacing:0;
	}

main .container .download-list th{
	background:#eee;
	text-align:center;
	vertical-align:middle;
	padding:0.5em 0.5em 0.5em 0.5em;
	border:1px solid #dedede;
	}

main .container .download-list td{
	background:#ffffff;
	text-align:center;
	vertical-align:middle;
	padding:0.5em 0.5em 0.5em 0.5em;
	border:1px solid #dedede;
	}


main .container .downloadlist a{
	display:block;
	margin: 0.1em 1.0em;
	padding:0.3em 0.5em 0.3em 0.5em;
	border-radius:4px;
	border: 1px solid #1a74ba;
	background-color:#1c76bc;
	color:#ffffff;
	font-size:1.0em;
	font-weight:bold;
	text-decoration:none;
	}

main .container .downloadlist a:hover, 
main .container .downloadlist a:focus, 
main .container .downloadlist a:active{
	border: 1px solid #1a74ba;
	background-color:#47abf8;
	color:#ffffff;
	}


/* ########## 600px 未満 ########## */
@media screen and (max-width:599px){
	main .container .download-list tbody td{
		overflow-wrap: anywhere;
		}
	}


/* ////////// ダウンロード ボタン （ダウンロード） ////////// */
main .container .download-list button{
	display: block;		/**/
	margin: 0.5em auto;		/*要素の外側の余白（上下、左右）*/
	padding: 0;		/*要素の内側の余白（上下、左右）*/
	color: #0039ae;		/**/
	font-weight: bold;		/*太字にする*/
	font-size:1.0em;		/*文字のサイズ*/
	width: 8em;		/**/
	height: 2.0em;		/**/
	text-decoration: none;		/*下線消す*/
	border-radius: 4px;			/*角を丸くする*/
	border: 1px solid #0039ae;		/**/
	background-color: #dbe9f8;		/**/
}

main .container .download-list button:hover ,
main .container .download-list button:active ,
main .container .download-list button:focus {
	color: #ffffff;		/**/
	background-color: #0039ae;		/**/
}

/* ============================== 動画バナー ============================== */

main .container .mod-outerframe-video{
	border: 1px solid #cccccc;
	background: #ffffff;
	display: flex;
	align-items: stretch;
	padding: 12px;
	width: fit-content;
	min-width: 700px;
	/*margin: 0.5em 1.0em 1.0em 1.0em;*/
	}
/* ########## 768px 未満 ########## */
@media screen and (max-width:767px){
	main .container .mod-outerframe-video{
		flex-direction: column;
		align-items: stretch;
		min-width: 0;
		margin: 0px;
		}
	}


main .container .mod-video-left{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	flex: 1 1 auto;
	margin-right: 24px;
	}
/* ########## 768px 未満 ########## */
@media screen and (max-width:767px){
	main .container .mod-video-left{
		margin-right: 0;
		}
	}

main .container .mod-video-left .mod-left-text{
	color: #333333;
	font-size: 1.0em;
	margin-bottom: 20px;
	margin-left: 6px;
	margin-top: 2px;
	/*font-family: sans-serif;*/
	}

main .container .mod-video-banner{
	display: flex;
	align-items: center;
	border: 1px solid #cccccc;
	border-radius: 2px;
	padding: 14px 16px;
	background: #ffffff;
	cursor: pointer;
	transition: box-shadow 0.2s;
	min-width: 400px;
	}

main .container .mod-video-banner:hover {
	background: #f7f7f7;
	}

main .container .mod-video-banner .play-icon{
	width: 48px;
	height: 48px;
	border: 2px solid #333333;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 18px;
	background: #f5f5f5;
	box-sizing: border-box;
	}

main .container .mod-video-banner .play-icon::before{
	content: '';
	display: block;
	width: 0;
	height: 0;
	border-top: 14px solid transparent;
	border-bottom: 14px solid transparent;
	border-left: 22px solid #333333;
	margin-left: 4px;
	}

main .container .mod-video-banner .banner-text{
	display: flex;
	flex-direction: column;
	font-size: 1em;
	color: #222222;
	}

main .container .mod-video-banner .banner-text .banner-text-01{
	font-weight: bold;
	margin-bottom: 6px;
	font-size: 0.95em;
	}

main .container .mod-video-banner .banner-text .banner-text-02{
		font-size: 0.90em;
	}

main .container .mod-video-qrcode{
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 148px;
	/*min-width: 148px;*/
	/*min-height: 148px;*/
	background: #ffffff;
	border-radius: 2px;
	padding: 6px 6px;
	border: 1px solid #cccccc;
	}
/* ########## 768px 未満 ########## */
@media screen and (max-width:767px){
	main .container .mod-video-qrcode{
		justify-content: flex-start;
		margin-top: 18px;
		}
	}

main .container .mod-video-qrcode .img-qrcode-11,
main .container .mod-video-qrcode .img-qrcode-21,
main .container .mod-video-qrcode .img-qrcode-12,
main .container .mod-video-qrcode .img-qrcode-22{
	background-repeat:  no-repeat;	/* 画像の繰り返しを指定 */
	background-position: center center;	/* 画像の横・縦の位置を指定 */
	width:148px;	/* 横幅のサイズを指定 */
	height:148px;	/* 縦幅のサイズを指定 */
	}


main .container .mod-video-qrcode .img-qrcode-11{
	background-image:url(../img/qr/be1videobeesjp1qr.png);	/* 日本語 */
	}
main .container .mod-video-qrcode .img-qrcode-21{
	background-image:url(../img/qr/be1videocdgsjp1qr.png);	/* 日本語 */
	}

main .container .mod-video-qrcode .img-qrcode-12{
	background-image:url(../img/qr/be1videobeesjp2qr.png);	/* 日本語 */
	}
main .container .mod-video-qrcode .img-qrcode-22{
	background-image:url(../img/qr/be1videocdgsjp2qr.png);	/* 日本語 */
	}



/* ============================== 動画プレーヤー ============================== */

main .container .mod-unit-video{
	border: 1px solid #e6e6e6;
	background: #ffffff;
	max-width: 960px;
	margin: 1em auto;
	}

main .container .mod-unit-video .mod-video-title{
	border-bottom: 1px solid #bdbdbd;
	background: #f5f5f5;
	padding: 0.5em 1.0em;
	font-weight:bold;
	font-size: 1.2em;
	}

main .container .mod-unit-video .mod-box-video{
	border: none;
	background: #ffffff;
	padding: 1.0em 2.0em;
	}

main .container .mod-unit-video .mod-video-comment{
	border-bottom: none;
	background: #ffffff;
	padding: 0.5em 0;
	}

main .container .mod-unit-video .mod-video-player{
	width: 100%;
	aspect-ratio: 16 / 9; /* 16:9 の場合 */
	position: relative;
	padding: 1.0em 1.0em;
	margin: 1em auto;
	}

main .container .mod-unit-video .mod-video-player iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}

main .container .mod-unit-video .mod-video-note{
	border: 1px solid #dbe9f8;
	background: #f8fbfe;
	padding: 1.0em 2.0em;
	}

main .container .mod-video-player .iframe {
      width: 560px;
      height: 315px;
      border: none;
    }
    @media (max-width: 600px) {
	main .container .mod-video-player .iframe {
        width: 100%;
        height: 200px;
      }
    }


/* ########## 768px 未満 ########## */
/*@media screen and (max-width:767px){
	}*/


/* ########## 600px 以上 768px 未満 ########## */
/*@media screen and (min-width:600px) and (max-width:767px){
	}*/


/* ########## 600px 未満 ########## */
@media screen and (max-width:599px){
	main .container .mod-unit-video{
		border: none;
		margin: 0 auto;
		}
	main .container .mod-unit-video .mod-video-title{
		border: 1px solid #bdbdbd;
		padding: 0.5em 0.5em;
		font-size: 1.1em;
		}
	main .container .mod-unit-video .mod-video-comment{
		
		}
	main .container .mod-unit-video .mod-box-video{
		padding: 0.5em 0.5em;
		}
	main .container .mod-unit-video .mod-video-note{
		padding: 0.5em 1.0em 0.5em 2.0em;
		}
	}


/* ============================== 行間 ============================== */
.mod-mb05em{
	margin-bottom:0.5em;		/**/
	}
.mod-mb10em{
	margin-bottom:1.0em;		/**/
	}
.mod-mb15em{
	margin-bottom:1.5em;		/**/
	}
.mod-mb20em{
	margin-bottom:2.0em;		/**/
	}
.mod-mb25em{
	margin-bottom:2.5em;		/**/
	}
.mod-mb30em{
	margin-bottom:3.0em;		/**/
	}

.mod-mt03em{
	margin-top:0.3em;		/**/
	}
.mod-mt05em{
	margin-top:0.5em;		/**/
	}
.mod-mt10em{
	margin-top:1.0em;		/**/
	}
.mod-mt15em{
	margin-top:1.5em;		/**/
	}
.mod-mt20em{
	margin-top:2.0em;		/**/
	}
.mod-mt25em{
	margin-top:2.5em;		/**/
	}
.mod-mt30em{
	margin-top:3.0em;		/**/
	}

.mod-pb05em{
	padding-bottom:0.5em;		/**/
	}
.mod-pb10em{
	padding-bottom:1.0em;		/**/
	}
.mod-pb15em{
	padding-bottom:1.5em;		/**/
	}
.mod-pb20em{
	padding-bottom:2.0em;		/**/
	}
.mod-pb25em{
	padding-bottom:2.5em;		/**/
	}
.mod-pb30em{
	padding-bottom:3.0em;		/**/
	}

.mod-pt03em{
	padding-top:0.3em;		/**/
	}
.mod-pt05em{
	padding-top:0.5em;		/**/
	}
.mod-pt10em{
	padding-top:1.0em;		/**/
	}
.mod-pt15em{
	padding-top:1.5em;		/**/
	}
.mod-pt20em{
	padding-top:2.0em;		/**/
	}
.mod-pt25em{
	padding-top:2.5em;		/**/
	}
.mod-pt30em{
	padding-top:3.0em;		/**/
	}

/* ============================== 余白 （左右） ============================== */
.mod-pl03em{
	padding-left:0.3em;		/**/
	}
.mod-pl05em{
	padding-left:0.5em;		/**/
	}
.mod-pl10em{
	padding-left:1.0em;		/**/
	}
.mod-pl15em{
	padding-left:1.5em;		/**/
	}
.mod-pl20em{
	padding-left:2.0em;		/**/
	}
.mod-pl25em{
	padding-left:2.5em;		/**/
	}
.mod-pl30em{
	padding-left:3.0em;		/**/
	}

.mod-pr03em{
	padding-right:0.3em;		/**/
	}
.mod-pr05em{
	padding-right:0.5em;		/**/
	}
.mod-pr10em{
	padding-right:1.0em;		/**/
	}
.mod-pr15em{
	padding-right:1.5em;		/**/
	}
.mod-pr20em{
	padding-right:2.0em;		/**/
	}
.mod-pr25em{
	padding-right:2.5em;		/**/
	}
.mod-pr30em{
	padding-right:3.0em;		/**/
	}


/* ============================== 文字装飾 ============================== */
.mod-bold{
	font-weight:bold;		/*文字の太さ*/
	}

/* ============================== 文字色 ============================== */
.mod-color-333{
	color: #333;		/*文字色  */
	}
.mod-color-666{
	color: #666;		/*文字色  */
	}
.mod-color-999{
	color: #999;		/*文字色  */
	}
.mod-color-ccc{
	color: #ccc;		/*文字色  */
	}


/* ============================== 文字右寄せ ============================== */
.mod-right{
	text-align: right;
	}

/* ============================== 文字サイズ ============================== */
.mod-fontsize-09em{
	font-size: 0.9em;
	}



/****************************************************
 04. Back to the top on this page
****************************************************/

.backToTop{
	display:none;		/**/
	}

.backToTop.showButton{
	display:block;		/**/
	}

.button-backToTop{
	box-sizing:border-box;		/**/
	width:50px;		/**/
	height:50px;		/**/
	position:fixed;		/**/
	right:20px;		/**/
	bottom:20px;		/**/
	background:#fff;		/**/
	border:solid 1px #ccc;		/**/
	}

.button-backToTop:hover, 
.button-backToTop:focus{
	opacity:0.6;
	}
.button-backToTop:active, 
.button-backToTop:hover{
	outline-width:0;
	}

.button-backToTop:before{
	content:"";		/**/
	display:inline-block;		/**/
	vertical-align:middle;		/**/
	text-decoration:none;		/**/
	width:6px;		/**/
	height:6px;		/**/
	border-top:2px solid #333;		/**/
	border-right:2px solid #333;		/**/
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);		/**/
	border-color:#333;		/**/
	position:absolute;		/**/
	top:2px;		/**/
	right:0;		/**/
	bottom:0;		/**/
	left:0;		/**/
	margin:auto;		/**/
	}


/****************************************************
05. hooter
****************************************************/

footer{
	border-top:1px solid #999999;
	font-size:0.8em;
	background:#eeeeee;
	margin-top:1.0em;
	margin-bottom:1.0em;
	padding:0.5em 0.1em;
	}


footer ul{
	display:inline-block;
	margin:0.1em 2em;
	}


footer li{
	list-style:none;
	float:left;
	margin-right:1.0em;
	padding-right:1.0em;
	border-right:solid 1px #999999;
	}


footer li:last-child{
	padding-right:0;
	border-right:none;
	}


footer .txt-copyright{
	color:#808080;
	text-align:center;
	margin:0.5em;
	}


footer a{
	color:#1a74ba;
	text-decoration:none;
	}


footer a:hover, footer a:focus, footer a:active{
	color:#ba1a31;
	text-decoration:underline;
	}







/****************************************************
99. template
****************************************************/

/* ########## 768px 以上 ########## */
/*@media screen and (min-width:768px){
	
	
	}*/


/* ########## 768px 未満 ########## */
/*@media screen and (max-width:767px){
	
	
	}*/


/* ########## 600px 以上 768px 未満 ########## */
/*@media screen and (min-width:600px) and (max-width:767px){
	
	
	}*/


/* ########## 600px 未満 ########## */
/*@media screen and (max-width:599px){
	
	
	}*/