@charset "utf-8";
/*------------------
style.css
------------------*/

/* header */
.logo{
    max-width:350px;
}
@media only screen and (max-width: 599px) {
  .logo{
      max-width:80%;
  }
}
.logo-sub{
    font-size:.8rem;
    margin-bottom:0;
}

/* archive */
.blog-archives a{
    background: var(--color-bg-default);
    border:2px solid var(--cl-black);
    padding:1.5em;
}
.pagination{
    margin-top:2em;
}
.pagination :where(a, span){
    padding:.5em;
    background:var(--color-bg-default);
    border:2px solid var(--cl-black);
    border-radius: var(--radius-lg);
}
.pagination span{
    border:2px solid transparent;
    background:transparent;
}
@media only screen and (max-width: 599px) {
  .blog-archives a{
    padding:.7em;
  }
}

/* single */
.date-area i{
    padding-left:1em;
}

/* att-fiction */
.att-fiction{
    padding:2em;
    border-radius:6px;
    background: var(--color-bg-default2);
}
.att-fiction p{
    margin-bottom:0;
}
.att-fiction i{
    color:var(--cl-red);
}
@media only screen and (max-width: 599px) {
    .att-fiction{
        padding:1em;
    }
}

/* single next prev post navi */
.post-navigation{
    gap:1em;
}
.post-navigation > div{
    background: var(--color-bg-default);
    border:2px solid var(--cl-black);
    padding:.5em;
    width:50%;
    position: relative;
}
.post-navigation a{
    display: flex;
}
.post-navigation img{
    max-width:100px;
}
.post-navigation .info{
    padding-left:.5em;
}
.post-navigation .dates{
    font-size:.75rem;
}
.post-navigation .title{
    font-size:.9rem;
    margin-bottom:0;
}
.post-navigation .prev-next-icon{
    padding:.4em .8em;
    background: var(--color-primary);
    border:1px solid var(--cl-black);
}
@media only screen and (max-width: 599px) {
    .post-navigation a{
        display: block;
    }
    .post-navigation img{
        max-width:100%;
    }
    .post-navigation .info{
        margin-top:.5em;
        padding-left:0;
    }
    .post-navigation .prev-next-icon{
      position: absolute;
      top:-8px;
      left:-8px;
      border:2px solid var(--cl-black);
    }
    .post-navigation .dates > span{
      display: block;
    }
}

/* sns */
.sns-icons img{
  width:30px;
}

/* menu */
.menu-trigger {
  position: fixed;
  top: 1em;
  right: 1em;
  width: 50px;
  height: 50px;
  z-index: 100;
  appearance: none;
  border: none;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  border:1px solid var(--cl-black);
}
.menu-trigger span {
  display: block;
  position: absolute;
  width: 30px;
  height: 4px;
  background-color: var(--cl-black);
  transition: all 0.4s;
}
.menu-trigger span:nth-child(1) { top: 14px; }
.menu-trigger span:nth-child(2) { top: 22px; }
.menu-trigger span:nth-child(3) { top: 30px; }
.menu-trigger.is-active span:nth-child(1) { transform: translateY(8px) rotate(-45deg); }
.menu-trigger.is-active span:nth-child(2) { opacity: 0; }
.menu-trigger.is-active span:nth-child(3) { transform: translateY(-8px) rotate(45deg); }
nav.nav-wrapper {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100vh;
  background: rgba(255, 255, 255, 0.95);
  transition: all 0.5s;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
}
nav.nav-wrapper.is-active {
  right: 0;
}
nav .menu-links {
  list-style: none;
  padding: 0;
  flex-direction: column;
  align-items: center;
  padding:2em;
  background: var(--color-bg-default);
  border-radius: 6px;
  border:2px solid var(--cl-black);
}

nav .menu-links li {
  margin: 15px 0;
  border-bottom:1px solid var(--cl-black);
}

footer .menu-links {
  width: calc(100% - 6%);
  max-width: 1200px;
  padding: 3% 0; 
  margin-inline: auto;
}

footer .menu-links li {
  padding-right: 1em;
}

footer .menu-links li:after {
  padding-left: 1em;
  content: '／';
}

footer .menu-links li:last-of-type:after {
  display: none;
}

@media only screen and (max-width: 599px) {
  .menu-trigger { 
    top: 1em;
    right: 1em;
  }
  footer .menu-links li {
    padding-right: .3em;
  }
  footer .menu-links li:after {
    padding-left: .3em;
    color:var(--color-primary);
  }
  footer .menu-links li a{
    font-size:var(--text-xs);
  }
}

/* contents-top-link */
.to-contentstop-link{
  position: fixed;
  bottom:2em;
  right:1em;
  width:3em;
  z-index:98;
}
.to-contentstop-link i{
  padding:.1em;
  background:var(--cl-white);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%, -50%);
  font-size:2rem;
}