@charset "utf-8";

/*===============================
        全体CSS
================================*/

html{
    font-size: 100%;
    scroll-behavior: smooth;
}

body{
    margin: 0;
}

header{
    position: fixed;
    z-index: 100;
    background-color: rgb(255, 255, 255);
    width: 100%;
    height: 100px;
    top: 0;
}

*{
    box-sizing: border-box;
}
h2{
    font-size: 50px;
    font-weight: bold;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    color: #FC33CE;
    /* padding: 20px 0; */
    border-top: 2px solid #fc33ce;
    border-bottom: 2px solid #fc33ce;
    text-align: center;
    margin: 10px auto 0;
    
}

h3{
    font-size: 30px;
    font-weight: bold;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    color: #fc6233;
    /* padding: 20px 0; */
    border-top: 2px solid #fc6233;
    border-bottom: 2px solid #fc6233;
    margin: 10px auto 0;
}
img{
    max-width: 100%;
    height: auto;
}

a{
    text-decoration: none;
}

li{
    list-style: none;
}

.material-symbols-outlined{
    display: none;
}
/*===============================
        ヘッダー
================================*/

.header-inner{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    text-align: center;
}

h1{
    margin-left: 30px;
}

.navi {
    margin: 20px 30px 0 auto;
}

nav ul {
    display: flex;
}

.navi ul li {
    margin-left:40px;
    font-size: 16px;
    font-family: 'Times New Roman', Times, serif;
    color: #FC33CE;
}

.navi ul li:hover{
    opacity: 0.6;
}

.mypage{
    margin-right: 30px;
    font-family: 'Times New Roman', Times, serif;
    font-size: 1.1rem;
}

.mypage a:hover{
    opacity: 0.6;
}


/*===============================
        メイン画像
================================*/
#main-img{
    /*background-color: blueviolet;*/

    width: 100%;
    height: 100%;
    display: block;

      
}

.slider-img{
    margin-top: 100px;
}
/*===============================
        コンセプト
================================*/

.concept{
    width: 90%;
    height: auto;
    margin: 50px auto 0;
    position: relative;
}

.concept-img img{
    margin-top: 20px;
    opacity: 0.8;
}

.concept-text{
    /* background-image: url(../images/concept-img.jpg); */
    width: 80%;
    height: auto;
    line-height: 60px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: white;
    font-size: 1.5rem;
}


/* /*===============================
        ニュース
================================*/

/* #news{
    width:80%;
    height: auto;
    margin: 20px auto 0;
    border: 2px solid #FC33CE;
}
.news-title {
    width: 90%;
    height: auto;
    margin: 50px auto 0;
}
.news-list{
    margin: 20px auto 0;
    width: 100%;
    height: auto;
}

.news-list dl{
    display: flex;
    flex-wrap: wrap;
}


.news-list dt,dd{
    height: 40px;
    margin: 10px 0;
    padding: 10px 0;
}
.news-list dl dt{
    width: 40%;
    font-size: 1.2rem;
    height: 50px;
    text-align: center;
}

.news-list dd {
    width: 60%;
    text-align: left;
    font-size: 1.2rem;
}  */

/* ------------------------------------------
  news page
--------------------------------------------- */
/* category-btn ---------- */
#news {
    width: 90%;
    height: auto;
    text-align: center;
    margin: 30px auto 0;
    padding: 10px 0;
    background-color: #fcfec4;
}
#news-all {
    width: 90%;
    height: auto;
    text-align: center;
    margin: 0 auto;
    padding: 100px 0;
    background-color: #fcfec4;
}


.category-btn {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }

  .category-btn a {
    position: relative;
    background: #E7F3F1;
    border-radius: 50vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    width: 150px;
    height: 3em;
    padding: .5em 1.5em;
    font-size: 14px;
    color: #535353;
    transition: 0.3s ease-in-out;
    font-weight: 500;
    text-decoration: none;
    /* 14pxになる */
    /* margin-right: 1em; */
    text-transform: uppercase;
  }
  
  .category-btn a:hover {
    background: #DDE9E7;
  }
  
  .category-btn div {
    /* 16pxになる */
    margin: 0 1em;
  }
  
  .category-btn a::after {
    content: '';
    width: 5px;
    height: 5px;
    border-top: 2px solid #313131;
    border-right: 2px solid #313131;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 50%;
    right: 20px;
    border-radius: 1px;
    /* transition: 0.3s ease-in-out; */
  }
  
  /* news list ----------*/
  .news-list{
    list-style: none outside;
    padding: 3em 4em;
    background-color: #fcfec4;
  }

  .news-list .item {
    padding: 1em 0;
    /* display: flex; */
  }
  /* .news-list .item a{
    flex-wrap: nowrap;
    text-decoration: none;
    color: #333;
  }
  .news-list .item a:hover {
    opacity: 1;
  } */
  


  .news-list .item .index {
    display: flex;
    align-items: center;
    height: 2em;
    width: 90%;
    margin: 0 auto;
    border-bottom: 1px solid #FC33CE;
  }
  .news-list .item .index-res {
    display: flex;
    height: 2em;
    width: 90%;
    margin: 0 auto;
  }
  
  
  .news-list .item .date{
    margin: 0;
    min-width: 140px;
    font-size: 16px;
    color: #999;
    padding: 0.5em 0;
  }
  .news-list .item .category{
    margin: 5px;
    min-width: 140px;
  }
  .news-list .item .category span{
    display: inline-block;
    padding: .5em 1em;
    background:#E7F3F1;
    color: #535353;
    text-align: center;
    font-size: 12px;
    line-height: 1;
    /* border-radius: 50vh; */
  }
  .news-list .item .title {
    margin: 0;
    width: 100%;
    font-weight: 600;
    color: #535353;
    font-size: 1.2em;
    padding: 0.5em 0 .5em;
  }
  .news-list .item .content{
    width: 80%;
    margin: 0 auto;
    text-align: left;
    line-height: 2rem;
  }
  .news-list .item:is(#i_20221201, #i_20221226) .content span.brand-name {
    border: none;
    font-size: 1.3em; 
    padding: .3em;
  }
  .news-list .item:is(#i_20221212, #i_20221201, .item:is(#i_20221212, #i_20221201, #i_20221226, #i_20230104)) .content span.period
   {
    border: solid 1px #ff6347;
    padding: .3em;
  }
  
  /* category-select-area ----------*/
  .category-select-area {
    display: none;
    align-items: center;
  }
  
  .category-select-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.3rem;
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .category-select-box {
    width: 90%;
    margin: 1em auto;
    text-align: center;
  }
  select#category-select {
    font-size: 0.9rem;
    padding: .4em 0;
    width: 100%;
    max-width: 300px;
    border-radius: 30px;
    border: solid 1px #DDE9E7;
    text-align: center;
    cursor: pointer;
    font-size: 1.1em;
    background-color: #E7F3F1;
    text-transform: uppercase;
  }
  


  /* pagenation-container ---------- */
  .pagination-container {
    margin: 2em;
  }
  nav.pagination-container ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    filter: drop-shadow(1px 1px 5px #ccc);
    transition: 0.5s;
    overflow: hidden;
    gap: 20px;
  }
  nav.pagination-container ul li a {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50vh;
    padding: 13px 18px 13px;
    background: #FFF;
    line-height: 1;
  }
  li.page.navi-active a {
    background: #E7F3F1;
  }
  
  /* news-banner ---------- */
  .news-banner {
    display: flex;
    justify-content: center; 
    margin: 3em 8em;
  }
  
  .news-banner li {
    width: calc(100%/2);
    margin: 2em 1em;
  }
  
  .news-banner a {
    display: block;
  
  }
  
  .news-banner a img {
    display: block;
    max-width:100%;
    min-width: 250px;
      height: auto;
  }
  
  /* news-view-more ----------*/
  .link-arrow.news-view-more {
    margin: 0;
  }
  .link-arrow-title.news-view-more-name {
    /* 10 18 */
    font-size: clamp(0.625rem, 0.534rem + 0.39vw, 1rem);
  }
  
  /* newsの記事にリンクがあった場合 */
  a.newsarticle:hover{
    color: #ccc;
    background-color: #333;
  }
  

/*===============================
        体験レッスン
================================*/
#lesson{
    width: 100%;
    height: auto;
    background-color: #a1fcfe;
}
.lesson-inner{
    width: 90%;
    height: auto;
    text-align: center;
    margin: 30px auto 0;
    padding: 10px 0;
}

.lesson-banner{
    width: 80%;
    margin: 0 auto;
    font-size:2.5em;
    margin: 20px auto;
    border: 5px solid #FC33CE;
    border-radius: 50px;
    background-color: #FC33CE;
    color: #fff;
}

.guide-banner{
    width: 80%;
    margin-top: 10px;
}

.lesson-banner s{
    color: rgb(227, 251, 107);
}
.lesson-banner a{
    color:#ffffff;
}
.lesson-banner:hover{
    opacity: 0.6;
}

.traial-lesson{
    width: 80%;
    height: auto;
    margin: 0 auto;
    background-color: #fff;
    font-size: 1.5rem;
}

.traial-lesson li{
    width:70%;
    margin: 0 auto;
    padding-bottom: 20px;
    text-align: left;
    list-style: disc; 
}
/*===============================
        access
================================*/
.access{
    width: 80%;
    height: auto;
    margin: 50px auto 0;
    align-items: center;
    text-align: center;
    display:block;
    padding-top: 100px;
    margin-top: -60px;
}

.access-inner{
    width: 100%;
    display:flex;
    justify-content: space-between;
}
.access-base{
    margin-top: 50px;
    width: 50%;
}
.access-base iframe{
    width: 100%;
    height:400px;
}

.access-text{
    width: 50%;
    margin-top: 150px;
    font-size: 1.5rem;
}

/* width="600" height="450" */
/*===============================
        フッター
================================*/

footer{
    width: 100%;
    height: 200px;
    margin-top: 50px;
    background-color: rgb(244, 127, 2);
    color: white;
    display:flex;
    justify-content: space-between;
}
footer .unei{
    width: 33%;
    text-align: center;
    margin-top: 20px;
}

footer .unei-sp{
    display: none;
}
footer .sns{
    width: 30%;
    height: 50%;
    /* background-color: #fff; */
    text-align: center;
    margin: 50px auto 0;
    opacity: 0.8;
    display:flex;
}
footer .sns a{
    width: 100%;
    padding-top: 18px;
}

footer .sns img{
    /* background-color: #fff; */
    width: 40%;
    margin: 0 auto;
}
footer .sns img:hover{
    opacity: 0.6;
}

.footer-text{
    width: 25%;
    margin: 30px 0 0 80px;
    line-height:40px;
}
.footer-text a{
    color: #fff;
}

.footer-text a:hover{
    opacity: 0.6;
}

/*===============================
        スケジュール
================================*/
.schedule{
    width: 80%;
    margin: 0 auto;
}
.schedule img{
    width: 100%;
    margin-top: 80px;
    margin: 80px auto ;
    
}

.schedule a{
    width: 100%;
    font-size: 1.5rem;
    display: block;
    text-align: center;
}

.design13 {
    width: 90%;
    text-align: center;
    border-collapse: collapse;
    border-spacing: 0;
    background: #00aa6c;
    color: #ffffff;
    margin: 50px auto;   
   }
   .design13 th {
    padding: 10px;
    background: #5ca3fa;
    border: solid 1px #ffffff;
   }
   .design13 td {
    padding: 10px;
    border: solid 1px #ffffff;
   }

   .pira {
    position   : relative;                /* 指定した分だけ相対的に移動 */
  }
  .pira:hover .balloon {
    display: inline;                /* インライン要素として表示 */
  }


  .balloon {
    position   : absolute;                /* 親要素を基準 */
    display: none;                        /* 要素を非表示 */
    padding: 2px;                         /* テキストの前後の余白 */
    background-color: rgba(102, 102, 255, 0.80);       /* 背景色（透明度） */
    width:180px;                          /* 吹き出し全体の幅 */
    left : -100%;   
    top : 10%;                  /* 表示位置 */
    font-size: 80%;                       /* 文字サイズ */
  }
  .balloon:after{
    border-left: 12px solid rgba(102, 102, 255, 0.50);   /* 吹き出し口の幅・色 */
    border-top: 10px solid transparent;     /* 吹き出し口の高さ１／２ */
    border-bottom: 10px solid transparent;  /* 吹き出し口の高さ１／２ */
    right: -12px;                           /* 吹き出し口の位置調整 */
    top: 5%;                                /* 吹き出し口の縦位置 */
    content: "";                       /* コンテンツの挿入 */
    position: absolute;                /* 親要素を基準 */
  }

  .time{
    color: #2a2a2a;
  }

  .classname{
    width: 100%;
    font-size: 20px;
    color: #2a2a2a;
    background: #fbfbfb;
  }
.senbatsu{
    background-color: #dffd71;
    color: #2a2a2a;
}
  .am{
    background-color: #18e69b;
  }
  .youji{
    background-color: #7bb2fb;
  }
  .matto{
    background-color: #e103dd;
  }
  .open{
    background-color: #cd6f55;
  }

  .setumei-base{
    width: 90%;
    margin: 0 auto;
  }
  .setumei{
    display:flex;
    justify-content: space-between;
    background-color: #9854ff;
    margin: 50px auto;
  }

  .setumei-left{
    width:30%;
    text-align: center;
    background-color: #54c9ff;
  }
  .setumei-center{
    width:30%;
    padding-left: 0;
    line-height:40px;
    text-align: center;
    background-color: #f59846;
  }
  .setumei-right{
    width:30%;
    padding-left: 0;
    line-height:40px;
    text-align: center;
    background-color: #ff76df;
  }


/*===============================
        プライス
================================*/
.price{
    width: 90%;
    height: auto;
    margin: auto;
    padding-top: 100px;
}

.price h3{
    margin: 0 0 20px 0;
}

.price span{
    font-size: 30px;

}
.price-num{
    margin:0 0 30px 30px;
   
    font-size: 40px;
    
}


table{
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

table th,table td{
  padding: 10px 0;
  text-align: center;
}

table tr:nth-child(odd){
  background-color: #eee
}

.price-base{
    width:80%;
    height: auto;
    margin: 20px auto;
    text-align: center;
    /*display:flex;
    justify-content:center;
    background-color: pink;*/
} 


.price-left{
    width: 30%;
}
.price-center{
    width: 30%;
    margin:0 5px;
}
.price-right{
    width: 30%;
    margin-right: 5px;
}

.price-u-left{
    width: 30%;
    margin-right: 5px;
}

.price-u-right{
    width: 30%;
    margin-left: 5px;
}

.price-top{
    width: 100%;
    background-color: #FC33CE;
    font-size:1.2rem;
    font-weight: bold;
    border: 1px solid #333;
}

.price_1{
    width: 100%;
    margin-bottom: 20px;
}

.price_1 dl{
    display: flex;
    width: 100%;
    /* border-bottom: 1px solid #333;
    border-right: 1px solid #333;
    border-left: 1px solid #333; */
    border: 1px solid #333;
    
}


.price_1 dd{
    margin: 0;
    border-bottom: none; 
    border-left: 1px solid #333;
}
.price_1 dt,dd{
    width: 50%;
    height: auto;
    padding: 10px 0;
   
}



/*===============================
        インストラクター
================================*/
.instructor{
    padding-top: 20px;
}

.inst-inner{
    width: 90%;
    height: auto;
    margin: 0 auto;
    /* background-color: rgb(52, 52, 216); */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.inst-inner div{
    overflow: hidden;
    border-radius: 30px;
}

.inst-inner a{
    width: 30%;
    margin: 5px 5px;
    overflow: hidden;
}

.inst-inner a:hover{
    opacity: 0.8;
}
.inst-inner img{
    width: 100%;
    border-radius: 30px;
    transition: transform .8s ease;
}

.inst-inner img:hover{
    transform: scale(1.1);
}
.int-genre{
    font-size: 0.6rem;
}


.inst-inner p{
    text-align: center;
    font-size: 1.5rem;
    width: 100%;
    margin: 10px auto;
}
.int-genre p{
    font-size: 1rem;
}
/* .inst-inner img{
    width: 18%;
    margin: 5px 5px;
} */
/*===============================
    イントラ個別ページ
================================*/
.instructor-inner{
    width: 80%;
    margin: 0 auto;
    display: flex;
}

.inst-img{
    width: 40%;
    margin: 50px 50px 0 0;
}
.inst-img dt{
    background-color: #FC33CE;
    color: #fff;
}
.inst-img dd{
    margin: 0 auto;
}
.inst-text{
    width: 50%;
    margin-top: 30px;
}

/*===============================
        特定商取引、プライバシー、利用規約
================================*/
.tokutei-inner{
    width: 80%;
    padding-top: 100px;
    margin: 0 auto;
    height: auto;
    /* background-color:gray; */
}

.tokutei-inner dl dt{
    margin-top: 20px;
    font-size: 1.2rem;
}
.tokutei-inner dl dd{
    border-bottom: none;
    width: 100%;
    height: auto;
    margin: 0;
    padding-left: 50px;
}


.header-sp{
    display: flex;
}

/*===============================
    contact
================================*/
.form{
    width: 100%;
    margin: 0 auto;
    padding-top: 100px;
}

iframe{
    width: 100%;
  height: 650px;
}


/*===============================
    ガイド
================================*/
.guide{
    width:90%;
    height: auto;
    margin: 0 auto;
    padding-top: 20px;
}

/* .guide-inner{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    background-color: #888;
    margin-top: 20px;
} */
.g-item{
    width: 30%;
    margin-top: 20px;
}
.g-text{
    display: flex;
    margin-bottom: 10px;
}

.g-text p{
    margin: auto 10px;
}

.g-number{
    font-size: 2rem;
    background-color: #fc33ce;
    color: #fff;
    border-radius: 50px;
    width: 50px;
    text-align:center;
}

.g-menu{
    font-size: 1.5rem;
    border-bottom: 2px solid #fc33ce;
}


/*===============================
    ガイド　アコーディオン
================================*/
.guide-inner{
    padding-top: 20px;
}
/* 幅の指定 */
.guide-img{
    width: 80%;
    margin: 0 auto;
}
/* 大項目のテキスト設定 */
.guide-img p{
    font-size: 2.5rem;
    font-weight: bold;
    border-bottom: 2px solid #fc33ce;
}
/*  ガイドを非表示にする */
.guide-content{
    display: none;
}

/* マウスポインタを「リンクを示すポインター」にする */

.guide-title{
    cursor: pointer;
    position: relative;
}

.guide-content{
    cursor: pointer;
}

/* ＋、ーの開閉 */
/* 縦線 */
.guide-title::before{
    position: absolute;
    content: "";
    width: 10px;/* 線の幅 */
    height: 2px;/* 線の太さ */
    background-color: #000;/* 線の色 */
    right: 0px;
    top: 50%;
    /* 線を縦に */
    transform: translateY(-50%) rotate(90deg);
    transition: transform 0.4s ease-in-out;
}

/* 横線 */
.guide-title::after{
    position: absolute;
    content: "";
    width: 10px;/* 線の幅 */
    height: 2px;/* 線の太さ */
    background-color: #000;/* 線の色 */
    right: 0px;
    top: 50%;
    /* 線を縦に */
    transform: translateY(-50%);
    transition: transform 0.4s ease-in-out;
}

.guide-title.open::before{
    transform: rotate(180deg);
}

.guide-title.open::after{
    opacity: 0;
}

/* ------------------------------------------
  contact page
--------------------------------------------- */
.contact-wrapper {
    width: 70%;
    margin: 0 auto;
  }
  
  .contact-wrapper h2{
    margin: 4rem 0 3rem;
    font-size: 40px;
  }

  .contact-wrapper p{
    
    font-size: 30px;
  }
  
  /* contact-form ---------- */
  .contact-form {
    margin: 5em auto;
    font-family: 'Montserrat', sans-serif;
    color: #535353;
  }
  
  .contact-form-item {
    display: flex;
    width: 100%;
    margin: 0 auto 2em auto;
  }
  
  .contact-form-item-label {
    display: flex;
    width: 30%;
    margin-right: 4em;
    align-items:flex-start;
    justify-content:space-between;
    letter-spacing: 0.05em;
    font-size: 1.4em;
  }
  
  .contact-form-item-label-required {
    display: inline-block;
    width: 4em;
    padding: .3em 0;
    text-align: center;
    color: #fff;
    font-size: .8em;
    background-color: #cd6f55;;
    border-radius: .5em;
  }
  
  .contact-form-item-input,
  .contact-form-item-textarea {
    width: 70%;
    padding: 1em;
    font-size: 1em;
    background-color: #E7F3F1;
    border: 1px solid #DDE9E7;
    border-radius: .5em;
  }
  
  .contact-form-item-input{
    height: 5em;
  }
  
  .contact-form-item-textarea{
    height: 10em;
  }
  
  .contact-form-btn-area {
    margin: 4em 0 4em auto;
  }
  
  .contact-form-btn {
    display: block;
    width: 280px;
    margin-left: auto;
    padding: 1em 0;
    color: #535353;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background-color: #E7F3F1;
    border: 1px solid #DDE9E7;
    border-radius: .5em;
  }
  
  .contact-form-btn:hover {
    background-color:#DDE9E7;
  }
  


  
/*===============================
    体験広告ページ
================================*/


.taiken-inner{
        width: 100%;
        padding-top: 100px;
        margin: 0 auto;
        height: auto;
        background-color:#72d0ff;
        
}

.taiken-inner h2{
    width: 80%;
}
.taiken-top{
    width: 80%;
    background: rgb(232, 231, 248);
    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(255,98,8,1) 0%, rgba(247,96,249,1) 100%);
    padding: 30px 0;
    margin: 20px auto;
    color: #ffffff;
    font-size: 30px;
    text-align: center;
}

.taiken-img{
    width: 90%;
    margin: 20px auto;
    height: auto;
    position: relative;
}


.try{
    color: red;
    font-size: 60px;
}

.anshin{
    color: rgb(79, 219, 254);
    font-size: 60px;
}
 /*===============================
    AMプラン広告TOP画像
================================*/

.taiken-img ol li{
    padding-top:10px;
  padding-bottom:10px;
  font-size: 2rem;
}

.amplan{
    color:#f13bd0;
    font-size: 3rem;
    font-weight:bold;
    z-index: 31;
}

.img-text{
    text-align: center;
    width: 60%;
    height: auto;
    background-color: rgba(255, 255, 255,0.8);
    position: absolute;
    top:10%;
    left:20%;
    z-index: 30;
    border-radius: 50px;
}

 /*===============================
    AMプラン広告
================================*/
/*.taiken-annai{
    display: flex;
    background-color: #000;
    margin-top: 20px;
    width: 90%;
    margin: 0 auto;
}*/

.taiken-left{
    width: 90%;
    font-size: 40px;
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    row-gap: 20px;
    margin: 0 auto;
}

.circle{
    width:8%;
   height:80px;
   border-radius:50%;
    background:#f13bd0;
    z-index: 21;
}

.circle span{
    display: block;
    font-size: 50%;
    text-align:center;
    line-height: 80px;
 }

 .ellipse{
    width:32%;
   height:80px;
   border-radius:50px;
    background:rgb(28, 165, 251);
    border: solid 5px #fafafa;
    margin-left: -20px;
    z-index: 20;
}

.ellipse span{
    display: block;
    font-size: 70%;
    text-align:center;
    line-height: 70px;
 }


.ribbon1 {
    width:60%;
    border-radius:50px;
    background:#f13bd0;
    border: solid 5px #fafafa;
    margin-left: 10px;
    z-index: 20;
}

.ribbon1 span{
    display: block;
    font-size: 60%;
    text-align:center;
    line-height: 60px;
 }

.yoyaku{
    width:80%;
    margin: 0 auto;
}

.yoyaku-one ul{
    display: flex;
}

.yoyaku-two ul{
    display: flex;
}
/*===============================
    レンタルページ
================================*/
.rental-inner{
    margin-top:20px;
    width: 100%;
}
.image-box{
    width: 90%;
    margin: 0 auto;
    margin-top: 10px;
    padding-top: 10px;
}
.rental-text{
    margin-top: 20px;
    font-size: 2.5rem;
    text-align: center;
    color: #f13bd0;
}



.rental-price {
    font-size: 2rem;
    text-align: center;
    padding: 20px;
    width: 80%;
    margin: 0 auto;
}

.rental-spec{
    margin: 20px 0;
    text-align: center;
    width: 80%;
    margin: 0 auto;
}

.rental-spec-inner{
    margin: 0 auto;
    width: 80%;
}

.rental-setubi{
    width: 60%;
    margin: 0 auto;
}

.rental-reserve{
    font-size: 2rem;
    text-align: center;
    width: 80%;
    margin: 0 auto;
}



.rental-calendar{
    margin: 20px auto;
    text-align: center;
    width: 80%;
    margin: 0 auto;
}

.calender{
    width: 80%;
    margin: 20px auto;
}

.rental-caution{
    font-size: 1.5rem;
    text-align: center;
}

.g-map{
    width: 80%;
    margin: 20px auto;
}

.rental-access{
    text-align: center;
    width: 80%;
    margin: 0 auto;
}


.koukoku{
    width: 80%;
    margin: 0 auto;
}
/*===============================
    レスポンシブ
================================*/
@media screen and (max-width: 1800px){
    .img-text{
        text-align: center;
        width: 90%;
        position: initial;
        height: auto;
        background-color: rgba(255, 255, 255,0.8);
        border-radius: 30px;
        margin: 0 auto;
    }
}
@media screen and (max-width: 600px){
    /* ナビとマイページアイコンを消す */
    .navi, .mypage{
        display: none;
    }
    /* ヘッダー関係 */
    header{
        height: 50px;
    }
    .header-logo{
        width: 35%;
        margin-right: 40%;
    }
    .material-symbols-outlined{
        display: block;

    }

    .mypage-sp a{
        line-height: 0;
    }




    /* h2調整 */
    h2{
        font-size: 30px;
    }
    /* 体験バナー */
    .lesson-inner p{
        font-size:15px;
    }

    .lesson-banner{
        width: 60%;
        margin: 0 auto;
        font-size:0.9em;
    }
    /* Googleマップ */
    .access-inner{
        width: 100%;
        display:block;
        /* justify-content: space-between; */
    }

    .access-base{
        margin-top: 20px;
        width: 100%;
    }
    .access-base iframe{
        /* width: 100%; */
        height:300px;
    }

    .access-text{
        width: 100%;
        margin-top: 20px;
        font-size: 0.8rem;
    }
    .setumei{
        display: block;
    }
    .setumei-left ,
    .setumei-center ,
    .setumei-right{
        width: 100%;
    }

    /* お知らせ */
    #news{
        width:80%;
        height: auto;
        margin: 50px auto 0;
        /* background-color: #555; */
    }
    
   
    
    /* フッター */
    footer{
        display: block;
        height: auto;
    }
    .unei{
        display:none;
    }

    footer .unei-sp{
        display: block;
        text-align: center;
    }
    .footer-text{
        display: none;
    }

    footer .sns{
        margin: 0 auto;
    }
    /* ハンバーガーメニュー */
    .header-sp{
        display: flex;
    }

    .sp-menu{
        width: 100%;
    }

    .sp-menu ul{
        margin-top: 30px;
        text-align:center;
    }

    .sp-menu ul li{
        line-height: 30px;
    }
    .sp-menu-inner{
        margin-top:50px;
        width: 80%;
        margin: 0 auto;
    }

    /* 料金ページ */
    .price-base{
        display: block;
        /* justify-content:center; */
    } 

    .price-left{
        width: 100%;
    }
    .price-center{
        width: 100%;
        margin:0 5px;
    }
    .price-right{
        width: 100%;
        margin-right: 5px;
    }
    .price-right-d{
        width: 100%;
    }
    .price-u-right{
        width: 100%;
    }

    .price-u-left{
        width: 100%;
    }
    .price_1 .acro{
        height: 70px;
    }

    .price_1 .acro dd{
        margin: 0;
        height: 70px;
        border-bottom: none; 
        border-left: 1px solid #333;
    }

    .guide-img p{
        font-size: 1.2rem;
        font-weight: bold;
        border-bottom: 2px solid #fc33ce;
    }


    /*===============================
    ガイド
================================*/


.guide-inner{
    display: block; 
    margin-top: 20px;
}
.g-item{
    width: 80%;
    margin: 20px auto 0;
    padding-top: 10px;
    border-bottom: solid 1px #fc33ce;
}


.g-number{
    font-size: 1.5rem;
}

.g-menu{
    font-size: 1.2rem;
   
}
.news-list .item .index {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    height: auto;
    width: 90%;
    margin: 0 auto;
    border-bottom: 1px solid #FC33CE;
  }
  .news-list .item .index-res {
    display: block;
    display: flex;
  }

  .news-list .item .date{
    margin: 0;
    width: 60%;
    font-size: 14px;
    color: #999;
    padding: 1em 0;
  }
  .news-list .item .category{
    margin: 0;
    width: 40%;
  }

  .news-list .item .title {
    margin: 0;
    width: 100%;
    font-weight: 600;
    color: #535353;
    font-size: 1em;
    padding: 0.5em 0 .5em;
  }

  .category-btn {
    /* display: block; */
    /* justify-content: center; */
    margin-top: 20px;
  }

  .category-btn a {
    position: relative;
    background: #E7F3F1;
    border-radius: 50vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    width: 100px;
    height: 3em;
    padding: .5em 1.5em;
    font-size: 10px;
    color: #535353;
    transition: 0.3s ease-in-out;
    font-weight: 500;
    text-decoration: none;
    /* 14pxになる */
    /* margin-right: 1em; */
    text-transform: uppercase;
  }
  .category-btn div {
    /* 16pxになる */
    margin: 0 0.5em;
  }



.taiken-img ol{
    padding:0px 5px 5px ;
}

.taiken-img ol li{
    padding:5px 0 0;
  font-size: 1.1rem;
}

.amplan{
    color:#f13bd0;
    font-size: 1.3rem;
    font-weight:bold;
    padding-top: 20px;
    z-index: 31;
}

.circle{
    width:20%;
   height:80px;
   border-radius:50%;
    background:#f13bd0;
    z-index: 21;
}

.circle span{
    display: block;
    font-size: 50%;
    text-align:center;
    line-height: 80px;
 }

 .ellipse{
    width:80%;
   height:80px;
   border-radius:50px;
    background:rgb(28, 165, 251);
    border: solid 5px #fafafa;
    margin-left: -20px;
    z-index: 20;
}

.ellipse span{
    display: block;
    font-size: 70%;
    text-align:center;
    line-height: 70px;
 }


.ribbon1 {
    width:90%;
    border-radius:50px;
    background:#f13bd0;
    border: solid 5px #fafafa;
    margin-left: 10px;
    z-index: 20;
}

.ribbon1 span{
    display: block;
    font-size: 60%;
    text-align:center;
    line-height: 60px;
 }
}