@charset "UTF-8";
@media screen and (max-width: 999px) {
.pagetop { position: fixed; z-index: 8; width: 7vw; height: 7vw; display: block; right: 2vw; bottom: 20vw;}
body {font-family: sans-serif; font-weight: 400; font-style: normal; background: #fff; font-size: 3vw; opacity: 0;}
body.active { opacity: 1; transition: all .6s;}
iframe { width: 100%; height: 70vw; margin-left: auto; margin-right: auto; border: none;}
.d-inline-block label {margin-left: .6em;}
h2,h3,h4,a,a p {font-size: 100%;}

h1 {font-size: 100%;}
.logo { position: fixed; z-index: 11; top: 1vw; left: 2vw; width: max-content; height: 12vw; display: flex; justify-content: flex-start; align-items: center;}
.logo img { width: 3vw; height: auto; display: block; margin-right: 2vw;}
#btnbox { position: fixed; z-index: 11; top: 0; right: 0; width: auto; border-left: solid 1px #fff; border-bottom: solid 1px #fff; height: auto; display: flex; justify-content: space-between; align-items: center;}
#btnbox a {position:relative; width: 14vw; height: 14vw; 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 { position:absolute; top:0; bottom:0; left:0; right:0; 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: -60vw; z-index: 10; background: rgba(255,216,0,.95); width: 60vw; height: 100%; padding:18vw 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: 2vw 0; border-bottom: dotted 1px rgba(0,0,0,.4); color: #000;}
.spnavi br {display: none;}

#spmenuClass { display: block; position: fixed; top: 0; right: -60vw; z-index: 10; background: rgba(255,216,0,.95); width: 60vw; height: 100%; padding:14vw 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: 2vw 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: -60vw; z-index: 10; background: rgba(255,216,0,.95); width: 60vw; height: 100%; padding:14vw 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: 2vw 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: center; flex-direction: column; margin: 0 auto;}
.footer .section h1 {text-align: center; font-size: 120%;}
.footer .section a.logo { display: block; width: 50%; text-align: center;}
.footer .section .footerlink { display: flex; justify-content: center; align-items: center; width: 100%; text-align: center;}
.footer .section .footerlink a {display: block; margin-top: 4vw;}
.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: 2vw;}

.btmlink { width: 80%; margin: 20vw auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;}
.btmlink a { width: 45%; box-sizing: border-box; border: solid 1vw #F6D804; background: #F8E762; padding: 2vw 3vw; text-align: center; margin: 0 auto 5vw;}
.btmlink a img { display: block; margin: 0 auto 2vw; width: 50%; height: auto;}
.btmlink a p {text-align: center; display: block; position: relative; width: 100%; height: auto; 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: 80%; margin: 20vw auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;}
#menuSec #menu a { width: 45%; box-sizing: border-box; border: solid 1vw #F6D804; background: #F8E762; padding: 2vw 3vw; text-align: center; margin: 0 auto 5vw;}
#menuSec #menu a img { display: block; margin: 0 auto 2vw; width: 50%; height: auto;}
#menuSec #menu a p {text-align: center; display: block; position: relative; width: 100%; height: auto; 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: 70vw; 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: 200%; 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;}
.pagettl.reservation .txt p { letter-spacing: 0; text-indent: 0; font-weight: normal;}

.ulheader {display: block; margin-left: auto; margin-right: auto; text-align: center; position: relative; margin-bottom: 5vw;}
.ulheader > * { font-size: 160%; }
.ulheader:after { content: ""; display: block; width: 5em; height: 3px; background: #000; position: absolute; bottom: -1vw; left: 0; right: 0; margin: auto;}

.localnavi { width: 95%; display: flex; justify-content: flex-start; flex-wrap: wrap; flex-direction: column; margin-right: auto; margin-left: auto; }
.localnavi a.btn { width: 100%; 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; font-size: 80%; background: transparent;}
.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: contain; 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: 120%; margin-bottom: 2vw;}
.classBox .flcell:nth-of-type(2) {align-items: flex-start; flex-direction: column; }
.classBox .flcell:nth-of-type(2) .fleft { width: 100%; background: #fff; border-radius: 1vw; padding: 3vw; margin-bottom: 3vw; 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 div {padding: 0;}
.classBox .flcell:nth-of-type(2) .fright { width: 100%; background: #fff; border-radius: 1vw; padding: 3vw; 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) .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: 100%; margin-bottom: 3vw;}
.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: 100%; margin-bottom: 1vw; text-align: center;}

.form {width: 100%; margin: 0 auto;}
.form .formRow { margin: 0 0 5vw; padding: 0; text-align: left;}
.form .formRow input[type="text"],.form .formRow input[type="email"],.form .formRow textarea {width: 100%;}
.form .formRow textarea {height: 20em;}
.form p {margin-bottom: 0;}
.form .pp { display: block;width: 100%;height: 40vw; margin: 4vw auto; overflow: scroll;border: solid 1px #fafafa; background: rgba(255,255,255,.6); padding: 2vw; 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: 100%; 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; flex-wrap: wrap;}
.classroomlist .fleft { width: 100%; margin: 0 auto 4vw;}
.classroomlist .flcell h3 { font-size: 120%; padding-bottom: 1vw; text-align: center; border-bottom: solid 1px rgba(0,0,0,.7);}
.classroomlist .flcell a { display: block; width: 100%; margin-bottom: 5vw; background: url(https://office-kanade.jp/system_panel/uploads/images/arrow.png) no-repeat center right; background-size: 4vw auto; padding: 0;}
.classroomlist .flcell a p {display: flex; justify-content: flex-start; align-items: center; width: 90%;}
.classroomlist .flcell a p strong { padding-right: 1em;}
.classroomlist .flcell a p em { font-style: normal;}
.classroomlist .flcell a p br {display: none;}

.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 h4 {order:2; font-size: 100%; letter-spacing: 0; text-indent: 0; margin: 0; line-height: 1.4;}

.newsdetail .webgene-blog { display: block; width: 100%; text-align: left; margin: 20vw auto 5vw; }
.newsdetail .webgene-blog header { display: block; text-align: center; margin: 0 auto 1vw;}
.newsdetail .webgene-blog header h3 {font-size: 120%; 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: 100%; 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; flex-direction: column; height: auto; width: 100%; margin: 0 0 10vw 0; border: none;}
.method .flcell .fleft { width: 100%; height: 40vw; margin-bottom: 5vw;}
.method .flcell .fleft img { width: 100%; height: 100%; object-fit: cover;}
.method .flcell .fright { width: 100%; 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;}
.method .flcell .fright .cornerBox .num { width: 15%; height: auto; margin: 3vw auto;}
.method .flcell .fright h4 {font-size: 120%; margin-bottom: 3vw; text-align: center;}
.method .flcell .fright p { margin-bottom: 5vw;}
.method .flcell .fright .bg { width: 100%; background: #E8E8E8; padding: 4vw; box-sizing: border-box; border-radius: 1vw;}
.method .flcell .fright .bg h4 {font-size: 120%;}

.kv { width: 100%; height: 100vw; 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: 180%; margin-bottom: 1vw; color: #000; background: #FFD800; padding: .6vw 1vw;  margin-top: 20vw; }
.kv .txt p { font-size: 100%; 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: 45vw; height: 45vw; border-radius: 50%; overflow: hidden; position: absolute;}
.kv .img .img1 { position: absolute; top: 0; bottom: 0; margin: auto; left: 7vw; z-index: 2;}
.kv .img .img2 { position: absolute; top: 0; bottom: 0; margin: auto; right: 7vw; 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: 19vw auto, 19vw auto; background-position: -2vw 40vw, 84vw 40vw;}
.indexsec2 {background: url('https://office-kanade.jp/system_panel/uploads/images/20231117130721127086.jpg') no-repeat center center; background-size: 100% auto;}
.indexsec2 .section { margin: 0 auto; width: 95%; padding-bottom: 35vw;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; flex-wrap: wrap;}
.indexsec2 .flcell .fleft { width: 100%; margin-bottom: 3vw;}
.indexsec2 .flcell .fright { width: 100%; margin-bottom: 3vw;}
.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: 100%; 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: 100%; font-weight: bold;}


.artmain .section {width: 100%;}

.faqCell {display: block; width: 100%; margin: 0 auto; padding: 12vw 0 0; box-sizing: border-box;}
.faqCell .flcell { display: block; width: 100%; height: auto; margin: 0 auto 4vw; position: relative;}
.faqCell .flcell .fleft {position: absolute; left: 0; top: 0; width: 6vw; height: 6vw; display: flex; justify-content: center; align-items: center; content:"A"; background: #000; border-radius: 50%; overflow: hidden; background: #000; color: #fff; font-size: 90%; font-weight: bold; margin-right: 1vw;}
.faqCell .flcell .fright {padding-left: 10vw;text-decoration: underline; text-decoration-color: #FFD800; text-decoration-thickness: 1vw; display:inline-block; text-align: left; font-size: 110%; font-weight: bold;}
.faqCell .acell { text-align: left; margin-bottom: 3vw; padding-bottom: 3vw; border-bottom: dashed 1px rgba(0,0,0,.4); font-size: 100%;}

.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: 49.5%; height: 25vw; 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: 80%; 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: 90%; height: 2.4em; text-align: left; font-size: 90%; line-height: 1.2;}
.featureBox .cell:nth-of-type(1) { width: 100%; height: 35vw; 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: 2vw;}
.featureBox .cell:nth-of-type(1) h3 span { background: linear-gradient(transparent 80%, #FFD800 0%); display: inline; text-align: left; font-size: 100%; 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; flex-direction: column; margin: 5vw auto 0; }
.btnBox a { width: 100%; display: flex; justify-content: space-between; align-items: center; margin: 0 0 1vw 0; padding: 3vw 1vw; box-sizing: border-box; text-align: center; border: solid 1px #BCBCBC; background: #fff; font-size: 90%;}
.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; overflow: scroll;}
.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: 40%;}
.mainCont.classroom table.type1 tr td:nth-child(2) { width: 60%;}

.mainCont.classroom table.type3 tr td { width: 8%; padding: .3vw; text-align: center;}
.mainCont.classroom table.type3 tr td:nth-child(2) { width: 26%;}


.mainCont.classroom .checklist a {font-weight: bold!important; color: #08CCD3!important;text-decoration: underline;}

.staffBox { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; flex-direction: column;}
.staffBox .cell { width: 100%; height: auto; text-align: center; margin: 0 auto 10vw;  display: flex; justify-content: space-between; flex-direction: column;}
.staffBox .cell .img { display: block; width: 30%; height: 28vw; margin-left: auto; margin-right: auto; margin-bottom: 1vw; border-radius: 50%; overflow: hidden;}
.staffBox .cell h4 { text-align: center; font-size: 110%; margin: 3vw auto; width: 100%; text-align: center;}
.staffBox .cell p {text-align: left; font-size: 100%; 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;}
.txtlist.about .flcell .fleft {width: 30%; text-align: left; padding: 1vw; box-sizing: border-box;}
.txtlist.about .flcell .fright {width: 70%; 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: 95%; margin: 0 auto 20vw;}
.section h2, .section h3 { font-size: 120%;}
.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; font-size: 100%;}
a.btn.reservation {background: #08CCD3; width: max-content; color: #fff;}
a.btn.staffblog { width: max-content; color: #fff;}
a.btn p { display: block; width: 100%; 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: contain; margin-left: 1em;}

.mb1 {margin-bottom: 2vw!important;}
.mb3 {margin-bottom: 6vw!important;}
.mb5 {margin-bottom: 10vw!important;}
.mb7 {margin-bottom: 14vw!important;}
.mb10 {margin-bottom: 20vw!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; font-size: 120%;}

.checklist ul { padding: 0; margin: 0 auto; width: max-content; display: block; width: 100%; }
.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 4vw 0; padding-left: 2.5em; background-size: 1.5em auto;}
.checklist ul li:last-child {margin-bottom: 0;}
.ybHeader {margin-bottom: 2vw; color: #000; background: #FFD800; padding: .6vw 1.6vw; margin: auto; text-align: center; width: 100%; font-size: 120%;}
.boldP { font-weight: bold; font-size: 100%;}

}
@media screen and (max-width: 999px) {
    .section {
        margin: 0 auto 30px;
    }
}