@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Rammetto+One&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

body{
	font-size:medium;
	color:#333;
	font-family: "Helvetica Neue",
	Arial,
	"Hiragino Kaku Gothic ProN",
	"Hiragino Sans",
	Meiryo,
	sans-serif;
	line-height:2;
	margin:3em auto 0 auto;
	text-align:center;
	font-size:medium;
}

main{
	margin:10% 20%;
}

h1{
	font-family: 'Rammetto One', cursive;
	font-size:300%;
	line-height:1;
	text-align:center;
}

#k{
	background:linear-gradient(transparent 40%, #ff0 60%);
	font-weight:bold;
}

h2{
	font-size:medium;
	font-weight:normal;
	text-align:left;
}

.mess{
	display:block;
	margin:1em auto;
	max-width:100%;
}

.mess i{
	color:#f00;
	margin-right:0.3em;
}

.mess p{
	text-align:left;
}

.enter{
	margin:0 auto;
}

#fo{
	text-align:center;
	font-size:90%;
}

.postbutoon{
	width:77px;
	height:20px;
	margin:0;
	padding:0;
}

/* ■メンテナンス■
   ----------------------------- */

.menten{
	font-size:120%;
	padding:1em;
}


/* 回転Y軸
   ----------------------------- */

.enter a{/*テキストの基点となる位置を定義*/
	position: relative;
	display: block;
	width:200px;
	height:40px;
	padding:0;
	text-align:center;
	margin:0 auto;
	text-decoration:none;
}

.enter div {
  transition: all 0.35s ease;
  background:#F96D15;/*背景色*/
  color: #fff;
width:200px;
height:40px;
  display: flex;
  justify-content: center;
  align-items: center;
  backface-visibility: hidden;/
}

.enter a:hover div {/*hoverした時の変化*/
  transform: rotateY(-180deg);
  opacity: 0;
}

.enter img {
/*ここからエリアの絶対配置の指定*/
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
/*ここまでエリアの絶対配置の指定*/
  transition: all 0.35s ease;
  transform: rotateY(90deg);
  transform-origin: 50% 0%;/*回転する基点*/
  opacity: 0;
}

.enter a:hover img {/*hoverした時の変化*/
  transform: rotateY(0);/*横軸に回転*/
  opacity: 1;
  transition-delay: 0.15s;/*移り変わる速さ*/
}


@media (max-width: 430px) {


body{
	margin:1em auto;
}

main{
	margin:15% 6%;
}


h1{
	font-family: 'Rammetto One', cursive;
	font-size:180%;
	line-height:1.3;	
	max-width:100%;
}

}