@media screen and (max-width:1340px){
  .hero__badges span {
    left: 0;
  }
  
  .sec02__cont{
    width: 80%;
    margin: auto;
  }
  
}

@media screen and (max-width:1050px){
 .hero__card img {
    position: initial;
    max-width: 100%;
  } 
  
.sec02-img01 {
    max-width: inherit;
    left: -130px;
    bottom: -56px;
    position: absolute;
    width: 180px;
}

.sec02-img02 {
    max-width: inherit;
    right: -160px;
    bottom: -56px;
    position: absolute;
    width: 200px;
}  
  
.hero__in{ grid-template-columns: 300px 1fr; }  
  
.hero {
    height: 500px;
    padding-top: 0;
} 
  
.sec07__list li {
    grid-template-columns: 240px 1fr 220px;
} 
  
  .cvn{
    padding: 50px 0;
  } 
  
.pt02 .sec02__list li {
    padding-left: 60px;
}  
 
.pt02 .sec02__list li br{
   display: none;
}  
   
  
}

@media screen and (max-width:900px){
  .grid3{ grid-template-columns: 1fr; gap:80px;max-width: 400px;margin: auto;}
}

.sp{display: none;}
#js-drawer{display: none;}
@media screen and (max-width:800px){
  #js-drawer{display: block;}
  .sp{display:block;}
  .pc{display: none;}
  :root{ --header-h: 60px; }
  body{
    padding-top: 60px;
  }
  
  .header__in img{
    width: 140px;
  }
  
  .header {
    height: 60px;
    padding-top: 0px;
  }
  
  .hamburger__bars span {
    background: #39322A;
  }
  
  .hamburger {
    border: none;
  }
  
  /* 画面には見せないけど読み上げには残す */
.u-sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* アイコンボタン */
.icon-btn{
  width: 44px;        /* タップしやすいサイズ */
  height: 44px;
  border-radius: 999px;
  border: none;
  background: #fff;
  position: relative;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: .15s;
}

.icon-btn:focus-visible{
  outline: 3px solid rgba(0,64,144,.25);
  outline-offset: 2px;
}

/* × をCSSで描く */
.icon-btn--close::before,
.icon-btn--close::after{
  content: "";
  position: absolute;
  width: 28px;
  height: 2px;
  background: #39322A; /* 色はお好みで */
  border-radius: 999px;
}

.icon-btn--close::before{ transform: rotate(45deg); }
.icon-btn--close::after{ transform: rotate(-45deg); }

.header {
    position: fixed;
    width: 100%;
  }
  
  .nav{ display:none; }
  .hamburger{ display:flex; }
  
/* --- Mobile Drawer --- */
.drawer{
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
}
.drawer__bg{
  position:absolute; inset:0;
  background: rgba(11,16,32,.42);
  opacity: 0;
  transition: opacity .2s ease;
}
.drawer__panel{
  position:absolute;
  top: 0; right: 0;
  width: 100vw;
  height: 100%;
  background: #fff;
  transform: translateX(12px);
  opacity: 0;
  transition: transform .22s ease, opacity .22s ease;
  border-left: 1px solid rgba(226,232,240,.95);
  display:flex;
  flex-direction:column;
}
.drawer__head{
  height: var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0 16px;
}
.drawer__nav{
  padding: 16px;
  display:grid;
  gap: 8px;
}
.drawer__nav a{
  padding: 12px 12px;
  font-weight: 900;
}
.drawer__nav a:hover{ filter: brightness(1.02); }
.drawer__cta{
  padding: 16px;
  display:grid;
  gap: 10px;
}

  .btn--block{
    width: 90%;
    margin: auto;
    margin-top: 0;
    border-radius: 0;
    padding: 8px 0;
  }
  .drawer__nav a{
    font-size: 20px;
  }
  
.hero{
    background-image: url(../images/sp-main-bg.png);
    height: 380px;
}
  
    .hero__card img {
        max-width: 100%;
        position: absolute;
        top: -10px;
        width: 270px;
        left: 15%;
    }  

  .hero__badges{
    font-size: 20px;
  }
  
  .hero__cta,
  .hero-title{
    width: 90%;
    margin: auto;
  }
  
.hero__card {
    position: initial;
}  

.is-drawer-open .drawer{ pointer-events: auto; }
.is-drawer-open .drawer__bg{ opacity: 1; }
.is-drawer-open .drawer__panel{ transform: translateX(0); opacity: 1; }

/* Scroll lock (JS adds padding-right to avoid layout shift) */
.is-scroll-locked{ overflow:hidden; }  
  
  
  .hero__in .u-gap-50{
    gap:10px;
  }  
  
.hero__badges div:after {
    content: " ";
    height: calc(100% + 10px);
    right: -20px;
    top: 0;
    width: 100vw;
    position: absolute;
    background: linear-gradient(to right, transparent 0%, #0C489C 50%, #0C489C 100%);
    display: block;
    z-index: 1;
} 
  
.hero__badges {
    margin-bottom: 10px;
}
  
.hero__in {
    padding: 140px 0 0;
  height: 380px;
}
  
.hero__cta {
    padding: 10px;
}
  
.main-btn {
    display: inline-flex;
    width: 100%;
    max-width: 230px;
    align-items: center;
    gap: 10px;
    height: 30px;
    color: #ffffff;
    justify-content: center;
    border-radius: 100px;
    margin-top: 5px;
}
  
.hero__badges span {
        left: -10px;
        top: 5px;
    }

  .hero__in{ grid-template-columns: 1fr; }

.section {
    padding: 40px 0;
}
  
.sec02 {
    background-size: cover;
  background-position: center;
}
  
.sec02__cont {
        width: 100%;
        margin: auto;
        grid-template-columns: 1fr;
  gap:50px;
    }
  
.sec02__list li {
    height: 66px;
}  

.pt01 .sec02__list li {
    border: none;
    background-image: url("../images/sec02-bg-sp.png");
    background-size: 100% 100%;
}  
  
  .sec02__box.pt01{
    padding-left: 50px;
  } 
  
  .sec02__box.pt02{
    padding-right: 50px;
  }   
  
    .pt02 .sec02__list li {
        padding-left: 30px;
    }  
  
    .sec02-img01 {
        max-width: inherit;
        left: -30px;
        bottom: 0px;
        position: absolute;
        width: 130px;
    }
  
      .sec02-img02 {
        max-width: inherit;
        right: -30px;
        bottom: 0px;
        position: absolute;
        width: 120px;
    }
  
.font-24px-medium {
    font-size: 16px;
}
  
  .sec02__box .text{
    font-size: 10px;
    font-weight: 900;
    position: absolute;
    right: 0;
    bottom:-20px;
  }  
  
.section__title {
    margin-bottom: 10px;
}
  
.sec03 {
    background-image: url(../images/sec03-sp-bg.png);
}
  
.cvn .container{
  display: grid;
  grid-template-columns: 1fr;
}
  
.cvn__head{ grid-row: 2; }
.cvn__img{ grid-row: 1; }
  
  .cvn__title{
    font-size: 20px;
  }  
  
  .cvn .main-btn{
    display: flex;
    margin: auto;
    height: 40px;
    margin-top: 30px;
  }
  
  .cvn__desc{
    line-height: 1.2em;
  } 

  .sec04__title{
    font-size: 20px;
  }
  
.sec05__desc {
    margin-bottom: 15px;
    font-size: 20px;
}

.sec05 .section__desc {
    max-width: 290px;
}
  
.sec05 .section__desc br{
    display: none;
}
  
.sec07__list li {
        grid-template-columns: 1fr;
        padding: 30px 55px;
    }
  
  .sec06__list-head img{
    width: 42px;
  }

  #flow .container{
    width: 100%;
  }
  
  .sec06__list-text br{
    display: none;
  }
  
  .sec06__list-img img{
    margin: auto;
  }
  
  .sec07__cont-text{
    line-height: 1.2em;
  } 
  
  .contact__desc{
    padding:0 40px;
  }    
  
  .contact__desc br{
    display: none;
  }  
  
  #contact .container {
    border-radius: 16px;
    padding: 0;
    background: #ffffff;
    box-shadow: none;
}
  
  #js-contact-form{
    border-top: 1px solid #E3E3E3;
  }  
  
.form__row {
    gap: 10px;
    grid-template-columns: 1fr;
}
  
  .check{
    align-items: center;
    padding:0 30px;
  }
  
  .check__text{
    font-size: 14px;
  }
  
  #js-form-submit{
    height: 65px;
  }
  
  .footer {
    border-top: none;
    padding: 10px 0 10px;
    text-align: center;
}
  
  .copy{
    font-size: 8px;
  }
  
  .foot__logo img{
    width: 180px;
  }
  
.confirm .confirm__row {
    grid-template-columns: 1fr;
    gap: 0;
    font-size: 14px;
} 

    .drawer__nav a {
        font-size: 20px;
        line-height: 1.3em;
    }  

  .cvn__title br{
    display: none;
  } 
  
button.hamburger{
  -webkit-appearance: none;
  appearance: none;
  border: 0;           /* いまborder使うなら下で再指定 */
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  line-height: 1;
}
  
.hamburger{
  flex: 0 0 auto;      /* 親flexの影響で縮まない */
  width: 44px;
  height: 44px;
}
.hamburger img{
  width: 30px;
  height: 30px;        /* autoだと計算差が出ることがあるので固定 */
  max-width: none;     /* グローバル img max-width を無効化 */
  display: block;
}  
  
}

@media screen and (max-width:385px){
  #assignment .font-20px-medium,
  #assignment .font-20px-bold{
        font-size: 14px;
    }
  
    .drawer__nav {
        gap: 0;
    }  
}