@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:#b7282e;}
.gold{color:#e2bc26;}

/*----- image -----*/
.img1280{width:100%;max-width:1280px;margin:0 auto;}
.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;}
}
/*-- br --*/
.br_pc{display:block;}
.br_sp{display:none;}
@media only screen and (max-width:750px){
.br_pc{display:none;}
.br_sp{display: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: INVITATION
--------------------------------------- */
#invitation{
margin:0;
padding:0;
width:100%;
height:100%;
box-sizing:border-box;
text-align:center;
position:relative;
overflow:hidden;
background:#2f313a url(../img/invitation_bg.png) no-repeat center;
background-size:cover;
}
#invitation img{
width:100%;
max-width:960px;
margin:auto;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
}
#invitation img.scroll{
position:absolute;
top:auto;
bottom:40px;
left:0;
right:0;
margin:auto auto 0 auto;
width:60px;
height:60px;
-webkit-animation:scroll 1.5s infinite linear alternate;
animation:scroll 1.5s infinite 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: HEADER
--------------------------------------- */
header{
margin:0;
padding:0;
width:100%;
box-sizing:border-box;
text-align:center;
position:relative;
overflow:hidden;
background:#2f313a url(../img/bg.png) no-repeat center;
background-size:cover;
}
header img{
margin:0 auto;
width:100%;
max-width:960px;
position:relative;
z-index:10;
}

/* ----------------------- 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 video{opacity:0.3;background:url(../video/video01.png) no-repeat center;background-size:cover;}


/* ----------------------- CSS Information 
 Style Info: TITLE
--------------------------------------- */
.title{
position:relative;
width:100%;
max-width:960px;
margin:0 auto 60px auto;
padding:0 0 40px 0;
opacity:0;
transition:all ease 1s;
}
.title img{width:100%;}
.title.scrollin{opacity:1;}
.title:after{
content:"";
position:absolute;
display:block;
padding:0;
width:0;
height:4px;
border:0;
background:#cc9900;
background:-moz-linear-gradient(left,#d9b01c,#b8860b);
background:-webkit-linear-gradient(left,#d9b01c,#b8860b);
background:linear-gradient(to right,#d9b01c,#b8860b);
overflow:hidden;
bottom:0;
right:30px;
left:30px;
margin:0 auto;
}
.title.scrollin:after{animation:title_hr 0.5s linear both;}
@keyframes title_hr{
0%{width:0%;}
100%{width:93.75%;width:-webkit-calc(100% - 60px);width:calc(100% - 60px);}
}
@media only screen and (max-width:750px){
.title{margin:0 auto 30px auto;padding:0 0 30px 0;}
.title:after{right:20px;left:20px;}
@keyframes title_hr{
0%{width:0%;}
100%{width:97.33%;width:-webkit-calc(100% - 40px);width:calc(100% - 40px);}
}
}

/* ----------------------- CSS Information 
 Style Info: WRAPPER
--------------------------------------- */
.wrapper{
position:relative;
width:100%;
max-width:960px;
margin:0 auto;
padding:0;
box-sizing:border-box;
}
.text{
width:100%;
margin:0;
padding:0 30px;
font-size:16px;
line-height:30px;
text-align:justify;
word-break:break-all;
box-sizing:border-box;
}
.text p{margin:0 0 30px 0;padding:0;}
.text p:last-child{margin:0;}
.text ul{margin:0 0 30px 0;padding:0;}
.list_gold{font-weight:bold;color:#cc9900;}
.list_platinum{font-weight:bold;color:#999999;}
.list_power li{
position:relative;
margin:0;
padding:0 0 0 20px;
font-size:20px;
line-height:30px;
font-weight:bold;
text-align:left;
}
.list_power li:before{
content:"";
display:block;
position:absolute;
top:6px;
left:0;
width:16px;
height:16px;
background:#cc9900;
box-sizing:border-box;
}
.road li{
font-size:20px;
line-height:30px;
font-weight:bold;
}
.contents_img{
display:inline-block;
width:360px;
float:right;
margin:0;
padding:0 0 20px 20px;
}
.step_img{
width:100%;
max-width:900px;
margin:0 auto;
}
.name{text-align:right;}
@media only screen and (max-width:750px){
.wrapper{}
.text{padding:0 20px;font-size:14px;line-height:24px;}
.text p{margin:0 0 20px 0;}
.text br{display:none;}
.text ul{margin:0 0 20px 0;}
.list_power li{
padding:0 0 0 20px;
font-size:16px;
line-height:24px;
}
.list_power li:before{
content:"";
display:block;
position:absolute;
top:6px;
left:0;
width:12px;
height:12px;
}
.road li{
font-size:16px;
line-height:24px;
}
.contents_img{
display:block;
width:100%;
max-width:710px;
float:none;
margin:0 auto;
padding:0 0 30px 0;
}
.name img{width:100px;}
}

.contents{
position:relative;
margin:0;
padding:80px 0;
width:100%;
box-sizing:border-box;
background:#ffffff;
}
@media only screen and (max-width:750px){.contents{padding:40px 0;}}

/*-- CONTENTS00 --*/
#contents00{
background:#2f313a url(../img/contents00_bg.png) no-repeat center;
background-size:cover;
color:#f6f6f5;
}

/*-- CONTENTS01 --*/
#contents01{background:#ffffff;}
#letter{
margin:40px 30px;
padding:40px 30px;
background:#2f313a;
}
#letter .text{
padding:0;
color:#f6f6f5;
background:url(../img/letter_bg_pc.png) repeat left top;
}
@media only screen and (max-width:750px){
#letter{
margin:40px 20px;
padding:40px 20px;
background:#2f313a;
}
#letter .text{
background:url(../img/letter_bg_sp.png) repeat left top;
}
#letter .text p{margin:0 0 24px 0;}
#letter .text p:last-child{margin:0;}
}



/*-- CONTENTS02 --*/
#contents02{background:#f6f6f5;}

/*-- CONTENTS03 --*/
#contents03{background:#ffffff;}

/*-- CONTENTS04 --*/
#contents04{background:#f6f6f5;}

/*-- CONTENTS05 --*/
#contents05{background:#ffffff;}

/*-- CONTENTS06 --*/
#contents06{background:#f6f6f5;}

/*-- CONTENTS07 --*/
#contents07{background:#ffffff;}

/*-- CONTENTS08 --*/
#contents08{background:#f6f6f5;}

/*-- CONTENTS09 --*/
#contents09{background:#ffffff;}

/*-- CONTENTS10 --*/
#contents10{background:#f6f6f5;}

/*-- CONTENTS11 --*/
#contents11{background:#ffffff;}

/*-- CONTENTS12 --*/
#contents12{background:#f6f6f5;}

/*-- CONTENTS13 --*/
#contents13{background:#2f313a;}
#contents13 .text{color:#f6f6f5;}
#contents13 .text .red{color:#ebd179;}

/*-- CONTENTS14 --*/
#contents14{background:#f6f6f5;}

/*-- CONTENTS15 --*/
#contents15{background:#ffffff;}

/*-- CONTENTS16 --*/
#contents16{background:#f6f6f5;}

/*-- CONTENTS17 --*/
#contents17{background:#ffffff;}


/* ----------------------- CSS Information 
 Style Info: VOICE
--------------------------------------- */
.voice{
margin:0;
padding:80px 0;
background:#2f313a url(../img/voice_bg.png) no-repeat center;
background-size:cover;
}
.voice .text{
color:#f6f6f5;
text-align:center;
}
.voice .text .red{color:#ebd179;}
.voice_box{
width:100%;
max-width:960px;
margin:40px auto;
padding:0 30px;
box-sizing:border-box;
}
.voice_box dl{
margin:0 0 30px 0;
padding:0;
color:#f6f6f5;
background:rgba(0,0,0,0.75);
}
.voice_box dt{
min-height:140px;
margin:0;
padding:30px 20px 20px 140px;
font-size:20px;
line-height:30px;
font-weight:bold;
text-align:left;
color:#ebd179;
border-bottom:1px solid #b8860b;
box-sizing:border-box;
background-repeat:no-repeat;
background-position:20px 20px;
background-size:100px 100px;
}
.voice_box dt.voice01{background-image:url(../img/voice01.png);}
.voice_box dt.voice02{background-image:url(../img/voice02.png);}
.voice_box dt.voice03{background-image:url(../img/voice03.png);}
.voice_box dt.voice04{background-image:url(../img/voice04.png);}
.voice_box dt .voice_info{
display:block;
font-size:14px;
line-height:30px;
font-weight:normal;
text-align:left;
color:#eeeeee;
}
.voice_box dd{
width:100%;
margin:0;
padding:20px;
box-sizing:border-box;
font-size:16px;
line-height:30px;
text-align:justify;
}
.voice_box dd p{margin:0;padding:0;}
@media only screen and (max-width:750px){
.voice{padding:40px 0;}
.voice .text{text-align:justify;}
.voice_box{margin:30px 0;padding:0 20px;}
.voice_box dl{margin:0 0 20px 0;}
.voice_box dt{
min-height:100px;
padding:22px 10px 20px 90px;
font-size:14px;
line-height:20px;
text-align:justify;
background-size:60px 60px;
}
.voice_box dt .voice_info{font-size:10px;line-height:20px;}
.voice_box dd{font-size:14px;line-height:24px;}
.voice_box dd p{}
}

/* ----------------------- CSS Information 
 Style Info: FUTURE
--------------------------------------- */
#future{
width:100%;
margin:0;
padding:60px 30px 30px 30px;
box-sizing:border-box;
}
.future_wrapper{
position:relative;
display:flex;
align-items:stretch;
width:100%;
margin:0 auto;
padding:0 0 30px 0;
box-sizing:border-box;
}
.future_box{
position:relative;
width:-webkit-calc(50% - 10px) ;
width:calc(50% - 10px) ;
padding:0;
box-sizing:border-box;
background:#2f313a;
}
.future_box:nth-child(odd){margin:0 10px 0 0;}
.future_box:nth-child(even){margin:0 0 0 10px;}
.future_img{margin:0;padding:0;width:100%;}
.future_text{
margin:0;
padding:20px;
font-size:16px;
line-height:30px;
font-weight:bold;
color:#ebd179;
box-sizing:border-box;
}
@media only screen and (max-width:750px){
#future{padding:30px 20px 10px 20px;}
.future_wrapper{display:block;padding:0;}
.future_box{width:100%;}
.future_box:nth-child(odd){margin:0 0 20px 0;}
.future_box:nth-child(even){margin:0 0 20px 0;}
.future_img{}
.future_text{
padding:10px;
font-size:14px;
line-height:24px;
}
}

/* ----------------------- CSS Information 
 Style Info: LOGIC
--------------------------------------- */
#logic{
width:100%;
margin:0;
padding:60px 30px;
box-sizing:border-box;
}
.logic_wrapper{
position:relative;
width:100%;
margin:0;
padding:0;
box-sizing:border-box;
background:#2f313a url(../img/logic_bg.png) no-repeat center;
background-size:cover;
}
#logic dl{
margin:0;
padding:40px 30px;
font-weight:bold;
box-sizing:border-box;
}
#logic dt{
margin:0 0 30px 0;
padding:0 0 10px 0;
font-size:20px;
line-height:30px;
text-align:justify;
color:#ebd179;
border-bottom:2px solid #cc9900;
}
#logic dd{
margin:0;
padding:0;
font-size:16px;
line-height:30px;
text-align:justify;
color:#f6f6f5;
}
#logic dd p{
margin:0 0 30px 0;
padding:0;
}
#logic dd p:last-child{margin:0;}
@media only screen and (max-width:750px){
#logic{padding:40px 20px;}
.logic_wrapper{display:block;padding:0;}
#logic dl{padding:30px 20px;}
#logic dt{
margin:0 0 20px 0;
padding:0 0 10px 0;
font-size:18px;
line-height:30px;
text-align:center;
}
#logic dd{
font-size:14px;
line-height:24px;
}
#logic dd p{margin:0 0 20px 0;}
#logic dd p:last-child{margin:0;}
}


/* ----------------------- CSS Information 
 Style Info: PROFILE
--------------------------------------- */
#profile{
position:relative;
width:100%;
margin:0;
padding:60px 0;
background:#f0f1ec;
box-sizing:border-box;
}
#profile .flexbox{
position:relative;
width:100%;
max-width:1080px;
margin:0 auto;
padding:0 30px;
box-sizing:border-box;
display:flex;
flex-direction:reverse;
align-items:stretch;
}
#profile .imgbox{
display:flex;
align-items:center;
position:relative;
width:120px;
margin:0;
padding:0;
background:#d9b01c;
background:-moz-linear-gradient(left,#ebd179,#b8860b);
background:-webkit-linear-gradient(left,#ebd179,#b8860b);
background:linear-gradient(to right,#ebd179,#b8860b);
}
#profile .imgbox p{
width:100%;
margin:0;
padding:0;
font-size:14px;
line-height:20px;
color:#f6f6f5;
font-weight:bold;
box-sizing:border-box;
}
#profile .textbox{
margin:0;
padding:0;
box-sizing:border-box;
flex:1;
}
#profile .text{
width:100%;
margin:0;
padding:0;
font-size:14px;
line-height:24px;
text-align:justify;
box-sizing:border-box;
}
#profile .text dt{
margin:0;
padding:20px 0 20px 20px;
font-size:16px;
line-height:20px;
font-weight:bold;
border-bottom:2px solid #b8860b;
}
#profile .text dd{padding:20px 0 0 20px;}
#profile .text dd p{}
#profile .text ul{margin:0 0 20px 0;}
#profile .text ul li{padding:0;}
.profile_img{float:right;width:200px;padding:0 0 0 20px;}
@media only screen and (max-width:750px){
#profile{padding:40px 0;}
#profile .flexbox{padding:0 20px;flex-direction:column;}
#profile .imgbox{display:block;width:100%;}
#profile .imgbox p{padding:5px;font-size:12px;line-height:20px;}
#profile .textbox{}
#profile .text{}
#profile .text dt{font-size:14px;text-align:center;padding:20px 0 20px 0;}
#profile .text dd{padding:20px 0 0 0;}
.profile_img{display:block;float:none;width:50%;max-width:200px;margin:0 auto;padding:0 0 30px 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:#2f313a url(../img/bg.png) no-repeat center;
background-size:cover;
}
.cta img{
margin:0 auto;
width:100%;
max-width:960px;
position:relative;
z-index:10;
}

/* ----------------------- CSS Information 
 Style Info: APPLY
--------------------------------------- */
.apply{
position:relative;
width:100%;
margin:0 auto;
padding:60px 0;
box-sizing:border-box;
background:#2f313a;
}
.apply_wrapper{
width:100%;
max-width:960px;
margin:0 auto;
padding:0 30px;
box-sizing:border-box;
}
.apply .flexbox{
display:flex;
flex-direction:reverse;
position:relative;
width:100%;
margin:0 auto 20px auto;
padding:0;
box-sizing:border-box;
border:1px solid #b8860b;
}
.apply .flexbox:last-child{margin:0 auto;}
.apply .textbox{
margin:0;
padding:10px 10px 10px 15px;
font-size:16px;
line-height:20px;
box-sizing:border-box;
flex:1;
display:flex;
align-items:center;
text-align:justify;
word-break:break-all;
color:#f6f6f5;
background:rgba(0,0,0,0.5);
}
.apply p{margin:0;padding:0 0 0 8px;border-left:2px solid #ebd179;}
.apply .imgbox{
display:flex;
align-items:center;
justify-content:center;
width:120px;
height:120px;
margin:0;
padding:0;
font-size:14px;
line-height:20px;
font-weight:bold;
text-align:center;
color:#ffffff;
}
.apply01 .imgbox{
background:#4c4d55 url(../img/apply01_pc.png) no-repeat center;
background-size:cover;
}
.apply02 .imgbox{
background:#4c4d55 url(../img/apply02_pc.png) no-repeat center;
background-size:cover;
}
.apply03 .imgbox{
background:#4c4d55 url(../img/apply03_pc.png) no-repeat center;
background-size:cover;
}
.apply04 .imgbox{
background:#4c4d55 url(../img/apply04_pc.png) no-repeat center;
background-size:cover;
}
/*-- BTN --*/
.btn_wrapper{display:flex;width:100%;}
.btn_box{width:50%;margin:0;box-sizing:border-box;}
.apply .btn_box:first-child{padding:0 10px 0 0;}
.apply .btn_box:last-child{padding:0 0 0 10px;}
.btn{
position:relative;
width:100%;
max-width:440px;
height:100%;
margin:0 auto;
background:#ffffff;
overflow:hidden;
box-sizing:border-box;
border-radius:8px;
box-shadow:2px 2px 8px 0px rgba(0,0,0,0.9);
z-index:10;
}
.btn img{width:100%;}
.btn img:hover{opacity:0.5;}
/*-- payment --*/
.payment{width:100%;margin:30px auto;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 8px;
font-weight:bold;
border-left:2px solid #ebd179;
}
.payment dd{padding:0 0 0 10px;}
.payment_img{
display:block;
width:335px;
}
/*-- notice --*/
.notice{}
.notice dl{
position:relative;
width:100%;
height:100px;
margin:0x;
padding:20px;
border:1px solid #b8860b;
overflow-y:scroll;
font-size:14px;
line-height:20px;
color:#d1d1d1;
text-align:justify;
background:rgba(0,0,0,0.9);
box-sizing:border-box;
}
.notice dt{
margin:0;
padding:0 0 0 8px;
font-weight:bold;
border-left:2px solid #ebd179;
}
.notice dd{padding:10px 0 20px 10px;}
.notice dd:last-child{padding:10px 0 0 10px;}
@media only screen and (max-width:768px){

/*-- APPLY --*/
.apply{padding:20px 0;}
.apply_wrapper{padding:0 20px;}
.apply .flexbox{display:block;}
.apply .textbox{
padding:20px 10px;
font-size:14px;
line-height:20px;
display:block;
}
.apply dt{}
.apply dd{font-size:12px;line-height:20px;}
.apply dd br{display:none;}
.apply .imgbox{
display:block;
width:100%;
height:80px;
margin:0;
padding:30px;
font-size:14px;
line-height:20px;
box-sizing:border-box;
}
.apply01 .imgbox{
background:#4c4d55 url(../img/apply01_sp.png) no-repeat center;
background-size:cover;
}
.apply02 .imgbox{
background:#4c4d55 url(../img/apply02_sp.png) no-repeat center;
background-size:cover;
}
.apply03 .imgbox{
background:#4c4d55 url(../img/apply03_sp.png) no-repeat center;
background-size:cover;
}
.apply04 .imgbox{
background:#4c4d55 url(../img/apply04_sp.png) no-repeat center;
background-size:cover;
}
/*-- BTN --*/
.btn_wrapper{display:block;}
.btn_box{width:100%;}
.apply .btn_box:first-child{padding:0;margin:0 0 20px 0;}
.apply .btn_box:last-child{padding:0;}
.btn{max-width:600px;}
.btn img{}
.btn img:hover{}

/*-- PAYMENT --*/
.payment{margin:20px 0;}
.payment dl{font-size:14px;text-align:left;}
.payment dt{}
.payment dd{text-align:center;}
.payment_img{
display:block;
margin:0 auto;
padding:0 10px 0 0;
width:280px;
}
/*-- NOTICE --*/
.notice{}
.notice dl{padding:10px;font-size:12px;line-height:20px;}
.notice dt{}
.notice dd{}
.notice dd:last-child{}
}

/* ----------------------- CSS Information 
 Style Info: FOOTER
--------------------------------------- */
footer{
width:100%;
margin:0;
padding:0;
color:#d1d1d1;
background:#111111;
font-size:12px;
}
#fnav a{color:#d1d1d1;text-decoration:none;}
#fnav a:hover{color:#d1d1d1;text-decoration:underline;}
dl.disclaim{
width:100%;
margin:0;
padding:40px 20px 0 20px;
box-sizing:border-box;
text-align:left;
}
dl.disclaim dt{
margin:0 0 10px 0;
padding:0 0 0 8px;
text-align:left;
font-size:12px;
line-height:20px;
border-left:2px solid #b8860b;
}
dl.disclaim dd{
text-align:left;
font-size:12px;
line-height:20px;
}
#fnav{
margin:0 20px;
padding:40px 0;
}
#fnav ul{list-style-type:none;}
#fnav li{
display:block;
margin:0 0 20px 0;
padding:0 0 0 8px;
text-align:left;
font-size:12px;
line-height:20px;
border-left:2px solid #b8860b;
}
#fnav li:last-child{margin:0;}
address{
display:block;
margin:0 20px;
padding:40px 0;
border-top:1px solid #222222;
text-align:right;
font-size:12px;
line-height:20px;
}
@media only screen and (max-width:750px){
dl.disclaim dd br{display:none;}
.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);}