@charset "UTF-8";
/* CSS Document */
  body{font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Arial", "Yu Gothic", "Meiryo", sans-serif;}
  .smtHeader{background-color: #fff; position: relative;}
  .scroll-margin{scroll-margin-top:20px;}
  .smtNav
  .smtNavLogo{position:absolute; bottom:10px; padding: 0 20px;}
  .smtNavLogo .logo{width:40%; margin-bottom:30px;}
  nav.smtNav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;                /* 初期は高さ0 */
  overflow: hidden;
  background-color: #fff;
  z-index: 10;
  transition: height 0.3s ease;
}

nav.smtNav.open {
  height: 100%;             /* 開いたときだけ画面全体に */
}

#header-menu {
  list-style: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  padding: 70px 20px 0;
}
  #header-menu > li a{width:100%;display: block; padding:10px 0; font-size:1.2em;}

.hamburger {
    position: absolute;
    top: 32px;
    right:32px;
    cursor: pointer;
    width: 32px;
    height: 24px;
    z-index: 10;
}
.hamburger span {
    /*3本の線を作る*/
    transition: all .3s;
    position: absolute;
    height: 3px;
    background-color: #333;
    width:100%;
    z-index: 10;
}
.hamburger span:nth-of-type(1) {
    /*上の線の位置*/
    top: 4px;
}
.hamburger span:nth-of-type(2) {
    /*真ん中の線の位置*/
    top: 12px;
}
.hamburger span:nth-of-type(3) {
    /*下の線の位置*/
    top: 20px;
}
.hamburger.open span:nth-of-type(1) {
    /*openのとき、上の線を右斜めにする*/
    top: 10px;
    transform: translateY(6px) rotate(-45deg);
}
.hamburger.open span:nth-of-type(2) {
    /*真ん中の線を消す*/
    opacity: 0;
}
.hamburger.open span:nth-of-type(3) {
    /*下の線を左斜めにする*/
    top: 22px;
    transform: translateY(-6px) rotate(45deg);
}  
body.no-scroll {
position: fixed;
width: 100%;
overflow: hidden;
}
  html, body{line-height:1.6em; margin:0;}
  li{list-style: none;} 
  img{width:100%; height:auto;}
  .pcOn{display: block;}
  .smtOn{display: none;}
  .fs09{font-size:0.9em;}
  .inner{ width: 100%; max-width: 1200px; padding:0 15px; margin: 0 auto; }
  .fwbold{font-weight:bold;}
  .mb20{margin-bottom:20px;}
  .mb30{margin-bottom:30px;}
  .engTtl{width: auto; height:18px; margin: 15px 0 13px;}
  .engTtl > img{width:auto; height:100%; display: table;}
  h2.h2common{font-size:1.8em; font-weight: bold;}
  .pcHead{display:flex; justify-content: space-between; padding-top:20px;}
  .pcMenu{display:flex; flex-wrap:wrap;}
  .headMenu{display:flex; width: calc(100% - 150px);}
  .pcHead .headMenu .pcMenu .link{ margin-right: 40px; font-size: 0.9em;}
  .menuLogo{width:20%; max-width: 200px; margin-right: 40px}
  .contactBtn{display: flex; width:130px;  text-align: center;color:#fff; background-color: #f4520b; font-weight: bold; padding:10px 0; border-radius: 5px; justify-content: center; align-items: center;}
  .contactBtn > a{align-items: center;}
  .firststepImg{width: 60%; margin-top: 80px;}
  .mainLead{text-align:center;}
  .firstView .leadSent{font-size: clamp(1.8em, 2.7vw, 2.85em); text-align: center; display: inline-block; color: #0248a5; margin-top: 50px;}
  .mainImageBlock{position: relative; margin-top:60px;}
  .mainImageBlock .btnBlock{position: absolute; bottom: 50px; right:0; left:0; display: flex; justify-content: center;}
  .mainImageBlock .btnBlock .btn{margin: 0 20px;}
  .mainImageBlock .btnBlock .btn a{ color:#fff; background-color: #0248a5;  text-align: center; padding: 16px 0; width:320px; display: table; border-radius: 8px;}
  .outline{margin-top: 80px;}
  .outlineBlock{display:flex;}
  .outlineBlock .areaTtlBlock{width:40%;}
  .outlineBlock .outlineList{width:60%;}
  .outlineList{display:flex; flex-wrap:wrap;}
  .outlineList .item{width:49%; margin-bottom: 40px;}
  .outlineList .item .ttlBlock .ttlIcon{width: 40px; margin-right: 10px;}
  .outlineList .ttlBlock{display:flex; align-items:center; margin-bottom: 10px; height:40px;}
  .outlineBlock .outlineList .blr{display:block;}
  .outlineList .ttlBlock h3.ttl{ font-size: clamp(0.8em, 1.6vw, 1.2em);  font-weight: bold; width:calc(100% - 50px);}
  .outlineList .item p.sent{font-size: clamp(0.8em, 1.2vw, 1em); line-height: 160%;}
  .outline .areaTtlBlock .sent .lbr{display:block;}
  @media screen and (max-width:780px){
  html, body{line-height:1.6em; margin:0;}
    .pcOn{display:none;}
    .smtOn{display:block;}
    .menuLogo.smtVer{width:40%; padding-top:20px; margin-right: 0;}
    .firststepImg { width: 98%; margin-top: 60px; }
    .mainImageBlock { margin-top: 20px; }
    .mainLead { text-align: left; }
    h2.h2common{line-height: 1.2}
    .firstView .leadSent { font-size: clamp(16px, 6.5vw, 48px); line-height: 1.2; text-align: left; margin-top: 25px;}
    .outlineBlock{display:block;}
    .mainImageBlock .btnBlock{display:flex; justify-content: space-between; position: relative; bottom:auto; right: auto; left:auto;}
    .mainImageBlock .btnBlock .btn{ margin: 30px 0 0; width: 48%;}
    .mainImageBlock .btnBlock .btn a{width: 100%; font-size: clamp(10px, 2.8vw, 25px); padding:14px 0; }
    .outlineBlock .areaTtlBlock,.outlineBlock .outlineList{width:100%;}
    .outlineBlock .outlineList{justify-content:space-between; margin-top:30px;}
    .outlineList .item{width: 48%;}
    .outline .areaTtlBlock .sent .lbr{display:inline;}
    .outlineList .ttlBlock h3.ttl{ font-size:clamp(0em, 2.7vw, 1.1em); line-height: 1.4; }
    .outlineList .item .ttlBlock .ttlIcon{width:15%; margin-right: 3%;}
}
  .teachingProgram{margin-top:80px;}
  .programLead{display:flex; justify-content:space-between;}
  .programLead .leadSent{width: calc(100% - 400px)}
  .programLead .toService{text-align: center;}
  .btnWrap{text-align:center;}
  a.blueBtn{display: table; color:#fff; background-color:#5eaabc; border-radius: 5px; width:320px; padding: 16px 0;}
  .programList{display:flex; justify-content: space-between; flex-wrap: wrap; margin-top: 40px;}
  .programList .imageBox{margin-bottom:30px;}
  .programList .item{width :32%; margin-bottom: 60px;}
  .programList .sentBox h3.ttl{font-size: 1.3em; font-weight:bold; margin-bottom: 16px;}
  .feature{margin-top: 80px;}
  .feature .sSize{font-size:0.5em;}
  .feature .division{display:flex; justify-content: space-between; }
  .feature .featureArticle{width: 50%;}
  .feature .featureImage{width: 39%;}
  .feature .engTtl{margin: 15px 0;}
  .feature .articleBox{font-size: 1em;}
  .feature .guideList{margin-bottom:30px;}
  .feature .guideSent{margin-bottom:30px;}
  @media screen and (max-width:780px){
    .programLead{display:block;}
    .programLead .leadSent{width: 100%;}
    .programList{display:block;}
    .programList > .item{width: 100%;}
    .programLead .toService{ margin-top: 20px;}
    .programList .imageBox{margin-bottom:20px;}
    a.blueBtn{width: 50%; min-width: 200px;}
    .feature .division > div{width: 100%;}
    .feature .smtBlock{ display: flex; margin-top: 40px; justify-content: space-between;}
    .feature .smtBlock > div{width: 48%; font-size:clamp(10px, 2.5vw, 28px); line-height: 1.6; }
    .feature .guideList{margin-bottom:3%;}
    .feature .guideSent{margin-bottom:0;}
  }
  .voice{margin-top:120px;}
  .voiceList{display:flex; justify-content: space-between; flex-wrap:wrap; margin-top: 30px;}
  .voiceList .item{width: 49%; background-color: #cff9f8; border-radius: 10px; padding: 4% 3% 3.5%; margin-bottom:20px;} 
  .voiceList .careerBox{display: flex;}
  .voiceList .item .companyName{font-size:1.3em; margin-right: 10px; margin-bottom: 5px;}
  .voiceList .item .linkBox{text-align:right;margin-top: 10px;}
  .voiceList .item .link{color:#0248a5; font-size: 0.8em; }
  .slash{margin-left:10px; font-weight:bold; font-size:1.1em;}
  .faq{margin-top:80px;}
  @media screen and (max-width:780px){
    .voice{margin-top:80px;}
    .voiceList{display:block;}
    .voiceList > .item{width: 100%; padding: 7% 4% 5.5%;}
}
  .teachers{margin-top:80px;}
  .teachers .mainTtl{margin-bottom:30px;}
  .teacherList{display:flex; justify-content: space-between; width:90%; margin: 80px auto 0;}
  .teacherList > .item{ width: 28%; display: flex; flex-direction: column;}
  .teacherList > .item .sent {display: flex; flex-direction: column; flex:1;}
  .teacherList > .item .sent .career { margin-bottom: auto; }
  .teacherList > .item .sent .nameBox{text-align: center; margin: 30px 0 15px;}
  .teacherList > .item .sent .nameBox .jpName{font-size:1.4em; margin-bottom:4px;}
  .teacherList > .item .sent .nameBox .enName{font-size:1.1em;}
  .teacherList > .item .sent .career{margin-bottom:20px;}
  .teacherList > .item .sent .career .item{border-bottom:1px solid #d6d6d6; line-height:1.7; padding:5px 0;}
  .teacherList > .item .sent .career .item:last-child{border-bottom:none;}
  .teacherList > .item .sent .moreLink{text-align:center; margin-top:auto; }
  .teacherList > .item .sent .moreLink a{color:#0248a5;}
  
  .accordionWrap{width: 70%; margin-left:auto;}
  .accordion .comment{ margin-right: 20px; padding-top: 16px;}
    .accordion {
      border-bottom: 2px solid #000;
      padding: 10px 0;
    }

    .accordion-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      font-weight: bold;
    }
  .accordion-header .que{ display: block; margin-right: 20px;}

    .accordion-header .icon {
      transition: transform 0.3s ease;
      font-size: 20px;
    }

    .accordion-content {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;
      display: flex;
      justify-content: space-between;
        align-items: flex-end; /* 子要素を下揃え */

    }

    .accordion.active .accordion-content {
      max-height: 500px; /* 開いたときの高さ（十分大きめに） */
    }

    .accordion.active .accordion-header .icon {
  opacity: 0;
  visibility: hidden; /* フェードアウト後クリック不可にする */
    }
.accordion[aria-expanded="true"] button .icon {
  opacity: 0;
  visibility: hidden; /* フェードアウト後クリック不可にする */
  }

.accordion button .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid #000;
  border-radius: 50%;
  transition: transform 0.3s ease;
    opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
  @media screen and (max-width:780px){
  .accordionWrap{width: 100%; margin-left:0; margin-top: 40px;}

    .teacherList{display:block; justify-content: space-between; width:90%; margin: 80px auto 0;}
    .teacherList > .item{ width: 60%; margin: 0 auto 60px;}
    .teacherList > .item:last-child{ width: 60%; margin: 0 auto;}

  }
  .column{margin-top:80px;}
  .columnIntro{display:flex; justify-content: space-between; align-items:end;}
  .download{margin-top:80px; margin-bottom: 80px; }
  .download .inner{background-color:#efefef; border-radius:20px;}
  .download .btnList{display:flex; justify-content: center; text-align: center; padding:80px 0;}
  .download .btnList > .item a{ color:#fff; background-color: #0248a5; padding:16px 0; width: 320px; margin:0 20px; display: table; border-radius: 8px; }
  .copylightBox{text-align:center; margin-top:80px; font-size: 0.8em;}
  .copylight{border-bottom:1px solid #000; padding-bottom:5px; margin-bottom:5px;}
  @media screen and (max-width:780px){
    .download .btnList{justify-content: space-between;}
    .download ul.btnList > li.item{width: 48%;}

    .columnIntro{display:block;}
    .columnIntro .blueBtn{margin-top:30px;}
    .download .inner{border-radius:0;}
    .download .btnList > .item a{width: 100%; margin:0;font-size: clamp(10px, 2.8vw, 25px);}
    .pcHead.footMenu .menuLogo{width: 50%; max-width:300px; margin-right: 0;}
    .copylightBox{text-align:left; margin-top:60px; font-size: 0.8em;}
    .copySent{text-align:center;}

  }