@charset "utf-8";
* {
  margin: 0px;
  padding: 0px;
}
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
a {
  text-decoration: none;
}
img {
  vertical-align: bottom;
  border: none;
  width: 100%;
}
table {
  border-collapse: collapse;
}
.clearfix:after {
  content: ".";  /* 新しい要素を作る */
  display: block;  /* ブロックレベル要素に */
  clear: both;
  height: 0;
  visibility: hidden;
}
.clearfix {
  min-height: 1px;
}
* html .clearfix {
  height: 1px;
  /*\*/
  /*/
	height: auto;
	overflow: hidden;
	/**/
}
body {
  font-family: Verdana, "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif;
  scroll-behavior: smooth;
  background-color: #FFF;
}

/*共通*/
.main {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  overflow: hidden;
}
.rela {
  position: relative;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}
.abso {
  position: absolute;
}
.flex {
  display: flex;
}

/*ロゴ*/
#rogo {
margin: 0 auto;
  max-width: 568px;
  width: 74.7%; 
  top: 25%;
  left: 0;
  right: 0;
}
/*星座*/
#star_flex1{
  width: 100%;
  max-width:760px;
  padding:0 2.5%;
  top: 5%;
  display:flex;
  flex-wrap: wrap;
  justify-content:space-between;
}
#star_flex1 a {
  display:block;
  width:33%;
  padding:1% 0;
}

#index_support {
 margin: 0 auto;
  max-width: 594px;
  width: 78.1%; 
  top: 63%;
  left: 0;
  right: 0;
}

/*フッター*/
footer {
  background: #193249;
  text-align: center;
  color: #FFF;
  padding: 10px 0;
}

footer a {
  color: #FFF;
}

/*form*/
#form_area {
  background: #71D3D6;
}
#form_body {
  background: url(../img/up/12seiil_img/form_body_bg.png) repeat-y;
  background-size: 100% auto;
}
.form_contents {
  text-align: center;
  padding: 15px 0;
  font-size: min(4.5vw, 23px);
  color: #473901;
}
.form_contents p {
  font-size: min(4.5vw, 23px);
  font-weight: bold;
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.form_contents p.answer {
  font-size: min(4.5vw, 23px);
}
.form_contents select {
  font-size: min(4.5vw, 23px);
}
.form_contents input[type=radio] {
  display: none;
}
.form_contents .label {
  border: 1px solid #aaa;
  padding: 5px 15px;
  line-height: 180%;
  border-radius: 10px;
  font-weight: bold;
}
.form_contents input[type="radio"]:checked+label.menlabel {
  background: #006DD9;  /* マウス選択時の背景色を指定する */
  color: #ffffff;  /* マウス選択時のフォント色を指定する */
}
.form_contents input[type="radio"]:checked+label.womenlabel {
  background: #DB377F;  /* マウス選択時の背景色を指定する */
  color: #ffffff;  /* マウス選択時のフォント色を指定する */
}
.form_contents input[type="text"] {
  width: 80%;
  font-size: 4.5vw;
  padding: 5px;
}
.form_contents input[type="image"] {
  max-width: 642px;
  width: 84.4%;
  margin: 0 auto;
}
p.answer {
  font-size: 1.6rem;
}
.other_page {
  background: url(../img/up/12seiil_img/bg.jpg) repeat-y;
  background-size: 100% auto;
  padding: 20px 0;
}
@media screen and (min-width:760px) {
  .form_contents, .form_contents p {
    font-size: 34.2px;
  }
  .form_contents select, .form_contents input[type="text"] {
    font-size: 41.8px;
  }
}
.mail_btn_area {
	color:#DA63E7; /*メール説明の文字色*/
	width:72%;
	margin:0 auto;
	text-align:left;
	font-size: 18px;
}


/*サポートページ*/
.menu {
  margin: 0 auto;
  background: url(../img/up/12seiil_img/support_bk.jpg) repeat-y;
  padding: 40px 0;
}
.menu_btn {
  display: block;
  max-width: 400px;
  width: 100%;
  margin: 10px auto;
  padding: 14px;
  box-sizing: border-box;
  background: #CC9CC6;
  border: 2px solid #4C5CA9;
  color:#000;
  font-weight: bold;
  font-size: 18px;
  text-align: center;
  outline: none;
}

/*そのた*/
.text_area {
  width: 90%;
  margin: 0 auto;
  padding: 20px;
  font-size: 18px;
  color: 000;
}
.text_area_title {
  color: #000;
  text-align: center;
  font-weight: bold;
  font-size: 20px;
  margin: 10px;
}
.text_area_title a {
  color: #35689D;
}
/*アニメーション*/
img.text_01 {
	animation: fade_in 0.5s linear ;
	animation-delay:0.5s;
	animation-iteration-count:1;
	animation-fill-mode: forwards;
}
.start_0 {
	opacity: 0;
}
#star_flex1 a:nth-of-type(odd){
  animation: anime_updown 2s alternate infinite;
}
#star_flex1 a:nth-of-type(even){
  animation: anime_updown 2s alternate infinite;
  animation-delay:2s;
}
@keyframes fade_in {
	0% {opacity:0; transform: translateY(50px);}
    100% {opacity:1; transform: translateY(0);}
}

@keyframes anime_updown{
    0% {transform: scale(1);}
    100% {transform: scale(0.95);}
}