@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: #fff;}
a:visited { text-decoration: none; color: #fff;}
a:hover { text-decoration: none;}
a:active { text-decoration: none; color: #fff;}
a:link,a:visited,a:hover,a:active {transition: all .6s; }
a:hover { opacity: .4;}
img { width: 100%; height: auto;vertical-align: bottom}
.dn {display: none!important;}
* {word-break: break-all; font-family: "Noto Serif JP", serif;}

.requiredText {color:#9A1E1E; padding-left:.3vw;}
.d-inline-block {padding-left: 1vw;}
.d-inline-block input {margin-right: .5vw;}

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

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


/*
body #root{opacity: 0; transition: all .5s;}
body.active #root{opacity: 1; transition: all .5s;}
*/



@media screen and (min-width: 1000px) {}
body {background:#000; font-size: 1vw; color: #fff;}
.pc {display: block;}
.sp {display: none;}


.headerlogo { position: fixed; top: 2vw; left: 7vw; z-index: 22; display: flex; justify-content: flex-start; align-items: center; width: max-content; margin-right: 3vw;}
.headerlogo img { width: 3vw; height: auto; display: block; margin-right: 1vw;}
.headerlogo h1 { font-size: 120%;}

.header { position: fixed; top: 0; left: 0; z-index: 21; padding: 1vw 0 1vw 31vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; width: 100%; height: 7vw; background: rgba(0,0,0,.7);}
.header .newsarea {flex:1;}
.header .newsarea p {font-size: 100%;}
.header .webgene-blog div { display: flex; justify-content: flex-start; align-items: center; width: auto; padding: 0;}
.header .webgene-blog p { width: max-content;font-size: 100%; font-weight: normal; color: #fff; display: block; margin-right: .5vw;}
.header .webgene-blog h2 { width: max-content;font-size: 100%; font-weight: normal; color: #fff;}

#spMenu { position: fixed; z-index: 22; top: 1vw; left: 0; display: flex; justify-content: center; align-items: center; width: 5vw; height: 5vw; transition: all 1s; padding: 0; margin: 0;}
#spMenu .menu-trigger {position: relative; width: 2.5vw; height: auto; display: block;}
#spMenu .menu-trigger .btnbox { position: relative; width: 2.5vw; height: 2.5vw; display: block; justify-content: center; align-items: center; margin: auto; top: 0; bottom: 0; left: 0; right: 0; }
#spMenu .menu-trigger .btnbox,#spMenu .menu-trigger .btnbox p { display: block; transition: all .4s; box-sizing: border-box; }
#spMenu .menu-trigger .btnbox p { position: absolute; left: 0; width: 100%; height: 1px; background: #fff; font-size: 0.1em; }
#spMenu .menu-trigger .btnbox p:nth-of-type(1) { top: 0; }
#spMenu .menu-trigger .btnbox p:nth-of-type(2) { top: 1vw; }
#spMenu .menu-trigger .btnbox p:nth-of-type(3) { top: 2vw; }
#spMenu .menu-trigger.active .btnbox p:nth-of-type(1) { transform: translateY(.9vw) rotate(-45deg); background: #fff; }
#spMenu .menu-trigger.active .btnbox p:nth-of-type(2) { opacity: 0; }
#spMenu .menu-trigger.active .btnbox p:nth-of-type(3) { transform: translateY(-1.05vw) rotate(45deg); background: #fff; }
.menu-trigger .menu { height: 1em; margin: 0 auto; padding-top: 1px;}
.menu-trigger .menu p {position: relative; font-size: .8vw; color: #fff; width:max-content; }

.headermenu { position: fixed; top: -10vw; left: 0; z-index: 21; opacity: 0; padding: 0 2vw 2vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; width: 100%; height: auto; background: rgba(0,0,0,.7); transition: all .6s;}
.headermenu.active {top: 7vw; opacity: 1; transition: all .6s;}
.headermenu * {color: #fff;}
.headermenu .left { display: block; width: 60%; margin-top: 1vw; padding-top: 1vw;  border-top: dotted 1px rgba(255,255,255,.4);}
.headermenu .right {width: 40%; display: flex; justify-content: space-between; align-items: flex-start; box-sizing: border-box; padding: 0 3vw  ;}
.headermenu .right div { margin: 0 .5vw;}
.headermenu .right p a { display: block;-ms-writing-mode: tb-rl; writing-mode: vertical-rl; text-orientation: upright; letter-spacing: .4vw;}
.headermenu .right p a br {display: none;}

.footerimgarea {position: relative; z-index: 2;}
.footerimgarea .left { width: 70%; height: auto; margin-top: 0; padding-top: 0;}
.footerimgarea .fw { position: absolute; right: 10vw; top: 0vw; z-index: 3; width: 12vw; height: auto;}
.footer {position: relative; z-index: 2; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap; width: 100%; height: auto; padding: 2vw; box-sizing: border-box; background: #000; color: #fff;}
.footer .left { display: block; width: 60%;}
.footer .left .logo { display: flex; justify-content: flex-start; align-items: center; width: max-content;}
.footer .left .logo img { width: 3vw; height: auto; display: block; margin-right: 2vw;}
.footer .left .logo h1 { font-size: 120%;}
.footer .left { display: block; width: 60%; margin-top: 1vw; padding-top: 2vw;}
.footer .left .webgene-blog div { display: flex; justify-content: flex-start; align-items: center; width: auto; padding: 0 0 1vw 0; margin-bottom: 1vw;}
.footer .left .webgene-blog p { width: max-content; margin-right: 2%; font-size: 90%; font-weight: normal; color: #fff; display: block; margin-right: 2vw;}
.footer .left .webgene-blog h2 { width: max-content;font-size: 90%; font-weight: normal; color: #fff;}
.footer .left .address { display: block; width: 100%; margin-top: 1vw; padding-top: 2vw; border-top: dotted 1px rgba(255,255,255,.4);}
.footer .right {width: 40%; display: flex; justify-content: space-between; align-items: flex-start; box-sizing: border-box; padding: 0 3vw  ;}
.footer .right div { margin: 0 .5vw;}
.footer .right p a { display: block;-ms-writing-mode: tb-rl; writing-mode: vertical-rl; text-orientation: upright; letter-spacing: .4vw;}
.footer .right p a br {display: none;}

.maincont {position: relative; z-index: 2; }
.section { width: 55%; margin: 0 auto 20vw;}
.maincont p {line-height: 1.8;}

.pagettl {display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; height: 50vw;}
.pagettl h2 {font-size: 300%; text-align: center;}
.pagettl .largep {font-size: 140%; font-weight: bold;}

.btn { display: block; width: max-content; height: max-content; color: #fff; letter-spacing: 0.2rem; margin: 0 auto; text-align: center; border: none; border-radius: 0; background: #9A1E1E; font-size: 100%;}
.btn a {display: block; width: 100%; padding: 1vw; color: #fff;}
.btn br {display: none;}

.mb1 {margin-bottom: 1vw!important;}
.mb2 {margin-bottom: 2vw!important;}
.mb3 {margin-bottom: 3vw!important;}
.mb5 {margin-bottom: 5vw!important;}
.mb7 {margin-bottom: 7vw!important;}
.mb10 {margin-bottom: 10vw!important;}
.mb20 {margin-bottom: 20vw!important;}
.mb30 {margin-bottom: 30vw!important;}

.tac {text-align: center;}
.tal {text-align: left;}
.tar {text-align: right;}

.w60 {width: 60%; display: block; margin-left: auto; margin-right: auto;}
.largep {font-size: 280%;}

.gallery1,.gallery2 { display: flex; justify-content: flex-start; flex-wrap: wrap;}
.gallery1 .box,.gallery2 .box { width: 31%; height: auto; aspect-ratio: 1/.667; overflow: hidden; margin: 0 3.5% 2.3vw 0;}
.gallery1 .box:hover,.gallery2 .box:hover {opacity: .79;}
.gallery1 .box:nth-of-type(3n),.gallery2 .box:nth-of-type(3n) { margin: 0 0% 2.3vw 0;}
.gallery1 .box img,.gallery2 .box img { width:100%; height: 100%; object-fit:cover;}

#galleryMain { position: fixed; z-index: -10; opacity: 0; top: 0; right: 0; width: 100%; height: 100vh; overflow: hidden; display: block; background: rgba(0,0,0,.8); transition: all .6s;}
#galleryMain.on { opacity: 1; z-index: 5;}
#galleryMain .img { position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; margin: auto; aspect-ratio: 1/.667; width: 80%; max-height: 80vh; overflow: hidden; margin-top: 5vw; opacity: 0; z-index: -1;}
#galleryMain .img.on { opacity: 1; z-index: 1;}
#galleryMain .img img { width: 100%; height: 100%; object-fit: contain; cursor: pointer;}
#galleryMain .close { position: absolute; left: 0; right: 0; bottom: 1vw; margin: auto; width: auto; height: auto; text-align: center; color: #fff; z-index: 2; }
#galleryMain .close p { color: #fff; font-size: 1vw;font-family: "copperplate", serif;}

.hbox {width: 100%; height: auto;}
.hbox h2 {color: #EB9351; padding: 0; text-align: center; font-size: 250%; display: block; width: max-content; margin: 0 auto;}

.txtlist .flcell { display: flex; justify-content: flex-start; align-items: center; width: 100%; height: auto; margin: 0 auto; border-top: dashed 1px rgba(255,255,255,.4);}
.txtlist .flcell:nth-last-of-type(1) { border-bottom: dashed 1px rgba(255,255,255,.4);}
.txtlist .flcell .fleft { width: 30%; text-align: left; padding: 1vw; box-sizing: border-box; display: block;}
.txtlist .flcell .fleft p {text-align: left;}
.txtlist .flcell .fright { width: 70%; padding: 1vw; box-sizing: border-box; display: block;}
.txtlist .flcell .fright p {text-align: left;}
.txtlist .flcell a { color: #fff;}

.section#new,.section#dishes,.section#warm,.section#cold {padding-top: 10vw; margin-bottom: 10vw;}
.menu .flcell { display: flex; justify-content: flex-start; align-items: center; width: 100%; height: auto; margin: 0 auto; border-top: dashed 1px rgba(255,255,255,.4);}
.menu .flcell:nth-last-of-type(1) { border-bottom: dashed 1px rgba(255,255,255,.4);}
.menu .flcell .fleft { width: 50%; text-align: left; padding: 1vw; box-sizing: border-box; display: block;}
.menu .flcell .fleft p {text-align: left;}
.menu .flcell .fleft strong {color:#dd1313;}
.menu .flcell .fright { width: 50%; padding: 1vw; box-sizing: border-box; display: block;}
.menu .flcell .fright p {text-align: right;}

.menuMain { display: flex; justify-content: flex-start; flex-wrap: wrap; width: 100%;}
.menuMain .box { width: 48%; margin: 0 4% 6vw 0; position: relative; aspect-ratio: 1/.85;}
.menuMain .box:nth-of-type(even) {margin-right: 0;}
.menuMain .box .txt {display: block; padding: 1vw 0; width: 90%;}
.menuMain .box .txt p { margin: 0;display: block;}
.menuMain .box .txt strong {color:#dd1313; padding-right: .5em;}
.menuMain .box .img { aspect-ratio: 1/.77; overflow: hidden;}
.menuMain .box .img img {width: 100%; height: 100%; object-fit: cover;}

.form {width: 100%; 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: 100%;height: 20vw; margin: 2vw auto;overflow: scroll;border: solid 1px #fafafa;padding: 1vw; box-sizing: border-box; text-align: left;}
.form .pp a { color: #fff;}
.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: #9A1E1E;}
.form #submit.active {opacity: 1;}

.section .webgene-blog div { display: flex; justify-content: flex-start; align-items: center; width: auto;padding: 1vw 0; border-top: dotted 1px rgba(255,255,255,.4);}
.section article:nth-last-of-type(1) div{border-bottom: dotted 1px rgba(255,255,255,.4);}
.section .webgene-blog p { width: 20%; margin-right: 2%; font-size: 90%; font-weight: normal; color: #fff; display: block; margin-right: 1vw;}
.section .webgene-blog h2 { width: 78%;font-size: 90%; font-weight: normal; color: #fff;}

.maincont.school .section {margin-bottom: 40vw;}
.classSec {}
.classSec .box {position: relative; margin-bottom: 20vw;}
.classSec .box .img {position: absolute; left: 0; top: 0; z-index: 1; aspect-ratio:1/.5;}
.classSec .box .txt {position: relative; z-index: 2; top: 22vw; width: 90%; margin: 0 5%; background: #fff; padding: 5vw 3vw 3vw; box-sizing: border-box; color: #000;}
.classSec .box .txt .largep { font-size: 130%; color: #9A1E1E;}

.maincont.owner .hbox {position: relative;}
.maincont.owner .hbox h3 {text-align: left; font-size: 120%; color: #EB9351;}
.maincont.owner .hbox:before { content:""; background: rgba(255,255,255,.3); width: 27.5vw; position: absolute; top: .7vw; left: -28vw; display: block; height: 1px;}
.maincont.owner .imgbox { width: 100%; display: flex; justify-content: space-between; align-items: center;}
.maincont.owner .imgbox .box:nth-of-type(1) {margin-right: 1vw;}
.maincont.owner .imgbox .box:nth-of-type(2) {}

.soba .box h3 { font-size: 140%;}
.soba .box .largep {color: #EB9351; font-size: 180%;}
.soba .box .txt p {font-size: 120%;}
.soba .box .txt .mb1 {margin-bottom: 3vw!important;}
.soba .slide { position: relative; display: block; aspect-ratio: 1/.446;}

.maincont.welcome .section {width: 70%;}
.section .duoflex {position: relative; display: flex; justify-content: flex-start; align-items: flex-start; width: 100%; margin-left: auto; margin-right: auto;}
.section .duoflex .ttl { width: 15%; display: flex; justify-content: center; }
.section .duoflex .ttl h3 { display: block; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; text-orientation: upright; letter-spacing: 1.4vw; font-size: 200%; padding: 0; font-weight: normal; height:max-content; }
.section .duoflex .main { width: 85%;}
.section .duoflex .main .slide { position: relative; display: block; aspect-ratio: 1/.58; margin-bottom: 3vw;}
.section .duoflex .main .largep {color: #EB9351; font-size: 180%; font-weight: normal; margin-bottom: 3vw; width: 80%; line-height: 1.4;}
.section .duoflex .main p {font-size: 120%;}
.maincont.welcome .section:nth-of-type(even) .duoflex {flex-direction: row-reverse;}


.kv {position: relative; width: 100%; aspect-ratio: 1/.58; overflow: hidden; }
.kv .txt {position: absolute; z-index: 2; top: 20vw; left: 17vw;}
.kv .txt h2 { font-size: 200%; line-height: 1.5;-webkit-filter: drop-shadow(0px 0px 5px rgba(0,0,0,.5)); filter: drop-shadow(0px 0px 5px rgba(0,0,0,.5)); letter-spacing: .1em;}
.kv .img {position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%;}
.kv .img img { width: 100%; height: 100%; object-fit: cover;}

.indexsec1 {position: relative; z-index: 1; background: #F8F5F5; position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 60vw; padding:0;}
.indexsec1 .txt {position: relative; z-index: 2;}
.indexsec1 h3 { font-size: 300%; color: #333; -webkit-filter: drop-shadow(0px 0px 5px rgba(0,0,0,.5)); filter: drop-shadow(0px 0px 5px rgba(0,0,0,.3));}
.indexsec1 .en { font-size: 100%; letter-spacing: .3em; color: #333; -webkit-filter: drop-shadow(0px 0px 5px rgba(0,0,0,.5)); filter: drop-shadow(0px 0px 5px rgba(0,0,0,.3));}
.indexsec1 p { font-size: 120%; line-height: 2.2; color: #333; -webkit-filter: drop-shadow(0px 0px 5px rgba(0,0,0,.5)); filter: drop-shadow(0px 0px 5px rgba(0,0,0,.3));}
.indexsec1 img { position: absolute; z-index: 1; }
.indexsec1 .fw1 { width: 8vw; bottom: 4vw; left: 2vw;}
.indexsec1 .fw2 { width: 5vw; top: 11vw; right: 2vw;}

.indexsec2 .section { width: 80%; margin: 0 auto 10vw;}
.indexsec2 .duoflex {position: relative; z-index: 2; display: flex; justify-content: flex-start; align-items: flex-start; width: 100%; top: -4vw; margin-left: auto; margin-right: auto;}
.indexsec2 .duoflex .ttl { width: 15%; display: flex; justify-content: center; padding-top: 13vw; }
.indexsec2 .duoflex .ttl h3 { display: block; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; text-orientation: upright; letter-spacing: 1.4vw; font-size: 200%; padding: 0; font-weight: normal; height:max-content; }
.indexsec2 .duoflex .main { width: 85%;}
.indexsec2 .duoflex .main .slide { position: relative; display: block; aspect-ratio: 1/.536; margin-bottom: 3vw; background: #000;}
.indexsec2 .txt {margin-top: 3vw; margin-left: 5vw; display: block; width: 100%; text-align: left;}
.indexsec2 .txt p {font-size: 130%; line-height: 2.2; letter-spacing: .3em;}

.indexsec3 {position: relative; aspect-ratio: 1/.8; width: 80%; margin: 0 auto; }
.indexsec3 img {position: absolute;}
.indexsec3 .img1 { width: 22vw; z-index: 2; top: 9vw; left: 0;}
.indexsec3 .img2 { width: 40vw; z-index: 3; top: 5vw; left: 18vw;}
.indexsec3 .img3 { width: 23vw; z-index: 4; top: 19vw; left: 57vw;}
.indexsec3 .img4 { width: 32vw; z-index: 1; top: 30.5vw; left: 30.5vw;}

.indexsec4 .section { width: 90%; margin: 0 auto 10vw;}
.indexsec4 .duoflex {position: relative; z-index: 2; display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: row-reverse; width: 100%; top: -4vw; margin-left: auto; margin-right: auto;}
.indexsec4 .duoflex .main { width: 100%;}
.indexsec4 .duoflex .main .top { width: 90%; display: flex; justify-content: space-between; margin-bottom: 3vw;}
.indexsec4 .duoflex .main .top .mainimg { position: relative; display: block; width: 80%; aspect-ratio: 1/.576; overflow: hidden; background: #000;}
.indexsec4 .duoflex .main .top .ttl { width: 20%; display: flex; justify-content: center; margin-top: 4vw;}
.indexsec4 .duoflex .main .top .ttl h3 { display: block; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; text-orientation: upright; letter-spacing: 1.4vw; line-height: 1.4; font-size: 240%; padding: 0; font-weight: normal; height:max-content; }
.indexsec4 .duoflex .main .btm { width: 80%; display: block; margin: 0 auto;}
.indexsec4 .duoflex .main .btm .txt {margin-top: 3vw; margin-left: 5vw; display: block; text-align: left; display: flex; justify-content: flex-start; align-items: center;}
.indexsec4 .duoflex .main .btm .txt img { width: 25%;}
.indexsec4 .duoflex .main .btm .txt p { width: 70%; display: block; margin-left: 5%; font-size: 110%; line-height: 2.2; letter-spacing: .3em;}
.indexsec4 .duoflex .main .btm .thumb { width: 100%; display: flex; justify-content: space-between; align-items: center; }
.indexsec4 .duoflex .main .btm .thumb a { display: block; width: 24%; aspect-ratio: 1/.667; overflow: hidden; background: #000;}
.indexsec4 .duoflex .main .btm .thumb a img { width: 100%; height: 100%; object-fit: cover; object-position: center center;}
.indexsec4 .duoflex.last .main .top { flex-direction: row-reverse;}
.indexsec4 .duoflex.last .main .top .mainimg { background: none;}

.indexmenu { width: 100%; height: auto; position: relative; display: flex; justify-content: space-between;}
.indexmenusec.section {width: 70%;}
.indexmenu a { display: block; width: 23%; aspect-ratio: 1/1.88; overflow: hidden; position: relative; background: #000;}
.indexmenu a:hover {opacity: 1;}
.indexmenu a .txt {position: absolute; z-index: 2; width: 80%; height: max-content; padding: 2vw 0; top: 0; bottom: 0; left: 0; right: 0; margin: auto; background: rgba(0,0,0,.8); text-align: center; color: #fff; line-height: 1.3; opacity: 0; transition:all .5s;}
.indexmenu a:hover .txt { opacity: 1; transition:all .5s;}
.indexmenu a .img {position: absolute; z-index: 1; width: 100%; height: 100%; transition:all .5s; opacity: .8;}
.indexmenu a:hover .img { transform: scale(1.2); opacity: 1; transition:all .5s;}
.indexmenu a .img img { width: 100%; height: 100%; object-fit: cover;}

.progress {background-color: #000; color: #fff; height: 100%; position: fixed; z-index: 100; top: 0; left: 0; width: 100%; display:block; margin: auto; text-align: center;  transition: all 1s;}
.progress.out { z-index: -100; opacity: 0; transition: all 1s;}
.hanabi { display: flex; position: relative; margin: 10vh auto 1vw; width: 15vw; height: 15vw; mask-image: url("../../../system_panel/uploads/images/mask1.png") no-repeat center center; mask-size: 100% 100%; -webkit-mask: url('../../../system_panel/uploads/images/mask1.png') repeat center center / 100% 100%; overflow: hidden;
overflow: hidden; border: solid 1px #333; }
.hanabi p {   background: #f00; margin: auto; width: 1px; height: 1px; transform: scale(1); display: block; opacity: 1; border-radius: 50%; transition: all 1s; }
.hanabi p.on {   background: #f00; margin: auto; display: block; opacity: 1; transform: scale(400); transition: all 1s; }
.logoBg{ position: relative; display: block; margin-left: auto; margin-right: auto;  width: 20vw; height: auto; aspect-ratio: 1/.63;  mask-image: url("../../../system_panel/uploads/images/mask2.png") no-repeat center center; mask-size: 100% 100%; -webkit-mask: url('../../../system_panel/uploads/images/mask2.png') repeat center center / 100% 100%; overflow: hidden; margin-bottom:3vh; border: solid 1px #333; opacity: 0; transition: all .5s; border: solid 1px #fff; }
.logoBg.out { opacity: 0;}
.logoBg.on {opacity: 1;}
.progress_bar {background: #f00; position: absolute; bottom: 0; left: 0; right: 0; margin: auto; width: 20vw; height: 10vw; display: block;}
.progress_bar.out { opacity: 0; transition: all .5s;}
.progress_text {    font-size: 2vw; margin: 10px auto 0; text-align: center; width: 100%;}
.title { display: block; margin: 1vw auto; overflow: hidden; padding: 1.2em 0; filter: blur(1.5rem); transition: all .6s;font-size: 1.5vw;}
.title.on {filter: blur(0);}




/*
red
9A1E1E

orange
EB9351
*/






.image-container {width: 100%; height: 100vh; overflow: hidden; position: fixed; z-index: 1; top: 0; left: 0; display: flex; justify-content: center; align-items: center; background: #000; opacity: .2; }
.image-container img {position: absolute; z-index: 2; top: 0; bottom: 0; left: 0; right: 0; margin: auto; display: none; object-fit: cover; transform-origin: center center; transform: scale(1); }
.image-container img.active {position: absolute; z-index: 1; transform: scale(1); display: none; object-fit: cover; animation: widthAnimation 9s ease; }
@keyframes widthAnimation {0% {transform: scale(1.1);}100% {transform: scale(1);}}




/* gjs-dashed */
.gjs-dashed { background:#000;}
.gjs-dashed * {padding: 10px!important;}
.gjs-dashed .wow {opacity: 1!important;}
.gjs-dashed .headermenu {top: 5vw; opacity: 1;}
.gjs-dashed .headermenu .right * { padding: 0!important; margin: 0!important;}
.gjs-dashed .section { width: 90%;}
.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: #000; 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 #progress{ opacity: 0; z-index: -100;}