@charset "UTF-8";

/* 初期設定 */
* {

	margin: 0;
	padding: 0;
	box-sizing: border-box;

}

.clearfix:after {

	content: "";
	display: block;
	clear: both;
	
}

img {

	max-width: 100%;
	height: auto;
	vertical-align: bottom;
	border: none;
	
}

li {

	list-style: none;
	
}

a {

	color: #333;
	text-decoration: none;

}

/*

html * {
	
  visibility: hidden;
  
}

html.wf-active * {

  visibility: visible;
  
}

*/

/* HTML */
html {

	min-width: 320px;
	font-size: 62.5%;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	
}

/* ボディ */
body {
	
	position: relative;
	min-width: 320px;
	font-family: vdl-pengentle, sans-serif;
	font-size: 15.5px;
	line-height: 1.7;
	color: #333;
	letter-spacing: 0.3em;
	overflow-x: hidden;
	overflow-y: hidden;
	-webkit-text-size-adjust: 100%;
	background-image: url('../img/bg.png');
	background-size: cover;
	background-size: 100%;
	background-position: center center;

}

/* メイン */
main {
	
	display: block;

}

/* 内枠 */
.inner {

	width: 92%;
	margin: 0 auto;

}

/* ヘッダー */
header {
	
	padding-top:    3.6em;
	padding-bottom: 1em;

}

/* 見出し１ */
header h1 {

	float: left;
	width: 20.7em;
	line-height: 1;

}

/* ナビ */
header nav {
	
	position: relative;
	z-index: 2;
	float: right;
	margin-right: 17.5%;
	transform: translateY(-1em);

}

header nav ul li {
	
	position: relative;
	display: inline-block;
	margin-left: 1.5em;
	font-size: 30px;

}

header nav ul li a {

	transition: all 0.5s;

}

header nav ul li:hover a {

	color: #D97B43;

}

header nav ul li span {
	
	position: relative;
	
}

header nav ul li.on span:after {
	
	position: absolute;
	left:    15%;
	bottom: -65%;
	content: "";
	width:  70%;
	height: 5px;
	background: #D1CBBC;
	
}


/* 事業内容 */
#business {

	padding-top:    3.5em;
	padding-bottom: 26.1em;

}

#business h2 {
	
	margin-bottom: 1.2em;
	font-size: 30px;

}

#business h2 span {
	
	opacity: 0;
	display: inline-block;
	transition: all 0.8s;

}

#business h2.active span {

	opacity: 1;

}


#business ul li {

	font-size: 30px;
	line-height: 1.9;

}

#business ul li .space {

	display: inline-block;
	margin-left: 2.5em;

}

#business .mirai {

	position: absolute;
	top:   3.5em;
	right: 5em;
	width: 80px;
	z-index: 1;

}

#business .yellow {

	position: absolute;
	top:   -6.5em;
	right: -5.4em;
	width: 320px;

}

#business .red {

	position: absolute;
	bottom: -6.5em;
	right:  -5.5em;
	width: 440px;

}

#business .pink {

	position: absolute;
	bottom:  20em;
	right:   29em;
	width: 430px;

}

#business .orange {

	position: absolute;
	bottom: -12em;
	left:    4.5em;
	width: 480px;

}


/* フッター */
footer {
	
	position: relative;
	padding: 1em 0;
	font-family: 'Noto Serif JP', sans-serif;
	font-size: 18px;
	letter-spacing: 0.18em;

}

footer:after {

	position: absolute;
	top:  0;
	left: 0;
	content: "";
	width:  100%;
	height: 2px;
	background: #444;

}

footer .inner {
	
	width: 1100px;
	margin: 0 auto;
	

}

footer .right {

	float: right;

}

footer .address {

	margin-bottom: 0.7em;

}

footer ul li {
	
	position: relative;
	display: inline-block;
	padding-left:  0.8em;
	padding-right: 0.3em;

}

footer ul li:first-child {

	padding-left: 0;

}

footer ul li:after {

	position: absolute;
	top:  25%;
	left: 0;
	content: "";
	width:  1px;
	height: 60%;
	background: #333;

}

footer ul li:first-child:after {

	width: 0;

}

footer .copy {

	font-size: 18.5px;
	line-height: 2;

}


/* ローディング */
.loading {

	opacity: 1;
  visibility: visible;
	position: fixed;
	top:  0;
	left: 0;
	z-index: 1000;
	width:  100%;
	height: 100vh;
	background: #FCF8EE;
	
}

.loading.active {

  opacity: 0;
  visibility: hidden;
	transition: all 1.5s;

}

.loader {
  
  opacity: 0;
  visibility: hidden;
	position: absolute;
	top:  50%;
	left: calc(50% - 50px);
  width:  100px;
  height: 100px;
  transform: translate(-50%, -50%);
  animation: rotate 1.3s infinite;
  
}

.loader.active1 {

	opacity: 1;
  visibility: visible;
	transition: all 0.2s;

}

.loader.active2 {

  opacity: 0;
  visibility: hidden;
	transition: all 0.6s;

}

.loader:before, .loader:after {

  content: '';
  display: block;
  height: 40px;  
  width:  40px;
  border-radius: 100%;
  box-sizing: border-box;
  
}

.loader:before {
	
	margin-bottom: 10px;
  background: #8AB6C3;
  box-shadow: 60px 0 0 #81A63B;
  animation: ball1 1.3s infinite;
  
}

.loader:after {

  background: #ED7D5E;
  box-shadow: 60px 0 0 #F4D634;
  animation: ball2 1.3s infinite;
  
}

@keyframes rotate {

    0% { transform: rotate(0deg)   scale(0.8); }
   50% { transform: rotate(360deg) scale(1.2); }
  100% { transform: rotate(720deg) scale(0.8); }
  
}

@keyframes ball1 {

   0% {
   
   	box-shadow: 60px 0 0 #81A63B;
   	
  }
  
  50% {
   
    margin-bottom: 0;
    box-shadow: 0 0 0 #81A63B;
    transform: translate(30px, 30px);
    
  }
  
  100% {
  	
  	margin-bottom: 20px;
    box-shadow: 60px 0 0 #81A63B;
    
  }
  
}

@keyframes ball2 {

  0% {
  
    box-shadow: 60px 0 0 #F4D634;
    
  }
  
  50% {
  
  	margin-top: -40px;
    box-shadow: 0 0 0 #F4D634;
    transform: translate(30px, 30px);
    
  }
  
  100% {
  	
  	margin-top: 0;
    box-shadow: 60px 0 0 #F4D634;
    
  }
  
}


/* ナビ */
.menu {

	display: none;

}



@media only screen and (max-width: 1580px) {
	
	/* ナビ */
	header nav {
		
		margin-right: 8%;
		
	}
	
}


/* 中サイズ */
@media only screen and (max-width: 1366px) {

	/* ボディ */
	body {
		
		font-size: 14px;
		letter-spacing: 0.3em;
		
	}
	
	/* 内枠 */
	.inner {
		
		width: 92%;
		
	}
	
	/* ヘッダー */
	header {
		
		padding-top:    3em;
		padding-bottom: 1em;
		
	}
	
	/* 見出し１ */
	header h1 {
		
		float: left;
		width: 16em;
		
	}
	
	/* ナビ */
	header nav {
		
		float: right;
		margin-right: 17.5%;
		transform: translateY(-1em);
		
	}
	
	header nav ul li {
		
		margin-left: 1.5em;
		font-size: 21px;
		
	}
	
	header nav ul li.on span:after {
		
		left:    15%;
		bottom: -65%;
		width:  70%;
		height: 3px;
		
	}
	
	
	/* 事業内容 */
	#business {
		
		padding-top:    2.8em;
		padding-bottom: 19em;
		
	}
	
	#business h2 {
		
		margin-bottom: 1.2em;
		font-size: 21px;
		
	}
	
	#business ul li {
		
		font-size: 21px;
		
	}
	
	#business ul li span {
		
		margin-left: 2.5em;
		
	}
	
	#business .mirai {
		
		top:   2.7em;
		right: 3.8em;
		width: 56px;
		
	}
	
	#business .yellow {
		
		top:   -5em;
		right: -4em;
		width: 230px;
		
	}
	
	#business .red {
		
		bottom: -6.5em;
		right:  -5.5em;
		width: 320px;
		
	}
	
	#business .pink {
		
		bottom:  16em;
		right:   23em;
		width: 300px;
		
	}
	
	#business .orange {
		
		bottom: -8.5em;
		left:    4em;
		width: 330px;
		
	}
	
	
	/* フッター */
	footer {
		
		padding: 0.9em 0;
		font-size: 13.5px;
		letter-spacing: 0.18em;
		
	}
	
	footer:after {
		
		height: 1px;
		
	}
	
	footer .inner {
		
		width: 760px;
		
	}
	
	footer .right {
		
		float: right;
		
	}
	
	footer .address {
		
		margin-bottom: 0.7em;
		
	}
	
	footer ul li {
		
		padding-left:  0.8em;
		padding-right: 0.3em;
		
	}
	
	footer .copy {
		
		font-size: 13.5px;
		
	}

}



@media only screen and (max-width: 1200px) {
	
	/* ナビ */
	header nav {
		
		margin-right: 10%;
		
	}

}



/* iPadPro */
@media only screen and (max-width: 1024px) {

	/* ボディ */
	body {
		
		font-size: 13.5px;
		letter-spacing: 0.3em;
		
	}
	
	/* 内枠 */
	.inner {
		
		width: 92%;
		
	}
	
	/* ヘッダー */
	header {
		
		padding-top:    2.5em;
		padding-bottom: 1em;
		
	}
	
	/* 見出し１ */
	header h1 {
		
		float: left;
		width: 12.5em;
		
	}
	
	/* ナビ */
	header nav {
		
		float: right;
		margin-right: 17.5%;
		transform: translateY(-0.7em);
		
	}
	
	header nav ul li {
		
		margin-left: 1.2em;
		font-size: 15.5px;
		
	}
	
	header nav ul li.on span:after {
		
		left:    15%;
		bottom: -65%;
		width:  70%;
		height: 3px;
		
	}
	
	
	/* 事業内容 */
	#business {
		
		padding-top:    2em;
		padding-bottom: 15em;
		
	}
	
	#business h2 {
		
		margin-bottom: 1.2em;
		font-size: 15.5px;
		
	}
	
	#business ul li {
		
		font-size: 15.5px;
		
	}
	
	#business .mirai {
		
		top:   2.3em;
		right: 3.2em;
		width: 42px;
		
	}
	
	#business .yellow {
		
		top:   -5em;
		right: -4em;
		width: 185px;
		
	}
	
	#business .red {
		
		bottom: -6.5em;
		right:  -5.5em;
		width: 250px;
		
	}
	
	#business .pink {
		
		bottom:  13em;
		right:   17.5em;
		width: 230px;
		
	}
	
	#business .orange {
		
		bottom: -7em;
		left:    3em;
		width: 260px;
		
	}
	
	
	/* フッター */
	footer {
		
		padding: 0.8em 0;
		font-size: 11px;
		letter-spacing: 0.14em;
		
	}
	
	footer:after {
		
		height: 1px;
		
	}
	
	footer .inner {
		
		width: 600px;
		
	}
	
	footer .right {
		
		float: right;
		
	}
	
	footer .address {
		
		margin-bottom: 0.5em;
		
	}
	
	footer ul li {
		
		padding-left:  0.8em;
		padding-right: 0.3em;
		
	}
	
	footer .copy {
		
		font-size: 11px;
		letter-spacing: 0.12em;
		
	}

}



/* AndroidのＬの横 */
@media only screen and (max-width: 854px) {
	
	/* ボディ */
	body {
		
		font-size: 13.5px;
		letter-spacing: 0.3em;
		
	}
	
	/* 内枠 */
	.inner {
		
		width: 90%;
		
	}
	
	/* ヘッダー */
	header {
		
		padding-top:    2em;
		padding-bottom: 1em;
		
	}
	
	header .inner {
	
		width: 94%;
	
	}
	
	/* 見出し１ */
	header h1 {
		
		float: left;
		width: 15.5em;
		
	}
	
	/* ナビ */
	header nav {
		
	  position: fixed;
	  top:  0;
	  left: 0;
	  z-index: 200;
	  width:  100%;
	  height: 100vh;
	  
	  margin: 0;
		float: none;
		margin-right: 0;
		transform: translateY(0);
		pointer-events: none;
		
	}
	
	header nav ul li {
		
		position: absolute;
		top:   -10em;
		right: -10em;
		display: block;
		width:  10em;
		height: 10em;
		margin-left: 0;
		text-align: center;
		font-size: 24px;
		line-height: 1;
		pointer-events: auto;
	
	}
	
	header nav.active ul li:nth-child(1) {
		
		top:   6em;
		right: 25%;
		background-image: url('../img/orange.png');
		background-size: cover;
		background-position: center center;
		transition: all 0.5s;
	
	}
	
	header nav.active ul li:nth-child(2) {
		
		top:   14em;
		right: 60%;
		background-image: url('../img/pink.png');
		background-size: cover;
		background-position: center center;
		transition: all 0.5s 0.1s;
	
	}
	
	header nav.active ul li:nth-child(3) {
		
		top:   22em;
		right:  4em;
		background-image: url('../img/red.png');
		background-size: cover;
		background-position: center center;
		transition: all 0.5s 0.2s;
	
	}
	
	header nav ul li.on span:after {
		
		display: none;
		
	}
	
	header nav ul li span {
	
		position: absolute;
		top:  50%;
		left: 50%;
		width: 100%;
		text-align: center;
		transform: translate(-50%, -50%);
	
	}
	
	
	/* 事業内容 */
	#business {
		
		padding-top:    9em;
		padding-bottom: 35em;
		
	}
	
	#business h2 {
		
		margin-bottom: 1.8em;
		font-size: 26px;
		
	}
	
	#business ul li {
		
		font-size: 26px;
		
	}
	
	#business .mirai {
		
		top:   19em;
		right: 10%;
		width: 58px;
		
	}
	
	#business .yellow {
		
		top:   11em;
		right: -4em;
		width: 185px;
		
	}
	
	#business .red {
		
		bottom: 4em;
		right:  -9.8em;
		width: 250px;
		
	}
	
	#business .pink {
		
		bottom:  27em;
		right:   17.5em;
		width: 230px;
		
	}
	
	#business .orange {
		
		bottom: 6.5em;
		left:  -5em;
		width: 260px;
		
	}
	
	
	/* フッター */
	footer {
		
		padding: 1.5em 0;
		font-size: 15px;
		letter-spacing: 0.16em;
		
	}
	
	footer:after {
		
		height: 1px;
		
	}
	
	footer .inner {
		
		width: 90%;
		
	}
	
	footer .right {
		
		float: left;
		
	}
	
	footer .address {
		
		margin-bottom: 0.7em;
		
	}
	
	footer ul li {
		
		padding-left:  0.8em;
		padding-right: 0.3em;
		
	}
	
	footer .copy {
		
		font-size: 15px;
		letter-spacing: 0.16em;
		
	}
	
	
	/* トグル */
	.menu {
		
		display: block;
	  position: fixed;
	  top:    6em;
	  right:  2.5em;
	  z-index: 200;
	  width:  40px;
	  height: 40px;
	  transform: scale(1.3);
		
	}
	
	.menu.active {
		
		top: 4px;
	
	}
	
	.menu__line {
		
		position: absolute;
	  display: block;
	  width:  60%;
	  height: 2px;
	  background: #EC7D5E;
	  transition: all 0.3s;
	  
	}
	
	.menu__line--top {
		
		top: 10px;
		left: 8px;
	
	}
	
	.menu__line--center {
		
	  top:  18px;
	  right: 8px;
	  
	}
	
	.menu__line--bottom {
		
	  bottom: 11px;
	  left:   8px;
	  
	}
	
	.menu__line--top.active {
	
	  top: 18px;
	  transform: rotate(45deg);
	  
	}
	
	.menu__line--center.active {
		
	  transform: scaleX(0);
	  
	}
	
	.menu__line--bottom.active {
	
	  bottom: 20px;
	  transform: rotate(135deg);
	  
	}
	
	
	/* ナビ */
	.layer {
		
	  opacity: 0;
	  visibility: hidden;
		position: fixed;
		top:  0;
		left: 0;
		z-index: 100;
		width:  100%;
		height: 100vh;
		background: #FCF8EE;
		transition: all 0.5s;
		pointer-events: none;
	
	}
	
	.layer.active {
	
		opacity: 1;
  	visibility: visible;
		
	}

}



/* iPad */
@media only screen and (max-width: 768px) {
	
	/* ボディ */
	body {
		
		font-size: 13.5px;
		letter-spacing: 0.3em;
		
	}
	
	/* 内枠 */
	.inner {
		
		width: 90%;
		
	}
	
	/* ヘッダー */
	header {
		
		padding-top:    2em;
		padding-bottom: 1em;
		
	}
	
	header .inner {
	
		width: 94%;
	
	}
	
	/* 見出し１ */
	header h1 {
		
		float: left;
		width: 15.5em;
		
	}
	
	/* 事業内容 */
	#business {
		
		padding-top:    9em;
		padding-bottom: 38em;
		
	}
	
	#business h2 {
		
		margin-bottom: 1.8em;
		font-size: 28px;
		
	}
	
	#business ul li {
		
		position: relative;
		z-index: 2;
		font-size: 28px;
		
	}
	
	#business .mirai {
		
		top:   19em;
		right: 10%;
		width: 64px;
		
	}
	
	#business .yellow {
		
		top:   11em;
		right: -5.5em;
		width: 190px;
		
	}
	
	#business .red {
		
		bottom: 4em;
		right:  -9.8em;
		width: 260px;
		
	}
	
	#business .pink {
		
		bottom:  30em;
		right:   7.5em;
		width: 280px;
		
	}
	
	#business .orange {
		
		bottom: 6.5em;
		left:  -5em;
		width: 300px;
		
	}
	
	
	/* フッター */
	footer {
		
		padding: 1.5em 0;
		font-size: 15px;
		letter-spacing: 0.16em;
		
	}
	
	footer:after {
		
		height: 1px;
		
	}
	
	footer .inner {
		
		width: 90%;
		
	}
	
	footer .right {
		
		float: left;
		
	}
	
	footer .address {
		
		margin-bottom: 0.7em;
		
	}
	
	footer ul li {
		
		padding-left:  0.8em;
		padding-right: 0.3em;
		
	}
	
	footer .copy {
		
		font-size: 15px;
		letter-spacing: 0.16em;
		
	}
	
	
	/* ナビ */
	header nav ul li {
		
		top:   -10em;
		right: -10em;;
		width:  10em;
		height: 10em;
		font-size: 24px;
	
	}
	
	header nav.active ul li:nth-child(1) {
		
		top:   6em;
		right: 25%;
	
	}
	
	header nav.active ul li:nth-child(2) {
		
		top:   14em;
		right: 60%;
	
	}
	
	header nav.active ul li:nth-child(3) {
		
		top:   22em;
		right:  3em;
	
	}

}



/* iPhonePlusの横 */
@media only screen and (max-width: 736px) {



}



/* iPhone8の横 */
@media only screen and (max-width: 667px) {

	/* ボディ */
	body {
		
		font-size: 13.5px;
		letter-spacing: 0.3em;
		
	}
	
	/* 内枠 */
	.inner {
		
		width: 90%;
		
	}
	
	/* ヘッダー */
	header {
		
		padding-top:    2em;
		padding-bottom: 1em;
		
	}
	
	header .inner {
	
		width: 94%;
	
	}
	
	/* 見出し１ */
	header h1 {
		
		float: left;
		width: 15em;
		
	}
	
	
	/* 事業内容 */
	#business {
		
		padding-top:    8em;
		padding-bottom: 36em;
		
	}
	
	#business h2 {
		
		margin-bottom: 1.8em;
		font-size: 26px;
		
	}
	
	#business ul li {
		
		position: relative;
		z-index: 2;
		font-size: 26px;
		
	}
	
	#business .mirai {
		
		top:   18.5em;
		right: 10%;
		width: 60px;
		
	}
	
	#business .yellow {
		
		top:   10em;
		right: -5.5em;
		width: 180px;
		
	}
	
	#business .red {
		
		bottom: 4em;
		right:  -9.8em;
		width: 250px;
		
	}
	
	#business .pink {
		
		bottom:  30em;
		right:   7.5em;
		width: 270px;
		
	}
	
	#business .orange {
		
		bottom: 7em;
		left:  -5em;
		width: 290px;
		
	}
	
	
	/* フッター */
	footer {
		
		padding: 1.5em 0;
		font-size: 15px;
		letter-spacing: 0.16em;
		
	}
	
	footer:after {
		
		height: 1px;
		
	}
	
	footer .inner {
		
		width: 90%;
		
	}
	
	footer .right {
		
		float: left;
		
	}
	
	footer .address {
		
		margin-bottom: 0.7em;
		
	}
	
	footer ul li {
		
		padding-left:  0.8em;
		padding-right: 0.3em;
		
	}
	
	footer .copy {
		
		font-size: 15px;
		letter-spacing: 0.16em;
		
	}
	
	/* ナビ */
	header nav ul li {
		
		top:   -8em;
		right: -8em;;
		width:  8em;
		height: 8em;
		font-size: 18px;
	
	}
	
	header nav.active ul li:nth-child(1) {
		
		top:   1em;
		right: 35%;
	
	}
	
	header nav.active ul li:nth-child(2) {
		
		top:   7em;
		right: 60%;
	
	}
	
	header nav.active ul li:nth-child(3) {
		
		top:   11em;
		right:  6em;
	
	}

}



/* iPhone5の横 */
@media only screen and (max-width: 568px) {

	/* ナビ */
	header nav ul li {
		
		top:   -7em;
		right: -7em;;
		width:  7em;
		height: 7em;
		font-size: 16px;
	
	}
	
	header nav.active ul li:nth-child(1) {
		
		top:   1em;
		right: 35%;
	
	}
	
	header nav.active ul li:nth-child(2) {
		
		top:   6em;
		right: 60%;
	
	}
	
	header nav.active ul li:nth-child(3) {
		
		top:   10em;
		right: 6em;
	
	}

}



/* AndLoidL */
@media only screen and (max-width: 480px) {

	/* ボディ */
	body {
		
		font-size: 13.5px;
		letter-spacing: 0.3em;
		
	}
	
	/* 内枠 */
	.inner {
		
		width: 88%;
		
	}
	
	/* ヘッダー */
	header {
		
		padding-top:    1.5em;
		padding-bottom: 1em;
		
	}
	
	header .inner {
	
		width: 92%;
	
	}
	
	/* 見出し１ */
	header h1 {
		
		float: left;
		width: 75%;
		
	}
	
	/* 事業内容 */
	#business {
		
		padding-top:    8em;
		padding-bottom: 35em;
		
	}
	
	#business h2 {
		
		margin-bottom: 1.8em;
		font-size: 21px;
		
	}
	
	#business ul li {
		
		font-size: 21px;
		
	}
	
	#business .mirai {
		
		top:   17em;
		right: 10%;
		width: 52px;
		
	}
	
	#business .yellow {
		
		top:   10em;
		right: -5.5em;
		width: 160px;
		
	}
	
	#business .red {
		
		bottom: 4em;
		right:  -9.8em;
		width: 230px;
		
	}
	
	#business .pink {
		
		bottom:  29.5em;
		right:   5em;
		width: 220px;
		
	}
	
	#business .orange {
		
		bottom: 6em;
		left:  -5em;
		width: 260px;
		
	}
	
	
	/* フッター */
	footer {
		
		padding: 1.5em 0;
		font-size: 14px;
		letter-spacing: 0.16em;
		
	}
	
	footer .inner {
		
		width: 88%;
		
	}
	
	footer .right {
		
		float: left;
		
	}
	
	footer .address {
		
		margin-bottom: 0.7em;
		
	}
	
	footer ul li {
		
		padding-left:  0.8em;
		padding-right: 0.3em;
		
	}
	
	footer .copy {
		
		font-size: 14px;
		letter-spacing: 0.1em;
		
	}
	
	
	.loader {
  
		top:  50%;
		left: calc(50% - 25px);
	  width:  50px;
	  height: 50px;
	  transform: translate(-50%, -50%);
	  
	}
	
	.loader:before, .loader:after {

	  height: 20px;  
	  width:  20px;
	  
	}
	
	.loader:before {
		
		margin-bottom: 10px;
	  background: #8AB6C3;
	  box-shadow: 30px 0 0 #81A63B;
	  animation: ball1 1.3s infinite;
	  
	}

	.loader:after {

	  background: #ED7D5E;
	  box-shadow: 30px 0 0 #F4D634;
	  animation: ball2 1.3s infinite;
	  
	}

	@keyframes rotate {

	    0% { transform: rotate(0deg)   scale(0.8); }
	   50% { transform: rotate(360deg) scale(1.2); }
	  100% { transform: rotate(720deg) scale(0.8); }
	  
	}

	@keyframes ball1 {

	   0% {
	   
	   	box-shadow: 30px 0 0 #81A63B;
	   	
	  }
	  
	  50% {
	   
	    margin-bottom: 0;
	    box-shadow: 0 0 0 #81A63B;
	    transform: translate(15px, 15px);
	    
	  }
	  
	  100% {
	  	
	  	margin-bottom: 20px;
	    box-shadow: 30px 0 0 #81A63B;
	    
	  }
	  
	}

	@keyframes ball2 {

	  0% {
	  
	    box-shadow: 30px 0 0 #F4D634;
	    
	  }
	  
	  50% {
	  
	  	margin-top: -20px;
	    box-shadow: 0 0 0 #F4D634;
	    transform: translate(15px, 15px);
	    
	  }
	  
	  100% {
	  	
	  	margin-top: 0;
	    box-shadow: 30px 0 0 #F4D634;
	    
	  }
	  
	}
	
	
	/* トグル */
	.menu {
		
	  top:    4.5em;
	  right:  2em;
	  width:  40px;
	  height: 40px;
	  transform: scale(1.2);
		
	}
	
	/* ナビ */
	header nav ul li {
		
		top:   -9em;
		right: -9em;
		width:  9em;
		height: 9em;
		font-size: 17px;
	
	}
	
	header nav.active ul li:nth-child(1) {
		
		top:   6em;
		right: 30%;
	
	}
	
	header nav.active ul li:nth-child(2) {
		
		top:   16em;
		right: 55%;
	
	}
	
	header nav.active ul li:nth-child(3) {
		
		top:   24em;
		right: 15%;
	
	}

}



/* Iphone12 Pro Max */
@media only screen and (max-width: 428px) {

	/* ボディ */
	body {
		
		font-size: 13px;
		letter-spacing: 0.3em;
		
	}
	
	/* 内枠 */
	.inner {
		
		width: 88%;
		
	}
	
	/* ヘッダー */
	header {
		
		padding-top:    1.5em;
		padding-bottom: 1em;
		
	}
	
	header .inner {
	
		width: 92%;
	
	}
	
	/* 見出し１ */
	header h1 {
		
		float: left;
		width: 75%;
		
	}
	
	/* 事業内容 */
	#business {
		
		padding-top:    7em;
		padding-bottom: 32em;
		
	}
	
	#business h2 {
		
		margin-bottom: 1.8em;
		font-size: 18px;
		
	}
	
	#business ul li {
		
		font-size: 18px;
		
	}
	
	#business .mirai {
		
		top:   15em;
		right: 10%;
		width: 46px;
		
	}
	
	#business .yellow {
		
		top:   10em;
		right: -5.6em;
		width: 140px;
		
	}
	
	#business .red {
		
		bottom: 4em;
		right:  -9.8em;
		width: 210px;
		
	}
	
	#business .pink {
		
		bottom:  27.5em;
		right:   4.5em;
		width: 190px;
		
	}
	
	#business .orange {
		
		bottom: 6em;
		left:  -5em;
		width: 240px;
		
	}
	
	
	/* フッター */
	footer {
		
		padding: 1.5em 0;
		font-size: 12.5px;
		letter-spacing: 0.12em;
		
	}
	
	footer .inner {
		
		width: 88%;
		
	}
	
	footer .address {
		
		margin-bottom: 0.7em;
		
	}
	
	footer ul li {
		
		padding-left:  0.8em;
		padding-right: 0.3em;
		
	}
	
	footer .copy {
		
		font-size: 12.5px;
		letter-spacing: 0.08em;
		
	}
	
	
	/* トグル */
	.menu {
		
	  top:    4.2em;
	  right:  1.5em;
	  width:  40px;
	  height: 40px;
	  transform: scale(1.1);
		
	}
	
	
	/* ナビ */
	header nav ul li {
		
		top:   -8em;
		right: -8em;
		width:  8em;
		height: 8em;
		font-size: 16.5px;
	
	}
	
	header nav.active ul li:nth-child(1) {
		
		top:   5em;
		right: 30%;
	
	}
	
	header nav.active ul li:nth-child(2) {
		
		top:   15em;
		right: 55%;
	
	}
	
	header nav.active ul li:nth-child(3) {
		
		top:   23em;
		right: 15%;
	
	}

}



/* iPhonePlus */
@media only screen and (max-width: 414px) {

	footer .copy {
		
		letter-spacing: 0.06em;
		
	}

}



/* iPhone12 Pro */
@media only screen and (max-width: 390px) {

	/* ナビ */
	header nav ul li {
		
		top:   -9em;
		right: -9em;
		width:  9em;
		height: 9em;
		font-size: 17px;
	
	}
	
	header nav.active ul li:nth-child(1) {
		
		top:   8em;
		right: 25%;
	
	}
	
	header nav.active ul li:nth-child(2) {
		
		top:   18em;
		right: 50%;
	
	}
	
	header nav.active ul li:nth-child(3) {
		
		top:   26em;
		right: 10%;
	
	}

}



/* iPhone8 */
@media only screen and (max-width: 375px) {

	/* ボディ */
	body {
		
		font-size: 12.5px;
		letter-spacing: 0.3em;
		
	}
	
	/* 内枠 */
	.inner {
		
		width: 88%;
		
	}
	
	/* ヘッダー */
	header {
		
		padding-top:    1.5em;
		padding-bottom: 1em;
		
	}
	
	header .inner {
	
		width: 92%;
	
	}
	
	/* 見出し１ */
	header h1 {
		
		float: left;
		width: 75%;
		
	}
	
	/* 事業内容 */
	#business {
		
		padding-top:    6.5em;
		padding-bottom: 30em;
		
	}
	
	#business h2 {
		
		margin-bottom: 1.8em;
		font-size: 17px;
		
	}
	
	#business ul li {
		
		font-size: 17px;
		
	}
	
	#business .mirai {
		
		top:   14em;
		right: 10%;
		width: 40px;
		
	}
	
	#business .yellow {
		
		top:   10em;
		right: -5.6em;
		width: 130px;
		
	}
	
	#business .red {
		
		bottom: 4em;
		right:  -9.8em;
		width: 200px;
		
	}
	
	#business .pink {
		
		bottom:  27em;
		right:   4.2em;
		width: 170px;
		
	}
	
	#business .orange {
		
		bottom: 6em;
		left:  -5em;
		width: 230px;
		
	}
	
	
	/* フッター */
	footer {
		
		padding: 1.5em 0;
		font-size: 12px;
		letter-spacing: 0.12em;
		
	}
	
	footer .inner {
		
		width: 88%;
		
	}
	
	footer .address {
		
		margin-bottom: 0.7em;
		
	}
	
	footer ul li {
		
		padding-left:  0.8em;
		padding-right: 0.3em;
		
	}
	
	footer .copy {
		
		font-size: 12px;
		letter-spacing: 0.04em;
		
	}
	
	
	/* トグル */
	.menu {
		
	  top:    3.6em;
	  right:  1.5em;
	  width:  40px;
	  height: 40px;
	  transform: scale(1.1);
		
	}
	
	/* ナビ */
	header nav ul li {
		
		top:   -8em;
		right: -8em;
		width:  8em;
		height: 8em;
		font-size: 16px;
	
	}
	
	header nav.active ul li:nth-child(1) {
		
		top:   6em;
		right: 25%;
	
	}
	
	header nav.active ul li:nth-child(2) {
		
		top:   15.5em;
		right: 50%;
	
	}
	
	header nav.active ul li:nth-child(3) {
		
		top:   23em;
		right: 10%;
	
	}

}



/* Galaxy */
@media only screen and (max-width: 360px) {

	/* ボディ */
	body {
		
		font-size: 12.5px;
		letter-spacing: 0.3em;
		
	}
	
	/* 内枠 */
	.inner {
		
		width: 88%;
		
	}
	
	/* ヘッダー */
	header {
		
		padding-top:    1.5em;
		padding-bottom: 1em;
		
	}
	
	header .inner {
	
		width: 92%;
	
	}
	
	/* 見出し１ */
	header h1 {
		
		float: left;
		width: 75%;
		
	}
	
	/* 事業内容 */
	#business {
		
		padding-top:    6em;
		padding-bottom: 28em;
		
	}
	
	#business h2 {
		
		margin-bottom: 1.8em;
		font-size: 16px;
		
	}
	
	#business ul li {
		
		font-size: 16px;
		
	}
	
	#business .mirai {
		
		top:   13.5em;
		right: 10%;
		width: 38px;
		
	}
	
	#business .yellow {
		
		top:   10em;
		right: -5.2em;
		width: 120px;
		
	}
	
	#business .red {
		
		bottom: 4.5em;
		right:  -9.8em;
		width: 190px;
		
	}
	
	#business .pink {
		
		bottom:  25em;
		right:   4.2em;
		width: 160px;
		
	}
	
	#business .orange {
		
		bottom: 6em;
		left:  -5.5em;
		width: 220px;
		
	}
	
	
	/* フッター */
	footer {
		
		padding: 1.5em 0;
		font-size: 11.5px;
		letter-spacing: 0.12em;
		
	}
	
	footer .inner {
		
		width: 88%;
		
	}
	
	footer .address {
		
		margin-bottom: 0.7em;
		
	}
	
	footer ul li {
		
		padding-left:  0.8em;
		padding-right: 0.3em;
		
	}
	
	footer .copy {
		
		font-size: 11.5px;
		letter-spacing: 0.04em;
		
	}

}



/* iPhone5 */
@media only screen and (max-width: 320px) {

	/* ボディ */
	body {
		
		font-size: 12px;
		letter-spacing: 0.3em;
		
	}
	
	/* 内枠 */
	.inner {
		
		width: 88%;
		
	}
	
	/* ヘッダー */
	header {
		
		padding-top:    1.2em;
		padding-bottom: 0.8em;
		
	}
	
	header .inner {
	
		width: 92%;
	
	}
	
	/* 見出し１ */
	header h1 {
		
		float: left;
		width: 75%;
		
	}
	
	/* 事業内容 */
	#business {
		
		padding-top:    5em;
		padding-bottom: 24em;
		
	}
	
	#business h2 {
		
		margin-bottom: 1.8em;
		font-size: 15px;
		
	}
	
	#business ul li {
		
		font-size: 15px;
		
	}
	
	#business .mirai {
		
		top:   11.5em;
		right: 10%;
		width: 34px;
		
	}
	
	#business .yellow {
		
		top:   7em;
		right: -4.2em;
		width: 100px;
		
	}
	
	#business .red {
		
		bottom: 4.5em;
		right:  -8.5em;
		width: 160px;
		
	}
	
	#business .pink {
		
		bottom:  23em;
		right:   3.8em;
		width: 130px;
		
	}
	
	#business .orange {
		
		bottom: 5.5em;
		left:  -5.5em;
		width: 190px;
		
	}
	
	
	/* フッター */
	footer {
		
		padding: 1.5em 0;
		font-size: 11px;
		letter-spacing: 0.07em;
		
	}
	
	footer .inner {
		
		width: 88%;
		
	}
	
	footer .address {
		
		margin-bottom: 0.7em;
		
	}
	
	footer ul li {
		
		padding-left:  0.8em;
		padding-right: 0.3em;
		
	}
	
	footer .copy {
		
		font-size: 10.5px;
		letter-spacing: 0.02em;
		
	}
	
	
	/* トグル */
	.menu {
		
	  top:    2.8em;
	  right:  1.3em;
	  width:  40px;
	  height: 40px;
	  transform: scale(1);
		
	}
	
	/* ナビ */
	header nav ul li {
		
		top:   -8em;
		right: -8em;
		width:  8em;
		height: 8em;
		font-size: 15px;
	
	}
	
	header nav.active ul li:nth-child(1) {
		
		top:   5em;
		right: 25%;
	
	}
	
	header nav.active ul li:nth-child(2) {
		
		top:   15em;
		right: 50%;
	
	}
	
	header nav.active ul li:nth-child(3) {
		
		top:   23em;
		right: 10%;
	
	}

}