@charset "UTF-8";

body{
  font-family: 'EB Garamond', serif;
  line-height: 170%;
  font-size:8.5pt;
  color:#000000;
  margin:0;
  letter-spacing: 0.06em;
  width: 100%;
}

a{
  text-decoration:none;
  color: inherit;
  outline: none;
}

a:hover {
  opacity:0.5;
}

.SNS img, .right img, .footer-right img, .footer-right_02 img, #about-logo img, #about-img img {
  width: 100%;
}

#container-index {
	width: 100%;
	height: 100%;
}

/* ---------------------------------------------------------------- *
ムービー
* ---------------------------------------------------------------- */

#video-background, #sp {
  position: fixed;
  left: 0;
  top: 0;
  min-width: 100%;
  width: auto;
  height: auto;
  z-index: -999;
}

/* ---------------------------------------------------------------- *
戻る矢印
* ---------------------------------------------------------------- */

#page-top {
    position: fixed;
    bottom: 50px;
    right: 5%;
    width: 100px;
    z-index: 999;
  }

  /* ボタンの色を変更 */
#page-top img {
    width: 100%;
  }

  /* ボタンをホバーしたときにカーソルを変更 */
  #page-top img:hover {
    opacity: 0.4;
  }


  /* ---------------------------------------------------------------- *
ページ　フェードイン
* ---------------------------------------------------------------- */

#container-index {
   opacity: 0;
   animation-name: fadein-bottom;
   animation-duration: 1.5s;
   animation-timing-function: ease-out;
   animation-fill-mode: forwards;
   animation-delay: 2.5s;
}

@keyframes fadein-bottom {
   0% {
      opacity: 0;
      transform: translateY(20px);
   }
   100% {
      opacity: 1;
      transform: translateY(0);
   }
}


/* ---------------------------------------------------------------- *
メニュー
* ---------------------------------------------------------------- */

#menu {
  position: fixed;
  z-index: 9999;
	font-style: oblique;
	margin-top:2%;
  color:#000000;
  font-size:11pt;
  width:95%;
  height: 5%;
  margin-left:2.5%;
}

.SNS {
  float:left;
  width: 18px;
  margin-right: 20px;
}

.left {
  float:left;
}

.right {
  float:right;
}

#footer {
	font-size:7pt;
	font-style: oblique;
  color:#000000;
}


/* ---------------------------------------------------------------- *
about
* ---------------------------------------------------------------- */

#about-text {
	font-size:11pt;
	text-align: justify;
	line-height: 200%;
	letter-spacing: normal;
	font-family: sans-serif;
}




/* ---------------------------------------------------------------- *
レスポンシブ
* ---------------------------------------------------------------- */
 @media (max-width:750px) {

/* 共通 */


/* メニュー */

#menu {
	margin-top: -90px;
  width:90%;
  height: 40px;
  margin-left:5%;
}

.right {
  width: 60px;
}

.left {
  margin-right: 15px;
}

#footer {
	margin-bottom:2%;
  width:90%;
  height: 85px;
  margin-left:5%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer-left {
	margin-bottom: 10px;
}

.footer-right {
  float:right;
  width: 60px;
  margin-left: 20px;
}

.footer-right_02 {
	float:right;
	width: 25px;
}

/* ムービー */
#video-background {
  display: none;
}

.movie {
  width: 90%;
  height: 0;
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative;
  margin-top:20px;
}

.movie iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

/* アバウト */

.about {
	width: 85%;
    margin: 110px auto 100px auto;
}

#about-logo {
	width: 70%;
    margin-bottom: 40px;
    margin-top: 80px;
    margin-left: auto;
    margin-right: auto;
}

#about-img {
	margin-top: 40px;
    margin-left: auto;
    margin-right: auto;
    width: 65%;
    margin-bottom: 100px;
}

#about-text {
	width: 100%;
	}

/* 戻るボタン */
  #page-top {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 50px;
  }

  #page-top img {
    width: 100%;
  }

  #page-top img:hover {
    opacity: 0.4;
  }

    }


  @media (min-width:751px) {

/* 共通 */

#container-index {
  	position: fixed;
}

/* メニュー */

#menu {
	margin-top:2%;
  width:95%;
  height: 65px;
  margin-left:2.5%;
}

.right {
  width: 100px;
}

.left {
  margin-right: 30px;
}

#footer {
	margin-bottom:2%;
  width:95%;
  height: 60px;
  margin-left:2.5%;
}

.footer-left {
  float:left;
  margin-top: 20px;
}

.footer-right {
  float:right;
  width: 80px;
  margin-left: 20px;
}

.footer-right_02 {
	float:right;
	width: 40px;
}

/* アバウト */

.about {
  padding-top: 250px;
	width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#about-logo {
	width: 500px;
	margin-bottom: 80px;
}

#about-img {
	margin-top:80px;
	width: 250px;
}

#about-text {
	width: 600px;
	}

/* ムービー */
#video-background {
  min-height: 100%;
}

#sp {
  display: none;
}

.movie {
  width: 600px;
  height: 338px;
  margin-top:20px;
}

  }

@media (min-width:1056px) {

    
  }