@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: 5.5rem;


    --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: 400;
  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{ 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); }





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 {
    display: none;
}
.menus-box.show {
    display: block;
}




.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{ height: 50rem; object-fit: cover; max-width: 50%; }
section.main .slick-slide img{ width: 100%; height: 100%; object-fit: cover; }
.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%; }
section.menus .menus-box-texts .inners{ padding: 8rem 0; display: flex; align-items: center; }
section.menus .menus-box-texts .inners .ph{ width: 50%; }
section.menus .menus-box-texts-inbox{ width: calc(50% - 2rem); padding-left: 2rem; }

/*
section.menus .menus-box-texts::before{
  content: "";
  position: absolute;
  left: 0;
  width: 50%;
  height: calc(100% - 16rem);
  top: 8rem;
  background: url(./assets/images/top/menus_ph01.webp) no-repeat 50% 50% / cover;
}
*/

section.menus .menus-box-texts h3{ font-size: 4.0rem; color: var(--global--color--yellow); font-weight: var(--global--weight--black); }

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.5rem; }


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: 1.5rem; }
.mb02 .icon{ margin-top: 3.5rem; width: 70%; }
.mb03 .icon{ margin-top: 3.5rem; width: 40%; }







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; }

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; font-family: var(--global--fonts---roboto); }
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% - 50.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%; }
.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{

}

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; }

.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; }


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


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


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: 2.4rem; font-weight: var(--global--weight--bold); margin-bottom: 1rem; }
section.lesson04 dl dd{ font-size: 1.4rem; }


.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; }




/*

    NEWS


*/
.news-wrapper .inner{ margin: 5rem auto; display: flex; justify-content: space-between; }
.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; }







.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); }




@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; }





}





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

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

}

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

    .messagebox .ph{ width: 40.5rem; }
  
}



@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; }
}

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

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


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

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

@media screen and (max-width: 900px){
  .tablet01{ display: none; }
  
  .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; }


}



.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 (min-width: 769px){
  .sp01{ display: none; }
}

@media screen and (max-width: 768px){
    header .menu{ display: none; }



    section.snsbox .inner{ margin-left: 1rem; margin-right: 1rem; }
    section.snsbox .snsbox-header{ display: none; }

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


    section.contents{ margin: 5rem auto; }

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


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

    section.main .slick-slide{ height: 40vh; }

    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; }


    header,
    header .header-inner{ height: var(--header--height--sp); margin: 0; }
    header .header-inner .logo img{ height: 4rem; }

    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.8rem; }
    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;
    }
    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; }
    footer .footer-information .tel-box{ width: 100%; text-align: center; max-width: inherit; margin-right: 0; padding-bottom: 0; }

    footer .footer-under a{ font-size: 1.4rem; margin-bottom: 1rem; }



    section.lesson-top { background: url(./assets/images/top/lesson-top-bg.webp) no-repeat 0% 50% / cover; }
    section.lesson-top .inner{ padding: 30px 0; }
    section.lesson-top::after{ display: none; }

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

    section.lesson-top h3{ text-align: center; font-size: 2.4rem; }
    section.lesson-top .lesson-top-box p{ margin: 2rem auto; font-size: 1.4rem; }

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


    section.sns{ height: 7rem; }
    section.sns ul{ justify-content: space-between; }
    section.sns ul li{ width: 33%; margin-right: 0; }
    section.sns ul li a{ display: block; text-align: center; }
    section.sns ul li a span{ display: none; }
    section.sns ul li:not(:last-child){ margin-right: 0; }



    .messagebox{ display: block !important; }
    .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; }

    


    .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%; }
    

    /* 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; }




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


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

    section.lesson05 h3{ font-size: 1.6rem; margin-bottom: 1.5rem; }
    .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{ display: block;  }
    .instructors .instractor .message p{ text-align: left; font-size: 1.2rem; }


    .instructors .instractor .message .text {
    float: inherit;
}
    .instructors .instractor .table{ float: inherit; width: 100%; margin: 2rem 0 0; }
    .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; }

    .lesson01-inbox .lesson01-inbox01{ position: relative; }c

    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%; }

    section.lesson02 .lesson02-inbox .lesson02-inbox01 *{ color: var(--global--color--white) !important; }

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

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


}



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

  
  .page-title .line { font-size: 3.5rem; }
}