@charset"utf-8";
@media screen and (min-width:980px) {
}
@media screen and (min-width:640px) and (max-width:979px) {
}
@media screen and (max-width:639px) {
}

/*
================================================================================================================
 TOPページ
================================================================================================================
*/

#index .container{width:100%;min-height:calc(100% - 90px);}
#index  .content{width:100%;min-height:calc(100% - 125px);margin: 0 auto;padding-top: 20px;}
@media screen and (max-width:639px) {#index  .content{padding-top:20px;}}
@media all and (-ms-high-contrast: none) {/*ieのみ*/

}

.box{position: relative; width:calc(100% - 42px);padding:20px;margin-bottom: 30px;
border: 1px solid #999999;}
@media screen and (max-width:639px) {
.box{width:calc(100% - 22px);padding:10px;}
}

.title span.sub{position: absolute;right:5px;bottom:5px;color: #FFF;line-height:30px; font-size:12px; font-weight: 800;text-align: center;cursor: pointer;
	padding: 0 10px;
	background-image:url("../img/top/sub_L.gif"),url("../img/top/sub_R.gif");
	background-size: auto;
	background-position:left,right;
	background-repeat:no-repeat,no-repeat;
	display: block;
}
.title span.sub .middle{
	background-image:url("../img/top/sub_C.gif");
	background-size: auto;
	background-position:center;
	background-repeat:repeat-x;
	display: block;
	pointer-events: none;
}
.title span.sub a{position: absolute;top:0;bottom:0;left:0;right:0;}

/*
================================================================================================================
宣伝バナースライド
================================================================================================================
*/
#slider{
	width: 100%;
	max-width: 980px;
	margin: 0 auto 20px;
	padding-top: 26.5%;
	position: relative;}
.sld_fade{
	width: 100%;
	position: absolute;
	top: 0;
	display: none;}
.sld_fade img{width: 100%;height: auto;}
/*
================================================================================================================
HOW TO LINK　ログイン
================================================================================================================
*/
#login_area{margin-bottom: 40px;}

#howto_area{text-align: center; margin-bottom: 20px;}
#howto_area .link_text{text-decoration: underline #015eea;margin-bottom: 20px;}


/*
================================================================================================================
プロフィール
================================================================================================================
*/

#profile_area{
display:flex;
flex-direction:row;
justify-content:flex-start;
align-items:center;	
}
.box#profile_area {background: rgb(255,237,214);}

#profile_area .icon{width:150px;margin-right:20px;}
#profile_area .icon img{width: 100%;height: auto;}
#profile_area .deta{width:calc(100% - 150px);font-weight:bold;font-size:20px;}
#profile_area .name,#profile_area .id_num{font-weight:800;font-size:16px;line-height: 33px; margin-bottom:5px;}
#profile_area .name{
	margin-top: 10px;
	padding:0 10px;
	background-image:url("../img/top/pro_name_L.gif"),url("../img/top/pro_name_R.gif");
	background-size: auto;
	background-position:left,right;
	background-repeat:no-repeat,no-repeat;
	display: block;
}
#profile_area .name .middle{
	width: 100%;
	background-image:url("../img/top/pro_name_C.gif");
	background-size: auto;
	background-position:center;
	background-repeat:repeat-x;
	display: block;
}
#profile_area .id_num{
	margin-top: 10px;
	padding:0 10px;
	background-image:url("../img/top/pro_id_L.gif"),url("../img/top/pro_id_R.gif");
	background-size: auto;
	background-position:left,right;
	background-repeat:no-repeat,no-repeat;
	display: block;
}
#profile_area .id_num .middle{
	background-image:url("../img/top/pro_id_C.gif");
	background-size: auto;
	background-position:center;
	background-repeat:repeat-x;
	display: block;
}
#profile_area .rendo_link{color: #FFF; max-width:150px;font-size:12px;line-height:26px; font-weight: 800;text-align: center;
padding: 0 10px;
	background-image:url("../img/top/link_title_L.gif"),url("../img/top/link_title_R.gif");
	background-size: auto;
	background-position:left,right;
	background-repeat:no-repeat,no-repeat;
	display: block;
}
#profile_area .rendo_link .middle{
	width: 100%;	
	background-image:url("../img/top/link_title_C.gif");
	background-size: auto;
	background-position:center;
	background-repeat:repeat-x;
	display: block;
}


#profile_area ul.rendo_icon{display:flex;
flex-direction:row;
justify-content:flex-start;
align-items:center;padding:5px 0;flex-wrap: wrap;}
#profile_area ul.rendo_icon li{width:60px;margin:0 3px;}
#profile_area ul.rendo_icon li img{width: 100%;height: auto;border:2px solid #dddddd;border-radius: 6px;}

.logout{position: relative;
	width: 120px;float: right;
	color: #FFF;line-height:30px; font-size:12px; font-weight: 800;text-align: center;cursor: pointer;
	margin-top: 5px; padding: 0 10px;
	background-image:url("../img/top/sub_L.gif"),url("../img/top/sub_R.gif");
	background-size: auto;
	background-position:left,right;
	background-repeat:no-repeat,no-repeat;
	display: block;
}
.logout .middle{
	background-image:url("../img/top/sub_C.gif");
	background-size: auto;
	background-position:center;
	background-repeat:repeat-x;
	display: block;
}
.logout a{position: absolute;top:0;bottom:0;left:0;right:0;}

@media screen and (max-width:639px) {
#profile_area .icon{width:100px;margin-right:10px;}
#profile_area .deta{width:calc(100% - 100px);}
}

/*
================================================================================================================
実機連動対応機種
================================================================================================================
*/
.box#machine_area {background: rgb(249,255,214);}
#machine_area ul{display:flex;
flex-direction:row;
justify-content:center;
align-items:center;
flex-wrap: wrap;}
#machine_area ul li{width:100px;margin:0 5px;cursor: pointer;}
#machine_area ul img{width: 100%;height: auto;border:2px solid #dddddd;border-radius: 6px;}

/*
================================================================================================================
お知らせ
================================================================================================================
*/
.content .title.info{
	background-image:url("../img/common/title_bg2.gif");
	background-size: contain;
	background-position:left top;
	background-repeat:repeat-x;}

.box#info_area {background: rgb(229,255,224);}
#info_area ul{}
#info_area ul .info_list_element{position: relative;
width:calc(100% - 12px);padding:2px 5px;margin-bottom:5px;background: #FFFFFF;
background:#FFFFFF;
border: 1px solid #999999;
border-radius: 6px; }
#info_area ul .info_list_element .date{padding-bottom:3px;font-weight: bold;}

#info_area ul .info_list_element.link{cursor: pointer;}
#info_area ul .info_list_element.link:hover{background: rgb(255,255,187);
background: rgba(255,255,187,1);}

#info_area ul .info_list_element img{	/* お知らせ内の画像を範囲に収める */
	max-width: 100%;
}

#info_area ul .info_list_element.info_list_element.unread{
	box-shadow:  0px 0px 5px 0px olive;
}


/*
================================================================================================================
二次元コード
================================================================================================================
*/

#code_area .btn a{
	background-image:url(../img/top/top_code.gif),url("../img/common/btn_off.gif");
	background-size:40px 40px, 100% auto;
	background-position:left 10px top 10px,center;
	background-repeat:no-repeat;	
}
 #code_area .btn a:hover {
background-image:url(../img/top/top_code.gif),url("../img/common/btn_on.gif");
}

/*
#code_area{padding-left:60px;width:calc(100% - 82px);
	background-image:url(../img/top/top_code.gif);
	background-size: 48px 48px;
	background-position:left 5px center;
	background-repeat:no-repeat;}
#code_area::after{
  content: '';
  width: 10px;
  height: 10px;
  border: 0px;
  border-top: solid 4px #5bc0de;
  border-right: solid 4px #5bc0de;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  right: 10px;
  margin-top: -6px;
}
#code_area a{position: absolute;top:0;bottom:0;left:0;right:0;cursor: pointer;background-color: transparent;}*/
@media screen and (max-width:639px) {
/*#code_area{width:calc(100% - 72px);	}*/
}
	
/*
================================================================================================================
サポートメニュー
================================================================================================================
*/
.title.suport{
	background-image: none;
	background-color:#999999;
	color: #FFF;
	font-weight: bold;
	text-align: center;
	font-size: 14px;
	padding: 5px 0;}
#suport_area {background-color:#dddddd;
font-size: 14px;
color: #666;
padding: 10px 0;}
#suport_area a{color: #444;	font-weight: bold;text-decoration: underline;cursor: pointer;}

#suport_area ul.link{margin-bottom:10px;text-align: center;}
#suport_area ul.link li{display: inline-block; margin: 0 10px;}

#suport_area ul.as,#suport_area ul.dot{width:98%;max-width: 660px; margin: 0 auto 20px;}
#suport_area ul.as li,#suport_area ul.dot li{text-indent: -1em;margin-left: 1em;}
#suport_area ul.as li:before{content: "※";display: inline-block;width: 1em;text-indent: 0;}
#suport_area ul.dot li:before{content: "‣";display: inline-block;width: 1em;text-indent: 0;}

#suport_area .browser{width:98%;margin: 0 auto 10px; text-align: center;}
#suport_area .browser span{font-weight: bold;}


@media screen and (max-width:639px) {
	#suport_area{font-size: 12px;}
}

/*
================================================================================================================
期間限定お知らせバナー
================================================================================================================
*/
#limited_info{margin-bottom: 20px;}
#limited_info ul{display:flex;flex-direction:row;
justify-content:center;
align-items:center;}
#limited_info ul li{
width:calc(50% - 10px);	
max-width: 700px;
margin:10px 5px;
cursor: pointer;
}
#limited_info ul li img{width: 100%;height: auto;}

@media screen and (max-width:768px) {
#limited_info ul{display:block;}
#limited_info ul li{width:100%;margin:10px auto;}
}