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

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

■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ 
*/
/* ---- Structure ---- */
html,body{ min-height:100%; position: relative; }
body{ color: #000; background:#fff; font-family: YakuHanRPs,"M PLUS Rounded 1c", sans-serif; font-weight: 400; }
.fnt-bsc{font-family: YakuHanRPs, "M PLUS Rounded 1c", sans-serif;}
.fnt-bsc.noyh{ font-family: "M PLUS Rounded 1c", sans-serif; }
.fnt-dsp1{ font-family: "Concert One", sans-serif; }

.fnt-ac0{ color:#15182e; }
.fnt-ac1{ color:#f8769b; }
.fnt-ac2{ color:#8ac300; }

.ttl1{ color: #FFF; font-weight: bold; padding: .25em .5em; background-color: #f8769b; border-radius: .5em; }
.ttl2{ margin-bottom: .5em; font-weight: 800; }
.ttl2 > span{ color: #f8769b; display: inline-block; border-top:#f8769b solid .133em; border-bottom:#f8769b solid .133em; padding: .2em .5em; }
.ttl2b{ margin-bottom: .5em; font-weight: 800; }
.ttl2b > span{ display: block; border-top:#e60000 solid .133em; border-bottom:#e60000 solid .133em; padding: .2em .5em; }
.ttl3{ display: inline-block; padding: .6em 1.2em ; font-weight: bold; color: #e60000; border: #e60000 solid 1px;  border-radius: 0; }
.ttl4{ color: #FFF; background-color: #202020; padding: 1em; border-radius: 0; }

.p-dth{ padding: 0 0 0 1em; position: relative; }
.p-dth:before{ content:"・"; margin: 0 0 0 -1em; }

/* ---- common style ---- */
a,a:visited {color: #f8769b;}
a:hover,a:active {color: #f8769b; }

.hv_fade{ opacity: 1; }
.hv_fade:hover{ opacity: 0.7; cursor: pointer; }
.hv_scale{ display: inline-block; transform: scale(1,1); transform-origin: center center;  }
.hv_scale:hover{ transition: all .05s 0s ease; transform: scale(1.05,1.05); cursor: pointer; }

.ilink{ display: inline-block; padding: 0.6em .6em 0.6em .6em ; border:#fff solid 1px ; border-radius: 0; text-decoration: none; font-size: 1em; font-weight: normal; line-height: 1; }
.ilink:before{ content:"> "; }
.ilink,
.ilink:visited,
.ilink:active{ color: #fff; background-color: transparent; }
.ilink:hover{ text-decoration: none; border-color: #f8769b; color: #f8769b; }
.ilink.off{ pointer-events: none; border-color: #666; color:#666; }

.ilink2{ display: inline-block; padding: 0.6em 1.4em 0.6em 1.0em ; border: #3d4d62 solid .133em; border-radius: .5em; text-decoration: none; font-size: 1.2em; font-weight: normal; line-height: 1; position: relative; }
.ilink2:before{ content:""; display: block; width: 0.5em; height: 1.1em; position: absolute; top:.55em; right: .5em; background: url("../images/common/btn-marker-r.png") no-repeat center center; background-size: contain; }
.ilink2,
.ilink2:visited,
.ilink2:active{ color: #3d4d62; background-color: transparent; }
.ilink2:hover{ text-decoration: none; color: #3d4d62; }


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; top:0; pointer-events: none; }
/* foreground */
#Foreground  > div{ width: 100%; min-height: 100%; position: absolute; top:0; pointer-events: none; }

/* header */
.part-header{ width: 100%; height: 100vh; position: fixed; top:0; left:0; pointer-events: none; background-color: rgba(255,255,255,1); }
.part-header:before{ content:""; width: 100%; height: 100%; position: absolute; top:0; background: url("../images/common/bg-pattern-15.webp") repeat center center; background-size: 100% auto; z-index: 1; }
.cont-global-logo{ width: calc(809/3000*100em); margin: 0; position: absolute; top:10em; left:50em; z-index: 2; }

.cont-global-navi{ width: calc(900/3000*100em); position: relative; padding: 7em 0 0 0; margin: 0 auto 0 22em; 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{ display: block; padding: 0; margin: 0 0 .75em 0; letter-spacing: .15em; position: relative; }
.global-navi > ul > li a{ color: #f8769b; text-decoration: none; position: relative; display: block; padding: 0 0 0 3.2em; }
.global-navi > ul > li a:before{ content:""; width: calc(80/3000*100em); height: calc(71/3000*100em); position: absolute; left: 0; top:.6em; background: url("../images/navi/marker.webp") no-repeat  center center; background-size: contain; visibility: hidden; }
.global-navi > ul > li a .label{ font-size: 2.2em; }
.global-navi > ul > li a:hover{  text-decoration: none;}
.global-navi > ul > li a:hover:before{ visibility: visible; }
.global-navi > ul > li.gnx{ margin-top:1em; }
.global-navi > ul > li.gnx a{ width: 5.5em; }
.global-navi > ul > li.gnx a .label-image{ display: block; width:100%; }
.global-navi > ul > li.gnx a:before{ top:.2em; }
.global-navi > ul > li.crt a{ opacity: 1; pointer-events: none; color: #000; }
.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: 6em; height: 6em; position: absolute; top:1.5em; left: 2em; z-index: 3; pointer-events: all; }
/* .cont-sp-btn{ filter: invert(100%); } */
.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 .2s ease-out 0s; }
.part-header:before{ opacity: 0; transition: opacity .5s ease-out 0s, background-size .5s ease-out .2s; }
.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(255, 255, 255, 1); pointer-events: auto; }
.spmenu-on .part-header:before{ opacity: 1; background-size: 120% 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%; }

.cont-upper{ position: relative; }
.sub-page .cont-upper{ padding: 2.5em 0; background: #fff url("../images/common/bg-pattern-15.webp") repeat 0 0; background-size: 50% auto; }
.cont-middle{ position: relative; }
.sub-page .cont-middle{ background: #f7f7f3 url("../images/common/bg-pattern-15.webp") repeat 0 0; background-size: 100% auto; animation: cntMdlPtnAnm 12s infinite linear; }
@-webkit-keyframes cntMdlPtnAnm { 0% { background-position: 0 0; } 100% { background-position: 0 calc(1700/3000*100em*-1); }}
.cont-bottom{ position: relative; }

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

.top-subtitle{ font-size: 1em; margin: 0 auto; z-index: 2; position: relative; }
.sub-subtitle{ font-size: 1em; margin: 0 auto .5em auto; z-index: 2; position: relative; }

.top-blocktitle{ font-size: 1em; width: calc(640/3000*100em); margin: 0 auto 2em auto; z-index: 2; position: relative; }
.top-blocktitle > span{ }

.sub-blocktitle{ font-size: 1em; width: calc(640/3000*100em); margin: 0 auto 2em auto; z-index: 2; position: relative; }
.sub-blocktitle > span{ }

.sub-logo{ width: calc(640/3000*100em); margin: 0 auto; padding: 0; }
.sub-content-container{  }


/* footer */
.part-footer{ position: relative; }
.cont-global-footer{ width: 100%; margin: 0 auto; padding: 0; position: relative; }
.footer-pagetop{ width: calc( 188/3000 * 100em ); height: calc( 188/3000 * 100em ); position: fixed; bottom:2em; right: 2em; z-index: 10; margin: 0 auto; }
.footer-pagetop a{ display: block; position: relative; width: 100%; min-height: 100%; background:url("../images/navi/pagetop.webp") no-repeat center center; background-size: contain; }
.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;}


.footer-navi{ background-color: #fbf9cf; }
.footer-navi{ width: 100%; padding:1em 1em; margin: 0 auto; position: relative; pointer-events: auto; text-align: center; }
.footer-navi > ul{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; list-style-type: none; padding: 0; margin: 0; position: relative; }
.footer-navi > ul > li{ display: block; padding: 0 2em 0 0; margin: 0 .5em; position: relative; }
.footer-navi > ul > li:before{ content:"●"; font-size: 0.6em; color: #e8da4a; position: absolute; top:2.2em; right: .8em; }
.footer-navi > ul > li:last-child{ padding-right: 0; }
.footer-navi > ul > li:last-child:before{ display: none; }
.footer-navi > ul > li a{ color: #15182e; text-decoration: none; position: relative; display: inline-block; padding: .5em 0; }
.footer-navi > ul > li a .label{ font-size: 1.4em; letter-spacing: .1em;  }
.footer-navi > ul > li a:hover{ text-decoration: underline;}
.footer-navi > ul > li.gnx{ padding-top: 0em; }
.footer-navi > ul > li.gnx a{ width: 1.6em; margin: 0 auto; }
.footer-navi > ul > li.gnx a .label-image{ display: block; width:100%; }
.footer-navi > ul > li.gnx a:hover{ transform: scale(1.1); }
.footer-navi > ul > li.crt a{ opacity: 1; pointer-events: none; color: #a47f39; }
.footer-navi > ul > li.cs a{ opacity: 1; pointer-events: none; color: #CCC; }
.footer-navi > ul > li a.hdn{ display: none; }

.cont-footer{  padding: 3em 0; margin: 0 auto; text-align: center; }
.footer-logo{width: calc(715/3000*100em); margin: 0 auto 3em auto; padding: .5em;}
.footer-copyrihgt p{ color: #333; font-size: .9em; margin: 0; }




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

.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{ border:#202020 solid 1px; background-color: #000; }
.frame-b{  background-color: #202020; }

.sep-a{ height: .133em; background-color: #f8769b; }

.brd-a{ width: 100%; height: .133em; background: linear-gradient(90deg,rgba(138, 195, 0, 1) 0%, rgba(138, 195, 0, 1) 40%, rgba(248, 118, 155, 1) 40%, rgba(248, 118, 155, 1) 60%, rgba(138, 195, 0, 1) 60%, rgba(138, 195, 0, 1) 100%); position: relative;  }

.rot-a{ position: relative; transform: rotate(3deg); }
.rot-b{ position: relative; transform: rotate(-3deg); }

.sdw-1{ filter: drop-shadow(.25em .25em 0 #e60000); }
.sdw-2{ filter: drop-shadow(0 0 .5em #d7000f); }
.sdw-3{ text-shadow:-1px 0px 0px #000,1px 0px 0px #000; filter: drop-shadow(0 0 .5em #fb00ff); }

.sdw-t1{ filter: drop-shadow(1px 1px 0 #ffe382); }
.sdw-t2{ filter: drop-shadow(1px 1px 0 #ebaffe); }

.sqr-image-box{ width: 27em; height: 27em; background-color: #FFF; position: relative; }
.sqr-image-box img{display: block; width: 100%; height: 100%; object-fit: scale-down;}


/* 1 */
.cont-entries{ padding: 0; margin: 0 auto; padding-bottom: 3em; }
.content-entry{ padding: 0; margin: 0 0 1em 0; position: relative; border:#8ac300 solid 1px; border-radius: 2em; background-color: #FFF; }
.content-entry .entry-head{ margin-bottom: 0; position: relative; padding: 2em 1em 2em 11em; }
.content-entry .entry-date{ font-size: 1em; margin: 0; text-align: left; pointer-events: none; position: absolute; top:2.35em; left:2.5em; }
.content-entry .entry-date > span{ color: #f09daf; font-size: 1.1em; line-height: 1; letter-spacing: .1em; margin-bottom: 0;}
.content-entry .entry-title{ padding: 0em 5em 0 0; margin: 0; position: relative; text-align: left;  }
.content-entry .entry-title > span{ font-size: 1.333em; color: #8ac300; font-weight: medium; line-height: 1.5; }
.content-entry .entry-body{ padding: 2em 2.6em 2em 2.6em; font-size: 1.2em; letter-spacing: .05em; line-height: 1.8; position: relative; }
.content-entry .entry-body [data-ruby]::before { top: -1.5em; }

.content-entry .entry-body:before{ content:""; display: block; width: calc(100% - 5.2em); height: 1px; border-top: #f8769b solid .133em; position: absolute; top:0; left:2.6em; margin: 0; }

.content-accordion .acd-check{ display: none;}
.content-accordion .acd-label{ display: block; margin-bottom: 0; }
.content-accordion .acd-head{ position: relative; }
.content-accordion .acd-head::after{ content:""; display: block; padding: 0; width: 4em; height: 4em; 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; right:1.25em; margin: 0; 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: 4em; height: 4em; text-align: center; line-height: 1; background: url("../images/common/news-link.webp") no-repeat center center; background-size: contain; position: absolute; top:1.15em; right:2.25em; margin: 0 auto; pointer-events: none;}
.content-link .lnk-head a{ display: block; text-decoration: none; color: #000; }

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



.cont-singles{ padding: 0; margin: 0 auto; padding-bottom: 3em; }
.content-single{ padding: 0; margin: 0 0 1em 0; position: relative; background: #202020; }
.content-single .entry-head{ margin-bottom: 0; position: relative; padding: 1.5em; }
.content-single .entry-title{ padding:1em ; margin-bottom: 0; position: relative; background: #fff; border:#003f63 solid 2px; border-radius: .5em; }
.content-single .entry-title > span{ color: #003f63;  font-size: 1.5em; font-weight: 800; line-height: 1.5; }
.content-single .entry-body{ padding: 1.5em; font-size: 1.2em; color: #003f63; letter-spacing: .05em; line-height: 1.8; position: relative; }

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

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

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

.cont-modal.comment{ width: 66em;  }


/* modaal */
.modaal-overlay{ background: #fff url("../images/common/bg-pattern-15.webp") repeat 0 0; background-size: 100% auto;  }
.modaal-wrapper{ overflow-x: hidden; }
.modaal-inner-wrapper{ padding: 80px 0; }
.image-typ2 .modaal-inner-wrapper{ padding: 80px 25%; }
.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{ left: 2.5em; top: 1.5em; width: 3em; height: 3em;}
.modaal-close:before,.modaal-close:after{ background-color: #003f63; border-radius: 0; top: .4em; left: 2em; width: .3em; height: 4em; } */

.modaal-close{ top:1.5em; left: 2em; width: 6em; height: 6em; border-radius: 0;}
.modaal-wrapper .modaal-close{ background: url("../images/navi/sp-close.webp") no-repeat center center; background-size: 100% auto;}
.modaal-close:before,.modaal-close:after{ display: none; }


.modaal-close:focus,.modaal-close:hover {}
.modaal-close:focus:before,.modaal-close:focus:after{background: #a47f39;}
.modaal-close:hover:before,.modaal-close:hover:after{background: #a47f39;}

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

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

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

/* TOP-PAGE */
/* main */
.cont-top-visual{ width: 100%; position: relative; margin: 0 auto; padding: 0; overflow: hidden; }
.cont-top-visual img{ width: 100%; height: auto; }
.cont-top-visual .kv-container{ width:100%; min-height: 138.0em; position: relative; margin: 0 auto; }
.kv-container > div{ position: absolute; top:0; }
.kv-container .grp{ width:100%; margin: 0 auto; position: relative; 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 auto; }
.kv-container .grp .vis-grp .bg{ position: relative; }
.kv-container .grp .vis-grp .vis{ position: absolute; top:0; }

.kv-container .logo{ width: calc(1467/3000*100em); position: absolute; top:89em; left:47em; margin: 0; }
.kv-container .oa{ width: calc(2917/3000*100em); position: absolute; top:121em; left:0; right: 0; margin: 0 auto; }
.kv-container .catch{ width: calc(2749/3000*100em); position: absolute; top:4em; left:0; right: 0; margin: 0 auto; }

.kv-container .op{ width: 100%; min-height: 100%; background-color: #FFF; display: block; overflow: hidden; }
.kv-container .op .op-bg{ width: 100%; min-height: 100%; position: relative;  }
.kv-container .op .op-bg img{ width: 100%; }
.kv-container .op .op-logo{ width: calc(1535/3000*100em); position: absolute; top:6em; left:0; right: 0; margin: 0 auto; }
.kv-container .op .op-oa{ width: calc(1511/3000*100em); position: absolute; top:38em; left:0; right: 0; margin: 0 auto; }

/* anm init */

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

.kv-container .op .op-bg{ opacity: 0; transform: scale(1); }
.kv-container .op .op-logo{ opacity: 0; transform: scale(1.25); }

/* anm done */

.s0 .kv-container .op .op-logo{ opacity: 1; transform: scale(1); transition: all .75s ease .0s; }
.s0 .kv-container .op .op-bg{ opacity: 1; transform: scale(1) rotate(0deg); transition: all 2.75s ease 0s;}

.s2 .kv-container .op .op-logo{ opacity: 0; transform: scale(1); transition: all .5s ease .0s; }

.s3 .kv-container .grp .vis-grp{ transform: scale(1); opacity: 1; transition: all 1.5s ease .0s; }
.s3 .kv-container .logo{ opacity: 1; transform: translateY(0); transition: all .5s ease .0s; }
.s3 .kv-container .oa{ opacity: 1; transform: translateY(0); transition: all .5s ease .0s; }
.s3 .kv-container .catch{ opacity: 1; transform: translateY(0); transition: all .5s ease .0s; }

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


/* top-movie */
.cont-top-movie{ min-height: 51em; padding: 5em 0; background-color: #f4f0d5; }
.cont-top-movie > .inner{ padding: 1em 0; }

.top-movie-list{ width: calc(2000/3000*100em); /*width: 100%;*/ position: relative; margin: 0 auto; }
.thm.youtube-thm{ width: 100%; max-width: 1920px; position: relative; text-align: center; line-height: 0; padding: 0; border: #8ac300 solid 1px; }
.thm.youtube-thm > a{ display: inline-block; pointer-events: auto; overflow: hidden; line-height: 0; position: relative; }
.thm.youtube-thm > a::after{ content:""; position: absolute; display: block; width:100%; height:100%; background: url("../images/common/play.webp") no-repeat center center; background-size: calc(190/3000*100em); transform-origin: center center; pointer-events: none; top:0; left: 0; right: 0; margin: 0 auto; opacity: 1; }
.thm.youtube-thm > a:hover::after{ background-size: calc(190/3000*100em*1.1); }

.top-movie-cursor{ position: absolute; width: 85em; top:25em; left: 0; right: 0; margin: 0 auto; pointer-events: none; }
.top-movie-cursor ul{ display: flex; justify-content: space-between; margin: 0; padding: 0; list-style-type: none; }
.top-movie-cursor ul li{ display: block; width:calc(198/3000*100em); height: calc(198/3000*100em); position: relative; pointer-events: all; cursor: pointer; }
.top-movie-cursor ul li span{ display: block; width:100%; height: 100%; background:  url("../images/common/cursor.webp") no-repeat center center; background-size: 100%; transform-origin: center center; }
.top-movie-cursor ul li.left span{ transform: scale(-1,1); }
.top-movie-cursor ul li:hover{ transform: scale(1.1); }

.top-movie-dots{ text-align: center; padding-top: 1em;}
.top-movie-dots ul{ display: block; list-style-type: none; padding: 0; margin: 0; }
.top-movie-dots li { display: inline-block; margin: 0 5em 0 -1em; padding: 0;}
.top-movie-dots button { margin: 0; padding: 0; background: none; border: none; border-radius: 0; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
.top-movie-dots li button { position: relative; text-indent: -9999px;}
.top-movie-dots li button:before { content: "●"; color: #a47f39; font-size: 1.8em; text-indent: 0px; position: absolute; top: 0; left: 0;}
.top-movie-dots li.slick-active button:before {content: "●";  color: #fff;}



/* top-news */
.cont-top-news{ min-height:20em;  }
.cont-top-news > .inner{ width: 100%; margin: 0 auto; padding: 5em 0 0 0; }
.top-subtitle.news{ width: calc(570/3000*100em); margin-bottom: 4em; }
.top-news-container{ width: calc(2000/3000*100em); margin: 0 auto; position: relative;  }

.news-headline{ min-height: 15em; padding: 2em; }
.news-headline a{ width: 100%; display: inline-block; margin-bottom: 2em;}
.news-headline dl{ font-size: 1.133em; display: flex; flex-wrap: wrap; }
.news-headline dl:last-child{ margin: 0;}
.news-headline dl dt{ width: 20%; display: block; position: relative; margin: 0; padding: 0; font-size: 1em; font-weight: normal; line-height: 1.5; letter-spacing: 0.1em; }
.news-headline dl dt::after{ content:"●"; font-size: .8em; color: #e8da4a; position: absolute; top:.125em; left:9.0em; }
.news-headline dl dd{ width: 80%; display: block; position: relative; margin: 0; padding: 0; font-size: 1.0em; line-height: 1.5; letter-spacing: 0.1em;  }
.news-headline a,
.news-headline a:visited{ text-decoration: none; color: #000; }
.news-headline a:hover{ color:#f8769b; }






/* top-intro */
.cont-top-intro{ min-height: 50em; position: relative; z-index: 3; background: #f7f7f3 url("../images/common/bg-pattern-15.webp") repeat 0 0; background-size: 100% auto; animation: cntMdlPtnAnm 12s infinite linear; }
.cont-top-intro > .inner{ width: 100%; margin: 0 auto; padding: 5em 0; }
.top-subtitle.intro{ width: calc(1010/3000*100em); margin-bottom: 4em; }
.top-intro-container{ width: calc(2000/3000*100em); margin: 0 auto; position: relative;  }

.intro-text{ text-align: center; margin: 0 auto; position: relative; z-index: 3; }
.intro-text p{ font-size: 1.433em; line-height: 2.0; letter-spacing: .15em; margin-bottom: 1.1em; }
.intro-text p.mkw{ font-weight: bold; font-size: 1.4em; color: #8ac300; }
.intro-text p [data-ruby]::before { top: -1.7em;  }



/* top-staffcast */
.cont-top-staffcast{ min-height: 30em; position: relative; background: #fff url("../images/common/bg-pattern-15.webp") repeat 0 0; background-size: 100% auto;  }
.cont-top-staffcast > .inner{ width: 100%; margin: 0 auto; padding: 5em 0 0 0; }
.top-subtitle.staff{ width: calc(910/3000*100em); margin-bottom: 5em; }
.staffcast-container{ width: calc(2000/3000*100em); margin: 0 auto; position: relative; display: flex; flex-wrap: wrap; }
.staffcast-container .left-col,
.staffcast-container .right-col{ width: 50%; }
.top-blocktitle.staff,
.top-blocktitle.cast{ width: calc(192/3000*100em); margin-bottom: 3em; }

.staffcast-list{ width: 100%; margin:0 auto 3em auto;  text-align: center; display: flex; flex-wrap: wrap; justify-content: center; position: relative; z-index: 3; }
.staffcast-list > div{ width: 25%; margin-bottom: 2em; position: relative; }
.staffcast-list.cs > div{ width: 25%;  }
.staffcast-list > div.sep{ width: 100%; height: 1px; margin-bottom: 0; }
.staffcast-list > div.nmgb{ margin-bottom: .5em; }
.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: .1em;  margin-bottom: .5em; line-height: 1; }
.staffcast-list .name{ display: block; font-size: 1.6em; letter-spacing: .1em; 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: inline-block; width: 2.0em; position: absolute; top:1.75em; left:calc(50% + 2.0em + 1.5em); text-decoration: none; pointer-events: auto; transition: all .25s ease-out 0s; }
.staffcast-list .comment .cmt{ display: block; position: relative;}
.staffcast-list .comment .cmt:hover{transform: scale(1.1); text-decoration: none; cursor: pointer; }
.staffcast-list .comment.ch2{ left:calc(50% + 1.5em + 1.5em); }
.staffcast-list .comment.ch3{ left:calc(50% + 1.5em + 1.5em); }
.staffcast-list .comment.ch4{ left:calc(50% + 2.5em + 1.5em); }
.staffcast-list .comment.ch5{ left:calc(50% + 3.0em + 1.5em); }
.staffcast-list .comment.ch6{ left:calc(50% + 3.5em + 1.5em); }
.staffcast-list .comment.ch7{ left:calc(50% + 4em + 1.5em); }
.staffcast-list .comment.ch8{ left:calc(50% + 4.5em + 1.5em); }
.staffcast-list .comment.ch9{ left:calc(50% + 5em + 1.5em); }
.staffcast-list .comment.ch10{ left:calc(50% + 5.5em + 1.5em); }
.staffcast-list .comment.ch11{ left:calc(50% + 6em + 1.5em); }
.staffcast-list .comment.ch12{ left:calc(50% + 6.5em + 1.5em); }
.staffcast-list .comment.ch13{ left:calc(50% + 7em + 1.5em); }
.staffcast-list .comment.ch14{ left:calc(50% + 7.5em + 1.5em); }

.cont-modal.comment{ width: 66em;  }
.comment-frame{ position: relative; margin: 0 auto; padding: 2em ; background-color: #FFF; border:#8ac300 solid .133em; border-radius: 2em; }

.comment-text-q{ font-size: 1.433em; text-align: left; padding: 0 2em; }
.comment-text-q p{ padding: 0 0 1em 2em; margin-bottom: 0; letter-spacing: .05em; position: relative; }
.comment-text-q p .qst{ display: inline-block; position: absolute; left:0; top:0; }
.comment-text-a{ font-size: 1.433em; text-align: left; padding: 0 2em; }
.comment-text-a p{ font-weight: bold; margin-bottom: 0; letter-spacing: .05em; }



/* top-character */
.cont-top-character{ min-height: 66em; position: relative; background: #f7f7f3 url("../images/common/bg-pattern-15.webp") repeat 0 0; background-size: 100% auto; animation: cntMdlPtnAnm 12s infinite linear; }
.cont-top-character > .inner{ padding: 5em 0 0 0; }
.top-subtitle.character{ width: calc(869/3000*100em); margin-bottom: 2em; }
.character-container{ width: 100%; margin: 0 auto; position: relative; }

#CharaCont{ position: relative; }
.cont-character-navi{ width: 100%; margin: 0 auto 2em auto; position: relative; 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(200/3000*100em); height: calc(200/3000*100em); display: block; margin: 0 .5em; 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:#f2eec0; border-radius: 10em; border:#8ac300 solid .133em; }
.character-navi ul li a:hover{ text-decoration: none; transform: scale(1.05); }
.character-navi ul li.crt a{ pointer-events: none;  border:none; background-color: #f8769b; }

.cont-character-data{ width:100%; position: relative; line-height: 1; z-index: 3; background-color: #FFF; }
.character-data{ width:100%; position: relative; display: none;  }
.character-data .chr-img{ position: absolute; z-index: 2; width: calc(900/3000*100em); top:1em; left:-2em;  }

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



/* top-books */
.cont-top-books{ min-height: 66em; position: relative; background: #f7f7f3 url("../images/common/bg-pattern-15.webp") repeat 0 0; background-size: 100% auto; animation: cntMdlPtnAnm 12s infinite linear; }
.cont-top-books > .inner{ padding: 5em 0; }
.top-subtitle.books{ width: calc(620/3000*100em); margin-bottom: 4em; }
.books-container{ width: calc(2200/3000*100em); margin: 0 auto; position: relative; }

.books-text{ margin: 0 auto 3em auto; text-align: center; }
.books-text > p{ letter-spacing: .1em;  }

.books-list{ width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-start; margin: 0 auto .25em auto; }
.books-list > div{ width: calc( (1 / 4 * (100% + 1em)) - 1em ); margin-bottom: 1em; margin-right: 1em; text-align: center; }
.books-list > div:nth-of-type(4n){ margin-right: 0;}
.books-list > div .thm{ display: block; margin-bottom: 0; }
.books-list > div .thm:hover{ transform: scale(1.05); }

.books-link{ display: flex; flex-wrap: wrap; justify-content: center; margin: 0 auto 2em auto; }
.books-link > div{ width: calc(900/3000*100em); margin: 0 2em; text-align: center; }
.books-link a{ display: inline-block; border:#e8da4a solid .133em; }
.books-link a:hover{ transform: scale(1.05); }



/* SUB-PAGE */

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


/* news */
.cont-sub-news{ min-height: 1em; position: relative;}
.cont-sub-news > .inner{ padding: 3em 0; }
.sub-subtitle.news{ width: calc(570/3000*100em); }
.sub-news-container{ width: calc(2000/3000*100em); margin: 0 auto; position: relative; }




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

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

■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ 
*/
/* 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{ }


/* header */
.part-header{  }
.part-header:before{ background-size: 200% auto; }
.cont-global-logo{ width: calc(809/3000*100em*0.6); margin: 0 auto; padding: 2em 0; position: relative; top:inherit; left:inherit; }

.cont-global-navi{ width: 70%; position: relative; padding: 0 0 0 0; margin: 0 auto; }
.global-navi > ul > li{ margin: 0 0 .75em 0; }
.global-navi > ul > li a{ padding: 0 0 0 3.2em; }
.global-navi > ul > li a:before{  width: calc(80/3000*100em*0.9); height: calc(71/3000*100em*0.9); left: 0; top:.6em; }
.global-navi > ul > li a .label{ font-size: 2.0em; }
.global-navi > ul > li.gnx{ margin-top:.8em; }
.global-navi > ul > li.gnx a{ width: 5.0em; }
.global-navi > ul > li.gnx a:before{ top:.2em; }

.cont-sp-btn{ width: 3em; height: 3em; top:.5em; left: .75em; }


/* body */
.sub-page .cont-upper{ padding: 1em 0; background-size: 100% auto; }
.sub-page .cont-middle{ background-size: 200% auto; animation-duration: 24s; }
@-webkit-keyframes cntMdlPtnAnm { 0% { background-position: 0 0; } 100% { background-position: 0 calc(1700/3000*100em*-2); }}

.top-subtitle{ font-size: 1em; margin: 0 auto; z-index: 2; position: relative; }
.sub-subtitle{ font-size: 1em; margin: 0 auto .5em auto; z-index: 2; position: relative; }

.top-blocktitle{ font-size: 1em; width: calc(640/3000*100em); margin: 0 auto 2em auto; z-index: 2; position: relative; }
.sub-blocktitle{ font-size: 1em; width: calc(640/3000*100em); margin: 0 auto 2em auto; z-index: 2; position: relative; }

.sub-logo{ width: calc(640/3000*100em*0.8); margin: 0 auto; padding: 0; }


/* footer */
.footer-pagetop{ width: calc( 188/3000 * 100em * 0.5); height: calc( 188/3000 * 100em *0.5 ); bottom:1em; right: 1em; }

.footer-navi{ padding:1em 1em; }
.footer-navi > ul > li{ padding: 0 2em 0 0; margin: 0 .5em;  }
.footer-navi > ul > li:before{ font-size: 0.6em; top:2.2em; right: .8em; }
.footer-navi > ul > li:nth-child(3),
.footer-navi > ul > li:nth-child(5){ padding-right: 0; }
.footer-navi > ul > li:nth-child(3):before,
.footer-navi > ul > li:nth-child(5):before{ display: none; }
.footer-navi > ul > li a{ padding: .5em 0; }
.footer-navi > ul > li a .label{ font-size: 1.4em;  }
.footer-navi > ul > li.gnx{ padding-top: 0em; }
.footer-navi > ul > li.gnx a{ width: 1.4em; margin: 0 auto; }

.cont-footer{  padding: 1.5em 0; margin: 0 auto; text-align: center; }
.footer-logo{width: calc(715/3000*100em*0.8); margin: 0 auto 2em auto; padding: .5em;}
.footer-copyrihgt p{ color: #333; font-size: .9em; margin: 0; }



/* content */

.brd-a{ width: 100%; height: .133em; background: linear-gradient(90deg,rgba(138, 195, 0, 1) 0%, rgba(138, 195, 0, 1) 40%, rgba(248, 118, 155, 1) 40%, rgba(248, 118, 155, 1) 60%, rgba(138, 195, 0, 1) 60%, rgba(138, 195, 0, 1) 100%); position: relative;  }

/* 1 */
.cont-entries{ padding-bottom: 3em; }
.content-entry{ margin: 0 0 1em 0; border-radius: 1.5em; }
.content-entry .entry-head{ padding: 1.5em; }
.content-entry .entry-date{ font-size: 1em; margin: 0 0 .5em 0; position: relative; top:inherit; left:inherit; }
.content-entry .entry-title{ padding: 0em 5em 0 0; margin: 0; position: relative; text-align: left;  }
.content-entry .entry-title > span{ font-size: 1.333em; color: #8ac300; font-weight: medium; line-height: 1.5; }
.content-entry .entry-body{ padding: 1em 1.3em 1em 1.3em; font-size: 1.2em; }
.content-entry .entry-body [data-ruby]::before { top: -1.5em; }
.content-entry .entry-body:before{ width: calc(100% - 2.6em); top:0; left:1.3em; }

.content-accordion .acd-head::after{ width: 3em; height: 3em; }
.content-link .lnk-head::after{ width: 3em; height: 3em;}


.cont-modal.comment{  }


/* modaal */
.modaal-overlay{ background-size: 200% auto;  }
.modaal-inner-wrapper{ padding: 80px 0; }
.image-typ2 .modaal-inner-wrapper{ padding: 80px 25%; }
.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{ top:.5em; left: .75em; width: 3em; height: 3em; border-radius: 0;}




/* TOP-PAGE */
/* main */
.cont-top-visual .kv-container{ min-height: 40.75em; }
.kv-container .logo{ width: calc(1467/3000*100em*0.3); top:27em; left:14em; }
.kv-container .oa{ width: calc(2917/3000*100em*0.3); top:36em; }
.kv-container .catch{ width: calc(2749/3000*100em*0.3); top:1.5em; }

.kv-container .op .op-logo{ width: calc(1535/3000*100em*0.4); position: absolute; top:12em; left:0; right: 0; margin: 0 auto; }


/* top-movie */
.cont-top-movie{ min-height: 22em; padding: 2em 0; }
.cont-top-movie > .inner{ padding: 1em 0; }

.top-movie-list{ width: 90%; }
.thm.youtube-thm{ width: 100%;  }
.thm.youtube-thm > a::after{ background-size: calc(190/3000*100em*0.4);}
.thm.youtube-thm > a:hover::after{ background-size: calc(190/3000*100em*1.1*0.4); }


/* top-news */
.cont-top-news{ min-height:35em;  }
.cont-top-news > .inner{ padding: 2em 0 0 0; }
.top-subtitle.news{ width: calc(570/3000*100em*0.6); margin-bottom: 1em; }
.top-news-container{ width: 95%; margin: 0 auto; position: relative;  }

.news-headline{ min-height: 15em; padding: 2em; }
.news-headline a{ margin-bottom: 2em;}
.news-headline dl{ font-size: 1.133em; }
.news-headline dl:last-child{ margin: 0;}
.news-headline dl dt{ width: 100%; margin: 0 0 .25em 0;  }
.news-headline dl dt::after{ display: none; }
.news-headline dl dd{ width: 100%; }


/* top-intro */
.cont-top-intro{ min-height: 61em; background-size: 200% auto; animation-duration: 24s; }
.cont-top-intro > .inner{padding: 2em 0; }
.top-subtitle.intro{ width: calc(1010/3000*100em*0.6); margin-bottom: 2em; }
.top-intro-container{ width: 100%;  }

.intro-text{ }
.intro-text p{ font-size: 1.2em; letter-spacing: .1em; }
.intro-text p.mkw{ font-size: 1.2em;  }
.intro-text p [data-ruby]::before { top: -1.6em;  }


/* top-staffcast */
.cont-top-staffcast{ min-height: 51em; background-size: 200% auto; }
.cont-top-staffcast > .inner{  padding: 2em 0 0 0; }
.top-subtitle.staff{ width: calc(910/3000*100em*0.6); margin-bottom: 2em; }
.staffcast-container{ width: 100%; }
.staffcast-container .left-col,
.staffcast-container .right-col{ width: 100%; }
.top-blocktitle.staff,
.top-blocktitle.cast{ width: calc(192/3000*100em*0.6); margin-bottom: 1.5em; }

.staffcast-list{ margin:0 auto 2em auto; }
.staffcast-list > div{ width: 100%; margin-bottom: 1.5em; }
.staffcast-list.cs > div{ width: 25%;  }
.staffcast-list > div.sep{ width: 100%; height: 1px; margin-bottom: 0; }
.staffcast-list > div.nmgb{ margin-bottom: .5em; }
.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: 3em; position: relative; }
.staffcast-list .pos{ font-size: 1.133em; margin-bottom: .25em; }
.staffcast-list .name{ font-size: 1.333em; letter-spacing: .1em; }
.staffcast-list .exname{ font-size: .8em;  padding-top: .5em; }
.staffcast-list .comment{ width: 1.8em; top:1.15em;}

.cont-modal.comment{ width: 95%;  }
.comment-frame{ padding: 1em ; border-radius: 1.5em; }

.comment-text-q{ font-size: 1.333em; text-align: left; padding: 0; }
.comment-text-q p{ padding: 0 0 1em 2em;  }
.comment-text-q p .qst{  left:0; top:0; }
.comment-text-a{ font-size: 1.333em; padding: 0; }
.comment-text-a p{ }


/* top-character */
.cont-top-character{ min-height: 76em; background-size: 200% auto; animation-duration: 24s; }
.cont-top-character > .inner{ padding: 2em 0 0 0; }
.top-subtitle.character{ width: calc(869/3000*100em*0.6); margin-bottom: 2em; }

.cont-character-navi{ margin: 0 auto 1.5em auto; }
.character-navi ul{ padding: .35em 0 0 0; }
.character-navi ul li{ width: calc(200/3000*100em*0.8); height: calc(200/3000*100em*0.8); margin: 0 .5em;  }
.character-navi ul li.br-sp{ display: block; }

.cont-character-data{ width:100%; position: relative; line-height: 1; z-index: 3; background-color: #FFF; }


/* top-books */
.cont-top-books{ min-height: 89em; background-size: 200% auto; animation-duration: 24s; }
.cont-top-books > .inner{ padding: 2em 0 2em 0; }
.top-subtitle.books{ width: calc(620/3000*100em*0.6); margin-bottom: 2em; }
.books-container{ width: 95%; }

.books-text{ margin: 0 auto 2em auto;  }

.books-list{ margin: 0 auto 2em auto; }
.books-list > div{ width: calc( (1 / 3 * (100% + 1em)) - 1em ); }
.books-list > div:nth-of-type(4n){ margin-right: inherit;}
.books-list > div:nth-of-type(3n){ margin-right: 0;}
.books-list > div .thm{ display: block; margin-bottom: 0; }

.books-link{  margin: 0 auto 2em auto; }
.books-link > div{ width: calc(900/3000*100em*0.6); margin: 0 2em;  }





/* SUB-PAGE */

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


/* news */
.cont-sub-news{ min-height: 1em; position: relative;}
.cont-sub-news > .inner{ padding: 2em 0; }
.sub-subtitle.news{ width: calc(570/3000*100em*0.6); }
.sub-news-container{ width: 95%; margin: 0 auto; position: relative; }



/* 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) {

}