@charset "UTF-8";

.pagetitle {

	background-image: url('../img/menu.jpg');

}

#menu {
	
	position: relative;
	margin-top: 9em;
	margin-bottom: 510px;
	padding-top: 14em;
	color: #fff;
	background-image: url('../img/back.jpg');
	background-repeat: repeat;
	background-position: center center;
	background-size: contain;

}

#menu:before {

  position: absolute;
  top: -200px;
  left: 0;
  z-index: 100;
  width: 120%;
  min-height: 200px;
  margin: 0px -10%;
  content: '';
  background: #fff;
  -webkit-transform-origin: right center;
  transform-origin: right center;
  transform: rotate(-5.5deg);
  -webkit-transform: rotate(-5.5deg);
  box-sizing: border-box;

}

#menu .inner {

	width: 1200px;
	margin: 0 auto;

}

#menu .inner h2 {
	
	font-size: 30px;
	font-weight: normal;

}

#menu .inner p {

	font-size: 23px;
	line-height: 2.5;
	letter-spacing: 0.2em;

}

#menu .inner p.p1 {

	margin-bottom: 7em;

}

#menu .inner .tennai {

	position: relative;
	margin-bottom: 21em;

}

#menu .inner p.p2 {

	float: left;
	width: 58%;

}

#menu .inner .circle {
	
	position: absolute;
	top: -3em;
	right: 0;
	width: 38%;

}

#menu .inner p.p3 {

	margin-bottom: 2em;

}

#menu .inner .title2 {
	
	float: right;
	width: 43%;
	margin-right: 2%;
	margin-bottom: 11em;

}

#menu .inner .title2 img {

	width: 100%;

}

#menu .inner p.p4 {

	margin-bottom: 3em;

}

#menu .inner .board {
	
	width: 42%;
	margin-bottom: 9em;

}

#menu .inner .board img {

	width: 100%;

}

#menu .inner .wrap {

	margin-bottom: 9em;

}

#menu .inner .p5 {

	float: left;
	width: 70%;

}

#menu .inner .logo_white {
	
	float: right;
	width: 25%;
	margin-top: -2em;

}

#menu .inner h3 {

	font-size: 24px;
	line-height: 2;
	font-weight: normal;

}

#menu .inner .ueki p {

	padding-left: 1em;
	margin-bottom: 3em;

}

#menu .inner .ueki p:last-child {

	margin-bottom: 0;

}

.under_foot {
	
	height: 591px;
	background-image: url('../img/menu_foot.jpg');

}



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

	#menu {
		
		position: relative;
		margin-top: 6.5em;
		margin-bottom: 362px;
		padding-top: 10em;
		
	}
	
	#menu:before {
		
	  position: absolute;
	  top: -150px;
	  left: 0;
	  width: 120%;
	  min-height: 140px;
	  margin: 0px -10%;
	  transform: rotate(-5.5deg);
	  -webkit-transform: rotate(-5.5deg);
		
	}
	
	#menu .inner {
		
		width: 860px;
		
	}
	
	#menu .inner h2 {
		
		font-size: 22px;
		
	}
	
	#menu .inner p {
		
		font-size: 17px;
		line-height: 2.5;
		letter-spacing: 0.15em;
		
	}
	
	#menu .inner p.p1 {
		
		margin-bottom: 6em;
		
	}
	
	#menu .inner .tennai {
		
		margin-bottom: 17em;
		
	}
	
	#menu .inner p.p2 {
		
		float: left;
		width: 58%;
		
	}
	
	#menu .inner .circle {
		
		top: -3em;
		right: 0;
		width: 38%;
		
	}
	
	#menu .inner p.p3 {
		
		margin-bottom: 1.5em;
		
	}
	
	#menu .inner .title2 {
		
		float: right;
		width: 43%;
		margin-right: 2%;
		margin-bottom: 8em;
		
	}
	
	#menu .inner p.p4 {
		
		margin-bottom: 2.5em;
		
	}
	
	#menu .inner .board {
		
		width: 42%;
		margin-bottom: 7em;
		
	}
	
	#menu .inner .wrap {
		
		margin-bottom: 8em;
		
	}
	
	#menu .inner .p5 {
		
		float: left;
		width: 70%;
		
	}
	
	#menu .inner .logo_white {
		
		float: right;
		width: 25%;
		margin-top: -2em;
		
	}
	
	#menu .inner h3 {
		
		font-size: 17px;
		
	}
	
	#menu .inner .ueki p {
		
		padding-left: 1em;
		margin-bottom: 2.7em;
		
	}
	
	.under_foot {
		
		height: 420px;
		
	}

}



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

	#menu {
		
		position: relative;
		margin-top: 4em;
		margin-bottom: 262px;
		padding-top: 7em;
		
	}
	
	#menu:before {
		
	  position: absolute;
	  top: -100px;
	  left: 0;
	  width: 120%;
	  min-height: 90px;
	  margin: 0px -10%;
	  transform: rotate(-5deg);
	  -webkit-transform: rotate(-5deg);
		
	}
	
	#menu .inner {
		
		width: 660px;
		
	}
	
	#menu .inner h2 {
		
		font-size: 18px;
		
	}
	
	#menu .inner p {
		
		font-size: 14px;
		line-height: 2.5;
		letter-spacing: 0.12em;
		
	}
	
	#menu .inner p.p1 {
		
		margin-bottom: 6em;
		
	}
	
	#menu .inner .tennai {
		
		margin-bottom: 12em;
		
	}
	
	#menu .inner p.p2 {
		
		float: left;
		width: 58%;
		
	}
	
	#menu .inner .circle {
		
		top: -3em;
		right: 0;
		width: 38%;
		
	}
	
	#menu .inner p.p3 {
		
		margin-bottom: 1em;
		
	}
	
	#menu .inner .title2 {
		
		float: right;
		width: 43%;
		margin-right: 2%;
		margin-bottom: 6em;
		
	}
	
	#menu .inner p.p4 {
		
		margin-bottom: 2.5em;
		
	}
	
	#menu .inner .board {
		
		width: 42%;
		margin-bottom: 6em;
		
	}
	
	#menu .inner .wrap {
		
		margin-bottom: 7em;
		
	}
	
	#menu .inner .p5 {
		
		float: left;
		width: 71.5%;
		
	}
	
	#menu .inner .logo_white {
		
		float: right;
		width: 25%;
		margin-top: -1em;
		
	}
	
	#menu .inner h3 {
		
		font-size: 14px;
		
	}
	
	#menu .inner .ueki p {
		
		padding-left: 1em;
		margin-bottom: 2.5em;
		
	}
	
	.under_foot {
		
		height: 315px;
		
	}

}



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

	#menu {
		
		position: relative;
		margin-top: 3em;
		margin-bottom: 210px;
		padding-top: 7em;
		
	}
	
	#menu:before {
		
	  position: absolute;
	  top: -86px;
	  left: 0;
	  width: 120%;
	  min-height: 80px;
	  margin: 0px -10%;
	  transform: rotate(-5deg);
	  -webkit-transform: rotate(-5deg);
		
	}
	
	#menu .inner {
		
		width: 80%;
		
	}
	
	#menu .inner h2 {
		
		font-size: 17px;
		
	}
	
	#menu .inner p {
		
		font-size: 14px;
		line-height: 2.5;
		letter-spacing: 0.12em;
		
	}
	
	#menu .inner p.p1 {
		
		margin-bottom: 6em;
		
	}
	
	#menu .inner .tennai {
		
		margin-bottom: 12em;
		
	}
	
	#menu .inner p.p2 {
		
		float: left;
		width: 58%;
		
	}
	
	#menu .inner .circle {
		
		top: -3em;
		right: 0;
		width: 38%;
		
	}
	
	#menu .inner p.p3 {
		
		margin-bottom: 1em;
		
	}
	
	#menu .inner .title2 {
		
		float: right;
		width: 43%;
		margin-right: 2%;
		margin-bottom: 6em;
		
	}
	
	#menu .inner p.p4 {
		
		margin-bottom: 2.5em;
		
	}
	
	#menu .inner .board {
		
		width: 42%;
		margin-bottom: 6em;
		
	}
	
	#menu .inner .wrap {
		
		margin-bottom: 7em;
		
	}
	
	#menu .inner .p5 {
		
		float: left;
		width: 71.5%;
		
	}
	
	#menu .inner .logo_white {
		
		float: right;
		width: 25%;
		margin-top: -1em;
		
	}
	
	#menu .inner h3 {
		
		font-size: 14px;
		
	}
	
	#menu .inner .ueki p {
		
		padding-left: 1em;
		margin-bottom: 2.5em;
		
	}

	.under_foot {
		
		height: 263px;
		
	}

}



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

	#menu {
		
		margin-bottom: 187px;
		
	}
	
	#menu .inner {
		
		width: 82%;
		
	}
	
	.under_foot {
		
		height: 236px;
		
	}

}



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

	#menu {
		
		margin-bottom: 180px;
		
	}
	
	#menu .inner {
		
		width: 86%;
		
	}
	
	.under_foot {
		
		height: 227px;
		
	}

}



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

	#menu {
		
		margin-bottom: 156px;
		
	}
	
	#menu .inner {
		
		width: 88%;
		
	}
	
	.under_foot {
		
		height: 205px;
		
	}

}



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

	#menu {
		
		margin-bottom: 130px;
		
	}
	
	#menu .inner {
		
		width: 90%;
		
	}
	
	.under_foot {
		
		height: 175px;
		
	}

}



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

	#menu {
		
		position: relative;
		margin-top: 1.9em;
		margin-bottom: 83px;
		padding-top: 6em;
		
	}
	
	#menu:before {
		
	  position: absolute;
	  top: -60px;
	  left: 0;
	  width: 120%;
	  min-height: 60px;
	  margin: 0px -10%;
	  transform: rotate(-5deg);
	  -webkit-transform: rotate(-5deg);
		
	}
	
	#menu .inner {
		
		width: 80%;
		
	}
	
	#menu .inner h2 {
		
		margin-bottom: 0.2em;
		font-size: 18px;
		
	}
	
	#menu .inner p {
		
		font-size: 12.5px;
		line-height: 2.2;
		letter-spacing: 0.12em;
		
	}
	
	#menu .inner p.p1 {
		
		margin-bottom: 4em;
		
	}
	
	#menu .inner .tennai {
		
		margin-bottom: 4em;
		
	}
	
	#menu .inner p.p2 {
		
		float: none;
		width: 100%;
		margin-bottom: 2.5em;
		
	}
	
	#menu .inner .circle {
		
		float: right;
		position: relative;
		top: 0;
		right: 0;
		width: 55%;
		
	}
	
	#menu .inner p.p3 {
		
		margin-bottom: 2em;
		
	}
	
	#menu .inner .title2 {
		
		float: none;
		width: 70%;
		margin: 0 auto;
		margin-bottom: 4em;
		
	}
	
	#menu .inner p.p4 {
		
		margin-bottom: 2.5em;
		
	}
	
	#menu .inner .board {
		
		width: 63%;
		margin-bottom: 4em;
		
	}
	
	#menu .inner .wrap {
		
		margin-bottom: 4em;
		
	}
	
	#menu .inner .p5 {
		
		float: none;
		width: 100%;
		margin-bottom: 2.5em;
		
	}
	
	#menu .inner .logo_white {
		
		float: right;
		width: 45%;
		margin-top: 0;
		
	}
	
	#menu .inner h3 {
		
		font-size: 14px;
		
	}
	
	#menu .inner .ueki p {
		
		padding-left: 1em;
		margin-bottom: 2.5em;
		
	}
	
	.under_foot {
		
		height: 148px;
		
	}

}



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

	#menu {
		
		position: relative;
		margin-top: 1.9em;
		margin-bottom: 63px;
		padding-top: 6em;
		
	}
	
	#menu:before {
		
	  position: absolute;
	  top: -60px;
	  left: 0;
	  width: 120%;
	  min-height: 60px;
	  margin: 0px -10%;
	  transform: rotate(-5deg);
	  -webkit-transform: rotate(-5deg);
		
	}
	
	#menu .inner {
		
		width: 82%;
		
	}
	
	#menu .inner h2 {
		
		font-size: 17.5px;
		
	}
	
	#menu .inner p {
		
		font-size: 12.5px;
		line-height: 2.2;
		letter-spacing: 0.12em;
		
	}
	
	#menu .inner p.p1 {
		
		margin-bottom: 4em;
		
	}
	
	#menu .inner .tennai {
		
		margin-bottom: 4em;
		
	}
	
	#menu .inner p.p2 {
		
		float: none;
		width: 100%;
		margin-bottom: 2.5em;
		
	}
	
	#menu .inner .circle {
		
		float: right;
		position: relative;
		top: 0;
		right: 0;
		width: 55%;
		
	}
	
	#menu .inner p.p3 {
		
		margin-bottom: 2em;
		
	}
	
	#menu .inner .title2 {
		
		float: none;
		width: 70%;
		margin: 0 auto;
		margin-bottom: 4em;
		
	}
	
	#menu .inner p.p4 {
		
		margin-bottom: 2.5em;
		
	}
	
	#menu .inner .board {
		
		width: 63%;
		margin-bottom: 4em;
		
	}
	
	#menu .inner .wrap {
		
		margin-bottom: 4em;
		
	}
	
	#menu .inner .p5 {
		
		float: none;
		width: 100%;
		margin-bottom: 2.5em;
		
	}
	
	#menu .inner .logo_white {
		
		float: right;
		width: 45%;
		margin-top: 0;
		
	}
	
	#menu .inner h3 {
		
		font-size: 14px;
		
	}
	
	#menu .inner .ueki p {
		
		padding-left: 1em;
		margin-bottom: 2.5em;
		
	}
	
	.under_foot {
		
		height: 127px;
		
	}

}



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

	#menu {
		
		position: relative;
		margin-top: 1.0em;
		margin-bottom: 52px;
		padding-top: 5em;
		
	}
	
	#menu:before {
		
	  position: absolute;
	  top: -40px;
	  left: 0;
	  width: 120%;
	  min-height: 40px;
	  margin: 0px -10%;
	  transform: rotate(-5deg);
	  -webkit-transform: rotate(-5deg);
		
	}
	
	#menu .inner h2 {
		
		font-size: 17px;
		
	}
	
	.under_foot {
		
		height: 115px;
		
	}

}



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

	#menu {
		
		position: relative;
		margin-top: 1.0em;
		margin-bottom: 49px;
		padding-top: 5em;
		
	}
	
	.under_foot {
		
		height: 111px;
		
	}

}



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

	#menu {
		
		position: relative;
		margin-top: 1.0em;
		margin-bottom: 38px;
		padding-top: 5em;
		
	}
	
	#menu .inner {
		
		width: 84%;
		
	}
	
	#menu .inner h2 {
		
		font-size: 16.5px;
		
	}
	
	#menu .inner p {
		
		font-size: 12px;
		line-height: 2.2;
		letter-spacing: 0.12em;
		
	}
	
	#menu .inner p.p1 {
		
		margin-bottom: 4em;
		
	}
	
	#menu .inner .tennai {
		
		margin-bottom: 4em;
		
	}
	
	#menu .inner p.p2 {
		
		float: none;
		width: 100%;
		margin-bottom: 2.5em;
		
	}
	
	#menu .inner .circle {
		
		float: right;
		position: relative;
		top: 0;
		right: 0;
		width: 55%;
		
	}
	
	#menu .inner p.p3 {
		
		margin-bottom: 2em;
		
	}
	
	#menu .inner .title2 {
		
		float: none;
		width: 70%;
		margin: 0 auto;
		margin-bottom: 4em;
		
	}
	
	#menu .inner p.p4 {
		
		margin-bottom: 2.5em;
		
	}
	
	#menu .inner .board {
		
		width: 63%;
		margin-bottom: 4em;
		
	}
	
	#menu .inner .wrap {
		
		margin-bottom: 4em;
		
	}
	
	#menu .inner .p5 {
		
		float: none;
		width: 100%;
		margin-bottom: 2.5em;
		
	}
	
	#menu .inner .logo_white {
		
		float: right;
		width: 45%;
		margin-top: 0;
		
	}
	
	#menu .inner h3 {
		
		font-size: 13px;
		
	}
	
	#menu .inner .ueki p {
		
		padding-left: 1em;
		margin-bottom: 2.5em;
		
	}

	.under_foot {
		
		height: 99px;
		
	}

}