/*---------------------------------------------------------------------基本設定*/
/*--- 中央揃えとフォント ---*/
*{
  text-align: center;
  margin: 0 auto;
  margin-bottom:0.3em;
  font-family: 'Kiwi Maru', serif; }
body{
  /*background-color: #fefffa;*/
  background: linear-gradient(#e7e1f0, #fdfaff);
  background: -moz-linear-gradient(#e7e1f0, #fdfaff);
  background: -webkit-linear-gradient(#e7e1f0, #fdfaff);
  -webkit-text-size-adjust: 100%; /* 文字サイズ自動調整防止　*/
  color: #4d4d60;
  font-size: 18px; }


header {
  display: flex;
  width: 100%;
  height: 100px;
  background-color: #5c8ddb;
  background: linear-gradient(#5a6ed1, #8796e8, #c0bae0);
  background: -moz-linear-gradient(#5a6ed1, #8796e8, #c0bae0);
  background: -webkit-linear-gradient(#5a6ed1, #8796e8, #c0bae0);
  align-items: center;
  position: fixed;
}

.title {
  font-size: 40px;
  font-family: 'Indie Flower', cursive;
  color: #FFFFFF !important;
  margin-right: auto;
  text-decoration: none;
  border-bottom: none;
}

.menu-item {
  list-style: none;
  display: inline-block;
  padding: 8px;
  font-family: 'Kalam', cursive;
}
.logo{width:40px;
  margin-bottom:-10px;}
.icon{
  width: 25px;
  margin-bottom: -6px;
}

/*--- 文字の設定 ---*/
.tx2{
  font-size: 20px;}
.tx_i2{
  font-size: 20px; }
.tx3{
  font-size: 24px;
  margin-top:15px ;
  text-shadow:
      #FFFFFF 2px 0px,  #FFFFFF -2px 0px,
      #FFFFFF 0px -2px, #FFFFFF 0px 2px,
      #FFFFFF 2px 2px , #FFFFFF -2px 2px,
      #FFFFFF 2px -2px, #FFFFFF -2px -2px,
      #FFFFFF 1px 2px,  #FFFFFF -1px 2px,
      #FFFFFF 1px -2px, #FFFFFF -1px -2px,
      #FFFFFF 2px 1px,  #FFFFFF -2px 1px,
      #FFFFFF 2px -1px, #FFFFFF -2px -1px; }
.tx4{font-size: 13px;}

hr{color: #272c3b;}

/* ---- 真ん中の薄いやつ ---色候補→ #ffeff7*/
.bd {
  width: 1000px;
  height: auto;
	background-color: rgba(255,255,255,0.5); }


/*---------------------------------------------------------------------レイアウト*/
/*--- 自己紹介のレイアウト---*/
.about_container {
  width: 800px;
  height: 800px;
  margin: 0 auto; }
.about_right{
  width:270px;
  float: right;
  margin-right: 10px;
/*margin-top: 10px; */}
.about_left{
  width:510px;
  float: left;
  margin-left: 10px;}
.tb_br {
  border-collapse: collapse;
  margin-top:10px;
  margin-bottom: 10px;
  background-color:rgb(255,255,255,0.5);}
.member{
  text-align: left;
}
td{
  border: 1px #3b3730 solid;
  padding: 5px;}
/*  margin-top: 5px; */

/*--- URLの指定 ---*/
a:link { color: #7a6227 !important;}
a:visited { color: #7a6227 !important;}
a:hover { color: #f4e6f7 !important;}
a:active { color: #f4e6f7 !important;}

.us2 {
  text-decoration: none!important;
  color:#42495e !important;
  border-bottom: none;
  font-size: 16px; }
.dm_a{
  color: #3859a8;
  text-decoration: underline;}
.dm_a:hover{
  color: #3859a8;
  text-decoration: underline;}

/*--- 各トピックのアイコンレイアウト ---*/
.container_topics {
  width: 750px;
  height:auto;}
.container_topics_m {
  width: 550px;
  height:auto;}
.box_topics_s{
  float: left;
  width: 100px;
  height: 130px;
  border: 2px solid #3b3730;
  padding: 18px;
  margin-left: 35px;
  margin-bottom: 30px;
  background-color: rgb(255,255,255,0.5);}
.box_topics_p{
  float: left;
  width: 100px;
  height: 130px;
  border: 2px solid #3b3730;
  padding: 18px;
  margin-left: 30px;
  margin-bottom: 30px;
  background-color: rgb(255,255,255,0.5);}

.surplus_topics{
  clear: both;
  margin: 0 auto;}

.pic{width: 700px;}/*イラスト*/

  /*--- 小説のレイアウト ---*/
.novel{
  text-align: left;
  width:630px ;}
.tag{
  width: 200px;
  padding: 15px;
  margin-bottom: 15px;
  border:1px solid #3859a8}


  /*模擬キャラシ作成のレイアウト---------------------------------*/
  .dice_container{
    width: 700px;
  }
  .dice_main{/*ダイス画面のレイアウト1*/
    float: left;
    margin-left: 65px;
    margin-top: 10px;
    margin-bottom: 30px;}
  .dice_sub{/*ダイス画面のレイアウト2*/
    margin-left: 73px;
    margin-top: 10px;
    margin-bottom: 30px;
    float:left;}

/*------------------------------------------------------------------- 個別指定 */
.dia{/*トップのひしがた*/
  width: 96px;
  height: 96px;
  margin-bottom: -10px;
  border-bottom: none!important;}

.now{color: white;}/**/

#fc2_c{margin-bottom: -3px;}/*拍手ボタンの位置調整*/
#birthday_c{text-align: left;
  width: 200px;}/*誕生日一覧の表*/
#birthday_m{width: 80px;}
#dice_b{margin-top: 15px;}/*キャラシダイスのボタン*/
.tb_chbl_D{width: 100px;}/*更新日記の日付*/
.tb_chbl_T{width: 700px;}/*更新日記の中身*/
#chara_Ttab{width: 140px;}/*キャラの意味のない表*/

/*------------------------------------------------------------------- 線の設定*/
.line1{width: 800px;
  margin-top:10px;}/*実線1*/
.line1br{width: 800px;
  margin-top: 20px;}/*実線1_上に空白多め*/
.line2{width: 500px;}/*実践2*/
.line3{width: 800px;/*点線1*/
  border-style: dashed;}
.line4{width: 500px;/*点線2*/
  border-style: dashed;}
.lineAd1{width: 250px;/*点線about1*/
  border-style: dashed;}
.lineAd2{width: 400px;/*点線about2*/
  border-style: dashed;}

.lineM1{width: 550px;}/*実線1*/
.lineM2{width: 400px;}/*実践2*/
.lineM3{width: 550px;/*点線1*/
  border-style: dashed;}
.lineM4{width: 400px;/*点線2*/
  border-style: dashed;}

/*------------------------------------------------------------------- アコーディオンの設定*/
  /*アコーディオン全体*/
  .accordion-area{
      list-style: none;
      width: 96%;
      max-width: 900px;
      margin:0 auto;}

  .accordion-area li{
      margin: 10px 0;}

  .accordion-area section {
  	border: 1px solid #ccc;}

  /*アコーディオンタイトル
  .aco {
      position: relative;/*+マークの位置基準とするためrelative指定
      cursor: pointer;
      font-size:1rem;
      font-weight: normal;
      padding: 3% 3% 3% 50px;
      margin-top: -10px;
      margin-bottom: -10px;
      transition: all .5s ease;}

  /*アイコンの＋と×
  .aco::before,
  .aco::after{
      position: absolute;
      content:'';
      width: 15px;
      height: 2px;
      background-color: #333;}
  .aco::before{
      top:48%;
      left: 15px;
      transform: rotate(0deg);}
  .aco::after{
      top:48%;
      left: 15px;
      transform: rotate(90deg);}

  /*　closeというクラスがついたら形状変化

  .aco.close::before{
  	transform: rotate(45deg);}

  .aco.close::after{
  	transform: rotate(-45deg);}

  /*アコーディオンで現れるエリア
  #box {
      display: none;/*はじめは非表示
      background: #e9e6f0;
  	margin:0 3% 3% 3%;
      padding: 3%;}*/


  #box1 {
      display: none;
      background: #e9e6f0;
    margin:0 3% 3% 3%;
      padding: 3%;}

  #box2 {
      display: none;
      background: #e9e6f0;
    margin:0 3% 3% 3%;
      padding: 3%;}

  #box3 {
      display: none;
      background: #e9e6f0;
    margin:0 3% 3% 3%;
      padding: 3%;}

  #box4 {
      display: none;
      background: #e9e6f0;
    margin:0 3% 3% 3%;
      padding: 3%;}

  #box5 {
      display: none;
      background: #e9e6f0;
    margin:0 3% 3% 3%;
      padding: 3%;}

/*------------------------------------------------------------------- スペスオEDチェッカー*/
  .sp_bd{
    width: 1200px;
    height: auto;
    background-color: rgba(255,255,255,0.5);
    margin-top:30px;}

  .sp_h{
    font-weight: bold;
    font-size: 20px;
  }