@charset "UTF-8";
.headernavi{position:relative;}

#container{line-height:1.7;}
h3{margin-top:16px;}

#entrybox,#side{text-align:justify; word-break:break-all; text-justify:inter-character; text-justify:inter-character; word-wrap:break-word; overflow-wrap:break-word; line-break:strict; line-height:1.7;}

.read{margin:16px 0 16px 0; text-align:justify; word-break:break-all; text-justify:inter-character; text-justify:inter-character; word-wrap:break-word; overflow-wrap:break-word; line-break:strict; font-family: 'Noto Sans JP', sans-serif; font-weight:400;}
.read .line{letter-spacing:-0.8px;}
.read .credit{margin-top:16px; text-align:right; font-size:14px; font-size:1.4rem;}
.date{margin-top:0; font-size:13px; font-size:1.3rem; text-align:right;}

.note-ref,.note-target {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.0rem;
  font-weight: bold;
  color: #000;
  text-decoration: none;
  vertical-align: super;
  margin-left: 2px;
  padding: 0 2px;
  transition: all 0.2s;
}

.note-ref:hover,.note-target:hover {
  background-color: rgba(0, 123, 255, 0.1);
  border-radius: 4px;
  text-decoration: underline;
}

.note-ref::before,.note-target::before { content: "["; }
.note-ref::after,.note-target::after { content: "]"; }
.note-content {
  position: fixed;
  z-index: 1000;
  background: #fff;
  color: #333;
  padding: 24px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  font-size: 14px;
  line-height: 1.8;
  border: 1px solid #f0f0f0;
  visibility: hidden;
  opacity: 0;
  left: 50%;
  bottom: 20px;
  width: 92%;
  max-width: 400px;
  border-radius: 16px;
  transform: translate(-50%, 20px);
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); 
}

.note-content.is-active {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (min-width: 768px) {
  .note-content {
    top: 40%;
    bottom: auto;
    right: 40px;
    left: auto;
    
    width: 380px;
    height: auto;
    border-radius: 12px;
    
    transform: translate(50px, -50%); 
  }

  .note-content.is-active {
    transform: translate(0, -50%); 
  }
}

.note-close {
  display: block;
  text-align: right;
  font-size: 18px;
  color: #ccc;
  cursor: pointer;
  margin-bottom: 5px;
  line-height: 1;
  transition: color 0.2s;
}
.note-close:hover { color: #333; }

#entrybox{padding:0 16px; text-align:left; font-size:15px; font-size:1.5rem; max-width:800px; margin:0 auto;}
#entrybox h4{margin-top:40px; margin-bottom:24px; padding-bottom:16px; background:url("../../../lib09/all/sub-line.gif") left bottom repeat-x; font-family: 'Noto Serif JP', serif; font-weight:500; color:#e64f42; font-size:24px; font-size:2.4rem;}


#entrybox p{margin-bottom:16px; line-break:strict; text-align:justify; word-break:break-all; text-justify:inter-character; text-justify:inter-character; word-wrap:break-word; overflow-wrap:break-word; line-break:strict; font-family:Arial,'Noto Sans JP', sans-serif; font-weight: 400;}
#entrybox p .blue{color:#0071bc; font-weight:500; padding-right:8px;}
#entrybox p .orange{color:#e58011; font-weight:500; padding-right:8px;}
#entrybox p .pink{color:#e64290; font-weight:500; padding-right:8px;}
#entrybox p .green{color: #00830b; font-weight:500; padding-right:8px;}
#entrybox p.date{text-align:right;}
#entrybox .ind{letter-spacing:0;}
#entrybox .img{margin:0 auto; width:80%; margin-bottom:16px;}
#entrybox .img.full{display:block; width:100%;}
#entrybox .img.cap p{margin-bottom:0; padding:14px 14px 8px 14px; background: #eee; font-size:1.35rem;}

#entrybox .sp{display:none;}
#entrybox .pc{display:block;}
@media only screen and (min-width:660px) {
#entrybox .sp{display:block;}
#entrybox .pc{display:none;}
}

#entrybox .info{border:6px solid #eee; padding:0 16px;}
#entrybox .info h4{margin-top:0;}
#entrybox .info p{margin-bottom:16px;}
#entrybox .info .name{margin-top:16px; margin-bottom:8px; padding:0 8px; font-weight:bold; font-size:15px; background:none; text-align: left;}

#entrybox .spotify{width:90%; margin:0 auto;}
#entrybox .spotify2{width:100%; margin:0 auto 30px auto;}


#side p{margin-top:16px; font-family: 'Noto Sans JP', sans-serif; font-weight: 400;}
#side a{color:#fff;}
#side ul{margin-left:20px; list-style:disc;}
#side .profile.sidetop{margin:0;}
#side .profile{background:#222; color:#fff; margin-top:16px; padding:16px; text-align:justify;}
#side .profile .name{padding-bottom:8px; margin-bottom:16px; font-size:21px; font-size:2.1rem; font-weight:600; font-family: 'Noto Serif JP', serif; border-bottom:1px solid #fff;}
#side .profile .name .sml{padding-left:8px; font-size:13px; font-size:1.3rem; font-weight:100;}
#side .profile .img{max-width:200px; padding-bottom:8px;}

#side{padding:20px;}
#side p{margin-top:16px;}
#side a{color:#fff;}
#side ul{margin-left:20px; list-style:disc;}
#side .profile.sidetop{margin:0;}
#side .profile{background:#222; color:#fff; margin-top:16px; padding:16px; text-align:justify;}
#side .profile .name{padding-bottom:8px; margin-bottom:16px; font-size:21px; font-size:2.1rem; font-weight:600; font-family: 'Noto Serif JP', serif; border-bottom:1px solid #fff;}
#side .profile .name .sml{padding-left:8px; font-size:13px; font-size:1.3rem; font-weight:100;}
#side .profile .img{max-width:200px; padding-bottom:8px;}

#side .book{margin-bottom:8px; background:#e3ecef; padding:16px; text-align:center;}
#side .book .title{font-weight:600; padding-bottom:8px;}
#side .book .title .sml{display:block; font-size:13px; font-size:1.3rem; font-weight:100;}
#side .book img{max-width:100px; padding-bottom:8px;}
#side .book p{margin-bottom:32px;}

#side .disc{background:#e3ecef; padding:16px; text-align:left;}
#side .disc h5{font-size:16px; font-size:1.6rem;}
#side .disc .title{font-weight:600; padding-bottom:8px;}
#side .disc .title .sml{display:block; font-size:13px; font-size:1.3rem; font-weight:100;}
#side .disc .img{max-width:200px; padding-bottom:8px;}
#side .disc p{}


.footnotes {background:#e3ecef; padding:6px; text-align:left;
  margin-top: 16px;
}
.footnotes ol {list-style:none;}
.footnotes li {
  list-style:none;
  padding:8px;
  border:4px solid #e3ecef; 
  margin-bottom: 0.5em;
  line-height: 1.6;
  transition: background-color 0.5s; 
}
.back-link {
  color: #007bff;
  text-decoration: none;
  text-align:right;
  font-size: 1rem;
}
.footnotes li.highlight-note {
  border:4px solid #f2f4f5; 
  border-radius: 4px;
}


.pagenum{margin:30px 0; text-align: left;}
.pagenum ul{display:flex; width:100%; flex-wrap: nowrap; justify-content: center; font-family: 'Noto Sans JP', sans-serif; font-weight:400;}
.pagenum ul li{margin-right:16px;}
.pagenum ul li a{display:block; border:1px solid #000; width:40px; height:40px; text-align:center; line-height: 40px; text-decoration:none;}
.pagenum ul li a:hover{background:#222; color:#fff;}
.pagenum ul li .active{display:block; border:1px solid #000;  width:40px; height:40px; text-align:center; line-height: 40px; background:#000; color:#fff;}

/*
.pagenum,.pagenum-h{text-align:center;}
.pagenum a{display:inline-block; width:60%; margin:32px auto; text-decoration: none; background:#666; color:#fff; padding:16px 0;}
.pagenum a:hover{background:#999;}
.pagenum-h a{display:inline-block; width:35%; margin:32px 0; text-decoration: none; background:#666; color:#fff; padding:16px 0;}
.pagenum-h a:hover{background:#999;}
.mininavi{font-size: 13px; font-weight: 600; color:#006633; background:#eee; padding: 10px; margin: 5px 0 20px 0;}
*/

#side .website{position:relative; margin:8px auto; padding:16px 0; background:#fff; border:2px solid #000; text-align:center;}
#side a{display:block; color:#000; text-decoration:none; font-weight:600;}
#side a:hover{text-decoration:underline;}
#side .website:hover{background:#fee;}
#side .website::after{ content: ''; border: 0; border-top: solid 2px #000; border-right: solid 2px #000; display: inline-block; width: 6px; height: 6px; position: absolute; top: 50%; right: 16px; transform: translateY(-50%) rotate(45deg);}

#side .moviebox{margin:0 auto;}
#side .movie {position: relative; width: 100%; padding-top: 56.25%;}
#side .movie iframe {position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important;}
#side .moviebox p{margin-top:8px; text-align:left;}

@media only screen and (min-width:380px) {
#entrybox h4 img{height:25px; width:auto;}
#entrybox h4 img.two{height:66px; width:auto;}
}

@media only screen and (min-width:660px) {
#entrybox .spotify{display:block; float:right; width:40%; margin:0;}
#entrybox .spotifyleft{display:block; float:left; width:58%;}
.headernavi{position:absolute;}
#entrybox .img{display:block; width:45%;}
#entrybox .img.full{display:block; width:100%;}
#entrybox .img.right{float:right; margin:5px 0 8px 16px;}
#entrybox .img.left{float:left; margin:5px 16px 8px 0;}
#entrybox .img.lefth{float:left; margin:5px 16px 8px 0; width:30%;}
#entrybox .img.righth{float:right; margin:5px 0 8px 16px; width:30%;}

#side .profile{display:block; padding:0;}
#side .profile .name{padding:8px 0 ;}
#side .profile .txt{display:inline-block; max-width:65%; vertical-align:top;}
#side .profile .img{display:inline-block; vertical-align:top; padding:0 8px 0 0;}

#side .bookbox{display:inline-block; width:46%; margin:0 1%; vertical-align:top;}
#side .book{text-align:center;}
#side .book .title{text-align:left;}
#side .book img{max-width:70%; margin:0 auto; padding-bottom:8px;}

#side .disc .txt{display:inline-block; max-width:65%; vertical-align:top;}
#side .disc .img{display:inline-block; vertical-align:top; padding:0 8px 0 0;}
}

@media only screen and (min-width:780px) {
}

@media only screen and (min-width:960px) {
#container{max-width:1030px; margin:0 auto;}
#main{padding:0; display:flex; gap:16px;}
#entrybox{width:70%; padding:0;}

#side{flex:1; margin-top:16px; padding:0;}
#side .profile .img{padding:0; max-width:100%;}
#side .profile .txt{max-width:100%; padding:16px; box-sizing:border-box;}

#side .bookbox{display:block; width:100%;}
#side .book img{height:auto;}

#side .disc .img{padding:0; max-width:100%;}
#side .disc .txt{max-width:100%; padding:16px; box-sizing:border-box;}

#side .website{width:100%; min-width:inherit; text-align:left; padding: 16px 8px; box-sizing:border-box;}
footer{margin-top:32px;}
}

/*ClearFix*/
.cl:after {
  content: "";
  display: block;
  clear: both;
} 
.cl:before {
  content: "";
  display: block;
  clear: both;
} 
.cl {
  display: block;
}

#iconbox2{padding:5px 5px 5px 0; width:100%; background:#eee;}
/*#entry .authorbox .title #iconbox a{float:left; margin:0 0 0 5px;}*/
#iconbox2 .snsbtn{display:block; float:right; margin-right:5px;}
#iconbox2 iframe.twitter-share-button { width: 125px!important;
}