@charset "UTF-8";

@media screen and (max-width: 999px) {
body {font-family: "shippori-mincho", sans-serif;background: #101010; color: #fff; font-size: 3vw;}
iframe { width: 100% !important; border: none; height: 60vw !important; display: block;}
h2 {font-size: 160%;}
h3 {font-size: 130%;}
.section {position: relative; display: block; margin: 10vw auto; text-align: center; width: 90%; }
.section p {line-height: 2;}
.headerlogo {position: fixed; z-index: 10; left: 1vw; top: 1vw; width: 40vw; height: auto; }

.headerleft { background: #101010; padding: 2vw 0 ; position: fixed; z-index: 10; bottom: 0; left: 0; width: 100%;}
.headerleft .tel { margin-bottom: 1vw; display: flex; justify-content: center; align-items: center; width: 90%; margin: auto;}
.headerleft .tel > p { width: 22%; text-align: center; font-size: 80%; padding-right: 1vw; margin-right: 1vw; border-right: solid 1px rgba(255,255,255,.4); }
.headerleft .tel div { width: 56%; display: flex; justify-content: center; align-items: center;}
.headerleft .tel div .icon { width: 3.5vw; height: 3.5vw; margin-right: 1vw;}
.headerleft .tel div p { font-size: 200%; line-height: 1; letter-spacing: .1em; width: max-content;}
.headerleft .tel div p a { font-size: 100%;}
.headerleft .tel + p { display: none;}

.spMenu {position: fixed; z-index: 10; right: 3vw;top: 4vw; width: 10vw; height: auto;}
.gmenu { display: none;}
#spnavi { display: block; position: fixed; top: 0; right: -40vw; z-index: 9; background: rgba(0,0,0,.8); width: 40vw; height: 100%; padding:12vw 4vw 0 4vw; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; -webkit-transition: all 1s; transition: all 1s; }
#spnavi.active { right: 0;}
#spnavi a:first-child { border-top: dotted 1px rgba(255,255,255,.4);}
#spnavi a { display: block; padding: 1.5vw 0; border-bottom: dotted 1px rgba(255,255,255,.4); color: #fff; font-size: 120%;}
#spnavi br {display: none;}


.btmtel { border: solid 1px #fff; padding: 4vw 0; width: 96%; margin: 5vw auto 2vw;}
.btmtel p { width: 100%; text-align: center; font-size: 180%; }
.btmtel .tel { width: max-content; display: flex; justify-content: center; align-items: center; flex-direction: column; margin: 1vw auto;}
.btmtel .tel .icon { width: 5vw; height: 5vw; margin-bottom: 1vw;}
.btmtel .tel .icon img { width: 100%; height: 100%; object-fit: contain;}
.btmtel .tel p { font-size: 350%; line-height: 1;}
.btmtel .tel p a { font-size: 100%;}
.btmtel .tel + p { font-size: 80%; line-height: 1; letter-spacing: .1em; text-align: center;}

.footer {width: 100%; height: 100vw; margin: 3vw auto; position: relative;}
.footer .bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; }
.footer .bg img { width: 100%; height: 100%; object-fit: cover; opacity: .8;}
.footer .txt { position: absolute; z-index: 2; width: 90%; height: 30vw; left: 5%; top: 2vw; }
.footer .txt .txtlist { }
.footer .txt .txtlist .flcell { display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; width: 100%; margin-bottom: 1vw;}
.footer .txt .txtlist .flcell .fleft { width: 30%;margin-bottom: 1vw;}
.footer .txt .txtlist .flcell .fleft p { }
.footer .txt .txtlist .flcell .fright { width: 70%; margin-bottom: 1vw;}
.footer .txt .txtlist .flcell .fright p { }



.txt .ion { display: flex; justify-content: center; align-items: center; margin: 3vw auto;}
.txt .ion  a { width: 10vw; height: 10vw; margin: 0 3vw;}
.txt .box { display: flex; justify-content: flex-start; align-items: center; width: 100%;}
.txt .box div { border: solid 1px #fff; padding: 3vw 0; box-sizing: border-box; width: 23%; margin-right: 2%; text-align: center;}
.txt .box  p { font-weight: bold; }
.txt .box div div { width: 30%; height: 6vw; margin: 3vw auto; border: none; padding: 0;}
.txt .box div div img {  width: 100%; height: 100%; object-fit: contain;}
.txt .box div div + p { font-weight: normal; font-size: 80%; display: block; text-align: center; height: 2.5em;}
.copyright { text-align: center; }


.pagettl { display: block; position: relative; top: 0; left: 0; z-index: 2; width: 100%; height: 100vw; overflow: hidden;}
.pagettl .bg { position: absolute; z-index: 1; width: 100%; height: 100%; background: #000;}
.pagettl .bg img { width: 100%; height: 100%; object-fit: cover; opacity: .3;}
.pagettl h1 { position: absolute; z-index: 2; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; text-orientation: upright; letter-spacing: .2em; font-size: 200%;}

.newsdetail .webgene-blog { width: 60%; margin: auto;}
.newsdetail .webgene-blog .webgene-item header p { font-size: 100%;}
.newsdetail .webgene-blog .webgene-item header h2 { font-size: 110%; padding-bottom: 3vw;}
.newsdetail .webgene-blog .webgene-item .webgene-item-content { padding-top: 2vw; border-top: solid 1px rgba(255,255,255,.4);}

.section.newslist { width: 90%; display: flex;justify-content: space-between; align-items: flex-start; flex-direction: column-reverse;}
.section.newslist .newslist { width: 100%;}
.section.newslist .newslist .webgene-blog { border-top: solid 1px rgba(255,255,255,.4); }
.section.newslist .newslist .webgene-blog .webgene-item {}
.section.newslist .newslist .webgene-blog .webgene-item .webgene-item-content { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 1vw; border-bottom: solid 1px rgba(255,255,255,.4);}
.section.newslist .newslist .webgene-blog .webgene-item .webgene-item-content .date { width: 20%; text-align: left;}
.section.newslist .newslist .webgene-blog .webgene-item .webgene-item-content .cate { width: 15%; text-align: center; padding: .5vw; background: #fff; color: #000; margin: 0 1vw ;}
.section.newslist .newslist .webgene-blog .webgene-item .webgene-item-content h2 { width: 60%; text-align: left; font-size: 100%;}
.section.newslist .newslist .webgene-blog .webgene-item .webgene-item-content h2 a { font-size: 100%;}
.section.newslist .newslist .webgene-blog .webgene-pagination {}
.section.newslist .newslist .webgene-blog .webgene-pagination ul {}
.section.newslist .cat { width: 100%; margin-bottom: 10vw;}
.section.newslist .cat h2 { font-size: 160%; padding-bottom: 1vw; border-bottom: solid 1px rgba(255,255,255,.4); margin-bottom: 1vw;}
.section.newslist .cat .webgene-blog {}
.section.newslist .cat .webgene-blog article {}
.section.newslist .cat .webgene-blog article a {display: inline-block; text-align: left; padding: 1vw;}

.bgwall { width: 100%; height: auto; overflow: hidden; background: url(../../../system_panel/uploads/images/bg_wall.jpg) no-repeat top left; background-size: 70% auto;}
.tablephoto { display: flex; flex-direction: row-reverse; flex-wrap: wrap; flex-direction: column; width: 80%; margin: auto; }
.tablephoto a { position: relative; width: 100%; height: 65vw; overflow: hidden; max-width: none; padding: 0; margin: 0 0 4vw;}
.tablephoto a:hover {opacity: 1;}
.tablephoto a.map { height: 55vw; margin: 0;}
.tablephoto a.map:hover img { transition: all .5s; transform: scale(1);}
.tablephoto a img { position: absolute; z-index: 1; width: 100%; height: 100%; object-fit: cover; transition: all .5s;}
.tablephoto a:hover img { transition: all .5s; transform: scale(1.2); opacity: 1;}
.tablephoto a div { position: absolute; z-index: 2; width: 100%; height: 100%; background: rgba(0,0,0,.4); display: flex; justify-content: center; align-items: center;}
.tablephoto a div p { -ms-writing-mode: tb-rl; writing-mode: vertical-rl; text-orientation: upright; letter-spacing: .1em; font-size: 90%; padding: 2vw 3vw; border: solid 1px #fff;}
.tablephoto a div p.hide {display: none;}

.section .txtlist { }
.section .txtlist .flcell { display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; width: 100%; padding: 1vw; border-top: solid 1px rgba(255,255,255,.4);}
.section .txtlist .flcell:nth-last-of-type(1) { border-bottom: solid 1px rgba(255,255,255,.4);}
.section .txtlist .flcell .fleft { width: 30%; text-align: left;}
.section .txtlist .flcell .container:nth-of-type(1) { width: 30%; text-align: left; margin: 0!important; padding: 0 !important;}
.section .txtlist .flcell .fright { width: 70%; text-align: left;}
.section .txtlist .flcell .container:nth-of-type(2) { width: 70%; text-align: left; margin: 0 !important; padding: 0 !important;}

.modalWin {opacity: 0; position: fixed; z-index: -11; top: 0; left: 0; width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; background: rgba(0,0,0,.8); transition: all .5s; cursor: pointer;}
.modalWin.on { z-index: 11; opacity: 1; transition: all .5s;}
.modalWin .main { width: 90%; height: auto; text-align: center;}
.modalWin .main img { display: block; margin: 1vw auto;}

.recruitMain { width: 100%; height: auto; background: url(../../../system_panel/uploads/images/bg_washi.jpg) no-repeat top center; background-size: 100% auto;position: relative; overflow: hidden;}
.recruitMain .top { width: 100%; position: relative;}
.recruitMain .top .photo {  width: 30vw; height: auto; margin: 3vw 0 0 3vw; }
.recruitMain .top .txt { width: 100%; height: auto; background: url(../../../system_panel/uploads/images/bg_blue.jpg) no-repeat right top; background-size: 80% auto; }
.recruitMain .top .txt .top { display: block; text-align: left; margin: 5vw 0 0 2vw; padding-top: 10vw;}
.recruitMain .top .txt .top p {line-height: 2;}
.recruitMain .top .txt .mid {position: relative; display: flex; justify-content: flex-start; align-items: center; text-align: left; margin: 5vw 0 0 14vw; font-size: 150%;}
.recruitMain .top .txt .mid:after { content:""; display: block; width: 25vw; height: 1px; background: #fff; margin-left: 1em; }
.recruitMain .top .txt .btm { display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: left; margin:2vw 0 0 14vw;}
.recruitMain .top .txt .btm .circle {display: flex; justify-content: center; align-items: center; flex-direction: column; width: 45vw; height: 45vw; margin-bottom: 5vw; border-radius: 50%; background: #fff; text-align: center; padding: 3vw 0; box-sizing: border-box;}
.recruitMain .top .txt .btm .circle p {color: #203B64; font-size: 150%;}
.recruitMain .top .txt .btm .circle p:first-child { font-size: 350%; line-height: 1; font-weight: bold; display: block; width:max-content; margin: 0 auto 1vw; padding-bottom: 1vw; border-bottom: solid 1px #203B64;}

.recruitsec2 {margin: 15vw auto 5vw  ;}
.recruitsec2 .cellbox { width: 80%; display: flex; justify-content: space-between; align-items: flex-start; flex-direction: column; margin: auto;}
.recruitsec2 .cellbox .cell { width: 100%; margin-bottom: 5vw; }
.recruitsec2 .cellbox .cell div + p { display: block; text-align: left; margin: 1vw auto; font-size: 120%;}

.recruitsec3 { background: url(../../../system_panel/uploads/images/bg_whitegold.jpg) no-repeat center center; background-size: cover; padding: 0 0; overflow: hidden;}
.recruitsec3 p,.recruitsec3 h2 {color: #000;}
.recruitsec3 .flcell { border-top: solid 1px rgba(0,0,0,.4)!important;}
.recruitsec3 .flcell:nth-last-of-type(1) { border-bottom: solid 1px rgba(0,0,0,.4)!important;}

.menunavi { width: 100%; height: auto; background: url(../../../system_panel/uploads/images/bg_washi.jpg) no-repeat center center; position: relative; overflow: hidden;}
.menunavi div { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; margin: 2vw auto;}
.menunavi div a {display: block; width: 30vw; text-align: center; color: #fff; background: #101010; padding: 1vw; margin: 0 1vw 2vw;}

.menuheader { position: relative; width: 100%; height: 40vw; overflow: hidden;}
.menuheader .bg { position: absolute; z-index: 1; width: 100%; height: 100%; top: 0; left: 0;}
.menuheader .bg img { position: absolute; z-index: 1; width: 100%; height: 100%; object-fit: cover; opacity: .3;}
.menuheader h2 { position: absolute; z-index: 2; width: 100%; height: 100%; top: 0; left: 0; display: flex; justify-content: center; align-items: center;}

.food {display: flex; justify-content: center; flex-direction: column; width: 100%;}
.food .left ,.food .right { width: 100%;}
.food .container {display: block; width: 100%; max-width: none; padding: 0; margin: 2vw 0 0; text-align: left;}
.food .container h3,.food .container p { padding: 1vw 0; border-bottom: solid 1px rgba(255,255,255,.4);}
.food .container h3 {font-size: 160%;}

.drink {display: block; width: 100%;}
.drink div {display: block; width: 100%; max-width: none; padding: 0; margin: 2vw 0 0; text-align: left;}
.drink .container {display: flex; justify-content: center; flex-direction: column; width: 100%; margin: 2vw 0 0; padding: 0; max-width: none;}
.drink .container p {  display: block; width: 100%; padding: 1vw 0; border-bottom: solid 1px rgba(255,255,255,.4);}
.drink .container p:nth-child(1),.drink .container p:nth-child(2) {border-top: solid 1px rgba(255,255,255,.4);}
.drink h3 {font-size: 160%; width: 100%; margin-bottom: 3vw;}
.drink .container + p {padding: 1vw 0;}

.course {display: flex; justify-content: center; flex-direction: column; width: 100%; margin-bottom: 10vw;}
.course h3 {width: 100%;}
.course h4 {width: 100%; text-align: left;}
.course h4 + p {padding: 1vw 0; text-align: left;}
.course .left { order: 2; width: 100%; display: block; margin: 0 auto 3vw; padding: 0; max-width: none;}
.course .container {width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; margin: 0; padding: 0; max-width: none;}
.course .container p:nth-child(odd) { width: 70%; padding: 1vw 0; display: block; text-align: left; border-bottom: solid 1px rgba(255,255,255,.4);}
.course .container p:nth-child(even) { width: 30%; padding: 1vw 0; display: block; text-align: left; border-bottom: solid 1px rgba(255,255,255,.4);}
.course .container p.one { width: 100%;}
.course .container + p {padding: 1vw 0; text-align: left;}
.course .img { position: relative; width: 100%; order:1; margin-bottom: 3vw;}
.course .container.mb3 {margin-bottom: 3vw!important;}

.section .course:nth-of-type(even) .left { order:2;}
.section .course:nth-of-type(even) .img { order:1;}

.bg_goldwave { overflow: hidden; background: url(../../../system_panel/uploads/images/bg_goldwave1.jpg),url(../../../system_panel/uploads/images/bg_goldwave2.jpg); background-repeat:  no-repeat; background-position: top right, bottom left; background-size: 40vw auto, 40vw auto;}
.bg_goldwave .section .main { width: 80%; margin: 0 auto 1vw; height: 53vw; position: relative;}
.bg_goldwave .section .main p {line-height: 2;}
.bg_goldwave .section .main .ttl { position: absolute; z-index: 2; top: -3vw; right: -3vw; display: flex; flex-direction: row-reverse;}
.bg_goldwave .section .main .ttl h2 { font-weight: normal; background: #fff; color: #000;-ms-writing-mode: tb-rl; writing-mode: vertical-rl; text-orientation: upright; padding: .4vw; height: max-content; margin: 0 .2vw; font-size: 120%;}
.bg_goldwave .section .main .ttl h2:nth-last-of-type(1) {margin-top: 10vw;}
.bg_goldwave .section .main .bg { position: absolute; z-index: 1; width: 100%; height: 100%;}
.bg_goldwave .section .main .ttl h2 strong {font-weight: normal; font-size: 150%;}

.recommendSec { background: url(../../../system_panel/uploads/images/bg_wall.jpg) no-repeat center center; background-size: 100% auto;}
.recommendSec .section { width: 90%; display: flex; justify-content: space-between; align-items: center; flex-direction: column;}
.recommendSec .section .img { width: 100%; position: relative; z-index: 1; margin-bottom: 3vw;}
.recommendSec .section .txt { width: 100%; position: relative; z-index: 2; text-align: left;}
.recommendSec .section .txt h3 { font-size: 160%; background: #000; padding: .5vw 5vw; left: -4vw; position: relative; width: max-content;}
.recommendSec .section .txt p { display: block; width: 90%; padding: 2vw; box-sizing: border-box;}
.recommendSec .subimg { width: 96%; margin: auto; position: relative; display: flex; justify-content: space-between; align-items: flex-start;}
.recommendSec .subimg .container { width: 32%; display: block; }
.recommendSec .subimg .container:nth-of-type(2) {margin-top: -4vw;}
.recommendSec .subimg .container:nth-of-type(3) {margin-top: -8vw;}

.recbtn { width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; margin: 3vw auto 0;}
.recbtn a { width: 100%; height: 60vw; overflow: hidden; position: relative;}
.recbtn a:hover {opacity: 1;}
.recbtn a .img { position: absolute; z-index: 1; width: 100%; height: 100%; transition: all .5s; }
.recbtn a:hover .img{ transition: all .5s; transform: scale(1.2); opacity: 1;}
.recbtn a .txt { position: absolute; z-index: 2; width: 100%; height: 100%; background: rgba(0,0,0,.6); display: flex; justify-content: center; align-items: center;}
.recbtn a .txt p { letter-spacing: .2em; font-size: 130%; padding: 2vw 3vw; border: solid 1px #fff; display: block; width: max-content;}

.maincont.lunch { background: url(../../../system_panel/uploads/images/bg_lunch.jpg) no-repeat center top; background-size: 100% auto; background-attachment: fixed;}
.maincont.lunch:after { content:""; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: -1; background: url(../../../system_panel/uploads/images/bg_lunch.jpg) no-repeat center top; background-size: cover;}
.bg_lunch { overflow: hidden;}
.fadedbg { background: url(../../../system_panel/uploads/images/fadedbg.png) no-repeat center center; background-size: contain; padding: 2vw 3vw; line-height: 2;}
.caution { background: url(../../../system_panel/uploads/images/bg_caution.jpg) no-repeat center center; background-size: cover; padding: 5vw;}
.caution * {color: #000;}
.caution h2 {margin-bottom: 1vw; font-size: 140%;}
.caution p {line-height: 2;}

.maincont.dinner { background: url(../../../system_panel/uploads/images/bg_dinner.jpg) no-repeat center top; background-size: 100% auto; background-attachment: fixed;}
.maincont.dinner:after { content:""; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: -1; background: url(../../../system_panel/uploads/images/bg_dinner.jpg) no-repeat center top; background-size: cover;}
.bg_dinner { padding-top: 10vw;}
.bg_dinner .section {position: relative; width: 100%; margin: 0 auto 20vw; background: rgba(0,0,0,.7); padding: 2vw 5%; display: flex; justify-content: center;; align-items: center; flex-direction: column;}
.bg_dinner .section .txt { width: 100%; text-align: left; order:2;}
.bg_dinner .section .txt .ttl {position: relative; margin-bottom: 3vw;}
.bg_dinner .section .txt .ttl h2 {font-weight: normal; padding: 1vw; color: #000; background: #fff; line-height: 1; margin-bottom: .4vw; width: max-content;}
.bg_dinner .section .txt .ttl h2:nth-of-type(2) {margin-left: 10vw;}
.bg_dinner .section:nth-of-type(odd) .txt p { }
.bg_dinner .section .txt img {display: block; margin-bottom: 3vw;}
.bg_dinner .section .img {width: 100%;position: relative; order:1; margin-bottom: 4vw;}
.bg_dinner .section .img img {position: relative; z-index: 1;}
.bg_dinner .section .img .mt14 {}
.bg_dinner .section .img h2 { font-weight: normal; background: #000; padding: 1vw; position: absolute; z-index: 2; top: -5vw; left: 3vw; width: max-content; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; text-orientation: upright; font-size: 160%; letter-spacing: .3em;}
.bg_dinner .section:nth-of-type(1) .img {order:2;}
.bg_dinner .section:nth-of-type(1) .txt {order:1;}

.section.dinneC {width: 100%;}
.dinnercourse { margin-bottom: 10vw; padding: 5vw 10%; background: rgba(0,0,0,.7);}
.dinnercourse .ttl { position: relative; width: 60vw; height: 28vw; margin: 0 auto 6vw;}
.dinnercourse .ttl h3 { font-size: 160%; text-align: center; position: absolute; z-index: 2; line-height: 1.5; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; }
.dinnercourse .ttl .bg { width: 100%; height: 100%; position: absolute; z-index: 1; top: 0; left: 0; right: 0; bottom: 0; margin: auto;}
.dinnercourse .ttl .bg img { width: 100%; height: 100%; object-fit: cover;}
.dinnercourse .flcell { width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; margin-bottom: 10vw;}
.dinnercourse .flcell .fleft { width: 100%; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; margin-bottom: 5vw;}
.dinnercourse .flcell .fleft .main { display: block; width: 100%; height: 45vw; overflow: hidden; margin-bottom: .7vw;}
.dinnercourse .flcell .fleft img { width: 100%; height: 100%; object-fit: cover;}
.dinnercourse .flcell .fleft a { display: block; width: 32%; height: 16vw; overflow: hidden;}
.dinnercourse .flcell .fright { width: 100%; position: relative;}
.dinnercourse .flcell .fright p {text-align: left; display: block; margin-bottom: 2vw; line-height: 1.5;}
.dinnercourse .flcell .fright .label {position: absolute; z-index: 2; bottom: 45vw; right: -5vw; background: #233E65; width: 20vw; height: 20vw; border-radius: 50%; display: flex; justify-content: center; align-items: center; flex-direction: column; color: #fff; text-align: center; line-height: 1.4;}
.dinnercourse .flcell .fright .detail { position: relative; z-index: 1; width: 100%; padding: 2vw; text-align: center; box-sizing: border-box; background: url(../../../system_panel/uploads/images/bg_coursedetail.jpg) no-repeat; background-size: cover; color: #000;}
.dinnercourse .flcell .fright .detail h4 {font-size: 130%; padding-bottom: 1vw; border-bottom: solid 1px #000; margin: 0 auto 1vw; width: max-content;}
.dinnercourse .flcell .fright .detail p {text-align: center; margin-bottom: 0; line-height: 2;}
.dinnercourse .flcell .fright .detail p:last-child { display: block; text-align: right; font-size: 150%;}

.bg_concept { background: url(../../../system_panel/uploads/images/20231211153951204693.jpg) no-repeat center top; background-size: cover; overflow: hidden; height: auto; display: flex; justify-content: center; align-items: center;  padding: 10vw 0;}
.bg_concept .cell { width: 80%; display: flex; justify-content: flex-start; align-items: center; margin:  0 auto;}
.bg_concept .cell p {width: 80%; display: block; line-height: 2;}
.conceptsec .section { width: 90%; }
.conceptsec .flcont {}
.conceptsec .section .flcont .flcell { width: 100%; display: block; margin: 10vw auto;}
.conceptsec .section .flcont .flcell .img { width: 100%; margin-bottom: 4vw; }
.conceptsec .section .flcont .flcell .txt { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start;}
.conceptsec .section .flcont .flcell .txt .ttl { width: 20%; order:2;  }
.conceptsec .section .flcont .flcell .txt p { width: 70%; order:1; margin-right: 5%; text-align: left; }
.conceptsec .section .flcont .flcell .txt .pcont { width: 70%; order:1; margin-right: 5%; text-align: left; }
.conceptsec .section .flcont .flcell .txt .pcont p {width: 100%;}
.conceptsec .section .flcont .flcell .txt .pcont img { display: block; width: 55%; margin-left: 45%;}
.conceptsec .section .flcont .flcell:nth-of-type(even) .img { order:2;}
.conceptsec .section .flcont .flcell:nth-of-type(even) .txt { order:1; flex-direction: row-reverse;}
.conceptsec .section .flcont .flcell:nth-of-type(even) .txt p { margin-right: 0; margin-left: 5%;}

.kv { display: block; position: relative; top: 0; left: 0; z-index: 2; width: 100%; height: 120vw; overflow: hidden;}
.kv .slide { position: absolute; z-index: 1; width: 100%; height: 100%;}
.kv .slide img { width: 100%; height: 100%; object-fit: cover; opacity: .3;}
.kv .ttl { position: absolute; z-index: 2; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;}
.kv .ttl img { width: 50%; height: auto; object-fit: contain;}

.indexsec1 {position: relative; z-index: 1; height: auto; padding: 5vw 0; background: url(../../../system_panel/uploads/images/bg_indexsec1.jpg) no-repeat left top; background-size: cover;}
.indexsec1 .section { width: 90%; margin: 0 auto; padding: 3vw 0 10vw; position: relative;}
.indexsec1 .section h1 {position: absolute; right: 1vw; top: 3vw;  -ms-writing-mode: tb-rl; writing-mode: vertical-rl; text-orientation: upright; font-weight: normal; line-height: 1;}
.indexsec1 .section h1 strong {font-size: 130%; font-weight: bold; line-height: 1; display: inline-block; position: relative; left: 0; right: 0; margin: 0 auto 1vw;}
.indexsec1 .section h2 { /* text-align: left; */ font-size:100%; font-weight: normal;}

.indexsec2 {position: relative; z-index: 2; width: 100%; height: auto; overflow: hidden;background:url(../../../system_panel/uploads/images/bgsp_index2.jpg) no-repeat center center; background-size: 100% auto; padding: 10vw 0;}
.indexsec2 .main { position: relative; width: 100%; height: 100%; z-index: 2;}
.indexsec2 .main .ttl { width: 70%; margin:0 auto; text-align: center; }
.indexsec2 .main .ttl img.sp { width: 60%; height: auto; display: block; margin: 0 auto;}
.indexsec2 .main .ttl p { width: max-content; margin: 3vw auto 5vw;  display: block; margin-top: 5vw; padding: 1vw 0; border-bottom: solid 1px rgba(255,255,255,.4); border-top:  solid 1px rgba(255,255,255,.4); font-weight: normal; line-height: 2; font-size: 90%; letter-spacing: .3em;}
.indexsec2 .bg { display: none; }
.indexsec2 .box {  width: 70%; display: block; margin: auto;}
.indexsec2 .box .cell { position: relative; width: 100%; margin-bottom: 40vw; }
.indexsec2 .box .cell h3 { background: #000; padding: 1vw .4vw; position: absolute; z-index: 2; top: -2vw; left: 0; width: max-content; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; text-orientation: upright; font-weight: normal; font-size: 130%;}
.indexsec2 .box .cell img + p  { display: block; width: 90%; margin: 0 auto; background: rgba(0,0,0,.7); padding: 2vw; position: absolute; z-index: 3; top: 44vw; left: 5%;}
.indexsec2 .btn2 { position: absolute; z-index: 3; bottom: 8vw; left: 0; right: 0; margin: auto; font-size: 100%; }
.indexsec2 .btn2 p {font-size: 100%;}

.sake {display: none;}

.indexsec3 { position: relative; padding: 10vw 0; overflow: hidden; background: url(../../../system_panel/uploads/images/bg_goldwave1.jpg),url(../../../system_panel/uploads/images/bg_goldwave2.jpg); background-repeat:  no-repeat; background-position: top right, bottom left; background-size: 40vw auto, 40vw auto;}
.indexsec3 .img1 { position: absolute; width: 16vw; right: 1vw; top: 35vw;}
.indexsec3 .img2 { position: absolute; width: 36vw; right: -7vw; bottom: 29vw; z-index: 1;}
.indexsec3 .img3 { position: absolute; width: 20vw; left: 2vw; top: 5vw;}
.indexsec3 .ttl { width: 60%; height: auto; margin: 5vw auto;}
.indexsec3 .box { width: 60%; margin: 0 auto;}
.indexsec3 .box .contbox { display: flex; flex-direction: column-reverse; width: 100%;}
.indexsec3 .box img { width: 40%; margin: 5vw 0;}
.indexsec3 .btnBox { display: block; width: 100%; margin: 3vw auto; text-align: center;}
.indexsec3 .btnBox a { margin: 2vw auto;}
.indexsec3 .btnBox a p { font-size: 100%;}


.indexsec4 { width: 100%; height: auto; overflow: hidden; background: url(../../../system_panel/uploads/images/bg_wall.jpg) no-repeat top left; background-size: cover;}
.indexsec4 .box { width: 80%; margin: 6vw auto; display: block;}
.indexsec4 .box .ttl { display: none;}
.indexsec4 .box .main { width: 100%;}
.indexsec4 .box .main .sb { width: 100%; height: auto; font-size: 170%; margin-bottom: 2vw;}
.indexsec4 .box .main .sb img { display: block; margin: 2vw auto; width: 70%; text-align: center;}
.indexsec4 .box .main .sp { display: block; margin: 2vw auto; width: 70%; text-align: center;}

.indexsec5 { width: 100%; display: block; margin: 0 auto;}
.indexsec5 a { display: block; width: 100%; height: 80vw; overflow: hidden; position: relative;}
.indexsec5 a:hover {opacity: 1;}
.indexsec5 a .bg { position: absolute; z-index: 1; width: 100%; height: 100%; transition: all .5s; }
.indexsec5 a .bg img { width: 100%; height: 100%; object-fit: cover;}
.indexsec5 a:hover .bg{ transition: all .5s; transform: scale(1.2); opacity: 1;}
.indexsec5 a .txt { position: absolute; z-index: 2; width: 100%; height: 100%; background: rgba(0,0,0,.6); display: block; margin: 0 auto; text-align: center;}
.indexsec5 a .txt .ttl { letter-spacing: .2em; font-size: 130%; padding: 2vw 3vw; display: block; width: max-content; margin: 2vw auto 0;}
.indexsec5 a .txt .ttl:after {content:""; display: block; width: 1px; height: 15vw; background: rgba(255,255,255,.4); margin: 2vw auto 0; text-align: center;}
.indexsec5 a .txt p:nth-child(2) { letter-spacing: .2em; font-size: 100%; padding: 7vw 5vw; display: block; width: auto; margin: auto;}
.indexsec5 a .fakebtn { display: block; position: relative; width: max-content; height: auto; border: solid 5px #fff; padding: 3px; margin-left: auto; margin-right: auto;}
.indexsec5 a .fakebtn p { display: block; border: solid 1px #fff; padding: 1vw 6vw; text-align: center; font-size: 100%; }

.indexnews { width: 100%; height: auto; overflow: hidden; background: url(../../../system_panel/uploads/images/bg_wall.jpg) no-repeat top left; background-size: cover;}
.indexnews .section { width: 90%; display: block; margin: auto; padding: 3vw 0;}
.indexnews .section h2 { width: 100%; font-weight: normal; letter-spacing: .3em; margin-bottom: 5vw;}
.indexnews .newslist { width: 100%;}
.indexnews .newslist .webgene-blog { width: 100%; display: block;}
.indexnews .newslist .webgene-blog .flcell { width: 100%; margin-bottom: 5%;}
.indexnews .newslist .webgene-blog .flcell .img { margin-bottom: 1vw; }
.indexnews .newslist .webgene-blog .flcell .img a { display: block; width: 100%; height: 50vw; overflow: hidden;}
.indexnews .newslist .webgene-blog .flcell .img a img { display: block; width: 100%; height: 100%; object-fit: cover; }
.indexnews .newslist .webgene-blog .flcell .txt {}
.indexnews .newslist .webgene-blog .flcell .txt div { width: 100%; display: flex; justify-content: space-between; align-items: flex-start;}
.indexnews .newslist .webgene-blog .flcell .txt div .date { width: 70%; text-align: left;}
.indexnews .newslist .webgene-blog .flcell .txt div .itemcat { width: 20%; background: #fff; color: #000; padding: .4vw 0; text-align: center; box-sizing: border-box;}
.indexnews .newslist .webgene-blog .flcell .txt h3 { font-size: 100%;}
.indexnews .newslist .webgene-blog .flcell .txt h3 a { text-align: left; display: block; font-weight: normal; font-size: 100%;}
.indexnews  a.btn2 p {font-size: 100%;}

a.btn2 { display: block; position: relative; width: max-content; height: auto; border: solid 3px #fff; padding: 3px; margin-left: auto; margin-right: auto;}
a.btn2 p { display: block; border: solid 1px #fff; padding: 1vw 6vw; text-align: center; font-size: 160%; }
a.btn3 { display: flex; justify-content: center; align-items: center; position: relative; width: max-content; height: auto; border: solid 2px #fff; padding: 3px; margin-left: auto; margin-right: auto; margin: 5vw auto;}
a.btn3 p { display: inline-block; border: solid 1px #fff; padding: 1vw 4vw; text-align: center; font-size: 110%; margin: 0; }
/*
max-content
/system_panel/uploads/images/
*/
.mb3 {margin-bottom: 3vw;}
.mb5 {margin-bottom: 5vw;}
.tac {text-align: center;}

.pc {display: none;}
.sp {display: block;}
}