@charset "UTF-8";

:root {

  --bgColor: #ede9e6;
  --borderColor: #111;
  --offsetValue: -1.5rem;
  
}

#menus .wrap {

  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

}

#menus .box {
	
	position: relative;
	width: 100%;
	margin-bottom: 10rem;
	overflow: hidden;

}

#menus .box:last-child {

	margin-bottom: 0;

}

#menus .box .inner {
	
	position: relative;
	padding: 7rem 9rem;
	border: 0.4rem solid var(--borderColor);

}

#menus .box .inner .decor {

  position: absolute;
  z-index: 1;
  width:  3rem;
  height: 3rem;
  background: var(--bgColor);
  border: 0.4rem solid var(--borderColor);
  border-radius: 50%;
  
}

#menus .box .inner .top-right {

  right: var(--offsetValue);
  top:   var(--offsetValue);
  
}

#menus .box .inner .top-left {

  left: var(--offsetValue);
  top:  var(--offsetValue);
  
}

#menus .box .inner .bottom-left {

  left:  var(--offsetValue);
  bottom: var(--offsetValue);
  
}

#menus .box .inner .bottom-right {

  right:  var(--offsetValue);
  bottom: var(--offsetValue);
  
}

#menus .box h2 {
	
	margin-bottom: 1em;
	font-size: 4.4rem;
	margin-left:  1em;
	text-indent: -1em;

}

#menus .box h2:before {

	content: "";
	display: inline-block;
	width: 0.5em;
	height: 1px;
	margin-right: 0.5em;
	background: #111;

}

#menus .box .line1 {
	
	margin-bottom: 1em;
	font-size: 3.2rem;
	font-weight: 500;

}

#menus .box .line1 span {

	display: inline-block;
	margin-top: 0.5em;
	font-size: 1.25em;

}

#menus .box .line2 {
	
	margin-bottom: 0.5em;
	font-size: 2.4rem;

}

#menus .box .line3 {
	
	margin-bottom: 1em;
	font-size: 2.4rem;
	line-height: 1.8;

}

#menus .box .line4 {
	
	font-size: 2.4rem;
	line-height: 1.8;

}

#menus .box:first-child {

	margin-bottom: 9rem;

}

#menus .gen {
	
	margin-bottom: 1.5em;
	font-size: 3rem;
	line-height: 1.8;
	margin-left:  1em;
	text-indent: -1em;
	
}

#menus .first {
	
	margin-top: 1.5em;
	line-height: 2;
	font-size: 3.2rem;
	font-weight: 500;


}

#menus .first .one {
	
	display: inline-block;
	margin-bottom: 0.5em;
	padding-bottom: 0.1em;
	background-image: url("../img/wave-line2.svg");
  background-size: 12rem;
  background-repeat: repeat-x;
  background-position: 0 100%;
  animation: wave 5s linear infinite;

}

#menus .first .two {

	display: inline-block;
	margin-bottom: 0.75em;

}

@keyframes wave {

	100% { background-position: -12rem 100%; }

}


@media only screen and (max-width: 1900px) {

	html {
		
		font-size: 61.8489583%;
		
	}

}


@media only screen and (max-width: 1890px) {

	html {
		
		font-size: 61.5234%;
		
	}

}


@media only screen and (max-width: 1860px) {

	html {
		
		font-size: 60.5468%;
		
	}

}


@media only screen and (max-width: 1840px) {

	html {
		
		font-size: 59.89583%;
		
	}

}


@media only screen and (max-width: 1820px) {

	html {
		
		font-size: 59.25%;
		
	}

}


@media only screen and (max-width: 1800px) {

	html {
		
		font-size: 58.59375%;
		
	}

}


@media only screen and (max-width: 1790px) {

	html {
		
		font-size: 58.2682%;
		
	}

}


@media only screen and (max-width: 1770px) {

	html {
		
		font-size: 57.6171%;
		
	}

}


@media only screen and (max-width: 1750px) {

	html {
		
		font-size: 56.96614%;
		
	}

}


/* MacBook Pro16 */
@media only screen and (max-width: 1728px) {

	html {
		
		font-size: 56.25%;
		
	}

}


@media only screen and (max-width: 1700px) {

	html {
		
		font-size: 55.33854%;
		
	}

}


@media only screen and (max-width: 1670px) {

	html {
		
		font-size: 54.375%;
		
	}

}


@media only screen and (max-width: 1640px) {

	html {
		
		font-size: 53.3854%;
		
	}

}


@media only screen and (max-width: 1620px) {

	html {
		
		font-size: 52.75%;
		
	}

}


@media only screen and (max-width: 1600px) {

	html {
		
		font-size: 52.0833%;
		
	}

}


@media only screen and (max-width: 1570px) {

	html {
		
		font-size: 51.125%;
		
	}

}


@media only screen and (max-width: 1540px) {

	html {
		
		font-size: 50.1302%;
		
	}

}


/* MacBook Pro14 */
@media only screen and (max-width: 1512px) {

	html {
		
		font-size: 49.25%;
		
	}

}


@media only screen and (max-width: 1490px) {

	html {
		
		font-size: 48.5026%;
		
	}

}


@media only screen and (max-width: 1460px) {

	html {
		
		font-size: 47.526%;
		
	}

}


@media only screen and (max-width: 1440px) {

	html {
		
		font-size: 46.875%;
		
	}

}


@media only screen and (max-width: 1420px) {

	html {
		
		font-size: 46.223958%;
		
	}

}


@media only screen and (max-width: 1400px) {

	html {
		
		font-size: 45.562%;
		
	}

}


@media only screen and (max-width: 1380px) {

	html {
		
		font-size: 44.9218%;
		
	}

}


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

	html {
		
		font-size: 44.4375%;
		
	}

}


@media only screen and (max-width: 1340px) {

	html {
		
		font-size: 43.61979%;
		
	}

}


@media only screen and (max-width: 1320px) {

	html {
		
		font-size: 43%;
		
	}

}


@media only screen and (max-width: 1300px) {

	html {
		
		font-size: 42.3177%;
		
	}

}


/* MacBook Air */
@media only screen and (max-width: 1280px) {

	html {
		
		font-size: 41.6875%;
		
	}

}


@media only screen and (max-width: 1260px) {

	html {
		
		font-size: 41.0156%;
		
	}

}


@media only screen and (max-width: 1240px) {

	html {
		
		font-size: 40.375%;
		
	}

}


@media only screen and (max-width: 1220px) {

	html {
		
		font-size: 39.71354%;
		
	}

}


@media only screen and (max-width: 1200px) {

	html {
		
		font-size: 39.0625%;
		
	}

}


/* iPad Pro11の横 */
@media only screen and (max-width: 1194px) {

	html {
		
		font-size: 38.875%;
		
	}

}


/* iPad 5th Airの横 */
@media only screen and (max-width: 1180px) {

	html {
		
		font-size: 38.4375%;
		
	}

}


@media only screen and (max-width: 1160px) {

	html {
		
		font-size: 37.7604%;
		
	}
	
	:root {

	  --bgColor: #ede9e6;
	  --borderColor: #111;
	  --offsetValue: -4rem;
	  
	}

	#menus .wrap {

	  display: block;
	  width: 100%;

	}

	#menus .box {
		
		position: relative;
		width: 100%;
		margin-bottom: 20rem;
		overflow: hidden;

	}

	#menus .box .inner {
		
		position: relative;
		width: 100%;
		padding: 14rem 9rem;
		border: 0.6rem solid var(--borderColor);

	}

	#menus .box .inner .decor {

	  position: absolute;
	  z-index: 1;
	  width:  8rem;
	  height: 8rem;
	  background: var(--bgColor);
	  border: 0.6rem solid var(--borderColor);
	  border-radius: 50%;
	  
	}

	#menus .box .inner .top-right {

	  right: var(--offsetValue);
	  top:   var(--offsetValue);
	  
	}

	#menus .box .inner .top-left {

	  left: var(--offsetValue);
	  top:  var(--offsetValue);
	  
	}

	#menus .box .inner .bottom-left {

	  left:   var(--offsetValue);
	  bottom: var(--offsetValue);
	  
	}

	#menus .box .inner .bottom-right {

	  right:  var(--offsetValue);
	  bottom: var(--offsetValue);
	  
	}

	#menus .box h2 {
		
		margin-bottom: 1em;
		font-size: 12rem;
		
		margin-left:  0.75em;
		text-indent: -0.75em;

	}
	
	#menus .box h2 span {
	
		display: block;
		margin-left: 0.7em;
	
	}

	#menus .box h2:before {

		width: 0.5em;
		height: 1px;
		margin-right: 0.3em;

	}

	#menus .box .line1 {
		
		margin-bottom: 1.5em;
		font-size: 9.6rem;

	}

	#menus .box .line1 span {

		margin-top: 0.5em;

	}

	#menus .box .line2 {
		
		margin-bottom: 0.5em;
		font-size: 8rem;

	}

	#menus .box .line3 {
		
		margin-bottom: 1em;
		font-size: 8rem;
		line-height: 1.8;

	}

	#menus .box .line4 {

		font-size: 8rem;
		line-height: 1.8;

	}
	
	#menus .box:first-child {

		margin-bottom: 16rem;

	}

	#menus .gen {
		
		margin-bottom: 1.5em;
		font-size: 9rem;
		line-height: 1.8;

	}
	
	#menus .first {
		
		margin-top: 2em;
		line-height: 1.5;
		font-size: 9.2rem;

	}

	#menus .first .one {
		
		margin-bottom: 0.5em;
		padding-bottom: 0.2em;
		background-image: url("../img/wave-line2.svg");
	  background-size: 22rem;
	  background-repeat: repeat-x;
	  background-position: 0 100%;
	  animation: wave 5s linear infinite;

	}

	#menus .first .two {

		margin-bottom: 1em;
		font-size: 1.2em;

	}
	
	#menus .first .three {
		
		display: inline-block;
		margin-left:  1.25em;
		text-indent: -1.25em;
		
	}

	@keyframes wave {

		100% { background-position: -22rem 100%; }

	}


}


@media only screen and (max-width: 1150px) {

	html {
		
		font-size: 37.434895%;
		
	}

}


/* iPad 6th Miniの横 */
@media only screen and (max-width: 1133px) {

	html {
		
		font-size: 36.875%;
		
	}

}


@media only screen and (max-width: 1120px) {

	html {
		
		font-size: 36.4583%;
		
	}

}


@media only screen and (max-width: 1100px) {

	html {
		
		font-size: 35.8125%;
		
	}

}


/* iPad 9thの横 */
@media only screen and (max-width: 1080px) {

	html {
		
		font-size: 35.8125%;
		
	}

}


@media only screen and (max-width: 1060px) {

	html {
		
		font-size: 34.5052%;
		
	}

}


@media only screen and (max-width: 1050px) {

	html {
		
		font-size: 34.17968%;
		
	}

}


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

	html {
		
		font-size: 33.3125%;
		
	}

}


@media only screen and (max-width: 1000px) {

	html {
		
		font-size: 32.552%;
		
	}

}


@media only screen and (max-width: 980px) {

	html {
		
		font-size: 31.90104%;
		
	}

}


@media only screen and (max-width: 970px) {

	html {
		
		font-size: 31.57552%;
		
	}

}


@media only screen and (max-width: 950px) {

	html {
		
		font-size: 30.937%;
		
	}
	
}


/* iPhone14 ProMaxの横 */
@media only screen and (max-width: 932px) {

	html {
		
		font-size: 30.937%;
		
	}
	
}


@media only screen and (max-width: 910px) {

	html {
		
		font-size: 29.62239%;
		
	}
	
}


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

	html {
		
		font-size: 29.2%;
		
	}
	
}


@media only screen and (max-width: 880px) {

	html {
		
		font-size: 28.64583%;
		
	}
	
}


/* AndroidのＬの横 */
@media only screen and (max-width: 854px) {

	html {
		
		font-size: 27.8125%;
		
	}

}


/* iPhone14 Proの横 */
@media only screen and (max-width: 852px) {

	html {
		
		font-size: 27.75%;
		
	}

}


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

	html {
		
		font-size: 27.5%;
		
	}

}



/* iPad Pro11 */
@media only screen and (max-width: 834px) {

	html {
		
		font-size: 27.125%;
		
	}

}


/* iPad Air */
@media only screen and (max-width: 820px) {

	html {
		
		font-size: 26.687%;
		
	}

}


/* iPhone13 miniの横 */
@media only screen and (max-width: 812px) {

	html {
		
		font-size: 26.437%;
		
	}

}


/* iPad 9th */
@media only screen and (max-width: 810px) {

	html {
		
		
		
	}

}


@media only screen and (max-width: 790px) {

	html {
		
		font-size: 25.7161%;
		
	}

}


/* iPad */
@media only screen and (max-width: 768px) {

	html {
		
		font-size: 25%;
		
	}

}


/* iPad 6th Mini */
@media only screen and (max-width: 744px) {

	html {
		
		font-size: 24.25%;
		
	}

}


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

	html {
		
		font-size: 23.937%;
		
	}

}


@media only screen and (max-width: 720px) {

	html {
		
		font-size: 23.4375%;
		
	}

}


@media only screen and (max-width: 700px) {

	html {
		
		font-size: 22.75%;
		
	}

}


@media only screen and (max-width: 680px) {

	html {
		
		font-size: 22.1354%;
		
	}

}


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

	html {
		
		font-size: 21.687%;
		
	}

}


@media only screen and (max-width: 650px) {

	html {
		
		font-size: 21.158854%;
		
	}

}


@media only screen and (max-width: 630px) {

	html {
		
		font-size: 20.507%;
		
	}

}


@media only screen and (max-width: 620px) {

	html {
		
		font-size: 20.18229%;
		
	}

}


@media only screen and (max-width: 600px) {

	html {
		
		font-size: 19.53125%;
		
	}

}


@media only screen and (max-width: 580px) {

	html {
		
		font-size: 18.8802%;
		
	}

}


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

	html {
		
		font-size: 18.5%;
		
	}

}


@media only screen and (max-width: 540px) {

	html {
		
		font-size: 17.5781%;
		
	}

}


@media only screen and (max-width: 520px) {

	html {
		
		font-size: 16.927%;
		
	}

}


@media only screen and (max-width: 500px) {

	html {
		
		font-size: 16.276014%;
		
	}

}


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

	html {
		
		font-size: 15.625%;
		
	}

}


@media only screen and (max-width: 450px) {

	html {
		
		font-size: 14.648%;
		
	}

}


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

	html {
		
		font-size: 14%;
		
	}

}


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

	html {
		
		font-size: 13.93229%;
		
	}

}


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

	html {
		
		font-size: 13.5%;
		
	}

}


@media only screen and (max-width: 400px) {

	html {
		
		font-size: 13.02083%;
		
	}

}


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

	html {
		
		font-size: 12.812%;
		
	}

}


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

	html {
		
		font-size: 12.687%;
		
	}

}


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

	html {
		
		font-size: 12.187%;
		
	}

}


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

	html {
		
		font-size: 11.75%;
		
	}

}


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

	html {
		
		font-size: 10.437%;
		
	}

}