@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=BIZ+UDPGothic&family=Dokdo&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Pompiere&display=swap');

/* A Modern CSS Reset -------------------------------------------------------------------- */

*,*::before,*::after {box-sizing: border-box;}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd {margin: 0;}
ul[role="list"],ol[role="list"] {list-style: none;}
html:focus-within {scroll-behavior: smooth;}
body {min-height: 100vh;text-rendering: optimizeSpeed;}
a:not([class]) {text-decoration-skip-ink: auto;}
img,picture {max-width: 100%;display: block;}
hr {border: none;}

/* Section ---------------------------------------------------------------------------------- 
                プロフィールの中身色々
-------------------------------------------------------------------------------------------*/

.pf_box {
  width:100%;
  max-width:850px;
  margin:30px auto;
  background: #fff;
  border:3px solid #ddd;
    }
    /*プロフィールの背景・枠線の指定（背景を真っ白にしたいときは「background:#ffffff;」）*/

.pf_flex {
    display:flex;flex-wrap: wrap;
    width:100%;margin: 30px 0;}

.pf_icon {
    width: 120px;height: 120px;
    margin:0 auto;
    padding:10px;
    border-radius: 10px;
}

.pf_icon85 {
    width: 105px;height: 130px;
    margin:0 auto;
    padding:10px;
    border-radius: 10px;
}

.pf_word {
    width:calc(100% - 140px);min-width: 300px;
    margin-left: 15px;
}

.pf_word85 {
    width:calc(100% - 130px);min-width: 300px;
    margin-left: 15px;
}

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


.pfdl {
    display: -webkit-flex;display: flex;
    width: 100%;
    -webkit-flex-wrap: wrap;flex-flow: wrap;}

.pfdt,.pfdd {
    margin:5px auto ;padding:2px 0;
    display: -webkit-flex;display: flex;
    -webkit-align-items: center;align-items: center;
}

.pfdt {
    width:105px;
    text-align: center;
    border-radius: 5px;
    display: inline-block;
    font-size: 13px;
    color: #fff;
}

.pfdt span{font-size: 1rem;}

.pfdd {
  width:calc(50% - 130px);
  display: inline-block;
  font-size: 13px;
}

.pfdd span{font-size: 80%;}


.pf_name {
    text-align:center;
    font-family: "Pompiere", "BIZ UDPGothic", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    font-size:3.6rem;
    letter-spacing: 0.8rem;
    line-height: 3.5rem;
    margin: 30px auto;
}
    /*名前*/

.pf_name span {
  font-family: "Pompiere", "BIZ UDPGothic", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    font-size: 1.4rem;
    letter-spacing: 0.6rem;
    margin-left:20px;
    color:#888;
}
    /*ルビ*/

.pf_chara {
        border-bottom: 1px solid #aaa;
        background: linear-gradient(#aaaaaa 1px, transparent 1px);
        background-size: auto 2.8rem;
        line-height: 2.8rem;
        padding:0 10px 0 15px;
        letter-spacing:0px;
        font-size: 1.5rem;
        font-weight: 300;
}

.anchor {
    display: block;
    padding-top: 10px;
    margin-top: -150px;
}

.white {color:#ffffff;}

.p_list{list-style: none;}
.p_list li {padding: 0px 0;}
.p_list a {text-decoration: none;}

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

.sample {color:#008000;}
.sample_bg {background:#008000;}
.sample_un {border-bottom:1px solid #008000;}

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

@media (min-width: 1023px){

.pf_box {
        padding: 20px 40px 20px;
        }
    }

@media (max-width:1023px) {
  
  .pf_name {
    text-align:center;
    font-family: "Pompiere", "BIZ UDPGothic", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    font-size:2.8rem;
    letter-spacing: 0.8rem;
    line-height: 3rem;
    margin: 20px auto;
  }
  
    .pf_name span {
        display: inline-block;
        font-size: 1.4rem;
        margin-left:auto;
    }
  
  hr {border: none; margin-right:20px;}
  
  .pf_chara {
    background: linear-gradient(#aaaaaa 1px, transparent 1px);
    background-size: auto 2.6rem;
    line-height: 2.6rem;
    font-size: 98%;
  }

.pf_box {
    padding: 10px;
    width:100%;
    }

.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;
    border-radius: 5px;
}

.pfdd {
  width:calc(100% - 170px);
  display: inline-block;
}

}