@charset "utf-8";

/*文字コード指定*/
/* ----- css reset(各ブラウザで指定されているスタイルを初期化)と全体設定 ----- */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, textarea, p, th, td, img {
  margin: 0;
  /*ボックス外側の余白(値1つは上下左右をまとめて指定)*/
  padding: 0;
  /*ボックス内側の余白(値1つは上下左右をまとめて指定)*/
  border: 0;
  /*境界線指定*/
}
/*全体設定*/
body {

    background-image: url("https://fuyubirikka.info/newrikkabutton.png");

  /* Old browsers */
  color: black;
  /*文字色指定*/
  font-size: 90%;
  /* フォントサイズ指定(%はブラウザに設定した標準文字サイズ(通常16px)に対する値)*/
  font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro";
  /*フォントの種類指定(左から優先順位)*/
  line-height: 1.5;
  /*行の高さ指定(数値のみの場合はfont-sizeの倍数)*/
}

/*URL全般*/
a {
  color: black;
  text-decoration: none;
   border-bottom: 1px dashed;
}

a:hover {
  color: black;
  text-decoration: none;
  border-bottom: 1px solid;
}
/*「リッカボタン」*/
.title{
  text-align: center;
}

.info{
  background-color: #f4ccdc;
  line-height: 1.8;
}


/*バースデーカウントダウン*/
.birthday{
  text-align: center;
  font-weight: bold;
}
@media screen and (max-width: 600px) {
  .twitter-timeline {
    width: 100% !important;
  }

  .rikka-icon{
    width: 100%;
    height:auto;
  }
}

/*罫線その1*/
/*コメントアウトはデフォルトカラー*/
.st1{
  /*margin:1em,0;
	border-style: solid;
  border-color: #fdf5e6;*/
  border-color: #5A5593;
  border-style: dashed;
  border-width: 3px 0 0 0;
}

/*罫線その2*/
.st2{
  /*margin:1em,0;
	border-style: solid;
  border-color: #fdf5e6;*/
  border-style : dashed;
  border-color: #5A5593;
  border-width: 3px 0 0 0;
}

/*ボタン*/
article button {
  margin: 2px 2px 2px 2px;
  display: inline-block;
  padding: 0.3em 1em;
  text-decoration: none;
  color: #000000;
  background-color: white;
  border: solid 2px #BBC0EF;
  border-radius: 3px;
  transition: .4s;
}

/*ボタンのホバー時*/
article button:hover {
  background: #BBC0EF;
  color: black;
}
.b{
  font-weight: bold;
}

/*プロフカードの中の文字*/
.profile-card {
  font-size: 12pt;
  line-height: 25px;
}

/*youtubeとかtwitterとかのアイコン*/
.thumbnail {
  border-bottom: none;
  text-decoration: none;
  display: inline-block;
}

.cos{
  position: relative;
  max-width: 100%;
  overflow-x: auto;  
}

.cos table{
  width:100%;  
  table-layout: fixed;
  
}

.th{
  width: 100px;
}
.name{
  width:355px
}

.cos td,.cos th{  
  border: 2px solid #c5daff;
}

.box {
  cursor: pointer;
  height: 860px;
  margin-inline: auto;
  margin-top: 0;
  position: relative;
  width: 360px;
}
/* 画像のスタイル */
.box img {
  top:3px;
  left: 2.5px;
  position: absolute;  
}
/* 2枚目の画像は最初透明 */
.box img:last-of-type {
  opacity: 0;
  transition: opacity .7s;
}
/* hoverすると2枚目の画像が透明じゃなくなる */
.box:hover img {
  opacity: 1;
}
.box:hover img:first-child{
  opacity: 0;
}

/*連絡先のとこ*/
.contact {
  font-size: 12pt;
}

/*プロフ*/
.profile{
  background:white ;
  padding: 1em;
}

/*タブ切り替え全体のスタイル*/
.tabs {
  /*margin-top: 50px;
  padding-bottom: 40px;*/
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  width: 820px;
  height: 600;
  margin: 0 auto;}


  @media screen and (max-width: 820px) {
    .tabs {
      /*margin-top: 50px;
      padding-bottom: 40px;*/
      background-color: #fff;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
      width: 100%;
      height: 600;
      margin: 0 auto;}

  }

/*タブ切り替え全体のスタイル*/
.tab-area{
  width: 820px;
  height: 600;
  margin: 0 auto;
  background-color: white;
  }
     
  .tab-list{
    display:block;
    width:205px;
    padding: 8px 0;
    text-align:center;
    border-top:1px solid #4e7bcc;
    border-left:1px solid #4e7bcc;
    border-right:1px solid #4e7bcc;
    border-radius: 4px 4px 0 0;
    background: #c5daff;
    box-sizing:border-box; /*borderの値を横幅に含める*/
    cursor:pointer; /*オンマウス時にカーソルを指の形に*/
    }
    .tab-list-wrap{
      padding:0; /*デフォルトの値をクリア*/
      margin: 0; /*デフォルトの値をクリア*/
      list-style-type:none; /*デフォルトの値をクリア*/
      display:flex; /*ボタンを横並びに*/
      justify-content:space-between; /*ボタンを横幅いっぱいに配置*/
      }
  @media screen and (max-width: 820px) {
    .tab-area {
      /*margin-top: 50px;
      padding-bottom: 40px;*/
      
      width: 100%;
      height: 600;
      margin: 0 auto;
      background-color: white;}

      .tab-list{
        display:block;
        width:100%;
        padding: 8px 0;
        text-align:center;
        border-top:1px solid #4e7bcc;
        border-left:1px solid #4e7bcc;
        border-right:1px solid #4e7bcc;
        border-radius: 4px 4px 0 0;
        background: #c5daff;
        box-sizing:border-box; /*borderの値を横幅に含める*/
        cursor:pointer; /*オンマウス時にカーソルを指の形に*/

  }
  .tab-list-wrap{
    width: 100%;
    padding: 0; /*デフォルトの値をクリア*/
    margin: 0; /*デフォルトの値をクリア*/
    list-style-type:none; /*デフォルトの値をクリア*/
    display:flex; /*ボタンを横並びに*/
    justify-content:space-between; /*ボタンを横幅いっぱいに配置*/
    }

}
  .tab-btn{
  display:none; /*タブの切り替えを制御するラジオボタンを非表示に*/
  }

  #tab-btn1:checked ~ .tab-list-wrap #tab-list1,
  #tab-btn2:checked ~ .tab-list-wrap #tab-list2,
  #tab-btn3:checked ~ .tab-list-wrap #tab-list3,
  #tab-btn4:checked ~ .tab-list-wrap #tab-list4{
  background:#ffffff; /*対応するボタンにチェックが入ったときに背景を#ffffff（白）に*/
  }
  .tab-content{
  padding:20px;
  border-bottom: 1px solid #4e7bcc;
  border-left: 1px solid #4e7bcc;
  border-right: 1px solid #4e7bcc;
  display:none; /*初期状態を非表示に*/
  }
  #tab-btn1:checked ~ .tab-content-wrap #tab-content1,
  #tab-btn2:checked ~ .tab-content-wrap #tab-content2,
  #tab-btn3:checked ~ .tab-content-wrap #tab-content3,
  #tab-btn4:checked ~ .tab-content-wrap #tab-content4{
  display: block;/*対応するボタンにチェックが入ったときに表示*/
  }