/* 全体 */
* {
    /* box-sizing: border-box; */
    /* color: rgb(119, 102, 102); */
    color: rgb(100, 78, 52);
    font-family:
     "HG丸ｺﾞｼｯｸM-PRO";
     /* "M PLUS Rounded 1c" */
    /* "Zen Maru Gothic"; */
    /* "Kosugi Maru"; */
      /* "Hiragino Maru Gothic ProN" */

    /* "Yu Gothic",  */
    /* "Meiryo",  */
    /* sans-serif;  */
    line-height: 1.5;
}

body{
    margin: 0;
}
.lessonArea,
.priceArea,
.equipmentArea,
.timetableArea,
.newsArea{
    text-align: center;
    /* background-color: #dcbfbf; */
}
.lessonArea_inner,
.priceArea_inner,
.equipmentArea_inner,
.timetableArea_inner,
.newsArea_inner{
    margin: 50px;
    /* background-color: rgb(155, 155, 198); */
}
h1 {
    padding: 10px ;
    background-color:rgb(202, 208, 194);
    border-radius: 10px;
    text-align: center;
    letter-spacing: 0.8em;
}

.course_title{
    place-content: center;
    background-color: rgb(233, 235, 233);
    margin:  3px;
    border: 3px solid rgb(233, 235, 233);
    border-radius: 10px;
}
h2 {
     text-align: center;
     margin: 0px;
    /* background-color:#d4a1df */
}

main{
    margin: 20px auto 90px auto;
    max-width: 1000px;
}

/* ヘッダー */
.logo {
    text-align: center;
    background-color:rgb(173, 182, 162);
    margin: 0;

    /* padding: 0px;

    margin-bottom: 50px; */
    /* position: relative; */
}
.logo img{
    vertical-align: bottom;
    margin: 8px;
    
    /* vertical-align:baseline; */
}

.logo ul{
    list-style-type: none;
    padding-left: 0;
}
/* 右側に縦に表示 */

/* nav{
    text-align: center;
    position: absolute;
    top: 0px;
    right: 10px;
    padding-left: 0;
} */
/* .logo li{
    background-color: rgb(100, 78, 52);
    padding: 10px 15px;
    margin: 20px;
    border-radius: 5px;
} */

/* 横並び */
.sp_menu{
    display: none;
}

.pc_nav{
    background-color:rgb(100, 78, 52);
    /* text-align: right; */
    /* position: absolute; */
    margin: 0px;
    /* right: 10px;
    padding-left: 0; */
}
.pc_nav ul{
    margin: 0px 40px 0px 0px;
    list-style-type:none;
    display: flex;
    justify-content:end;
    font-size: clamp(15px, 1.8vw, 20px);
    gap: 20px;
}
.pc_nav li{
    padding: 0px;
    letter-spacing:0.08em;
    background-color: rgb(100, 78, 52);
    /*border-radius: 8px; */

}
.pc_nav a{
  display: inline-block;
  text-decoration: none;
  /* color:  rgb(100, 78, 52); */
  color:  white;
  text-align: center;
  padding: 15px;
  /* font-size: 18px; */

}
.pc_nav a:hover {
  opacity: 0.5;
}
/* .menu a:link{
    color: white;
    text-decoration: none;
}
.menu a:visited{
    color: white;
    text-decoration: none;
}
.menu a:hover{
    color: white;
    text-decoration: none;
}
.menu a:active{
    color: white;
    text-decoration: none;
} */

/* nav {
    position: fixed;
    top: 0;
    right: -300px;
    width: 300px;
    height:100%;
    padding-top: 50px;
    background: rgba(33,33,33,.9);
    font-size: 16px;
    box-sizing: border-box;
    z-index: 2
} */


/* .btn-gnavi {
    position: fixed;
    top: 20px;
    right: 40px;
    width: 30px;
    height: 24px;
    z-index: 1;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-transition: all 400ms;
    transition: all 400ms
}

.btn-gnavi span {
    position: absolute;
    width: 30px;
    height: 4px;
    background: #a23131;
    border-radius: 10px;
    -webkit-transition: all 400ms;
    transition: all 400ms
}
.btn-gnavi span:nth-child(1) {
    top: 0
}

.btn-gnavi span:nth-child(2) {
    top: 10px
}

.btn-gnavi span:nth-child(3) {
    top: 20px
}

.btn-gnavi.open {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.btn-gnavi.open span {
    background: #2f7805
} */


/* フッター */
footer {
    text-align: right;
    margin-top: 30px;
    background-color:rgb(202, 208, 194);
    padding: 10px;
}
.photo{
    /* background-color: aquamarine; */
    display: flex;
    justify-content:space-between;
}
.photo img{
    width: 31%;
    border-radius: 18px;
    border: 1.5px solid rgb(207, 207, 207);
}
/* 受講内容 */
.lessonArea_inner{
    display: grid;
    /* background-color:aquamarine; */
    grid-template-columns: 1fr 2fr 2fr;
}
.lesson_content{
    /* place-content: center; */
    /* background-color: aliceblue; */
    margin: 3px;
    text-align: left;
    border: 3px solid rgb(233, 235, 233);
    border-radius: 10px;
    padding: 5px 20px;
}
.lesson_content h3{
    margin:15px 10px 10px 10px;
}
.lesson_content p{
    margin: 15px 10px 20px 10px;
}
.lesson_btn{
    background-color: rgb(100, 78, 52);
    /* background-color: rgb(112, 101, 88); */
    padding: 1em ;
    color: white;
    border-radius: 15px;
    text-decoration: none;
    letter-spacing: 0.08em;

}
.lesson_btn a{
    display: block;
}

/* 料金 */
.priceArea_inner{
    /* margin: 0 50px; */
    display: grid;
    text-align: center;
    grid-template-columns: 1fr 4fr;
    /* background-color:aquamarine; */
}
.price_content{
    margin: 3px;
    text-align: left;
    border: 3px solid rgb(233, 235, 233);
    border-radius: 10px;
    font-size: 21px;
    place-content: center;
}
.note, .tax{
    font-size: small;
}
.price_container {
    display: grid;
    grid-template-columns: 1fr 0.5fr 0.4fr 0.4fr;
    padding: 20px;
    gap: 15px 0px;
}

.price_item {
    grid-column: span 4;
    display: grid;
    grid-template-columns: subgrid;
    /* background-color: aquamarine; */
}
.price_subItem1{
    /* background-color: aqua; */
    padding-left: 30px;
    margin: 0px;
    text-indent: -1em;
}
.price_subItem2{
    /* background-color: burlywood; */
    text-align: center;
    margin: 0px;
}
.price_subItem3{
    margin: 0px;
    text-align: right;
    /* background-color: lemonchiffon; */
}
.price_subItem4{
    margin: 0px;
    /* background-color: pink; */
}

/* 設備・システム */
.equipmentArea_inner{
    display: grid;
}
.equipmentArea_inner h3{
    border-bottom: 5px solid rgb(224, 227, 221);
    background-color: rgb(233, 235, 233);
    border-radius: 10px;
    padding: 8px;
    margin-top: 0;

}
.equipmentArea_inner img{
    border: 1.5px solid rgb(207, 207, 207);
    margin-bottom: 40px;
    width: 300px;
    border-radius: 20px;
    vertical-align: bottom;
}
/* 開講日・ご予約 */
.timetable_pc{
    width: 100%;
    font-size: clamp(12px, 1.6vw, 16px);
    text-align: center;
    /* border-collapse: collapse; */
    /* border-radius: 10px; */
    table-layout: fixed;
    border-spacing: 0;
    border: none;
    
    /* background-color: aliceblue; */
}
.timetable_pc tr:first-child>*:first-child{
    border-radius: 10px 0 0 0;
}
.timetable_pc tr:first-child>*:last-child{
    border-radius: 0 10px 0 0;
}
.timetable_pc tr:last-child>*:first-child{
    border-radius: 0 0 0 10px;
}
.timetable_pc tr:nth-of-type(2)>*:last-child{
    border-radius: 0 0 10px 0;
}

.timetable_pc th,.timetable_pc td{
    padding: clamp(10px, 1.2vw, 15px);
}

.timetable_pc tr:first-child>*{
    border-top: 1px solid #999;
}
.timetable_pc tr>*:first-child{
    border-left: 1px solid #999;
}
.timetable_pc tr>*{
    border: none;
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
}
.timetable_pc th{
    background-color:  rgb(233, 235, 233);
}
.timetable_pc td{
    line-height: 1.4;
}

.timetable_text{
    /* margin: 10px 50px; */
    text-align: left;
    /* background-color: rgb(168, 193, 239); */
    padding-left: 20px;
}

.reserve_inner{
    /* margin: 30px 50px; */
    /* padding: auto; */
    /* background-color: rgb(196, 236, 169); */
}
.reserve_btn,.trial_btn{
    /* background-color: rgb(147, 201, 235); */
    /* background-color: rgb(203, 167, 74); */
    /* font-size: larger; */
    padding: 1em;
    margin: 30px auto ;
    color: white;
    border-radius: 15px;
    text-decoration: none;
    width: 15em;
    text-align: center;
    letter-spacing: 0.1em;
    display: block;
}
.reserve_btn{
    background-color: rgb(100, 78, 52);
    border-bottom: 3px solid rgb(78, 67, 52);;
}
.trial_btn{
    /* background-color: rgb(58, 98, 58); */
    background-color: rgb(100, 78, 52);
}

.reserve_inner a:link{
    color: white;
    text-decoration: none;
}
.reserve_inner a:visited{
    color: white;
    text-decoration: none;
}
.reserve_inner a:hover{
    color: white;
    text-decoration: none;
}
.reserve_inner a:active{
    color: white;
    text-decoration: none;
}

/* お知らせ欄 */
.newstable {
    font-size: clamp(12px, 1.6vw, 16px);
    width: 100%;
    text-align: center;
    border-collapse: collapse;
    /* border-radius: 10px; */
    /* table-layout: fixed; */
    border-spacing: 0;
    /* border-spacing: 0px 8px; */
   /*  border: none; */
    /* border:solid 1px #999; */
}

.newsArea th,.newsArea td{
    border-bottom:dashed 1px rgb(202, 208, 194);
    padding:10px;
}
.newstable th{
    
    width: 10em;
    text-align: center;
    background-color: #57c95d;

}
.newsArea td{
    text-align: left;
}


/* SNS */
.SNS img{
    width: 50px;
    height: 50px;
    padding: 5px;
    margin: 5px;
    /* background-color:rgb(200, 182, 161); */
    border-radius: 10%;
}
.privacymark img{
    width: 100px;
}

.toTop {
    position: fixed;
    right: 0;
    bottom: 110px;
    width: 64px;
    height: 64px;
    cursor: pointer;
    display: none;
}
/* .SNS img{
    width: 50px;
} */

/* @media screen and (min-width: 1200px) {
    .price{
        margin: 0 200px;
}

} */

/* @media  (min-width: 901px) {
    .timetable_sp{
        display: none;
    }
    .timetable_sp th{
        background-color:rgb(201, 145, 193);
        padding: 20px;
    }
} */

@media  (max-width: 950px) {
    .price_container {
        grid-template-columns: 1fr 0.3fr 0.5fr 0.4fr;
        /* padding-left: 20px;
        gap: 15px 0px; */
        /* margin: 10px; */
    }
    .price_item{
        font-size: 18px;
    }
}

@media (min-width: 769px) {
    .equipmentArea_inner{
        display: grid;
        /* background-color: azure; */
        gap: 30px ;
        grid-template-columns: 1fr 1fr;
    }

    .equipmentArea_inner h3{
        margin-bottom: 15px;
    }

    .equipmentArea_inner p{
        text-align: left;
        /* padding: 5px 15px;  */
        margin: 0px 20px ;
        /* background-color: rgb(216, 244, 244);    */
        padding: 0;
    }
    .equipmentArea_inner img{
        margin-bottom: 40px;
    }
    .equipment_content1{
        grid-row: 1 / 2;
        grid-column: 1 / 3;
    }
    .equipment_content2{
        grid-row: 1 / 2;
        grid-column: 3 / 4;
    }
    .equipment_content3{
        grid-row: 2 / 3;
        grid-column: 2 / 4;
    }
    .equipment_content4{
        grid-row: 2 / 3;
        grid-column: 1 / 2;
    }

    .equipment_content5{
        grid-row: 3 / 4;
        grid-column: 1 / 3;
    }
    .equipment_content6{
        grid-row: 3 / 4;
        grid-column: 3 / 4;
    }
    .equipment_content7{
        grid-row: 4 / 5;
        grid-column: 2/ 4;
    }
    .equipment_content8{
        grid-row: 4 / 5;
        grid-column: 1 / 2;
    }

    .timetable_sp{
        display: none;
    }

    .reserve_inner{
        display:inline-flex;
    }
    .reserve_btn,.trial_btn{
        margin: 0 50px;
    }
}

@media  (max-width: 850px) {
    h1{
        padding-left: 25px;
    }
    .logo img {
        /* position: relative; */
        width: 70%;
        text-align: left;
        margin: 0;
    }

    .lessonArea_inner{
        margin: 0 0px;
        display: grid;
        text-align: center;
        /* background-color: antiquewhite; */
        grid-template-columns: 1fr;
    }

    .course_title{
        place-content: center;
        background-color: rgb(233, 235, 233);
        margin: 0;
        text-align: center;
        border: 3px solid rgb(233, 235, 233);
        border-radius: 10px;
    }

    .lesson_content{
        /* place-content: center; */
        /* background-color: aliceblue; */
        margin:10px 20px ;
        padding:  5px 15px ;
        text-align: left;
        border: 3px solid rgb(233, 235, 233);
        border-radius: 10px;
    }
    .priceArea_inner{
        margin: 0 0px;
        display: grid;
        text-align: center;
        /* background-color: antiquewhite; */
        grid-template-columns: 1fr;
    }

    .note{
        display: block;
        font-size:x-small;
        text-indent: -1em;
    }
    .tax,.dotLeader{
        font-size:x-small;
    }
    .price_subItem1{
        padding-left: 15px;
    }

    .price_content{
        /* place-content: center; */
        /* background-color: aliceblue; */
        margin: 10px 20px;
        text-align: left;
        border: 3px solid rgb(233, 235, 233);
        border-radius: 10px;
        font-size:medium;
        padding-left: 0;
    }

    .toTop {
        opacity: 0.6;
        bottom: 110px;
    }
}

@media  (max-width: 768px) {

.pc_nav{
    display: none;
}

/* .sp_menu{
display:block;
} */
.sp_nav{
  position: fixed;
  top: 0px;
  /* left: 0px; */
  right: 0px;
  width: 100%;
  height: 100vh;
  background-color: rgb(202, 208, 194);
  /* visibility: hidden; */
  /* opacity: 1; */
  transition: all .6s;
  z-index: 1;
}
.sp_nav ul{

    list-style: none;   /* 点を消す */
    padding-left: 0;    /* 左余白を消す */
    margin: 100px 0 0 0;          /* 上下左右の余白を消す（必要に応じて） */
    text-align: center; /* 中央寄せ */
  /* list-style: none; */
  /* background-color: aquamarine; */
}
.sp_nav li{
    /* opacity: 1; */
    /* transform: translateY(20px); */
    transition: all .6s;
    text-align: center;
    font-weight: 700;
    font-size: larger;

    letter-spacing: 0.1em;
    text-align: center;
    padding: 15px;
    /* background-color: #999; */
    /* color:white; */
    margin:  30px;

}

.sp_nav_btn{
  position: fixed;
  top: 0px;
  right: 20px;
  z-index: 3;
  width: 48px;
  height: 48px;
  /* border: none; */
  /* background: transparent; */
  cursor: pointer;
  /* background-color: rgb(41, 80, 115); */
}


.sp_nav_btn span {
    position: absolute;
    width: 44px;
    height: 4px;
    background-color: rgb(100, 78, 52);
    border-radius: 30px;
    -webkit-transition: all 400ms;
    transition: all 400ms
}

.sp_nav_btn span:nth-child(1) {
    top: 4px
}

.sp_nav_btn span:nth-child(2) {
    top: 22px
}

.sp_nav_btn span:nth-child(3) {
    top: 40px
}

.sp_nav a{
  /* display: inline-block; */
  text-decoration: none;
  /* color:  rgb(100, 78, 52); */
  /* color:  white; */

  /* font-size: 18px; */

}
.sp_nav a:hover {
  opacity: 0.5;
}

    .equipmentArea_inner{
        display: grid;
        margin: 20px;
        grid-template-columns: 1fr;
        /* background-color: aquamarine;    */
    }
    .equipmentArea_inner h3{
        margin-bottom: 0px;
    }
    .equipmentArea_inner p{
        text-align: left;
        /* padding: 5px 15px;  */
        margin: 0px 10px ;
        /* background-color: rgb(216, 244, 244);    */
        padding: 10px;
    }
    .timetable_sp th{
        background-color:rgb(204, 188, 107);
        padding: 20px;
    }
    .timetable_pc{
        display: none;
    }
    .timetable_sp{
        width: 100%;
        text-align: center;
        border-spacing: 0;
        border: none;
    }

    .timetable_sp th{
        background-color:rgb(233, 235, 233);
        padding: 20px;
    }
    .timetable_sp tr:first-child th {
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        border-top: 1px solid #999;
        border-left: 1px solid #999;
        border-right: 1px solid #999;
    }

    .timetable_sp tr:last-child td{
        border-left: 1px solid #999;
        border-right: 1px solid #999;
        border-bottom: 1px solid #999;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
    }
    .timetable_sp tr>*{
        border: none;
        border-right: 1px solid #999;
        border-bottom: 1px solid #999;
        border-left: 1px solid #999;
    }
    .timetable_sp td{
        line-height: 2.5;
        padding: 15px;
    }
    
    .newstable th,.newsArea td{
        display: block;
        text-align: left;
    }


}