@charset "utf-8";

body{
  background:url(https://www.peroguides.com/img/bg.jpg) repeat-x #0e040c;
  font-size:12px;
  color:#F2F2F2;
  line-height:17px;
  text-align:center;
}

/*----------------------------------------
//レイアウト
---------------------------------------- */
#wrap {
  width:820px;
  margin:0px auto;
  overflow:hidden;
  text-align:left;
  position:relative;
}

#header {
  height:500px;
  background:url(https://www.peroguides.com/img/title.jpg) no-repeat;
  position:relative;
  margin-bottom:20px;
}

#top,
#page,
#entry,
#footer {
  width:820px;
  padding:9px;
  border:1px solid #666666;
  background:#080808;
  overflow:hidden;
  margin-bottom:20px;
}

.left {
  float:left;
  padding-left:2px;
}
.right {
  float:right;
  padding-right:2px;
}

/*----------------------------------------
//footer
---------------------------------------- */
#footer{
  text-align:center;
  font-size:10px;
}
/*----------------------------------------
//共通
----------------------------------------*/
a:link,
a:visited {
  color:#F99;
  text-decoration:none;
}
a:hover,
a:active {
  color:#66F;
}

h1 {
  font-size:16px;
  text-align:center;
  margin:10px 0px 5px;
}

h2 {
  width:800px;
  height:45px;
  text-indent:-9999px;
  background:#FFF;
  margin-bottom:18px;
}
h2.midashi1 {
  background:url(https://www.peroguides.com/img/midashi1.gif) no-repeat;
}
h2.midashi2 {
  background:url(https://www.peroguides.com/img/midashi2.gif) no-repeat;
}
h2.midashi3 {
  background:url(https://www.peroguides.com/img/midashi3.gif) no-repeat;
}

#page h3 {
  margin:0 0 10px 0;
  padding:2px 8px;
  border-width:0 5px;
  border-color:#8c177e;
  border-style:solid;
  background:#d9c1e2;
  color:#5a1644;
  line-height:140%;
  font-weight:bold;
  text-align:center;
}

/*----------------------------------------
//header
---------------------------------------- */
#header .title {
  width:390px;
  height:130px;
  position:absolute;
  top:30px;
  right:20px;
  overflow:hidden;
}
#header .title a {
  width:390px;
  height:130px;
  display:block;
  text-indent:-9999px;
  top:30px;
  right:20px;
  cursor:pointer;
}
#header .entry {
  width:300px;
  height:260px;
  position:absolute;
  top:220px;
  right:40px;
  border:1px dotted #CCC;
  padding:10px;
}

/*----------------------------------------
//top
----------------------------------------*/
#top {
  background-image:url(https://www.peroguides.com/img/image1.jpg);
  background-repeat: no-repeat;
  background-position: right bottom;
  background-color: #080808;
  overflow:hidden;
}
#top h3 {
  font-size:14px;
  margin:0 0 10px 0;
  color:#d9c1e2;
  line-height:140%;
  font-weight:bold;
}
#top .left {
}

#top p {
  color:#CCCCCC;
  margin-bottom:15px;
  text-align:justify;
}
/*----------------------------------------
//
----------------------------------------*/
#page .right {
  width:380px;
}
#page .right .list {
  height:62px;
  padding:5px;
  border:1px solid #666;
  margin-bottom:8px;
  overflow:hidden;
}
#page .right .list a {
  width:360px;
  height:50px;
  display:block;
  color:#FFF;
}
#page .right .list a:hover {
  color:#F99;
}
#page .right .list .image {
  float:left;
  width:50px;
  height:50px;
  overflow:hidden;
  margin-right:5px;
  border:1px solid #666;
}
#page .right .list .image img {
  width:48px;
  height:auto;
  object-fit: cover;
}
#page .right .list p {
  overflow:hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  padding-top:5px;
}
#page .right table {
  table-layout:fixed;
  border-collapse:collapse;
  border-spacing:0px;
}
#page .right .pr1 {
  width:130px;
  height:1em;
}
#page .right .pr2 {
  white-space:nowrap;
  color:#C9F;
}
#page .right .pr1,
#page .right .pr2 {
}

/*----------------------------------------
// tab
----------------------------------------*/

#tabbox {
  width:400px;
}
#tabs {
  overflow:hidden;
}
#tabs li {
  float: left;
  cursor: pointer;
}
#tabs li span {
  display:block;
  margin-right:1px;
  padding: 10px 16px;
  border:1px solid #adadad;
  border-radius:5px 5px 0 0;
  text-align:center;
  font-weight:bold;
  background-color:#333333;
}
#tabs li.select span {
  border-bottom:1px solid #000;
  color:#f55e91;
  background-color:#000000;
}
.disnon {
  display: none;
}
.tabbox {
  width: auto;
  height: 515px;
  border-left:1px solid #adadad;
  border-right:1px solid #adadad;
  border-bottom:1px solid #adadad;
  border-top:1px solid #adadad;
  padding:10px;
  margin-top:-1px;
}
.tabbox dl {
  overflow:hidden;
}
.tabbox dt {
  clear:left;
  font-weight:bold;
  border-bottom:1px dotted #ccc;
  margin-bottom:5px;
  padding-left:15px;
  background:url(https://www.peroguides.com/img/icon1.gif) no-repeat 2px 4px;
}
.tabbox  dd {
  margin-bottom:10px;
  margin-left:1em;
  overflow:hidden;
}
.tabbox dd li {
  float:left;
  margin-right:1em;
  background:url(https://www.peroguides.com/img/arrow1.gif) no-repeat left 5px;
  padding-left:10px;
  display:block;
  height:2em;
  white-space:nowrap;
}

/*
#tabbox #tab1,
#tabbox #tab2,
#tabbox #tab3,
#tabbox #tab4 {
  overflow:hidden;
}
#tabbox #tab1 dt,
#tabbox #tab2 dt,
#tabbox #tab3 dt,
#tabbox #tab4 dt {
  clear:left;
  font-weight:bold;
  border-bottom:1px dotted #ccc;
  margin-bottom:5px;
  padding-left:15px;
  background:url(https://www.peroguides.com/img/icon1.gif) no-repeat 2px 4px;
}
#tabbox #tab1 dd,
#tabbox #tab2 dd,
#tabbox #tab3 dd,
#tabbox #tab4 dd {
  margin-bottom:10px;
  margin-left:1em;
  overflow:hidden;
}
#tabbox #tab1 li,
#tabbox #tab2 li,
#tabbox #tab3 li,
#tabbox #tab4 li {
  float:left;
  margin-right:1em;
  background:url(https://www.peroguides.com/img/arrow1.gif) no-repeat left 5px;
  padding-left:10px;
  display:block;
  height:2em;
  white-space:nowrap;
}
*/
/*----------------------------------------
//エントリー
---------------------------------------- */

#entry {
  background-image:url(https://www.peroguides.com/img/image2.jpg);
  background-repeat: no-repeat;
  background-position: right bottom;
}
#entry .left{
  width:430px;
}
#entry .left dl {
  width:400px;
  padding-left:5px;
}
#entry .left dt {
  font-size:14px;
  color:#FFD9EC;
  font-weight:bold;
  margin-bottom:3px;
  background:url(https://www.peroguides.com/img/arrow2.gif) no-repeat 0px 3px;
  padding-left:12px;
}
#entry .left dd {
  margin-bottom:5px;
  text-align:justify;
}

#entry .right{
  width:330px;
  height:300px;
}