@charset "UTF-8";
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td{margin:0;padding:0;border:0;outline: 0; font-size: 100%;font: inherit;vertical-align: baseline;background: transparent;}
div,p,ul,li,address,blockquote,center,dl,fieldset,form,h1, h2, h3, h4, h5, h6,hr,table,ol,pre{box-sizing: border-box;}
a img {border: none;}
ul, ol, dl ,li, dd, dt{list-style:none;}
h1, h2, h3, h4, h5, h6, p, textarea, select , button {outline: none;}
button{border: none;}
*:focus{outline: none;}
*,*::before,*::after { box-sizing: border-box; }
a:link , a:visited, a:hover, a:active, a:focus {text-decoration: none;outline: none;}
.fade {-webkit-transition: 0.3s ease-in-out;-moz-transition: 0.3s ease-in-out;-o-transition: 0.3s ease-in-out;transition: 0.3s ease-in-out;}
.fade:hover { opacity: 0.4;filter: alpha(opacity=60);}
.small80{font-size:80%;letter-spacing: 1px;}.small90{font-size:90%;letter-spacing: 1px;}
.right{float: right;}.left{float: left;}
.center{margin:0 auto;text-align: center;}
.flex1{flex-grow: 1;}.flex2{flex-grow: 2;}.flex3{flex-grow: 3;}
.order1{order:1;}.order2{order:2;}.order3{order:3;}.order4{order:4;}.order5{order:5;}.order6{order:6;}
span.dash{letter-spacing: -1px;padding-right: .5em;}
header{top: auto;}
body {font: 100%/1.4 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;margin: 0;padding: 0;color:#89898a;}
.tk-proxima-soft{font-family: "proxima-soft",sans-serif;font-style: normal;font-weight: 700;}
a:link{color:#89898a;}
#wrap-top{width:100%;height:100%;background:#fff;background-size: cover;}
#header{width:100%;height:80px;background:#fff;margin:0;padding:0;position: relative;}

#top{padding:50px 0;}
#content{width:100%;margin:0 auto;position: relative;background: url(../img/bg.jpg) no-repeat center fixed;background-size: cover;}
#container{width:100%;margin: 0 auto;}
h1.hero{margin:0px auto;width:50%;position: relative;text-align: center;padding-bottom:50px;}
h1.hero img{width:100%;max-width:851px;}
.varnishing{display:none;}

h2{font-family: "proxima-soft";font-size: 4em;color: #fff;text-shadow:0px 0px 2px #000;letter-spacing: .2em;text-align: center;padding:10px;}

#clickarea{display:none;}
#globalnav{width:100%;display:block;}
nav {width: 80%;max-width:1200px;margin-right: 0;margin:0 auto;overflow:hidden;font-family: "proxima-soft";text-align: center;}
nav ul{display:flex;flex-direction: row;flex-wrap:nowrap;justify-content: center;align-content: center;align-items: center;height:80px;}
nav ul li {font-size:1.5em;text-align: center;letter-spacing: 2px;font-weight: 700;transition: 0.3s;width:100%;line-height: 80px;}
nav ul li a{transition: .3s;width:100%;height:100%;display: block;}
nav ul li a:hover{color:#528AE1;}
nav ul li:hover{box-shadow:0 -6px #528AE1 inset;}
.content_column{padding:100px 0;top:-250px;}
.about{background:rgba(0,0,0,.6);}
.about_column{text-align: center;color:#fff;font-size: 1.2em;letter-spacing: 2px;width:80%;margin:0 auto;line-height: 2em;text-shadow:2px 2px  #000;}
.screen{width:80%;margin: 30px auto;}
.screen ul{display: flex;flex-flow: row wrap;justify-content: center;}
.screen ul li{width:50%;text-align: center;padding-bottom:40px;}
.screen ul li p{text-align: justify;width:80%;margin: 0 auto;font-family: "heisei-maru-gothic-std";color: #fff;letter-spacing: 2px;padding-top:10px;text-shadow:2px 2px  #000;}
.screen ul li img{border: 5px solid #fff;}

.special{background: rgba(0,0,0,.6);}
.special p{text-align: justify;}
.soundlist p{text-align: center;}
.soundlist ul{width:50%;text-align: justify;margin: 0 auto;background: rgba(0,0,0,.5);padding:30px 0px 30px 80px;margin-top:30px;border-radius:20px;border: 2px #fff solid;}
.soundlist ul li{list-style: decimal-leading-zero;text-shadow:none;}


/*corporatelogo*/
h6.logo{display:flex;position:relative;justify-content: center;align-items: center;padding-bottom: 40px;}
.copyright {text-align: center;padding-top: 20px;padding-bottom: 20px;font-weight: lighter;letter-spacing: 2px;border-top-width: 2px;position:relative;background:#fff;}
/*movie*/
.movie{background:rgba(100,177,220,.5);}
.moviethumb{position: relative;margin:0 auto;text-align: center;width:400px;height:225px;border-radius: 10px;overflow: hidden;border: solid 5px #72E089;background: #72E089;vertical-align: bottom;}
.movie_column{width:60%;margin:0 auto;}
.spmovielink{display: none;}

/*sns*/
.sns ul{position:relative;display: flex;flex-flow: row nowrap;justify-content:center; }
.snsbutton{margin: 8px 5px;width:60px;height:60px;position:relative;z-index:1;display: block;border: #fff solid 5px;}
.snsbutton img{display:block;transition: 0.3s ease-in-out;width:100%;height:100%;}

.product{background: rgba(62,148,72,.5);}
.softinfo_wrap{position: relative; display:flex;flex-flow: row nowrap;justify-content: space-between;letter-spacing: .2em;text-align: center;width:80%;margin:0 auto;}
.softinfo{margin:2px;}
.softinfo li{width:100%;margin-top:5px;vertical-align: middle;border-radius: 5px;padding:15px 0;}
.softright-h2{line-height:25px !important;padding:10px 0!important;letter-spacing: 0 !important;}
.softright{background: #DADADA;height:70px;line-height: 40px;}
.softleft{background: #868686;color:#ECECEC;font-weight: 700;height:50px;line-height: 20px;}
.flex-item{flex-grow: 1;}
#page-top {position: fixed;bottom: 5%;right: 5%;}
#page-top a {text-decoration: none;color: #fff; width: 110px;padding: 30px;text-align: center;display: block;border-radius: 5px;-webkit-transform: perspective(1px) translateZ(0);  transform: perspective(1px) translateZ(0);  box-shadow: 0 0 1px transparent;  -webkit-transition-duration: 0.3s;transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform;-webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;}
#page-top a:hover {text-decoration: none; -webkit-transform: translateY(-8px); transform: translateY(-8px);}
/*scroll*/
.scrollwrap{margin:80px auto;width:128px;}
.scrollwrap ul{display:flex;flex-flow:column wrap;justify-content: center;align-content: center;align-items: center;}
.scrollwrap ul li{text-align: center;}
.next_scroll{display: inline-block; -webkit-transform: perspective(1px) translateZ(0);  transform: perspective(1px) translateZ(0);  box-shadow: 0 0 1px transparent;  -webkit-transition-duration: 0.3s;transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform;-webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;}
.next_scroll:hover, .next_scroll:focus, .next_scroll:active { -webkit-transform: translateY(8px); transform: translateY(8px);}
.campaign_20{text-align: center;background: #fff;border: 5px solid #fff;width:500px;height:311px;vertical-align: bottom;margin:20px auto;box-sizing: content-box;}
/* News */
.topics{width:80%;margin:0 auto;color:#434343;padding:10px;position: relative;background: rgba(255,255,255,.8);}
.topics p{letter-spacing: 2px;padding-left:1em;margin:20px 0;font-size:120%;line-height: 25px;vertical-align: middle;}
.topics p a{color:#434343;border-bottom: 1px solid;}
.topics p a:hover{border-bottom: none;}
.buynow{width:80%;padding:20px;margin: 0 auto;background:rgba(255,255,255,.6);border-radius:20px;margin-top:20px;font-family: "heisei-maru-gothic-std";color:#434343;}
.buynow p{padding:1em 0;}
@media screen and (max-width: 1024px) {
#globalnav{width:100%;display:block;}
nav {width: 100%;max-width:1024px;}
.about_column{width:80%;text-align: justify;}
.screen{width:90%;margin: 30px auto;}
.screen ul{display: flex;flex-flow: row wrap;justify-content: space-around;}
.screen ul li{width:45%;text-align: center;padding-bottom:40px;}
.screen ul li p{text-align: justify;width:100%;margin: 0 auto;font-family: "heisei-maru-gothic-std";color: #fff;letter-spacing: 2px;padding-top:10px;text-shadow:2px 2px  #000;}
.screen ul li img{border: 5px solid #fff;width:100%;}
.cdimg{text-align: center;}
.softinfo_wrap{position: relative; display:flex;flex-flow: row wrap;justify-content: space-between;letter-spacing: .2em;text-align: center;width:80%;margin:0 auto;}
.soundlist p{text-align: center;}
.soundlist ul{width:80%;text-align: justify;margin: 0 auto;background: rgba(0,0,0,.5);padding:30px 0px 30px 80px;margin-top:30px;border-radius:20px;border: 2px #fff solid;}
.soundlist ul li{list-style: decimal-leading-zero;text-shadow:none;}
}
@media screen and (max-width: 768px) {
nav{width:100%;max-width: 768px;}
nav ul li{font-size: 1em;}
h1.hero{width:70%;}
#page-top {position: fixed;bottom: 0px;width:100%;background: #fff;border-top: 1px dotted #259A20;height:50px;right:0;}
#page-top a{width:110px;padding:0;margin-top:-40px;margin-right:-10px;float: right;}
#header{width:100%;}
.softinfo_wrap{flex-flow: row wrap;}
/*movie*/
.movie{padding:50px;top:0;}
/*#movie{padding-top:200px;margin-top:-200px;}*/
.moviethumb{position: relative;margin:0 auto;text-align: center;width:100%;max-width:450px;height:auto;}
.moviethumb img{width:100%;vertical-align: bottom;}
.movie_column{width:100%;margin:0 auto;}
.movielink{display: none;}
.spmovielink{display: block;}
}
@media screen and (max-width: 425px) {
h2{font-size: 3em;}
body {background: url(../img/guide_bg.png) repeat scroll;}
#content{background: url(../img/spbg.png) no-repeat top scroll;background-size:contain;}
#clickarea{display: block;text-align: center;letter-spacing: 2px;font-size: 1.2em;height:30px;background: #fff;}
#globalnav{width:90%;display:block;margin:0 auto;}
#header{height:auto;}
nav ul{display:flex;flex-direction: row;flex-wrap:wrap;justify-content:flex-start;align-content: center;height:auto;}
nav ul li {font-size:1.2em;text-align: center;letter-spacing: 2px;font-weight: 700;transition: 0.3s;width:auto;line-height:auto;margin:0 0.2em;}
nav ul li a{display: inline;}
nav ul li:after{content:"/";margin-left:0.5em;display: inline;}
nav ul li:last-child:after{content:none;}
nav ul li:hover{box-shadow:none;}
.campaign_20{max-width:400px;width:95%;height:auto;}
.campaign_20 img{width:95%;}
.movie_column{width:100%;}
.topics{width:90%;padding:10px;}
.topics p{letter-spacing: 2px;padding-left:1em;margin:20px 0;font-size:100%;line-height: 2em;vertical-align: middle;}
.screen ul li{width:100%;text-align: center;padding-bottom:40px;}
.content_column{padding:100px 0;top:-250px;}
.about_column{font-size: 1em;}
.soundlist ul{width:100%;text-align: justify;margin: 0 auto;background: rgba(0,0,0,.5);padding:10px 0px 10px 3.5em;margin-top:30px;border-radius:20px;border: 2px #fff solid;}
}