/* レイアウトのためのゼロ幅フォント
   ========================================================================== */
@font-face {
  font-family: 'zeroWidth';
  src: url('../font/zero-width.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* mqpackerが意図した順番にソースを並び替えるためのおまじない
   ========================================================================== */
@include max-screen( $breakpoint-base )   { _x { _x : 0 } }
@include max-screen( $breakpoint-middle ) { _x { _x : 0 } }
@include max-screen( $breakpoint-small )  { _x { _x : 0 } }

/* modifier: align
   ========================================================================== */
.CG2--alignLeft   { text-align: left !important }
.CG2--alignRight  { text-align: right !important }
.CG2--alignCenter { text-align: center !important }
.CG2--alignTop    { vertical-align: top !important }
.CG2--alignMiddle { vertical-align: middle !important }
.CG2--alignBottom { vertical-align: bottom !important }

/* modifier: display
   ========================================================================== */
:root .CG2--disableLargeScreen { display: none }

@media screen and ( max-width: $breakpoint-middle ) and ( min-width: $breakpoint-small + 1 ) {
  :root .CG2--disableLargeScreen  { display: block }
  :root .CG2--disableMiddleScreen { display: none !important }
  :root .CG2--disableSmallScreen  { display: block }

  :root span.CG2--disableLargeScreen,
  :root   br.CG2--disableLargeScreen  { display: inline }
  :root span.CG2--disableMiddleScreen,
  :root   br.CG2--disableMiddleScreen { display: none !important }
  :root span.CG2--disableSmallScreen,
  :root   br.CG2--disableSmallScreen  { display: inline }
}

@include max-screen( $breakpoint-small ) {
  :root .CG2--disableLargeScreen  { display: block }
  :root .CG2--disableMiddleScreen { display: block }
  :root .CG2--disableSmallScreen  { display: none !important }

  :root span.CG2--disableLargeScreen,
  :root   br.CG2--disableLargeScreen  { display: inline }
  :root span.CG2--disableMiddleScreen,
  :root   br.CG2--disableMiddleScreen { display: inline }
  :root span.CG2--disableSmallScreen,
  :root   br.CG2--disableSmallScreen  { display: none !important }
}

/* ==========================================================================
   general style
   ========================================================================== */
::selection {
  background-color: hsl(75, 75%, 75%);
  text-shadow: none;
}

html {
  color: #242424;
  font-family: $fontSansSerif;
  font-size: 16px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  //1px の #191919。スクロールバーの色に影響を与えないように画像で指定。
  background: url( "data:image/gif;base64,R0lGODlhAQABAPAAABkZGQAAACwAAAAAAQABAAACAkQBADs=" );
  @include max-screen( $breakpoint-middle ) {
    font-size: 12px;
  }
}

body {
  margin:0;
  background: #fff;
  @include max-screen( $breakpoint-middle ) {
    min-width: 0;
  }
}

a {
  color: #10a040;
  transition: color .2s;
}
a:hover,
a:active {
  // color: #2f353d;
  transition: color 0s;
}

iframe[name="google_conversion_frame"]{
  position: absolute;
  top: 0;
  left: -100px;
  width: 1px;
  height: 1px;
}