@charset "UTF-8";

* {
	font-family: sans-serif;
}
body {
	background-color: #EEE;
	text-align: center;
}
div#wrapper {
	width: 1000px;
	text-align: left;
	background-color: #FFF;
	margin: 10px auto;
	border-radius: 5px;
	border: solid 1px #999;
	box-shadow: 0px 0px 10px #666;
}
div#wrapper div#header,div#wrapper div#footer {
	border: solid 2px #333;
	background-color: #333;
	background-image: url(_images/mfp_header.png);
	background-size: 100% 100%;
}
div#wrapper div#header {
	margin: 5px;
	padding: 10px 30px;
	border-radius: 5px;
}
div#wrapper div#header h1 {
	color: #FFF;
	text-shadow: 0px 0px 10px #000;
	font-size: 3rem;
	padding: 5px 0px 0px 0px;
	margin: 0px;
	font-family: sans-serif;
}
div#wrapper div#header p {
	padding: 0px;
	line-height: 1em;
	color: #FFF;
	text-shadow: 0px 0px 5px #000;
}
div#wrapper div#container {
	padding: 0px 20px;
}
div#wrapper div#footer {
	color: #FFF;
	clear: both;
	padding: 5px;
	margin: 5px;
	border-radius: 5px;
	text-align: center;
	font-size: 12px;
}
ul.example_pages {
	border: solid 1px #CCC;
	padding: 15px 30px;
}
ul.example_pages li {
	padding: 5px 0px;
}
div#example_selector {
	padding: 10px 0px;
	text-align: left;
}
div#example_selector span {
	display: block;
	font-size: 14px;
	padding: 5px 0px;
}
div#example_selector select {
	font-size: 18px;
	border-radius: 3px;
	border: solid 1px #CCC;
	padding: 5px 10px;
	box-shadow: 0px 0px 5px #CCC inset;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	outline: none;
}
div.tips {
	margin: 10px auto;
	padding: 5px 20px;
	border: solid 1px #CCC;
	border-radius: 5px;
	box-shadow: 0px 2px 10px #CCC;
	background: #FEE;
}
div.tips p {
	font-size: 14px;
	line-height: 2em;
}
div.tips strong {
	color: #800040;
}
div.tips span {
	display: block;
	padding: 5px 10px;
	color: #008080;
}
div.tips em {
	font-style: normal;
	color: #090;
	font-weight: bold;
}
div.tips ol li {
	padding: 10px;
	margin: 15px;
	font-size: 12px;
	line-height: 1.7em;
	border: solid 1px #CCC;
	border-radius: 5px;
	background: #FFF;
}
div.tips ol li span {
	padding: 0px 10px;
}
div.tips ol li img {
	display: block;
	width: 280px;
	border: none;
	margin: 5px auto;
}


@media screen and (max-width: 800px) {
	body {
		padding: 0px;
		margin: 0px;
	}
	div#wrapper {
		border-radius: 0px;
		padding: 0px;
		margin: 0px;
		width: 100%;
		box-shadow: none;
		border: none;
	}
	div#wrapper div#header {
		border-radius: 0px;
		padding: 10px;
	}
	div#wrapper div#header h1 {
		font-size: 24px;
	}
	form#mailformpro dl dt {
		float: none;
		width: auto;
		font-size: 12px;
		padding: 5px;
		text-align: left;
	}
	form#mailformpro dl dd {
		clear: both;
		border-top: none;
		padding: 5px 15px;
		font-size: 12px;
		line-height: 1.5em;
	}
	div.mfp_buttons button {
		font-size: 14px;
	}
	table#mfp_confirm_table tr th {
		white-space: nowrap;
		width: 100px;
	}
	div#mfp_thanks {
		text-align: center;
		font-size: 18px;
		padding: 20px 0px;
	}
	div#mfp_thanks strong {
		color: #C00;
		font-size: 24px;
		display: block;
	}
	
	

	

}

@media(min-width: 751px){

.site-box {width: 1000px;
           margin: auto}
  
.box1:after {content: "";
              display: block;
			  clear: both}
			  
.box2:after {content: "";
       display: block;
	   clear: both}
	  
.form-cont1 {float: left;
	width: 53%}
	  
.form-cont2 {float: left;
	width: 44%}

.name {float: left;
       width: 22%}

.age {float: left;
       width: 17.5%}

.gender {float: left;
       width: 17.5%}
	   
.wearsize {float: left;
       width: 17.5%}
	   
.footsize {float: left;
       width: 17.5%}
	   
.name2 {float: left;
       width: 23%}

.age2 {float: left;
       width: 17.5%}

.gender2 {float: left;
       width: 17.5%}
	   
.wearsize2 {float: left;
       width: 17.5%}
	   
.footsize2 {float: left;
       width: 17.5%}

/*ヘッダーコンテンツ*/

.header-box1 {padding: 8px;
              background: #006600;
			  border-radius: 8px}

.header-box1 h1 a {color: #FFFFFF;
                  text-decoration: none}
				  
.header-box1 h1 {
	margin: 0;
	font-size: 30px;
	color: #FFF;
}

.header-box1 p {
	margin: 0;
	font-size: 16px;
	color: #FC0;
}
			   
.header-box2 {margin: 8px}

/*ヘッダーここまで*/

.program-title h1 {
	margin: 10px;
	font-size: 24px;
	text-align: center;
	color: #F60;
}

}

@media (min-width: 600px) and (max-width: 750px) {
}

/*ヘッダーコンテンツ*/

.header-box1 {padding: 8px;
              background: #006600;
			  border-radius: 8px}

.header-box1 h1 a {color: #FFFFFF;
                  text-decoration: none}
				  
.header-box1 h1 {
	margin: 0;
	font-size: 30px;
	color: #FFF;
}

.header-box1 p {
	margin: 0;
	font-size: 16px;
	color: #FC0;
}
			   
.header-box2 {margin: 8px}

/*ヘッダーここまで*/

/*コンテンツ*/

.program-title h1 {
	margin: 10px;
	font-size: 24px;
	text-align: center;
	color: #F60;
}

.form-cont1 {margin: 2px;
             padding: 5px;
			 background: #ABEA57;
			 border-radius: 5px;
             font-size: 16px}
			 
.form-cont2 {margin: 2px;
             padding: 5px;
			 background: #C7F08E;
			 border-radius: 5px;
             font-size: 16px}		 

.contente-title h1 {
	margin: 10px;
	font-size: 28px;
	text-align: center;
	color: #360;
}

.contente-list {clear: both;
                margin: 2px;
                padding: 5px;
				background: #C7D988;
				border-radius: 5px;
                font-size: 16px}
				
.contente-list2 {margin: 2px;
                padding: 5px;
				background: #E9F0D0;
				border-radius: 5px;
                font-size: 16px}
				
.contente-list3 {clear: both;
	            margin: 2px;
                padding: 5px;
				background: #BDEFF4;
				border-radius: 5px;
                font-size: 16px}
				
.contente-list4 {clear: both;
	            margin: 2px;
                padding: 5px;
				background: #F9E1A4;
				border-radius: 5px;
                font-size: 16px}

.contente-list ul {margin: 5px;
           padding: 5px;
		   list-style: none}
		   
.contente-list li {padding: 5px}

.contente-list2 ul {padding: 5px}
		   
.contente-list2 li {padding: 5px}

.contente-list4 ul {margin: 5px;
           padding: 5px;
		   list-style: none}
		   
.contente-list4 ul {padding: 5px}
		   
.contente-list4 li {padding: 5px}

.name {margin: 2px;
       padding: 5px;
	   background: #ABEA57;
	   border-radius: 5px;
       font-size: 16px}

.age {margin: 2px;
      padding: 5px;
	  background: #ABEA57;
	  border-radius: 5px;
      font-size: 16px}

.gender {margin: 2px;
         padding: 5px;
		 background: #ABEA57;
		 border-radius: 5px;
         font-size: 16px}
	   
.wearsize {margin: 2px;
           padding: 5px;
		   background: #ABEA57;
		   border-radius: 5px;
           font-size: 16px}
	   
.footsize {margin: 2px;
           padding: 5px;
		   background: #ABEA57;
		   border-radius: 5px;
           font-size: 16px}
		   
.name2 {margin: 2px;
       padding: 5px;
	   background: #C7F08E;
	   border-radius: 5px;
       font-size: 16px}

.age2 {margin: 2px;
      padding: 5px;
	  background: #C7F08E;
	  border-radius: 5px;
      font-size: 16px}

.gender2 {margin: 2px;
         padding: 5px;
		 background: #C7F08E;
		 border-radius: 5px;
         font-size: 16px}
	   
.wearsize2 {margin: 2px;
           padding: 5px;
		   background: #C7F08E;
		   border-radius: 5px;
           font-size: 16px}
	   
.footsize2 {margin: 2px;
           padding: 5px;
		   background: #C7F08E;
		   border-radius: 5px;
           font-size: 16px}

.pageup {content: "";
              display: block;
			  clear: both;
			  width: 60%;
			  margin: 10px;
			}
			  
.pageup a {padding: 5px;
	          text-align:center;
              font-size: 16px;
			  color: #FFFFFF;
			  text-decoration: none;
			  background-color: #72640c;
			  border-radius: 5px}
			  
.pageup a:hover {background-color: #c1ab05}


/*コンテンツここまで*/

/*トグルボタン*/


.toggle-button {
  display: block;
  cursor: pointer;
  padding: 3px 10px;
  background-color: #060;
  border: 1px solid #777;
  text-align: center;
  color: #FFFFFF;
  margin-bottom: 1em;
  border-radius: 5px;
}
 
.toggle-wrap .toggle-button:hover {
  background-color: #F90;
}
 
.toggle-wrap .toggle-content,
.toggle-wrap > input[type="checkbox"] {
  display: none;
}
 
.toggle-wrap > input[type="checkbox"]:checked ~ .toggle-content {
  display: block;
}

/*Go to top*/
.pageup:hover {
opacity: 0.7;
text-decoration: none;
}
 
.pageup {
display: none;
position: fixed;
bottom: 3rem;
right: 3rem;
width: 3rem;
height: 3rem;
line-height: 3.2rem;
text-decoration: none;
cursor: pointer;
}

/*ボタン*/

.menu1 ul {margin: 0;
           padding: 2px;
		   list-style: none}

.menu1 li a {
	display: block;
	margin: 2px;
	padding: 5px;
	background-color: #4B741B;
	color: #FFFFFF;
	font-size: 21px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	border-radius: 5px;
	}

.menu1 li a:hover {
	background-color: #82C62F;
}

.menu1 ul:after {content: "";
              display: block;
			  clear: both}
			  
.menu1 li {margin-left: auto;
           margin-right: auto;
	       width: 250px}

.footer-box {clear: both;
	         padding:5px;
	         text-align:center;
             background: #006600;
			 color:#ffffff}