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

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

■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ 
*/
/* ---- Style ---- */
body{ color: #000; background:#fff; font-family: YakuHanMPs, "Zen Old Mincho", serif; font-weight: 500; }
.fnt-bsc{font-family: YakuHanMPs, "Zen Old Mincho", serif;}
.fnt-bsc.noyh{ "Zen Old Mincho", serif; }
.fnt-dsp1{ font-family: "Corinthia", cursive; }

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

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

.fnt-ac0{ color:#000; }
.fnt-ac1{ color:#f09daf; }
.fnt-ac2{ color:#76c4aa; }
.fnt-ac3{ color:#fef9e6; }
.fnt-ac4{ color:#16afe1; }

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

.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:#f09daf solid 1px; border-left:none; border-right:none; color: #f09daf; border-radius: 0; }
.ttl2.grn > span{ border-color:#2a5828; color: #2a5828; }
.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:#f09daf 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: #f09daf; background-color: transparent; }
.ilink:hover{ text-decoration: none; border-color: #76c4aa; color: #76c4aa; }
.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/background.webp") repeat-y center top; background-size: 100%; }
#Background .bg-sakura{ width: calc(855/3000*100em); height: calc(1851/3000*100em); min-height: 0; background: url("../images/common/bg-sakura.webp") no-repeat left top; background-size: 100%; position: fixed; top: inherit; left:0; bottom:-3em; }
/* 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-color: rgba(255,255,255,1); }
.part-header:before{ content:""; width: 100%; height: 100%; position: absolute; top:0; background:#FFF url("../images/common/navi-bg.webp") no-repeat left top; background-size: 100%; z-index: 1; }
.part-header:after{ content:""; width: 100%; height: 100%; position: absolute; top:0; background: url("../images/common/bg-sakura.webp") no-repeat left 0; background-size: calc(855/3000*100em); z-index: 1; }
.cont-global-logo{ width: calc(487/3000*100em); margin: 0; position: absolute; top:23.4em; left:calc(50em - 20em); z-index: 2; }

.cont-global-navi{ width: 50%; position: relative; padding: 15em 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.95em 0; letter-spacing: .15em; position: relative; }
.global-navi > ul > li a{ color: #000; text-decoration: none; position: relative; display: block; padding: 0 0 0 1.2em; }
.global-navi > ul > li a:before{ content:""; width: .65em; height: .65em; position: absolute; left: 0; top:.6em; background-color: #f09daf; border-radius: 10em; visibility: hidden; }
.global-navi > ul > li a .label{ font-size: 1.1em; }
.global-navi > ul > li a:hover{ color: #000; text-decoration: none;}
.global-navi > ul > li a:hover:before{ visibility: visible; }
.global-navi > ul > li.gnx a{ width: 3.5em; }
.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: #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: 4.7vw; height: 4.7vw; position: absolute; top:1vw; right: 1vw; z-index: 3; pointer-events: all; filter: drop-shadow(1px 1px 0 #fff) drop-shadow(0 0 3px #fff) drop-shadow(0 0 1px #fff); }
.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); 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(255,255,255,1); 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: 3em; }
.cont-upper{ position: relative; }
.sub-page .cont-upper{ height: 8em; background: url("../images/common/sub-header-bg.webp") no-repeat center center ; background-size: 100%; padding: 2em 0 0 0; margin-bottom: 3em; }
.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; }

.top-subtitle{ font-size: 1em; z-index: 2; position: relative; line-height: 1; display: block; }
.top-subtitle p{ margin: 0; }

.sub-subtitle{ width: 90%; padding: 0; margin: 0 auto; font-size: 1em; text-align: center; z-index: 2; position: relative;  line-height: 1; display: block; text-align: center; }
.sub-subtitle p{ margin: 0 auto; }

.conttitle{ font-size: 1em; z-index: 2; position: relative; line-height: 1; display: flex; justify-content: center; flex-wrap: nowrap; text-align: center; }
.conttitle span{ display: inline-block; width: auto; height: 1.35em; padding: 0; position: relative; position: relative; }
.conttitle span img{ height: 100%; min-height: 100%; max-width: auto; width: auto\9; }

.conttitle.text{ align-items: center; }
.conttitle.text span{ font-size: 1.6em; font-weight: 600; line-height: 1.5; }
.conttitle.text:before,
.conttitle.text:after{ content:""; width: 1.6em; height: 1.6em; margin-right:.5em;  position: relative; background: url("../images/common/cont-title-mark.webp") no-repeat center center ; background-size: contain; }
.conttitle.text:after{  margin-right:inherit; margin-left:.5em; transform: scaleX(-1); }

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


/* footer */
.part-footer{ background-color: rgba(255,255,255,.5); }
.cont-global-footer{ margin: 0 auto; padding: 2em 0 1em 0; 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{ width: 80%; margin: 0 auto; display: flex; flex-wrap: nowrap; justify-content: center; }
.cont-footer > .left-block{ width: 41.25%; order:1; }
.global-navi.footer{ padding:1em 1em 1em 3em; }
.global-navi.footer > ul{ flex-direction: row; }
.cont-footer > .right-block{ width: 58.75%; order:2; }
.footer-logo{ width:calc( 487/3000 * 100em ); padding: 0; margin: 0 auto 2em auto; }
.footer-oa{ width:calc( 677/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; }

.sep-line{ width: 100%; height: .1333em; position: relative; display: flex; flex-wrap: nowrap; }
.sep-line:before,
.sep-line:after{ content:""; display: block; width: 50%; height: 100%; min-height: 100%; background-color: #f09daf; }
.sep-line:after{ background-color: #76c4aa;}
.sep-line2{  height: 1px; background:#fddb5f; }

/* 1 */
.cont-entries{ padding: 0; margin: 0 auto; padding-bottom: 3em; }
.content-entry{ padding: .666em 0 0 .666em; margin: 0 0 1em 0; position: relative; border-top:.333em solid #fef9e6; border-left:.333em solid #fef9e6; }
.content-entry .entry-head{ margin-bottom: 0; position: relative; padding: 2em 8em 2em 10em; background-color: rgba(255,255,255,.5); border-right:.133em #76c4aa solid; border-bottom:.133em #76c4aa solid; }
.content-entry .entry-date{ font-size: 1em; margin: 0; text-align: left; pointer-events: none; position: absolute; top:2.35em; left:1.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; margin: 0; position: relative; text-align: left;  }
.content-entry .entry-title > span{ font-size: 1.333em; font-weight: bold; line-height: 1.5; }
.content-entry .entry-body{ padding: 2em 1.3em 2em 1.3em; font-size: 1.2em; letter-spacing: .05em; line-height: 1.8; position: relative;background-color: rgba(255,255,255,.5); border-right:.11em #76c4aa solid; border-bottom:.11em #76c4aa solid; }
.content-entry .entry-body:before{ content:""; display: block; width: calc(100% - 2.6em); height: 1px; border-top: #fddb5f dotted .233em; position: absolute; top:0; left:1.3em; margin: 0; }

.content-accordion .acd-check{ display: none;}
.content-accordion .acd-label{ display: block; }
.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:2.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: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{ padding:2em; }

.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: url("../images/common/background.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;}
.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: #f09daf;}
.modaal-close:hover:before,.modaal-close:hover:after{background: #f09daf;}

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

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

■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ 
*/
/* 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(1880/3000*100vw); position: relative; top:inherit; margin: 0 auto auto 0; 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(770/3000*100em); top:6.333em; left: calc( 2390/3000*100em - 770*0.5/3000*100em); }
.kv-container .oa{ width: calc(667/3000*100em); top:inherit; top:19.8em; left: calc( 2390/3000*100em - 667*0.5/3000*100em); }


.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 .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 .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: calc(900/3000*100vw); padding: 0; position: absolute; top:25.2em; right: 5.3em; }


/* top-movie */
.cont-top-movie{ padding: .333em; padding-right: 0; border-right: #76c4aa solid .333em; margin-bottom: 8em; background: #FFF; position: relative;  }
.cont-top-movie::before{ content:""; display: block; position: absolute; top:0; right:0; width: 20%; height: 0.333em; background-color: #76c4aa; }
.cont-top-movie::after{ content:""; display: block; position: absolute; bottom:0; right:0; width: 70%; height: 0.333em; background-color: #76c4aa; }
.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(199/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(199/3000*100em*1.1); }





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


.top-news-container{  width: 100%; padding:0; min-height: 20vw; margin: 0 auto; }
.top-news-container > a{ display: block; padding: .5em;  border: #76c4aa solid .1em;  border-top:none; border-left:none; margin-bottom: .75em; pointer-events: all; letter-spacing: .1em;  }
.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; 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; }




/* 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 - 33em);}

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


/* onair */



/* story */
.cont-sub-story{  }
.cont-sub-story > .inner{  }
.sub-subtitle.intro p{ width: calc(758/3000*100em); }
.sub-story-container{ padding: 2em 0 2em 0; }
.intro-text{ text-align: center; padding: 3em 0 1em 0;}
.intro-text > p{ font-size: 1.2em; letter-spacing: .1em; line-height: 2; margin-bottom: 2em; }
.intro-text > p.ctt{ font-size: 1.4em; }



/* character */
.cont-sub-character{  }
.cont-sub-character > .inner{  }
.sub-subtitle.character p{ width: calc(627/3000*100em); }
.sub-character-container{ padding: 2em 0 2em 0; }

.sub-character-container .content-single{ padding: 0; }

#CharaCont{ position: relative; }
.cont-character-navi{ width: 100%; margin: 0 auto; position: absolute; top:-4em; 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(204/3000*100em); height: calc(204/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(204/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(204/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:2.4em;  }
.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(820/3000*100em); margin: 0 auto auto 32.4em;  }
.character-data .chr-prof .prof-frame{ padding-top: 6em; 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 1em; 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: 100%; margin: 0 auto; 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.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;}
}
.subnavi-cursor.character-cursor{ width: 100%; top:35vw; bottom:inherit; left: 0;  }


/* staffcast */
.cont-sub-staffcast{ }
.cont-sub-staffcast > .inner{ }
.sub-subtitle.staffcast p{ width: calc(1449/3000*100em); }
.sub-staffcast-container{ padding: 2em 0 2em 0; }
.staffcast-list-cont{ display: flex; flex-wrap: wrap; justify-content: center; }

.staffcast-list{ width: 45%; position: relative; margin-bottom: 1em; }
.staffcast-list.original{ width: 61%; }
.staffcast-list .list-title{ text-align: center; margin-bottom: 1em; }
.staffcast-list .list-title span{ font-size: 2.8em; font-family: "Corinthia", cursive; color: #f09daf; font-weight: bold; }
.staffcast-list .list-item{ width: 100%; margin-bottom: 2em; text-align: center; display: flex; flex-wrap: wrap; justify-content: center; }
.staffcast-list .pos{ width: 100%; display: block; margin: 0 0 .75em 0; line-height: 1; }
.staffcast-list .pos span{ display: block; font-size: 1.2em; letter-spacing: .05em;  }

.staffcast-list .name{ width: 100%; display: block; margin: 0 0 .75em 0; line-height: 1;}
.staffcast-list .name span{ display: block; font-size: 1.5em; letter-spacing: .05em; position: relative; }

.staffcast-list .exname{ width: 100%; display: block; margin: 0 0 .75em 0; line-height: 1; }
.staffcast-list .exname span{ display: block; font-size: .9em; letter-spacing: .05em; position: relative; }

.staffcast-list .comment{ width: 8em; display: block; margin: 0 auto; }
.staffcast-list .cmt{ display: inline-block; }
.staffcast-list .cmt:hover{transform: scale(1.1); text-decoration: none; cursor: pointer; }

.cont-modal.cmt{ width: 66em;  }
.comment-container{ padding: 3em;  }
.comment-text-q{ padding: 1.5em; border:.11em #76c4aa solid; border-radius: 1em 1em 0 0; }
.comment-text-q p{ margin-bottom: 0; letter-spacing: .05em; }
.comment-text-a{ padding: 1.5em; border:.11em #f09daf solid; border-radius: 0 0 1em 1em; border-top:none; }
.comment-text-a p{ font-size: 1.2em; margin-bottom: 0; letter-spacing: .05em; }
.comment-container .text{ line-height: 2; letter-spacing: .05em; }



/* books */
.cont-sub-books{  }
.cont-sub-books > .inner{  }
.sub-subtitle.books p{ width: calc(535/3000*100em); }
.sub-books-container{ padding: 2em 0 2em 0; }
.books-text{ width: 70%; margin: 0 auto 4em auto; text-align: center; padding: 2em 0 1em 0;}
.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 / 4 * (100% + 2em)) - 2em ); margin-bottom: 3em; margin-right: 2em; }
.books-list > div:nth-of-type(4n){ margin-right: 0;}
.books-list > div p{ margin: 0; }

.books-banner{ width: calc(641/3000*100em); text-align: center; margin: 0 auto 2em 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{  }
#Background .bg-sakura{ width: calc(855/3000*100em*0.75); height: calc(1851/3000*100em*0.75); min-height: 0; left:0; bottom:-1em; }


/* foreground */

/* header */
.part-header{ }
.part-header:before{ background-size: 200%; }
.part-header:after{  background-size: calc(855/3000*100em * 0.75); z-index: 1; }
.cont-global-logo{ width: calc(487/3000*100em * 1.0); margin: 0 auto; position: absolute; top:1em; left:0; right: 0; z-index: 2; }
.cont-global-navi{ width: 100%; padding: 9em 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 1.95em 0;  }
.global-navi > ul > li a{ color: #000; text-decoration: none; position: relative; display: block; padding: 0 0 0 .8em; }
.global-navi > ul > li a:before{ content:""; width: .5em; height: .5em; position: absolute; left: 0; top:.65em; background-color: #f09daf; border-radius: 10em; visibility: hidden; }
.global-navi > ul > li.gnx a{ width: 3.0em; }

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


/* body */
.sub-page .cont-upper{ height: 4em; background-position: center top ; background-size: 150%; padding: 1.0em 0 0 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: 100%; }

.conttitle span{ height: 1.125em;  }

.conttitle.text{ align-items: center; }
.conttitle.text span{ font-size: 1.333em; }
.conttitle.text:before,
.conttitle.text:after{ width: 1.333em; height: 1.333em; margin-right:.25em;  }
.conttitle.text:after{  margin-right:inherit; margin-left:.25em; }


.sub-logo{ display: none; }


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

.cont-footer{ width: 100%; flex-wrap: wrap;  }
.cont-footer > .left-block{ width: 100%; order:2; }
.global-navi.footer{ padding:0; }
.global-navi.footer > ul{ flex-direction: row; padding: 0; justify-content: center; }
.global-navi.footer > ul > li{ width: inherit; margin: 0 1em 1.5em 0;  }
.global-navi.footer > ul > li.gnx{ width: 100%; margin: 0 0 1.5em 0; }
.global-navi.footer > ul > li.gnx a{ width: 3.0em; 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 ); }
.footer-oa{ width:calc( 677/3000 * 100em * 0.8 ); }


/* content */

.frame-l{ }
.frame-l:after{ width: calc(100% + .8em ); height: calc(100% + .8em ); position: absolute; top:-0.4em; left:-0.4em; border-width:1px; }

.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; }

.sep-line{ height: 1px;}

/* 1 */
.cont-entries{ padding: 0; margin: 0 auto; padding-bottom: 3em; }
.content-entry{ padding: .333em 0 0 .333em; margin: 0 0 1em 0; position: relative; border-width:2px;; }
.content-entry .entry-head{ margin-bottom: 0; position: relative; padding: 1em 4em 1em 1em;  }
.content-entry .entry-date{ font-size: 1em; margin: 0;  position: relative; top:inherit; left:inherit; }
.content-entry .entry-date > span{ font-size: .9em; }
.content-entry .entry-title{ }
.content-entry .entry-title > span{ font-size: 1.2em; }
.content-entry .entry-body{ padding: 1.5em 1.0em 1.5em 1.0em; font-size: 1.133em; border-width:1px; }
.content-entry .entry-body:before{ width: calc(100% - 2em); border-width: 2px; left:1.0em; }

.content-accordion .acd-head::after{ width: 2em; height: 2em; top:1.15em; right:1.25em; }

.content-single{ padding:2em 1em; }


/* 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; padding-bottom:4em; }
.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: 70%; top:31em; left: 0; right:0; margin: 0 auto; filter: drop-shadow(0 0 .3em rgba(0, 0, 0, 1)); }
.kv-container .oa{ width: 100%; top:42em; left: 0; right:0; margin: 0 auto; padding: 1em 2.5em; background-color: #FFF; }


.cont-top-upper-right{ width: 90%; padding: 1em 0 2em 0; margin: 0 auto; position: relative; top:inherit; right: inherit; }


/* 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; border:#FFF solid .2em; border-right:none; border-bottom:none; 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; }



/* 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: 90%; }
.sub-subtitle.news p{ width: calc(535/3000*100em*.45); }
.sub-news-container{ position: relative; }


/* story */
.cont-sub-story{  }
.cont-sub-story > .inner{ width: 90%; }
.sub-subtitle.intro p{ width: calc(758/3000*100em*.45); }
.sub-story-container{ padding: 2em 0 2em 0; }
.intro-text{ text-align: center; padding: 1em 0 1em 0;}
.intro-text > p{ font-size: 1.133em; letter-spacing: .1em; line-height: 2; margin-bottom: 2em; }
.intro-text > p.ctt{ font-size: 1.333em; }


/* character */
.cont-sub-character{  }
.cont-sub-character > .inner{ width: 90%;   }
.sub-subtitle.character p{ width: calc(627/3000*100em*.45); }
.sub-character-container{ padding: 3em 0 2em 0; }

.sub-character-container .content-single{ padding: 0; }

#CharaCont{ position: relative; }
.cont-character-navi{ top:-3em;  }
.character-navi{ }
.character-navi ul{ padding: .35em 0 0 0; }
.character-navi ul li{ width: calc(204/3000*100em*.75); height: calc(204/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(204/3000*100em*-1*.75) ; }
.character-navi ul li.crt a{ pointer-events: none; background-position-y: calc(204/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: 3em; position: relative; width: 80%; 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: 95%; margin: 0 auto ; padding-bottom: 3em;  }
.character-data .chr-prof .prof-frame{ padding-top: 1em; }

.character-data .prof-name{ width: 80%; margin: 0 auto 3em 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: 80%; }



/* staffcast */
.cont-sub-staffcast{ }
.cont-sub-staffcast > .inner{ width: 90%;  }
.sub-subtitle.staffcast p{ width: calc(1449/3000*100em*.45); }
.sub-staffcast-container{ padding: 2em 0 2em 0; }

.staffcast-list{ width: 100%; position: relative; margin-bottom: 1em; }
.staffcast-list.original{ width: 100%; }

.cont-modal.cmt{ width: 90%;  }
.comment-container{ padding: 1.5em;  }


/* books */
.cont-sub-books{  }
.cont-sub-books > .inner{ width: 90%; }
.sub-subtitle.books p{ width: calc(535/3000*100em*.45); }
.sub-books-container{ padding: 2em 0 2em 0; }
.books-text{ width: 100%; margin: 0 auto 4em auto; text-align: center; padding: 1.5em 0 1em 0;}

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

.books-banner{ width: calc(641/3000*100em*0.8); }




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

}