@charset "utf-8";
@import (once) "../css/default.less";


/* eachtext バグ解除  ///////////////////////*/
.map{
.dn;
}

/* font  ///////////////////////*/
@import url('https://fonts.googleapis.com/css2?family=Cormorant+SC:wght@300;400;500;600;700&family=Shippori+Mincho&family=Mrs+Saint+Delafield&display=swap');

.ffm{
font-family: "Shippori Mincho", serif;
font-weight: 400;
font-style: normal;
}

.ffm2{
font-family: "Mrs Saint Delafield";
font-weight: 400;
font-style: normal;
}

.ffm3{
font-family: "Cormorant SC", serif;
font-weight: 400;
font-style: normal;
}

@font-face {
font-family: "script";
src: url("../../css/font/script1.woff2") format('woff2');
}

.ffm4{
font-family: "script";
font-weight:500;
}


/* color  ///////////////////////*/
@text:#111;
@bg:#4d9bdb;

@c1:#054BA0;
@c2:#deca6f;
@c3:#4d9bdb;
@c4:#A2EAF2;

a{
.tdn;
color:@text;
}

/* close  ///////////////////////*/
.desklist dd:before{
background:@text;
}

/* body  ///////////////////////*/
body{
background:@bg;
color:@text;
}

body,div,td,th,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,address,a,p,sup,em,s.i,small,span{
.ffm;
}

.contents{
max-width:@w2;
.center;
}


/* anime  ///////////////////////*/
.zoom{
opacity:0;
}
.fade{
opacity:0;
}
.flip{
opacity:0;
}


/* canvas  ///////////////////////*/
.canvas{
.pf;
top:0;
left:0;
width:100%;
height:100vh;
background:url(image/bg3.jpg) no-repeat 50% 100%;
background-size:cover;
z-index:-1;
filter:blur(0px) contrast(80%) brightness(115%);
}

.canvas2{
background:url(image/bg4.jpg) no-repeat 50% 0% !important;
background-size:cover !important;
filter:blur(0px) contrast(80%) brightness(115%);
}


/* particle  ///////////////////////*/
.particle{
.pf;
top:0;
width:100%;
height:100vh;
z-index:0;
pointer-events:none;
}

.particle2{
.pf;
top:0;
width:100%;
height:90vh;
z-index:10;
pointer-events:none;
}


/* top  ///////////////////////*/
.top{
.pr;
.oh;


.article{
.pr;
.jc;
height:90vh;
}

.title{
.pr;
.center;
max-width:780px;

svg{
width:100%;
height:auto;
/* filter:invert(); */
filter: drop-shadow(0 0 10px #FFF) drop-shadow(0 0 8px #FFF) drop-shadow(0 0 6px #FFF) drop-shadow(0 0 4px #FFF);
}
}

.contents{
.tac;
padding:0 0 4rem 0
}

h1{
padding:2rem 0 1rem 0;
filter: drop-shadow(0 0 10px #FFF) drop-shadow(0 0 8px #FFF) drop-shadow(0 0 6px #FFF) drop-shadow(0 0 4px #FFF);
}
h1 p{
.pr;
.nw;
.dib;
.vam;
font-size:1.3rem;
line-height:1.3rem;
letter-spacing:.1rem;
}

h1 p:before{
content:"";
.dib;
.pa;
background:@c2;
-webkit-mask-image:url(../image/ornament/edge2.svg);
-webkit-mask-repeat: no-repeat;
mask-image:url(../image/ornament/edge2.svg);
mask-repeat: no-repeat;
width:60px;
left:-70px;
.as(1/.1);
top:.6rem;
transform:scale(-1,1);
}

h1 p:after{
content:"";
.dib;
.pa;
background:@c2;
-webkit-mask-image:url(../image/ornament/edge2.svg);
-webkit-mask-repeat: no-repeat;
mask-image:url(../image/ornament/edge2.svg);
mask-repeat: no-repeat;
width:60px;
right:-70px;
top:.6rem;
.as(1/.1);
}

h2{
padding:1rem 0;
filter: drop-shadow(0 0 10px #FFF) drop-shadow(0 0 8px #FFF) drop-shadow(0 0 6px #FFF) drop-shadow(0 0 4px #FFF);
}
h2 p{
.ffm3;
font-size:1.75rem;
line-height:1.75rem;
.nw;
}
em p{
.ffm3;
font-size:1.15rem;
line-height:1.15rem;
.nw;
filter: drop-shadow(0 0 10px #FFF) drop-shadow(0 0 8px #FFF) drop-shadow(0 0 6px #FFF) drop-shadow(0 0 4px #FFF);
}

}


/* message  ///////////////////////*/
.message{
.pr;
.oh;
z-index:1;
padding:1rem;

.contents{
.pr;
.center;
padding:7rem 1rem 7rem 1rem;
background:rgba(255,255,255, .75);
box-shadow: inset 0px 0px 30px 0px rgba(255, 255, 255, 1);
}

.guest_name{
.tac;
span{
font-size:1.45rem;
line-height:1.6rem;
padding:0 .5rem;
}
}

.text p{
.tac;
padding:2rem 0;
line-height:2rem;
}

.host_name p{
.tac;
font-size:1.3rem;
line-height:1.75rem;
}

}


/* seating  ///////////////////////*/
.seating{
.pr;
.oh;
.tac;
z-index:1;
padding:7rem 0;

article:after{
content:"";
.db;
background:@c2;
-webkit-mask-image:url(../image/ornament/object1.svg);
-webkit-mask-repeat: no-repeat;
mask-image:url(../image/ornament/object1.svg);
mask-repeat: no-repeat;
width:100px;
.as(2.6/1);
margin:5rem auto 0 auto;
}

.title{
h2 p{
.ffm3;
font-size:3rem;
line-height:3rem;
filter: drop-shadow(0 0 10px #FFF) drop-shadow(0 0 8px #FFF) drop-shadow(0 0 6px #FFF) drop-shadow(0 0 4px #FFF);
}
em p{
padding:1rem 0 0 0;
font-size:1.5rem;
line-height:1.5rem;
filter: drop-shadow(0 0 10px #FFF) drop-shadow(0 0 8px #FFF) drop-shadow(0 0 6px #FFF) drop-shadow(0 0 4px #FFF);
}
}

.title:before{
content:"";
.db;
width:160px;
aspect-ratio:20/1;
-webkit-mask-image:url(../image/ornament/line2.svg);
-webkit-mask-repeat:no-repeat;
-webkit-mask-position: center;
-webkit-mask-size:contain;
mask-image:url(../image/ornament/line2.svg);
mask-repeat:no-repeat;
mask-position: center;
mask-size:contain;
margin:0 auto 3rem auto;
background:@c2;
}
.title:after{
content:"";
.db;
width:160px;
aspect-ratio:20/1;
-webkit-mask-image:url(../image/ornament/line2.svg);
-webkit-mask-repeat:no-repeat;
-webkit-mask-position: center;
-webkit-mask-size:contain;
mask-image:url(../image/ornament/line2.svg);
mask-repeat:no-repeat;
mask-position: center;
mask-size:contain;
margin:2rem auto 0 auto;
background:@c2;
}

.contents{
padding:3rem 1rem 0 1rem;
}

.memo{
.tal;
padding:1rem 0 0 0;
font-size:.85rem;
max-width:720px;
.center;
filter: drop-shadow(0 0 10px #FFF) drop-shadow(0 0 8px #FFF) drop-shadow(0 0 6px #FFF) drop-shadow(0 0 4px #FFF);
}

}


/* desk ///////////////////////*/
.desk{

header{
padding:5rem 0 2rem 0;

h3 p{
.tac;
.ffm3;
font-size:1.75rem;
filter: drop-shadow(0 0 10px #FFF) drop-shadow(0 0 8px #FFF) drop-shadow(0 0 6px #FFF) drop-shadow(0 0 4px #FFF);
}
em p{
.tac;
font-size:.9rem;
padding:1rem 0 0 0;
filter: drop-shadow(0 0 10px #FFF) drop-shadow(0 0 8px #FFF) drop-shadow(0 0 6px #FFF) drop-shadow(0 0 4px #FFF);
}
}

.wrap{
padding:1rem 0 2rem 0;
background:rgba(255,255,255, .75);
box-shadow: inset 0px 0px 30px 0px rgba(255, 255, 255, 1);
}

}


/* floor ///////////////////////*/
.floor{

header{
padding:2rem 0;

h3 p{
.tac;
.ffm3;
font-size:1.75rem;
filter: drop-shadow(0 0 10px #FFF) drop-shadow(0 0 8px #FFF) drop-shadow(0 0 6px #FFF) drop-shadow(0 0 4px #FFF);
}
em p{
.tac;
font-size:.9rem;
padding:1rem 0 0 0;
filter: drop-shadow(0 0 10px #FFF) drop-shadow(0 0 8px #FFF) drop-shadow(0 0 6px #FFF) drop-shadow(0 0 4px #FFF);
}
}

.wrap{
background:rgba(255,255,255, .75);
box-shadow: inset 0px 0px 30px 0px rgba(255, 255, 255, 1);
}

}


/* desklist ///////////////////////*/
.desklist{

dl{
.dn;
.pf;
top:0;
left:0;
z-index:3;
opacity:0;
transition:1s;
background:rgba(3, 67, 145, .85);
background:rgba(255, 255, 255, .85);
background:@c4 url(../image/texture/bg5.png);
width:100%;
height:100%;
padding:0 0 7rem 0;
}

dd{
.pr;
width:100%;
height:100%;
display:flex;
align-items:center;
padding:0 15px;
}
.desk{
flex:1;
width:100%;
padding:0 0 120px 0;

h3 p{
font-size:4.5rem;
line-height:4.5rem;
}
em p{
.tac;
font-size:.85rem;
line-height:.85rem;
padding:10px 0 0 0;
}
}

.desk svg .num{
.dn;
}

.chart{
background:transparent;
}

}


/* svg ///////////////////////*/
.desk svg,
.floor svg{
filter: drop-shadow(0 0 10px #FFF) drop-shadow(0 0 8px #FFF) drop-shadow(0 0 6px #FFF) drop-shadow(0 0 4px #FFF);

.text1{
fill:@text;
font-size:7px;
}
.text2{
fill:@text;
font-size:11px;
}
.text3{
fill:@text;
font-size:7px;
text-anchor:middle;
}
.text4{
fill:@text;
font-size:11px;
text-anchor:middle;
}
.num{
.ffm3;
fill:rgba(255,255,255,1);
font-size:47px;
text-anchor:middle;
}
.object{
fill:@c3;
}
.active{
fill:@c2;
}
a{
text-decoration:none;
}


.image{
.dn;
}
.object{
.ds;
}


}


/* menu  ///////////////////////*/
.menu{
.pr;
.oh;
.tac;
z-index:1;
padding:7rem 0 7rem 0;
color:@text;
background:rgba(255,255,255,.5);

.title p{
font-size:3rem;
line-height:3rem;
.ffm3;
}

.contents{
padding:3rem 1rem 1rem 1rem;
}

.food, .drink{

header{
.dn;
padding:1rem 0 2rem 0;
}
h3 p{
font-size:2rem;
}
em p{
padding:1rem 0 0 0;
font-size:1.2rem;
}
}


.food{
padding:10px;
background:rgba(255, 255, 255, .5);
}

.drink{
margin:1rem 0 0 0;
padding:10px;
background:rgba(255, 255, 255, .5);
}

dl{
padding:1rem 1rem 3rem 1rem;
background:rgba(255, 255, 255, .5);
}

dt{
.pr;
padding:5rem 0 0 0;
}
dt p{
.ffm3;
font-size:1.3rem;
}
dt:before{
content:"";
.pa;
top:35px;
left:0;
right:0;
.center;
.db;
background:@c2;
-webkit-mask-image:url(../image/ornament/line3.svg);
-webkit-mask-repeat: no-repeat;
mask-image:url(../image/ornament/line3.svg);
mask-repeat: no-repeat;
width:75px;
.as(1/1);
}
dt:first-child{
padding:2rem 0 0 0;
}
dt:first-child:before{
.dn;
}

dd{
padding:1rem 0 0 0;
}
dd p{
line-height:1.5rem;
}


.image{
.pr;
padding:1rem 0 0 0;
}

.memo{
.tal;
padding:1rem 0 0 0;
p{
font-size:.85rem;
line-height:1.3rem;
}
}

}



/* profile ///////////////////////*/
.profile{
.pr;
.oh;
.tac;
padding:7rem 0 7rem 0;
background:@c1 url(../image/texture/bg12.png);
color:#FFF;

.title p{
font-size:3rem;
line-height:3rem;
.ffm3;
}

.contents{
padding:3rem 1rem 0 1rem;
}

.data{
max-width:260px;
.center;

h4 p{
.ffm4;
font-size:2.3rem;
line-height:2.3rem;
text-stroke-width: .3px;
text-stroke-color:#FFF;
-webkit-text-stroke-width: .3px;
-webkit-text-stroke-color:#FFF;
padding:1rem 0;
}
.name{
.pr;
font-size:1.15rem;
padding:0 0 1rem 0;
}
span{
font-size:.85rem;
line-height:1.6rem;
}
}

.sns{
padding:1rem 0 0 0;

ul{
.dt;
.center;
}
li{
.dtc;
padding:3px;
}
img{
width:25px;
filter:invert();
}
a{
.pr;
.jc;
}
a:before{
content:"";
.db;
.pa;
width:200%;
height:200%;
.r(50%);
box-shadow: inset 0px 0px 10px 0px rgba(255, 255, 255, .75);
}
}

}


/* profile photo ///////////////////////*/
.profile{

.host1{
opacity:0;
.dib;
.tac;
.left;
width:50%;
padding:0 .5rem 0 0;
}

.host2{
opacity:0;
.dib;
.tac;
.right;
width:50%;
padding:0 0 0 .5rem;
}

.host3{
opacity:0;
.tac;
.dib;
.center;
width:80%;
}

.photo{
.pr;
width:100%;
.as(1/1);
background:#FFF;
padding:5px;
}
.photo p{
.oh;
width:100%;
height:100%;
}
.photo img{
.of;
width:100%;
height:100%;
}

}


/* gallery  ///////////////////////*/
.gallery{
.pr;
z-index:1;
background:@c1;
clip-path: polygon(0 0,0 100%,100% 100%,100% 0);
width:100%;
min-height:100vh;
padding:100vh 0 0 0;

.bg{
top: 0;
width:100%;
height:100vh;
position:fixed;
opacity:.8;
filter: grayscale(100%);
}

}


/* memory ///////////////////////*/
.memory .article{
.pf;
z-index:-1;
inset:0;
width:100%;
height:100vh;
background:@c1;
background:rgba(5, 75, 160, .75);
}


/* memory ///////////////////////*/
.memory{
.pr;
.oh;
.tac;
height:100vh;
z-index:2;
clip-path: polygon(0 0,0 100%,100% 100%,100% 0);
color:#FFF;

.triggar{
.db;
height:8vh;
pointer-events:none;
}

.shadow{
.pa;
width:100vw;
height:100vh;
z-index:2;
box-shadow: inset 0px 0px 100px 0 rgba(255, 255, 255, .6);
pointer-events:none;
}

article{
.pa;
.jc;
width:100vw;
height:100vh;
}

.title{

h3 p{
.ffm4;
font-size:4.5rem;
line-height:4.5rem;
text-stroke-width: .3px;
text-stroke-color:＠text;
-webkit-text-stroke-width: .3px;
-webkit-text-stroke-color:＠text;
}
p{
line-height:2rem;
}
}


ul{
.pr;
.db;
width:116vw;
max-width:860px;
margin-left:-8vw;
.nw;
}

li{
.dib;
width:33%;
max-width:230px;
}

dt{
background:#FFF;
padding:5px;
opacity:0;

p{
.jc;
.as(1/1);
}
p:before{
content:"";
.db;
.pa;
width:120%;
height:120%;
z-index:2;
.r(50%);
box-shadow: inset 0px 0px 30px 0px rgba(255, 255, 255, 1),  inset 0px 0px 5px 0px rgba(255, 255, 255, 1);
}
img{
.of;
width:100%;
height:100%;
}
}


.host1{
.pa;
top:0;

li:nth-child(even) dt{
transform:rotate(10deg);
}
li:nth-child(odd) dt{
transform:rotate(-5deg);
}

li:nth-child(4){
.pa;
left:-5vw;
top:20vh;
}
li:nth-child(5){
.pa;
left:-10vw;
top:40vh;
}
li:nth-child(6){
.pa;
left:-5vw;
top:60vh;
}
}


.host2{
.pa;
bottom:0;

li:nth-child(odd) dt{
transform:rotate(10deg);
}
li:nth-child(even) dt{
transform:rotate(-5deg);
}

li:nth-child(4){
.pa;
right:-10vw;
bottom:20vh;
}
li:nth-child(5){
.pa;
right:-15vw;
bottom:40vh;

}
li:nth-child(6){
.pa;
right:-10vw;
bottom:60vh;
}
}


dd{
.dn;
transition:1s;
background:rgba(255,255,255,.95);
background:#F7DF8E;
background:@c2 url(../image/texture/bg15.png);
width:100%;
height:100%;
.pf;
top:0;
left:0;
z-index:99;
opacity:0;
}

dd:before{
content:"";
.db;
width:60%;
max-width:320px;
.as(1/.5);
background:#FFF;
-webkit-mask-image:url(../image/cut/star1.svg);
-webkit-mask-repeat: no-repeat;
-webkit-mask-size:contain;
mask-image:url(../image/cut/star1.svg);
mask-repeat: no-repeat;
mask-size:contain;
.pa;
top:50%;
right:0;
left:0;
margin:-40vh auto 0 auto;
z-index:0;
pointer-events:none;
}

dd:after{
content:"";
.db;
width:60%;
max-width:320px;
.as(1/.5);
background:#FFF;
-webkit-mask-image:url(../image/cut/star2.svg);
-webkit-mask-repeat: no-repeat;
-webkit-mask-size:contain;
mask-image:url(../image/cut/star2.svg);
mask-repeat: no-repeat;
mask-size:contain;
.pa;
top:50%;
right:0;
left:0;
margin:20vh auto 0 auto;
z-index:0;
pointer-events:none;
}

.wrap{
width:100%;
height:100%;
.db;
.jc;
.pr;
}

.photo{
width:80%;
padding:5px;
background:#FFF;

p{
padding:1rem;
color:@text;
line-height:1.45rem;
}
}

}


/* question  ///////////////////////*/
.question{
.pr;
.tac;
.oh;
padding:4rem 0 1rem 0;

header{
.pr;
padding:4rem 0 0 0;
}

header:before{
content:"";
.pa;
top:4rem;
left:0;
right:0;
.center;
.db;
width:75px;
background:@c1 url(../image/texture/bg12.png);
.as(1/1);
}

header:after{
content:"";
.pa;
top:4rem;
left:0;
right:0;
.center;
.db;
-webkit-mask-image:url(../image/icon/profile1.svg);
-webkit-mask-repeat:no-repeat;
-webkit-mask-position: -25px 5px;
-webkit-mask-size:145%;
mask-image:url(../image/icon/profile1.svg);
mask-repeat:no-repeat;
mask-position: -25px 5px;
mask-size:145%;
background:#FFF;
width:75px;
.as(1/1);
}

.q2 header:after{
-webkit-mask-image:url(../image/icon/profile2.svg);
-webkit-mask-repeat:no-repeat;
-webkit-mask-position: 5px 5px;
mask-image:url(../image/icon/profile2.svg);
mask-repeat:no-repeat;
mask-position: 5px 5px;
}
.q3 header:after{
-webkit-mask-image:url(../image/icon/profile3.svg);
-webkit-mask-repeat:no-repeat;
-webkit-mask-position: 5px 10px;
mask-image:url(../image/icon/profile3.svg);
mask-repeat:no-repeat;
mask-position: 5px 10px;
}
.q4 header:after{
-webkit-mask-image:url(../image/icon/profile4.svg);
-webkit-mask-repeat:no-repeat;
-webkit-mask-position: -5px -15px;
mask-image:url(../image/icon/profile4.svg);
mask-repeat:no-repeat;
mask-position: -5px -15px;
}

h3 p{
padding:6rem 0 3rem 0;
font-size:1.15rem;
filter: drop-shadow(0 0 10px #FFF) drop-shadow(0 0 8px #FFF) drop-shadow(0 0 6px #FFF) drop-shadow(0 0 4px #FFF);
}

dl{
margin:0 1rem;
border-top:1px #FFF  dotted;
}

dt p{
.db;
cursor:pointer;
padding:1rem 0;
filter: drop-shadow(0 0 10px #FFF) drop-shadow(0 0 8px #FFF) drop-shadow(0 0 6px #FFF) drop-shadow(0 0 4px #FFF);
}
dt a{
.jc;
.pr;
border-bottom:1px #FFF dotted;
}
dt a:before{
content:"";
.db;
.pa;
width:80px;
.as(1/1);
.r(50%);
box-shadow: inset 0px 0px 30px 0px rgba(46, 164, 242, 1), inset 0px 0px 10px 0px rgba(46, 164, 242, 1), inset 0px 0px 5px 0px rgba(46, 164, 242, 1);
}

}


/* question 回答  ///////////////////////*/
.question{

dd{
.dn;
.pf;
top:0;
left:0;
opacity:0;
transition:1s;
background:rgba(0,0,0,.85);
background:@c1 url(../image/texture/bg12.png);
width:100%;
height:100vh;
z-index:9;
}

.wrap{
width:100%;
height:100%;
.db;
.pr;
}

.text{
.pa;
width:60%;
z-index:1;
padding:1rem;

em{
.tal;
.ffm4;
.db;
font-size:3rem;
color:#FFF;
text-stroke-width: .3px;
text-stroke-color:#FFF;
-webkit-text-stroke-width: .3px;
-webkit-text-stroke-color:#FFF;
padding:2rem 0 1rem 0;
margin:0 0 1rem 0;
border-bottom:1px #FFF solid;
}
p{
.db;
.tal;
color:#FFF;
font-size:1.15em;
line-height:1.4em;
}
}

.photo{
.pa;
top:0;
width:50%;
height:50vh;
z-index:0;
/* filter:grayscale(100%); */

img{
.of;
width:100%;
height:100%;
}
}

.host1,
.host3{
.pa;
top:0;
left:0;
width:100%;
height:50%;

.text{
right:0;
bottom:10%;
}
img{
clip-path: polygon(0 0, 100% 0, 70% 94%, 0 100%);
}
}

.host2{
.pa;
.tac;
width:100%;
height:50%;
bottom:0;
right:0;

.text{
left:0;
}
.photo{
right:0;
}
img{
clip-path: polygon(30% 6%, 100% 0, 100% 100%, 0 100%);
}
}

}


/* requests  ///////////////////////*/
.request:before,
.request:after{
content:"";
.db;
height:5px;
background:@c2;
-webkit-mask-image:url(../image/ornament/line2.svg);
mask-image:url(../image/ornament/line2.svg);
}



/* request  ///////////////////////*/
.request{
.pr;
.oh;
.tac;
color:@text;
margin:7rem 0 0 0;
padding:5px 0;
background:@c4 url(../image/texture/bg12.png);
margin-top:7rem;

.article{
padding:7rem 0;
}

.title p{
font-size:3rem;
line-height:3rem;
.ffm3;
}

.contents{
padding:0 1rem;
}

dl{
.pr;
padding:3rem 0 1.5rem 0;
}
dl:after{
content:"";
.pa;
.dib;
.vam;
background:@c2;
-webkit-mask-image:url(../image/ornament/point1.svg);
-webkit-mask-repeat: no-repeat;
mask-image:url(../image/ornament/point1.svg);
mask-repeat: no-repeat;
width:10px;
.as(1/1);
margin:2rem 0 0 -5px;
}

dd{
line-height:1.6rem;
}

}



/* event  /////////////////////// */
.event{

.title p{
font-size:3rem;
line-height:3rem;
.ffm3;
}

}


/* footer  ///////////////////////*/
.footer{
.pr;
.tac;
padding:45vh 0 45vh 0;

.logo{
.center;
width:120px;
.as(1/.6);
background:@text;
-webkit-mask-image:url(../../image/logo.svg);
-webkit-mask-repeat:no-repeat;
-webkit-mask-size:contain;
mask-image:url(../../image/logo.svg);
mask-repeat:no-repeat;
mask-size:contain;
}

.copy{
.ffg;
font-size:.8rem;
}

}


.pagetop{
a:before{
border-top:2px #FFF solid;
border-right:2px #FFF solid;
}
}