@charset "utf-8";
/*
■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ 

 ■■■  ■                    ■                   
■     ■                    ■                   
■    ■■■■ ■ ■ ■   ■   ■■■ ■■■■ ■   ■  ■ ■  ■■■ 
 ■■   ■   ■■  ■   ■  ■■ ■  ■   ■   ■  ■■  ■  ■ 
  ■■■ ■   ■   ■   ■  ■     ■   ■   ■  ■   ■   ■
    ■ ■   ■   ■   ■  ■     ■   ■   ■  ■   ■■■■■
■   ■ ■   ■   ■  ■■  ■■    ■   ■  ■■  ■   ■    
■■■■  ■■  ■    ■■ ■   ■■■  ■■   ■■ ■  ■    ■■■ 

■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ 
*/
/* ---- Style ---- */
body{ color: #000; background:#fff; font-family: YakuHanRPs,"M PLUS Rounded 1c", sans-serif; font-weight: 300; }
.fnt-bsc{font-family: YakuHanRPs, "M PLUS Rounded 1c", sans-serif;}
.fnt-bsc.noyh{ font-family: "M PLUS Rounded 1c", sans-serif; }
.fnt-dsp1{  }

.fnt-n{ font-weight: 300; }

a,a:visited {color: #ff738c;}
a:hover,a:active {color: #ff738c; }

.fnt-ac0{ color:#000; }
.fnt-ac1{ color:#bcb6f3; }
.fnt-ac2{ color:#ff738c; }
.fnt-ac3{ color:#fef9e6; }
.fnt-ac4{ color:#16afe1; }

.fnt-ts{ text-shadow:-2px 0px 0px #000,2px 0px 0px #fff; }

.fnt-ul1{ position: relative; }
.fnt-ul1 > span{ position: relative; z-index: 1; }
.fnt-ul1 > span:before{ content:""; display: block; width: 100%; height: .2em; background-color:rgba(188, 182, 243, 0.5); position: absolute; bottom:0; left: 0; }

.fnt-ul2{ position: relative; }
.fnt-ul2 > span{ position: relative; z-index: 1; }
.fnt-ul2 > span:before{ content:""; display: block; width: 100%; height: .2em; background-color:rgba(255, 115, 140, 0.5); position: absolute; bottom:0; left: 0; }

.ttl1{ padding: .3em; font-weight: bold; color: #fff; background-color: #bb0b15; padding: .2em .5em; border-radius: .25em; }
.ttl2{ margin-bottom: .5em; }
.ttl2 > span{ display: block; padding: .2em .5em; border:#ff738c solid 1px; border-left:none; border-right:none; color: #ff738c; border-radius: 0; }
.ttl3{ position: relative; line-height: 1; }
.ttl3 > span{ display: inline-block; padding: 0 .5em .4em .5em; position: relative; z-index: 2; }
.ttl4{  }
.ttl4 > span{ display:block; border:#FFF solid 1px; padding: .2em .4em; }
.ttl4.il{  }
.ttl4.il > span{ display: inline-block; border:#FFF solid 1px; padding: .2em .4em; }
.ttl5{ background: rgba(0,0,0,.2); border-radius: 1.5em; padding: .25em; margin-left: auto; margin-right: auto; }

.ilink{ display: inline-block; padding: .75em 1.5em .75em 1.25em ; border:#ff738c solid 1px ; border-radius: .5em; text-decoration: none; font-size: 1em; font-weight: 600; line-height: 1; }
.ilink:before{ content:"> "; }
.ilink,
.ilink:visited,
.ilink:active{ color: #ff738c; background-color: transparent; }
.ilink:hover{ text-decoration: none; border-color: #bcb6f3; color: #bcb6f3; }
.ilink.off{ pointer-events: none; border-color: #666; color:#666; }


/* ---- Structure ---- */
html,body{ min-height:100%; position: relative; }
header,article,section,footer{ position: relative; width: 100%; display: block; }
.lo-part,.lo-cont{ position: relative; width: 100%; display: block; }

.part-background{ position: absolute; width: 100%; min-height:100%; overflow: hidden; }
.part-foreground{ position: absolute; width: 100%; min-height:100%; overflow: hidden; z-index: 999; pointer-events: none; }
.part-header{ position: relative; z-index: 500; }
.part-body{ position: relative; }
.part-footer{ position: relative; }

/* lazyestload */
img { transition: filter 0.3s;}
img.lazyestload { width: 100%; filter: blur(8px);}

/* background */
#Background  > div{ width: 100%; min-height: 100%; position: absolute;  pointer-events: none; }
#Background .bg-ptn{ background: url("../images/common/bg-pattern.webp") repeat-y center top; background-size: 100%; }
/* foreground */
#Foreground  > div{ width: 100%; min-height: 100%; position: absolute; top:0; pointer-events: none; }
#Foreground .opening{ }

/* header */
.part-header{ width: 100%; height: 100vh; position: fixed; top:0; left:0; pointer-events: none; background: rgba(251, 240, 244, 1)
url("../images/common/navi-bg-ptn.webp") repeat-y center top; background-size: 100%;}
.cont-global-logo{ width: calc(851/3000*100em); margin: 0; position: absolute; top:22.4em; left:calc(50em - 30em); z-index: 2; }

.cont-global-navi{ width: 50%; position: relative; padding: 5em 0 0 0; margin: 0 0 0 auto; z-index: 2; }
.global-navi{ width: 100%; padding:1em 1em; margin: 0 auto; position: relative; pointer-events: auto; text-align: left; }
.global-navi > ul{ display: flex; flex-wrap: wrap; flex-direction: column; align-items: flex-start; list-style-type: none; padding: 0; margin: 0; position: relative; }
.global-navi > ul > li{ width: 50%; display: block; padding: 0; margin: 0 0 1.4em 0; letter-spacing: .15em; position: relative; }
.global-navi > ul > li a{ color: #bcb6f3; text-decoration: none; position: relative; display: block; padding: 0 0 0 3em; }
.global-navi > ul > li a:before{ content:""; width: calc(67/3000*100em); height: calc(60/3000*100em); position: absolute; left: 0; top:.6em; background: url("../images/navi/marker.webp") repeat-y center top; background-size: 100%; visibility: hidden; }
.global-navi > ul > li a .label{ font-size: 3.0em; font-weight: 300; }
.global-navi > ul > li a:hover{ color: #bcb6f3; text-decoration: none;}
.global-navi > ul > li a:hover:before{ visibility: visible; }
.global-navi > ul > li.gnx a{ width: 5.4em; }
.global-navi > ul > li.gnx a .label-image{ display: block; width:100%; }
.global-navi > ul > li.gnx a:hover{ transform: scale(1.1); }
.global-navi > ul > li.gnx a:hover:before{  visibility: hidden; }
.global-navi > ul > li.crt a{ opacity: 1; pointer-events: none; color: #bcb6f3; }
.global-navi > ul > li.crt a:before{ visibility: visible; }
.global-navi > ul > li.cs a{ opacity: 1; pointer-events: none; color: #CCC; }
.global-navi > ul > li a.hdn{ display: none; }

.cont-sp-btn{ display: block; width: 4.7em; height: 4.7em; position: absolute; top:2em; right: 6em; z-index: 3; pointer-events: all; }
.cont-sp-btn a{ text-align: center; line-height: 0;  }
.cont-sp-btn a:hover{ text-decoration: none;}
.cont-sp-btn svg{ fill: currentColor; }
.cont-sp-btn .sp-navi-open{ display: block; }
.cont-sp-btn .sp-navi-close{ display: none;  }

.part-header{ background-color: rgba(255,255,255,0); background-image: none; transition: background-color .5s ease-out 0s; }
.part-header:before,
.part-header:after{ visibility: hidden; }
.cont-global-navi,
.cont-global-logo{ display: none; }

.spmenu-on .cont-sp-btn .sp-navi-open{ display: none; }
.spmenu-on .cont-sp-btn .sp-navi-close{ display: block; }
.spmenu-on .part-header{ background-color: rgba(251, 240, 244, 1); background-image: url("../images/common/navi-bg-ptn.webp"); pointer-events: auto; }
.spmenu-on .part-header:before,
.spmenu-on .part-header:after{ visibility: visible; }
.spmenu-on .cont-global-navi,
.spmenu-on .cont-global-logo{ display: block; }

/* body */
.part-body{ position: relative; display: block; margin: 0; }
.part-body-side{ display: none; }
.part-body-main{ position: relative; width: 100%; padding-bottom: 0; }
.cont-upper{ position: relative; }
.sub-page .cont-upper{ height: 9em; padding: 2em 0 0 0; margin-bottom: 3em; overflow: visible; }
.cont-middle{ position: relative;  }

.cont-top-content > .inner{ padding: 0; margin: 0 auto;}
.cont-sub-content > .inner{ width: calc(2000/3000*100vw); margin: 0 auto; }

.sub-subtitle{ width: 16em; height: 16em; border:#ff738c solid .2em; padding: 0; margin: 0; font-size: 1em; line-height: 1; text-align: center; z-index: 2; position: absolute; top:-5.5em; left:9.1em; border-radius: 16em; }
.sub-subtitle p{ margin: 7em auto 0 auto; z-index: 2; position: relative; }
.sub-subtitle::before{ content:""; display: block; width: calc(329/3000*100em); height: calc(277/3000*100em); background: url("../images/charm-news.webp") no-repeat center center; background-size: contain; position: absolute; top:7.1em; left:-6.3em; z-index: 1; }

.sub-logo{ width: calc(567/3000*100vw); padding: 0; margin: 0 auto; position: absolute; top:2.5em; left:0; right: 0; z-index: 51; }


/* footer */
.part-footer{ }
.cont-global-footer{ background-color: rgba(242, 242, 242, 0.3); margin: 0 auto;  position: relative; text-align: center; }
.footer-pagetop{ width: calc( 135/3000 * 100vw ); height: calc( 254/3000 * 100vw ); position: absolute; top:-7.5vw; left:0; right: 0; margin: 0 auto; z-index: 10; }
.footer-pagetop a{ display: block; position: relative; width: 100%; min-height: 100%; background:url("../images/navi/pagetop.png") no-repeat center center; background-size: contain; transform-origin: center center; }
.footer-pagetop a:hover{ transform: scale(1.1); }
/* .footer-pagetop{ opacity: 0;}
.footer-pagetop.start{ animation: anm-pagetop-btn .5s 0s ease-out both running;}
@-webkit-keyframes anm-pagetop-btn { 0% { opacity: 0; -webkit-transform: translateY(-2em); transform: translateY(-2em);} 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);}}
@keyframes anm-pagetop-btn { 0% { opacity: 0; -webkit-transform: translateY(-2em); transform: translateY(-2em);} 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);}}
.anm-pagetop-btn { -webkit-animation-name: anm-pagetop-btn; animation-name: anm-pagetop-btn;} */

.cont-footer{ padding: 3em 0 2em 0; width: 100%; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center;  }
.cont-footer > .left-block{ width: 100%; order:2; }
.global-navi.footer{ width: 51%; margin: 0 auto 2em auto; }
.global-navi.footer:before,
.global-navi.footer:after{ content:"("; display: inline-block; font-size: 2em; font-weight: 300; color: #bcb6f3; pointer-events: none; position: absolute; top:0em; left:0; }
.global-navi.footer:after{ content:")"; left:inherit; right: 0; }
.global-navi.footer > ul{ flex-direction: row; justify-content: center; }
.global-navi.footer > ul > li{ width: inherit; margin: 0; }
.global-navi.footer > ul > li a{ padding: 0 .5em; line-height: 1; }
.global-navi.footer > ul > li a:before{ display: none; }
.global-navi.footer > ul > li a .label{ font-size: 1.2em; font-weight: 400; }
.global-navi.footer > ul > li.gnx a{ width: 2.2em; position: relative; }
.global-navi.footer > ul > li.gnx a .label-image img{ vertical-align: bottom; }
.cont-footer > .right-block{ width: 100%; order:1; }
.footer-logo{ width:calc( 425/3000 * 100em ); padding: 0; margin: 0 auto 2em auto; }
.footer-copyrihgt{ width: 100%; padding: 0; margin: 0; text-align: center; }
.footer-copyrihgt p{ font-size: .8em; margin-bottom: 0; color: #353535;}



/* content */
.inview{ animation:inview 0.4s .2s ease-out both paused; }
.inview-start{ animation:inview-start 0.4s .2s ease-out both running; }
.inview-act{ transform-origin: left top; transition: all .5s ease .1s;  }

hr.sld{ border-color: #a9831e; }
hr.dot{ border-color: #a9831e; }

.table-a{ border-collapse: separate; border-spacing: 2px;}
.table-a th{ padding:0.5em; background-color:rgba(0,0,0,.05); font-weight: normal; text-align: inherit; vertical-align: top; text-align: left; }
.table-a td{ padding:0.5em; background-color:rgba(0,0,0,.025); vertical-align: top; }

.frame-a{ background-color: #f7f2e3; }
.frame-a2{ background-color: #fff; border: #a9831e solid 1px; }

.frame-s{ border-image: url("../images/common/frame-s.webp") 33% fill / 3.333vw repeat ;  }

.frame-l{ background-color: rgba(255, 255, 255, 0.5); position: relative; }
.frame-l:after{ content:""; width: calc(100% + 1.2em ); height: calc(100% + 1.2em ); position: absolute; top:-0.6em; left:-0.6em; z-index: 1; pointer-events: none; border-top:.11em #f09daf solid; border-left:.11em #f09daf solid; border-right:.11em #76c4aa solid; border-bottom:.11em #76c4aa solid; }

.frame-l2{ background: url("../images/common/frame-l2-bg.webp") repeat left top ; background-size: calc(59/3000*100em); position: relative; z-index: 1; }
.frame-l2:before{ content:""; width: calc(100% + 1.2em ); height: calc(100% + 1.2em ); position: absolute; top:0; left:0; z-index: 2; pointer-events: none; border-top:.11em #f09daf solid; border-left:.11em #f09daf solid; }
.frame-l2:after{ content:""; width: calc(100% + 1.2em ); height: calc(100% + 1.2em ); position: absolute; top:-1.2em; left:-1.2em; z-index: 2; pointer-events: none;  border-right:.11em #76c4aa solid; border-bottom:.11em #76c4aa solid; }

.frame-x{ background-color: rgba(221, 218, 249, 0.5); padding: .6em; position: relative; }
.frame-x:before,
.frame-x:after{ content:""; width:calc( 65/3000 * 100em ); height: calc( 61/3000 * 100em ); background: url("../images/common/frame-corner.webp") no-repeat center center ; background-size: contain; position: absolute; top:-0.8em; left:-0.8em; z-index: 2; pointer-events: none;}
.frame-x:after{ top:inherit; left:inherit; bottom:-0.8em; right:-0.8em;}
.frame-x > .inner{ background-color: #FFF; border-radius: .6em; overflow: hidden; position: relative; z-index: 1; }
.frame-x.pline > .inner{ border-radius: 1.2em; border:#f3b1bf solid .1em; overflow: visible; }

.sep-line{ display: block; width: 100%; height: .25em; background-image: radial-gradient(circle, #f3b1bf .125em, transparent .125em); background-position: left top; background-repeat: repeat-x; background-size: .8em .25em; }


/* 1 */
.cont-entries{ padding: 0; margin: 0 auto; padding-bottom: 3em; }
.content-entry{ padding: 0; margin: 0 0 3em 0; position: relative; }
.content-entry .entry-head{ margin-bottom: 0; position: relative; padding: 3em; background-color: #FFF; }
.content-entry .entry-date{ width: 10em; font-size: 1em; line-height: 1; margin: 0 auto 1.5em auto; text-align: center; pointer-events: none; position: relative; }
.content-entry .entry-date:before,
.content-entry .entry-date:after{ content:"("; display: inline-block; font-size: 1.9em; font-weight: 300; color: #f3b1bf; pointer-events: none; position: absolute; top:-0.25em; left:0; }
.content-entry .entry-date:after{ content:")"; left:inherit; right: 0; }
.content-entry .entry-date > span{ color: #f3b1bf; font-size: 1.1em; letter-spacing: .1em; margin-bottom: 0; position: relative;}
.content-entry .entry-title{ padding: 0em; margin: 0; position: relative; text-align: center;  }
.content-entry .entry-title > span{ font-size: 1.333em; font-weight: 300; line-height: 1.5; }
.content-entry .entry-body{ padding: 3em; font-size: 1.2em; letter-spacing: .05em; line-height: 1.8; position: relative; pointer-events: all; letter-spacing: .1em; background-color: #FFF;}
.content-entry .entry-body:before{ content:""; display: block; width: calc(100% - 6em); height: .25em; background-image: radial-gradient(circle, #f3b1bf .125em, transparent .125em); background-position: left top; background-repeat: repeat-x; background-size: .8em .25em; position: absolute; top:0; left:3em; margin: 0; }

.content-entry .entry-body [data-ruby]::before { top: -1.5em; }

.content-accordion .acd-check{ display: none;}
.content-accordion .acd-label{ display: block; margin: 0; }
.content-accordion .acd-head{ position: relative; }
.content-accordion .acd-head::after{ content:""; display: block; padding: 0; width: 2.1em; height: 2.1em; text-align: center; line-height: 1; background: url("../images/common/news-open.webp") no-repeat center center; background-size: contain; position: absolute; top:-1.15em; left:0; right:0; margin: 0 auto; pointer-events: none;}
.content-accordion .acd-body{ display: none; height: 0; overflow: hidden; transition: 0.5s all ease 0.5s; }
.content-accordion .acd-check:checked ~ .acd-body{ display: inherit; height: inherit; transition: 0.5s all ease 0s;}
.content-accordion .acd-check:checked ~ .acd-head{ border-bottom:none; }
.content-accordion .acd-check:checked ~ .acd-head::after{ background-image: url("../images/common/news-close.webp");}

.content-link .lnk-head{ position: relative; }
.content-link .lnk-head::after{content:""; display: block; padding: 0; width: 2.1em; height: 2.1em; text-align: center; line-height: 1; background: url("../images/common/news-link.webp") no-repeat center center; background-size: contain; position: absolute; top:2.25em; right:0; left:0; margin: 0 auto; pointer-events: none;}
.content-link .lnk-head a{ display: block; text-decoration: none; color: #a9831e; }

.content-non .non-head{ position: relative; }
.content-non .non-head a{ display: block; text-decoration: none; pointer-events: none; }

.content-single .inner{ padding:3em; }

.cont-tiles{ display: flex; flex-wrap: wrap; justify-content: center;  }

.modal-data{ display: none; }
.cont-modal{ width: 100%; margin: 0 auto; }



/* modaal */
.modaal-overlay{ background: rgba(255,255,255,1) url("../images/common/bg-pattern.webp") repeat-y center top; background-size: 100%; }
.modaal-wrapper{ overflow-x: hidden; }
.modaal-inner-wrapper{ padding: 80px 0; }
.modaal-container{ color: inherit; background-color: transparent; box-shadow:none; max-width: inherit; }
.modaal-content-container{ padding: 0; }
.modaal-video-wrap{ margin: auto auto; }
.modaal-close{ right: 2.5em; top: 1.5em; width: 3em; height: 3em; z-index: 100;}
.modaal-close:before,.modaal-close:after{ background-color: #000; border-radius: 0; top: .4em; left: 2em; width: .4em; height: 4em; }
.modaal-close:focus,.modaal-close:hover {background: transparent;}
.modaal-close:focus:before,.modaal-close:focus:after{background: #bcb6f3;}
.modaal-close:hover:before,.modaal-close:hover:after{background: #bcb6f3;}

/*
■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ 

              ■                 ■                
■             ■  ■       ■      ■               ■
■             ■                 ■               ■
■  ■■■■    ■■■■  ■ ■   ■ ■   ■■■■  ■   ■  ■■■   ■
■  ■■  ■  ■■ ■■  ■  ■  ■ ■  ■■ ■■  ■   ■  ■  ■  ■
■  ■   ■  ■   ■  ■  ■ ■  ■  ■   ■  ■   ■   ■■■  ■
■  ■   ■  ■   ■  ■  ■ ■  ■  ■   ■  ■   ■ ■■  ■  ■
■  ■   ■  ■■ ■■  ■   ■■  ■  ■■ ■■  ■  ■■ ■   ■  ■
■  ■   ■   ■■■■  ■   ■   ■   ■■■■   ■■ ■  ■■■■  ■

■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ 
*/
/* Modal */
#Modal_data{ display: none; }

/* TOP-PAGE */
/* main */
.cont-top-visual{ position: relative; overflow: hidden; padding-bottom:0; }
.cont-top-visual img{ width: 100%; height: auto; }
.cont-top-visual .kv-container{ padding: 0;  position: relative; margin: 0 auto; }
.kv-container > div{ position: absolute; top:0; }
.kv-container .grp{ width: calc(2000/3000*100em); position: relative; top:inherit; margin: 0 auto; display: none; }
.kv-container .grp.on{ display: block; }
.kv-container .grp > div{ position: absolute; top:0; }
.kv-container .grp .vis-grp{ position: relative; width: 100%; margin: 0 0 auto auto; }
.kv-container .grp .vis-grp .bg{ width: 100%; margin: 0 0 auto auto; position: relative; }
.kv-container .grp .vis-grp .vis{ width: 100%; position: absolute; top:0; right: 0; }
.kv-container .logo{ width: calc(1419/3000*100em); top:3.1em; left: 0; right:0; margin: 0 auto; }
.kv-container .catch{ width: calc(333/3000*100em); top:10em; left: 74.4em; }
.kv-container .oa{ width: calc(404/3000*100em); top:1.73em; left: 10em; }


.vis-switch-container{ padding: 1em 0 0 0; margin: 0; position: absolute; top:72vw; left:1.5vw;  z-index: 2; }
.vis-switch{ display: flex; flex-wrap: wrap; justify-content: flex-start; }
.vis-switch > div{ width: calc(240/3000*100vw); line-height: 0;}
.vis-switch > div a{ display: inline-block; padding: .5em;  }
.vis-switch > div.on a{  pointer-events: none; opacity: .5; }

/* #Foreground .opening{ display: none; } */
#Foreground .opening{ width: 100%; height: 100vh; position: fixed; overflow: hidden; display: flex; justify-content: center; align-items: center;  pointer-events: all; background-color: rgba(255, 255, 255, 1); }
#Foreground .opening .background{ width: 100%; height: 100%; position: absolute; top:0; left:0; background: url("../assets/top/op/background.webp") no-repeat center center; background-size: cover; }
#Foreground .opening .spark{ width: 100%; height: 100%; position: absolute; top:0; left:0; background: url("../assets/top/op/spark.webp") no-repeat center center; background-size: cover; }
#Foreground .opening .spark2{ width: 100%; height: 100%; position: absolute; top:0; left:0; background: url("../assets/top/op/spark.webp") repeat center center; background-size: 60%; }
#Foreground .opening .logo{width: calc(1235/3000*100vw); height: 20em; margin: 0 auto; position: relative; }

/* #Foreground .opening .logo{ width: 100%; position: relative; margin: 0 auto; } */
#Foreground .opening .logo div{ position: absolute; top:0; left:0; opacity: 1; }
#Foreground .opening .logo .bg{ opacity: 0; }
#Foreground .opening .logo .all{ width: calc(1074/3000*100vw); top:2.6vw; left:2.6vw; opacity: 0; }
#Foreground .opening .logo .l1{ width: calc(153/3000*100vw); top:3.1vw; left:4.9vw; }
#Foreground .opening .logo .l2{ width: calc(158/3000*100vw); top:4.35vw; left:9.85vw; }
#Foreground .opening .logo .l3{ width: calc(157/3000*100vw); top:2.6vw; left:15.6vw; }
#Foreground .opening .logo .l4{ width: calc(120/3000*100vw); top:4vw; left:20.8vw; }
#Foreground .opening .logo .l5{ width: calc(1074/3000*100vw); top:4.15vw; left:2.6vw; }


/* cookie */
.fst #Foreground .opening .vis{ opacity: 1; }
.vst #Foreground .opening { display: none; }

.kv-container .grp .vis-grp .vis{ opacity: 0; transform: scale(1.1); }
.kv-container .logo{ opacity: 0; transform: translateY(-10%); }
.kv-container .catch{ opacity: 0; transform: translateY(10%); }
.kv-container .oa{ opacity: 0; transform: translateY(10%); }

#Foreground .opening .background{ opacity: 0; transform-origin: center center; }
#Foreground .opening .spark{ opacity: 0; transform: scale(.25); transform-origin: center center; }
#Foreground .opening .spark2{ opacity: 0; transform: scale(.36); transform-origin: center center; }
#Foreground .opening .logo .bg{ opacity: 0; transform-origin: center center; }

#Foreground .opening .logo .l1,
#Foreground .opening .logo .l2,
#Foreground .opening .logo .l3,
#Foreground .opening .logo .l4{ opacity: 0; transform: translateY(-20%); }
#Foreground .opening .logo .l5{ opacity: 0; transform: translateY(-10%); }

.s0 #Foreground .opening{  }
.s0 #Foreground .opening .logo .l1{ opacity: 1; transform: translateY(0); transition: all .5s ease-out .25s; }
.s0 #Foreground .opening .logo .l2{ opacity: 1; transform: translateY(0); transition: all .5s ease-out .5s; }
.s0 #Foreground .opening .logo .l3{ opacity: 1; transform: translateY(0); transition: all .5s ease-out .75s; }
.s0 #Foreground .opening .logo .l4{ opacity: 1; transform: translateY(0); transition: all .5s ease-out 1s; }
.s0 #Foreground .opening .logo .l5{ opacity: 1; transform: translateY(0); transition: all .5s ease-out 1.5s; }

.s2 #Foreground .opening .logo .bg{ opacity: 1; transition: all .5s ease-out 0s; }
/* .s2 #Foreground .opening .logo { transform: scale(1.2); transition: all 1.5s ease-in-out 0s; transform-origin: center center; } */
.s2 #Foreground .opening .background { opacity: 1; transition: all 1.0s ease-in 0s;}
.s2 #Foreground .opening .spark { opacity: 1; transform: scale(1); transition: all .75s ease-in-out .8s; }
.s2 #Foreground .opening .spark2 { opacity: 1; transform: scale(1); transition: all .75s ease-in-out 1.0s; }

.s4 #Foreground .opening{ opacity: 0; transition: all .5s ease-out .45s; pointer-events: none; }
.s5 #Foreground .opening{ opacity: 0; pointer-events: none; }

.s5 .kv-container .grp .vis-grp .vis{ transform: scale(1); opacity: 1; transition: all .75s ease-out 0s; }
.s5 .kv-container .logo{ opacity: 1; transform: translateY(0%); transition: all .75s ease-out 0s; }
.s5 .kv-container .catch{ opacity: 1; transform: translateY(0%); transition: all .75s ease-out 0s; }
.s5 .kv-container .oa{ opacity: 1; transform: translateY(0%); transition: all .75s ease-out 0s; }

.kv-container .grp{ transform: scale(1.1,1.1) ; transform-origin: center center; opacity: 0; }
.kv-container .grp.on{ transform: scale(1,1); opacity: 1; transition: all 1.0s ease .0s; }



.cont-top-upper-right{ width: 100%; position: relative; }



/* top-news */
.cont-top-news{ background: rgba(255, 255, 229, 0.8); }
.cont-top-news > .inner{ padding: 2em 0 ;  }

.top-news-container{  width: 50%; padding:0; min-height: 20em; margin: 0 auto; }
.top-news-container > a{ display: block; padding: .75em 0 1.5em 0; margin-bottom: .75em; pointer-events: all; letter-spacing: .1em;
background-image: radial-gradient(circle, #ff738c .1em, transparent .1em); background-position: left bottom; background-repeat: repeat-x; background-size: .8em .2em; }
.top-news-container > a:last-child{ background-image: none; }
.top-news-container > a dl{ padding: 0; margin: 0; display: block; }
.top-news-container > a dl dt{ width: inherit; color: #f09daf; display: inline-block; padding: 0 ; margin: 0 0 .5em 0; line-height: 1; font-weight: normal; }
.top-news-container > a dl dt span{ font-size: .8em; }
.top-news-container > a dl dd{ width:100%; font-size: 1em; font-weight: 300; color: #000; display: block; padding: 0; margin: 0; line-height: 1.5; }
.top-news-container > a,
.top-news-container > a:visited{ text-decoration: none; color: #000; }
.top-news-container > a:hover{ text-decoration: underline; color: #000; }
.top-news-container > a.nonlink{ pointer-events: none; }



/* top-movie */
.cont-top-movie{ width:calc(730/3000*100em); position: absolute; top:-65em; left:5em; }
.cont-top-movie > .inner{ padding:0; }
.top-movie-list{ width: 100%; position: relative; margin: 0 auto; }
/* no slick ver */
.top-movie-list .thm{ width: 100%; margin: 0; line-height: 0;  }

.top-movie-list .thm a{ width: 100%; display: inline-block; pointer-events: auto; overflow: hidden; line-height: 0; opacity: .6; }
.top-movie-list .thm.slick-current a{ opacity: 1; }
.top-movie-list .thm a:before {content:""; z-index: 2; position: absolute;}
.top-movie-list .thm a::after{ content:""; position: absolute; display: block; width:100%; height:100%; background: url("../images/common/play-btn.webp") no-repeat center center; background-size: calc(80/3000*100em); transform-origin: center center; pointer-events: none; top:0; left: 0; right: 0; margin: 0 auto; opacity: 1; }
.top-movie-list .thm a:hover::after{ background-size: calc(90/3000*100em*1.1); }


/* top-banner */
.cont-top-banner{ }
.cont-top-banner > .inner{ padding:2em 0; }
.banner-trial{ width: 26em; margin: 0 auto; }




/* SUB-PAGE */

.cont-cat-navi{ width: 100%; position: relative; margin: 0 auto 2em auto;}
.cat-navi{ width: 100%; margin: 0; position: relative; }
.cat-navi > ul{ display: flex; flex-wrap: wrap; justify-content: center; flex-direction: row; list-style-type: none; padding: 0; margin: 0; position: relative; }
.cat-navi > ul > li{ display: block; padding: 0 ; margin: .5em ; letter-spacing: .1em; line-height: 1; position: relative;}
.cat-navi > ul > li.sep{ width: 100%; height: 1px; margin: 0 ; }
.cat-navi > ul > li a{ color: #2a5828; padding: .75em 1em ; text-decoration: none; position: relative; display: block; pointer-events: auto; background: #FFF; border:#2a5828 double 3px; }
.cat-navi > ul > li a .label{ padding-left: 1em; font-size: 1.1em; position: relative; }
.cat-navi > ul > li a .label:before{ content:"> "; margin-right: .25em; display: inline-block; position: absolute; top:.35em; left:0;}
.cat-navi > ul > li a:hover{ text-decoration: none; color: #fabe00; border-color: #fabe00; }
.cat-navi > ul > li.crt a{ text-decoration: none; color: #fabe00; border-color: #fabe00; pointer-events: none;}

.block-data{ display: none; }
.block-data.crt{ display: inherit; }

.sub-page .cont-upper{ }
.sub-page .cont-middle{ min-height: calc(100vh - 26.5em);}

/* news */
.cont-sub-news{ }
.cont-sub-news > .inner{}
.sub-subtitle.news p{ width: calc(250/3000*100em); }
.sub-news-container{ position: relative; }



/* story */
.cont-sub-story{  }
.cont-sub-story > .inner{  }
.sub-subtitle.intro p{ width: calc(360/3000*100em); margin-top:6em; }
.sub-subtitle.intro::before{ width: calc(366/3000*100em); height: calc(204/3000*100em); background-image: url("../images/charm-story.webp") ; top:6.9em; left:10em; }

.sub-story-container{  }
.intro-text{ text-align: center; padding: 2em 0; font-size: 1.333em;}
.intro-text > p{ letter-spacing: .1em; line-height: 2; margin-bottom: 2em; }
.intro-text > p.ctt{ font-size: 1.2em; font-weight: 400; }
.intro-text > p [data-ruby]::before { top: -1.7em; }

.intro-ec1{ width: calc(480/3000*100em); position: absolute; top:3em; left:-6em; pointer-events: none; }
.intro-ec2{ width: calc(480/3000*100em); position: absolute; top:16em; left:54em; pointer-events: none; }



/* staffcast */
.cont-sub-staffcast{ }
.cont-sub-staffcast > .inner{ }
.sub-subtitle.staffcast p{ width: calc(339/3000*100em); margin-top:6em; }
.sub-subtitle.staffcast::before{ display: none; }

.staffcast-charm1{ width: calc(578/3000*100em); position: absolute; top:3em; left:57em; pointer-events: none; }
.staffcast-charm2{ width: calc(509/3000*100em); position: absolute; top:49em; left:-5em; pointer-events: none; }

.sub-staffcast-container{ }
.staffcast-list-cont{ display: flex; flex-wrap: wrap; justify-content: center; color: #999999; }
.list-title{ width: calc(216/3000*100em); text-align: center; margin: 0 auto 3em auto; }

.staffcast-list{ width: 100%; margin-bottom:3em;  text-align: center; display: flex; flex-wrap: wrap; justify-content: center; position: relative; z-index: 3; }
.staffcast-list > div{ width: 25%; margin-bottom: 3em; position: relative; }
.staffcast-list.cs > div{ width: 25%;  }
.staffcast-list > div.sep{ width: 100%; height: 1px; }
.staffcast-list > div.full{ width: 100%; }
.staffcast-list > div.p60{ width: 60%; }
.staffcast-list > div.p50{ width: 50%; }
.staffcast-list > div.p40{ width: 40%; }
.staffcast-list > div.p33{ width: 30%; }
.staffcast-list > div.p30{ width: 30%; }
.staffcast-list > div.p25{ width: 25%; }
.staffcast-list > div.p20{ width: 20%; }
.staffcast-list > div > div{ margin-bottom: 3em; position: relative; }
.staffcast-list .pos{ display: block; font-size: 1.2em; letter-spacing: .05em;  margin-bottom: .5em; line-height: 1; }
.staffcast-list .name{ display: block; font-size: 1.6em; letter-spacing: .05em; margin-bottom: 0; line-height: 1.3; }
.staffcast-list .exname{ display: block; font-size: 1em; letter-spacing: .1em; padding-top: .5em; margin-bottom: 0; line-height: 1.2; }
.staffcast-list .comment{ display: block; width: 2.63em; margin: 0 auto; padding-top:.5em; text-decoration: none; pointer-events: auto; }
.staffcast-list .comment .cmt{ display: block; position: relative;}
.staffcast-list .comment .cmt:hover{transform: scale(1.1); text-decoration: none; cursor: pointer; }

.cont-modal.comment{ width: 66em;  }
.comment-title{ width: calc(304/3000*100em); margin: 0; position: absolute; top:-3em; right:-3em; z-index: 3; }
.comment-container > .inner{ padding: 3em;  }
.comment-image{ margin:-5em -6.5em 3em 2em; }
.comment-text-q{ padding: .5em .5em .5em 1.75em;  background: url("../images/sub-staffcast-comment-q.webp") no-repeat 0 .6em; background-size: calc(37/3000*100em) ; }
.comment-text-q p{ margin-bottom: 0; letter-spacing: .025em; }
.comment-text-a{ padding: .5em;}
.comment-text-a p{ font-size: 1.2em; margin-bottom: 0; letter-spacing: .075em; }
.comment-container .text{ font-size: 1.2em; line-height: 2; letter-spacing: .05em; }



/* character */
.cont-sub-character{  }
.cont-sub-character > .inner{  }
.sub-subtitle.character p{ width: calc(396/3000*100em); }
.sub-subtitle.character::before{ width: calc(503/3000*100em); height: calc(350/3000*100em); background-image: url("../images/charm-character.webp") ; top:5.5em; left:-6.5em; }

.sub-character-container{ padding-top: 2em; }


#CharaCont{ position: relative; }
.cont-character-navi{ width: 100%; margin: 0 auto; position: absolute; top:-8em; left:0; right:0; z-index: 5; }
.character-navi{ width: 100%; }
.character-navi ul{ display: flex; flex-wrap: wrap; justify-content: center; margin: 0; padding: .35em 0 0 0; list-style-type: none; }
.character-navi ul li{ width: calc(240/3000*100em); height: calc(240/3000*100em); display: block; margin: 0 .25em; padding:0; }
.character-navi ul li.br{ width: 100%; height: 0; margin: 0; padding:0; }
.character-navi ul li.br-sp{width: 100%; height: 0; margin: 0; padding:0; display: none; }
.character-navi ul li a{ display: block; width: 100%; min-height: 100%; position: relative; transform-origin: center center; pointer-events: all; cursor: pointer; background: url("../assets/character/n.webp") no-repeat 0 0; background-size: calc(2500/3000*100em); }
.character-navi ul li.n1 a{ background-position-x: 0 ; }
.character-navi ul li.n2 a{ background-position-x: calc(240/3000*100em*-1) ; }

.character-navi ul li a:hover{ text-decoration: none; transform: scale(1.05); }
.character-navi ul li.crt a{ pointer-events: none; background-position-y: calc(240/3000*100em*-1) ; }

.cont-character-data{ width:100%; min-height: 60em; position: relative; z-index: 3; }
.character-data{ width:100%; min-height: 60em; position: relative; display: none;  }

.character-data .chr-img{ position: absolute; z-index: 2; width: calc(900/3000*100em); top:1em; left:-2em;  }
.character-data .chr-img .figure{ display: none; }
.character-data .chr-img .figure.nochange{ display: block; }
.character-data[data-swt="1"] .chr-img .figure.fig1{ display: block; }
.character-data[data-swt="2"] .chr-img .figure.fig2{ display: block; }

.character-data .chr-switch{ width: calc(136/3000*100vw); position: absolute; top:7em; left:7em; pointer-events: auto; z-index: 5; }

.character-data .chr-prof{ position: relative; z-index: 3; width: calc(968/3000*100em); margin: 0 auto auto 27em;  }
.character-data .chr-prof .prof-frame{ padding-top: 5em; position: relative; z-index: 3;  }

.character-data .prof-name{  margin: 0 auto 1em auto; text-align: center; position: relative; }
.character-data .prof-text{ margin-bottom: 1.5em; padding: 0 0 0 1.25em; position: relative; }
.character-data .prof-text .text{ margin: 0; font-size: 1.2em; letter-spacing: .05em; line-height: 1.75; position: relative; z-index: 6; }
.character-data .prof-text .text [data-ruby]::before { top: -1.7em; }

.character-data .prof-face{ width: calc(900/3000*100em); position: relative;}
.character-data .prof-face .face{ display: none; }
.character-data .prof-face .face.nochange{ display: block; }
.character-data[data-swt="1"] .prof-face .face.fig1{ display: block; }
.character-data[data-swt="2"] .prof-face .face.fig2{ display: block; }

.character-data .prof-name-e{ width: calc(918/3000*100em); margin-left:1.25em;  position: relative;}

.character-data.crt{ display: block; }
.character-data.crt .chr-img{ animation: anm-character-change .5s .05s ease-out both running; }
@keyframes anm-character-change {
  0% { opacity: 0;}
  100% { opacity: 1;}
}



/* books */
.cont-sub-books{  }
.cont-sub-books > .inner{  }
.sub-subtitle.books p{ width: calc(287/3000*100em); }
.sub-subtitle.books::before{ width: calc(475/3000*100em); height: calc(379/3000*100em); background-image: url("../images/charm-books.webp") ; top:6.1em; left:6.9em; }

.sub-books-container{  }
.books-text{ width: 70%; margin: 0 auto 4em auto; text-align: center; }
.books-text > p{ letter-spacing: .05em;  }

.books-list{ display: flex; flex-wrap: wrap; justify-content: flex-start; margin: 0 auto 2em auto; }
.books-list > div{ width: calc( (1 / 5 * (100% + .5em)) - .5em ); margin-bottom: .5em; margin-right: .5em; }
.books-list > div:nth-of-type(5n){ margin-right: 0;}
.books-list > div p{ margin: 0; }

.books-new{ width: calc(400/3000*100em);margin: 0; position: absolute; top:2.3em; left:7em; }
.books-banner{ width: calc(620/3000*100em); text-align: center; margin: 0 auto ; }

/*
■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■      

                     ■                                                     
 ■■    ■■            ■  ■             ■■■                     ■            
 ■■    ■■            ■               ■   ■                                 
 ■■■  ■ ■   ■■■   ■■■■  ■  ■■■      ■     ■  ■   ■   ■■■  ■ ■ ■   ■■■  ■■■ 
 ■ ■  ■ ■  ■  ■  ■■ ■■  ■  ■  ■     ■     ■  ■   ■  ■  ■  ■■  ■  ■  ■  ■   
 ■ ■  ■ ■  ■   ■ ■   ■  ■   ■■■     ■     ■  ■   ■  ■   ■ ■   ■  ■   ■ ■■  
 ■  ■■  ■  ■■■■■ ■   ■  ■ ■■  ■     ■     ■  ■   ■  ■■■■■ ■   ■  ■■■■■   ■■
 ■  ■■  ■  ■     ■■ ■■  ■ ■   ■      ■  ■■   ■  ■■  ■     ■   ■  ■        ■
 ■      ■   ■■■   ■■■■  ■  ■■■■       ■■■■■   ■■ ■   ■■■  ■   ■   ■■■  ■■■ 

■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ 
*/
/* Custom 1920 ----------------------------------------------------------------------------- */
@media (max-width: 1919px) {
}
/* Custom 1400 ----------------------------------------------------------------------------- */
@media (max-width: 1399px) {

}
/* LG ----------------------------------------------------------------------------- */
@media (max-width: 1199px) {

}
/* MD ----------------------------------------------------------------------------- */
@media (max-width: 991px) {
}
/* lt768 ----------------------------------------------------------------------------- */
@media (min-width:768px) {
}
/* SM ----------------------------------------------------------------------------- */
@media (max-width: 767px) {
/* ---- Structure ---- */
html,body{ min-height:100%; position: relative; }
body{ }

/* background */
#Background .plxbg{ width: 100%; height: 100%; min-height: 100%; position: absolute; pointer-events: none; }
#Background .bg-ptn{  }


/* foreground */

/* header */
.part-header{ }
.cont-global-logo{ width: 50%; margin: 0 auto; position: absolute; top:2em; left:0; right: 0; z-index: 2; }
.cont-global-navi{ width: 100%; padding: 7em 0 0 0; margin: 0 0 0 auto;  }
.global-navi{ width: 100%; padding:1em 1em; }
.global-navi > ul{  padding: 0 0 0 20%; }
.global-navi > ul > li{ width: 70%; margin: 0 0 1em 0;  }

.global-navi > ul > li a{ padding: 0 0 0 2.5em; }
.global-navi > ul > li a:before{ width: calc(67/3000*100em*0.7); height: calc(60/3000*100em*0.7); left: 0; top:.6em; }
.global-navi > ul > li a .label{ font-size: 2.0em; }
.global-navi > ul > li.gnx a{ width: 4.5em; }

.cont-sp-btn{ width: 3em; height: 3em; top:1em; right: 1em; }


/* body */
.sub-page .cont-upper{ height: 6em; background-position: center top ; padding: 0; margin-bottom: 1em; }

.cont-top-content > .inner{ padding: 0; margin: 0 auto;}
.cont-sub-content > .inner{ width: 100%; margin: 0 auto; }

.sub-subtitle{ width: 8em; height: 8em; border-width: .1em; top:-2.5em; left:10.25em; }
.sub-subtitle p{ margin: 3.5em auto 0 auto; z-index: 2; position: relative; }
.sub-subtitle::before{ content:""; display: block; width: calc(329/3000*100em*0.5); height: calc(277/3000*100em*0.5); background: url("../images/charm-news.webp") no-repeat center center; background-size: contain; position: absolute; top:3.55em; left:-3.1em; z-index: 1; }



.sub-logo{ display: none; }


/* footer */
.part-footer{  }
.cont-global-footer{  }
.footer-pagetop{ width: calc( 135/3000 * 100vw *2 ); height: calc( 254/3000 * 100vw *2); position: absolute; top:-15vw; }

.cont-footer{  }
.cont-footer > .left-block{ width: 100%; order:2; }
.global-navi.footer{ width: 95%; padding:0; }
.global-navi.footer > ul{ flex-direction: row; padding: 0; justify-content: center; }
.global-navi.footer > ul > li{ width: inherit; margin: 0 .25em 1.0em .25em;  }
.global-navi.footer > ul > li.gnx{ width: 100%; margin: 0 0 1.5em 0; }
.global-navi.footer > ul > li.gnx a{ width: 2.5em; display: block; margin: 0 auto; }
.global-navi.footer > ul > li.gnx a .label-image{ display: block; width:100%; }

.cont-footer > .right-block{ width: 100%; order:1; }
.footer-logo{ width:calc( 487/3000 * 100em * 0.8 ); }



/* content */

.frame-x{ background-color: rgba(221, 218, 249, 0.5); padding: .6em; position: relative; }
.frame-x:before,
.frame-x:after{ content:""; width:calc( 65/3000 * 100em * 0.75 ); height: calc( 61/3000 * 100em * 0.75 ); top:-0.6em; left:-0.6em;}
.frame-x:after{ bottom:-0.6em; right:-0.6em;}
.frame-x > .inner{ border-radius: .6em; }
.frame-x.pline > .inner{ border-radius: 1.2em; }

.sep-line{ display: block; width: 100%; height: .25em; background-image: radial-gradient(circle, #f3b1bf .125em, transparent .125em); background-position: left top; background-repeat: repeat-x; background-size: .8em .25em; }

/* 1 */
.cont-entries{ padding-bottom: 3em; }
.content-entry{ margin: 0 0 3em 0; }
.content-entry .entry-head{ padding: 1.75em; }
.content-entry .entry-date{ width: 9em; margin: 0 auto 1.25em auto; }
.content-entry .entry-date:before,
.content-entry .entry-date:after{ font-size: 1.5em; top:-0.25em; left:0; }
.content-entry .entry-date:after{ content:")"; left:inherit; right: 0; }
.content-entry .entry-date > span{ font-size: .9em; }
.content-entry .entry-title > span{ font-size: 1.2em; }
.content-entry .entry-body{ padding: 1.75em; font-size: 1.133em;}
.content-entry .entry-body:before{ width: calc(100% - 3.5em); height: .25em; background-image: radial-gradient(circle, #f3b1bf .1em, transparent .1em); background-size: .6em .2em; left:1.75em; margin: 0; }

.content-single .inner{ padding:1.75em; }

.cont-tiles{ display: flex; flex-wrap: wrap; justify-content: center;  }

.modal-data{ display: none; }
.cont-modal{ width: 100%; margin: 0 auto; }




/* modaal */
.modaal-inner-wrapper{ padding: 60px 0; }
.modaal-close{ right: 2.5em; top: 1.5em; width: 2em; height: 2em;}
.modaal-close:before,.modaal-close:after{ top: .4em; left: 2em; width: .3em; height: 3em; }
.modaal-gallery-control{ bottom:-4.5em; }


/* TOP-PAGE */
/* main */
.cont-top-visual{ position: relative; overflow: hidden;  }
.cont-top-visual img{ width: 100%; height: auto; }
.cont-top-visual .kv-container{ padding: 0;  position: relative; margin: 0 auto; }
.kv-container > div{ position: absolute; top:0; }
.kv-container .grp{ width: 100%; position: relative; top:inherit; display: none; }
.kv-container .grp.on{ display: block; }
.kv-container .grp > div{ position: absolute; top:0; }
.kv-container .grp .vis-grp{ position: relative; width: 100%; margin: 0; }
.kv-container .grp .vis-grp .bg{ position: relative; }
.kv-container .grp .vis-grp .vis{ position: absolute; top:0; }
.kv-container .logo{ width: 65%; top:1.5em; }
.kv-container .catch{ width: calc(333/3000*100em*0.45); top:7em; left: 24.5em; }
.kv-container .oa{ width: calc(404/3000*100em*0.45); top:8em; left: .5em; }


.cont-top-upper-right{ width: 100%;  }


/* top-news */
.cont-top-news{ margin-bottom: 2em; }
.top-subtitle.news{ width:calc(440/3000*100e*.45m); margin: 0; position: absolute; top:-2em; left:0; z-index: 2; }
.cont-top-news > .inner{ padding: 2em; min-height: 100%; position: relative; z-index: 1; }

.top-news-container{ width: 100%; padding:0; }
.top-news-container > a{ padding: .5em;  border-width:1px; margin-bottom: .75em; }
.top-news-container > a dl{ padding: 0; margin: 0; display: block; }
.top-news-container > a dl dt{ margin: 0 0 .5em 0; }
.top-news-container > a dl dt span{ font-size: .9em; }
.top-news-container > a dl dd{ font-size: 1em; }


/* top-movie */
.cont-top-movie{ width:90%; position: relative; top:inherit; left:inherit; margin: 0 auto 1em auto; }


/* top-banner */
.cont-top-banner{ }
.cont-top-banner > .inner{ padding:2em 0; }
.banner-trial{ width: 80%; }



/* SUB-PAGE */

.cont-cat-navi{ width: 100%; position: relative; margin: 0 auto 2em auto ;}
.cat-navi > ul > li{ margin: .25em ; }
.cat-navi > ul > li a{ padding: .5em .5em ; }
.cat-navi > ul > li a .label{ font-size: .9em; }

.sub-page .cont-upper{ }
.sub-page .cont-middle{ min-height: calc(100vh - 27em);}

/* news */
.cont-sub-news{ }
.cont-sub-news > .inner{ width: 95%; }
.sub-subtitle.news p{ width: calc(250/3000*100em*.5); }
.sub-news-container{ position: relative; }


/* story */
.cont-sub-story{  }
.cont-sub-story > .inner{ width: 100%; }
.sub-subtitle.intro p{ width: calc(360/3000*100em*.5); margin-top:3em; }
.sub-subtitle.intro::before{ width: calc(366/3000*100em*.5); height: calc(204/3000*100em*.5); top:3.45em; left:5em; }
.sub-story-container{}
.intro-text{ text-align: center; padding: 2em 0; font-size: 1.133em;}
.intro-text > p{ letter-spacing: .1em; line-height: 2; margin-bottom: 2em; }
.intro-text > p.ctt{ font-size: 1.2em; }

.intro-ec1{ width: calc(480/3000*100em*.5); position: absolute; top:-1em; left:-.5em; pointer-events: none; }
.intro-ec2{ width: calc(480/3000*100em*.5); position: absolute; top:34em; left:21.5em; pointer-events: none; }


/* staffcast */
.cont-sub-staffcast{ padding-bottom: 3em; }
.cont-sub-staffcast > .inner{ width: 95%;  }
.sub-subtitle.staffcast p{ width: calc(339/3000*100em*0.5); margin-top:3em; }
.sub-subtitle.staffcast::before{ display: none; }

.staffcast-charm1{ width: calc(578/3000*100em*0.45); position: absolute; top:-3em; left:19.5em; pointer-events: none; }
.staffcast-charm2{ width: calc(509/3000*100em*0.45); position: absolute; top:62em; left:-1em; pointer-events: none; }

.list-title{ width: calc(216/3000*100em*0.6); text-align: center; margin: 0 auto 2em auto; }

.staffcast-list{ margin-bottom:2em; }
.staffcast-list > div{ width: 50%; margin-bottom: 2em; position: relative; }
.staffcast-list > div.sep{ width: 100%; height: 1px; }
.staffcast-list > div.full{ width: 100%; }
.staffcast-list > div.p60{ width: 100%; }
.staffcast-list > div.p50{ width: 100%; }
.staffcast-list > div.p40{ width: 100%; }
.staffcast-list > div.p33{ width: 100%; }
.staffcast-list > div.p30{ width: 100%; }
.staffcast-list > div.p25{ width: 50%; }
.staffcast-list > div.p20{ width: 50%; }
.staffcast-list > div > div{ margin-bottom: 2em; }
.staffcast-list .pos{ font-size: 1.0em; }
.staffcast-list .name{ font-size: 1.333em; }
.staffcast-list .exname{ font-size: .9em; }
.staffcast-list .comment{ width: 2em; padding-top:.5em; }

.cont-modal.comment{ width: 96%;  }
.comment-title{ width: calc(304/3000*100em*0.6); margin: 0; position: absolute; top:-1em; right:-0.4em; z-index: 3; }
.comment-container > .inner{ padding: 3em;  }
.comment-image{ margin:0 auto 2em auto; }
.comment-text-q{ padding: .5em .5em .5em 1.5em; background-position: 0 .7em; background-size: calc(37/3000*100em*0.6) ; }
.comment-text-q p{ margin-bottom: 0; letter-spacing: .05em; }
.comment-text-a{ padding: .5em;}
.comment-text-a p{ font-size: 1.133em; margin-bottom: 0; letter-spacing: .05em; }
.comment-container .text{ font-size: 1.133em; line-height: 2; letter-spacing: .05em; }


/* character */
.cont-sub-character{  }
.cont-sub-character > .inner{ width: 95%;   }
.sub-subtitle.character p{ width: calc(396/3000*100em*.5); }
.sub-subtitle.character::before{ width: calc(503/3000*100em*.5); height: calc(350/3000*100em*.5); top:2.75em; left:-3.25em; }

.sub-character-container{  padding-top: 2.5em; }



#CharaCont{ position: relative; }
.cont-character-navi{ top:-6em;  }
.character-navi{ }
.character-navi ul{ padding: .35em 0 0 0; }
.character-navi ul li{ width: calc(240/3000*100em*.75); height: calc(240/3000*100em*.75); }
.character-navi ul li.br-sp{ display: block; }
.character-navi ul li a{  background-size: calc(2500/3000*100em*.75); }
.character-navi ul li.n1 a{ background-position-x: 0 ; }
.character-navi ul li.n2 a{ background-position-x: calc(240/3000*100em*-1*.75) ; }
.character-navi ul li.crt a{ pointer-events: none; background-position-y: calc(240/3000*100em*-1*.75) ; }

.cont-character-data{ width:100%; min-height: 60em; position: relative; }
.character-data{ width:100%; min-height: 60em; position: relative; display: none;  }

.character-data .chr-img{ padding-top: 2em; position: relative; width: 90%; top:inherit; left:inherit; margin: 0 auto; }

.character-data .chr-switch{ width: calc(136/3000*100vw*3); position: absolute; top:10vw; left:10vw; }

.character-data .chr-prof{ width: 100%; margin: 0 auto ; padding-bottom: 3em;  }
.character-data .chr-prof .prof-frame{ padding-top: 1em; }

.character-data .prof-name{ width: 100%; margin: 0 auto 1.5em auto; }

.character-data .prof-text{ margin-bottom: 1.5em; }
.character-data .prof-text .text{ font-size: 1.133em; }
.character-data .prof-text .text [data-ruby]::before { top: -1.7em; }

.character-data .prof-face{ width: 100%; margin-bottom: 1.5em; }
.character-data .prof-name-e{ width: 100%; margin-left:1.25em; }


/* books */
.cont-sub-books{  }
.cont-sub-books > .inner{ width: 95%; }
.sub-subtitle.books p{ width: calc(287/3000*100em*.5); }
.sub-subtitle.books::before{ width: calc(475/3000*100em*.5); height: calc(379/3000*100em*.5); top:3.05em; left:3.45em; }

.sub-books-container{  }
.books-text{ width: 100%; margin: 0 auto 2em auto; text-align: center; }
.books-text > p{ letter-spacing: .05em;  }

.books-list{ display: flex; flex-wrap: wrap; justify-content: flex-start; margin: 0 auto 1em auto; }
.books-list > div{ width: calc( (1 / 3 * (100% + .5em)) - .5em ); margin-bottom: .5em; margin-right: .5em; }
.books-list > div:nth-of-type(5n){ margin-right: .5em;}
.books-list > div:nth-of-type(3n){ margin-right: 0;}
.books-list > div p{ margin: 0; }

.books-new{ width: calc(400/3000*100em*.5);margin: 0; position: absolute; top:2.3em; left:-.5em; }
.books-banner{ width: 70%; }




/* SM ----------------------------------------------------------------------------- */
@media (orientation: portrait) and (max-width: 767px) {

}
/* XS ----------------------------------------------------------------------------- */
@media (max-width: 543px) {

}
/* pc - large ----------------------------------------------------------------------------- */
@media (min-width: 768px) {

}
/* pc - xlarge ----------------------------------------------------------------------------- */
@media (min-width: 1200px) {

}