:root {
	--sienna: #E76F51;
	--brown: #F4A261;
	--orangeyellow: #E9C46A;
	--green: #2A9D8F;
	--charcoal: #264653;
	--black: black;
	--white: white;
	--mm-brown: #6d574c;
	--mm-beige: #cdb9ab;
	--mm-green: #697e5d;
	--mm-gold: #ce8a14;
	--font-beanie: 'Reenie Beanie', cursive;
	--font-vibes: 'Great Vibes', cursive;
	--font-courier: 'Courier New', regular;
}

html, body {
	width: 100%;
	margin: 0;
	padding: 0;
	transition: background-color 1s ease;
}

.bg-mm-green {
	background-color: var(--mm-green);
}

.bg-orangeyellow {
	background-color: var(--orangeyellow);
}

.bg-black {
	background-color: var(--black);
}

.bg-green {
	background-color: var(--green);
}

.bg-brown {
	background-color: var(--brown);
}

.bg-sienna {
	background-color: var(--sienna);
}

.bg-charcoal {
	background-color: var(--charcoal);
}

.bg-mm-gold {
	background-color: var(--mm-gold);
}

.color-mm-gold {
	color: var(--mm-gold);
}

.color-mm-brown {
	color: var(--mm-brown);
}

.color-black {
	color: var(--black);
}

.color-orangeyellow {
	color: var(--orangeyellow);
}

.color-green {
	color: var(--green);
}

.color-brown {
	color: var(--brown);
}

.color-sienna {
	color: var(--sienna);
}

.color-charcoal {
	color: var(--charcoal);
}

.color-white {
	color: var(--white);
}

.title {
	font-size: 7rem;
	font-family: var(--font-vibes);
}

.subtitle {
	font-family: var(--font-courier);
}

.info-img {
	margin-top: 200px;
	width: 300px;
}

.icon-group {
	display: flex; align-items: center; justify-content: center; position: relative; width: 100%;
}

.block-body {
	min-height: 300px; width: 900px; margin: 0 auto; text-align: center; padding: 3rem;
}

.block-body-text {
	font-family: var(--font-courier);
	font-size: 1.2rem;
	color: var(--white);
}

.section {
	text-align: center;
	padding-top: 10%;
	padding-bottom: 100px;
	min-height: calc(100vh + 400px);
}

a {
	text-decoration: none;
	color: black;
}

a:hover {
	color: black;
}

.icon-circle {
	display: flexbox; 
	border-radius: 50%;
}

.icon-circle-md {
	width: 100px; 
	height: 100px;
	font-size: 4rem;
}

.icon-circle-lg {
	width: 250px; 
	height: 250px;
	font-size: 11rem;
}

.scroll-info {
	position: absolute; 
	bottom: 20px; 
	width: 100%;
	font-size: 7rem !important;
}

.scroll-info span {
	font-size: 6rem !important;
}









.menu-pop{
	position: fixed;
	top: 0;
	right: -100%;
	height: 100%;
	width: 100%;
	background: var(--orangeyellow);
	transition: all 0.6s ease-in-out;
  }
  #active:checked ~ .menu-pop{
	right:0;
  }
  .menu-btn{
	position: absolute;
	z-index: 2;
	right: 20px;
	/*left: 20px; */
	top: 20px;
	height: 50px;
	width: 50px;
	text-align: center;
	line-height: 50px;
	border-radius: 50%;
	font-size: 20px;
	cursor: pointer;
	/*color: #fff;*/
	/*background: linear-gradient(90deg, #f92c78, #4114a1);*/
	/* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
   /* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%); */
	transition: all 0.3s ease-in-out;
  }
  .menu-btn span,
  .menu-btn:before,
  .menu-btn:after{
	  content: "";
	  position: absolute;
	  top: calc(50% - 1px);
	  left: 30%;
	  width: 40%;
	  border-bottom: 2px solid #000;
	  transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  .menu-btn:before{
	transform: translateY(-8px);
  }
  .menu-btn:after{
	transform: translateY(8px);
  }
  
  
  .close {
	  z-index: 1;
	  width: 100%;
	  height: 100%;
	  pointer-events: none;
	  transition: background .6s;
  }
  
  /* closing animation */
  #active:checked + .menu-btn span {
	  transform: scaleX(0);
  }
  #active:checked + .menu-btn:before {
	  transform: rotate(45deg);
	border-color: #fff;
  }
  #active:checked + .menu-btn:after {
	  transform: rotate(-45deg);
	border-color: #fff;
  }
  .menu-pop ul{
	position: absolute;
	top: 60%;
	left: 50%;
	height: 90%;
	transform: translate(-50%, -50%);
	list-style: none;
	text-align: center;
  }
  .menu-pop ul li{
	height: 10%;
	margin: 15px 0;
  }
  .menu-pop ul li a{
	text-decoration: none;
	font-size: 30px;
	font-weight: 500;
	padding: 5px 30px;
	color: var(--black);
	border-radius: 50px;
	position: absolute;
	line-height: 50px;
	margin: 5px 30px;
	opacity: 0;
	transition: all 0.3s ease;
	transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  .menu-pop ul li a:after{
	position: absolute;
	content: "";
	background: var(--black);
	 /*background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0);*/
	/*background: linear-gradient(375deg, #1cc7d0, #2ede98);*/
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	/* border-radius: 50px; */
	transform: scaleY(0);
	z-index: -1;
	transition: transform 0.3s ease;
  }
  .menu-pop ul li a:hover:after{
	transform: scaleY(1);
  }
  .menu-pop ul li a:hover{
	color: var(--orangeyellow);
  }
  input[type="checkbox"]{
	display: none;
  }
  .content{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: -1;
	text-align: center;
	width: 100%;
	color: #202020;
  }
  .content .title{
	font-size: 40px;
	font-weight: 700;
  }
  .content p{
	font-size: 35px;
	font-weight: 600;
  }
  
  #active:checked ~ .menu-pop ul li a{
	opacity: 1;
  }
  .menu-pop ul li a{
	transition: opacity 1.2s, transform 1.2s cubic-bezier(0.215, 0.61, 0.355, 1);
	transform: translateX(100px);
  }
  #active:checked ~ .menu-pop ul li a{
	  transform: none;
	  transition-timing-function: ease, cubic-bezier(.1,1.3,.3,1); /* easeOutBackを緩めた感じ */
	 transition-delay: .6s;
	transform: translateX(-100px);
  }