@import url(https://fonts.googleapis.com/css?family=Lato:400,700);
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);

@media screen and (min-width: 769px){
img{
max-width: 100%;
height: auto;
width /***/:auto;　
}
#container{
width:100%;
}

body,td,th{ 
color:#333333;  
font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
-webkit-text-size-adjust: 100%
}

body{
  width:100%; 
height: 100%;	
  text-align:center;
padding:3px;
background-color:#efebe7;
-webkit-text-size-adjust: 100%
}


body , html {
    margin: 0 auto;
    height: 100%;
}

.container {
    width: 100%;
    position: relative;
    height: auto !important;
    height: 100%;
    min-height: 100%;
color:#333333;  
font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
}
 
.main {
    padding-bottom: 100px;
}


#wrap {  
width : 880px;
margin : 0 auto ;
color:#333333;  
font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif; 
-webkit-text-size-adjust: 100%
}  

#main2 {
margin-left: 200px;
left: -50%;
background: #efebe7;
padding:15px 0px 15px 0px;
text-align:left;
line-height     : 1.6;
padding-bottom: 100px;
-webkit-text-size-adjust: 100%
}

div#main2 td {
font-size: 1em
line-height     : 1.6;
font-size: small;
}

#submenu {
width : 200px ;
left: 50%;
float: left;
background-color:#efebe7;
padding:15px 0px 0px 0px;
font-size: small;  
color:#333333;  
font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
font-weight:nomal;
line-height     : 1.4;
}
div#submenu a{
text-decoration:none;
font-size: small;
}

div#submenu td {
font-size: small;
}

#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 70px;
background-color:#333333;
font-size: small;  
color:#ffffff;  
font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
font-weight:nomal;
margin:0px auto;
padding:3px;
}
.button {
	position: relative;
	display: inline-block;
	padding: .64em 2em;
	border: 2px solid #333;
	color: #333;
	text-decoration: none;
	text-align: center;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
	width: 4em;
}
.button::after {
	position: absolute;
	top: 5px;
	left: 5px;
	z-index: -1;
	content: '';
	width: 101%;
	height: 105%;
	background-color: #fe5f95;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.button:hover {
	color: #fff;
}
.button:hover::after {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.button2 {
	position: relative;
	display: inline-block;
	padding: .8em 2.5em;
	background: -webkit-linear-gradient(#fe5f95 , #ff3f7f);
	background: linear-gradient(#fe5f95 , #ff3f7f);
	border: 1px solid #fe3276;
	border-radius: 4px;
	color: #fff;
	text-decoration: none;
	text-align: center;
       width: 8em;
}
.button2::after {
	position: absolute;
	top: 3px;
	right: 3px;
	bottom: 3px;
	left: 3px;
	content: '';
	border: 2px dashed #fff;
	border-radius: 4px;
}
.button3 {
	display: inline-block;
	width: 120px;
	height: 120px;
	line-height: 120px;
	background: -webkit-linear-gradient(#fe5f95 , #ff3f7f);
	background: linear-gradient(#fe5f95 , #ff3f7f);
	border: 1px solid #fe3276;
	border-radius: 50%;
	color: #fff;
	text-decoration: none;
	text-align: center;
}
.button3:hover {
	-webkit-animation: scale .3s ease-in-out;
	animation: scale .3s ease-in-out;
}
@-webkit-keyframes scale {
	50% { -webkit-transform: scale(1.1); }
}
@keyframes scale {
	50% { transform: scale(1.1); }
}

.button4 {
	display: inline-block;
	padding: .55em 2em;
	border: 2px solid #333;
	border-radius: 3em .5em 2em .5em/.4em 2em .5em 3em;
	color: #333;
	text-decoration: none;
	text-align: center;
font-size: small;
}