/* スマホ */
@media screen and (max-width:670px) { 
  /*　画面サイズが670pxからはここを読み込む　*/
  body{
    /* 謎の横の空白を埋める */
    min-width: 100%;
    height: 100vh;
  }

  #page-cover{
    display: block;
    width: 100%;
  }
  /* thank you部分 */
  .blog-ttl{
    padding-top: 20%;
  }
  .box-text{
    background-color: #fef5da;
    width: 100%;
    padding-bottom: 50px;
  }
  .box-color{
    margin-top: 20%;
    margin-bottom: 20%;
  }  
  /* 5つのメニュー */
  .card-container {
    /* 余白の原因 */
    content: "";
    flex-direction: column;    
  }
  .textpop {
    padding-bottom: 50px;
    margin-left: 5%;
    margin-right: 5%;
  }

  /* メインレイアウトの装飾 */
  #main-column{
    display: block;
    margin-bottom: 20%;
  }
  /* サイドレイアウトの装飾 */
  #side-column{
    /* display: table-cell; */
    /* width: 100%; */
    max-width: 100%;
    height: auto;
  }
  .profile img{
    width: 200px;
    height: auto;
  } 
  /* 住所 */
  .creditUnit{
    display: flex;
    flex-direction: column;
  }
  .creditUnitMap1 img{
    margin-top: 10%;
  }
  .creditUnitMap2 img{
    margin-top: 10px;
  }

}

/* タブレット */
@media screen and (min-width:671px) and ( max-width:1024px) {
  /*　画面サイズが768pxから1024pxまではここを読み込む　*/
  #page-cover{
    width: 100%;
    float: none;
  }

  /* サイドレイアウトの装飾 */
  #side-column{
    display: table-cell;
    width: 20%;
    max-width: 100%;
    height: auto;
  }
  .profile img{
    width: 200px;
    height: auto;
  }
}

/* PCサイズ */
@media screen and (min-width:1025px) {
  /*　画面サイズが1024pxからはここを読み込む　*/
  #page-cover{
    display: table;
    width: 100%;
  }
  /* メインレイアウトの装飾 */
  #main-column{
    display: table-cell;
  }
  /* サイドレイアウトの装飾 */
  #side-column{
    display: table-cell;
    width: 20%;
    max-width: 100%;
    height: auto;
  }
}