@charset "UTF-8";
/*---------------------------------------------------------
共通
---------------------------------------------------------*/
.m-1{margin:1vh 1vw;} .m-2{margin:2vh 2vw;} .m-3{margin:3vh 3vw;} .m-4{margin:4vh 4vw;} .m-5{margin:5vh 5vw;} 
.mt-1{margin-top:1vh;} .mt-2{margin-top:2vh;} .mt-3{margin-top:3vh;} .mt-4{margin-top:4vh;} .mt-5{margin-top:5vh;}
.mb-1{margin-bottom:1vh;} .mb-2{margin-bottom:2vh;} .mb-3{margin-bottom:3vh;} .mb-4{margin-bottom:4vh;} .mb-5{margin-bottom:5vh;} 
.ml-1{margin-left:1vw;} .ml-2{margin-left:2vw;}.ml-3{margin-left:3vw;}.ml-4{margin-left:4vw;}.ml-5{margin-left:5vw;}
.mr-1{margin-right:1vw;} .mr-2{margin-right:2vw;} .mr-3{margin-right:3vw;}.mr-4{margin-right:4vw;}.mr-5{margin-right:5vw;}

.p-1{padding:1vh 1vw;} .p-2{padding:2vh 2vw;} .p-3{padding:3vh 3vw;} .p-4{padding:4vh 4vw;} .p-5{padding:5vh 5vw;}
.pt-1{padding-top:1vh} .pt-2{padding-top:2vh;} .pt-3{padding-top:3vh;} .pt-4{padding-top:4vh;} .pt-5{padding-top:5vh;} 
.pb-1{padding-bottom:1vh;} .pb-2{padding-bottom:2vh;} .pb-3{padding-bottom:3vh;} .pb-4{padding-bottom:4vh;} .pb-5{padding-bottom:5vh;} 
.pl-1{padding-left:1vw;} .pl-2{padding-left:2vw;} .pl-3{padding-left:3vw;} .pl-4{padding-left:4vw;} .pl-5{padding-left:5vw;} 
.pr-1{padding-right:1vw;} .pr-2{padding-right:2vw;}  .pr-3{padding-right:3vw;}  .pr-4{padding-right:4vw;}  .pr-5{padding-right:5vw;} 
.top-ttl {font-size: clamp(2.2rem, 4vw, 5rem) !important;}
.top-ttl02 {font-size: clamp(2rem, 4vw, 4rem) !important;}
.top-ttl03{font-size: clamp(2rem, 3vw, 3.25rem) !important;}
.semi-ttl ,.title-main{
font-size: clamp(1.8rem, 4vw, 3rem) !important;}
.semi-ttl02 {font-size: clamp(1.6rem, 4vw, 3rem) !important;}

.third-ttl {font-size: clamp(1.6rem, 4vw, 2rem) !important;}
.mini-text {font-size: clamp(1.2rem, 4vw, 1.8rem) !important;}
.fw{font-weight:700;}
.t-c{text-align: center;}
.naname {
    font-style: oblique 90deg;
}
.lh-12{line-height: 1.2;}
.lh-13{line-height: 1.3;}
.lh-14{line-height: 1.4;}
.w-1000,.w-1200,.w-800,.w-600{margin: 0 auto;width: 90%;}
.p-relative{position: relative;}
.w-1000{max-width: 1000px;}
.w-1200{max-width: 1200px;}
.w-800{max-width: 800px;}
.w-600{max-width: 600px;}
.w70{width: 70%;}
.w60{width: 60%;}
.w50{width: 50%;}
.w40{width: 40%;}
.w30{width: 30%;}
.w30-none{width: 30%;}
.fc-yellow{color:#ffff00;}
.pt-section{
    padding-top:5vh !important;
}
.pb-section{
    padding-bottom:5vh !important;
}
.bg-highgreen,.ao_rec-ttlBg{
    background: #01A56F;
}
.bg-l-yellow{background: #ffffe4;}
.bg-l-blue{background: #f0f9ff;}
.bg-white{background: #fff;}
.bg-reason{
    background-color: rgba(0, 75, 112, 1);
}
.bg-dred{background: #7e070d;}
.bg-lattice-wamgreen{
width:100%;
background-size: 16px 16px;
background-position: 50% 50%;
background-image: repeating-linear-gradient( 90deg, rgba(239,239,239,0.9) , rgba(239,239,239,0.9) 1px, transparent 1px, transparent 16px),repeating-linear-gradient( 0deg, rgba(239,239,239,0.9) , rgba(239,239,239,0.9) 1px, #fff 1px, #fff 16px);
}

.bg-lattice-l-blue{
width:100%;
background-size: 16px 16px;
background-position: 50% 50%;
background-image: repeating-linear-gradient( 90deg, rgba(0,143,210,0.2) , rgba(0,143,210,0.2) 1px, transparent 1px, transparent 16px),repeating-linear-gradient( 0deg, rgba(0,143,210,0.2) , rgba(0,143,210,0.2) 1px, #fff 1px, #fff 16px);
}

.bg-lattice-blck{
width:100%;
background-size: 16px 16px;
background-position: 50% 50%;
background-image: repeating-linear-gradient( 90deg, rgba(0,0,0,0.1) , rgba(0,0,0,0.1) 1px, transparent 1px, transparent 16px),repeating-linear-gradient( 0deg, rgba(0,0,0,0.1) , rgba(0,0,0,0.1) 1px, #fff 1px, #fff 16px);
}
.fuchi-w-3{
      --x: 0 0 var(--text-outline--width, 3px) var(--text-outline--color, #fff);
      --y: var(--x), var(--x), var(--x), var(--x), var(--x), var(--x) /* 6 */;
      text-shadow: var(--y), var(--y), var(--y), var(--y), var(--y), var(--y) /* 6 * 6 = 36 */;
}

.fuchi-w-6{
      --x: 0 0 var(--text-outline--width, 6px) var(--text-outline--color, #fff);
      --y: var(--x), var(--x), var(--x), var(--x), var(--x), var(--x) /* 6 */;
      text-shadow: var(--y), var(--y), var(--y), var(--y), var(--y), var(--y) /* 6 * 6 = 36 */;
}
.dot-frame{
border: 2px dotted #333;
}
.bg-l-gray{background: #f0eeeb;}
.bg-wam-green{background: #007440;}
.bg-wam-l-green{background: #e6f6f1;}
.bg-l-yellow {
    background: rgba(255, 252, 216,0.5);
}
.touka-bg-w-40{
  background-color: rgba(255, 255, 255, 0.4);
}
.fc-wam-green{color:#007440;}
.fc-red{color:#d80720;}
.fc-white{color:#fff;}
.fc-high{color:#01A56F;}
.culum-3-none{
    display: flex;
}
.culum-3-none > *{
    padding:1%;
}
.culum-2{display: flex;}
.f-wrap{flex-wrap: wrap;}
.flex-center{display: flex;align-items: center;justify-content: center;}
.mark-underline{background: linear-gradient(transparent 50%, #ffff00 50%);}
.mark-underline_high{background: linear-gradient(transparent 70%, rgba(1,165,111,0.2) 70%);}
.planBox {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    background: #fff;
}
.planBox-contents{
    padding:2vh 2vw;
}
.border-r1{border-radius: 1vh;} 
.border-r2{border-radius: 2vh;} 
.float-r,.float-r-none{
    float: right;
    margin-left: 2vw;
    margin-bottom: 3vh;
}
.float-l,.float-l-none{
    float: left;
    margin-right: 2vw;
    margin-bottom: 3vh;
}
.cb {clear: both;}

/*grid*/
.content{
  display:grid;
  grid-template-rows: auto auto auto;
  /*grid-template-columns: 1fr 40%;*/
  grid-template-areas:
    "area1 area2"
    "area3 area2";
  grid-gap: 10px;
  .item1{
    grid-area: area1;
    height:auto;
  }
  .item2{
    grid-area: area2;
    width: auto;   
  }
  .item3{
    grid-area: area3;
    height:auto;  
  }
}
.content-grid40{
  grid-template-columns: 1fr 40%;
}
.content-grid50{
  grid-template-columns: 1fr 50%;
}
.content-grid30{
  grid-template-columns: 1fr 30%;
}
.content-grid25{
  grid-template-columns: 1fr 25%;
}

@media screen and (max-width: 640px) {
/* 640pxまでの幅の場合に適応される */
  .content{
    grid-template-areas:
      "area1 area1"
      "area2 area2"
      "area3 area3";
 
    .item2{
      width: 100%;
      height: auto;
    }
  }
.float-r,.float-l{
    width: 100%;
    float: unset;
    margin-left: 0;
    margin-right: 0;
}
.w70,.w60,.w50,.w40,.w30{width: 100%;}
.pct-h-140{
width: 100%;
    height: 140px;
    object-fit: cover;
    object-position: top;
}
.culum-2{flex-direction: column;}
.order-01{order: 1;}
.order-02{order: 2;}
.order-03{order: 3;}
.sp-tac{text-align: center;}
.content-flex{display: flex !important;
    flex-direction: column;}
.sp-mt-2{margin-top: 2vh !important;}
}
/*---------------------------------------------------------
FV
---------------------------------------------------------*/
#pro-instructor{
    padding: 2vw 1vw 0;
    position: relative;
}
#pro-instructor{
    background-image: url('../img/elementary-e/pro-instructor/main_bg.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.no-webp #pro-instructor{
    background-image: url('../img/elementary-e/pro-instructor/main_bg.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
#pro-instructor .inner{
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#pro-instructor .inner{
    background-image: url('../img/elementary-e/pro-instructor/bg_pc.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    aspect-ratio: 227 / 68;
}
.no-webp #pro-instructor .inner{
    background-image: url('../img/elementary-e/pro-instructor/bg_pc.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    aspect-ratio: 227 / 68;
}
#pro-instructor .inner h1{
        font-size: clamp(3.5rem, 5vw, 7rem) !important;
    text-shadow: 6px 6px 10px #fff, -6px -6px 10px #fff, -6px 6px 10px #fff, 6px -6px 10px #fff;
    line-height: 1.3;
    font-weight: 900;
    margin: 0 0 2vw;
    text-align: center;
    font-family: "Noto Serif JP", serif;
    color: #D00000;
}
#pro-instructor .inner h1 span{
    font-size: clamp(1.8rem, 4vw, 3.5rem) !important;
    color: #000;
}
#pro-instructor .inner p{
    text-align: center;
    font-size: clamp(1.4rem, 2vw, 2rem) !important;
    font-weight:700;
    --x: 0 0 var(--text-outline--width, 3px) var(--text-outline--color, #fff);
      --y: var(--x), var(--x), var(--x), var(--x), var(--x), var(--x) /* 6 */;
      text-shadow: var(--y), var(--y), var(--y), var(--y), var(--y), var(--y) /* 6 * 6 = 36 */;
    margin: 0 0 1vw;
}
@media screen and (max-width: 640px){
    #pro-instructor .inner{
    background-image: none;
    }
    .no-webp #pro-instructor .inner{
    background-image: none;
    }
    .fv-img{
        width: 100%;
        margin: 0 auto;
        height: 120px;
        overflow: hidden;
        position: relative;
    }
    .fv-img img{
        width: 100%;
        height: auto;
        display: block;
        margin-bottom: -70px; 
    }
}

/*---------------------------------------------------------
プロフィール
---------------------------------------------------------*/
.pro-instructor-box {
  max-width: 1000px;
  margin: 0 auto;
  padding: 2vw 3vw;
  background: #fff;
  border-radius: 1vw;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  margin: 2vw auto 0;
}
.pro-instructor-box > h3 {
  text-align: center;
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  font-weight: 700;
  margin-bottom: 2vw;
  line-height: 1.5;
  font-family: "Noto Serif JP", serif;
}
.pro-instructor-box > h3 > span{
  background: linear-gradient(transparent 70%, #ffef92 0%);
}
.teacher-info {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 20px;
  align-items: center;
  margin-bottom: 2vw;
}
.teacher-name {
  font-size: clamp(1.6rem, 3vw, 2rem);
  font-weight: bold;
  margin-bottom: 15px;
}
.details dl {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 10px 10px;
}
.details dt {
  font-weight: bold;
}

/* Q&Aセクションの見出し */
.section-title {
  font-size: clamp(1.6rem, 3vw, 2rem);
  font-weight: 700;
  border-bottom: 2px solid #007440;
  padding-bottom: 5px;
  margin-bottom: 1.5vw;
}

.qa-block {
  margin-bottom: 1vw;
  border-bottom: 1px solid #ddd;
}
.question{
    font-size: clamp(1.4rem, 3vw, 1.8rem);
}
.question {
  font-weight: bold;
  margin-bottom: 10px;
  list-style: none;
  cursor: default;
  pointer-events: none;
  background:rgba(0,116,64,0.1);
  color: #007440;
  padding: .5vw;
}
.question::-webkit-details-marker {
  display: none;
}
.answer {
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  padding: 0 0 20px .5vw;
}

.filter-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 30px;
}

.filter-btn {
  padding: 8px 16px;
  border: 1px solid #007440;
  background-color: #fff;
  color: #007440;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.2s ease;
}

/* ボタンにマウスを乗せたとき */
.filter-btn:hover {
  background-color: #007440;
  color: #fff;
}

@media (max-width: 640px) {
  .pro-instructor-box {
    padding: 20px 15px;
    border-radius: 8px;
  }
  .pro-instructor-box > h3 {
    text-align: left; 
    margin-bottom: 30px;
    line-height: 1.7;
  }
  .teacher-info {
    grid-template-columns: 1fr; 
    gap: 20px;
    text-align: center;
    margin-bottom: 30px;
  }
  .avatar {
    margin: 0 auto; 
  }
  .details dl {
    gap: 5px;
    text-align: left;
  }
  
  .details dt {
    margin-top: 10px;
  }
  
  .details dt:first-child {
    margin-top: 0;
  }

  .question {
    cursor: pointer;
    pointer-events: auto;
    padding: 2vw 20px 2vw 2vw; 
    margin-bottom: 0;
    position: relative;
    background: transparent;
  }
  .question::after {
    content: "+";
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.4rem;
    color: #007440;
    font-weight: normal;
  }

  .qa-block:not([open]) .answer {
    display: none;
  }
  .qa-block[open] .question::after {
    content: "−";
  }
  .answer {
    padding: 2vw 2vw 20px 2vw; 
  }
}