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

/* font  ///////////////////////*/
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&family=Kaisei+HarunoUmi&family=Yuji+Syuku&display=swap');

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

.ffm2{
font-family: "Bodoni Moda", serif;
font-optical-sizing: auto;
font-weight: 700;
font-style: normal;
}

.ffm3{
font-family: "Bodoni Moda", serif;
font-optical-sizing: auto;
font-weight: 800;
font-style: normal;
}

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

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


/* color  ///////////////////////*/
@text:#6E6667;
@bg:#FFF;

@c1:#ebe1da;
@c2:#ada88c;
@c3:#f5dbd5;
@c4:#9C9C9C;

a{
.tdn;
color:@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:720px;
padding:0 15px;
.center;
}


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


/* canvas  ///////////////////////*/
.canvas:before{
content:"";
.db;
.pa;
top:0;
background:url(../image/texture/bg7.png);
opacity:.3;
width:100%;
height:100%;
}

.canvas{
.pf;
top:0;
width:100%;
height:100vh;
background:@bg;
z-index:0;
}

.cut1{
.pa;
top:-40px;
left:-10px;
width:50%;
max-width:320px;
.as(1/1.3);
background:@c3;
-webkit-mask-image:url(image/cut1.png);
-webkit-mask-repeat: no-repeat;
-webkit-mask-size:cover;
mask-image:url(image/cut1.png);
mask-repeat: no-repeat;
mask-size:cover;
}

.cut2{
.pa;
top:-15px;
right:-60px;
width:50%;
max-width:320px;
.as(1/2);
background:@c3;
-webkit-mask-image:url(image/cut2.png);
-webkit-mask-repeat: no-repeat;
-webkit-mask-size:cover;
mask-image:url(image/cut2.png);
mask-repeat: no-repeat;
mask-size:cover;
}

.cut3{
.pa;
bottom:-15px;
left:-15px;
width:50%;
max-width:320px;
.as(1/1);
background:@c3;
-webkit-mask-image:url(image/cut3.png);
-webkit-mask-repeat: no-repeat;
-webkit-mask-size:cover;
mask-image:url(image/cut3.png);
mask-repeat: no-repeat;
mask-size:cover;
}

.cut4{
.pa;
bottom:30px;
right:-15px;
width:50%;
max-width:320px;
.as(1/1);
background:@c3;
-webkit-mask-image:url(image/cut4.png);
-webkit-mask-repeat: no-repeat;
-webkit-mask-size:cover;
mask-image:url(image/cut4.png);
mask-repeat: no-repeat;
mask-size:cover;
}


/* canvas2  ///////////////////////*/
.canvas2:before{
content:"";
.db;
.pa;
top:0;
background:url(../image/texture/bg7.png);
opacity:.3;
width:100%;
height:100%;
}

.canvas2{
.pf;
z-index:-1;
inset:0;
width:100%;
height:100vh;
background:@c1;
}

.canvas2 .cut1{
.pa;
top:-40px;
left:-10px;
width:50%;
max-width:320px;
.as(1/1.3);
background:#fffcf5;
-webkit-mask-image:url(image/cut1.png);
-webkit-mask-repeat: no-repeat;
-webkit-mask-size:cover;
mask-image:url(image/cut1.png);
mask-repeat: no-repeat;
mask-size:cover;
}

.canvas2 .cut2{
.pa;
top:-15px;
right:-60px;
width:50%;
max-width:320px;
.as(1/2);
background:#fffcf5;
-webkit-mask-image:url(image/cut2.png);
-webkit-mask-repeat: no-repeat;
-webkit-mask-size:cover;
mask-image:url(image/cut2.png);
mask-repeat: no-repeat;
mask-size:cover;
}

.canvas2 .cut3{
.pa;
bottom:-15px;
left:-15px;
width:50%;
max-width:320px;
.as(1/1);
background:#fffcf5;
-webkit-mask-image:url(image/cut3.png);
-webkit-mask-repeat: no-repeat;
-webkit-mask-size:cover;
mask-image:url(image/cut3.png);
mask-repeat: no-repeat;
mask-size:cover;
}

.canvas2 .cut4{
.pa;
bottom:30px;
right:-15px;
width:50%;
max-width:320px;
.as(1/1);
background:#fffcf5;
-webkit-mask-image:url(image/cut4.png);
-webkit-mask-repeat: no-repeat;
-webkit-mask-size:cover;
mask-image:url(image/cut4.png);
mask-repeat: no-repeat;
mask-size:cover;
}


/* top  ///////////////////////*/
.is-active{
--opacity: 1;
}

.char{
.dib;
opacity: var(--opacity, 0);
transition: opacity 0.6s cubic-bezier(0.77, 0, 0.175, 1);
transition-delay: calc(~"0.1s * var(--char-index)");
}


/* top  ///////////////////////*/
.top{
.pr;
.oh;
width:100%;
height:100vh;

.article{
width:100%;
height:100%;
}

article{
.jc;
width:100%;
height:100%;
}

.contents{
.tac;
z-index:2;
width:100%;
}

.photo{
.center;
width:60%;
.as(1/1);
max-width:320px;
background:@c1;
padding:10px;
}
.photo p{
width:100%;
height:100%;
background:@bg;
}

.title{
.pr;
.tac;
.center;
width:70%;
max-width:320px;
z-index:2;
padding:0 0 30px 0;
line-height:2rem;
.nw;

i{
.oh;
.dib;
}
i, span{
.ffm3;
font-size:2.3rem;
line-height:2.3rem;
letter-spading:.05rem;
}
}


h1{
padding:30px 0 15px 0;
}
h1 p{
.pr;
.nw;
.dib;
.vam;
font-size:1.3rem;
line-height:1.3rem;
letter-spacing:.2rem;
}

h1 p:before{
content:"";
.dib;
.pa;
background:@c2;
-webkit-mask-image:url(../image/ornament/edge3.svg);
-webkit-mask-repeat: no-repeat;
mask-image:url(../image/ornament/edge3.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/edge3.svg);
-webkit-mask-repeat: no-repeat;
mask-image:url(../image/ornament/edge3.svg);
mask-repeat: no-repeat;
width:60px;
right:-70px;
top:.6rem;
.as(1/.1);
}


h2{
padding:15px 0;
}
h2 p{
font-size:3.6rem;
line-height:3.6rem;
transform:scale(1.3, 1);
text-stroke-width: .3px;
text-stroke-color:@text;
-webkit-text-stroke-width: .3px;
-webkit-text-stroke-color:@text;
.ffm4;
.nw;
}

em p{
font-size:1rem;
line-height:1rem;
.ffm2;
.nw;
}

}


/* message  ///////////////////////*/
.message{
.pr;
.oh;
z-index:1;
padding:15px 15px 0 15px;

.article{
max-width:720px;
border:2px @c1 solid;
.center;
}

article{
width:100%;
padding:2px;
}

.contents{
.pr;
.center;
padding:60px 10px 130px 10px;
background:rgba(255,255,255, .6);
box-shadow: inset 0px 0px 0 0px rgba(255, 255, 255, 1);
}

.guest_name{
.tac;
span{
font-size:1.3rem;
line-height:2rem;
padding:0 10px;
}
}

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

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

}


/* date  ///////////////////////*/
.date{
.pr;
.oh;
z-index:1;
margin:-75px auto 0 auto;
color:#FFF;

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

.article{
.tac;
.center;
width:80%;
max-width:480px;
border:2px @c4 solid;
padding:3px;
background:#FFF;
}

article{
padding:60px 10px 30px 10px;
background:@c4 url(../image/texture/bg7.png);
}

.contents{
padding:30px 0 0 0;
}

.day p{
.nw;
font-size:1.3rem;
line-height:1.3rem;
padding:0 0 15px 0;
}

.event{
.nw;
padding:15px 0;
.oh;
}
.event p{
.pr;
font-size:1.3rem;
line-height:1.3rem;
.dib;
}

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

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

.time p{
.nw;
font-size:1.15rem;
line-height:1.5rem;
padding:0 0 30px 0;
}

}


/* count  ///////////////////////*/
.count{
.pr;
.oh;
.tac;
z-index:1;
padding:75px 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:75px auto 0 auto;
}

.title{

h2 p{
font-size:1.5rem;
padding:0 0 15px 0;
letter-spacing:.3rem;
}
h3{
line-height:1rem;
}
h3 em{
font-size:4.5rem;
line-height:4.5rem;
padding:0 10px 0 0;
.ffm3;
}
h3 p{
font-size:2rem;
line-height:2rem;
}
}

.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 30px 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:30px auto 0 auto;
background:@c2;
}

.contents{
padding:45px 0 0 0;

ul{
.dt;
.center;
}
li{
.tac;
.dtc;
padding:0 15px;
}
}

.timer{
p{
font-size:.85rem;
}
em{
.db;
font-size:2.5rem;
line-height:2.5rem;
padding:0 0 15px 0;
.ffm3;
}
}

}



/* host  ///////////////////////*/
.host{
.pr;
.oh;
.tac;
z-index:1;
padding:5px 0;
color:@text;

.article{
padding:75px 0;
clip-path: polygon(0 0,0 100%,100% 100%,100% 0);
}

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

.contents{
padding:30px 15px 0 15px;
}

.profile{
.cr;
}

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

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

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

.data{
max-width:300px;
}

h4 p{
padding:10px 0;
font-size:.8rem;
}
.name{
font-size:1.3rem;
}

.photo{
padding:5px;
background:rgba(255,255,255,.6);
}
.photo p{
.pr;
.oh;
width:100%;

padding-top:100%;
}
.photo img{
.of;
.pa;
top:0;
left:0;
}

.comment{
.cr;
}

.sign{
.pr;
padding:60px 0 15px 0;
font-size:3rem;
line-height:3rem;
.ffm4;
color:@text;
text-stroke-width: .3px;
text-stroke-color:@text;
-webkit-text-stroke-width: .3px;
-webkit-text-stroke-color:@text;
margin-left:-45px;
}
.sign:after{
content:"";
.pa;
background:@text;
-webkit-mask-image:url(../image/cut/hand1.svg?001);
-webkit-mask-repeat: no-repeat;
mask-image:url(../image/cut/hand1.svg?001);
mask-repeat: no-repeat;
width:75px;
.as(1/.6);
bottom:30px;
margin-left:5px;
}

.text{
.db;
.tal;
line-height: 3em;
background: repeating-linear-gradient(transparent 0, transparent 97%, #FFF 100%);
background-size:100% 2rem;
line-height:2rem;
}

}



/* venue  ///////////////////////*/
.venue{
.pr;
.oh;
.tac;
z-index:10;
padding:75px 0;


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

.contents{
padding:45px 15px 0 15px;
}

.event{
.nw;
.oh;
padding:0 0 15px 0;
}
.event p{
.pr;
.dib;
font-size:1.5rem;
line-height:1.5rem;
}

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

.event p:after{
content:"";
.dib;
background:@c1;
-webkit-mask-image:url(../image/ornament/edge6.svg);
-webkit-mask-repeat: no-repeat;
mask-image:url(../image/ornament/edge6.svg);
mask-repeat: no-repeat;
width:60px;
.as(1/.3);
.vam;
.pa;
right:-70px;
top:.3rem;
}

.place{
padding:15px 0;
}
.place p{
font-size:1.45rem;
line-height:1.75rem;
}
.time{
padding:0 0 15px 0;
}
.time p{
padding:5px 0;
}
.tel p{
.dib;
.vam;
font-size:1.45rem;
line-height:1.45rem;
padding:0 0 10px 0;
letter-spacing:.1rem;
}
.tel:before{
content:"";
width:1rem;
height:1rem;
margin:0 5px 2px 0;
.dib;
-webkit-mask-image:url(../../image/icon/tel.svg);
-webkit-mask-repeat: no-repeat;
-webkit-mask-size:contain;
mask-image:url(../../image/icon/tel.svg);
mask-repeat: no-repeat;
mask-size:contain;
background:@text;
}
.tel small{
.db;
padding:0 0 15px 0;
}
.url p{
font-size:1.15rem;
line-height:1.15rem;
padding:0 0 15px 0;
}
.map{
margin:15px 0 0 0;
border:2px @c4 solid;
}
iframe{
border:0;
width:100%;
height:50vw;
max-height:300px;
}
.map p{
color:#FFF;
padding:10px 0;
line-height:1.5rem;
background:rgba(255,255,255, .5);
box-shadow: inset 0px 0px 0px 0px rgba(255, 255, 255, 0);
background:@c4;
}

.access{
margin:15px 0 0 0;
padding:15px;
background:rgba(255,255,255, .75);
box-shadow: inset 0px 0px 0px 0px rgba(255, 255, 255, 0);
}
.access p{
.tal;
font-size:.85rem;
line-height:1.45rem;
}

.venue2{
padding:60px 0 0 0;
}
.venue3{
padding:60px 0 0 0;
}

}


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


/* request  ///////////////////////*/
.request{
.pr;
.oh;
.tac;
color:@text;
padding:5px 0;
background:rgba(255,255,255,.85);

.article{
padding:75px 0;
clip-path: polygon(0 0,0 100%,100% 100%,100% 0);
}

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

.contents{
padding:0 15px;
}

dl{
.pr;
padding:45px 0 15px 0;
}
dl:after{
content:"";
.pa;
.dib;
.vam;
background:#FFF;
-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:25px 0 0 -5px;
}

dd{
line-height:1.6rem;
}

}


/* responce  ///////////////////////*/
.responce{
.pr;
.oh;
.tac;
z-index:1;
padding:75px 0 45px 0;

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

.contents{
padding:45px 15px 0 15px;
}
.text{
line-height:2rem;
}
em{
.dib;
padding:0 1px 0 5px;
font-size:1.3rem;
}

}


/* form  ///////////////////////*/
.form{
.pr;
color:@text;
padding:0 15px;

article{
padding:0 15px 45px 15px;
background:rgba(255,255,255, .85);
box-shadow: inset 0px 0px 30px 0px rgba(255, 255, 255, 1);
border-top:6px @c4 solid;
border-bottom:6px @c4 solid;
}

.submit a{
background:@c2 url(../image/texture/bg4.png);
color:#FFF;
}
.submit p{
font-size:1.45rem;
line-height:1.45rem;
}
.submit a:hover{
background:@c4 url(../image/texture/bg4.png);
}

}


/* 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 @text solid;
border-right:2px @text solid;
}
}