@charset "utf-8";

/*================================================
クリアフィックスとボックスサイジング
==============================================*/
clearfix:after{
	content:"";
	display:block;
	clear:both;
}

boxsizing{
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing:border-box;
}
	
/*=============================================
フォントサイズ指定
==============================================*/
h2,h3,h4,h5,h6 {
	 margin-bottom : 16px;
	 color:#FF00FF;
}

h2 {
font-size : 30px;
line-height : 1.3333;
} 

h3 {
font-size : 20px;
line-height : 1;
}

p {
font-size : 16px; 
line-height : 1.5;
color:#FFF;
} 

/*===========================================
禁則処理
===========================================*/
p,li,dt,dd,th,td,pre{
-ms-line-break: strict;
line-break: strict;
-ms-word-break: break-strict;
word-break: break-strict;
}

/*==========================================
 body
===========================================*/
html {
    font-family:font-family: 'Oswald', "Hiragino Kaku Gothic Pro","Yu Gothic","Meiryo",sans-serif;
    -webkit-text-size-adjust: 100%; 
    -ms-text-size-adjust: 100%; 
}
body {
  width: 100%;
	margin:0 auto;
  color:#000;
}
a {
  color:#000;
  text-decoration:none;
}
a:hover {
  color:#333;
  text-decoration:none;
}

/*==========================================
ハンバーガー
===========================================*/
.HiddenCheckbox {
  display: none;
}
.MenuHeader {
  color:#FF00FF;
  float: left;
  font-weight: 100;
  line-height: 30px;
  margin: 0 0 0 15px;
  opacity: 0;
  position: relative;
  -webkit-transform: translate3d(0, -15px, 0);
  transform: translate3d(0, -15px, 0);
  -webkit-transition: -webkit-transform 0.6s, opacity 0.5s;
  transition: transform 0.6s, opacity 0.5s;
  z-index: 2;
}
.MenuIcon {
  cursor: pointer;
  display: block;
  float: left;
  height: 30px;
  position: relative;
  width: 30px;
  z-index: 2;
}
.MenuIcon::before {
  -webkit-box-shadow: #999999 0 12px 0;
  box-shadow: #FF00FF 0 12px 0;
  height: 6px;
  -webkit-transform-origin: left top;
  -ms-transform-origin: left top;
  transform-origin: left top;
  width: 30px;
}
.MenuIcon::after {
  bottom: 0;
  height: 6px;
  -webkit-transform-origin: left bottom;
  -ms-transform-origin: left bottom;
  transform-origin: left bottom;
  width: 30px;
}
.MenuIcon::before,
.MenuIcon::after {
  background: #FF00FF;
  display: block;
  content: '';
  position: absolute;
  -webkit-transition: -webkit-box-shadow 0.2s linear, -webkit-transform 0.4s 0.2s;
  transition: box-shadow 0.2s linear, transform 0.4s 0.2s;
}
.Menu {
  background: #333;*/
  bottom: 0;
  left: -90%;
  position: absolute;
  top: 0;
  width: 90%;
  -webkit-transition: left 0.4s;
  transition: left 0.4s;
}
.HiddenCheckbox:checked ~ .MenuHeader {
  opacity: 1;
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
}
.HiddenCheckbox:checked ~ .MenuIcon::before {
  -webkit-box-shadow: transparent 0 0 0;
  box-shadow: transparent 0 0 0;
  -webkit-transform: rotate(45deg) translate3d(6px, -3px, 0);
  transform: rotate(45deg) translate3d(6px, -3px, 0);
}
.HiddenCheckbox:checked ~ .MenuIcon::after {
  -webkit-transform: rotate(-45deg) translate3d(6px, 3px, 0);
  transform: rotate(-45deg) translate3d(6px, 3px, 0);
}
.HiddenCheckbox:checked ~ .Menu {
  left: 0;
}
.Menu-list {
  list-style-type: none;
  margin: 40px 0 0;
  padding: 0;
	background-color:#333;
	font-size:1.2em;
}
.Menu-item {
  margin: 0;
}

.Menu-link {
  color:#FF00FF;
  display: block;
  overflow: hidden;
  padding: 8px 22px;
  position: relative;
  text-decoration: none;
  z-index: 1;
}
.Menu-link::before {
  background: #444;
  bottom: 0;
  content: '';
  left: 0;
  position: absolute;
  right: 100%;
  top: 0;
  -webkit-transition: right 0.4s;
  transition: right 0.4s;
  z-index: -1;
}

.Menu-link:hover::before {
  right: 0;
}
.Menu-link:hover::after {
  opacity: 0.5;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.MenuContainer {
	position: fixed;
	width:100%;
	padding-top:10px;
	padding-left:15px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	z-index: 100;
}

/*=============================================
index01メインヘッダー
=============================================*/

header{
border-bottom:
1px solid #FF00FF;
}

.header00:before{
	content:"";
	display:block;
	clear:both;
}

.headerc{
	padding-top:2%;
}
	

.headc h1{
margin:0;
padding-top:3%;
font-size : 28px; 
line-height : 1;
padding-left:20%;
color:#FF00FF;
font-family: 'Oswald', sans-serif;

} 
.headc:after{
	content:"";
	display:block;
	clear:both;
}

.headr {
	font-size:2.5em;
	color:#F0C;
	text-align:center;
	padding-top:1%;
	
}
.headr a{
	color:#F0C;
	padding-left:1%;
	padding-right:1%;
	
}
.wrapper001{
	background-image:url(../img/wall02.jpg);
}


/*==========================================
wrapper01設定
===========================================*/
.wrapper00 {
	background-color:#333;
}


/*==========================================
 コンテンツエリア ->a 　
===========================================*/

.area-aa h2{
	font-family: 'Oswald', sans-serif;
	text-align:center;
	padding-bottom:1%;
	font-size:1.6em;
}
.area-aa img{
	width:100%;
	height:auto;
}


/*==========================================
 コンテンツエリア wrapper01 ->area-b
===========================================*/
	
.area-b{
	padding-left: 2%;
	padding-right: 2%;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding-bottom: 2%;
}
.area-b h2{
	text-align:center;
	font-size:1.0em;
}
.area-b h3 {
	text-align:center;
	font-size:1.0em;
}

.area-b li{
	/*text-align:center;*/
	color:#FFF;
	line-height:1.5;
	list-style:none;
	font-size:1em;
	text-align:center;
}
.area-b p{
	font-size:1em;
	text-align:center;
}
.area-b h4{
	font-size:1em;
	text-align:center;
}
.area-b h5{
	color:#F00;
	text-align:center;
	font-size:1em;
	padding:0 1% 0;
}
.area-b h6{
	font-size:1em;
	text-align:center;
	color:#FFF;
}
.area-b h3{
	color:FFF;
}
.area-b h4 a{
	color:#FF00FF;
	font-size:1.2em;
}
.area-b:after{
	content:"";
	display:block;
	clear:both;
}
.wrappr0100:after{
	content:"";
	display:block;
	clear:both;
}
.wrapper0102{
	text-align:
center;
}

.wrapper0102 h4 a{
	color:#63F;
	font-size:1.2em;
}
.wrapper0102 h4 a:hover{
	color:#F00;
	font-size:1.6em;
}
.wrapper0102 h5{
	color:#F00;
	font-size:1.2em;
}
	
	
/*==========================================
 コンテンツエリア ->c
===========================================*/
.area-c{
	border-top: 1px solid #FF00FF;
	padding-bottom:1%;
}
.area-c h2{
	font-family: 'Oswald', sans-serif;
	text-align:center;
	padding-bottom:1%;
	font-size:1.6em;
}
.area-c p{
	padding:0 1% 0;
	color:#F00;
	text-align:center;
}
.imgg{
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing:border-box;
	padding:1px;
}

.imgg img {
	float:left;
	width: 48%;
	height:auto;
	margin:2px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing:border-box;	
}

.imgg img:hover{
	transform: rotate(3deg);
}


.wrapper0101:after {
	content:"";
	display:block;
	clear:both;
}
.eng {
	text-align:center;
color:#F00;
padding:0 1% 0;
}


/*==========================================
 コンテンツエリア  ->area-de
===========================================*/
.wrapper02{
	border-top: 1px solid #FF00FF;
}
.gmap{
	margin:0 5% 5%;
position: relative;
padding-bottom:50%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.gmap iframe, .gmap object, .gmap embed{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.gmap:after{
	content:"";
	display:block;
	clear:both;
}
.area-d h2{
	font-family: 'Oswald', sans-serif;
	text-align:center;
  padding-bottom:1%;
	font-size:1.6em;
}
.area-d h3{
	text-align:center;
}
.area-d p{
	text-align:center;
}
.area-dd img{
	width:100%;
	height:auto;
	padding-top:1%;
}

/*==========================================
 コンテンツエリア  ->f アイコン
===========================================*/
.area-f {
	font-size:2.5em;
	color:#F0C;
	text-align:center;
}
.area-f a{
	color:#F0C;
	padding-left:1%;
	padding-right:1%;
	padding-bottom:3%;
}
	
/*==========================================
 フッターのスタイル
===========================================*/
footer{
	background-color:#F0C;
	text-align:center;
	padding-top:2%;
	padding-bottom:6%;

	
}
.footer p{
	margin-top:0;
		color:#333;
		font-family: 'Oswald', sans-serif;
		margin-bottom:0;
}

.footer p span{
	font-weight: bold; 
}
.pepper a{
	font-size:0.8rem;
	color:#FF0;
	
}
.pepper a:hover{
	color:#0FF;
	
}
	
	
	

/* /_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_
  Media Queries による切り替え
/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/

/* ==================================================================
769px以上
=====================================================================*/
@media only screen and (min-width: 769px) {

.headl{
	float:left;
	width:60%;
	height:auto;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing:border-box;
}
.headr{
	float:left;
	width:40%;
	height:auto;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing:border-box;
}
	
h1{
	padding-left:6%;
}
.area-a{
	width:70%;
	margin:0 auto;
	}
.area-b{
	float:left;
	width:50%;
	
	
}

.wrapper01:after{
	content:"";
	display:block;
	clear:both;
}

	
.imgg img {
	float:left;
	width: 24%;
	height:auto;
  margin:3px;
	moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing:border-box;
	
}


.area-d{
	float:left;
	width:50%;
	height:auto;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing:border-box;
}

.area-dd{
	float:left;
	width:50%;
	height:auto;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing:border-box;
}

.wrapper02:after{
	content:"";
	display:block;
	clear:both;
}
.area-f {
	font-size:1.8em;
}
.area-f a:hover{
	#FFF:
} 

.footer{
	padding-bottom:0;
}
	

}