@charset "UTF-8";

/* ------------------------------------------- CSS Information 
 Style Info:     ブラウザスタイルのリセット設定
----------------------------------------------------------- */  
html{overflow-y:scroll;} 
body,div,blockquote,pre,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,table,th,td,form,input,textarea,fieldset{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;}   
img,abbr,acronym,fieldset{border:none;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;}
hr,legend{display:none;}
object,embed{vertical-align:top;}
li{list-style:none;}

/* ------------------------------------------- CSS Information 
 Style Info:     基本設定
----------------------------------------------------------- */
/*A Style*/  
a:link{text-decoration:underline;color:#666666;}
a:visited{text-decoration:none;color:#66666;}
a:hover{text-decoration:underline;color:#999999;}
a:active{text-decoration:none;color:#66666;}

/*font*/
.b{font-weight:bold;}
.ul{text-decoration:underline;}
.bg{background-color:#fff45c;}
.big{font-size:17px;}@media only screen and (max-width:750px){.big{font-size:15px;}}
.small{font-size:14px;}@media only screen and (max-width:750px){.small{font-size:12px;line-height:20px;}}
.red{color:#d2af36;}

/*----- image -----*/
.img960{width:100%;max-width:960px;margin:0 auto;}
.img750{width:100%;max-width:750px;margin:0 auto;}
.pc{display:block;}
.sp{display:none;}
@media only screen and (max-width:750px){
.pc{display:none;}
.sp{display:block;}
span.sp{display:inline-block;}
}

/* ----------------------- CSS Information 
 Style Info: HTML/BODY
--------------------------------------- */
html,body{
width:100%;
height:100%;
margin:0;
padding:0;
font-family:"メイリオ",Osaka,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",Arial,Sans-Serif;
color:#333333;
font-size:16px;
line-height:0;
text-align:center;
background:#f6f6f5;
letter-spacing:0em;
min-height:100%;
position:relative;
box-sizing:border-box;
}

/* ----------------------- CSS Information 
 Style Info: LOADING
--------------------------------------- */
#loading{
position:relative;
width:100%;
height:100%;
margin:0;
padding:0;
text-align:center;
background:#f6f6f5;
box-sizing:border-box;
overflow:hidden;
}
.loading_text{
z-index:10;
position:absolute;
width:100%;
height:100%;
margin:auto;
padding:0;
top:0;
bottom:0;
left:0;
right:0;
background-repeat:no-repeat;
background-position:center;
animation:loading_text 1s both;
opacity:0;
}
.loading_text.src1{background-image:url(../img/loading_text01_pc.png);animation-delay:1s;}
.loading_text.src2{background-image:url(../img/loading_text02_pc.png);animation-delay:3s;}
.loading_text.src3{background-image:url(../img/loading_text03_pc.png);animation-delay:4s;}
.loading_text.src4{background-image:url(../img/loading_text04_pc.png);animation-delay:5s;}
.loading_text.src5{background-image:url(../img/loading_text05_pc.png);animation-delay:7s;}
.loading_text.src6{background-image:url(../img/loading_text06_pc.png);animation-delay:8s;}
@keyframes loading_text{0%{opacity:0;}100%{opacity:1;}}
@media only screen and (max-width:750px){
.loading_text{background-size:100% auto;}
.loading_text.src1{background-image:url(../img/loading_text01_sp.png);animation-delay:0s;}
.loading_text.src2{background-image:url(../img/loading_text02_sp.png);animation-delay:2s;}
.loading_text.src3{background-image:url(../img/loading_text03_sp.png);animation-delay:3s;}
.loading_text.src4{background-image:url(../img/loading_text04_sp.png);animation-delay:4s;}
.loading_text.src5{background-image:url(../img/loading_text05_sp.png);animation-delay:6s;}
.loading_text.src6{background-image:url(../img/loading_text06_sp.png);animation-delay:7s;}
.loading_text.src7{background-image:url(../img/loading_text07_sp.png);animation-delay:8s;}
}

/* ----------------------- CSS Information 
 Style Info: MAIN
--------------------------------------- */
#main{width:100%;height:100%;}

/* ----------------------- CSS Information 
 Style Info: HEADER
--------------------------------------- */
header{
margin:0;
padding:0;
width:100%;
height:100%;
box-sizing:border-box;
text-align:center;
position:relative;
overflow:hidden;
background:#000000;
}
img.header_img{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
padding:0 0 60px 0;
width:100%;
max-width:750px;
z-index:10;
}
img.scroll{
position:absolute;
top:0;
bottom:40px;
left:0;
right:0;
margin:auto auto 0 auto;
width:100%;
max-width:375px;
z-index:10;
-webkit-animation:scroll 1.5s infinite 0s linear alternate;
animation:scroll 1.5s infinite 0s linear alternate;
}
@-webkit-keyframes scroll{
0% {-webkit-transform:translate(0, 0) rotate(0deg);}
50% {-webkit-transform:translate(0, -10px) rotate(0deg);}
100% {-webkit-transform:translate(0, 0)rotate(0deg);}
}
@keyframes scroll{
0% {transform:translate(0, 0) rotate(0deg);}
50% {transform:translate(0, -10px) rotate(0deg);}
100% {transform:translate(0, 0)rotate(0deg);}
}

/* ----------------------- CSS Information 
 Style Info: BRAND
--------------------------------------- */
.brand{
margin:0;
padding:0;
width:100%;
box-sizing:border-box;
text-align:center;
position:relative;
overflow:hidden;
background:#000000;
}
.brand_box{
position:relative;
width:100%;
margin:0;
padding:0;
z-index:10;
}
.brand_box.top{
background:-moz-linear-gradient(top,rgba(0,0,0,1),rgba(0,0,0,0.25));
background:-webkit-linear-gradient(top,rgba(0,0,0,1),rgba(0,0,0,0.25));
background:linear-gradient(to bottom,rgba(0,0,0,1),rgba(0,0,0,0.25));
}
.brand_box.bottom{
background:-moz-linear-gradient(top,rgba(0,0,0,0.25),rgba(0,0,0,1));
background:-webkit-linear-gradient(top,rgba(0,0,0,0.25),rgba(0,0,0,1));
background:linear-gradient(to bottom,rgba(0,0,0,0.25),rgba(0,0,0,1));
}
.brand img{
position:relative;
margin:0 auto;
width:100%;
max-width:750px;
z-index:10;
}

/* ----------------------- CSS Information 
 Style Info: INVITE
--------------------------------------- */
#invite{
width:100%;
margin:0;
padding:0;
background:#000000;
}
.invite_wrapper{
position:relative;
display:flex;
align-items:stretch;
width:100%;
height:100%;
margin:0;
padding:0;
}
.invite_box{
width:50%;
margin:0;
padding:80px 0;
box-sizing:border-box;
background-repeat:no-repeat;
background-position:center;
background-size:cover;
}
.invite_box.invite01{background-image:url(../img/invite01_img.png);}
.invite_box.invite02{background-image:url(../img/invite02_img.png);}
.invite_box.invite03{background-image:url(../img/invite03_img.png);}
.invite_box.invite04{background-image:url(../img/invite04_img.png);}
.invite_caption{}
.invite_caption img{width:100%;max-width:375px;margin:0 auto;}
.invite_text{
margin:0 auto;
padding:0 10px;
font-size:15px;
line-height:30px;
color:#f6f6f5;
text-align:center;
box-sizing:border-box;
}
.invite_text p{margin:0;padding:0;}
@media only screen and (max-width:960px){.invite_text{font-size:14px;line-height:24px;}}
@media only screen and (max-width:768px){
#invite{}
.invite_wrapper{display:block;}
.invite_box{width:100%;padding:60px 0;}
.invite_caption{}
.invite_caption img{max-width:750px;}
.invite_text{padding:0 20px;text-align:justify;}
}
@media only screen and (max-width:640px){.invite_text br{display:none;}}

/* ----------------------- CSS Information 
 Style Info: VIDEO
--------------------------------------- */
.videobox{
position:absolute;
top:-50%;
left:-50%;
width:200%;
height:200%;
z-index:1;
}
.videobox video{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
min-width:50%;
min-height:50%;
}
.videobox.video01{background:#000000;}
.videobox.video01 video{opacity:0.5;background:url(../video/video01.png) no-repeat center;background-size:cover;}
.videobox.video02{background:#000000;}
.videobox.video02 video{opacity:0.75;background:url(../video/video02.png) no-repeat center;background-size:cover;}

/* ----------------------- CSS Information 
 Style Info: TITLE
--------------------------------------- */
/*-- title --*/
.title{margin:0;padding:0;}
.title img{margin:0 auto;width:100%;max-width:750px;}
.title_hr{
display:block;
margin:40px auto 40px auto;
padding:0;
width:0;
height:5px;
border:0;
background:
-webkit-radial-gradient(right bottom, ellipse cover,#FEDB37 0%,#FDB931 8%,#9f7928 30%,#8A6E2F 40%,transparent 80%),
-webkit-radial-gradient(left top, ellipse cover,#FFFFFF 0%,#FFFFAC 8%,#D1B464 25%,#5d4a1f 62.5%, #5d4a1f 100%);
background:
radial-gradient(ellipse farthest-corner at right bottom,#FEDB37 0%,#FDB931 8%,#9f7928 30%,#8A6E2F 40%,transparent 80%),
radial-gradient(ellipse farthest-corner at left top,#FFFFFF 0%,#FFFFAC 8%,#D1B464 25%,#5d4a1f 62.5%, #5d4a1f 100%);
}
.title_hr.scrollin{animation:title_hr 0.2s linear 0s both;}
@keyframes title_hr{0%{width:0%;}100%{width:80px;}}
@media only screen and (max-width:750px){
.title{}
.title img{}
.title_hr{margin:30px auto 30px auto;}
@keyframes title_hr{0%{width:0%;}100%{width:60px;}}
}
/*-- title_contents --*/
.title_contents{margin:0;padding:0;}
.title_contents img{margin:0 auto;width:100%;max-width:600px;}
.title_contents_hr{
display:block;
padding:0;
width:0;
height:5px;
border:0;
background:
-webkit-radial-gradient(right bottom, ellipse cover,#FEDB37 0%,#FDB931 8%,#9f7928 30%,#8A6E2F 40%,transparent 80%),
-webkit-radial-gradient(left top, ellipse cover,#FFFFFF 0%,#FFFFAC 8%,#D1B464 25%,#5d4a1f 62.5%, #5d4a1f 100%);
background:
radial-gradient(ellipse farthest-corner at right bottom,#FEDB37 0%,#FDB931 8%,#9f7928 30%,#8A6E2F 40%,transparent 80%),
radial-gradient(ellipse farthest-corner at left top,#FFFFFF 0%,#FFFFAC 8%,#D1B464 25%,#5d4a1f 62.5%, #5d4a1f 100%);
}
.contents_odd .title_contents_hr{margin:40px auto 40px 0;}
.contents_even .title_contents_hr{margin:40px 0 40px auto;}
.title_contents_hr.scrollin{animation:title_contents_hr 0.5s linear 0s both;transform:rotate(0.0001deg);}
@keyframes title_contents_hr{0%{width:0%;}100%{width:-webkit-calc(100% - 30px);width:calc(100% - 30px);}}
@media only screen and (max-width:750px){
.title_contents{margin:0;padding:0;}
.title_contents img{max-width:750px;}
.contents_odd .title_contents_hr{margin:30px auto 30px 0;}
.contents_even .title_contents_hr{margin:30px 0 30px auto;}
@keyframes title_contents_hr{0%{width:0%;}100%{width:-webkit-calc(100% - 20px);width:calc(100% - 20px);}}
}

/* ----------------------- CSS Information 
 Style Info: CONTENTS
--------------------------------------- */
.wrapper{
display:flex;
align-items:flex-start;
width:100%;
margin:0;
padding:0;
position:relative;
box-sizing:border-box;
}
.imgbox{
width:40%;
margin:0;
padding:120px 0;
position:-webkit-sticky;
position:sticky;
top:0;
box-sizing:border-box;
overflow:hidden;
}
.imgbox img{width:100%;}
.textbox{
width:60%;
min-width:660px;
margin:0;
padding:120px 0;
box-sizing:border-box;
overflow:hidden;
}
.text{
width:100%;
max-width:660px;
margin:0 auto;
padding:0 30px;
font-size:16px;
line-height:30px;
text-align:left;
box-sizing:border-box;
}
.text p{margin:0;padding:0 0 30px 0;}
.text p:last-child{margin:0;padding:0;}
.text ul.list00{margin:0 0 30px 0;padding:0;}
.text ul.list00 li{
margin:0;
padding:0;
list-style:none;
}
.text ul.list01{
border:1px solid #e0ce5b;
margin:0 0 30px 0;
padding:30px 20px 10px 20px;
}
.text ul.list01 li{
margin:0;
padding:0 0 20px 25px;
list-style:none;
font-weight:bold;
position:relative;
}
.text ul.list01 li:before,.text ul.list01 li:after{
content:"";
display:block;
position:absolute;
}
.text ul.list01 li:before{
width:16px;
height:16px;
background:#d2af36;
left:0;
top:7px;
}
.text ul.list01 li:after{
border-left:2px solid #ffffff;
border-bottom:2px solid #ffffff;
width:6px;
height:3px;
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg);
left:4px;
top:12px;
}
@media only screen and (max-width:959px){
.wrapper{display:block;}
.imgbox{display:none;}
.contents_img{
display:block;
width:100%;
max-width:670px;
margin:0 auto;
padding:0 20px 30px 20px;
box-sizing:border-box;
}
.textbox{
width:100%;
min-width:320px;
margin:0;
padding:40px 0;
box-sizing:border-box;
}
.text{
width:100%;
padding:0 20px 0 20px;
font-size:14px;
line-height:24px;
text-align:justify;
}
.text p{margin:0;padding:0 0 20px 0;}
.text p:last-child{margin:0;padding:0;}
.text ul.list00{margin:0 0 20px 0;padding:0;}
.text ul.list00 li{font-size:14px;}
.text ul.list01{
margin:10px 0 30px 0;
padding:30px 20px 10px 20px;
}
.text ul.list01 li{}
.text ul.list01 li:before,.text ul.list01 li:after{}
.text ul.list01 li:before{top:4px;}
.text ul.list01 li:after{top:9px;}
.text p br{display:none;}
}
/* -- contents_odd -- */
.contents_odd{
margin:0;
padding:0;
color:#333333;
background:#ffffff;
}
.contents_odd .wrapper{flex-direction:row;}
/* -- contents_even -- */
.contents_even{
margin:0;
padding:0;
color:#333333;
background:#f6f6f9;
}
.contents_even .wrapper{flex-direction:row-reverse;}

/* ----------------------- CSS Information 
 Style Info: STEP
--------------------------------------- */
#step{
margin:0;
padding:120px 0;
background:#000000 url(../img/bg01.png) no-repeat center;
background-size:cover;
}
.date_img{
width:100%;
max-width:960px;
margin:0 auto;
padding:0 30px;
box-sizing:border-box;
}
@media only screen and (max-width:750px){
#step{padding:40px 0;}
.date_img{padding:0 20px;}
}

/* ----------------------- CSS Information 
 Style Info: WISH
--------------------------------------- */
#wish{
margin:0;
padding:120px 0;
background:#f6f6f5 url(../img/bg02.png) no-repeat center;
background-size:cover;
}
#wish img{
width:100%;
max-width:750px;
margin:0 auto;
padding:0;
box-sizing:border-box;
}
@media only screen and (max-width:750px){
#wish{padding:40px 0;}
#wish img{}
}

/* ----------------------- CSS Information 
 Style Info: VOICE
--------------------------------------- */
#voice{
margin:0;
padding:120px 0;
color:#f6f6f5;
background:#000000 url(../img/bg03.png) repeat center;
}
.voice_wrapper{
width:100%;
max-width:960px;
margin:0 auto;
padding:0 30px;
box-sizing:border-box;
}
.voice_box{
width:100%;
margin:40px 0 0 0;
padding:40px;
box-sizing:border-box;
position:relative;
border:1px solid rgba(255,255,255,0.25);
background:rgba(0,0,0,0.5);
}
.voice_textbox{position:relative;z-index:10;}
.voice_info{
margin:0;
padding:0 0 20px 0;
font-size:15px;
line-height:30px;
font-weight:bold;
text-align:left;
position:relative;
border-bottom:1px solid #e0ce5b;
}
.voice_text{
width:100%;
margin:0;
padding:40px 0 0 0;
box-sizing:border-box;
font-size:15px;
line-height:30px;
text-align:justify;
}
.voice_text p{margin:0;padding:0 0 20px 0;}
.voice_text p:last-child{padding:0;}
.voice_text ul{margin:0;padding:0 0 20px 0;color:#d2af36;font-weight:bold;}
.voice_img{
position:relative;
display:inline-block;
width:25%;
margin:0;
padding:0 0 20px 20px;
float:right;
z-index:10;
}
@media only screen and (max-width:750px){
#voice{padding:40px 0;background-size:35px 35px;}
.voice_wrapper{padding:0 20px;}
.voice_box{margin:20px 0 0 0;padding:30px 20px;}
.voice_textbox{}
.voice_info{
padding:0 0 30px 0;
font-size:14px;
line-height:24px;
}
.voice_text{
padding:30px 0 0 0;
font-size:14px;
line-height:24px;
}
.voice_text p{}
.voice_text p:last-child{}
.voice_text ul{}
.voice_img{}
}

/* ----------------------- CSS Information 
 Style Info: DATE
--------------------------------------- */
#date{
margin:0;
padding:120px 0;
background:#000000 url(../img/bg01.png) no-repeat center;
background-size:cover;
}
@media only screen and (max-width:750px){
#date{padding:40px 0;}
}

/* ------------------------------------------- CSS Information 
 Style Info: CTA
----------------------------------------------------------- */
.cta{
margin:0;
padding:0;
width:100%;
box-sizing:border-box;
text-align:center;
position:relative;
overflow:hidden;
background:#000000;
border-top:10px solid #000000;
}
.cta img{position:relative;z-index:10;}
.cta_box{
position:relative;
width:100%;
margin:0;
padding:0 0 60px 0;
background:-moz-linear-gradient(top,rgba(0,0,0,0.5),rgba(0,0,0,1));
background:-webkit-linear-gradient(top,rgba(0,0,0,0.5),rgba(0,0,0,1));
background:linear-gradient(to bottom,rgba(0,0,0,0.5),rgba(0,0,0,1));
z-index:10;
}
/*-- btn --*/
.btn{
position:relative;
width:80%;
max-width:600px;
height:100%;
margin:0 auto 20px auto;
background:#ffffff;
overflow:hidden;
box-sizing:border-box;
border-radius:8px;
box-shadow:2px 2px 8px 0px rgba(0,0,0,0.5);
z-index:10;
}
.btn img{width:100%;}
.btn img:hover{opacity:0.5;}
.reflection{
width:30px;
height:100%;
position:absolute;
top:-180px;
left:0;
background-color:rgba(255,255,255,0.8);
opacity:0;
transform:rotate(45deg);
animation:reflection 3s ease-in-out infinite;
-webkit-transform:rotate(45deg);
-webkit-animation:reflection 4s ease-in-out 0s infinite;
}
@keyframes reflection{
0%{transform:scale(0) rotate(45deg);opacity:0;}
80%{transform:scale(0) rotate(45deg);opacity:0.5;}
81%{transform:scale(4) rotate(45deg);opacity:1;}
100%{transform:scale(50) rotate(45deg);opacity:0;}
}
@-webkit-keyframes reflection{
0%{-webkit-transform:scale(0) rotate(45deg);opacity:0;}
80%{-webkit-transform:scale(0) rotate(45deg);opacity:0.5;}
81%{-webkit-transform:scale(4) rotate(45deg);opacity:1;}
100%{-webkit-transform:scale(50) rotate(45deg);opacity:0;}
}
/*-- payment --*/
.payment{
z-index:10;
position:relative;
width:100%;
max-width:1080px;
margin:0 auto;
padding:40px;
box-sizing:border-box;
}
.payment dl{
position:relative;
width:100%;
margin:0;
padding:0;
font-size:14px;
line-height:24px;
color:#d1d1d1;
text-align:justify;
box-sizing:border-box;
}
.payment dt{
margin:0 0 20px 0;
padding:0 0 0 7px;
font-weight:bold;
border-left:3px solid #cc9900;
}
.payment dd{padding:0 0 0 10px;}
.payment_img{
display:block;
width:335px;
}
/*-- notice --*/
.notice{
z-index:10;
position:relative;
width:100%;
max-width:1080px;
margin:0 auto;
padding:0 40px;
box-sizing:border-box;
}
.notice dl{
position:relative;
width:100%;
height:100px;
margin:0x;
padding:20px;
border:1px solid #d1d1d1;
overflow-y:scroll;
font-size:14px;
line-height:20px;
color:#d1d1d1;
text-align:justify;
background:#000000;
box-sizing:border-box;
}
.notice dt{
margin:0;
padding:0 0 0 7px;
font-weight:bold;
border-left:3px solid #cc9900;
}
.notice dd{padding:10px 0 20px 10px;}
.notice dd:last-child{padding:10px 0 0 10px;}
@media only screen and (max-width:750px){
.cta{}
.cta img{}
.cta_box{padding:0 0 20px 0;}
/*-- btn --*/
.btn{}
.btn img{}
.btn img:hover{}
/*-- payment --*/
.payment{padding:20px;}
.payment dl{font-size:14px;text-align:left;}
.payment dt{}
.payment dd{}
.payment_img{
display:block;
margin:0 auto;
padding:0 10px 0 0;
width:280px;
}
/*-- notice --*/
.notice{padding:0 20px;}
.notice dl{font-size:12px;line-height:20px;}
.notice dt{}
.notice dd{}
.notice dd:last-child{}
}


/* ----------------------- CSS Information 
 Style Info: FOOTER
--------------------------------------- */
footer{
margin:0;
padding:40px 0;
width:100%;
background:#000000;
color:#d1d1d1;
}
#fnav a{color:#d1d1d1;text-decoration:none;}
#fnav a:hover{color:#d1d1d1;text-decoration:underline;}
#fnav{margin:0 0 20px 0;}
#fnav ul{list-style-type:none;}
#fnav li{
font-size:12px;
line-height:20px;
display:inline-block;
padding:0 20px;
border-right:1px solid #d2af36;
}
#fnav li:last-child{border-right:none;}
address{
text-align:center;
font-size:12px;
line-height:20px;
padding:0;
}
@media only screen and (max-width:750px){
footer{}
#fnav{margin:0 0 40px 0;padding:0 20px;}
#fnav ul{text-align:left;}
#fnav li{
display:block;
margin:0 0 20px 0;
padding:0 0 0 8px;
border-right:none;
border-left:2px solid #d2af36;
}
address{
text-align:right;
font-size:12px;
line-height:20px;
padding:0 20px;
}
.sp_no{display:none;}
}
/* ----------------------- CSS Information 
 Style Info: FADEIN
--------------------------------------- */
.fadein{opacity:0;transition:all ease 1s;}
.fadein.scrollin{opacity:1;}
/*左から----------*/
.fadein_left{opacity:0;transform:translateX(-40px);transition:all 1s;}
.fadein_left.scrollin{opacity:1;transform:translateX(0);}
/*右から----------*/
.fadein_right{opacity:0;transform:translateX(40px);transition:all 1s;}
.fadein_right.scrollin{opacity:1;transform:translateX(0);}
/*上から----------*/
.fadein_top{opacity:0;transform:translateY(-20px);transition:all 1s;}
.fadein_top.scrollin{opacity:1;transform:translateY(0);}
/*下から----------*/
.fadein_bottom{opacity:0;transform:translateY(20px);transition:all 1s;}
.fadein_bottom.scrollin{opacity:1;transform:translateY(0);}