@media screen and (max-width : 480px){
      html,
      body {
        overflow-x: hidden;
        overflow-y: scroll;
      }
    }
    .offcanvas-end {
      width: 320px;
    }

    #jumbotron {
      background-image: url("../img/topImg.png");
      background-size: cover;
      background-position: center 40%;
      color: #f4d749;

    }

    .fixed_btn { 
      position: fixed;
      top: 0;
      right:0px;
      width: 30;
      z-index: 999;
      border: 0;
    }
    #obi {
      /* 縦書きモード */
      writing-mode: vertical-rl;
    }
    .container{

      padding:15px 8px 30px 8px;
    }



    .pickup {
      padding: 1rem 2rem;
      color: #fff;
      background: #01c9ea;
      -webkit-box-shadow: 5px 5px 0 #0494ac;
      box-shadow: 5px 5px 0 #0494ac;
    }


    h2 {
      font-size: x-large;
    }

    h3 {
      font-size: larger;
      position: relative;
      border-bottom: 6px solid #0494ac;
    }
    h3:before {
      position: absolute;
      bottom: -6px;
      left: 0;
      width: 20%;
      height: 6px;
      content: '';
      background: #01c9ea;
    }
    /*  私についての要約　は、h２で  */
    h4 {
      font-size: larger;
      margin:1.3rem 0rem 0rem 0rem;
      
    }

    p {
      margin-top: 0.6rem;
    }

    #summary {
     padding: 1rem 2rem;
     border: 3px dashed #000;
    }

    #sns{
           padding: 3rem 0rem;
      text-align: center;
    }

    footer{

    background-size: cover;
    /* 以下 背景色やテキストカラーなどはお好みで指定してください */
    color: #000;
    text-align: center;
    vertical-align:bottom;
    background-image: url("../img/footerImg.png");
    background-position: center 50%;
    min-height: 200px;
    }

    img{
    margin-right: 5px;
    }