// 最近のCDN版NotoSansではカーニング情報が含まれていません。
// NotoSansでカーニングを効かせたい場合は、以下の記事を参考にしてください。
//
// OpenTypeフォントの軽量化と自動カーニング - ureta.net
// https://ureta.net/2017/02/tool_fonttools/
//
// @import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);

/*!
  jQuery.yakumono (0.3.0) github.com/hokkey/jquery.yakumono
  (C) 2017 Yuma Hori.
  MIT @license: en.wikipedia.org/wiki/MIT_License
*/

// 約物・アキなしミックスイン
@mixin yakumono-aki-nashi() {
  font-feature-settings: 'halt' 1;

  .is-tategumi & {
    font-feature-settings: 'vhal' 1;
  }
}

.js-yakumono {

  // 行末文字の影響で意図しない追い込みが発生してしまった場合の追い出し処理
  .is-oidashi {
    margin-right: .5em;

    &.is-tategumi {
      margin-right: 0;
      margin-bottom: .5em;
    }
  }
  // 行頭文字の影響で意図しない追い込みが発生してしまった場合の追い出し処理
  .is-oidashi-small {
    margin-right: .01em;

    &.is-tategumi {
      margin-right: 0;
      margin-bottom: .01em;
    }
  }

  // ベタ組みモード
  &.is-betagumi {
    text-align: justify;

    // borderやpaddingがあっても横幅に影響しないようにする
    box-sizing: content-box;
  }

  // ベタ組み時の左右の余りを左右マージンで吸収する
  &.is-betagumi-center {
    margin-left: auto;
    margin-right: auto;
  }

  // 字下げをする
  &.is-jisage {
    text-indent: 1em;

    > p, .js-jisage {
      text-indent: 1em;
    }
  }

  // ツメ組みモード
  &.is-tsumegumi {
    // 約物以外をプロポーショナル字形に
    .js-char:not(.js-char-yakumono) {
      font-feature-settings: 'palt' 1;
    }
  }

  // 縦書きモード (experimental)
  &.is-tategumi {
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
  }
}

// 行末約物半角モード
.js-yakumono.is-gyomatsu-yakumono-hankaku {
  .js-char-yakumono--owarikakko,
  .js-char-yakumono--kuten,
  .js-char-yakumono--touten,
  .js-char-yakumono--nakaten {
    &.is-end-of-line {
      @include yakumono-aki-nashi();
    }
  }
}

// 始め括弧系
.js-char-yakumono--hajimekakko {
  // 始め括弧系・行頭
  &.is-start-of-line,
  // 始め括弧系の後に始め括弧系
  // 「「 , 「（ , （「
  &.js-char-yakumono--after--hajimekakko {
    @include yakumono-aki-nashi();

    // Safari用ポリフィル
    .is-safari & {
      // 半角ずらす
      position: relative;
      left: 0;
    }
  }
}

// 終わり括弧系
.js-char-yakumono--owarikakko {
  // 終わり括弧系の後に終わり括弧系
  // 」」, ）」 ,  」）
  &.js-char-yakumono--before--owarikakko,
  // 終わり括弧系の後に始め括弧系
  // 」「 ,  ）「  ,  」（
  &.js-char-yakumono--before--hajimekakko {
    @include yakumono-aki-nashi();
  }
}

// 句点
.js-char-yakumono--kuten {
  // 句点の後に始め括弧
  // 。「
  &.js-char-yakumono--before--hajimekakko,
  // 句点の後に終わり括弧
  // 。」
  &.js-char-yakumono--before--owarikakko {
    @include yakumono-aki-nashi();
  }
}

// 読点
.js-char-yakumono--touten {
  // 読点の後に始め括弧
  // 、「
  &.js-char-yakumono--before--hajimekakko,
  // 読点の後に終わり括弧
  // 、」
  &.js-char-yakumono--before--owarikakko {
    @include yakumono-aki-nashi();
  }
}

// 中点
.js-char-yakumono--nakaten {
  // 終わり括弧類 + 中点 + 始め括弧類
  // 」・「 , ）・（
  &.js-char-yakumono--after--owarikakko.js-char-yakumono--before--hajimekakko {
    @include yakumono-aki-nashi();

    // Safari用ポリフィル
    .is-safari & {
      position: relative;
      left: 0;
    }
  }
}

body {
  font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  margin-top: 2em;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 2em;
}

.page {
  margin-left: auto;
  margin-right: auto;
  max-width: 800px;
}

div, p {
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
  width: 400px;
  position: relative;
}

.head, .head-small {
  line-height: 1;
  font-size: 12px;
}

.head {
  text-align: center;
}

.subtitle {
  font-size: 11px;
  margin-bottom: 10px;
}

.head-small {
  margin-top: 2em;
}

.frame {
  background: #eee;
  border: 1px solid #ccc;
  font-size: 12px;
  line-height: 1.8;
  padding: 10px 5%;
  position: relative;
  max-height: 1.8 * 5em;
  overflow-y: scroll;

  @media all and (min-width: 600px) {
    max-height: 1.8 * 7em;
  }

  > div {
    position: relative;

    &::before, &::after {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
    }

    &::before {
      left: 0;
      border-left: 1px solid #ccc;
    }

    &::after {
      right: 0;
      border-right: 1px solid #ccc;
    }
  }

  p + p {
    margin-top: 1em;
  }
}

.justify {
  text-align: justify;
}

.vertical {
  height: 40em;
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;

  > p {
    text-indent: 1em;
  }
}