@charset "utf-8";
/* CSS Document */
html{scroll-behavior: smooth;}

/*ローディング*/
body.time-out{overflow:auto; height: auto;}
body.nowload{overflow:hidden; height: inherit;}
body.loadend{overflow:auto; height: auto;}
body.agechk{overflow:hidden; height: inherit;}

@media screen and (max-width:737px) {
body.time-out{overflow:scroll; height: auto; -webkit-overflow-scrolling: touch;}
body.nowload{overflow:hidden; height: inherit;}
body.agechk{overflow:hidden; height: inherit;}
}

#loader-bg{position: absolute; width: 100%; height: 100vh; height: 100svh; z-index:99999; background: #fff;}
#loader-bg #loading{display:flex; justify-content: center; align-items: center; flex-flow: column nowrap; height: 100vh; height: 100svh; width: 100%;}

body.nowload #on-content{ visibility: hidden;}
body.loadend #on-content{ visibility: inherit;}

#on-content{ overflow-x: hidden;}

body.loadended #loader-bg,
body.loadended #loader{
-webkit-transition: 0.2s ease-in-out;  
-moz-transition: 0.2s ease-in-out;  
-o-transition: 0.2s ease-in-out;  
transition: 0.2s ease-in-out;
pointer-events: none;
opacity: 0; pointer-events: none;}

/*MMENU色変え*/
.mm-menu{background:#f22e85; color: #fff; font-size: 0.8rem;}
.mm-menu .mm-navbar a, .mm-menu .mm-navbar > * {
    color:#ffcdec;
}
.mm-menu a{ color: #fff;}

@media screen and (min-width: 830px) {
.sp-only{display: none;}
a {  
-webkit-transition: 0.2s ease-in-out;  
-moz-transition: 0.2s ease-in-out;  
-o-transition: 0.2s ease-in-out;  
transition: 0.2s ease-in-out;
}  
a:hover {opacity: 0.8; filter: alpha(opacity=80);}
}

a,a:hover{color:#412914;}

/*クリアフィックス*/
.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {clear: both;}
.cf {*zoom: 1;}
.clear{ clear:both; font-size:1px; line-height:100%; overflow:hidden; height:0px;}

img{ max-width: 100%;}

h1 img{ vertical-align:top;}
div img{ vertical-align:top;}
p img{ vertical-align:top;}
dt img{ vertical-align:top;}

.red{color: #e60913;}
.blue{color: #007FE1;}
.green{color: #00ad10;}

.font_l{font-size: 1.2em;}

a.anchor{
 scroll-margin-top: 90px;
}

.font_border{
  text-shadow:1px 1px 0 #333, -1px -1px 0 #333,
              -1px 1px 0 #333, 1px -1px 0 #333,
              0px 1px 0 #333,  0-1px 0 #333,
              -1px 0 0 #333, 1px 0 0 #333;	
}
.font_border_w{
  text-shadow:1px 1px 0 #fff, -1px -1px 0 #fff,
              -1px 1px 0 #fff, 1px -1px 0 #fff,
              0px 1px 0 #fff,  0-1px 0 #fff,
              -1px 0 0 #fff, 1px 0 0 #fff;	
}

/*共通ヘッダー調整*/
#product-siteheader{ position: absolute; top:0; z-index: 10; width: 100%;}
#product-siteheader .innr{ max-width: 1300px; width: 96%; height: 20px;}
#product-siteheader{font-family: "fot-seurat-pron", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; -webkit-text-size-adjust: 100%; letter-spacing: 0.04em;}

/*共通*/
a{text-decoration: none; }

#main a{color:#412914;
-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; 
}
#main a:hover {color:#ed0b6b;}  

.font_s{font-size: 0.8em;}
.font_l{ font-size: 1.2em;}

.shadow{box-shadow: 0 0 5px #663100;}

/*アニメーション調整*/
body.nowload .wow,
body.nowload .agechk
{ opacity: 0;}

.jp{
font-family: heisei-maru-gothic-std, sans-serif;
font-weight: 400;
font-style: normal;		
}
.jp_b{
font-family: heisei-maru-gothic-std, sans-serif;
font-weight: 800;
font-style: normal;	
}
.jp_f{
font-family: "sicyubi-futofuder", sans-serif;
font-weight: 700;
font-style: normal;
}
.jp_f2{
font-family: ta-engeifude, sans-serif;
font-weight: 400;
font-style: normal;
}
.en{
font-family: sofia-pro, sans-serif;
font-style: normal;
font-weight: 500;
}
.en_b{
font-family: sofia-pro, sans-serif;
font-style: normal;
font-weight: 700;
}
.font-standard{font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif"; font-weight: bold;}

body{
font-family:
	tbudrgothic-std, sans-serif,
	-apple-system, BlinkMacSystemFont,
	"游ゴシック体", YuGothic,
	"Yu Gothic M",
	"游ゴシック Medium", "Yu Gothic Medium",
	"ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3,
	"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN",
	"ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro",
	"メイリオ", Meiryo,
	Osaka,
	"ＭＳ Ｐゴシック", "MS PGothic",
	"Helvetica Neue", HelveticaNeue,
	Helvetica,
	Arial,
	"Segoe UI",
	sans-serif,
	"Apple Color Emoji",
	"Segoe UI Emoji",
	"Segoe UI Symbol",
	"Noto Color Emoji";
}

html,body{width:100%; margin:0; padding:0;}

body{text-align:center; font-size:90%; line-height:200%; letter-spacing: 0.08em; width: 100%; min-width: 1040px; color: #723434;}
body{background: #fff;}

body#top{background-size: cover;}
body#top #page{background-image: url("../images/common/background.jpg"); background-size:cover; background-position: top center;}

.innr-content{ width: 96%; margin: 0 auto; text-align: left; max-width: 1080px;}

#header{padding-top: 20px; position:absolute; width: 100%; z-index: 5;}
#header .innr-content{display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: flex-start; max-width: inherit; width: 100%;}

#header .innr-content h1{padding: 10px 0 0 2%; padding-right: 10px; flex: 1;}
#header .innr-content h1 img{max-width: 200px; height: auto;}

#header .innr-content #glnav{background:#fefcf7; border-radius: 0 0 0 10px; box-shadow: 0 0 3px #333; height: 60px;}
#header .innr-content #glnav .logo{display: none;}
#header .innr-content nav{display: flex; justify-content: flex-start; align-items: center; padding: 0 10px;}
#header .innr-content #glnav{display: flex; justify-content: flex-start; align-items: center;}
#header .innr-content #glnav ul{display: flex; justify-content: flex-start; align-items: center;}

#header .innr-content #glnav ul.nav-main{padding: 0 10px; font-size: 0.9rem; line-height: 100%;}
#header .innr-content #glnav ul.nav-main li{padding: 10px;}
#header .innr-content #glnav ul.nav-sub li {margin-right: 10px;}
#header .innr-content #glnav ul.nav-sub li a{background: #ec0c6d; border-radius: 99px; width:30px; height:30px; display: flex;
 justify-content: center; align-items: center;}
#header .innr-content #glnav ul.nav-sub li a img{width: 16px; height:auto;}

body.story #header .innr-content #glnav ul.nav-main li:nth-child(1){background-image: url("../images/common/icon_nikukyu.png");}
body.character #header .innr-content #glnav ul.nav-main li:nth-child(2){background-image: url("../images/common/icon_nikukyu.png");}
body.graphic #header .innr-content #glnav ul.nav-main li:nth-child(3){background-image: url("../images/common/icon_nikukyu.png");}
body.campaign #header .innr-content #glnav ul.nav-main li:nth-child(4){background-image: url("../images/common/icon_nikukyu.png");}
body.product #header .innr-content #glnav ul.nav-main li:nth-child(5),
body.social #header .innr-content #glnav ul.nav-main li:nth-child(5){background-image: url("../images/common/icon_nikukyu.png");}

#header .innr-content #glnav ul.nav-main li{background-size: 22px; background-repeat: no-repeat; background-position: right top 5px;}

/*ロールオーバーライン*/
#glnav nav li.line a.line_a{
  position: relative;
  text-decoration: none;
padding: 2px 0;
}

#glnav nav li.line a.line_a::before,
#glnav nav li.line a.line_a::after {
  border-bottom: solid 2px #ec0c6d;
  bottom: 0;
  content: "";
  display: block;
  position: absolute;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  width: 0;
}
#glnav nav li.line a.line_a::before {
  left: 50%;
}
#glnav nav li.line a.line_a::after {
  right: 50%;
}
#glnav nav li.line a.line_a:hover::before,
#glnav nav li.line a.line_a:hover::after {
  width: 50%;
}
/*ロールオーバーライン*/

/*ヘッダースクロール*/
#header.smaller .wow{visibility:inherit!important;}	
#header.smaller{position: fixed; top:0; left: 0; right: 0; width:100%; z-index: 100; padding-top: 0;}
#header.smaller h1{display: none;}
#header.smaller #glnav{width: 100%; border-radius: 0; background:rgba(254,252,247,0.8)!important; box-shadow: 0 0 3px #333!important; justify-content: space-between;}
#header.smaller #glnav .logo{display: inherit; padding-left: 2%; flex: 1;}
#header.smaller #glnav .logo img{height: 50px; width: auto;}

body#sec #main{background: url("../images/common/background_overwrap.jpg") no-repeat center bottom #fdfdfb; background-size: 100% auto; border-top:solid 1px #4F1819;}

#main .wrap-endcontent{padding:0 0 60px 0; text-align: center; z-index: 5; position: relative;}

#main .wrap-endcontent .button.back a{  background: linear-gradient(to right, #b6359c, #ec0c6d); display: flex; justify-content: center;
	 align-items: center; height: 50px; width: 220px; border-radius: 99px; font-size: 0.9rem; line-height: 100%; color: #fff;
	 margin: 0 auto;
}

#main .wrap-endcontent .nav-icon{margin:60px 0 30px 0;}
#main .wrap-endcontent .nav-icon ul{display: flex; justify-content: center; align-items: center;}
#main .wrap-endcontent .nav-icon li{margin-right: 10px;}
#main .wrap-endcontent .nav-icon li:last-child{margin-right:0;}
#main .wrap-endcontent .nav-icon li a{background: #ec0c6d; border-radius: 99px; width:30px; height:30px; display: flex;
 justify-content: center; align-items: center;}
#main .wrap-endcontent .nav-icon li a img{width: 16px; height:auto;}

#main .wrap-endcontent h3 img{max-width: 220px; height: auto;}

#footer{background: #333; z-index: 5; position: relative;}
#footer address{color: #fff; height: 40px; display: flex; justify-content: center; align-items: center; width: 100%;}

#aside{position:fixed; bottom:0; right: 0; z-index: 500;}

#aside ul{padding-bottom: 5px;}
#aside ul li{ writing-mode: vertical-rl; font-size: 0.8rem; line-height: 100%; margin-bottom: 15px;}
#aside ul li a{background-color: #ec0c6d; width: 50px; border-radius: 4px 0 0 4px; display: flex; justify-content: center; align-items: center; color: #fff;}

#aside ul li.social a{background-image:url("../images/common/icon_x_w.png"); background-repeat: no-repeat; background-position: top 20px center;
	 background-size: 20px auto; padding: 60px 0 20px 0;}
#aside ul li.contact a{background-image:url("../images/common/icon_mail_w.png"); background-repeat: no-repeat; background-position: top 20px center;
	 background-size: 20px auto; padding: 54px 0 20px 0;}
#aside ul li.pagetop a{height: 50px; padding: 0;}
#aside ul li.pagetop a img{width: 14px; height: auto;}

@media screen and (max-width: 1080px) {
#aside{right: 10px; bottom: 10px;}
#aside ul{ display: flex; justify-content: flex-end;}
#aside ul li{ writing-mode:horizontal-tb; font-size: 0.8rem; line-height: 100%; margin-bottom:0; margin-right: 10px;}
#aside ul li:last-child{margin-right: 0;}
#aside ul li a{width:inherit; height: 40px; border-radius: 4px;}

#aside ul li.social a{background-position: left 10px center; background-size: 16px auto; padding:0 10px 0 40px;}
#aside ul li.contact a{background-position: left 10px center; background-size: 16px auto; padding:0 10px 0 40px;}
#aside ul li.pagetop a{height: 40px; width: 50px;}

#footer address{justify-content: flex-start; padding-left: 2%;}	
	
}

/*IPAD横*/
@media only screen
    and (min-device-width:768px) 
    and (max-device-width:1024px) 
    and (orientation:landscape) {
}

/*IPAD縦*/
@media only screen
    and (min-device-width:768px) 
    and (max-device-width:1024px) 
    and (orientation:portrait){
#loader-bg{height: 100svh;}
}

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

body{min-width: inherit;}
#header .innr-content nav{padding: 0;}
#header .innr-content #glnav{background: none; box-shadow: none;}
#header .innr-content #glnav ul.nav-main{display: none;}
#header .innr-content h1 img{max-width: 130px; height: auto;}
#footer address{padding-bottom: 60px; justify-content: center;}

	
}

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

}

/*追加アニメーション*/
@keyframes fadeInRightmin {
  from {
    opacity: 0;
    transform: translate3d(10%, 0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.fadeInRightmin {
  animation-name: fadeInRightmin;
}

@keyframes fadeInLeftmin {
  from {
    opacity: 0;
    transform: translate3d(-10%, 0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.fadeInLeftmin {
  animation-name: fadeInLeftmin;
}

@keyframes fadeInTopmin {
  from {
    opacity: 0;
    transform: translate3d(0, -10%, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.fadeInTopmin {
  animation-name: fadeInTopmin;
}