@charset "UTF-8";

.fade.in { opacity: 1 } /* for bootstrap4 compatibility with jquery-fileupload */
.boxC {position: relative;}
.dPhone {display:none;}

.opt-container{display: flex; flex-direction: row;}
.opt0{ }
.opt1{ width: 35%; }
.opt2{ width: 25%; }
.opt3{ width: 33%;}    /* for wrapper */


.center { text-align: center; margin-left:auto; margin-right:auto; position: relative;}
.tableF {margin-bottom: 3px;border-bottom: 1px lightgrey solid;}
.totalSZ {text-align: right;}
.category a:hover, .center a:hover {background-color: #D3E8E6;}
input[name="passInMail"],input[name="mail_by"] { vertical-align: sub;}

.abitem {height: 27px;}
.abitem label {display: inline-block;}
.abitemS{ display: inline-block; width:85%; padding-left:0px; line-height: 1; vertical-align: middle;}
.abitemS label{ width: 99%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0px;}
.abitemS input{ vertical-align: top;}
#aBookEdit{display: none; margin:0 0 0 2px;}
.myAdIcon {display: inline-block; width: auto;}
.aBookNewI, .watermark {	display: inline-block; }

td {vertical-align: top;}
#form{ width:90%; background-color:#F8F8FF;
border-color: #b3b3b3;
border-style: solid;
border-width: thin;
}

.category {
	width: 100%; margin: 0px auto; background-color: #F0F8FF; border: 1px solid #b3b3b3; text-align: left; padding: 5px 2px 2px 10px;
	-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;
	-webkit-box-shadow: #778899 2px 2px 4px; -moz-box-shadow: #778899 3px 3px 6px; box-shadow: #778899 3px 3px 6px;
}

.categoryTitle {background-color: #f9f9f9;  border-top: 1px solid #b3b3b3;  border-bottom: 1px solid #b3b3b3; padding: 2px 2px 2px 5px; margin: 0px -2px 2px -10px;}

#ileft{ width:50%; float:left;  margin:5px; position: relative; }
#iright{width:47%; float:right; margin:5px 0px 5px 0px; }
#ifoot{ position:relative; width:100%; height:1px; background-color:#FFFFFF; clear:both;}
.ddHereWrap { z-index: 2; position: relative; background-color: #f9f9f9; }
.ddHere { z-index: 1; position: absolute; top: 85px; width: 100%; color: #c5c5c5; font-size: 1.2em; text-align: center;}

/* etc */
.plus  {font-family: monospace;}
.input0 {width:55px; display:inline-block; }
.input1 {width:460px; display:inline-block;}
.input1n { width:58%; } /* from       */
.input1e { width:39%; } /* from       */
.input1e2 { width:39%; } /* from       */
.input1s { width:99%; } /* from seved */
.input1n1 { width:45%; } /* to name    */
.input1n2 { width:14%; } /* to keisho  */
.input2 { width:10%; display:inline-block; } /* to e-mail  */

.hint {
	font-size: 80%;
	width: 80%;background-color: #ffffe0; border: 1px solid #c0c0c0; padding: 5px; margin: 5px;
	-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;
	-webkit-box-shadow: #778899 2px 2px 4px; -moz-box-shadow: #778899 3px 3px 6px; box-shadow: #778899 3px 3px 6px;
}
.opt{background-color: #f9f9f9; border-collapse: separate; border: 1px #dcdcdc solid; padding:5px 5px 5px 10px;}

.skinBottn { border:0px; background-color: #ffffff; background-image:url(./image/skinChange.png); background-repeat:no-repeat; width:120px; height: 20px; color:#000000; text-align:center; cursor:pointer; padding-bottom: 2px; text-shadow: 1px 1px 1px #FFF;}
.small { font-size:85%; }

.recipientRec {width: 95%;background-color: #f9f9f9; border: 1px solid #b3b3b3; text-align: left; padding: 2px 2px 2px 10px;}

.pointer{color: #0000FF; text-decoration:none; cursor:pointer;}

/* for address book */
#addBook {width: 88%; border: 0px; text-align: left; padding: 2px 10px 3px 50px;}
#aBookList {padding: 5px 2px 2px 10px;  margin-top:1px; background-color: #FFFFFF; border: 1px solid #b3b3b3; display: none; height:100px;overflow: auto;}
#aBookNew {width: 99%; text-align: left; padding: 4px 2px 4px 4px; margin: 0 0 2px 0; background-color:#f0f8ff;  border: 1px solid #dcdcdc;}
.aBookNewI {width: 160px; height:2em; border: 1px solid #c0c0c0; margin-bottom: 0px;}
.aBookNewK {width:60px; height: 28px;}
.aBookContainer {width: 98%; text-align: left; margin: 3px 0 0 10px; padding: 2px 2px 2px 10px; max-height:150px; _height:150px;}
#addBook .adBtn {color: #00F; text-decoration:none; cursor:pointer; padding: 1px 5px 1px 2px;}
.aBookBtn  {
position: relative; z-index: 1;overflow: visible; padding: 2px 10px 2px 10px; border: 1px solid #AAA; text-decoration: none; text-align: center;font: 90% sans-serif; white-space: nowrap; cursor: pointer; outline: none;color: #191970; text-shadow: white 0 1px 2px;
background: #e5e5e5; background: -moz-linear-gradient(top, #e5e5e5 0%, #f4f4f4 49%, #e5e5e5 50%, #f4f4f4 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5e5e5), color-stop(49%,#f4f4f4), color-stop(50%,#e5e5e5), color-stop(100%,#f4f4f4)); background: -webkit-linear-gradient(top, #e5e5e5 0%,#f4f4f4 49%,#e5e5e5 50%,#f4f4f4 100%); background: -o-linear-gradient(top, #e5e5e5 0%,#f4f4f4 49%,#e5e5e5 50%,#f4f4f4 100%); background: -ms-linear-gradient(top, #e5e5e5 0%,#f4f4f4 49%,#e5e5e5 50%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#f4f4f4',GradientType=0 ); background: linear-gradient(top, #e5e5e5 0%,#f4f4f4 49%,#e5e5e5 50%,#f4f4f4 100%); transition: .3s ease-in-out;-webkit-transition: .3s ease-in-out;  -moz-transition: .3s ease-in-out;  -webkit-box-shadow: 0 1px 4px #ddd, inset 0 1px 0 #fff;-moz-box-shadow: 0 1px 4px #ddd, inset 0 1px 0 #fff;box-shadow: 0 1px 4px #ddd, inset 0 1px 0 #fff;-webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;
}
.aBookBtn:hover {
-webkit-box-shadow: 0 1px 4px #aaa, inset 0 1px 0 white;-moz-box-shadow: 0 1px 4px #aaa, inset 0 1px 0 white;box-shadow: 0 1px 4px #aaa, inset 0 1px 0 white;-webkit-transition-duration:200ms,200ms,200ms;
background: #e0e0e0; background: -moz-linear-gradient(top, #e0e0e0 0%, #e8e8e8 49%, #e0e0e0 50%, #e8e8e8 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e0e0e0), color-stop(49%,#e8e8e8), color-stop(50%,#e0e0e0), color-stop(100%,#e8e8e8)); background: -webkit-linear-gradient(top, #e0e0e0 0%,#e8e8e8 49%,#e0e0e0 50%,#e8e8e8 100%); background: -o-linear-gradient(top, #e0e0e0 0%,#e8e8e8 49%,#e0e0e0 50%,#e8e8e8 100%); background: -ms-linear-gradient(top, #e0e0e0 0%,#e8e8e8 49%,#e0e0e0 50%,#e8e8e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e0e0', endColorstr='#e8e8e8',GradientType=0 ); background: linear-gradient(top, #e0e0e0 0%,#e8e8e8 49%,#e0e0e0 50%,#e8e8e8 100%); border: 1px #aaa solid;color: #191970!important;
}


.btnB {text-decoration: none; border: 1px solid #a3a3a3; background-color: #F2F2F2; margin: 3px; padding: 3px 13px; cursor:pointer;border-radius: 3px;}

/* for upload end page */
table.border    { background-color:#FFFFFF; width: 90%; margin-left:auto; margin-right:auto;
                  border: 1px #999 solid; border-collapse: collapse; text-align: left; vertical-align: middle;padding: 1px;
                  table-layout:fixed;}
.border tr,.border th,.border td
                { border: 1px #999 solid; border-collapse: collapse; text-align: left; vertical-align: middle;padding: 1px 1px 1px 5px;}
.border th      { background-color: #F0F8FF; text-align: center;}
.upTable th {width: 40%; }
.upTable td {
  width: 60%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#sendInfo{
	width:95%; background-color: #f9f9f9; border: 1px solid #b3b3b3; text-align: left;
	margin-left:auto; margin-right:auto;
	border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
	box-shadow: 1px 1px 3px rgba(0,0,0,0.5); -moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

.mailLink a {
	color: white;
	background: #0066cc url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAJklEQVQIW2P4//+/NxMDA8N/JgYGhn+oLDQu7Vk/GP4zMXDQx3IA0To1YWcEwtQAAAAASUVORK5CYII=") repeat-x;
	display: inline-block;
	padding: 2px 20px;
	text-decoration: none;
	font-weight: bold;
	border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
	box-shadow: 1px 1px 3px rgba(0,0,0,0.5); -moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
	margin: 3px;
}

.mailLink a:hover {
	background: #000099 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAJklEQVQIW2P4//+/NxMDA8N/JgYGhn+oLDQu7Vk/GP4zMXDQx3IA0To1YWcEwtQAAAAASUVORK5CYII=") repeat-x;
}

/* urlLink */
.urlLink {
    margin: 20px;
    padding: 1em 0em;
    border: none;
    display: inline-block;
    background-color: #5A7AB3;
    font-size: 114%;
    line-height: 1;
    color: #fff;
    position: relative;
    cursor: pointer;
    width: 50%;
}
.urlLink:hover {
  top: -2px;
    box-shadow: 0 2px 10px rgba(0,0,0,.5);
}
.urlLink:active {
    box-shadow: 0 1px 1px rgba(0,0,0,.5);
    top: 0;
}
.urlLink a {
	color: white;
	text-decoration: none;
	font-weight: bold;
	/*padding: 1em 2em;*/
}
.urlLink a:hover {
    color: #fff;
    background-color: initial;
}
/* override bootstrap css --------------------------------------------------------------  */
.container{
	width: 100%;
}

.table th, .table td{
  /*line-height: 10px;*/
  padding:1px;
}

#upload_files_container {
  table-layout: fixed;
  width: 325px;
}
#upload_files_container .bar{
  display:none;
  width: 15px;
  /*padding-left:2px;
  padding-right:2px;*/
}
#upload_files_container .progress{
  margin-bottom:1px;
}
#upload_files_container .name{
  width: 70%;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  text-overflow: ellipsis;
  /*width: 300px;*/
  white-space: nowrap;
}
#upload_files_container .size{
  padding-left:1px;
  padding-right:1px;
}
#upload_files_container .cancel{
  width: 20px;height: 23px;
  padding-left:2px;
  padding-right:0px;
}
#upload_files_container .btn{
  padding: 2px;
}

/* overlay (pop-up window) --------------------------------------------------------------  */
#xoverlay {
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.6;
    opacity:.10;
    filter: alpha(opacity=30);
}
.xwindow2 {
	display: none;
	position: absolute;
	/*top: 50%;
	left: 50%;*/
	top: 100px;
	left: 50%;
	margin-left: -195px;
	width:390px;
	/*height:400px;*/
	border:1px solid #666;
	/*border-left: 2px solid #d4d0c8;
	border-top: 2px solid #d4d0c8;
	border-right: 2px solid #404040;
	border-bottom: 2px solid #404040;*/
	background-color:white;
	text-align:left;
	padding-top: 20px;
	padding-bottom: 15px;
	z-index:1002;

	-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;
	/*-webkit-box-shadow: #778899 2px 2px 4px; -moz-box-shadow: #778899 3px 3px 6px; box-shadow: #778899 3px 3px 6px;*/
	-webkit-box-shadow: 0 0 90px #000; -moz-box-shadow:0 0 90px 5px #000;  box-shadow: 0 0 90px 5px #000;

}
.xwindow2hdr {
	position:absolute;
	top: 0px;
	left: 0px;
	/*background: #2c4887;*/
	font: bold 13px Arial;
	width:388px;
	height:18px;
	padding-left:2px;
	color:#999;
	text-align: center; vertical-align: middle;

}
.xwindow2close {
        position:absolute;
        top: -15px;
        right: -15px;
        cursor:pointer;
}

/* speed chart  (inside pop-up window) --------------------------------------------------------------  */

.sp_Chart {width: 100px; height: 70px; border: 0px #dcdcdc solid;}
.sp_Chart tr td {background-color: #40e0d0;}
.sbar {background-color: #e9e9e9; height: 60px;}

.sp_tabel {background-color: #fff; width: 90%; margin-bottom: 3px; margin-left:auto; margin-right:auto;
border: 1px #dcdcdc solid;
}
.sp_tabel tr td {font: 12px sans-serif; }
/*.data tr td {background-color: #e9e9e9; font: 12px sans-serif;}*/
#sp_Bar * {
	margin: 0;
	padding: 0;
	font: normal normal normal 100%/1.5em sans-serif;
}

/* override bootstrap css filepostp.cssにある--------------------------------------------------------------  */
.icon-ban-circle{
	background-position: -216px -96px;
	background-image: url("../img/glyphicons-halflings-white.png");
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-top: 1px;
	line-height: 14px;
	vertical-align: text-top;
}
.icon-upload{
	background-position: -144px -24px;
	background-image: url("../img/glyphicons-halflings-white.png");
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-top: 1px;
	line-height: 14px;
	vertical-align: text-top;
}
.icon-plus{
	background-position:-408px -96px;
	background-image: url("../img/glyphicons-halflings-white.png");
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-top: 1px;
	line-height: 14px;
	vertical-align: text-top;
}

.wrap_iframe {height:300px; width:90%; margin: auto; -webkit-overflow-scrolling:touch;border:solid 1px #dcdcdc;}
.style_iframe {
  transform:scale(0.5);
  -moz-transform:scale(0.5);
  -webkit-transform:scale(0.5);
  -o-transform:scale(0.5);
  -ms-transform:scale(0.5);
  transform-origin:0 0;
  -moz-transform-origin:0 0;
  -webkit-transform-origin:0 0;
  -o-transform-origin:0 0;
  -ms-transform-origin:0 0;
  border:solid 1px #dcdcdc;
  margin-bottom:-300px;
  margin-right:-100%;
  width:200%;
  height:600px; 
}

    @media screen and (max-width:480px) {
      .opt > label {width: 40%}
      .ndPhone {display:none;}
      .dPhone {display:initial;}
      .bphone {display: inline-block;}
      .input0 { display: block;width: 85%;}
      .input1 { width: 93%;}
      .input2 { display:none;}
      .input1e { width: 38%;}
      .input1e2 { width: 35%;}
      #ileft { width: auto;}
      .opt-container{ display:block;}
      .opt1{ width: auto; }
      .opt2{ width: auto;}
      .opt3{ width: auto;}
      .myAdIcon {width: 5%;}
      #upload_files_container {width: 100%;}
      /*.xwindow2{width: 310px;}
      .xwindow2close{right: 60px;}*/
      .sp_tabel { width: 95% }
      #addBook {
        width: 99%;
        padding: 2px 0px 3px 5px;
      }
      .aBookNewI { width: 35%;}
      #aBookEdit{visibility: hidden;}
      .urlLink {
          margin: 0px;
          width: 90%;
      }
      .smPhone {font-size:90%;}

      .wrap_iframe {width:360px; height: 300px;}
      .style_iframe {width:470px;}

    } /* /media */