@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: #452F0D;}
a:visited { text-decoration: none; color: #452F0D;}
a:hover { text-decoration: none;}
a:active { text-decoration: none; color: #452F0D;}
a:link,a:visited,a:hover,a:active {transition: all .6s; }
a:hover { opacity: .4;}

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

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

.cp { background: #312C2C; padding: .7vw; text-align:center;}
.cp p { color:#fff;}

.maincont {opacity: 0; transition: all .6s;}
.maincont.active {opacity: 1;}
.wow {opacity: 0;}









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

#headerMenu .sp {display:none!important;}
iframe { display:block; width:100%; height:40vw; border: none; margin: 0 auto;}
body {font-size:.95vw; font-family:sans-serif; font-weight: 400; font-style: normal; color: #000000; background: #fff;}
h1,h2,h3,h4  {}

.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: #fff; transition: all 1s; }
.loading.ready {opacity: 0; z-index: -100;}
.loading h1 { font-family: "ten-mincho-text", serif; font-weight: normal; font-size: 140%; letter-spacing: 1.5em; text-indent: 1.5em; animation: animationZoom2 10s ease-in-out infinite;}
@keyframes animationZoom2{ 0% {transform: scale(1); opacity: .4;} 100% {transform: scale(1.6); opacity: .9;}}

.header { display: block; position: fixed; z-index: 20; top: 0vw; left: 0; padding: 0; width: 100%; overflow: hidden;}
.header .main { display: flex; justify-content: space-between; align-items: center; width: 100%; margin: 0 auto; padding: 1.56vw 5.5vw 0 2.7vw;}
.header .main .logo { display: block; width: 4.14vw; -webkit-filter: drop-shadow(3px 3px 5px rgba(0,0,0,.5)); filter: drop-shadow(3px 3px 5px rgba(0,0,0,.5));}
.header #spMenu { display: none;}
/*
.header #spMenu { display: flex; justify-content: center; align-items: center; width: 2.5vw; height: 2.5vw; transition: all 1s; padding: 0; align-items: center; margin: 0 2vw 0 0; }
.header #spMenu .menu-trigger { 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; }
.menu-trigger,.menu-trigger p { display: block; transition: all .4s; box-sizing: border-box; }
.menu-trigger.down p { position: absolute; left: 0; width: 100%; height: 1px; background: #000; font-size: 0.1em; }
.menu-trigger p { position: absolute; left: 0; width: 100%; height: 1px; background: #000; font-size: 0.1em; box-shadow: 0px 0px 8px rgba(0,0,0,0.2); }
.menu-trigger p:nth-of-type(1) { top: 0; }
.menu-trigger p:nth-of-type(2) { top: 1.1vw; }
.menu-trigger p:nth-of-type(3) { top: 2.3vw; }
.menu-trigger.active p:nth-of-type(1) { transform: translateY(1.2vw) rotate(-45deg); background: #000; }
.menu-trigger.active p:nth-of-type(2) { opacity: 0; }
.menu-trigger.active p:nth-of-type(3) { transform: translateY(-1.05vw) rotate(45deg); background: #000; }
.spnavi { display: block; position: fixed; top: 0; right: -15vw; z-index: 9; background: rgba(0,0,0,.8); width: 15vw; height: 100%; padding: 9vw 2vw 0; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; -webkit-transition: all 1s; transition: all 1s; }
.spnavi.active { right: 0;}
*/
.spnavi { display: flex; justify-content: flex-end; height: max-content;}
.spnavi .spnavi_menu { display: flex; justify-content: flex-end; height: max-content;}
.spnavi .spnavi_menu a { color: #fff; display: flex; flex-direction: column; padding: 0 0; margin-right: 4.3vw; letter-spacing: 0.05rem; height: max-content;; -webkit-filter: drop-shadow(3px 3px 5px rgba(0,0,0,.5)); filter: drop-shadow(3px 3px 5px rgba(0,0,0,.5));}
.spnavi .spnavi_menu a:last-of-type { margin-right: 0vw;}
.spnavi .spnavi_menu a .txt_en { font-size: 140%; font-family: "futura-pt", sans-serif; line-height: 1.2;}
.spnavi .spnavi_menu a .txt_jp { font-size: 70%;}
.h_sns { z-index: 30; position: fixed; right: 2.3vw; top: 3.0vw; display: flex; flex-direction: column; width: 3.5vw;}
.h_sns a { margin-bottom: 1.17vw;}
.h_sns a:last-of-type { margin-bottom: 0vw;}

.footer {opacity:1; display: block; margin: 0 auto; width: 100%; height: 10vw; padding: 0 0 0vw; background: #312C2C; color: #fff;}
.footer .flcell { width: 100%; height: 10vw; padding: 0 2.7vw; display: flex; justify-content: space-between; align-items: center;}
.footer .flcell .fleft { width: 85%; display: flex; align-items: center;}
.footer .flcell .fleft .f_logo { width: 4.14vw; margin-right: 3.125vw;}
.footer .flcell .fleft .f_menu { display: flex; justify-content: flex-start;}
.footer .flcell .fleft .f_menu a { color: #fff; display: flex; flex-direction: column; padding: 0 0; margin-right: 2vw; letter-spacing: 0.05rem;}
.footer .flcell .fleft .f_menu a:last-of-type { margin-right: 4vw;}
.footer .flcell .fleft .f_menu a .txt_en { font-size: 120%; font-family: "futura-pt", sans-serif; line-height: 1.2;}
.footer .flcell .fleft .f_menu a .txt_jp { font-size: 70%;}
.footer .flcell .fright { width: 15%; display: flex; justify-content: space-between;}
.footer .flcell .fright a { width: 2vw; margin: 0 0vw;}

.kv { position: relative; z-index: 10; display: flex; justify-content: center; align-items: center; width: 100%; height: 66.0vw; overflow: hidden; margin-bottom: 0vw;}
.kv .dotNavi { position: absolute; z-index: 3; width: 24vw; height: 1vw; display: flex;justify-content: flex-end; align-items: center;  top: 45vw; right: 10vw;}
.kv .dotNavi p,.kv .dotNavi a { display: block; width: 4vw; height: 1vw; margin-left: 1vw; background: rgba(255,255,255,.3); }
.kv .dotNavi .active { display: block!important; background: rgba(255,255,255,.7); }
.kv .txt { position: absolute; z-index: 2; width: auto; height: auto; display: flex; flex-direction: column; text-align: left; color: #fff; top: 15.5vw; left: 7.0vw;}
.kv .txt h1 { font-size: 520%; font-weight: normal; letter-spacing: 0.1rem; margin-bottom: 0.3vw; font-family: 'Josefin Sans', sans-serif; line-height: 1.1; margin: 0 0 1vw; -webkit-filter: drop-shadow(3px 3px 5px rgba(0,0,0,.5)); filter: drop-shadow(3px 3px 5px rgba(0,0,0,.5));}
.kv .txt p { font-size: 170%; letter-spacing: 0.2rem; margin: 0; -webkit-filter: drop-shadow(3px 3px 5px rgba(0,0,0,.5)); filter: drop-shadow(3px 3px 5px rgba(0,0,0,.5));}
.kv .bg { position: absolute; z-index: 1; width: 100%; height: 50.4vw; top: 0;}
.kv .bg img { width: 100%; height: 100%; overflow: hidden; object-fit: cover;}
.kv .sub { z-index: 3; position: absolute; bottom: 0vw; left: 7vw; width: 48vw; padding: 4.5vw 5.5vw; background: #A39673; color: #fff;}
.kv .sub .txt01 { font-size: 135%; line-height: 1.75; margin: 0 0 4.0vw;}
.kv .sub .txt02 { font-size: 110%; line-height: 1.61; margin: 0 0 0vw; word-break: initial;}

.pagettl { position: relative; z-index: 2; display: flex; justify-content: center; align-items: center; width: 100%; height: 28.68vw; overflow: hidden; padding-bottom: 4vw; margin-bottom: 10vw;}
.pagettl .txt { position: absolute; z-index: 2; width: 27.1vw; height: 6.6vw; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: #fff; background: #000; bottom: 0vw; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%);}
.pagettl .txt h1 { font-size: 270%; font-weight: normal; letter-spacing: 0.6rem; margin-bottom: 0.3vw; font-family: "futura-pt", sans-serif; line-height: 1;}
.pagettl .txt p { font-size: 110%; letter-spacing: 0.5rem;}
.pagettl .subtxt { z-index: 3; position: absolute; left: 3.5vw; bottom: -0.5vw; writing-mode: vertical-rl; display: flex; align-items: center; font-size: 80%; letter-spacing: 0.1rem;color: #fff;}
.pagettl .subtxt img { width: 1px; height: 7.8vw; margin-top: 0.7vw;}
.pagettl .bg { position: absolute; z-index: 1; width: 100%; height: 100%;}
.pagettl .bg img { width: 100%; height: 100%; overflow: hidden;}

.maincont { margin: 0vw auto 0; display: block; overflow: hidden; min-height: 80vh;}

a.btn { position: relative; display: block; width: max-content; padding: 0.3vw 2.73vw 0.3vw 1.95vw; background: #000; color: #fff; font-size: 110%; letter-spacing: 0.2rem; margin: 0 auto; text-align: center; border: none; border-radius: 0;}
a.btn::after { display: block; position: absolute; content: ""; background: url(https://first-unit.jp/system_panel/uploads/images/20230822150047670970.png) no-repeat; background-size: 100% 100%; width: 36px; height: 1px; top: 50%; right: -22px; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%);}

.hbox { text-align: center; margin-bottom: 5vw;}
.hbox h2 {font-size: 250%; letter-spacing: 0.1rem; margin-bottom: .3vw; color: #000;}
.hbox h3 {font-size: 230%; letter-spacing: 0.1rem; margin-bottom: .3vw; color: #000;}
.hbox p { width: max-content; text-align: center; margin: 0 auto; letter-spacing: 0.1rem; font-size: 80%;}

.section {position: relative; display: block; margin: 10vw auto; text-align: center; width: 70vw; }
.indexcell .section { width: 90vw;}

.pagettl + .section {margin: 7vw auto 12vw;}
.stripeBg {background: url(https://kyokasho230225.smooooth.jp/system_panel/uploads/images/bg_btmcell.png); background-size: 4px auto; padding: 2vw 0 1vw; overflow: hidden;}
.stripeBg .section { margin: 0 auto;}
.mb1 {margin-bottom: 1vw!important;}
.mb3 {margin-bottom: 3vw!important;}
.mb5 {margin-bottom: 5vw!important;}
.mb7 {margin-bottom: 7vw!important;}

.section h3 { text-align: center; font-size: 140%; }

.newslist .webgene-blog { height: auto; display: flex; justify-content: flex-start; flex-wrap: wrap;}
.newslist .webgene-blog .flcell { display: block; height: auto; width: 30%; margin: 0 5% 2vw 0; border: none;}
.newslist .webgene-blog .flcell:nth-of-type(3n) {margin-right: 0;}
.newslist .webgene-blog .flcell .fleft { width: 100%;}
.newslist .webgene-blog .flcell .fleft a {display: block; width: 100%; height: 16vw; overflow: hidden;}
.newslist .webgene-blog .flcell .fleft a img { width: 100%; height: 100%; object-fit: cover;}
.newslist .webgene-blog .flcell .fright { width: 100%; padding: 1vw 0; box-sizing: border-box; text-align: left;}
.newslist .webgene-blog .flcell .fright h2 {font-size: 100%; font-weight: bold; color: #000; font-weight: normal; 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 p {padding-bottom: 3vw;}

.index01 { margin: 0 auto 9.5vw;}
.index01 .flcell { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: flex-end; margin: -8.6vw 0 0vw; padding: 0 7vw;}
.index01 .flcell .fleft { width: 60%;}
.index01 .flcell .fleft .ttl p { position: relative; font-size: 110%; margin: 0 0 4.0vw; width: max-content;}
.index01 .flcell .fleft .ttl p::after { display: block; position: absolute; content: ""; width: 127px; height: 1px; background: #707070; top: 50%; right: -140px; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%);}
.index01 .flcell .fleft .subttl { font-size: 160%; line-height: 2.1; margin: 0 0 4.0vw; font-weight: bold;}
.index01 .flcell .fleft .txt { font-size: 100%; line-height: 1.75; margin: 0 0 3.0vw; color: #A39773;}
.index01 .flcell .fleft .btn { margin: 0 0 0 auto;}
.index01 .flcell .fright { width: 35%;}

.index02 { position: relative; padding: 0 7vw; margin: 0 0 13vw;}
.index02 .subttl { z-index: 6; position: absolute; top: 4.0vw; right: 7.0vw; }
.index02 .subttl p { position: relative; writing-mode: vertical-rl; margin: 0; padding: 0; line-height: 1; height: max-content;}
.index02 .subttl p::after { display: block; position: absolute; content: ""; background: #000; width: 1px; height: 10.1vw; top: 110%; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%);}
.index02 .img { position: relative; z-index: 5; width: 34vw;}
.index02 .img .img_tp { margin-bottom: 3vw;}
.index02 .txt_cell { position: absolute; z-index: 2; width: 93vw; padding: 6.4vw 13.4vw 6.4vw 44vw; background: #EFEFEF; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);}
.index02 .txt_cell .ttl { margin-bottom: 3.7vw; position: relative; padding: 0 0 0 1.9vw;}
.index02 .txt_cell .ttl::before { display: block; position: absolute; content: ""; background: #A39773; width: 0.7vw; height: 100%; left: 0; top: 0;}
.index02 .txt_cell .ttl h2 { font-size: 230%; margin-bottom: 0.5vw;}
.index02 .txt_cell .ttl p { font-size: 110%; margin-bottom: 0vw;}
.index02 .txt_cell h3 { font-size: 180%; line-height: 1.4; margin-bottom: 3.0vw;}
.index02 .txt_cell .txt { font-size: 110%; line-height: 1.83; margin-bottom: 0vw;}
.index02 .btn { margin: -5vw 0 0 auto;}

.index03 { position: relative; margin-bottom: 8.3vw;}
.index03 .txt { position: absolute; color: #fff; left: 7vw; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%);}
.index03 .txt .txt01 { font-family: "futura-pt", sans-serif; font-size: 370%; color: #fff; text-shadow: 0 3px 6px rgba(0,0,0,0.71); line-height: 1.23; margin-bottom: 0.3vw;}
.index03 .txt .txt02 { font-size: 200%; color: #fff; text-shadow: 0 3px 6px rgba(0,0,0,0.71);}

.index04 { padding: 0 3.5vw 0 7vw; margin-bottom: 9.5vw;}
.index04 .flcell { display: flex; justify-content: space-between;}
.index04 .flcell .fleft { width: 42.9%;}
.index04 .flcell .fleft .subttl p { position: relative; font-size: 110%; margin: 0 0 4.0vw; width: max-content;}
.index04 .flcell .fleft .subttl p::after { display: block; position: absolute; content: ""; width: 127px; height: 1px; background: #707070; top: 50%; right: -140px; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%);}
.index04 .flcell .fleft .ttl { margin-bottom: 3.7vw; position: relative; padding: 0 0 0 1.9vw;}
.index04 .flcell .fleft .ttl::before { display: block; position: absolute; content: ""; background: #A39773; width: 0.7vw; height: 100%; left: 0; top: 0;}
.index04 .flcell .fleft .ttl h2 { font-size: 230%; margin-bottom: 0.5vw;}
.index04 .flcell .fleft .ttl p { font-size: 110%; margin-bottom: 0vw;}
.index04 .flcell .fleft h3 { font-size: 180%; line-height: 1.4; margin-bottom: 3.0vw;}
.index04 .flcell .fleft .txt { font-size: 110%; line-height: 1.83; margin-bottom: 0vw;}
.index04 .flcell .fright { width: 48.2%;}

.index05 { position: relative; display: flex; padding: 0 0vw 0 7vw; margin-bottom: 14vw;}
.index05 .dotNavi { position: absolute; z-index: 3; width: 18vw; height: .3vw; display: flex;justify-content: flex-end; align-items: center;  bottom: -5vw; left: 18vw;}
.index05 .dotNavi p,.index05 .dotNavi a { display: block; width: 4vw; height: .3vw; margin-left: 1vw; background: rgba(0,0,0,.1); }
.index05 .dotNavi .active { display: block!important; background: rgba(0,0,0,.3); }
.index05 .fleft { position: relative; z-index: 3; width: 45.6vw; height: 33vw; overflow: hidden; top: 3vw; }
.index05 .fleft img { width: 100%; height: 100%; overflow: hidden; object-fit: cover;}
.index05 .fright { position: absolute; z-index: 2; width: 55.5%; padding: 5.0vw 0 5.5vw 8.0vw; background: #EFEFEF; top: 0; right: 0; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%);}
.index05 .fright img { display: block; width: 16.4vw; margin: 0 auto 2.0vw;}
.index05 .fright .txt { font-size: 120%; text-align: center; line-height: 2.07; margin-bottom: 3.5vw;}

.index06 { position: relative; display: flex; justify-content: flex-end; padding: 0 0vw 0 0vw; margin-bottom: 11.5vw;}
.index06 .fleft { position: absolute; z-index: 3; width: 57.1vw; bottom: 0%; left: 3.5vw;}
.index06 .fleft .ttl { position: relative; display: block; width: 100%; padding: 4.0vw 4.0vw; margin-bottom: 4.0vw; background: #A39673; color: #fff;}
.index06 .fleft .ttl h2 { font-size: 350%; line-height: 1.2; margin-bottom: 2.0vw; font-family: "futura-pt", sans-serif; font-weight: normal;}
.index06 .fleft .ttl h3 { font-size: 170%; line-height: 1.4; margin-bottom: 0vw; font-weight: normal;}
.index06 .fleft .ttl .subttl { position: absolute; top: 4.0vw; right: 3.0vw; }
.index06 .fleft .ttl .subttl p { position: relative; writing-mode: vertical-rl; margin: 0; padding: 0; line-height: 1; height: max-content;}
.index06 .fleft .ttl .subttl p::after { display: block; position: absolute; content: ""; background: #fff; width: 1px; height: 10.1vw; top: 110%; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%);}
.index06 .fleft .txt { font-size: 110%; line-height: 1.83; margin: 0 18vw 7.5vw 3.4vw; }
.index06 .fleft .btn { margin: 0 0 0 3.4vw;}
.index06 .fright { position: relative; z-index: 2; width: 49.4vw;}


.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 .submit { text-align: center; margin: auto;}
.form #submit { position: relative; width: 20vw; padding: 1vw 0vw; background: #000; color: #fff; font-size: 130%; letter-spacing: 0.1rem; opacity: .2; margin: auto; border: none; border-radius: 0px;}
.form #submit.active {opacity: 1;}

.architecture { position: relative; display: block; width: 100%;}
.architecture .bg_txt { display:inline-block; position: absolute; height: 100%; right: 0; top: -5vw; font-size: 1400%; font-family: "futura-pt", sans-serif; color: rgba(0,0,0,0.02);}
.architecture .bg_txt p { writing-mode: vertical-rl; margin: 0; padding: 0; line-height: 1;}
.architecture .section p { font-size: 120%; line-height: 2.08;}
.architecture .flcell.architecture_top { display: flex; justify-content: space-between; padding: 0 9.3vw 0 3vw; margin-bottom: 12.3vw;}
.architecture .flcell.architecture_top .fleft { position: relative; width: 55.6%;}
.architecture .flcell.architecture_top .fleft img:nth-child(1) {width: 90%; position: relative; z-index: 2; }
.architecture .flcell.architecture_top .fleft img:nth-last-child(1) {width: 90%; position: relative; z-index: 1; top: -3vw; left: 3vw; }
.architecture .flcell.architecture_top .fright { width: 40.2%; margin-top: 2.5vw;}
.architecture .flcell.architecture_top .fright .ttl { margin-bottom: 3.7vw; position: relative; padding: 0 0 0 1.9vw;}
.architecture .flcell.architecture_top .fright .ttl::before { display: block; position: absolute; content: ""; background: #A39773; width: 0.7vw; height: 100%; left: 0; top: 0;}
.architecture .flcell.architecture_top .fright .ttl h2 { font-size: 230%; margin-bottom: 0.5vw;}
.architecture .flcell.architecture_top .fright .ttl p { font-size: 110%; margin-bottom: 0vw;}
.architecture .flcell.architecture_top .fright h3 { font-size: 170%; line-height: 1.44; margin-bottom: 3.7vw;}
.architecture .flcell.architecture_top .fright .txt { font-size: 110%; margin-bottom: 6.0vw; line-height: 1.83;}
.architecture .flcell.architecture_top .fright .btn { margin: 0 0 0vw;}
.architecture .architecture_cell { position: relative;}
.architecture .architecture_cell .txt { position: absolute; bottom: 3.8vw; left: 6.7vw; color: #fff;}
.architecture .architecture_cell .txt .txt01 { font-family: "futura-pt", sans-serif; font-size: 300%; color: #fff; text-shadow: 0 3px 6px rgba(0,0,0,0.71); line-height: 1.23; margin-bottom: 0.3vw;}
.architecture .architecture_cell .txt .txt02 { font-size: 150%; color: #fff; text-shadow: 0 3px 6px rgba(0,0,0,0.71);}
.architecture .architecture_list { display: flex; justify-content: center; flex-wrap: wrap;}
.architecture .architecture_list .box { width: 23.8%; margin: 0 4.5% 5.0vw;}
.architecture .architecture_list .box .icon { width: 17vw; height: 17vw; border: 1px solid #EDEBEB; border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 0 auto 1.5vw;}
.architecture .architecture_list .box .icon img { width: 7.0vw; margin-bottom: 0vw;}
.architecture .architecture_list .box .icon p { display: flex; height: 4.0vw; justify-content: center; align-items: center; text-align: center; font-size: 130%; font-weight: bold; color: #A39673; margin: 0; line-height: 1.28;}
.architecture .architecture_list .box .txt { text-align: center; line-height: 1.5; margin: 0; font-size: 110%;}

.beauty { position: relative;}
.beauty .bg_txt { position: absolute; height: 100%; right: 0; top: -5vw; font-size: 1400%; font-family: "futura-pt", sans-serif; color: rgba(0,0,0,0.02);}
.beauty .bg_txt p { writing-mode: vertical-rl; margin: 0; padding: 0; line-height: 1;}
.beauty .section p { font-size: 120%; line-height: 2.08;}
.beauty .beauty_cell { position: relative;}
.beauty .beauty_cell .txt { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); padding: 2.4vw 6.6vw; width: max-content; background: #A39673; color: #fff; font-size: 160%; line-height: 1.73; margin: 0; text-align: center;}

.under_newslist { background: #EFEFEF; padding: 4.0vw 0;}
.under_newslist .section { margin: 0 auto;}


.about { position: relative;}
.about .bg_txt { z-index: 3; position: absolute; height: 100%; left: 0; top: -5vw; font-size: 1400%; font-family: "futura-pt", sans-serif; color: rgba(0,0,0,0.02);}
.about .bg_txt p { writing-mode: vertical-rl; margin: 0; padding: 0; line-height: 1;}
.about .flcell { display: flex; justify-content: space-between; padding: 0; margin: 0 0 15vw;}
.about .flcell .fleft { width: 40.1%;}
.about .flcell .fright { width: 46.6%; margin: 0 6% 0 7.3%;}
.about .flcell .fright .ttl { margin-bottom: 4.0vw;}
.about .flcell .fright .ttl .txt01 { font-size: 110%; margin-bottom: 0.3vw;}
.about .flcell .fright .ttl h2 { font-size: 230%; font-weight: bold; color: ; margin-bottom: 0.3vw;}
.about .flcell .fright .ttl .txt02 { font-size: 110%; color: #A39773; font-weight: bold;}
.about .flcell .fright .txt { font-size: 110%; line-height: 1.85; margin-bottom: 6.0vw;}
.about .flcell .fright .about_bnr { display: flex; align-items: center; width: 100%; border: 1px solid #C7C7C7;}
.about .flcell .fright .about_bnr img { width: 37%;}
.about .flcell .fright .about_bnr p { width: 63%; padding: 1vw 2vw; font-size: 120%; line-height: 1.35; font-weight: bold; margin: 0; color: #000;}
.about .about01 { display: flex; justify-content: flex-end; position: relative; margin-bottom: 29.7vw;}
.about .about01 .txtcell { width: 91.1%; background: #EFEFEF; padding: 4.5vw 10vw 12.8vw 6.8vw;}
.about .about01 .txtcell .ttl,
.about .about02 .txtcell .ttl,
.about .about03 .txtcell .ttl { display: flex; width: 100%; justify-content: space-between; align-items: center; margin-bottom: 3.0vw;}
.about .about01 .txtcell .ttl .ttl01,
.about .about02 .txtcell .ttl .ttl01,
.about .about03 .txtcell .ttl .ttl01 { position: relative; font-size: 120%; margin: 0;}
.about .about01 .txtcell .ttl .ttl01::after,
.about .about02 .txtcell .ttl .ttl01::after,
.about .about03 .txtcell .ttl .ttl01::after { display: block; position: absolute; content: ""; width: 127px; height: 1px; background: #707070; top: 50%; right: -140px; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%);}
.about .about01 .txtcell .ttl .num,
.about .about02 .txtcell .ttl .num,
.about .about03 .txtcell .ttl .num { font-size: 600%; font-weight: normal; margin: 0; font-family: "futura-pt", sans-serif; margin: 0;}
.about .about01 .txtcell h2,
.about .about02 .txtcell h2,
.about .about03 .txtcell h2 { font-size: 150%; line-height: 2.1; margin: 0 0 4.0vw;}
.about .about01 .txtcell .txt,
.about .about02 .txtcell .txt,
.about .about03 .txtcell .txt { font-size: 110%; line-height: 1.85; margin: 0 0 0vw;}
.about .about01 img { z-index: 2; position: absolute; width: 60.5%; bottom: -34.9vw; right: 9.0vw;}
.about .about02 { display: flex; justify-content: flex-start; position: relative; margin-bottom: 0vw;}
.about .about02 .txtcell { width: 84.6%; background: #EFEFEF; padding: 14.5vw 36.5vw 22.4vw 5.2vw;}
.about .about02 img { z-index: 2; position: absolute; width: 40.3%; top: 15.4vw; right: 0.0vw;}
.about .about_img { display: block; position: relative; z-index: 5; width: 52.9%; margin: -7.5vw auto 8.7vw;}
.about .about03 { display: flex; justify-content: space-between; flex-direction: row-reverse; position: relative; margin-bottom: 14vw;}
.about .about03 img { z-index: 2; width: 39.7%;}
.about .about03 .txtcell { width: 60.3%; padding: 0vw 10vw 0vw 5.2vw;}

.concept {}
.concept .ttl { margin: 0 auto 14.0vw;}
.concept .ttl h2 { font-size: 280%; letter-spacing: 0.2rem; font-family: "futura-pt", sans-serif; font-weight: normal; text-align: center; margin: 0 auto;}
.concept .ttl p { font-size: 120%; letter-spacing: 0.2rem; text-align: center; margin: 0 auto;}
.concept .concept_cell { display: flex; position: relative; width: 100%; margin-bottom: 14.5vw;}
.concept .concept_cell:last-of-type { margin-bottom: 17.0vw;}
.concept .concept_cell.rev { justify-content: flex-end;}
.concept .concept_cell .fleft { background: #EFEFEF; padding: 6.5vw 7.0vw; width: 50vw;}
.concept .concept_cell.rev .fleft { padding: 6.5vw 8vw; width: 58.8vw;}
.concept .concept_cell .fleft h3 { position: relative; font-size: 170%; line-height: 1.54; font-weight: bold; margin-bottom: 3.125vw;}
.concept .concept_cell .fleft h3::before { display: block; position: absolute; content: ""; background: #A39773; width: 7px; height: 100%; left: -1.8vw; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%);}
.concept .concept_cell .fleft p { font-size: 110%; line-height: 1.83; margin-bottom: 0vw;}
.concept .concept_cell .fright { position: absolute; right: 4.0vw; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); width: 46vw;}
.concept .concept_cell.rev .fright { right: inherit; left: 5vw; width: 36.3vw;}

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

.movies_list { display: flex; flex-wrap: wrap;}
.movies_list .box { width: 47.3%; margin: 0 5.4% 3.75vw 0; background: #EFEFEF; padding: 1.48vw 1.48vw 0;}
.movies_list .box:nth-of-type(2n) { margin: 0 0% 3.75vw 0;}
.movies_list .box iframe { display: block; width: 100%; height: 16.5vw;}
.movies_list .box p { font-size: 120%; text-align: center; padding: 0.3vw 0 1vw;}

.recuit_img { display: block; width: 16.8vw; margin: 0 auto 1.56vw;}

.companylist { }
.companylist .flcell { display: flex; justify-content: flex-start; width: 100%; height: auto; margin: 0 auto; padding: 0 1.5vw; border-top: 1px dashed #9D9D9D; color: #000;}
.companylist .flcell:nth-last-of-type(1) { border-bottom: 1px dashed #9D9D9D;}
.companylist .flcell:nth-of-type(2n+1) { background: #FCFCFC}
.companylist .flcell .fleft { width: 18.3%; text-align: left; padding: 1.2vw 0vw;}
.companylist .flcell .fright { width: 81.7%; padding: 1.2vw 0vw; box-sizing: border-box; display: block;}
.companylist .flcell .fleft p,
.companylist .flcell .fright p { font-size: 110%; text-align: left;}
.companylist .flcell .fleft p { color: #A39673; font-weight: bold;}

.facilitybox { width: 59.4vw; height: auto; margin: 5vw auto; display: flex; justify-content: flex-start; flex-wrap: wrap;}
.facilitybox .main {width: 100%; height: 40vw; overflow: hidden; margin-bottom: 1vw;}
.facilitybox .cell {width: 23.3%; height: 9.7vw; margin: 0 2.26% 1vw 0;  overflow: hidden; margin-bottom: 1vw; background: #efefef;}
.facilitybox .cell:nth-of-type(4n) { margin: 0 0% 1vw 0;}
.facilitybox .cell img { width:100%; height: 100%; object-fit:cover;}

.indexnews { display: flex; justify-content: flex-start; width: 100%; background: #fff; padding: 1.5vw 0;}
.indexnews .ttl { width: 21.6%; display: flex; align-items: center; padding-left: 2%;}
.indexnews .ttl p { font-size: 200%; color: #000;}
.indexnews .indexnewsCell { width: 78.4%; border-left: 1px solid #797373; padding: 0 2%;}
.indexnewsCell {display: block; width: 100%; padding: 0 1vw; box-sizing: border-box; overflow: hidden;}
.indexnewsCell .webgene-blog {width: 100%;}
.indexnewsCell .webgene-blog article {width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 0.5vw 0; border-bottom: dashed 1px #707070; }
.indexnewsCell .webgene-blog article:last-of-type { border-bottom: none;}
.indexnewsCell .webgene-blog article .date { width: 17%; font-size: 120%; color: #000000;}
.indexnewsCell .webgene-blog article .mainAnc { width: 83%;}
.indexnewsCell .webgene-blog article .mainAnc h2 { font-size: 120%; font-weight:normal;}

.productlist { display: flex; flex-wrap: wrap;}
.productlist a { display: flex; justify-content: space-between; align-items: center; width: 32.3%; margin: 0 1.55% 1.8vw 0; padding: 1.3vw 1.3vw; background: rgba(0,0,0,0.07);}
.productlist a:nth-of-type(3n) { margin: 0 0% 1.8vw 0;}
.productlist a .fleft { width: 33.8%;}
.productlist a .fright { width: 59%;}
.productlist a .fright p { text-align: left; font-size: 130%; color: #fff;}

.btnbox { display: flex; justify-content: space-around; align-items: center; width: max-content; margin-right: auto; margin-left: auto;}
.btnbox .btn { margin: 0 2vw!important; font-size: 130%;}
.largep { font-size: 140%;}
.tal {text-align: left;}
.t_bold { font-weight: bold;}

.bgsection {background: #fafafa; padding: 5vw;}
.bgsection .section {margin: 0 auto!important;}

.lead { font-size: 145%;}

.mincho {font-family: "tbudmincho-std", sans-serif !important; font-style: normal;}

.pagettl.large { position: relative; z-index: 10; display: flex; justify-content: center; align-items: center; width: 100%; height: 54.4vw; overflow: hidden;}
.pagettl.large .dotNavi { position: absolute; z-index: 3; width: max-content; height: .5vw; display: flex;justify-content: center; align-items: center;  bottom: 2vw; right: 0; left: 0; margin: 0 auto;}
.pagettl.large .dotNavi p,.pagettl.large .dotNavi a { display: block; width: 4vw; height: .5vw; margin-left: 1vw; background: rgba(255,255,255,.4); }
.pagettl.large .dotNavi .active { display: block!important; background: rgba(255,255,255,.95); }
.pagettl.large .bg { position: absolute; z-index: 1; width: 100%; height: 54.4vw; top: 0; overflow: hidden;}
.pagettl.large .bg img { width: 100%; height: 100%; overflow: hidden; object-fit: cover;}



.progress { background-color: #000; color: #fff; height: 100%; position: fixed; z-index: 100; top: 0; left: 0; width: 100%; z-index:100; display:flex; justify-content: center; align-items:center; flex-direction: column; }
.logoBg{ display: block; width: 20vw; height: 20vw; mask-image: url("https://first-unit.jp/system_panel/uploads/images/loadingmask.png") no-repeat center center; mask-size: 100% auto; -webkit-mask: url('https://first-unit.jp/system_panel/uploads/images/loadingmask.png') repeat center center / 100% 100%; overflow: hidden; margin-bottom:3vh; }
.progress_bar { background:#fff; position: absolute; bottom: 0; left: 0; right: 0; margin: auto; width: 100%; height: 1px;}
.progress_text { font-size: 1vw; margin-top: 10px; position: absolute; text-align: center; bottom: 2vh; width: 100%; }
.progress-complete .progress-bar { border-top-color: #fff; }
.progress .text * {margin: 0; padding: 0; height: 1.2em; line-height: 1;}
.title { overflow: hidden; transform: translate(-100%, 0); transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 1.5s; color: #fff; font-family: 'Josefin Sans', sans-serif; }
.title strong { font-weight: normal; display: block; transform: translate(100%, 0); transition: all cubic-bezier(0.215, 0.61, 0.355, 1) 1.5s; color: #000; }
.title.-visible,.title.-visible strong { transform: translate(0, 0); color: #fff; transition: all 1.5s; }
.sentence { overflow: hidden; transform: translate(-100%, 0); transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 1.5s; font-family: sans-serif; text-align: center; margin-top: 1vw!important; }
.sentence strong { display: block; transform: translate(100%, 0); transition: all cubic-bezier(0.215, 0.61, 0.355, 1) 1.5s; color: #000; font-size: 120%; }
.sentence.-visible,.sentence.-visible strong { transform: translate(0, 0); color: #fff; transition: all 1.5s; }


}

/* gjs-dashed */
.gjs-dashed .maincont { opacity: 1!important;}
.gjs-dashed .fright img { transform: scale(.7); }
.gjs-dashed * {padding: 10px!important;}
.gjs-dashed .index02 .txt_cell { left: 70%!important; width: 50%!important;}
.gjs-dashed .about .about01 { margin-bottom: 50vw;}
.gjs-dashed .about .about01 img {bottom: -38.9vw;}
.gjs-dashed .about .about02 { display: block; position: relative; margin-bottom: 0vw; height: 95vw;}
.gjs-dashed .about .about02 .txtcell {position: absolute; width: 60%; background: #EFEFEF; padding: 14.5vw 36.5vw 22.4vw 5.2vw;}
.gjs-dashed .about .about02 img { z-index: 2; position: absolute; width: 30%; top: 15.4vw; right: 0.0vw;}
.gjs-dashed .about .about_img { display: block; position: absolute; z-index: 5; width: 40.9%; margin: -34.5vw auto 8.7vw;}
.gjs-dashed .pagettl.large {height: max-content!important;}
.gjs-dashed .pagettl.large .bg {position: relative; height: max-content!important;}
.gjs-dashed .index05 .fleft { position: relative; z-index: 3; width: 45.6vw; height: max-content; overflow: hidden; top: 3vw; }
.gjs-dashed .wow { opacity: 1!important;}
.gjs-dashed .concept .concept_cell.rev .fleft {width: 50vw;}
.gjs-dashed .pagettl .txt { position: absolute; z-index: 2; width: 37.1vw; height: 6.6vw; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: #fff; background: #000; bottom: 0vw; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%);}

.about .about01 .img-03 { z-index: 2; width: 60.5%; position: static;}
.about .about02 .img-02 { z-index: 2; }
.about .about02 .img-01 { z-index: 2; position: static; width: 100%;}
.about .about03 .img-04 { width: 25%;}
.about .about03a { margin-bottom: 0vw;}


.progress.gjs-dashed {
z-index: 0;
}