@charset "UTF-8";

html{width:100%; height: 100%; overflow-y: scroll;overflow-x: hidden;font-family: "游ゴシック体","Yu Gothic",YuGothic,"ヒラギノ角ゴシック Pro","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;}
body{margin: 0px; padding: 0px; color: #0F0F0F;background:url("../img/bg.jpg") top center repeat;background-size: cover;}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,address{margin: 0px; padding: 0px; list-style-type: none;}
img{border: 0px;}
table {border-collapse: collapse; border-spacing:0;}
fieldset,img {border:0;}
address,caption,cite,code,dfn,em,th,var,b,i {font-style:normal; font-weight:normal;}
b{font-weight: bold;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-size:100%; font-weight:normal;}
input,textarea,select {font-family: inherit; font-size: inherit; font-weight: inherit; outline:0px none black;}
input,textarea,select {*font-size:100%;}
legend {color:#000;}
li img,
dt img,
dd img,
li input,
dt input,
dd input{vertical-align: top;}
table {font-size: inherit; font: 100%;}
pre,code,kbd,samp,tt {font-family: monospace; *font-size:108%; line-height: 100%;}
form option{font-size: 100%; padding: 1px;}

/*--basic style--*/
sup{font-size: 50%;}
input{vertical-align: middle;}
label{cursor:pointer; display: -moz-inline-box; display: inline-block; /display: inline; /zoom: 1; margin-right: 10px;}
label input{border-width: 0px!important; margin-top: 1px; margin-right: 5px;}
td label{line-height: 200%;}
td label input{margin-top: -2px;}
select{padding: 2px; border: 1px solid #cccccc; cursor:pointer;}
select option{padding-right: 10px; margin: 5px;}
textarea{border: 1px solid #cccccc; padding: 3px; width: 90%;}
a{color: #0F0F0F; text-decoration: underline; outline: none;}
a:hover{}
.al a:hover img,
.al input:hover{filter: alpha(opacity=70); -moz-opacity:0.7; opacity:0.7;}
.noal a:hover img{filter: alpha(opacity=100); -moz-opacity:1; opacity:1;}
.ib{display: -moz-inline-box; display: inline-block; /display: inline; /zoom: 1;}
.cf:after{content: ""; display: block; clear: both; height: 0px;}
.cf{/display: inline-block;}
* html .cf { height: 1% }
.cf {display:block;}
.displayNone{display: none;}
.fL{float: left;}
.fR{float: right;}
.posFix{position: fixed;}
.u-l {text-decoration: underline;}
.red {color:#D70003}


body {font-weight: bold; font-size: 16px}
.wrapper {width: 100%;max-width: 900px;margin: 0 auto;}
.MV {position: relative;z-index: 2}
.MV h1 {width: 100%;}

.Normal{ width: 100%; margin: 2% auto;padding: 3% 0;}
.Normal .Cnt{margin: 0 auto;}
.CV {width: 100%; margin: 2% auto;padding: 3% 0 2%;box-sizing: border-box}
.CV .Cnt {width: 80%;margin: 0 auto 30px;}
.CV .btn {max-width: 600px; width: 100%;margin: 0 auto 2%;transition: .4s;}
.CV .btn:hover {opacity: 0.7; transition: .4s;}

.social{position: relative;width:150px; margin: 0 auto 30px;overflow: hidden;}
.social li {transition:all .4s ease-in-out}
.social li:hover {transition:all .4s ease-in-out;opacity: 0.7;}
.social li img {width: 50px; height: auto;}
.social .fb{width:50px;float:left;}
.social .tw{width:50px;float:left;}
.social .htb{width:50px;float:left;}

footer {background: #1A1A1A;text-align: center;width: 100%;box-sizing: border-box;padding: 2%;color: #fff;font-size: 12px;}
footer ul{margin:0 auto 10px;text-align:center; display: flex;justify-content: center;max-width: 600px;}
footer ul li {width:calc(100%/3); text-align: center;}
footer ul li a {color: #fff;}

.delighter.splash {transition: all 2s ease-out;}
.delighter.splash.ended {background: #fff;}
.delighter.right { transform:translate(-100%); opacity:0; transition: all .75s ease-out; }
.delighter.right.started { transform:none; opacity:1; }

.delighter.left { transform:translate(100%); opacity:0; transition: all .75s ease-out; }
.delighter.left.started { transform:none; opacity:1; }

.delighter.bottom { transform:translatey(300%); opacity:0; transition: all .75s ease-out; }
.delighter.bottom.started { transform:none; opacity:1; }

.delighter li { opacity: 0; transform: translatey(400%); transition: all .7s ease-out; }
.delighter.started li { opacity: 1; transform: none; }
.delighter.started li:nth-child(1) { transition: all .7s ease-out .1s; }
.delighter.started li:nth-child(2) { transition: all .7s ease-out .3s; }
.delighter.started li:nth-child(3) { transition: all .7s ease-out .5s; }
.delighter.started li:nth-child(4) { transition: all .7s ease-out .7s; }
.delighter.started li:nth-child(5) { transition: all .7s ease-out .9s; }
.delighter.started li:nth-child(6) { transition: all .7s ease-out 1.1s; }
.delighter.started li:nth-child(7) { transition: all .7s ease-out 1.3s; }

.delighter pre {display: block; transition: all 2s ease-out; opacity: 0; padding: 20px 0; width: 1px; overflow: hidden;}
.delighter.started pre {max-width: 99999px; width: 100%; opacity: 1;}
.delighter .box { transition: all 1s ease-out; }
.delighter .box:nth-child(1) { transform: translate(-100%, 0); }
.delighter .box:nth-child(2) { transform: translate(170%, -70%); }
.delighter .box:nth-child(3) { transform: translate(20%, 0%); }

.delighter.started .box:nth-child(1) { transform: translate(0, 0); }
.delighter.started .box:nth-child(2) { transform: translate(70%, -70%); }
.delighter.started .box:nth-child(3) { transform: translate(20%, -120%); }

@media only screen and (min-width:728px) and (max-width:1399px) {
img {width: 100%;height: auto;}
}

@media screen and (max-width: 727px) {
html {height: auto;}
.pcView {display: none;}
.spView {display: block;}
img {width: 100%;height: auto;vertical-align: bottom;}

body {font-weight: bold; font-size: 16px}
.wrapper {width: 100%;max-width: 800px;margin: 0 auto;}
.MV {position: relative;z-index: 2}
.MV h1 {width: 100%;}

.Normal{ width: 98%; margin: 2% auto;padding: 3% 0;}
.Normal .Cnt{margin: 0 auto;}
.CV {width: 98%; margin: 2% auto;padding: 3% 0 2%;box-sizing: border-box}
.CV .Cnt {width: 98%; margin: 0 auto 30px;}
.CV h2 {margin: 0 auto 20px;}
.CV .btn {max-width: 600px; width: 100%;margin: 0 auto 2%;}

footer {background: #1A1A1A;text-align: center;width: 100%;box-sizing: border-box;padding: 2%;color: #fff;font-size: 12px;}
footer ul{margin:0 auto;text-align:center; display: flex;justify-content: center;}
footer ul li {width:calc(100%/3); text-align: center;}
footer ul li a {color: #fff;}




.social{position: relative;width:150px; margin: 0 auto 30px;overflow: hidden;}
.social li {transition:all .4s ease-in-out}
.social li:hover {transition:all .4s ease-in-out;opacity: 0.7;}
.social li img {width: 50px; height: auto;}
.social .fb{width:50px;float:left;}
.social .tw{width:50px;float:left;}
.social .htb{width:50px;float:left;}

}