@charset 'UTF-8';
/* ------------------------------
 Button:active
------------------------------ */


/* ------------------------------
 CommonStyle
------------------------------ */

.Clearfix{
  width: 100%;
}
.Clearfix:after{
  display: block;
  clear: both;
  content: '';
}
.sp{
  display: none;
}
.navFixedOff{
  position: absolute !important;
}

/* ------------------------------
 CSS3 Hover Default
------------------------------ */
.smoothHover{
  -webkit-transition: color .3s ease, background .3s ease, opacity .3s ease;
     -moz-transition: color .3s ease, background .3s ease, opacity .3s ease;
      -ms-transition: color .3s ease, background .3s ease, opacity .3s ease;
       -o-transition: color .3s ease, background .3s ease, opacity .3s ease;
          transition: color .3s ease, background .3s ease, opacity .3s ease;
}
.smoothHover:hover,
.smoothHover.hover{
  opacity: .7;
}


/* ------------------------------
 Cursor ZoomIn
------------------------------ */
.ZoomInCursor{
  cursor: zoom-in;
}

/* ------------------------------
 Section
------------------------------ */
.ContentsBg{
  border-radius: 5px;
  background: #f3f2ed;
}

/* ------------------------------
 Title
------------------------------ */
#TitleBox,
.TitleBox{
  position: relative;
  margin: 0 0 20px;
  padding-bottom: 15px;
  background: url(/images/mypage/format/TitleLine.png) 0 31px repeat-x;
}
.TitleBox{
  margin-top: 30px;
}
#TitleBox h1,
.TitleBox h1{
  font-size: 22px;
  font-weight: normal;
  margin-left: 10px;
}
#TitleBox h1 span,
.TitleBox h1 span{
  font-size: 14px;
  margin-left: 1em;
}

/* ------------------------------
 Count
------------------------------ */

.CountFav,
.CountFollower,
.CountView,
.CountDownload,
.CountComment{
  font-size: 10px;
  padding-left: 16px;
  list-style: none;
  color: #666;
}
.CountFav{
  background: url(/images/format/IconFavGreen.png) no-repeat;
}
.CountFollower{
  background: url(/images/format/IconFollowerGreen.png) no-repeat;
}
.CountView{
  background: url(/images/format/IconViewGreen.png) no-repeat;
}
.CountDownload{
  background: url(/images/format/IconDownloadGreen.png) no-repeat;
}
.CountComment{
  background: url(/images/format/IconCommentGreen.png) no-repeat;
}

/* ------------------------------
 Pager
------------------------------ */

.Pager{
  clear: both;
  width: 100%;
  text-align: center;
}
.Pager li{
  display: inline-block;
}
.Pager li{
  display: inline;
  margin-right: 5px;/*margin:0 3px;*/
  vertical-align: middle;
}
.Pager li a,
.Pager li.Current{
  display: inline-block;
}
.Pager li a,
.Pager li.Current{
  line-height: 1.5;
  position: relative;
  display: inline;
  padding: 3px 7px;
  text-decoration: none;
  color: #666;
  border: #ccc 1px solid;
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
  background: #fff;
}
.Pager li a:hover{
  background: #f5f2ef;
}
.Pager li a.Current{
  font-weight: bold;
  color: #fff;
  border: #5e533e 1px solid;
  background: #5e533e;
}
.Pager li.Current{
  font-weight: bold;
  color: #fff;
  border: #5e533e 1px solid;
  background: #5e533e;
}

/* ------------------------------
 Pager
 pearライブラリを使用したページャーのスタイル
------------------------------ */
#Pager{
  clear: both;
  list-style-type: none;
  text-align: center;
  color: #fff;/* test */
}
#Pager a,
#Pager b{
  line-height: 26px;
  display: inline-block;
  min-width: 25px;
  height: 25px;
  margin: 15px 5px 0;
  padding: 5px;
  box-shadow: 0 0 0 1px rgba(150,150,150,.25);
}
#Pager a{
  -webkit-transition: background .4s ease;
     -moz-transition: background .4s ease;
      -ms-transition: background .4s ease;
       -o-transition: background .4s ease;
          transition: background .4s ease;
  text-decoration: none;
  color: #333;
  border-radius: 60px;
  background: #fff;
}
#Pager a:hover{
  background: #f4f8e8;
}
#Pager b{
  color: #fff;
  border-radius: 60px;
  background: #89a222;
}
#Pager u{
  text-decoration: none;
}


#Pager.dashbord{
  clear: both;
  width: 560px;
  padding: 30px 0 0 0;
}

#Pager.dashbord a,
#Pager.dashbord b{
  border: 1px solid #eee;
}
#Pager.dashbord a:hover,
#Pager.dashbord b{
  color: #fff;
  background: #88a30a;
}

#Pager.contentsUi {
  text-align: left;
  padding: 15px 10px;
  background: url(/images/format/BgBeigeNoise.jpg);
  border-radius: 4px;
}
#Pager.contentsUi a,
#Pager.contentsUi b {
  height: 40px;
  line-height: 41px;
  min-width: 40px;
  text-align: center;
  font-size: 14px;
  border-radius: 3px;
  font-weight: bold;
  margin: 0 5px;
  box-shadow: 0 0 0 1px rgba(200,200,200,.25);
}
#Pager.contentsUi > b {
  background: #666;
}
#Pager.contentsUi a[title="first page"],
#Pager.contentsUi a[title="last page"]{
  display: none;
}
#Pager.contentsUi.firstShow a[title="first page"],
#Pager.contentsUi.lastShow a[title="last page"]{
  display: inline-block;
}
#Pager.contentsUi .pageController{
  float: right;
}
#Pager.contentsUi a[title="next page"]{
  color: #fff;
  background: #89a222;
  width: 300px;
  max-width: 300px;
}
#Pager.contentsUi a[title="previous page"] span{
  margin: 0 8px 0 0;
}
#Pager.contentsUi a[title="next page"] span {
  float: right;
  margin: 0 10px 0 0;
};
#Pager.contentsUi a[title="next page"]:hover {
  opacity: .8;
}
#Pager .pageData{
  color: #666;
  font-size: 13px;
  height: 40px;
  display: inline-block;
  line-height: 18px;
  vertical-align: middle;
}

/* ------------------------------
 web font
------------------------------ */
.dataFont_bold{
  font-family: 'proxima_nova_bold' !important;
  font-size: 13px;
}

/* ------------------------------
 thumnails
------------------------------ */
.coverThumbnails{
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}


/* ------------------------------
 Longtext Tip
------------------------------ */
#LongtextTip{
  font-size: 10px;
  line-height: 13px;
  position: absolute;
  z-index: 9999;
  max-width: 350px;
  padding: 5px 10px;
  border: 1px solid #ddd;
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
  background: #fff;

      -ms-border-radius: 3px;
}

/* ------------------------------
 Form
------------------------------ */

input.Text,
textarea{
  font-size: 13px;
  padding: 5px;
  border: 1px solid #ccc;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;

      -ms-border-radius: 4px;
}
.BtnSubmitBox{
  position: relative;
  margin-top: 30px;
  text-align: center;
}

/* ------------------------------
 CheckBox RadioButton
------------------------------ */

/* CheckBox RadioButton  http://www.webopixel.net/javascript/547.html */
.CheckGroup li{
  list-style: none;
}
.CheckGroup input{
  display: none;
}
.CheckGroup label{
  float: left;
  cursor: pointer;
  background: url(/images/mypage/format/IconCheckBg.png) no-repeat;
}
.CheckGroup input:checked + label{
  background: url(/images/mypage/format/IconCheckBgOn.png) no-repeat;
}
/* RadioButton */
.RadioGroup li{
  list-style: none;
}
.RadioGroup input{
  display: none;
}
.RadioGroup label{
  font-size: 14px;
  float: left;
  width: 160px;
  margin-right: 10px;
  margin-left: -1px;
  padding: 12px 0;
  cursor: pointer;
  text-align: center;
  border: solid 1px #ccc;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  background: url(/images/mypage/format/IconRadioBg.png) 10px center no-repeat #fff;

      -ms-border-radius: 4px;
}
.RadioGroup input:checked + label{
  font-weight: bold;
  color: #89a222;
  border: 1px solid #89a222;
  background: url(/images/mypage/format/IconRadioBgOn.png) 10px center no-repeat #fff;
}
/* RadioButton (FolderStates etc.) */
.RadioGroupStatus{
  float: right;
  width: 106px;
  height: 43px;
  list-style: none;
}
.RadioGroupStatus li{
  float: left;
}
.RadioGroupStatus li.Closed{
  float: right;
}
.RadioGroupStatus input{
  display: none;
}
.RadioGroupStatus label{
  font-size: 12px;
  width: 3em;
  padding: 3px 7px;
  cursor: pointer;
  text-align: center;
  border: solid 1px #ccc;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;

      -ms-border-radius: 4px;
}
.RadioGroupStatus input:checked + label{
  color: #fff;
  background: #89a222;
}
.RadioGroupStatus li.Closed input:checked + label{
  background: #666;
}

/* ------------------------------
 Checkbox Switch
------------------------------ */
.SwitchWrap input[type='checkbox']{
  display: none;
}
.SwitchWrap input[type='checkbox']:checked + .Switch{
  background-color: #89a222;
}
.SwitchWrap input[type='checkbox']:checked + .Switch::before{
  display: block;
}
.SwitchWrap input[type='checkbox']:checked + .Switch::after{
  display: none;
}
.SwitchWrap input[type='checkbox']:checked + .Switch .Bullet{
  left: 44px;
}
.SwitchWrap .Switch{
  line-height: 22px;
  position: relative;
  display: inline-block;
  width: 70px;
  height: 22px;
  cursor: pointer;
  -webkit-transition: background-color .3s linear;
     -moz-transition: background-color .3s linear;
      -ms-transition: background-color .3s linear;
       -o-transition: background-color .3s linear;
          transition: background-color .3s linear;
  vertical-align: middle;
  border-radius: 3px;
  background-color: #bbb;
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .1) inset, 0 1px 0 rgb(255,255,255);
          box-shadow: 0 0 3px rgba(0, 0, 0, .1) inset, 0 1px 0 rgb(255,255,255);
}
.SwitchWrap .Switch::before,
.SwitchWrap .Switch::after{
  font-size: 12px;
  font-weight: bold;
  position: absolute;
  top: 0;
  display: none;
  width: 50%;
  padding: 1px 0 0 6px;
  content: 'ON';
  text-align: center;
  color: white;
}
.SwitchWrap .Switch::after{
  right: 0;
  display: block;
  padding: 1px 7px 0 0;
  content: 'OFF';
}
.SwitchWrap .Switch .Bullet{
  position: absolute;
  top: 2px;
  left: 2px;
  display: block;
  width: 18px;
  height: 18px;
  -webkit-transition: left .1s linear;
     -moz-transition: left .1s linear;
      -ms-transition: left .1s linear;
       -o-transition: left .1s linear;
          transition: left .1s linear;
  border-radius: 3px;
  background-color: #fff;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
  background-image: -webkit-linear-gradient(top, #fff, #eee);
  background-image:    -moz-linear-gradient(top, #fff, #eee);
  background-image:     -ms-linear-gradient(top, #fff, #eee);
  background-image:      -o-linear-gradient(top, #fff, #eee);
  background-image:         linear-gradient(top, #fff, #eee);
}

/* ------------------------------
 Button
------------------------------ */

.BtnSubmit{
  font-size: 18px;
  padding: 10px 60px;
  -webkit-transition: All .3s ease;
     -moz-transition: All .3s ease;
      -ms-transition: All .3s ease;
       -o-transition: All .3s ease;
          transition: All .3s ease;
  text-align: center;
  color: #fff;
  border: none;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
  background: #89a222;
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0));
  background-image:    -moz-linear-gradient(top, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0));
  background-image:      -o-linear-gradient(top, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0));
  background-image:     -ms-linear-gradient(top, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0));
  background-image:         linear-gradient(top, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0));

      -ms-border-radius: 5px;
}
.BtnSubmit:hover{
  cursor: pointer;
  background-color: #739101;
}
.BtnSubmitSmall{
  font-size: 12px;
  margin-left: 27px;
  padding: 6px 22px;
  -webkit-transition: All .3s ease;
     -moz-transition: All .3s ease;
      -ms-transition: All .3s ease;
       -o-transition: All .3s ease;
          transition: All .3s ease;
  text-align: center;
  color: #fff;
  border: none;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
  background: #89a222;
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0));
  background-image:    -moz-linear-gradient(top, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0));
  background-image:      -o-linear-gradient(top, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0));
  background-image:     -ms-linear-gradient(top, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0));
  background-image:         linear-gradient(top, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0));

      -ms-border-radius: 5px;
}
.BtnSubmitSmall:hover{
  cursor: pointer;
  background-color: #739101;
}
.BtnSmall{
  padding: 4px 10px;
  text-decoration: none;
  color: #5e533e;
  border: 1px solid #bbb;
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
  background: #fff;
  background:    -moz-linear-gradient(top, #fff 0%, #f0eee1 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(100%, #f0eee1)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #fff 0%, #f0eee1 100%); /* Chrome10+,Safari5.1+ */
  background:         linear-gradient(top, #fff 0%, #f0eee1 100%); /* W3C */

      -ms-border-radius: 3px;
}
.BtnSmall:hover{
  background: #f0eee1;
  background:    -moz-linear-gradient(top, #fff 0%, #f0eee1 50%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(50%, #f0eee1)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #fff 0%, #f0eee1 50%); /* Chrome10+,Safari5.1+ */
  background:         linear-gradient(top, #fff 0%, #f0eee1 50%); /* W3C */
}
.Over{
  -webkit-transition: All .4s ease;
     -moz-transition: All .4s ease;
      -ms-transition: All .4s ease;
       -o-transition: All .4s ease;
          transition: All .4s ease;
}
.Over:hover{
  background-color: #f4f8e8;
}
.Radius{
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;

      -ms-border-radius: 3px;
}

.BtnWhite,
.BtnGray{
  line-height: 1;
  padding: 8px 10px 8px 0;
  -webkit-transition: All .3s ease;
     -moz-transition: All .3s ease;
      -ms-transition: All .3s ease;
       -o-transition: All .3s ease;
          transition: All .3s ease;
  color: #333;
  border: 1px solid #ccc;
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;

      -ms-border-radius: 3px;
}

.BtnWhite{
  background: #fff;
  background-image: -webkit-linear-gradient(top, rgba(000, 000, 000, 0), rgba(000, 000, 000, .05));
  background-image:    -moz-linear-gradient(top, rgba(000, 000, 000, 0), rgba(000, 000, 000, .05));
  background-image:      -o-linear-gradient(top, rgba(000, 000, 000, 0), rgba(000, 000, 000, .05));
  background-image:     -ms-linear-gradient(top, rgba(000, 000, 000, 0), rgba(000, 000, 000, .05));
  background-image:         linear-gradient(top, rgba(000, 000, 000, 0), rgba(000, 000, 000, .05));
}
.BtnGray{
  background: #eee;
  background-image: -webkit-linear-gradient(top, rgba(000, 000, 000, 0), rgba(000, 000, 000, .05));
  background-image:    -moz-linear-gradient(top, rgba(000, 000, 000, 0), rgba(000, 000, 000, .05));
  background-image:      -o-linear-gradient(top, rgba(000, 000, 000, 0), rgba(000, 000, 000, .05));
  background-image:     -ms-linear-gradient(top, rgba(000, 000, 000, 0), rgba(000, 000, 000, .05));
  background-image:         linear-gradient(top, rgba(000, 000, 000, 0), rgba(000, 000, 000, .05));
}
/*.BtnWhite:hover{
  background:#f5f5f5;
}*/
.BtnGray:hover{
  background: #e5e5e5;
}

/* ------------------------------
 Signup, Login Button
------------------------------ */
#CbHeader #BtnSignup,
#CbHeader #BtnLogin{
  font-size: 12px;
  font-weight: bold;
  line-height: 25px;
  display: block;
  float: left;
  height: 24px;
  margin: 8px 0 0 10px;
  padding: 0 15px;
  -webkit-transition: All .3s ease;
     -moz-transition: All .3s ease;
      -ms-transition: All .3s ease;
       -o-transition: All .3s ease;
          transition: All .3s ease;
  letter-spacing: 1px;
  color: #fff;
  border-radius: 3px;
}
#CbHeader #BtnSignup{
  background: #7b9116;
}
#CbHeader #BtnLogin{
  background: #888;
}
#CbHeader #BtnSignup:hover{
  background: #9aa92f;
}
#CbHeader #BtnLogin:hover{
  background: #aaa;
}


/* ------------------------------
 FAV Button
------------------------------ */
ul.FavBox{
  position: relative;
  list-style: none;
}
ul.FavBox li > a{
  font-size: 15px;
  position: relative;
  display: block;
  width: 280px;
  margin: 0 auto;
  padding: 10px 0 8px;
  text-align: center;
  letter-spacing: 2px;
  color: #888;
  border: 2px solid #ddd;
  border-radius: 40px;
  background: #fff;
  background-image: -webkit-linear-gradient(top, rgba(000, 000, 000, 0), rgba(000, 000, 000, .05));
  background-image:    -moz-linear-gradient(top, rgba(000, 000, 000, 0), rgba(000, 000, 000, .05));
  background-image:      -o-linear-gradient(top, rgba(000, 000, 000, 0), rgba(000, 000, 000, .05));
  background-image:     -ms-linear-gradient(top, rgba(000, 000, 000, 0), rgba(000, 000, 000, .05));
  background-image:         linear-gradient(top, rgba(000, 000, 000, 0), rgba(000, 000, 000, .05));
}
ul.FavBox li > a:hover{
  text-decoration: none;
  background-color: #fff9f9;
}
ul.FavBox li > a .cbIcon{
  font-size: 20px;
  position: absolute;
  top: 7px;
  left: 100px;
  color: #f18ca1;
}
ul.FavBox li.StatusFaved > a .cbIcon{
  color: #FFF;
}
ul.FavBox li.StatusFav a:hover{
  -webkit-transition: All .3s ease;
     -moz-transition: All .3s ease;
      -ms-transition: All .3s ease;
       -o-transition: All .3s ease;
          transition: All .3s ease;
}
ul.FavBox li.StatusFaved > a{
  background: #f18ca1;
  color: #FFF;
}
ul.FavBox li.StatusFaved .CancelBalloon{
  position: absolute;
  top: -63px;
  left: 50%;
  display: none;
  width: 150px;
  height: 63px;
  margin: 0 0 0 -75px;
  background: url(/images/format/FavCancelBalloon.png) no-repeat;
}
ul.FavBox li.StatusFaved .CancelBalloon a.FavCancel{
  font-size: 12px;
  font-weight: bold;
  line-height: 26px;
  display: block;
  width: 115px;
  height: 26px;
  margin: 13px 15px;
  padding: 0;
  text-align: center;
  color: #666;
}
ul.FavBox li.FavCounter{
  font-size: 10px;
  font-weight: bold;
  line-height: 18px;
  position: absolute;
  top: 13px;
  right: 10px;
  display: none;
  width: 30px;
  height: 16px;
  text-align: center;
  color: #666;
  background: #ddd;
}

/* width30 */
ul.FavBox30{
  position: relative;
  width: 30px;
  list-style: none;
}
ul.FavBox30 li > a{
  font-size: 0;
  display: block;
  width: 26px;
  height: 26px;
  margin: 0 auto;
  text-align: center;
  letter-spacing: 2px;
  color: #666;
  border: 2px solid #ddd;
  border-radius: 40px;
  background: #fff;
  background-image: -webkit-linear-gradient(top, rgba(000, 000, 000, 0), rgba(000, 000, 000, .05));
  background-image:    -moz-linear-gradient(top, rgba(000, 000, 000, 0), rgba(000, 000, 000, .05));
  background-image:      -o-linear-gradient(top, rgba(000, 000, 000, 0), rgba(000, 000, 000, .05));
  background-image:     -ms-linear-gradient(top, rgba(000, 000, 000, 0), rgba(000, 000, 000, .05));
  background-image:         linear-gradient(top, rgba(000, 000, 000, 0), rgba(000, 000, 000, .05));
}
ul.FavBox30 li > a:hover{
  text-decoration: none;
  background-color: #fff9f9;
}
ul.FavBox30 li > a .cbIcon{
  font-size: 17px;
  margin: 5px 0 0 1px;
  color: #f18ca1;
}
ul.FavBox30 li.StatusFaved > a .cbIcon{
  color: #FFF;
}
ul.FavBox30 li.StatusFav a:hover{
  -webkit-transition: All .3s ease;
     -moz-transition: All .3s ease;
      -ms-transition: All .3s ease;
       -o-transition: All .3s ease;
          transition: All .3s ease;
}
ul.FavBox30 li.StatusFaved > a{
  background: #f18ca1;
  color: #FFF;
}

/* ------------------------------
 Follow Button
------------------------------ */
ul.FollowBox,
ul#FollowBox,
ul.FollowBox100{
  float: left;
  list-style: none;
}
.FollowerOthersParent .StatusFollow a,
ul.FollowBox li a,
ul#FollowBox li a{
  line-height: 200%;
  display: block;
  overflow: hidden;
  width: 70px;
  height: 0;
  padding-top: 23px;
}
.FollowerOthersParent .StatusFollow a,
ul.FollowBox li.StatusFollow a,
ul#FollowBox li.StatusFollow a{
  background: url(/images/format/BtnStatusFollow.png) no-repeat;
}
.FollowerOthersParent .StatusFollow a:hover,
ul.FollowBox li.StatusFollow a:hover,
ul#FollowBox li.StatusFollow a:hover{
  background: url(/images/format/BtnStatusFollow_on.png) no-repeat;
}
.FollowerOthersParent .StatusFollowing a,
ul.FollowBox li.StatusFollowing a,
ul#FollowBox li.StatusFollowing a,
.FollowerOthersParent .StatusFollowing.disable a:hover,
ul.FollowBox li.StatusFollowing.disable a:hover,
ul#FollowBox li.StatusFollowing.disable a:hover{
  background: url(/images/format/BtnStatusFollowing.png) no-repeat;
}
.FollowerOthersParent .StatusFollowing a:hover,
ul.FollowBox li.StatusFollowing a:hover,
ul#FollowBox li.StatusFollowing a:hover{
  background: url(/images/format/BtnStatusUnfollow.png) no-repeat;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5){
  .FollowerOthersParent .StatusFollow a,
  ul.FollowBox li.StatusFollow a,
  ul#FollowBox li.StatusFollow a,
  .FollowerOthersParent .StatusFollow a:hover,
  ul.FollowBox li.StatusFollow a:hover,
  ul#FollowBox li.StatusFollow a:hover,
  .FollowerOthersParent .StatusFollowing a,
  ul.FollowBox li.StatusFollowing a,
  ul#FollowBox li.StatusFollowing a,
  .FollowerOthersParent .StatusFollowing.disable a:hover,
  ul.FollowBox li.StatusFollowing.disable a:hover,
  ul#FollowBox li.StatusFollowing.disable a:hover,
  .FollowerOthersParent .StatusFollowing a:hover,
  ul.FollowBox li.StatusFollowing a:hover,
  ul#FollowBox li.StatusFollowing a:hover{
    background-image: url(/images/format/BtnStatusFollow@2x.png);
    background-size: 70px 92px;
  }
  .FollowerOthersParent .StatusFollow a:hover,
  ul.FollowBox li.StatusFollow a:hover,
  ul#FollowBox li.StatusFollow a:hover{
    background-position: 0 -23px;
  }
  .FollowerOthersParent .StatusFollowing a,
  ul.FollowBox li.StatusFollowing a,
  ul#FollowBox li.StatusFollowing a,
  .FollowerOthersParent .StatusFollowing.disable a:hover,
  ul.FollowBox li.StatusFollowing.disable a:hover,
  ul#FollowBox li.StatusFollowing.disable a:hover{
    background-position: 0 -46px;
  }
  .FollowerOthersParent .StatusFollowing a:hover,
  ul.FollowBox li.StatusFollowing a:hover,
  ul#FollowBox li.StatusFollowing a:hover{
    background-position: 0 -69px;
  }
}

.FollowerOthersParent .StatusBlocked a,
ul.FollowBox li.StatusBlocked a,
ul#FollowBox li.StatusBlocked a{
  background: url(/images/mypage/connect/BtnStatusBlock.png) no-repeat;
}
.FollowerOthersParent .StatusBlocked a:hover,
ul.FollowBox li.StatusBlocked a:hover,
ul#FollowBox li.StatusBlocked a:hover{
  background: url(/images/mypage/connect/BtnStatusUnblock.png) no-repeat;
}
ul.FollowBox li.StatusFollowing a.loading,
ul.FollowBox li.StatusFollow a.loading{
  position: relative;
  background: url(/images/format/BtnFollowBg.png) no-repeat !important;
}

/* width80 */
ul.FollowBox80 li a{
  line-height: 200%;
  display: block;
  overflow: hidden;
  width: 80px;
  height: 0;
  padding-top: 23px;
}
ul.FollowBox80 li.StatusFollow a{
  background: url(/images/format/BtnStatusFollow80.png) no-repeat;
}

ul.FollowBox80 li.StatusFollow a:hover{
  background: url(/images/format/BtnStatusFollow_on80.png) no-repeat;
}
ul.FollowBox80 li.StatusFollowing a,
ul.FollowBox80 li.StatusFollowing.disable a:hover{
  background: url(/images/format/BtnStatusFollowing80.png) no-repeat;
}
ul.FollowBox80 li.StatusFollowing a:hover{
  background: url(/images/format/BtnStatusUnfollow80.png) no-repeat;
}
ul.FollowBox80 li.StatusFollowing a.loading,
ul.FollowBox80 li.StatusFollow a.loading{
  position: relative;
  background: url(/images/format/BtnFollowBg80.png) no-repeat !important;
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5){
  ul.FollowBox80 li.StatusFollow a,
  ul.FollowBox80 li.StatusFollow a:hover,
  ul.FollowBox80 li.StatusFollowing a,
  ul.FollowBox80 li.StatusFollowing.disable a:hover,
  ul.FollowBox80 li.StatusFollowing a:hover{
    background-image: url(/images/format/BtnStatusFollow80@2x.png);
    background-size: 80px 92px;
  }
  ul.FollowBox80 li.StatusFollow a:hover{
    background-position: 0 -23px;
  }
  ul.FollowBox80 li.StatusFollowing a,
  ul.FollowBox80 li.StatusFollowing.disable a:hover{
    background-position: 0 -46px;
  }
  ul.FollowBox80 li.StatusFollowing a:hover{
    background-position: 0 -69px;
  }
}


/* Width100 */
ul.FollowBox100 li a{
  line-height: 200%;
  display: block;
  overflow: hidden;
  width: 100px;
  height: 0;
  padding-top: 27px;
}
ul.FollowBox100 li.StatusFollow a{
  background: url(/images/format/BtnStatusFollow100.png) no-repeat;
}
ul.FollowBox100 li.StatusFollow a:hover{
  background: url(/images/format/BtnStatusFollow_on100.png) no-repeat;
}
ul.FollowBox100 li.StatusFollowing a,
ul.FollowBox100 li.StatusFollowing.disable a:hover{
  background: url(/images/format/BtnStatusFollowing100.png) no-repeat;
}
ul.FollowBox100 li.StatusFollowing a:hover{
  background: url(/images/format/BtnStatusUnfollow100.png) no-repeat;
}
ul.FollowBox100 li.StatusFollowing a.loading,
ul.FollowBox100 li.StatusFollow a.loading{
  position: relative;
  background: url(/images/format/BtnFollowBg100.png) no-repeat !important;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5){
  ul.FollowBox100 li.StatusFollow a,
  ul.FollowBox100 li.StatusFollow a:hover,
  ul.FollowBox100 li.StatusFollowing a,
  ul.FollowBox100 li.StatusFollowing.disable a:hover,
  ul.FollowBox100 li.StatusFollowing a:hover{
    background-image: url(/images/format/BtnStatusFollow100@2x.png);
    background-size: 100px 108px;
  }
  ul.FollowBox100 li.StatusFollow a:hover{
    background-position: 0 -27px;
  }
  ul.FollowBox100 li.StatusFollowing a,
  ul.FollowBox100 li.StatusFollowing.disable a:hover{
    background-position: 0 -54px;
  }
  ul.FollowBox100 li.StatusFollowing a:hover{
    background-position: 0 -81px;
  }
}


/* Width174 */
ul.FollowBox174 li a{
  line-height: 200%;
  display: block;
  overflow: hidden;
  width: 174px;
  height: 0;
  padding-top: 23px;
}
ul.FollowBox174 li.StatusFollow a{
  background: url(/images/format/BtnStatusFollow174.png) no-repeat;
}
ul.FollowBox174 li.StatusFollow a:hover{
  background: url(/images/format/BtnStatusFollow_on174.png) no-repeat;
}
ul.FollowBox174 li.StatusFollowing a,
ul.FollowBox174 li.StatusFollowing.disable a:hover{
  background: url(/images/format/BtnStatusFollowing174.png) no-repeat;
}
ul.FollowBox174 li.StatusFollowing a:hover{
  background: url(/images/format/BtnStatusUnfollow174.png) no-repeat;
}
ul.FollowBox174 li.StatusFollowing a.loading,
ul.FollowBox174 li.StatusFollow a.loading{
  position: relative;
  background: url(/images/format/BtnFollowBg174.png) no-repeat !important;
}

/* ------------------------------
 Delete Button
------------------------------ */
ul#DeleteBox{
  list-style: none;
}
ul#DeleteBox{
  position: relative;
  width: 111px;
  margin: 15px 2px 0 1px;
}
ul#DeleteBox li{
  position: absolute;
  width: 31px;
  margin: 0 3px;
}
ul#DeleteBox li.BtnDelete{
  left: 0;
}
ul#DeleteBox li.BtnBlock{
  right: 37px;
}
ul#DeleteBox li.BtnNotice{
  right: 0;
}
ul#DeleteBox li.BtnDelete a,
ul#DeleteBox li.BtnBlock a,
ul#DeleteBox li.BtnNotice a{
  line-height: 1.6;
  display: block;
  overflow: hidden;
  width: 31px;
  height: 0;
  padding-top: 23px;
}
ul#DeleteBox li.BtnDelete a{
  background: url(/images/mypage/message/BtnMessageDelete_off.png) no-repeat;
}
ul#DeleteBox li.BtnBlock a{
  background: url(/images/mypage/message/BtnMessageBlock_off.png) no-repeat;
}
ul#DeleteBox li.BtnNotice a{
  background: url(/images/mypage/message/BtnMessageNotice_off.png) no-repeat;
}
ul#DeleteBox li.BtnDelete a:hover{
  background: url(/images/mypage/message/BtnMessageDelete_on.png) no-repeat;
}
ul#DeleteBox li.BtnBlock.Blocked a,
ul#DeleteBox li.BtnBlock a:hover{
  background: url(/images/mypage/message/BtnMessageBlock_on.png) no-repeat;
}
ul#DeleteBox li.BtnNotice a:hover{
  background: url(/images/mypage/message/BtnMessageNotice_on.png) no-repeat;
}
ul#DeleteBox .tipr_container_bottom{
  color: #d90000;
}

/* ------------------------------
 Edit Button, Share Button
------------------------------ */
.ShareMenu li{
  position: relative;
}
.EditMenu button,
.ShareMenu button{
  font-size: 11px;
  width: 120px;
  height: 26px;
  text-align: left;
}
.EditMenu button{
  padding: 7px 0 8px 0;
}
.ShareMenu button{
  padding: 4px 0 8px 0;
}
.EditMenu button span{
  padding-left: 23px;
}
.ShareMenu button span{
  display: block;
  padding: 3px 0 3px 40px;
}
.EditMenu .BtnWorksEdit span{
  background: url(/images/mypage/portfolio/IconEditGreen.png) 5px no-repeat;
}
.EditMenu .BtnThumbEdit span{
  background: url(/images/mypage/portfolio/IconThumbGreen.png) 5px no-repeat;
}
.EditMenu .BtnDelete span{
  background: url(/images/mypage/portfolio/IconDeleteB7.png) 5px no-repeat;
}

.ShareMenu button span{
  padding: 3px 0 3px 30px;
}

.ShareMenu button span.cbIcon{
  padding:0;
  left: 8px;
  font-size: 16px;

}

.ShareMenu .snsIcon{
	position:absolute;
}
.ShareMenu .snsIcon.Facebook{
  color: #3b579d;
}
.ShareMenu .snsIcon.Twitter{
  color: #55acee;
}
.ShareMenu .snsIcon.Google{
  color: #0b6af3;
}
.ShareMenu .snsIcon.Tumblr{
  color: #35465c;
}
.ShareMenu .snsIcon.Instagram{
  color: #936A4E;
}
.ShareMenu .snsIcon.Pinterest{
  color: #BC0A1E;
}

/*公式Pinterestボタンを透過させるため*/
.ShareMenu li:hover .BtnPinterest{
  background-color: #f4f8e8;
}
.ShareMenu .BtnPinterest + a,
.ShareMenu .BtnPinterest + span{
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
       opacity: 0 !important;

      filter: alpha(opacity=0) !important;
  -ms-filter: 'alpha(opacity=0)' !important;
  -moz-opacity: 0 !important;
  -khtml-opacity: 0 !important;
}

/* ------------------------------
 Portfolio Button
------------------------------ */
.portfolioBtn{
  line-height: 200%;
  display: block;
  float: left;
  overflow: hidden;
  width: 84px;
  height: 0;
  padding-top: 23px;
  background: url(/images/format/BtnPortfolio.png) no-repeat;
}
.portfolioBtn:hover{
  -webkit-transition: All .3s ease;
     -moz-transition: All .3s ease;
      -ms-transition: All .3s ease;
       -o-transition: All .3s ease;
          transition: All .3s ease;
  background: url(/images/format/BtnPortfolio_on.png) no-repeat;
}

/* ------------------------------
 Comment Post Button
------------------------------ */
.commentBtn{
  display: block;
  width: 50px;
  height: 50px;
  padding: 0;
}
.commentBtn span{
  font-size: 13px;
  font-weight: bold;
  line-height: 38px;
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  letter-spacing: 2px;
  background-image: url(/images/format/ArrowCommentPost.png);
  background-repeat: no-repeat;
  background-position: center 33px;
}

/* ------------------------------
 Comment FAV Button
------------------------------ */
.commentFavBtn{
  font-size: 12px;
  line-height: .6;
  position: relative;
  display: block;
  float: left;
  width: 48px;
  height: 48px;
  padding: 0;
  text-align: center;
  color: #888;
  border: 1px solid #ccc;
  border-radius: 3px;
}
.commentFavBtn:hover{
  -webkit-transition: All .3s ease;
     -moz-transition: All .3s ease;
      -ms-transition: All .3s ease;
       -o-transition: All .3s ease;
          transition: All .3s ease;
  /*background:url(/images/format/BtnStatusSquareFav.png) no-repeat;*/
  background-color: #fff9f9;
}
.commentFavBtn .cbIcon{
  font-size: 20px;
  margin-top: 5px;
  color: #f18ca1;
}

/* ------------------------------
 Comment Delete Button
------------------------------ */
.commentDeleteBtn{
  display: block;
  overflow: hidden;
  width: 19px;
  height: 19px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(150,150,150,.25);
}
.commentDeleteBtn .cbIcon{
  font-size: 10px;
  margin: 5px;
  color: #999;
}
.commentDeleteBtn:hover .cbIcon{
  -webkit-transition: All .3s ease;
     -moz-transition: All .3s ease;
      -ms-transition: All .3s ease;
       -o-transition: All .3s ease;
          transition: All .3s ease;
  color: #525252;
}

/* ------------------------------
 Trim Window Button
------------------------------ */
.trimBtn{
  line-height: 200%;
  display: block;
  overflow: hidden;
  width: 30px;
  height: 30px;
  -webkit-transition: All .3s ease;
     -moz-transition: All .3s ease;
      -ms-transition: All .3s ease;
       -o-transition: All .3s ease;
          transition: All .3s ease;
  text-align: center;
  color: #ccc;
}
.trimBtn .cbIcon{
  font-size: 30px;
}
.trimBtn:hover{
  color: #fff;
}


/* ------------------------------
 Text
------------------------------ */

.Option{
  font-size: 10px;
  color: #888;
}
.ErrorColor{
  background-color: #ffe5ce !important;
}
.ErrorText{
  clear: both;
  padding-top: 10px;
  text-align: left;
}
.ErrorText span{
  font-size: 12px;
  font-weight: bold;
  padding-left: 20px;
  color: #e66200;
  background: url(/images/format/IconError.png) no-repeat;
}

/* ------------------------------
 Margin
------------------------------ */
.margin0{
  margin: 0 !important;
}

.mb0{
  margin-bottom: 0 !important;
}
.mb10{
  margin-bottom: 10px !important;
}
.mb20{
  margin-bottom: 20px !important;
}

.mt0{
  margin-top: 0 !important;
}
.mt10{
  margin-top: 10px !important;
}
.mt20{
  margin-top: 20px !important;
}

/* ------------------------------
 CB アラート
 警告メッセージ等で利用
------------------------------ */
.cbAlertCover{
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  -webkit-transition: opacity .3s ease;
     -moz-transition: opacity .3s ease;
      -ms-transition: opacity .3s ease;
       -o-transition: opacity .3s ease;
          transition: opacity .3s ease;
  opacity: 0;
  background: #000;
}
.cbAlert{
  position: fixed;
  z-index: 1000;
  top: 50%;
  left: 50%;
  width: 370px;
  height: 130px;
  margin: -65px 0 0 -185px;
  -webkit-transition: opacity .3s ease;
     -moz-transition: opacity .3s ease;
      -ms-transition: opacity .3s ease;
       -o-transition: opacity .3s ease;
          transition: opacity .3s ease;
  opacity: 0;
  border-radius: 5px;
  background: #fff;
}
.cbAlert .Close{
  font-size: 20px;
  line-height: 17px;
  position: absolute;
  top: 5px;
  right: 5px;
  display: block;
  width: 20px;
  height: 20px;
  cursor: pointer;
  text-align: center;
  color: #ccc;
}
.cbAlert .Close:hover{
  text-decoration: none;
  opacity: .7;
}
.cbAlert .Text{
  line-height: 30px;
  margin: 35px 0;
  text-align: center;
  color: #777;
}


/* ------------------------------
 ページトップボタン
------------------------------ */
#BtnPageTop{
  line-height: 50px;
  position: fixed;
  z-index: 700;
  right: 20px;
  bottom: -50px;
  display: block;
  width: 50px;
  height: 40px;
  padding: 10px 0 0 0;
  -webkit-transition: opacity .3s ease, bottom .3s ease;
     -moz-transition: opacity .3s ease, bottom .3s ease;
      -ms-transition: opacity .3s ease, bottom .3s ease;
       -o-transition: opacity .3s ease, bottom .3s ease;
          transition: opacity .3s ease, bottom .3s ease;
  text-align: center;
  opacity: 0;
  color: #fff;
  border-radius: 25px;
  background: url(/images/login/BgLoginBoxBlack.png);
  box-shadow: 0 0 10px rgba(255,255,255,.5);
}
.noScroll #BtnPageTop{
  right: 30px;
}
#BtnPageTop:hover{
  text-decoration: none;
  opacity: .7 !important;
}
#BtnPageTop .cbIcon{
  font-size: 30px;
}


/* ------------------------------
 推奨ブラウザモーダル
------------------------------ */
#ModalRecommendBrowserCover{
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
       opacity: .7;
  background: #fff;

      filter: alpha(opacity=70);        /* ie lt 8 */
  -ms-filter: 'alpha(opacity=70)';  /* ie 8 */
  -moz-opacity: .7;                 /* FF lt 1.5, Netscape */
  -khtml-opacity: .7;              /* Safari 1.x */
}
#ModalRecommendBrowser{
  position: fixed;
  z-index: 1000;
  top: 50%;
  left: 50%;
  width: 560px;
  height: 430px;
  margin: -215px 0 0 -280px;
  border: 1px solid #ccc;
  background: #34495e;
}
#ModalRecommendBrowser h3{
  font-size: 26px;
  margin: 45px 0 30px 0;
  text-align: center;
  color: #fff;
}
#ModalRecommendBrowser p{
  font-size: 12px;
  line-height: 30px;
  text-align: center;
  color: #fff;
}
#recommendBrowserList{
  margin: 20px 0 0 0;
  list-style-type: none;
  text-align: center;
}
#recommendBrowserList li{
  display: inline-block;
  width: 70px;
  height: 100px;
  margin: 0 10px;
  vertical-align: top;
}
#recommendBrowserList li a{
  color: #fff;
}
#recommendBrowserList li a img{
  margin: 0 0 5px 0;
}
#recommendInfo{
  display: block;
  width: 110px;
  margin: 30px auto 0;
  padding: 5px 30px 4px;
  text-align: center;
  color: #fff;
  border: 1px solid #fff;
}
#ModalRecommendBrowser .Close{
  font-size: 20px;
  line-height: 17px;
  position: absolute;
  top: 5px;
  right: 5px;
  display: block;
  width: 20px;
  height: 20px;
  cursor: pointer;
  text-align: center;
  color: #ccc;
}
#cookieInput{
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 30px;
  padding: 10px 0 0 0;
  text-align: center;
  background: #e9e8e3;
}
#cookieInput input{
  display: inline-block;
}
#cookieInput label{
  display: inline-block;
  color: #34495e;
}



/* ------------------------------
 広告
------------------------------ */
#mypageContentAd{
  margin: 10px 0;
  text-align: center;
  height: 90px;
}
#headerAdSp,
#mypageHeaderAdSp{
  display: none;
  overflow: hidden;
  margin: 0 0 18px 0;
  text-align: center;
}
#DetailWrapper #headerAdSp{
  margin: 30px 0 -60px 0;
}
#contentAd,
#contentAdTablet{
  overflow: hidden;
  height: 250px;
  margin: 0 0 20px;
}
#contentAdTablet{
  display: none;
}
#contentAdTablet iframe{
  height: 250px;
}
#footerAdSp{
  display: none;
}
#footerAd,
#footerAdSp{
  text-align: center;
}
#headerAdSp > div,
#footerAd > div,
#footerAdSp > div{
  display: inline-block;
}
#mypageHeaderAdSp > div{
  display: inline-block;
}



/* ------------------------------
 CB CSSローディング
 検索読み込みなどで利用
------------------------------ */
#ContentsWrap{
  position: relative;
  clear: both;
  -webkit-transition: opacity .3s ease;
     -moz-transition: opacity .3s ease;
      -ms-transition: opacity .3s ease;
       -o-transition: opacity .3s ease;
          transition: opacity .3s ease;
  opacity: 1;
}
.cbLoading{
  position: fixed;
  z-index: 500;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  margin: -17px 0 0 -17px;
  padding: 10px;
  -webkit-transition: opacity .3s ease;
     -moz-transition: opacity .3s ease;
      -ms-transition: opacity .3s ease;
       -o-transition: opacity .3s ease;
          transition: opacity .3s ease;
  opacity: 1;
  border-radius: 40px;
  background: #fff;
  box-shadow: 0 0 3px rgba(0,0,0,.2);
}
.cbLoading:after{
  content: ' ';
  position: relative;
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-block;
  overflow: hidden;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  -webkit-animation: three-quarters-loader 1250ms infinite linear;
     -moz-animation: three-quarters-loader 1250ms infinite linear;
          animation: three-quarters-loader 1250ms infinite linear;
  border: 2px solid #77941B;
  border-right-color: transparent;
  border-radius: 11px;
}

.cbLoadingSpinner{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  -webkit-transition: opacity .3s ease;
     -moz-transition: opacity .3s ease;
      -ms-transition: opacity .3s ease;
       -o-transition: opacity .3s ease;
          transition: opacity .3s ease;
  opacity: 1;
}
.cbLoadingSpinnerContainer.container1 > div,
.cbLoadingSpinnerContainer.container2 > div,
.cbLoadingSpinnerContainer.container3 > div{
  position: absolute;
  width: 6px;
  height: 6px;
  -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
          animation: bouncedelay 1.2s infinite ease-in-out;
  border-radius: 100%;
  background-color: #777;

  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.cbLoadingSpinner .cbLoadingSpinnerContainer{
  position: absolute;
  width: 100%;
  height: 100%;
}
.cbLoadingSpinnerContainer.container2{
  -webkit-transform: rotateZ(45deg);
          transform: rotateZ(45deg);
}
.cbLoadingSpinnerContainer.container3{
  -webkit-transform: rotateZ(90deg);
          transform: rotateZ(90deg);
}
.cbLoadingSpinnerContainer .circle1{
  top: 0;
  left: 0;
}
.cbLoadingSpinnerContainer .circle2{
  top: 0;
  right: 0;
}
.cbLoadingSpinnerContainer .circle3{
  right: 0;
  bottom: 0;
}
.cbLoadingSpinnerContainer .circle4{
  bottom: 0;
  left: 0;
}
.cbLoadingSpinnerContainer.container2 .circle1{
  -webkit-animation-delay: -1.1s;
          animation-delay: -1.1s;
}
.cbLoadingSpinnerContainer.container3 .circle1{
  -webkit-animation-delay: -1.0s;
          animation-delay: -1.0s;
}
.cbLoadingSpinnerContainer.container1 .circle2{
  -webkit-animation-delay: -.9s;
          animation-delay: -.9s;
}
.cbLoadingSpinnerContainer.container2 .circle2{
  -webkit-animation-delay: -.8s;
          animation-delay: -.8s;
}
.cbLoadingSpinnerContainer.container3 .circle2{
  -webkit-animation-delay: -.7s;
          animation-delay: -.7s;
}
.cbLoadingSpinnerContainer.container1 .circle3{
  -webkit-animation-delay: -.6s;
          animation-delay: -.6s;
}
.cbLoadingSpinnerContainer.container2 .circle3{
  -webkit-animation-delay: -.5s;
          animation-delay: -.5s;
}
.cbLoadingSpinnerContainer.container3 .circle3{
  -webkit-animation-delay: -.4s;
          animation-delay: -.4s;
}
.cbLoadingSpinnerContainer.container1 .circle4{
  -webkit-animation-delay: -.3s;
          animation-delay: -.3s;
}
.cbLoadingSpinnerContainer.container2 .circle4{
  -webkit-animation-delay: -.2s;
          animation-delay: -.2s;
}
.cbLoadingSpinnerContainer.container3 .circle4{
  -webkit-animation-delay: -.1s;
          animation-delay: -.1s;
}

@-webkit-keyframes bouncedelay{
  0%,
  80%,
  100%{
    -webkit-transform: scale(.0);
  }
  40%{
    -webkit-transform: scale(1.0);
  }
}

@keyframes bouncedelay{
  0%,
  80%,
  100%{
    -webkit-transform: scale(.0);
            transform: scale(.0);
  } 40%{
    -webkit-transform: scale(1.0);
            transform: scale(1.0);
  }
}

.cbLoadingSpinnerMini{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  -webkit-transition: opacity .3s ease;
     -moz-transition: opacity .3s ease;
      -ms-transition: opacity .3s ease;
       -o-transition: opacity .3s ease;
          transition: opacity .3s ease;
  opacity: 1;
}
.cbLoadingSpinnerMiniContainer.container1 > div,
.cbLoadingSpinnerMiniContainer.container2 > div,
.cbLoadingSpinnerMiniContainer.container3 > div{
  position: absolute;
  width: 3px;
  height: 3px;
  -webkit-animation: bouncedelayMini 1.2s infinite ease-in-out;
          animation: bouncedelayMini 1.2s infinite ease-in-out;
  border-radius: 3px;
  background-color: #fff;
  /* Prevent first frame from flickering when animation starts */

  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}
.loading .cbLoadingSpinnerMiniContainer.container1 > div,
.loading .cbLoadingSpinnerMiniContainer.container2 > div,
.loading .cbLoadingSpinnerMiniContainer.container3 > div{
  background-color: #999;
}
.cbLoadingSpinnerMini .cbLoadingSpinnerMiniContainer{
  position: absolute;
  width: 100%;
  height: 100%;
}
.cbLoadingSpinnerMiniContainer.container2{
  -webkit-transform: rotateZ(45deg);
          transform: rotateZ(45deg);
}
.cbLoadingSpinnerMiniContainer.container3{
  -webkit-transform: rotateZ(90deg);
          transform: rotateZ(90deg);
}
.cbLoadingSpinnerMiniContainer .circle1{
  top: 0;
  left: 0;
}
.cbLoadingSpinnerMiniContainer .circle2{
  top: 0;
  right: 0;
}
.cbLoadingSpinnerMiniContainer .circle3{
  right: 0;
  bottom: 0;
}
.cbLoadingSpinnerMiniContainer .circle4{
  bottom: 0;
  left: 0;
}
.cbLoadingSpinnerMiniContainer.container2 .circle1{
  -webkit-animation-delay: -1.1s;
          animation-delay: -1.1s;
}
.cbLoadingSpinnerMiniContainer.container3 .circle1{
  -webkit-animation-delay: -1.0s;
          animation-delay: -1.0s;
}
.cbLoadingSpinnerMiniContainer.container1 .circle2{
  -webkit-animation-delay: -.9s;
          animation-delay: -.9s;
}
.cbLoadingSpinnerMiniContainer.container2 .circle2{
  -webkit-animation-delay: -.8s;
          animation-delay: -.8s;
}
.cbLoadingSpinnerMiniContainer.container3 .circle2{
  -webkit-animation-delay: -.7s;
          animation-delay: -.7s;
}
.cbLoadingSpinnerMiniContainer.container1 .circle3{
  -webkit-animation-delay: -.6s;
          animation-delay: -.6s;
}
.cbLoadingSpinnerMiniContainer.container2 .circle3{
  -webkit-animation-delay: -.5s;
          animation-delay: -.5s;
}
.cbLoadingSpinnerMiniContainer.container3 .circle3{
  -webkit-animation-delay: -.4s;
          animation-delay: -.4s;
}
.cbLoadingSpinnerMiniContainer.container1 .circle4{
  -webkit-animation-delay: -.3s;
          animation-delay: -.3s;
}
.cbLoadingSpinnerMiniContainer.container2 .circle4{
  -webkit-animation-delay: -.2s;
          animation-delay: -.2s;
}
.cbLoadingSpinnerMiniContainer.container3 .circle4{
  -webkit-animation-delay: -.1s;
          animation-delay: -.1s;
}

@-webkit-keyframes bouncedelayMini{
  0%,
  80%,
  100%{
    -webkit-transform: scale(.0);
  }
  40%{
    -webkit-transform: scale(1.0);
  }
}

@keyframes bouncedelayMini{
  0%,
  80%,
  100%{
    -webkit-transform: scale(.0);
            transform: scale(.0);
  } 40%{
    -webkit-transform: scale(1.0);
            transform: scale(1.0);
  }
}


/* test */
@-moz-keyframes three-quarters-loader{
  0%{
    -moz-transform: rotate(0deg);
         transform: rotate(0deg);
  }
  100%{
    -moz-transform: rotate(360deg);
         transform: rotate(360deg);
  }
}
@-webkit-keyframes three-quarters-loader{
  0%{
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100%{
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes three-quarters-loader{
  0%{
    -webkit-transform: rotate(0deg);
       -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100%{
    -webkit-transform: rotate(360deg);
       -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
/* :not(:required) hides this rule from IE9 and below */
.cbLoadingMini:not(:required){
  position: relative;
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-block;
  overflow: hidden;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  -webkit-animation: three-quarters-loader 1250ms infinite linear;
     -moz-animation: three-quarters-loader 1250ms infinite linear;
          animation: three-quarters-loader 1250ms infinite linear;
  border: 2px solid #CCC;
  border-right-color: transparent;
  border-radius: 11px;
}
/*デフォルトチェックボックス*/
input[type="radio"]{
  border:solid 1px #bbb;
  background:initial;
  margin-right:10px;
}
input[type="radio"]:checked {
  background: #688113;
}