@charset "utf-8";

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/*                                                        */
/* ● icon.css                                            */
/*    共通部品                                            */
/*    ・リスト                                            */
/*                                                        */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */



/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*   アイコン 等                                    */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */

/* アイコンに下線が付くのを回避 */
.Icon,
.Icon::before{
  &,
  a &,
  a:hover &{
    text-decoration: none!important;
  }
}








/* アイコン用のWEBフォントを適用するための継承用クラス
--------------------------------------------------- */
._webfont-icon{
  &::before {
    // set_icon.css の [class^="icon-"],[class*=" icon-"] と同じスタイルを適用
    font-style: normal;
    font-weight: normal;
    speak: none;

    margin: 0 0.25em 0 0;

    display: inline-block;
    //text-decoration: inherit;
    text-decoration: none!important;
    width: 1em;
    text-align: center;
    /* opacity: .8; */

    /* For safety - reset parent styles, that can break glyph codes*/
    font-variant: normal;
    text-transform: none;

    /* fix buttons height, for twitter bootstrap */
    line-height: 1em;
  }

  // フォントの種類
  &::before {
    font-family: "preset_icon";
  }
  &.illust_icon::before {
    font-family: "illust_icon"!important;
  }
}





/* アイコンへの装飾
--------------------------------------------------- */
.icon-decorate-circle,
%icon-decorate-circle{
  &::before{
    margin-right: 0;
    line-height: 1;
    transform: scale(0.6);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 3rem;
    width: 3rem;
    height: 3rem;
  }
  &.icon-right-dir{
    &::before{
      color: #fff;
      background: $main-color-deep;
    }
  }
  &.icon-help-circled {
    &::before{
      color: #fff;
      color: #339;
    }
  }
}






/* アイコン配置
--------------------------------------------------- */
/* icon position left  */
.icon-pos-left{
  position: absolute;
  left: 0.5em;
  right: auto;
  top: 50%;
  margin: 0;
  margin-top: -0.5em;
}
[class^="icon-"].icon-pos-left:before,
[class*=" icon-"].icon-pos-left:before {
  margin: 0;
}
/* icon position right  */
.icon-pos-right{
  position: absolute;
  left: auto;
  right: 0.5em;
  top: 50%;
  margin: 0;
  margin-top: -0.5em;
}
[class^="icon-"].icon-pos-right:before,
[class*=" icon-"].icon-pos-right:before {
  margin: 0;
}


/* icon position bottom */
.icon-pos-bottom{
  position: absolute;
  left:  50%;
  bottom: 0.25em;
  margin: 0;
  margin-left: -0.5em;
}
[class^="icon-"].icon-pos-bottom:before,
[class*=" icon-"].icon-pos-bottom:before {
}


/* icon position top */
.icon-pos-top{
  padding-top: 1em;
  display: block;
}
[class^="icon-"].icon-pos-top:before,
[class*=" icon-"].icon-pos-top:before {
  display: block;
  text-align: center;
  margin: 0 auto 0.25em;
}

/* 特殊なアイコン用のスタイル */
.icon-file-pdf,
.icon-file-excel,
.icon-file-word,
.icon-file-image,
.icon-file-archive{
  @extend %icon-decorate-circle;
}

.icon-file-pdf::before {
  background-color:      #bb0708!important;
}
.icon-file-excel::before {
  background-color:      #12824b!important;
}
.icon-file-word::before {
  background-color:      #3b67a7!important;
}
.icon-file-image::before {
  background-color:      #222!important;
}
.icon-file-archive::before {
  background-color:      #30b4df!important;
}