@charset "utf-8";
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}

a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

img {
    vertical-align: top;
    font-size: 0;
    line-height: 0;
    border: 0;
    max-width: 100%;
    height: auto;
}

@media only screen and (max-width: 896px) {
    .img-responsive {
        display: block;
        width: 100%;
        height: auto;
    }
}

html {
    overflow-y: scroll;
    font-size: 62.5%;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -webkit-overflow-scrolling: touch;
}

body {
    line-height: 1.4;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    font-family: 'Noto Sans JP', 'Ryumin Regular KL', 'リュウミン R-KL', "A-OTF Ryumin Pro", a-otf-ryumin-pr6n, 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", メイリオ, Meiryo, serif;
    font-style: normal;
    font-weight: 400;
    color: #061F38;
    background: white;
    height: 100%;
    font-size: 1.6rem;
    letter-spacing: 2px;
    overflow: hidden;
}

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

ul {
    list-style: none;
}

a {
    margin: 0;
    padding: 0;
    text-decoration: none;
    background: transparent;
    color: #000;
    outline: none;
    vertical-align: baseline;
}

button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    appearance: none;
}

.clear {
    clear: both;
}

.clearfix::after {
    display: block;
    visibility: hidden;
    clear: both;
    height: 0;
    content: '';
}

.sp {
    display: none;
}

@media only screen and (max-width: 896px) {
    .pc {
        display: none;
    }
    .sp {
        display: block;
    }
    html {
        font-size: 55%;
    }
}

.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 768px) {
    .container {
        width: 750px;
        padding-right: 15px;
        padding-left: 15px;
    }
}

@media (min-width: 992px) {
    .container {
        width: 970px;
    }
}

@media (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}

/*
heading******************************/

.title_x_large {
    font-size: 5.0rem;
    font-weight: normal;
}

.title_large {
    font-size: 3.2rem;
    font-weight: normal;
}

.title_medium {
    font-size: 2.4rem;
    font-weight: normal;
}

.title_small {
    font-size: 1.6rem;
    font-weight: normal;
}

.page_title_01 {
    background: #000;
    color: #fff;
}

.page_title_01 .title_x_large {
    text-align: center;
    font-weight: bold;
    padding-top: 10.0rem;
    padding-bottom: 15.0rem;
}

.page_title_01 .title_x_large span {
    display: block;
    font-size: 1.6rem;
    margin-top: 4.8rem;
    font-weight: normal;
}

/*
grid******************************/

.grid {
    letter-spacing: -.35em;
    margin: 0 -15px 0;
}

.col {
    display: inline-block;
    letter-spacing: normal;
    padding: 0 15px;
    vertical-align: top;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/*
column******************************/

.column {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/*
reverse******************************/

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

@media only screen and (max-width: 480px) {
    .box {
        flex-direction: column;
    }
    .box:nth-child(even) {
        display: flex;
        flex-direction: column-reverse;
    }
}

.box_cont {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

@media screen and ( max-width: 480px) {
    .box_cont {
        flex-direction: column-reverse;
    }
}

.box_left {
    width: 40.8771%;
}

.box_right {
    width: 56.4912%;
}

/*
width******************************/

.width1 {
    width: 8.33333333333%;
}

@media only screen and (max-width: 896px) {
    .width1 {
        width: 100%;
    }
}

.width2 {
    width: 16.6666666667%;
}

@media only screen and (max-width: 896px) {
    .width2 {
        width: 100%;
    }
}

.width3 {
    width: 25.0%;
}

@media only screen and (max-width: 896px) {
    .width3 {
        width: 100%;
    }
}

.width4 {
    width: 33.3333333333%;
}

@media only screen and (max-width: 896px) {
    .width4 {
        width: 100%;
    }
}

.width5 {
    width: 41.6666666667%;
}

@media only screen and (max-width: 896px) {
    .width5 {
        width: 100%;
    }
}

.width6 {
    width: 50.0%;
}

@media only screen and (max-width: 896px) {
    .width6 {
        width: 100%;
    }
}

.width7 {
    width: 58.3333333333%;
}

@media only screen and (max-width: 896px) {
    .width7 {
        width: 100%;
    }
}

.width8 {
    width: 66.6666666667%;
}

@media only screen and (max-width: 896px) {
    .width8 {
        width: 100%;
    }
}

.width9 {
    width: 75.0%;
}

@media only screen and (max-width: 896px) {
    .width9 {
        width: 100%;
    }
}

.width10 {
    width: 83.3333333333%;
}

@media only screen and (max-width: 896px) {
    .width10 {
        width: 100%;
    }
}

.width11 {
    width: 91.6666666667%;
}

@media only screen and (max-width: 896px) {
    .width11 {
        width: 100%;
    }
}

.width12 {
    width: 100%;
}

/*
追加******************************/

.set_center {
    text-align: center;
}

.set_left {
    text-align: left;
}

.set_right {
    text-align: right;
}

.cursor {
    cursor: pointer;
}

.mt_50 {
    margin-top: 50px;
}

.mt_100 {
    margin-top: 100px;
}

.mb_20 {
    margin-bottom: 20px;
}

/*
header******************************/

 .masthead {
     position: fixed;
     padding: 44px;
     width: 100%;
     -moz-transition: all 0.3s;
     -o-transition: all 0.3s;
     -webkit-transition: all 0.3s;
     transition: all 0.3s;
     z-index: 100;
     right: 0;
     width: 55px;
     height: 55px;
 }

 @media only screen and (max-width: 896px) {
     .masthead {
         padding: 50px 30px;
     }
 }


 #container {
     z-index: 900;
 }

 #gloval-nav {
     background: rgba(0, 0, 0, 0.87);
     color: #fff;
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     z-index: 990;
     text-align: center;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     visibility: hidden;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
     justify-content: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     font-size: 2.9rem;
     opacity: 0;
     transition: opacity .6s ease, visibility .6s ease;
     width: 48.0rem;
     text-align: left;
     font-size: 1.8rem;
     overflow-y: auto;
     overflow-x: hidden;
 }

  @media only screen and (max-width: 480px) {
      #gloval-nav {
        width: 100%;
      }
  }

 #gloval-nav>nav {
     position: absolute;
     top: 100px;
 }

 #gloval-nav a {
     display: block;
     color: #fff;
     text-decoration: none;
     /*padding: 3.0rem 0;*/
     transition: color .6s ease;
 }

 #gloval-nav a:hover {
     color: #666;
 }

 #gloval-nav ul {
     list-style: none;
 }

 #gloval-nav ul li {
     opacity: 0;
     -webkit-transform: translateX(200px);
     transform: translateX(200px);
     transition: opacity .2s ease, -webkit-transform .6s ease;
     transition: transform .6s ease, opacity .2s ease;
     transition: transform .6s ease, opacity .2s ease, -webkit-transform .6s ease;
     line-height: 2.0;
 }

 #gloval-nav .list_item_01 {
     padding-bottom: 5.0rem;
     padding-left: 5vw;
     padding-right: 5vw;
 }

 @media only screen and (max-width: 480px) {
     #gloval-nav .list_item_01 {
         padding-left: 15px;
     }
 }

  #gloval-nav .list_item_01 .txtx{
      padding-top: 60px;
      font-size: 12px;
  }

 @media only screen and (max-width: 896px) {
    #gloval-nav .list_item_01 .txtx {
        display: none;
        }
 }

 #gloval-nav .list_item_01>li {
     margin-top: 5.0rem;
 }

 #gloval-nav .list_item_01>li:first-child {
     margin-top: 0;
     text-align: center;
 }

 #gloval-nav .list_item_02 {
     padding-top: 2.0rem;
 }

 #gloval-nav .list_item_03 {
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
     justify-content: center;
     -webkit-box-align: end;
     -webkit-align-items: flex-end;
     -ms-flex-align: end;
     align-items: flex-end;
     padding-top: 2.0rem;
 }

 #gloval-nav .list_item_03 li {
     padding: 0 0.8rem;
 }

 /* open */

 .open {
     overflow: hidden;
 }

 .open #gloval-nav {
     visibility: visible;
     opacity: 1;
 }

 .open #gloval-nav li {
     opacity: 1;
     -webkit-transform: translateX(0);
     transform: translateX(0);
     transition: opacity .9s ease, -webkit-transform 1s ease;
     transition: transform 1s ease, opacity .9s ease;
     transition: transform 1s ease, opacity .9s ease, -webkit-transform 1s ease;
 }

 /* nav-toggle */

 #nav-toggle {
     position: fixed;
     top: 40px;
     right: 50px;
     height: 32px;
     cursor: pointer;
     z-index: 1000;
 }

 @media only screen and (max-width: 896px) and (min-width:319px) {
     #nav-toggle {
         position: fixed;
         right: 12px;
        top: 30px;
     }
 }

 #nav-toggle span {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 8);
 }

 #nav-toggle>div {
     position: relative;
     width: 36px;
 }

 #nav-toggle span {
     width: 100%;
     height: 3px;
     left: 0;
     display: block;
     background: #fff;
     position: absolute;
     transition: top .5s ease, -webkit-transform .6s ease-in-out;
     transition: transform .6s ease-in-out, top .5s ease;
     transition: transform .6s ease-in-out, top .5s ease, -webkit-transform .6s ease-in-out;
 }

 #nav-toggle span:nth-child(1) {
     top: 0;
 }

 #nav-toggle span:nth-child(2) {
     top: 14px;
 }

 #nav-toggle span:nth-child(3) {
     top: 28px;
 }

 #nav-toggle:hover span:nth-child(1) {
     top: 4px;
 }

 #nav-toggle:hover span:nth-child(3) {
     top: 23px;
 }

 .open #nav-toggle span {
     background: #fff;
 }

 .open #nav-toggle span:nth-child(1) {
     top: 15px;
     -webkit-transform: rotate(45deg);
     transform: rotate(45deg);
 }

 .open #nav-toggle span:nth-child(2) {
     top: 15px;
     width: 0;
     left: 50%;
 }

 .open #nav-toggle span:nth-child(3) {
     top: 15px;
     -webkit-transform: rotate(-45deg);
     transform: rotate(-45deg);
 }

/* 共通 */

.black_triangle_topbg {
    background: url(../images/black_triangle_topbg.png) no-repeat;
    height: 238px;
    width: 100%;
    margin-top: -238px;
    position: relative;
    z-index: 1;
}

.black_triangle_bottombg {
    background: url(../images/black_triangle_bottombg.png) no-repeat;
    height: 239px;
    width: 100%;
    margin-bottom: -238px;
    position: relative;
    z-index: 1;
}


@media only screen and (max-width: 480px) {
    .black_triangle_bottombg {
        background-size: contain;
            height: 170px;
    }
 }

.concrete_triangle_topbg {
    background: url(../images/concrete_triangle_topbg.png) no-repeat;
    height: 233.09px;
    width: 100%;
    margin-top: -233.09px;
    position: relative;
    z-index: 1;
}

@media only screen and (max-width: 480px) {
    .concrete_triangle_topbg {
        margin-top: -300px;
    }
 }

.concrete_triangle_bottombg {
    background: url(../images/concrete_triangle_bottombg.png) no-repeat;
    height: 233.09px;
    width: 100%;
    margin-bottom: -233.09px;
    position: relative;
    z-index: 1;

}

@media only screen and (max-width: 480px) {
    
.concrete_triangle_bottombg {
    background-size: cover;
    height: 100px;
    margin-bottom: -100px;
}
 }


.img_title {
    text-align: center;
    position: relative;
    z-index: 5;
}

.main-title {
    font-size: 24px;
    font-weight: bold;
    color: #FFFA63;
}

.white_btn {
    position: relative;
    width: 200px;
    display: flex;
    justify-content: end;
    font-size: 14px;
    padding: 10px;
    margin: auto;
    border: 1px solid #fff;
}

.white_btn .txt {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    color: #fff;
}

.white_btn .arrow-right img {
    padding-top: 5px;
}

.black_btn {
    position: relative;
    width: 200px;
    display: flex;
    justify-content: end;
    font-size: 14px;
    padding: 10px;
    margin: auto;
    border: 1px solid #000;
}

.black_btn .txt {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    color: #000;
}

.black_btn .arrow-right img {
    padding-top: 5px;
}


/* home_about */

.home_about {
    padding-top: 100px;
    padding-bottom: 200px;
    background: url(../images/bmx_bg.jpg) no-repeat;
}

.home_about .container {
    position: relative;
}

.home_about .bmx_01 {
    position: absolute;
    top: 250px;
    left: -320px;
    z-index: 2;
}


@media only screen and (max-width: 896px) {
    .home_about .bmx_01 {
        position: absolute;
        top: 355px;
        left: -50px;
        z-index: 2;
        width: 40%;
    }
}

@media only screen and (max-width: 480px) {
    .home_about .bmx_01 {
            position: absolute;
            top: 460px;
            left: 0px;
            z-index: 2;
            width: 40%;
        }
}

.home_about .main-title {
    padding-bottom: 10px;
}

.home_about .title_small {
    padding-bottom: 30px;
}

.home_about h2 {
    font-size: 32px;
    color: #fff;
    font-weight: bold;
    font-family: 'DIN', Arial, sans-serif;
    padding-bottom: 30px;
}

.home_about .wrap {
    text-align: center;
}

.home_about .title_small {
    width: 520px;
    margin: auto;
    text-align: left;
    color: #fff;
}

@media only screen and (max-width: 896px) {
    .home_about .title_small {
            width: auto;
        }
}

/* home_room */

.home_room  {
    background: url(../images/bmx_bg.jpg) no-repeat;
    padding-bottom: 230px;
    position: relative;
    padding-top: 200px;
}

@media only screen and (max-width: 480px) {
    .home_room {
padding-top: 70px;
        }
}

.home_room .img_title {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding-bottom: 20px;
}

@media only screen and (max-width: 480px) {
    .home_room .img_title {
            top: 7%;
        }
}

.home_room .title_small {
    color: #fff;
}

.home_room .width4 {
    padding-top: 35px;
}

.home_room .wrap {
    display: flex;
    padding-top: 150px;
}

@media only screen and (max-width: 896px) {
    .home_room .wrap {
            display: block;
            padding-top: 20px;
        }
}

.home_room .wrap:nth-of-type(3) {
    flex-direction: row-reverse;
    padding-top: 100px; /* 必要に応じて値を調整 */
}

@media only screen and (max-width: 480px) {
    .home_room .wrap:nth-of-type(3) {
            flex-direction: row-reverse;
            padding-top: 30px;
            /* 必要に応じて値を調整 */
        }
}

.home_room .floor01 {
    padding-right: 20px;
    text-align: right;
}

@media only screen and (max-width: 896px) {
    .home_room .floor01 {
        padding-right: 0px;
        text-align: left;
        width: 30%;
        margin-bottom: -50px;
        position: relative;
    }
}

.home_room .floor02 {
    padding-left: 20px;
    text-align: left;
}

@media only screen and (max-width: 896px) {
    .home_room .floor02 {
        padding-right: 0px;
        text-align: left;
        width: 30%;
        margin-bottom: -50px;
        position: relative;
    }
}

.home_room .bmx_room {
    padding-bottom: 15px;
}

.home_room .main-title {
    padding-bottom: 15px;
}

/* home_member */

.home_member {
    background: #3B3939;
    padding-bottom: 30px;
    position: relative;
    z-index: 2;
}

@media only screen and (max-width: 480px) {
    .home_member {
        padding-bottom: 80px;
    }
}

.home_member .container {
    position: relative;
}

.home_member .bmx_02 {
    position: absolute;
    right: -365px;
    top: -600px;
    z-index: 1;
}

@media only screen and (max-width: 896px) {
    .home_member .bmx_02 {
            position: absolute;
            right: -80px;
            width: 40%;
            top: -237px;
            z-index: 1;
        }
}

@media only screen and (max-width: 480px) {
    .home_member .bmx_02 {
        position: absolute;
        right: 0px;
        width: 40%;
        top: -237px;
        z-index: 1;
    }
}

.home_member .container {
    position: relative;
}

.home_member .bmx_03 {
    position: absolute;
    left: -390px;
    bottom: -720px;
    z-index: 1;
}

@media only screen and (max-width: 896px) {
    .home_member .bmx_03 {
        position: absolute;
            left: -40px;
            bottom: -430px;
            width: 45%;
    }
}

@media only screen and (max-width: 480px) {
    .home_member .bmx_03 {
            left: -15px;
            bottom: -250px;
        }
}

.home_member .img_title {
    position: absolute;
    top: -5%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding-bottom: 20px;
}
.home_member .wrap {
    padding-bottom: 45px;
    position: relative;
    z-index: 1;
}

.home_member .slider-1-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.home_member .slider-1 {
    padding-top: 60px;
    display: flex;
    transition: transform 0.5s ease;
}

@media only screen and (max-width: 896px) {
    .home_member .slider-1 {
        padding-top: 90px;
    }
}

.home_member .slide-card {
    flex: 0 0 calc(25% - 20px);
    /* デフォルトは4カラム表示 */
    margin: 10px;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    position: relative;
}

.home_member .slider-1 img {
    width: 100%;
    border-radius: 8px;
}

.home_member .card-info {
    padding: 10px;
}

.home_member .prev-1,
.next-1 {
    background: transparent;
    border: none;
    width: 0;
    height: 0;
    cursor: pointer;
    position: absolute;
    top: 57%;
    transform: translateY(-50%);
    z-index: 10;
}

.home_member .prev-1 {
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-right: 25px solid black;
    left: -2px;
}

.home_member .next-1 {
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 25px solid black;
    right: -2px;
}

/* メディアクエリ: 768px以下の画面用 */
@media (max-width: 768px) {
    .home_member .slide-card {
        flex: 0 0 calc(50% - 20px);
        /* 2カラム表示 */
    }
}

/* メディアクエリ: 390px以下の画面用 */
@media (max-width: 390px) {
    .home_member .slide-card {
        flex: 0 0 calc(50% - 10px);
        /* 2カラム表示 */
        margin: 5px;
    }

    .home_member .slider-1 {
        width: 100%;
    }
}

/* home_profile */

.home_profile {
    padding-bottom: 300px;
    padding-top: 100px;
}

@media only screen and (max-width: 480px) {
    .home_profile {
        padding-top: 50px;
        padding-bottom: 70px;
    }
}



.home_profile .main-title {
    text-align: center;
}

.home_profile .slider-2-container {
  position: relative;
  width: 90%;
  margin: auto;
  overflow: hidden;
}

.home_profile .slider-2 {
  display: flex;
  transition: transform 0.5s ease;
}

.home_profile .detailed-card {
  display: flex;
  min-width: 100%;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}


@media only screen and (max-width: 480px) {
    .home_profile .detailed-card {
        display: block;
      }
}


.home_profile .card-details {
    padding-top: 30px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  background: #000;
  color: #fff;
  position: relative;
  width: 550px;
  text-align: left;
}

@media only screen and (max-width: 480px) {
    .home_profile .card-details {
      width: auto;
    }
}


.home_profile .btn {
    position: absolute;
    right: 20px;
    bottom: 20px;
}

.home_profile .card-details h3 {
    font-family: 'DIN', Arial, sans-serif;
  font-size: 38px;
}

.home_profile .card-details span {
        font-family: 'DIN', Arial, sans-serif;
  font-size: 20px;
  color: #fff;
}

.home_profile .card-details p {
  font-size: 16px;
  padding-top: 15px;
  padding-bottom: 15px;
    border-bottom: 1px solid #707070;
}

.home_profile .card-details a {
  color: #fff;
}


.home_profile .prev-2, .next-2 {
    background: transparent; /* 背景色を透明に */
    border: none; /* ボーダーを消す */
    width: 0;
    height: 0;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}
.home_profile .prev-2 {
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-right: 25px solid #fff; /* 三角形の色と方向 */
    left: 10px; /* 左端に配置 */
}
.home_profile .next-2 {
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 25px solid #fff; /* 三角形の色と方向 */
    right: 10px; /* 右端に配置 */
}


/* top_gallery */
    

.top_gallery {
    background: url(../images/concrete-bg.jpg) repeat;
    position: relative;
}

@media only screen and (max-width: 480px) {
    .top_gallery {
            padding-bottom: 80px;
        }
}

.top_gallery .container {
    position: relative;
}

.top_gallery .bmx_04 {
position: absolute;
    left: -390px;
    top: -350px;
    z-index: 2;
}

@media only screen and (max-width: 896px) {
    .top_gallery .bmx_04 {
            width: 40%;
            left: -41px;
            top: -138px;
        }
}



.top_gallery .img_title {
    z-index: 2;
    position: absolute;
    top: -10%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@media only screen and (max-width: 480px) {
    .top_gallery .img_title {
        top: -7%;
        }
}

.top_gallery .wrap {
    padding-top: 40px;
    position: relative;
}

.top_gallery .floor01 {
    position: absolute;
    top: 10px;
    left: -10px;
    z-index: 3;
}

@media only screen and (max-width: 480px) {
    .top_gallery .floor01 {
        width: 30%;
    }
    
}


.top_gallery .floor02 {
    position: absolute;
    top: 10px;
    right: -10px;
    z-index: 3;
}

@media only screen and (max-width: 480px) {
    .top_gallery .floor02 {
        width: 30%;
        top: 75px;
    }
    
}

.top_gallery .wrap {
    position: relative;
    z-index: 3;
}


.top_gallery .wrap:nth-of-type(2) {
    padding-top: 120px;
}

@media only screen and (max-width: 480px) {
    .top_gallery .wrap:nth-of-type(2) {
            padding-top: 65px;
        }

}

.top_gallery .slider-3-container {
  position: relative;
  width: 80%;
  margin: auto;
  overflow: hidden;
}

@media only screen and (max-width: 480px) {
    .top_gallery .slider-3-container {
            width: 100%;
        }
}

.top_gallery .slider-3 {
  display: flex;
  transition: transform 0.5s ease;
}

.top_gallery .slide-card {
  flex: 0 0 100%; /* フルサイズで表示 */
  text-align: center;
}

.top_gallery .slider-3 img {
  width: 100%;
  border-radius: 8px;
}

.top_gallery .prev-3, .next-3 {
    background: transparent; /* 背景色を透明に */
    border: none; /* ボーダーを消す */
    width: 0;
    height: 0;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.top_gallery .prev-3 {
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-right: 25px solid black; /* 三角形の色と方向 */
    left: -2px; /* 左端に配置 */
}

.top_gallery .next-3 {
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 25px solid black; /* 三角形の色と方向 */
    right: -2px; /* 右端に配置 */
}

/* home_school */

.home_school {
    background: url(../images/black_bmxbg.jpg) repeat;
    padding-bottom: 270px;
    padding-top: 230px;
    position: relative;
    background-position: center;
}

@media only screen and (max-width: 896px) {
    .home_school {
    padding-top: 300px;
    padding-bottom: 180px;
    background-size: contain;
    }
}

@media only screen and (max-width: 480px) {
    .home_school {
            padding-bottom: 200px;
            padding-top: 160px;
        }
}

.home_school .img_title {
    position: absolute;
    z-index: 2;
    position: absolute;
    top: 6%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@media only screen and (max-width: 896px) {
    .home_school .img_title {
        top: 11%;
        }
}

@media only screen and (max-width: 480px) {
    .home_school .img_title {
        top: 4%;
    }
}


.home_school .wrap{
    padding-top: 40px;
    text-align: center;
    color: #fff;
    position: relative;
    z-index: 3;
}

@media only screen and (max-width: 896px) {
    .home_school .wrap {
            padding-top: 50px;
        }
}

.home_school .wrap02 {
    padding-left: 10vw;
    padding-right: 10vw;
    display: flex;
    justify-content: center;
}

@media only screen and (max-width: 480px) {
    .home_school .wrap02 {
            display: block;
        }
}

.home_school .txt_box {
    padding: 10px;
}

.home_school .instructor {
    margin-left: 10px;
    margin-right: 10px;
    position: relative;
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

@media only screen and (max-width: 480px) {
    .home_school .instructor {
        margin-bottom: 40px;
        margin-left: 0px;
        margin-right: 0px;
        }
}

.home_school .instructor img {
    width: 100%;
}

.home_school .bmx_school {
    padding-bottom: 25px;
}

.home_school .main-title {
    padding-bottom: 10px;
}

.home_school .title_small {
    width: 650px;
    margin: auto;
    text-align: left;
    padding-bottom: 30px;
}

.home_school .btn_box {
    display: flex;
    justify-content: center;
}

.home_school .white_btn {
    margin: initial;
    margin-left: 10px;
    margin-right: 10px;
}

.home_profile .white_btn {
    margin: auto;
}

.home_school .en_name {
    font-size: 36px;
    font-weight: bold;
    font-family: 'DIN', Arial, sans-serif;
    line-height: 36px;
}

.home_school .name {
    font-size: 16px;
    padding-bottom: 20px;
}

.home_school .wrap02 .btn {
    position: absolute;
    right: 10px;
    bottom: 10px;
}



/* common_contact */

.common_contact {
    padding-top: 270px;
    padding-bottom: 50px;
    background: url(../images/black_bg.jpg) repeat;
    position: relative;
}

@media only screen and (max-width: 896px) {
    .common_contact {
            padding-top: 270px;
        }
}

@media only screen and (max-width: 480px) {
    .common_contact {
            padding-top: 120px;
        }
}

.common_contact .img_title {
    z-index: 2;
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@media only screen and (max-width: 896px) {
    .common_contact .img_title {
        top: 27%;
    }
}

@media only screen and (max-width: 480px) {
    .common_contact .img_title {
            top: 10%;
        }
}


.common_contact .wrap {
    display: flex;
    justify-content: center;
    padding-bottom: 60px;
}


.common_contact .wrap .width4:first-child {
    margin-right: 18px;
}

@media only screen and (max-width: 480px) {
    .common_contact .wrap .width4:first-child {
            margin-right: 0px;
        }
}


.common_contact .wrap .width4:last-child {
    margin-left: 18px;
}

@media only screen and (max-width: 480px) {
    .common_contact .wrap .width4:last-child {
    margin-left: 0px;
}
}

.common_contact .btn_box {
    height: 130px;
    padding: 20px;
    border: 1px solid #fff;
    border-radius: 5px;
    position: relative;
    margin: 5px;
}

.common_contact .svg_txt {
    text-align: center;
}

.common_contact .arrow-right {
    position: absolute;
    top: 50%;
    right: 1%;
    transform: translateY(-50%) translateX(-50%);
}

.common_contact .title_small {
    padding-bottom: 30px;
    padding-top: 30px;
    color: #fff;
    text-align: center;
}

.common_contact .partner {
    text-align: center;
    color: #FFFA63;
    font-size: 40px;
    font-weight: bold;
    font-family: 'DIN', Arial, sans-serif;
    padding-bottom: 25px;
}

.common_contact .banner_logo {
    text-align: center;
}

/* footer */

.footer {
    background: #000;
    color: #fff;
    text-align: center;
    padding-top: 55px;
}

.footer .btn_box {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.footer .white_btn {
    padding: 20px;
    margin: initial;
    margin-top: 16px;
}

.footer .social-icons {
    display: flex;
    justify-content: center;
    padding-bottom: 20px;
}

.footer .social-icons li {
    padding-left: 10px;
    padding-right: 10px;
}

.footer .logo {
    padding-bottom: 20px;
}

.footer .title_medium {
    color: #FFFA63;
    font-weight: bold;
    padding-bottom: 5px;
}

.footer .copyright {
    font-weight: bold;
    font-family: 'DIN', Arial, sans-serif;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* header */

.header .pc {
    position: absolute;
    z-index: 2;
    color: #fff;
}

.header .logo {
    padding-bottom: 10px;
}

.header .address {
    font-size: 12px;
}

.header .header_leftbox {
    padding-left: 30px;
    padding-top: 35px;
}

.header .header_leftbox .txt {
    font-size: 12px;
}

.header .btn_box {
    display: flex;
    margin-bottom: 20px;
}

.header .white_btn {
    padding: 20px;
    margin: initial;
    margin-top: 16px;
}




/*
home_keyvisual******************************/

.home_keyvisual {
    height: 100vh;
}

@media only screen and (max-width: 1200px) {
    .home_keyvisual {
        max-height: 700px !important;
    }
}


/* sub_keyvisual */

.sub_keyvisual {
    background: url(../images/black_bg.jpg) repeat;
    padding-top: 90px;
}

.sub_keyvisual .wrap {
    color: #fff;
    text-align: center;
}

.sub_keyvisual .img_title {
    padding-bottom: 50px;
}

.sub_keyvisual .main-title {
    padding-bottom: 10px;
}

.sub_keyvisual .title_small {
    padding-bottom: 18px;
    width: 660px;
    text-align: left;
    margin: auto;
}

@media only screen and (max-width: 896px) {
    .sub_keyvisual .title_small  {
        width: auto;
    }
}

.sub_keyvisual .name {
    display: block;
    text-align: right;
    padding-top: 15px;
}


/* concept */

.concept {
    background: url(../images/black_bg.jpg) repeat;
    padding-bottom: 110px;
}

.concept .wrap {
    position: relative;
    text-align: center;
}

.concept .main-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.concept .title_small {
    padding-top: 20px;
    color: #fff;
    width: 660px;
    margin: auto;
    text-align: left;
}

/* shop_address */

.shop_address {
    background: url(../images/black_bg.jpg) repeat;
    padding-bottom: 350px;
}

@media only screen and (max-width: 480px) {
    .shop_address {
            padding-bottom: 260px;
        }
}

.shop_address .wrap {
    padding-bottom: 45px;
    color: #fff;
}

.shop_address ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: 660px;
  border-top: 1px solid #707070;
  margin: auto;
}

.shop_address li {
  padding-bottom: 15px;
  padding-top: 15px;
  border-bottom: 1px solid #707070;
}

.shop_address a {
  color: #fff;
  text-decoration: none;
}

.shop_address a:hover {
  text-decoration: underline;
}

.shop_address .main-title {
    text-align: center;
    padding-bottom: 15px;
}

.shop_address .logo {
    text-align: center;
}

.shop_address .map {
    margin-bottom: 50px;
}

.shop_address .white_btn {
    padding: 60px;
}






/* staff_list */


.staff_list {
    background: url(../images/concrete-bg.jpg) repeat;
    padding-top: 200px;
    padding-bottom: 1px;
    position: relative;
}

.staff_list .container {
    position: relative;
}

.staff_list .bmx_05 {
    position: absolute;
    right: -390px;
    top: -700px;
    z-index: 1;
}

@media only screen and (max-width: 896px) {
    .staff_list .bmx_05 {
        position: absolute;
            right: -50px;
            top: -400px;
            z-index: 1;
            width: 40%;
    }

}

@media only screen and (max-width: 480px) {
    .staff_list .bmx_05 {
            position: absolute;
            right: -50px;
            top: -290px;
            z-index: 1;
            width: 40%;
        }

}

.staff_list .img_title {
    z-index: 2;
    position: absolute;
    top: -12%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@media only screen and (max-width: 896px) {
    .staff_list .img_title {
            z-index: 2;
            position: absolute;
            top: -4%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

}

.staff_list .wrap {
    background: #fff;
    display: flex;
    margin-left: 80px;
    padding-bottom: 20px;
    margin-bottom: 120px;
}

@media only screen and (max-width: 896px) {
    .staff_list .wrap {
        display: block;
        margin-left: 40px;
    }
    
}

@media only screen and (max-width: 480px) {
    .staff_list .wrap:nth-of-type(4) {
            margin-bottom: 40px;
        }
}

.top_gallery .wrap:nth-of-type(2) {
    padding-top: 120px;
}

@media only screen and (max-width: 480px) {
    .top_gallery .wrap:nth-of-type(2) {
            padding-top: 60px;
        }
}

.staff_list .slider-3-container {
  position: relative;
  margin-left: -80px;
  margin-top: -70px;
  overflow: hidden;
}

@media only screen and (max-width: 480px) {
    .staff_list .slider-3-container {
            position: relative;
            margin-left: -40px;
            margin-top: -70px;
            overflow: hidden;
        }
}

.staff_list .slider-3 {
  display: flex;
  transition: transform 0.5s ease;
}

.staff_list .slide-card {
  flex: 0 0 100%; /* フルサイズで表示 */
  text-align: center;
}

.staff_list .slider-3 img {
  width: 100%;
  border-radius: 8px;
}

.staff_list .prev-3, .next-3 {
    background: transparent; /* 背景色を透明に */
    border: none; /* ボーダーを消す */
    width: 0;
    height: 0;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.staff_list .prev-3 {
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-right: 25px solid black; /* 三角形の色と方向 */
    left: 0px; /* 左端に配置 */
}

.staff_list .next-3 {
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 25px solid black; /* 三角形の色と方向 */
    right: 0px; /* 右端に配置 */
}

.staff_list .txt_box {
    padding: 40px;
}

@media only screen and (max-width: 480px) {
    .staff_list .txt_box {
            padding: 20px;
        }
}


.staff_list .list-container {
    margin: 0 auto;
}

.staff_list .list-item {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px dotted #000;
    padding: 10px 0;
}

.staff_list .date {
    flex: 1;
    text-align: left;
}

.staff_list .title {
    flex: 3;
    text-align: left;
}

.staff_list .title_medium {
    font-size: 26px;
    font-weight: bold;
    font-family: 'DIN', Arial, sans-serif;
    padding-bottom: 15px;
}

.staff_list .post {
    font-size: 26px;
    font-weight: bold;
    font-family: 'DIN', Arial, sans-serif;
}

.staff_list .post span{
    font-size: 14px;
    display: block;
}

.staff_list .en_name {
    font-size: 46px;
    font-weight: bold;
    font-family: 'DIN', Arial, sans-serif;
}

.staff_list .name {
    font-size: 24px;
    font-weight: bold;
    font-family: 'DIN', Arial, sans-serif;
}


.staff_list .title_medium span {
    font-size: 16px;
    display: block;
}

.staff_list .awards {
    font-size: 36px;
    font-weight: bold;
    font-family: 'DIN', Arial, sans-serif;
    padding-top: 35px;
}

.staff_list .awards span {
    font-size: 16px;
    display: block;
}

.staff_list .right_box {
    padding-left: 35px;
    padding-top: 25px;
    padding-right: 20px;
}

@media only screen and (max-width: 480px) {
    .staff_list .right_box {
            padding-left: 20px;
            padding-top: 25px;
            padding-right: 20px;
        }
}

.staff_list .social-icons {
    display: flex;
    padding-top: 30px;
}

.staff_list .social-icons li {
    padding-left: 10px;
    padding-right: 10px;
}










.facility_info  {
    background: url(../images/black_bg.jpg) repeat;
    padding-bottom: 300px;
    padding-top: 370px;
    position: relative;
}

@media only screen and (max-width: 480px) {
    .facility_info {
            background: url(../images/black_bg.jpg) repeat;
            padding-bottom: 300px;
            padding-top: 180px;
            position: relative;
        }

}

.facility_info .img_title {
    z-index: 2;
    position: absolute;
    top: 6%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@media only screen and (max-width: 896px) {
    .facility_info .img_title {
        top: 8%;
    }

}

@media only screen and (max-width: 480px) {
    .facility_info .img_title {
            top: 4%;
        }

}

.facility_info .room_img {
    text-align: center;
}

.facility_info .title_small {
    color: #fff;
}

.facility_info .width4 {
    padding-top: 35px;
}

.facility_info .wrap {
    display: flex;
    padding-top: 150px;
}

@media only screen and (max-width: 896px) {
    .facility_info .wrap {
            display: block;
            padding-top: 150px;
        }

}

@media only screen and (max-width:480px) {
    .facility_info .wrap {
        padding-top: 30px;
    }

}

.facility_info .wrap:nth-of-type(3) {
    flex-direction: row-reverse;
    padding-top: 100px; /* 必要に応じて値を調整 */
}

.facility_info .floor01 {
    padding-right: 20px;
    text-align: right;
}

@media only screen and (max-width: 896px) {
    .facility_info .floor01 {
        padding-right: 0px;
        text-align: left;
        width: 30%;
        margin-bottom: -50px;
        position: relative;
    }
}

.facility_info .floor02 {
    padding-left: 20px;
    text-align: left;
}

@media only screen and (max-width: 896px) {
    .facility_info .floor02 {
        padding-right: 0px;
        text-align: left;
        width: 30%;
        margin-bottom: -50px;
        position: relative;
    }
}

.facility_info .bmx_room {
    padding-bottom: 15px;
}

.facility_info .main-title {
    padding-bottom: 15px;
}

/* floor_btn */

.floor_btn {
    background: url(../images/black_bg.jpg) repeat;
    padding-bottom: 200px;
}

.floor_btn .wrap {
    display: flex;
    justify-content: center;
}

.floor_btn .btn1f {
    padding-right: 60px;
}

@media only screen and (max-width: 896px) {
    .floor_btn .btn1f {
        padding-right: 0px;
        width: 40%;
    }
}

.floor_btn .btn2f {
    padding-left: 60px;
}

@media only screen and (max-width: 896px) {
    .floor_btn .btn2f {
        padding-left: 0px;
                width: 40%;
    }
}

/* shop */

    

.shop {
    background: url(../images/concrete-bg.jpg) repeat;
    padding-bottom: 1px;
}

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

    .shop {
        padding-top: 50px;
    }
}

.shop .container {
    position: relative;
}

.shop .bmx_06 {
    position: absolute;
    left: -390px;
    top: -430px;
    z-index: 1;
}

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

    .shop .bmx_06 {
        position: absolute;
        left: -60px;
        top: -270px;
        z-index: 1;
        width: 45%;
    }
}

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

    .shop .bmx_06 {
            position: absolute;
            left: -40px;
            top: -180px;
            z-index: 1;
            width: 45%;
        }
}

.shop .shop_title {
    text-align: center;
    padding-bottom: 130px;
    position: relative;
    z-index: 3;
}

.shop .wrap {
    background: #fff;
    display: flex;
    margin-left: 80px;
    padding-bottom: 20px;
    margin-bottom: 120px;
    position: relative;
    z-index: 2;
}

@media only screen and (max-width: 896px) {
    .shop .wrap {
        display: block;
    }
    
}

@media only screen and (max-width: 896px) {
    .shop .wrap:nth-of-type(4) {
            margin-bottom: 0px;
        }

}



.shop .slider-3-container {
  position: relative;
  margin-left: -80px;
  margin-top: -70px;
  overflow: hidden;
}

.shop .slider-3 {
  display: flex;
  transition: transform 0.5s ease;
}

.shop .slide-card {
  flex: 0 0 100%; /* フルサイズで表示 */
  text-align: center;
}

.shop .slider-3 img {
  width: 100%;
  border-radius: 8px;
}

.shop .prev-3, .next-3 {
    background: transparent; /* 背景色を透明に */
    border: none; /* ボーダーを消す */
    width: 0;
    height: 0;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.shop .prev-3 {
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-right: 25px solid black; /* 三角形の色と方向 */
    left: 10px; /* 左端に配置 */
}

.shop .next-3 {
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 25px solid black; /* 三角形の色と方向 */
    right: 10px; /* 右端に配置 */
}

.shop .txt_box {
    padding: 40px;
}


.shop .list-container {
    margin: 0 auto;
}

.shop .list-item {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px dotted #000;
    padding: 10px 0;
}



.shop .title_medium {
    font-size: 26px;
    font-weight: bold;
    font-family: 'DIN', Arial, sans-serif;
    padding-bottom: 15px;
}


.shop .right_box {
    padding-left: 35px;
    padding-top: 25px;
    padding-right: 20px;
}


/* shop02 */


.shop02 {
    background: url(../images/black_bg.jpg) repeat;
    padding-bottom: 200px;
    padding-top: 280px;
}

@media only screen and (max-width: 896px) {
    
.shop02 {
    padding-bottom: 80px;
} 
}

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

    .shop02 {
        padding-top: 170px;
    }
}

.shop02 .shop_title {
    text-align: center;
    padding-bottom: 130px;
}

.shop02 .wrap {
    display: flex;
    margin-left: 80px;
    padding-bottom: 20px;
    margin-bottom: 120px;
    background-color: rgba(255, 250, 99, 0.5); /* Background with 50% transparency */
}

@media only screen and (max-width: 896px) {
    .shop02 .wrap {
        display: block;
        margin-bottom: 180px;
    }
}

@media only screen and (max-width: 896px) {
    .shop02 .wrap {
            display: block;
            margin-bottom: 100px;
        }
}



.shop02 .slider-3-container {
  position: relative;
  margin-left: -80px;
  margin-top: -70px;
  overflow: hidden;
}

.shop02 .slider-3 {
  display: flex;
  transition: transform 0.5s ease;
}

.shop02 .slide-card {
  flex: 0 0 100%; /* フルサイズで表示 */
  text-align: center;
}

.shop02 .slider-3 img {
  width: 100%;
  border-radius: 8px;
}

.shop02 .prev-3, .next-3 {
    background: transparent; /* 背景色を透明に */
    border: none; /* ボーダーを消す */
    width: 0;
    height: 0;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.shop02 .prev-3 {
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-right: 25px solid black; /* 三角形の色と方向 */
    left: 10px; /* 左端に配置 */
}

.shop02 .next-3 {
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 25px solid black; /* 三角形の色と方向 */
    right: 10px; /* 右端に配置 */
}

.shop02 .txt_box {
    padding: 40px;
}


.shop02 .list-container {
    margin: 0 auto;
}

.shop02 .list-item {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px dotted #000;
    padding: 10px 0;
}



.shop02 .title_medium {
    font-size: 26px;
    font-weight: bold;
    font-family: 'DIN', Arial, sans-serif;
    padding-bottom: 15px;
}


.shop02 .right_box {
    padding-left: 35px;
    padding-top: 25px;
    padding-right: 20px;
    color: #fff;
}



/* home_school */

.school {
    background: url(../images/concrete-bg.jpg) repeat;
    padding-bottom: 65px;
    padding-top: 10px;
    position: relative;
}

.school .container {
    position: relative;
}

.school .bmx_07 {
    position: absolute;
    left: -390px;
    top: -430px;
    z-index: 1;
}

@media only screen and (max-width: 896px) {
    .school .bmx_07 {
        position: absolute;
        left: -75px;
        top: -290px;
        width: 40%;
        z-index: 1;
    }
}

@media only screen and (max-width: 480px) {
    .school .bmx_07 {
            position: absolute;
            left: -50px;
            top: -170px;
            width: 40%;
            z-index: 1;
        }
}

.school .img_title {
    z-index: 2;
    position: absolute;
    top: -6%;
    left: 50%;
    transform: translate(-50%, -50%);
}


.school .wrap{
    padding-top: 40px;
    text-align: center;
    color: #000;
    position: relative;
    z-index: 3;
}

.school .wrap02 {
    padding-left: 10vw;
    padding-right: 10vw;
    display: flex;
    justify-content: center;
}

.school .txt_box {
    padding: 10px;
}

.school .instructor {
    margin-left: 10px;
    margin-right: 10px;
    position: relative;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.school .instructor img {
    width: 100%;
}

.school .bmx_school {
    padding-bottom: 25px;
}

.school .main-title {
    padding-bottom: 10px;
    color: #000;
}

.school .title_small {
    width: 650px;
    margin: auto;
    text-align: left;
    padding-bottom: 30px;
}

.school .btn_box {
    display: flex;
    justify-content: center;
}

.school .white_btn {
    margin: initial;
    margin-left: 10px;
    margin-right: 10px;
}

.school .en_name {
    font-size: 36px;
    font-weight: bold;
    font-family: 'DIN', Arial, sans-serif;
    line-height: 36px;
}

.school .name {
    font-size: 16px;
    padding-bottom: 20px;
}

.school .wrap02 .btn {
    position: absolute;
    right: 10px;
    bottom: 10px;
}

.school .btn_box .black_btn {
    margin: inherit;
    margin-right: 10px;
    margin-left: 10px;
}





.rule  {
    background: url(../images/black_bg.jpg) repeat;
    color: #fff;
    padding-bottom: 200px;
}

@media only screen and (max-width: 896px) {
    .rule {
            padding-bottom: 250px;
        }
}

.rule .txt_box {
    color: #fff;
    width: 650px;
    margin: auto;
    padding-bottom: 35px;
}

@media only screen and (max-width: 896px) {
    .rule .txt_box {
        width: auto;
    }
}

.rule .rule_img {
    text-align: center;
    margin-bottom: 30px;
}

.rule .header-image {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.rule .main-title {
    text-align: center;
    padding-bottom: 20px;
}

.rule .rules-section {
    border: 1px solid #fff;
    width: 650px;
    margin: auto;
    padding: 40px;
    border-radius: 10px;
}

@media only screen and (max-width: 896px) {
    .rule .rules-section {
        width: auto;
    }
}


.rule .price {
    margin-top: 35px;
    margin-bottom: 60px;
}

.rule ul {
    list-style: initial;
    line-height: 36px;
}

.rule .pricing-table {
    border: 1px solid #fff;
    border-collapse: collapse;
    width: 650px;
    margin: auto;
    background-color: #222;
    margin-bottom: 20px;
}

@media only screen and (max-width: 896px) {
    .rule .pricing-table {
        width: 100%;
    }
    
}


.rule .pricing-table th, .pricing-table td {
    border: 1px solid #fff;
    padding: 10px;
    text-align: center;
}

.rule .pricing-table th.weekday-title {
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
    padding-left: 10px;
    vertical-align: top;
}

.rule .pricing-table .price {
    font-weight: bold;
    text-align: right;
}

.rule .pricing-table td {
    border-bottom: 1px dotted #aaa;
}

.rule .pricing-table tr:last-child td {
    border-bottom: none;
}

.rule .other-info-section {
    border: 1px solid #fff;
    width: 650px;
    margin: auto;
    padding: 40px;
    border-radius: 10px;

}

@media only screen and (max-width: 896px) {
    .rule .other-info-section {
        width: auto;
    }

}


.rule .yellow {
    color: #FFFA63;
}

.subtext {
    font-size: 0.9em;
}

.rule  .btn_box {
    height: 130px;
    padding: 20px;
    border: 1px solid #fff;
    border-radius: 5px;
    position: relative;
    margin: 5px;
}

.rule .svg_txt {
    text-align: center;
}

.rule  .wrap {
    display: flex;
    justify-content: center;
    padding-bottom: 20px;
    padding-top: 20px;
}


.rule  .arrow-right {
    position: absolute;
    top: 50%;
    right: 1%;
    transform: translateY(-50%) translateX(-50%);
}

.trial_school  {
    padding-top: 100px;
background: url(../images/concrete-bg.jpg) repeat;
padding-bottom: 1px;
}

.trial_school .container {
    position: relative;
}

.trial_school .bmx_08 {
    position: absolute;
    left: -295px;
    top: -430px;
    z-index: 1;
}

@media only screen and (max-width: 896px) {
    .trial_school .bmx_08 {
            position: absolute;
            left: 0px;
            top: -280px;
            z-index: 1;
            width: 40%;
        }
}

@media only screen and (max-width: 480px) {
    .trial_school .bmx_08 {
        top: -230px;
    }
}

.trial_school .wrap {
    width: 650px;
    margin: auto;
}

@media only screen and (max-width: 896px) {
    .trial_school .wrap {
        width: auto;
    }
    
}



.trial_school .pricing-info {
    display: flex;
    align-items: center;
    padding: 10px;
    border: 1px solid #333;
    margin-bottom: 20px;
}

.trial_school .pricing-info .title {
    font-weight: bold;
    font-size: 1.2em;
    text-align: left;
}

.trial_school .pricing-info .subtext {
    font-size: 0.8em;
    color: #666;
}

.trial_school .divider {
    width: 1px;
    height: 80px;
    background-color: #333;
    margin: 0 10px;
}

.trial_school .pricing-info .details {
    text-align: center;
    font-size: 0.9em;
}

@media only screen and (max-width: 480px) {
    .trial_school .pricing-info .details {
        text-align: left;
    }
    
}


.trial_school .pricing-info .price {
    font-weight: bold;
    font-size: 1.1em;
    text-align: right;
    margin-left: auto;
}

.trial_school .notice-section {
    text-align: center;
    border: 1px solid #333;
    padding: 40px;
    margin-bottom: 20px;
}

.trial_school .notice-section h2 {
    font-size: 1.1em;
    font-weight: normal;
    margin-bottom: 10px;
}

.trial_school .notice-section ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    font-size: 0.9em;
    color: #333;
    text-align: left;
    margin-bottom: 20px;
}

.trial_school .notice-section ul li {
    margin: 5px 0;
}

.trial_school .contact-buttons {
    display: flex;
    justify-content: space-around;
}

.trial_school .contact-buttons .button {
    width: 45%;
    padding: 10px;
    border: 1px solid #333;
    text-align: center;
    font-size: 1em;
    cursor: pointer;
}

.trial_school .contact-buttons .telephone .icon,
.trial_school .contact-buttons .line .icon {
    font-size: 1.2em;
    margin-right: 5px;
}

.trial_school .btn_box {
    border: 1px solid #000;
    padding: 15px;
    margin: 5px;
}

.trial_school .wrap02 {
    display: flex;
    justify-content: center;
}

.trial_school .img_title {
    padding-bottom: 70px;
        position: relative;
            z-index: 3;
}

 .rules-section ul li::marker {
     content: "★";
     color: #fff;
     /* 星の色をゴールドに変更 */
     font-size: 1.2em;
     /* サイズを調整 */
 }


 .other-info-section ul li::marker {
     content: "★";
     color: #fff;
     /* 星の色をゴールドに変更 */
     font-size: 1.2em;
     /* サイズを調整 */
 }

 .trial_school  ul li::marker {
     content: "★";
     color: #000;
     /* 星の色をゴールドに変更 */
     font-size: 1.2em;
     /* サイズを調整 */
 }


 /* 
top_inst */

 .top_inst {
     padding-top: 90px;
    background: url(../images/concrete-bg.jpg) repeat;
 }

 /* @media only screen and (max-width: 480px) {
    .top_inst {
            padding-bottom: 240px;
        }
 } */

 @media only screen and (max-width: 480px) {
     .top_inst {
         padding-bottom: 0px;
     }
 }

 .top_inst .inst_wrap {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 20px;
     padding-bottom: 60px;
     position: relative;
     z-index: 3;
 }

 @media (max-width: 896px) {
     .top_inst .inst_wrap {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media (max-width: 480px) {
     .top_inst .inst_wrap {
        padding-top: 20px;
         padding-bottom: 30px;
     }
 }

 .top_inst .insta_box {
     background: #fff;
     box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
     overflow: hidden;
     margin-bottom: 20px;
     transition: transform 0.3s ease;
     padding-bottom: 25px;
 }

 .top_inst .event_list_item:hover {
     transform: translateY(-5px);
     /* カードにホバー効果 */
 }

 .top_inst .news_img img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }


 .top_inst .caption {
     font-size: 14px;
     color: #555;
     line-height: 1.5;
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
 }

 .top_inst .instagram_day {
     padding-left: 10px;
     padding-right: 10px;
 }

 .top_inst .like {
     padding-left: 10px;
     padding-right: 10px;
 }

 .top_inst .caption {
     padding-left: 10px;
     padding-right: 10px;
 }

 .top_inst .instagram_img img {
     width: 100%;
     height: 310px;
     object-fit: cover;
 }

 @media (max-width: 480px) {
     .top_inst .instagram_img img {
         height: 150px;
     }
 }

 .top_inst .svg_title {
     text-align: center;
     padding-bottom: 30px;
 }



  @media (max-width: 480px) {
    a.nav_log {
            width: 50%;
        }
  }

   nav.breadcrumb a {
        text-align: center;
        font-size: 20px;
        color: #fff;
        font-family: 'DIN', Arial, sans-serif;
    }
  nav.breadcrumb {
    text-align: center;
    font-size: 20px;
    color: #fff;
    font-family: 'DIN', Arial, sans-serif;
  }

  .contact_area {
        background: url(../images/black_bg.jpg) repeat;
  }

  .contact_inner {
    border: 1px solid #fff;
    padding: 25px 65px;
    width: 650px;
    margin: auto;
  }

   @media (max-width: 896px) {
        .contact_inner {
               width: auto;
                padding: 25px 20px;
            }
   }

  .contact_title {
    text-align: center;
    font-size: 100px;
    color: #FFFA63;
    font-family: 'DIN', Arial, sans-serif;
  }

   @media (max-width: 896px) {
        .contact_title {
                text-align: center;
                font-size: 60px;
                color: #FFFA63;
                font-family: 'DIN', Arial, sans-serif;
            }
   }

   .contact_title span {
       font-size: 26px;
       display: block;
   }

    .contact_txt {
       font-size: 16px;
       color: #fff;
   }

   .red {
    color: red;
   }

   .contact_tel {
            background: url(../images/black_bg.jpg) repeat;
            padding-top: 100px;
            padding-bottom: 200px;
   }

   .contact_tel .wrap {
    width: 650px;
    margin: auto;
    border: 1px solid #fff;
        padding: 25px 65px;
   }

          @media (max-width: 896px) {
            .contact_tel .wrap {
                    width: auto;
                    padding: 25px 20px;
                }
          }

   .contact_tel .btn_box {
       height: 80px;
       width: 180px;
       padding: 20px;
       border: 1px solid #fff;
       border-radius: 5px;
       position: relative;
       margin: auto;

   }

   .contact_tel .svg_txt {
       text-align: center;
       width: 45px;
       margin: auto;
   }

   .contact_tel .arrow-right {
       position: absolute;
       top: 50%;
       right: 1%;
       transform: translateY(-50%) translateX(-50%);
   }

         .contact_tel .txt {
            color: #000;
            text-align: center;
            padding-top: 10px;
            padding-bottom: 10px;
}

  .contact_line {
    background: url(../images/concrete-bg.jpg) repeat;
    padding-bottom: 120px;
    padding-top: 120px;
  }
       
@media (max-width: 896px) {
    .contact_line {
            background: url(../images/concrete-bg.jpg) repeat;
            padding-bottom: 0px;
            padding-top: 100px;
        }
}
.contact_line .title_img {
    text-align: center;
}

.contact_line .wrap {
    width: 650px;
    margin: auto;
    border: 1px solid #000;
    padding: 25px 65px;
}

                  @media (max-width: 896px) {
                      .contact_line .wrap {
                          width: auto;
                        padding: 25px 20px;
                      }
                  }

.contact_line .btn_box {
    height: 80px;
    width: 180px;
    padding: 20px;
    border: 1px solid #000;
    border-radius: 5px;
    position: relative;
    margin: auto;

}

.contact_line .svg_txt {
    text-align: center;
    width: 35px;
    margin: auto;
}

.contact_line .arrow-right {
    position: absolute;
    top: 50%;
    right: 1%;
    transform: translateY(-50%) translateX(-50%);
}


        .contact_line .contact_txt {
            font-size: 16px;
            color: #000;
        }

        .required {
            padding-left: 2rem;
        }

.pc_video {
    margin-bottom: -5px;
}

.sp_video {
    display: none;
    margin-bottom: -5px;
}

@media (max-width: 896px) {
    .sp_video {
            display: block;
        }
}

@media (max-width: 896px) {
    .pc_video {
        display: none;
    }
}