.loading {
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,1.0);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 20000;
}

.loading img {
	width: 40px;
	height: 40px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -20px;
	margin-left: -20px;
}


* {
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #fff;
}

body {
  background: #fff;
  height: 100%;
    position: relative;
    min-width: 10%;  /* 中央配置する要素の横幅 */
    min-height: 100px;  /* 中央配置する要素の縦幅 */
	font-family:"a-otf-gothic-bbb-pr6n",'ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic';
}

.moji {
	font-weight: 200;
	text-align: center;
	font-size: 16px;
	display: inline-block;
	margin-right: 3%;
	font-style: normal;
	letter-spacing: 2px;
}
.moji:last-child {
	margin-right: 0%;
}
.moji a{
	color: #FFFFFF;
	text-decoration: none;
}
.logo_box{
	  position: absolute;
	  margin-top: -8%; /* 中央配置する要素の横幅の半分だけ上にずらす */
    margin-left: -30%; /* 中央配置する要素の縦幅の半分だけ左にずらす */
    top: 50%;  /* 要素の上端を中央に */
    left: 50%;  /* 要素の左端を中央に */
    width: 60%;
    height: 20%;
	text-align: center;
}
.box3{
	  position: absolute;
	  margin-top: -5%; /* 中央配置する要素の横幅の半分だけ上にずらす */
    margin-left: -30%; /* 中央配置する要素の縦幅の半分だけ左にずらす */
    top: 70%;  /* 要素の上端を中央に */
    left: 50%;  /* 要素の左端を中央に */
    width: 60%;
    height: 10%;
	text-align: center;
}
.box4{
	  display: none;
}
/*ボタン*/
 
.btn {/*基本*/
	position: relative;
	display: inline-block;
	width:200px;
	padding-top: 1em;
	padding-bottom: 1em;
	cursor: pointer;
	overflow: hidden;
}
.btn:before, 
.btn:after {/*疑似要素を追加*/
  content: "";
  position: absolute;
  left: 0;
  height: 1px;
  width: 100%;
  background: rgba(255,255,255,0.3);
}
.btn:before {/*上下に配置*/
  top: 0;
}
.btn:after {
  bottom: 0;
}
.btn:hover > * > *:before, 
.btn:hover > * > *:after {/*ホバーで発火*/
   transform: translate3d(0, 0, 0);
}
.btn:hover > * > * > *:before, 
.btn:hover > * > * > *:after {
   transform: translate3d(0, 0, 0);
}
.btn > *:before, .btn > *:after {/*アニメーションするボーダーのスタイリング*/
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: 1px;
  background: rgba(255,255,255,0.3);
}
.btn > *:before {/*左右に配置*/
  left: 0;
}
.btn > *:after {
  right: 0;
}
.btn > * > *:before, 
.btn > * > *:after {/*アニメーションするボーダーのスタイリング*/
  content: "";
  position: absolute;
  left: 0;
  z-index: 9;
  height: 1px;
  width: 100%;
  background-color: #6B5373;
}
.btn > * > *:before {
  top: 0;
  transform: translate3d(-105%, 0, 0);
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
 
}
.btn > * > *:after {
  bottom: 0;
  transform: translate3d(105%, 0, 0);
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
 
}
.btn > * > * > *:before, 
.btn > * > * > *:after {
  content: "";
  position: absolute;
  top: 0;
  z-index: 9;
  height: 100%;
  width: 1px;
  background-color: #6B5373;
}
.btn > * > * > *:before {
  left: 0;
  transform: translate3d(0, 105%, 0);
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
 
}
.btn > * > * > *:after {
  right: 0;
  transform: translate3d(0, -105%, 0);
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
/*ボタン終わり*/

/*スマホ*/
@media screen and (max-width: 767px) {
body {
  background: #fff;
  height: 100%;
    position: relative;
    min-width: 100%;  /* 中央配置する要素の横幅 */
    min-height: 100px;  /* 中央配置する要素の縦幅 */
}
.logo_box{
	  position: absolute;
	  margin-top: -10%; /* 中央配置する要素の横幅の半分だけ上にずらす */
    margin-left: -50%; /* 中央配置する要素の縦幅の半分だけ左にずらす */
    top: 45%;  /* 要素の上端を中央に */
    left: 50%;  /* 要素の左端を中央に */
    width: 100%;
    height: 20%;
	text-align: center;
}
.logo_box img{
	  width:80%;
	height:auto;
}
	.box3 {
		display: none;
	}
.box4{
	display: inherit;
	  position: absolute;
  margin-top: -10%; /* 中央配置する要素の横幅の半分だけ上にずらす */
    margin-left: -50%; /* 中央配置する要素の縦幅の半分だけ左にずらす */
    top: 75%;  /* 要素の上端を中央に */
    left: 50%;  /* 要素の左端を中央に */
    width: 100%;
    height: 30%;
	text-align: center;
}
	.moji_sp {
	width: 80%;
	font-weight: 200;
	text-align: center;
	font-size: 16px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 10px;
	padding-top: 0.8em;
	padding-bottom: 0.8em;
	font-style: normal;
	letter-spacing: 2px;
	border: 1px solid rgba(255,255,255,0.3);
}
	.moji_sp a{
	color: #FFFFFF;
	text-decoration: none;
	display: block;
}
}