@charset "utf-8";
/* CSS Document */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0; padding: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/*HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*画像が幅に合わせて変わる*/
	img{width: 100%;
	/*MAX幅にするならこれをいれる
		width: 100%;*/
	margin: 0;
	padding: 0;
	vertical-align: bottom;
}
.backimg{position: relative;}
/*ボタンの高さ調節*/
.bt_pre_1{
	position: absolute;
	top:84.5%;
	left:5%;
	width:90%;
	text-align: center;}
.bt_nin_1{
	position: absolute;
	top:69.5%;
	left:5%;
	width:90%;
	text-align: center;}
.bt_biyo_1{
	position: absolute;
	top:69.5%;
	left:5%;
	width:90%;
	text-align: center;}
.bt_fam_1{
	position: absolute;
	top:69.5%;
	left:5%;
	width:90%;
	text-align: center;}
.bt_nin_2{
	position: absolute;
	top:82%;
	left:5%;
	width:90%;
	text-align: center;}
.bt_nin_3{
	position: absolute;
	top:57%;
	left:5%;
	width:90%;
	text-align: center;}
.bt_biyo_2{
	position: absolute;
	top:82%;
	left:5%;
	width:90%;
	text-align: center;}
.bt_biyo_3{
	position: absolute;
	top:58%;
	left:5%;
	width:90%;
	text-align: center;}
.bt_fam_2{
	position: absolute;
	top:82.5%;
	left:5%;
	width:90%;
	text-align: center;}
.bt_fam_3{
	position: absolute;
	top:66%;
	left:5%;
	width:90%;
	text-align: center;}
.bt_nin_4{
	position: absolute;
	top:62%;
	left:5%;
	width:90%;
	text-align: center;}
.bt_biyo_4{
	position: absolute;
	top:60%;
	left:5%;
	width:90%;
	text-align: center;}
.bt_fam_4{
	position: absolute;
	top:59%;
	left:5%;
	width:90%;
	text-align: center;}

/*pop内ボタンの高さ調節*/
.bt1_1{
	position: absolute;
	top:29%;
	left:4.5%;
	width:48%;
	text-align: center;}
.bt1_2{
	position: absolute;
	top:9%;
	left:5%;
	width:88%;
	text-align: center;}
.bt1_3{
	position: absolute;
	top:29%;
	left:46.5%;
	width:48%;
	text-align: center;}
.bt1_4{
	position: absolute;
	top:74%;
	left:5%;
	width:90%;
	text-align: center;}
.bt2_1{
	position: absolute;
	top:30%;
	left:4%;
	width:48%;
	text-align: center;}
.bt2_2{
	position: absolute;
	top:9%;
	left:5%;
	width:88%;
	text-align: center;}
.bt2_3{
	position: absolute;
	top:30%;
	left:47%;
	width:48%;
	text-align: center;}
.bt2_4{
	position: absolute;
	top:79%;
	left:5%;
	width:90%;
	text-align: center;}
.bt3_1{
	position: absolute;
	top:31%;
	left:4%;
	width:48%;
	text-align: center;}
.bt3_2{
	position: absolute;
	top:9%;
	left:5%;
	width:88%;
	text-align: center;}
.bt3_3{
	position: absolute;
	top:31%;
	left:47%;
	width:48%;
	text-align: center;}
.bt3_4{
	position: absolute;
	top:79%;
	left:5%;
	width:90%;
	text-align: center;}

 /*妊活プルダウンの位置*/
.pre3{
	position: absolute;
	top:58%;
	left:35%;
	width:100%;
	text-align: center;
}
.pre4{
	position: absolute;
	top:68.5%;
	left:35%;
	width:100%;
	text-align: center;
}

/*プルダウンの位置*/
.pre1{
	position: absolute;
	top:62%;
	left:38%;
	width:100%;
	text-align: center;
}
.pre2{
	position: absolute;
	top:73%;
	left:38%;
	width:100%;
	text-align: center;
}



 /*ボタンが白くなる*/
@media only screen and (min-width: 641px) {
  #page {width: 640px; margin: 0px auto; }
}
p[class *= "bt"]:hover {
  opacity: 0.5;
}

/* ポップアップウインドウの設定 */
@media screen and (min-width: 481px) {
.popimg {
	width: 60vmin;
}
}
@media screen and (max-width: 480px) {
.popimg {
	width: 100%;
}
.popup-content{
  width: 80vmin;
}
}
.popup {
  background-color: rgba(0, 0, 0, .8);
  display: none;
  position: fixed;
	top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.popup-nin {
  background-color: rgba(0, 0, 0, .8);
  display: none;
  position: fixed;
	top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.popup-biyo {
  background-color: rgba(0, 0, 0, .8);
  display: none;
  position: fixed;
	top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.popup-biyo1 {
  background-color: rgba(0, 0, 0, .8);
  display: none;
  position: fixed;
	top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.popup-fam {
  background-color: rgba(0, 0, 0, .8);
  display: none;
  position: fixed;
	top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.popup-fam1 {
  background-color: rgba(0, 0, 0, .8);
  display: none;
  position: fixed;
	top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.popup-sp {
  background-color: rgba(0, 0, 0, .8);
  display: none;
  position: fixed;
	top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
/* チェックボックスの初期設定 */
#popup-on{
  display: none;
}
#popup-on-nin{
  display: none;
}
#popup-on-biyo{
  display: none;
}
#popup-on-biyo1{
  display: none;
}
#popup-on-fam{
  display: none;
}
#popup-on-fam1{
  display: none;
}
#popup-on-sp{
  display: none;
}
/* チェックされたらポップアップウインドウを開く */
#popup-on:checked + .popup{
  display: block;
}
#popup-on-nin:checked + .popup-nin{
  display: block;
}
#popup-on-biyo:checked + .popup-biyo{
  display: block;
}
#popup-on-biyo1:checked + .popup-biyo1{
  display: block;
}
#popup-on-fam:checked + .popup-fam{
  display: block;
}
#popup-on-fam1:checked + .popup-fam1{
  display: block;
}
#popup-on-sp:checked + .popup-sp{
  display: block;
}
/* 閉じるアイコン（右上） */
.icon-close{
  color: rgba(0, 0, 0, .8);
  font-size: 30px;
  padding: 0 10px;
  position: absolute;
  right: 0;
  z-index: 100;
}

/* 閉じるボタン */
.btn-close{
  background: #000;
  border-radius: 10px;
  color: #fff;
  padding: 0px 10px 5px 0px;
  cursor: pointer;
  margin: 10px auto;
  width: 70%;
  text-align: center;
}

/* 開くボタン */
.btn-open{
  background: #fff;
  border-radius: 10px;
  color: #fff;
  padding: 10px;
  cursor: pointer;
  margin: 10px auto;
  text-align: center;
}

/* ポップアップの内容 */
.popup-content{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.radio{
	display: none;
}
.radio1{
	display: none;
}
.radio2{
	display: none;
}
/* ラジオボックスに関して */
.radio + .radio_image {
	border: 3px #ffffff solid;
	background-color: #ffffff;
}
.radio:checked + .radio_image {
	border: 3px #ff0000 solid;
	background-color: #ffeeee;
}