@charset "UTF-8";

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
margin-bottom: 0;
font-weight: normal;
}

h1,h2,h3,h4 {
font-weight: bold;
}

p {
margin-bottom: 0;
line-height: 1.6;
}


a:link {
    text-decoration:
    none; color: #000;
}

a:visited {
    text-decoration:
    none; color: #000;
}

a:hover {
    text-decoration: none;
}

a:active {
    text-decoration:
    none; color: #000;
}

a:link,a:visited,a:hover,a:active {
    transition: all .6s; 
}

a:hover {
    opacity: .4;transition: all .6s;
}


img {
    width: 100%; height: auto;vertical-align: bottom
}

.dn {
    display: none!important;
}

* {
    word-break: break-all;
}

.requiredText {
    color:red; padding-left:.3vw;
}

.d-inline-block {
    padding-right:2em;
}


.wow {
    opacity: 0;
}

.wow.animated {
    opacity: 1;
}

.gjs-dashed .wow {
    opacity: 1!important;
}


.featureBox .cell:nth-of-type(2) {
    background: url(https://office-kanade.jp/system_panel/uploads/images/class_2.jpg) no-repeat center center; background-size: cover;
}

.featureBox .cell:nth-of-type(3) {
    background: url(https://office-kanade.jp/system_panel/uploads/images/class_3.jpg) no-repeat center center; background-size: cover;
}

.featureBox .cell:nth-of-type(4) {
    background: url(https://office-kanade.jp/system_panel/uploads/images/class_4.jpg) no-repeat center center; background-size: cover;
}

.featureBox .cell:nth-of-type(5) {
    background: url(https://office-kanade.jp/system_panel/uploads/images/class_5.jpg) no-repeat center center; background-size: cover;
}

.featureBox .cell:nth-of-type(6) {
    background: url(https://office-kanade.jp/system_panel/uploads/images/class_6.jpg) no-repeat center center; background-size: cover;
}

.pagetop {
    -webkit-filter: drop-shadow(0px 0px 5px rgba(0,0,0,.3));
    filter: drop-shadow(0px 0px 5px rgba(0,0,0,.3));
}

#menuSec #menu a.reservation,.btmlink a.reservation {
    border: solid 1vw #08CCD3;
    background: #9CEBEE;
}

.webgene-blog .webgene-pagination{
    margin-top: 3%;
    width: 100%;
}

.webgene-blog .webgene-pagination > ul > li{
    list-style: none;
    display: inline-block;
    margin-right: 3%;
}

.webgene-blog .webgene-pagination > ul > li:last-of-type{
    margin-right: 0;
}

.webgene-blog .webgene-pagination > ul{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-inline-start:0;
}


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


.pagetop {
    position: fixed; z-index: 8; width: 5vw; height: 5vw; display: block; right: 2vw; bottom: 10vw;
}

    body {
font-family: sans-serif; font-weight: 400; font-style: normal; background: #fff; font-size: 1.2vw; opacity: 0;
}

body.active {
    opacity: 1; transition: all .6s;
}

    iframe {
    width: 100%; height: 40vw; margin-left: auto; margin-right: auto; border: none;
}

    .d-inline-block label {
margin-left: .6em;
}

h1 {
font-size: 160%;
}


.logo {
    position: fixed; z-index: 11; top: 1vw; left: 1vw; width: 45vw; height: auto; display: flex; justify-content: flex-start; align-items: center;
}

.logo img {
    width: 3vw; height: auto; display: block; margin-right: 1vw;
}

#btnbox {
    position: fixed; z-index: 11; top: 0; right: 0; width: 15vw; height: auto; border-left: solid 1px #fff; border-bottom: solid 1px #fff; display: flex; justify-content: space-between; align-items: center;
}

#btnbox a {
    width: 5vw; height: 5vw; display: block; background: #595757;
}

#btnbox a:first-child {
    margin-left: none; box-sizing: border-box; border-right: solid 1px #fff;
}

#btnbox a:nth-child(2) {
margin-left: none; box-sizing: border-box; border-right: solid 1px #fff;
}

#btnbox a img {
    width: 100%; height: 100%; object-fit: cover;
}

#btnbox a:hover {
    opacity: 1;
}

#btnbox a:last-child {
    background: #FFD800;
}


.spnavi {
    display: block; position: fixed; top: 0; right: -25vw; z-index: 9; background: rgba(255,216,0,.95); width: 25vw; height: 100%; padding:8vw 2vw 0 2vw; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; -webkit-transition: all 1s; transition: all .6s; 
}

    .spnavi.active {
    right: 0;
}

    .spnavi a:first-child {
    border-top: dotted 1px rgba(0,0,0,.4);
}

    .spnavi a {
    display: block; padding: .5vw 0; border-bottom: dotted 1px rgba(0,0,0,.4); color: #000;
}

    .spnavi br {
display: none;
}


#spmenuClass {
    display: block; position: fixed; top: 0; right: -25vw; z-index: 10; background: rgba(255,216,0,.95); width: 25vw; height: 100%; padding:8vw 2vw 0 2vw; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; -webkit-transition: all 1s; transition: all .6s; 
}

#spmenuClass.active {
    right: 0;
}

#spmenuClass a:first-child {
    border-top: dotted 1px rgba(0,0,0,.4);
}

#spmenuClass a {
    display: block; padding: .5vw 0; border-bottom: dotted 1px rgba(0,0,0,.4); color: #000;
}

    #spmenuClass a strong {
font-weight: normal;
}

#spmenuClass br {
display: none;
}

#spmenuClass a em {
display: none;
}

#spmenuClass .back a {
    border-top: none!important;
}


    #spmenuCourse {
    display: block; position: fixed; top: 0; right: -25vw; z-index: 10; background: rgba(255,216,0,.95); width: 25vw; height: 100%; padding:8vw 2vw 0 2vw; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; -webkit-transition: all 1s; transition: all .6s; 
}

    #spmenuCourse.active {
    right: 0;
}

    #spmenuCourse p:first-child {
    border-top: dotted 1px rgba(0,0,0,.4);
}

    #spmenuCourse p {
    display: block; padding: .5vw 0; border-bottom: dotted 1px rgba(0,0,0,.4); color: #000;
}

    #spmenuCourse a strong {
font-weight: normal;
}

#spmenuCourse br {
display: none;
}

#spmenuCourse .back {
    border-top: none!important;
}





    .footer {
    display: block; width: 100%; background: #FFD800;
}

    .footer .section {
    width: 100%; padding: 2vw 1vw 1vw; box-sizing: border-box; display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 auto;
}

    .footer .section a.logo {
    display: block; width: 50%; text-align: left;
}

    .footer .section .footerlink {
    display: flex; justify-content: flex-end; align-items: center; width: 50%; text-align: left;
}

    .footer .section .footerlink a {
display: block; margin-right: 2vw;
}

.footer .section .footerlink a p {
    position: relative; display: flex; justify-content: flex-start; align-items: center;
}

    .footer .section .footerlink a p br {
display: none;
}

.footer .section .footerlink a p:after {
    display: block; position: relative; content:""; width: 1.5em; height: 1.5em; margin-left: .5em; background: url(https://office-kanade.jp/system_panel/uploads/images/arrow.png) no-repeat; background-size: contain;
}

    .footer .section .cp {
display: block; width: 100%; text-align: center; margin-top: 1vw;
}


.btmlink {
    width: 70%; margin: 10vw auto; display: flex; justify-content: space-between; align-items: center;
}

    .btmlink a {
    width: 23%; box-sizing: border-box; border: solid 1vw #F6D804; background: #F8E762; padding: 2vw 3vw; text-align: center; margin: auto;
}

    .btmlink a img {
    display: block; margin: 0 auto 1vw; width: 80%; height: auto;
}

    .btmlink a p {
text-align: center; display: block; position: relative; width: 100%; height: 4vw; line-height: 1.4; font-weight: bold;
}

.btmlink a p:after {
    display: block; position: absolute; top: 1vw; right: -2vw; content:""; width: 1.5em; height: 1.5em; margin-left: .5em; background: url(https://office-kanade.jp/system_panel/uploads/images/arrow.png) no-repeat right center; background-size: contain;
}


    #menuSec #menu {
    width: 100%; margin: 10vw auto; display: flex; justify-content: space-between; align-items: center;
}

    #menuSec #menu a {
    width: 23%; box-sizing: border-box; border: solid 1vw #F6D804; background: #F8E762; padding: 2vw 3vw; text-align: center; margin: auto;
}

    #menuSec #menu a img {
    display: block; margin: 0 auto 1vw; width: 80%; height: auto;
}

    #menuSec #menu a p {
text-align: center; display: block; position: relative; width: 100%; height: 4vw; line-height: 1.4; font-weight: bold;
}

#menuSec #menu a p:after {
    display: block; position: absolute; top: 1vw; right: -2vw; content:""; width: 1.5em; height: 1.5em; margin-left: .5em; background: url(https://office-kanade.jp/system_panel/uploads/images/arrow.png) no-repeat right center; background-size: contain;
}


    .pagettl {
    width: 100%; height: 50vw; overflow: hidden; position: relative;
}

    .pagettl .txt {
position: absolute; top: 0; left: 0; z-index: 2; display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; height: 100%;
}

.pagettl .txt h2 {
font-size: 300%; margin-bottom: 1vw; 
}

.pagettl .txt p {
    font-weight: bold; color: #000; background: #FFD800; padding: .6vw 1vw; letter-spacing: .2em; text-indent: .2em;
}

    .pagettl .bg {
    position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;
}

    .pagettl .bg img {
    width: 100%; height: 100%; object-fit: cover;
}


    .ulheader {
display: block; margin-left: auto; margin-right: auto; text-align: center; position: relative; margin-bottom: 5vw;
}

.ulheader > * {
    font-size: 200%; 
}

    .ulheader:after {
    content: ""; display: block; width: 5em; height: 3px; background: #000; position: absolute; bottom: -1vw; left: 0; right: 0; margin: auto;
}


    .localnavi {
    width: 80%; display: flex; justify-content: flex-start; flex-wrap: wrap; margin-right: auto; margin-left: auto; 
}

    .localnavi a.btn {
    width: 30%; display: flex; justify-content: space-between; align-items: center; margin: 0 3% 1vw 0; padding: 1vw; box-sizing: border-box; text-align: center; border: solid 1px #BCBCBC; background: #fff;
}

    .localnavi a.btn p {
    display: block; width: 90%; font-weight: bold; text-align: center; color: #000;
}

    .localnavi a.btn:after {
    display: block; content:""; background: url(https://office-kanade.jp/system_panel/uploads/images/arrow_yellow.png) no-repeat center right; width: 1em; height: 1em; background-size: cover; margin-left: 1em;
}


    .classBox {
    display: block; width: 100%; background: url(https://office-kanade.jp/system_panel/uploads/images/bg_class.jpg) no-repeat top center;
}

    .classBox .flcell:nth-of-type(1) {
padding: 5vw 0 3vw;
}

.classBox .flcell:nth-of-type(1) .fleft {
    width: 20%; 
}

    .classBox .flcell:nth-of-type(1) .fright {
    width: 75%; margin-left: 5%;
}

    .classBox .flcell h4 {
font-size: 150%; margin-bottom: 1vw;
}

.classBox .flcell:nth-of-type(2) {
align-items: flex-start;
}

.classBox .flcell:nth-of-type(2) .fleft {
    display: flex; justify-content: flex-start; flex-wrap: wrap; width: 73%; background: #fff; border-radius: 1vw; padding: 3vw 2vw 1vw 2vw; box-sizing: border-box;-webkit-filter: drop-shadow(1px 1px 5px rgba(0,0,0,.3)); filter: drop-shadow(1px 1px 5px rgba(0,0,0,.3));
}

    .classBox .flcell:nth-of-type(2) .fleft h4 {
width: 100%;
}

.classBox .flcell:nth-of-type(2) .fleft div {
    width: 50%; font-size: 82%;
}

    .classBox .flcell:nth-of-type(2) .fleft div p {
line-height: 2.3;
}

.classBox .flcell:nth-of-type(2) .fright {
    width: 25%; margin-left: 2%; background: #fff; border-radius: 1vw; padding: 2vw 1vw; box-sizing: border-box;-webkit-filter: drop-shadow(1px 1px 5px rgba(0,0,0,.3)); filter: drop-shadow(1px 1px 5px rgba(0,0,0,.3));
}

    .classBox .flcell ul {
    padding: 0; margin: 0; width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; 
}

    .classBox .flcell ul li {
list-style-type: none; background: url('https://office-kanade.jp/system_panel/uploads/images/check.png') no-repeat left center; display: block; width: 50%; margin: 0 0 1vw 0; padding-left: 1.5vw; background-size: 1em auto; font-size: 82%;
}

.classBox .flcell:nth-of-type(2) .fright .btn {
margin-bottom: 1vw;
}

.classBox .flcell:nth-of-type(2) .fright .btn:last-child {
display: none;
}


.voice {


}

.voice .flcell {
    align-items: flex-start; margin-bottom: 7vw; background: #FAFAFA; padding: 4vw 2vw; box-sizing: border-box;
}

    .voice .fleft {
    width: 23%; margin-right: 2%; 
}

    .voice .fright {
    width: 75%;
}

    .voice .fright h3 {
    font-size: 120%; margin-bottom: 1vw;
}

    .voice .fright h3 strong {
    display: inline-block; background: #FFD800; padding: .5vw;
}


    .works .flcell {
    flex-wrap: wrap;
}

    .works .fleft {
    width: 48%; margin: 0 4% 4vw 0; background: #FAFAFA; padding: 4vw 2vw; box-sizing: border-box;
}

    .works .fleft:nth-of-type(even) {
    width: 48%; margin: 0 0 4vw; background: #FAFAFA; padding: 4vw 2vw; box-sizing: border-box;
}

    .works .flcell .img {
    width: 100%; height: 18vw; display: flex; justify-content: center; align-items: center; margin: 0 auto 2vw; background: #fff;
}

    .works .flcell .img img {
    width: 80%; height: 80%; object-fit: contain;
}

    .works .flcell h4 {
    font-size: 110%; margin-bottom: 1vw; text-align: center;
}


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

.form .formRow {
    margin: 0 0 2vw; padding: 0; text-align: left;
}

    .form .formRow input[type="text"],.form .formRow input[type="email"],.form .formRow textarea {
width: 90%;
}

.form .formRow textarea {
height: 10em;
}

.form p {
margin-bottom: 0;
}

.form .pp {
    display: block;width: 80%;height: 20vw; margin: 2vw auto;overflow: scroll;border: solid 1px #fafafa; background: rgba(255,255,255,.6); padding: 1vw; box-sizing: border-box; text-align: left;
}

    .form .pp a {
    color: #242424;
}

    .form .submit {
    text-align: center; margin: auto;
}
.form .formRow input[type="text"],
.form .formRow input[type="email"],

.form .formRow textarea {
    padding: 0.5vw 2vw; border-radius: 20px; border: none;
}

    .form #submit {
opacity: 0.4; position: relative; display: block; width: max-content; padding: 0.5vw 5.15vw 0.5vw 5.15vw; color: #fff; font-size: 130%; letter-spacing: 0.2rem; margin: 0 auto; text-align: center; border: none; border-radius: 0; background: #595757;
}

.form #submit.active {
opacity: 1;
}


.classroomlist {
margin-bottom: 0!important;
}

.classroomlist .flcell {
    flex-wrap: wrap; justify-content: space-between; align-items: flex-start;
}

    .classroomlist .fleft {
    width: 45%; margin: 0 10% 4vw 0;
}

    .classroomlist .fleft:nth-of-type(even) {
    margin: 0 0 4vw;
}

    .classroomlist .flcell h3 {
    font-size: 130%; padding-bottom: 1vw; text-align: center; border-bottom: solid 1px rgba(0,0,0,.7);
}

    .classroomlist .flcell a {
    display: block; width: 100%; margin-bottom: 3vw; background: url(https://office-kanade.jp/system_panel/uploads/images/arrow.png) no-repeat center right; background-size: 2vw auto;
}

    .classroomlist .flcell a em {
font-style: normal;
}



.newslist .webgene-blog {
    height: auto; display: flex; justify-content: flex-start; flex-wrap: wrap;
}

    .newslist .webgene-blog .flcell {
    display: block; height: auto; width: 100%; margin: 0 auto; padding: 1vw 0; border: none; border-bottom: dotted 1px #cacaca;
}

    .newslist .webgene-blog .flcell:first-child {
    border-top: dotted 1px #cacaca;
}

    .newslist .webgene-blog .flcell a {
display: flex; justify-content: flex-start; align-items: center; width: 100%; height: auto; overflow: hidden;
}

.newslist .webgene-blog .flcell a p {
    order:1; color: #000; background: #FFD800; padding: .6vw 1.6vw; margin: 0 1vw 0 0; text-align: center; width: max-content;
}

    .newslist .webgene-blog .flcell a h3 {
order:2; font-size: 100%; letter-spacing: 0; text-indent: 0; margin: 0; line-height: 1.4;
}


.newsdetail .webgene-blog {
    display: block; width: 60vw; text-align: left; margin: 0 auto 5vw; 
}

    .newsdetail .webgene-blog header {
    display: block; text-align: center; margin: 0 auto 1vw;
}

    .newsdetail .webgene-blog header h2 {
font-size: 180%; margin-bottom: 2.5vw;
}

.newsdetail .webgene-blog header p {
font-size: 100%;
}

.newsdetail .webgene-blog article img {
padding-bottom: 2vw;
}

.newsdetail .webgene-blog article h3 {
font-size: 180%; margin-top: 5vw; padding-bottom: 1vw; margin-bottom: 2vw; border-bottom: solid 1px #cacaca;
}


.cornerBox {
position: relative;
}

.cornerBox .corner {
width: 2vw; height: auto;
}

.cornerBox .corner:nth-child(1) {
position: absolute; left: 0;top: 0;
}

.cornerBox .corner:nth-child(2) {
position: absolute; right: 0;top: 0; transform: rotate(90deg);
}

.cornerBox .corner:nth-child(3) {
position: absolute; left: 0;bottom: 0; transform: rotateX(180deg);
}

.cornerBox .corner:nth-child(4) {
position: absolute; right: 0;bottom: 0; transform: rotate(180deg);
}


.sampleVideoCell {
text-align: center; margin: auto;
}

.sampleVideoCell iframe {
    width: 70%; height: 30vw;
}


    .method {


}

.method .flcell {
    justify-content: space-between; align-items: flex-start; height: auto; width: 100%; margin: 0 0 10vw 0; border: none;
}

    .method .flcell .fleft {
    width: 45%;
}

    .method .flcell .fleft img {
    width: 100%; height: 100%; object-fit: cover;
}

    .method .flcell .fright {
    width: 50%; padding: 0; box-sizing: border-box; text-align: left; display: flex; flex-direction: column; justify-content: space-between; align-items: center;
}

    .method .flcell .fright .cornerBox {
    width: 100%; height: auto; margin-bottom: 3vw;
}

    .method .flcell .fright .cornerBox .num {
    width: 15%; height: auto; margin: 3vw auto;
}

    .method .flcell .fright h4 {
font-size: 120%; margin-bottom: 2vw; text-align: center;
}

.method .flcell .fright p {
    margin-bottom: 2vw;
}

    .method .flcell .fright .bg {
    background: #E8E8E8; padding: 2vw; box-sizing: border-box; border-radius: 1vw;
}

    .method .flcell:nth-of-type(even) .fleft {
order: 2;
}

.method .flcell:nth-of-type(even) .fright {
order: 1;
}



.kv {
    width: 100%; height: 60vw; overflow: hidden; position: relative;
}

    .kv .txt {
position: absolute; top: 0; left: 0; z-index: 3; display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; height: 100%;
}

.kv .txt h2 {
font-size: 300%; margin-bottom: 1vw; color: #000; background: #FFD800; padding: .6vw 1vw;  margin-top: 10vw; 
}

.kv .txt p {
    font-size: 160%; font-weight: bold; color: #000; background: #FFD800; padding: .6vw 1vw; letter-spacing: .2em; text-indent: .2em;
}

    .kv .img {
position: absolute; top: 0; left: 0; z-index: 2; display: block; width: 100%; height: 100%;
}

.kv .img img {
    width: 37vw; height: 37vw; border-radius: 50%; overflow: hidden; position: absolute;
}

    .kv .img .img1 {
    position: absolute; top: 0; bottom: 0; margin: auto; left: 16vw; z-index: 2;
}

    .kv .img .img2 {
    position: absolute; top: 0; bottom: 0; margin: auto; right: 16vw; z-index: 1;
}

    .kv .bg {
    position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;
}

    .kv .bg img {
    width: 100%; height: 100%; object-fit: cover;
}


    .indexsec1 {
background: url('https://office-kanade.jp/system_panel/uploads/images/indexsec1_r.jpg'),url('https://office-kanade.jp/system_panel/uploads/images/indexsec1_l.jpg'); background-repeat: no-repeat; background-size: 25vw auto, 25vw auto; background-position: -1vw 13vw, 76vw 13vw;
}

.indexsec2 {
background: url('https://office-kanade.jp/system_panel/uploads/images/20231117130721127086.jpg') no-repeat center center; background-size: cover;
}

.indexsec2 .section {
    margin: 0 auto; width: 80%;background: url('https://office-kanade.jp/system_panel/uploads/images/img_indexsec2-min.png') no-repeat center bottom; background-size: 21vw auto;
}

    .indexsec2 .flcell {
    justify-content: space-between;
}

    .indexsec2 .flcell .fleft {
    width: 30%;
}

    .indexsec2 .flcell .fright {
    width: 30%;
}

    .indexsec2 .flcell p {
position: relative; padding: 2vw; border: solid 1px #cacaca; border-radius: 1vw; box-sizing: border-box; margin-bottom: 5vw; font-weight: bold; font-size: 110%; background: #fff;
}

.indexsec2 .flcell p:before {
    position: absolute;  z-index: 2; top: -2vw; left: -2vw; width: 4vw; height: 4vw; display: flex; justify-content: center; align-items: center; content:"A"; background: #000; border-radius: 50%; overflow: hidden; background: #000; color: #fff; font-size: 200%; font-weight: bold;
}



    .artmain .section {
width: 100%;
}

.faqCell {
display: block; width: 100%; margin: 0 auto; padding: 3vw 0 0; box-sizing: border-box;
}

.faqCell .flcell {
    display: flex; justify-content: flex-start; align-items: center; width: 100%; height: auto; margin: 0 auto 1vw;
}

    .faqCell .flcell .fleft {
width: 3vw; height: 3vw; display: flex; justify-content: center; align-items: center; content:"A"; background: #000; border-radius: 50%; overflow: hidden; background: #000; color: #fff; font-size: 130%; font-weight: bold; margin-right: 1vw;
}

.faqCell .flcell .fright {
    width: max-content; background: linear-gradient(transparent 80%, #FFD800 0%); display: inline; text-align: left; font-size: 120%; font-weight: bold;
}

    .faqCell .acell {
    text-align: left; margin-bottom: 3vw; padding-bottom: 3vw; border-bottom: dashed 1px rgba(0,0,0,.4);
}


    .featureBox {
display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%; height: auto;
}

.featureBox .cell {
display: flex; justify-content: center; align-items: center; flex-direction: column;
}

.featureBox .cell {
    width: 32.5%; height: 11vw; margin: 1vw 0 0; background: url(https://office-kanade.jp/system_panel/uploads/images/class_2.jpg) no-repeat center center; background-size: cover;
}

    .featureBox .cell h3 span {
    background: linear-gradient(transparent 80%, #FFD800 0%); display: inline; text-align: left; font-size: 70%; color: #fff;
}

    .featureBox .cell h3::before {
    content:""; display: block; width: 1em; height: 1em; margin-right: 1vw; background: url('https://office-kanade.jp/system_panel/uploads/images/check_white.png') no-repeat left center; background-size: contain; 
}

    .featureBox .cell p {
display: block; text-align: center; color: #fff; margin: 0 auto; width: 85%; height: 2.4em;
}

.featureBox .cell:nth-of-type(1) {
    width: 100%; height: 20vw; background: url(https://office-kanade.jp/system_panel/uploads/images/class_1.jpg) no-repeat center center; background-size: cover;
}

    .featureBox .cell h3 {
position: relative; width: max-content; display: flex; justify-content: center; align-items: center; margin-bottom: 1vw;
}

.featureBox .cell:nth-of-type(1) h3 span {
    background: linear-gradient(transparent 80%, #FFD800 0%); display: inline; text-align: left; font-size: 120%; color: #fff;
}

    .featureBox .cell:nth-of-type(1) h3::before {
    content:""; display: block; width: 1.3em; height: 1em; margin-right: 1vw; background: url('https://office-kanade.jp/system_panel/uploads/images/check_white.png') no-repeat left center; background-size: cover; 
}

    .featureBox .cell:nth-of-type(1) p {
display: block; text-align: center; color: #fff;
}


.btnBox {
    width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; margin: 5vw auto 0; 
}

    .btnBox a {
    width: 49%; display: flex; justify-content: space-between; align-items: center; margin: 0 0 1vw 0; padding: 1vw; box-sizing: border-box; text-align: center; border: solid 1px #BCBCBC; background: #fff;
}

    .btnBox a:after {
    display: block; content:""; background: url(https://office-kanade.jp/system_panel/uploads/images/arrow_yellow.png) no-repeat center right; width: 1em; height: 1em; background-size: cover; margin-left: 1em;
}


    .mainCont.classroom table {
border-collapse:collapse; width: 100%; margin-right: auto; margin-left: auto; margin-bottom: 3vw; 
}

.mainCont.classroom table th {
    padding: 1vw; border: solid 1px #cacaca;
}

    .mainCont.classroom table td {
    padding: 1vw; border: solid 1px #cacaca;
}

    .mainCont.classroom table.type1 tr td:first-child {
    width: 30%;
}

    .mainCont.classroom table.type1 tr td:nth-child(2) {
    width: 70%;
}


    .staffBox {
    width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;
}

    .staffBox .cell {
    width: 23%; height: auto; text-align: center; margin: 0 2% 3vw 0; 
}

    .staffBox .cell:nth-of-type(4) {
    margin-right: 0;
}

    .staffBox .cell .img {
    display: block; width: 80%; margin-left: auto; margin-right: auto; margin-bottom: 1vw; border-radius: 50%; overflow: hidden;
}

    .staffBox .cell h4 {
    text-align: center; font-size: 100%; margin: 1vw auto;
}

    .staffBox .cell p {
text-align: left; font-size: 70%; display: block; width: 90%; margin-right: auto; margin-left: auto;
}


#blogSec article:nth-child(n+4) {
    display: none; 
}


    .yarpp-template-list {
margin-top: 5vw;
}

.yarpp-template-list a {
display: block; margin-bottom: 2vw;
}

.yarpp-template-list dl {
display: none;
}



.txtlist {
display: block; width: 100%; margin: 0 auto; padding: 3vw 0 0; box-sizing: border-box;
}

.txtlist .flcell {
    display: flex; justify-content: flex-start; align-items: center; width: 100%; height: auto; margin: 0 auto; border-bottom: dotted 1px #cacaca;
}

    .txtlist .flcell:nth-of-type(1) {
    border-top: dotted 1px #cacaca;
}

    .txtlist .flcell .fleft {
width: 50%; text-align: left; padding: 1vw; box-sizing: border-box;
}

.txtlist .flcell .fright {
width: 50%; text-align: left; padding: 1vw; box-sizing: border-box;
}







/**/

.mainCont {
display: block; position: relative; width: 100%; min-height: 60vh;
}

.mainCont.headerless {
    padding-top: 10vw; background: url('https://office-kanade.jp/system_panel/uploads/images/20231117130721127086.jpg') no-repeat center top; background-size: 100% auto;
}

    .mainCont.yellow {
    background: #FFD800; padding-bottom: 5vw;
}

    .mainCont.yellow.indexCList {
    padding: 5vw 0 0;
}

    .mainCont.yellow .pagettl .bg {
display: none;
}

.section {
display: block; width: 70%; margin: 0 auto 10vw;
}

.flcell {
    display: flex; justify-content: flex-start; align-items: center; width: 100%;
}



    a.btn {
    width: auto; display: flex; justify-content: space-between; align-items: center; margin-left: auto; margin-right: auto; padding: 1vw; box-sizing: border-box; text-align: center; background: #595757;
}

    a.btn.reservation {
background: #08CCD3; width: max-content; color: #fff;
}

a.btn.staffblog {
    width: max-content; color: #fff;
}

    a.btn p {
    display: block; width: 90%; font-weight: bold; text-align: center; color: #fff;
}

    a.btn:after {
    display: block; content:""; background: url(https://office-kanade.jp/system_panel/uploads/images/arrow.png) no-repeat center right; width: 1em; height: 1em; background-size: cover; margin-left: 1em;
}


    .mb1 {
margin-bottom: 1vw!important;
}

.mb3 {
margin-bottom: 3vw!important;
}

.mb5 {
margin-bottom: 5vw!important;
}

.mb7 {
margin-bottom: 7vw!important;
}

.mb10 {
margin-bottom: 10vw!important;
}

.tac {
text-align: center;
}

.tal {
text-align: left;
}

.tar {
text-align: right;
}


.ultxt {
    background: linear-gradient(transparent 80%, #FFD800 0%); display: inline; text-align: center;
}


    .checklist ul {
    padding: 0; margin: 0 auto; width: max-content; display: block; 
}

    .checklist ul li {
list-style-type: none; background: url('https://office-kanade.jp/system_panel/uploads/images/check.png') no-repeat left center; display: block; width: 100%; margin: 0 0 1vw 0; padding-left: 1.5em; background-size: 1.2em auto;
}


.ybHeader {
margin-bottom: 1vw; color: #000; font-size: 200%; background: #FFD800; padding: .6vw 1.6vw; margin: auto; text-align: center; width: max-content;
}

.boldP {
    font-weight: bold; font-size: 150%;
}


    .w60 {
    width: 60%;
}
/*
yellow
FFD800


:after {
display: block; position: relative; content:""; width: 1em; height: 1em; background: url(https://office-kanade.jp/system_panel/uploads/images/arrow.png) no-repeat; background-size: contain;
}
*/


}
/* gjs-dashed */

.gjs-dashed {
opacity: 1!important; 
}

.gjs-dashed .fright img {
    transform: scale(.7);  
}

    .gjs-dashed * {
padding: 10px!important;
}

.gjs-dashed .spnavi {
z-index: 11;
}

.gjs-dashed .spnavi {
    display: block; right: 0; z-index: 9; height: 100vh; overflow: scroll; padding-top: 8vw!important;
}

.gjs-dashed #spmenuClass {
z-index: 11;
}

.gjs-dashed #spmenuClass {
    display: block; right: 35; z-index: 9; height: 100vh; overflow: scroll; padding-top: 8vw!important;
}

    .gjs-dashed #spmenuCourse {
z-index: 11;
}

.gjs-dashed #spmenuCourse {
    display: block; right: 35; z-index: 9; height: 100vh; overflow: scroll; padding-top: 8vw!important;
}

    .gjs-dashed .image-container {
width: 100%; height: auto; overflow: visible; position: relative; z-index: 1; top: 0; left: 0; display: flex; justify-content: center; align-items: center; flex-wrap:wrap; background: #fff; opacity: 1; 
}

.gjs-dashed .image-container img {
position: relative; z-index: 2; top: 0; bottom: 0; left: 0; right: 0; margin: auto; display: block; width:33%; object-fit: cover; transform-origin: center center; transform: scale(1); 
}

.gjs-dashed .yellowbg .img1,.gjs-dashed .yellowbg .imgBtm,.gjs-dashed .yellowbg .img2 {
display: none;
}

.gjs-dashed .progress {
position: fixed; z-index: -10000; opacity: 0;
}

@media screen and (min-width: 1000px) {
    .section {
        margin: 0 auto 50px;
    }
}