@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700&display=swap");
@import url("https://fonts.googleapis.com/css?family=Marcellus&display=swap");
html,
body {
  width: 100%;
  height: 100%; }

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%; }

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

body {
  font-family: 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", HGS明朝E, メイリオ, Meiryo, serif;
  font-weight: 400;
  font-size: 10pt;
  line-height: 20pt;
  color: #333;
  text-align: center;
  background-color: #fff; }
  body.fixed {
    position: fixed;
    width: 100%;
    height: 100%; }
  body .loader {
    width: 100%;
    height: 100vh;
    background-color: #fff;
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 999999; }
    body .loader.fadeout {
      -webkit-animation: fadeOut 3s;
              animation: fadeOut 3s;
      -webkit-animation-fill-mode: both;
              animation-fill-mode: both; }

a {
  color: #000;
  text-decoration: none;
  cursor: pointer; }
  a:visited {
    color: #000;
    text-decoration: none;
    cursor: pointer; }
  a:hover, a:active, a.active {
    color: #666; }

/* for bg image */
h1 a,
h2,
h3,
h4 span {
  text-align: left;
  text-indent: 100%;
  white-space: nowrap;
  background-repeat: no-repeat;
  background-position: left top;
  display: block;
  overflow: hidden; }

#link li a,
#link li span,
#link li strong {
  text-align: left;
  text-indent: 100%;
  white-space: nowrap;
  background-repeat: no-repeat;
  background-position: left top;
  display: block;
  overflow: hidden; }

.btn a {
  text-align: left;
  text-indent: 100%;
  white-space: nowrap;
  background-repeat: no-repeat;
  background-position: left top;
  display: block;
  overflow: hidden; }

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

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none; }
  select::-ms-expand {
    display: none; }

/* loading */
span.load {
  background-color: #fff;
  display: block;
  position: fixed;
  z-index: 999;
  -webkit-transition: all 2s ease-out;
  transition: all 2s ease-out; }
  span.load.frame-t {
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px; }
  span.load.frame-r {
    width: 100%;
    height: 100vh;
    right: 0px;
    top: 0px; }
  span.load.frame-b {
    width: 100%;
    height: 100%;
    left: 0px;
    bottom: 0px; }
  span.load.frame-l {
    width: 100%;
    height: 100vh;
    left: 0px;
    top: 0px; }

.loaded span.load.frame-t {
  height: 10px; }

.loaded span.load.frame-r {
  width: 10px; }

.loaded span.load.frame-b {
  height: 10px; }

.loaded span.load.frame-l {
  width: 10px; }

/* header */
header {
  position: fixed;
  right: 40px;
  top: 25px;
  z-index: 1099;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }
  header div.btn {
    width: 25px;
    margin: 0 0 0 20px; }
    header div.btn a {
      background-image: url(../images/logo_insta_w.png);
      background-size: contain;
      height: 25px;
      -webkit-transition: opacity 0.3s ease-out;
      transition: opacity 0.3s ease-out; }
      header div.btn a:hover {
        opacity: 0.6; }

.scrolling header div.btn a {
  background-image: url(../images/logo_insta_g.png); }

header p {
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-size: 1em;
  line-height: 100%;
  letter-spacing: 0.1em; }
  header p a {
    color: #fff; }
    header p a:visited {
      color: #fff; }
    header p a:hover {
      color: #fff;
      opacity: 0.7; }

.scrolling header p {
  color: #111; }
  .scrolling header p a {
    color: #333; }
    .scrolling header p a:visited, .scrolling header p a:hover {
      color: #333; }

/* menuhandle */
#handle {
  width: 30px;
  height: 30px;
  margin: 0px;
  position: fixed;
  left: 35px;
  top: 35px;
  -webkit-transition: all 0.5s ease-in;
  transition: all 0.5s ease-in;
  z-index: 99999;
  overflow: hidden;
  cursor: pointer; }

#handle div {
  width: 40px;
  height: 24px;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  position: absolute;
  left: -5px;
  top: 3px;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in; }

#handle:hover div {
  top: 6px; }

.active #handle div {
  top: 6px;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg); }

#handle div span {
  width: 100%;
  height: 2px;
  background-color: #fff;
  display: block;
  position: absolute;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in; }
  #handle div span:nth-child(1) {
    top: 0px; }
  #handle div span:nth-child(2) {
    top: 11px; }
  #handle div span:nth-child(3) {
    top: 22px; }

.scrolling #handle span {
  background-color: #333; }

#handle:hover div span {
  background-color: #a477b2; }
  #handle:hover div span:nth-child(1) {
    top: 0px; }
  #handle:hover div span:nth-child(2) {
    top: 8px; }
  #handle:hover div span:nth-child(3) {
    top: 16px; }

.active #handle div span {
  height: 2px;
  margin: 0px;
  background-color: #333; }
  .active #handle div span:nth-child(1) {
    top: 9px;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg); }
  .active #handle div span:nth-child(2) {
    opacity: 0; }
  .active #handle div span:nth-child(3) {
    top: 9px;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg); }

.active #handle:hover div span {
  background-color: #a477b2;
  top: 9px; }

/* navi */
nav {
  width: 100%;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.95);
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: 1100;
  overflow: hidden;
  display: none; }
  nav .inner {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    opacity: 0;
    -webkit-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in; }

.active nav .inner {
  opacity: 1; }

nav .inner h2 {
  background-image: url(../images/logo.png);
  background-size: contain;
  width: 160px;
  height: 54px;
  margin: 0 auto 50px auto; }

nav .inner .volume {
  width: 990px;
  margin: 0 auto 25px auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-line-pack: stretch;
      align-content: stretch;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch; }
  nav .inner .volume div {
    color: #999;
    text-align: left;
    width: 280px;
    padding: 25px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box; }
    nav .inner .volume div a {
      color: #333;
      display: block;
      cursor: pointer; }
      nav .inner .volume div a:hover {
        text-decoration: underline; }
  nav .inner .volume dl dt {
    font-style: italic;
    line-height: 100%;
    margin-bottom: 10px; }
  nav .inner .volume dl dd {
    font-size: 1.2rem;
    line-height: 2rem; }

nav .inner ul {
  position: relative;
  z-index: 333; }
  nav .inner ul.menu {
    margin: 0 auto 50px auto; }
  nav .inner ul li {
    font-family: "Marcellus", serif;
    font-size: 1.2rem;
    line-height: 100%;
    margin-bottom: 15px; }
    nav .inner ul li:last-child {
      margin: 0px; }
    nav .inner ul li a:hover {
      text-decoration: underline; }

#global_navigation .view_more {
  display: none; }

#global_navigation .view_update {
  display: none; }

/* Archives */
#archives {
  max-width: 1000px;
  width: 100%;
  margin: 60px auto; }
  @media only screen and (max-width: 414px) {
    #archives {
      padding: 0 20px;
      -webkit-box-sizing: border-box;
              box-sizing: border-box; } }
  #archives h3 {
    background: url("../../common/images/archives.svg");
    background-repeat: no-repeat;
    width: 97px;
    height: 19px;
    margin-bottom: 70px; }
    @media only screen and (max-width: 414px) {
      #archives h3 {
        width: 100px;
        height: 24px;
        background-position: 0 0; } }
  #archives nav {
    width: 100%;
    height: auto;
    background-color: transparent;
    position: static;
    left: initial;
    top: initial;
    z-index: 0;
    overflow: visible;
    display: block; }
  #archives .inner {
    opacity: 1; }
    @media only screen and (max-width: 414px) {
      #archives .inner {
        padding: 0; } }
    #archives .inner .volume {
      width: 100%;
      margin: 0;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between; }
      #archives .inner .volume div {
        padding: 0;
        margin-bottom: 84px; }
        @media only screen and (max-width: 414px) {
          #archives .inner .volume div {
            margin: 0 0 50px; } }
      #archives .inner .volume dl dt {
        text-align: left;
        text-indent: 100%;
        white-space: nowrap;
        background-position: 0 0;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: block;
        overflow: hidden;
        margin-bottom: 13px;
        border-bottom: 1px solid transparent; }
  #archives dt.vol1 {
    background: url("../images/vol01.svg");
    width: 41px;
    height: 13px; }
  #archives dt.vol2 {
    background: url("../images/vol02.svg");
    width: 48px;
    height: 13px; }
  #archives dt.vol3 {
    background: url("../images/vol03.svg");
    width: 48px;
    height: 13px; }
  #archives dt.vol4 {
    background: url("../images/vol04.svg");
    width: 48px;
    height: 13px; }
  #archives dt.vol5 {
    background: url("../images/vol05.svg");
    width: 48px;
    height: 13px; }
  #archives dt.vol6 {
    background: url("../images/vol06.svg");
    width: 48px;
    height: 13px; }
  #archives .inner .volume dl dd {
    font-size: 24px; }
    @media only screen and (max-width: 414px) {
      #archives .inner .volume dl dd {
        font-size: 17px;
        line-height: 25px;
        text-align: left; } }
  #archives .volume > div {
    color: #333;
    opacity: 0.5;
    width: auto;
    min-width: 25%; }
    #archives .volume > div.active {
      opacity: 1; }
  #archives .view_more {
    text-align: left;
    text-indent: 100%;
    white-space: nowrap;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: block;
    overflow: hidden;
    background-image: url("../images/view_more.svg");
    width: 99px;
    height: 14px;
    margin-top: 20px;
    border-bottom: 1px solid transparent; }
    @media only screen and (max-width: 414px) {
      #archives .view_more {
        margin-top: 13px; } }
  #archives .view_update {
    display: block;
    margin-top: 20px;
    border-bottom: 1px solid transparent;
    line-height: 1; }
    @media only screen and (max-width: 414px) {
      #archives .view_update {
        margin-top: 13px;
        text-align: left; } }
    #archives .view_update img {
      width: auto; }

@media (hover: hover) {
  #archives a:hover dt {
    border-bottom: 1px solid #333; }
  #archives a:hover .view_more {
    border-bottom: 1px solid #333; }
  #archives a:hover .view_update {
    border-bottom: 1px solid #333; } }

/* container */
#container {
  width: 100%;
  min-width: 1280px;
  padding: 0px;
  margin: 0 auto 120px auto;
  height: auto; }
  #container #visual {
    width: 100%;
    height: 100vh;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative; }

#staff {
  font-family: "Montserrat", sans-serif;
  font-weight: 400; }

#container #look {
  width: 100%;
  margin: 0 auto 130px auto; }
  #container #look ul.credit {
    text-align: left; }
  #container #look .ph {
    opacity: 1;
    -webkit-transition: opacity 1s ease-out;
    transition: opacity 1s ease-out; }
    #container #look .ph.active {
      opacity: 1; }

/* page_navigation */
#page_navigation {
  max-width: 1000px;
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 60px auto;
  border: 1px solid #cccccc;
  border-width: 1px 0;
  padding: 20px 15px; }
  @media only screen and (max-width: 414px) {
    #page_navigation {
      width: auto;
      margin: 20px; } }
  #page_navigation ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    line-height: 1; }
  #page_navigation a {
    display: block;
    -webkit-transition: 0.5s;
    transition: 0.5s; }
  #page_navigation .disabled {
    opacity: 0.3; }
  #page_navigation .top img {
    width: 115px;
    height: 10px; }
  #page_navigation .prev img {
    width: 37px;
    height: 10px; }
  #page_navigation .next img {
    width: 38px;
    height: 10px; }

@media (hover: hover) {
  #page_navigation a:hover {
    opacity: 0.5; } }

/* footer */
footer {
  width: 100%;
  padding: 0 0 10px 0; }
  footer h3 {
    width: 160px;
    height: 54px;
    margin: 0 auto 50px auto;
    background-image: url(../images/logo.png);
    background-size: contain; }

#link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }

footer #link {
  margin: 0 auto 30px auto; }

footer p {
  font-family: "Montserrat", sans-serif;
  margin: 0 auto 35px auto; }

footer .btn.pagetop {
  width: 100%; }
  footer .btn.pagetop a {
    width: 100%;
    height: 35px;
    background-color: #a477b2;
    background-image: url(../images/icon_pagetop.png);
    background-repeat: no-repeat;
    background-position: center center;
    display: block;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out; }
    footer .btn.pagetop a:hover {
      background-color: #d8c7dd; }

/* link */
#link li {
  margin: 0 0 0 26px; }
  #link li:first-child {
    margin: 0px; }
  #link li a {
    text-indent: 100%;
    white-space: nowrap;
    height: 25px;
    background-repeat: no-repeat;
    background-position: center center;
    display: block;
    overflow: hidden;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out; }
    #link li a:hover {
      opacity: 0.5; }
  #link li.insta {
    width: 23px; }
    #link li.insta a {
      background-image: url(../images/logo_insta.svg);
      background-size: 23px; }
  #link li.fb {
    width: 12px; }
    #link li.fb a {
      background-image: url(../images/logo_fb.svg);
      background-size: 12px 25px; }
  #link li.twit {
    width: 26px; }
    #link li.twit a {
      background-image: url(../images/logo_twit.svg);
      background-size: 26px 21px; }
  #link li.ml {
    width: 22px; }
    #link li.ml a {
      background-image: url(../images/logo_mail.svg);
      background-size: 22px 17px; }

/* margin */
.nm {
  margin: 0px !important; }

.mb10 {
  margin-bottom: 10px !important; }

.mb20 {
  margin-bottom: 20px !important; }

.mb30 {
  margin-bottom: 30px !important; }

.mb40 {
  margin-bottom: 40px !important; }

/* clearfix */
.package:after,
ul.link:after,
dl.menu:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden; }

.package,
ul.link,
dl.menu {
  zoom: 100%; }

.package,
ul.link,
dl.menu {
  display: inline-table;
  overflow: hidden; }

/* Hides from IE-mac ￥*/
* html .package,
* html ul.link,
* html dl.menu {
  height: 1%; }

.package,
ul.link,
dl.menu {
  display: block; }

/* End hide from IE-mac */
/* --------------------------------------- Media Queries Smartphone --------------------------------------- */
@media only screen and (max-width: 414px) {
  html {
    font-size: 80%; }
  body {
    font-size: 1rem;
    line-height: 1.8rem;
    -webkit-text-size-adjust: 100%; }
  /* loading */
  .loaded span.load.frame-t {
    height: 5px; }
  .loaded span.load.frame-r {
    width: 5px; }
  .loaded span.load.frame-b {
    height: 5px; }
  .loaded span.load.frame-l {
    width: 5px; }
  header {
    right: 10px;
    top: 10px; }
    header div.btn {
      width: 24px;
      margin: 0 0 0 10px; }
      header div.btn a {
        height: 24px; }
        header div.btn a:hover {
          opacity: 1; }
    header p {
      color: #fff;
      font-family: "Montserrat", sans-serif;
      font-size: 1rem;
      line-height: 100%;
      letter-spacing: 0.1rem; }
      header p a:hover {
        color: #fff;
        opacity: 1; }
  #handle {
    width: 24px;
    height: 24px;
    margin: 0px;
    left: 10px;
    top: 10px; }
  #handle div {
    width: 34px;
    height: 18px;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
    position: absolute;
    left: -5px;
    top: 4px; }
  #handle:hover div {
    top: 4px; }
  .active #handle div {
    top: 6px;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  #handle div span {
    width: 100%;
    height: 2px; }
  #handle:hover div span {
    background-color: #333; }
  #handle div span:nth-child(1),
  #handle:hover div span:nth-child(1) {
    top: 0px; }
  #handle div span:nth-child(2),
  #handle:hover div span:nth-child(2) {
    top: 7px; }
  #handle div span:nth-child(3),
  #handle:hover div span:nth-child(3) {
    top: 14px; }
  .active #handle div span:nth-child(1), .active #handle div span:nth-child(3) {
    top: 4px; }
  .active #handle:hover div span {
    background-color: #333;
    top: 4px; }
  /* nav */
  nav {
    width: 100%;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.9);
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 999;
    overflow: scroll;
    display: none;
    -webkit-overflow-scrolling: touch; }
    nav .inner {
      width: 100%;
      height: auto;
      min-height: 100%;
      padding: 40px 10px 120px 10px;
      display: block;
      opacity: 0;
      -webkit-transition: all 0.5s ease-in;
      transition: all 0.5s ease-in;
      -webkit-box-sizing: border-box;
              box-sizing: border-box; }
  .active nav .inner {
    opacity: 1; }
  nav .inner h2 {
    background-image: url(../images/logo.png);
    background-size: contain;
    width: 100px;
    height: 34px;
    margin: 0 auto 50px auto; }
  nav .inner .volume {
    width: 100%;
    margin: 0 auto 50px auto; }
    nav .inner .volume div {
      text-align: center;
      width: 100%;
      padding: 0px;
      margin: 0 auto 15px auto;
      -webkit-box-sizing: border-box;
              box-sizing: border-box; }
      nav .inner .volume div:last-child {
        margin: 0 auto; }
      nav .inner .volume div a {
        color: #333;
        display: block;
        cursor: pointer; }
        nav .inner .volume div a:hover {
          text-decoration: underline; }
    nav .inner .volume dl dt {
      font-style: italic;
      line-height: 100%;
      margin-bottom: 5px; }
    nav .inner .volume dl dd {
      font-size: 1.2rem;
      line-height: 2rem; }
      nav .inner .volume dl dd br {
        display: none; }
  nav .inner ul {
    position: relative;
    z-index: 333; }
    nav .inner ul.menu {
      margin: 0 auto 45px auto; }
    nav .inner ul li {
      font-family: "Marcellus", serif;
      font-size: 1.2rem;
      line-height: 100%;
      margin-bottom: 15px; }
      nav .inner ul li:last-child {
        margin: 0px; }
      nav .inner ul li a:hover {
        text-decoration: underline; }
  #container {
    min-width: 100%;
    margin: 0 auto 120px auto; }
    #container #visual {
      width: 100%;
      height: 100vh;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      position: relative; }
  #staff {
    font-family: "Montserrat", sans-serif;
    font-weight: 400; }
  #container #look {
    width: 100%;
    margin: 0 auto 130px auto; }
    #container #look ul.credit {
      text-align: left; }
    #container #look .ph {
      opacity: 1;
      -webkit-transition: opacity 1s ease-out;
      transition: opacity 1s ease-out; }
      #container #look .ph.active {
        opacity: 1; }
  /* footer */
  footer {
    width: 100%;
    padding: 0 0 10px 0; }
    footer h3 {
      width: 160px;
      height: 54px;
      margin: 0 auto 50px auto;
      background-image: url(../images/logo.png);
      background-size: contain; }
  #link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; }
  footer #link {
    margin: 0 auto 30px auto; }
  footer p {
    font-family: "Montserrat", sans-serif;
    margin: 0 auto 35px auto; }
  footer .btn.pagetop {
    width: 100%; }
    footer .btn.pagetop a {
      width: 100%;
      height: 35px;
      background-color: #a477b2;
      background-image: url(../images/icon_pagetop.png);
      background-repeat: no-repeat;
      background-position: center center;
      display: block;
      -webkit-transition: all 0.3s ease-out;
      transition: all 0.3s ease-out; }
      footer .btn.pagetop a:hover {
        background-color: #d8c7dd; }
  /* link */
  #link li {
    margin: 0 0 0 26px; }
    #link li:first-child {
      margin: 0px; }
    #link li a {
      text-indent: 100%;
      white-space: nowrap;
      height: 25px;
      background-repeat: no-repeat;
      background-position: center center;
      display: block;
      overflow: hidden;
      -webkit-transition: all 0.3s ease-out;
      transition: all 0.3s ease-out; }
      #link li a:hover {
        opacity: 0.5; }
    #link li.insta {
      width: 23px; }
      #link li.insta a {
        background-image: url(../images/logo_insta.svg);
        background-size: 23px; }
    #link li.fb {
      width: 12px; }
      #link li.fb a {
        background-image: url(../images/logo_fb.svg);
        background-size: 12px 25px; }
    #link li.twit {
      width: 26px; }
      #link li.twit a {
        background-image: url(../images/logo_twit.svg);
        background-size: 26px 21px; }
    #link li.ml {
      width: 22px; }
      #link li.ml a {
        background-image: url(../images/logo_mail.svg);
        background-size: 22px 17px; }
  /* margin */
  .nm {
    margin: 0px !important; }
  .mb10 {
    margin-bottom: 10px !important; }
  .mb20 {
    margin-bottom: 20px !important; }
  .mb30 {
    margin-bottom: 30px !important; }
  .mb40 {
    margin-bottom: 40px !important; } }