@charset "UTF-8";
html {
  font-size: 62.5%;
  /* 16px * 62.5% = 10px */
  width: 100%;
  box-sizing: border-box; }

body {
  color: #fff;
  /* RGB */
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.4rem;
  background: #222;
  background-image: repeating-linear-gradient(to bottom, transparent 7px, rgba(0, 0, 0, 0.8) 9px, rgba(0, 0, 0, 0.8) 13px, transparent 13px); }

img {
  width: 100%;
  height: auto; }

.text-center {
  text-align: center; }

@-webkit-keyframes blink {
  20%,
24%,
55% {
    color: #111;
    text-shadow: none; }
  0%,
19%,
21%,
23%,
25%,
54%,
56%,
100% {
    text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
    color: #fff6a9; } }
@keyframes blink {
  20%,
24%,
55% {
    color: #111;
    text-shadow: none; }
  0%,
19%,
21%,
23%,
25%,
54%,
56%,
100% {
    text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
    color: #fff6a9; } }
.wrapper {
  overflow: hidden; }

h1 {
  font-size: calc(20px + 8vh);
  line-height: calc(20px + 20vh);
  text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
  color: #fff6a9;
  font-family: 'Zen Antique Soft', serif;
  ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  margin: 100px auto 60px;
  animation: blink 12s infinite;
  -webkit-animation: blink 12s infinite; }

#top {
  height: 600px; }
  #top p {
    text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
    color: #fceaac;
    text-transform: uppercase; }

.header {
  position: relative;
  height: 40px; }

.header-inner-right {
  position: fixed;
  margin: 0 auto;
  z-index: 9999;
  top: 2%;
  right: 4%; }

.header-inner-left {
  position: fixed;
  z-index: 9999;
  top: 1%;
  left: 4%; }

.social-flex {
  display: flex; }

.social a i {
  font-size: 2rem;
  color: #fff;
  width: 50px;
  text-align: center; }

.openbtn {
  position: relative;
  cursor: pointer;
  width: 50px;
  height: 50px; }

/*btn-inner*/
.openbtn span {
  display: inline-block;
  transition: all .4s;
  /*アニメーションの設定*/
  position: absolute;
  left: 14px;
  height: 3px;
  border-radius: 2px;
  background: #fff; }
  .openbtn span:nth-of-type(1) {
    top: 15px;
    width: 45%; }
  .openbtn span:nth-of-type(2) {
    top: 23px;
    width: 35%; }
  .openbtn span:nth-of-type(3) {
    top: 31px;
    width: 20%; }

.openbtn.active span:nth-of-type(1) {
  top: 18px;
  left: 18px;
  transform: translateY(6px) rotate(-135deg);
  width: 30%; }
.openbtn.active span:nth-of-type(2) {
  opacity: 0; }
.openbtn.active span:nth-of-type(3) {
  top: 30px;
  left: 18px;
  transform: translateY(-6px) rotate(135deg);
  width: 30%; }

/*active-area*/
#g-nav.panelactive {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh; }

/*丸の拡大*/
.circle-bg {
  position: fixed;
  z-index: 3;
  /*丸の形*/
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #000000e3;
  /*丸のスタート位置と形状*/
  transform: scale(0);
  /*scaleをはじめは0に*/
  left: -50px;
  top: calc(50% - 50px);
  /*50%から円の半径を引いた値*/
  transition: all .6s;
  /*0.6秒かけてアニメーション*/ }

.circle-bg.circleactive {
  transform: scale(50);
  /*クラスが付与されたらscaleを拡大*/ }

/*ナビゲーションの縦スクロール*/
#g-nav-list {
  display: none;
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch; }

#g-nav.panelactive #g-nav-list {
  display: block;
  /*クラスが付与されたら出現*/ }

/*ナビゲーション*/
#g-nav ul {
  opacity: 0;
  position: absolute;
  z-index: 999;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%); }

/*背景が出現後にナビゲーションを表示*/
#g-nav.panelactive ul {
  opacity: 1; }

#g-nav.panelactive ul li {
  animation-name: gnaviAnime;
  animation-duration: 1s;
  animation-delay: .3s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes gnaviAnime {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
/*menuレイアウト設定*/
#g-nav li {
  text-align: center;
  list-style: none; }

#g-nav li a {
  color: #fff;
  text-decoration: none;
  padding: 20px;
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: bold; }

.scrolldown {
  position: absolute;
  bottom: 10px;
  left: 50%; }

/*Scrollテキストの描写*/
.scrolldown span {
  left: 10px;
  bottom: 10px;
  color: #fff;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl; }

/* 丸の描写 */
.scrolldown:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  animation: circlemove 1.6s ease-in-out infinite, cirlemovehide 1.6s ease-out infinite; }

@keyframes circlemove {
  0% {
    bottom: 50px; }
  100% {
    bottom: -5px; } }
@keyframes cirlemovehide {
  0% {
    opacity: 0; }
  50% {
    opacity: 1; }
  80% {
    opacity: 0.9; }
  100% {
    opacity: 0; } }
/* 線の描写 */
.scrolldown:after {
  content: "";
  /*描画位置*/
  position: absolute;
  bottom: 0;
  left: 0;
  /*線の形状*/
  width: 1px;
  height: 50px;
  background: #fff; }

section {
  padding: 0 20px; }

h2 {
  text-align: center;
  font-size: 2.4rem;
  padding: 160px 0 80px;
  text-transform: uppercase;
  letter-spacing: 1rem;
  text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
  color: #fceaac; }

/*h2-anime全共通*/
.bgextend {
  animation-name: bgextendAnimeBase;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  position: relative;
  overflow: hidden;
  opacity: 0; }

@keyframes bgextendAnimeBase {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
/*中の要素*/
.bgappear {
  animation-name: bgextendAnimeSecond;
  animation-duration: 1s;
  animation-delay: 0.6s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes bgextendAnimeSecond {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
/*左から右*/
.bgLRextend::before {
  animation-name: bgLRextendAnime;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 110%;
  height: 100%;
  background-color: #fff;
  /*伸びる背景色の設定*/ }

@keyframes bgLRextendAnime {
  0% {
    transform-origin: left;
    transform: scaleX(0); }
  50% {
    transform-origin: left;
    transform: scaleX(1); }
  50.001% {
    transform-origin: right; }
  100% {
    transform-origin: right;
    transform: scaleX(0); } }
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgLRextendTrigger {
  opacity: 0; }

#about ul {
  padding: 0;
  list-style: none; }
  #about ul li {
    padding: 12px 0; }

#about dl dt {
  margin-bottom: 20px;
  padding: 0;
  font-size: 1.8rem;
  font-weight: 500; }
#about dl dd {
  margin: 8px 0; }

.profile {
  text-transform: uppercase;
  position: relative;
  width: 100%;
  display: inline-block;
  margin-bottom: 2em; }
  .profile:before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -15px;
    /*線の上下位置*/
    display: inline-block;
    width: 60px;
    height: 2px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: #fff;
    border-radius: 2px; }

.kosira01 {
  animation: fuwafuwa 1.5s infinite ease-in-out .2s alternate;
  background: url("../img/kosira01@2x.png") no-repeat center center/100% auto;
  display: inline-block;
  transition: 1s ease-in-out;
  width: 300px;
  height: 400px; }

@keyframes fuwafuwa {
  0% {
    transform: translate(0, 0) rotate(-7deg); }
  50% {
    transform: translate(0, -7px) rotate(0deg); }
  100% {
    transform: translate(0, 0) rotate(7deg); } }
.kosira02 {
  background: url("../img/kosira02@2x.png") no-repeat center center/80% auto;
  display: inline-block;
  width: 300px;
  height: 400px; }

/* books拡大＋text*/
.arrow_box {
  position: relative;
  width: auto;
  height: auto;
  background: #88888770;
  text-align: center;
  border: 2px solid #333;
  color: #FFFFFF;
  font-weight: bold;
  border-radius: 30px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  margin: 60px auto 40px;
  padding: 10px;
  line-height: 3rem; }

.arrow_box:after, .arrow_box:before {
  border: solid transparent;
  content: '';
  height: 0;
  width: 0;
  pointer-events: none;
  position: absolute;
  top: 100%;
  left: 44%; }

.arrow_box:after {
  border-color: rgba(85, 85, 85, 0);
  border-top-width: 5px;
  border-bottom-width: 5px;
  border-left-width: 5px;
  border-right-width: 5px;
  border-top-color: #333; }

.arrow_box:before {
  border-color: rgba(85, 85, 85, 0);
  border-top-width: 10px;
  border-bottom-width: 10px;
  border-left-width: 10px;
  border-right-width: 10px;
  margin-left: -10px;
  border-top-color: #333; }

.big {
  font-size: 3rem; }

.zoomInText {
  position: relative;
  margin-bottom: 80px; }

.zoomInText span.mask {
  position: relative;
  transition: .3s ease-in-out;
  display: block;
  line-height: 0;
  overflow: hidden;
  margin: 0 auto; }

.zoomInText:hover span.mask::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  background: rgba(0, 0, 0, 0.5); }

.zoomInText img {
  transform: scale(1);
  filter: blur(0);
  transition: .3s ease-in-out; }

.zoomInText:hover img {
  transform: scale(1.2);
  filter: blur(2px); }

.zoomInText span.cap {
  opacity: 0;
  transition: .5s ease-in-out;
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  line-height: 1.5; }

.zoomInText:hover span.cap {
  opacity: 1; }

.tab-area {
  display: flex;
  justify-content: center;
  cursor: pointer;
  background-color: #88888770; }
  .tab-area .tab {
    width: 33.333%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: white;
    border-right: 1px solid #555;
    border-left: 1px solid #555;
    text-transform: uppercase; }
  .tab-area .tab.active {
    background-color: #ccc;
    color: #222e3e;
    border: none; }

.content-area {
  font-size: 30px;
  text-align: center; }
  .content-area .content {
    display: none; }
  .content-area .content.show {
    margin-top: 50px;
    display: block; }

.description {
  font-size: 1.6rem; }

/*＝＝＝並び替えボタンのCSS*/
.sort-btn {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0 20px; }

.sort-btn li {
  background: #88888770;
  border-radius: 10px;
  cursor: pointer;
  padding: 10px 20px;
  margin: 0 10px;
  list-style: none;
  text-transform: uppercase; }

.sort-btn li.active {
  background: #88888770; }

/*横幅が480px以下になった際の指定*/
@media only screen and (max-width: 480px) {
  .sort-btn {
    justify-content: space-between; }

  .sort-btn li {
    width: 48%;
    margin: 0 0 10px 0;
    text-align: center; } }
/*＝＝＝Muuriのレイアウトのための調整 */
.grid {
  position: relative; }

/*各画像の横幅などの設定*/
.item {
  display: block;
  position: absolute;
  width: 33%;
  /*横並びで3つ表示*/
  z-index: 1; }

/*内側のボックスの高さが崩れないように維持*/
.item-content {
  position: relative;
  width: 100%;
  height: 100%; }

/*画像の横幅を100%にしてレスポンシブ化*/
.grid img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
  /*画像の下にできる余白を削除*/ }

/*横幅が768px以下になった際の指定*/
@media only screen and (max-width: 768px) {
  .item {
    width: 49.5%;
    /*横並びで2つ表示*/ } }
/*＝＝＝fancyboxサムネイル背景と画像選択時の枠線の指定*/
.fancybox-thumbs {
  background: transparent !important; }

.fancybox-thumbs__list a:before {
  border: 6px solid #FA999B; }

.contactform {
  width: 100%;
  margin: 0 auto 160px;
  padding: 20px 40px 10px 16px;
  background-color: #88888770; }
  .contactform span {
    font-size: 1.3rem; }

/*== 波紋がふわっと広がる */
.btnripple3 {
  /*波紋の基点とするためrelativeを指定*/
  position: relative;
  /*リンクの形状*/
  display: inline-block;
  margin: 10px;
  text-decoration: none;
  color: #fff;
  outline: none;
  font-size: 2.4rem;
  letter-spacing: 1.5; }

/*波形の設定*/
.btnripple3:hover::before {
  content: '';
  /*絶対配置で波形の位置を決める*/
  position: absolute;
  left: 30%;
  top: 0;
  /*波形の形状*/
  border: 1px solid #fff;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  /*はじめは不透明*/
  opacity: 1;
  /*アニメーションの設定*/
  animation: 1s circleanime2 forwards; }

/*波形が広がるアニメーション*/
@keyframes circleanime2 {
  0% {
    transform: scale(0); }
  100% {
    transform: scale(2);
    opacity: 0; } }
/*矢印の設定*/
.btnripple3::after {
  content: '';
  /*絶対配置で矢印の位置を決める*/
  position: absolute;
  top: 20%;
  right: -40px;
  /*矢印の形状*/
  width: 16px;
  height: 16px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg); }

footer {
  padding: 60px 0 24px;
  margin: 0 40px;
  border-top: solid 1px #444; }
  footer .name a {
    font-size: 3rem;
    font-family: 'Zen Antique Soft', serif;
    text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
    color: #fff6a9;
    animation: blink 12s infinite;
    -webkit-animation: blink 12s infinite;
    text-decoration: none; }

.footer-logo img {
  margin: 0 auto;
  width: 40%; }

.footer-social-flex {
  display: flex;
  justify-content: center;
  padding: 20px; }
  .footer-social-flex .social {
    font-size: 0; }

small {
  text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
  color: #fceaac; }

@media screen and (min-width: 900px) {
  h1 {
    font-size: calc(55px + 8vh);
    ms-writing-mode: lr-tb;
    writing-mode: lr-tb;
    letter-spacing: .5em;
    margin: 140px auto 0; }

  .header {
    height: 80px; }

  #top p {
    letter-spacing: 2px;
    font-size: 2rem; }

  h2 {
    font-size: 3rem; }

  #about ul {
    width: 50%; }
    #about ul li {
      font-size: 2.4rem;
      line-height: 1.5em; }

  #about dl {
    width: 50%; }
    #about dl dt {
      font-size: 2.4rem;
      padding-bottom: 20px; }

  .kosira02 {
    margin: 40px 30px 0 0; }

  .flex {
    display: flex;
    justify-content: space-around;
    margin: 60px 0; }

  .reverse {
    /*逆配置*/
    flex-direction: row-reverse; }

  .arrow_box {
    position: relative;
    width: 540px;
    height: 100px; }

  .zoomInText span.mask {
    max-width: 32%;
    margin: 0 auto; }

  .description {
    font-size: 2rem; }

  .contactform {
    width: 60%;
    padding: 32px 30px 16px 12px; }

  .btnripple3 {
    font-size: 3rem; }

  /*矢印の設定*/
  .btnripple3::after {
    top: 30%; }

  footer {
    padding: 80px 0 30px;
    margin: 0; }
    footer .footer-logo img {
      width: 10%; } }
@media screen and (min-width: 1100px) {
  .wrapper {
    width: 1080px;
    margin: 0 auto; } }