@charset "utf-8";
/* CSS Document */

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
}
/*-------------intro---------------*/


/* Loading背景画面設定　*/
#splash2 {
	/*fixedで全面に固定*/
  position: fixed;
	width: 100%;
	height: 100%;
	z-index: 999;
	text-align:center;
	color:#fff;
	background-color: #333;
}


#splash {
	/*fixedで全面に固定*/
  position: fixed;
	width: 100%;
	height: 100%;
	z-index: 999;
	text-align:center;
	background-image: url(../img/entrance.jpg);
	background-size:cover;
	
}

/* Loading画像中央配置　*/
#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/
#splash_logo img {
}

/* fadeUpをするアイコンの動き */

.fadeUp{
animation-name: fadeUpAnime;
animation-duration:3s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}




/*----------main--------------*/
.box {
	height: 100vh;
	width: 100%;
	display:block;
}
.bow {
	height:50vh;
	background-color:#E07B73;
}
.momi {
	height:50vh;
	background-color:#2F4264;
}

.bowwow_linkbox, .momimomi_linkbox {
	text-align:center;
	display:block;}
	
.bowwow_linkbox a {
	background-color:#2F4264;
	border:#2F4264 1px solid;
	padding:15px;
	color:#E07B73;
	font-size:24px;
	font-weight:bold;
	text-decoration: none;
    /*アニメーションの起点とするためrelativeを指定*/
    position: relative;
	overflow: hidden;
    /*アニメーションの指定*/   
    transition: ease .2s;
}
.bowwow_link {
  position: relative;
  z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
}
.bowwow_linkbox a:hover .bowwow_link{
  color:#2F4264;
}
/*== 背景が流れる（左から右） */
.bowwow_linkbox a:before {
  content: '';
    /*絶対配置で位置を指定*/
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
    /*色や形状*/
  background:#E07B73;/*背景色*/
  width: 100%;
  height: 100%;
    /*アニメーション*/
  transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
  transform: scale(0, 1);
  transform-origin: right top;
}
/*hoverした際の形状*/
.bowwow_linkbox a:hover:before{
  transform-origin:left top;
  transform:scale(1, 1);
}


.momimomi_linkbox a {
	background-color:#E07B73;
	border:#E07B73 1px solid;
	padding:15px;
	color:#2F4264;
	font-size:24px;
	font-weight:bold;
	text-decoration: none;
    /*アニメーションの起点とするためrelativeを指定*/
    position: relative;
	overflow: hidden;
    /*アニメーションの指定*/   
    transition: ease .2s;
	}
.momimomi_link {
  position: relative;
  z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
}
.momimomi_linkbox a:hover .momimomi_link{
  color:#E07B73;
}
/*== 背景が流れる（左から右） */
.momimomi_linkbox a:before {
  content: '';
    /*絶対配置で位置を指定*/
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
    /*色や形状*/
  background:#2F4264;/*背景色*/
  width: 100%;
  height: 100%;
    /*アニメーション*/
  transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
  transform: scale(0, 1);
  transform-origin: right top;
}
/*hoverした際の形状*/
.momimomi_linkbox a:hover:before{
  transform-origin:left top;
  transform:scale(1, 1);
}
	
	
	
.arrow_left {
	padding-right:20px;}
.arrow_left::before {
  content: "◀";}
.arrow_right {
	padding-left:20px;}
.arrow_right::after {
  content: "▶";}






 @media all and (min-width: 45rem) {
.wrapper {
 display: flex;
}
.bow {
 height:100vh;
}
.momi {
 height:100vh;
}
.img_box {
 display: flex;
align-items: start;
justify-content: center;}
}