@media screen and (max-width: 834px) { 
section{padding-left:2em; padding-right: 2em;}
/*トップページ*/ 
h1#top {font-size: 18px;}


/* カラム・レイアウト関係*/ 
.w1200{width: 100%;}
.pair-box-l{width: 100%; border-radius:50px 0 0 0; float: none; margin:0; min-height: 100px; font-size: 14px;} 
.pair-box-r{width: 100%; border-radius:0 0 50px 0;  float: none; margin:0;}
.pair-box-r img{border-radius:0 0 50px 0;}

.sp{display: inherit;}
.pc{display: none;}
}


@media screen and (max-width: 750px) { 
/* ヘッダ*/ 
  /* メニューボタン */
  nav{display: inherit;}
  #menu-btn {
    top:0;
    right:0;
    width: 30px;
    height: 25px;
    position: fixed;
    cursor: pointer;
    margin: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
  }

  #menu-btn span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: #333;
    transition: all 0.3s ease-in-out;
  }
  #menu-btn.open span:nth-child(1) {transform: translateY(11px) rotate(45deg);}
  #menu-btn.open span:nth-child(2) {opacity: 0;}
  #menu-btn.open span:nth-child(3) {transform: translateY(-11px) rotate(-45deg);}

  /* 開く要素のスタイル */
  nav{
    width: 0;
    height: 100vh;
    background-color: #f7f4ea;
    position: fixed;
    top: 0;
    right: 0;
    overflow: hidden;
    transition: width 0.2s ease-out;
    box-shadow: 2px 0 5px rgba(0,0,0,0.2);
    z-index: 999;
  }
  nav ul{margin: 100px 1.5em auto 1.5em; }
  nav a{display:block; border-bottom:solid 1px #2d6aee; padding:10px 0}
  nav.open {
    width: 80%; /* 開いた後の幅 */
  }
  .pc-menu{display: none;}

  /* カラム・レイアウト関係*/ 
.w600,.w450{width: 100%;}
.box2{width: 100%;}
.box3{width: 48%; margin-left: 1%; margin-right: 1%;}
.float-r{float:none; padding:1em; margin-left: auto; margin-right: auto;}
}