@charset "UTF-8";

@media screen and (max-width: 999px) {
.imgL { width: 100%; height: 60vw; overflow: hidden; object-fit: cover; margin-left: auto; margin-right: auto; display: block;}
#headerMenu .sp {display:block;}
iframe { display:block; width:100%; height:60vw; border: none; margin: 0 auto;}
body {font-size:2.4vw; 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; width: 100%; margin: 0 auto; padding: 3vw 0vw 0 0vw;}
.header .main .logo { display: block; width: 10vw; margin-left: 3vw;-webkit-filter: drop-shadow(3px 3px 5px rgba(0,0,0,.3)); filter: drop-shadow(3px 3px 5px rgba(0,0,0,.3));}
.header #spMenu { display: flex; justify-content: center; align-items: center; width: 7.5vw; height: 7.5vw; transition: all 1s; padding: 0; align-items: center; margin: 0 2vw 0 0; z-index: 50;/* position: relative;*/ position: fixed; right: 2.3vw;}
.header #spMenu .menu-trigger { position: relative; width: 7.5vw; height: 7.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: #fff; font-size: 0.1em; }
.menu-trigger p { position: absolute; left: 0; width: 100%; height: 1px; background: #fff; font-size: 0.1em; box-shadow: 0px 0px 8px rgba(0,0,0,0.2);-webkit-filter: drop-shadow(3px 3px 5px rgba(0,0,0,.3)); filter: drop-shadow(3px 3px 5px rgba(0,0,0,.3)); }
.menu-trigger p:nth-of-type(1) { top: 0; }
.menu-trigger p:nth-of-type(2) { top: 3.1vw; }
.menu-trigger p:nth-of-type(3) { top: 6.3vw; }
.menu-trigger.active p:nth-of-type(1) { transform: translateY(1.2vw) rotate(-45deg); background: #fff; top: 2.1vw;}
.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: #fff; top: 4.3vw;}
.spnavi { display: block; position: fixed; top: 0; right: -55vw; z-index: 40; background: rgba(0,0,0,.8); width: 55vw; height: 100%; padding: 15vw 6vw 0; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; -webkit-transition: all 1s; transition: all 1s; }
.spnavi.active { right: 0;}
.spnavi .spnavi_menu { display: flex; flex-direction: column;}
.spnavi .spnavi_menu a { color: #fff; display: flex; flex-direction: column; padding: 0 0; margin-bottom: 4.3vw; letter-spacing: 0.05rem;}
.spnavi .spnavi_menu a:last-of-type { margin-bottom: 8vw;}
.spnavi .spnavi_menu a .txt_en { font-size: 130%; 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: 15.0vw; display: flex; flex-direction: column; width: 10vw;}
.h_sns a { margin-bottom: 3.0vw;}
.h_sns a:last-of-type { margin-bottom: 0vw;}
/*
.spnavi .h_sns { display: flex; justify-content: center; flex-wrap: wrap;}
.spnavi .h_sns a { margin: 0 2vw 3vw; width: 12vw;}
*/

.footer {opacity:1; display: block; margin: 0 auto; width: 100%; height: auto; padding: 5vw 0 5vw; background: #312C2C; color: #fff;}
.footer .flcell { width: 100%; height: auto; padding: 0 4vw; display: flex; justify-content: space-between; align-items: center; flex-direction: column;}
.footer .flcell .fleft { width: 100%; display: flex; align-items: center; margin-bottom: 5vw;}
.footer .flcell .fleft .f_logo { width: 20vw; margin-right: 8vw;}
.footer .flcell .fleft .f_menu { display: flex; justify-content: flex-start; flex-wrap: wrap;}
.footer .flcell .fleft .f_menu a { width: 45%; color: #fff; display: flex; flex-direction: column; padding: 0 0; margin: 2.5vw 5% 2.5vw 0; letter-spacing: 0.05rem;}
.footer .flcell .fleft .f_menu a .txt_en { font-size: 140%; 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: 100%; display: flex; justify-content: center;;}
.footer .flcell .fright a { width: 5vw; margin: 0 4vw;}

.kv { position: relative; z-index: 10; display: flex; justify-content: center; align-items: center; width: 100%; height: 96vw; overflow: hidden; margin-bottom: 10vw;}
.kv .dotNavi { position: absolute; z-index: 3; width: 36vw; height: 1vw; display: flex;justify-content: flex-end; align-items: center;  top: 6vw; right: 20vw;}
.kv .dotNavi p,.kv .dotNavi a { display: block; width: 7vw; height: 1vw; margin-left: 1vw; background: rgba(255,255,255,.3); }
.kv .dotNavi a.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: 27.5vw; left: 5vw; width: 80vw;}
.kv .txt h1 { font-size: 270%; font-weight: normal; letter-spacing: 0.1rem; margin-bottom: 0.3vw; font-family: 'Josefin Sans', sans-serif; font-weight: 500; line-height: 1.1; margin: 0;-webkit-filter: drop-shadow(3px 3px 5px rgba(0,0,0,.3)); filter: drop-shadow(3px 3px 5px rgba(0,0,0,.3));}
.kv .txt p { font-size: 100%; letter-spacing: 0.2rem; margin: 0;-webkit-filter: drop-shadow(3px 3px 5px rgba(0,0,0,.3)); filter: drop-shadow(3px 3px 5px rgba(0,0,0,.3));}
.kv .bg { position: absolute; z-index: 1; width: 100%; height: 70vw; top: 0;}
.kv .bg img { width: 100%; height: 100%; overflow: hidden;}
.kv .sub { z-index: 3; position: absolute; bottom: 5vw; left: auto; width: 86%; padding: 5.5vw; background: #A39673; color: #fff; box-sizing: border-box;}
.kv .sub .txt01 { font-size: 120%; line-height: 1.75; margin: 0 0 2.0vw;}
.kv .sub .txt02 { font-size: 80%; 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: 45vw; overflow: hidden; padding-bottom: 4vw; margin-bottom: 10vw;}
.pagettl .txt { position: absolute; z-index: 2; width: 70vw; height: 15vw; 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: 220%; font-weight: normal; letter-spacing: 0.4rem; margin-bottom: 0.3vw; font-family: "futura-pt", sans-serif; line-height: 1;}
.pagettl .txt p { font-size: 110%; letter-spacing: 0.3rem;}
.pagettl .subtxt { z-index: 3; position: absolute; right: 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.6vw 5.0vw 0.6vw 3vw; background: #000; color: #fff; font-size: 110% !important; letter-spacing: 0.1rem; 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: 200%; letter-spacing: 0.1rem; margin-bottom: .3vw; color: #000;}
.hbox h3 {font-size: 200%; 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% !important;}

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

.pagettl + .section {margin: 7vw auto 15vw;}
.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: 2vw!important;}
.mb3 {margin-bottom: 6vw!important;}
.mb5 {margin-bottom: 10vw!important;}
.mb7 {margin-bottom: 15vw!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: 48.5%; margin: 0 3% 5vw 0; border: none;}
.newslist .webgene-blog .flcell:nth-of-type(2n) {margin-right: 0;}
.newslist .webgene-blog .flcell .fleft { width: 100%;}
.newslist .webgene-blog .flcell .fleft a {display: block; width: 100%; height: 30vw; 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: 120%; 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: 80vw; 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: 130%; 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; flex-direction: column; margin: 0vw 0 0vw; padding: 0 3.5vw;}
.index01 .flcell .fleft { width: 100%; margin-bottom: 5vw;}
.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: 130%; line-height: 2.1; margin: 0 0 4.0vw; font-weight: bold;}
.index01 .flcell .fleft .txt { font-size: 100%; line-height: 1.35; margin: 0 0 6.0vw; color: #A39773; word-break: break-word;}
.index01 .flcell .fleft .btn { margin: 0 0 0 auto;}
.index01 .flcell .fright { width: 100%;}
.index01 .flcell .fright img { width: 100%; height: 80vw; object-fit: cover; object-position: bottom;}


.index02 { position: relative; display: flex; flex-direction: column; padding: 0 3.5vw; 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: 100%; order: 3;}
.index02 .img .img_tp { margin-bottom: 3vw;}
.index02 .txt_cell { width: 100%; padding: 6.4vw 6.4vw 6.4vw 6.4vw; background: #EFEFEF; order: 1;}
.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: 200%; margin-bottom: 0.5vw;}
.index02 .txt_cell .ttl p { font-size: 110%; margin-bottom: 0vw;}
.index02 .txt_cell h3 { font-size: 130%; line-height: 1.4; margin-bottom: 3.0vw;}
.index02 .txt_cell .txt { font-size: 100%; line-height: 1.83; margin-bottom: 0vw;}
.index02 .btn { margin: 5vw 5vw 5vw auto; order: 2;}

.index03 { position: relative; margin-bottom: 8.3vw; padding:4vw 0; height:50vw;}
.index03 img { width:auto; height: 100%; object-fit: cover;}
.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: 240%; 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: 120%; 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; flex-direction: column;}
.index04 .flcell .fleft { width: 100%; margin-bottom: 7vw;}
.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: 200%; margin-bottom: 0.5vw;}
.index04 .flcell .fleft .ttl p { font-size: 110%; margin-bottom: 0vw;}
.index04 .flcell .fleft h3 { font-size: 130%; 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: 100%;}
.index04 .flcell .fright img { width: 100%; height: 80vw; object-fit: cover; object-position: top;}

.index05 { position: relative; display: flex; flex-direction: column-reverse; padding: 0 3.5vw 0; margin-bottom: 14vw;}
.index05 .dotNavi { position: relative; width: 27vw; height: 1vw; display: flex;justify-content: flex-end; align-items: center;margin: 3vw auto;}
.index05 .dotNavi p,.index05 .dotNavi a { display: block; width: 7vw; height: 1vw; margin-left: 1vw; background: rgba(0,0,0,.3); }
.index05 .dotNavi p:first-child,.index05 .dotNavi a:first-child {margin-left: 0;}
.index05 .dotNavi a.active { display: block!important; background: rgba(0,0,0,.7); }
.index05 .fleft { position: relative; z-index: 3; width: 100%; height: 68vw; overflow: hidden;}
.index05 .fleft img { width: 100%; height: 100%; overflow: hidden; object-fit: cover;}
.index05 .fright { z-index: 2; width: 100%; padding: 5.0vw 0 5.5vw .0vw; background: #EFEFEF;}
.index05 .fright img { display: block; width: 30%; margin: 0 auto 4.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; flex-direction: column; padding: 0 3.5vw 0; margin-bottom: 11.5vw;}
.index06 .fleft { z-index: 3; width: 100%; margin-bottom: 7vw;}
.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: 250%; line-height: 1.2; margin-bottom: 2.0vw; font-family: "futura-pt", sans-serif; font-weight: normal;}
.index06 .fleft .ttl h3 { font-size: 120%; line-height: 1.4; margin-bottom: 0vw; font-weight: normal;}
.index06 .fleft .ttl .subttl { position: absolute; top: 4.0vw; right: 6vw; }
.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 3.4vw 7.5vw 3.4vw; }
.index06 .fleft .btn { margin: 0 0 0 3.4vw;}
.index06 .fright { position: relative; z-index: 2; width: 100%;}

.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: 90%;}
.form .formRow textarea {height: 10em;}
.form p {margin-bottom: 0; font-size: 120%;}
.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;}
label { font-size: 120%;}

.architecture { position: relative;}
.architecture .bg_txt { position: absolute; height: 100%; right: 0; top: -5vw; font-size: 1500%; 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; flex-direction: column-reverse; padding: 0 5vw 0; margin-bottom: 12.3vw;}
.architecture .flcell.architecture_top .fleft { width: 100%;}
.architecture .flcell.architecture_top .fright { width: 100%; margin-bottom: 5.5vw;}
.architecture .flcell.architecture_top .fright .ttl { margin-bottom: 5vw; position: relative; padding: 0 0 0 20px;}
.architecture .flcell.architecture_top .fright .ttl::before { display: block; position: absolute; content: ""; background: #A39773; width: 7px; height: 100%; left: 0; top: 0;}
.architecture .flcell.architecture_top .fright .ttl h2 { font-size: 200%; 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: 130%; line-height: 1.44; margin-bottom: 6vw;}
.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; height: 50vw;}
.architecture .architecture_cell img { height: 100%; object-fit: cover;}
.architecture .architecture_cell .txt { position: absolute; color: #fff; width: 72%; top: 50%; left: 6.7vw; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%);}
.architecture .architecture_cell .txt .txt01 { font-family: "futura-pt", sans-serif; font-size: 250%; 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: 120%; color: #fff; text-shadow: 0 3px 6px rgba(0,0,0,0.71);}
.architecture .architecture_list { display: flex; justify-content: center; flex-wrap: wrap; margin-bottom: 5vw;}
.architecture .architecture_list .box { width: 41%; margin: 0 4.5% 5.0vw;}
.architecture .architecture_list .box .icon { background: #fff; width: 36vw; height: 36vw; border: 1px solid #EDEBEB; border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 0 auto 3vw;}
.architecture .architecture_list .box .icon img { width: 15.0vw; margin-bottom: 2vw;}
.architecture .architecture_list .box .icon p { display: flex; height: 4.0vw; justify-content: center; align-items: center; text-align: center; font-size: 120%; 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: 100%;}

.beauty { position: relative;}
.beauty .bg_txt { position: absolute; height: 100%; right: 0; top: -5vw; font-size: 1500%; 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: 110%; 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 4.0vw; width: max-content; background: #A39673; color: #fff; font-size: 140%; line-height: 1.73; margin: 0; text-align: center;}

.under_newslist { background: #EFEFEF; padding: 8.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: 1500%; 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; flex-direction: column; padding: 0; margin: 0 auto 15vw; width: 80vw;}
.about .flcell .fleft { width: 100%; margin-bottom: 5vw;}
.about .flcell .fright { width: 100%; margin: 0 0% 0 0%;}
.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: 200%; 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: 110%; line-height: 1.35; font-weight: bold; margin: 0; color: #000;}
.about .about01 { display: flex; align-items: flex-end; flex-direction: column; position: relative; margin-bottom: 15vw;}
.about .about01 .txtcell { width: 100%; background: #EFEFEF; padding: 4.5vw 7vw 4.5vw 7vw;}
.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: 130%; line-height: 2.1; margin: 0 0 4.0vw;}
.about .about01 .txtcell .txt,
.about .about02 .txtcell .txt,
.about .about03 .txtcell .txt { font-size: 100%; line-height: 1.85; margin: 0 0 0vw;}
.about .about01 img { width: 100%;}
.about .about02 { display: flex; justify-content: flex-start; flex-direction: column; position: relative; margin-bottom: 0vw;}
.about .about02 .txtcell { width: 100%; background: #EFEFEF; padding: 4.5vw 7vw 4.5vw 7vw;}
.about .about02 img { width: 100%;}
.about .about_img { display: block; position: relative; z-index: 5; width: 80%; margin: 11.5vw auto 8.7vw;}
.about .about03 { display: flex; justify-content: space-between; flex-direction: column; position: relative; margin-bottom: 0vw;}
.about .about03 img { z-index: 2; width: 100%;}
.about .about03 .txtcell { width: 100%; padding: 4.5vw 7vw 4.5vw 7vw;}

.concept {}
.concept .ttl { margin: 0 auto 14.0vw;}
.concept .ttl h2 { font-size: 200%; letter-spacing: 0.2rem; font-family: "futura-pt", sans-serif; font-weight: normal; text-align: center; margin: 0 auto;}
.concept .ttl p { font-size: 110%; letter-spacing: 0.2rem; text-align: center; margin: 0 auto;}
.concept .concept_cell { display: flex; flex-direction: column; position: relative; width: 100%; margin-bottom: 14.5vw;}
.concept .concept_cell:last-of-type { margin-bottom: 17.0vw;}
.concept .concept_cell .fleft { background: #EFEFEF; padding: 6.5vw 7.0vw; width: 100%;}
.concept .concept_cell .fleft h3 { position: relative; font-size: 145%; line-height: 1.54; font-weight: bold; margin-bottom: 6vw; padding-left: 4vw;}
.concept .concept_cell .fleft h3::before { display: block; position: absolute; content: ""; background: #A39773; width: 7px; height: 100%; left: 0; 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 { width: 100%;}

.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: 100%; margin: 0 0% 6vw 0; background: #EFEFEF; padding: 3vw 3vw 0;}
.movies_list .box iframe { display: block; width: 100%; height: 45vw;}
.movies_list .box p { font-size: 120%; text-align: center; padding: 0.3vw 0 3vw;}

.recuit_img { display: block; width: 30vw; margin: 0 auto 3vw;}

.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: 25%; text-align: left; padding: 2.5vw 0vw;}
.companylist .flcell .fright { width: 75%; padding: 2.5vw 0vw; box-sizing: border-box; display: block;}
.companylist.sp_list .flcell .fleft { width: 30%;}
.companylist.sp_list .flcell .fright { width: 70%;}
.companylist .flcell .fleft p,
.companylist .flcell .fright p { font-size: 120%; 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;}

.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: 125%;}

.pagettl.large { height: 60vw;}
.pagettl.large .dotNavi { position: absolute; z-index: 3; width: max-content; height: 1vw; display: flex;justify-content: center; align-items: center;  bottom: 5vw; right: 0; left: 0; margin: 0 auto;}
.pagettl.large .dotNavi p,.pagettl.large .dotNavi a { display: block; width: 7vw; height: 1vw; margin-left: 1vw; background: rgba(255,255,255,.3); }
.pagettl.large .dotNavi .active { display: block!important; background: rgba(255,255,255,.7); }
.pagettl.large .bg { position: absolute; z-index: 1; width: 100%; height: 100%; top: 0;}
.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: 30vw; height: 30vw; 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: 4vw; 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.2s; color: #fff; font-family: 'Josefin Sans', sans-serif; font-size: 100%; height: 1.6em; }
.title strong { font-weight: normal; display: block; transform: translate(100%, 0); transition: all cubic-bezier(0.215, 0.61, 0.355, 1) 1.2s; color: #000; font-size: 115%;}
.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.2s; 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.2s; color: #000; font-size: 110%; font-weight: normal; }
.sentence.-visible,.sentence.-visible strong { transform: translate(0, 0); color: #fff; transition: all 1.5s; }

.about .about02 .img-02 { z-index: 2; position: static; width: 100%;}
.about .about01 .txtcell .ttl .num01, .about .about02 .txtcell .ttl .num01, .about .about03 .txtcell .ttl .num01 { font-size: 300%;}
.about .about03 .img-04 { width: 100%;}
.about .about01 .img-03 { width: 100%;}
  
}