@charset "UTF-8";

.h1, .h2, .h3, .h4, .h5, .h6 {margin-bottom: 0; font-weight: normal;}
h1,h2,h3,h4 {font-weight: bold;}
p {margin-bottom: 2vw; line-height: 1.6;}

a:link { text-decoration: none;}
a:visited { text-decoration: none;}
a:hover { text-decoration: none;}
a:active { text-decoration: none;}
a:link,a:visited,a:hover,a:active { transition: all .6s; }
a:hover { opacity: .4;}

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

* {word-break: break-all; font-family: sans-serif; }
.requiredText {color:red; padding-left:.3vw;}

.loading { opacity: 1; z-index: 100; position: fixed; top: 0; left: 0; display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; background: linear-gradient(#c42325 0%, #7f0119 100%); transition: all .6s; }
.loading.ready {opacity: 0; z-index: -100;}
.loading .img { width: 30vw; height: auto; animation: animationZoom2 10s ease-in-out infinite;}
@keyframes animationZoom2{ 0% {transform: scale(1.1); opacity: .1;} 100% {transform: scale(.6); opacity: .5;}}


@media screen and (max-width: 999px) {}
@media screen and (min-width: 800px) {
 body {font-size:1.2vw; background: #FAFAFA; color: #020202; font-family:sans-serif;}
.pc{display: block;}
.sp,#spMenu,#spnavi {display: none;}

.h2box { width: max-content; margin-bottom: 2vw; }
.h2box h2 { width: max-content; font-family: articulat-cf, sans-serif; font-weight: bold; font-size: 5.5vw; line-height: .8; letter-spacing: 0em; margin: 0;}
.h2box h2:first-letter { color: #B2312B;}
.h2box p { display: block; width: 100%;  padding: .3em; font-weight: bold; color: #fff; font-size: 120%; background: #000; text-align: center;}

a.btn {display: flex; justify-content: center; align-items: center; width: max-content; line-height: 1; font-size: 100%; color: #fff; background: #E23638; padding: .5vw 3vw; box-sizing: border-box; border-radius: 1vw; transition: all .6s; }
a.btn p {margin-bottom: 0;}
a.btn:hover {background: #801212; transition: all .6s;}


.headerwrap {opacity: 0; position: fixed; top: -10vw; left: 0; width: 100%; height: 10vw; z-index: 10; transition: all 1.6s;}
.headerwrap.active {opacity: 1; position: fixed; top: 0; left: 0; width: 100%; height: 10vw; z-index: 10; transition: all 1.6s;}

.header { display: block; width: 80vw; margin: 2vw auto 0; transition: all .6s; }
.header .top { display: flex; justify-content: space-between; align-items: center; height: 4vw; overflow: hidden; transition: all .6s; }
.header .top .left { display: flex; justify-content: space-between; align-items: center; width: 53.6vw; height: 100%; background: #fff; padding: 1vw 0 1vw 1vw; box-sizing: border-box; border-radius: 1vw; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); transition: all .6s;}
.header .top .left .logo { display: flex; width: 12.7vw; height: auto;}
.header .top .left .logo img {vertical-align: middle; width:100%; height:auto;}
.header .top .left .iconbox {width: max-content; display: flex; justify-content: flex-end; align-items: center;}
.header .top .left .iconbox a {display: flex; width: 3.7vw; height: auto; padding: 0 1vw; border-left: dotted 2px #707070;}

.header .top .right { display: flex; justify-content: center; align-items: center; width: 25vw; height: 100%; background: #E23638; padding: 1vw; box-sizing: border-box; border-radius: 1vw; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); transition: all .6s;}
.header .top .right .icon {display: flex; justify-content: center; align-items: center; width: 2.6vw; height: 2.6vw; padding-right: 1em;}
.header .top .right a {display: flex; justify-content: center; align-items: center; width: 16vw; line-height: 1; font-size: 145%; font-family: articulat-cf, sans-serif; font-weight: 700; color: #fff; }
.header .top .right a p {line-height: 1.5em; display: block; width: 100%; height: 2.6vw; margin: 0;}
.header .headermenu { display: flex; justify-content: space-between; align-items: center; width: 100%; margin: 1vw auto 0; transition: all .6s;}
.header .headermenu a {color: #fff;}
.header .headermenu a p {font-family: "Toppan Bunkyu Gothic"; font-weight: normal; font-size: 1vw; line-height: 44px; margin: 0; text-align: center; color: #fff; text-shadow: 0px 1px 6px rgba(0, 0, 0, 0.45);}

.headerwrap.bg { background: rgba(0,0,0,.8); transition: all .6s; height: auto;}
.headerwrap.bg .header { margin: .4vw auto 0; transition: all .6s; }
.headerwrap.bg .header .top { height: auto; transition: all .6s; }
.headerwrap.bg .header .top .left,.headerwrap.bg .header .top .right { padding: .4vw 0 .4vw 1vw; transition: all .6s; }
.headerwrap.bg .headermenu { margin: 0 auto; transition: all .6s;}


.kvtxt {font-family: toppan-bunkyu-midashi-go-std, sans-serif;font-weight: 900;font-style: normal;}
.kv {position: relative; z-index: 1; display: block; width: 100%; height: 65vw; margin: 0 auto; background: linear-gradient(#0a5379 0%, #0b80b9 100%); overflow: hidden;}
.kv h1 { color: #fff; display: block; text-align: center; margin: 13vw auto 3vw; font-size: 5vw; font-family: toppan-bunkyu-midashi-go-std, sans-serif;font-weight: 900;}
.kv h1.mv-sbttl{margin: 3vw auto 3vw;}
.kv p { color: #fff; display: block; text-align: center; margin: auto; font-size: 1.7vw;}
.kv .kvc1 { position: absolute; z-index: 1; width: 30vw; height: auto; left: -12vw; top: 3vw;}
.kv .kvc2 { position: absolute; z-index: 1; width: 23vw; height: auto; left: -6vw; top: 39vw;}
.kv .kvc3 { position: absolute; z-index: 1; width: 23vw; height: auto; right: -6vw; top: 39vw;}

.kvimg { position: absolute; display: block; width: 100%; height: 32vw; z-index: 2; right: 0;left: 0; top: 48vw; margin: 0 auto;}
.kvimg .cell { position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; display: flex; justify-content: center; align-items: baseline; width: 100%; height: 32vw; position: absolute; margin-top: 20vw; transition: all 1s;}
.kvimg .cell.off { opacity: 0; transition: all 1s;}
.kvimg .cell:nth-of-type(1) {z-index: 3;}
.kvimg .cell:nth-of-type(2) {z-index: 2;}
.kvimg .cell:nth-of-type(3) {z-index: 1;}

.section1 { display: flex; justify-content: space-between; width: 100%; margin: 0 auto; background: url("https://kyotokugarden.com/system_panel/uploads/images/bg_sec1.png") no-repeat center center; background-size: 100% auto;}
.section1 .left { display: block;width: 56vw;}
.section1 .left .txtbox { display: block; width: 45vw; background: #fff; padding: 5vw; margin: 22vw 0 0 10vw; box-sizing: border-box;}
.section1 .left .txtbox .btnbox { display: flex; justify-content: flex-end;}
.section1 .right { display: block;width: 42.7vw;}

.section2 { display: block; width: 100%; margin: 10vw auto 0; background: url("https://kyotokugarden.com/system_panel/uploads/images/bg_sec2.png") no-repeat center top; background-size: 100% auto;}
.section2 .h2box {margin: 0 auto 3vw;}
.flbox { display: flex; justify-content: space-between; align-items: center; width: 100%; margin: 3vw 0;}
.flbox .img { order: 2; display: block; width: 37vw; height: 30vw; overflow: hidden;}
.flbox .txt { order: 1;  display: block; width: 60vw;}
.flbox:nth-of-type(even) .img {order:1;}
.flbox:nth-of-type(even) .txt {order:2;}
.flbox .txt .txtbox { padding: 0 6vw 0 3vw;}
.flbox:nth-of-type(odd) .txt .txtbox { padding: 0 3vw 0 6vw;}
.flbox .txt .reason {display: block; width: max-content; line-height: 1; font-size: 100%; color: #fff; background: #B3332D; padding: .5vw 3vw; margin: 0 0 2vw; box-sizing: border-box; border-radius: 1vw; }
.flbox .txt .reason br {display: none;}
.flbox .txt h3 { font-size: 150%; margin-bottom: 3vw;}

.section3 { display: block; width: 100%; margin: 10vw auto 0;}
.section3 .h2box {margin: 0 auto 3vw;}
.section3 {width: 80vw;}
.section3 .webgene-blog { width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap;}
.section3 .webgene-blog .webgene-item { width: 48%; background: #fff; margin-bottom: 2vw; padding: 2vw; box-sizing: border-box; box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.16);}
.section3 .webgene-blog .webgene-item .webgene-item-content { margin: auto;}
.section3 .webgene-blog .webgene-item .webgene-item-content img { display: block; margin: 0 auto 1vw; }
.section3 .webgene-blog .webgene-item p {font-weight: bold; margin-bottom: 1vw;}
.section3 .webgene-blog .webgene-item a .blogItemTitle { color: #020202; margin-bottom: 0;}
.section3 .btn { margin: 2vw auto; text-align: center;}

.cta {width: 100%; background: linear-gradient(#0a5379 0%, #0b80b9 100%); margin: 10vw auto 15vw; position: relative; height: 22vw; text-align: center;}
.cta h1 {color: #fff; text-align: center; font-size: 230%; font-family: toppan-bunkyu-midashi-go-std, sans-serif;font-weight: 900; margin: 0 auto 2vw; padding-top: 3vw;}
.cta .btn { margin: auto;}
.cta img {width: 40%; height: auto; margin: auto;}

.btmbnr { width: 80vw; display: flex; justify-content: space-between; flex-wrap: wrap; margin: 0 auto 5vw;}
.btmbnr a {display: block; width: 32%; margin-bottom: .7vw;}

.footer { background: #fff; width: 100%; margin: 0 auto; text-align: center; padding: 2vw 0;}
.footer .logo { display: block; width: 20%; height: auto; margin: 0 auto 2vw;}
.footer .address { display: block;  margin: 0 auto 2vw; font-weight: bold; font-size: 110%;}
.footer .telbtn { display: flex; justify-content: center; align-items: center; width: max-content; height: auto; background: #E23638; margin: auto; padding: 1vw 3vw; box-sizing: border-box; border-radius: 1vw; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); transition: all .6s;}
.footer .telbtn .icon {display: flex; justify-content: center; align-items: center; width: 2.6vw; height: auto;}
.footer .telbtn p {display: flex; justify-content: center; align-items: center; width: auto; padding: 0 0 0 1vw; margin: 0; font-size: 2.1vw; font-family: articulat-cf, sans-serif; font-weight: 700; color: #fff; }
.cp { width: 100%; background: #000; display: flex; justify-content: space-between; align-items: center;}
.cp p {color: #fff; font-size: 90%; margin: 0; padding-left: 1vw; background: #000;}
.cp .box {width: max-content; margin-right: 1vw;}
.cp .box a { width: 2vw; height: auto; padding: .8vw; }

.pagettl { width: 100%; height: 35.5vw; overflow: hidden; position: relative;}
.pagettl .txt {z-index: 2; width: 100%; height: 35.5vw; overflow: hidden; position: absolute;}
.pagettl .txt h1 {color: #fff; font-size: 340%; font-family: articulat-cf, sans-serif; font-weight: 700; text-align: center; margin-top: 18vw; line-height: 1;}
.pagettl .txt p {color: #fff; font-size: 110%; text-align: center; line-height: 1; margin: 0 auto;}
.pagettl .bh {z-index: 1; width: 100%; height: 35.5vw; overflow: hidden; position: absolute;}

#root {position: relative; width: 100%; height: auto; overflow: hidden;}
#ttlbg {z-index: -1; position: absolute; left: 2vw; top: 17.5vw; color: rgba(0,0,0,.03); font-size: 26vw; font-family: articulat-cf, sans-serif; font-weight: 700; transform: rotate(90deg); transform-origin:left; line-height: 1; display: block; width: max-content; height: 26vw; overflow: hidden;}

.articledetail {width: 80vw; margin: 10vw auto;}
.articledetail .webgene-blog { width: 100%; display: block; text-align: left; margin: 0 auto; padding: 5vw; box-sizing: border-box;}
.articledetail .webgene-blog .webgene-item { width: 100%; background: #fff; margin-bottom: 2vw; padding: 2vw; box-sizing: border-box; box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.16);}
.articledetail .webgene-blog .webgene-item .webgene-item-content { margin: 3vw auto;}
.articledetail .webgene-blog .webgene-item .webgene-item-content img { display: block; margin: 0 auto 1vw; }
.articledetail .webgene-blog .webgene-item p {font-weight: bold; margin-bottom: 1vw;}
.articledetail .webgene-blog .webgene-item a .blogItemTitle { color: #020202; margin-bottom: 0;}
.articledetail .btn { margin: 2vw auto; text-align: center;}
.articledetail .webgene-blog .imgWrap .imgBx {display: block; margin-bottom: 3vw;}
iframe {width: 100%; height: 40vw;}

.section {width: 80vw; margin: 10vw auto;}
.section .h2box {margin-left: auto; margin-right: auto; text-align: center; margin-bottom: 5vw;}
.centerp { text-align: center; font-weight: bold;}
.mb1 {margin-bottom: 3vw;}

.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: 90%;height: 10vw;margin: 3vw auto;overflow: scroll;border: solid 1px #fafafa;padding: 1vw; box-sizing: border-box; text-align: left;}
.form .submit { text-align: center; margin: auto;}
.form #submit { width: max-content; padding: 1vw 10vw; background: #000; color: #fff; opacity: .2; margin: auto;}
.form #submit.active {opacity: 1;}

.duobox { display: flex; justify-content: flex-start; align-items: center; width: 100%; padding: 1vw; border-top: dotted 1px #707070;}
.duobox:nth-last-of-type(1) {border-bottom: dotted 1px #707070;}
.duobox .cell:nth-of-type(1){ width: 20%; font-weight: bold;}
.duobox .cell:nth-of-type(2){ width: 80%;}
.duobox .cell p {margin-bottom: 0;}

.member .unit {width: 66vw; height: auto; margin: 0 0 10vw 0; }
.member .unit:nth-last-of-type(1) {margin: 0 0 0 14vw; }
.member .unit h3 {font-size: 140%; margin: 2vw 0;}
.member .unit .profile { border: dotted 1px #777; padding: 3vw; text-align: left;}

.advantages  .unit {width: 100%; height: auto; margin: 0 0 10vw 0; }
.advantages .headerbox { display: flex; justify-content: flex-start; align-items: center; width: 100%; margin-bottom: 3vw;}
.advantages .headerbox .num {margin: 0 2vw 0 0; padding: 0 2vw 0 0; font-size: 400%; font-weight: bold; font-family: articulat-cf, sans-serif; font-weight: 700; border-right: solid 1px #333; height: auto;}
.advantages .headerbox h2 {font-size: 180%;}
.advantages h3 {font-size: 180%; margin-bottom: 3vw;}
.advantages .headerbox + img {display: block; margin-bottom: 3vw;}

.service { display: block; width: 100%; margin: 10vw auto 0; text-align: center;}
.service .h2box {margin: 0 auto 3vw;}
.service .flbox {text-align: left;}

.fltable { display: flex; justify-content: flex-start; width: 66vw; margin: 0 auto; border-top: solid 1px #C3C3C3; box-sizing: border-box;}
.fltable .left { display: flex; align-items: center; width: 25%; background: #555; padding: 1vw; box-sizing: border-box; border-left: solid 1px #C3C3C3; border-right: solid 1px #C3C3C3;}
.fltable .left p {color: #fff; margin: 0;}
.fltable .right { display: flex; justify-content: flex-start; align-items: center; width: 75%; background: #fff; padding: 1vw; box-sizing: border-box; border-right: solid 1px #C3C3C3;}
.fltable .right p { margin: 0;}
.fltable:nth-last-of-type(1) { border-bottom: solid 1px #C3C3C3;}
.fltable.price .right p {font-size: 90%;}
.fltable.price .right .price { font-size: 140%; font-weight: bold; color: #B2312B; padding: 0 2vw;}


}

.kv p.mv-font-gothic {
    font-family: toppan-bunkyu-midashi-go-std, sans-serif;
    color: #E23638;
    margin-top: 1em;
}
/* gjs-dashed */
.gjs-dashed * {padding: 20px!important;}
.gjs-dashed .pagettl .txt {z-index: 2; width: 100%; height: 30.5vw; overflow: hidden; position: absolute;}
.gjs-dashed .headerwrap {opacity: 1; position: relative; top: 0; left: 0; width: 100%; height: auto;}
.gjs-dashed .spnavi { display:block!important; top: 0; width: 50vw; right: 0; margin: 0; opacity:1; }