@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
body#interview #container {
  background: none; }

body#interview #interview-container {
  padding: calc(30 * var(--u)) 0;
  position: relative; }
  body#interview #interview-container .interview-category {
    margin-bottom: calc(20 * var(--u)); }
    body#interview #interview-container .interview-category img {
      width: 57%; }
  body#interview #interview-container > figure {
    position: absolute;
    right: calc(-20 * var(--u));
    top: calc(30 * var(--u));
    z-index: 10;
    width: 50%; }
  body#interview #interview-container #interview-wrapper {
    position: relative;
    z-index: 2; }
    body#interview #interview-container #interview-wrapper:before {
      content: "";
      width: 90%;
      height: calc(400 * var(--u));
      background: #e4ddec;
      border: solid calc(2 * var(--u)) var(--theme-color, #000);
      position: absolute;
      top: 0;
      right: 4%;
      border-radius: calc(20 * var(--u));
      -webkit-transform: rotate(6deg) translateX(calc(30 * var(--u)));
      -ms-transform: rotate(6deg) translateX(calc(30 * var(--u)));
      transform: rotate(6deg) translateX(calc(30 * var(--u))); }
  body#interview #interview-container #interview-main {
    border: solid calc(2 * var(--u)) var(--theme-color, #000);
    border-radius: calc(20 * var(--u));
    background: #fff;
    position: relative;
    z-index: 2; }
    body#interview #interview-container #interview-main .interview-theme {
      margin-bottom: calc(20 * var(--u)); }
      body#interview #interview-container #interview-main .interview-theme span {
        display: inline-block;
        font-size: calc(16 * var(--u));
        color: #fff;
        padding: 0.3em 1em 0.5em;
        border-radius: 0 0 0.5em 0.5em;
        background: var(--theme-color, #000);
        font-family: "Zen Maru Gothic", sans-serif;
        font-weight: 400;
        font-style: normal;
        letter-spacing: -0.05em;
        font-weight: 500;
        margin-left: 2em; }
    body#interview #interview-container #interview-main .interview-theme sup {
      font-size: 0.6em;
      vertical-align: top; }
    body#interview #interview-container #interview-main .interview-name:first-child {
      padding-top: calc(30 * var(--u)); }
    body#interview #interview-container #interview-main .interview-name {
      width: 43%;
      padding-left: 5%;
      margin-bottom: calc(15 * var(--u)); }
    body#interview #interview-container #interview-main .interview-via {
      font-family: "Zen Maru Gothic", sans-serif;
      font-weight: 400;
      font-style: normal;
      letter-spacing: -0.05em;
      font-weight: 500;
      padding-left: 7%;
      line-height: 1.6em;
      margin-bottom: 1em; }
    body#interview #interview-container #interview-main .interview-comment {
      width: 90%;
      margin: auto; }
      body#interview #interview-container #interview-main .interview-comment section {
        border-top: dotted calc(2 * var(--u)) var(--theme-color, #000);
        border-left: dotted calc(2 * var(--u)) var(--theme-color, #000);
        padding: calc(15 * var(--u)) 0 0 calc(15 * var(--u));
        position: relative;
        margin-bottom: calc(50 * var(--u)); }
        body#interview #interview-container #interview-main .interview-comment section:after {
          content: "";
          width: calc(42 * var(--u));
          height: calc(42 * var(--u));
          position: absolute;
          left: calc(-23 * var(--u));
          top: calc(-23 * var(--u));
          background: url(../images/interview/interview-pin1.png) center center/contain no-repeat; }
        body#interview #interview-container #interview-main .interview-comment section:nth-child(1):after {
          background-image: url(../images/interview/interview-pin1.png); }
        body#interview #interview-container #interview-main .interview-comment section:nth-child(2):after {
          background-image: url(../images/interview/interview-pin2.png); }
        body#interview #interview-container #interview-main .interview-comment section:nth-child(3):after {
          background-image: url(../images/interview/interview-pin3.png); }
        body#interview #interview-container #interview-main .interview-comment section .tag span {
          font-size: calc(18 * var(--u));
          font-family: "Zen Maru Gothic", sans-serif;
          font-weight: 400;
          font-style: normal;
          letter-spacing: -0.05em;
          font-weight: 500;
          padding-bottom: 0.2em;
          border-bottom: solid calc(2 * var(--u)) var(--theme-color, #000);
          display: inline-block;
          -webkit-transform: rotate(-7deg);
          -ms-transform: rotate(-7deg);
          transform: rotate(-7deg);
          margin-bottom: 1em; }
          body#interview #interview-container #interview-main .interview-comment section .tag span:before {
            content: "#";
            margin-right: 0.2em;
            font-size: 1.1em;
            color: var(--theme-color, #000); }
        body#interview #interview-container #interview-main .interview-comment section h2 {
          font-size: calc(24 * var(--u));
          color: var(--theme-color, #000);
          font-family: "Zen Maru Gothic", sans-serif;
          font-weight: 400;
          font-style: normal;
          letter-spacing: -0.05em;
          font-weight: 700;
          margin-bottom: 0.7em;
          letter-spacing: 0.05em; }
          body#interview #interview-container #interview-main .interview-comment section h2 small {
            font-size: 0.7em; }
        body#interview #interview-container #interview-main .interview-comment section p + ul {
          margin-top: 0.3em; }
        body#interview #interview-container #interview-main .interview-comment section p {
          font-size: calc(16 * var(--u));
          color: #333;
          font-family: "Zen Maru Gothic", sans-serif;
          font-weight: 400;
          font-style: normal;
          letter-spacing: -0.05em;
          font-weight: 500;
          line-height: 1.4em; }
          body#interview #interview-container #interview-main .interview-comment section p .arrow {
            height: 0.8em;
            vertical-align: middle;
            margin: 0 0.2em 0.3em 0.2em; }
        body#interview #interview-container #interview-main .interview-comment section .icon {
          margin-bottom: calc(10 * var(--u)); }
          body#interview #interview-container #interview-main .interview-comment section .icon img {
            height: calc(20 * var(--u)); }
        body#interview #interview-container #interview-main .interview-comment section ul li {
          font-size: calc(16 * var(--u));
          color: #333;
          font-family: "Zen Maru Gothic", sans-serif;
          font-weight: 400;
          font-style: normal;
          letter-spacing: -0.05em;
          font-weight: 500;
          padding-left: 1em;
          line-height: 1.4em;
          position: relative; }
          body#interview #interview-container #interview-main .interview-comment section ul li:before {
            content: "";
            position: absolute;
            left: 0;
            top: 0.4em;
            width: 0.6em;
            height: 0.6em;
            border-radius: 50%;
            background: var(--theme-color, #000); }
          body#interview #interview-container #interview-main .interview-comment section ul li.arrow:before {
            top: 0.3em;
            width: 0.85em;
            height: 0.85em;
            border-radius: 0;
            -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12.77 12.1'%3E%3Cpath d='M6.37,12.1c-.07,0-.13-.01-.2-.04-.18-.08-.3-.26-.3-.46v-2.81H.5c-.28,0-.5-.22-.5-.5s.22-.5.5-.5h5.87c.28,0,.5.22.5.5v2.15l4.67-4.39L6.87,1.66v2.15c0,.28-.22.5-.5.5H.5c-.28,0-.5-.22-.5-.5s.22-.5.5-.5h5.37V.5c0-.2.12-.38.3-.46.18-.08.4-.04.54.1l5.89,5.55c.1.09.16.23.16.36s-.06.27-.16.36l-5.89,5.55c-.09.09-.22.14-.34.14Z'/%3E%3C/svg%3E") center/contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12.77 12.1'%3E%3Cpath d='M6.37,12.1c-.07,0-.13-.01-.2-.04-.18-.08-.3-.26-.3-.46v-2.81H.5c-.28,0-.5-.22-.5-.5s.22-.5.5-.5h5.87c.28,0,.5.22.5.5v2.15l4.67-4.39L6.87,1.66v2.15c0,.28-.22.5-.5.5H.5c-.28,0-.5-.22-.5-.5s.22-.5.5-.5h5.37V.5c0-.2.12-.38.3-.46.18-.08.4-.04.54.1l5.89,5.55c.1.09.16.23.16.36s-.06.27-.16.36l-5.89,5.55c-.09.09-.22.14-.34.14Z'/%3E%3C/svg%3E") center/contain no-repeat; }
  @media screen and (max-width: 768px) {
    body#interview #interview-container {
      width: 86%;
      margin-left: auto;
      margin-right: auto; } }

body#interview #interview-container #interview-main .interview-note {
  width: 90%;
  margin: calc(-20 * var(--u)) auto 0;
  padding: calc(15 * var(--u)) 0 calc(25 * var(--u));
  border-top: solid calc(2 * var(--u)) var(--theme-color, #000);
  font-size: calc(12 * var(--u));
  line-height: 1.5em;
  color: #333;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: -0.05em;
  font-weight: 500;
  padding-left: 1em;
  text-indent: -1em; }

body#interview #link-pdf {
  width: 85%;
  margin: calc(30 * var(--u)) auto calc(50 * var(--u)); }
  body#interview #link-pdf a {
    display: block;
    position: relative;
    overflow: hidden;
    overflow: visible; }
    body#interview #link-pdf a img {
      -webkit-transition: all 0.2s linear;
      -o-transition: all 0.2s linear;
      transition: all 0.2s linear; }
    body#interview #link-pdf a:hover img {
      -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
      transform: scale(1.1); }
    body#interview #link-pdf a > img {
      display: block;
      width: 100%;
      -webkit-filter: drop-shadow(calc(3 * var(--u)) calc(3 * var(--u)) calc(3 * var(--u)) rgba(60, 31, 110, 0.2));
      filter: drop-shadow(calc(3 * var(--u)) calc(3 * var(--u)) calc(3 * var(--u)) rgba(60, 31, 110, 0.2)); }
    body#interview #link-pdf a figure {
      position: absolute;
      left: 3%;
      bottom: calc(25 * var(--u));
      width: 22%; }
      body#interview #link-pdf a figure img {
        width: 100%;
        -webkit-filter: drop-shadow(calc(3 * var(--u)) calc(3 * var(--u)) calc(3 * var(--u)) rgba(60, 31, 110, 0.2));
        filter: drop-shadow(calc(3 * var(--u)) calc(3 * var(--u)) calc(3 * var(--u)) rgba(60, 31, 110, 0.2)); }

body#interview.theme1 {
  --theme-color: #f17864;
  background: url(../images/theme1-bg.png); }

body#interview.theme2 {
  --theme-color: #46b4be;
  background: url(../images/theme2-bg.png); }

body#interview.theme3 {
  --theme-color: #e178af;
  background: url(../images/theme3-bg.png); }

body#interview.theme4 {
  --theme-color: #e1b400;
  background: url(../images/theme4-bg.png); }

body#interview.theme5 {
  --theme-color: #6596eb;
  background: url(../images/theme5-bg.png); }