@charset "UTF-8";

/*
Theme Name: Twenty Twenty-One
Theme URI: https://wordpress.org/themes/twentytwentyone/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Twenty-One is a blank canvas for your ideas and it makes the block editor your best brush. With new block patterns, which allow you to create a beautiful layout in a matter of seconds, this theme’s soft colors and eye-catching — yet timeless — design will let your work shine. Take it for a spin! See how Twenty Twenty-One elevates your portfolio, business website, or personal blog.
Requires at least: 5.3
Tested up to: 6.9
Requires PHP: 5.6
Version: 2.7
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyone
Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, blog, portfolio

Twenty Twenty-One WordPress Theme, (C) 2020 WordPress.org
Twenty Twenty-One is distributed under the terms of the GNU GPL.
*/

@import url('./layout.css');

/* Variables */
:root {
    --global--color--yellow: #e2ab00;
    --global--color--black: #000000;
    --global--color--white: #ffffff;
    --global--color--green: #00552f;
    --global--color--orange: #d85f2d;
    --global--color--lightgreen: #f0f4ef;
    --global--color--lightgray: #f0f4ef;
    --global--weight--bold: 700;
    --global--weight--black: 900;

    --header--height--pc: 11rem;
    --header--height--sp: 9rem;
    --header--height--menu: 4.5rem;

    --header--menu--line: 3rem;

    --global--fonts---roboto: "Roboto", sans-serif;

}
html, body{
  font-family: "Zen Kaku Gothic New", sans-serif;
  background-color: var(--global--color--white);
  font-weight: 600;
}

body{
  overflow-x: hidden;
}

.roboto {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
  font-variation-settings:"width" 100;
}

.mincho {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

.alfa {
  font-family: "Alfa Slab One", serif;
  font-weight: 400;
  font-style: normal;
}

.bebas {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-style: normal;
}



p, img, input{ transition: .5s all; }

.anchor{ position: absolute; margin-top: calc(var(--header--height--pc) * -1); padding-top: calc(var(--header--height--pc)); }


.inner{ max-width: 120rem; margin: 0 auto; }


.button a{ display: flex; align-items: center; justify-content: center; background-color: var(--global--color--white); border: var(--global--color--green) .1rem solid; border-radius: 10rem; color: var(--global--color--green); height: 4rem; }
.button a:hover{ color: var(--global--color--white); background-color: var(--global--color--green); }




section.contents .button{ display: flex; justify-content: center; }
section.contents .button span{ display: flex; justify-content: center; align-items: center; justify-content: center; background-color: var(--global--color--white); border: var(--global--color--green) .1rem solid; border-radius: 10rem; color: var(--global--color--green); height: 4rem; max-width: 20rem;
  width: 100%;
}
section.contents a:hover .button span{ color: var(--global--color--white); background-color: var(--global--color--green); }




header{ position: fixed; width: 100%; height: 11rem; background-color: var(--global--color--white); z-index: 1001; }
header .header-inner{ height: 11rem; display: flex; align-items: center; justify-content: center; margin: 0 0 0 1.5rem; }
header .header-inner .logo{ margin-right: 4rem; }
header .header-inner .logo img{ width: 11rem; }

header .header-inner .menu ul{ display: flex; }
header .header-inner .menu ul li a{ padding: 0 1.5rem 2.5rem; display: flex; align-items: center; flex-direction: column; justify-content: flex-end; height: var(--header--height--pc); font-weight: var(--global--weight--black); color: var(--global--color--green); }
header .header-inner .menu ul li a span{ font-family: var(--global--fonts---roboto); font-weight: var(--global--weight--bold); }
/*header .header-inner .menu ul li a:hover{ color: var(--global--color--white); background-color: var(--global--color--green); }*/




/* page-title */
.page-title{ position: relative; background: url('./assets/images/guide/main.webp') no-repeat 50% 50% / cover; 
    height: calc(80vw - 11rem);
    max-height: 54rem;
    overflow: hidden; }

.page-title .line{ width: 100%; position: absolute; left: 0; bottom: -.5rem; font-size: 7.5rem; color: var(--global--color--yellow); text-align: center; font-weight: var(--global--weight--black); line-height: 1; }
.page-title .line span{ content: ""; width: 100%; height: 1rem; background-color: var(--global--color--yellow); display: block; bottom: .5rem; left: 0; position: absolute; }





main{ padding-top: var(--header--height--pc); }






section.banneer{ margin-top: 6rem; }
section.banneer ul{ max-width: 70.0rem; width: 100%; display: flex; flex-direction: column; margin: 0 auto; align-items: center; }
section.banneer ul li{ position: relative; }
section.banneer ul li:not(:last-child){ margin-bottom: 2.5rem; }
section.banneer ul li a{ max-width: 55.4rem; width: 100%; }
section.banneer ul li a img{ width: 100%; }
section.banneer ul li a:hover{ transform: translateY(-.5rem); }



section.snsbox{ padding: 7rem 0; }
section.snsbox .inner{ max-width: 120rem;  margin: 0 auto 3rem; }
section.snsbox .newsbox{ width: 50%; }
section.snsbox .instagrambox{ width: 50%;  }
section.snsbox h3{ font-size: 2rem; color: var(--global--color--green); font-weight: var(--global--weight--bold); }
section.snsbox h3 span{ font-size: 3.0rem; font-weight: var(--global--weight--black); margin-right: 1.5rem; }


section.snsbox .snsbox-header{ display: flex; justify-content: space-between; }
section.snsbox .snsbox-header h3{ width: 50%; }


section.snsbox .snsbox-body{ display: flex; border: var(--global--color--green) .1rem solid; }
section.snsbox .instagrambox-inbox{ border-left: var(--global--color--green) .1rem solid; }


section.snsbox .newsbox-inbox a{ margin-bottom: 2%; display: block; }
section.snsbox .newsbox-inbox a dl{ display: flex; }
section.snsbox .newsbox-inbox a dl dt{ width: 32%; }
section.snsbox .newsbox-inbox a dl span{
    width: 100%;
    display: block;
    padding-top: 100%;
    position: relative;
}
.newsbox-inbox a dl dd{ width: 64%; margin-left: 4%; }

.newsbox-inbox a dl span img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;

}




section.snsbox .newsbox-inbox{ padding: 4rem; /*border: var(--global--color--green) .1rem solid;*/  }


section.snsbox .instagrambox-inbox{
  padding: 4rem;
}


section.snsbox .instagrambox-inbox ul{ display: flex; flex-wrap: wrap; }
section.snsbox .instagrambox-inbox ul li{ width: 32%; background-color: #ccc; margin-bottom: 2%; }
section.snsbox .instagrambox-inbox ul li span{  width: 100%; display: block; padding-top: 100%; background: #c7b299; }
section.snsbox .instagrambox-inbox ul li:not(:nth-child(3n)){ margin-right: 2%; }
section.snsbox .newsbox-inbox,
section.snsbox .instagrambox-inbox{ min-height: 61.2rem; }
section.snsbox .button a{ max-width: 25rem; width: 100%; margin: 0 auto; font-size: 1.6rem; }










.menus-box {
  opacity: 0;
  transition: .5s all;
    visibility: hidden;
    height: 0;
}
.menus-box.show {
    opacity: 1 !important;
    height: auto;
    visibility: visible;
}




.trackman03{ padding: 10rem 0 5rem; background-color: #cccccc; }

.trackman03 .inner{ display: flex; justify-content: flex-end; }
.trackman03 .bg,
.trackman03 .text{ width: 50%; }


main{ overflow-x: hidden; }

.trackman03 .bg span {
  display: block;
  margin-left: calc((50vw  - 100%) * -1);
}



.trackman03 .text h3{ margin-left: 4rem; font-size: 4.8rem; font-weight: var(--global--weight--black); margin-bottom: 1rem; }
.trackman03 .text .msg{ margin-left: 4rem; }


section.message{ text-align: center; color: var(--global--color--green); }
section.message h3{ margin-bottom: 3rem; font-size: 2.4rem; font-weight: var(--global--weight--black); }
section.message p{ text-align: center; font-size: 1.4rem; }

.trackman03 .text .ph{ margin-top: 3rem; max-width: 49rem; margin-left: -5rem; }


section.main{ overflow: hidden; max-height: 50rem; }


section.main .slick-track {
  display: flex;
}

section.main .slick-slide{ object-fit: cover; max-width: 50%; }
section.main .slick-slide img{ width: 100%;  }
.slick-initialized .slick-slide{ display: grid; }

section.main .m01{ background: url('./assets/images/top/main01.webp') no-repeat 50% 50% / cover; position: relative; }
section.main .m02{ background: url('./assets/images/top/main02.webp') no-repeat 50% 50% / cover; position: relative; }
section.main .m03{ background: url('./assets/images/top/main03.webp') no-repeat 50% 50% / cover; position: relative; }
section.main .m04{ background: url('./assets/images/top/main04.webp') no-repeat 50% 50% / cover; position: relative; }
section.main .m05{ background: url('./assets/images/top/main05.webp') no-repeat 50% 50% / cover; position: relative; }
section.main .m06{ background: url('./assets/images/top/main06.webp') no-repeat 50% 50% / cover; position: relative; }

section.main .m01 .mt01{ width: 42.0rem; position: absolute; right: 2rem; top: 2rem; }
section.main .m01 .mt02{ width: 31.0rem; position: absolute; right: 2rem; bottom: 2rem; }

section.main .m02 .mt01{ width: 42.5rem; position: absolute; left: 4rem; bottom: 2rem; }

section.main .m03 .mt01{ width: 48.4rem; position: absolute; right: 2rem; bottom: 2rem; }

section.main .m04 .mt01{ width: 43.6rem; position: absolute; right: 2rem; bottom: 2rem; }

section.main .m05 .mt01{ width: 48.4rem; position: absolute; left: 2rem; top: 4rem; }

section.main .m06 .mt01{ width: 48.4rem; position: absolute; left: 2rem; bottom: 4rem; }


section.main .m-inner{ position: relative; max-width: 120rem; margin: 0 auto; width: 100%; height: 100%; padding: 2rem; }






section.menus ul{ display: flex; justify-content: center; }
section.menus ul li a{ display: flex; width: 18rem; height: 7.1rem; background-color: var(--global--color--green); color: var(--global--color--white); font-size: 1.6rem; justify-content: center; align-items: center; text-align: center; }
section.menus ul li:nth-child(2n) a{ background-color: #c7b299; }
section.menus .menus-box-texts{ background-color: #eef2ed; position: relative; height: 100%; min-height: 610px; display: flex; align-items: center; }
section.menus .menus-box-texts .inners{ padding: 8rem 0; display: flex; align-items: flex-start; max-width: 130rem; margin: 0 auto; padding: 8rem 2rem; }
section.menus .menus-box-texts .inners .ph{ width: 50%; }
section.menus .menus-box-texts-inbox{ width: calc(50% - 6rem); padding-left: 6rem; padding-top: 2rem; }

section.menus .mb01 .menus-box-texts .inners{ padding: 3rem 2rem 10rem; }
section.menus .mb01 .menus-box-texts-inbox{ width: calc(50%); }



section.menus .mb02 .menus-box-texts .inners{ flex-direction: row-reverse; padding-top: 5rem; }
section.menus .mb02 .menus-box-texts-inbox{ padding-left: 0; padding-right: 6rem; display: flex; justify-content: flex-end; }

section.menus .mb02 .icons{ margin-top: 12.5rem; }
section.menus .mb02 .icons ol{ display: flex; }
section.menus .mb02 .icons ol li:not(:last-child){ margin-right: 3rem; }
section.menus .mb02 .icons ol li a{ max-width: 8rem; width: 100%; display: block; }

section.menus .menus-box-texts h3{ font-size: 4.0rem; color: var(--global--color--yellow); font-weight: var(--global--weight--black); line-height: 1; margin-bottom: 1.5rem; }

section.menus .menus-box-texts h4,
section.menus .menus-box-texts p{ color: var(--global--color--green); }

section.menus .menus-box-texts h4{ font-size: 2rem; font-weight: var(--global--weight--bold); margin-bottom: 1.0rem; }


section.menus .mb02 .menus-box-texts .inners .ph{ width: 65%; }

section.menus .mb03 .menus-box-texts .inners .ph{ width: 39%; height: 450px; text-align: center; padding-left: 1%; }
section.menus .mb03 .menus-box-texts-inbox{ width: calc(61% - 7rem); padding-left: 7rem; }




section.contents{ display: flex; margin: 18rem auto; }
section.contents div{ width: 50%; }
section.contents div img{ width: 100%; }
section.contents div dl{ margin-top: -4rem; text-align: center; }
section.contents div dl dt{ color: var(--global--color--yellow); font-size: 7.5rem; font-weight: var(--global--weight--bold); line-height: 1; text-align: center; }
section.contents div dl dd{ font-size: 2rem; color: var(--global--color--green); margin: 1.5rem 0 2rem; font-weight: var(--global--weight--bold); }
section.contents div dl dd a{ max-width: 25rem; width: 100%; margin: 0 auto; font-size: 1.6rem; }


.mb01 .icon{ text-align: right; margin-top: 0.5rem; }
.mb02 .icon{ margin-top: 3.5rem; width: 70%; }
.mb03 .icon{ margin-top: 3.5rem; width: 40%; display: table; margin-left: auto; }







section.lesson-top .button{ margin: 10px 0 0 250px; }
section.lesson-top .button a{ width: 25rem; }


section.lesson-top::after{
  content: "";
  position: absolute;
  right: 0;
  width: 50%;
  height: 100%;
  top: 0;
  background: url(./assets/images/top/lesson-top-ph01.webp) no-repeat 100% / 100% auto;
}
section.lesson-top{ background: url('./assets/images/top/lesson-top-bg.webp') no-repeat 0 50% / 143.2rem auto;  position: relative; }

section.lesson-top .inner{ display: flex; padding: 120px 0; }
.lesson-top-box{ width: 50%; }

.lesson-top-box p{ color: var(--global--color--white); }

section.lesson-top h3{ font-size: 4.6rem; line-height: 1.4; color: #e2ab00; font-weight: 700; }

section.map iframe{ width: 100%; height: 43rem; display: block; }




section.sns{ display: flex; height: 10rem; background-color: var(--global--color--green); }
section.sns ul{ display: flex; justify-content: center; max-width: 148rem; margin: 0 auto; align-items: center; width: 100%; }
section.sns ul li:not(:last-child){ margin-right: 5rem; }
section.sns ul li a{ color: var(--global--color--white); font-weight: var(--global--weight--bold); display: flex; align-items: center; }
section.sns ul li a span{ font-size: 2.2rem; }
section.sns ul li a img{ height: 3.5rem; margin-right: .5rem; }





footer{ padding: 6rem 0 1rem 0; }
footer .footer-inner{ margin: 0 auto; max-width: 110rem; padding: 0 1.5rem; }

footer .footer-information{ display: flex; justify-content: space-between; margin-bottom: 2.5rem; align-items: center; }
footer .footer-information .information{ width: calc(100% - 36rem); display: flex; align-items: center; padding-bottom: 5rem; border-right: var(--global--color--green) .1rem solid; }
footer .footer-information .information .logo{ width: 14rem; margin-right: 4rem; }
footer .footer-information .information dl{ line-height: 1.6; }
footer .footer-information .information dl dt{ font-size: 2.7rem; color: var(--global--color--green); font-weight: var(--global--weight--bold); }

footer .footer-information .tel-box{ max-width: 36rem; width: 100%; text-align: right; margin-right: 2rem; padding-bottom: 5rem; }
footer .footer-information .tel-box a span{ display: block; color: var(--global--color--green); font-size: 2.9rem; font-weight: 500; font-family: var(--global--fonts---roboto); line-height: 1.2; }

footer .footer-under{ display: flex; justify-content: space-between; align-items: center; }
footer .footer-under a{ font-size: 1.6rem; }
footer .footer-under a:hover{ font-weight: var(--global--weight--bold); color: var(--global--color--green); }
footer .footer-under small{ color: var(--global--color--green); font-size: 1.4rem; letter-spacing: 0; }








/* ------------------------------------------------------------------------------------------------------------------------------------------

  PLAY GUIDE

------------------------------------------------------------------------------------------------------------------------------------------ */
.guide-wrapper .page-title{ background: url('./assets/images/guide/main.webp') no-repeat 50% 50% / cover; }


section.page-header{ background-color: var(--global--color--lightgray); padding:5rem 0; }
section.page-header .inner{ display: flex; align-items: flex-end; justify-content: space-between; }

section.page-header h3{ font-size: 2.8rem; font-weight: var(--global--weight--black); color: var(--global--color--green); line-height: 1.6; margin-bottom: 2.5rem; }
section.page-header h3 span{ font-size: 4.5rem; display: block; font-weight: var(--global--weight--black); color: var(--global--color--yellow); }


section.page-header .text{ width: calc(100% - 61.8rem); font-weight: var(--global--weight--bold); line-height: 1.6; }

section.page-header .ph{ max-width: 61.8rem; width: 100%; }
section.page-header .ph img{ max-width: 100%; width: 100%; }


/* timeschedule */
section.time-shcedule .inner,
section.price .inner{ max-width: 84rem; padding-top: 4.5rem; padding-bottom: 15rem; }


section.guide-box h3{ color: var(--global--color--green); font-weight: var(--global--weight--black);font-size: 2rem; line-height: 1.4; text-align: center; margin-bottom: 3.5rem; }
section.guide-box h3 span{ font-size: 4.4rem; font-weight: var(--global--weight--black); display: block; }

section.price{ font-weight: var(--global--weight--bold); }
section.price .prices .tit{ font-size: 2.5rem; color: var(--global--color--green); margin-bottom: .8rem; }
section.price .prices table{ width: 100%; table-layout: fixed; }
section.price .prices table tr th{ background-color: var(--global--color--green); color: var(--global--color--white); padding: .8rem 0; border-bottom: var(--global--color--white) .3rem solid; }
section.price .prices table tr th:not(:last-child){ border-right: var(--global--color--white) .3rem solid; }
section.price .prices table tr td{ background-color: var(--global--color--lightgreen); color: var(--global--color--green); padding: .8rem 0; text-align: center; border-bottom: var(--global--color--white) .3rem solid; }
section.price .prices table tr td:not(:last-child){ border-right: var(--global--color--white) .3rem solid; }
section.price .prices table tr td.none{ background: transparent; }

section.price .prices:not(:first-child){ margin-top: 9rem; }


section.price .prices.prices03{ width: 75%; }
section.price .prices .remarks{ font-size: 1.4rem; text-align: right; color: var(--global--color--green); }


.time-shcedule .times{ font-weight: var(--global--weight--bold); }
.time-shcedule .times:not(:last-child){ margin-bottom: 4.5rem; }
.time-shcedule .times .remarks{ margin-top: 1rem; font-size: 1.4rem; color: var(--global--color--green); }
.time-shcedule .times dl{ width: 100%; display: flex; align-items: center; margin-bottom: .5rem; color: var(--global--color--green); }
.time-shcedule .times dl dt{ background-color: var(--global--color--lightgreen); width: 25%; margin-right: .8rem; padding: .8rem 0; text-align: center; }
.time-shcedule .times dl dd{ background-color: var(--global--color--lightgreen); width: 75%; padding: .8rem 0; text-align: center; }
.time-shcedule .times .tit{ font-size: 2.4rem; display: flex; align-items: center; height: 6.6rem; color: var(--global--color--white); background-color: var(--global--color--green); padding: 0 1.5rem; margin-bottom: 2rem; }
.time-shcedule .times .tit span{ width: 4.7rem; margin-right: 1rem; display: flex; justify-content: flex-start; text-align: left; }
.time-shcedule .times .tit span img{ width: 100%; }

.time-shcedule .times .tit.tit03 span img{ height: 1.8rem; }

section.service .inner{ max-width: 99rem; }



.service-boxes{ border-top: var(--global--color--green) .1rem solid; padding-top: 7.5rem; padding-bottom: 12rem; }
.service-boxes h3{ font-size: 2.5rem; color: var(--global--color--green); font-weight: var(--global--weight--black); margin-bottom: 2.5rem; }

.service-box{ display: flex; justify-content: space-between; }

.service-box-line{ border-top: var(--global--color--green) .1rem dashed; padding-top: 2.5rem; margin-top: 3rem; }

.service-box .ph{ width: 22rem; text-align: center; }
.service-box .ph span{ display: block; font-size: 1.4rem; text-align: center; font-weight: var(--global--weight--bold); color: var(--global--color--green); margin-top: .8rem; }
.service-box .ph strong{ display: block; }
.service-box .ph strong img{ max-width: 100%; }
.service-box .ph strong.sb06-01{ margin-bottom: 5rem; }
.service-box .ph img{ max-width: 100%; }

.service-box .text{ width: calc(100% - 25rem); }
.service-box .text h4{ font-size: 2.0rem; font-weight: var(--global--weight--bold); line-height: 1; color: var(--global--color--white); background-color: var(--global--color--green); padding: .7rem 1.5rem; border-radius: .3rem; display: inline-flex; margin-bottom: 2.5rem; }
.service-box .text h4.upper{ margin-top: 3rem; }
.service-box .text h4.orange{ background-color: var(--global--color--orange); }
.service-box .text p{ line-height: 1.4; color: var(--global--color--green); font-weight: var(--global--weight--bold); }
.service-box .text p span{ font-size: 1.4rem; }


.sb05{ margin-bottom: 12rem; }

.sb01 .ph img{ width: 80%; }
.sb02 .ph img{ width: 70%; }
.sb03 .ph img{ width: 80%; }
.sb04 .ph img{ width: 65%; }












/* ------------------------------------------------------------------------------------------------------------------------------------------

  FACILITY

------------------------------------------------------------------------------------------------------------------------------------------ */
.facility-wrapper .page-title{ background: url('./assets/images/facility/main.webp') no-repeat 50% 50% / cover; }


img{ max-width: 100%; }

.facility-wrapper .fac01{ padding: 7rem 0; }
.facility-wrapper .fac01 .messagebox{ display: flex; }
.facility-wrapper .fac01 .messagebox .ph{ width: 64.8rem; }
.facility-wrapper .fac01 .messagebox .ph img{ max-width: 100%; }
.facility-wrapper .fac01 .messagebox .textbox{ width: calc(100% - 64.8rem); padding-right: 3rem; }

.facility-wrapper .fac01 .messagebox *{ color: var(--global--color--green); }
.facility-wrapper .fac01 .messagebox h4{ font-size: 1.8rem; margin-top: 2rem; margin-bottom: 3.5rem; font-weight: var(--global--weight--black); }
.facility-wrapper .fac01 .messagebox p{ font-size: 1.4rem; }


.facility-wrapper .inbox01{ display: flex; justify-content: space-between; }
.inbox01 .ph{ width: 48%; }

.inbox02{ margin: 4rem 0; }
.inbox02 *{ color: var(--global--color--green); }
.inbox02 h4{ font-size: 1.8rem; margin-bottom: 1.5rem; font-weight: var(--global--weight--black); }
.inbox02 p{ font-size: 1.4rem; }

.inbox03{ display: flex; flex-wrap: wrap; justify-content: space-between; }
.inbox03 dl{ width: 48%; margin-bottom: 4rem; }
.inbox03 dl *{ color: var(--global--color--green); }
.inbox03 dl dd strong{ display: block; margin: 2rem 0 1rem; font-weight: var(--global--weight--black); }


.fac03,
.fac04,
.fac05,
.fac06{ padding: 7.5rem 0; }

.fac03,
.fac05{ background-color: var(--global--color--green); }
.fac03 *,
.fac05 *{ color: var(--global--color--white) !important; }


.fac03 .messagebox .tit{ margin-bottom: 2.5rem; }

.fac03 p,
.fac05 p{ color: var(--global--color--white); }

.messagebox{ display: flex; justify-content: space-between; }
.messagebox .ph{ width: 50.5rem; }

.messagebox .textbox{ width: calc(100% - 40.5rem - 3rem); }

.messagebox h4{ font-size: 2.6rem; font-weight: var(--global--weight--bold); margin-bottom: 1.5rem; color: var(--global--color--green); }
.messagebox .tit{ color: var(--global--color--yellow) !important; font-weight: var(--global--weight--black); font-size: 4.4rem; line-height: 1.2; }

.fac03 .messagebox .textbox,
.fac05 .messagebox .textbox{ width: auto; }

.messagebox.mb-reverse{ flex-direction: row-reverse; }




    .fac04 .messagebox h4{ display: flex; align-items: baseline; margin-top: .5rem; }
    .fac04 .messagebox h4 img{ width: 15rem; margin-right: .5rem; }





/* ------------------------------------------------------------------------------------------------------------------------------------------

  TRACKMAN

------------------------------------------------------------------------------------------------------------------------------------------ */
.trackman-wrapper .page-title{ background: none; max-height: inherit; height: inherit; }

section.trackman01{ background-color: #db7134; padding: 6rem 0 0; }
section.trackman01 h2{ color: var(--global--color--white); font-size: 3.2rem; font-weight: var(--global--weight--bold); text-align: center; margin-bottom: 4rem; }


.trackman01-inbox{ display: flex; position: relative; justify-content: flex-end; }

.trackman02{ background-color: #333333; padding: 10rem 0; }
.trackman02 h3{ text-align: center; font-size: 4.8rem; font-weight: var(--global--weight--bold); color: var(--global--color--white); }

.trackman02 h4{ text-align: center; font-size: 3rem; color: var(--global--color--orange); font-weight: var(--global--weight--bold); margin-bottom: 2rem; }
.trackman02 p{ text-align: center; color: var(--global--color--white) !important; }


.slick-prev, .slick-next{ z-index: 10; }

.menuss-box{ opacity: 0; visibility: hidden; height: 0; }
.menuss-box.show{ opacity: 1; visibility: visible; height: auto; }

.trackman02 ul.menuss{ display: flex; justify-content: center; margin: 1.5rem 0 4rem 0; }
.trackman02 ul.menuss li:not(:last-child){ margin-right: 1.5rem; }
.trackman02 ul.menuss li a{ display: flex; justify-content: center; align-items: center; width: 22rem; height: 6rem; background-color: #999999; }
.trackman02 ul.menuss li a span{ font-size: 1.4rem; color: var(--global--color--white);
    display: flex;
    width: 80%;
    height: 100%;
    justify-content: center;
    padding-left: 2.5rem;
    background: url('./assets/images/trackman/arrow_down02.svg') no-repeat 0 50% / 3.5rem auto;
    align-items: center; }

.trackman02 ul.menuss li a.active{
  background-color: #db7134;
}

.trackman02 ul.menuss li a.active span{
    background: url('./assets/images/trackman/arrow_down01.svg') no-repeat 0 50% / 3.5rem auto;

}

.trackman02 .pads{ max-width: 77.2rem; margin: 10rem auto 0; position: relative; padding: 4rem; text-align: center; }
.trackman02 .pads::before{
  /*
  position: absolute;
    content: "";
    width: calc(100% + 120px);
    z-index: 1;
    height: 100%;
    left: -55px;
  */


}


.trackman01-inbox .textbox{ width: 40%; flex: 1; margin-right: 5rem; padding-top: 3rem; color: var(--global--color--white); }
.trackman01-inbox .ph{ width: 60%; display: flex; align-items: flex-end; }
.trackman01-inbox .ph span {
  display: block;
  margin-right: calc((60vw  - 100%) * -1);
}

.trackman01-inbox .textbox .buttons{ margin-top: 5rem; text-align: right; }
.trackman01-inbox .textbox .buttons a{ color: var(--global--color--white); display: flex; align-items: center; justify-content: flex-end; }
.trackman01-inbox .textbox .buttons a img{ width: 3.3rem; margin-left: .5rem; }

.trackman04 h3{ text-align: center; font-size: 4rem; font-weight: var(--global--weight--bold); margin-bottom: 4rem; }
.trackman04 .youtube{ max-width: 90rem; margin: 0 auto; }
.trackman04 .youtube iframe{ width: 100%; height: 100%; aspect-ratio: 16 / 9; }

.trackman04 .banner{ margin: 4rem auto 0; max-width: 60rem; }


.trackman04{ padding: 5rem 0; }








/* ------------------------------------------------------------------------------------------------------------------------------------------

  CONTACT

------------------------------------------------------------------------------------------------------------------------------------------ */
.contact-wrapper .page-title{ background: url('./assets/images/contact/main.webp') no-repeat 50% 50% / cover; }


.contact01{ padding: 10rem 0 0; }
.contact01 *{ color: var(--global--color--green); }
.contact01 h3{ text-align: center; font-size: 4.4rem; font-weight: var(--global--weight--black); margin-bottom: 3rem; }
.contact01 p{ text-align: center; line-height: 2; }


.contact02{ padding: 10rem 0 0; }
.contact02 h3{ text-align: center; font-size: 2rem; font-weight: var(--global--weight--black); margin-bottom: 3rem; color: var(--global--color--green); }
.contact02 h3 span{ font-size: 4rem; display: block; font-weight: var(--global--weight--black); line-height: 1.4; }
.contact02 p{ margin-top: 4rem; }
.contact02 p a{ color: var(--global--color--yellow); font-size: 4.8rem; font-weight: var(--global--weight--bold); text-align: center; display: block; }

.contact03{ padding: 10rem 0 0; }
.contact03 h3{ text-align: center; font-size: 2rem; font-weight: var(--global--weight--black); margin-bottom: 3rem; color: var(--global--color--green); }
.contact03 h3 span{ font-size: 4rem; display: block; font-weight: var(--global--weight--black); line-height: 1.4; }
.contact03 .msg{ text-align: center; color: var(--global--color--green); }

.contact03 .form{ margin: 5rem auto 10rem; max-width: 80rem; }
.contact03 .form dl{ display: flex; margin-bottom: 1rem; }
.contact03 .form dl dt{ width: 20rem; display: flex; justify-content: space-between; padding-top: 1rem; }
.contact03 .form dl dt span{ color: #cc0000; }
.contact03 .form dl dd{ width: calc(100% - 20rem); padding-left: 1.5rem; }
.contact03 .form dl dd input,
.contact03 .form dl dd textarea{ width: 100%; padding: 1rem 1rem; }
.contact03 .form .form-button{ margin-top: 3rem; display: flex; justify-content: center; }

.contact03 .form .form-button input{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--global--color--white);
    border: var(--global--color--green) .1rem solid;
    border-radius: 10rem;
    color: var(--global--color--green);
    width: 30rem;
    font-weight: var(--global--weight--bold);
    height: 5rem;
}
.contact03 .form .form-button input:hover{

}

.contact-line-box{ padding-bottom: 10rem; }
.contact-line-box h3.line,
.contact03 h3.line{
    display: table;
    border-bottom: var(--global--color--green) 1px solid;
    margin: 0 auto;
    text-align: center;
    font-size: 2rem;
    font-weight: var(--global--weight--black);
    color: var(--global--color--green);

}

/* 電話で問い合わせ */
.contact-tel-box{ padding: 20rem 0 0; }
.contact-tel-box{ text-align: center; color: var(--global--color--green); }
.contact-tel-box .logo{ max-width: 36.8rem; margin: 0 auto; }
.contact-tel-box .name{ font-size: 2.3rem; font-weight: var(--global--weight--black); letter-spacing: 0; margin-top: 3rem; }
.contact-tel-box .tel a{ font-size: 4.4rem; font-weight: var(--global--weight--black); color: var(--global--color--green); }

/* LINEで問い合わせ */
.contact-line-box .qr{ max-width: 13.2rem; margin: 5rem auto 0; }

/*
section.access{ background-color: var(--global--color--green); position: relative; }
section.access h3{ color: var(--global--color--white); text-align: center; font-size: 4.4rem; font-weight: var(--global--weight--black); }

section.access .inner{ padding: 10rem 0; }

section.access .access-box{ display: flex; justify-content: center; align-items: center; margin-top: 3rem; }
section.access .access-box .logo{ max-width: 18rem; width: 100%; margin-right: 7rem; }
section.access .access-box dl dt{ color: var(--global--color--yellow); font-size: 3rem; margin-bottom: .7rem; font-weight: var(--global--weight--black); }
section.access .access-box dl dd{ color: var(--global--color--white); font-size: 2.4rem; line-height: 1.6; }
*/






/* ------------------------------------------------------------------------------------------------------------------------------------------

  SCHOOL / LESSON

------------------------------------------------------------------------------------------------------------------------------------------ */
.school-wrapper .page-title{ background: url('./assets/images/school/main.webp') no-repeat 50% 50% / cover; }


section.lesson01{ padding: 5rem 0 4rem 0; }
section.lesson01 h2{ text-align: center; font-size: 5.2rem; font-weight: var(--global--weight--black); color: var(--global--color--green); letter-spacing: .3rem; }
section.lesson01 p{ text-align: center; color: var(--global--color--green); font-size: 1.4rem; }


.lesson01-inbox{ display: flex; margin-top: 4rem; justify-content: flex-end; position: relative; padding-bottom: 10rem; }
.lesson01-inbox .lesson01-inbox02{ width: 60%; }
.lesson01-inbox .lesson01-inbox01{
    background-color: var(--global--color--green);
    width: calc(42% + 5rem); 
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 3rem;
    z-index: 1;
}

.lesson01-inbox .lesson01-inbox01 *{ color: var(--global--color--white); }
.lesson01-inbox .lesson01-inbox01 h3{ font-size: 5.2rem; font-weight: var(--global--weight--black); text-align: center; line-height: 1.2; margin-bottom: 1rem; }


section.lesson02 p{ text-align: center; color: var(--global--color--green); font-size: 1.4rem; }

.lesson02-inbox .lesson02-inbox01 h3{ font-size: 5.2rem; font-weight: var(--global--weight--black); text-align: center; line-height: 1.2; margin-bottom: 3rem; color: var(--global--color--green); }
.lesson02-inbox .lesson02-inbox01 h3 span{ display: block; }

section.lesson02{ background-color: var(--global--color--green); padding: 5rem 0; }
section.lesson02 .lesson02-inbox{ display: flex; margin-top: 4rem; justify-content: flex-start; position: relative; padding-bottom: 10rem; }
section.lesson02 .lesson02-inbox .lesson02-inbox02{ width: 60%; }
section.lesson02 .lesson02-inbox .lesson02-inbox01{ background-color: var(--global--color--white); width: calc(42% + 5rem); 
    position: absolute;
    right: 0;
    bottom: 0; padding: 3rem 1rem;
    z-index: 1;
}


section.lesson03{ background-color: var(--global--color--lightgray); padding: 5rem 0; }

section.lesson03 .inner{ max-width: 120rem !important; }

section.lesson03 h3{ text-align: center; font-size: 5.2rem; font-weight: var(--global--weight--black); color: var(--global--color--green); letter-spacing: .3rem; }


.lesson_price_wrapper{ max-width: 84rem; margin: 0 auto; }

section.price .lesson_price_wrapper .prices table tr td{ background-color: var(--global--color--white); border-bottom: var(--global--color--lightgreen) .3rem solid; }
section.price .lesson_price_wrapper .prices table tr td:not(:last-child){ border-right: var(--global--color--lightgreen) .3rem solid; }
section.price .lesson_price_wrapper .prices:not(:first-child){ margin-top: 4rem; }


section.price .lesson_price_wrapper .prices .prices05{ margin-top: 3rem; }

section.price .lesson_price_wrapper .prices.prices04{ width: 33%; }
section.price .lesson_price_wrapper .prices06,
section.price .lesson_price_wrapper .prices07{ width: 66.5%; }

section.price .lesson_price_wrapper .prices06{ margin-top: 2rem; }
section.price .lesson_price_wrapper .prices06 p{ text-align: right; font-size: 1.4rem; margin-top: .5rem; }

section.price .lesson_price_wrapper .prices07 tr td{ padding: .8rem 2rem .8rem 4rem; text-align: left; }

section.lesson03 *{ color: var(--global--color--green); }
section.lesson03 h4 {
  align-items: center; /* 横線を上下中央 */
  display: flex; /* 文字と横線を横並び */
  width: 30rem;
  font-size: 2.8rem;
  margin: 0 auto;
  font-weight: var(--global--weight--black);
  color: var(--global--color--green);
}
section.lesson03 h4::before,
section.lesson03 h4::after {
  background-color: var(--global--color--green);
  content: "";
  flex-grow: 1; /* 横幅いっぱい */
  height: 1px; /* 横線の高さ */
}
section.lesson03 h4::before {
  margin-right: 15px; /* 文字との余白 */
}
section.lesson03 h4::after {
  margin-left: 15px; /* 文字との余白 */
}


section.lesson03 dl{ margin-top: 1rem; }
section.lesson03 dl dt{ text-align: center; font-weight: var(--global--weight--bold); }
section.lesson03 dl dd{ text-align: center; font-size: 5.4rem; line-height: 1.4; letter-spacing: .5rem; }
section.lesson03 ul{ display: table; margin: 0 auto; font-weight: var(--global--weight--bold); }

.experience{ margin-top: 3rem; background-color: var(--global--color--green); padding: 2.5rem 3rem; }

.experience *{ color: var(--global--color--white) !important; }
.experience dl{ display: flex; align-items: center; justify-content: center; }
.experience dl dt{ display: flex; align-items: center; font-size: 2.8rem; width: 37rem; justify-content: space-between; margin-right: 5rem; }
.experience dl dt span{ font-size: 4.0rem; letter-spacing: .5rem; font-weight: var(--global--weight--black); }
.experience dl dd{ font-size: 1.6rem !important; text-align: left !important; }


section.lesson04{ padding: 4.5rem 0 4rem; }
section.lesson04 .inner{ display: flex; justify-content: space-between; justify-content: center; }
section.lesson04 dl{ margin-top: 1rem; text-align: center; color: var(--global--color--green); }
section.lesson04 dl dt{ font-size: 1.6rem; font-weight: var(--global--weight--bold); margin-bottom: 1rem; }
section.lesson04 dl dd{ font-size: 1.2rem; }


.lesson04-box{ max-width: 48%; }

section.lesson05{ padding: 4.5rem 0 15rem; background-color: var(--global--color--green); margin-bottom: 2rem; }
section.lesson05 h3{ text-align: center; font-size: 2.4rem; color: var(--global--color--white); line-height: 1.2; margin-bottom: 6rem; letter-spacing: .5rem; }
section.lesson05 h3 span{ display: block; font-size: 5.2rem; font-weight: var(--global--weight--black); }


.instructors{ display: flex; flex-wrap: wrap; justify-content: space-between; }
.instructors .instractor{ width: 48%; margin-top: 4rem; }

.instructors .instractor .ph img{ width: 100%; }
.instructors .instractor .name{ margin-top: 3rem; font-size: 2.4rem; display: flex; align-items: baseline; font-weight: var(--global--weight--black); color: var(--global--color--white); margin-bottom: 4rem; }

.instructors .instractor .name span{ font-size: 1.4rem; font-weight: var(--global--weight--black); color: var(--global--color--yellow); font-family: var(--global--fonts---roboto); margin-left: 3rem; }

.instructors .instractor .message{ font-weight: var(--global--weight--bold); width: 100%; display: flex; justify-content: space-between; }
.instructors .instractor .message p{ font-size: 1.4rem; color: var(--global--color--white); }


.instructors .instractor .message .text{ float: left; }

.instructors .instractor .table{ color: var(--global--color--green); float: right; min-width: 20rem; margin-left: 2rem; }
.instructors .instractor .table p{ background-color: var(--global--color--white); color: var(--global--color--green);  text-align: center; margin-bottom: .2rem; }
.instructors .instractor .table dl{ display: flex; background-color: var(--global--color--white); font-size: 1.2rem; align-items: center; }
.instructors .instractor .table dl:not(:last-child){border-bottom: var(--global--color--green) .2rem solid; }
.instructors .instractor .table dl dt{ padding: .3rem 1rem; font-size: 1.2rem; }
.instructors .instractor .table dl dd{ padding: .3rem 1rem; font-size: 1.2rem; font-family: var(--global--fonts---roboto); border-left: var(--global--color--green) .2rem solid; }
.instructors .instractor .table dl dd span{ color: #ed1e79; font-size: 1rem; padding-left: .5rem; }





section.lesson06{ padding: 4.5rem 0 4.5rem; background-color: var(--global--color--white); margin-bottom: 2rem; }
section.lesson06 h3{ text-align: center; font-size: 2.4rem; color: var(--global--color--green); line-height: 1.2; margin-bottom: 6rem; letter-spacing: .5rem; }
section.lesson06 h3 span{ display: block; font-size: 5.2rem; font-weight: var(--global--weight--black); }

section.lesson06 .timetable{ max-width: 70rem; margin: 0 auto; }
section.lesson06 .timetable table{ width: 100%; border-top: var(--global--color--green) .2rem solid; border-left: var(--global--color--green) .2rem solid; table-layout: fixed; }
section.lesson06 .timetable table *{ text-align: center; padding: .7rem .5rem; font-weight: 700; }
section.lesson06 .timetable table tr th.time{ width: 15rem; border-bottom: var(--global--color--white) .2rem solid !important; }
section.lesson06 .timetable table tr.head th{ background-color: var(--global--color--green); color: var(--global--color--white); position: relative; border-bottom: var(--global--color--green) .2rem solid; border-right: var(--global--color--white) .2rem solid; }
section.lesson06 .timetable table tr.head th:last-child{ border-right: var(--global--color--green) .2rem solid; }

section.lesson06 .timetable table tr.body th{ background-color: var(--global--color--green); color: var(--global--color--white); position: relative; border-bottom: var(--global--color--white) .2rem solid; border-right: var(--global--color--green) .2rem solid; }
section.lesson06 .timetable table tr.last th{ border-bottom: var(--global--color--green) .2rem solid; }
section.lesson06 .timetable table tr.body td{ border-bottom: var(--global--color--green) .2rem solid; border-right: var(--global--color--green) .2rem solid; color: var(--global--color--green); }
section.lesson06 .timetable table tr.body td span{ color: #e61673; padding: 0; }

section.lesson06 .remarks{ display: table; margin-left: auto; margin-top: 1rem; }
section.lesson06 .remarks .g{ color: var(--global--color--green); }
section.lesson06 .remarks .p{ color: #e61673; }



section.privacy .inner{ max-width: 90rem; padding: 20rem 0 7rem 0; }
section.privacy h3{ text-align: center; font-size: 2.4rem; color: var(--global--color--green); line-height: 1.2; margin-bottom: 6rem; font-weight: var(--global--weight--black); }
section.privacy h3 span{ display: block; font-size: 5.2rem; font-weight: var(--global--weight--black); margin-bottom: 1rem; }

section.privacy .inbox:not(:last-child){ margin-bottom: 3rem; }
section.privacy .inbox{ display: flex; justify-content: space-between; color: var(--global--color--green); }
section.privacy .inbox *{ font-size: 1.5rem !important; }
section.privacy .inbox .tit{ width: 30rem; }
section.privacy .inbox .txt{ width: calc(100% - 32rem); }







/*

    NEWS


*/
.news-wrapper .inner{ margin: 5rem auto; display: flex; justify-content: space-between; padding: 0 1.5rem; }
.news-wrapper .side{ width: 25rem; }
.news-wrapper .side .side-box h4{ font-weight: 900; font-size: 2.4rem; color: var(--global--color--green); line-height: 1; margin-bottom: 1.5rem; }
.news-wrapper .side .side-box ul{ margin-bottom: 4.5rem; }
.news-wrapper .side .side-box ul li{ border-bottom: var(--global--color--lightgray) .1rem solid; }
.news-wrapper .side .side-box ul li a{ padding: 1.2rem 0; display: block; }
.news-wrapper .side .side-box ul li span{ font-size: 1.4rem; font-weight: var(--global--weight--bold); display: block; line-height: 1.2; } 

.news-wrapper .contents{ width: calc(100% - 25rem - 5rem); }

.article{ background-color: var(--global--color--lightgray); padding: 4rem; border-radius: 1.6rem; margin-bottom: 4.5rem; position: relative; }
.article .anchor{ position: absolute; margin-top: -25rem; padding-top: 25rem; }






.access-wrapper h3{ text-align: center; font-size: 2.4rem; font-weight: var(--global--weight--black); color: var(--global--color--green); margin-bottom: 5rem; }
.access-wrapper .access01{ padding: 15rem 0 5rem 0; }
.access-wrapper .access01 .map iframe{ width: 100%; height: 100%; aspect-ratio: 16 / 9; }

.access-wrapper .map-remarks{ margin-top: 2rem; padding-top: 2rem; border-top: var(--global--color--green) .1rem solid; }


.access-wrapper .map-remarks *{ font-weight: 900; color: var(--global--color--green); }
.access-wrapper .map-remarks h4{ font-size: 2.4rem; }

.access-wrapper .map-remarks{ display: flex; justify-content: space-between; }

.access-wrapper .access01 .root{ margin: 0 2rem; }



.access-wrapper .access02{ background-color: #e5e5e5; padding: 5rem 0; }

.access-wrapper .access02 .trainmap{ margin: 0 auto; max-width: 96rem; }

.access-wrapper .access02 .root{ display: table; margin: 3rem auto 0; color: var(--global--color--green); }



.wp-pagenavi{ display: flex; justify-content: center; }
.wp-pagenavi a,
.wp-pagenavi span{ background-color: var(--global--color--lightgreen); border: none !important; display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; line-height: 1; padding: 0 !important; border-radius: 10rem; }

.wp-pagenavi a:hover,
.wp-pagenavi span{ background-color: var(--global--color--green); color: var(--global--color--white); }





.menuss-box .bg{
      max-width: 722px;
    background: url('./assets/images/trackman/frame.png');
    background-size: 100% auto;
    background-repeat: no-repeat;
    height: 557px;
    position: absolute;
    width: 100%;
    left: calc(50% - 36.1rem);
    z-index: 0;
}
.trackman02 .slick-slider{
  height: 45.7rem;
    margin: 0 auto;
    border-radius: 4rem;
    position: inherit !important;
    border-radius: 2rem;
  }



.trackman02 .slick-slide{ overflow: hidden; border-radius: 2rem; margin-top: 1.5rem; border-radius: 2.9rem; }
.trackman02 .slick-slide img{ height: 45.7rem; overflow: hidden; border-radius: 2.9rem; }

.trackman02 .slick-prev{  left: -8rem !important; width: 5rem !important; height: 5rem !important; }
.trackman02 .slick-next{ right: -8rem !important; width: 5rem !important; height: 5rem !important; }

.trackman02 .slick-prev:before,
.trackman02 .slick-next:before{ font-size: 5rem !important; }


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

  /*header .header-inner{ margin: 0 1.5rem; }*/

}





@media screen and (max-width: 1230px){
      .inner,
      section.page-header .inner{ margin: 0 1.5rem; }
}





@media screen and (max-width: 1200px){
  header .header-inner .menu ul li:not(:last-child){ margin-right: 1.0rem; }
  header .header-inner .menu ul li a{ font-size: 1.2rem; padding: 0 .5rem 2.5rem; }
  header .header-inner .menu ul li a span{ font-size: 1.0rem; }


  section.page-header .text p{ font-size: 1.4rem; }

  .facility-wrapper .inner{ margin: 0 1.5rem; }



      .trackman01-inbox .textbox{ padding-bottom: 3rem; }


}


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

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

      section.page-header .text{ width: 48%; }
      section.page-header .ph{ width: 45%; }

      section.lesson01 .lesson01-inbox p,
      section.lesson02 .lesson02-inbox p{ font-size: 1.2rem; }

      .trackman01-inbox{ flex-direction: column; }
      .trackman01-inbox .textbox{ width: 100%; text-align: center; }

      .trackman01-inbox .textbox .buttons a{ justify-content: center; }

      .trackman01-inbox .ph{  width: 100%;}

      .trackman01-inbox .ph span{ width: 100%; max-width: 60rem; margin: 0 auto; }


}

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

      .messagebox .ph{ width: 40.5rem; }

      section.trackman01 h2{ font-size: 2.8rem; }
      .trackman02 h3{ font-size: 3rem; }

      .trackman02 ul.menuss li{ width: 24%; }
      .trackman02 ul.menuss li a{ width: 100%; }
      .trackman02 ul.menuss li a span{ background: url(./assets/images/trackman/arrow_down02.svg) no-repeat 0 50% / 2.5rem auto; }
  
}



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

  section.time-shcedule .inner, section.price .inner{ margin: 0 1.5rem; }
  section.time-shcedule .inner{ padding-bottom: 0 !important; }

  
      section.lesson02 .lesson02-inbox .lesson02-inbox01{ padding: 3rem; }

      section.lesson01 .lesson01-inbox p,
      section.lesson02 .lesson02-inbox p{ text-align: left; }
}

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

      section.service .inner{ margin: 0 1.5rem; }
      .article{ padding: 2rem; }

      header .header-inner{ margin-left: .5rem; }
      header .header-inner .logo{ margin-right: 2rem; }
      header .header-inner .logo img{ width: 9rem; }

      footer .footer-under a{ font-size: 1.4rem; }
      footer .footer-under small{ font-size: 1.2rem; }


      footer .footer-information .information{ width: calc(100% - 31rem); }
      footer .footer-information .tel-box{ max-width: 27rem; }
  
}




@media screen and (max-width: 990px) and (min-width: 769px){

      .facility-wrapper .fac01 .messagebox .textbox{ width: calc(50% - 3rem); }
      .facility-wrapper .fac01 .messagebox .ph{ width: 50%; }

      footer .footer-information .information dl dt{ font-size: 2rem; }
}


@media screen and (max-width: 820px){
      .lesson01-inbox{ margin-top: 10vw; }
}

@media screen and (max-width: 780px){
      .lesson01-inbox{ margin-top: 15vw; }
}



@media screen and (max-width: 920px){
    /*section.sns ul li a span{ font-size: 3rem; }*/
}

@media screen and (min-width: 901px){
  .pc1{ display: none !important; }
}

@media screen and (max-width: 900px){
      .tablet01{ display: none; }

      header .header-inner .menu ul li a{ text-align: center; padding-bottom: .5rem; }
      
      .page-title .line{ font-size: 5.5rem; }
      .page-title .line span{ height: .5rem; bottom: .5rem; }


      section.page-header h3{ font-size: 2.2rem; margin-bottom: 1.5rem; }
      section.page-header h3 span{ font-size: 3.5rem; }



      section.guide-box h3{ font-size: 1.6rem; }
      section.guide-box h3 span{ font-size: 3.4rem; }


      section.time-shcedule .inner,
      section.price .inner{ padding-bottom: 7rem; }
      /* */


      section.price .prices:not(:first-child){ margin-top: 3rem; }
      section.price .inner{ padding-bottom: 4rem; }


      .trackman02 .slick-prev{  left: -4rem !important; }
      .trackman02 .slick-next{ right: -4rem !important; }


}




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

  


    header,
    header .header-inner{ height: var(--header--height--sp); margin: 0; }
    header .header-inner{ padding: 0 1rem; justify-content: flex-start; }
    header .header-inner .logo img{ height: 6rem; }

  
    header .header-inner .logo{ margin-right: 0; }
      header .menu{ display: none; }

      /* humberger */
      .humberger-menu{
        z-index: 10002 !important;
        padding: 0;
        width: calc(var(--header--height--sp) / 2);
        height: var(--header--height--sp);
        position: fixed;
        right: 1.5rem;
        border-radius: 10rem;
        display: flex; align-items: center;
      }
      .humberger-menu .menu-trigger,
      .humberger-menu .menu-trigger span{ display: inline-block; transition: all .4s; box-sizing: border-box; }
      .humberger-menu .menu-trigger{ position: relative; width: calc(var(--header--height--sp) / 2); height: calc(var(--header--height--sp) / 2); }
      .humberger-menu .menu-trigger span { position: absolute; left: calc(50% - calc(var(--header--menu--line) / 2)); width: var(--header--menu--line); height: .3rem; background: var(--global--color--green); }
      .humberger-menu .menu-trigger span:nth-of-type(1) { top: 28%; }
      .humberger-menu .menu-trigger span:nth-of-type(2) { top: 51%; }
      .humberger-menu .menu-trigger span:nth-of-type(3) { top: 75%; }
      .humberger-menu .menu-trigger span:nth-of-type(4) { opacity: 0; font-size: 1rem; width: 5rem; font-weight: 700; top: 80%; color: #fff; text-align: center; left: -.2rem; }
      .humberger-menu .menu-trigger.active span{ background-color: var(--global--color--white); }
      .humberger-menu .menu-trigger.active span:nth-of-type(1) {
        -webkit-transform: translateY(8px) rotate(-45deg);
            transform: translateY(8px) rotate(-45deg);
              top: 33%;
      }
      .humberger-menu .menu-trigger.active span:nth-of-type(2) {
        opacity: 0;
      }
      .humberger-menu .menu-trigger.active span:nth-of-type(3) {
        -webkit-transform: translateY(-9px) rotate(45deg);
            transform: translateY(-6px) rotate(45deg);
              top: 57%;
      }
      .humberger-menu .menu-trigger.active span:nth-of-type(1) { top: 28%; }
      .humberger-menu .menu-trigger.active span:nth-of-type(3) { top: 60%; }
      .humberger-menu .menu-trigger.active span:nth-of-type(4) { opacity: 1; background-color: transparent; }



      .navigation{ display: none; }
      .navigation.active{
        display: block !important;
        position: fixed;
        width: 100%;
        height: 100vh;
            top: 0;
            left: 0;
        background-color: var(--global--color--green);
        padding-left: 0;
        padding-right: 0;
        border-radius: 0;
        z-index: 1001;
      }
      .navigation .navigation-inner{ margin-top: 8rem; }
      .navigation .navigation-inner ul{ display: block; margin: 0 3rem; }

      .navigation .navigation-inner ul a{
        display: block;
        height: auto;
        width: calc(100%);
        padding: 1.5rem 0;
        text-align: center;
        color: var(--global--color--white);
        text-align: left;
            display: flex;
            align-items: center;
            justify-content: space-between;
      }
      .navigation .navigation-inner ul a .tb01{ display: none; }
      .navigation .navigation-inner ul a .tb01-min{ display: inline-block !important; }
      .navigation .navigation-inner a span::before{ display: none; }
      
      .navigation .navigation-inner ul a{ color: var(--global--color--white); }
      .navigation .navigation-inner ul a span{ font-family: var(--global--fonts---roboto); font-size: 1.2rem; }

      .navigation .navigation-inner ul li{ border-bottom: var(--global--color--white) .1rem solid; }
      .navigation .navigation-inner ul li:first-child{ border-top: var(--global--color--white) .1rem dashed; }
      .navigation .navigation-inner ul li:not(:last-child){ display: block; }

      .navigation .navigation-inner ul li:first-child,
      .navigation .navigation-inner ul li ol li{ border-top: none; }
      .navigation .navigation-inner ul li ol li a{ padding-left: 5rem; }
      .navigation .navigation-inner ul li ol li a span{ display: flex; align-items: center; }
      .navigation .navigation-inner ul li ol li a span::before{ content: "-"; position: relative; }



      .navigation .ig{ margin-top: 5rem; }
      .navigation .ig a{ display: flex; justify-content: center;
            align-items: center; }
      .navigation .ig a img{ width: 4rem; }
      .navigation .ig a span{     margin-left: 1.5rem;
        color: #fff;
        font-size: 2rem; }


      header .iconinstagram{ position: fixed; right: 8rem; }
      header .iconinstagram a{ display: block; width: 4.5rem; height: 4.5rem; }



}



@media screen and (min-width: 769px){
  .sp01{ display: none; }
}


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

  



    section.lesson01 .lesson01-inbox p, section.lesson02 .lesson02-inbox p{ text-align: center; }

    
    .newssp{ margin-top: 3rem; }
    .newssp h3{ text-align: center; color: var(--global--color--green); font-weight: 700; font-size: 2.4rem; margin-bottom: 1rem; font-size: 1.3rem; }
    .newssp a{ display: flex; width: 100%; height: 4.4rem; justify-content: center; font-size: 2.2rem; background-color: #00562b; color: var(--global--color--white); line-height: 1; align-items: center; border-radius: 1.5rem; border: #ecf1ec .4rem solid }
    
    .newssp a:hover{ background-color: #01351a; }


    .pads1, .pads1, .pads3, .pads4{
      position: relative;

    }
    
    .pads1::before,
    .pads2::before,
    .pads3::before,
    .pads4::before{
        content: "";
        position: absolute;
        width: calc(100% - 1.4rem);
        left: 0;
        height: calc(100% - 1.4rem);
        top: .2rem;
        border: var(--global--color--black) 1rem solid;
        z-index: 1;
        border-radius: 3rem;
    }

    .menuss-box .bg{
      display: none !important;

      max-width: inherit;
    background-size: 89% 61vw;
    z-index: 1;
    background: url(./assets/images/trackman/frame_sp.png);
    background-size: 105% auto;
    background-repeat: no-repeat;
    }

    .menuss-box .bg{ height: 50vw;     left: calc(-2.5%); }
      

    .pads .slick-initialized .slick-slide{ margin-top: 1vw; }


    .news-wrapper .inner{ flex-direction: column-reverse; margin: 5rem 1.5rem; padding: 0; }
    .news-wrapper .contents{ width: 100%; margin-bottom: 5rem; }

    .news-wrapper .article{ padding: 2rem; margin-bottom: 2rem; }
    .news-wrapper .article .date{ font-size: 1.2rem !important; }
    .news-wrapper .article p{ font-size: 1.4rem; }

    .news-wrapper .side{ display: flex; width: 100%; justify-content: space-between; }
    .news-wrapper .side .side-box{ width: 48.5%; }
    .news-wrapper .side .side-box h4{ font-size: 1.8rem; }
    .news-wrapper .side .side-box ul li span{ font-size: 1.2rem; }
    .news-wrapper .side .side-box ul li a{ font-size: 1.4rem; }


    section.snsbox{ padding-bottom: 6rem; }
    section.snsbox .inner{ margin-left: 1rem; margin-right: 1rem; margin-bottom: 0; }
    section.snsbox .snsbox-header h3{ display: none; }

    section.snsbox .snsbox-header{ justify-content: center; margin-bottom: 1.5rem; }
    section.snsbox .snsbox-header .tits{ 
    font-size: 2rem;
    text-align: center;
    display: flex;
    justify-content: center;
    margin-bottom: 1rem; color: var(--global--color--green); width: 100%; align-items: center; }
    section.snsbox .snsbox-header .tits img{ width: 4rem; margin-right: 1.5rem; }

    section.snsbox .snsbox-body{ display: block; }
    section.snsbox .newsbox{ width: 100%; }


    section.contents{ margin: 0 auto; display: block; }
    section.contents div{ width: 100%; }

    section.message p{ text-align: left; }


    section.snsbox .newsbox-inbox, section.snsbox .instagrambox-inbox{ min-height: inherit; }

    section.main .slick-slide{ max-width: inherit; width: 100vw; }

    section.main .m01 .mt01{ width: 40vw; }
    section.main .m01 .mt02{ width: 35vw; }
    
    section.main .m02 .mt01{ width: 35vw; }
    section.main .m03 .mt01{ width: 35vw; }
    section.main .m04 .mt01{ width: 35vw; }
    section.main .m05 .mt01{ width: 35vw; }
    section.main .m06 .mt01{ width: 35vw; }

    .sns{ display: none; }
    main{ padding-top: var(--header--height--sp); }


    section.page-header .inner{ display: block; }
    section.page-header .text{ width: 100%; }

    section.page-header{ padding: 3rem 0; }
    section.page-header h3{ line-height: 1.2; font-size: 1.8rem; }

    section.page-header .text{ margin-bottom: 2rem; }

    section.page-header .ph{ width: 100%; max-width: inherit; }


    section.price .prices.prices03{ width: 100%; }
    section.price .prices .tit{ font-size: 1.4rem; }
    section.price .prices table tr th,
    section.price .prices table tr td{ font-size: 1.2rem; }

    section.price .prices .remarks{ font-size: 1.2rem; }


    footer .footer-under{ flex-direction: column; }
    footer .footer-under small{ font-size: 1rem; font-weight: var(--global--weight--bold); }


    .time-shcedule .times .tit{ font-size: 1.8rem; height: 4.6rem; }

    .service-boxes{ padding-top: 4rem; padding-bottom: 6rem; }
    .service-boxes h3{ text-align: center; }
    .sb05{ margin-bottom: 6rem; }
    .service-box.sb05 .ph{ margin-bottom: 1.5rem; }


    .service-box .ph{ width: 100%; margin-bottom: 3rem; }
    .service-box .ph img{ width: 50% !important; }


    .service-box .text{ width: 100%; }
    .service-box .text h4{ text-align: center; display: block; font-size: 1.6rem; line-height: 1.4; }

    .service-box .text p span{ display: block; line-height: 1.8; }


    footer{ padding-top: 3rem; }
    footer .footer-inner{ padding: 0 1.5rem; }
    footer .footer-information .information .logo { width: 10rem; margin: 0 auto 3rem; }
    footer .footer-information .information dl dd{ font-size: 1.2rem; }
    footer .footer-information .information dl dt{ font-size: 2rem; }
    footer .footer-information .information{ border-right: none; display: block; width: 100%; text-align: center; padding-bottom: 2rem; }
    footer .footer-information{ display: block; margin-bottom: 2rem; }
    footer .footer-information .tel-box{ width: 100%; text-align: center; max-width: inherit; margin-right: 0; padding-bottom: 0; font-size: 1.2rem; }

    footer .footer-under a{ font-size: 1.2rem; margin-bottom: 2rem; }



    section.lesson-top { background: var(--global--color--black) }
    section.lesson-top .inner{ flex-direction: column; padding: 30px 0; }
    section.lesson-top::after{ display: none; }

    section.lesson-top .lesson-top-box{ width: 100%; margin-top: 3rem; }

    section.lesson-top h3{ text-align: left; font-size: 2.5rem; }
    section.lesson-top .lesson-top-box p{ margin: 2rem auto 2rem; font-size: 1.3rem; }

    section.lesson-top .button{ margin: 1rem auto 0; }
    section.lesson-top .button a{ width: 100%; font-size: 1.4rem; }


    section.contents a{ display: block; padding: 0 0 6rem 0; }
    section.contents div dl{ margin-top: -2.1rem; }
    section.contents div dl dt{ font-size: 4.2rem; }
    section.contents div dl dd{ font-size: 1.2rem; }
    section.contents div dl dd span{ display: block; font-size: 1.4rem; }

    section.menus{ margin-top: 2rem; }

    section.banneer .inner{ margin: 0; }
    section.banneer .inner .fadeRight{ margin: 0 1.5rem; }



    section.sns{ height: 5rem; }
    section.sns ul{ justify-content: space-between; }
    section.sns ul li{ width: 33%; margin-right: 0; }
    section.sns ul li a{ display: flex; justify-content: center; align-items: center; }
    section.sns ul li:not(:last-child){ margin-right: 0; }
    section.sns ul li a span{ font-size: 2rem; }
    section.sns ul li a img{ height: 2.4rem; }


    .fac01{ padding: 4rem 0; }
    .messagebox .textbox{ width: 100% !important; padding-right: 0 !important; margin-bottom: 1.5rem; }
    .fac01 .messagebox h4{ margin: 0 0 1rem; }


    .fac01 .messagebox .ph{  width: auto;}

    .inbox01{ display: block; }
    .inbox01 .ph{ width: 100%; }
    .inbox01 .ph:not(:last-child){ margin-bottom: .7rem; }
    .inbox02{ margin: 2rem 0; }
    .inbox03{ display: block; }
    .inbox03 dl{ width: 100%; }

    .fac02 dd{ font-size: 1.4rem; }
    .fac02 dd strong{ font-size: 1.6rem; margin: 1rem 0 .5rem !important; }


    .messagebox .tit{ font-size: 2.4rem; margin-bottom: 0rem !important; }
    .messagebox h4{ font-size: 1.8rem; }

    .messagebox p{ font-size: 1.4rem; }

    .messagebox .ph{ width: 100%; }

    .fac03, .fac04, .fac05, .fac06 {
        padding: 4rem 0;
    }

    .fac04 .messagebox h4 img{ width: 10rem; }



    /* facility */
    .subtitle{ margin-top: 2rem; color: var(--global--color--green); }
    .subtitle h4{ font-size: 2rem; text-align: center; font-weight: 700; margin-bottom: 2.0rem; }
    .subtitle p{ font-size: 1.4rem; text-align: center; }


    .facility-wrapper .fac01{ padding: 5rem 0; }
    .facility-wrapper .fac01 .messagebox{ flex-direction: column-reverse; }
    .facility-wrapper .fac01 .inner{ margin: 0; }
    .facility-wrapper .fac01 .messagebox h4{ margin-bottom: 2rem; }
    .facility-wrapper .fac01 .messagebox .textbox{ margin: 0 1.5rem 1.5rem; width: calc(100% - 3rem) !important; }
    .facility-wrapper .fac01 .messagebox .ph{ width: 100%; }

    .facility-wrapper .fac02 .inner{ margin: 0; }
    .facility-wrapper .fac02 .inbox01{ margin: 0 1.5rem; }
    .facility-wrapper .fac02 .inbox02{ margin: 2rem 1.5rem 3rem; }
    .facility-wrapper .fac02 .inbox03 dl dd{ margin: 3rem 1.5rem; }

    .facility-wrapper .fac03 .messagebox{ flex-direction: column-reverse; }
    .facility-wrapper .fac03 .inner,
    .facility-wrapper .fac04 .inner,
    .facility-wrapper .fac05 .inner,
    .facility-wrapper .fac06 .inner{ margin: 0 3rem; }

    .facility-wrapper .fac03 .textbox,
    .facility-wrapper .fac04 .textbox,
    .facility-wrapper .fac05 .textbox,
    .facility-wrapper .fac06 .textbox{ margin: 2rem 0 0; }
    .facility-wrapper .fac03 .textbox .tit{ margin-bottom: 1rem !important; }

    .facility-wrapper .fac04 .messagebox,
    .facility-wrapper .fac05 .messagebox,
    .facility-wrapper .fac06 .messagebox{ flex-direction: column-reverse; }

    .fac04 .messagebox h4{ justify-content: center; }



    .contact01,
    .contact02{ padding-top: 5rem; }
    .contact01 h3{ font-size: 2.4rem; margin-bottom: 1.5rem; }
    
    .contact02 h3 span,
    .contact03 h3 span{ font-size: 2.8rem; }


    .contact02 p{ margin-top: 1.5rem; }

    .contact02 h3,
    .contact03 h3{ font-size: 1.4rem; margin-bottom: 1.5rem; }

    .contact03 .msg,
    .contact01 p{ text-align: left; font-size: 1.4rem; }


    .contact02 p a{ font-size: 2.4rem; }


    .contact03 .form{ margin-bottom: 2rem; }
    .contact03 .form dl{ display: block; }
    .contact03 .form dl dt{ width: 100%; }
    .contact03 .form dl dd{ width: 100%; padding-left: 0; margin-top: 1rem; }
    .contact03 .form .form-button{ margin-top: 1.5rem; }
    .contact03 .form .form-button li,
    .contact03 .form .form-button li input{ width: 100%; }
    .contact03 .form .form-button li input:hover{ background-color: var(--global--color--green); color: var(--global--color--white); }
    

    /* access */
    section.access .inner{ padding: 3.5rem 0; }
    section.access h3{ font-size: 2.4rem; }

    section.access .access-box{ margin-top: 3rem; display: block; }
    section.access .access-box .logo{ margin: 0 auto 1.5rem; max-width: 12rem; }
    section.access .access-box dl dt{ text-align: center; font-size: 2.4rem; }
    section.access .access-box dl dd{ font-size: 1.4rem; display: table; margin: 0 auto; }



    .page-title .line{ font-size: 2.8rem; bottom: 0; }
    .page-title .line span{ bottom: 0; }


    section.lesson04 dl dt{ font-size: 1.8rem; }
    section.lesson04 dl dd{ text-align: left; }


    section.price .lesson_price_wrapper .prices06, section.price .lesson_price_wrapper .prices07{  width: 100%;}


    section.price .lesson_price_wrapper .prices06 p{ font-size: 1.2rem; }

    section.lesson05 h3 span,
    section.lesson03 h3,
    section.lesson01 h2{ font-size: 2.2rem; }

    section.lesson01{ padding: 2rem 0 4rem; }
    section.lesson01 p{ font-size: 1.2rem; }

    section.lesson05 h3 span{ letter-spacing: .5rem; }
    section.lesson05 h3{ font-size: 1.4rem; margin-bottom: 1.5rem; letter-spacing: 0;  }
    .instructors .instractor{ margin-top: 2rem; }
    
    .instructors .instractor .name{ margin-top: 1rem; margin-bottom: 1rem; font-size: 2rem; justify-content: space-between; }
    .instructors .instractor .name span{ font-size: 1.2rem; }

    .instructors .instractor .message p{ text-align: left; font-size: 1.2rem; }


    .instructors .instractor .message{ align-items: flex-end; }
    .instructors .instractor .message .text{ float: inherit; width: calc(100% - 26rem); }
    .instructors .instractor .table{ float: inherit; width: 100%; margin: 2rem 0 0; max-width: 24rem; }
    .instructors .instractor .table p{ text-align: center; }

    .experience dl{ display: block; }
    section.lesson03 dl dt{ width: 100%; font-size: 2rem; justify-content: center; }
    .experience dl dt span{ font-size: 2.4rem; padding-left: 1rem; }

    section.lesson05{ padding-bottom: 5rem; }

    section.lesson03 .experience dl dd{ font-size: 1.4rem !important; }

    section.lesson03 h4{ font-size: 2rem; }
    section.lesson03 dl dd{ font-size: 2.4rem; }

    section.lesson03 dl dt{ font-size: 1.6rem; }

    .pricebox{ margin-top: 1.5rem; }

    section.lesson03 ul{ margin-top: 2rem; }
    section.lesson03 ul li{ font-size: 1.4rem; }

    
    section.lesson01 .lesson01-inbox{ flex-direction: column-reverse; padding-bottom: 0; margin-top: 2.5rem; }

    .lesson01-inbox .lesson01-inbox01{ position: relative; padding: 3rem 1rem; }

    section.lesson02 .lesson02-inbox{ flex-direction: column-reverse; margin-top: 0; padding-bottom: 0; }
    
    section.lesson02 .lesson02-inbox .lesson02-inbox01{ position: relative; background-color: transparent; width: 100%; padding: 3rem 1rem; }


    .lesson01-inbox .lesson01-inbox02,
    section.lesson02 .lesson02-inbox .lesson02-inbox02{ width: 100%; }

    .lesson01-inbox .lesson01-inbox01{ width: 100%; }

    .lesson01-inbox .lesson01-inbox01 h3,
    .lesson02-inbox .lesson02-inbox01 h3{ font-size: 3.4rem; }




    /* ----- ACCESS ---------------------------------------------------------------------------------------------------------- */
    .access-wrapper .access01{ padding: 3rem 0 5rem 0; }
    .access-wrapper h3{ font-size: 1.6rem; margin-bottom: 3rem; }

    .access-wrapper .map-remarks{ display: block; }
    .access-wrapper .map-remarks h4{ text-align: center; font-size: 2rem; margin-bottom: 1rem; }
    .access-wrapper .access01 .root{ margin: 0; text-align: center; font-size: 1.4rem; line-height: 2; }
    .access-wrapper .access01 .add{ display: table; margin: 2rem auto 0; font-size: 1.4rem; }

    .access-wrapper .access02{ padding: 3rem 0 5rem 0; }
    .access-wrapper .access02 h3{ margin-bottom: 1rem; }
    .access-wrapper .access02 .root{ margin-top: 1rem; font-size: 1.4rem; }




    /* ----- CONTACT --------------------------------------------------------------------------------------------------------- */
    .contact-tel-box{ padding-top: 5rem; }
    .contact-tel-box .logo{ max-width: 20rem; }
    .contact-tel-box .name{ font-size: 2rem; }
    .contact-tel-box .tel a{ font-size: 3.2rem; }
    .contact-tel-box .tel-remarks{ margin-top: 1rem; font-size: 1.4rem; }

    .contact03{ padding-top: 5rem; }
    .contact03 h3.line,
    .contact-line-box h3.line{ font-size: 1.6rem; }
    .contact03 .form{ margin-top: 3rem; }
    .contact03 .form dl dt{ font-size: 1.4rem; align-items: center; }
    .contact03 .form dl dt span{ font-size: 1.2rem; }
    .contact03 .form dl dd{ margin-top: .5rem; }




    /* GUIDE */
    .guide-wrapper .subtitle{ margin-bottom: 3rem; }
    .guide-wrapper section.page-header h3 span{ margin-bottom: 1.0rem; font-size: 2.4rem; }
    .guide-wrapper section.time-shcedule .inner{ padding-top: 8rem; }

    section.guide-box h3{ font-size: 1.4rem; margin-bottom: 2rem; }
    section.guide-box h3 span{ font-size: 2.4rem; }

    .service-boxes h3{ font-size: 2rem; }
    .service-box .text p{ font-size: 1.4rem; display: table; margin: 2rem auto 0; }

    .time-shcedule .times .tit span{ width: 3.2rem; }
    .time-shcedule .times .tit{ font-size: 1.6rem; }



    /* LESSON */


    section.lesson03{ padding-top: 0; padding-bottom: 0; }

    section.price .lesson_price_wrapper .prices.prices04{ width: 100%; }

    section.lesson02{ padding: 3rem 0; }
    section.lesson02 .lesson02-inbox{ flex-direction: column-reverse; margin-top: 0; padding-bottom: 0; }
    section.lesson02 .lesson02-inbox .lesson02-inbox01{ background-color: var(--global--color--white); }
    section.lesson02 .lesson02-inbox .lesson02-inbox01 *{ color: var(--global--color--green); }

    .instructors{ display: flex; }
    .instructors .instractor{ width: 100%; margin-top: 5rem; }

    section.lesson06 h3{ font-size: 1.4rem; font-weight: 700; }
    section.lesson06 h3 span{ font-size: 2.2rem; }

    section.lesson06 .timetable table *{ font-size: 1.4rem; }

    .lesson04-box{ width: 100%; max-width: inherit; }
    .lesson04-box p img{ max-width: 100%; width: 100%; }






    /* TRACKMAN */
    .trackman01-inbox{ display: block; }
    section.trackman01 h2{ font-size: 1.8rem; margin-bottom: 0; }
    .trackman01-inbox .textbox{ width: 100%; margin-right: 0; padding-bottom: 0; text-align: left; }

    .trackman01-inbox .textbox .buttons a img{ width: 2.1rem; }
    
    .trackman01-inbox .textbox *{ font-size: 1.4rem; }

    .trackman01-inbox .ph{ width: 100%; padding: 3rem 0 3rem; }
    .trackman01-inbox .ph span{ margin-right: 0; }


    .trackman04{ padding-top: 3rem; }
    .trackman04 h3{ font-size: 2rem; margin-bottom: 3rem; }
    .trackman04 .inner{ margin: 0; }

    .trackman03{ padding: 3rem 0; }
    .trackman03 .inner{ flex-direction: column-reverse; margin: 0; }
    .trackman03 .bg,
    .trackman03 .text{ width: 100%; }

    .trackman03 .text .ph{ display: none; }
    .trackman03 .bg{ margin-top: 2rem; }
    .trackman03 .bg span{ margin-left: 0; margin-right: 1.5rem; }

    .trackman03 .text h3{ font-size: 2.6rem; margin-left: 2.5rem; }
    .trackman03 .text .msg{ margin-left: 2.5rem; font-size: 1.4rem; }

    .trackman02{ padding: 5rem 0; }
    .trackman02 h3{ font-size: 1.8rem; }

    .trackman02 h4{ font-size: 1.8rem; text-align: left; }
    .trackman02 p{ font-size: 1.4rem; text-align: left; }

    .trackman02 .pads{ margin-top: 5rem; padding: 0 4rem; }

    .trackman02 ul.menuss li{ width: 24.5%; }
    .trackman02 ul.menuss li a{ width: 100%; height: auto; }
    .trackman02 ul.menuss li:not(:last-child){ margin-right: .525%; }

    .trackman02 ul.menuss li a.active span{
      background: url(./assets/images/trackman/arrow_down01.svg) no-repeat 50% 90% / 1.3rem auto; 
    }

    .trackman02 .slick-slide img{ height: auto; }

    .trackman02 ul.menuss li a span{
      background: url(./assets/images/trackman/arrow_down02.svg) no-repeat 50% 90% / 1.3rem auto; padding-left: 0; line-height: 1.2;
      padding: 1rem 0 3rem;
      text-align: center;
    }

    .trackman02 .slick-slider{ height: auto; border-radius: 1rem; }


  .trackman02 .slick-prev{  left: -5rem !important; width: 3rem !important; height: 3rem !important; }
  .trackman02 .slick-next{ right: -5rem !important; width: 3rem !important; height: 3rem !important; }

  .trackman02 .slick-prev:before,
  .trackman02 .slick-next:before{ font-size: 3rem !important; }


  section.menus .menus-box-texts .inners{ padding: 3rem 0 !important; display: block; }
  section.menus .menus-box-texts .inners .ph{ width: 100%; }

  section.menus .menus-box-texts-inbox{ width: 100% !important; padding: 2rem 3rem 5rem !important; display: block !important; }
  section.menus .menus-box-texts h3{ font-size: 2.5rem; margin-bottom: .5rem; }
  section.menus .menus-box-texts h4{ font-size: 1.6rem; }

  section.menus .menus-box-texts p{ font-size: 1.2rem; }


  section.menus .mb02 .menus-box-texts .inners .ph,
  section.menus .mb03 .menus-box-texts .inners .ph{ width: 100%; height: auto; padding-left: 0;  }

  section.menus .mb02 .icons{ margin-top: 3rem; }

  section.menus .mb02 .icons ol li{ width: 23.5%; }
  section.menus .mb02 .icons ol li:not(:last-child) { margin-right: 2%; }
  section.menus .mb02 .icons ol li a{ display: table; margin: 0 auto; max-width: 15vw; }

  .mb03 .icon{ width: auto; margin: 3.5rem auto 0;padding: 0 1.5rem 5rem; }

  section.menus ul{ margin: 0 1.5rem; }
  section.menus ul li{ width: 33%; }
  section.menus ul li a{ width: 100%; font-size: 1.4rem; }



  

  section.snsbox .instagrambox{ width: 100%; }
  section.snsbox .instagrambox-inbox{ border-left: none; }

  section.snsbox .snsbox-body{ border: var(--global--color--green) .2rem solid; }


  section.menus .mb03 .menus-box-texts-inbox{ padding-bottom: 1rem !important; }
  section.menus .menus-box-texts{ display: block; }


  /* PRIVACY */
  section.privacy .inner{ padding-top: 3rem; }

  section.privacy h3 span{ font-size: 3.2rem; }
  section.privacy h3{ font-size: 1.4rem; }

  section.privacy .inbox{ display: block; }
  section.privacy .inbox .tit,
  section.privacy .inbox .txt{ width: 100%; }

  section.privacy .inbox .tit{ font-size: 1.6rem !important; margin-bottom: 1.2rem; }
  section.privacy .inbox *{ font-size: 1.4rem !important; }



}




@media screen and (max-width: 660px){
  .trackman04 .banner{ margin: 4rem 3rem 0; }
}


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

    .minis{ display: none; }

}


.slick__image {
  position: relative;
  width: 46vw;
}




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

  .menuss-box .bg{ left: calc(7%); background-size: 86% 58vw; }
  .page-title .line { font-size: 3.5rem; }
}


@media screen and (min-width: 501px){
  .mini{ display: none !important; }
}


@media screen and (max-width: 500px){
    section.sns ul li a span{ font-size: 1.2rem; }
    section.sns ul li a img{ height: 2.0rem; }


    .trackman02 ul.menuss li a span{ font-size: 1.2rem; }

    


    .news-wrapper .side{ display: block; }
    .news-wrapper .side .side-box{ width: 100%; }


    .instructors .instractor .message{ display: block; }
    .instructors .instractor .message .text{ width: 100%; }
    .instructors .instractor .message .table{ max-width: inherit; }



    section.lesson06 .timetable table tr th.time{ width: 10rem; }
    section.lesson06 .remarks{ font-size: 1.4rem; }

    section.menus ul{ margin: 0 1rem; }
    section.menus ul li a{ width: 100%; font-size: 1.1rem; }

}



/*

.slick__inner {
  margin: 0 auto;
}

.slick__container {
  position: relative;
  width: calc(100% + (100vw - 100%) / 2);
}


.slick__image:before {
  display: block;
  padding-top: calc((2 / 3.72) * 100%);
  content: '';
}

.slick__image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

*/