@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Marcellus&display=swap');

:root {
  --main_color: #002662;
  --black: rgba(0,0,0,.86);
  --gold: #ffe499;
  --serif: "Hiragino Mincho ProN", "YuMincho", "Yu Mincho", "MS PMincho", serif;
}

body { font-family:  swear-display,"Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif; color: var(--black);background:#f5f5f5;}

/*.serif { font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;}*/
/*.marcellus { font-family: 'Marcellus', serif;}*/

a { text-decoration: none;display: block}
img { max-width: 100%; height: auto;}
strong { font-weight: normal;}
.italic{font-style:italic;}
.visible-xs { display: none;}
.hidden-xs { display: block;}
@media only screen and (max-width: 767px) {
.visible-xs { display: block;}
.hidden-xs { display: none;}
}

/* header
------------------------------------------------------------*/
body.loading{overflow: hidden}
body.load header h1{left:50%;transform:translateX(-50%);font-size:26vw;transition:0.3s}

body.load header {}
body.load header::before{content:"";width:100%;height:100vh;background:yellow;overflow: hidden;transition:0.3s;animation-name:load-bg;animation-delay: 0.8s; animation-duration: 0.6s;animation-fill-mode: forwards;animation-iteration-count: 1;animation-timing-function: ease-in-out;}
@keyframes load-bg {
  0% {height:100vh}	
  100% {height:0}
  }

body.load.twice header{animation:unset!important;}
body.load.twice  h1{animation:unset!important;}
body.load.twice  .hamburger{animation:unset!important;}
body.load.twice  .contact{animation:unset!important;}
body.load.twice  .artworks{animation:unset!important;}


body.load header h1{left:50%;transform:translateX(-50%);font-size:26vw;pointer-events: none; animation-name:load-logo;animation-delay: 1.4s; animation-duration: 0.8s;animation-fill-mode: forwards;animation-iteration-count: 1;animation-timing-function: ease-in-out;}
@keyframes load-logo {
  0% {font-size:26vw;left:50%!important;transform:translateX(-60%)!important;}	
  100% {font-size:21px;left:15px;transform:translateX(0);pointer-events: auto}
  }

body.load .hamburger{transform:translateY(-120vh);opacity:0;animation-name:artworks;animation-delay: 0s; animation-duration: 3s;animation-fill-mode: forwards;animation-iteration-count: 1;animation-timing-function: ease-in-out;}
body.load .contact{transform:translateY(-120vh);opacity:0;animation-name:artworks;animation-delay: 0s; animation-duration: 3s;animation-fill-mode: forwards;animation-iteration-count: 1;animation-timing-function: ease-in-out;}
body.load .artworks{transform:translateY(-120vh);opacity:0;animation-name:artworks;animation-delay: 0s; animation-duration: 3s;animation-fill-mode: forwards;animation-iteration-count: 1;animation-timing-function: ease-in-out;}
@keyframes artworks {
  0% {transform:translateY(100vh);opacity:0;}	
  60% {transform:translateY(100vh);opacity:0;}	
  100% {transform:translateY(0);opacity:1;}
  }

header{position: relative;z-index:1000000}
header h1{font-size:21px;position: fixed;top:15px;left:0px;width:220px!important;}
header .contact{position:fixed;top:22px;right:22px;}
header .contact p{font-size:1.7rem;}
/*　ハンバーガーボタン　*/
.hamburger {display : none;position: fixed;z-index : 3;right : 13px;top: 12px;width : 42px;height: 42px;cursor: pointer;text-align: center;}
.hamburger span {display : block;position: absolute;width: 30px;height: 2px ;left : 6px;background : #555;transition: 0.3s ease-in-out;}
.hamburger span:nth-child(1) {top: 10px;}
.hamburger span:nth-child(2) {top: 20px;}
.hamburger span:nth-child(3) {top: 30px;}

/* ナビ開いてる時のボタン */
.hamburger.active span:nth-child(1) {top : 16px;left: 6px;transform: rotate(-45deg);}
.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {top: 16px;transform: rotate(45deg);}

nav.globalMenuSp {position: fixed;z-index : 2;top  : 0;left : 0;color: #000;background: #fff;text-align: center;transform: translateY(-100%);transition: all 0.6s;width: 100%;display: none}
nav.globalMenuSp ul {margin: 0 auto;padding: 0;width: 100%;}
nav.globalMenuSp ul li {list-style-type: none;padding: 0;width: 100%;border-bottom: 1px solid #fff;}
nav.globalMenuSp ul li:last-child {padding-bottom: 0;border-bottom: none;}
nav.globalMenuSp ul li:hover{background :#ddd;}

nav.globalMenuSp ul li a {display: block;color: #000;padding: 1em 0;text-decoration :none;}

/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {transform: translateY(0%);}


/* footer
------------------------------------------------------------*/
footer{position: fixed;top:50%;right:20px;transform:translate(45%,-50%) rotate(270deg);font-size:11px;color:rgba(0,0,0,.48);}

/* transition
------------------------------------------------------------*/
body.contents-hidden >div >main { opacity: 0; transition: all .4s ease;}


.mask {position: fixed;top: 0;left: 0;display: block;visibility: hidden;width: 100%;height: 100%;transition: transform 1s cubic-bezier(0.165,0.84,0.44,1); transition-property: transform, visibility;transform: rotateY(90deg);transform-origin: right;pointer-events: none;background-color: #f5f8fa;z-index:99999}
.mask.active {visibility: visible; transform: rotateY(0deg); transform-origin: left;  pointer-events: auto;}
 
header{height:30px;position:fixed;width:100%;top:0;left:0;z-index:100;}
header figure{width:220px;}
h1{color:#000;margin-left:20px;font-size:18px;line-height: 8px;display: inline-block;vertical-align: top;width:160px;margin-top:20px;}
h1 a{color:#000;}
header ul{display: flex;flex-wrap: wrap; position: absolute;top:20px;right:30px;}
header ul li{margin-left:15px;}
header ul li a{font-size:14px;letter-spacing: 0;mix-blend-mode: multiply;}
/*　ハンバーガーボタン　*/
.hamburger {
  display : none;
  position: fixed;
  z-index : 3;
  right : 13px;
  top   : 12px;
  width : 42px;
  height: 42px;
  cursor: pointer;
  text-align: center;
}
.hamburger span {
  display : block;
  position: absolute;
  width   : 30px;
  height  : 2px ;
  left    : 6px;
  background : #555;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition   : 0.3s ease-in-out;
  transition        : 0.3s ease-in-out;
}
.hamburger span:nth-child(1) {
  top: 10px;
}
.hamburger span:nth-child(2) {
  top: 20px;
}
.hamburger span:nth-child(3) {
  top: 30px;
}

/* ナビ開いてる時のボタン */
.hamburger.active span:nth-child(1) {
  top : 16px;
  left: 6px;
  background :#fff;
  -webkit-transform: rotate(-45deg);
  -moz-transform   : rotate(-45deg);
  transform        : rotate(-45deg);
}

.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
  top: 16px;
  background :#fff;
  -webkit-transform: rotate(45deg);
  -moz-transform   : rotate(45deg);
  transform        : rotate(45deg);
}

nav.globalMenuSp {
    display: inline-block;
    pointer-events: none;
  position: fixed;
  z-index : 2;
    min-height:100vh;
  top  : 0;
  left : 0;
  color: #fff;
  background: rgba(0,0,0,0.7);
  text-align: center;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s ease, visibility .6s ease;
}

nav.globalMenuSp ul {
  margin: 0 auto;
  padding: 0;
  width: 100%;
    position: absolute;
    top:50%;transform: translateY(-50%);
}

nav.globalMenuSp ul li {
  list-style-type: none;
  padding: 0;
  width: 100%;
  transition: .4s all;
}
nav.globalMenuSp ul li:last-child {
  padding-bottom: 0;
}

nav.globalMenuSp ul li a {
  display: block;
  color: #fff;
  padding: 1em 0;
  text-decoration :none;
}

/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
  opacity: 100;
  visibility:visible;

}

@media screen and (max-width: 767px) {
    .hamburger {display: block;}
    header ul{display: none;}
    nav.globalMenuSp {pointer-events: auto;}
}