html{ scroll-behavior: smooth;}
body{ margin:0; padding:0; font-size: 20px; font-family: "source-han-serif-tc", serif; font-weight: 300;background: url(images/page-bg.png) fixed;}
img{ width:auto; height: auto; max-width: 100%; max-height: 100%;}
ol,ul{ padding-left: 1em; margin: 0;}
h1,h2,h3,h4{ margin: 0;}

.device{ display: none;}

header{ display: flex; align-items: center; background: url(images/bg.png) no-repeat center center/cover; position: relative; height: 100vh; max-height:1080px; min-height: 855px; overflow: hidden;}
header:before,header:after{ content: ''; display: block; position: absolute; inset: 0 0 0 0; z-index: 2;}
header:before{ background:url(images/frame-bottom.png) no-repeat center bottom/cover,url(images/frame-top.png) no-repeat left top/cover;}
header:after{ background:url(images/teacher-txt.png) no-repeat center bottom/contain; animation: fadein 3s;}
h1{ padding:0 0.5em 0 1.5em;}
.teachers{ position: relative; aspect-ratio: 1027/1000; filter: drop-shadow(10px 10px 10px #c5a180); width:57%;}
.teacher1{position: absolute;top:0; left: 0; animation: H-slide3 2s;}
.teacher2{position: absolute;top:0; left: 0; animation: H-slide1 2s;}
.teacher3{position: absolute;top:0; left: 0; animation: H-slide2 2s;}

@keyframes fadein{
    0%,50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes H-slide1{
    0% {
    opacity: 0;
    transform: translate3d(-20%, 0, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes H-slide2{
    0%,20% {
    opacity: 0;
    transform: translate3d(-20%, 0, 0);
  }

  80% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes H-slide3{
    0%,40% {
    opacity: 0;
    transform: translate3d(-20%, 0, 0);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.pagetype1{ background:url(images/pattern.png) center top;}

h2{  margin:0 0 1em 0; text-align: center; font-size: 2em; line-height: 1.2;}
h2 span{ display: inline-block; padding:0 1em 5px 1em; border-bottom:2px solid #a0713d;}

.wrap{width:90%; margin:0 auto; padding:100px 0;}

.page1{ max-width: 1200px;}
.flexbox{ display: flex;align-items: stretch;}
.P1-img{  height: 100%;}
.P1-img img{ height: 100%; width:auto;}
.P1-txt{ flex: 1;}

.page2{ max-width: 1440px; }
.page2 .flexbox{ gap: 20px;}
h3{ background:#c8b39c; text-align: center; font-size: 1.4em; padding:10px; line-height: 1.1; font-weight: 700;}
h3 span{ font-size: 0.8em; color:#a0713d; display: block; font-weight: 300; line-height: 1.1;}
.pros{ flex:0 1 1; background: linear-gradient(transparent 70%, #ffffff 70%);}
.pros p{ display: block; padding:1em; margin:0; background:#fff;}

.page3{ max-width: 1440px;}
.page3 .flexbox{ gap: 20px;}
.page3 .flexbox>div{ flex:1;}
.group-name{ display: inline-block; color:#fff;}
dl{ display: grid; grid-template-columns: 100px 1fr;}
dt,dd{ margin-bottom: 10px;}
.group-name{ display: inline-block; padding: 2px 5px;}
.T1 .group-name{ background:#456b6f;}
.T2 .group-name{ background:#c6644d;}
.T3 .group-name{ background:#9e7740;}
dd strong{ font-size: 1.1em;}
.tags span{ border: 1px solid #000; padding:2px; border-radius: 2px; font-size: 0.9em;}
.tags span+span{ margin-left: 5px;}


.ticket{ position: relative; padding:60px 0; display: flex; width:90%; max-width:1200px; margin: 100px auto 50px auto; filter: drop-shadow(0px 5px 5px #c5a180);transition: opacity .2s;}
.ticket:before,.ticket:after{ content: ''; display: block; background-image:url(images/ticket.png); background-size: cover; position: absolute;  height: 60px; width:100%;}
.ticket:before{ background-position:center top;left: 0; top:0px;}
.ticket:after{ background-position:center bottom;left: 0; bottom:0px;}

.ticket:hover{ opacity: 0.9; transition: opacity .5s;}

.ticket ul{ list-style: none;}
.ticket li{ position: relative;}
.ticket li:before{ content: '✓ '; position: absolute; top:0; left: -1em;}
.ticket>div,.ticket a{box-sizing: border-box; display: flex; align-items: center;justify-content: center; padding:0 20px; }
.applicate-txt{ position: relative; flex: 1 1 60%; background: #fff;;}
.applicate-link{ position: relative; flex: 1 1 40%; text-align: center; text-decoration: none; font-size: 1.5em; background: #5d6b92; color:#fff; font-weight: 700;}
.applicate-link em{ display: block; font-style: normal; font-size: 0.7em; font-weight: 300;}

.rightnow{ display: block; width: 300px; margin: 0 auto; filter: drop-shadow(0px 5px 0 #9b6b38); font-weight: 700;}
.rightnow:hover{ transform: translate(0,5px); filter: drop-shadow(0px 0px 0 #9b6b38); transition: all .5s;}

.pagetype2{ background:url(images/pattern2.png) center top,url(images/page2-bg.png); border-top-left-radius: 150px; border-top-right-radius: 150px;}
.page4{ padding:100px 0; }
.page4 h2{ color:#fff;}
table{ border-collapse:collapse; border-spacing:0; color:#fff; width:80%; max-width: 900px; margin: 0 auto;}
table th,table td{ border:1px solid #fff; padding:1em;}
th{ vertical-align: top; white-space: nowrap;}
.page4 ul li+li{ margin-top: 10px;}
.sparkle{list-style: none; padding-left:25px;}
.sparkle li{ position: relative;}
.sparkle li:before{ position: absolute; top:2px; left: -25px; content: ''; display: block; width:20px; aspect-ratio: 3/4; background:url(images/sparkle.png) no-repeat center center/contain;}
.nostyle{ list-style: none;}
.nostyle b{ color:#fff36b;}

@media screen and ( max-width:1440px) and ( max-height:700px) {
  header{ min-height: 675px;}
  .teachers{ width:70%;}
}

@media screen and ( max-width:1440px) {
  body{ font-size: 18px;}
  h3 span{ font-size: 0.7em;}
}

@media screen and ( max-width:1080px) {
  .desk{ display: none;}
  .device{ display: block;}

  header{ flex-direction: column; height: auto; min-height: auto;}
  header:before{ background:url(images/frame_m-bottom.png) no-repeat center bottom/cover,url(images/frame_m-top.png) no-repeat left top/cover;}
  header:after{ background:url(images/teacher_m-txt.png) no-repeat center bottom/contain; animation: fadein 3s;}
  h1{ padding: 100px 0 0 0; width:90%;}
  .teachers{width:90%; margin-top: -2em;}

  .flexbox{ flex-wrap: wrap;}
  .pros{ flex: 0 0 calc(50% - 20px);}
  
  .pagetype2{ border-top-left-radius: 100px; border-top-right-radius: 100px;}
}
@media screen and ( max-width:480px) {
  h1{ padding: 50px 0 0 0;}
  .teachers{ margin-top: -1em;}
  .wrap{ padding:50px 0;}
  h2 i{ display: block;}

  .ticket{ flex-direction: column;}
  .ticket:before,.ticket:after{ background-image:url(images/ticket_m.png); background-size: cover; position: absolute;  height: 60px; width:100%; }
  .applicate-link{ margin-top: 120px; position: relative;}
  .applicate-link:before{ content:''; display: block; background:url(images/ticket-middle_m.png) no-repeat center center/cover; height: 120px; width:100%; position: absolute; top:-120px;}


  .pagetype2{ border-top-left-radius: 60px; border-top-right-radius: 60px;}

}

.btn-menu { width:32px; height:32px; position:absolute; top:10px; right:10px; background:url(images/icon-menu.png) no-repeat center center; background-size:32px 32px; z-index:101;}

.btn-menu.active{ background:url(images/icon-xx.png) no-repeat center center; background-size:32px 32px;}

#option{ display: none; text-align: center; list-style: none; margin: 0; padding: 0; font-size:16px; inset: 0 0 0 auto; padding:10px; text-align: right; width:50%; max-width:300px; background:#000000f2; position: fixed; z-index: 15; text-align: center;}
#option li{ display: block; margin: 30px 0;}
#option a{color:#fff; text-decoration: none;}
#option img{ height: 35px;}