@charset "UTF-8";
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

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

.in_460 {
  display: none; }
  @media screen and (max-width: 460px) {
    .in_460 {
      display: block; } }

.in_767 {
  display: none; }
  @media screen and (max-width: 767px) {
    .in_767 {
      display: block; } }

.in_1023 {
  display: none; }
  @media screen and (max-width: 1023px) {
    .in_1023 {
      display: block; } }

.out_460 {
  display: block; }
  @media screen and (max-width: 460px) {
    .out_460 {
      display: none; } }

.out_767 {
  display: block; }
  @media screen and (max-width: 767px) {
    .out_767 {
      display: none; } }

.out_1023 {
  display: block; }
  @media screen and (max-width: 1023px) {
    .out_1023 {
      display: none; } }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: "Noto Serif JP", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  line-height: 1.5; }

body {
  position: relative; }

header {
  width: 100%; }

footer {
  position: absolute;
  left: 0px;
  bottom: 15px;
  filter: brightness(0.5); }
  footer p {
    color: #fff; }

.top_wrap {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  line-height: 1; }
  .top_wrap .inner_wrap {
    position: fixed;
    left: 0px;
    top: 0px;
    transform: translateX(100%);
    width: calc( 100vw - 20px);
    height: calc( 100vh - 20px);
    transition: .3s;
    background-color: #dc97bc;
    border: 10px solid #237a3e; }
    .top_wrap .inner_wrap .tags {
      position: absolute;
      top: 60px;
      left: -100px;
      width: 120px;
      height: 40px;
      background-color: #dc97bc;
      display: block;
      cursor: pointer;
      border: 3px solid #237a3e;
      transition: .3s; }
      @media screen and (max-width: 767px) {
        .top_wrap .inner_wrap .tags {
          width: 70px;
          height: 20px;
          left: -70px; } }
      .top_wrap .inner_wrap .tags:hover {
        transform: translateX(-20px); }
        @media screen and (max-width: 767px) {
          .top_wrap .inner_wrap .tags:hover {
            transform: translateX(0px); } }
    .top_wrap .inner_wrap .sns_block {
      display: flex;
      justify-content: center;
      gap: 20px;
      margin-top: 30px; }
      @media screen and (max-width: 767px) {
        .top_wrap .inner_wrap .sns_block {
          justify-content: center; } }
      .top_wrap .inner_wrap .sns_block a {
        width: 50px;
        height: 50px;
        background-color: #dc97bc;
        display: block;
        border-radius: 100%;
        border: 3px solid #237a3e;
        position: relative;
        transition: .3s; }
        .top_wrap .inner_wrap .sns_block a::after {
          content: '';
          display: block;
          width: 80%;
          height: 80%;
          background-color: #237a3e;
          position: absolute;
          top: 50%;
          left: 50%;
          border-radius: 100%;
          transform: translate(-50%, -50%);
          z-index: 2; }
        .top_wrap .inner_wrap .sns_block a span {
          opacity: 1;
          z-index: 3;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-weight: bold;
          color: #dc97bc;
          text-shadow: 1px 1px 0 #237a3e; }
        .top_wrap .inner_wrap .sns_block a:hover {
          scale: 1.2;
          transform: rotate(360deg); }
    .top_wrap .inner_wrap .about_detail {
      text-align: center;
      margin-top: 30px; }
      .top_wrap .inner_wrap .about_detail .name {
        font-size: 30px;
        margin-bottom: 20px; }
      .top_wrap .inner_wrap .about_detail .titles {
        margin-bottom: 20px; }
      .top_wrap .inner_wrap .about_detail .detail .detail_title {
        font-weight: bold;
        margin: 20px 0px 15px; }
      .top_wrap .inner_wrap .about_detail .detail a {
        text-decoration: underline; }
    .top_wrap .inner_wrap .about_image {
      margin: 30px auto 0px;
      display: block;
      width: 20%; }
      @media screen and (max-width: 767px) {
        .top_wrap .inner_wrap .about_image {
          width: 50%; } }
    .top_wrap .inner_wrap.active {
      transform: translateX(0%); }
      .top_wrap .inner_wrap.active .tags {
        left: -20px; }