@charset "UTF-8";
/*
 * サイト全体の CSS
 * 以前 React（bundle.js）が差し込んでいた CSS（src/main.sass をビルドしたもの）をそのまま書き出した。
 * React のページ遷移用（.fade-*）と読み込み中のバー（#nprogress）の指定だけ削除している。
 */
* {
  box-sizing: border-box; }

ul {
  margin: 0;
  padding: 0;
  list-style: none; }

a {
  transition: 0.2s;
  text-decoration: none; }
  a:hover {
    opacity: 0.6; }


body {
  color: #333;
  margin: 0;
  background: #f2f2f2;
  font-family: "Helvetica Neue", "Hiragino Kaku Gothic ProN W3", "\30D2\30E9\30AE\30CE\89D2\30B4   ProN W3", Hiragino Kaku Gothic ProN, Arial, Meiryo, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: auto;
  letter-spacing: 0.05em; }

.svg-defs {
  display: none; }

header {
  overflow: hidden; }
  header > canvas {
    display: block; }
  header .logo_wrap {
    display: inline-block;
    position: absolute;
    top: 80px;
    width: 240px;
    height: 64px;
    left: calc((100% - 80vw)/2); }
    @media only screen and (max-width: 800px), (max-device-width: 800px) {
      header .logo_wrap {
        left: calc((100% - 90vw)/2); } }
  header .logo_mark_l, header .logo_mark_a, header .logo_mark_b {
    fill: #000;
    opacity: 0.4;
    width: 52px;
    height: 52px;
    position: absolute;
    top: 0; }
  header .logo_type {
    background: url("../img/logo_type.svg") no-repeat;
    position: absolute;
    height: 64px;
    width: 240px; }
  header .top_image {
    height: 225px;
    background: #fbaea9; }
  header #head_menu {
    height: 95px;
    width: 80vw;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-flow: row wrap; }
    @media only screen and (max-width: 800px), (max-device-width: 800px) {
      header #head_menu {
        height: 60px;
        width: 90vw; } }
    header #head_menu ul {
      display: flex;
      width: 200px;
      height: 16px;
      justify-content: space-between; }
      @media only screen and (max-width: 800px), (max-device-width: 800px) {
        header #head_menu ul {
          width: 170px; } }
      header #head_menu ul li {
        font-size: 16px;
        color: #666;
        opacity: 0.5;
        transition: 0.1s;
        cursor: pointer; }
        header #head_menu ul li button {
          border: none;
          background: none;
          font-size: 16px;
          display: flex;
          padding: 0;
          line-height: 1em; }
          @media only screen and (max-width: 800px), (max-device-width: 800px) {
            header #head_menu ul li button {
              font-size: 13px; } }
          header #head_menu ul li button:hover {
            cursor: pointer; }
        header #head_menu ul li.on {
          opacity: 1;
          cursor: default; }
        header #head_menu ul li i {
          margin-right: 10px; }
    header #head_menu form {
      height: 30px;
      position: relative; }
      header #head_menu form i {
        position: absolute;
        right: 14px;
        top: 9px;
        font-size: 14px;
        color: #4d4d4d; }
      header #head_menu form input {
        width: 400px;
        height: 30px;
        border-radius: 15px;
        border: none; }

footer {
  height: 132px;
  background: #4d4d4d;
  display: flex;
  align-items: center;
  margin-top: 100px; }
  footer p {
    width: 80vw;
    color: #fff;
    font-size: 12px;
    margin: auto; }
    @media only screen and (max-width: 800px), (max-device-width: 800px) {
      footer p {
        width: 90vw; } }
    footer p a {
      color: #bbb; }

#wrap {
  width: 80vw;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  min-height: 700px;
  position: relative; }
  @media only screen and (max-width: 800px), (max-device-width: 800px) {
    #wrap {
      width: 90vw; } }
  #wrap > .leftCol {
    width: 100%; }
  #wrap a {
    color: #df7171;
    text-decoration: none; }
  #wrap #entry_list {
    width: calc(80vw - 17vw - 45px);
    border-top: 1px solid #919191; }
    @media only screen and (max-width: 800px), (max-device-width: 800px) {
      #wrap #entry_list {
        width: 100%; } }
    #wrap #entry_list.title .entry {
      padding-bottom: 15px; }
      #wrap #entry_list.title .entry article .content {
        height: 0;
        padding-top: 0;
        opacity: 0;
        display: none; }
      #wrap #entry_list.title .entry article .titles {
        padding-bottom: 20px;
        border-bottom: none;
        margin-bottom: 0px; }
    #wrap #entry_list.article .entry {
      padding-bottom: 100px; }
      #wrap #entry_list.article .entry article .content {
        height: auto;
        opacity: 1; }
    #wrap #entry_list .entry {
      display: flex;
      border-bottom: 1px solid #c2c2c2;
      padding-bottom: 100px;
      padding-top: 25px;
      transition: 0.1s; }
      #wrap #entry_list .entry .sp-meta {
        display: none; }
      #wrap #entry_list .entry .meta, #wrap #entry_list .entry .sp-meta {
        width: 17vw;
        font-size: 12px; }
        #wrap #entry_list .entry .meta p, #wrap #entry_list .entry .sp-meta p {
          margin: 0.7em 0; }
        #wrap #entry_list .entry .meta .cat, #wrap #entry_list .entry .sp-meta .cat {
          padding: 2px 8px;
          margin-bottom: 4px;
          display: inline-block; }
          @media only screen and (max-width: 800px), (max-device-width: 800px) {
            #wrap #entry_list .entry .meta .cat, #wrap #entry_list .entry .sp-meta .cat {
              margin-bottom: 0; } }
      @media only screen and (max-width: 800px), (max-device-width: 800px) {
        #wrap #entry_list .entry {
          padding-top: 15px; }
          #wrap #entry_list .entry .meta {
            display: none; }
          #wrap #entry_list .entry .sp-meta {
            display: flex;
            width: 100%;
            align-items: center; }
            #wrap #entry_list .entry .sp-meta a, #wrap #entry_list .entry .sp-meta p {
              margin-right: 10px; }
            #wrap #entry_list .entry .sp-meta .cat {
              height: 21px; }
          #wrap #entry_list .entry .thumb {
            margin-top: 20px;
            margin-bottom: 20px; } }
    @media only screen and (max-width: 800px) and (max-width: 800px), only screen and (max-device-width: 800px) and (max-width: 800px), only screen and (max-width: 800px) and (max-device-width: 800px), (max-device-width: 800px) and (max-device-width: 800px) {
      #wrap #entry_list .entry .thumb {
        margin-top: 13px; } }
      #wrap #entry_list .entry article {
        width: calc(calc(80vw - 17vw - 45px) - 17vw); }
        @media only screen and (max-width: 800px), (max-device-width: 800px) {
          #wrap #entry_list .entry article {
            width: 100%; } }
        #wrap #entry_list .entry article .titles {
          padding-bottom: 20px;
          border-bottom: 1px solid #d9d9d9;
          margin-bottom: 25px; }
          @media only screen and (max-width: 800px), (max-device-width: 800px) {
            #wrap #entry_list .entry article .titles {
              margin-bottom: 15px;
              padding-bottom: 15px; } }
          #wrap #entry_list .entry article .titles h1 {
            font-family: "Proxima N W01 Smbd", "Helvetica Neue", 'Hiragino Kaku Gothic ProN',"\30D2\30E9\30AE\30CE\89D2\30B4   ProN W6", Hiragino Kaku Gothic ProN, Arial, Meiryo, sans-serif;
            color: #333;
            font-size: 24px;
            line-height: 1.6em;
            margin: 5px 0 7px; }
            @media only screen and (max-width: 800px), (max-device-width: 800px) {
              #wrap #entry_list .entry article .titles h1 {
                font-size: 20px;
                margin: 0; } }
          #wrap #entry_list .entry article .titles .tag {
            margin: 0; }
            #wrap #entry_list .entry article .titles .tag i {
              color: #888;
              font-size: 12px;
              margin-right: 5px; }
            #wrap #entry_list .entry article .titles .tag a {
              font-size: 12px;
              color: #888; }
        #wrap #entry_list .entry article .thumb {
          width: 100%;
          margin-bottom: 20px; }
        #wrap #entry_list .entry article .content {
          transition: 0.2s; }
          #wrap #entry_list .entry article .content code.hljs {
            display: inline;
            margin: 0 2px;
            padding: 1px 3px; }
          #wrap #entry_list .entry article .content pre code.hljs {
            display: block;
            margin: 0;
            padding: .5em; }
          #wrap #entry_list .entry article .content .hljs {
            padding: 15px;
            line-height: 1.7em;
            font-size: 12px;
            -webkit-font-smoothing: auto; }
          #wrap #entry_list .entry article .content p {
            font-size: 15px;
            line-height: 2em;
            margin: 20px 0; }
          #wrap #entry_list .entry article .content img {
            max-width: 100%;
            height: auto; }
          #wrap #entry_list .entry article .content h2 {
            font-size: 21px;
            margin-top: 60px; }
          #wrap #entry_list .entry article .content h2:first-child {
            margin-top: 0; }
          #wrap #entry_list .entry article .content h3:not(:first-child) {
            font-size: 18px;
            margin-top: 60px; }
          #wrap #entry_list .entry article .content h4 {
            font-size: 15px;
            margin-top: 60px; }
          #wrap #entry_list .entry article .content ul {
            margin: 10px 0; }
            #wrap #entry_list .entry article .content ul li {
              list-style-type: disc;
              list-style-position: inside;
              font-size: 14px;
              line-height: 1.7em; }
          #wrap #entry_list .entry article .content .easy-footnotes-wrapper {
            font-size: 12px;
            margin: 40px 0 0 0;
            padding: 40px 0 0 15px;
            border-top: 1px solid #aaa;
            line-height: 1.8em;
            color: #555; }
          #wrap #entry_list .entry article .content iframe {
            max-width: 100%; }
        #wrap #entry_list .entry article .sns {
          margin-top: 30px;
          display: flex;
          width: 160px;
          justify-content: space-between; }
  #wrap #pager {
    display: flex;
    justify-content: center;
    margin-top: 81px; }
    #wrap #pager li {
      width: 38px;
      height: 38px;
      margin-right: 16px; }
      #wrap #pager li:last-child {
        margin-right: 0; }
      #wrap #pager li a {
        background: #ccc;
        display: flex;
        color: #fff;
        width: 38px;
        height: 38px;
        justify-content: center;
        align-items: center; }
        #wrap #pager li a.current, #wrap #pager li a:hover {
          background: #4d4d4d; }
  #wrap #sidebar {
    width: 17vw;
    border-top: 1px solid #919191;
    padding-top: 25px;
    position: absolute;
    top: 0;
    right: 0; }
    @media only screen and (max-width: 800px), (max-device-width: 800px) {
      #wrap #sidebar {
        display: none; } }
    #wrap #sidebar.scrolled {
      position: fixed;
      right: calc(10vw - 8px);
      top: 37px; }
    #wrap #sidebar > div {
      margin-bottom: 60px; }
      #wrap #sidebar > div h1 {
        font-size: 16px;
        margin-bottom: 20px;
        font-family: "Proxima N W01 Smbd", "Helvetica Neue", 'Hiragino Kaku Gothic ProN',"\30D2\30E9\30AE\30CE\89D2\30B4   ProN W6", Hiragino; }
      #wrap #sidebar > div .linklist li {
        line-height: 1.6em;
        align-items: baseline;
        letter-spacing: 0.01em; }
        #wrap #sidebar > div .linklist li > i {
          font-size: 10px; }
        #wrap #sidebar > div .linklist li > a {
          font-size: 13px;
          padding-left: 10px; }
        #wrap #sidebar > div .linklist li > .other-links {
          margin-bottom: 20px; }
          #wrap #sidebar > div .linklist li > .other-links a {
            font-size: 12px;
            color: #4d4d4d; }
            #wrap #sidebar > div .linklist li > .other-links a > i {
              font-size: 13px;
              color: #4d4d4d;
              padding-right: 10px; }

.single .menu-title {
  display: none; }