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

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

* { color: #000;}
* {font-family:sans-serif;font-weight: 400;font-style: normal;}

.wow {opacity: 0;}

.formTd .d-inline-block {display:block!important;}
.formTd .d-inline-block input { margin-right: .4vw;}
.requiredText {color:red; padding-left:.3vw;}

.maincont {position: relative; z-index: 3; opacity: 0; transition: all .6s;}
.maincont.on {opacity: 1; transition all .5s;}


iframe {width: 100%; height: 30vw; border: none;}


@media screen and (min-width: 1000px) {
body { background: #fff; font-size: 1vw; line-height: 1.6;}
.header { opacity: 0; transition all .5s; position: fixed; top: 1vw; left: 5%; z-index: 20; width: 91.7%; height: auto; background: #fff;-webkit-filter: drop-shadow(0px 0px 3px rgba(0,0,0,.3)); filter: drop-shadow(0px 0px 3px rgba(0,0,0,.3)); border-radius: 1vw; }
.header.on {opacity: 1; transition: all .6s;}
.header .inner { position: relative; width: 100%; height: 100%; display: flex; justify-content: space-between; align-items: center; padding: .5vw 2vw; box-sizing: border-box;}
.header .inner .logo {  margin: 0; display: block; width: 5vw; height: auto; }
.header .inner .gmenu {position: relative; display: flex; justify-content: space-between; align-items: center; width: 60%;}
.header .inner .gmenu a { display: block; font-family: serif; margin-right: 1vw;}
.header .inner .side_sns { display: block; width: 2vw; height: 2vw;}
.header .inner .side_sns img { display: block; width: 100%; height: 100%; object-fit: contain;}

.spnavi {display: none;}
#spMenu {display: none;}
.menu-trigger {display: none;}
  
.footer { position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; height: auto; aspect-ratio:1/.346; overflow: hidden; background: #280e3a;}
.footer .txt { position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; aspect-ratio:1/.346; display: flex; justify-content: center; align-items: center; flex-direction: column; box-sizing: border-box;}
.footer .txt h2 { color: #fff; font-size: 150%; text-align: center; margin-bottom: 2vw;}
.footer .txt p { color: #fff; text-align: center; margin-bottom: 2vw;}
.footer .bg { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: auto; aspect-ratio:1/.346; display: block;}
.footer .bg img {width: 100%; height: 100%; object-fit: cover; opacity: .3;}

.section { display: block; width: 66.3vw; margin: 0 auto; padding: 0 0 10vw; overflow: hidden;}
.section.wide { width: 91.7vw;}
.section.narrow { width: 51.7vw;}

.jukufont {font-family: "senobi-gothic", sans-serif;}
.genfont {font-family: "hot-gfkaishokk", sans-serif;}


.mb1 {margin-bottom: 1vw!important;}
.mb3 {margin-bottom: 3vw!important;}
.mb5 {margin-bottom: 5vw!important;}
.mb7 {margin-bottom: 7vw!important;}
.mb10 {margin-bottom: 10vw!important;}
.mt10 {margin-top: 10vw!important;}
.tac {text-align: center;}
.tal {text-align: left;}
.tar {text-align: right;}
.largep { font-size: 120%!important;}



.pagettl {position: relative; width: 100%; height: auto; aspect-ratio:1/.576; display: flex; justify-content: center; align-items: center; flex-direction: column; margin-bottom: 10vw;}
.pagettl h1 { position: relative; font-size: 300%; font-weight: 700; display: block; margin: 0 auto 1vw; letter-spacing: .2em; text-indent: -.2em;}
.pagettl p { position: relative; font-size: 100%; display: block; margin: 0 auto; }

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

.hbox.lined { display: flex; justify-content: flex-start; align-items: center; padding-bottom: .5vw; border-bottom: dotted 1px rgba(0,0,0,.7);}
.hbox.lined h2 { font-size: 180%; text-align: left; margin: 0; letter-spacing: 0; text-indent: 0;}
.hbox.lined .num {display: flex; justify-content: center; align-items: center; border-radius: 50%; background: #C766AD; padding: 1vw; width: 1.8em; height: 1.8em; margin-right: 1.5vw; font-size: 150%; }
.hbox.lined .num p {color: #fff;}
.hbox.lined .step {display: flex; justify-content: center; align-items: center; border-radius: 2vw; background: #C766AD; padding: 1vw; width: auto; height: 1.8em; margin-right: 1.5vw; font-size: 120%; }
.hbox.lined .step p {color: #fff;}

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

a.linkbtn{ background:#000; position:relative; display: block; width: max-content; height:auto; font-size:100%; margin-left: auto; margin-right: auto; cursor:pointer; transition:all .6s; outline:none; border-radius: 0; box-sizing: border-box; }
a.linkbtn p {position: relative; top: 0; left: 0; display: block; width: 100%; height: auto; text-align: center; font-size: 80%; color: #fff; transition:800ms ease all; padding:1vw 2vw; box-sizing:border-box;transition:all .6s;}
a.linkbtn:hover {background: #C766AD;transition:all .6s}
a.linkbtn:hover p {color: #fff; transition:all .6s}


.btnbox { width: 100%; display: flex; justify-content: center; align-items: center;}
.btnbox a { margin: 0 1vw;}

/*form*/
.contactTxt strong {color: red; font-weight: normal;}
.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 { margin: 0 0 2vw; padding: 0; text-align: left;}
.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: 0.4; position: relative; display: block; width: max-content; padding: 0.5vw 5.15vw 0.5vw 5.15vw; color: #fff; font-size: 130%; letter-spacing: 0.2rem; margin: 0 auto; text-align: center; border: none; background: #000;}
.form #submit.active {opacity: 1;}
.formTd .d-inline-block {display:block!important;}
.formTd .d-inline-block input { margin-right: .4vw;}
/*form*/

.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: 30%; text-align: left; padding: 1vw;}
.txtlist .flcell .fright { width: 70%; text-align: left; padding: 1vw;}


.duocell {display: flex; justify-content: flex-start; flex-wrap: wrap; width: 100%; margin-left: auto; margin-right: auto;}
.duocell .cell {position: relative; display: block; width: 49%; height: auto; overflow: hidden; margin: 0 2% 2vw 0;}
.duocell .cell:nth-of-type(2n) {margin-right: 0;}

.tricell {display: flex; justify-content: flex-start; flex-wrap: wrap; width: 100%; margin-left: auto; margin-right: auto;}
.tricell .cell {position: relative; display: block; width: 32%; height: auto; aspect-ratio:1/.656; overflow: hidden; margin: 0 2% 2vw 0;}
.tricell .cell:nth-of-type(3n) {margin-right: 0;}
.tricell .cell img {width: 100%; height: 100%; object-fit: cover; }

.pricetable .cell {background: #fff; border-radius: 2vw; overflow: hidden; aspect-ratio:0;}
.pricetable .cell:nth-last-of-type(1) .priceheader {background: #C766AD; color: #fff;}
.pricetable .cell:nth-last-of-type(2) .priceheader {background: #777; color: #fff;}
.pricetable .cell:nth-last-of-type(3) .priceheader {background: #66C793; color: #fff;}
.pricetable .cell .priceheader {color: #fff; padding: 1vw 0; text-align: center; margin: 0 auto; }
.pricetable .cell .priceheader h3 strong {font-size: 90%; color: #fff;}
.pricetable .cell .priceheader p {color: #fff;}
.pricetable .cell .priceheader + p {text-align: center; display: block; margin: 1vw auto;}


#galleryMain { position: fixed; z-index: -10; opacity: 0; top: 0; right: 0; width: 100%; height: 100vh; overflow: hidden; display: flex; justify-content: center; align-items: center; flex-direction: column; background: rgba(0,0,0,.8); transition: all .6s;}
#galleryMain.on { opacity: 1; z-index: 30;}
#galleryMain #img { width: 60%; max-height: 80vh; overflow: hidden; margin-top: 5vw; aspect-ratio:1/6.565;}
#galleryMain #img img { width: 100%; height: 100%; object-fit: cover; cursor: pointer;}
#galleryMain .close { width: auto; height: auto; margin: 2vw auto 0; color: #fff; }
#galleryMain .close p,#galleryMain .close:hover p { color: #fff; font-size: 90%; font-weight: normal; letter-spacing: .2em; text-indent: -.2em;}

.newslist .webgene-blog { border-top: dotted 1px rgba(0,0,0,.7);}
.newslist .webgene-blog .webgene-item .webgene-item-content a { width: 100%; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; padding: 1vw 0; border-bottom: dotted 1px rgba(0,0,0,.7);}
.newslist .webgene-blog .webgene-item .webgene-item-content a .date {width: 20%; margin-right: 5%; text-align: left;}
.newslist .webgene-blog .webgene-item .webgene-item-content a .txt { width: 75%; text-align: left;}

.calendar_takumi {display: table; width: 100%; border-top: dotted 1px rgba(0,0,0,.7); border-left: dotted 1px rgba(0,0,0,.7); border-right: dotted 1px rgba(0,0,0,.7); background: #fff;}
.calendar_takumi .timeraw { display: table-row;; width: 100%;}
.calendar_takumi .timeraw .cell:nth-of-type(1) {width: 20%;}
.calendar_takumi .timeraw .cell:nth-last-of-type(1) {border-right: none;}
.calendar_takumi .timeraw .cell {display: table-cell; width: 10%; box-sizing: border-box; text-align: center; border-right: dotted 1px rgba(0,0,0,.7);border-bottom: dotted 1px rgba(0,0,0,.7);}
.calendar_takumi .timeraw .cell p {display: block; padding: 1vw; box-sizing: border-box; width: 100%; height: 100%;}
.calendar_takumi .timeraw .cell .blue {color: blue;}
.calendar_takumi .timeraw .cell .red {color: red;}

.maincont.index {margin-bottom: 0;}
.maincont.index .indexsection {position: relative; width: 100%; height:100vh; padding-bottom: 100vh; overflow: hidden; background: #000; }
.maincont.index .indexsection.sec1 {z-index: 1;}
.maincont.index .indexsection.sec2 {z-index: 2;}
.maincont.index .indexsection.sec3 {z-index: 3;}
.maincont.index .indexsection .txt {position: absolute; z-index: 2; width: 100%;height: 100%; box-sizing:border-box; padding: 20vw 0 0 11.85vw;}
.maincont.index .indexsection .txt02 {padding: 20vw 11.85vw 0 11.85vw;}
.maincont.index .indexsection .txt .ttl { display: block; width: auto; height: 4vw; margin-bottom: 2vw;}
.maincont.index .indexsection .txt .ttl h1 { color: #fff;}
.maincont.index .indexsection .txt .ttl + p {color: #fff; display: block; width: 50%; line-height: 1.8;}
.maincont.index .indexsection .slide {position: absolute; z-index: 1; width: 100%;height: auto; aspect-ratio:1/.556; opacity: .5;}
.maincont.index .indexsection .slide img { width: 100%; height: auto; object-fit: cover; aspect-ratio:1/.556;}
.maincont.index .indexsection .btnbox {display:flex; justify-content: flex-start; margin-top: 4vw;}
.maincont.index .indexsection .btnbox a {display: block; width: 15vw; padding: .4vw 1vw; text-align: center; background: #fff; color: #333; margin-right: 1vw; line-height: 1.2;}
.maincont.index .indexsection .btnbox a p {color: #000; display: block; width: 100%; text-align: center;}
.maincont.index .indexsection .btnbox a p br {display: none;}
.header-line { height: 5px; width: 100%; background: #000; position: fixed; bottom: 0; z-index: 10;}
.header-line_inner { content: ""; bottom: 0; left: 0; height: 5px; width: 20px; background: #fff;}

}

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

.scroll-down{width:1px;height:150px;position:absolute;margin:0 auto;overflow:hidden;bottom:0;left:0;right:0}
.scroll-down p{display:block;width:1px;height:50px;background-color:black;position:absolute;top:0;left:50%;transform:translateX(-50%);animation:scrollAnimation 1.5s infinite ease-in-out}
@keyframes scrollAnimation{0%{top:0;opacity:1}100%{top:50px;opacity:0}}

table.pricetable { width: 100%; border: solid 1px #777; border-collapse: collapse; font-size: 70%;}
table.pricetable th {background: #C766AD; color: #fff; text-align: center; border: solid 1px #777; padding: .5vw; }
table.pricetable td {background: #fff; text-align: left; border: solid 1px #777; padding: .5vw; }

/* gjs-dashed */
.gjs-dashed * {padding: 15px!important;}
.gjs-dashed .wow {opacity: 1!important;}
.gjs-dashed .section { width: 100%; padding: 10px;}
.gjs-dashed .maincont { width: 90%!important; margin: 10px auto!important; opacity: 1!important;}
.gjs-dashed .spnavi { opacity: 1!important; z-index: 20!important;}
.gjs-dashed .spnavi a {filter: blur(0);}
.gjs-dashed .image-container {position: relative; z-index: 1;}
.gjs-dashed .image-container img {position: relative; display: block!important;opacity: 1!important;}
.gjs-dashed .hbox.lined .num {width: 20px; height: 20px;}
.gjs-dashed #progress {z-index: -100!important;}
.gjs-dashed .headerlogo,.gjs-dashed .headerlink,.gjs-dashed #spMenu,.gjs-dashed .link_howtoorder { opacity: 1!important;}
.gjs-dashed .maincont.index .indexsection {height: auto!important;}
.gjs-dashed .maincont.index .indexsection .txt {position: relative!important;}
.gjs-dashed .maincont.index .indexsection .slide {position: relative!important;height: auto!important;aspect-ratio:0;}
.gjs-dashed .spnavi {display: block; z-index: 100; opacity: 1;}