@font-face
{
font-family: ロゴたいぷゴシック;
src: url('https://cdn.leafscape.be/logotype/logotype_web.woff2')
     format("woff2");
}
/* 基本設定 */ 
body{
color:#333333;  
font-family:"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
font-weight:normal;
margin:0px;
padding:0px;
background-color:#000000;
border:none;
outline:none;
list-style:none;
}

div,table,dl,ol,ul{
margin:0px auto;
}
table,caption,thead,tbody,tfoot,tr,th,td,dl,dt,dd,img{
vertical-align:middle;
}


/* リンク設定 */ 
a:link{text-decoration:none;color:#2b2b2b;}/* リンクに触れる前の色 */ 
a:visited{text-decoration:none;cursor:crosshair;color:#2b2b2b;}/* 訪問したことのあるリンクの色 */ 
a:hover{text-decoration:none;cursor:crosshair;color:#2b2b2b;}/* 触れた時のリンク設定 */ 

/* リスト設定 */ 
ul,ol{
list-style-position:inside;
margin:0px 0px 0px 15px;
}

 /* 画像のボーダーをあらかじめ０にする */
img{border:none;}


body{background-color:#000000;}
table{
table-layout:fixed;width:800px;padding:0px 0px 0px 10px;
}

tfoot td{background-color:#ffffff;border:double 5px  #149dca;
padding:10px;font-size:14px;line-height:150%;
text-align:left;color:#444444;
}

tbody th{font-family:'Marcellus',Verdana, Arial,"メイリオ", "Osaka", "ＭＳ Ｐゴシック", sans-serif;padding:3px;font-size:14px;text-align:center;    
color:#ffffff;border:double 5px #149dca;background-color:#000000;
}

tbody td{margin:0px;font-size:40px;font-weight:bold;   text-align:center;
color:#000000;}

thead th{font-family:'Marcellus',Verdana, Arial,"メイリオ", "Osaka", "ＭＳ Ｐゴシック", sans-serif;padding:3px;font-size:14px;text-align:center;    
color:#ffffff;border:double 5px #149dca;background-color:#000000;
}
thead td{background-color:#ffffff;border:double 5px #149dca;
padding:5px 0px;margin:0px;font-size:14px;text-align:center;color:#444444;
    
}

tfoot th{font-family:'Marcellus',Verdana, Arial,"メイリオ", "Osaka", "ＭＳ Ｐゴシック", sans-serif;padding:3px;font-size:14px;text-align:center;    
color:#ffffff;border:double 5px #149dca;background-color:#000000;
}

.td1{background-color:#ffffff;border:double 5px #149dca;
padding:5px 0px;margin:0px;font-size:15px;text-align:center;
color:#444444;
}



.td2{padding:46px 0px 0px 100px; text-align:left; }

.box2{ margin:0px auto;
    padding:55px 30px 20px 90px;  width:500px;  text-align:center; font-weight:bold;
background-image:url(img/voice.png);    background-repeat:no-repeat;  }


p{ font-family: ロゴたいぷゴシック, "Times New Roman", Times, serif;
}

p:first-letter {padding:60px 5px;
    font-size:3em;
    line-height: 1;
    float: left;
    margin: 0 .2em 0 0;
    padding: .1em 0;
}


h1 { font-size:14px;
  position: relative;
  padding: .75em 1em .75em 1.5em;
  border: 1px solid #ccc;
}
h1::after {
  position: absolute;
  top: .5em;
  left: .5em;
  content: '';
  width: 6px;
  height: -webkit-calc(100% - 1em);
  height: calc(100% - 1em);
  background-color: #3498db;
  border-radius: 4px;
}
/* リンクページの設定 */ 
dl.banner{margin:0px 0px 15px 0px;}
dl.banner dt{float:left;margin:0px 5px 0px 0px;}
dl.banner dd{margin:-2px 0px 0px 0px;}

/* その他要素 */ 
em{font-style:normal;font-weight:bold;}
strong{color:#ffffff;background-color:#ffaaaa;}
ins{text-decoration:none;border-bottom:1px solid #ffaaaa;}
del{text-decoration:line-through;}






















































.pf_box {
    width:100%;max-width: 900px;
    background: #ffffff;
    margin:100px auto 30px;
    padding:20px;
    display:flex;flex-wrap: wrap;
    }
    /*  max-width:900px;　→　全体の幅。右側（一言や性格備考などの方）が伸縮します
        background:#ffffff;　→　プロフィール部分の背景色    */

.pf_item {
    width:240px;
    padding:10px;
}

.pf_item2 {
    width:calc(100% - 260px);
    margin-left: 20px;
}

.pf_item3 {
    color:#cccccc;
    font-family: 'Comfortaa', cursive;
    font-size: 5rem;
    width:100%;
    text-align: right;
    transform: rotate( -5deg );
    margin-top: -50px;
}
    /*  ローマ字    */


.pf_chara2 {
    padding:0 5px;}


.pf_icon {
    width: 120px;height: 120px;
    margin:0 auto;
    padding:10px;
}
    /*アイコン100x100pxサイズ*/

.pf_icon85 {
    width: 105px;height: 130px;
    margin:0 auto;
    padding:10px;
}
    /*アイコン85x110pxサイズ*/



.pf_data{
    margin:5px 0 0 15px;
    width:500px;
}



.pfdl {
    width: 100%;
}

.pfdt,.pfdd,.pf_chara {
    margin:5px auto ;
    padding:3px 10px;

}

.pfdt,.pf_chara {
    text-align: center;
    color:#ffffff;
}
/*各項目の見出し：中央寄せと文字色*/

.pf_chara {
    margin-top:20px;}

.pf_name {
    text-align:center;
    font-family: 'M PLUS Rounded 1c';
    font-size:3.4rem;
    letter-spacing: 1rem;
    line-height: 3rem;
    margin: 30px auto ;
}
    /*名前*/

    .pf_name span{
        color:#727272;
        text-align:center;
        font-size:1.2rem;
    }


.white {color:#ffffff;}


.pf_word {
    position: relative;
    margin-top: 20px;
    padding:10px 5px;
    text-align: center;
    font-size: 1.4rem;
    font-family: 'M PLUS Rounded 1c', cursive;
  }
  
  .pf_word:before,
  .pf_word:after {
    position: absolute;
    content: '';
  }
  
  .pf_word:after {
    top: 0;
    left: 0;
    width: 20px;
    height: 40px;
    border-top: 2px solid #aaaaaa;
    border-left: 2px solid #aaaaaa;
  }
  
  .pf_word:before {
    right: 0;
    bottom: 0;
    width: 20px;
    height: 40px;
    border-right: 2px solid #aaaaaa;
    border-bottom: 2px solid #aaaaaa;}




input[type="radio"]{display:none;}
.tab_area {margin-bottom:10px;}
.tab_area label{width:calc(98%/2);display:inline-block;text-align:center;cursor:pointer; transition:ease 0.2s opacity;}
.tab_area label:hover{opacity:0.5;}
.tab_panel{display:none;}
#tab1:checked ~ #panel1,#tab2:checked ~ #panel2{display:block;}

em {color:#eb006e;font-weight: bold;font-style: normal;}

/* Setting ---------------------------------------------------------------------------------- 
                イメージカラーの指定
                name1 → yamada / name2 → suzuki 等に一括置換すると使いやすいと思います
-------------------------------------------------------------------------------------------*/



/* Responsive ------------------------------------------------------------------------------*/

@media (max-width:900px) {

    .pf_item {
        width:95%;
        padding:5px;
    }
    
    .pf_item2 {
        width:95%;
    }
    
    
    .pfdl {
        display: -webkit-flex;display: flex;
        width: 100%;
        -webkit-flex-wrap: wrap;flex-flow: wrap;}
    
    .pfdt,.pfdd {
        margin:5px ;padding:2px 15px;
        display: -webkit-flex;display: flex;
        -webkit-align-items: center;align-items: center;
    }
    
    .pfdt {
        width:140px;
        text-align: center;
    }
    
    .pfdd {
      width:calc(100% - 170px);
      display: inline-block;
    }
    
    }





.box1{width:610px;padding:20px 50px 20px 45px;
background-color:#ffffff;  
background:url(img/box1.png) repeat-y;  
letter-spacing:0.5px;
font-size:13px;line-height:150%;text-align:left; 
}