@charset "UTF-8";

* {margin: 0; padding: 0;}
p { line-height: 1.6;}

.tal {text-align: left;}
.tac {text-align: center;}
.sm {font-size: 80%!important;}
.wow {opacity: 0;}

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; }

.pp a:link { text-decoration: none; color: #000;}
.pp a:visited { text-decoration: none; color: #000;}
.pp a:hover { text-decoration: none;}
.pp a:active { text-decoration: none; color: #000;}

img { width: 100%; height: 100%; object-fit: contain;}

.wow {opacity: 0; filter: blur(1.5rem); transition: all 1.5s;}
.wow.animated { filter: blur(0); transition: all 1.5s;}

.em {font-weight: bold; display: block; font-size: 110%;}
.bluetxt {color: #1D99D8;}

@media screen and (min-width: 1000px) {
.mb1 {margin-bottom: 1vw;}
.mb2 {margin-bottom: 2vw;}
.mb3 {margin-bottom: 3vw;}
.mb5 {margin-bottom: 5vw;}
.mb10 {margin-bottom: 10vw;}
.mt30 {margin-top: 40vw!important;}

.w50 { display: block; width: 50%; margin-left: auto; margin-right: auto;}
.w100 {width: 100%!important;}
body { background: #F8F8F8; padding: 0; margin: 0; font-family: sans-serif; font-size: .8vw; color: #2B2B2B; overflow-x: hidden;}


.loading {position: fixed; z-index: 20; width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; opacity: 1; background: #fff;}
.loading .img { width: 10vw; height: auto; filter: blur(1.5rem); opacity: 0; transition: all .6s;}
.loading.in .img {filter: blur(0); opacity: 1; transition: all .6s;}
.loading.out {opacity: 0; z-index: 1; transition: all .6s;}
.loading.out .img { filter: blur(1.5rem); transition: all .6s;}

.maincont {position: relative; z-index: 2; width: 100%; height: auto;overflow: hidden; opacity: 0; transition: all .5s; background: #F8F8F8;}
.maincont.on {height: auto;overflow: visible; opacity: 1; transition: all .5s;}

.header { position: fixed; top: 0; left: 0; z-index: 3; width: 100vw; height: 3vw; transition: all 1.5s; opacity: 0; background: rgba(0,0,0,.8); display: flex; justify-content: space-between; align-items: center;}
.header.on {top: 0vw; opacity: 1;}
.header .left { width: 50%; height: fit-content; text-align: left; margin-left: 2vw; box-sizing: border-box;}
.header .left img { display: block; width: 5vw; height: auto; padding: 0; margin: 0;}
.header .right { width: fit-content; height: fit-content; text-align: right; margin-right: 2vw; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center;}
.header .right a { display: block; margin-right: -1vw; opacity: 0; filter: blur(1.5rem); transition: all 1.5s;}
.header .right a.on { display: block; margin-right: 3vw; opacity: 1; filter: blur(0); transition: all 1.5s;}

.kv {position: relative; width: 100%; height: auto; aspect-ratio:1/.6; overflow: hidden; margin-bottom: 10vw;}
.kv .txt {position: absolute; z-index: 2; width: 100%; height: 100%; aspect-ratio:1/.6; margin: 0; display: flex; justify-content: center; align-items: center; flex-direction: column; }
.kv .txt h1 {font-family: "Hiragino Kaku Gothic ProN";font-weight: normal;font-size: 240%; margin-bottom: 1vw;letter-spacing: .9vw;text-align: center;color: #fff;-webkit-filter: drop-shadow(1px 1px 3px rgba(0,0,0,.9)); filter: drop-shadow(1px 1px 3px rgba(0,0,0,.9));}
.kv .txt p {font-family: "Hiragino Kaku Gothic ProN";font-weight: normal;font-size: 100%;letter-spacing: 1vw;text-align: center;color: #fff;-webkit-filter: drop-shadow(1px 1px 3px rgba(0,0,0,.9)); filter: drop-shadow(1px 1px 3px rgba(0,0,0,.9));}
.kv .bg {position: absolute; z-index: 1; width: 100%; height: auto; aspect-ratio:1/.6; overflow: hidden;}
.bg video { width: 100%; height: 100%; object-fit: cover;}

.cscrolldown{width:1px;height:60px;position:absolute;bottom:5vw;left:0;right:0;margin:0 auto;overflow:hidden;z-index:3; opacity: 1;}
.cscrolltxt{position:absolute;bottom:9vw;left:0;right:0;margin:0 auto;overflow:hidden;z-index:3; opacity: 0; font-size: .8vw; color: #fff; width:max-content;}
.cscrolltxt br {display: none;}
.cline{width:100%;height:100%;display:block;background:linear-gradient(to bottom,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 50%);background-position:0 -60px;background-size:100% 200%;animation:scrolldown 2.2s cubic-bezier(0.76,0,0.3,1) forwards infinite}
@keyframes scrolldown{0%{background-position:0 60px-abs}75%{background-position:0 0}100%{background-position:0 60px}}


a.btn { display: block; width: fit-content; height: auto; border: solid 1px rgba(0,0,0,.6); line-height: 0; border-radius: 4vw; padding: 1vw 3vw .8vw 3vw; text-align: center; color: #191919; font-size: 110%; transition: all .5s; background: rgba(255,255,255,.7);}
a.btn:hover { display: block; width: fit-content; height: auto; border: solid 1px rgba(0,0,0,.6); line-height: 0; border-radius: 4vw; padding: 1vw 3vw .8vw 3vw; text-align: center; color: #fff; font-size: 110%; background: rgba(0,0,0,.6); transition: all .5s;}




.index .section { display: block; position: relative;  width: 100%; height: auto; margin: 0 auto 10vw; background: #F8F8F8;}
.sub .section { display: block; position: relative;  width: 70%; height: auto; margin: 0 auto 10vw; background: #F8F8F8;}
.section .wrap { position: relative;}
.section .txt .h1txt p { display: block; background:linear-gradient(#fff 85%, transparent 0%); padding:0 1vw; width: fit-content; font-size: 800%; font-weight: bold; line-height: 1.2;}
.section .txt .h2txt {margin-bottom: 3vw;}
.section .txt .h2txt p { display: block; background:linear-gradient(#1D99D8 85%, transparent 0%); padding:0 1vw; margin-left: 2vw; width: fit-content; font-size: 170%; font-weight: normal; letter-spacing: .5em; line-height: 2; color: #fff;}
.section .txt .subtxt { display: block; width: 39.5vw; background: #fff; padding: 2vw 4vw; box-sizing: border-box; text-align: left;}
.section .txt .subtxt p {margin-bottom: 1vw;}
.section .txt .subtxt p:last-child{margin-bottom: 0;}
.section.sec1 {width: 100%; height: auto; }
.section.sec1 .btnbox { position: absolute; z-index: 2; top: 37vw; right: 7.3vw; width: 45.8vw; display: flex; justify-content: flex-end;}
.section.sec1 .btnbox .line { position: absolute; left: 2vw; top: 0; bottom: 0; background: #aaa; display: block; opacity: 0; margin: auto; height: 1px; width: 1px; transition: all 3s;}
.section.sec1 .btnbox .line.on { width: 70%; transition: all 1s; opacity: 1;}
.section.sec1 .txt { position: absolute; z-index: 2; top: 0; left: 7.3vw; width: fit-content;}
.section.sec1 .bg { position: absolute; z-index: 1; top: 0; right: 0; width: 64.5vw; overflow: hidden; aspect-ratio:1/.527;}
.section.sec1 .bg img  {width: 100%; height: 100%; object-fit: cover;}

.section .bg img {position: absolute; top: 0; left: 0; width: 100%; height: auto;}


.section.sec2 {width: 100%; height: auto; aspect-ratio:1/.6; }
.section.sec2 .wrap {width: 100%; height: auto; aspect-ratio:1/.6; display: flex; justify-content: center; align-items: center; }
.section.sec2 .txt { position: relative; z-index: 2; top: 0; left: 0; width: 100%; height: fit-content; padding: 4vw 0; box-sizing: border-box; margin: auto; text-align: center;}
.section.sec2 .txt h2 { font-size: 800%; color: #fff; margin-bottom: 1vw;}
.section.sec2 .txt h2 span { color: #1D99D8;}
.section.sec2 .txt h3 { font-size: 190%; color: #fff; margin-bottom: 8vw; font-weight: normal;}
.section.sec2 .txt .servicebox { position: relative; display: flex; justify-content: space-between; align-items: center; width: 90%; margin: 0 5%;}
.section.sec2 .txt .servicebox .cell { display: block; width: 33%; background: rgba(0,0,0,.7); color: #fff; padding: 3vw 2vw; box-sizing: border-box;backdrop-filter: blur(6px);}
.section.sec2 .txt .servicebox .cell .ttl { width: 100%; display: flex; justify-content: flex-start; align-items: center; margin-bottom: 1vw;}
.section.sec2 .txt .servicebox .cell .ttl .num { font-size: 400%; font-weight: bold; color: #1D99D8; }
.section.sec2 .txt .servicebox .cell .ttl h4 { font-size: 200%; margin-left: 1vw;}
.section.sec2 .txt .servicebox .cell .sub { text-align: left;}
.section.sec2 .txt .btnbox { display: flex; justify-content: center; align-items: center; margin: 4vw auto 0;}
.section.sec2 .bg { position: absolute; z-index: 1; top: 0; right: 0; width: 100%; height: auto; aspect-ratio:1/.6; background: #000;}
.section.sec2 .bg video {opacity: .5;}

.section.sec3 {width: 100%; height: auto; }
.section.sec3 .txt { position: absolute; z-index: 2; top: 5vw; left: 7.3vw; width: fit-content;}
.section.sec3 .btnbox { position: absolute; z-index: 2; top: 50vw;  width: 39.5vw; height: 25vw; display: block;}
.section.sec3 .btnbox .line { position: absolute; left: 0; top: 0; right: 0; background: #aaa; display: block; opacity: 0; margin: auto; height: 1px; width: 1px; transition: all 3s;}
.section.sec3 .btnbox .line.on { height: 20vw; transition: all 1s; opacity: 1;}
.section.sec3 .btnbox a { display: block; position: absolute; left: 0; right: 0; bottom: 0; margin: auto;}
.section.sec3 .bg { position: absolute; z-index: 1; top: 0; right: 7.3vw; width: 49.4vw; aspect-ratio:1/1.778; overflow: hidden;}
.section.sec3 .bg img  {width: 100%; height: 100%; object-fit: cover;}



.map {display: block; width: 100%!important; height: 30vw!important; border: none;}

.pagettl {position: relative; width: 100%; height: 100vh; display: flex; justify-content: flex-start; align-items: flex-end;}
.pagettl h1 { position: relative; font-size: 1000%; font-weight: 700; display: block; margin: 0 0 0 5vw; opacity: 0;}
.pagettl h1 span { display: inline-block; opacity: 0; position: relative; top: -60px;}

.hbox { width: 100%; height: auto; display: block; text-align: center;}
.hbox h2 { font-size: 200%; font-weight: 700; display: block; margin: 0 auto; letter-spacing: .2em; text-indent: -.2em;}

.txtlist { border-top: dotted 1px rgba(0,0,0,.7);}
.txtlist .flcell { display: flex; justify-content: flex-start; width: 100%; border-bottom: dotted 1px rgba(0,0,0,.7);}
.txtlist .flcell .fleft { width: 20%; text-align: left; padding: 1vw; box-sizing: border-box;}
.txtlist .flcell .fright { width: 80%; text-align: left; padding: 1vw; box-sizing: border-box;}

.headimage {position: relative; width: 95%; height: auto; aspect-ratio:1/.4; overflow: hidden; margin-bottom: 10vw;}
.headimage img {position: absolute; top: 0; left: 0; width: 100%; height: auto;}
.headimage { margin-left: 5vw;}

.sub .btnbox {margin-left: auto;margin-right: auto; text-align: center;}
.sub .btnbox .btn {margin-left: auto;margin-right: auto;}


/*form*/
.form .formRow input[type="text"],.form .formRow input[type="email"],button,textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; border: none; border-radius: 0; font: inherit; outline: none; border:solid 1px #ccc;}
.form {width: 100%; margin: 0 auto;}
.form .formRow { display: flex; justify-content: flex-start; align-items: center; margin: 0 0 2vw; padding: 0; text-align: left;}
.form .formRow .formTh {width: 20%; display: flex;justify-content: flex-start; align-items: center;}
.form .formRow .formTd {width: 80%;}
.form .formRow input[type="text"],.form .formRow input[type="email"],.form .formRow select,.form .formRow textarea {width: 90%; background: #fff;}
.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 .formRow input[type="text"],
.form .formRow input[type="email"],
.form .formRow textarea { padding: 0.5vw 2vw; border-radius: 20px; }
.form #submit {opacity: 1; 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; background: #000;}
.formTd .d-inline-block {display:block!important;}
.formTd .d-inline-block input { margin-right: .4vw;}

.requiredText {color:red; padding-left:.3vw;}
/*form*/


.sub .servicecell .section {width: 85.7vw;}
.sub .servicecell .section .duocell { position: relative; width: 100%; display: flex; justify-content: space-between; align-items: flex-start; }
.sub .servicecell:nth-of-type(even) .section .duocell  {flex-direction: row-reverse;}
.sub .servicecell .section .duocell .txt { width: 60%;}
.sub .servicecell .section .duocell .txt .servicettl { width: 100%; display: flex; justify-content: flex-start; align-items: center; margin-bottom: 3vw;}
.sub .servicecell .section .duocell .txt .servicettl .num { width: 15%;}
.sub .servicecell .section .duocell .txt .servicettl .num p {font-size: 700%; line-height: 1; font-weight: bold;}
.sub .servicecell .section .duocell .txt .servicettl .ttl { width: 81%; margin-left: 1%;}
.sub .servicecell .section .duocell .txt .servicettl .ttl h2 {font-size: 400%;}
.sub .servicecell .section .duocell .txt .servicettl .ttl p { font-size: 160%;}
.sub .servicecell .section .duocell .txt .txtbox {padding-top: 4vw; text-align: left; padding-left: 3vw;}
.sub .servicecell .section .duocell .txt  .txtbox p {display: block; position: relative; padding-left: 1.5vw; margin-bottom: 2vw; font-size: 110%;}
.sub .servicecell .section .duocell .txt  .txtbox p:before { display: block; content:""; width: .3vw; height: 100%; position: absolute; left: 0; top: 0; background: #1D99D8}
.sub .servicecell .section .duocell .img { position: relative; width: 35%; height: auto; aspect-ratio:1/1.36; overflow: hidden; }
.sub .servicecell .section .duocell .img img {position: absolute; top: 0; left: 0; width: 100%; height: auto;}

.sub .phbox {width: 100%; display: block;}
.sub .phbox .cell { width: 100%; margin-bottom: 2vw; background: #fafafa; padding: 3vw; box-sizing: border-box; display: flex;justify-content: flex-start; align-items: center; -webkit-filter: drop-shadow(3px 3px 5px rgba(0,0,0,.1)); filter: drop-shadow(3px 3px 5px rgba(0,0,0,.1)); border-radius: .5vw;}
.sub .phbox .cell:nth-last-of-type(1) {margin-bottom: 0;}
.sub .phbox .cell .img { width: 10%; height: auto; margin-right: 6%;}
.sub .phbox .cell .txt { flex:1; text-align: left;}

.sub .phbox2 {width: 100%; display: block;display: flex;justify-content: flex-start; flex-wrap: wrap; gap: 0vw 2vw; }
.sub .phbox2 p { width: 43%; padding: 0; text-align: left; box-sizing: border-box;}


.footer { width: 100%; height: auto; color: #fff; background: #191919; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; padding: 3vw 3vw 0; box-sizing: border-box;}
.footer .left { width: 35%; text-align: left;}
.footer .left .logo { display: block; width: fit-content; height: 2vw; padding: 0; margin: 0 0 1vw; }
.footer .right {width: 65%;}
.footer .right .navi{ width: fit-content; height: fit-content; text-align: right; margin: 0 0 2vw auto; box-sizing: border-box; display: flex; justify-content: flex-end; align-items: center;}
.footer .right .navi a {display: block; margin-right: 2.5vw; font-size: 100%; padding:.4vw 2vw; border:solid 1px rgba(255,255,255,.2); text-align: center; line-height: 1.5vw;}
.footer .right .navi a:last-child {margin-right: 0;}
.footer .right .navi a:hover {background: #1D99D8;}
.footer .right .sns {width: fit-content; margin: 0 0 2vw auto; display: flex; justify-content: space-between;}
.footer .right .sns a { display: block; width: 1.5vw; height: 1.5vw; margin-left: 2vw;}

.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;}
.cp {display: block; width: 100%; padding: .3vw 0; text-align: center; color: #fff; font-size: 90%; background: #191919;}
}
















@media screen and (max-width: 999px) {
.mb1 {margin-bottom: 2vw;}
.mb2 {margin-bottom: 4vw;}
.mb3 {margin-bottom: 6vw;}
.mb5 {margin-bottom: 10vw;}
.mb10 {margin-bottom: 20vw;}
.mt30 {margin-top: 40vw!important;}

.w50 { display: block; width: 50%; margin-left: auto; margin-right: auto;}
.w100 {width: 100%!important;}
body { background: #F8F8F8; padding: 0; margin: 0; font-family: sans-serif; font-size: 2.2vw; color: #2B2B2B; overflow-x: hidden;}


.loading {position: fixed; z-index: 20; width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; opacity: 1; background: #fff;}
.loading .img { width: 40vw; height: auto; filter: blur(1.5rem); opacity: 0; transition: all .6s;}
.loading.in .img {filter: blur(0); opacity: 1; transition: all .6s;}
.loading.out {opacity: 0; z-index: 1; transition: all .6s;}
.loading.out .img { filter: blur(1.5rem); transition: all .6s;}

.maincont {position: relative; z-index: 2; width: 100%; height: auto;overflow: hidden; opacity: 0; transition: all .5s; background: #F8F8F8;}
.maincont.on {height: auto;overflow: visible; opacity: 1; transition: all .5s;}

.header { position: fixed; top: 0; left: 0; z-index: 3; width: 100vw; height: 10vw; transition: all 1.5s; opacity: 0; background: rgba(0,0,0,.8); display: flex; justify-content: space-between; align-items: center;}
.header.on {top: 0vw; opacity: 1;}
.header .left { width: fit-content; height: fit-content; text-align: left; margin-left: 2vw; box-sizing: border-box;}
.header .left img { display: block; width: auto; height: 5vw; padding: 0; margin: 0;}
.header .right { width: fit-content; height: fit-content; text-align: right; margin-right: 4vw; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center;}
.header .right a { display: block; margin-right: -1vw; opacity: 0; filter: blur(1.5rem); transition: all 1.5s; font-size: 115%;}
.header .right a.on { display: block; margin-right: 4vw; opacity: 1; filter: blur(0); transition: all 1.5s;}
.header .right a.on:last-child {margin-right: 0;}

.kv {position: relative; width: 100%; height: auto; aspect-ratio:1/1.6; overflow: hidden; margin-bottom: 10vw;}
.kv .txt {position: absolute; z-index: 2; width: 100%; height: 100%; aspect-ratio:1/1.6; margin: 0; display: flex; justify-content: center; align-items: center; flex-direction: column; }
.kv .txt h1 {font-family: "Hiragino Kaku Gothic ProN";font-weight: normal;font-size: 230%; margin-bottom: 1vw;letter-spacing: .9vw;text-align: center;color: #fff;-webkit-filter: drop-shadow(1px 1px 3px rgba(0,0,0,.9)); filter: drop-shadow(1px 1px 3px rgba(0,0,0,.9));}
.kv .txt p {font-family: "Hiragino Kaku Gothic ProN";font-weight: normal;font-size: 100%;letter-spacing: 1vw;text-align: center;color: #fff;-webkit-filter: drop-shadow(1px 1px 3px rgba(0,0,0,.9)); filter: drop-shadow(1px 1px 3px rgba(0,0,0,.9));}
.kv .bg {position: absolute; z-index: 1; width: 100%; height: auto; aspect-ratio:1/1.6; overflow: hidden;}
.bg video { width: 100%; height: 100%; object-fit: cover;}

.cscrolldown{width:1px;height:40px;position:absolute;bottom:0;left:0;right:0;margin:0 auto;overflow:hidden;z-index:3; opacity: 1;}
.cscrolltxt{position:absolute;bottom:13vw;left:0;right:0;margin:0 auto;overflow:hidden;z-index:3; opacity: 1; font-size: 70%; color: #fff; width:max-content;}
.cline{width:100%;height:100%;display:block;background:linear-gradient(to bottom,rgba(255,255,255,.6) 50%,rgba(255,255,255,0) 50%);background-position:0 -40px;background-size:100% 200%;animation:scrolldown 2.2s cubic-bezier(0.76,0,0.3,1) forwards infinite}
@keyframes scrolldown{0%{background-position:0 40px-abs}75%{background-position:0 0}100%{background-position:0 40px}}


a.btn { display: block; width: fit-content; height: auto; border: solid 1px rgba(0,0,0,.6); line-height: 0; border-radius: 4vw; padding: 2vw 3vw; text-align: center; color: #191919; font-size: 110%; transition: all .5s; background: rgba(255,255,255,.7);}
a.btn:hover { display: block; width: fit-content; height: auto; border: solid 1px rgba(0,0,0,.6); line-height: 0; border-radius: 4vw; padding: 2vw 3vw; text-align: center; color: #fff; font-size: 110%; background: rgba(0,0,0,.6); transition: all .5s;}




.index .section { display: block; position: relative;  width: 100%; height: auto; margin: 0 auto 20vw; background: #F8F8F8;}
.sub .section { display: block; position: relative;  width: 90%; height: auto; margin: 0 auto 20vw; background: #F8F8F8;}
.section .wrap { position: relative;}
.section .txt .h1txt p { display: block; background:linear-gradient(#fff 85%, transparent 0%); padding:0 1vw; width: fit-content; font-size: 400%; font-weight: bold; line-height: 1.2;}
.section .txt .h2txt {margin-bottom: 3vw;}
.section .txt .h2txt p { display: block; background:linear-gradient(#1D99D8 85%, transparent 0%); padding:0 1vw; margin-left: 2vw; width: fit-content; font-size: 160%; font-weight: normal; letter-spacing: .4em; line-height: 2; color: #fff;}
.section .txt .subtxt { display: block; width: 90vw; background: #fff; padding: 4vw; box-sizing: border-box; text-align: left;}
.section .txt .subtxt p {margin-bottom: 1vw;}
.section .txt .subtxt p:last-child{margin-bottom: 0;}
.section.sec1 {width: 100%; height: auto; }
.section.sec1 .btnbox { position: absolute; z-index: 2; top: 95vw; right: 7.3vw; width: 95vw; display: flex; justify-content: flex-end;}
.section.sec1 .btnbox .line { position: absolute; left: 2vw; top: 0; bottom: 0; background: #aaa; display: block; opacity: 0; margin: auto; height: 1px; width: 1px; transition: all 3s;}
.section.sec1 .btnbox .line.on { width: 70%; transition: all 1s; opacity: 1;}
.section.sec1 .txt { position: absolute; z-index: 2; top: 3vw; left: 2vw; width: fit-content;}
.section.sec1 .bg { position: absolute; z-index: 1; top: 0; right: 0; width: 84.5vw; overflow: hidden; aspect-ratio:1/.527;}
.section.sec1 .bg img  {width: 100%; height: 100%; object-fit: cover;}

.section .bg img {position: absolute; top: 0; left: 0; width: 100%; height: auto;}


.section.sec2 {width: 100%; height: auto; aspect-ratio:1/1.5; }
.section.sec2 .wrap {width: 100%; height: auto; aspect-ratio:1/1.5; display: flex; justify-content: center; align-items: center; }
.section.sec2 .txt { position: relative; z-index: 2; top: 0; left: 0; width: 100%; height: fit-content; padding: 4vw 0; box-sizing: border-box; margin: auto; text-align: center;}
.section.sec2 .txt h2 { font-size: 400%; color: #fff; margin-bottom: 1vw;}
.section.sec2 .txt h2 span { color: #1D99D8;}
.section.sec2 .txt h3 { font-size: 160%; color: #fff; margin-bottom: 8vw; font-weight: normal;}
.section.sec2 .txt .servicebox { position: relative; display: block; width: 90%; margin: 0 5%;}
.section.sec2 .txt .servicebox .cell { display: block; width: 100%; background: rgba(0,0,0,.7); color: #fff; margin-bottom: 3vw; padding: 3vw 2vw; box-sizing: border-box;backdrop-filter: blur(6px);}
.section.sec2 .txt .servicebox .cell .ttl { width: 100%; display: flex; justify-content: flex-start; align-items: center; margin-bottom: 2vw;}
.section.sec2 .txt .servicebox .cell .ttl .num { font-size: 290%; font-weight: bold; color: #1D99D8; }
.section.sec2 .txt .servicebox .cell .ttl h4 { font-size: 200%; margin-left: 3vw;}
.section.sec2 .txt .servicebox .cell .sub { text-align: left;}
.section.sec2 .txt .btnbox { display: flex; justify-content: center; align-items: center; margin: 4vw auto 0;}
.section.sec2 .bg { position: absolute; z-index: 1; top: 0; right: 0; width: 100%; height: auto; aspect-ratio:1/1.5; background: #000;}
.section.sec2 .bg video {opacity: .5;}

.section.sec3 {width: 100%; height: auto; aspect-ratio:1/1.5; }
.section.sec3 .txt { position: absolute; z-index: 2; top: -7vw; left: 3vw; width: fit-content;}
.section.sec3 .txt .subtxt {width: 50vw; padding: 5vw;}
.section.sec3 .txt .subtxt p {margin-bottom: 3vw;}
.section.sec3 .txt .subtxt p:last-child {margin-bottom: 0;}
.section.sec3 .btnbox { z-index: 2; width: 100vw; height: 21vw; display: block; margin-top: 2vw;}
.section.sec3 .btnbox .line { position: relative; left: 0; top: 0; right: 0; background: #aaa; display: block; opacity: 0; margin: auto; height: 1px; width: 1px; transition: all 3s;}
.section.sec3 .btnbox .line.on { height: 12vw; transition: all 1s; opacity: 1;}
.section.sec3 .btnbox a { display: block; position: absolute; left: 0; right: 0; bottom: 0; margin: auto;}
.section.sec3 .bg { position: absolute; z-index: 1; top: 0; right: 0; width: 55vw; aspect-ratio:1/1.778; overflow: hidden;}
.section.sec3 .bg img  {width: 100%; height: 100%; object-fit: cover;}



.map {display: block; width: 100%!important; height: 60vw!important; border: none;}

.pagettl {position: relative; width: 100%; height: 70vh; display: flex; justify-content: flex-start; align-items: flex-end;}
.pagettl h1 { position: relative; font-size: 800%; font-weight: 700; display: block; margin: 0 0 0 5vw; opacity: 0;}
.pagettl h1 span { display: inline-block; opacity: 0; position: relative; top: -60px;}

.hbox { width: 100%; height: auto; display: block; text-align: center;}
.hbox h2 { font-size: 200%; font-weight: 700; display: block; margin: 0 auto; letter-spacing: .2em; text-indent: -.2em;}

.txtlist { border-top: dotted 1px rgba(0,0,0,.7);}
.txtlist .flcell { display: flex; justify-content: flex-start; width: 100%; border-bottom: dotted 1px rgba(0,0,0,.7);}
.txtlist .flcell .fleft { width: 20%; text-align: left; padding: 3vw 0; box-sizing: border-box;}
.txtlist .flcell .fright { width: 80%; text-align: left; padding: 3vw 0; box-sizing: border-box;}
.txtlist .flcell .fright a {color: #000;}

.headimage {position: relative; width: 95%; height: auto; aspect-ratio:1/.6; overflow: hidden; margin-bottom: 10vw;}
.headimage img {position: absolute; top: 0; left: 0; width: 100%; height: auto;}
.headimage { margin-left: 5vw;}

.sub .btnbox {margin-left: auto;margin-right: auto; text-align: center;}
.sub .btnbox .btn {margin-left: auto;margin-right: auto;}


/*form*/
.form .formRow input[type="text"],.form .formRow input[type="email"],button,textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; border: none; border-radius: 0; font: inherit; outline: none; border:solid 1px #ccc;}
.form {width: 100%; margin: 0 auto;}
.form .formRow { display: block; margin: 0 0 5vw; padding: 0; text-align: left;}
.form .formRow .formTh {width: 100%; display: flex;justify-content: flex-start; align-items: center;}
.form .formRow .formTd {width: 100%;}
.form .formRow input[type="text"],.form .formRow input[type="email"],.form .formRow select,.form .formRow textarea {width: 90%; background: #fff; padding: 2vw;}
.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 .formRow input[type="text"],
.form .formRow input[type="email"],
.form .formRow textarea { padding: 2vw; border-radius: 20px; }
.form #submit {opacity: 1; 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; background: #000;}
.formTd .d-inline-block {display:block!important;}
.formTd .d-inline-block input { margin-right: .4vw;}

.requiredText {color:red; padding-left:.3vw;}
/*form*/


.sub .servicecell .section {width: 96%; margin-right: auto; margin-left: auto;}
.sub .servicecell .section .duocell { position: relative; width: 100%; display: block; }
.sub .servicecell .section .duocell .txt { width: 100%;}
.sub .servicecell .section .duocell .txt .servicettl { width: 100%; display: flex; justify-content: flex-start; align-items: center; margin-bottom: 3vw;}
.sub .servicecell .section .duocell .txt .servicettl .num { width: 15%;}
.sub .servicecell .section .duocell .txt .servicettl .num p {font-size: 540%; line-height: 1; font-weight: bold;}
.sub .servicecell .section .duocell .txt .servicettl .ttl { width: fit-content; margin-left: 3%;}
.sub .servicecell .section .duocell .txt .servicettl .ttl h2 {font-size: 250%;}
.sub .servicecell .section .duocell .txt .servicettl .ttl p { font-size: 120%;}
.sub .servicecell .section .duocell .txt .txtbox {padding-top: 4vw; text-align: left; padding-left: 3vw;}
.sub .servicecell .section .duocell .txt  .txtbox p {display: block; position: relative; padding-left: 1.5vw; margin-bottom: 8vw; font-size: 120%;}
.sub .servicecell .section .duocell .txt  .txtbox p:before { display: block; content:""; width: .3vw; height: 100%; position: absolute; left: 0; top: 0; background: #1D99D8}
.sub .servicecell .section .duocell .img { position: relative; width: 100%; height: auto; aspect-ratio:1/1; overflow: hidden; }
.sub .servicecell .section .duocell .img img {position: absolute; top: 0; left: 0; width: 100%; height: auto;}

.sub .phbox {width: 100%; display: block;}
.sub .phbox .cell { width: 100%; margin-bottom: 2vw; background: #fafafa; border: dotted 1px rgba(0,0,0,.3) #444; padding: 6vw; box-sizing: border-box; display: flex;justify-content: flex-start; align-items: center; flex-direction: column; -webkit-filter: drop-shadow(3px 3px 5px rgba(0,0,0,.1)); filter: drop-shadow(3px 3px 5px rgba(0,0,0,.1)); border-radius: .5vw;}
.sub .phbox .cell:nth-last-of-type(1) {margin-bottom: 0;}
.sub .phbox .cell .img { width: 27%; height: auto; margin-bottom: 7%;}
.sub .phbox .cell .txt { flex:1; text-align: left;}

.sub .phbox2 {width: 100%; display: block;display: flex;justify-content: flex-start; flex-wrap: wrap; gap: 0vw 2vw; }
.sub .phbox2 p { width: 100%; padding: 0; text-align: left; box-sizing: border-box;}

.footer { width: 100%; height: auto; color: #fff; background: #191919; display: block; padding: 5vw; box-sizing: border-box;}
.footer .left { width: 100%; text-align: left; margin-bottom: 5vw;}
.footer .left .logo { display: block; width: fit-content; height: 6vw; padding: 0; margin: 0 0 5vw; }
.footer .right {width: 100%;}
.footer .right .navi{ margin: 0 auto 5vw; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center;}
.footer .right .navi a {display: block; margin-right: 2.5vw; font-size: 100%; padding:1vw 2vw; border:solid 1px rgba(255,255,255,.2); text-align: center;}
.footer .right .navi a:last-child {margin-right: 0;}
.footer .right .sns {width: fit-content; margin: 0 auto 3vw; display: flex; justify-content: center;}
.footer .right .sns a { display: block; width: 4.5vw; height: 4.5vw; margin: 0 3vw;}

.pp { display: block;width: 100%;height: 50vw; margin: 2vw auto; overflow: scroll; border: solid 1px #fafafa;padding: 1vw; box-sizing: border-box; text-align: left;}
.cp {display: block; width: 100%; padding: .3vw 0; text-align: center; color: #fff; font-size: 90%; background: #191919;}
}