@charset "UTF-8";

html {
  scroll-behavior: smooth
}

/*----------------------------------------
general
----------------------------------------*/

@import url("//fonts.googleapis.com/css?family=Noto+Sans+JP:400&display=swap");
@import url("//fonts.googleapis.com/css?family=Noto+Sans+JP:500&display=swap");
@import url("//fonts.googleapis.com/css?family=Noto+Sans+JP:600&display=swap");
@import url("//fonts.googleapis.com/css?family=Noto+Sans+JP:700&display=swap");

html{
  font-family:  "Noto Sans JP", univia-pro, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 62.5%;
  line-height: 1.6;
  color: #181d20;
  scroll-behavior: smooth;
}

body {
	background: #fff;
}


.goth {
  font-family:  "Noto Sans JP", univia-pro, -apple-system, BlinkMacSystemFont, sans-serif;
}

.wrapper img {
	width: 100%;
	margin: 0;
	padding: 0;
	height: auto;
	display: block;
	font-size: 0;
	line-height: 0;
	vertical-align: bottom;
}
.wrapper a {
	display: block;
}

.wrapper ul,
.wrapper dl,
.wrapper ol{
  list-style: none;
}
.wrapper ul li,
.wrapper dl dt,
.wrapper dl dd,
.wrapper ol li{
	line-height: 0;
	font-size: 0;
}

.wrapper {
  max-width: 750px;
  margin: 0 auto;
  text-align: center;
  overflow: hidden;
}
.wrapper *{
  position: relative;
  box-sizing: border-box;
}

.wrapper a{
  transition: all ease 0.3s;
}
.wrapper a:hover{
  filter: brightness(1.1)
}

.wrapper video {
  width: 100%;
  height: auto;
}
/*============================
anime
============================*/

.wrapper .anime-01 {
  position: absolute;
  width: calc(690/750*100%);
  top: 32%;
  left: 50%;
  transform: translateX(-50%);
}

.wrapper .anime-02 {
  width: calc(690/750*100%);
  margin: 0 auto;
}

.wrapper .anime-03 {
  position: absolute;
  width: calc(632/750*100%);
  bottom: 0%;
  left: 50%;
  transform: translateX(-50%);
}

.fixed-banner{
  position: fixed;
  width: 100%;
  left:0;
  bottom:0;
}
.fixed-inner {
  max-width: 750px;
  margin: 0 auto;
}
.btn-fixed{
  width: calc(630/750*100%);
  margin: 0 auto;
}


/* ---------------------------------------------
 追従ボタン
--------------------------------------------- */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); display: none; z-index: 100; }
.modal-content { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #000; padding: 20px; border-radius: 5px; width: 90%; max-width: 800px; display: none; z-index: 101; }
.video-container { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; }
.video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.modal-close { position: absolute; top: -30px; right: 0; font-size: 24px; color: #fff; cursor: pointer; border: none; background: none; }
.js-modal-open img { cursor: pointer; }