html{font-size: 62.5%;}
body{font-size:1.6rem;font-family: 'Noto Serif JP', serif;font-weight: 400;font-style: normal;;/*min-width:1080px;*/line-height: initial;}
html {visibility: hidden;}
html.wf-active {visibility: visible;animation: fadeIn 1s ease 0s 1 normal;}
*, *::before, *::after {
    box-sizing: initial; 
}
.fade{animation: fadeIn 0.2s ease 0.3s 1 normal;}
@keyframes fadeIn { 0% {opacity: 0}100% {opacity: 1} }

/*setCss*/
header,footer,div,p,a,h1,h2,h3,h4,h5,li,td,dd{box-sizing:border-box;}
img{width: 100%;}
figure{margin: 0;padding: 0;}
p{line-height:1.8}
a{color: inherit;}
ul,ol{margin: 0;padding: 0;}
h1,h2,h3,h4,h5{margin: 0;padding: 0;}
a{text-decoration:none;}
a:visited{color:initial;}
dd{text-align:left;margin: 0;padding: 0;}
li{list-style-type: none;line-height: 1.6}
.pc{display:block;}
.sp{display:none;}
.inner{width: 1080px;margin: 0 auto;position:relative;height: inherit;}
.shadow{filter: drop-shadow(0 0 5px rgba(0,0,0,1));}
.shadow2{filter: drop-shadow(0 0 5px rgba(86,49,12,1));}

body:before{
content:"";
  display:block;
  position:fixed;
  top:0;
  left:0;
  z-index:-1;
  width:100%;
  height:100vh;
  background:url(../img/bg.jpg) center no-repeat;
  background-size:cover;}


article{position:relative;z-index: 1;}
article.contents{display:flex;    max-width: 1600px;margin: 0 auto;padding-bottom: 3em;height: 100%;}
article.contents >header{width:30%;max-width:408px;min-width:300px;position:relative;}
article.contents >header #menu{
    position:fixed;
    padding: 2em;
    max-width:408px;
    width: 27%;
    height: 100vh;
    overflow: auto;
}
article.contents >section,
.continner_sk{width:70%;max-width:1200px;/*min-width:680px;*/}

.frames{margin: 0 auto 0;position: relative; border: 3em solid; border-image-source: url(../img/frame00.png); border-image-slice: 80; border-image-repeat: round;}
.frames > *{background:rgba(255,255,255,0.6);width: 100%;height: 100%;     box-sizing: border-box;margin: 0;}
.frames > div{padding: 2em;}

header nav{font-family: 'Josefin Sans', sans-serif;}
header nav dd{margin: 0}
header nav dd:not(:last-child){border-bottom:1px solid #000;}
header nav dd a{font-size:2rem;padding: 0.5em 0.5em 0.25em 0.5em ;display:block;background:linear-gradient(to right,#a043a2,   #a043a2 33%,  transparent 66%, transparent) 100% 0 / 300% 100%; transition:background-position 0.5s;}
header nav dd a:visited{color:#000;}
header nav dd a:hover{background-position:0 0;color:#fff;}
header nav dd a:not([href]) {opacity:0.2;pointer-events: none;}
header nav a{position:relative;display:block;}
header nav a:not(.sns_x):hover img{overflow:inherit;top: -2px;position:relative;}
header nav a.youtube:before{z-index:1;content:"";display:block;left:0;top:0;bottom:0;right:0;margin:auto;position:absolute;width:60px;height: 60px;background: url(../img/icon-yt.png);-webkit-background-size: cover;background-size: cover;}
/* X設定 */
/* .li_sns_x{
    border: 1.5em solid;
    border-image-source: url(../img/frame00.png);
    border-image-slice: 80;
    border-image-repeat: round;
    text-align: center;
    line-height: initial;
}
a.sns_x{
    background: rgba(255, 255, 255, 0.6);
    max-width: 100%;
    width: 100%;
    font-size: 100%;
    color: #a043a2;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 2%;
}
a.sns_x div{
    width: 6.5%;
    margin: 0 0.3em;
    max-width: 12px;
}
a.sns_x div img{
    width: 100%;
    height: auto;
}
#main_visual .li_sns_x{
    display: none;
} */
/* header nav a:hover:before{top:-5px;position:absolute;} */


.start{color:#a043a2;}
.start h2{font-size:clamp(2.4rem,2.5vw, 3.5rem);text-align-last: justify;margin-bottom: 0.15em;line-height:0.8;white-space: nowrap;}
.start h2 span{font-size:clamp(1.6rem, 2vw, 2.2rem);text-align-last: justify;line-height:0.8;font-family:'Oranienbaum', serif;}
.start h3{font-size:clamp(1.5rem, 1.75vw, 2.9rem);;text-align-last: justify;margin-bottom: 0.25em;line-height: 1;}
.start h4{font-size:1.3rem;}
 
footer{width: 100%;text-align:center;font-size:1.2rem;padding:0 0 4em 0;    max-width: 1600px;text-align: right;}

/*トップページ*/
#top >section{padding: 2em 2.5% 0 0 ;}
#top >section >div{display:flex;justify-content:space-between;}
/* #top >section#main_visual{width: ;} */
#top >section .slide {width: 100%;    margin-bottom: 2em;}
#top >section .slide figure{}


/* twitter非表示調整 */
/* #top >section #twitter,#top >section #news{width: ;margin: 0;} */
#top >section #news{width: 100%;margin: 0;}
#top >section #twitter{display: none;}

/* X設定はヘッダーにあります */

#top >section #twitter iframe{width: 100%!important;}
#top >section #twitter > div{padding: 0;}
#top >section #news ol{padding:0;box-sizing:border-box;}
#top >section #news ol{ overflow-y: scroll;height:25em;}
#top >section #news ol li{text-align:left;}
#top >section #news ol li:not(:last-child){border-bottom:1px solid #ddd;}
#top >section #news ol li a{display:flex;padding: 0.5em;align-items:center;width: 100%;}
#top >section #news ol li a:hover{background: #a043a2;color:#fff;}
#top >section #news ol li a span{}
#top >section #news ol li a span:first-child{width: 12%;min-width: 90px;background: #a043a2;color:#fff;font-size:1.2rem;padding:0.5em 0;text-align:center;font-weight:600;border:1px solid #fff;}
#top >section #news ol li a span:last-child{font-size:1.5rem;padding: 0.5em 0 0.5em 0.5em;font-weight:600;width: 72.5%;}
#top >section #sns_x{display: none;}

#slide_area {
    position: relative;
}
.ch_tl {
    position: absolute;
    z-index: 1;
    bottom: 8em;
    left: 2em;
    width: 70%;
    transition: ease;

}
h1.ch {
    display: block;
    width: 95%;
    filter: drop-shadow(0px 0px 5px rgba(255, 255, 255, 1));
    margin-bottom: -.5em;
}
h1.tl {
    filter: drop-shadow(0px 0px 5px rgba(255, 255, 255, 1));
}
.slick-dots {
    position: relative;
    margin-bottom: 0;
    width: fit-content;
    left: 3em;
    bottom: 4.5em;
}
.slick-dots li {
    width: 2em;
    margin: 0;
}
.slick-dots li button{
    position: relative;
    width: 3em;
    height: 3em;
    padding-right: .5em;
}
.slick-dots li button:before{
    width:100%;
    content:"";
    background: #fff;
    position: absolute;
    width: 4em;
    height: 4em;
    opacity: .3;
}
.slick-dots li button:before {
    opacity: .3;
}

.slick-dots li.slick-active button:before{
    background: #5e0a96;
    opacity: .8;
}
/*各ページ*/
#page section{padding: 2em 2.5% 0 0 ;}
#page section .titles {opacity:0.15;line-height:0.5;font-size:clamp(8.1rem, 7.5vw, 12.6rem);position:relative;font-family: 'Oranienbaum', serif;font-weight:100;display:inline-block;padding: 0;margin-bottom: 0.25em;text-align:right;width: 100%;}
#page .continner{box-sizing: border-box;}
#page section .posts h1{font-size:3rem;color:#a043a2}
#page section .posts h2{}
#page section .posts h3{}
#page section .posts h4{}
#page section .posts h5{}
#page section .posts p{font-size:1.8rem;}
#page section .posts small{font-size:75%;}

#page section div.back {text-align:right;margin-top: 2em;}
#page section div.back a{text-align:center;background:rgba(255,255,255,0.5);border-radius:2em;padding: 0.25em 2.5em 0.25em 1.5em;font-family: 'Zen Kaku Gothic New', sans-serif;margin-right: 1em;position:relative;;}
#page section div.back a:hover{background:rgba(255,255,255,1);}
#page section div.back a:before{
content: "";
    display: block;
    width: 8px;
    height: 8px;
    position: absolute;
    right: 1.5em;
    top: calc(50% - 1px);
    border-top: solid 1px;
    border-right: solid 1px;
    transform: rotate(45deg) translateY(-50%);
	color: inherit;
}    
    
/*news*/
#page section#news{}
#page section#news ol{padding: 2em 5%;box-sizing:border-box;}
#page section#news ol li{text-align:left;}
#page section#news ol li:not(:last-child){border-bottom:1px solid #ddd;}
#page section#news ol li a{display:flex;padding: 1em;align-items:center;width: 100%;}
#page section#news ol li a:hover{background: #a043a2;color:#fff;}
#page section#news ol li a span{}
#page section#news ol li a span:first-child{background: #a043a2;color:#fff;font-size:1.4rem;padding:0.5em 3em;font-weight:600;border:1px solid #fff;margin-right: 1em;}
#page section#news ol li a span:last-child{font-size:1.6rem;padding: 0.5em;font-weight:600;}
#page section#news .kj{padding: 3em 5%;}
#page section#news .kj date{margin-bottom: 2em;background: #a043a2;border:1px solid #fff;color:#fff;font-size:1.6rem;    letter-spacing: .15em;display:inline-block;padding: 0.5em 0.75em;}
#page section#news .kj h2{border-bottom:1px solid #ddd;margin-bottom: 2em;padding-bottom: 0.5em;font-size:3rem;}
#page section#news .kj a{color:#a043a2;text-decoration:underline;}
#page section#news .kj a:hover{text-decoration:none;}

/*onair*/
#page section#onair h3,#page section#onair2 h3{background: rgba(191,179,151,0.5);padding: 0.25em;width: 100%;}
#page section#onair dl,#page section#onair2 dl{display:flex;flex-wrap:wrap;justify-content:space-between;}
#page section#onair dl dt,#page section#onair2 dl dt{width: 100%;margin: 1em 0;color:#a043a2;font-weight:bold;}
#page section#onair dl dd,#page section#onair2 dl dd{width: 49.5%;margin-bottom:0.33em;}
#page section#onair dl dd a,#page section#onair2 dl dd a{padding: 1em;background: rgba(191,179,151,0.5);display:block;border-radius:0.3em;text-align:center;}
#page section#onair dl dd a:hover,#page section#onair2 dl dd a:hover{background: rgba(191,179,151,1);color:#fff;transition:0.25s ;}

/*story*/
/* #page section#story h3{background: rgba(191,179,151,0.5);padding: 1.5em;} */
#page section#story b.point{color:#a043a2;font-size:2.4rem;}
#page section#story i.point{color:#a043a2;font-style:normal;}
#page section#story ul li{}
#page section#story ul li a{display: block; line-height: 0;position:relative;overflow: initial;;}
#page section#story ul li a img{display: block;box-sizing:border-box;}
#page section#story ul li a:hover{} 
#page section#story ul li a:hover img{top: -2px;position:relative;} 
/* switch */
#page section#story ol.switch {display:flex;flex-wrap: wrap;justify-content: center;
    /* margin-bottom: 1em; */
}
#page section#story ol.switch li{font-size: 0.8em;display: flex;align-items: center;
    /* width: 24.5%;margin-right: 0.5%;margin-bottom: 1%; */
}
#page section#story ol.switch li a{display:block;font-size: 1.2em;padding: 0.5em;
    /* padding: 1em;text-align:center;background:rgba(191,179,151,0.4);position:relative; */
}
#page section#story ol.switch li a:hover{background: #a043a2;color:#fff;}
/* #page section#story ol.switch li a:before{display: block;height: 100%;
    content: "";left:0;top:0;
    width: 100%;
    position: absolute;
    border: 2em solid;
    border-image-source: url(../img/frame2.svg);
    border-image-slice: 10;
    border-image-repeat: round;    box-sizing: border-box;
    filter: drop-shadow(0 0 1px rgba(0,0,0,1));} */
    div.switch{padding: 0.6em 0;}
div.switch h3.mds03 {width: 50%;color: #fff;font-weight: bold;text-align: center;border-radius: 10px;margin: 0px auto -3.7em;position: relative;background: url(../img/grad.png) no-repeat;background-size: 100% 100%;padding: 0.8em;max-width: 300px;}
    div.switch .frame {margin-top: 1.5em;
        border: 3em solid;
        border-image-source: url(../img/frame00.png);
        border-image-slice: 80;
        border-image-repeat: round;
    }
    div.switch .frame ol.switch{
        background: rgba(255, 255, 255, 0.6);
    }
    div.switch li:after {content: "/";display: inline-block;margin: 0 0.5em;}
    div.switch li:last-child:after {
    content: none;
}
    /* div.switch h3{position: relative;text-align: center;margin-bottom: 0.5em; color: #a043a2; background: none !important;width: 50%;margin: 0 auto;margin-bottom: 0.5em;padding: 0.6em !important;}
div.switch h3 {
    position: relative;
    padding: 1.5em;
    text-align: center;
    color: #a043a2;
} */
/* ---- */
#page section#story .frames >div{padding: 2em;}
#page section#story .posts h1{margin-bottom: 1em;color:#000;}
#page section#story .posts iframe{margin-top: 1em;}
#page section#story #story_nav .slick-track {transform: unset !important;}
#page section#story .slick-slide{padding: 0.15em;}
#page section#story #story_nav .slick-slide figure img{opacity: 0.4;}
#page section#story #story_nav .slick-current figure img{opacity: 1;}
#page section#story #story_nav .slick-slide figure img:hover{opacity: 1;cursor: pointer;}
#page section#story #page-100 .title span{display:none;}
#page section#story #page-100 ul {display:flex;justify-content:space-between;}

/*staffcast*/
#page section#staffcast{}
#page section#staffcast h3,#page section#staffcast2 h3{background: rgba(191,179,151,0.5);padding: 0.25em;width: 100%;}
#page section#staffcast dl,#page section#staffcast2 dl{columns: 2; margin-bottom: 0;}
#page section#staffcast dl:nth-of-type(1),#page section#staffcast2 dl:nth-of-type(1){margin-bottom: 2em;}
#page section#staffcast dl dd,#page section#staffcast2 dl dd{break-inside: avoid-column;margin-bottom: 1em;font-size:2.4rem;font-weight:600;letter-spacing:.15em;line-height:1.1;}
#page section#staffcast dl dd i,#page section#staffcast2 dl dd i{display: block;font-style: normal;font-size:1.6rem;font-weight:300;margin-bottom: 0.5em;}
/* --- スタッフキャスト基本レイアウト --- */
#page section#staffcast2 h3 {
    background: rgba(191,179,151,0.5);
    padding: 0.25em;
    width: 100%;
}

#page section#staffcast2 dl {
    columns: 2;
}

#page section#staffcast2 dl dd {
    break-inside: avoid-column;
    margin-bottom: 1em;
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 1.1;
    position: relative; /* ボタン配置用 */
}

#page section#staffcast2 dl dd i {
    display: block;
    font-style: normal;
    font-size: 1.6rem;
    font-weight: 300;
    margin-bottom: 0.5em;
}

/* --- commentボタン --- */
.comment-btn {
    background: #a043a2;
    color: #fff;
    border: none;
    padding: 4px 24px 6px 8.2px;
    font-size: 1.2rem;
    cursor: pointer;
    margin-left: 10px;
    border-radius: 3px;
    vertical-align: middle;
    font-weight: normal;
    letter-spacing: normal;
    position: absolute;
    right: 2em;
}
.comment-btn::before {
    transition: .3s;
    content: "";
    background: url(../img/cmnt.svg) no-repeat;
    background-size: 100% auto;
    width: 1em;
    height: 1em;
    display: block;
    right: 1em;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 6.4px;
}

.comment-btn:hover {
    background: #bd56bf;
}

/* --- モーダル (Pop-up) --- */
.modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
}
.modal-content {
    margin: 10% auto;
    width: 90%;
    max-width: 0px;
    border-radius: 10px;
    border: 3em solid;
    border-image-source: url(../img/frame_white.png);
    border-image-slice: 80;
    border-image-repeat: round;
    cursor: pointer;
    max-width: 980px;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    display: inline-table;
}
.modal-close {
    position: absolute;
    right: -10px;
    top: -12px;
    font-size: 30px;
    cursor: pointer;
    color: #999;
}
.modal-body {
        padding: 30px;
    display: flex;
    gap: 25px;
    align-items: flex-start;
    background: white;
}
.modal-img-wrap {
    flex: 0 0 160px;
}
.modal-img-wrap img {
    width: 100%;
    height: auto;
    border-radius: 6px;
}
.modal-info {
    flex: 1;
}
#modalName {
    font-size: 2.2rem;
    color: #a043a2;
    margin: 0 0 15px 0;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}
#modalName span{
    font-size: 0.8em;
    margin-left: 1em;
}
#modalComment {
    font-size: 1.6rem;
    line-height: 1.6;
    color: #444;
}
#modalName{
    pointer-events: none;
}
#commentModal-special .large-img img {
    width: 180%; /* 好きなだけ大きく */
    max-width: none;
    transform: translateX(-20%); /* 位置調整も自由 */
}

#commentModal-special .modal-content {
    width: 80%; /* モーダル自体の幅も変えられる */
}
@media screen and (max-width: 768px) {
    #page section#staffcast2 dl { columns: 1; }
    .modal-body { flex-direction: column; align-items: center; }
    .modal-img-wrap { width: 150px; }
    div.modal:nth-of-type(4) .modal-img-wrap {
    width: 180px !important;
}
}
/* 4番目のモーダル内の枠を180pxにする */
div.modal:nth-of-type(4) .modal-img-wrap {
    flex: 0 0 180px !important; /* widthではなくflexの基底サイズを上書き */
    width: 180px !important;
}

/* 4番目の画像サイズも枠に合わせて調整 */
div.modal:nth-of-type(4) .modal-img-wrap img {
    width: 100% !important;
}

/* スマホ時（768px以下）の設定が干渉しないよう上書き */
@media screen and (max-width: 768px) {
    div.modal:nth-of-type(4) .modal-img-wrap {
        width: 180px !important;
        flex: 0 0 180px !important;
    }
}

/*books*/
#page section#books{}
#page section#books h2:not(.titles){background: rgba(191,179,151,0.5);padding: 0.5em;;}
#page section#books h3{padding: 0.5em;color: #a043a2;font-size:2.4rem;}
#page section#books .novel{margin-bottom: 3em;}
#page section#books ul{display:flex;flex-wrap:wrap;margin: 0 auto;}
#page section#books ul li{width: 19%;margin:0.5%;font-size:1.4rem;        border:2em solid;border-image-source: url(../img/frame00.png);border-image-slice: 80; border-image-repeat: round;box-sizing: border-box;}
#page section#books ul li a{display:block;}
#page section#books li figure{background: rgba(255,255,255,0.6);    height: 100%;width: 100%;margin: 0;}
#page section#books li figure a{overflow: hidden;}
#page section#books li:hover{overflow:inherit;top: -2px;position:relative;} 

.ovllink{width: 50%;display: block; margin: 2em auto;line-height: 0;position:relative;overflow: initial;;}
.ovllink img{border: 3px solid #fff;display: block;box-sizing:border-box;}
.ovllink:hover{} 
.ovllink:hover img{top: -2px;position:relative;} 


/*special*/
#page section#special{}
#page section#special ul.wrap{display:flex;flex-wrap:wrap;margin: 0 auto;}
#page section#special ul li.anim{width: 32.333%;margin:0.5%;font-size:1.4rem;        border:2em solid;border-image-source: url(../img/frame00.png); border-image-slice: 80;border-image-repeat: round;box-sizing: border-box;}
#page section#special ul li a{display:block;}
#page section#special li figure{background: rgba(255,255,255,0.6);    height: 100%;width: 100%;margin: 0;}
#page section#special li figure a{overflow: hidden;}
#page section#special li:hover{overflow:inherit;top: -2px;position:relative;}
#page section#special ul li.kj{width: 100%;}
#page section#special .kj{padding: 3em 5%;}
#page section#special .kj date,
#page section#goods .kj date{margin-bottom: 2em;background: #a043a2;border:1px solid #fff;color:#fff;font-size:1.6rem;    letter-spacing: .15em;display:inline-block;padding: 0.5em 0.75em;}
#page section#special .kj h2,
#page section#goods .kj h2{border-bottom:1px solid #ddd;margin-bottom: 2em;padding-bottom: 0.5em;font-size:3rem;}
#page section#special .kj a{color:#a043a2;text-decoration:underline;}
#page section#special .kj a:hover{text-decoration:none;}

/*music*/
#page section#music{}
#page section#music ul{display:flex;flex-wrap:wrap;margin: 0 auto;}
#page section#music ul li{width: 100%;margin:0.5%;font-size:1.4rem;        border:2em solid;border-image-source: url(../img/frame00.png); border-image-slice: 80;border-image-repeat: round;box-sizing: border-box;}
#page section#music ul li a{display:flex;align-items:center;background: rgba(255,255,255,0.6);}
#page section#music li figure{background: rgba(255,255,255,0.6);margin: 0;width: 30%;}
#page section#music li h3{width: 70%;padding-left: 1em;font-size:1.8rem;}
#page section#music li:hover{overflow:inherit;top: -2px;position:relative;} 


/*goods*/
#page section#goods{}
#page section#goods ul{display:flex;flex-wrap:wrap;margin: 0 auto;}
#page section#goods ul li{width: 100%;margin:0.5%;font-size:1.4rem;        border:2em solid;border-image-source: url(../img/frame00.png); border-image-slice: 80;border-image-repeat: round;box-sizing: border-box;}
#page section#goods ul li a{display:flex;align-items:center;background: rgba(255,255,255,0.6);}
#page section#goods li figure{background: rgba(255,255,255,0.6);margin: 0;width: 30%;}
#page section#goods li h3{width: 70%;padding-left: 1em;font-size:1.8rem;}
#page section#goods li:hover{overflow:inherit;top: -2px;position:relative;} 
.lists figure{list-style-type:none;width: 100%;height: auto;position: relative;}
.lists figure:before {content: "";display: block;padding-top: 100%; }
.lists figure span{display: block;position: absolute;top: 0;left: 0;width: 100%;height: 100%;text-align: center;box-sizing: border-box;}
.lists figure span:before{content: "";height: 100%;vertical-align: middle;width: 0px;display: inline-block;}
.lists figure span > *{vertical-align: middle;display: inline-block;}
.lists span img{max-width: 100%;height: auto;max-height: 100%;width: auto;}




/*character*/
#page section#character{}
#page section#character ul{display:flex;flex-wrap:wrap;margin: 0 auto 2em;}
#page section#character ul li{width: 49%;margin:0.5%;font-size:1.4rem;border:2em solid;border-image-source: url(../img/frame00.png); border-image-slice: 80;border-image-repeat: round;box-sizing: border-box;}
#page section#character ul li a{display:block;}
#page section#character ul li figure{background: rgba(255,255,255,0.6);    height: 50vw;max-height:800px;width: 100%;margin: 0;position:relative;overflow: hidden;}
#page section#character ul li figure figcaption{background: #faf9f7;width: 30%;font-size:3rem;position: absolute;font-size:2rem;font-weight:600;text-align:center;
    right: 0;
    bottom: 0;
    padding: 0.25em;}
#page section#character ul li figure a{overflow: hidden;}
#page section#character ul li:hover{overflow:inherit;top: -2px;position:relative;} 
#page section#character ul li img{position: relative;}
#page section#character ul li a{    width: 50vw;max-width:800px;}
#page section#character ul li img{max-width:none;}
#page section#character ul li.c1 img{ width: 140%;left: calc(50% - 95%);}
#page section#character ul li.c2 img{ width: 140%;left: calc(50% - 88%);    margin-top: -20%;}
#page section#character ul li.c3 img{ width: 140%;left: calc(50% - 90%);    margin-top: -30%;}
#page section#character ul li.c4 img{ width: 90%;left: calc(50% - 64%);    margin-top: 5%;}

#page section#character ol{display:flex;flex-wrap:wrap;margin: 0 auto;}
#page section#character ol li{width: 32.33%;margin:0.5%;font-size:1.6rem;}
#page section#character ol li figure a{position:relative;display:block;}
#page section#character ol li figure a:hover{top: -2px;}
#page section#character ol li figure a:before{display:block;content:"";width: 100%;height: 100%;position:absolute;background: url(../img/frame2.svg) no-repeat;background-size: 100% 100%;filter: drop-shadow(0 0 2px rgba(0,0,0,1));}
#page section#character ol li figure a img{display:block;}

#page section#character .single .titles + div{display:flex;align-items:center;}
#page section#character .single .titles + div >figure{width: 60%;}
#page section#character .single .titles + div .dtl{width: 55%;margin-left: -15%;}
#page section#character .single .titles + div .dtl ol{display:flex;justify-content:space-between;}
#page section#character .single .titles + div .dtl ol li{width: 49%;}
#page section#character .single .titles + div .dtl h1{margin: 0 ;padding-bottom: 0.5em;}
#page section#character .single .titles + div .dtl h2{margin: 0;padding-bottom: 0.5em;    font-weight: 600;}
#page section#character .single .titles + div .dtl p{margin: 0;padding-bottom: 2em;}

#page section#character .single_other .continner > div.cc{display:flex;align-items:center;margin-bottom: 2em;}
#page section#character .single_other .continner > div.cc >div{width: 50%;padding-left: 2em;}
#page section#character .single_other .continner > div.cc >div h2{margin-bottom: 0.5em;font-size:3rem;}
#page section#character .single_other .continner > div.cc >div h3{background: #a043a2;color:#fff;display:inline-block;    line-height: 1.5; padding: 0 0.5em;font-size:1.8rem;}
#page section#character .single_other .continner > div.cc >figure{width: 50%;position:relative;}
#page section#character .single_other .continner > div.cc >figure:before{display:block;content:"";width: 100%;height: 100%;position:absolute;background: url(../img/frame2.svg) no-repeat;background-size: 100% 100%;filter: drop-shadow(0 0 2px rgba(0,0,0,1));}

/*MAP&KEY*/
#page section#mapkey .frames > div.frames_inner{padding: 2em 5%;box-sizing:border-box;}
#page section#mapkey .frames > div.frames_inner > figure img{display:block;}
#page section#mapkey .frames > div.frames_inner .key_index{background: #f4f2f3;padding: 1em;display:flex; flex-wrap: wrap;margin: 0;}
#page section#mapkey .frames > div.frames_inner .key_index dt{width: 100%;margin-bottom: 0.5em;}
#page section#mapkey .frames > div.frames_inner .key_index dt span{    display: inline-block;background: #a043a2;padding: 0.25em 1em;color: #fff;font-size: 1.3rem;border-radius: 0.5em;}
#page section#mapkey .frames > div.frames_inner .key_index dd{margin: 0.25em;}
#page section#mapkey .frames > div.frames_inner .key_index dd a{background: rgba(191,179,151,0.5);color:#000;display:block;padding: 0.25em 0.75em;border-radius:0.25em;}
#page section#mapkey .frames > div.frames_inner .key_index dd a:hover{background: rgba(191,179,151,0.8);}

#page section#mapkey .frames > div.frames_inner ul.keys li{
    display:flex;width: 100%;border-bottom:1px solid #ddd;padding: 1em 0;align-items: center;
}

#page section#mapkey .frames > div.frames_inner ul.keys li figure{width: 30%;order:2;}
#page section#mapkey .frames > div.frames_inner ul.keys li figure img{border-radius:0.5em;}
#page section#mapkey .frames > div.frames_inner ul.keys li div{width: 100%;order:1;}
#page section#mapkey .frames > div.frames_inner ul.keys li div h2 span{font-size:1.5rem;font-weight:normal;margin-left: 1em;color:#a043a2;}
#page section#mapkey .frames > div.frames_inner ul.keys li div p{font-size:1.5rem;}
#page section#mapkey .frames > div.frames_inner ul.keys li figure{padding-left: 1em;}
#page section#mapkey .frames > div.frames_inner ul.keys li figure + div{width: 70%;}
#page section#mapkey h3{
width: 100%;
    color: #fff;
    font-weight: bold;
    text-align: center;
    border-radius: 10px;
        margin: -50px auto 0;
    position: relative;
    background: url(../img/grad.png) no-repeat;
    background-size: 100% 100%;
    padding: 0.8em;
    max-width: 300px;
    font-size: 16px;
}
.new-mark {
    color: #ff0000;
    font-weight: bold;
    margin-right: 5px;
    font-size: 0.9em;
}
.new_keyword_container_item h3{
    color: #a043a2;
    font-size: 2em;
}
.new_keyword_container_item{
    margin: 2em 0;
    background: rgba(191, 179, 151, 0.2);
    padding: 1.5em 2em 0 !important;
    border-radius: 1em;
box-shadow: 0 0 0.5em #ccc;
border: 0.2em solid #FFFFFF !important;
width: 90% !important;
 margin: 3em auto;
}
.new_keyword_container_item .is-pickup{
    padding: 0;
    border-bottom: 1px solid #fff !important;
}
.new_keyword_container_item .is-pickup:last-child {
    border-bottom: none !important;
}
/*special*/
#page section#movie{}
#page section#movie ul{display:flex;flex-wrap:wrap;margin: 0 auto;}
#page section#movie ul li{width: 32.333%;margin:0.5%;font-size:1.4rem;        border:2em solid;border-image-source: url(../img/frame00.png); border-image-slice: 80;border-image-repeat: round;box-sizing: border-box;}
#page section#movie ul li a{display:block;}
#page section#movie li figure{background: rgba(255,255,255,0.6);    height: 100%;width: 100%;margin: 0;}
#page section#movie li figure a{overflow: hidden;}
#page section#movie li:hover{overflow:inherit;top: -2px;position:relative;} 

/*pagenavi*/
.wp-pagenavi{display:flex;
    margin-top: 1em;
    justify-content: center;}
.wp-pagenavi .pages{display:none;}
.wp-pagenavi a, .wp-pagenavi span {min-width: 2em; text-align: center;box-sizing: border-box;}
.wp-pagenavi span.current{background: #a043a2;color:#fff;border:#800080 1px solid;}

/*syphilis_btn*/
/* #page section ul.syphilis_btn{
    display: flex;
    justify-content: center;
    gap: 2em;
    margin-bottom: 1em;
}
#page section ul.syphilis_btn li{
    width: 25%;
}
#page section ul.syphilis_btn li a {
    display: block;
    text-align: center;
    background: rgba(191, 179, 151, 0.5);
    padding: 0.6em;
    font-weight: bold;
    font-size: 1.4em;
    transition: background-color 0.3s, color 0.3s;
    cursor: pointer;
}
#page section ul.syphilis_btn li:hover a {
    color: #ffffff !important;
    background: #a043a2;
} */

/* --- syphilis_btn (最終調整版) --- */

#page section ul.syphilis_btn {
    display: flex;
    justify-content: center;
    gap: 2em;
    margin-bottom: 1em;
}

#page section ul.syphilis_btn li{
    width: 25%;
    transition: transform 0.3s ease; /* 拡大を滑らかにする */
}

#page section ul.syphilis_btn li a {
    font-weight: bold;
    font-size: 1em;
    text-decoration: none;
    background: #CCC3AC;
    color: #fff;
    cursor: pointer;
    position: relative;
    display: block;
    /* padding: 1em; */
    text-align: center;
        border: 1em solid;
    border-image-source: url(../img/frame2.svg);
    border-image-slice: 6;
    border-image-repeat: round;
    box-sizing: border-box;
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 1));
}
/* #page section ul.syphilis_btn li a:before {
    display: block;
    height: 100%;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    position: absolute;
    border: 1.5em solid;
    border-image-source: url(../img/frame2.svg);
    border-image-slice: 10;
    border-image-repeat: round;
    box-sizing: border-box;
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 1));
} */

/* #page section ul.syphilis_btn li:not(.current):hover {
    transform: scale(1.05); 
} */
#page section ul.syphilis_btn li:not(.current) a {
    background:linear-gradient(to right,#a043a2,   #a043a2 40%,  transparent 66%, transparent) 96% 0 / 330% 100%; transition:background-position 0.5s;
   background-color: #CDC5B5;
}
#page section ul.syphilis_btn li:not(.current) a:hover{background-position:4% 0;color:#fff;}

#page section ul.syphilis_btn li.current a {
    background: #a043a2;
    color: #ffffff !important;
    pointer-events: none;
}
#page section ul.syphilis_btn li.current:hover {
    transform: none;
}

/* スマホ用フォントサイズ維持 */
@media screen and (max-width: 768px) {
    #page section ul.syphilis_btn li a {
        font-size: 100%;
    }
}

/* ★NEW★設定 */
.new-mark {
    color: #ff0000;
    font-size: 0.5em;        /* タイトルより小さめ */
    margin-left: 0.8em;      /* タイトルとの間隔 */
    font-weight: bold;
    line-height: 1;          /* 自身の行間をリセットして中央に寄せやすくする */
    display: inline-block;
}
#page section#mapkey .frames > div.frames_inner ul.keys li div h2 span.new-mark {
    color: #ff0000 !important; /* 強制的に赤にする */
    font-size: 0.5em;
    margin-left: 0.8em;
    font-weight: bold;
    display: inline-block;
    line-height: 1;
}

/* 縦中央揃えのための親要素設定 */
#page section#mapkey .frames > div.frames_inner ul.keys li div h2 {
    display: flex;
    align-items: center;
}

@media screen and (max-width: 1160px) {
	
	article.contents >header #menu{width:300px;max-width:408px;min-width:300px;}
	
	#top >section >div{flex-wrap:wrap;}
	#top >section #twitter,#top >section #news{width: 100%;margin: 0;}
	
	#page section#books ul li{width: 32.3%;}
	#page section#special ul.wrap li{width: 49%;}
	#page section#movie ul li{width: 49%;}
	#page section#staffcast dl,	#page section#staffcast2 dl{columns: 1;}
	
	#page section#character ul li{width: 49%;}
	#page section#character ul li figure{height: 30vw;max-height:800px;width: 100%;}
	#page section#character ul li a{    width: 30vw;max-width:800px;}
	#page section#character ul li img{max-width:none;}
	#page section#character ul li.c1 img{ width: 140%;left: calc(50% - 85%);}
	#page section#character ul li.c2 img{ width: 140%;left: calc(50% - 78%);    margin-top: -20%;}
	#page section#character ul li.c3 img{ width: 140%;left: calc(50% - 80%);    margin-top: -30%;}
	#page section#character ul li.c4 img{ width: 90%;left: calc(50% - 54%);    margin-top: 5%;}
	#page section#character ul li figure figcaption{width: 50%;font-size:1.75vw}
	#page section#character .single .titles + div{display:block;overflow: hidden;}
	#page section#character .single .titles + div >figure{width: 120%;margin-left: -10%;}
	#page section#character .single .titles + div .dtl{margin: 0;width: 100%;}
	#page section#character .single .titles + div .dtl h2{font-size:1.8rem;}
	#page section#character .single .titles + div .dtl p{font-size:1.6rem;line-height: 1.6;}
}


@media screen and (max-width: 1080px) {
    #top >section#main_visual{width:calc(100% - 300px);    box-sizing: border-box;}
    .ch_tl {
        position: absolute;
        z-index: 1;
        bottom: 10%;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        transition: ease-in-out;
    }
    .slick-dots{
        position: relative;
        margin-bottom: 0;
        bottom: 3em;
        left: calc(50% - .35em);
        width: auto;
        transform: translateX(-50%);
    }
    .slick-dots li {
        width: 2em;
        margin: 0;
    }
    .slick-dots li button {
        position: relative;
        width: 3em;
        height: 3em;
        padding-right: .5em;
    }
    .slick-dots li button:before {
        width: 100%;
        content: "";
        background: #fff;
        position: absolute;
        width: 3em;
        height: 3em;
    }
}


/*smp*/
@media screen and (max-width: 768px){
    h1.sp{
        display: none;
    }
#page section#special .kj h2,
#page section#goods .kj h2,
#page section#music .kj h2{
    font-size: 2.2rem;

        padding-bottom: 0.75em;
        margin: 0;
        line-height: 1.6;
}

body{min-width:1px;}
.pc{display:none;}
.sp{display:block;}
article{overflow:hidden;}
article.contents{}
article.contents{display:block;}
article.contents >header{position:static;}
article.contents >header #menu{
    position:static;
    padding: 0;
    height: auto;
}
footer{text-align:center;}

article.contents >header{widows: 0;max-width:0;min-width:0;}
article.contents >section,.continner_sk{max-width:inherit;}
article.contents >section,.continner_sk{width: 100%;min-width:0;}

header{z-index:1;}
header nav dd:not(:last-child){border-bottom: 1px solid #bbb0a3;}
.open #gloval-nav dd a{    padding: 0.5em 0.5em 0.25em 0.5em;}
.open #gloval-nav h1 {width: 80%;}
.open #gloval-nav h1 a{width: 60%;}
.start{display:none;}
.bnarea{display:flex;flex-wrap:wrap;margin: 0;justify-content:space-between;width: 80%;margin-top: 0.33em;}
.bnarea li{width: 48%;}
.open #gloval-nav .bnarea li a{padding: 0;}
/* X設定#TOPに詳細あります */
/* header nav .li_sns_x{
    display: none;
} */
.open #gloval-nav li:nth-of-type(3){display: none;}

#top >section{padding: 0;}
#top >section#main_visual{width: 100%;}
/* #top >section#main_visual h1.tl{position: absolute;top:130vw;z-index: 1;} */
#top >section#main_visual div.st{position: absolute;top:164.5vw;z-index: 1;    width: 100%;background: rgba(255,255,255,0.5);font-family:'Josefin Sans', sans-serif;
    left: 0;
    padding:4vw 2vw;}
#top >section#main_visual div.st{color:#fff;background: #a043a2;filter: drop-shadow(0 0 2px rgba(0,0,0,1));/*text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff;*/}
#top >section#main_visual div.st h3 span{font-size:7vw;text-align-last: justify;line-height:0.8;font-family:'Oranienbaum', serif;}
#top >section#main_visual div.st h3{font-size:9.5vw;text-align-last: justify;line-height:0.5;    padding-top: 0.2em;}
#top >section#main_visual div.st h4{font-size:2.9vw;}
#top >section#main_visual .slide{
    width: 100vw;
    /* margin-left: -15%; */
    margin-bottom: 0;
}
.slick-dots li {
    width: 1.4em;
    margin: 0;
}
.slick-dots li button:before {
    width: 100%;
    content: "";
    background: #fff;
    position: absolute;
    width: 2em;
    height: 2em;
}
.slick-dots li button:before:hover {
    opacity: .3;
}
.slick-dots li button:before {
    opacity: .3;
}

#top >section #main_visual #sns_x{display: block; margin-top: 5%;}

#top >section >div{display:block;}
#top >section #twitter, #top >section #news{width: 100%;margin: 0;}

#top >section #news ol li a{}
#top >section >div{
    padding: 0 2.5% 0 2.5%;
}
#top >section >div#slide_area {
    padding: 0;
}
#top >section #news ol li a{padding: 0.5em 0;}
#top >section #news ol li a span:first-child{font-size: 1.2rem;padding: 0.25em 0.5em;width: 27.5%;min-width: auto;}
#top >section #news ol li a span:last-child{    font-size: 1.4rem;}

/* X設定#TOP */
#top >section #sns_x{display: block;max-width: 400px;transition: transform 0.3s ease-out;margin: 0 auto;margin-top: 4.5%;width: 80%;}
#top >section #sns_x:hover{transform: translateY(-5px);transition: transform 0.3s ease-out}
/* #main_visual .li_sns_x{
    display: block;
    border: 3em solid;
    border-image-source: url(../img/frame00.png);
    border-image-slice: 80;
    border-image-repeat: round;
    text-align: center;
    line-height: initial;
}
#main_visual a.sns_x{
    font-size: 120%;
    padding-top: 0;
}
#main_visual a.sns_x div{
    width: 6.5%;
    margin: 0 0.3em;
    min-width: 15px;
} */

#page section .titles{text-align:left;margin-bottom: 0.2em;white-space: nowrap;    left: -2.5%;line-height: 0.8;}
#page section{padding: 0;}
#page .continner{padding: 0 2.5%;}
#page section .posts h1{padding: 1em 0;font-size:2.2rem;}
#page section .posts p{padding: 1em 0;font-size:1.4rem;}
#page section .posts h2:not(.titles){font-size:1.8rem;font-weight: 600;}

#page section#news ol li a{}
#page section#news ol{padding: 0;}
#page section#news ol li a{padding: 0.5em 0;}
#page section#news ol li a span:first-child{font-size: 1.2rem;padding: 0.25em 0.5em;}
#page section#news ol li a span:last-child{    font-size: 1.4rem;}
#page section#news .kj{padding: 0;}
#page section#news .kj date,
#page section#special .kj date,
#page section#goods .kj date,
#page section#music .kj date{font-size:1.2rem;}
#page section#news .kj h2{ font-size: 2.2rem;    padding-bottom: 0.75em;margin: 0;line-height: 1.6;}
#page section#news .kj p{line-height: 1.6;}
#page section#news .kj figure{width: 100%!important;}

#page section#onair dl dd{width: 100%;font-size:1.2rem;}
#page section ul.syphilis_btn{gap: 1rem;}
#page section ul.syphilis_btn li a{font-size: 100%;}
#page section ul.syphilis_btn li{
    width: 46%;
}

#page section#story .posts iframe{height: 50vw;}
#page section#story ol.switch{justify-content:center;flex-wrap:wrap;}
#page section#story ol.switch li{margin: 1% 0 0;}
div.switch h3.mds03 {
    margin: 0px auto -40px;
        width: 60%;
}
div.switch .frame {
    margin-top: 0;
}
#page section#story #story_cont .slick-slide{padding: 0 0 0 0.15em;}
#page section#story #story_nav .slick-slide {
  width: calc(100% / 3) !important;
}

#page section#staffcast dl,#page section#staffcast2 dl{columns: 1;}
#page section#staffcast dl dd,#page section#staffcast2 dl dd{    font-size: 1.8rem;}
#page section#staffcast dl dd i,#page section#staffcast2 dl dd i{    font-size: 1.4rem;}
    .comment-btn {
    right: 0em;
    }
    p.modalComment {
        /* 最大の高さを指定（画面高さの半分程度が使いやすいです） */
        max-height: 50vh; 
        
        /* 縦方向にはみ出た場合にスクロールを許可 */
        overflow-y: auto; 
        
        /* 改行を反映させ、単語の途中で変に切れないようにする */
        white-space: pre-wrap;
        word-break: break-all;
        
        /* スクロールを滑らかにする（iOS対策） */
        -webkit-overflow-scrolling: touch;
        
        /* 読みやすさの調整 */
        line-height: 1.6;
        padding-right: 10px; /* スクロールバーとの重なり防止 */
    }

    /* スクロールバー自体のデザイン（任意：細くするとスッキリします） */
    p.modalComment::-webkit-scrollbar {
        width: 5px;
    }
    p.modalComment::-webkit-scrollbar-thumb {
        background: #a043a2; /* ボタンと同じ紫にする */
        border-radius: 10px;
    }



#page section#character ul li{width: 100%;}
#page section#character ul li figure{height: 70vw;max-height:800px;width: 100%;}
#page section#character ul li a{    width: auto;max-width:800px;}
#page section#character ul li.c1 img{ width: 140%;left: calc(50% - 75%);}
#page section#character ul li.c2 img{ width: 140%;left: calc(50% - 68%);    margin-top: -20%;}
#page section#character ul li.c3 img{ width: 140%;left: calc(50% - 70%);    margin-top: -30%;}
#page section#character ul li.c4 img{ width: 90%;left: calc(50% - 44%);    margin-top: 5%;}
#page section#character ul li figure figcaption{font-size:3vw}

#page section#character .single .titles + div{display:block;}
#page section#character .single .titles + div >figure{width: 120%;margin-left: -10%;}
#page section#character .single .titles + div .dtl{margin: 0;width: 100%;}
#page section#character .single .titles + div .dtl h2{font-size:1.8rem;}
#page section#character .single .titles + div .dtl p{font-size:1.6rem;line-height: 1.6;}
#page section#character ol{justify-content:space-between;}
#page section#character ol li{width: 48%;margin-bottom: 0.5em;}
#page section#character ol li a{width: 100%;}
#page section#character .single_other .continner > div.cc{flex-wrap:wrap;}
#page section#character .single_other .continner > div.cc >div{width: 100%;padding: 1em 1em 0 1em;}
#page section#character .single_other .continner > div.cc >div h2{font-size:2rem;}
#page section#character .single_other .continner > div.cc >div h3{font-size:1.6rem;}
#page section#character .single_other .continner > div.cc >div p{font-size:1.4rem;}
#page section#character .single_other .continner > div.cc >figure{width: 100%;}

#page section#books ul{justify-content:space-between;}
#page section#books ul li{width: 49%;}
#page section#books h3{    font-size: 2.2rem;}

#page section#special ul li.anim{width: 100%;}
#page section#special .kj{padding: 3em 0;}

#page section#movie ul li{width: 100%;}

#page section#mapkey .frames > div.frames_inner{padding: 0;}
#page section#mapkey .frames > div.frames_inner .key_index{background: none;padding: 0;}
#page section#mapkey .frames > div.frames_inner .key_index dd{font-size:1.4rem;}
#page section#mapkey .frames > div.frames_inner ul.keys li{flex-wrap:wrap;}
#page section#mapkey .frames > div.frames_inner ul.keys li figure{width: 100%;padding-left: 0;}
#page section#mapkey .frames > div.frames_inner ul.keys li figure + div{width: 100%;}
.new_keyword_container_item h3{
    font-size: 1.4em;
}
.new_keyword_container_item {
   padding: 1em 1em 0.5em !important;
}
#page section#mapkey h3 {
    margin: -43px auto 0;
}
.new_keyword_container_item {
    border-radius: 0.5em;
    width: 100% !important;
}
.frames > div{padding: 00!important;}
.frames > div p{margin: 0;}



footer{padding: 0　0 0.5em 0;}


/***************************/
#gloval-nav h1{opacity:0;}
#nav-toggle {position: fixed;top: 25px;right: 25px;height: 32px;cursor: pointer;z-index: 1}
#nav-toggle > div {position: relative;width: 36px;}
#nav-toggle span {width: 100%;height: 1px;left: 0;display: block;background: #333;position: absolute;transition: top .5s ease, -webkit-transform .6s ease-in-out;transition: transform .6s ease-in-out, top .5s ease;transition: transform .6s ease-in-out, top .5s ease, -webkit-transform .6s ease-in-out;}
/*#nav-toggle span{filter: drop-shadow(0 0 5px rgba(0,0,0,1));}*/
#nav-toggle span:nth-child(1) {top: 0;}
#nav-toggle span:nth-child(2) {top: 14px;}
#nav-toggle span:nth-child(3) {top: 28px;}
#nav-toggle:hover span:nth-child(1) {top: 4px;}
#nav-toggle:hover span:nth-child(3) {top: 23px;}

#gloval-nav {background: #000;color: #fff;position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 990;text-align: center;display: flex;visibility: hidden;flex-direction: column;justify-content: center;align-items: center;font-size: 29px;opacity: 0;transition: opacity .6s ease, visibility .6s ease;}

#gloval-nav dd{opacity:0;}

.open #gloval-nav {z-index: 11;background: #cdc1b4;color: #000;position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 10;text-align: center;display: flex;visibility: hidden;flex-direction: column;justify-content: center;align-items: center;opacity: 0;transition: opacity .3s ease, visibility .3s ease;}
.open #gloval-nav a {height: auto;display: block;color: #000;text-decoration: none;padding: 10px 0;transition: color .6s ease;font-size:1.7rem;}
.open #gloval-nav a:hover {color: #666;}
.open #gloval-nav h1 {width: 80%;opacity:1;transition-delay: .5s;transition: opacity .2s ease, -webkit-transform .6s ease;transition: transform .6s ease, opacity .2s ease;transition: transform .6s ease, opacity .2s ease}
.open #gloval-nav dl {width: 80%;position: relative;list-style: none;left:0;margin:0 auto;    font-size: 2rem;right:0;}
.open #gloval-nav dl dd {margin: 0;opacity:1;transition: opacity .2s ease, -webkit-transform .6s ease;transition: transform .6s ease, opacity .2s ease;transition: transform .6s ease, opacity .2s ease, -webkit-transform .6s ease;}
.open #gloval-nav dl dd:first-child a{height: auto;}
.open #gloval-nav dl dd:nth-child(2) {transition-delay: .0s;}
.open #gloval-nav dl dd:nth-child(3) {transition-delay: .15s;}
.open #gloval-nav dl dd:nth-child(4) {transition-delay: .2s;}
.open #gloval-nav dl dd:nth-child(5) {transition-delay: .25s;}
.open #gloval-nav dl dd:nth-child(6) {transition-delay: .3s;}
.open #gloval-nav dl dd:nth-child(7) {transition-delay: .35s;}
.open #gloval-nav dl dd:nth-child(8) {transition-delay: .4s;}
.open #gloval-nav dl dd:nth-child(9) {transition-delay: .45s;}
.open #gloval-nav dl dd:nth-child(10) {transition-delay: .5s;}
.open #gloval-nav dl dd:nth-child(11) {transition-delay: .55s;}

.open #nav-toggle{z-index:11;}
.open #nav-toggle span {background: #fff;}
.open #nav-toggle span:nth-child(1) {top: 15px;-webkit-transform: rotate(45deg);transform: rotate(45deg);}
.open #nav-toggle span:nth-child(2) {top: 15px;width: 0;left: 50%;}
.open #nav-toggle span:nth-child(3) {top: 15px;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);}

/* open */
.open {overflow: hidden;}
.open #gloval-nav {visibility: visible;opacity: 1;margin:0;}
.open #gloval-nav li {opacity: 1;-webkit-transform: translateX(0); transform: translateX(0);transition: opacity .9s ease, -webkit-transform 0.3s ease;transition: transform 0.3s ease, opacity .9s ease;transition: transform 0.3s ease, opacity .9s ease, -webkit-transform 0.3s ease;}
.open #top >section#main_visual h1.tl{z-index: 0;}
.open #top >section#main_visual .st{z-index: 0;}
}
/* スマホ用（425px以下）のレイアウト調整 */
@media screen and (max-width: 425px) {
    /* --- 【POPUP（モーダル）内のみ】余白を極限まで削減 --- */

    .modal-body {
        gap: 10px;               /* 画像とテキストエリアの距離を詰める */
        padding: 12px;
    }

    .modal-img-wrap {
        flex: 0 0 85px;          /* 画像を小さくして横幅を稼ぐ */
    }

    #modalName {
        font-size: 1.6rem;       /* 名前を小さく */
        margin-bottom: 3px;      /* 名前下のマージンを最小に */
        padding-bottom: 2px;     /* 名前下のパディングを最小に */
        border-bottom: 1px solid #eee;
    }

    #modalComment {
        font-size: 1.3rem;       /* 文字を凝縮 */
        line-height: 1.5;        /* 行間を詰めて高さを抑える */
        margin-top: 0.5em;   
        margin-bottom: 0;        /* 上の余白をゼロに */
        height: 20vh;
        overflow: auto;
        overflow-x: hidden;
        overflow-y: auto;
        display: block;
    }
    /* 1. バー全体の太さと表示設定 */
#modalComment::-webkit-scrollbar {
    width: 8px;              /* バーの横幅 */
    display: block !important; /* 強制的に表示 */
}

/* 2. 動く部分（つまみ）の設定 */
#modalComment::-webkit-scrollbar-thumb {
    background-color: #a043a2; /* ボタンと同じ紫色 */
    border-radius: 10px;      /* 角を丸く */
    border: 2px solid white;  /* 背景との間に隙間を作って見やすくする */
}

/* 3. バーが通る道（レール）の設定 */
#modalComment::-webkit-scrollbar-track {
    background: #f0f0f0;      /* 薄いグレー */
    border-radius: 10px;
}

/* --- 【重要】バーが表示されるスペースを確保する --- */
#modalComment {
    padding-right: 12px !important; /* 文字がバーに重ならないように */
    scrollbar-width: thin;          /* Firefox用 */
    scrollbar-color: #a043a2 #f0f0f0; /* Firefox用 */
}
    .modal-content {
        border: 2em solid;
        border-image-source: url(../img/frame_white.png);
        border-image-slice: 80;
        border-image-repeat: round;
    }

    .modal-close {
        top: -12px;
        right: -6px;
        font-size: 22px;
    }
        .comment-btn {
    right: 0em;
    }
    
    #page section ul.syphilis_btn li:not(.current) a {
    background:linear-gradient(to right,#a043a2,   #a043a2 40%,  transparent 66%, transparent) 94% 0 / 400% 100%; transition:background-position 0.5s;
   background-color: #CDC5B5;
}
#page section ul.syphilis_btn li:not(.current) a:hover{background-position:10% 0;color:#fff;}

}

/* --- 通常のスタイル --- */
.modal-img-wrap {
    flex: 0 0 160px; /* 通常は160px */
}

/* --- 4番目(is-specialクラスがある時)だけ180pxにする --- */
.modal.is-special .modal-img-wrap {
    flex: 0 0 260px !important;
}

/* --- 追加してくれたスクロール等の設定 --- */
.modal-info p {
    max-height: 50vh; 
    overflow-y: auto; 
    white-space: pre-wrap;
    word-break: break-all;
    -webkit-overflow-scrolling: touch;
    line-height: 1.6;
    padding-right: 10px;
}

.modal-info p::-webkit-scrollbar {
    width: 5px;
}
.modal-info p::-webkit-scrollbar-thumb {
    background: #a043a2;
    border-radius: 10px;
}

@media screen and (max-width: 768px) {
.modal.is-special .modal-img-wrap {
    flex: 0 !important;
    width: 180px;
}
}