@charset "utf-8";

html{
  font-size: 100%;
 }



    

.hed{
 
  height: 230px;
  background-image: url(../images/kami2.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}


body{
	font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
    margin: 0;
    padding:0;
    background: #ebe0d1;
    
}




.icon{
    position: relative;
    padding:10% 5% 0% 5%}

  .icon{
    display:flex;
    justify-content:space-between;}

  .fa-solid fa-chevron-left fa-2x{
    float:left;  
  }

  .fa-solid fa-ellipsis fa-2x{
    float:left;
    position:absolute;
    right:0;
  }




.fff{display:flex;
  padding:0% 10%;
  justify-content: space-between;/*両端揃えで配置*/
  height: 100px;
  
}


.fandf{display: inline-block;
  align-self: flex-end;}



.profile{
  font-family: "Hiragino Maru Gothic ProN" ;
  margin:3% 5%;
}

h1{ margin: 1px;
  font-size: 22px;}

.ff{margin:1px;
  font-size: 12px;
  text-align:center;
  color: #85826b;      }

.name{margin:0px;
      color:  #6E5523;      }

.rank{margin:0px 0px 10px 0px;
      color:  #6E5523;      }

.flex_test-box { 
    padding:5px;
    display: flex;               /* 余白指定 */
    justify-content:stretch;
    line-height :1.8em;
    height: 25px;
    align-items: center;
    margin: 0px 0px 30px 0px; 
}

.flex_test-item {
    padding: 0px 2px;
    color:  #44382b;               /* 文字色 */
    margin: 0px 10px 0px 0px;              /* 外側の余白 */
    border-radius:  50px;        /* 角丸指定 */
    font-size: 8px;
    border: 1px solid #9C987E;
    background-color:  #E1DBBA; 
}



 
/* ❶ */
.sample06 .box {
  display: flex;
}
 
.sample06 .box .img {
  flex-shrink: 0; /* ★ポイント★ */
}
 
/* ❷ */
.sample06 .box .desc {
  display: flex;
  flex-direction: column;
  justify-content:flex-start;
  padding-left: 20px;
  width: 100%;
}

.ttl{
  margin: 0px 10px 0px 0px; 
  color:  #6E5523;  
  font-size: 17px;
  text-align:left
}

.txt{font-size: 12px;
  text-align:left;
  margin: 0px 10px 0px 0px;  
  font-family: "Hiragino Maru Gothic ProN"; 
    color:  #8e8e8e;  

}

   
     



.name{font-size:14px;
  letter-spacing:2px;
}

.rank{font-size:10px;}

.imageprpfile{
  position:relative;
  width:120px;
  height:auto;
  margin:auto;
}

.button1{
  position:absolute;
  top: 80%;
  left: 35%;
 
}

img[src$="./images/profile.jpg"]{
    border-radius: 50%;
    /* 角丸の半径を50%に*/
    width:  120px;
    /* 縦横を同じにする */
    height: 120px;
    /* 縦横を同じにする */
    object-fit: cover;
    /*画像の縦横比を保ったまま領域をカバー */

}



.lilist{display: flex;
}

.tabeta{flex-basis:  50px;   }

.tabetatabetenai{ margin-left:40px;
}



.mens{
  background-color:#EDE8DD;  
  align-items: center;
  display:flex; 
   /*justify-content:space-between; */
  font-size: 13px;
  margin: 10px 0px 0px 0px;
  border: 3px dashed;
  border-color: #8F8A81 transparent transparent transparent;
  
}

.button-36 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 150px;
  margin: 0 5px;
  padding: .9em 2em;
  border: 1px solid #fcf4b6;
  border-radius: 5px;
  background-color: #E6E1C4;
  color: #31230D;
  font-size: 1em;
}

.button-36:hover {
  border: none;
  background-color: #fcf4b6;
  color: #31230D;
  font-weight: 600;
}

.button-37{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 150px;
  margin: 0 0px;
  padding: .9em 2em;
  border: 1px solid #fcf4b6;
  border-radius: 5px;
  background-color: #E6E1C4;
  color: #31230D;
  font-size: 1em;
}

.button-37:hover {
  border: none;
  background-color: #fcf4b6;
  color: #31230D;
  font-weight: 600;
}


.kansoubox{
  background-color: #E8E0D1;     /* 背景色指定 */
  padding:  10px;             /* 余白指定 */
  height: 600px;              /* 高さ指定 */
  display: flex;              /* フレックスボックスにする */
  flex-wrap: wrap;            /* 折り返し指定 */
  align-content:stretch;      /* 折り返し時の配置指定 */
}

.kansou {
  padding: 10px;             /* 文字色 */
  margin:  10px;              /* 外側の余白 */
  border-radius:  5px;        /* 角丸指定 */
  font-size:  30px;           /* 文字サイズ */
                /* 幅指定 */
    text-align:  center;        /* 文字中央揃え */
}

.kansou:nth-child(1) {
  background-color:  #F2EDE3; /* 背景色指定 */
}

.kansou:nth-child(2) {
  background-color:  #F2EDE3; /* 背景色指定 */
}

.kansou:nth-child(3) {
  background-color: #F2EDE3; /* 背景色指定 */
}

.kansou:nth-child(4) {
  background-color:  #F2EDE3; /* 背景色指定 */
}

.kansou:nth-child(5) {
  background-color:  #F2EDE3; /* 背景色指定 */
}

.kansou:nth-child(6) {
  background-color:  #F2EDE3; /* 背景色指定 */
}

.kansou:nth-child(7) {
  background-color:  #F2EDE3; /* 背景色指定 */
}

.kansou:nth-child(8) {
  background-color:  #F2EDE3; /* 背景色指定 */
}

.kansou:nth-child(9) {
  background-color:  #F2EDE3; /* 背景色指定 */
}


li{
  list-style:none;
  
  display: inline-block;
  
  }


  


  .boxlist{
    display:flex;
    flex-direction: row;
    justify-content:space-between;
  }
  

  .naiyou{
    font-family: "Hiragino Maru Gothic ProN";
    font-size :12px;   
    color:  #8e8e8e;  

  }

  h3 {
    margin: 0;
    font-family: "Hiragino Maru Gothic ProN" ;
    color:  #6E5523;  
    font-size: 17px;

  }
  
  .pict {
    width: 30%;
    height:30%;
    
    object-fit: cover; /* width, heightといっしょに使います */
    border: 1px solid #6e5a5a;
  }
  
  .pict img {
    width: 100%;
    height:auto;
    object-fit: cover;
  }
  

.hitotu {
  display: flex;
  align-items: center; /* 垂直方向の中央揃え */
  height: 15px; /* 高さを設定する必要がある */
  margin: 10px auto;
    width:50px;
    flex-direction: column


}


  footer {
    position: fixed;
    bottom: 0;
    height:10%;
    left: 0;
    width: 100%;
    color:  #44382b;  
    font-size: 12px;
    background: #ffffff;

    box-shadow: 0px -7px 32px 9px rgba(0, 0, 0, 0.21);
 
  }

 .nav_menu{display: flex;
  justify-content: space-between;
  margin: 0;
}