@charset "UTF-8";
/* CSS Document */
._pc {
  display: block; }
  @media all and (max-width: 640px) {
    ._pc {
      display: none; } }

._sp {
  display: none; }
  @media all and (max-width: 640px) {
    ._sp {
      display: inline-block; } }

/*def end*/
/*share*/
::selection {
  background: #f5c685; }

::-moz-selection {
  background: #f5c685; }

html, body {
  height: 100%; }

img {
  max-width: 100%;
  vertical-align: bottom; }

*, *::before, *::after {
  box-sizing: border-box; }

a {
  text-decoration: none;
  color: black; }
  a:hover {
    text-decoration: underline; }

li {
  list-style-type: none; }

dl, dt, dd, ul, li {
  margin: 0;
  padding: 0; }

h1, h2, h3, h4, p {
  padding: 0;
  margin: 0;
  font-size: 1em; }

body {
  font-family: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Meiryo UI", "Meiryo", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "ＭＳ ゴシック", "MS Gothic", sans-serif;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -o-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: #fffff8;
  background: rgba(229, 255, 57, 0.2);
  background: #f5c685;
  color: rgba(0, 0, 0, 0.7); }

#wrapper {
  width: 100%;
  min-width: 1150px;
  max-width: 1150px;
  position: relative;
  background: #fffff8;
  overflow: hidden; }
  @media all and (max-width: 768px) {
    #wrapper {
      min-width: 0; } }
  @media all and (min-width: 1150px) {
    #wrapper {
      margin: 0 auto; } }

header {
  padding: 80px 1em 0 4em;
  position: fixed;
  top: 0;
  right: 0;
  width: 400px;
  height: 100%; }
  @media all and (max-width: 1150px) {
    header {
      right: auto;
      left: 750px; } }
  @media all and (min-width: 1150px) {
    header {
      transform: translateX(575px);
      right: 50%; } }
  header #header {
    margin-bottom: 3em; }
    header #header h1 {
      margin-bottom: .75em; }
    header #header .subheader {
      font-weight: bold;
      font-size: .65em; }
  header #illust {
    position: absolute;
    bottom: 2.5em;
    right: 4em;
    width: 70%; }
  header::before {
    content: "";
    background: #0E5B6C;
    width: 1.5em;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -2; }
  header::after {
    content: "";
    background: #e9ff00;
    width: .25em;
    height: 100%;
    position: absolute;
    top: 0;
    right: 1.5em;
    z-index: -1; }
  @media all and (max-width: 768px) {
    header {
      left: auto;
      padding: 0;
      position: relative;
      top: auto;
      width: 100%;
      height: auto;
      margin: 0 auto;
      padding: 40px 5%;
      padding-top: 9vh; }
      header::before {
        width: 100%;
        height: 1em; }
      header::after {
        width: 100%;
        height: .25em;
        left: 0;
        top: .25em; }
      header #illust {
        position: relative;
        bottom: auto;
        right: auto;
        width: 80%;
        margin-left: auto; } }

nav#global_nav {
  font-family: "Noto Serif JP", serif; }
  nav#global_nav dl {
    overflow: hidden;
    margin-bottom: 1em;
    line-height: 1.5em;
    padding-left: .2em; }
    nav#global_nav dl a {
      display: block;
      color: #738B85;
      position: relative;
      display: inline-block;
      text-decoration: none;
      transition: .5s; }
      nav#global_nav dl a::after {
        position: absolute;
        bottom: 0;
        left: 0;
        content: '';
        width: 100%;
        height: 100%;
        background: #e9ff00;
        transform: scale(0, 1);
        transform-origin: left top;
        transition: .3s;
        z-index: -1; }
      nav#global_nav dl a:hover {
        text-decoration: none;
        transform: translateX(5px); }
      nav#global_nav dl a:hover::after {
        transform: scale(1, 1); }
    nav#global_nav dl dt {
      float: left;
      font-size: .75em; }
      nav#global_nav dl dt::after {
        content: "…";
        margin: 0 .5em; }
    nav#global_nav dl dd {
      float: left; }
      nav#global_nav dl dd div {
        font-size: .8em;
        padding-left: 1.5em;
        position: relative; }
        nav#global_nav dl dd div::before {
          width: 1em;
          height: 1px;
          position: absolute;
          content: "";
          background: rgba(115, 139, 133, 0.5);
          top: 50%;
          left: 0; }
  @media all and (max-width: 768px) {
    nav#global_nav {
      margin-bottom: 2em; } }

#content {
  width: 750px; }
  @media all and (max-width: 768px) {
    #content {
      width: 100%;
      min-width: 0;
      padding-right: 0; } }
  #content section {
    width: 80%;
    margin: 0 auto;
    padding: 80px 0; }
    @media all and (max-width: 768px) {
      #content section {
        padding: 20px 0;
        width: 90%; } }
    #content section .subtitle {
      font-weight: bold;
      font-size: .8em;
      line-height: 2em; }
      #content section .subtitle li:nth-child(1) {
        margin-bottom: 2em; }
    #content section .title_area {
      margin-bottom: 6em; }
      #content section .title_area h2 {
        font-weight: normal;
        display: inline-block;
        font-family: "Noto Serif JP", serif;
        font-size: 2.5em;
        background: #e9ff00;
        margin-bottom: 2em;
        margin-left: -.15em;
        letter-spacing: .1em; }
        #content section .title_area h2 span {
          font-size: .5em;
          display: inline-block;
          transform: translateY(-0.75em); }
      @media all and (max-width: 768px) {
        #content section .title_area {
          margin-bottom: 2em; }
          #content section .title_area h2 {
            font-size: 1.25em;
            margin-bottom: 1em; } }
    #content section hr.line {
      border: none;
      height: 1px;
      width: 100%;
      width: calc(100% - 1em);
      margin: 1em 0 6em;
      position: relative;
      border-bottom: thin dotted rgba(115, 139, 133, 0.5); }
      #content section hr.line::after {
        color: #738B85;
        content: "♪";
        position: absolute;
        top: -.5em;
        right: -1em; }
      @media all and (max-width: 768px) {
        #content section hr.line {
          margin-bottom: 2em; } }
    #content section hr.circle, #content section hr.circle::before, #content section hr.circle::after {
      height: 5px;
      width: 5px;
      border-radius: 50%;
      background: gray;
      transform: translateX(-5%); }
    #content section hr.circle {
      border: none;
      margin-bottom: 5em;
      position: relative; }
      #content section hr.circle::before {
        position: absolute;
        left: -1em;
        content: ""; }
      #content section hr.circle::after {
        position: absolute;
        left: 1em;
        content: ""; }
      @media all and (max-width: 768px) {
        #content section hr.circle {
          margin-bottom: 3em; } }
    #content section .article_wrapper h3 {
      margin-bottom: 3em;
      font-family: "Noto Serif JP", serif;
      font-size: 1.25em;
      line-height: 1.5em;
      color: #0E5B6C;
      text-align: right; }
      @media all and (max-width: 768px) {
        #content section .article_wrapper h3 {
          text-align: left; } }
    #content section .article_wrapper .subtitle {
      margin-bottom: 3em; }
    #content section .article_wrapper p {
      font-size: .8em;
      line-height: 2em;
      margin-bottom: 3em;
      text-align: justify; }
    #content section .article_wrapper a.barlink {
      text-indent: 0;
      position: relative;
      display: inline-block;
      text-decoration: none;
      transition: .5s;
      margin-left: 1.5em;
      color: rgba(0, 0, 0, 0.7);
      border-bottom: thin solid #738B85; }
      #content section .article_wrapper a.barlink::after {
        position: absolute;
        bottom: 0;
        left: 0;
        content: '';
        width: 100%;
        height: 100%;
        background: #e9ff00;
        transform: scale(0, 1);
        transform-origin: left top;
        transition: .3s;
        z-index: -1; }
      #content section .article_wrapper a.barlink:hover {
        text-decoration: none;
        transform: translateX(5px); }
      #content section .article_wrapper a.barlink:hover::after {
        transform: scale(1, 1); }
      #content section .article_wrapper a.barlink::before {
        width: 1em;
        height: 1px;
        position: absolute;
        content: "";
        background: rgba(115, 139, 133, 0.5);
        top: 50%;
        left: -1.5em; }
    #content section .article_wrapper .figure {
      width: 45%;
      margin-bottom: 4em;
      text-align: center; }
      #content section .article_wrapper .figure.half img {
        width: 40%; }
      #content section .article_wrapper .figure.right {
        margin-left: auto;
        margin-bottom: 2em; }
      #content section .article_wrapper .figure.center {
        width: 100%; }
    #content section .article_wrapper .column {
      overflow: hidden;
      margin-bottom: 3em; }
      #content section .article_wrapper .column p {
        margin-bottom: 2em;
        text-indent: 1em; }
        #content section .article_wrapper .column p._img {
          text-indent: 0; }
          @media all and (max-width: 768px) {
            #content section .article_wrapper .column p._img {
              text-align: center; }
              #content section .article_wrapper .column p._img img {
                width: 75%; } }
      #content section .article_wrapper .column b {
        font-weight: normal;
        background: rgba(245, 198, 133, 0.5); }
      @media all and (min-width: 768px) {
        #content section .article_wrapper .column._vertical {
          -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
          display: inline-block;
          width: 100%;
          /*                    column-count: 2;
          column-gap: 4em;*/ }
          #content section .article_wrapper .column._vertical p {
            margin-bottom: 0;
            margin-left: 1em;
            height: 20em;
            text-align: justify;
            text-justify: inter-ideograph; }
            #content section .article_wrapper .column._vertical p._img {
              margin-right: 2em; }
          #content section .article_wrapper .column._vertical i {
            -webkit-text-combine: horizontal;
            -ms-text-combine-horizontal: all;
            text-combine-upright: all; }
          #content section .article_wrapper .column._vertical._low p {
            height: 18em; }
          #content section .article_wrapper .column._vertical._high p {
            height: 24em; }
          #content section .article_wrapper .column._vertical._two {
            column-count: 2;
            column-gap: 4em;
            column-fill: auto;
            column-rule: thin dotted rgba(115, 139, 133, 0.5); }
          #content section .article_wrapper .column._vertical._three {
            column-count: 3;
            column-gap: 4em;
            column-fill: auto;
            column-rule: thin dotted rgba(115, 139, 133, 0.5); } }
      #content section .article_wrapper .column.separate {
        overflow: hidden; }
        #content section .article_wrapper .column.separate ._left {
          margin-right: 10%; }
        #content section .article_wrapper .column.separate ._left, #content section .article_wrapper .column.separate ._right {
          float: left;
          width: 45%;
          margin-bottom: 1em; }
          #content section .article_wrapper .column.separate ._left dl, #content section .article_wrapper .column.separate ._right dl {
            font-size: .8em; }
            #content section .article_wrapper .column.separate ._left dl dt, #content section .article_wrapper .column.separate ._right dl dt {
              font-weight: bold;
              margin-bottom: .25em; }
              #content section .article_wrapper .column.separate ._left dl dt.normal, #content section .article_wrapper .column.separate ._right dl dt.normal {
                font-weight: normal; }
            #content section .article_wrapper .column.separate ._left dl dd, #content section .article_wrapper .column.separate ._right dl dd {
              margin-bottom: 1em;
              line-height: 1.75em; }
        @media all and (max-width: 768px) {
          #content section .article_wrapper .column.separate ._left, #content section .article_wrapper .column.separate ._right {
            float: none;
            width: 75%; } }
      #content section .article_wrapper .column._1 {
        width: 70%; }
      #content section .article_wrapper .column._2 {
        column-count: 2;
        column-gap: 4em;
        column-fill: balance;
        column-rule: thin dotted rgba(115, 139, 133, 0.5);
        /*
                            .column_wrapper {
                                width: 45%;
                                float: left;
                                margin-right: 7.5%;
                                &:nth-child(2n) {
                                    margin-right: 0;
                                }
                                &:nth-child(2n-1) {
                                    p:last-child {
                                        &::after {
                                        }
                                    }
                                }
                            }
        */ }
      #content section .article_wrapper .column._3 {
        column-count: 3;
        column-count: 2;
        column-gap: 4em;
        column-fill: balance;
        column-rule: thin dotted rgba(115, 139, 133, 0.5); }
      @media all and (max-width: 768px) {
        #content section .article_wrapper .column._2, #content section .article_wrapper .column._3 {
          column-count: 1; } }
    @media all and (max-width: 768px) {
      #content section .article_wrapper h3 {
        margin-bottom: 1em;
        font-size: 1em; }
      #content section .article_wrapper .figure {
        width: 80%;
        margin: 0 auto 1.5em; }
        #content section .article_wrapper .figure.half img {
          width: 100%; }
        #content section .article_wrapper .figure.center {
          max-width: 80%;
          margin: 0 auto 1.5em; }
      #content section .article_wrapper .column {
        margin-bottom: 2em; }
        #content section .article_wrapper .column p {
          margin-bottom: 1.5em; } }

footer {
  text-align: right;
  margin-top: 10em;
  font-size: .7em; }

input[type="text"], textarea {
  background: #F1F1F1;
  width: 100%;
  font-size: 12px;
  margin: 0 auto;
  border: none;
  padding: 10px;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out; }
  input[type="text"]:focus, textarea:focus {
    outline: none;
    color: black;
    background: lightgray; }

textarea {
  min-height: 100px; }

button {
  width: 70%;
  padding: 15px;
  margin: 0 auto 20px;
  border: none;
  background: black;
  color: white;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  border: 3px black solid;
  cursor: pointer; }
  button:hover {
    background: white;
    color: #333; }

/*# sourceMappingURL=base.css.map */