@charset "UTF-8";
/* CSS Document */

section, article, aside, footer, header, nav, h2 { display:block;}

body { padding:0; margin:0 auto; color: #414141; font-size:1em; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; background-color: #fff; background-image: url("../images/hp_top_bg.jpg"); background-repeat: no-repeat; background-size: 100% auto; background-position: left 195px; position: relative;}
img { border:0; display: block;}

html, body { height: 100%;}

.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }

div.brk { clear: both;}


/************ video box ************/
.video-container { position:relative; padding-bottom:56.25%; padding-top:30px; width:100%; height: 0px; overflow:hidden;}
.video-container iframe, .video-container object, .video-container embed { position:absolute; top:0; left:0; width:100%; height:100%;}


@media screen and (min-width: 1366px) {

  /************ header + nav ************/

  header { width: 100%; height: 125px; padding: 0 calc(50% - 660px); box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}

  .header-logo { width: 300px;}
  .header-logo img { /*width: 300px;*/width: 100%; height: auto;}

  nav#mo { display: none;}
  nav#pc { width: calc(100% - 300px);}
  nav#pc ul.nav-menu { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-end; align-items: center;}
  nav#pc ul.nav-menu li { padding: 0 30px; margin: 0; border-right: 1px #ff6700 solid;}
  nav#pc ul.nav-menu li:nth-child(5), 
  nav#pc ul.nav-menu li:nth-child(6) { border-right: 0;}
  nav#pc ul.nav-menu li a { color: #333; font-size: 1.2rem; font-weight: 500; text-decoration: none;}
  nav#pc ul.nav-menu li a:hover { color: #ff6700;}
  nav#pc ul.nav-menu li a.contact { width: 157px; padding: 10px 0; color: #fff; font-size: 1.2rem; font-weight: 500; text-decoration: none; border-radius: 26px; background-color: #ff6700; display: flex; justify-content: center; align-items: center;}
  nav#pc ul.nav-menu li a.contact img.icon-o { display: none;}
  nav#pc ul.nav-menu li a.contact img.icon-w { width: 25px; height: auto; margin: 0 10px 0 0;}
  nav#pc ul.nav-menu li a.contact:hover { color: #ff6700; border: 2px #ff6700 solid; background-color: #fff; box-sizing: border-box;}
  nav#pc ul.nav-menu li a.contact:hover img.icon-w { display: none;}
  nav#pc ul.nav-menu li a.contact:hover img.icon-o { width: 25px; height: auto; margin: 0 10px 0 0; display: block;}


  /************ hp-banner ************/

  .hp-banner-box { clear: both; width: 100%; padding: 0 3.8vw; box-sizing: border-box;}

  .hp-banner-box img { width: 100%; height: auto;}


  /************ section#hp-about ************/

  section#hp-about { clear: both; width: 100%; padding: 50px 13vw 90px 13vw; box-sizing: border-box;}

  .hp-about-title { width: 110px; margin: 0 auto; color: #ff6700; font-size: 3.2rem; font-weight: 500; text-align: center; border-bottom: 5px #ff6700 solid;}
  .hp-about-title-2 { width: 100%; padding: 20px 0 0 0; color: #333; font-size: 2.4rem; font-weight: 600; text-align: center;}
  .hp-about-intro { width: 100%; padding: 60px 0 0 0; color: #333; font-size: 1.5rem; line-height: 1.6em; text-align: center;}


  /************ section#hp-news ************/

  section#hp-news { clear: both; width: 100%; padding: 0 calc(50% - 660px) 120px calc(50% - 660px); box-sizing: border-box;}

  .hp-news-list-full { width: 100%; border-radius: 10px; background-color: #fdfce5; display: flex; justify-content: flex-start; align-items: stretch;}
  
  .hp-news-list-full .title-more { width: 430px; padding: 50px; box-sizing: border-box;}
  .hp-news-list-full .title-more .title-box { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start;}
  .hp-news-list-full .title-more .title-box img.icon { width: 53px; height: auto; margin: 0 15px 0 0;}
  .hp-news-list-full .title-more .title-box .title { width: calc(100% - 53px - 15px);}
  .hp-news-list-full .title-more .title-box .title span.style-b { color: #774418; font-size: 2.6rem; line-height: 2rem; font-weight: 600;}
  .hp-news-list-full .title-more .title-box .title span.style-s { padding: 20px 0 0 0; color: #808080; font-size: 1.6rem; letter-spacing: 0.1em; display: block;}
  .hp-news-list-full .title-more .more-bt { width: 250px; margin: 40px 0 0 0;}
  .hp-news-list-full .title-more .more-bt a { width: 100%; padding: 10px 0; box-sizing: border-box; color: #333; font-size: 1.6rem; font-weight: 500; line-height: 1em; text-align: center; text-decoration: none; border-radius: 30px; background-color: #ffc000; display: block; position: relative;}
  .hp-news-list-full .title-more .more-bt a .arrow { width: 100%; height: 100%; padding: 0 10px 0 0; box-sizing: border-box; color: #333; font-size: 1rem; display: flex; justify-content: flex-end; align-items: center; position: absolute; top: 0; left: 0; z-index: 1;}
  .hp-news-list-full .title-more .more-bt a:hover, 
  .hp-news-list-full .title-more .more-bt a:hover .arrow { color: #fff;}

  .hp-news-list-full .news-list { width: calc(100% - 430px - 40px); max-height: 400px; padding: 40px 20px 40px 0; box-sizing: border-box;}
  .hp-news-list-full .news-list .box { width: 100%; height: 100%; padding: 0 40px 0 0; box-sizing: border-box; overflow-y: auto; scrollbar-color: #ffc000 #efefef;}
  .hp-news-list-full .news-list .box::-webkit-scrollbar { width: 5px;}
  .hp-news-list-full .news-list a.news-box { width: 100%; padding: 20px 0; text-decoration: none; border-bottom: 1px #c9c9c9 solid; display: flex; justify-content: flex-start; align-items: flex-start;}
  .hp-news-list-full .news-list a.news-box:last-child { border-bottom: 0;}
  .hp-news-list-full .news-list a.news-box .date { width: 200px; color: #333; font-size: 1.4rem; font-weight: 500;}
  .hp-news-list-full .news-list a.news-box .title { width: calc(100% - 200px - 20px); color: #333; font-size: 1.4rem;}
  .hp-news-list-full .news-list a.news-box .icon { width: 20px; color: #333; font-size: 1.2rem; text-align: right;}
  .hp-news-list-full .news-list a.news-box:hover .date, 
  .hp-news-list-full .news-list a.news-box:hover .title, 
  .hp-news-list-full .news-list a.news-box:hover .icon { color: #ff6700;}


  /************ section#hp-3different ************/

  section#hp-3different { clear: both; width: 100%; padding: 0 0 110px 0; background-image: url("../images/hp_3different_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top;}

  .hp-3different-learning { width: 100%; position: relative; display: flex; justify-content: center; flex-wrap: wrap; overflow: hidden;}
  .hp-3different-learning img.learning-bg { width: 100%; min-width: 1920px; height: auto; position: relative; z-index: 1;}
  .hp-3different-learning .learning-check-box { width: 1255px; margin: 0 auto; border: 2px #00bf9f solid; border-radius: 30px; background-color: #fff; box-sizing: border-box; overflow: hidden; -moz-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); -webkit-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); position: absolute; top: 60px; left: calc(50% - 627.5px); z-index: 2; display: block;}
  
  .hp-3different-learning .learning-check-box .column-top { width: 100%; padding: 35px 0; background-color: #3eccb1; position: relative;}
  .hp-3different-learning .learning-check-box .column-top img.title { width: 224px; height: auto; margin: 0 auto;}
  .hp-3different-learning .learning-check-box .column-top .text { width: 100%; padding: 20px 0 0 0; color: #fff; font-size: 2.4rem; font-weight: 600; text-align: center;}
  .hp-3different-learning .learning-check-box .column-top img.illu-1 { width: 114px; height: auto; position: absolute; top: 40px; right: 150px; z-index: 2;}  
  
  .hp-3different-learning .learning-check-box .column-bottom { width: 100%; padding: 30px 60px 40px 260px; box-sizing: border-box; position: relative;}
  .hp-3different-learning .learning-check-box .column-bottom ul.learning { width: 100%; padding: 0; margin: 0; list-style: none; display: block;}
  .hp-3different-learning .learning-check-box .column-bottom ul.learning li { width: 100%; padding: 25px 0; margin: 0; color: #333; font-size: 1.6rem; font-weight: 500; display: flex; justify-content: flex-start;}
  .hp-3different-learning .learning-check-box .column-bottom ul.learning li input[type=checkbox] { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;}
  .hp-3different-learning .learning-check-box .column-bottom ul.learning li .checkmark { position: absolute; top: 0; left: 0; height: 33px; width: 33px; background-color: #fff; border-radius: 50%; border: 2px #ff6700 solid;}
  .hp-3different-learning .learning-check-box .column-bottom ul.learning li .container:hover input ~ .checkmark { background-color: #ff6700;}
  .hp-3different-learning .learning-check-box .column-bottom ul.learning li .container input:checked ~ .checkmark { background-color: #ff6700;}
  .hp-3different-learning .learning-check-box .column-bottom ul.learning li .checkmark:after { content: ""; position: absolute; display: none;}
  .hp-3different-learning .learning-check-box .column-bottom ul.learning li .container input:checked ~ .checkmark:after { display: block;}
  .hp-3different-learning .learning-check-box .column-bottom ul.learning li .container .checkmark:after { left: 11px; top: 5px; width: 8px; height: 16px; border: solid white; border-width: 0 3px 3px 0; transform: rotate(45deg);}
  .hp-3different-learning .learning-check-box .column-bottom ul.learning li .container { display: block; position: relative; padding-left: 35px; cursor: pointer; font-size: 16px; user-select: none;}
  .hp-3different-learning .learning-check-box .column-bottom ul.learning li .space-pc { width: 40px; display: block;}
  .hp-3different-learning .learning-check-box .column-bottom img.illu-2 { width: 120px; height: auto; position: absolute; bottom: 40px; left: 70px; z-index: 2;}

  .hp-3different-learning .intro-text { clear: both; width: 100%; padding: 75px 0 0 0; color: #333; font-size: 1.6rem; text-align: center;}

  img.hp-3different-hr-line { clear: both; width: 123px; height: auto; margin: 50px auto;}

  .hp-3different-method { clear: both; width: 100%; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .hp-3different-method .intro-text { width: 100%; padding: 0 0 40px 0; color: #333; font-size: 2.4rem; font-weight: 500; text-align: center;}
  .hp-3different-method .intro-text span.style-o { color: #ff6700;}
  .hp-3different-method .method-box { width: 350px; margin: 0 45px;}
  .hp-3different-method .method-box .num { width: 100%; color: rgba(176,176,176,0.3); font-size: 2.4rem; font-weight: 600;}
  .hp-3different-method .method-box img.pic-illu { width: 100%; height: auto;}
  .hp-3different-method .method-box .title { width: 100%; padding: 35px 0 15px 0; color: #00bf9f; font-size: 1.4rem; font-weight: 600;}
  .hp-3different-method .method-box .intro { width: 100%; color: #333; font: 0.8rem; line-height: 1.2em;}

  .hp-3different-method .read-more-bt { clear: both; width: 100%; margin: 70px 0 0 0;}
  .hp-3different-method .read-more-bt a { width: 412px; padding: 15px 0; margin: 0 auto; color: #00bf9f; font-size: 1.2rem; font-weight: 500; text-align: center; text-decoration: none; border: 1px #00bf9f solid; border-radius: 30px; box-sizing: border-box; display: block; position: relative;}
  .hp-3different-method .read-more-bt a .arrow { width: 100%; height: 100%; padding: 0 30px 0 0; box-sizing: border-box; color: #00bf9f; font-size: 1rem; display: flex; justify-content: flex-end; align-items: center; position: absolute; top: 0; left: 0; z-index: 1;}
  .hp-3different-method .read-more-bt a:hover { color: #fff; background-color: #00bf9f;}
  .hp-3different-method .read-more-bt a:hover .arrow { color: #fff;}


  /************ section#hp-learning ************/

  section#hp-learning { clear: both; width: 100%; padding: 50px 0 140px 0; background-image: url("../images/hp_learning_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: right top;}

  .hp-learning-title { width: 100%; color: #333; font-size: 2.4rem; font-weight: 500; text-align: center;}

  .hp-learning-what { clear: both; width: 100%; margin: 70px 0 0 0; display: flex; justify-content: center; align-items: stretch;}
  .hp-learning-what .learning-box { width: 400px; margin: 0 15px; border-radius: 30px; overflow: hidden;}
  .hp-learning-what .learning-box.bg-y { background-color: #ffc000;}
  .hp-learning-what .learning-box.bg-g { background-color: #00bf9f;}
  .hp-learning-what .learning-box.bg-o { background-color: #ff6700;}
  .hp-learning-what .learning-box .photo { width: 100%; height: 185px; display: flex; align-items: center; overflow: hidden;}
  .hp-learning-what .learning-box .photo img { width: 100%; height: auto;}
  .hp-learning-what .learning-box .title { width: 100%; padding: 25px 35px 15px 35px; color: #fff; font-size: 2rem; font-weight: 500; letter-spacing: 0.1em; box-sizing: border-box;}
  .hp-learning-what .learning-box .intro { width: 100%; padding: 0 0 20px 35px; color: #fff; font-size: 1.2rem; line-height: 2em; box-sizing: border-box;}


  /************ section#hp-listen ************/

  section#hp-listen { clear: both; width: 100%; position: relative;}

  img.hp-listen-photo-bg { width: 100%; height: auto; position: relative; z-index: 1;}

  .hp-listen-massage { width: 100%; padding: 0 0 6vw 0; margin: -14vw 0 0 0; position: relative; z-index: 2;}
  .hp-listen-massage .title { width: 100%; padding: 0 0 5vw 0; color: #fff; font-size: 2.2vw; font-weight: 500; text-align: center;}
  .hp-listen-massage .listen-massage-box { /*width: 830px;*/width: 40vw; padding: 0 0 2vw 0;}
  .hp-listen-massage .listen-massage-box .box-full { width: calc(100% - 2vw); padding: 2vw 5vw; margin: 0 1vw; border-radius: 26vw; background-color: rgba(255,255,255,0.9); box-sizing: border-box; -moz-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); -webkit-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); display: flex; justify-content: flex-start; align-items: flex-start;}
  .hp-listen-massage .listen-massage-box .box-full .photo { /*width: 260px;*/width: 13vw; height: 13vw; display: flex; justify-content: center; overflow: hidden;}
  .hp-listen-massage .listen-massage-box .box-full .photo img { width: auto; height: 100%;}
  .hp-listen-massage .listen-massage-box .box-full .intro-text { width: calc(100% - 13vw); padding: 2vw 0 0 2vw; box-sizing: border-box;}
  .hp-listen-massage .listen-massage-box .box-full .intro-text .title { clear: both; padding: 0; width: 100%; color: #fff; font-size: 1.1vw; text-align: left;}
  .hp-listen-massage .listen-massage-box .box-full .intro-text .title span { padding: 0.2vw 0.5vw; background-color: #ff6700;}
  .hp-listen-massage .listen-massage-box .box-full .intro-text .intro { clear: both; padding: 2vw 0 0 0; width: 100%; color: #333; font-size: 1.1vw;}

  img.hp-listen-arrow-prev { /*width: 80px;*/width: 4vw; height: auto; position: absolute; top: 15vw; left: 22vw; z-index: 9; cursor: pointer;}
  img.hp-listen-arrow-next { /*width: 80px;*/width: 4vw; height: auto; position: absolute; top: 15vw; right: 22vw; z-index: 9; cursor: pointer;}


  /************ section#hp-kids-video ************/

  section#hp-kids-video { clear: both; width: 100%; padding: 80px 0 130px 0; background-image: url("../images/hp-kids-video_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: right top; display: flex; justify-content: center; align-items: flex-start;}

  .hp-kids-intro { width: 175px; display: flex; justify-content: flex-start; align-items: flex-start;}
  .hp-kids-intro .style-v { padding: 0 20px 0 0; color: #333; font-size: 2.4rem; font-weight: 500; line-height: 1.2em; letter-spacing: 0.1em; -webkit-writing-mode: vertical-lr; writing-mode: vertical-lr;}
  .hp-kids-intro .style-v span { border-left: 5px #ff6700 solid;}

  .hp-kids-video { width: 1100px; border-radius: 0 80px 80px 80px; overflow: hidden;}


  /************ section#hp-appointment ************/

  section#hp-appointment { clear: both; width: 100%; padding: 60px 0 90px 0; background-image: url("../images/hp-appointment_bg.jpg"); background-repeat: no-repeat; background-size: 100% auto; background-position: center bottom;}

  .hp-appointment-con { width: 1300px; margin: 0 auto; border-radius: 0 0 60px 60px; background-color: #fff; display: flex; justify-content: flex-start; align-items: stretch; -moz-box-shadow:4px 4px 12px 2px rgba(20%,20%,40%,0.5); -webkit-box-shadow:4px 4px 12px 2px rgba(20%,20%,40%,0.5); box-shadow:4px 4px 12px 2px rgba(20%,20%,40%,0.5); overflow: hidden;}
  
  .hp-appointment-con .appointment-info { width: calc(100% - 680px); padding: 50px 0 0 65px; box-sizing: border-box;}
  .hp-appointment-con .appointment-info .title { width: 100%; color: #333; font-size: 2.4rem; font-weight: 500;}
  .hp-appointment-con .appointment-info .text { width: 100%; padding: 50px 0 90px 0; color: #333; font-size: 1.1rem; line-height: 1.3em;}
  .hp-appointment-con .mail-box-mo { display: none;}
  .hp-appointment-con .appointment-info .mail-box { width: 100%; position: relative;}
  .hp-appointment-con .appointment-info .mail-box img.mail-icon { width: 142px; height: auto; margin: 0 0 0 calc(230px - 71px); position: relative; z-index: 1;}
  .hp-appointment-con .appointment-info .mail-box a.appointment-bt { width: 460px; padding: 20px 0; margin: -20px 0 0 0; color: #fff; font-size: 2rem; text-align: center; text-decoration: none; border-radius: 50px; background-color: #ff6700; display: block; position: relative; z-index: 2;}
  .hp-appointment-con .appointment-info .mail-box a.appointment-bt span.mouseoff { display: block;}
  .hp-appointment-con .appointment-info .mail-box a.appointment-bt span.mouseon { display: none;}
  .hp-appointment-con .appointment-info .mail-box a.appointment-bt:hover { margin: 10px 0 0 0; color: #ff6700; border: 5px #ff6700 solid; background-color: #fff; box-sizing: border-box;}
  .hp-appointment-con .appointment-info .mail-box a.appointment-bt:hover span.mouseoff { display: none;}
  .hp-appointment-con .appointment-info .mail-box a.appointment-bt:hover span.mouseon { display: block;}
  
  .hp-appointment-con .map-pic { width: 680px; height: 660px; display: flex; justify-content: center; align-items: center; overflow: hidden;}
  .hp-appointment-con .map-pic img { width: auto; height: 100%;}


  /************ page-banner ************/

  .page-banner-box { clear: both; width: 100%;}

  .page-banner-box img { width: 100%; height: auto;}


  /************ section#page-about ************/

  section#page-about-1 { clear: both; width: 100%; padding: 80px calc(50% - 640px) 100px calc(50% - 640px); box-sizing: border-box; background-image: url("../images/page_about_1_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center top;}

  .page-about-title-2 { width: 100%; padding: 30px 0 0 0; color: #333; font-size: 2.2rem; font-weight: 500; text-align: center;}

  .page-about-1-con { clear: both; width: 100%; margin: 80px 0 0 0; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-about-1-con .col-pic { width: 520px;}
  .page-about-1-con .col-pic img { width: 100%; height: auto;}
  .page-about-1-con .col-text { width: calc(100% - 520px); padding: 80px 0 0 75px; color: #333; font-size: 1.4rem; font-weight: 500; line-height: 1.8em; box-sizing: border-box;}


  section#page-about-2 { clear: both; width: 100%; padding: 100px calc(50% - 640px) 120px calc(50% - 640px); box-sizing: border-box; background-image: url("../images/page_about_2_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center top;}

  .page-about-2-con { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-about-2-con .col-text { width: calc(100% - 560px); padding: 20px 20px 0 0; box-sizing: border-box;}
  .page-about-2-con .col-text .title-box { width: 100%; padding: 5px 0 5px 20px; color: #333; font-size: 2.2rem; font-weight: 600; line-height: 1em; border-left: 5px #ff6700 solid; box-sizing: border-box;}
  .page-about-2-con .col-text .text-con { width: 100%; padding: 45px 0 0 20px; color: #333; font-size: 1.4rem; font-weight: 500; line-height: 1.8em; box-sizing: border-box;}
  .page-about-2-con .col-illu { width: 560px;}
  .page-about-2-con .col-illu img { width: 100%; height: auto;}


  section#page-about-3 { clear: both; width: 100%; position: relative;}

  img.page-about-3-bg { width: 100%; height: auto; position: relative; z-index: 1;}

  .page-about-3-text { width: 100%; padding: 0 20vw 0 0; color: #fff; font-size: 1.8vw; font-weight: 500; text-align: right; letter-spacing: 0.1em; box-sizing: border-box; position: absolute; top: 5.5vw; left: 0; z-index: 2;}


  section#page-about-4 { clear: both; width: 100%; padding: 100px calc(50% - 640px) 70px calc(50% - 640px); box-sizing: border-box; background-image: url("../images/page_about_4_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center top;}

  .page-about-4-intro { clear: both; width: 100%; padding: 0 0 20px 0; margin: 80px 0 0 0; color: #333; font-size: 1.4rem; line-height: 1.6em; text-align: center;}

  .page-about-4-slogan { clear: both; width: 100%; padding: 20px 0 75px 0; color: #333; font-size: 2rem; font-weight: 600; text-align: center;}

  .page-about-4-target { clear: both; width: 100%; display: flex; justify-content: center; align-items: flex-start;}
  .page-about-4-target .column-box { width: calc(100% / 3 - 40px); margin: 0 20px;}
  .page-about-4-target .column-box .pic { width: 100%;}
  .page-about-4-target .column-box .pic img { width: 100%; height: auto;}
  .page-about-4-target .column-box .text { width: 100%; padding: 25px 0; color: #333; font-size: 1.4rem; font-weight: 500; text-align: center;}


  section#page-about-5 { clear: both; width: 100%; position: relative;}
  
  img.page-about-5-noreplace-bg { width: 100%; height: auto; position: relative; z-index: 1;}

  .page-about-5-noreplace-text { width: 100%; height: 100%; color: #333; font-size: 1.6vw; font-weight: 500; display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; z-index: 2;}


  section#page-about-6 { clear: both; width: 100%; padding: 110px calc(50% - 640px) 70px calc(50% - 640px); box-sizing: border-box;}

  .page-about-6-contact { width: 100%; display: flex; justify-content: flex-start; align-items: center;}
  .page-about-6-contact .contact-title { width: calc(430px - 50px); padding: 5px 0 5px 20px; margin: 0 0 0 50px; color: #333; font-size: 2.2rem; font-weight: 600; line-height: 1em; border-left: 5px #ff6700 solid; box-sizing: border-box;}
  .page-about-6-contact .contact-method { width: calc(100% - 430px); display: flex; justify-content: flex-start; align-items: stretch;}
  .page-about-6-contact .contact-method .column-box { width: calc(100% / 2 - 30px); padding: 40px 20px 20px 20px; margin: 0 30px 0 0; border: 8px #ffc000 solid; border-radius: 20px; box-sizing: border-box; cursor: pointer;}
  .page-about-6-contact .contact-method .column-box a { color: #333; text-decoration: none;}
  .page-about-6-contact .contact-method .column-box a .icon { width: 100%;}
  .page-about-6-contact .contact-method .column-box a .icon img.icon { width: 120px; height: auto; margin: 0 auto; display: block;}
  .page-about-6-contact .contact-method .column-box a .icon img.icon-over { display: none;}
  .page-about-6-contact .contact-method .column-box a:hover .icon img.icon { display: none;}
  .page-about-6-contact .contact-method .column-box a:hover .icon img.icon-over { width: 120px; height: auto; margin: 0 auto; display: block;}
  .page-about-6-contact .contact-method .column-box a .text-1 { width: 100%; padding: 35px 0 0 0; color: #333; font-size: 1.6rem; font-weight: 500; line-height: 1.2em; text-align: center;}
  .page-about-6-contact .contact-method .column-box a .text-2 { width: 100%; padding: 20px 0 0 0; color: #333; font-size: 1.6rem; font-weight: 500; line-height: 1.2em; text-align: center;}
  .page-about-6-contact .contact-method .column-box a .text-1 span.orange, 
  .page-about-6-contact .contact-method .column-box a .text-2 span.orange { color: #ff6700;}

  .page-about-6-contact-map { clear: both; width: 100%; margin: 75px 0 0 0;}
  .page-about-6-contact-map img { width: 100%; height: auto;}


  /************ section#page-course ************/

  section#page-course-1 { clear: both; width: 100%; padding: 150px calc(50% - 640px); box-sizing: border-box; background-image: url("../images/page_course_1_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center center;}

  .page-course-1-text { width: 100%; font-size: 1.8rem; line-height: 1.8em; text-align: center;}


  section#page-course-2 { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: stretch;}

  .page-course-2-column { width: calc(100% / 3); position: relative;}
  .page-course-2-column img.pic-bg { width: 100%; height: auto; position: relative; z-index: 1;}
  .page-course-2-column .course-text { width: 100%; height: 100%; color: #fff; font-size: 2.4vw; font-weight: 500; display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; z-index: 2;}


  section#page-course-3 { clear: both; width: 100%; padding: 140px 0 80px 0; box-sizing: border-box; background-image: url("../images/page_course_3_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center top;}

  .page-course-3-target { width: 100%; position: relative;}
  
  .page-course-3-target .course-target-box-y { width: 70vw; padding: 2.5vw 0; margin: 0 auto; border: 10px #ffc000 solid; border-radius: 30px; background-color: #fff; position: relative;}
  .page-course-3-target .course-target-box-y .target-title { width: 16.5vw; padding: 2vw 0; color: #fff; font-size: 2.4vw; font-weight: 600; border-radius: 0 0 30px 0; background-color: #ffc000; display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; z-index: 2;}
  .page-course-3-target .course-target-box-y .sub-title { width: 25vw; padding: 0 0 1vw 0; margin: 0 auto; color: #333; font-size: 2vw; font-weight: 500; line-height: 1em; text-align: center; border-bottom: 5px #ffc000 solid;}
  .page-course-3-target .course-target-box-y .target-full .column-box .dot-y { width: 1.2vw; height: 1.2vw; margin: 0 auto; border: 0.3vw #ffc000 solid; border-radius: 100%; background-color: #fff; box-sizing: border-box; display: block;}
  
  .page-course-3-target .course-target-box-y .sub-intro, 
  .page-course-3-target .course-target-box-g .sub-intro, 
  .page-course-3-target .course-target-box-o .sub-intro { width: 100%; padding: 1.5vw 0 0 0; margin: 0 auto; color: #774418; font-size: 1.2vw; text-align: center;}
  .page-course-3-target .course-target-box-y .target-full, 
  .page-course-3-target .course-target-box-g .target-full, 
  .page-course-3-target .course-target-box-o .target-full { width: 100%; padding: 0 1.5vw; margin: 2vw 0 0 0; display: flex; justify-content: center; align-items: stretch; box-sizing: border-box;}
  .page-course-3-target .course-target-box-y .target-full .column-box, 
  .page-course-3-target .course-target-box-g .target-full .column-box, 
  .page-course-3-target .course-target-box-o .target-full .column-box { width: calc(100% / 4 - 2vw); margin: 0 1vw; position: relative;}
  .page-course-3-target .course-target-box-y .target-full .column-box .text, 
  .page-course-3-target .course-target-box-g .target-full .column-box .text, 
  .page-course-3-target .course-target-box-o .target-full .column-box .text { width: 100%; padding: 0.5vw 0 0 0; color: #333; font-size: 1.4vw; font-weight: 500; line-height: 1em; text-align: center; position: absolute; top: 1.5vw; left: 0; z-index: 2;}
  .page-course-3-target .course-target-box-y .target-full .column-box .illu-box, 
  .page-course-3-target .course-target-box-g .target-full .column-box .illu-box, 
  .page-course-3-target .course-target-box-o .target-full .column-box .illu-box { width: 100%; margin: 1.5vw 0 0 0; padding: 2vw 0; border-radius: 30px; background-color: #fdfce5; position: relative; z-index: 1;}
  .page-course-3-target .course-target-box-y .target-full .column-box .illu-box img, 
  .page-course-3-target .course-target-box-g .target-full .column-box .illu-box img, 
  .page-course-3-target .course-target-box-o .target-full .column-box .illu-box img { width: 10vw; height: auto; margin: 0 auto;}
  .page-course-3-target .course-target-box-y .target-full .column-box .intro, 
  .page-course-3-target .course-target-box-g .target-full .column-box .intro, 
  .page-course-3-target .course-target-box-o .target-full .column-box .intro { width: 100%; padding: 1.5vw 1vw; color: #333; font-size: 0.9vw; line-height: 1.4em; box-sizing: border-box;}
  
  .page-course-3-target .course-target-box-g { width: 70vw; padding: 2.5vw 0; margin: 0 auto; border: 10px #00bf9f solid; border-radius: 30px; background-color: #fff; position: relative;}
  .page-course-3-target .course-target-box-g .target-title { width: 16.5vw; padding: 2vw 0; color: #fff; font-size: 2.4vw; font-weight: 600; border-radius: 0 0 30px 0; background-color: #00bf9f; display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; z-index: 2;}
  .page-course-3-target .course-target-box-g .sub-title { width: 25vw; padding: 0 0 1vw 0; margin: 0 auto; color: #333; font-size: 2vw; font-weight: 500; line-height: 1em; text-align: center; border-bottom: 5px #00bf9f solid;}
  .page-course-3-target .course-target-box-g .target-full .column-box .dot-g { width: 1.2vw; height: 1.2vw; margin: 0 auto; border: 0.3vw #00bf9f solid; border-radius: 100%; background-color: #fff; box-sizing: border-box; display: block;}
  
  .page-course-3-target .course-target-box-o { width: 70vw; padding: 2.5vw 0; margin: 0 auto; border: 10px #ff6700 solid; border-radius: 30px; background-color: #fff; position: relative;}
  .page-course-3-target .course-target-box-o .target-title { width: 16.5vw; padding: 2vw 0; color: #fff; font-size: 2.4vw; font-weight: 600; border-radius: 0 0 30px 0; background-color: #ff6700; display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; z-index: 2;}
  .page-course-3-target .course-target-box-o .sub-title { width: 25vw; padding: 0 0 1vw 0; margin: 0 auto; color: #333; font-size: 2vw; font-weight: 500; line-height: 1em; text-align: center; border-bottom: 5px #ff6700 solid;}
  .page-course-3-target .course-target-box-o .target-full .column-box .dot-o { width: 1.2vw; height: 1.2vw; margin: 0 auto; border: 0.3vw #ff6700 solid; border-radius: 100%; background-color: #fff; box-sizing: border-box; display: block;}

  img.page-course-3-arrow-prev { /*width: 80px;*/width: 4vw; height: auto; position: absolute; top: 17vw; left: 12vw; z-index: 99; cursor: pointer;}
  img.page-course-3-arrow-next { /*width: 80px;*/width: 4vw; height: auto; position: absolute; top: 17vw; right: 12vw; z-index: 99; cursor: pointer;}

  .page-course-3-intro { clear: both; width: 70vw; margin: 6vw auto 0 auto; position: relative;}
  .page-course-3-intro .course-intro-box { width: 100%; height: 100%; padding: 0 4.5vw 0.7vw 2vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center; position: absolute; top: 0; left: 0; z-index: 2;}
  .page-course-3-intro .course-intro-box img.logo { width: 10vw; height: auto;}
  .page-course-3-intro .course-intro-box .text-mo { display: none;}
  .page-course-3-intro .course-intro-box .text-pc { width: calc(100% - 10vw); padding: 0 0 0 2vw; color: #333; font-size: 1.4vw; font-weight: 500; line-height: 2.2em; box-sizing: border-box;}
  
  img.page-course-3-intro-bg-mo { display: none;}
  img.page-course-3-intro-bg { width: 100%; height: auto; position: relative; z-index: 1;}


  /************ section#page-news ************/

  section#page-news { clear: both; width: 100%; padding: 0 calc(50% - 640px) 120px calc(50% - 640px); box-sizing: border-box; background-color: #fdfce5;}

  .page-news-list-full { width: 100%;}
  .page-news-list-full .title-more { width: 100%; padding: 50px 0;}
  .page-news-list-full .title-more .title-box { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-news-list-full .title-more .title-box img.icon { width: 53px; height: auto; margin: 0 15px 0 0;}
  .page-news-list-full .title-more .title-box .title { width: calc(100% - 53px - 15px);}
  .page-news-list-full .title-more .title-box .title span.style-b { color: #774418; font-size: 2.6rem; line-height: 2rem; font-weight: 600;}
  .page-news-list-full .title-more .title-box .title span.style-s { padding: 20px 0 0 0; color: #808080; font-size: 1.6rem; letter-spacing: 0.1em; display: block;}

  .page-news-list-full .news-list { width: 100%;}
  .page-news-list-full .news-list .box { width: 100%;}
  .page-news-list-full .news-list a.news-box { width: 100%; padding: 20px 0; text-decoration: none; border-bottom: 1px #c9c9c9 solid; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-news-list-full .news-list a.news-box:last-child { border-bottom: 0;}
  .page-news-list-full .news-list a.news-box .date { width: 200px; color: #333; font-size: 1.4rem; font-weight: 500;}
  .page-news-list-full .news-list a.news-box .title { width: calc(100% - 200px - 20px); color: #333; font-size: 1.4rem;}
  .page-news-list-full .news-list a.news-box .icon { width: 20px; color: #333; font-size: 1.2rem; text-align: right;}
  .page-news-list-full .news-list a.news-box:hover .date, 
  .page-news-list-full .news-list a.news-box:hover .title, 
  .page-news-list-full .news-list a.news-box:hover .icon { color: #ff6700;}

  ul.page-num { clear: both; width: 100%; padding: 0; margin: 40px 0 0 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  ul.page-num li { padding: 0 5px 10px 5px; margin: 0;}
  ul.page-num li a { padding: 5px 10px; color: #ff6700; font-size: 1rem; text-decoration: none; border: 1px #ff6700 solid; background-color: #fff; display: block;}
  ul.page-num li a:hover { color: #fff; background-color: #ff6700;}
  ul.page-num li a.sel { color: #fff; background-color: #ff6700;}


  .news-content { clear: both; width: 100%;}
  .news-content .news-title { width: 100%; padding: 0 0 20px 0;}
  .news-content .news-title .date { width: 100%; color: #333; font-size: 1.1rem; text-align: right;}
  .news-content .news-title .title { width: 100%; color: #333; font-size: 1.8rem; font-weight: 500; line-height: 1.2em;}
  .news-content .content { clear: both; width: 100%; padding: 40px 0; color: #333; font-size: 1.2rem; line-height: 1.8em; border-bottom: 1px #ff6700 solid; border-top: 1px #ff6700 solid;}
  .news-content .content a { color: #ff6700; border-bottom: 1px #ff6700 dashed;}
  .news-content .content img { max-width: 100%; height: auto;}

  .goback-bt { clear: both; width: 100%; padding: 60px 0 0 0;}
  .goback-bt a { width: 160px; padding: 10px 0; margin: 0 auto; color: #fff; font-size: 1.1rem; text-align: center; text-decoration: none; border-radius: 30px; border: 1px #ff6700 solid; background-color: #ff6700; display: block;}
  .goback-bt a:hover { color: #ff6700; background-color: #fff;}


  /************ section#page-appointment ************/

  section#page-appointment { clear: both; width: 100%; padding: 60px calc(50% - 640px) 90px calc(50% - 640px); box-sizing: border-box; background-image: url("../images/hp_3different_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: center top;}

  .page-appointment-title { width: 220px; margin: 0 auto; color: #ff6700; font-size: 3.2rem; font-weight: 500; text-align: center; border-bottom: 5px #ff6700 solid;}

  .page-appointment-form { clear: both; width: 100%; margin: 60px 0 0 0; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-appointment-form .column-helf { width: 50%; padding: 0 20px; box-sizing: border-box;}
  .page-appointment-form .column-helf .caption { width: 100%; color: #333; font-size: 1.2rem; font-weight: 500;}
  .page-appointment-form .column-helf input[type=text], 
  .page-appointment-form .column-helf input[type=tel] { width: 100%; padding: 10px; margin: 10px 0 30px 0; color: #333; font-size: 1.2rem; border: 0; border-bottom: 2px #ff6700 solid; background-color: transparent; box-sizing: border-box;}
  .page-appointment-form textarea { width: calc(100% - 40px); height: 200px; padding: 10px; margin: 10px auto 30px auto; color: #333; font-size: 1.2rem; border: 0; border: 2px #ff6700 solid; background-color: #fff; box-sizing: border-box;}
  .page-appointment-form .submit-bt { width: 100%; margin: 20px 0 0 0; text-align: center;}
  .page-appointment-form .submit-bt input[type=submit], 
  .page-appointment-form .submit-bt input[type=button] { width: 160px; padding: 10px 0; color: #fff; font-size: 1.2rem; border: 2px #ff6700 solid; border-radius: 30px; background-color: #ff6700; box-sizing: border-box; cursor: pointer;}
  .page-appointment-form .submit-bt input[type=submit]:hover, 
  .page-appointment-form .submit-bt input[type=button]:hover { color: #ff6700; border: 2px #ff6700 solid; background-color: #fff;}

  .page-appointment-contact { clear: both; width: 100%; padding: 40px 0 0 0; margin: 60px 0 0 0; color: #333; font-size: 1.2rem; line-height: 2em; border-top: 1px #ff6700 solid;}
  .page-appointment-contact span.title { font-size: 1.6rem; font-weight: 500;}


  /************ footer ************/

  footer { clear: both; width: 100%; padding: 50px calc(50% - 660px); box-sizing: border-box; background-color: #774418;}

  ul.footer-nav { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: center;}
  ul.footer-nav li { padding: 0 120px; margin: 0;}
  ul.footer-nav li a { color: #fff; font-size: 1.1rem; text-decoration: none;}
  ul.footer-nav li a:hover { border-bottom: 2px #fff solid;}

  .footer-info-full { clear: both; width: 100%; padding: 0 120px; margin: 70px 0 0 0; display: flex; justify-content: flex-start; align-items: center; box-sizing: border-box;}
  .footer-info-full img.footer-logo { width: 300px; height: auto; margin: 0 60px 0 0;}
  .footer-info-full .add-info { width: calc(100% - 300px - 60px); color: #fff; font-size: 1.4rem; line-height: 1.2em; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .footer-info-full .add-info div.col-1 { width: 40%; margin: 0 0 20px 0; display: flex; justify-content: flex-start; align-items: center;}
  .footer-info-full .add-info div.col-2 { width: 60%; margin: 0 0 20px 0; display: flex; justify-content: flex-start; align-items: center;}
  .footer-info-full .add-info div.col-3 { width: 60%; display: flex; justify-content: flex-start; align-items: center;}
  .footer-info-full .add-info div.col-4 { width: 40%; display: flex; justify-content: flex-start; align-items: center;}
  .footer-info-full .add-info div img.info-icon { width: 25px; height: auto; margin: 0 10px 0 0;}

  .copyright { clear: both; width: 100%; margin: 70px 0 0 0; color: #fff; font-size: 0.9rem; text-align: center;}
  

}

@media screen and (min-width: 1024px) and (max-width: 1366px) {

  /************ header + nav ************/

  header { width: 100%; height: 125px; padding: 0 calc(50% - 490px); box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}

  .header-logo { width: 240px;}
  .header-logo img { /*width: 300px;*/width: 100%; height: auto;}

  nav#mo { display: none;}
  nav#pc { width: calc(100% - 240px);}
  nav#pc ul.nav-menu { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-end; align-items: center;}
  nav#pc ul.nav-menu li { padding: 0 20px; margin: 0; border-right: 1px #ff6700 solid;}
  nav#pc ul.nav-menu li:nth-child(5), 
  nav#pc ul.nav-menu li:nth-child(6) { border-right: 0;}
  nav#pc ul.nav-menu li a { color: #333; font-size: 1.1rem; font-weight: 500; text-decoration: none;}
  nav#pc ul.nav-menu li a:hover { color: #ff6700;}
  nav#pc ul.nav-menu li a.contact { width: 147px; padding: 10px 0; color: #fff; font-size: 1.1rem; font-weight: 500; text-decoration: none; border-radius: 26px; background-color: #ff6700; display: flex; justify-content: center; align-items: center;}
  nav#pc ul.nav-menu li a.contact img.icon-o { display: none;}
  nav#pc ul.nav-menu li a.contact img.icon-w { width: 25px; height: auto; margin: 0 10px 0 0;}
  nav#pc ul.nav-menu li a.contact:hover { color: #ff6700; border: 2px #ff6700 solid; background-color: #fff; box-sizing: border-box;}
  nav#pc ul.nav-menu li a.contact:hover img.icon-w { display: none;}
  nav#pc ul.nav-menu li a.contact:hover img.icon-o { width: 25px; height: auto; margin: 0 10px 0 0; display: block;}


  /************ hp-banner ************/

  .hp-banner-box { clear: both; width: 100%; padding: 0 3.8vw; box-sizing: border-box;}

  .hp-banner-box img { width: 100%; height: auto;}


  /************ section#hp-about ************/

  section#hp-about { clear: both; width: 100%; padding: 50px 13vw 90px 13vw; box-sizing: border-box;}

  .hp-about-title { width: 110px; margin: 0 auto; color: #ff6700; font-size: 3.2rem; font-weight: 500; text-align: center; border-bottom: 5px #ff6700 solid;}
  .hp-about-title-2 { width: 100%; padding: 20px 0 0 0; color: #333; font-size: 2.4rem; font-weight: 600; text-align: center;}
  .hp-about-intro { width: 100%; padding: 60px 0 0 0; color: #333; font-size: 1.5rem; line-height: 1.6em; text-align: center;}


  /************ section#hp-news ************/

  section#hp-news { clear: both; width: 100%; padding: 0 calc(50% - 490px) 120px calc(50% - 490px); box-sizing: border-box;}

  .hp-news-list-full { width: 100%; border-radius: 10px; background-color: #fdfce5; display: flex; justify-content: flex-start; align-items: stretch;}
  
  .hp-news-list-full .title-more { width: 340px; padding: 30px; box-sizing: border-box;}
  .hp-news-list-full .title-more .title-box { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start;}
  .hp-news-list-full .title-more .title-box img.icon { width: 53px; height: auto; margin: 0 15px 0 0;}
  .hp-news-list-full .title-more .title-box .title { width: calc(100% - 53px - 15px);}
  .hp-news-list-full .title-more .title-box .title span.style-b { color: #774418; font-size: 2.6rem; line-height: 2rem; font-weight: 600;}
  .hp-news-list-full .title-more .title-box .title span.style-s { padding: 20px 0 0 0; color: #808080; font-size: 1.6rem; letter-spacing: 0.1em; display: block;}
  .hp-news-list-full .title-more .more-bt { width: 250px; margin: 40px 0 0 0;}
  .hp-news-list-full .title-more .more-bt a { width: 100%; padding: 10px 0; box-sizing: border-box; color: #333; font-size: 1.6rem; font-weight: 500; line-height: 1em; text-align: center; text-decoration: none; border-radius: 30px; background-color: #ffc000; display: block; position: relative;}
  .hp-news-list-full .title-more .more-bt a .arrow { width: 100%; height: 100%; padding: 0 10px 0 0; box-sizing: border-box; color: #333; font-size: 1rem; display: flex; justify-content: flex-end; align-items: center; position: absolute; top: 0; left: 0; z-index: 1;}
  .hp-news-list-full .title-more .more-bt a:hover, 
  .hp-news-list-full .title-more .more-bt a:hover .arrow { color: #fff;}

  .hp-news-list-full .news-list { width: calc(100% - 340px - 40px); max-height: 400px; padding: 30px 20px 30px 0; box-sizing: border-box;}
  .hp-news-list-full .news-list .box { width: 100%; height: 100%; padding: 0 30px 0 0; box-sizing: border-box; overflow-y: auto; scrollbar-color: #ffc000 #efefef;}
  .hp-news-list-full .news-list .box::-webkit-scrollbar { width: 5px;}
  .hp-news-list-full .news-list a.news-box { width: 100%; padding: 20px 0; text-decoration: none; border-bottom: 1px #c9c9c9 solid; display: flex; justify-content: flex-start; align-items: flex-start;}
  .hp-news-list-full .news-list a.news-box:last-child { border-bottom: 0;}
  .hp-news-list-full .news-list a.news-box .date { width: 160px; color: #333; font-size: 1.4rem; font-weight: 500;}
  .hp-news-list-full .news-list a.news-box .title { width: calc(100% - 160px - 20px); color: #333; font-size: 1.4rem;}
  .hp-news-list-full .news-list a.news-box .icon { width: 20px; color: #333; font-size: 1.2rem; text-align: right;}
  .hp-news-list-full .news-list a.news-box:hover .date, 
  .hp-news-list-full .news-list a.news-box:hover .title, 
  .hp-news-list-full .news-list a.news-box:hover .icon { color: #ff6700;}


  /************ section#hp-3different ************/

  section#hp-3different { clear: both; width: 100%; padding: 0 0 110px 0; background-image: url("../images/hp_3different_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top;}

  .hp-3different-learning { width: 100%; position: relative; display: flex; justify-content: center; flex-wrap: wrap; overflow: hidden;}
  .hp-3different-learning img.learning-bg { width: 100%; min-width: 1920px; height: auto; position: relative; z-index: 1;}
  .hp-3different-learning .learning-check-box { width: 940px; margin: 0 auto; border: 2px #00bf9f solid; border-radius: 30px; background-color: #fff; box-sizing: border-box; overflow: hidden; -moz-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); -webkit-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); position: absolute; top: 60px; left: calc(50% - 470px); z-index: 2; display: block;}
  
  .hp-3different-learning .learning-check-box .column-top { width: 100%; padding: 35px 0; background-color: #3eccb1; position: relative;}
  .hp-3different-learning .learning-check-box .column-top img.title { width: 224px; height: auto; margin: 0 auto;}
  .hp-3different-learning .learning-check-box .column-top .text { width: 100%; padding: 20px 0 0 0; color: #fff; font-size: 2.4rem; font-weight: 600; text-align: center;}
  .hp-3different-learning .learning-check-box .column-top img.illu-1 { width: 114px; height: auto; position: absolute; top: 40px; right: 30px; z-index: 2;}  
  
  .hp-3different-learning .learning-check-box .column-bottom { width: 100%; padding: 30px 60px 40px 100px; box-sizing: border-box; position: relative;}
  .hp-3different-learning .learning-check-box .column-bottom ul.learning { width: 100%; padding: 0; margin: 0; list-style: none; display: block; position: relative; z-index: 2;}
  .hp-3different-learning .learning-check-box .column-bottom ul.learning li { width: 100%; padding: 25px 0; margin: 0; color: #333; font-size: 1.6rem; font-weight: 500; display: flex; justify-content: flex-start;}
  .hp-3different-learning .learning-check-box .column-bottom ul.learning li input[type=checkbox] { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;}
  .hp-3different-learning .learning-check-box .column-bottom ul.learning li .checkmark { position: absolute; top: 0; left: 0; height: 33px; width: 33px; background-color: #fff; border-radius: 50%; border: 2px #ff6700 solid;}
  .hp-3different-learning .learning-check-box .column-bottom ul.learning li .container:hover input ~ .checkmark { background-color: #ff6700;}
  .hp-3different-learning .learning-check-box .column-bottom ul.learning li .container input:checked ~ .checkmark { background-color: #ff6700;}
  .hp-3different-learning .learning-check-box .column-bottom ul.learning li .checkmark:after { content: ""; position: absolute; display: none;}
  .hp-3different-learning .learning-check-box .column-bottom ul.learning li .container input:checked ~ .checkmark:after { display: block;}
  .hp-3different-learning .learning-check-box .column-bottom ul.learning li .container .checkmark:after { left: 11px; top: 5px; width: 8px; height: 16px; border: solid white; border-width: 0 3px 3px 0; transform: rotate(45deg);}
  .hp-3different-learning .learning-check-box .column-bottom ul.learning li .container { display: block; position: relative; padding-left: 35px; cursor: pointer; font-size: 16px; user-select: none;}
  .hp-3different-learning .learning-check-box .column-bottom ul.learning li .space-pc { width: 20px; display: block;}
  .hp-3different-learning .learning-check-box .column-bottom img.illu-2 { width: 120px; height: auto; position: absolute; bottom: 40px; left: 30px; z-index: 1;}

  .hp-3different-learning .intro-text { clear: both; width: 100%; padding: 75px 0 0 0; color: #333; font-size: 1.6rem; text-align: center;}

  img.hp-3different-hr-line { clear: both; width: 123px; height: auto; margin: 50px auto;}

  .hp-3different-method { clear: both; width: 100%; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .hp-3different-method .intro-text { width: 100%; padding: 0 0 40px 0; color: #333; font-size: 2.4rem; font-weight: 500; text-align: center;}
  .hp-3different-method .intro-text span.style-o { color: #ff6700;}
  .hp-3different-method .method-box { width: 290px; margin: 0 15px;}
  .hp-3different-method .method-box .num { width: 100%; color: rgba(176,176,176,0.3); font-size: 2.4rem; font-weight: 600;}
  .hp-3different-method .method-box img.pic-illu { width: 100%; height: auto;}
  .hp-3different-method .method-box .title { width: 100%; padding: 35px 0 15px 0; color: #00bf9f; font-size: 1.4rem; font-weight: 600;}
  .hp-3different-method .method-box .intro { width: 100%; color: #333; font: 0.8rem; line-height: 1.2em;}

  .hp-3different-method .read-more-bt { clear: both; width: 100%; margin: 70px 0 0 0;}
  .hp-3different-method .read-more-bt a { width: 412px; padding: 15px 0; margin: 0 auto; color: #00bf9f; font-size: 1.2rem; font-weight: 500; text-align: center; text-decoration: none; border: 1px #00bf9f solid; border-radius: 30px; box-sizing: border-box; display: block; position: relative;}
  .hp-3different-method .read-more-bt a .arrow { width: 100%; height: 100%; padding: 0 30px 0 0; box-sizing: border-box; color: #00bf9f; font-size: 1rem; display: flex; justify-content: flex-end; align-items: center; position: absolute; top: 0; left: 0; z-index: 1;}
  .hp-3different-method .read-more-bt a:hover { color: #fff; background-color: #00bf9f;}
  .hp-3different-method .read-more-bt a:hover .arrow { color: #fff;}


  /************ section#hp-learning ************/

  section#hp-learning { clear: both; width: 100%; padding: 50px 0 140px 0; background-image: url("../images/hp_learning_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: right top;}

  .hp-learning-title { width: 100%; color: #333; font-size: 2.4rem; font-weight: 500; text-align: center;}

  .hp-learning-what { clear: both; width: 94%; margin: 70px auto 0 auto; display: flex; justify-content: center; align-items: stretch;}
  .hp-learning-what .learning-box { width: calc(100% / 3 - 30px); margin: 0 15px; border-radius: 30px; overflow: hidden;}
  .hp-learning-what .learning-box.bg-y { background-color: #ffc000;}
  .hp-learning-what .learning-box.bg-g { background-color: #00bf9f;}
  .hp-learning-what .learning-box.bg-o { background-color: #ff6700;}
  .hp-learning-what .learning-box .photo { width: 100%; height: 185px; display: flex; align-items: center; overflow: hidden;}
  .hp-learning-what .learning-box .photo img { width: 100%; height: auto;}
  .hp-learning-what .learning-box .title { width: 100%; padding: 25px 35px 15px 35px; color: #fff; font-size: 2rem; font-weight: 500; letter-spacing: 0.1em; box-sizing: border-box;}
  .hp-learning-what .learning-box .intro { width: 100%; padding: 0 0 20px 35px; color: #fff; font-size: 1.2rem; line-height: 2em; box-sizing: border-box;}


  /************ section#hp-listen ************/

  section#hp-listen { clear: both; width: 100%; position: relative; overflow: hidden;}

  img.hp-listen-photo-bg { width: 140%; height: auto; margin: 0 0 0 -20%; position: relative; z-index: 1;}

  .hp-listen-massage { width: 100%; padding: 0 0 6vw 0; margin: -20vw 0 0 0; position: relative; z-index: 2;}
  .hp-listen-massage .title { width: 100%; padding: 0 0 5vw 0; color: #fff; font-size: 4vw; font-weight: 500; text-align: center;}
  .hp-listen-massage .listen-massage-box { /*width: 830px;*/width: 50vw; padding: 0 0 2vw 0;}
  .hp-listen-massage .listen-massage-box .box-full { width: calc(100% - 2vw); padding: 3vw 6vw; margin: 0 1vw; border-radius: 26vw; background-color: rgba(255,255,255,0.9); box-sizing: border-box; -moz-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); -webkit-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); display: flex; justify-content: flex-start; align-items: flex-start;}
  .hp-listen-massage .listen-massage-box .box-full .photo { /*width: 260px;*/width: 16vw; height: 16vw; display: flex; justify-content: center; overflow: hidden;}
  .hp-listen-massage .listen-massage-box .box-full .photo img { width: auto; height: 100%;}
  .hp-listen-massage .listen-massage-box .box-full .intro-text { width: calc(100% - 16vw); padding: 2vw 0 0 2vw; box-sizing: border-box;}
  .hp-listen-massage .listen-massage-box .box-full .intro-text .title { clear: both; padding: 0; width: 100%; color: #fff; font-size: 1.6vw; text-align: left;}
  .hp-listen-massage .listen-massage-box .box-full .intro-text .title span { padding: 0.2vw 0.5vw; background-color: #ff6700;}
  .hp-listen-massage .listen-massage-box .box-full .intro-text .intro { clear: both; padding: 2vw 0 0 0; width: 100%; color: #333; font-size: 1.6vw;}

  img.hp-listen-arrow-prev { /*width: 80px;*/width: 5vw; height: auto; position: absolute; top: 20vw; left: 13.5vw; z-index: 9; cursor: pointer;}
  img.hp-listen-arrow-next { /*width: 80px;*/width: 5vw; height: auto; position: absolute; top: 20vw; right: 13.5vw; z-index: 9; cursor: pointer;}


  /************ section#hp-kids-video ************/

  section#hp-kids-video { clear: both; width: 100%; padding: 80px calc(50% - 460px) 130px calc(50% - 460px); background-image: url("../images/hp-kids-video_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: right top; display: flex; justify-content: center; align-items: flex-start; box-sizing: border-box;}

  .hp-kids-intro { width: 175px; display: flex; justify-content: flex-start; align-items: flex-start;}
  .hp-kids-intro .style-v { padding: 0 20px 0 0; color: #333; font-size: 2.4rem; font-weight: 500; line-height: 1.2em; letter-spacing: 0.1em; -webkit-writing-mode: vertical-lr; writing-mode: vertical-lr;}
  .hp-kids-intro .style-v span { border-left: 5px #ff6700 solid;}

  .hp-kids-video { width: calc(100% - 175px); border-radius: 0 80px 80px 80px; overflow: hidden;}


  /************ section#hp-appointment ************/

  section#hp-appointment { clear: both; width: 100%; padding: 60px 0 90px 0; background-image: url("../images/hp-appointment_bg.jpg"); background-repeat: no-repeat; background-size: 140% auto; background-position: center bottom;}

  .hp-appointment-con { width: 940px; margin: 0 auto; border-radius: 0 0 60px 60px; background-color: #fff; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap; -moz-box-shadow:4px 4px 12px 2px rgba(20%,20%,40%,0.5); -webkit-box-shadow:4px 4px 12px 2px rgba(20%,20%,40%,0.5); box-shadow:4px 4px 12px 2px rgba(20%,20%,40%,0.5); overflow: hidden;}
  
  .hp-appointment-con .appointment-info { width: calc(100% - 480px); padding: 30px; box-sizing: border-box;}
  .hp-appointment-con .appointment-info .title { width: 100%; color: #333; font-size: 2.4rem; font-weight: 500;}
  .hp-appointment-con .appointment-info .text { width: 100%; padding: 50px 0 90px 0; color: #333; font-size: 1.1rem; line-height: 1.3em;}
  .hp-appointment-con .appointment-info .mail-box { display: none;}
  .hp-appointment-con .appointment-info .mail-box img.mail-icon { display: none;}
  .hp-appointment-con .appointment-info .mail-box a.appointment-bt { display: none;}
  .hp-appointment-con .mail-box-mo { width: 100%; height: 240px; padding: 50px 0 0 0; position: relative;}
  .hp-appointment-con .mail-box-mo img.mail-icon-mo { width: 142px; height: auto; margin: 0 auto; position: relative; z-index: 1;}
  .hp-appointment-con .mail-box-mo a.appointment-bt-mo { width: 460px; padding: 20px 0; margin: -20px auto 0 auto; color: #fff; font-size: 2rem; text-align: center; text-decoration: none; border-radius: 50px; background-color: #ff6700; display: block; position: relative; z-index: 2;}
  .hp-appointment-con .mail-box-mo a.appointment-bt-mo span.mouseoff { display: block;}
  .hp-appointment-con .mail-box-mo a.appointment-bt-mo span.mouseon { display: none;}
  .hp-appointment-con .mail-box-mo a.appointment-bt-mo:hover { margin: 10px auto 0 auto; color: #ff6700; border: 5px #ff6700 solid; background-color: #fff; box-sizing: border-box;}
  .hp-appointment-con .mail-box-mo a.appointment-bt-mo:hover span.mouseoff { display: none;}
  .hp-appointment-con .mail-box-mo a.appointment-bt-mo:hover span.mouseon { display: block;}
  
  .hp-appointment-con .map-pic { width: 480px; height: 460px; display: flex; justify-content: center; align-items: center; overflow: hidden;}
  .hp-appointment-con .map-pic img { width: auto; height: 100%;}


  /************ page-banner ************/

  .page-banner-box { clear: both; width: 100%; overflow: hidden;}

  .page-banner-box img { width: 120%; height: auto; margin: 0 0 0 -10%;}


  /************ section#page-about ************/

  section#page-about-1 { clear: both; width: 100%; padding: 80px calc(50% - 480px) 100px calc(50% - 480px); box-sizing: border-box; background-image: url("../images/page_about_1_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center top;}

  .page-about-title-2 { width: 100%; padding: 30px 0 0 0; color: #333; font-size: 2.2rem; font-weight: 500; text-align: center;}

  .page-about-1-con { clear: both; width: 100%; margin: 80px 0 0 0; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-about-1-con .col-pic { width: 450px;}
  .page-about-1-con .col-pic img { width: 100%; height: auto;}
  .page-about-1-con .col-text { width: calc(100% - 450px); padding: 0 0 0 40px; color: #333; font-size: 1.4rem; font-weight: 500; line-height: 1.8em; box-sizing: border-box;}


  section#page-about-2 { clear: both; width: 100%; padding: 100px calc(50% - 480px) 120px calc(50% - 480px); box-sizing: border-box; background-image: url("../images/page_about_2_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center top;}

  .page-about-2-con { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-about-2-con .col-text { width: calc(100% - 480px); padding: 20px 20px 0 0; box-sizing: border-box;}
  .page-about-2-con .col-text .title-box { width: 100%; padding: 5px 0 5px 20px; color: #333; font-size: 2.2rem; font-weight: 600; line-height: 1em; border-left: 5px #ff6700 solid; box-sizing: border-box;}
  .page-about-2-con .col-text .text-con { width: 100%; padding: 45px 0 0 20px; color: #333; font-size: 1.4rem; font-weight: 500; line-height: 1.8em; box-sizing: border-box;}
  .page-about-2-con .col-illu { width: 480px;}
  .page-about-2-con .col-illu img { width: 100%; height: auto;}


  section#page-about-3 { clear: both; width: 100%; position: relative; overflow: hidden;}

  img.page-about-3-bg { width: 140%; height: auto; margin: 0 0 0 -20%; position: relative; z-index: 1;}

  .page-about-3-text { width: 100%; padding: 0 5vw 0 0; color: #fff; font-size: 2.6vw; font-weight: 500; text-align: right; letter-spacing: 0.1em; box-sizing: border-box; position: absolute; top: 8vw; left: 0; z-index: 2;}


  section#page-about-4 { clear: both; width: 100%; padding: 100px calc(50% - 480px) 70px calc(50% - 480px); box-sizing: border-box; background-image: url("../images/page_about_4_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center top;}

  .page-about-4-intro { clear: both; width: 100%; padding: 0 0 20px 0; margin: 80px 0 0 0; color: #333; font-size: 1.4rem; line-height: 1.6em; text-align: center;}

  .page-about-4-slogan { clear: both; width: 100%; padding: 20px 0 75px 0; color: #333; font-size: 2rem; font-weight: 600; text-align: center;}

  .page-about-4-target { clear: both; width: 100%; display: flex; justify-content: center; align-items: flex-start;}
  .page-about-4-target .column-box { width: calc(100% / 3 - 40px); margin: 0 20px;}
  .page-about-4-target .column-box .pic { width: 100%;}
  .page-about-4-target .column-box .pic img { width: 100%; height: auto;}
  .page-about-4-target .column-box .text { width: 100%; padding: 25px 0; color: #333; font-size: 1.4rem; font-weight: 500; text-align: center;}


  section#page-about-5 { clear: both; width: 100%; position: relative; overflow: hidden;}
  
  img.page-about-5-noreplace-bg { width: 140%; height: auto; margin: 0 0 0 -20%; position: relative; z-index: 1;}

  .page-about-5-noreplace-text { width: 100%; height: 100%; color: #333; font-size: 2.6vw; font-weight: 500; display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; z-index: 2;}


  section#page-about-6 { clear: both; width: 100%; padding: 110px calc(50% - 480px) 70px calc(50% - 480px); box-sizing: border-box;}

  .page-about-6-contact { width: 100%; display: flex; justify-content: flex-start; align-items: center;}
  .page-about-6-contact .contact-title { width: calc(380px - 50px); padding: 5px 0 5px 20px; margin: 0 0 0 50px; color: #333; font-size: 2.2rem; font-weight: 600; line-height: 1em; border-left: 5px #ff6700 solid; box-sizing: border-box;}
  .page-about-6-contact .contact-method { width: calc(100% - 380px); display: flex; justify-content: flex-start; align-items: stretch;}
  .page-about-6-contact .contact-method .column-box { width: calc(100% / 2 - 30px); padding: 40px 20px 20px 20px; margin: 0 30px 0 0; border: 8px #ffc000 solid; border-radius: 20px; box-sizing: border-box; cursor: pointer;}
  .page-about-6-contact .contact-method .column-box a { color: #333; text-decoration: none;}
  .page-about-6-contact .contact-method .column-box a .icon { width: 100%;}
  .page-about-6-contact .contact-method .column-box a .icon img.icon { width: 120px; height: auto; margin: 0 auto; display: block;}
  .page-about-6-contact .contact-method .column-box a .icon img.icon-over { display: none;}
  .page-about-6-contact .contact-method .column-box a:hover .icon img.icon { display: none;}
  .page-about-6-contact .contact-method .column-box a:hover .icon img.icon-over { width: 120px; height: auto; margin: 0 auto; display: block;}
  .page-about-6-contact .contact-method .column-box a .text-1 { width: 100%; padding: 35px 0 0 0; color: #333; font-size: 1.6rem; font-weight: 500; line-height: 1.2em; text-align: center;}
  .page-about-6-contact .contact-method .column-box a .text-2 { width: 100%; padding: 20px 0 0 0; color: #333; font-size: 1.6rem; font-weight: 500; line-height: 1.2em; text-align: center;}
  .page-about-6-contact .contact-method .column-box a .text-1 span.orange, 
  .page-about-6-contact .contact-method .column-box a .text-2 span.orange { color: #ff6700;}

  .page-about-6-contact-map { clear: both; width: 100%; margin: 75px 0 0 0;}
  .page-about-6-contact-map img { width: 100%; height: auto;}


  /************ section#page-course ************/

  section#page-course-1 { clear: both; width: 100%; padding: 150px calc(50% - 480px); box-sizing: border-box; background-image: url("../images/page_course_1_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center center;}

  .page-course-1-text { width: 100%; font-size: 1.8rem; line-height: 1.8em; text-align: center;}


  section#page-course-2 { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: stretch;}

  .page-course-2-column { width: calc(100% / 3); position: relative;}
  .page-course-2-column img.pic-bg { width: 100%; height: auto; position: relative; z-index: 1;}
  .page-course-2-column .course-text { width: 100%; height: 100%; color: #fff; font-size: 3vw; font-weight: 500; display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; z-index: 2;}


  section#page-course-3 { clear: both; width: 100%; padding: 140px 0 80px 0; box-sizing: border-box; background-image: url("../images/page_course_3_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center top;}

  .page-course-3-target { width: 100%; position: relative;}
  .page-course-3-target .course-slider { padding: 0 10vw; box-sizing: border-box;}
  
  .page-course-3-target .course-target-box-y { width: 70vw; padding: 2.5vw 0; margin: 0 auto; border: 10px #ffc000 solid; border-radius: 30px; background-color: #fff; position: relative;}
  .page-course-3-target .course-target-box-y .target-title { width: 16.5vw; padding: 2vw 0; color: #fff; font-size: 2.4vw; font-weight: 600; border-radius: 0 0 30px 0; background-color: #ffc000; display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; z-index: 2;}
  .page-course-3-target .course-target-box-y .sub-title { width: 25vw; padding: 0 0 1vw 0; margin: 0 auto; color: #333; font-size: 2vw; font-weight: 500; line-height: 1em; text-align: center; border-bottom: 5px #ffc000 solid;}
  .page-course-3-target .course-target-box-y .target-full .column-box .dot-y { width: 1.2vw; height: 1.2vw; margin: 0 auto; border: 0.3vw #ffc000 solid; border-radius: 100%; background-color: #fff; box-sizing: border-box; display: block;}
  
  .page-course-3-target .course-target-box-y .sub-intro, 
  .page-course-3-target .course-target-box-g .sub-intro, 
  .page-course-3-target .course-target-box-o .sub-intro { width: 100%; padding: 1.5vw 0 0 0; margin: 0 auto; color: #774418; font-size: 1.2vw; text-align: center;}
  .page-course-3-target .course-target-box-y .target-full, 
  .page-course-3-target .course-target-box-g .target-full, 
  .page-course-3-target .course-target-box-o .target-full { width: 100%; padding: 0 1.5vw; margin: 2vw 0 0 0; display: flex; justify-content: center; align-items: stretch; box-sizing: border-box;}
  .page-course-3-target .course-target-box-y .target-full .column-box, 
  .page-course-3-target .course-target-box-g .target-full .column-box, 
  .page-course-3-target .course-target-box-o .target-full .column-box { width: calc(100% / 4 - 2vw); margin: 0 1vw; position: relative;}
  .page-course-3-target .course-target-box-y .target-full .column-box .text, 
  .page-course-3-target .course-target-box-g .target-full .column-box .text, 
  .page-course-3-target .course-target-box-o .target-full .column-box .text { width: 100%; padding: 0.5vw 0 0 0; color: #333; font-size: 1.4vw; font-weight: 500; line-height: 1em; text-align: center; position: absolute; top: 1.5vw; left: 0; z-index: 2;}
  .page-course-3-target .course-target-box-y .target-full .column-box .illu-box, 
  .page-course-3-target .course-target-box-g .target-full .column-box .illu-box, 
  .page-course-3-target .course-target-box-o .target-full .column-box .illu-box { width: 100%; margin: 1.5vw 0 0 0; padding: 2vw 0; border-radius: 30px; background-color: #fdfce5; position: relative; z-index: 1;}
  .page-course-3-target .course-target-box-y .target-full .column-box .illu-box img, 
  .page-course-3-target .course-target-box-g .target-full .column-box .illu-box img, 
  .page-course-3-target .course-target-box-o .target-full .column-box .illu-box img { width: 10vw; height: auto; margin: 0 auto;}
  .page-course-3-target .course-target-box-y .target-full .column-box .intro, 
  .page-course-3-target .course-target-box-g .target-full .column-box .intro, 
  .page-course-3-target .course-target-box-o .target-full .column-box .intro { width: 100%; padding: 1.5vw 1vw; color: #333; font-size: 0.9vw; line-height: 1.4em; box-sizing: border-box;}
  
  .page-course-3-target .course-target-box-g { width: 70vw; padding: 2.5vw 0; margin: 0 auto; border: 10px #00bf9f solid; border-radius: 30px; background-color: #fff; position: relative;}
  .page-course-3-target .course-target-box-g .target-title { width: 16.5vw; padding: 2vw 0; color: #fff; font-size: 2.4vw; font-weight: 600; border-radius: 0 0 30px 0; background-color: #00bf9f; display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; z-index: 2;}
  .page-course-3-target .course-target-box-g .sub-title { width: 25vw; padding: 0 0 1vw 0; margin: 0 auto; color: #333; font-size: 2vw; font-weight: 500; line-height: 1em; text-align: center; border-bottom: 5px #00bf9f solid;}
  .page-course-3-target .course-target-box-g .target-full .column-box .dot-g { width: 1.2vw; height: 1.2vw; margin: 0 auto; border: 0.3vw #00bf9f solid; border-radius: 100%; background-color: #fff; box-sizing: border-box; display: block;}
  
  .page-course-3-target .course-target-box-o { width: 70vw; padding: 2.5vw 0; margin: 0 auto; border: 10px #ff6700 solid; border-radius: 30px; background-color: #fff; position: relative;}
  .page-course-3-target .course-target-box-o .target-title { width: 16.5vw; padding: 2vw 0; color: #fff; font-size: 2.4vw; font-weight: 600; border-radius: 0 0 30px 0; background-color: #ff6700; display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; z-index: 2;}
  .page-course-3-target .course-target-box-o .sub-title { width: 25vw; padding: 0 0 1vw 0; margin: 0 auto; color: #333; font-size: 2vw; font-weight: 500; line-height: 1em; text-align: center; border-bottom: 5px #ff6700 solid;}
  .page-course-3-target .course-target-box-o .target-full .column-box .dot-o { width: 1.2vw; height: 1.2vw; margin: 0 auto; border: 0.3vw #ff6700 solid; border-radius: 100%; background-color: #fff; box-sizing: border-box; display: block;}

  img.page-course-3-arrow-prev { /*width: 80px;*/width: 4vw; height: auto; position: absolute; top: 17vw; left: 12vw; z-index: 99; cursor: pointer;}
  img.page-course-3-arrow-next { /*width: 80px;*/width: 4vw; height: auto; position: absolute; top: 17vw; right: 12vw; z-index: 99; cursor: pointer;}

  .page-course-3-intro { clear: both; width: 70vw; margin: 6vw auto 0 auto; position: relative;}
  .page-course-3-intro .course-intro-box { width: 100%; height: 100%; padding: 0 4.5vw 0.7vw 2vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center; position: absolute; top: 0; left: 0; z-index: 2;}
  .page-course-3-intro .course-intro-box img.logo { width: 10vw; height: auto;}
  .page-course-3-intro .course-intro-box .text-mo { display: none;}
  .page-course-3-intro .course-intro-box .text-pc { width: calc(100% - 10vw); padding: 0 0 0 2vw; color: #333; font-size: 1.4vw; font-weight: 500; line-height: 2.2em; box-sizing: border-box;}
  
  img.page-course-3-intro-bg-mo { display: none;}
  img.page-course-3-intro-bg { width: 100%; height: auto; position: relative; z-index: 1;}


  /************ section#page-news ************/

  section#page-news { clear: both; width: 100%; padding: 0 calc(50% - 480px) 120px calc(50% - 480px); box-sizing: border-box; background-color: #fdfce5;}

  .page-news-list-full { width: 100%;}
  .page-news-list-full .title-more { width: 100%; padding: 50px 0; box-sizing: border-box;}
  .page-news-list-full .title-more .title-box { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-news-list-full .title-more .title-box img.icon { width: 53px; height: auto; margin: 0 15px 0 0;}
  .page-news-list-full .title-more .title-box .title { width: calc(100% - 53px - 15px);}
  .page-news-list-full .title-more .title-box .title span.style-b { color: #774418; font-size: 2.6rem; line-height: 2rem; font-weight: 600;}
  .page-news-list-full .title-more .title-box .title span.style-s { padding: 20px 0 0 0; color: #808080; font-size: 1.6rem; letter-spacing: 0.1em; display: block;}

  .page-news-list-full .news-list { width: 100%;}
  .page-news-list-full .news-list .box { width: 100%;}
  .page-news-list-full .news-list a.news-box { width: 100%; padding: 20px 0; text-decoration: none; border-bottom: 1px #c9c9c9 solid; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-news-list-full .news-list a.news-box:last-child { border-bottom: 0;}
  .page-news-list-full .news-list a.news-box .date { width: 200px; color: #333; font-size: 1.4rem; font-weight: 500;}
  .page-news-list-full .news-list a.news-box .title { width: calc(100% - 200px - 20px); color: #333; font-size: 1.4rem;}
  .page-news-list-full .news-list a.news-box .icon { width: 20px; color: #333; font-size: 1.2rem; text-align: right;}
  .page-news-list-full .news-list a.news-box:hover .date, 
  .page-news-list-full .news-list a.news-box:hover .title, 
  .page-news-list-full .news-list a.news-box:hover .icon { color: #ff6700;}

  ul.page-num { clear: both; width: 100%; padding: 0; margin: 40px 0 0 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  ul.page-num li { padding: 0 5px 10px 5px; margin: 0;}
  ul.page-num li a { padding: 5px 10px; color: #ff6700; font-size: 1rem; text-decoration: none; border: 1px #ff6700 solid; background-color: #fff; display: block;}
  ul.page-num li a:hover { color: #fff; background-color: #ff6700;}
  ul.page-num li a.sel { color: #fff; background-color: #ff6700;}


  .news-content { clear: both; width: 100%;}
  .news-content .news-title { width: 100%; padding: 0 0 20px 0;}
  .news-content .news-title .date { width: 100%; color: #333; font-size: 1.1rem; text-align: right;}
  .news-content .news-title .title { width: 100%; color: #333; font-size: 1.8rem; font-weight: 500; line-height: 1.2em;}
  .news-content .content { clear: both; width: 100%; padding: 40px 0; color: #333; font-size: 1.2rem; line-height: 1.8em; border-bottom: 1px #ff6700 solid; border-top: 1px #ff6700 solid;}
  .news-content .content a { color: #ff6700; border-bottom: 1px #ff6700 dashed;}
  .news-content .content img { max-width: 100%; height: auto;}

  .goback-bt { clear: both; width: 100%; padding: 60px 0 0 0;}
  .goback-bt a { width: 160px; padding: 10px 0; margin: 0 auto; color: #fff; font-size: 1.1rem; text-align: center; text-decoration: none; border-radius: 30px; border: 1px #ff6700 solid; background-color: #ff6700; display: block;}
  .goback-bt a:hover { color: #ff6700; background-color: #fff;}


  /************ section#page-appointment ************/

  section#page-appointment { clear: both; width: 100%; padding: 60px calc(50% - 480px) 90px calc(50% - 480px); box-sizing: border-box; background-image: url("../images/hp_3different_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: center top;}

  .page-appointment-title { width: 220px; margin: 0 auto; color: #ff6700; font-size: 3.2rem; font-weight: 500; text-align: center; border-bottom: 5px #ff6700 solid;}

  .page-appointment-form { clear: both; width: 100%; margin: 60px 0 0 0; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-appointment-form .column-helf { width: 50%; padding: 0 20px; box-sizing: border-box;}
  .page-appointment-form .column-helf .caption { width: 100%; color: #333; font-size: 1.2rem; font-weight: 500;}
  .page-appointment-form .column-helf input[type=text], 
  .page-appointment-form .column-helf input[type=tel] { width: 100%; padding: 10px; margin: 10px 0 30px 0; color: #333; font-size: 1.2rem; border: 0; border-bottom: 2px #ff6700 solid; background-color: transparent; box-sizing: border-box;}
  .page-appointment-form textarea { width: calc(100% - 40px); height: 200px; padding: 10px; margin: 10px auto 30px auto; color: #333; font-size: 1.2rem; border: 0; border: 2px #ff6700 solid; background-color: #fff; box-sizing: border-box;}
  .page-appointment-form .submit-bt { width: 100%; margin: 20px 0 0 0; text-align: center;}
  .page-appointment-form .submit-bt input[type=submit], 
  .page-appointment-form .submit-bt input[type=button] { width: 160px; padding: 10px 0; color: #fff; font-size: 1.2rem; border: 2px #ff6700 solid; border-radius: 30px; background-color: #ff6700; box-sizing: border-box; cursor: pointer;}
  .page-appointment-form .submit-bt input[type=submit]:hover, 
  .page-appointment-form .submit-bt input[type=button]:hover { color: #ff6700; border: 2px #ff6700 solid; background-color: #fff;}

  .page-appointment-contact { clear: both; width: 100%; padding: 40px 0 0 0; margin: 60px 0 0 0; color: #333; font-size: 1.2rem; line-height: 2em; border-top: 1px #ff6700 solid;}
  .page-appointment-contact span.title { font-size: 1.6rem; font-weight: 500;}


  /************ footer ************/

  footer { clear: both; width: 100%; padding: 50px calc(50% - 480px); box-sizing: border-box; background-color: #774418;}

  ul.footer-nav { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: center;}
  ul.footer-nav li { padding: 0 60px; margin: 0;}
  ul.footer-nav li a { color: #fff; font-size: 1.1rem; text-decoration: none;}
  ul.footer-nav li a:hover { border-bottom: 2px #fff solid;}

  .footer-info-full { clear: both; width: 100%; margin: 70px 0 0 0;}
  .footer-info-full img.footer-logo { width: 300px; height: auto; margin: 0 auto;}
  .footer-info-full .add-info { width: 100%; margin: 30px 0 0 0; color: #fff; font-size: 1.4rem; line-height: 1.2em; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  .footer-info-full .add-info div.col-1 { width: 40%; padding: 0 20px 0 0; margin: 0 0 20px 0; display: flex; justify-content: flex-end; align-items: center; box-sizing: border-box;}
  .footer-info-full .add-info div.col-2 { width: 60%; margin: 0 0 20px 0; display: flex; justify-content: flex-start; align-items: center;}
  .footer-info-full .add-info div.col-3 { width: 58%; padding: 0 20px 0 0; display: flex; justify-content: flex-end; align-items: center; box-sizing: border-box;}
  .footer-info-full .add-info div.col-4 { width: 42%; display: flex; justify-content: flex-start; align-items: center;}
  .footer-info-full .add-info div img.info-icon { width: 25px; height: auto; margin: 0 10px 0 0;}

  .copyright { clear: both; width: 100%; margin: 70px 0 0 0; color: #fff; font-size: 0.9rem; text-align: center;}

}

@media screen and (min-width: 768px) and (max-width: 1024px) {

  /************ header + nav ************/

  header { width: 100%; height: 100px; padding: 0 40px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center; position: relative;}

  .header-logo { width: 240px;}
  .header-logo img { /*width: 300px;*/width: 100%; height: auto;}

  nav#pc { display: none;}
  nav#mo { width: calc(100% - 240px);}
  nav#mo .nav-icon { width: 50px; color: #333; font-size: 2.4rem; text-align: right; cursor: pointer; float: right;}
  nav#mo ul.nav-menu { width: 100%; padding: 40px; margin: 0; box-sizing: border-box; background-color: #ff6700; list-style: none; display: none; position: absolute; top: 100px; left: 0; z-index: 999;}
  nav#mo ul.nav-menu li { width: 100%; padding: 0; margin: 0; border-bottom: 1px rgba(255,255,255,0.6) solid;}
  nav#mo ul.nav-menu li:last-child { border-bottom: 0;}
  nav#mo ul.nav-menu li a { width: 100%; padding: 20px 0; color: #fff; font-size: 1.2rem; font-weight: 500; text-align: center; text-decoration: none; display: block;}
  nav#mo ul.nav-menu li a.contact { width: 147px; padding: 10px 0; margin: 20px auto; color: #ff6700; font-size: 1.2rem; font-weight: 500; text-decoration: none; border-radius: 26px; background-color: #fff; display: flex; justify-content: center; align-items: center;}
  nav#mo ul.nav-menu li a.contact img.icon-o { width: 25px; height: auto; margin: 0 10px 0 0;}
  nav#mo ul.nav-menu li a.contact img.icon-w { display: none;}


  /************ hp-banner ************/

  .hp-banner-box { clear: both; width: 100%; padding: 0 3.8vw; box-sizing: border-box;}

  .hp-banner-box img { width: 100%; height: auto;}


  /************ section#hp-about ************/

  section#hp-about { clear: both; width: 100%; padding: 50px 40px 90px 40px; box-sizing: border-box;}

  .hp-about-title { width: 110px; margin: 0 auto; color: #ff6700; font-size: 3rem; font-weight: 500; text-align: center; border-bottom: 5px #ff6700 solid;}
  .hp-about-title-2 { width: 100%; padding: 20px 0 0 0; color: #333; font-size: 2.4rem; font-weight: 600; text-align: center;}
  .hp-about-intro { width: 100%; padding: 60px 0 0 0; color: #333; font-size: 1.5rem; line-height: 1.6em; text-align: center;}


  /************ section#hp-news ************/

  section#hp-news { clear: both; width: 100%; padding: 0 40px 120px 40px; box-sizing: border-box;}

  .hp-news-list-full { width: 100%; border-radius: 10px; background-color: #fdfce5;}
  
  .hp-news-list-full .title-more { width: 100%; padding: 30px; box-sizing: border-box;}
  .hp-news-list-full .title-more .title-box { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start;}
  .hp-news-list-full .title-more .title-box img.icon { width: 53px; height: auto; margin: 0 15px 0 0;}
  .hp-news-list-full .title-more .title-box .title { width: calc(100% - 53px - 15px);}
  .hp-news-list-full .title-more .title-box .title span.style-b { color: #774418; font-size: 2.6rem; line-height: 2rem; font-weight: 600;}
  .hp-news-list-full .title-more .title-box .title span.style-s { padding: 20px 0 0 0; color: #808080; font-size: 1.6rem; letter-spacing: 0.1em; display: block;}
  .hp-news-list-full .title-more .more-bt { width: 250px; margin: 40px 0 0 0;}
  .hp-news-list-full .title-more .more-bt a { width: 100%; padding: 10px 0; box-sizing: border-box; color: #333; font-size: 1.6rem; font-weight: 500; line-height: 1em; text-align: center; text-decoration: none; border-radius: 30px; background-color: #ffc000; display: block; position: relative;}
  .hp-news-list-full .title-more .more-bt a .arrow { width: 100%; height: 100%; padding: 0 10px 0 0; box-sizing: border-box; color: #333; font-size: 1rem; display: flex; justify-content: flex-end; align-items: center; position: absolute; top: 0; left: 0; z-index: 1;}
  .hp-news-list-full .title-more .more-bt a:hover, 
  .hp-news-list-full .title-more .more-bt a:hover .arrow { color: #fff;}

  .hp-news-list-full .news-list { clear: both; width: 100%; padding: 30px 20px; box-sizing: border-box;}
  .hp-news-list-full .news-list .box { width: 100%; max-height: 400px; padding: 0 20px 0 0; box-sizing: border-box; overflow-y: auto; scrollbar-color: #ffc000 #efefef; display: block;}
  .hp-news-list-full .news-list .box::-webkit-scrollbar { width: 5px;}
  .hp-news-list-full .news-list a.news-box { width: 100%; padding: 20px 0; text-decoration: none; border-bottom: 1px #c9c9c9 solid; display: flex; justify-content: flex-start; align-items: flex-start;}
  .hp-news-list-full .news-list a.news-box:last-child { border-bottom: 0;}
  .hp-news-list-full .news-list a.news-box .date { width: 160px; color: #333; font-size: 1.4rem; font-weight: 500;}
  .hp-news-list-full .news-list a.news-box .title { width: calc(100% - 160px - 20px); color: #333; font-size: 1.4rem;}
  .hp-news-list-full .news-list a.news-box .icon { width: 20px; color: #333; font-size: 1.2rem; text-align: right;}
  .hp-news-list-full .news-list a.news-box:hover .date, 
  .hp-news-list-full .news-list a.news-box:hover .title, 
  .hp-news-list-full .news-list a.news-box:hover .icon { color: #ff6700;}


  /************ section#hp-3different ************/

  section#hp-3different { clear: both; width: 100%; padding: 0 0 110px 0; box-sizing: border-box; background-image: url("../images/hp_3different_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top;}

  .hp-3different-learning { width: 100%; position: relative; overflow: hidden;}
  .hp-3different-learning img.learning-bg { width: 220%; height: auto; margin: 0 0 0 -60%; position: relative; z-index: 1;}
  .hp-3different-learning .learning-check-box { width: 700px; border: 2px #00bf9f solid; border-radius: 30px; background-color: #fff; box-sizing: border-box; overflow: hidden; -moz-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); -webkit-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); position: absolute; top: 60px; left: calc(50% - 350px); z-index: 2; display: block;}
  
  .hp-3different-learning .learning-check-box .column-top { width: 100%; padding: 35px 0; background-color: #3eccb1; position: relative;}
  .hp-3different-learning .learning-check-box .column-top img.title { width: 224px; height: auto; margin: 0 auto;}
  .hp-3different-learning .learning-check-box .column-top .text { width: 100%; padding: 20px 0 0 0; color: #fff; font-size: 2.4rem; font-weight: 600; text-align: center;}
  .hp-3different-learning .learning-check-box .column-top img.illu-1 { width: 100px; height: auto; position: absolute; top: 0; right: 30px; z-index: 2;}  
  
  .hp-3different-learning .learning-check-box .column-bottom { width: 100%; padding: 30px; box-sizing: border-box; position: relative;}
  .hp-3different-learning .learning-check-box .column-bottom ul.learning { width: 100%; padding: 0; margin: 0; list-style: none; display: block; position: relative; z-index: 2;}
  .hp-3different-learning .learning-check-box .column-bottom ul.learning li { width: 100%; padding: 15px 0; margin: 0; color: #333; font-size: 1.6rem; font-weight: 500; display: flex; justify-content: flex-start;}
  .hp-3different-learning .learning-check-box .column-bottom ul.learning li input[type=checkbox] { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;}
  .hp-3different-learning .learning-check-box .column-bottom ul.learning li .checkmark { position: absolute; top: 0; left: 0; height: 33px; width: 33px; background-color: #fff; border-radius: 50%; border: 2px #ff6700 solid;}
  .hp-3different-learning .learning-check-box .column-bottom ul.learning li .container:hover input ~ .checkmark { background-color: #ff6700;}
  .hp-3different-learning .learning-check-box .column-bottom ul.learning li .container input:checked ~ .checkmark { background-color: #ff6700;}
  .hp-3different-learning .learning-check-box .column-bottom ul.learning li .checkmark:after { content: ""; position: absolute; display: none;}
  .hp-3different-learning .learning-check-box .column-bottom ul.learning li .container input:checked ~ .checkmark:after { display: block;}
  .hp-3different-learning .learning-check-box .column-bottom ul.learning li .container .checkmark:after { left: 11px; top: 5px; width: 8px; height: 16px; border: solid white; border-width: 0 3px 3px 0; transform: rotate(45deg);}
  .hp-3different-learning .learning-check-box .column-bottom ul.learning li .container { display: block; position: relative; padding-left: 10px; cursor: pointer; font-size: 16px; user-select: none;}
  .hp-3different-learning .learning-check-box .column-bottom ul.learning li .space-pc { width: 40px; display: block;}
  .hp-3different-learning .learning-check-box .column-bottom img.illu-2 { display: none;}

  .hp-3different-learning .intro-text { clear: both; width: 100%; padding: 75px 0 0 0; color: #333; font-size: 1.6rem; text-align: center;}

  img.hp-3different-hr-line { clear: both; width: 123px; height: auto; margin: 50px auto;}

  .hp-3different-method { clear: both; width: 100%; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .hp-3different-method .intro-text { width: 100%; padding: 0 0 40px 0; color: #333; font-size: 2.4rem; font-weight: 500; text-align: center;}
  .hp-3different-method .intro-text span.style-o { color: #ff6700;}
  .hp-3different-method .method-box { width: 290px; margin: 0 15px;}
  .hp-3different-method .method-box .num { width: 100%; color: rgba(176,176,176,0.3); font-size: 2.4rem; font-weight: 600;}
  .hp-3different-method .method-box img.pic-illu { width: 100%; height: auto;}
  .hp-3different-method .method-box .title { width: 100%; padding: 35px 0 15px 0; color: #00bf9f; font-size: 1.4rem; font-weight: 600;}
  .hp-3different-method .method-box .intro { width: 100%; color: #333; font: 0.8rem; line-height: 1.2em;}

  .hp-3different-method .read-more-bt { clear: both; width: 100%; margin: 70px 0 0 0;}
  .hp-3different-method .read-more-bt a { width: 412px; padding: 15px 0; margin: 0 auto; color: #00bf9f; font-size: 1.2rem; font-weight: 500; text-align: center; text-decoration: none; border: 1px #00bf9f solid; border-radius: 30px; box-sizing: border-box; display: block; position: relative;}
  .hp-3different-method .read-more-bt a .arrow { width: 100%; height: 100%; padding: 0 30px 0 0; box-sizing: border-box; color: #00bf9f; font-size: 1rem; display: flex; justify-content: flex-end; align-items: center; position: absolute; top: 0; left: 0; z-index: 1;}
  .hp-3different-method .read-more-bt a:hover { color: #fff; background-color: #00bf9f;}
  .hp-3different-method .read-more-bt a:hover .arrow { color: #fff;}


  /************ section#hp-learning ************/

  section#hp-learning { clear: both; width: 100%; padding: 50px 0 110px 0; background-image: url("../images/hp_learning_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: right top;}

  .hp-learning-title { width: 100%; color: #333; font-size: 2.4rem; font-weight: 500; text-align: center;}

  .hp-learning-what { clear: both; width: 100%; margin: 70px 0 0 0;}
  .hp-learning-what .learning-box { width: 80%; margin: 0 auto 30px auto; border-radius: 30px; overflow: hidden;}
  .hp-learning-what .learning-box.bg-y { background-color: #ffc000;}
  .hp-learning-what .learning-box.bg-g { background-color: #00bf9f;}
  .hp-learning-what .learning-box.bg-o { background-color: #ff6700;}
  .hp-learning-what .learning-box .photo { width: 100%; height: 185px; display: flex; align-items: center; overflow: hidden;}
  .hp-learning-what .learning-box .photo img { width: 100%; height: auto;}
  .hp-learning-what .learning-box .title { width: 100%; padding: 25px 35px 15px 35px; color: #fff; font-size: 2rem; font-weight: 500; letter-spacing: 0.1em; box-sizing: border-box;}
  .hp-learning-what .learning-box .intro { width: 100%; padding: 0 0 20px 35px; color: #fff; font-size: 1.2rem; line-height: 2em; box-sizing: border-box;}


  /************ section#hp-listen ************/

  section#hp-listen { clear: both; width: 100%; position: relative; overflow: hidden;}

  img.hp-listen-photo-bg { width: 140%; height: auto; margin: 0 0 0 -20%; position: relative; z-index: 1;}

  .hp-listen-massage { width: 100%; padding: 0 0 6vw 0; margin: -20vw 0 0 0; position: relative; z-index: 2;}
  .hp-listen-massage .title { width: 100%; padding: 0 0 5vw 0; color: #fff; font-size: 4vw; font-weight: 500; text-align: center;}
  .hp-listen-massage .listen-massage-box { /*width: 830px;*/width: 50vw; padding: 0 0 2vw 0;}
  .hp-listen-massage .listen-massage-box .box-full { width: calc(100% - 2vw); padding: 3vw 6vw; margin: 0 1vw; border-radius: 26vw; background-color: rgba(255,255,255,0.9); box-sizing: border-box; -moz-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); -webkit-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); display: flex; justify-content: flex-start; align-items: flex-start;}
  .hp-listen-massage .listen-massage-box .box-full .photo { /*width: 260px;*/width: 18vw; height: 18vw; display: flex; justify-content: center; overflow: hidden;}
  .hp-listen-massage .listen-massage-box .box-full .photo img { width: auto; height: 100%;}
  .hp-listen-massage .listen-massage-box .box-full .intro-text { width: calc(100% - 18vw); padding: 2vw 0 0 2vw; box-sizing: border-box;}
  .hp-listen-massage .listen-massage-box .box-full .intro-text .title { clear: both; padding: 0; width: 100%; color: #fff; font-size: 2vw; text-align: left;}
  .hp-listen-massage .listen-massage-box .box-full .intro-text .title span { padding: 0.2vw 0.5vw; background-color: #ff6700;}
  .hp-listen-massage .listen-massage-box .box-full .intro-text .intro { clear: both; padding: 2vw 0 0 0; width: 100%; color: #333; font-size: 2vw;}

  img.hp-listen-arrow-prev { /*width: 80px;*/width: 8vw; height: auto; position: absolute; top: 20vw; left: 5.5vw; z-index: 9; cursor: pointer;}
  img.hp-listen-arrow-next { /*width: 80px;*/width: 8vw; height: auto; position: absolute; top: 20vw; right: 5.5vw; z-index: 9; cursor: pointer;}


  /************ section#hp-kids-video ************/

  section#hp-kids-video { clear: both; width: 100%; padding: 80px 40px 130px 40px; background-image: url("../images/hp-kids-video_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: right top; display: flex; justify-content: center; align-items: flex-start; box-sizing: border-box;}

  .hp-kids-intro { width: 175px; display: flex; justify-content: flex-start; align-items: flex-start;}
  .hp-kids-intro .style-v { padding: 0 20px 0 0; color: #333; font-size: 2.4rem; font-weight: 500; line-height: 1.2em; letter-spacing: 0.1em; -webkit-writing-mode: vertical-lr; writing-mode: vertical-lr;}
  .hp-kids-intro .style-v span { border-left: 5px #ff6700 solid;}

  .hp-kids-video { width: calc(100% - 175px); border-radius: 0 80px 80px 80px; overflow: hidden;}


  /************ section#hp-appointment ************/

  section#hp-appointment { clear: both; width: 100%; padding: 60px 0 90px 0; background-image: url("../images/hp-appointment_bg.jpg"); background-repeat: no-repeat; background-size: 200% auto; background-position: center bottom;}

  .hp-appointment-con { width: 90%; margin: 0 auto; border-radius: 0 0 60px 60px; background-color: #fff; -moz-box-shadow:4px 4px 12px 2px rgba(20%,20%,40%,0.5); -webkit-box-shadow:4px 4px 12px 2px rgba(20%,20%,40%,0.5); box-shadow:4px 4px 12px 2px rgba(20%,20%,40%,0.5); overflow: hidden;}
  
  .hp-appointment-con .appointment-info { width: 100%; padding: 30px; box-sizing: border-box;}
  .hp-appointment-con .appointment-info .title { width: 100%; color: #333; font-size: 2.4rem; font-weight: 500;}
  .hp-appointment-con .appointment-info .text { width: 100%; padding: 50px 0; color: #333; font-size: 1.1rem; line-height: 1.3em;}
  .hp-appointment-con .appointment-info .mail-box { display: none;}
  .hp-appointment-con .appointment-info .mail-box img.mail-icon { display: none;}
  .hp-appointment-con .appointment-info .mail-box a.appointment-bt { display: none;}
  .hp-appointment-con .mail-box-mo { width: 100%; height: 240px; padding: 50px 0 0 0; position: relative;}
  .hp-appointment-con .mail-box-mo img.mail-icon-mo { width: 142px; height: auto; margin: 0 auto; position: relative; z-index: 1;}
  .hp-appointment-con .mail-box-mo a.appointment-bt-mo { width: 460px; padding: 20px 0; margin: -20px auto 0 auto; color: #fff; font-size: 2rem; text-align: center; text-decoration: none; border-radius: 50px; background-color: #ff6700; display: block; position: relative; z-index: 2;}
  .hp-appointment-con .mail-box-mo a.appointment-bt-mo span.mouseoff { display: block;}
  .hp-appointment-con .mail-box-mo a.appointment-bt-mo span.mouseon { display: none;}
  .hp-appointment-con .mail-box-mo a.appointment-bt-mo:active { margin: 10px auto 0 auto; color: #ff6700; border: 5px #ff6700 solid; background-color: #fff; box-sizing: border-box;}
  .hp-appointment-con .mail-box-mo a.appointment-bt-mo:active span.mouseoff { display: none;}
  .hp-appointment-con .mail-box-mo a.appointment-bt-mo:active span.mouseon { display: block;}
  
  .hp-appointment-con .map-pic { width: 100%; height: 60vw; display: flex; justify-content: center; align-items: center; overflow: hidden;}
  .hp-appointment-con .map-pic img { width: auto; height: 100%;}


  /************ page-banner ************/

  .page-banner-box { clear: both; width: 100%; overflow: hidden;}

  .page-banner-box img { width: 140%; height: auto; margin: 0 0 0 -20%;}


  /************ section#page-about ************/

  section#page-about-1 { clear: both; width: 100%; padding: 80px 40px 100px 40px; box-sizing: border-box; background-image: url("../images/page_about_1_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: right top;}

  .page-about-title-2 { width: 100%; padding: 30px 0 0 0; color: #333; font-size: 2.2rem; font-weight: 500; text-align: center;}

  .page-about-1-con { clear: both; width: 100%; margin: 80px 0 0 0;}
  .page-about-1-con .col-pic { width: 80%; margin: 0 auto;}
  .page-about-1-con .col-pic img { width: 100%; height: auto;}
  .page-about-1-con .col-text { width: 100%; padding: 40px 0 0 0; color: #333; font-size: 1.4rem; font-weight: 500; line-height: 1.8em; box-sizing: border-box;}


  section#page-about-2 { clear: both; width: 100%; padding: 100px 40px 120px 40px; box-sizing: border-box; background-image: url("../images/page_about_2_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center top;}

  .page-about-2-con { clear: both; width: 100%;}
  .page-about-2-con .col-text { width: 100%;}
  .page-about-2-con .col-text .title-box { width: 100%; padding: 5px 0 5px 20px; color: #333; font-size: 2.2rem; font-weight: 600; line-height: 1em; border-left: 5px #ff6700 solid; box-sizing: border-box;}
  .page-about-2-con .col-text .text-con { width: 100%; padding: 45px 0 0 20px; color: #333; font-size: 1.4rem; font-weight: 500; line-height: 1.8em; box-sizing: border-box;}
  .page-about-2-con .col-illu { width: 80%; margin: 40px auto 0 auto;}
  .page-about-2-con .col-illu img { width: 100%; height: auto;}


  section#page-about-3 { clear: both; width: 100%; position: relative; overflow: hidden;}

  img.page-about-3-bg { width: 140%; height: auto; margin: 0 0 0 -20%; position: relative; z-index: 1;}

  .page-about-3-text { width: 100%; padding: 0 5vw 0 0; color: #fff; font-size: 3.6vw; font-weight: 500; text-align: right; letter-spacing: 0.1em; box-sizing: border-box; position: absolute; top: 4vw; left: 0; z-index: 2;}


  section#page-about-4 { clear: both; width: 100%; padding: 100px 40px 70px 40px; box-sizing: border-box; background-image: url("../images/page_about_4_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center top;}

  .page-about-4-intro { clear: both; width: 100%; padding: 0 0 20px 0; margin: 80px 0 0 0; color: #333; font-size: 1.4rem; line-height: 1.6em; text-align: center;}

  .page-about-4-slogan { clear: both; width: 100%; padding: 20px 0 75px 0; color: #333; font-size: 2rem; font-weight: 600; text-align: center;}

  .page-about-4-target { clear: both; width: 100%;}
  .page-about-4-target .column-box { width: 80%; margin: 0 auto;}
  .page-about-4-target .column-box .pic { width: 100%;}
  .page-about-4-target .column-box .pic img { width: 100%; height: auto;}
  .page-about-4-target .column-box .text { width: 100%; padding: 25px 0; color: #333; font-size: 1.4rem; font-weight: 500; text-align: center;}


  section#page-about-5 { clear: both; width: 100%; position: relative; overflow: hidden;}
  
  img.page-about-5-noreplace-bg { width: 140%; height: auto; margin: 0 0 0 -20%; position: relative; z-index: 1;}

  .page-about-5-noreplace-text { width: 100%; height: 100%; color: #333; font-size: 3vw; font-weight: 500; display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; z-index: 2;}


  section#page-about-6 { clear: both; width: 100%; padding: 110px 40px 70px 40px; box-sizing: border-box;}

  .page-about-6-contact { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-about-6-contact .contact-title { width: 300px; padding: 5px 0 5px 20px; color: #333; font-size: 2.2rem; font-weight: 600; line-height: 1em; border-left: 5px #ff6700 solid; box-sizing: border-box;}
  .page-about-6-contact .contact-method { width: calc(100% - 300px);}
  .page-about-6-contact .contact-method .column-box { width: 100%; padding: 40px 20px 20px 20px; margin: 0 30px 0 0; border: 8px #ffc000 solid; border-radius: 20px; box-sizing: border-box; cursor: pointer;}
  .page-about-6-contact .contact-method .column-box:nth-child(2) { margin: 40px 0 0 0;}
  .page-about-6-contact .contact-method .column-box a { color: #333; text-decoration: none;}
  .page-about-6-contact .contact-method .column-box a .icon { width: 100%;}
  .page-about-6-contact .contact-method .column-box a .icon img.icon { width: 120px; height: auto; margin: 0 auto; display: block;}
  .page-about-6-contact .contact-method .column-box a .icon img.icon-over { display: none;}
  .page-about-6-contact .contact-method .column-box a:hover .icon img.icon { display: none;}
  .page-about-6-contact .contact-method .column-box a:hover .icon img.icon-over { width: 120px; height: auto; margin: 0 auto; display: block;}
  .page-about-6-contact .contact-method .column-box a .text-1 { width: 100%; padding: 35px 0 0 0; color: #333; font-size: 1.6rem; font-weight: 500; line-height: 1.2em; text-align: center;}
  .page-about-6-contact .contact-method .column-box a .text-2 { width: 100%; padding: 20px 0 0 0; color: #333; font-size: 1.6rem; font-weight: 500; line-height: 1.2em; text-align: center;}
  .page-about-6-contact .contact-method .column-box a .text-1 span.orange, 
  .page-about-6-contact .contact-method .column-box a .text-2 span.orange { color: #ff6700;}

  .page-about-6-contact-map { clear: both; width: 100%; margin: 75px 0 0 0;}
  .page-about-6-contact-map img { width: 100%; height: auto;}


  /************ section#page-course ************/

  section#page-course-1 { clear: both; width: 100%; padding: 150px 40px; box-sizing: border-box; background-image: url("../images/page_course_1_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center center;}

  .page-course-1-text { width: 100%; font-size: 1.8rem; line-height: 1.8em; text-align: center;}


  section#page-course-2 { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: stretch;}

  .page-course-2-column { width: calc(100% / 3); position: relative; overflow: hidden;}
  .page-course-2-column img.pic-bg { width: 140%; height: auto; margin: 0 0 0 -20%; position: relative; z-index: 1;}
  .page-course-2-column .course-text { width: 100%; height: 100%; color: #fff; font-size: 4vw; font-weight: 500; display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; z-index: 2;}


  section#page-course-3 { clear: both; width: 100%; padding: 140px 0 80px 0; box-sizing: border-box; background-image: url("../images/page_course_3_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center top;}

  .page-course-3-target { width: 100%; position: relative;}
  
  .page-course-3-target .course-target-box-y { width: 70vw; padding: 4vw 0; margin: 0 auto; border: 10px #ffc000 solid; border-radius: 30px; background-color: #fff; position: relative;}
  .page-course-3-target .course-target-box-y .target-title { width: 18vw; padding: 2vw 0; color: #fff; font-size: 3.6vw; font-weight: 600; border-radius: 0 0 30px 0; background-color: #ffc000; display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; z-index: 2;}
  .page-course-3-target .course-target-box-y .sub-title { width: 30vw; padding: 0 0 1vw 0; margin: 0 auto; color: #333; font-size: 2.4vw; font-weight: 500; line-height: 1em; text-align: center; border-bottom: 5px #ffc000 solid;}
  .page-course-3-target .course-target-box-y .target-full .column-box .dot-y { width: 1.6vw; height: 1.6vw; margin: 0 auto; border: 0.6vw #ffc000 solid; border-radius: 100%; background-color: #fff; box-sizing: border-box; display: block;}
  
  .page-course-3-target .course-target-box-y .sub-intro, 
  .page-course-3-target .course-target-box-g .sub-intro, 
  .page-course-3-target .course-target-box-o .sub-intro { width: 100%; padding: 1.5vw 0 0 0; margin: 0 auto; color: #774418; font-size: 1.6vw; text-align: center;}
  .page-course-3-target .course-target-box-y .target-full, 
  .page-course-3-target .course-target-box-g .target-full, 
  .page-course-3-target .course-target-box-o .target-full { width: 100%; padding: 0 1.5vw; margin: 4vw 0 0 0; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap; box-sizing: border-box;}
  .page-course-3-target .course-target-box-y .target-full .column-box, 
  .page-course-3-target .course-target-box-g .target-full .column-box, 
  .page-course-3-target .course-target-box-o .target-full .column-box { width: calc(100% / 2 - 2vw); margin: 0 1vw 2vw 1vw; position: relative;}
  .page-course-3-target .course-target-box-y .target-full .column-box .text, 
  .page-course-3-target .course-target-box-g .target-full .column-box .text, 
  .page-course-3-target .course-target-box-o .target-full .column-box .text { width: 100%; padding: 0.5vw 0 0 0; color: #333; font-size: 2.2vw; font-weight: 500; line-height: 1em; text-align: center; position: absolute; top: 1.5vw; left: 0; z-index: 2;}
  .page-course-3-target .course-target-box-y .target-full .column-box .illu-box, 
  .page-course-3-target .course-target-box-g .target-full .column-box .illu-box, 
  .page-course-3-target .course-target-box-o .target-full .column-box .illu-box { width: 100%; margin: 3vw 0 0 0; padding: 2vw 0; border-radius: 30px; background-color: #fdfce5; position: relative; z-index: 1;}
  .page-course-3-target .course-target-box-y .target-full .column-box .illu-box img, 
  .page-course-3-target .course-target-box-g .target-full .column-box .illu-box img, 
  .page-course-3-target .course-target-box-o .target-full .column-box .illu-box img { width: 14vw; height: auto; margin: 0 auto;}
  .page-course-3-target .course-target-box-y .target-full .column-box .intro, 
  .page-course-3-target .course-target-box-g .target-full .column-box .intro, 
  .page-course-3-target .course-target-box-o .target-full .column-box .intro { width: 100%; padding: 1.5vw 1vw; color: #333; font-size: 1.4vw; line-height: 1.4em; box-sizing: border-box;}
  
  .page-course-3-target .course-target-box-g { width: 70vw; padding: 4vw 0; margin: 0 auto; border: 10px #00bf9f solid; border-radius: 30px; background-color: #fff; position: relative;}
  .page-course-3-target .course-target-box-g .target-title { width: 18vw; padding: 2vw 0; color: #fff; font-size: 3.6vw; font-weight: 600; border-radius: 0 0 30px 0; background-color: #00bf9f; display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; z-index: 2;}
  .page-course-3-target .course-target-box-g .sub-title { width: 30vw; padding: 0 0 1vw 0; margin: 0 auto; color: #333; font-size: 2.4vw; font-weight: 500; line-height: 1em; text-align: center; border-bottom: 5px #00bf9f solid;}
  .page-course-3-target .course-target-box-g .target-full .column-box .dot-g { width: 1.6vw; height: 1.6vw; margin: 0 auto; border: 0.6vw #00bf9f solid; border-radius: 100%; background-color: #fff; box-sizing: border-box; display: block;}
  
  .page-course-3-target .course-target-box-o { width: 70vw; padding: 4vw 0; margin: 0 auto; border: 10px #ff6700 solid; border-radius: 30px; background-color: #fff; position: relative;}
  .page-course-3-target .course-target-box-o .target-title { width: 18vw; padding: 2vw 0; color: #fff; font-size: 3.6vw; font-weight: 600; border-radius: 0 0 30px 0; background-color: #ff6700; display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; z-index: 2;}
  .page-course-3-target .course-target-box-o .sub-title { width: 30vw; padding: 0 0 1vw 0; margin: 0 auto; color: #333; font-size: 2.4vw; font-weight: 500; line-height: 1em; text-align: center; border-bottom: 5px #ff6700 solid;}
  .page-course-3-target .course-target-box-o .target-full .column-box .dot-o { width: 1.6vw; height: 1.6vw; margin: 0 auto; border: 0.6vw #ff6700 solid; border-radius: 100%; background-color: #fff; box-sizing: border-box; display: block;}

  img.page-course-3-arrow-prev { /*width: 80px;*/width: 6vw; height: auto; position: absolute; top: 30vw; left: 10vw; z-index: 99; cursor: pointer;}
  img.page-course-3-arrow-next { /*width: 80px;*/width: 6vw; height: auto; position: absolute; top: 30vw; right: 10vw; z-index: 99; cursor: pointer;}

  .page-course-3-intro { clear: both; width: 90vw; margin: 6vw auto 0 auto; position: relative;}
  .page-course-3-intro .course-intro-box { width: 100%; height: 100%; padding: 0 4.5vw 0.7vw 2vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center; position: absolute; top: 0; left: 0; z-index: 2;}
  .page-course-3-intro .course-intro-box img.logo { width: 16vw; height: auto;}
  .page-course-3-intro .course-intro-box .text-pc { display: none;}
  .page-course-3-intro .course-intro-box .text-mo { width: calc(100% - 16vw); padding: 0 0 0 2vw; color: #333; font-size: 2vw; font-weight: 500; line-height: 1.6em; box-sizing: border-box;}
  
  img.page-course-3-intro-bg-mo { display: none;}
  img.page-course-3-intro-bg { width: 100%; height: auto; position: relative; z-index: 1;}


  /************ section#page-news ************/

  section#page-news { clear: both; width: 100%; padding: 0 40px 120px 40px; box-sizing: border-box; background-color: #fdfce5;}

  .page-news-list-full { width: 100%;}
  .page-news-list-full .title-more { width: 430px; padding: 50px 0; box-sizing: border-box;}
  .page-news-list-full .title-more .title-box { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-news-list-full .title-more .title-box img.icon { width: 53px; height: auto; margin: 0 15px 0 0;}
  .page-news-list-full .title-more .title-box .title { width: calc(100% - 53px - 15px);}
  .page-news-list-full .title-more .title-box .title span.style-b { color: #774418; font-size: 2.6rem; line-height: 2rem; font-weight: 600;}
  .page-news-list-full .title-more .title-box .title span.style-s { padding: 20px 0 0 0; color: #808080; font-size: 1.6rem; letter-spacing: 0.1em; display: block;}

  .page-news-list-full .news-list { width: 100%;}
  .page-news-list-full .news-list .box { width: 100%;}
  .page-news-list-full .news-list a.news-box { width: 100%; padding: 20px 0; text-decoration: none; border-bottom: 1px #c9c9c9 solid; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-news-list-full .news-list a.news-box:last-child { border-bottom: 0;}
  .page-news-list-full .news-list a.news-box .date { width: 160px; color: #333; font-size: 1.4rem; font-weight: 500;}
  .page-news-list-full .news-list a.news-box .title { width: calc(100% - 160px - 20px); color: #333; font-size: 1.4rem;}
  .page-news-list-full .news-list a.news-box .icon { width: 20px; color: #333; font-size: 1.2rem; text-align: right;}
  .page-news-list-full .news-list a.news-box:hover .date, 
  .page-news-list-full .news-list a.news-box:hover .title, 
  .page-news-list-full .news-list a.news-box:hover .icon { color: #ff6700;}

  ul.page-num { clear: both; width: 100%; padding: 0; margin: 40px 0 0 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  ul.page-num li { padding: 0 5px 10px 5px; margin: 0;}
  ul.page-num li a { padding: 5px 10px; color: #ff6700; font-size: 1rem; text-decoration: none; border: 1px #ff6700 solid; background-color: #fff; display: block;}
  ul.page-num li a:hover { color: #fff; background-color: #ff6700;}
  ul.page-num li a.sel { color: #fff; background-color: #ff6700;}


  .news-content { clear: both; width: 100%;}
  .news-content .news-title { width: 100%; padding: 0 0 20px 0;}
  .news-content .news-title .date { width: 100%; color: #333; font-size: 1.1rem; text-align: right;}
  .news-content .news-title .title { width: 100%; color: #333; font-size: 1.8rem; font-weight: 500; line-height: 1.2em;}
  .news-content .content { clear: both; width: 100%; padding: 40px 0; color: #333; font-size: 1.2rem; line-height: 1.8em; border-bottom: 1px #ff6700 solid; border-top: 1px #ff6700 solid;}
  .news-content .content a { color: #ff6700; border-bottom: 1px #ff6700 dashed;}
  .news-content .content img { max-width: 100%; height: auto;}

  .goback-bt { clear: both; width: 100%; padding: 60px 0 0 0;}
  .goback-bt a { width: 160px; padding: 10px 0; margin: 0 auto; color: #fff; font-size: 1.1rem; text-align: center; text-decoration: none; border-radius: 30px; border: 1px #ff6700 solid; background-color: #ff6700; display: block;}
  .goback-bt a:hover { color: #ff6700; background-color: #fff;}


  /************ section#page-appointment ************/

  section#page-appointment { clear: both; width: 100%; padding: 60px 40px 90px 40px; box-sizing: border-box; background-image: url("../images/hp_3different_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: center top;}

  .page-appointment-title { width: 220px; margin: 0 auto; color: #ff6700; font-size: 3.2rem; font-weight: 500; text-align: center; border-bottom: 5px #ff6700 solid;}

  .page-appointment-form { clear: both; width: 100%; margin: 60px 0 0 0; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-appointment-form .column-helf { width: 50%; padding: 0 20px; box-sizing: border-box;}
  .page-appointment-form .column-helf .caption { width: 100%; color: #333; font-size: 1.2rem; font-weight: 500;}
  .page-appointment-form .column-helf input[type=text], 
  .page-appointment-form .column-helf input[type=tel] { width: 100%; padding: 10px; margin: 10px 0 30px 0; color: #333; font-size: 1.2rem; border: 0; border-bottom: 2px #ff6700 solid; background-color: transparent; box-sizing: border-box;}
  .page-appointment-form textarea { width: calc(100% - 40px); height: 200px; padding: 10px; margin: 10px auto 30px auto; color: #333; font-size: 1.2rem; border: 0; border: 2px #ff6700 solid; background-color: #fff; box-sizing: border-box;}
  .page-appointment-form .submit-bt { width: 100%; margin: 20px 0 0 0; text-align: center;}
  .page-appointment-form .submit-bt input[type=submit], 
  .page-appointment-form .submit-bt input[type=button] { width: 160px; padding: 10px 0; color: #fff; font-size: 1.2rem; border: 2px #ff6700 solid; border-radius: 30px; background-color: #ff6700; box-sizing: border-box; cursor: pointer;}
  .page-appointment-form .submit-bt input[type=submit]:hover, 
  .page-appointment-form .submit-bt input[type=button]:hover { color: #ff6700; border: 2px #ff6700 solid; background-color: #fff;}

  .page-appointment-contact { clear: both; width: 100%; padding: 40px 0 0 0; margin: 60px 0 0 0; color: #333; font-size: 1.2rem; line-height: 2em; border-top: 1px #ff6700 solid;}
  .page-appointment-contact span.title { font-size: 1.6rem; font-weight: 500;}


  /************ footer ************/

  footer { clear: both; width: 100%; padding: 50px 40px; box-sizing: border-box; background-color: #774418;}

  ul.footer-nav { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: center;}
  ul.footer-nav li { padding: 0 40px; margin: 0;}
  ul.footer-nav li a { color: #fff; font-size: 1.1rem; text-decoration: none;}
  ul.footer-nav li a:hover { border-bottom: 2px #fff solid;}

  .footer-info-full { clear: both; width: 100%; margin: 70px 0 0 0;}
  .footer-info-full img.footer-logo { width: 300px; height: auto; margin: 0 auto;}
  .footer-info-full .add-info { width: 100%; margin: 30px 0 0 0; color: #fff; font-size: 1.4rem; line-height: 1.2em;}
  .footer-info-full .add-info div.col-1 { width: 100%; margin: 0 0 20px 0; display: flex; justify-content: center; align-items: center;}
  .footer-info-full .add-info div.col-2 { width: 100%; margin: 0 0 20px 0; display: flex; justify-content: center; align-items: center;}
  .footer-info-full .add-info div.col-3 { width: 100%; margin: 0 0 20px 0; display: flex; justify-content: center; align-items: center;}
  .footer-info-full .add-info div.col-4 { width: 100%; display: flex; justify-content: center; align-items: center;}
  .footer-info-full .add-info div img.info-icon { width: 25px; height: auto; margin: 0 10px 0 0;}

  .copyright { clear: both; width: 100%; margin: 70px 0 0 0; color: #fff; font-size: 0.9rem; text-align: center;}


}

@media screen and (max-width: 768px) {

  /************ header + nav ************/

  header { width: 100%; height: 100px; padding: 0 20px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center; position: relative;}

  .header-logo { width: 240px;}
  .header-logo img { /*width: 300px;*/width: 100%; height: auto;}

  nav#pc { display: none;}
  nav#mo { width: calc(100% - 240px);}
  nav#mo .nav-icon { width: 50px; color: #333; font-size: 2.4rem; text-align: right; cursor: pointer; float: right;}
  nav#mo ul.nav-menu { width: 100%; padding: 40px; margin: 0; box-sizing: border-box; background-color: #ff6700; list-style: none; display: none; position: absolute; top: 100px; left: 0; z-index: 999;}
  nav#mo ul.nav-menu li { width: 100%; padding: 0; margin: 0; border-bottom: 1px rgba(255,255,255,0.6) solid;}
  nav#mo ul.nav-menu li:last-child { border-bottom: 0;}
  nav#mo ul.nav-menu li a { width: 100%; padding: 20px 0; color: #fff; font-size: 1.2rem; font-weight: 500; text-align: center; text-decoration: none; display: block;}
  nav#mo ul.nav-menu li a.contact { width: 147px; padding: 10px 0; margin: 20px auto; color: #ff6700; font-size: 1.2rem; font-weight: 500; text-decoration: none; border-radius: 26px; background-color: #fff; display: flex; justify-content: center; align-items: center;}
  nav#mo ul.nav-menu li a.contact img.icon-o { width: 25px; height: auto; margin: 0 10px 0 0;}
  nav#mo ul.nav-menu li a.contact img.icon-w { display: none;}


  /************ hp-banner ************/

  .hp-banner-box { clear: both; width: 100%; padding: 0 3.8vw; box-sizing: border-box;}

  .hp-banner-box img { width: 100%; height: auto;}


  /************ section#hp-about ************/

  section#hp-about { clear: both; width: 100%; padding: 50px 20px 90px 20px; box-sizing: border-box;}

  .hp-about-title { width: 110px; margin: 0 auto; color: #ff6700; font-size: 3rem; font-weight: 500; text-align: center; border-bottom: 5px #ff6700 solid;}
  .hp-about-title-2 { width: 100%; padding: 20px 0 0 0; color: #333; font-size: 2.2rem; font-weight: 600; text-align: center;}
  .hp-about-intro { width: 100%; padding: 60px 0 0 0; color: #333; font-size: 1.2rem; line-height: 1.6em; text-align: center;}


  /************ section#hp-news ************/

  section#hp-news { clear: both; width: 100%; padding: 0 0 120px 0; box-sizing: border-box;}

  .hp-news-list-full { width: 100%; border-radius: 10px; background-color: #fdfce5;}
  
  .hp-news-list-full .title-more { width: 100%; padding: 30px 20px; box-sizing: border-box;}
  .hp-news-list-full .title-more .title-box { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start;}
  .hp-news-list-full .title-more .title-box img.icon { width: 53px; height: auto; margin: 0 15px 0 0;}
  .hp-news-list-full .title-more .title-box .title { width: calc(100% - 53px - 15px);}
  .hp-news-list-full .title-more .title-box .title span.style-b { color: #774418; font-size: 2.6rem; line-height: 2rem; font-weight: 600;}
  .hp-news-list-full .title-more .title-box .title span.style-s { padding: 20px 0 0 0; color: #808080; font-size: 1.6rem; letter-spacing: 0.1em; display: block;}
  .hp-news-list-full .title-more .more-bt { width: 250px; margin: 40px 0 0 0;}
  .hp-news-list-full .title-more .more-bt a { width: 100%; padding: 10px 0; box-sizing: border-box; color: #333; font-size: 1.6rem; font-weight: 500; line-height: 1em; text-align: center; text-decoration: none; border-radius: 30px; background-color: #ffc000; display: block; position: relative;}
  .hp-news-list-full .title-more .more-bt a .arrow { width: 100%; height: 100%; padding: 0 10px 0 0; box-sizing: border-box; color: #333; font-size: 1rem; display: flex; justify-content: flex-end; align-items: center; position: absolute; top: 0; left: 0; z-index: 1;}
  .hp-news-list-full .title-more .more-bt a:hover, 
  .hp-news-list-full .title-more .more-bt a:hover .arrow { color: #fff;}

  .hp-news-list-full .news-list { clear: both; width: 100%; padding: 30px 20px; box-sizing: border-box;}
  .hp-news-list-full .news-list .box { width: 100%; max-height: 400px; padding: 0 20px 0 0; box-sizing: border-box; overflow-y: auto; scrollbar-color: #ffc000 #efefef; display: block;}
  .hp-news-list-full .news-list .box::-webkit-scrollbar { width: 5px;}
  .hp-news-list-full .news-list a.news-box { width: 100%; padding: 20px 0; text-decoration: none; border-bottom: 1px #c9c9c9 solid; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .hp-news-list-full .news-list a.news-box:last-child { border-bottom: 0;}
  .hp-news-list-full .news-list a.news-box .date { width: 100%; padding: 0 0 10px 0; color: #333; font-size: 1.4rem; font-weight: 500;}
  .hp-news-list-full .news-list a.news-box .title { width: calc(100% - 20px); color: #333; font-size: 1.4rem;}
  .hp-news-list-full .news-list a.news-box .icon { width: 20px; color: #333; font-size: 1.2rem; text-align: right;}
  .hp-news-list-full .news-list a.news-box:hover .date, 
  .hp-news-list-full .news-list a.news-box:hover .title, 
  .hp-news-list-full .news-list a.news-box:hover .icon { color: #ff6700;}


  /************ section#hp-3different ************/

  section#hp-3different { clear: both; width: 100%; padding: 0 0 110px 0; box-sizing: border-box; background-image: url("../images/hp_3different_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top;}

  .hp-3different-learning { width: 100%; padding: 60px 0 0 0; background-image: url("../images/hp_3different_learning_bg.png"); background-repeat: no-repeat; background-size: 200% auto; background-position: center top; position: relative; overflow: hidden;}
  .hp-3different-learning img.learning-bg { display: none;}
  .hp-3different-learning .learning-check-box { width: 90%; margin: 0 auto; border: 2px #00bf9f solid; border-radius: 30px; background-color: #fff; box-sizing: border-box; overflow: hidden; -moz-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); -webkit-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); display: block;}
  
  .hp-3different-learning .learning-check-box .column-top { width: 100%; padding: 35px 0; background-color: #3eccb1; position: relative;}
  .hp-3different-learning .learning-check-box .column-top img.title { width: 224px; height: auto; margin: 0 auto;}
  .hp-3different-learning .learning-check-box .column-top .text { width: 100%; padding: 20px 0 0 0; color: #fff; font-size: 2.4rem; font-weight: 600; text-align: center;}
  .hp-3different-learning .learning-check-box .column-top img.illu-1 { display: none;}  
  
  .hp-3different-learning .learning-check-box .column-bottom { width: 100%; padding: 30px 10px; box-sizing: border-box; position: relative;}
  .hp-3different-learning .learning-check-box .column-bottom ul.learning { width: 100%; padding: 0; margin: 0; list-style: none; display: block; position: relative; z-index: 2;}
  .hp-3different-learning .learning-check-box .column-bottom ul.learning li { width: 100%; padding: 10px 0; margin: 0; color: #333; font-size: 1.2rem; font-weight: 500; display: flex; justify-content: flex-start;}
  .hp-3different-learning .learning-check-box .column-bottom ul.learning li input[type=checkbox] { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;}
  .hp-3different-learning .learning-check-box .column-bottom ul.learning li .checkmark { position: absolute; top: 0; left: 0; height: 33px; width: 33px; background-color: #fff; border-radius: 50%; border: 2px #ff6700 solid;}
  .hp-3different-learning .learning-check-box .column-bottom ul.learning li .container:hover input ~ .checkmark { background-color: #ff6700;}
  .hp-3different-learning .learning-check-box .column-bottom ul.learning li .container input:checked ~ .checkmark { background-color: #ff6700;}
  .hp-3different-learning .learning-check-box .column-bottom ul.learning li .checkmark:after { content: ""; position: absolute; display: none;}
  .hp-3different-learning .learning-check-box .column-bottom ul.learning li .container input:checked ~ .checkmark:after { display: block;}
  .hp-3different-learning .learning-check-box .column-bottom ul.learning li .container .checkmark:after { left: 11px; top: 5px; width: 8px; height: 16px; border: solid white; border-width: 0 3px 3px 0; transform: rotate(45deg);}
  .hp-3different-learning .learning-check-box .column-bottom ul.learning li .container { display: block; position: relative; padding-left: 10px; cursor: pointer; font-size: 16px; user-select: none;}
  .hp-3different-learning .learning-check-box .column-bottom ul.learning li .space-pc { width: 60px; display: block;}
  .hp-3different-learning .learning-check-box .column-bottom img.illu-2 { display: none;}

  .hp-3different-learning .intro-text { clear: both; width: 100%; padding: 75px 20px 0 20px; box-sizing: border-box; color: #333; font-size: 1.4rem; text-align: center;}

  img.hp-3different-hr-line { clear: both; width: 123px; height: auto; margin: 50px auto;}

  .hp-3different-method { clear: both; width: 100%; padding: 0 20px; box-sizing: border-box;}
  .hp-3different-method .intro-text { width: 100%; padding: 0 0 40px 0; color: #333; font-size: 2rem; font-weight: 500; text-align: center;}
  .hp-3different-method .intro-text span.style-o { color: #ff6700;}
  .hp-3different-method .method-box { width: 290px; margin: 0 auto 30px auto;}
  .hp-3different-method .method-box .num { width: 100%; color: rgba(176,176,176,0.3); font-size: 2rem; font-weight: 600;}
  .hp-3different-method .method-box img.pic-illu { width: 100%; height: auto;}
  .hp-3different-method .method-box .title { width: 100%; padding: 35px 0 15px 0; color: #00bf9f; font-size: 1.4rem; font-weight: 600;}
  .hp-3different-method .method-box .intro { width: 100%; color: #333; font: 0.8rem; line-height: 1.2em;}

  .hp-3different-method .read-more-bt { clear: both; width: 100%; margin: 70px 0 0 0;}
  .hp-3different-method .read-more-bt a { width: 320px; padding: 15px 0; margin: 0 auto; color: #00bf9f; font-size: 1.2rem; font-weight: 500; text-align: center; text-decoration: none; border: 1px #00bf9f solid; border-radius: 30px; box-sizing: border-box; display: block; position: relative;}
  .hp-3different-method .read-more-bt a .arrow { width: 100%; height: 100%; padding: 0 30px 0 0; box-sizing: border-box; color: #00bf9f; font-size: 1rem; display: flex; justify-content: flex-end; align-items: center; position: absolute; top: 0; left: 0; z-index: 1;}
  .hp-3different-method .read-more-bt a:hover { color: #fff; background-color: #00bf9f;}
  .hp-3different-method .read-more-bt a:hover .arrow { color: #fff;}


  /************ section#hp-learning ************/

  section#hp-learning { clear: both; width: 100%; padding: 50px 0 110px 0; background-image: url("../images/hp_learning_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: right top;}

  .hp-learning-title { width: 100%; color: #333; font-size: 2.4rem; font-weight: 500; text-align: center;}

  .hp-learning-what { clear: both; width: 100%; padding: 0 20px; margin: 70px 0 0 0; box-sizing: border-box;}
  .hp-learning-what .learning-box { width: 100%; margin: 0 0 30px 0; border-radius: 30px; overflow: hidden;}
  .hp-learning-what .learning-box.bg-y { background-color: #ffc000;}
  .hp-learning-what .learning-box.bg-g { background-color: #00bf9f;}
  .hp-learning-what .learning-box.bg-o { background-color: #ff6700;}
  .hp-learning-what .learning-box .photo { width: 100%; height: 185px; display: flex; align-items: center; overflow: hidden;}
  .hp-learning-what .learning-box .photo img { width: 100%; height: auto;}
  .hp-learning-what .learning-box .title { width: 100%; padding: 25px 35px 15px 35px; color: #fff; font-size: 2rem; font-weight: 500; letter-spacing: 0.1em; box-sizing: border-box;}
  .hp-learning-what .learning-box .intro { width: 100%; padding: 0 0 20px 35px; color: #fff; font-size: 1.2rem; line-height: 2em; box-sizing: border-box;}


  /************ section#hp-listen ************/

  section#hp-listen { clear: both; width: 100%; position: relative; overflow: hidden;}

  img.hp-listen-photo-bg { width: 240%; height: auto; margin: 0 0 0 -70%; position: relative; z-index: 1;}

  .hp-listen-massage { width: 100%; padding: 0 0 6vw 0; margin: -30vw 0 0 0; position: relative; z-index: 2;}
  .hp-listen-massage .title { width: 100%; padding: 0 0 5vw 0; color: #fff; font-size: 6vw; font-weight: 500; text-align: center;}
  .hp-listen-massage .listen-massage-box { /*width: 830px;*/width: 50vw; padding: 0 0 2vw 0;}
  .hp-listen-massage .listen-massage-box .box-full { width: calc(100% - 2vw); padding: 6vw; margin: 0 1vw; border-radius: 16vw; background-color: rgba(255,255,255,0.9); box-sizing: border-box; -moz-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); -webkit-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5);}
  .hp-listen-massage .listen-massage-box .box-full .photo { /*width: 260px;*/width: 30vw; height: 30vw; margin: 0 auto; display: flex; justify-content: center; overflow: hidden;}
  .hp-listen-massage .listen-massage-box .box-full .photo img { width: auto; height: 100%;}
  .hp-listen-massage .listen-massage-box .box-full .intro-text { width: 100%; padding: 2vw 0; box-sizing: border-box;}
  .hp-listen-massage .listen-massage-box .box-full .intro-text .title { clear: both; padding: 4vw 0 0 0; width: 100%; color: #fff; font-size: 4vw; text-align: left;}
  .hp-listen-massage .listen-massage-box .box-full .intro-text .title span { padding: 0.2vw 0.5vw; background-color: #ff6700;}
  .hp-listen-massage .listen-massage-box .box-full .intro-text .intro { clear: both; padding: 2vw 0 0 0; width: 100%; color: #333; font-size: 4vw;}

  img.hp-listen-arrow-prev { /*width: 80px;*/width: 16vw; height: auto; position: absolute; top: 30vw; left: 3vw; z-index: 9; cursor: pointer;}
  img.hp-listen-arrow-next { /*width: 80px;*/width: 16vw; height: auto; position: absolute; top: 30vw; right: 3vw; z-index: 9; cursor: pointer;}


  /************ section#hp-kids-video ************/

  section#hp-kids-video { clear: both; width: 100%; padding: 80px 20px 130px 20px; background-image: url("../images/hp-kids-video_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: right top; box-sizing: border-box;}

  .hp-kids-intro { width: 100%; padding: 0 0 40px 0;}
  .hp-kids-intro .style-v { padding: 0 20px 0 0; color: #333; font-size: 2.4rem; font-weight: 500; line-height: 1.8em; letter-spacing: 0.1em;}
  .hp-kids-intro .style-v span { border-bottom: 5px #ff6700 solid;}

  .hp-kids-video { width: 100%; border-radius: 0 40px 40px 40px; overflow: hidden;}


  /************ section#hp-appointment ************/

  section#hp-appointment { clear: both; width: 100%; padding: 60px 0 90px 0; background-image: url("../images/hp-appointment_bg.jpg"); background-repeat: no-repeat; background-size: 300% auto; background-position: center bottom;}

  .hp-appointment-con { width: 90%; margin: 0 auto; border-radius: 0 0 60px 60px; background-color: #fff; -moz-box-shadow:4px 4px 12px 2px rgba(20%,20%,40%,0.5); -webkit-box-shadow:4px 4px 12px 2px rgba(20%,20%,40%,0.5); box-shadow:4px 4px 12px 2px rgba(20%,20%,40%,0.5); overflow: hidden;}
  
  .hp-appointment-con .appointment-info { width: 100%; padding: 30px 20px; box-sizing: border-box;}
  .hp-appointment-con .appointment-info .title { width: 100%; color: #333; font-size: 2rem; font-weight: 500;}
  .hp-appointment-con .appointment-info .text { width: 100%; padding: 50px 0 30px 0; color: #333; font-size: 1.1rem; line-height: 1.3em;}
  .hp-appointment-con .appointment-info .mail-box { display: none;}
  .hp-appointment-con .appointment-info .mail-box img.mail-icon { display: none;}
  .hp-appointment-con .appointment-info .mail-box a.appointment-bt { display: none;}
  .hp-appointment-con .mail-box-mo { width: 100%; height: 50vw; padding: 50px 0 0 0; position: relative;}
  .hp-appointment-con .mail-box-mo img.mail-icon-mo { width: 30vw; height: auto; margin: 0 auto; position: relative; z-index: 1;}
  .hp-appointment-con .mail-box-mo a.appointment-bt-mo { width: 80vw; padding: 2vw 0; margin: -4vw auto 0 auto; color: #fff; font-size: 6vw; text-align: center; text-decoration: none; border-radius: 50px; background-color: #ff6700; display: block; position: relative; z-index: 2;}
  .hp-appointment-con .mail-box-mo a.appointment-bt-mo span.mouseoff { display: block;}
  .hp-appointment-con .mail-box-mo a.appointment-bt-mo span.mouseon { display: none;}
  .hp-appointment-con .mail-box-mo a.appointment-bt-mo:active { margin: 10px auto 0 auto; color: #ff6700; border: 5px #ff6700 solid; background-color: #fff; box-sizing: border-box;}
  .hp-appointment-con .mail-box-mo a.appointment-bt-mo:active span.mouseoff { display: none;}
  .hp-appointment-con .mail-box-mo a.appointment-bt-mo:active span.mouseon { display: block;}
  
  .hp-appointment-con .map-pic { width: 100%; height: 80vw; display: flex; justify-content: center; align-items: center; overflow: hidden;}
  .hp-appointment-con .map-pic img { width: auto; height: 100%;}


  /************ page-banner ************/

  .page-banner-box { clear: both; width: 100%; overflow: hidden;}

  .page-banner-box img { width: 220%; height: auto; margin: 0 0 0 -60%;}


  /************ section#page-about ************/

  section#page-about-1 { clear: both; width: 100%; padding: 80px 20px 100px 20px; box-sizing: border-box; background-image: url("../images/page_about_1_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: right top;}

  .page-about-title-2 { width: 100%; padding: 30px 0 0 0; color: #333; font-size: 2.2rem; font-weight: 500; text-align: center;}

  .page-about-1-con { clear: both; width: 100%; margin: 80px 0 0 0;}
  .page-about-1-con .col-pic { width: 100%;}
  .page-about-1-con .col-pic img { width: 100%; height: auto;}
  .page-about-1-con .col-text { width: 100%; padding: 40px 0 0 0; color: #333; font-size: 1.4rem; font-weight: 500; line-height: 1.8em; box-sizing: border-box;}


  section#page-about-2 { clear: both; width: 100%; padding: 100px 20px 120px 20px; box-sizing: border-box; background-image: url("../images/page_about_2_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center top;}

  .page-about-2-con { clear: both; width: 100%;}
  .page-about-2-con .col-text { width: 100%;}
  .page-about-2-con .col-text .title-box { width: 100%; padding: 5px 0 5px 20px; color: #333; font-size: 2.2rem; font-weight: 600; line-height: 1em; border-left: 5px #ff6700 solid; box-sizing: border-box;}
  .page-about-2-con .col-text .text-con { width: 100%; padding: 45px 0 0 20px; color: #333; font-size: 1.4rem; font-weight: 500; line-height: 1.8em; box-sizing: border-box;}
  .page-about-2-con .col-illu { width: 100%; margin: 40px 0 0 0;}
  .page-about-2-con .col-illu img { width: 100%; height: auto;}


  section#page-about-3 { clear: both; width: 100%; background-image: url("../images/page_about_3_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center top;}

  img.page-about-3-bg { display: none;}

  .page-about-3-text { width: 100%; padding: 40px 20px 100px 20px; color: #fff; font-size: 1.4rem; font-weight: 500; text-align: center; letter-spacing: 0.1em; box-sizing: border-box;}


  section#page-about-4 { clear: both; width: 100%; padding: 100px 20px 70px 20px; box-sizing: border-box; background-image: url("../images/page_about_4_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center top;}

  .page-about-4-intro { clear: both; width: 100%; padding: 0 0 20px 0; margin: 80px 0 0 0; color: #333; font-size: 1.2rem; line-height: 1.6em; text-align: center;}

  .page-about-4-slogan { clear: both; width: 100%; padding: 20px 0 75px 0; color: #333; font-size: 1.8rem; font-weight: 600; text-align: center;}

  .page-about-4-target { clear: both; width: 100%;}
  .page-about-4-target .column-box { width: 100%; margin: 0 auto;}
  .page-about-4-target .column-box .pic { width: 100%;}
  .page-about-4-target .column-box .pic img { width: 100%; height: auto;}
  .page-about-4-target .column-box .text { width: 100%; padding: 25px 0; color: #333; font-size: 1.4rem; font-weight: 500; text-align: center;}


  section#page-about-5 { clear: both; width: 100%; background-image: url("../images/page_about_5_noreplace_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center top;}
  
  img.page-about-5-noreplace-bg { display: none;}

  .page-about-5-noreplace-text { width: 100%; padding: 60px 20px; color: #333; font-size: 1.4rem; font-weight: 500; text-align: center; box-sizing: border-box;}


  section#page-about-6 { clear: both; width: 100%; padding: 110px 20px 70px 20px; box-sizing: border-box;}

  .page-about-6-contact { width: 100%;}
  .page-about-6-contact .contact-title { width: 300px; padding: 5px 0 5px 20px; color: #333; font-size: 2.2rem; font-weight: 600; line-height: 1em; border-left: 5px #ff6700 solid; box-sizing: border-box;}
  .page-about-6-contact .contact-method { width: 100%;}
  .page-about-6-contact .contact-method .column-box { width: 100%; padding: 40px 20px 20px 20px; margin: 40px 0 0 0; border: 8px #ffc000 solid; border-radius: 20px; box-sizing: border-box; cursor: pointer;}
  .page-about-6-contact .contact-method .column-box a { color: #333; text-decoration: none;}
  .page-about-6-contact .contact-method .column-box a .icon { width: 100%;}
  .page-about-6-contact .contact-method .column-box a .icon img.icon { width: 120px; height: auto; margin: 0 auto; display: block;}
  .page-about-6-contact .contact-method .column-box a .icon img.icon-over { display: none;}
  .page-about-6-contact .contact-method .column-box a:hover .icon img.icon { display: none;}
  .page-about-6-contact .contact-method .column-box a:hover .icon img.icon-over { width: 120px; height: auto; margin: 0 auto; display: block;}
  .page-about-6-contact .contact-method .column-box a .text-1 { width: 100%; padding: 35px 0 0 0; color: #333; font-size: 1.6rem; font-weight: 500; line-height: 1.2em; text-align: center;}
  .page-about-6-contact .contact-method .column-box a .text-2 { width: 100%; padding: 20px 0 0 0; color: #333; font-size: 1.6rem; font-weight: 500; line-height: 1.2em; text-align: center;}
  .page-about-6-contact .contact-method .column-box a .text-1 span.orange, 
  .page-about-6-contact .contact-method .column-box a .text-2 span.orange { color: #ff6700;}

  .page-about-6-contact-map { clear: both; width: 100%; margin: 75px 0 0 0; overflow: hidden;}
  .page-about-6-contact-map img { width: 240%; height: auto; margin: 0 0 0 -70%;}


  /************ section#page-course ************/

  section#page-course-1 { clear: both; width: 100%; padding: 80px 20px; box-sizing: border-box; background-image: url("../images/page_course_1_bg.jpg"); background-repeat: no-repeat; background-size: 160% auto; background-position: center center;}

  .page-course-1-text { width: 100%; padding: 0 20px; font-size: 1.6rem; line-height: 1.8em; text-align: center; box-sizing: border-box;}


  section#page-course-2 { clear: both; width: 100%;}

  .page-course-2-column { width: 100%; position: relative;}
  .page-course-2-column img.pic-bg { width: 100%; height: auto; position: relative; z-index: 1;}
  .page-course-2-column .course-text { width: 100%; height: 100%; color: #fff; font-size: 8vw; font-weight: 500; display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; z-index: 2;}


  section#page-course-3 { clear: both; width: 100%; padding: 80px 0 80px 0; box-sizing: border-box; background-image: url("../images/page_course_3_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center top;}

  .page-course-3-target { width: 100%; position: relative;}
  
  .page-course-3-target .course-target-box-y { width: 70vw; padding: 4vw 0; margin: 0 auto; border: 6px #ffc000 solid; border-radius: 30px; background-color: #fff; position: relative;}
  .page-course-3-target .course-target-box-y .target-title { width: 30vw; padding: 2vw 0; color: #fff; font-size: 5vw; font-weight: 600; border-radius: 20px 0 30px 0; background-color: #ffc000; display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; z-index: 2;}
  .page-course-3-target .course-target-box-y .sub-title { width: 50vw; padding: 10vw 0 1vw 0; margin: 0 auto; color: #333; font-size: 4vw; font-weight: 500; line-height: 1em; text-align: center; border-bottom: 5px #ffc000 solid;}
  .page-course-3-target .course-target-box-y .target-full .column-box .dot-y { width: 3vw; height: 3vw; margin: 0 auto; border: 1vw #ffc000 solid; border-radius: 100%; background-color: #fff; box-sizing: border-box; display: block;}
  
  .page-course-3-target .course-target-box-y .sub-intro, 
  .page-course-3-target .course-target-box-g .sub-intro, 
  .page-course-3-target .course-target-box-o .sub-intro { width: 100%; padding: 1.5vw 0 0 0; margin: 0 auto; color: #774418; font-size: 2.4vw; text-align: center;}
  .page-course-3-target .course-target-box-y .target-full, 
  .page-course-3-target .course-target-box-g .target-full, 
  .page-course-3-target .course-target-box-o .target-full { width: 100%; padding: 0 1.5vw; margin: 4vw 0 0 0; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap; box-sizing: border-box;}
  .page-course-3-target .course-target-box-y .target-full .column-box, 
  .page-course-3-target .course-target-box-g .target-full .column-box, 
  .page-course-3-target .course-target-box-o .target-full .column-box { width: calc(100% / 2 - 2vw); margin: 0 1vw 2vw 1vw; position: relative;}
  .page-course-3-target .course-target-box-y .target-full .column-box .text, 
  .page-course-3-target .course-target-box-g .target-full .column-box .text, 
  .page-course-3-target .course-target-box-o .target-full .column-box .text { width: 100%; padding: 0.5vw 0 0 0; color: #333; font-size: 3vw; font-weight: 500; line-height: 1em; text-align: center; position: absolute; top: 3.6vw; left: 0; z-index: 2;}
  .page-course-3-target .course-target-box-y .target-full .column-box .illu-box, 
  .page-course-3-target .course-target-box-g .target-full .column-box .illu-box, 
  .page-course-3-target .course-target-box-o .target-full .column-box .illu-box { width: 100%; margin: 3vw 0 0 0; padding: 5vw 0; border-radius: 20px; background-color: #fdfce5; position: relative; z-index: 1;}
  .page-course-3-target .course-target-box-y .target-full .column-box .illu-box img, 
  .page-course-3-target .course-target-box-g .target-full .column-box .illu-box img, 
  .page-course-3-target .course-target-box-o .target-full .column-box .illu-box img { width: 20vw; height: auto; margin: 0 auto;}
  .page-course-3-target .course-target-box-y .target-full .column-box .intro, 
  .page-course-3-target .course-target-box-g .target-full .column-box .intro, 
  .page-course-3-target .course-target-box-o .target-full .column-box .intro { width: 100%; padding: 1.5vw 1vw; color: #333; font-size: 2.6vw; line-height: 1.4em; box-sizing: border-box;}
  
  .page-course-3-target .course-target-box-g { width: 70vw; padding: 4vw 0; margin: 0 auto; border: 6px #00bf9f solid; border-radius: 30px; background-color: #fff; position: relative;}
  .page-course-3-target .course-target-box-g .target-title { width: 30vw; padding: 2vw 0; color: #fff; font-size: 5vw; font-weight: 600; border-radius: 0 0 30px 0; background-color: #00bf9f; display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; z-index: 2;}
  .page-course-3-target .course-target-box-g .sub-title { width: 50vw; padding: 10vw 0 1vw 0; margin: 0 auto; color: #333; font-size: 4vw; font-weight: 500; line-height: 1em; text-align: center; border-bottom: 5px #00bf9f solid;}
  .page-course-3-target .course-target-box-g .target-full .column-box .dot-g { width: 3vw; height: 3vw; margin: 0 auto; border: 1vw #00bf9f solid; border-radius: 100%; background-color: #fff; box-sizing: border-box; display: block;}
  
  .page-course-3-target .course-target-box-o { width: 70vw; padding: 4vw 0; margin: 0 auto; border: 6px #ff6700 solid; border-radius: 30px; background-color: #fff; position: relative;}
  .page-course-3-target .course-target-box-o .target-title { width: 30vw; padding: 2vw 0; color: #fff; font-size: 5vw; font-weight: 600; border-radius: 0 0 30px 0; background-color: #ff6700; display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; z-index: 2;}
  .page-course-3-target .course-target-box-o .sub-title { width: 50vw; padding: 10vw 0 1vw 0; margin: 0 auto; color: #333; font-size: 4vw; font-weight: 500; line-height: 1em; text-align: center; border-bottom: 5px #ff6700 solid;}
  .page-course-3-target .course-target-box-o .target-full .column-box .dot-o { width: 3vw; height: 3vw; margin: 0 auto; border: 1vw #ff6700 solid; border-radius: 100%; background-color: #fff; box-sizing: border-box; display: block;}

  img.page-course-3-arrow-prev { /*width: 80px;*/width: 14vw; height: auto; position: absolute; top: 60vw; left: 3vw; z-index: 99; cursor: pointer;}
  img.page-course-3-arrow-next { /*width: 80px;*/width: 14vw; height: auto; position: absolute; top: 60vw; right: 3vw; z-index: 99; cursor: pointer;}

  .page-course-3-intro { clear: both; width: 90%; margin: 16vw auto 0 auto; position: relative;}
  .page-course-3-intro .course-intro-box { width: 100%; height: 100%; padding: 6vw 5.5vw 0 4vw; box-sizing: border-box; position: absolute; top: 0; left: 0; z-index: 2;}
  .page-course-3-intro .course-intro-box img.logo { width: 36vw; height: auto; margin: 0 auto;}
  .page-course-3-intro .course-intro-box .text-pc { display: none;}
  .page-course-3-intro .course-intro-box .text-mo { width: 100%; padding: 5vw 0 0 0; color: #333; font-size: 5.2vw; font-weight: 500; line-height: 1.6em; box-sizing: border-box;}
  
  img.page-course-3-intro-bg { display: none;}
  img.page-course-3-intro-bg-mo { width: 100%; height: auto; position: relative; z-index: 1;}

  
  /************ section#page-news ************/

  section#page-news { clear: both; width: 100%; padding: 0 20px 120px 20px; box-sizing: border-box; background-color: #fdfce5;}

  .page-news-list-full { width: 100%;}
  .page-news-list-full .title-more { width: 100%; padding: 50px 0;}
  .page-news-list-full .title-more .title-box { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-news-list-full .title-more .title-box img.icon { width: 53px; height: auto; margin: 0 15px 0 0;}
  .page-news-list-full .title-more .title-box .title { width: calc(100% - 53px - 15px);}
  .page-news-list-full .title-more .title-box .title span.style-b { color: #774418; font-size: 2.6rem; line-height: 2rem; font-weight: 600;}
  .page-news-list-full .title-more .title-box .title span.style-s { padding: 20px 0 0 0; color: #808080; font-size: 1.6rem; letter-spacing: 0.1em; display: block;}

  .page-news-list-full .news-list { width: 100%;}
  .page-news-list-full .news-list .box { width: 100%;}
  .page-news-list-full .news-list a.news-box { width: 100%; padding: 20px 0; text-decoration: none; border-bottom: 1px #c9c9c9 solid; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-news-list-full .news-list a.news-box:last-child { border-bottom: 0;}
  .page-news-list-full .news-list a.news-box .date { width: 100%; padding: 0 0 10px 0; color: #333; font-size: 1.4rem; font-weight: 500;}
  .page-news-list-full .news-list a.news-box .title { width: calc(100% - 20px); color: #333; font-size: 1.4rem;}
  .page-news-list-full .news-list a.news-box .icon { width: 20px; color: #333; font-size: 1.2rem; text-align: right;}
  .page-news-list-full .news-list a.news-box:hover .date, 
  .page-news-list-full .news-list a.news-box:hover .title, 
  .page-news-list-full .news-list a.news-box:hover .icon { color: #ff6700;}

  ul.page-num { clear: both; width: 100%; padding: 0; margin: 40px 0 0 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  ul.page-num li { padding: 0 5px 10px 5px; margin: 0;}
  ul.page-num li a { padding: 5px 10px; color: #ff6700; font-size: 1rem; text-decoration: none; border: 1px #ff6700 solid; background-color: #fff; display: block;}
  ul.page-num li a:hover { color: #fff; background-color: #ff6700;}
  ul.page-num li a.sel { color: #fff; background-color: #ff6700;}


  .news-content { clear: both; width: 100%;}
  .news-content .news-title { width: 100%; padding: 0 0 20px 0;}
  .news-content .news-title .date { width: 100%; color: #333; font-size: 1.1rem; text-align: right;}
  .news-content .news-title .title { width: 100%; color: #333; font-size: 1.8rem; font-weight: 500; line-height: 1.2em;}
  .news-content .content { clear: both; width: 100%; padding: 40px 0; color: #333; font-size: 1.2rem; line-height: 1.8em; border-bottom: 1px #ff6700 solid; border-top: 1px #ff6700 solid;}
  .news-content .content a { color: #ff6700; border-bottom: 1px #ff6700 dashed;}
  .news-content .content img { max-width: 100%; height: auto;}

  .goback-bt { clear: both; width: 100%; padding: 60px 0 0 0;}
  .goback-bt a { width: 160px; padding: 10px 0; margin: 0 auto; color: #fff; font-size: 1.1rem; text-align: center; text-decoration: none; border-radius: 30px; border: 1px #ff6700 solid; background-color: #ff6700; display: block;}
  .goback-bt a:active { color: #ff6700; background-color: #fff;}


  /************ section#page-appointment ************/

  section#page-appointment { clear: both; width: 100%; padding: 60px 20px 90px 20px; box-sizing: border-box; background-image: url("../images/hp_3different_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: center top;}

  .page-appointment-title { width: 220px; margin: 0 auto; color: #ff6700; font-size: 3.2rem; font-weight: 500; text-align: center; border-bottom: 5px #ff6700 solid;}

  .page-appointment-form { clear: both; width: 100%; margin: 60px 0 0 0;}
  .page-appointment-form .column-helf { width: 100%;}
  .page-appointment-form .column-helf .caption { width: 100%; color: #333; font-size: 1.2rem; font-weight: 500;}
  .page-appointment-form .column-helf input[type=text], 
  .page-appointment-form .column-helf input[type=tel] { width: 100%; padding: 10px; margin: 10px 0 30px 0; color: #333; font-size: 1.2rem; border: 0; border-bottom: 2px #ff6700 solid; background-color: transparent; box-sizing: border-box;}
  .page-appointment-form textarea { width: 100%; height: 200px; padding: 10px; margin: 10px auto 30px auto; color: #333; font-size: 1.2rem; border: 0; border: 2px #ff6700 solid; background-color: #fff; box-sizing: border-box;}
  .page-appointment-form .submit-bt { width: 100%; margin: 20px 0 0 0; text-align: center;}
  .page-appointment-form .submit-bt input[type=submit], 
  .page-appointment-form .submit-bt input[type=button] { width: 160px; padding: 10px 0; color: #fff; font-size: 1.2rem; border: 2px #ff6700 solid; border-radius: 30px; background-color: #ff6700; box-sizing: border-box; cursor: pointer;}
  .page-appointment-form .submit-bt input[type=submit]:hover, 
  .page-appointment-form .submit-bt input[type=button]:hover { color: #ff6700; border: 2px #ff6700 solid; background-color: #fff;}

  .page-appointment-contact { clear: both; width: 100%; padding: 40px 0 0 0; margin: 60px 0 0 0; color: #333; font-size: 1.2rem; line-height: 2em; border-top: 1px #ff6700 solid;}
  .page-appointment-contact span.title { font-size: 1.6rem; font-weight: 500;}


  /************ footer ************/

  footer { clear: both; width: 100%; padding: 50px 40px; box-sizing: border-box; background-color: #774418;}

  ul.footer-nav { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  ul.footer-nav li { padding: 0 15px 20px 15px; margin: 0;}
  ul.footer-nav li a { color: #fff; font-size: 1.1rem; text-decoration: none;}
  ul.footer-nav li a:hover { border-bottom: 2px #fff solid;}

  .footer-info-full { clear: both; width: 100%; margin: 50px 0 0 0;}
  .footer-info-full img.footer-logo { width: 300px; height: auto; margin: 0 auto;}
  .footer-info-full .add-info { width: 100%; margin: 30px 0 0 0; color: #fff; font-size: 1.4rem; line-height: 1.2em;}
  .footer-info-full .add-info div.col-1 { width: 100%; margin: 0 0 20px 0; display: flex; justify-content: center; align-items: center;}
  .footer-info-full .add-info div.col-2 { width: 100%; margin: 0 0 20px 0; display: flex; justify-content: center; align-items: center;}
  .footer-info-full .add-info div.col-3 { width: 100%; margin: 0 0 20px 0; display: flex; justify-content: center; align-items: center;}
  .footer-info-full .add-info div.col-4 { width: 100%; display: flex; justify-content: center; align-items: center;}
  .footer-info-full .add-info div img.info-icon { width: 25px; height: auto; margin: 0 10px 0 0;}

  .copyright { clear: both; width: 100%; margin: 50px 0 0 0; color: #fff; font-size: 0.9rem; text-align: center;}
  

}