@charset "utf-8";
@font-face {
  font-family: 'Noto Serif Japanese';
  font-style: bold;
  font-weight: 600;
  src: url("../font/NotoSerifCJKjp-SemiBold.woff2") format('woff2'),
       url("../font/NotoSerifCJKjp-SemiBold.woff")  format('woff');
}
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form, label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main,summary,time,mark,audio,video,a,input,textarea,section{ margin:0;padding:0; border:0; font-size:100%; background:transparent; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main{ display:block;}
nav ul{ list-style:none;}
ul{ list-style:none; }
blockquote,q{ quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{ content:''; content:none;}
pre,code,kbd,samp{ font-family:monospace,monospace; font-size:inherit;}
table{ border-collapse:collapse; border-spacing:0;}
img{ border:0;}
address,caption,cite,code,dfn,em,th,var{ font-style:normal; font-weight:normal;}
caption,th{ text-align:left;}
h1,h2,h3,h4,h5,h6{ font-size:100%; font-weight:normal}
sup{ vertical-align:text-top; font-size:75%;}
sub{ vertical-align:text-bottom; font-size:75%;}
input,textarea,select{ z-index:auto; font-family:inherit; font-size:inherit; font-weight:inherit; vertical-align:middle;}
a{ outline:none;}
audio:not([controls]){ display:none;}
time{ display:inline;}
[hidden]{ display:none;}
input::-ms-clear,input::-ms-reveal,input:focus::-ms-clear,input:focus::-ms-reveal{visibility:hidden; display:none;}
button::-moz-focus-inner,input[type="reset"]::-moz-focus-inner,input[type="button"]::-moz-focus-inner,input[type="submit"]::-moz-focus-inner,input[type="file"]>input[type="button"]::-moz-focus-inner{ padding:0; border:0; outline:none;}
/*==================================================== */
body{-webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased; font-family:'Roboto','Droid Sans',"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo","ＭＳ Ｐゴシック",sans-serif; line-height:1.8;}
button{font-family:'Roboto','Droid Sans',"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo","ＭＳ Ｐゴシック",sans-serif; cursor:pointer;}

a:link{ color:#444; text-decoration: none;}
a:visited{ color:#444;}
a:hover {color:#444; text-decoration: underline;}
a:active{color:#444;}
*{-webkit-tap-highlight-color:rgba(0,0,0,0);}
.clr{clear:both;}
.hide{position:absolute !important; left:-9999px !important; top:-9999px !important;}
.clr{clear:both;}
section {clear:both; zoom:1;}
article:after,
section:after,
.clrFx:after{content:''; clear:both; display:block;}
img{-ms-interpolation-mode:bicubic;}

/* chrome bug fix*/
*{max-height:999999px;}
*,*::before,*::after {will-change:all;}
textarea,input[type="email"],input[type="password"],input[type="text"],input[type="button"],input[type="submit"]{-webkit-appearance:none;}
textarea{resize:vertical;}
input:-webkit-autofill {-webkit-box-shadow:0 0 0px 1000px rgba(255,255,255,1) inset; outline:none;}
input,button{ outline:none;}
a img {-webkit-backface-visibility:hidden;}


/*
	BASE SET
__________________________________________________*/
html{overflow:visible;}
html,body {margin:0; padding:0;}

body {position:static; overflow:auto; width:auto; *overflow-y:hidden; color:#444; font-size:16px; line-height:26px; z-index:0; background:#fff; -webkit-text-size-adjust: 100%; text-align: center;}

.mincho {font-family:'Kozuka Mincho Pro', 'Kozuka Mincho Std', '小塚明朝 Pro R', '小塚明朝 Std R', 游明朝, YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E',  HG明朝E, 'HGS明朝E',  HGS明朝E, 'ＭＳ Ｐ明朝', 'ＭＳ 明朝', 'MS PMincho', serif;}


#wrap{margin:0 auto; zoom:1; position:relative; overflow:hidden; min-width:1200px; z-index:0; width: 100%; }

.over-section{margin:0 -360px; zoom:1; position:relative; *overflow-y:hidden; clear:both; padding:0;}
.over-section:after{content:''; clear:both; display:block;}
main {width:100%; margin:0 auto; z-index:10; position:relative; min-width:1200px;}
section {width:100%; margin:0 auto; clear:both; zoom:1; position:relative; z-index:10; padding:0 0px; min-width:1200px; text-align:left;}
.wrap   {width:1200px; margin:0 auto; clear:both; zoom:1; position:relative; z-index:10; padding:0;}
article   {width:1200px; margin:0 auto; clear:both; zoom:1; position:relative; z-index:10; padding:0;}
article:after,section:after,.wrap:after{content:''; clear:both; display:block;}
*,*::before,*::after {box-sizing: border-box;}
main {z-index:100; opacity:0; transition:opacity 0.6s; min-height: 640px;}
.imgloaded main,
.imgloaded #wrap{opacity:1;}


@media screen and (min-width:641px){

.kt {min-width: 1200px; position: fixed; left: 0; top: 0; width: 100%; z-index: 1000;background: url(../images/common/bg-header.png) center top repeat-x; height: 35px; overflow: hidden;}
.kt div {max-width: 1400px; min-width: 1200px; margin: 0 auto; height: 34px; overflow: hidden; position: relative; padding: 0 78px 0 0;}
.kt div .buy {background: url(../images/common/btn-buy.png) left top no-repeat; height: 34px; background-size: auto 34px; float: left; overflow: hidden;}
.kt div .buy a{display: block; font-size: 14px; color: #fff; width: 160px; line-height: 33px; letter-spacing: 0.1em; transition: background 0.3s;}
.kt div .buy a:hover {background-color: rgba(255,255,255,0.3);}
.kt div .buy a span {display: inline-block; padding: 0 0 0 25px;}
.kt div ul {float: right;}
.kt div ul li {display: inline-block; padding-left: 18px;}
.kt div ul li a{display: inline-block; color: #000; font-size: 14px; text-decoration: none; line-height: 34px; padding: 0 0 0 21px; background: url(../images/common/icon-arr.png) left center no-repeat;}
.kt div ul li a:hover {text-decoration: underline;}
.kt div .logo {position: absolute; right: 11px; top: 4px;}

#siteheader {min-height: 111px; position: fixed; left: 0; top: 35px; width: 100%; min-width: 1200px; font-size: 0; line-height: 1; padding: 0 0 0; z-index: 900;}
#siteheader:after{content: ''; width: 100%; height: 130px; background: url(../images/common/bg-header.png) center -35px repeat-x; position: absolute; left: 0; top: 0; z-index: 0;}
#siteheader nav {font-size:0; line-height:1; width:1200px; margin: 0 auto; padding: 0; text-align: left; position: relative; z-index: 10;}
#siteheader nav:before{content:''; clear:both; zoom:1;}
#siteheader nav ul li {display:inline-block;}

#siteheader nav ul li a{display:block; width:132px; height:70px; position:relative;}
#siteheader nav ul li:nth-child(2) a {width: 157px;}
#siteheader nav ul li:nth-child(3) a {width: 172px;}
#siteheader nav ul li:nth-child(4) a {width: 247px;}
#siteheader nav ul li:nth-child(5) a {width: 179px;}
#siteheader nav ul li:nth-child(6) a {width: 160px;}
#siteheader nav ul li:nth-child(7) a {width: 153px;}

#siteheader nav ul li a:before{content:''; background:url(../images/common/nav.png) left -0px no-repeat; width:100%; height:70px; position:absolute; left: 0; top: 0;opacity: 1;}
#siteheader nav ul li:nth-child(1) a:before {background-position: 0 -35px;}
#siteheader nav ul li:nth-child(2) a:before {background-position: -132px -35px;}
#siteheader nav ul li:nth-child(3) a:before {background-position: -289px -35px;}
#siteheader nav ul li:nth-child(4) a:before {background-position: -462px -35px;}
#siteheader nav ul li:nth-child(5) a:before {background-position: -709px -35px;}
#siteheader nav ul li:nth-child(6) a:before {background-position: -888px -35px;}
#siteheader nav ul li:nth-child(7) a:before {background-position: -1048px -35px;}

#siteheader nav ul li a:after{content:''; background:url(../images/common/nav.png) left -146px no-repeat; width:100%; height:70px; position:absolute; left: 0; top: 0; opacity: 0; transition: 0.3s;}
#siteheader nav ul li:nth-child(1) a:after {background-position: 0 -185px;}
#siteheader nav ul li:nth-child(2) a:after {background-position: -132px -185px;}
#siteheader nav ul li:nth-child(3) a:after {background-position: -289px -185px;}
#siteheader nav ul li:nth-child(4) a:after {background-position: -462px -185px;}
#siteheader nav ul li:nth-child(5) a:after {background-position: -709px -185px;}
#siteheader nav ul li:nth-child(6) a:after {background-position: -888px -185px;}
#siteheader nav ul li:nth-child(7) a:after {background-position: -1048px -185px;}

/*#siteheader nav ul li a:hover:before{opacity: 0;}*/
#siteheader nav ul li a:hover:after{opacity: 1;}

#siteheader nav ul li.comingsoon a{opacity: 0.4;}
#siteheader nav ul li.comingsoon a:hover:after{opacity: 0; cursor: default;}
#siteheader nav ul li a span.new {display:block; position:absolute; left:0; bottom:-11px; width:100%; background:url(../images/common/icon-new.jpg) center center no-repeat; height:17px; z-index:100;}
#siteheader nav ul li:nth-child(1) a span.new {left:-9px;}
#siteheader nav ul li:nth-child(3) a span.new {left:-4px;}
#siteheader nav ul li:nth-child(4) a span.new {left:2px;}
#siteheader nav ul li:nth-child(5) a span.new {left:2px;}
#siteheader nav ul li:nth-child(6) a span.new {left:3px;}
#siteheader nav ul li:nth-child(7) a span.new {left:5px;}


/*subnav*/
.subnavwrap {position:absolute; left:0; top:79px; width:100%; min-width:1200px; z-index:1000;}
.subnav {display:none; position:absolute; left:0; top:0; width:100%;}
.subnav .subnavinner {width:1200px; margin:0 auto; text-align:left; padding:18px 45px;}
.subnav ul li {display:inline-block; padding:0 8px; position:relative;}
.subnav ul li:nth-child(n+2):before{content:''; width:1px; height:14px; position:absolute; left:0; top:50%; background:#502555; margin-top: -7px;}
.subnav ul li a {color:#502555; font-size:14px; text-decoration:none; display:block; line-height:29px; transition:0.3s; padding:0 8px; letter-spacing:0.15em; text-shadow: 0 0 16px #fff;}
.subnav ul li a:hover {color:#ff2268;}
.subnav ul li a.active {color:#ff2268; font-weight:bold;}
.subnav ul li a span.new {font-size: 12px; color: #b62e6e; display: inline-block; padding: 0 0 0 0.5em;}
.subnav ul li a.active span.new {font-weight: normal;}

.subnav.world ul{text-align: center; transform: translate(-230px);}
.subnav.system ul{text-align: center; transform: translate(200px);}
.subnav.special ul{text-align: right; transform: translate(50px);}

#subnavbg {background: url(../images/common/subnav.png) center bottom repeat-x; width: 100%; min-width: 1200px; position: fixed; left: 0; top: 35px; min-height: 100px; z-index: -1; opacity: 1; transition: opacity 0.2s , height 0.1s , top 0.2s;}
#subnavbg.show {opacity: 1; top: 115px;}

main {padding: 156px 0 0;}

.pageheader {max-width: 1400px; width: 100%; min-width: 1200px; text-align: left; margin: 0 auto; line-height: 1; padding: 0 0 0 17px; position: relative; z-index: 800;}
.pageheader span {margin: 0 0 0 39px; line-height: 25px; min-width: 225px; display: inline-block; text-align: center; border: 1px solid #991658; color: #991658;
font-family:'Kozuka Mincho Pro', 'Kozuka Mincho Std', '小塚明朝 Pro R', '小塚明朝 Std R', 游明朝, YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E',  HG明朝E, 'HGS明朝E',  HGS明朝E, 'ＭＳ Ｐ明朝', 'ＭＳ 明朝', 'MS PMincho', serif; letter-spacing: 0.4em; font-weight: bold; padding: 0 3.4em;
background: -webkit-linear-gradient(-90deg, rgba(182,17,89,1) 0%,rgba(80,36,84,1) 100%);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
position: relative; top: 1px;
}

.pageheader img {vertical-align: middle;}
.pageheader .logo {position: absolute; right: 17px; top: -15px;}
.pageheader .logo a img {transition: 0.3s;}
.pageheader .logo a:hover img {opacity: 0.7;}

/*spnav*/
p.menutoggle{display:none;}
#spnav {display:none;}

/*footer*/
#sitefooter {background:#fff; margin:0; font-size:0; line-height:1; border-top:1px solid #d6d6d6; z-index:10; z-index:110; position:relative; min-width: 1200px;}
#sitefooter .wrap {width:1200px; position:relative; margin:0 auto; padding:45px 0 0; color: #000;}
#sitefooter p.pagetop {position:fixed; bottom:-150px; right:20px; z-index:1000; transition:bottom 0.5s ease;}
#sitefooter p.pagetop.show  {bottom:20px;}
#sitefooter p.pagetop a{display:block; width:135px; height:135px; background:url(../images/common/btn-pagetop.png) center center no-repeat; background-size:135px auto; transition:opacity 0.5s;}
#sitefooter p.pagetop a:hover {opacity:0.7;}
#sitefooter ul.sns li {display:inline-block; padding:0 5px;}
#sitefooter ul.sns li a{transition:0.5s;}
#sitefooter ul.sns li a:hover{opacity:0.8;}
#sitefooter ul.link {padding:0 0 35px;}
#sitefooter ul.link li{display:inline-block; padding:0 10px; position:relative;}
#sitefooter ul.link li:nth-child(n+2):before{content:''; width:1px; height:15px; position:absolute; left:0; top:0; background:#000;}
#sitefooter ul.link li a {font-size:14px; line-height:1; color:#000; text-decoration:none; letter-spacing: 0.15em;}
#sitefooter ul.link li a:hover{ text-decoration:underline;}
#sitefooter .rights {padding: 35px 0 7px;}
#sitefooter .copyrights {font-size: 12px;}
#sitefooter .copyrights + p{font-size:10px; line-height:1; color:#000; padding:17px 0 25px;}


/* contents base */	
h2.gradation { color: #991658; font-size: 43px; line-height: 1.3;font-weight: bold; font-style: italic; text-align: center; position: relative; margin-bottom: 67px; letter-spacing: 0.05em;font-family:'Kozuka Mincho Pro', 'Kozuka Mincho Std', '小塚明朝 Pro R', '小塚明朝 Std R', 游明朝, YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E',  HG明朝E, 'HGS明朝E',  HGS明朝E, 'ＭＳ Ｐ明朝', 'ＭＳ 明朝', 'MS PMincho', serif;}
h2.gradation span { font-weight: bold; display: block;}
h2.gradation:after{content: ''; background: url(../images/common/h2-line.png) center bottom no-repeat; height: 108px; position: absolute; left: 50%; bottom: -52px; margin-left: -600px; width: 100%; z-index: -1;}
/* bugfix */
h2.gradation em {background: -webkit-linear-gradient(-90deg, rgba(182,17,89,1) 0%,rgba(80,36,84,1) 100%); -webkit-text-fill-color: transparent; -webkit-background-clip: text; font-style: italic; font-weight: bold; padding: 0 0.25em;}
h2.gradation span.pc-inline {display: inline-block; margin:0 -0.25em 0 0; }
h2.gradation span.pc-inline + span.pc-inline {margin: 0 0 0 -0.25em;}
/* 文字グラデ、明朝との相性も悪いようでバグが多々。ちょっと設定が複雑です。*/
/* *** */

.pc-item {display:inline-block;}
.sp-item {display:none !important;}

.categoryarr {display: none;}
.animation-up {opacity: 0; position: relative; top: 0;}
.tablet .animation-up {opacity: 1;}


}

@media screen and (min-width:1920px){#wrap{background-size:100% auto !important;}}

@media screen and (max-width:640px){

a:hover {text-decoration: none;}

.ios a{cursor: pointer;}

html {font-size: -webkit-calc(100vw / 32); font-size: calc(100vw / 32);}
#wrap{min-width:inherit;}

.over-section{margin:0;}

body { background-color:#fff;}
main {padding:3.5rem 0 0; min-width:inherit;}
main section{padding:0; width:auto;}
.wrap   {width:auto;}
article   {width:auto;}
section {min-width: inherit;}

#siteheader{position:absolute; left:0; top:0; width:100%; font-size:0; line-height:1; z-index:100;}
#siteheader div{background:#fff; height:2.25rem; position:relative;}
#siteheader div .buy a{background:url(../images/common/btn-buy.png) left top no-repeat; display:block; width:10.35rem; height:2.25rem; background-size:100% auto;}
#siteheader div .buy a span { line-height: 2.25rem; font-size: 0.8rem; color: #fff; letter-spacing: 0.15em; padding: 0 0 0 1.5rem;}
#siteheader p.logo {position:absolute; right:0.85rem; top:0.45rem;}
#siteheader p.logo img {width: 2.3rem; height: auto;}
#siteheader ul,
#siteheader nav,
.subnavwrap {display:none;}


/*footer*/
#sitefooter {background:#fff; margin:0; font-size:0; line-height:1; border-top:1px solid #ababab; z-index:1000; position:relative;}
#sitefooter .wrap {width:100%; position:relative; margin:0 auto; padding:0.5rem 0 1.75rem; z-index:0;}
#sitefooter p.pagetop {position:absolute; top:-3.000rem; z-index:1000; right: 0.5rem;}
#sitefooter p.pagetop a{display:block; width:6.75rem; height:6.75rem; background:url(../images/common/btn-pagetop.png) center center no-repeat; background-size:100% auto; margin:0 auto;}
#sitefooter ul.sns li {display:inline-block; padding:1.5rem 0.25rem;}
#sitefooter ul.sns li a img {width:2.5rem; height:auto;}
#sitefooter ul.link li{display:block; position:relative; margin-top:1rem;}
#sitefooter ul.link li a {font-size:0.7rem; line-height:1; color:#000; text-decoration:none;}

#sitefooter .rights img {width:100%; height:auto;}
#sitefooter .copyrights {font-size:0.6rem; line-height:1; color:#000; padding: 0.8rem 0 0.9rem;}
#sitefooter .copyrights + p {font-size: 0.5rem; padding: 0;}

/*spnav*/
p.menutoggle {position:fixed; right:0.5rem; top:2.75rem; z-index:1200; transition: 0.3s; width:3rem; cursor:pointer; z-index: 4000;}
p.menutoggle a{display:block; background:url(../images/common/btn-menu.png) left top no-repeat; background-size:cover; width:3rem; height:3rem; text-indent:200%; overflow:hidden; white-space:nowrap; cursor:pointer; position: relative;}
p.menutoggle a:before {content: ''; display:block; height:3rem; width:3rem; text-indent:200%; overflow:hidden; white-space:nowrap; position:relative; background-position:center center; background-size:100% auto !important; background-image:url(../images/common/btn-close.png); opacity: 0; transition: 0.3s;}

p.menutoggle.scroll {top:0.5rem;}

#spnav {position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(255,255,255,0.9); opacity:0; z-index:-1111; font-size:0; transition:opacity 0.5s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}
#spnav .scroll {overflow:hidden; overflow-y:scroll; height:100%; position: relative; /*padding-bottom: 3.9rem;*/}

#spnav h2 {border-bottom: 0.1rem #816029 solid; z-index: 0; position: relative;}
#spnav h2 img {height: 6.35rem; width: 100%;}
#spnav p {position: absolute; right:0.5rem; top: 2.75rem; z-index: 10; display: none;}
#spnav p a {display:block; height:3rem; width:3rem; text-indent:200%; overflow:hidden; white-space:nowrap; position:relative; background-position:center center; background-size:100% auto !important; background-image:url(../images/common/btn-close.png);}

#spnav ul li {position:relative; border-bottom: 0.1rem #816029 solid; min-height: 3.9rem;}
#spnav ul li a{display: block; line-height: 3.9rem; position: relative;}
#spnav ul li a:after{content: ''; width: 100%; height: 3.9rem; background-image: url(../images/common/sp/gn01.png); background-position: center center; background-repeat: no-repeat; background-size: 100% auto; position: absolute; left: 0; top: 0;}
#spnav ul li:nth-child(2) a:after {background-image: url(../images/common/sp/gn02.png);}
#spnav ul li:nth-child(3) a:after {background-image: url(../images/common/sp/gn03.png);}
#spnav ul li:nth-child(4) a:after {background-image: url(../images/common/sp/gn04.png);}
#spnav ul li:nth-child(5) a:after {background-image: url(../images/common/sp/gn05.png);}
#spnav ul li:nth-child(6) a:after {background-image: url(../images/common/sp/gn07.png);}
#spnav ul li:nth-child(7) a:after {background-image: url(../images/common/sp/gn08.png);}

#spnav ul li a:before{content: ''; width: 100%; height: 3.9rem; background-image: url(../images/common/sp/gn01active.png); background-position: center center; background-repeat: no-repeat; background-size: 100% auto; position: absolute; left: 0; top: 0; z-index: 10; opacity: 0;}
#spnav ul li:nth-child(2) a:before {background-image: url(../images/common/sp/gn02active.png);}
#spnav ul li:nth-child(3) a:before {background-image: url(../images/common/sp/gn03active.png);}
#spnav ul li:nth-child(4) a:before {background-image: url(../images/common/sp/gn04active.png);}
#spnav ul li:nth-child(5) a:before {background-image: url(../images/common/sp/gn05active.png);}
#spnav ul li:nth-child(6) a:before {background-image: url(../images/common/sp/gn07active.png);}
#spnav ul li:nth-child(7) a:before {background-image: url(../images/common/sp/gn08active.png);}
#spnav ul li li {border-bottom: none;}
#spnav ul li li a:after,
#spnav ul li li a:before {display: none;}
#spnav ul li a {line-height: 3.9rem; display: block;}
#spnav ul li ul {border-top: 0.1rem solid #816029; display: none;}
#spnav ul li li a {font-size: 1.25rem; line-height: 3.9rem; display: block;}
#spnav ul li li + li {border-top: 0.1rem solid #c9c9c9;}
#spnav ul li li a.active {color:#b70d58; font-weight:bold;}

#spnav ul li.new::after {content:''; display:block; position:absolute; left:0; top:3.2rem; width:100%; background:url(../images/common/icon-new.jpg) center center no-repeat; height:1.25rem; z-index:100; background-size: auto 100%;}
#spnav ul li.new a{margin-bottom: 1.6rem;}
#spnav ul li.new li a{margin-bottom: 0;}
#spnav ul li ul li a span.new {font-size:0.75rem; color:#b62e6e; letter-spacing:0.25em; padding:0 0 0 1em; display:inline-block; position:relative; top:-0.5vw;}

/*
#spnav ul li.new a{margin-bottom: 4.125vw;}
#spnav ul li ul li a span.new {font-size:3.125vw; color:#ff00ae; letter-spacing:0.25em; padding:0 0 0 0.5em; display:inline-block; position:relative; top:-0.5vw;}
*/

.ie11 #spnav ul ul.open {margin-top: 3.9rem; display: block;}
/*.ios #spnav ul li ul.open {display: block;}*/

#spnav ul li.comingsoon a{opacity: 0.3;  filter: grayscale(100%);}
#spnav ul li.comingsoon a:before{opacity: 0 !important; cursor: default;}

/*メニュー開閉 */
.menuopen {overflow:hidden;}

/*.menuopen p.menutoggle{z-index:0; opacity:0;}*/
.menuopen p.menutoggle a:before{opacity: 1;}
.menuopen #spnav {opacity:1; z-index:1001;}
.menuopen #spnav .scroll{-webkit-overflow-scrolling: touch; overflow-scrolling: touch;}

.pageheader {width: 100%; text-align: left; margin: 0 auto; line-height: 1; padding:  0 0 0 1.5rem; z-index: 10; position: relative;}
.pageheader .logo {display: none;}
.pageheader h1 img{height: 1.2rem; display: block; margin-bottom: 0.8rem;}
.pageheader span {margin:0; line-height: 1.25rem; min-width: 11.25rem; display: block; text-align: center; border: 1px solid #991658; color: #991658;
font-family:'Kozuka Mincho Pro', 'Kozuka Mincho Std', '小塚明朝 Pro R', '小塚明朝 Std R', 游明朝, YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', HG明朝E, 'HGS明朝E',  HGS明朝E, 'ＭＳ Ｐ明朝', 'ＭＳ 明朝', 'MS PMincho', serif; letter-spacing: 0.4em; font-weight: bold; padding: 0 2.4em;
background: -webkit-linear-gradient(-90deg, rgba(182,17,89,1) 0%,rgba(80,36,84,1) 100%);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
float: left;
font-size: 0.9rem;
}

.pageheader img {vertical-align: middle;}
.pageheader .logo {position: absolute; right: 17px; top: -15px;}
.pageheader .logo a img {transition: 0.3s;}
.pageheader .logo a:hover img {opacity: 0.7;}

/* contents base */	
h2.gradation {font-size: 2.3rem; line-height: 1.2; color: #991658; position: relative; margin-bottom: 3.9rem; text-align: center;}
h2.gradation:after{content: ''; background: url(../images/common/sp/h2-line.png) left top no-repeat; width: 100%; height: 5.5rem; position: absolute; left: 0; bottom: -2.9rem; background-size: 100% auto;}
h2.gradation span {display: block; font-family:'Kozuka Mincho Pro', 'Kozuka Mincho Std', '小塚明朝 Pro R', '小塚明朝 Std R', 游明朝, YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E',  HG明朝E, 'HGS明朝E',  HGS明朝E, 'ＭＳ Ｐ明朝', 'ＭＳ 明朝', 'MS PMincho', serif; font-weight: bold; background: -webkit-linear-gradient(-90deg, rgba(182,17,89,1) 0%,rgba(80,36,84,1) 100%); -webkit-text-fill-color: transparent; -webkit-background-clip: text; font-style: italic;}
h2.gradation span.sp-inline {display: inline;}
h2.gradation em {background: -webkit-linear-gradient(-90deg, rgba(182,17,89,1) 0%,rgba(80,36,84,1) 100%); -webkit-text-fill-color: transparent; -webkit-background-clip: text; font-style: italic; font-weight: bold; padding: 0;}

.pc-item {display:none !important;}
.sp-item{display:inline-block;}

.categoryarr {position:fixed; left: -5rem; top: 50%; z-index: 1200; width: 3.4rem; transition: 0.8s ease; opacity: 0; font-size: 0; line-height: 1; margin-top: -2.7rem; padding: 0 !important;}
.categoryarr a {display: block; width: 3.4rem; height: 5.4rem; background:url(../images/common/arr-left.png) left top no-repeat; transition:  0.3s; background-size: 100% auto;}
.categoryarr.next {left: inherit; right: -5rem; margin-left: inherit; margin-right: 0; text-align: right;}
.categoryarr.next a{background: url(../images/common/arr-right.png) left top no-repeat; float: right; background-size: 100% auto;}
.windowloaded .categoryarr {opacity: 1; left: 0.5rem;}
.windowloaded .categoryarr.next {left: inherit; right: 0.5rem;}

.animation-up {opacity: 1; position: relative; top: 0;}

}

/* bugfix */
.ie h2.gradation span,
.ie .pageheader span,
.android h2.gradation span,
.android .pageheader span {font-family: 'Noto Serif Japanese','Kozuka Mincho Pro', 'Kozuka Mincho Std', '小塚明朝 Pro R', '小塚明朝 Std R', 游明朝, YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E',  HG明朝E, 'HGS明朝E',  HGS明朝E, 'ＭＳ Ｐ明朝', 'ＭＳ 明朝', 'MS PMincho', serif;}

#baseW {position: fixed; left: 0; bottom: 0; width: 100%; width: 100vw; height: 1px; z-index: -1111; opacity: 0;}

/* update */
#updatecheck {content: ''; width: 210px; height: 214px; position: fixed; left: 50%; bottom: -220px; margin-left: -105px; z-index: 2000; transition: 1s ;  transition-delay: 0.5s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}
#updatecheck img {width: 100%; height: auto;}
#updatecheck a {transition: 0.3s;}
#updatecheck a:hover{opacity: 0.7;}
.windowloaded #updatecheck{bottom: 0;}
.windowloaded #updatecheck.out {
  /*animation: bounce_out 2.6s ease 2s;*/
	transition-delay: 0; bottom: -250px; transition: 0.8s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.windowloaded #updatecheck img {
  animation: bounce_5580 2.6s ease 2s infinite;
  transform-origin: 50% 50%; 
}
@media screen and (max-width:640px){
	#updatecheck {width: 10.5rem; height: 10.7rem; bottom: -11rem; margin-left: -5.25rem;}
	.windowloaded #updatecheck.out {bottom: -11rem;}
}
@keyframes bounce_5580 {
  0% { transform:translateY(0) }
  5.55556% { transform:translateY(0) }
  11.11111% { transform:translateY(0) }
  22.22222% { transform:translateY(-15px) }
  27.77778% { transform:translateY(0) }
  33.33333% { transform:translateY(-15px) }
  44.44444% { transform:translateY(0) }
  100% { transform:translateY(0) }
}
@keyframes bounce_out {
  0% { transform:translateY(0) }
  5.55556% { transform:translateY(-10px)}
  11.11111% { transform:translateY(-20px)}
  100% { transform:translateY(-250px)}
}

/*	modal */
#modalMask {position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(255,255,255,0.9); z-index:100000; display:none;}
#modalContent {position:fixed; left:0; top:0; width:100%; height:100%; z-index:100001; display:none; cursor:pointer;}
#modalContent div.mc {width:1000px; height:638px; position:fixed; left:50%; top:50%; margin-left:0px; margin-top:0; z-index:10; padding:50px 0; transition:0.8s ease; -webkit-transform:scale(0,0); -moz-transform:scale(0,0); -o-transform:scale(0,0); -ms-transform:scale(0,0); transform:scale(0,0);}
#modalContent.view div.mc {-webkit-transform:scale(1,1); -moz-transform:scale(1,1); -o-transform:scale(1,1); -ms-transform:scale(1,1); transform:scale(1,1);}
#modalContent div.mc iframe {width:1000px; height:560px; position:relative; z-index:0;}
#modalContent .close {position:absolute; right:0px; top:0px; opacity:0; transition:0.3s; z-index:20;}
#modalContent.view .close{opacity:1;}
#modalContent .close a{display:block; width:40px; height:40px; overflow:hidden; text-indent:200%; white-space:nowrap; background:url(../images/common/btn-close.png) left top no-repeat; position:relative; transition:0.5s; background-size: 40px auto;}
#modalContent .close a:hover {opacity:0.5;}
@media screen and (max-width:640px){
	#modalContent div.mc {padding: 13.28125vw 0;}
	#modalContent .close a{display:block; width:3rem; height:3rem; overflow:hidden; text-indent:200%; white-space:nowrap; background-size: 100% auto;}	
}

/* loader */
#loader {background: rgba(255,255,255,0); width: 100%; height: 100%; z-index: 100000; position: fixed; left: 0; top: 0;}
.ie11 #loader  {background: rgba(255,255,255,1.00);}
#loader .loader{width: 4.6rem; height: 4.6rem; position: fixed; right: 50%; top: 50%; margin: -2.3rem -2.3rem 0 0;}
.loader span,
.loader span:after {
  border-radius: 50%;
  width: 4.6rem;
  height: 4.6rem;
}
.loader span{
	display: block;
  font-size: 1rem;
  position: relative;
  text-indent: -9999em;
  border-top: .21em solid rgba(203,90,114,0.2);
  border-right: .21em solid rgba(203,90,114,0.2);
  border-bottom: .21em solid rgba(203,90,114,0.2);
  border-left: .21em solid rgba(203,90,114,0.8);
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
	/*
	box-shadow: 0px 0px 4px rgba(235,66,8,1);
	box-shadow: 0px 0px 4px rgba(0,250,218,1);
	*/
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


.nicescroll-rails#ascrail2000-hr,
.nicescroll-rails#ascrail2000-hr div,
.nicescroll-rails#ascrail2000 ,
.nicescroll-rails#ascrail2000 div {z-index: 10000 !important; cursor: pointer;}
.nicescroll-rails#ascrail2001 ,
.nicescroll-rails#ascrail2001 div {z-index: 999999 !important; cursor: pointer;}
div[class=nicescroll-rails],
div[class=nicescroll-rails] div  {z-index: 999999 !important; cursor: pointer;}

/*
Colorbox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{-moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box;}

/* 
User Style:
Change the following styles to modify the appearance of Colorbox.  They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:rgba(255,255,255,0.8);}
#colorbox{outline:0;}
#cboxContent{margin-top:58px; margin-bottom: 38px; overflow:visible; background:none;}
.cboxIframe{background:#fff;}
#cboxError{padding:50px; border:1px solid #ccc;}
#cboxLoadedContent{background:none; padding:0; border: none;}
#cboxLoadingGraphic{}
#cboxLoadingOverlay{background:url(../images/common/oval.svg) center center no-repeat;}
#cboxTitle{position:absolute; top:-0; left:0; color:#000;}
#cboxCurrent{position:absolute; top:-0; right:205px; text-indent:-9999px;}

/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; text-indent:-9999px; width:20px; height:20px; position:absolute; top:-20px; background:url(../images/common/controls.png) no-repeat 0 0;}

/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

#cboxNext{right:57px; top: -50px; width: 32px; height: 40px; background: url(../images/common/arr-right.png) center center no-repeat; background-size: 100% auto; transition:0.5s;}
#cboxPrevious{right:112px; top: -50px; width: 32px; height: 40px; background: url(../images/common/arr-right.png) center center no-repeat; background-size: 100% auto; transform: rotate(180deg); transition:0.5s;}


#cboxClose{background:url(../images/common/btn-close.png) left top no-repeat; width:40px; height:40px; background-size:100% auto; right:0; top:-50px !important; transition:0.5s;}
#cboxPrevious:hover,
#cboxNext:hover,
#cboxClose:hover{opacity:0.7;}

@media screen and (max-width:640px){
#cboxContent{margin-top:5em; margin-bottom: 2rem;}

#cboxLoadingOverlay img {max-width: 100vw;}
#cboxNext{right:5rem; top: -4rem; width: 2.4rem; height: 3rem;}
#cboxPrevious{right:9rem; top: -4rem; width: 2.4rem; height: 3rem;}
#cboxClose{width:3rem; height:3rem; top:-4rem !important;}

#HW_win {max-width: 100% !important; height: auto;}
#HW_win img{max-width: 100% !important; height: auto;}
    
}

.analytics {position:fixed; left:-9999px; top:-9999px; height:0; width:0; overflow:hidden;}
#imageloaded {position: fixed; left: -9999px; font-size: 0; line-height: 1; height: 1px; width: 1px; overflow: hidden;}

.animation-up {}
.animation {}
.animation.itemshow {}
.animation-trigger{}
.uatablet .animation {}