@charset 'UTF-8';
@font-face {
font-family: "myFontFamily";
src        : local("Helvetica");
}
/*
@font-face {
font-family: "myFontFamily";
src        : local("Arial");
}
*/
@font-face {
font-family: "myFontFamily";
src        : local("Hiragino");
}
/*
	@font-face {
	font-family  : "myFontFamily";
	src          : local("Lucida Grande");
	unicode-range: U+2026;
	}
	@font-face {
	font-family  : "myFontFamily";
	src          : local("Meiryo");
	unicode-range: U+2026;
	}
*/
html, button, input, select, textarea, body, ul ,li, div{
font-size:14px;
word-wrap:break-word;
/*white-space : normal;*/
font-family: 'icomoon', 'myFontFamily', Helvetica, 'Hiragino Kaku Gothic Pro', 'Segoe UI', Meiryo, 'Yu Gothic', 'MS PGothic', sans-serif;
/*
font-family: 'icomoon', 'myFontFamily', Helvetica, 'Hiragino Kaku Gothic Pro', 'Segoe UI', 'Yu Gothic', Meiryo, 'MS PGothic', sans-serif;
font-family: ellipsisjp, Helvetica, Tahoma, Verdana, 'ヒラギノ角ゴ Pro W3', 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', Meiryo, 'メイリオ', sans-serif;
font-family: 'Lucida Grande', sans-serif;
font-family: 'myFontFamily', Helvetica, 'Hiragino Kaku Gothic Pro', 'Segoe UI', 'Yu Gothic', Meiryo, 'MS PGothic', sans-serif;
*/
}
select{margin:0;}
html{
-webkit-text-size-adjust: none;
}
a ,
a:hover ,
.ui-widget-content a {
text-decoration:none;
color:#0088cc;
}

/* CUSTOM */
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
margin-bottom:0;
color:#111111;
}

input:-moz-placeholder,textarea:-moz-placeholder{color:#999999;}
input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#999999;}
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:#999999;}

.row {
padding-bottom:2px;
}
h1,h2,h3{
line-height: 100%;
}
.icon{
margin-right: 2px;
}
.dropdown-menu>li>a{padding: 5px 20px;}
.btn {
margin: 6px auto;
}
.input-append .btn{
margin:0;
}
.btn.disabled, .btn[disabled]{
opacity: 0.3;
filter: alpha(opacity=30);
}
.w80per,
input[type="submit"].w80per, 
input[type="button"].w80per{
display: block;
width: 80%;
padding-top:10px;
padding-bottom:10px;
}
.myTabContent{
overflow:hidden;
}
.btn-box{
padding:10px 30px;
}
.btn_large_tw,
.btn_large_ab{
padding:10px;
font-size:16px;
}
.cstTable td{vertical-align:middle;height:35px;}

.label{font-weight:normal;}
.label-important{background-color:#FF6A67;}
.label-info{background-color:#2BA2DD;}

.label-large{
font-size: 14px;
padding: 4px 8px;
}

/*しおりから読むに使用  */
.btn-x-large{
display: block;
width: 80%;
font-weight:bold;
padding-top:10px;
padding-bottom:10px;
}
select {
width:auto;
}
/*
div.btn-group input[type="checkbox"] ,
div.btn-group input[type="radio"] {
display:none;
}
*/

.mmenu li > a, .mmenu li > span, .mmenu i{
font-size: 16px;
font-weight: bold;
}
.mmenu i {
margin-right: 4px;
}
.mmenu li h2{
padding:6px;
color:#FFFFFF;
background-color:#333333;
background: -moz-linear-gradient(top, #222222, #262626 100%);
background: -webkit-gradient(linear, left top, left bottom, from(#222222), color-stop(1, #262626));
}
.bottomRight{
position:absolute;
bottom:0;right:2px;
}
.rowLinkSection.badgeRight .badge{
float:right;
margin-right:10px;
}
/* BOOTSTRAP_CUSTOMIZE マイリストに使用 */
.cstTable{
margin-bottom:0;
}
.cstTable th, .cstTable td{
border-top:none;
border-bottom:1px solid #dddddd;
}
.label-position-right{
float:right;
margin-right:20px;
}
/*************** コンテンツ関連 ***************/
/* 内包エリア */
body{
}
#wrapperArea, #menuArea, #searchArea{
/*margin-bottom:48px;  フッター余白 */
}

.wrapperArea{
position:relative;
}
	#searchArea{
	z-index:9999;
	background-color:#FCFCFC;
	display:none;
	position:absolute;
	top:51px;
	width:100%;
	}

/* 罫線 */
hr{
margin: 0;
border:none;
height:1px;
background-color:#E1E1E1;
/*
background: -moz-linear-gradient(left, #FFFFFF, #E1E1E1 30%, #E1E1E1 70%, #FFFFFF);
background: -webkit-gradient(linear, left top, right bottom, from(#FFFFFF), color-stop(0.3, #E1E1E1), color-stop(0.7, #E1E1E1), color-stop(1, #FFFFFF));
*/
}

/* 大枠 */
h2{
}

/* コンテンツ毎 */
.mainHl, .subHl, .subMenu, .subConfHl{
/* margin:0 -6px 0 -6px; */
padding: 8px 16px;
font-size:14px;
font-weight: normal;
/*border:1px solid #CCCCCC;*/
border-right:0;
border-left:0;
/* margin-bottom:-1px; */
position:relative;
}
	.mainHl a, .subHl a, .subMenu a, .subConfHl a{
	color:#F5FBFF;
	text-decoration:underline;
	}

a.hlMoreLink{
position: absolute;
top: 0;right: 0;
padding: 8px 10px;
display: block;
min-width: 50px;
text-align: center;
border-left: 1px solid #ffffff;
text-decoration:none;
background-color:rgba(0,0,0,0.1);
}
	a.hlMoreLink:hover{
	background-color:rgba(0,0,0,0.2);
	}
	a.hlMoreLink:after{
	content: " \F0DA";
	font-family: FontAwesome;
	}

/* コンテンツ毎 */
.mainHl{
background-color:#6F6F6F; /* MCOLOR #41C5B6 */
color:#FFFFFF;
}
.subHl, .subMenu, .subConfHl, .rowLinkSection h6{
color:#FFFFFF;
background-color:#6F6F6F; /* MCOLOR #41C5B6 */
position:relative;
}
.subHl .btn{
position:absolute;
right:4px;
top:4px;
min-width:23px;
}
	.subHl .btn{
	margin-top:0;
	margin-bottom:0;
	}
		.mainHl a.btn, .subHl a.btn, .subMenu a.btn, .subConfHl a.btn{
		color:#000000;
		text-decoration:none;
		}
	/* マージン用 */
	.subConfHl{
	margin-bottom:10px;
	}
/* ヘッダー領域 */
#header{
background-color:#5F5F5F; /* MCOLOR #21AF9E */
}

/* ヘッダー領域 */
#header{
}

/* フッター領域 */
#footer{
}

#wrapperArea{
background-color:#FFFFFF;
}

/* 位置取り専用クラス */
.center{
display:block;
text-align:center;
}
.left{
display:block;
text-align:left;
}
.right{
display:block;
text-align:right;
}
/* 上下中央 */
.verticalCenter{
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
/* 画像フィルタ */
.btnAnchor:hover,
a img:hover{
cursor:hand;
cursor:pointer;
}

.spacer{margin-top:10px;margin-bottom:10px;}
.topSpace{margin-top:60px;}
.m10{padding:10px;}
.m0{margin:0;}
.mt-1{margin-top:-1px;}
.mb-1{margin-bottom:-1px;}
/*************** コーナーヘッダ関連 ***************/
#itemHeader{
border-bottom:1px solid #EEEEEE;
}
#itemHeader .title a,
#itemHeader .creator{
color:#666666;
}
	#itemHeader .creator{
	font-size:12px;
	}
	#itemHeader table{
	width:100%;
	}
	#itemHeader .imageInfo{
	vertical-align:middle;
	text-align:center;
	width:50px;
	height:50px;
	padding:0 4px 0 4px;
	}
	#itemHeader .titleInfo{
	}

	#itemHeader td{
	vertical-align:top;
	}

	#itemHeader .title{
	display:inline;
	}
.ellipsis{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
	/* テーブル対策 */
	.tdEllipsis{
	table-layout:fixed;
	}
.externalLinksTable i{
width:16px;
display:inline-block;/display:inline;/zoom:1;
}

.smallLink,
.smallLink:hover,
.smallLink:focus{
color:#AAAAAA;
font-size:12px;
}

.wIconSize{
width:20px;
background-color:#f9f9f9;
}
.monoqlo{
-webkit-filter: grayscale(100%);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
filter: gray;
}
.unresponsed{
text-decoration: none;
text-align: center;
position: relative;
display: block;
background-color:#dddddd;
/*
background-image: -webkit-linear-gradient(-45deg, #ffffff 25%, transparent 25%, transparent 50%, #ffffff 50%, #ffffff 75%, transparent 75%, transparent);
background-image: linear-gradient(-45deg, #ffffff 25%, transparent 25%, transparent 50%, #ffffff 50%, #ffffff 75%, transparent 75%, transparent);
background-size: 20px 20px;
text-shadow:1px 1px 2px rgba(0,0,0,.3);
*/
border: 1px solid #CCCCCC;
color: #888888;
margin: 1px;
padding: 2px;
cursor:not-allowed;
}

/*************** 入力エリア関連 ***************/
.w500{width:500px;}
.w400{width:400px;}
.w300{width:300px;}
.w275{width:275px;}
.w250{width:250px;}
.w225{width:225px;}
.w200{width:200px;}
.w175{width:175px;}
.w150{width:150px;}
.w125{width:125px;}
.w100{width:100px;}
.w75{width:75px;}
.w50{width:50px;}
.w25{width:25px;}

/*テキストエリア*/
.textArea{
width:90%;
min-height:70px;
}

/* for modern brouser */
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
/* IE7,MacIE5 */
.clearfix {
  display: inline-block;
}
/* WinIE6 below, Exclude MacIE5 \*/
* html .clearfix {
  height: 1%;
}
.clearfix {
  display: block;
}
/**/

/* smartphone.cssから移植 */
html{
-webkit-text-size-adjust: none;
}
input[type="submit"]::-moz-focus-inner{
border :0px;
}
	select.spSelect{
	width:95%;
	}
/* インプットテキスト拡張 */
.spInputText{
padding:6px 3px 6px 3px;
font-size:110%;
border-width:1px;
border-radius:4px;
margin:2px;
width:90%;
}
	input[type="text"].w500 , input[type="text"].w400 , input[type="text"].w300 , 
	input[type="text"].w275 , input[type="text"].w250 , input[type="text"].w225 , 
	input[type="text"].w200 , input[type="text"].w175 , input[type="text"].w150 , 
	input[type="text"].w125 , input[type="text"].w100 , input[type="text"].w75 , 
	input[type="text"].w50 , input[type="text"].w25{
	padding:6px 3px 6px 3px;
	font-size:110%;
	border-width:1px;
	border-radius:4px;
	margin:2px;
	}

/* チェックボックス・ラジオボタンデザイン拡張 */
.customRadioCheckForm input[type=radio],
.customRadioCheckForm input[type=checkbox] {
    display: inline-block;
    margin-right: 6px;
}
.customRadioCheckForm input[type=radio] + label,
.customRadioCheckForm input[type=checkbox] + label {
    position: relative;
      
    display: inline-block;
    margin-right: 12px;
      
    font-size: 14px;
    line-height: 30px;
      
    cursor: pointer;
}
  
@media screen and (min-width: 1px) {
    .customRadioCheckForm input[type=radio],
    .customRadioCheckForm input[type=checkbox] {
        display: none;
        margin: 0;
    }
    .customRadioCheckForm input[type=radio] + label,
    .customRadioCheckForm input[type=checkbox] + label {
        padding: 0 0 0 24px;
    }
    .customRadioCheckForm input[type=radio] + label::before,
    .customRadioCheckForm input[type=checkbox] + label::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
          
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        display: block;
        width: 18px;
        height: 18px;
        margin-top: -9px;
          
        background: #FFF;
    }
    .customRadioCheckForm input[type=radio] + label::before {
        border: 2px solid #ccc;
        border-radius: 30px;
    }
    .customRadioCheckForm input[type=checkbox] + label::before {
        border: 2px solid #ccc;
    }
    .customRadioCheckForm input[type=radio]:checked + label,
    .customRadioCheckForm input[type=checkbox]:checked + label {
    color: #00921B;
    font-weight: bold;
    }
    .customRadioCheckForm input[type=radio]:checked + label::after,
    .customRadioCheckForm input[type=checkbox]:checked + label::after {
        content: "";
        position: absolute;
        top: 50%;
          
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        display: block;
    }
    .customRadioCheckForm input[type=radio]:checked + label::after {
        left: 5px;
          
        width: 8px;
        height: 8px;
        margin-top: -4px;
          
        background: #00921B;
        border-radius: 8px;
    }
    .customRadioCheckForm input[type=checkbox]:checked + label::after {
        left: 3px;
          
        width: 16px;
        height: 8px;
        margin-top: -8px;
          
        border-left: 3px solid #00921B;
        border-bottom: 3px solid #00921B;
          
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
     
    /* either */
    .customRadioCheckForm .either {
        position: relative;
         
        display: inline-block;
        width: 120px;
        overflow: hidden;
        border: 2px solid #ccc;
    }
    .customRadioCheckForm .either input[type=radio] + label {
        position: static;
         
        float: left;
        display: block;
        width: 50%;
        margin-right: 0;
        padding: 0;
        overflow: hidden;
         
        text-align: center;
    }
    .customRadioCheckForm .either input[type=radio] + label::before {
        content: attr(data-label);
         
        top: 0;
        bottom: 0;
        z-index: 1;
         
        display: block;
        width: 50%;
        height: auto;
        margin-top: 0;
         
        text-align: center;
         
        color: transparent;
        background: transparent;
        border: 0 none;
        border-radius: 0;
    }
    .customRadioCheckForm .either input[type=radio] + label:last-child::before {
        left: 50%;
        right: 0;
         
    }
    .customRadioCheckForm .either input[type=radio]:checked + label::before {
        color: #fff;
    }
     
    .customRadioCheckForm .either input[type=radio] + label::after {
        border-radius: 0;
    }
    .customRadioCheckForm .either input[type=radio]:first-child + label::after {
        content: none;
    }
    .customRadioCheckForm .either input[type=radio] + label + input[type=radio] + label::after {
        content: "";
         
        position: absolute;
        top: 0;
        bottom: 0;
        z-index: 0;
         
        display: block;
        width: auto;
        height: auto;
        margin: auto;
         
        background: #00921B;
        border: 2px solid #fff;
         
        -webkit-transition: all 200ms;
        transition: all 200ms;
    }
     
    .customRadioCheckForm .either input[type=radio]:checked + label + input[type=radio] + label::after {
        left: 0;
        right: 50%;
    }
    .customRadioCheckForm .either input[type=radio] + label + input[type=radio]:checked + label::after {
        left: 50%;
        right: 0;
    }
}

/* テキストエリア拡張 */
textarea.textArea{
padding:6px 3px 6px 3px;
width:90%;
height:150px;
border-width:1px;
border-radius:4px;
margin:2px;
}
@media screen and (max-width:400px){
	textarea.textArea{
	font-size:110%;
	}
}

.circle{
border-radius:100%;
}
.spinnerBlock{
padding:20px; margin: 50px 0;
}
.spinner {
  margin: 0 auto;
  width: 70px;
  text-align: center;
}

.spinner > div {
  width: 18px;
  height: 18px;
  background-color: rgba(0,0,0,0.2);

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
  animation: bouncedelay 1.4s infinite ease-in-out;
  /* Prevent first frame from flickering when animation starts */
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0.0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes bouncedelay {
  0%, 80%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 40% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

/* 公式ユーザーアイコン */
.icon-verified{
cursor:pointer;
cursor:hand;
display:inline-block !important;
content: " ";
width: 15px;
height: 15px;
margin-bottom:2px;
background: url(/assets/img/icon/icon-verified.gif);
background-size: contain;
vertical-align: middle;
background-position: left top;
background-repeat:no-repeat;
}
/* スタッフアイコン */
.icon-staff{
cursor:pointer;
cursor:hand;
display:inline-block !important;
content: " ";
width: 15px;
height: 15px;
margin-bottom:2px;
background: url(/assets/img/icon/icon-staff.gif);
background-size: contain;
vertical-align: middle;
background-position: left top;
background-repeat:no-repeat;
}

/* 公式ユーザー初期案 */
/*
#leftContainer .detailname a:before,
td.avatar a:after,
p#userHeaderName a:before,
p.userName a:before,
p.username a:before{
text-align:center;
content: "公式";
padding: 0 4px;
color: #ffff00;
filter:dropshadow(color=#000000,offX= 0,offY=-1)
dropshadow(color=#000000,offX= 1,offY= 0)
dropshadow(color=#000000,offX= 0,offY= 1)
dropshadow(color=#000000,offX=-1,offY= 0);
text-shadow: black 1px 1px 0px, black -1px 1px 0px,
             black 1px -1px 0px, black -1px -1px 0px;
margin-right: 1px;
font-size: 11px;
line-height: 11px;
}
p#userHeaderName a:before,
#leftContainer .detailname a:before{
font-size:16px;
line-height:16px;
}
p#userHeaderName a:before{
content:"公式\A";
white-space: pre;
}
*/

/* 公式ユーザー第二案 */
/*
#leftContainer .detailname a:before,
td.avatar a:after,
#accountBlock a.username:before,
.creatorList .creatorName:before,
.minProfSection .userName:before,
p.userName a:before,
p.username a:before{
content: " ";
display: inline-block;
width: 29px;
height: 15px;
background: url(../img/icon/iconOfficalUser.gif);
background-size: contain;
vertical-align: middle;
background-position: left top;
background-repeat:no-repeat;
}
#leftContainer .detailname a:before{
width: 47px;
height: 23px;
}
*/
/*
#userHeaderBlock .avatarBox{
vertical-align:top;
}
*/

#alertOffCheck label{
display:inline-block; width:auto;
padding:10px;
}
#alertOffCheck #alert_off{
display:inline;width:auto;
vertical-align: top;
box-shadow:none;
}
.sweet-spacer{
background-color:transparent !important;
}
.sweet-alert h2{
font-size: 24px;
line-height: 26px;
padding-bottom: 15px;
}

.sweet-alert .icon{
margin: 0 auto;
margin-bottom: 20px;
}
