@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: #231816;}
* {font-family: "zen-kaku-gothic-antique", 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 .5s; margin-bottom: 15vw;}
.maincont.on {opacity: 1; transition all .5s;}

.maincont.detail .topicsImgBox p {margin-bottom: 3vw;}
.maincont.detail .topicsImgBox p:last-child {margin-bottom: 0;}


#progress {position: fixed; z-index: 30; opacity: 1; width: 100%; height: 100vh; background: #fff; transition all 1s; display: flex; justify-content: center; align-items: center;}
#progress.out {opacity: 0; z-index: -100; transition all 1s;}
iframe {width: 100%; height: 30vw; border: none;}

.headerlogo,.headerlink,#spMenu { opacity: 0; top: -4vw; transition: all .5s;}
.headerlogo.on,.headerlink.on,#spMenu.on { opacity: 1; transition: all .5s;}
.link_howtoorder {opacity: 0; transition: all .5s;}
.link_howtoorder.on { opacity: 1; transition: all .5s;}


@media screen and (min-width: 1000px) {
body { background: #fff; font-size: .8vw; line-height: 1.6;}

.headerlogo { position: fixed; z-index: 21; top: 1.8vw; left: 4.1vw; padding: 0; display: flex; width: auto; height: auto;}
.headerlogo.signetones {flex-direction: row-reverse;}
.headerlogo img { display: block; width: 6.5vw; height: auto; margin-right: 5vw;}

.headerlink { position: fixed; z-index: 21; top: 1.8vw; left: 80.4vw; padding: 0; display: block; width: auto; height: auto;}
.headerlink a { display: flex; justify-content: flex-start; align-items: center; width: 10vw; height: 2.5vw;}
.headerlink .sublink { height: .1vh;display: block; position: relative; opacity: 0; transition: all .5s; overflow: hidden;}
.headerlink .sublink.on { height: max-content; display: block; opacity: 1; transition: all .5s;}
.headerlink .sublink a {justify-content: flex-start; margin-bottom: 1vw; transition: all .5s;}
.headerlink .sublink.on a { margin-bottom: 0; transition: all .5s;}

#spMenu { position: fixed; z-index: 22; top: 1.8vw; right: 4.1vw; display: flex; justify-content: center; align-items: center; width: 3.5vw; height: 2.5vw; transition: all 1s; padding: 0; align-items: center; margin: 0; }
#spMenu .menu-trigger { position: relative; width: 3.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: 1vw; }
.menu-trigger p:nth-of-type(2) { top: 1.3vw; }
.menu-trigger.active p:nth-of-type(1) { transform: translateY(.25vw) rotate(-45deg); background: #000; }
.menu-trigger.active p:nth-of-type(2) { transform: translateY(-.05vw) rotate(45deg); background: #000; }

.spnavi { display: flex; justify-content: center; align-items: center; flex-direction: column; position: fixed; top: 0; left: 0; z-index: -21; opacity: 0; background: rgba(255,255,255,.9); width: 100%; height: 100vh; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; -webkit-transition: all .3s; transition: all .3s; }
.spnavi.active { opacity: 1; z-index: 20;}
.spnavi a {position: relative; display: block; width: 100%; color: #fff; margin: 4vw auto 0; text-align: center;filter: blur(1.5rem); transition: all .5s;}
.spnavi a p {font-weight: 700;}
.spnavi.active a {filter: blur(0); transition: all .5s; margin-top: 2vw;}
.spnavi br {display: none;}

.cta {position: relative; z-index: 3;display: flex; justify-content: center; width: 100%; margin: 10vw auto;}
.cta .box { width: 22.6vw; height: auto; padding: 3vw; background: rgba(245,245,245,.7); text-align: center; margin: 0 .25vw;}
.cta .box .logo { width: 50%; height: auto; display: block; margin: 0 auto 2vw;}
.cta .box .sns { width: 100%; display: flex; justify-content: center; align-items: center;}
.cta .box .sns a {width: 1.5vw; margin: 0 .5vw;}
.cta .box img { display: block; width: 100%; height: 100%; object-fit: contain;}

.footer {position: relative; z-index: 3; display: block; width: 100%; margin: 0 auto; padding: 0 4.1vw 1.5vw;}
.footer .footermenu { display: flex; justify-content: space-between; width: 91.7vw; padding: 1vw; border-bottom: dotted 1px #C1C1C1; border-top: dotted 1px #C1C1C1;}
.footer .footermenu a p { font-weight: 700;}

.link_howtoorder { position: fixed; z-index: 21; bottom: 1.5vw; right: 4.1vw; padding: .5vw 1vw; background: #000; display: flex; width: auto; height: auto; opacity: 0; transition: all .5s;}
.link_howtoorder p {color: #fff;}

.newslist { display: block; width: 91.7vw; margin: 0 auto 10vw;}
.newslist .webgene-blog { display: flex; justify-content: center; flex-wrap: wrap; width: 100%;}
.newslist .webgene-blog .webgene-item {position: relative; width: 27.3vw; height: auto; margin: 0 4.9vw 4.9vw 0; overflow: hidden;}
.newslist .webgene-blog .webgene-item:nth-of-type(3n) {margin-right: 0;}
.newslist .webgene-blog .webgene-item .webgene-item-content .thumb {display: block; width: 100%; height: 100%; aspect-ratio:1/.856; overflow: hidden; margin-bottom: 1vw;}
.maincont.uitu_itemlist .newslist .webgene-blog .webgene-item .webgene-item-content .thumb { aspect-ratio:1/1.2;}
.newslist .webgene-blog .webgene-item .webgene-item-content .thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1); transition: all .6s;}
.newslist .webgene-blog .webgene-item .webgene-item-content a:hover .thumb img { transition: all .6s; transform: scale(1.1);}
.newslist .webgene-blog .webgene-item .webgene-item-content .txt { display: block; text-align: center; width: 100%; height: auto; font-weight: 700;}
.newslist .webgene-blog .webgene-item .webgene-item-content .data {display: flex; justify-content: space-between; width: 100%; padding-bottom: .3vw; border-bottom: solid 1px rgba(112,112,112,1);}
.newslist .webgene-blog .webgene-item .webgene-item-content .description {font-size: 80%; margin: 1vw auto;}

.maincont.itemlist .newslist .webgene-blog .webgene-item .webgene-item-content .txt { margin: 1vw auto;}

.maincont.detail main {background: #FAF8F8; width: 100%; padding: 5vw 0;}
.maincont.detail main .thumb,.maincont.detail main .webgene-item-content { width: 46.6vw; margin: 3vw auto;}


.maincont.itemdetail .webgene-blog { width: 91.7vw; margin: 0 auto;}
.maincont.itemdetail .webgene-blog .webgene-item {position: relative; width: 100%; padding-top: 10vw;}
.maincont.itemdetail .webgene-blog .webgene-item .itemttl {display: none;}
.maincont.itemdetail .webgene-blog .webgene-item main  {position: relative; width: 100%; display: block; margin-bottom: 10vw;}
.maincont.itemdetail .webgene-blog .webgene-item main .img2 {position: absolute; top: 0; left: 0; width: 61%; overflow: hidden;}
.maincont.itemdetail .webgene-blog .webgene-item main .gallerybox { width: 100%; display: flex; justify-content: flex-start; flex-wrap: wrap;}
.maincont.itemdetail .webgene-blog .webgene-item main .gallerybox a:first-child {display: block; width: 100%; aspect-ratio:1/1.2;}
.maincont.itemdetail .webgene-blog .webgene-item main#SIGNETONES .gallerybox a:first-child {display: block; width: 100%; aspect-ratio:1/.668;}
.maincont.itemdetail .webgene-blog .webgene-item main .gallerybox a:first-child img {display: block; width: 100%; height: 100%; object-fit: cover;}
.maincont.itemdetail .webgene-blog .webgene-item main .gallerybox a { display: block; width: 49%; aspect-ratio:1/1.2; margin: 0 2% 2vw 0;}
.maincont.itemdetail .webgene-blog .webgene-item main#SIGNETONES .gallerybox a { display: block; width: 48%; aspect-ratio:1/.668; margin: 0 2% 2vw 0;}
.maincont.itemdetail .webgene-blog .webgene-item main .gallerybox a:nth-of-type(2n+1) {margin-right: 0;}
.maincont.itemdetail .webgene-blog .webgene-item main .gallerybox a img {display: block; width: 100%; height: 100%; object-fit: cover;}
.maincont.itemdetail .webgene-blog .webgene-item main .webgene-item-content {position: absolute; top: 5vw; left: 65.1%; width: 34.9%; text-align: left; box-sizing: border-box;}
.maincont.itemdetail .webgene-blog .webgene-item main .webgene-item-content h1 {margin-bottom:3vw;}
.maincont.itemdetail .webgene-blog .webgene-item main .webgene-item-content.scroll {background: yellow;}

.maincont {position: relative; z-index: 2; display: block; width: 100%; margin: 0 0 0 auto;}
.section { display: block; width: 68.6vw; margin: 0 auto 20vw;}

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

.kv {position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: auto; aspect-ratio:1/.576;}
.kv .cell {position: relative; top: 0; left: 0; width: 50%; height: 100%;}
.kv .cell .logo {position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;}
.kv .cell .logo .img { width: 14.5vw; height: auto;}
.kv .cell .logo .img img { width: 100%; height: 100%; object-fit: contain;filter: invert(1);}
.kv .cell .bg {position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%;}
.kv .cell .bg img { width: 100%; height: 100%; object-fit: cover;}

.kv.signetones {flex-direction: row-reverse;}


.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 #C1C1C1;}
.hbox.lined h2 {text-align: left; margin: 0;}
.hbox.lined .num {display: flex; justify-content: center; align-items: center; border-radius: 50%; background: #000; padding: 1vw; width: 1.8em; height: 1.8em; margin-right: 1.5vw; font-size: 150%; }
.hbox.lined .num p {color: #fff;}

a.linkbtn{ background:#F0F0F0; 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: #000; transition:800ms ease all; padding:.2vw 2vw; box-sizing:border-box;transition:all .6s;}
a.linkbtn:hover {background: #cacaca;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*/

#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;}
#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: 50%; font-weight: normal; letter-spacing: .2em; text-indent: -.2em;}

.maincont.index .topcont {display: flex; flex-direction: column; background: #fff; overflow: hidden; margin-bottom: 10vw;}
.maincont.index .topcont.signetones .sec_signetones {order:1; flex-direction: row;}
.maincont.index .topcont.signetones .sec_uitu {order:2; flex-direction: row-reverse;}
.maincont.index .sec {position: relative; width: 91.7vw; margin: 7vw auto;}
.maincont.index .sec_uitu { display: flex; justify-content: space-between; flex-direction: row;}
.maincont.index .sec_signetones { display: flex; justify-content: space-between; flex-direction: row-reverse;}

.maincont.index .topcont .sec_uitu .txt,.maincont.index .topcont.signetones .sec_signetones .txt {padding-right: 4vw;}
.maincont.index .topcont .sec_signetones .txt,.maincont.index .topcont.signetones .sec_uitu .txt {padding-left: 4vw;}

.maincont.index .sec .txt {position: relative; width: 22.6vw; height: 100vh; display: block; padding: 0; box-sizing: border-box;}
.maincont.index .sec .txt img { width: 8.5vw; height: auto; margin-bottom: 5vw;}
.maincont.index .sec .txt h1 {font-weight: 700; font-size: 100%; text-align: left; margin: 0 0 1vw;}
.maincont.index .sec .txt p.det {font-weight: 700; font-size: 100%; text-align: left; margin: 0 0 1vw;}
.maincont.index .sec .txt .linkbox { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 4vw;}
.maincont.index .sec .txt .linkbox a { margin: 0; width: 46%;}
.maincont.index .sec .img {width: 69.1vw;position: relative;}
.maincont.index .sec .img .top {position: relative; width: 100%; height: auto; aspect-ratio:1/.706; overflow: hidden;}
.maincont.index .sec .img .top .slide {position: absolute; width: 100%;height: 100%;}
.maincont.index .sec .img .top .slide img { width: 100%; height: 100%; object-fit: cover;}

.indexProducts .webgene-blog { display: flex; justify-content: flex-start; flex-wrap: wrap; width: 100%;}
.indexProducts .webgene-blog .webgene-item {position: relative; display: block; width: 32%; margin: 0 2% 2vw 0;}
.indexProducts .webgene-blog .webgene-item:nth-of-type(3n) {margin-right: 0;}
.indexProducts .webgene-blog .webgene-item .webgene-item-content a {position: relative; display: block; width: 100%; height: auto; aspect-ratio:1/.856; overflow: hidden; margin-bottom: 1vw;}
.indexProducts .webgene-blog .webgene-item .webgene-item-content a .thumb {position: absolute; z-index: 1; top: 0; left: 0; display: block; width: 100%; height: auto; aspect-ratio:1/.856; overflow: hidden;}
.sec_uitu .indexProducts .webgene-blog .webgene-item .webgene-item-content a { aspect-ratio:1/1.2;}
.sec_uitu .indexProducts .webgene-blog .webgene-item .webgene-item-content a .thumb { aspect-ratio:1/1.2;}
.indexProducts .webgene-blog .webgene-item .webgene-item-content a .thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1); transition: all .6s;}
.indexProducts .webgene-blog .webgene-item .webgene-item-content a .description {position: absolute; z-index: 2; top: 0; left: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;  aspect-ratio:1/.856; transition: all .6s; padding: 3vw; color: #fff; box-sizing: border-box; opacity: 0; background: rgba(0,0,0,.8); font-weight: 700; }
.indexProducts .webgene-blog .webgene-item .webgene-item-content a:hover .description {opacity: 1; transition: all .6s;}
.indexProducts .webgene-blog .webgene-item .webgene-item-content a:hover .thumb img { transition: all .6s; transform: scale(1.1);}
.indexProducts .webgene-blog .webgene-item .webgene-item-content .txt { display: block; text-align: center; width: 100%; height: auto; padding: 0!important; font-weight: 700; }
.indexProducts .webgene-blog .webgene-item .webgene-item-content .data {display: flex; justify-content: space-between; width: 100%; padding-bottom: .3vw; border-bottom: solid 1px rgba(112,112,112,1);}

.txtlist { border-top: dotted 1px #C1C1C1;}
.txtlist .flcell { display: flex; justify-content: flex-start; width: 100%; border-bottom: dotted 1px #C1C1C1;}
.txtlist .flcell .fleft { width: 30%; text-align: left; padding: 1vw;}
.txtlist .flcell .fright { width: 70%; text-align: left; padding: 1vw;}

.howtoorder .section { width: 50%;}

.maincont.concept .photobox { display: block; aspect-ratio:3/2; overflow: hidden;}
.maincont.concept .photobox img { width: 100%; height: 100%; object-fit: cover; object-position: center;}




}


.image-container {
width: 100%; /* 画像コンテナの幅を設定 */
height: 100vh;
overflow: hidden; /* 溢れた部分を非表示にする */
position: fixed;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}

.image-container img {
position: absolute;
z-index: 2;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
display: none; /* 画像を非表示に設定 */
object-fit: cover;
transform-origin: center center;
transform: scale(1);
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);
}
}



/* gjs-dashed */
.gjs-dashed div,.gjs-dashed a {padding: 20px 5px!important;}
.gjs-dashed .wow {opacity: 1!important;}
.gjs-dashed .section { width: 100%;}
.gjs-dashed .maincont { width: 90%!important; margin: 0 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 .kv .cell .logo {top: 15%; left: 15%; width: 70%; height: 70%;}