@charset "utf-8";

/*-------------- 共通 --------------*/
body{
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 12px;
  line-height: 1.2em;
  color:#FFFFFF;
  background:url(https://www.frokusa.org/img/bg.gif);
  text-align:center;
}

p {
  line-height:1.6em;
  margin-bottom:1em;
}
#page {
  margin:10px auto;
  width:820px;
  padding:9px;
  border:1px solid #999;
  background:#181818;
  text-align:left;
}
h1 {
  font-size:16px;
  font-weight:bold;
  margin-bottom:10px;
  text-align:center;
  padding:10px 0 0;
}
a:link,
a:visited {
  color:#d5c592;
  text-decoration:none;
}
a:hover {
  color:#fbefbd;
}
a:active {
  color:#cbab8b;
}

/*********** ヘッダ ***********/
#top {
  font-size:16px;
  font-weight:bold;
  margin-bottom:10px;
  margin-top:20px;
}

/*********** footer ***********/
footer {
  clear:both;
  text-align:center;
  font-size:10px;
}
/*********** サイドメニュー ***********/
#side {
  float:left;
  width:182px;
  background:#312d2c;
  border:1px solid #4a4a4a;
  margin-bottom:10px;
}
#side h2{
  width:180px;
  height:35px;
  margin-bottom:5px;
  background-image:url(https://www.frokusa.org/img/side_title.jpg);
  background-repeat:no-repeat;
  background-position:0 0;
  text-indent:-9999px;
}
#side iframe{
  width:175px;
  height:330px;
  color:#FFFFFF;
  margin-left:6px;
}
#side h3 {
  width:180px;
  height:26px;
  margin-bottom:5px;
  overflow:hidden;
  background-image:url(https://www.frokusa.org/img/side_title.jpg);
  background-repeat:no-repeat;
  text-indent:-9999px;
}
#side h3.title1{ background-position:0  -50px; }
#side h3.title2{ background-position:0 -100px; }
#side h3.title3{ background-position:0 -150px; }
#side h3.title4{ background-position:0 -200px; }
#side h3.title5{ background-position:0 -250px; }

#side p{
  padding:0px 7px;
  color:#CCCCCC;
  margin-bottom:10px;
  font-size:11px;
  line-height:1.5em;
  text-align:justify;
}

/*トップメニュー*/
ul#top_menu {
  list-style:none;
  width:800px;
  margin:10px 0px;
  overflow:hidden;
  zoom:100%;

}
ul#top_menu li {
  float:left;
}

ul#top_menu li a {
  display:block;
  height:30px;
  width:160px;
  text-align:center;
  font-weight:bold;
  letter-spacing:1px;
  text-indent:-9898px;
  background-image:url(https://www.frokusa.org/img/top_menu.png);
  background-repeat:no-repeat;
}

ul#top_menu a.top {background-position:0px 0px;width:160px;}
ul#top_menu li a.top:hover {background-position:0 -30px;}

ul#top_menu a.area {background-position:-160px 0px;}
ul#top_menu li a.area:hover {background-position:-160px -30px;}

ul#top_menu li a.purpose {background-position:-320px 0px;}
ul#top_menu li a.purpose:hover {background-position:-320px -30px;}

ul#top_menu li a.tendency {background-position:-480px 0px;}
ul#top_menu li a.tendency:hover {background-position:-480px -30px;}

ul#top_menu li a.look {background-position:-640px 0px;}
ul#top_menu li a.look:hover {background-position:-640px -30px;}
/************ main ************/

#main {
  float:right;
  width:610px;
  min-height:1090px;
  border:1px solid #4a4a4a;
  padding:5px;
  margin-bottom:20px;
}
#main .setumei {
  padding:0 10px;
}

#main h2 {
  width:600px;
  *width:545px;
  height:46px;
  margin-bottom:10px;
  font-size:18px;
  font-weight:bold;
  line-height:46px;
  background:url(https://www.frokusa.org/img/midashi.jpg) no-repeat;
  padding-left:55px;
  color:#FFF;
}

/*-------  ピックアップ ------- */
#pickup{
  margin-bottom:10px;
  overflow:hidden;
  zoom:1; /* for ie6 */
}
#pickup ul {
  width:100%;
  overflow:hidden;
}
#pickup li {
  float:left;
  width:25%;
  height:180px;
}
#pickup dl {
  margin:5px;
  padding:5px;
  border:1px solid #cbab8b;
  text-align:center;
}
#pickup dt {
  margin:2px auto 5px;
}
#pickup dt img {
  margin:0 3px;
  width:9px;
  height:9px;
}
#pickup dd {
  line-height:1.3em;
}
#pickup .photo {
  height:100px;
  overflow:hidden;
  margin-bottom:5px;
}

/*---------- 検索 ---------- */

#category a {
  border-bottom:1px dotted #cbab8b;
  padding-bottom:1px;
}
#category dl {
  margin:0px 10px 10px;
}
#category dt {
  padding:3px 10px;
  background-color:#333;
  border-left:3px solid #F99;
}
#category dd {
  margin-bottom:10px;
  padding:5px 0px 5px 5px;
}
#category dd ul {
  overflow:hidden;
  zoom:1;
}
#category dd li {
  float:left;
  display:inline;
  white-space:nowrap;
  height:30px;
  line-height:30px;
}
#category dd li:before{
  font-family: "Font Awesome 5 Free";
  content:"\f105";
  font-weight:bold;
  margin-right:3px;
}

#area{
  margin-bottom:10px;
  overflow:hidden;
  zoom:1; /* for ie6 */
}
#area dt {
  clear:left;
  float:left;
  width:95px;
  height:25px;
  line-height:25px;
  padding:0px 0px 0px 8px;
}
#area dd {
  padding:0px;
  margin-left:105px;
  height:25px;
  line-height:25px;
}
#area dd li {
  width:50px;
  height:25px;
  line-height:25px;
  margin-right:9px;
}
#area dd  li:before {
  content:"";
  margin-right:0px;
}

#purpose dd li,
#tendency dd li{
  width:25%;
}
#purpose #age dd li {
  width:60px;
}

#look dd li {
  width:20%;
}
#look dd .height li {
  width:150px;
}

/*********** person ***********/
.navi {
  clear:left;
  overflow:hidden;
  zoom:1;
  margin:5px 0px;
}
.navi .home {
  float:left;
  padding-left:3px;
}
.navi .back {
  float:right;
  padding-right:10px;
}
.pager {
  float:right;
  padding-right:10px;
}
.pager img {
  width:50px;
  height:16px;
}
/*検索リスト*/
#person {
  overflow:hidden;
  zoom:1;
}
#person .prf {
  width:25%;
  float:left;
}
#person .prf dl {
  margin:5px;
  padding:10px 2px;
  border:1px solid #333333;
  text-align:center;
}
#person .prf dt {
  margin-bottom:5px;
  overflow:hidden;
}
#person .prf img{
  object-fit: cover;
  height:100px;
  border:1px solid #999999;
}
#person .prf dd li {
  white-space:nowrap;
  overflow:hidden;
  line-height:1.5em;
}

/*********** profile ***********/
#profile {
  padding:10px;
}

#profile h3 {
  font-size:14px;
  margin-bottom:20px;
  line-height:16px;
  height:16px;
  font-weight:bold;
  background:url(https://www.frokusa.org/img/icon1.gif) no-repeat 0 1px;
  padding-left:12px;
}

hr{
  clear:both;
  color:#4a4a4a;
  height:1pt;
  text-align: center;
}
*>hr{
  border-style: solid;
  border-color: #4a4a4a;
  border-width: 1pt 0 0 0;
  margin:  0 auto 17px;
}

/*----------- data1 -----------*/
#profile #data1{
  float:left;
  width:120px;
  margin-left:15px;
}
#profile #data1 img {
  border:1px solid #CCCCCC;
  margin-bottom:10px;
}

/*----------- data2 -----------*/
#profile #data2 {
  float:right;
  width:440px;
  text-align:left;
}

#profile #data2 .purpose {
  font-size:14px;
  color:#faeaf9;
  margin-bottom:10px;
}
#profile #data2 .purpose img {
  margin:0 5px;
  vertical-align:middle;
}
#profile .sendmail {
  clear:left;
  text-align:right;
  height:30px;
  font-size:14px;
}
#profile .sendmail a {
  padding-left:18px;
  background-image:url(https://www.frokusa.org/img/icon_mail.gif);
  background-repeat: no-repeat;
  background-position:left center;
}

/*----------- data3 左 -----------*/

dl#data3 {
  float:left;
  width:240px;
  padding-left:10px;
  margin-bottom:20px;
  color:#d5c592;
}
dl#data4 {
  float:right;
  width:320px;
  margin-bottom:20px;
}

dl#data3 dt,
dl#data4 dt {
  clear:left;
  float:left;
  line-height:2em;
  font-weight:bold;
  background:url(https://www.frokusa.org/img/icon2.gif) no-repeat 0 9px;
  padding-left:12px;
  color:#add8e6;
}
dl#data3 dt {
  width:45px;
}
dl#data4 dt {
  width:55px;
}
dl#data3 dd,
dl#data4 dd {
  line-height:2em;
}
dl#data3 dd ul,
dl#data4 dd ul {
  overflow:hidden;
  zoom:1;
}
dl#data3 dd li,
dl#data4 dd li {
  float:left;
  margin-right:1em;
}
/*----------- form-----------*/

#profile iframe {
  margin-left:10px;
}