@charset "utf-8";
html, body {
    margin: 0px;
    padding: 0px;
    height: 100%;
   }
   body {
    font-family: "メイリオ", "Yu Gothic UI"serif;
    font-size: 1em;
    color: #5F3819;
    line-height:1.8em;
    background-color: #ffffff;
    background-image: url(img/img-back.jpg);
    max-width: 390px;
   }
    
   .container {
      padding-bottom: 60px;
      box-sizing: border-box;
      max-width: 390px;
    }
   footer {
      position: fixed;
      bottom: 0; 
      padding: 0;
      background-color: #ffffff;
   } 
   header{
      width: 100%;
      background-image: url(img/top_kuma.jpg);
      background-size: cover;
      background-position: center;
      max-width: 390px;
      
   }
   header img{
      width: 60%;
      padding: 90px 20px 10px 20px;
      margin: 0;
   }
   
   
    #maintxt{
      width: 65%;
      margin: 0 auto;
      white-space: pre-wrap;
      font-size: 10px;
      line-height: 1.5;
      padding-left: 80px;
   }
   
   #btn_area_kuma{
      width: 87%;
      padding: 0px 20px 0px 20px;
      display: flex;
      align-items: flex-end;

   }
   .photo_radius{
      width: 70px; /* 横20ピクセル */
      height: 70px; /* 縦260ピクセル */
      border-radius: 50%;
   }
   
   
   .h2txt{
      display: inline;
      background-color: #ff821c;
      padding: 8px 20px 8px 20px;
      margin: 0;
      color: #ffffff;
      font-family: "Yu Gothic UI"serif;
      font-weight: 600;
      font-size: 10px;
      line-height:1em;
      border-radius: 35px;
   }
   .profile_txt{
      font-size: 10px;
      line-height: 1.5;
      margin: 10px 10px 0px 10px;
   }
   .font1{
      font-size: 14px;
   }
   .font2{
      font-size: 10px;
      color: #988575;
   }
   .box4{
      font-size: 10px;
      line-height: 1.5;
      margin: 0px 10px 10px 10px;
      position: relative;
      top: -10px;
   }
   .box2,.box3{
      float: left;
      
   }
   .box3{
      margin: 0px 20px 0px 60px;
   }
   .boxA{
      border: none;
      &:after{
         content: "";
         display: block;
         clear: both;
      }
   }
   .box1{
      padding: 10px 0px 5px 20px;
   }
   
   .boxB{
      border: none;
      &:after{
         content: "";
         display: block;
         clear: both;
      }
      padding: 10px 0px 0px 0px;
      
   }
   .box1,.boxB{
      float: left;
   }
   .box5{
      width: 67%;
      padding: 0px 64px 0px 64px;
   }
   .box6{
      width: 90%;
      padding: 0px 19px 0px 19px;
      max-width: 390px;
   }
   .content{
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      padding: 10px;
   }
   
   .content img{
      border-radius: 10px;
      width: 116px;
   }
   .content2 img{
      border-radius: 10px;
      width: 116px;
      height: 243px;
   }
   .content2{
      padding: 0px 10px 0px 10px;
      width: 116px;
      height: 243px;
   }
   .content3{
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      padding: 0px 0px 10px 0px;
      
   }
   .content3 img{
      border-radius: 10px;
      width: 116px;
   }
   .content2,.content3{
      float: left;
   }
   .content4{
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      padding: 0px 0px 10px 0px;
   }
   .content4 img{
      border-radius: 10px;
      width: 116px;
   }
   .content3,.content4{
      float: left;
   }
   .content5{
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      padding: 0px 10px 10px 10px;
   }
   .content5 img{
      border-radius: 10px;
      width: 116px;
   }
   footer img{
      padding: 0;
   }